:root {
  --fire:#c62626;--water:#4a88d0;--wind:#c08510;--land:#4a8b40;
  --infinity:#ffffff;--bg:#0a0a12;--text:#e8e6e3;--muted:#8a8a9a;--white:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
body{font-family:'trackim_font',Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
.bg-particles{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 20% 50%,rgba(198,38,38,.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(74,136,208,.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(74,136,208,.06) 0%,transparent 50%),radial-gradient(ellipse at 60% 60%,rgba(74,139,64,.06) 0%,transparent 50%)}
#burst-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
.screen{display:none;min-height:100vh;min-height:100dvh;position:relative;z-index:1}
.screen.active{display:flex;flex-direction:column;align-items:center;animation:screenFadeIn .5s ease both}
@keyframes screenFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Round launch overlay */
#round-launch-overlay{position:fixed;inset:0;z-index:9998;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .4s ease}
#round-launch-overlay.visible{opacity:1;pointer-events:all}
#round-launch-overlay.fade-out{opacity:0}
.rlo-label{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:3.5rem;font-weight:900;letter-spacing:6px;color:var(--white);text-transform:uppercase;animation:scaleIn .4s ease both}
.rlo-sub{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:1rem;letter-spacing:4px;color:var(--muted);margin-top:12px;text-transform:uppercase;animation:fadeInUp .4s ease .15s both}
#title-screen{justify-content:center;gap:20px;padding:80px 20px 20px;min-height:100dvh;height:100dvh;overflow:hidden;box-sizing:border-box}
.game-logo{text-align:center;animation:fadeInUp 1s ease;width:280px;max-width:100%}
.game-logo img{width:100%;height:auto;filter:drop-shadow(0 0 30px rgba(255,255,255,.15))}
.game-logo p{font-size:1rem;color:var(--muted);margin-top:12px;letter-spacing:1.5px;text-transform:uppercase;width:100%}
.element-icons{display:flex;gap:16px;justify-content:center;animation:fadeInUp 1s ease .2s both}
.element-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.menu-buttons{display:flex;flex-direction:column;gap:14px;align-items:center;animation:fadeInUp 1s ease .4s both}
.btn{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-weight:700;font-size:1.1rem;padding:14px 48px;border:2px solid var(--white);background:transparent;color:var(--white);cursor:pointer;letter-spacing:2px;text-transform:uppercase;transition:all .3s;position:relative;overflow:hidden;min-width:280px;border-radius:4px}
.btn::before{content:'';position:absolute;inset:0;background:var(--white);opacity:0;transition:opacity .3s;z-index:-1}
.btn:hover{color:var(--bg)}.btn:hover::before{opacity:1}
#skip-interstitial-btn:hover{color:var(--bg) !important}
.btn-secondary{border-color:var(--muted);color:var(--muted)}.btn-secondary::before{background:var(--muted)}.btn-secondary:hover{color:var(--bg)}
.btn-small{padding:10px 24px;font-size:.95rem;min-width:120px}
.panel{background: rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);padding:20px;max-width:500px;width:100%;animation:fadeInUp .6s ease;border-radius:8px}




.panel h2{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:1.8rem;color:var(--white);text-align:center;margin-bottom:20px}
input[type=text]{width:100%;padding:12px 14px;font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:1rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text);outline:none;transition:border-color .3s;margin-bottom:12px}
input[type=text]:focus{border-color:var(--white)}
label{font-weight:600;color:var(--white);display:block;margin-bottom:4px}
.player-count-selector{display:flex;gap:12px;justify-content:center;margin-bottom:24px}
.count-btn{width:56px;height:56px;font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:1.4rem;font-weight:700;background:rgba(255,255,255,.06);border:2px solid var(--muted);color:var(--muted);cursor:pointer;transition:all .3s;border-radius:4px}
.count-btn.selected{border-color:var(--white);color:#000;background:var(--white)}

/* Lobby */
#lobby-screen{justify-content:center;gap:0;padding:20px;overflow-y:auto}

/* Screen logo on pre-game screens */
.screen-logo{text-align:center;flex-shrink:0;margin-bottom:40px}
.screen-logo img{width:100%;max-width:280px;height:auto;filter:drop-shadow(0 0 20px rgba(255,255,255,.1))}
.screen-logo p{font-size:1rem;color:var(--muted);margin-top:12px;letter-spacing:1.5px;text-transform:uppercase;width:100%;text-align:center}
.room-code-display{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:2.5rem;color:var(--white);letter-spacing:8px;text-align:center;padding:16px;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.05);margin:12px 0;user-select:all;cursor:pointer}
.lobby-players{margin:16px 0}
.lobby-player{display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(255,255,255,.03);margin-bottom:6px;border-left:3px solid var(--muted)}
.lobby-player.connected{border-left-color:var(--white)}
.lobby-player .lp-name{font-weight:600;flex:1}.lobby-player .lp-status{font-size:.8rem;color:var(--muted)}
.share-link{font-size:.85rem;color:var(--muted);text-align:center;word-break:break-all;padding:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);cursor:pointer;margin:8px 0}
.copy-msg{color:var(--white);font-size:.8rem;text-align:center;min-height:18px}

/* ===== GAME SCREEN LAYOUT ===== */
#game-screen{height:100vh;height:100dvh;padding:0;gap:0;align-items:stretch;overflow:hidden}

