/* styles/style_battle_wheel.css (微调边框大小) */
/* 职责：定义跑马灯轮盘和投注区的所有样式。 */

.symbol-grid-container { 
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(7, 1fr); 
    width: 100%;
    aspect-ratio: 9 / 7; 
    position: relative;
}

.animation-area { 
    grid-column: 2 / span 7;
    grid-row: 2 / span 5; 
    background-color: rgba(0,0,0,0.2);
    border-radius: 0.5rem;
    display: grid; 
    place-items: center; 
    color: var(--color-border); 
    font-size: 2.5rem; 
    font-weight: bold;
    z-index: 10;
}

.symbol-cell { 
    aspect-ratio: 1 / 1;
    background-color: #1c2733; 
    border-radius: 0.25rem; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: 0.125rem solid transparent; 
    transition: all 0.3s ease;
    position: relative;
}

.symbol-cell.dimmed > img { 
    filter: brightness(0.35) saturate(0.5); 
}

.symbol-cell.semi-dimmed > img { 
    filter: brightness(0.7) saturate(0.8);
}

.symbol-cell img { 
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    border-radius: 0.25rem; 
}

.symbol-cell.special { 
    background-color: #451a03;
}

.symbol-cell.highlight { 
    filter: none; 
    opacity: 1; 
    background-color: #FEF3C7; 
    transform: scale(1.1);
    box-shadow: 0 0 1.25rem #FBBF24;
    z-index: 50; 
    transition-duration: 0s;
}

.symbol-cell.flash-win { 
    transform: scale(1.2); 
    background-color: white; 
    box-shadow: 0 0 2rem white;
    z-index: 55; 
    opacity: 1; 
    filter: none; 
    transition-duration: 0s;
}

.symbol-cell.last-win-cell { 
    border-color: #34D399;
    box-shadow: 0 0 0.75rem #34D399; 
    z-index: 40;
    filter: none; 
    opacity: 1; 
}

.symbol-cell.blessed-glow {
    animation: glowing-blessed 1.5s infinite ease-in-out;
}

