@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=JetBrains+Mono:wght@500;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{--cyan:#3fe0ff;--violet:#a06bff;--pink:#ff2fb0;--gold:#e8c468;--ink:#06070d;--panel:rgba(8,12,27,.84);--line:rgba(157,200,255,.24)}*{box-sizing:border-box}body{margin:0;background:#03040a;color:#f8fbff;font-family:Manrope,system-ui,sans-serif}button{font:inherit}#xena-tcg-container{width:min(1280px,100%);min-height:100vh;margin:auto;position:relative;overflow:hidden;background:#050711;border-inline:1px solid rgba(255,255,255,.1)}#xena-tcg-container::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,6,16,.75),transparent 20%,transparent 80%,rgba(4,6,16,.75)),radial-gradient(ellipse at 50% 0,rgba(63,224,255,.12),transparent 55%);z-index:1}.game-header{height:70px;position:relative;z-index:12;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(14px,3vw,38px);border-bottom:1px solid var(--line);background:rgba(4,6,14,.78);backdrop-filter:blur(18px)}.hub-link,.text-button{color:#d7e8ff;text-decoration:none;font:700 .72rem 'JetBrains Mono',monospace;letter-spacing:.08em}.brand-lockup{position:absolute;left:50%;transform:translateX(-50%);display:grid;text-align:center;line-height:1}.brand-lockup span{font:700 .6rem 'JetBrains Mono',monospace;letter-spacing:.48em;color:var(--cyan)}.brand-lockup strong{font:800 1rem 'Barlow Condensed',sans-serif;letter-spacing:.2em}.header-actions,.language-toggle{display:flex;gap:6px;align-items:center}.language-toggle{border:1px solid var(--line);border-radius:99px;padding:3px}.language-toggle button,.icon-button{border:0;background:transparent;color:#aab7cf;cursor:pointer}.language-toggle button{padding:6px 9px;border-radius:99px;font-size:.68rem;font-weight:800}.language-toggle button.active{color:#051018;background:var(--cyan);box-shadow:0 0 17px rgba(63,224,255,.55)}.icon-button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;font-size:.7rem}.screen{position:relative;z-index:2;min-height:calc(100vh - 70px);padding:clamp(24px,5vw,66px);display:grid;place-items:center}.screen[hidden]{display:none!important}.lobby-screen{background:linear-gradient(90deg,rgba(3,5,13,.82),rgba(4,7,19,.31),rgba(3,5,13,.82)),url('../../game/assets/backgrounds/xena-hero-bg.webp') center/cover}.title-plate{text-align:center;text-shadow:0 4px 24px #000}.eyebrow{margin:0;color:var(--cyan);font:700 .7rem 'JetBrains Mono',monospace;letter-spacing:.18em}.xena-word{margin:18px 0 -3px;font:700 clamp(.75rem,1.6vw,1.05rem) 'JetBrains Mono',monospace;letter-spacing:1.2em;color:var(--gold)}.title-plate h1{margin:0;font:800 clamp(3rem,9vw,7.4rem)/.82 'Barlow Condensed',sans-serif;letter-spacing:.04em;color:#fff;filter:drop-shadow(0 0 20px rgba(63,224,255,.35))}.title-plate h1 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),#e7f8ff 46%,var(--violet));color:transparent;background-clip:text}.title-subtitle{color:#dce8ff}.lobby-panel,.collection-panel{width:min(900px,100%);padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:0 20px 90px rgba(0,0,0,.52),inset 0 0 30px rgba(63,224,255,.03);backdrop-filter:blur(18px)}.economy,.lobby-actions,.panel-actions,.phase-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.economy{font:700 .74rem 'JetBrains Mono',monospace;color:#9ab1d1}.economy strong{color:var(--gold);font-size:1rem}.text-button{border:0;background:none;cursor:pointer;color:var(--cyan)}.lobby-actions{margin:16px 0}.button{cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:12px 22px;color:#eef7ff;background:rgba(5,8,20,.6);font-size:.78rem;font-weight:800;letter-spacing:.08em;transition:.2s transform,.2s box-shadow,.2s background}.button:hover{transform:translateY(-2px)}.button-primary{border-color:rgba(63,224,255,.84);background:linear-gradient(100deg,var(--cyan),#83cfff 40%,var(--violet));color:#07101a;box-shadow:0 0 24px rgba(63,224,255,.28)}.button-outline:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(63,224,255,.2)}.difficulty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 18px;text-align:left}.difficulty-grid>p{grid-column:1/-1;margin:0;font:700 .72rem 'JetBrains Mono',monospace;color:var(--gold);letter-spacing:.12em}.difficulty{min-height:80px;padding:12px;border:1px solid var(--line);border-radius:13px;background:rgba(3,5,14,.6);color:#d9e6f8;text-align:left;cursor:pointer}.difficulty b,.difficulty small{display:block}.difficulty small{margin-top:5px;color:#8e9bb3;font-size:.67rem}.difficulty.selected{border-color:var(--cyan);background:linear-gradient(140deg,rgba(63,224,255,.18),rgba(160,107,255,.16));box-shadow:inset 0 0 22px rgba(63,224,255,.09),0 0 18px rgba(63,224,255,.18)}.status{min-height:1.2em;margin:10px 0 0;color:#ffb7dd;font-size:.78rem}.collection-panel{align-self:start}.panel-head{display:flex;justify-content:space-between;align-items:start;gap:16px}.panel-head h2{margin:5px 0;font:800 2rem 'Barlow Condensed',sans-serif;letter-spacing:.05em}.panel-head p:not(.eyebrow){margin:0;color:#aebbd0;font-size:.85rem}.deck-count{padding:10px 14px;border:1px solid var(--gold);border-radius:10px;color:var(--gold);font:700 1.05rem 'JetBrains Mono',monospace}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:13px;max-height:64vh;overflow:auto;padding:18px 3px;margin:12px 0}.collection-card,.card-unit{position:relative;isolation:isolate;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b1020;color:#fff}.collection-card{min-height:232px;padding:0;text-align:left;cursor:pointer;transition:.2s transform,.2s box-shadow}.collection-card:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(0,0,0,.45)}.collection-card.selected{border:2px solid var(--gold);box-shadow:0 0 20px rgba(232,196,104,.35)}.card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.82}.collection-card::after,.card-unit::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(2,4,14,.88) 70%)}.card-meta{position:absolute;inset:0;padding:9px;display:flex;flex-direction:column;justify-content:space-between}.card-grade{align-self:flex-start;padding:4px 7px;border:1px solid currentColor;border-radius:8px;background:rgba(4,6,15,.8);font:700 .56rem 'JetBrains Mono',monospace;color:var(--gold)}.card-name{font:800 .78rem/1.25 'Barlow Condensed',sans-serif;letter-spacing:.04em;text-shadow:0 2px 5px #000}.card-stats{display:flex;justify-content:space-between;gap:4px;font:700 .62rem 'JetBrains Mono',monospace}.card-stats b{padding:4px 6px;border-radius:7px;background:rgba(3,6,14,.86)}.card-hp{position:absolute;top:7px;left:50%;transform:translateX(-50%);padding:5px 9px;border:1px solid rgba(255,255,255,.58);border-radius:99px;background:rgba(5,8,16,.9);color:#ff839b;font:800 .68rem 'JetBrains Mono',monospace}.card-cost{color:var(--cyan)}.card-atk{color:#ff98ca}.battle-screen{place-items:stretch;background:linear-gradient(rgba(3,5,13,.55),rgba(3,5,13,.76)),url('../../game/assets/boards/board_echo_grid_v1.webp') center/cover}.battle-top,.core-row,.phase-controls{width:min(1120px,100%);margin-inline:auto}.battle-top{display:flex;justify-content:space-between;color:#dce9ff;font:700 .72rem 'JetBrains Mono',monospace}.core-row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}.core{min-width:145px;padding:10px 15px;border:1px solid var(--line);border-radius:12px;background:rgba(4,7,17,.77);color:#cbdcff;text-align:left}.core b{display:block;margin-top:2px;font:800 1.6rem 'Barlow Condensed',sans-serif}.core.ai{border-color:rgba(255,47,176,.55);color:#ffb5dc}.core.player{color:#bcefff;text-align:right}.turn-rule{padding:7px 10px;border:1px solid var(--gold);border-radius:99px;background:rgba(6,7,15,.7);color:var(--gold);font:700 .62rem 'JetBrains Mono',monospace;text-align:center}.turn-rule:empty{display:none}#battlefield{width:min(1120px,100%);min-height:360px;margin:auto;padding:20px;border:1px solid rgba(130,198,255,.3);border-radius:22px;background:linear-gradient(rgba(4,7,20,.28),rgba(4,7,20,.55)),url('../../game/assets/boards/board_echo_grid_v1.webp') center/cover;box-shadow:inset 0 0 60px rgba(0,0,0,.55),0 18px 45px rgba(0,0,0,.33)}.field-row>p,.hand-wrap>p{margin:0 0 8px;text-align:center;color:#dfeeff;font:700 .65rem 'JetBrains Mono',monospace;letter-spacing:.16em}.field-divider{height:22px;display:grid;place-items:center;color:var(--cyan);text-shadow:0 0 14px var(--cyan)}.zone,.hand{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.slot{width:112px;height:157px;border:1px dashed rgba(194,224,255,.25);border-radius:11px;background:rgba(3,6,16,.21);transition:.2s}.slot.can-drop{border-color:var(--cyan);box-shadow:0 0 16px rgba(63,224,255,.55),inset 0 0 18px rgba(63,224,255,.15)}.card-unit{width:112px;height:157px;cursor:pointer;transition:.18s transform,.18s box-shadow}.hand{min-height:165px}.hand .card-unit:hover{transform:translateY(-18px) scale(1.06);box-shadow:0 15px 25px rgba(0,0,0,.5),0 0 20px rgba(63,224,255,.45)}.card-unit.selected,.card-unit.attacker-selected{transform:translateY(-12px) scale(1.05);border:2px solid var(--gold);box-shadow:0 0 21px rgba(232,196,104,.7)}.card-unit.target-ready,.core.target-ready{border-color:var(--pink);box-shadow:0 0 20px rgba(255,47,176,.62);cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext y='25' font-size='27'%3E⚔%3C/text%3E%3C/svg%3E") 16 16,crosshair}.attack-mode,.attack-mode *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext y='25' font-size='27'%3E⚔%3C/text%3E%3C/svg%3E") 16 16,crosshair!important}.coin-overlay{position:absolute;inset:0;z-index:90;display:grid;place-items:center;background:radial-gradient(circle,rgba(9,16,37,.5),rgba(2,3,9,.93));backdrop-filter:blur(4px)}.coin-stage{text-align:center}.xena-coin{position:relative;width:142px;height:142px;transform-style:preserve-3d;animation:coin-toss 2.2s cubic-bezier(.2,.84,.35,1) forwards}.coin-face{position:absolute;inset:0;display:grid;place-items:center;border:5px solid var(--gold);border-radius:50%;backface-visibility:hidden;background:radial-gradient(circle at 30% 25%,#fff2b0,#b77e12 48%,#4f2604 100%);color:#120c05;font:800 3.4rem 'Barlow Condensed',sans-serif;box-shadow:0 0 38px rgba(232,196,104,.58)}.coin-back{transform:rotateY(180deg);font-size:2rem;background:radial-gradient(circle at 30% 25%,#dafaff,#278ec3 48%,#071a4e 100%)}.coin-stage p{color:#fff;font:700 .9rem 'JetBrains Mono',monospace;letter-spacing:.1em}.dash-attack{position:relative;z-index:15;animation:dash-attack .43s cubic-bezier(.2,.8,.25,1) both}.ai-summon{animation:ai-summon .55s cubic-bezier(.2,.8,.3,1) both}.death-shatter{animation:death-shatter .54s steps(5,end) forwards}.camera-shake{animation:shake .34s linear}.damage-pop{position:absolute;z-index:25;color:#ff5a79;font:800 1.6rem 'JetBrains Mono',monospace;text-shadow:0 0 15px #f24;animation:damage .65s forwards}.ripple-ring{position:absolute;inset:8%;border:2px solid var(--cyan);border-radius:50%;animation:ripple .6s forwards}@keyframes coin-toss{0%{transform:translateY(80px) rotateY(0) rotateZ(0)}55%{transform:translateY(-140px) rotateY(1440deg) rotateZ(140deg)}100%{transform:translateY(0) rotateY(1800deg) rotateZ(0)}}@keyframes dash-attack{0%,100%{transform:translate(0) scale(1)}45%{transform:translate(var(--attack-x),var(--attack-y)) scale(1.18) rotate(3deg);filter:brightness(1.5)}}@keyframes ai-summon{0%{opacity:0;transform:translateY(-70px) rotateX(72deg) scale(.55)}100%{opacity:1;transform:none}}@keyframes death-shatter{0%{opacity:1;filter:hue-rotate(0)}45%{filter:hue-rotate(290deg) saturate(2);clip-path:polygon(0 0,100% 4%,82% 46%,100% 100%,18% 88%,0 52%)}100%{opacity:0;transform:scale(.22) rotate(18deg);clip-path:polygon(50% 0,100% 42%,66% 52%,82% 100%,40% 66%,0 100%,27% 49%,0 12%)}}@keyframes shake{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(3px,-1px)}}@keyframes damage{0%{opacity:0;transform:translate(-50%,0) scale(.6)}30%{opacity:1;transform:translate(-50%,-15px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-65px) scale(1)}}@keyframes ripple{from{opacity:.9;transform:scale(.2)}to{opacity:0;transform:scale(2.4)}}@media(max-width:680px){.game-header{height:58px}.hub-link{font-size:0}.hub-link::after{content:'←';font-size:1.1rem}.brand-lockup strong{font-size:.75rem}.screen{min-height:calc(100vh - 58px);padding:18px 12px}.difficulty-grid{grid-template-columns:1fr}.core-row{grid-template-columns:1fr 1fr}.turn-rule{grid-column:1/-1;grid-row:2}.slot,.card-unit{width:84px;height:120px}.card-grid{grid-template-columns:repeat(2,1fr)}.collection-card{min-height:220px}#battlefield{padding:12px}.battle-top{font-size:.6rem}.core{min-width:0}.hand{gap:5px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}
/* 2026-07-28 commercial UI overrides */
.difficulty-grid{grid-template-columns:repeat(4,1fr)}
.battle-hp{position:absolute;right:4px;top:50%;z-index:4;transform:translateY(-50%);padding:5px 6px;border:1px solid rgba(255,117,181,.9);border-radius:8px;background:rgba(5,8,16,.9);color:#ff9bc8;font:800 .62rem 'JetBrains Mono',monospace;box-shadow:0 0 12px rgba(255,47,176,.45)}
.card-unit::after{display:none}.card-unit .card-art{opacity:1}
.deck-top-actions{margin-top:16px;justify-content:flex-start}.card-list-heading{margin:20px 0 0;color:#f2f7ff;font:800 1rem 'Barlow Condensed',sans-serif;letter-spacing:.12em}
.affinity-rule{width:min(1120px,100%);margin:5px auto 8px;color:#aeefff;text-align:center;font:700 .62rem 'JetBrains Mono',monospace;letter-spacing:.03em}
.compact{padding:7px 12px;font-size:.65rem}.record-panel{width:min(560px,calc(100% - 28px));padding:24px;border:1px solid var(--cyan);border-radius:18px;background:rgba(5,8,20,.96);text-align:center;box-shadow:0 0 35px rgba(63,224,255,.26)}.record-panel table{width:100%;margin:18px 0;border-collapse:collapse}.record-panel th,.record-panel td{padding:10px;border-bottom:1px solid var(--line);font-size:.78rem}.result-panel{text-align:center;max-width:390px}
@media(max-width:680px){.difficulty-grid{grid-template-columns:repeat(2,1fr)}}