/* 1. Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:4px 20px 4px 20px;background:var(--bg);border-bottom:1px solid rgba(255,255,255,.06);height:60px;flex-shrink:0;position:relative;z-index:160}
.topbar-logo{height:30px;width:auto;opacity: 1}
.topbar-menu{width:40px;height:32px;background:none;border:1px solid rgba(255,255,255,.15);color:var(--white);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px}
.game-menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:170}
.game-menu-overlay.open{display:block}
.game-menu{position:fixed;top:0;right:0;bottom:0;width:55%;max-width:240px;z-index:180;background:#111114;border-left:1px solid rgba(255,255,255,.08);padding:0;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);overflow-y:auto;-webkit-overflow-scrolling:touch;color:var(--white)}
.game-menu.open{transform:translateX(0)}
.game-menu-close{position:absolute;top:14px;right:14px;background:none;border:none;color:rgba(255,255,255,.5);font-size:1.6rem;cursor:pointer;line-height:1;padding:4px 8px;z-index:1}
.game-menu-close:hover{color:var(--white)}
.game-menu-cycle{margin:52px 20px 0;display:flex;flex-direction:column;gap:10px}
.gmc-title{font-size:.65rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px}
.gmc-row{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;letter-spacing:.5px}
.gmc-icon{width:18px;height:18px;flex-shrink:0}
.gmc-icon.fire{filter:brightness(0) saturate(100%) invert(22%) sepia(95%) saturate(3000%) hue-rotate(350deg) brightness(90%)}
.gmc-icon.water{filter:brightness(0) saturate(100%) invert(35%) sepia(60%) saturate(600%) hue-rotate(180deg) brightness(95%)}
.gmc-icon.wind{filter:brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(500%) hue-rotate(15deg) brightness(95%)}
.gmc-icon.land{filter:brightness(0) saturate(100%) invert(35%) sepia(60%) saturate(500%) hue-rotate(80deg) brightness(90%)}
.gmc-name{min-width:44px}
.gmc-name.fire{color:var(--fire)}
.gmc-name.water{color:var(--water)}
.gmc-name.wind{color:var(--wind)}
.gmc-name.land{color:var(--land)}
.gmc-arrow{color:rgba(255,255,255,.3);font-size:1.1rem;margin:0 2px}
.game-menu-sep{display:none}
.game-menu-nav{margin-top:20px;display:flex;flex-direction:column}
.game-menu-nav button{font-family:'trackim_font',Arial,Helvetica,sans-serif;background:none;border:none;color:rgba(255,255,255,.7);padding:14px 20px;text-align:left;cursor:pointer;font-size:.9rem;letter-spacing:1px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;width:100%}.game-menu-nav button.muted{opacity:.4}
.game-menu-nav button:hover{color:var(--white);background:rgba(255,255,255,.05)}
.game-menu-nav button:last-child{border-bottom:1px solid rgba(255,255,255,.08)}

/* 2. Info bar: players + round + deck */
.info-bar{display:flex;align-items:stretch;gap:4px;padding:4px;background:var(--bg);border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;position:relative;z-index:160;overflow:visible}
.info-chip{position:relative;display:flex;align-items:center;justify-content:center;padding:4px 10px;background:rgba(255,255,255,.05);border-radius:10px;white-space:nowrap;overflow:hidden;transition:background .4s cubic-bezier(.22,1,.36,1);min-height:48px}
.info-chip-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.08);border-radius:10px;transition:width .6s ease,background .4s cubic-bezier(.22,1,.36,1);pointer-events:none}
.info-chip-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;max-width:100%}
.info-chip-name{font-size:.7rem;font-weight:700;letter-spacing:.5px;color:var(--muted);line-height:1.1;transition:color .4s cubic-bezier(.22,1,.36,1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.info-chip-score{font-size:1.15rem;font-weight:900;letter-spacing:.5px;color:var(--muted);line-height:1.1;transition:color .4s cubic-bezier(.22,1,.36,1)}
.info-chip-role{position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:1;width:16px;height:16px;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}
.info-chip-role-icon{width:16px;height:16px;filter:brightness(0) invert(1)}

/* 4-player mobile: taller chip, icon stacked above name */
@media (max-width: 600px) {
  .info-bar.players-4 .info-chip{min-height:68px;padding:6px 4px;overflow:hidden}
  .info-bar.players-4 .info-chip-content{gap:2px;width:100%;padding:0 4px;box-sizing:border-box}
  .info-bar.players-4 .info-chip-name{font-size:.6rem;letter-spacing:0;max-width:100%}
  .info-bar.players-4 .info-chip-score{font-size:1rem}
  /* Move role icon into flow above the name, centered */
  .info-bar.players-4 .info-chip-role{position:relative;left:auto;top:auto;transform:none;margin-bottom:2px;width:14px;height:14px;align-self:center}
  .info-bar.players-4 .info-chip-role-icon{width:14px;height:14px}
  /* Re-order: icon on top, then name, then score */
  .info-bar.players-4 .info-chip-content{flex-direction:column;align-items:center}
  /* Wrap content + role icon together in column order */
  .info-bar.players-4 .info-chip{flex-direction:column;align-items:center;justify-content:center}
  .info-bar.players-4 .info-chip-role{order:-1}
}
.info-chip-role.role-active{opacity:1}
.info-chip-role.role-active .info-chip-role-icon{filter:brightness(0) invert(1)}
.info-chip-role.role-faded{opacity:.25}
.info-chip-role.role-faded .info-chip-role-icon{filter:brightness(0) invert(1)}
.info-chip .el-svg{width:16px;height:16px}
.score-float{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);font-size:1.1rem;font-weight:900;letter-spacing:.5px;pointer-events:none;z-index:50;opacity:0;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.5);animation:scoreFloatDown 1.4s cubic-bezier(.22,1,.36,1) forwards}
@keyframes scoreFloatDown{0%{opacity:0;transform:translateX(-50%) translateY(0) scale(.7)}12%{opacity:1;transform:translateX(-50%) translateY(4px) scale(1.15)}30%{opacity:1;transform:translateX(-50%) translateY(14px) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(44px) scale(.9)}}