@keyframes glowing-blessed {
    0% { box-shadow: 0 0 5px #A78BFA; } 
    50% { box-shadow: 0 0 20px #C4B5FD; } 
    100% { box-shadow: 0 0 5px #A78BFA; }
}

.betting-area { 
    display: grid;
    grid-template-columns: repeat(8, 1fr); 
    gap: 1rem; 
    width: calc(100% * 8 / 9);
}

.bet-button { 
    position: relative;
}

.bet-button button { 
    width: 100%;
    aspect-ratio: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 0.375rem;
    border-width: 0.125rem; 
    transition: filter 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
}

.bet-button button.dimmed { 
    filter: brightness(0.7) saturate(70%); 
    opacity: 0.8;
}

.bet-button button.bet-locked {
    filter: brightness(0.42) saturate(55%);
    opacity: 0.75;
    cursor: not-allowed;
}

.bet-button .bet-lock-marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    z-index: 8;
    pointer-events: none;
}

.bet-button button img { 
    width: 90%; 
    height: 90%;
}

.bet-amount-display { 
    position: absolute;
    bottom: -0.75rem; 
    left: 50%; 
    transform: translateX(-50%); 
    font-size: 0.875rem;
    background-color: var(--color-panel); 
    padding: 0 0.5rem; 
    border-radius: 99px;
    border: 2px solid var(--color-bg);
}

.bet-button button.border-red-500 { background-color: #280606; }
.bet-button button.border-green-500 { background-color: #032d22; }
.bet-button button.border-blue-500 { background-color: #11214f; }
.bet-button button.border-yellow-500 { background-color: #421d08; }
.bet-button button:disabled { cursor: not-allowed; }

/* =========================================
   齿轮都市专属：压力阀门序列帧动画
========================================= */

.valve-marker {
    position: absolute;
    /* 【核心修复】将负值扩大，从 -5px 改为 -10px，使边框在视觉上更粗大更霸气 */
    top: -13px; left: -13px; right: -13px; bottom: -13px;
    pointer-events: none; 
    z-index: 10;
}

.valve-spawning {
    background-image: url('../images/ui/frame_steam_spawn.png');
    background-size: 400% 400%; 
    animation: valve-spawn-2d 0.8s step-end forwards; 
    opacity: 0; 
}

.valve-idle {
    background-image: url('../images/ui/frame_steam_idle.png');
    background-size: 400% 200%; 
    animation: valve-idle-2d 1.2s step-end infinite;
}

.valve-marker.meltdown-active {
    filter: hue-rotate(-30deg) brightness(1.5) drop-shadow(0 0 10px red);
    animation: valve-idle-2d 1.2s step-end infinite, meltdown-flash 0.3s infinite alternate ease-in-out;
}

@keyframes valve-spawn-2d {
    0%     { opacity: 1; background-position: 0% 0%; }
    6.25%  { opacity: 1; background-position: 33.333% 0%; }
    12.5%  { opacity: 1; background-position: 66.666% 0%; }
    18.75% { opacity: 1; background-position: 100% 0%; }
    
    25%    { opacity: 1; background-position: 0% 33.333%; }
    31.25% { opacity: 1; background-position: 33.333% 33.333%; }
    37.5%  { opacity: 1; background-position: 66.666% 33.333%; }
    43.75% { opacity: 1; background-position: 100% 33.333%; }
    
    50%    { opacity: 1; background-position: 0% 66.666%; }
    56.25% { opacity: 1; background-position: 33.333% 66.666%; }
    62.5%  { opacity: 1; background-position: 66.666% 66.666%; }
    68.75% { opacity: 1; background-position: 100% 66.666%; }
    
    75%    { opacity: 1; background-position: 0% 100%; }
    81.25% { opacity: 1; background-position: 33.333% 100%; }
    87.5%  { opacity: 1; background-position: 66.666% 100%; }
    93.75% { opacity: 1; background-position: 100% 100%; }
    100%   { opacity: 1; background-position: 100% 100%; }
}

@keyframes valve-idle-2d {
    0%     { background-position: 0% 0%; }
    12.5%  { background-position: 33.333% 0%; }
    25%    { background-position: 66.666% 0%; }
    37.5%  { background-position: 100% 0%; }
    
    50%    { background-position: 0% 100%; }
    62.5%  { background-position: 33.333% 100%; }
    75%    { background-position: 66.666% 100%; }
    87.5%  { background-position: 100% 100%; }
    100%   { background-position: 100% 100%; }
}

@keyframes meltdown-flash {
    0% { transform: scale(1.02); }
    100% { transform: scale(1.1); }
}

.valve-marker.valve-absorb-pulse {
    animation: valve-absorb-pulse 0.45s ease-out;
    filter: brightness(1.6) drop-shadow(0 0 8px #fbbf24);
}

@keyframes valve-absorb-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* =========================================
   齿轮都市：轮盘内区蒸汽压力条
   素材 frame_pressure_bar.png (512×128)
   填充区：x 125–460, y 48–78
========================================= */

.gear-pressure-overlay {
    position: absolute;
    bottom: calc(14% + 150px);
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 512px);
    max-width: 512px;
    z-index: 55;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gear-pressure-overlay.hidden {
    display: none;
}

.gear-pressure-container {
    position: relative;
    width: 100%;
}

.gear-pressure-bar-new {
    position: relative;
    width: 100%;
    aspect-ratio: 512 / 128;
    overflow: visible;
}

/* 镂空框：叠在填充条之上 */
.gear-pressure-bar-frame {
    position: absolute;
    inset: 0;
    background-image: url('../images/ui/frame_pressure_bar.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

/* 左侧圆盘：熔毁倒计时数字 */
.gear-pressure-countdown {
    position: absolute;
    left: 0;
    top: 0;
    width: 24.41%;   /* 125 / 512 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.1rem, 5.5vw, 2rem);
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    color: #f5d0fe;
    text-shadow:
        0 0 10px rgba(232, 121, 249, 0.95),
        0 0 6px rgba(34, 211, 238, 0.7),
        1px 1px 2px rgba(0, 0, 0, 0.95);
    pointer-events: none;
    z-index: 5;
}

.gear-pressure-countdown.hidden {
    display: none;
}

.gear-pressure-countdown.is-critical {
    font-size: clamp(0.85rem, 4vw, 1.35rem);
    color: #fca5a5;
    animation: pressure-countdown-pulse 0.6s infinite ease-in-out;
}

@keyframes pressure-countdown-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(1.08); }
}

/* 压力填充轨道 (125–460, 48–78)，位于镂空框下方 */
.gear-pressure-bar-track {
    position: absolute;
    left: 24.41%;    /* 125 / 512 */
    top: 37.5%;      /* 48 / 128 */
    width: 65.43%;   /* 335 / 512 */
    height: 23.44%;  /* 30 / 128 */
    overflow: hidden;
    border-radius: 2px 999px 999px 2px;
    z-index: 1;
}

.gear-pressure-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    border-radius: 2px 999px 999px 2px;
    transition: width 0.45s ease-out, background-color 0.3s ease;
    background-color: #f59e0b;
}

.gear-pressure-bar-fill.pressure-normal {
    background: linear-gradient(90deg, #b45309 0%, #f59e0b 55%, #fde68a 100%);
}

.gear-pressure-bar-fill.pressure-warning {
    background: linear-gradient(90deg, #a16207 0%, #facc15 55%, #fef9c3 100%);
}

.gear-pressure-bar-fill.pressure-high {
    background: linear-gradient(90deg, #c2410c 0%, #fb923c 55%, #fed7aa 100%);
}

.gear-pressure-bar-fill.pressure-meltdown {
    background: linear-gradient(90deg, #b91c1c 0%, #f87171 55%, #fecaca 100%);
    animation: pressure-meltdown-flash 0.6s infinite ease-in-out;
}

@keyframes pressure-meltdown-flash {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    50% { opacity: 0.85; box-shadow: 0 0 8px rgba(239, 68, 68, 0.9); }
}

.gear-pressure-bar-text {
    position: absolute;
    left: 24.41%;
    top: 37.5%;
    width: 65.43%;
    height: 23.44%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.55rem, 2.2vw, 0.8rem);
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95);
    pointer-events: none;
    z-index: 4;
}

.gear-pressure-delta-pop {
    position: absolute;
    right: 2%;
    top: -1.25rem;
    font-size: 0.9rem;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    z-index: 6;
}

.gear-pressure-delta-pop.delta-gain {
    color: #fbbf24;
}

.gear-pressure-delta-pop.delta-loss {
    color: #86efac;
}

.gear-pressure-delta-pop.delta-pop-active {
    animation: pressure-delta-pop 0.9s ease-out forwards;
}

@keyframes pressure-delta-pop {
    0% { opacity: 0; transform: translateY(6px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(-4px); }
    100% { opacity: 0; transform: translateY(-10px); }
}