/* 3. Column headers */
.arena-col-header{font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-align:center;padding:0;flex-shrink:0;width:100%;margin:0;height:24px;line-height:24px;display:flex;align-items:center;justify-content:center}
.arena-col-header.header-atk{color:#ffffff;background:rgb(255 255 255 / 10%)}
.arena-col-header.header-def{color:#ffffff;background:rgb(255 255 255 / 10%)}

/* 4. Arena section  50/50 split attacker | defender */
/* Start battle graphic - shown to attacker on round 1 */
.arena-start-graphic{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.arena-start-graphic img{height:140px;opacity:.1;width:auto;object-fit:contain}

.arena-section{flex:1;min-height:0;width:100%;position:relative;overflow:hidden;display:flex;align-items:stretch;transition:flex .35s ease}
.arena-track{display:flex;align-items:stretch;gap:0;padding:0;width:100%;height:100%;overflow:visible}

/* Each half takes exactly 50% */
.arena-half{flex:0 0 50%;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;padding:0}
.arena-track.expanded-view .arena-half{padding-bottom:0}
.arena-half.atk-full{flex:0 0 100%}
.arena-track.layout-thirds .arena-half{flex:0 0 33.33%}
.arena-track.layout-thirds .arena-half{border-right: 1px solid rgba(255,255,255,.08); }

.arena-half.atk-half:first-of-type{border-right:1px solid rgba(255,255,255,.08)}

/* Player name + role tag */
.arena-slot-name{font-size:.75rem;font-weight:700;letter-spacing:1px;color:var(--muted);flex-shrink:0;margin:14px 0 4px;text-align:center;padding:0 8px}
.arena-slot-name .role-tag{font-size:.65rem;padding:1px 5px;border-radius:3px;margin-left:4px;font-weight:600}
.role-tag.atk{background:rgba(198,38,38,.3);color:#ff6b6b}
.role-tag.def{background:rgba(74,136,208,.3);color:#6b9fff}

/* Card stack area */
.arena-stack{position:relative;flex:1;width:100%;min-height:0;overflow:visible;padding:10px}

/* MODE: STACKED - absolute positioned cards with offsets */
.arena-stack.mode-stacked{display:flex;align-items:center;justify-content:center}
.arena-stack.mode-stacked .arena-card-wrap{position:absolute;cursor:pointer;transition:left .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1)}

/* MODE: EXPANDED - vertical flow from top, cards separated, shrink to fit */
.arena-stack.mode-expanded{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--arena-exp-gap, 6px);padding-top:0;overflow:hidden}
.arena-stack.mode-expanded .arena-card-wrap{position:relative;cursor:pointer;left:auto !important;top:auto !important}
/* Expanded cards: width driven by --arena-exp-w, height by aspect ratio 1.4:1 */
.arena-stack.mode-expanded .card{width:var(--arena-exp-w, 140px) !important;height:calc(var(--arena-exp-w, 140px) * 1.4) !important}

/* MODE: HORIZONTAL — side by side, centered, for full-width ATK */
.arena-stack.mode-horizontal{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap}
.arena-stack.mode-horizontal .arena-card-wrap{position:relative;cursor:pointer;left:auto !important;top:auto !important}
.arena-stack.mode-horizontal .card{width:calc(var(--arena-card-h, 130px) * 0.714);height:var(--arena-card-h, 130px)}

/* Horizontal summary sits to right of cards */
.arena-stack.mode-horizontal .arena-summary-lg{margin:0 0 0 8px;flex-shrink:0}

/* Card wraps — shared styles */
.arena-card-wrap .card{transition:width .35s ease, height .35s ease, box-shadow .25s ease, opacity .6s ease, filter .6s ease;cursor:pointer}
.arena-card-wrap.defeated .card{opacity:.3;filter:saturate(.2) brightness(.5)}
/* In stacked mode, hide defeated cards below the topmost card (the last arena-card-wrap has the highest z-index) */
.arena-stack.mode-stacked .arena-card-wrap.defeated:has(~ .arena-card-wrap) .card{opacity:0}
.arena-card-wrap:hover .card{box-shadow:0 0 18px rgba(255,255,255,.35)}

/* Dim the large summary when all cards are defeated */
.arena-summary-lg.summary-defeated,.arena-slot-summary.summary-defeated{opacity:.3;filter:saturate(.2) brightness(.5)}

/* Arena card sizing — controlled by JS via --arena-card-h */
.arena-stack .card{width:calc(var(--arena-card-h, 130px) * 0.714);height:var(--arena-card-h, 130px);border-radius:5px}
.arena-stack .card-noart .el-svg{width:calc(var(--arena-card-h, 130px) * 0.257);height:calc(var(--arena-card-h, 130px) * 0.257)}
.arena-stack .card-noart .card-noart-pts{font-size:calc(var(--arena-card-h, 130px) * 0.093)}
.arena-stack .card-noart .card-noart-inf .el-svg{width:calc(var(--arena-card-h, 130px) * 0.129 * 1.6);height:calc(var(--arena-card-h, 130px) * 0.129 * 1.6)}
.arena-stack .card-back{width:calc(var(--arena-card-h, 130px) * 0.714);height:var(--arena-card-h, 130px)}

/* Summary — small version for stacked (ATK), sits at bottom */
.arena-slot-summary{display:flex;align-items:center;gap:4px;justify-content:center;font-size:1.1rem;font-weight:900;color:var(--white);min-height:24px;flex-shrink:0;margin:6px 0 10px;opacity:0;transition:opacity .4s ease,filter .6s ease}
.arena-slot-summary.visible{opacity:1}
.arena-slot-summary .el-svg{width:20px;height:20px}

/* Summary LARGE — for expanded mode, sits inline after cards in the flex column */
.arena-summary-lg{display:flex;align-items:center;gap:6px;justify-content:center;font-weight:900;color:var(--white);opacity:0;transition:opacity .4s ease,filter .6s ease;flex-shrink:0;margin:6px 0}
.arena-summary-lg.visible{opacity:1}
.arena-summary-lg .el-svg{width:20px;height:20px}
.arena-summary-lg .asl-pts{font-size:1.1rem;letter-spacing:1px}
.arena-summary-lg .asl-inf{display:inline-flex;align-items:center}.arena-summary-lg .asl-inf .el-svg{width:1.4rem;height:1.4rem}

/* Dynamic fly-in: card emerges from below, rotated, scaled */
@keyframes cardFlyIn{
  0%{opacity:0;transform:translateY(calc(100vh * 0.6)) rotate(var(--fly-rot,25deg)) scale(1.3)}
  55%{opacity:1;transform:translateY(0) rotate(calc(var(--fly-rot,25deg) * 0.12)) scale(1.05)}
  100%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}
}
.arena-card-wrap.fly-in{animation:cardFlyIn .6s cubic-bezier(.16,.73,.29,1.02) both}

/* Expand-in: cards fan out from stacked to expanded/horizontal */
@keyframes expandIn{
  0%{opacity:.5;transform:scale(.7) translateY(8px)}
  50%{opacity:1;transform:scale(1.04) translateY(-2px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.arena-card-wrap.expand-in{animation:expandIn .45s cubic-bezier(.22,1,.36,1) both}

/* Global infinity wiggle */
@keyframes equinoxWiggle{
  0%,100%{transform:rotate(0deg)}
  20%{transform:rotate(-2deg)}
  40%{transform:rotate(2.5deg)}
  60%{transform:rotate(-1.5deg)}
  80%{transform:rotate(1deg)}
}
.arena-card-wrap.equinox-wiggle{animation:equinoxWiggle 2.5s ease-in-out infinite}

/* Spinner for waiting */
.arena-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:.8rem;letter-spacing:1px}
.arena-spinner-ring{width:36px;height:36px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--muted);border-radius:50%;animation:spinRing 1s linear infinite}
@keyframes spinRing{to{transform:rotate(360deg)}}

/* Empty state */
.arena-empty{color:var(--muted);font-size:.8rem;letter-spacing:1px;text-align:center}
.arena-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.arena-dash-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:0.5}
.arena-dash-placeholder img{width:80px;height:80px}

/* ===== Multi-defender DEF column ===== */
.arena-half.def-multi{display:flex;flex-direction:column;padding:0}
.def-section{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;padding:10px;min-height:0;width:100%}
.def-section .arena-slot-name{margin:2px 0 4px}
.def-section .arena-slot-summary{margin:4px 0 0}
.def-section + .def-section{border-top:1px solid rgba(255,255,255,.08)}
/* Def section cards use their own sizing variable */
.def-section .arena-stack .card{width:calc(var(--arena-def-card-h, 130px) * 0.714);height:var(--arena-def-card-h, 130px)}
.def-section .arena-stack .card-back{width:calc(var(--arena-def-card-h, 130px) * 0.714);height:var(--arena-def-card-h, 130px)}
.def-section .arena-stack .card-noart .el-svg{width:calc(var(--arena-def-card-h, 130px) * 0.257);height:calc(var(--arena-def-card-h, 130px) * 0.257)}
.def-section .arena-stack .card-noart .card-noart-pts{font-size:calc(var(--arena-def-card-h, 130px) * 0.093)}
.def-section .arena-stack .card-noart .card-noart-inf .el-svg{width:calc(var(--arena-def-card-h, 130px) * 0.129 * 1.6);height:calc(var(--arena-def-card-h, 130px) * 0.129 * 1.6)}

/* Def-half stacked cards use their own sizing variable */
.def-half .arena-stack.mode-stacked .card{width:calc(var(--arena-def-card-h, 130px) * 0.714);height:var(--arena-def-card-h, 130px)}
.def-half .arena-stack.mode-stacked .card-back{width:calc(var(--arena-def-card-h, 130px) * 0.714);height:var(--arena-def-card-h, 130px)}
.def-half .arena-stack.mode-stacked .card-noart .el-svg{width:calc(var(--arena-def-card-h, 130px) * 0.257);height:calc(var(--arena-def-card-h, 130px) * 0.257)}
.def-half .arena-stack.mode-stacked .card-noart .card-noart-pts{font-size:calc(var(--arena-def-card-h, 130px) * 0.093)}
.def-half .arena-stack.mode-stacked .card-noart .card-noart-inf .el-svg{width:calc(var(--arena-def-card-h, 130px) * 0.129 * 1.6);height:calc(var(--arena-def-card-h, 130px) * 0.129 * 1.6)}



/* ===== Result Reveal ===== */
/* Progress timer bar at top of screen */
.result-bar-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;transition:width linear;pointer-events:none}

/* Full-screen result overlay - below topbar+info-bar */
.result-bar{position:fixed;left:0;right:0;bottom:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;z-index:150;opacity:0;pointer-events:none;transition:opacity .6s ease;background:var(--bg)}
.result-bar.active{opacity:1;pointer-events:auto}

/* Large centered result text */
.result-bar-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;line-height:1.2;z-index:1;transform:translateY(15px) scale(.95);opacity:0;transition:opacity .5s ease .2s, transform .5s ease .2s}
.result-bar.active .result-bar-inner{opacity:1;transform:translateY(0) scale(1)}
.result-bar-inner .rb-name{font-size:1.1rem;font-weight:700;letter-spacing:1px;opacity:.7}
.result-bar-inner .rb-pts{font-size:2.4rem;font-weight:900;letter-spacing:2px}
.result-bar-inner .rb-stalemate{font-size:1.3rem;font-weight:700;color:var(--white)}
.result-bar-inner .rb-stalemate-sub{font-size:1rem;font-weight:700;color:var(--muted)}

.result-bar-inner .rb-drain{font-size:1rem;font-weight:700;letter-spacing:1px}
.result-bar-inner .rb-tap{display:none}
.result-bar-inner .rb-infinity-group{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:20px;margin-bottom:0}
.result-bar-inner .rb-infinity-group:first-child{margin-top:0}
.result-bar-inner .rb-infinity-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.result-bar-inner .rb-infinity-icon .el-svg{width:2.4rem;height:2.4rem}
.result-bar-inner .rb-infinity-group:first-child .rb-infinity-icon .el-svg {
    width: min(4rem, 20vw);
    height: min(3rem, 20vw);
}.result-bar-inner .rb-card-name{font-size:clamp(1rem, 3.5vw, 1.4rem);font-weight:900;letter-spacing:1px;color:var(--white)}
.result-bar-inner .rb-penalties{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:.95rem;font-weight:600;color:rgba(255,255,255,.7)}
.result-bar-inner .rb-penalty-row{display:flex;align-items:center;gap:8px;justify-content:center}
.result-bar-inner .rb-penalty-pts{color:#e05555;font-weight:800}
.result-bar-inner .rb-continue{margin-top:40px;padding:12px 48px;font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:var(--white);border:none;color:var(--bg);cursor:pointer;transition:all .3s;border-radius:4px}
.result-bar-inner .rb-continue:hover{box-shadow:0 0 25px rgba(255,255,255,.4)}

/* Element blotches container - fills overlay */
.result-blotches{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* Light theme (white/equinox bg) */
.result-bar[data-theme="light"] .result-bar-inner{color:var(--bg)}
.result-bar[data-theme="light"] .rb-pts{color:var(--bg)}
.result-bar[data-theme="light"] .rb-name{color:var(--bg)}
.result-bar[data-theme="light"] .rb-stalemate{color:rgba(10,10,18,.45)}
.result-bar[data-theme="light"] .rb-tap{color:rgba(10,10,18,.3)}
.result-bar[data-theme="light"] .result-bar-progress{background:rgba(10,10,18,.1)}
.result-bar[data-theme="light"] .el-svg{filter:brightness(0)}
/* Dark theme (element color bg) */
.result-bar[data-theme="dark"] .result-bar-inner{color:var(--white)}
.result-bar[data-theme="dark"] .rb-pts{color:var(--white)}
.result-bar[data-theme="dark"] .rb-name{color:var(--white)}
.result-bar[data-theme="dark"] .rb-stalemate{color:rgba(255,255,255,.5)}
.result-bar[data-theme="dark"] .rb-tap{color:rgba(255,255,255,.35)}
.result-bar[data-theme="dark"] .result-bar-progress{background:rgba(255,255,255,.15)}
.result-bar[data-theme="dark"] .el-svg{filter:brightness(0) invert(1)}

/* ===== Player Tray (bottom section) ===== */
.player-tray{display:flex;flex-direction:column;flex-shrink:0;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease,max-height .45s ease;transform:translateY(0);opacity:1;will-change:transform,opacity;overflow:hidden}
.player-tray.hidden{transform:translateY(100%);opacity:0;pointer-events:none;max-height:0;padding:0;margin:0}

/* 5. Tray role header - matches arena column headers */
.tray-role-header{font-size:.8rem;font-weight:700;letter-spacing:3px;text-align:center;width:100%;flex-shrink:0;display:flex;align-items:center;justify-content:center;height:28px;line-height:28px;transition:background .3s,color .3s,border-color .3s}
.tray-role-header.role-atk{color:#ffffff;background:rgb(255 255 255 / 10%)}
.tray-role-header.role-def{color:#ffffff;background:rgb(255 255 255 / 10%)}

.hand-section{width:100%;position:relative;flex-shrink:0;padding:10px 0 6px;overflow:visible}
.hand-cards{display:flex;justify-content:center;align-items:flex-end;padding:12px 4px;position:relative;overflow:visible;-webkit-user-select:none;user-select:none}

.hand-card-wrap{
  display:flex;flex-direction:column;align-items:center;cursor:pointer;
  position:relative;flex-shrink:0;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .15s,z-index 0s,margin .25s ease;
  transform-origin:bottom center;
  transform:rotate(var(--fan-rot,0deg)) translateY(var(--fan-y,0px));
  z-index:var(--fan-z,1);
}
/* Card pops up, labels stay below */
.hand-card-wrap .card{
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,outline .15s;
  width:90px;height:126px;
}
/* Tap/active feedback */
.hand-card-wrap:active .card{transform:scale(1.03) translateY(-4px);transition-duration:.08s}

/* Selected: card pops up, keeps fan angle */
.hand-card-wrap.selected{
  z-index:20 !important;
}
.hand-card-wrap.selected .card{
  transform:translateY(-16px) scale(1.06);
  box-shadow:0 0 20px rgba(255,255,255,.5),0 0 40px rgba(255,255,255,.15);
  outline:3px solid var(--white);
}

/* Disabled: dimmed but still tappable */
.hand-card-wrap.dimmed{opacity:.3;filter:saturate(.3) brightness(.6)}

/* Shake animation for invalid tap */
@keyframes cardShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.hand-card-wrap.shake .card{animation:cardShake .3s ease;border-color:#ff4444 !important;box-shadow:0 0 12px rgba(255,0,0,.4) !important}

/* Card info strip BELOW card (card is first child, then info, then name) */
.hand-card-info{display:flex;align-items:center;gap:4px;padding:2px 0;margin-top:2px;position:relative;z-index:2;max-width:90px;justify-content:center;overflow:hidden}
.hand-card-info .el-svg{width:20px;height:20px;flex-shrink:0}
.hand-card-info .hci-points{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:1.1rem;font-weight:900;color:var(--text)}
.hand-card-info .hci-infinity{display:inline-flex;align-items:center}.hand-card-info .hci-infinity .el-svg{width:1.3rem;height:1.3rem}
.hand-card-name{display:none}

/* Card info popup (long press) */
.card-info-popup{position:fixed;z-index:200;background:rgba(20,20,28,.97);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px 16px;box-shadow:0 8px 32px rgba(0,0,0,.7);opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:auto;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);width:240px}
.card-info-popup.visible{opacity:1;transform:translateY(0)}
.card-info-popup .ci-name{font-family:'trackim_font',Arial,sans-serif;font-size:15px;font-weight:700;color:var(--white);margin-bottom:6px;line-height:1.2}
.card-info-popup.fire   .ci-name{color:#ff6b6b}
.card-info-popup.water  .ci-name{color:#6bafff}
.card-info-popup.wind   .ci-name{color:#e0b050}
.card-info-popup.land   .ci-name{color:#6bcc6b}
.card-info-popup.ci-global .ci-name{color:var(--infinity)}
.card-info-popup .ci-db-desc{font-size:13px;color:rgba(255,255,255,.75);line-height:1.5;margin-bottom:0;word-wrap:break-word;white-space:normal}
.card-info-popup .ci-divider{height:1px;background:rgba(255,255,255,.1);margin:8px 0}
.card-info-popup .ci-sw{display:flex;flex-direction:column;gap:4px}
.card-info-popup .ci-sw-row{display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}
.card-info-popup .ci-sw-label{color:rgba(255,255,255,.5);font-size:12px;min-width:64px}
.card-info-popup .ci-el-icon{width:13px;height:13px;flex-shrink:0}
.card-info-popup .ci-el-icon.fire {filter:brightness(0) saturate(100%) invert(22%) sepia(95%) saturate(3000%) hue-rotate(350deg) brightness(90%)}
.card-info-popup .ci-el-icon.water{filter:brightness(0) saturate(100%) invert(35%) sepia(60%) saturate(600%) hue-rotate(180deg) brightness(95%)}
.card-info-popup .ci-el-icon.wind {filter:brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(500%) hue-rotate(15deg) brightness(95%)}
.card-info-popup .ci-el-icon.land {filter:brightness(0) saturate(100%) invert(35%) sepia(60%) saturate(500%) hue-rotate(80deg) brightness(90%)}
.card-info-popup .ci-el-name{font-weight:600}
.card-info-popup .ci-el-name.fire {color:var(--fire)}
.card-info-popup .ci-el-name.water{color:var(--water)}
.card-info-popup .ci-el-name.wind {color:var(--wind)}
.card-info-popup .ci-el-name.land {color:var(--land)}
.card-info-popup .ci-sw-value{color:rgba(255,255,255,.85);font-weight:600;font-size:12px}
.card-info-popup .ci-sw-value .el-svg{width:13px;height:13px;vertical-align:middle;margin-left:2px}
.card-info-popup .ci-pts-val{color:#fff;font-weight:600;font-size:12px}

/* Hand waiting state: visible but dimmed */
.hand-cards.hand-waiting{opacity:.45;pointer-events:none;filter:saturate(.5)}

/* 8. Counter hint - button style */
.counter-hint{text-align:center;padding:10px;flex-shrink:0;min-height:30px}
.counter-hint-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 20px;border:2px solid var(--muted);background:transparent;color:var(--white);font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;letter-spacing:1px;cursor:pointer;transition:all .3s;border-radius:4px;line-height:1;vertical-align:middle}
.counter-hint-btn:hover:not(:disabled){background:rgba(255,255,255,.1)}
.counter-hint-btn:active:not(:disabled){background:rgba(255,255,255,.15)}
.counter-hint-btn:disabled{background:rgba(0,0,0,.4);border-color:rgba(138,138,154,.2);color:rgba(138,138,154,.25);cursor:not-allowed;pointer-events:none;opacity:1}
.counter-hint-btn:disabled .el-svg{opacity:.25}
.counter-hint-btn .el-svg{width:18px;height:18px;flex-shrink:0}
.counter-hint .fire{color:var(--white)}.counter-hint .water{color:var(--white)}.counter-hint .wind{color:var(--white)}.counter-hint .land{color:var(--white)}

/* Pre-attack round screen */
.round-screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:20px;animation:fadeIn .4s ease}
.rs-header-stacked{display:flex;flex-direction:column;align-items:center;gap:4px}
.rs-role-icon-lg{width:80px;height:80px;filter:brightness(0) invert(1);opacity:.9;margin-bottom:20px}
.rs-header-text{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:40px}
.rs-round{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:1.8rem;font-weight:900;color:var(--white);letter-spacing:4px;text-transform:uppercase;line-height:1}
.rs-lead{font-size:.95rem;color:var(--muted);letter-spacing:2px;line-height:1}
.rs-scores{width:100%;max-width:280px;display:flex;flex-direction:column;gap:4px}
.round-screen-row{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:rgba(255,255,255,.03);border-left:2px solid rgba(255,255,255,.1);color:var(--muted);font-size:.9rem}
.rs-name{flex:1}
.rs-score{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-weight:700;font-size:1.1rem}
.rs-waiting{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem;letter-spacing:1px}
.rs-waiting .arena-spinner-ring{width:20px;height:20px;border-width:2px}

/* Attack/Defend layout: switch to horizontal when height is limited */
@media (max-height:750px){
  .round-screen .rs-header-stacked{flex-direction:row;align-items:center;gap:16px; margin-bottom:20px;}
  .round-screen .rs-role-icon-lg{width:auto;height:48px;margin-bottom:0}
  .round-screen .rs-header-text{align-items:flex-start; margin-bottom:0px}
  .round-screen .rs-round{font-size:1.4rem}
  .round-screen .rs-lead{font-size:.85rem}
}
@media (max-height:450px){
  .round-screen .rs-role-icon-lg{height:36px}
  .round-screen .rs-header-text{margin-bottom:12px}
  .round-screen .rs-round{font-size:1.2rem}
  .round-screen{padding:12px;gap:0}
}

/* 9. Action bar */
.action-bar{display:flex;justify-content:center;padding:6px 12px 10px;flex-shrink:0;margin-top:10px}
.btn-play{padding:12px 48px;font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:var(--white);border:none;color:var(--bg);cursor:pointer;transition:all .3s;border-radius:4px}
.btn-play:hover:not(:disabled){box-shadow:0 0 25px rgba(255,255,255,.4)}
.btn-play:disabled{background:rgba(255,255,255,.02);color:rgba(232,230,227,.1);cursor:not-allowed;box-shadow:none}

/* CARDS */
.card{width:130px;height:182px;border-radius:6px;position:relative;cursor:pointer;transition:transform .3s,box-shadow .3s;overflow:hidden;user-select:none;flex-shrink:0;background-size:cover;background-position:center}
.card.fire{border:2px solid var(--fire);box-shadow:0 0 10px rgba(198,38,38,.4)}
.card.water{border:2px solid var(--water);box-shadow:0 0 10px rgba(74,136,208,.4)}
.card.wind{border:2px solid var(--wind);box-shadow:0 0 10px rgba(192,133,16,.4)}
.card.land{border:2px solid var(--land);box-shadow:0 0 10px rgba(74,139,64,.4)}
.card.global-infinity{border:2px solid var(--infinity);box-shadow:0 0 10px rgba(155,89,182,.4)}
.card.has-art{background-size:cover !important;background-position:center !important}
.card-noart{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}
.card-noart .el-svg{width:48px;height:48px}
.card-noart .card-noart-pts{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:1.8rem;font-weight:900;margin-top:4px;color:var(--text)}
.card-noart .card-noart-inf{display:flex;align-items:center;justify-content:center}.card-noart .card-noart-inf .el-svg{width:2.5rem;height:2.5rem;filter:brightness(0) invert(1)}
.card.fire .card-noart{background:linear-gradient(160deg,var(--bg),var(--fire))}
.card.water .card-noart{background:linear-gradient(160deg,var(--bg),var(--water))}
.card.wind .card-noart{background:linear-gradient(160deg,var(--bg),var(--wind))}
.card.land .card-noart{background:linear-gradient(160deg,var(--bg),var(--land))}
.card.global-infinity .card-noart{background:linear-gradient(160deg,var(--bg),var(--infinity))}
.card-back{background:url('art/back.jpg') center/cover no-repeat;border:2px solid rgba(255,255,255,.15);cursor:default}
.card-back::after{content:none}
.card.selected{box-shadow:0 0 30px rgba(255,255,255,.6);outline:3px solid var(--white)}

/* SVG element icons */
.el-svg{width:1.2em;height:1.2em;vertical-align:middle;pointer-events:none}
.el-svg-lg{width:40px;height:40px}
.el-svg-sm{width:1em;height:1em;vertical-align:middle}
.lp-icon .el-svg{width:20px;height:20px}
.fire .el-svg,.fire .el-svg-sm,.fire .el-svg-lg,.hand-card-info.fire .el-svg,.element-icon.fire .el-svg-lg{filter:brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(3500%) hue-rotate(350deg) brightness(1.1)}
.water .el-svg,.water .el-svg-sm,.water .el-svg-lg,.hand-card-info.water .el-svg,.element-icon.water .el-svg-lg{filter:brightness(0) saturate(100%) invert(45%) sepia(70%) saturate(800%) hue-rotate(185deg) brightness(1.05)}
.wind .el-svg,.wind .el-svg-sm,.wind .el-svg-lg,.hand-card-info.wind .el-svg,.element-icon.wind .el-svg-lg{filter:brightness(0) saturate(100%) invert(50%) sepia(80%) saturate(700%) hue-rotate(15deg) brightness(1.1)}
.land .el-svg,.land .el-svg-sm,.land .el-svg-lg,.hand-card-info.land .el-svg,.element-icon.land .el-svg-lg{filter:brightness(0) saturate(100%) invert(40%) sepia(50%) saturate(700%) hue-rotate(85deg) brightness(0.95)}

/* Override: Keep infinity icon white regardless of element color */
.hand-card-info .hci-infinity .el-svg{filter:brightness(0) saturate(100%) invert(100%) !important}

/* Game over */
#gameover-screen{min-height:100vh;min-height:100dvh;justify-content:flex-start;align-items:center;gap:30px;padding:40px 20px;box-sizing:border-box;overflow-y:auto}
.gameover-panel{text-align:center;animation:fadeInUp .8s ease}
.gameover-panel h1{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:clamp(2rem,5vw,3.5rem);color:var(--white);margin-bottom:8px}
.winner-name{font-size:1.5rem;color:var(--text);margin-bottom:30px}
.final-scores{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.final-score-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:20px 30px;min-width:140px}
.final-score-card.winner{border-color:var(--white);box-shadow:0 0 20px rgba(255,255,255,.2)}
.fs-name{font-weight:700;font-size:.9rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fs-score{font-family:'trackim_font',Arial,Helvetica,sans-serif;font-size:2.5rem;color:var(--white)}
.fs-label{font-size:.75rem;color:var(--muted);letter-spacing:1px}

/* Support section on game over */
.support-section{margin:30px 0 20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.support-divider{width:60px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);margin-bottom:8px}
.support-text{font-size:1rem;color:var(--text);margin:0}
.support-subtext{font-size:.85rem;color:var(--muted);margin:0}
.support-note{font-size: 1rem;color:#fff;margin:0;padding:0;}

/* Ad label — required by AdSense to clearly identify ads */
.ad-label{font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.3);text-align:center;margin-bottom:4px}

/* Ad container on victory screen — Large Mobile Banner 320x100 */
#victory-ad-container{margin:0 auto;width:340px;height:138px;display:none;transition:opacity .3s ease;margin-bottom:40px}
.ad-wrapper{background:rgba(255, 255, 255, 0.04);border-radius:8px;padding:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ad-divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);margin:10px 0}
#victory-ad-container .ad-wrapper{width:340px;height:120px}
#victory-ad-container .ad-wrapper ins{display:inline-block;width:320px;height:100px}

/* Interstitial ad — Large Rectangle 336x280 */
#interstitial-ad-container{width:356px;height:300px;margin:10px;display:flex;justify-content:center;align-items:center}
#interstitial-ad-container .ad-wrapper{width:356px;height:300px}
#interstitial-ad-container .ad-wrapper ins{display:inline-block;width:336px;height:280px}

/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(10,10,18,.95);display:none;align-items:center;justify-content:center;z-index:200;padding:0;overflow-x:hidden}
.modal-overlay.active{display:flex}
.modal-content{background:transparent;border:none;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:scaleIn .3s ease}
.modal-content h2{font-family:'trackim_font',Arial,Helvetica,sans-serif;color:var(--white);font-size:1.6rem;margin-bottom:20px;text-align:center}
.modal-content h3{color:var(--white);font-size:1.1rem;margin-top:18px;margin-bottom:8px;letter-spacing:1px}
.modal-content p{color:var(--muted);font-size:.95rem;line-height:1.6;margin-bottom:6px}
.element-cycle{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0;font-size:1.1rem;font-weight:700;flex-wrap:wrap}
.modal-close{display:block;margin:24px auto 0;padding:10px 36px;font-family:'trackim_font',Arial,Helvetica,sans-serif;font-weight:700;font-size:1rem;background:transparent;border:2px solid var(--white);color:var(--white);cursor:pointer;letter-spacing:2px;text-transform:uppercase;transition:all .3s;border-radius:4px}
.modal-close:hover{background:var(--white);color:var(--bg)}

/* Rules modal: constrained box that scrolls rather than clipping */
#rules-modal .modal-content{max-width:560px;width:calc(100% - 40px);max-height:85dvh;height:auto;justify-content:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:28px 24px;margin:auto}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
/* Game screen entrance animations */
#game-screen.game-entering .topbar{animation:fadeInDown .45s ease both}
#game-screen.game-entering .info-bar{animation:fadeInDown .45s ease .1s both}
#game-screen.game-entering .arena-section{animation:fadeIn .55s ease .2s both}
#game-screen.game-entering .player-tray:not(.hidden){animation:fadeInUp .5s ease .3s both}

::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}

@media(max-width:700px){
  .panel{padding:20px}
  .screen-logo img{max-width:280px}
  .game-logo{max-width:280px}
  .game-logo img{max-width:280px}
}
@media(max-height:700px){
  .screen-logo{margin-bottom:40px}
  .screen-logo img{max-width:280px}
  .game-logo{max-width:220px}
  .game-logo img{max-width:280px}
  .panel{padding:20px}
  .panel h2{font-size:1.4rem;margin-bottom:20px}
  .room-code-display{font-size:1.8rem;padding:10px;letter-spacing:6px}
  .lobby-players{margin:8px 0}
  .lobby-player{padding:6px 12px}
  #title-screen{gap:20px;padding:80px 20px}
  .game-logo p{font-size:1rem;margin-top:8px;letter-spacing:1px}
  .count-btn{width:44px;height:44px;font-size:1.1rem}
  .player-count-selector{gap:8px;margin-bottom:16px}
}
/* ===== SOUND CONTROLS ===== */

/* --- Topbar sound controls (50/50 with divider) --- */
.topbar-sound {
  display: flex;
  align-items: center;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  margin-left: auto;
  margin-right: 20px;
}
.topbar-sound-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1 1 50%;
  height: 100%;
  padding: 0 12px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.topbar-sound-btn:hover {
  background: rgba(255,255,255,0.08);
}
.topbar-sound-btn.muted {
  opacity: 0.35;
}
.topbar-sound-label {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.topbar-sound-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* --- Title screen sound controls --- */
.sound-toggle-btn.compact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.sound-toggle-btn.compact:hover {
  opacity: 0.65;
}
.sound-toggle-btn.compact.muted {
  opacity: 0.28;
}

.title-sound-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 40px;
  animation: fadeInUp 1s ease 0.55s both;
}
.title-sound-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.title-copyright{font-size:.65rem;color:rgba(255,255,255,.2);letter-spacing:.5px;text-align:center;margin-top:10px;margin-bottom:0;padding:0;}
/* SVG sound icons */
.sound-svg-icon {
  width: 18px;
  height: 18px;
  display: block;
  filter: brightness(0) invert(1);
}

.sound-svg-icon-home {
  width: 24px;
  height: 24px;
  display: block;
  filter: brightness(0) invert(1);
}


.result-bar-inner .rb-infinity-group:first-child .rb-infinity-icon .el-svg {
    width: min(5rem, 20vw);
    height: min(4rem, 20vw);
}

/* ===== SPINNER FOR REPLAY LOBBY ===== */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== REPLAY COUNTDOWN ===== */
#replay-countdown {
  animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1;
  }
  50% { 
    transform: scale(1.1); 
    opacity: 0.8;
  }
}
/* ===== TOPBAR CARDS BUTTON ===== */


/* ===== CARD GALLERY ===== */

/* Overlay: flex center both axes, 20px side padding */
#card-gallery-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

/* Modal: full width minus 40px side gaps, height shrink-wraps to content */
#card-gallery-modal .modal-content#card-gallery-content {
  --cg-col-w: calc(100vw - 40px); /* card fills modal width */
  width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);
  min-width: 0;
  padding: 20px 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}

/* Desktop: card width scales when viewport height gets tight.
   Reserved space: 40px top + text below card (~200px) + 16px btn margin + 54px btn + 40px bottom = 350px */
@media (min-width: 601px) {
  #card-gallery-modal .modal-content#card-gallery-content {
    --cg-col-w: min(200px, calc((100dvh - 350px) * 130 / 182));
    height: 100dvh;
    max-height: 100dvh;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #card-gallery-modal #card-gallery-scroll {
    flex: 1;
    min-height: 0;
  }
}

/* Horizontal scroll: desktop free scroll with visible scrollbar, mobile snaps */
#card-gallery-scroll {
  flex: none;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
#card-gallery-scroll::-webkit-scrollbar { height: 4px; }
#card-gallery-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

/* Track */
.cg-track-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 40px;
  padding: 4px 40px 8px 40px; /* 40px before first and after last card */
  width: max-content;
  height: auto;
}

/* Each column */
.cg-card-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--cg-col-w);
  flex-shrink: 0;
}

/* Mobile: snap to center, card centered with 40px each side */
@media (max-width: 600px) {
  #card-gallery-modal .modal-content#card-gallery-content {
    --cg-col-w: calc(100vw - 120px); /* modal width minus 40px each side */
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #card-gallery-scroll {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #card-gallery-scroll::-webkit-scrollbar { display: none; }
  .cg-track-inner {
    gap: 0;
    padding: 4px 0 8px 0;
  }
  .cg-card-col {
    width: calc(100vw - 40px); /* exactly the modal width = one full snap slot */
    padding: 0 40px;           /* 40px black on each side */
    scroll-snap-align: start;  /* snap slot fills the container perfectly */
    box-sizing: border-box;
    align-items: flex-start;
  }
}





.cg-card-wrap {
  width: var(--cg-col-w);
  height: calc(var(--cg-col-w) * 182 / 130);
  margin-bottom: 12px;
  flex-shrink: 0;
  position: relative;
}

.cg-card-wrap .card {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  inset: 0;
}

/* Text content */
.cg-title {
  font-family: 'trackim_font', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  line-height: 1.2;
  margin-bottom: 5px;
  width: 100%;
  word-break: break-word;
}

.cg-desc {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  text-align: left;
  line-height: 1.5;
  margin-bottom: 8px;
  width: 100%;
  word-break: break-word;
  white-space: normal;
}

.cg-divider {
  width: 100%;
  height: 1px;
  display: block;
  background: rgba(255,255,255,.2);
  margin: 2px 0 10px;
}

.cg-sep { width: 100%; height: 1px; background: rgba(255,255,255,.12); margin: 6px 0 8px; display: block; }
.cg-sw { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; }
.cg-sw-row { display: flex; align-items: center; gap: 4px; font-size: 14px; min-width: 0; width: 100%; }
.cg-sw-label { color: rgba(255,255,255,.5); font-size: 14px; min-width: 52px; flex-shrink: 0; }
.cg-sw-value { color: rgba(255,255,255,.85); font-weight: 600; font-size: 14px; }
.cg-pts-val { color: #fff; font-weight: 600; font-size: 14px; }

.cg-el-icon { width: 15px; height: 15px; flex-shrink: 0; }
.cg-el-icon.fire  { filter: brightness(0) saturate(100%) invert(22%) sepia(95%) saturate(3000%) hue-rotate(350deg) brightness(90%); }
.cg-el-icon.water { filter: brightness(0) saturate(100%) invert(35%) sepia(60%) saturate(600%) hue-rotate(180deg) brightness(95%); }
.cg-el-icon.wind  { filter: brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(500%) hue-rotate(15deg) brightness(95%); }
.cg-el-icon.land  { filter: brightness(0) saturate(100%) invert(35%) sepia(60%) saturate(500%) hue-rotate(80deg) brightness(90%); }
.cg-el-name { font-weight: 600; font-size: 14px; white-space: nowrap; }
.cg-el-name.fire  { color: var(--fire); }
.cg-el-name.water { color: var(--water); }
.cg-el-name.wind  { color: var(--wind); }
.cg-el-name.land  { color: var(--land); }