:root{
  --bg:#070b12;
  --panel:rgba(8,12,24,.9);
  --line:rgba(255,255,255,.18);
  --muted:#9fb0cc;
  --gold:#ffd65a;
  --green:#62ff9f;
  --red:#ff5b5b;
  --blue:#75e8ff;
}

.game-end-overlay.surrender .game-end-glow{
  background:radial-gradient(circle at 50% 42%,rgba(255,72,98,.28),transparent 34%);
}

.game-end-overlay.surrender .game-end-burst{
  background:radial-gradient(circle,rgba(255,72,98,.48),transparent 58%);
}

.game-end-overlay.surrender .game-end-card{
  width:min(520px,calc(100vw - 24px));
}

.game-end-overlay.surrender .game-end-kicker{
  color:#ff9ca7;
}

.game-end-overlay.surrender .game-end-title{
  max-width:100%;
  font-size:clamp(32px,11vw,54px);
  color:#ff9aa7;
  white-space:nowrap;
  text-shadow:0 5px 0 rgba(0,0,0,.42),0 0 28px rgba(255,72,98,.38);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:var(--bg);color:#fff;user-select:none}
body{background:radial-gradient(circle at top,#223761,#111827 55%,#070b12);overflow-x:hidden}
button{font:inherit}
.game-shell{max-width:1240px;margin:0 auto;padding:14px 14px 0;transition:none}
.battlefield{display:grid;grid-template-columns:130px minmax(560px,1fr) 130px;gap:12px;align-items:center}
.hero-side{display:flex;align-items:center;justify-content:center}
.hero{width:124px;min-height:96px;border-radius:18px;border:2px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.28);cursor:pointer;position:relative}
.hero.enemy{border-color:rgba(255,91,91,.45)}
.hero.player{border-color:rgba(98,204,255,.45)}
.hero-title{font-size:12px;text-transform:uppercase;color:#cbd5e1;font-weight:850}
.hero-hp{font-size:34px;line-height:1;font-weight:950}
.hero-sub{font-size:11px;color:#aab3c8}
.hero.target{border-color:transparent!important;box-shadow:0 0 0 4px rgba(255,214,82,.18),0 0 34px rgba(255,214,82,.38)!important}
.hero.target::before{content:"";position:absolute;inset:-6px;border-radius:23px;padding:3px;background:repeating-linear-gradient(90deg,var(--gold) 0 13px,transparent 13px 24px);background-size:48px 48px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:dashMarch .55s linear infinite;filter:drop-shadow(0 0 7px rgba(255,214,82,.75))}
.hero.attack-hover-target{box-shadow:0 0 0 4px rgba(255,104,104,.65),0 0 34px rgba(255,104,104,.5)!important}
.board{width:100%;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);border-radius:24px;padding:14px;box-shadow:inset 0 0 60px rgba(0,0,0,.15)}
.board-grid{display:grid;grid-template-columns:78px repeat(3,minmax(82px,96px)) 78px;justify-content:center;column-gap:16px;row-gap:8px;align-items:stretch}
.slot,.pile{width:86px;min-height:108px;aspect-ratio:3/4;border-radius:15px;position:relative;display:flex;align-items:center;justify-content:center}
.slot{border:2px dashed rgba(255,255,255,.19);background:rgba(0,0,0,.14);transition:.14s ease;overflow:visible}
.slot::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%) rotate(45deg);border:2px solid rgba(255,255,255,.24);border-radius:3px;pointer-events:none}
.slot.spell-slot::before{transform:translate(-50%,-50%);border-radius:50%}
.slot:has(.card)::before{display:none}
.slot.drop-valid{border-color:var(--green);background:rgba(98,255,159,.12);box-shadow:0 0 0 3px rgba(98,255,159,.12)}
.slot.drop-valid::before{border-color:var(--green);box-shadow:0 0 12px rgba(98,255,159,.45)}
.slot.drop-hover{border-color:#fff06c;background:rgba(255,240,108,.18);transform:translateY(-2px)}
.slot.target{border-color:var(--gold)!important;border-style:dashed!important;background:rgba(255,214,82,.1)!important;box-shadow:0 0 0 3px rgba(255,214,82,.12),0 0 18px rgba(255,214,82,.2)!important}
.slot.target .card{border-color:var(--gold)!important;border-style:dashed!important;box-shadow:0 0 0 3px rgba(255,214,82,.28),0 0 18px rgba(255,214,82,.38),0 12px 22px rgba(0,0,0,.34)!important}
.slot.spell-slot{margin-inline:4px}
.shared-gap{width:86px;min-height:18px}
.arena-divider{grid-column:1/-1;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);margin:8px 0}
.enemy-divider{margin-top:12px}.player-divider{margin-bottom:12px}
.pile{border:0;background:transparent;isolation:isolate;flex-direction:column;color:#fff}
.pile::before,.pile::after,.pile-card{content:"";position:absolute;width:68px;height:92px;border-radius:12px;background:linear-gradient(135deg,#18233b,#384b7a);border:2px solid rgba(255,255,255,.16);box-shadow:0 10px 22px rgba(0,0,0,.28);left:50%;top:50%}
.pile::before{transform:translate(calc(-50% + 8px),calc(-50% - 8px)) rotate(3deg);opacity:.55;z-index:0}
.pile::after{transform:translate(calc(-50% + 4px),calc(-50% - 4px)) rotate(-2deg);opacity:.72;z-index:1}
.pile-card{transform:translate(-50%,-50%);z-index:2}
.discard-pile::before,.discard-pile::after,.discard-pile .pile-card{background:linear-gradient(135deg,#272232,#15101f)}
.pile strong,.pile span{position:relative;z-index:3;text-shadow:0 2px 0 rgba(0,0,0,.7)}
.pile strong{font-size:25px}.pile span{font-size:9px;text-transform:uppercase;color:#d0d8e6;font-weight:900}
.pile.empty::before,.pile.empty::after{display:none}.pile.empty .pile-card{opacity:.25;border-style:dashed}
.bottom-ui{margin-top:10px;display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:end}
.energy-panel{padding:12px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);text-align:center;font-weight:950}
.energy-panel strong{display:block;font-size:28px}.energy-panel small{color:#aab6ce}
.hand-panel{position:relative;height:174px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);padding:10px 132px 0 10px;overflow:visible}
.hand{height:164px;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;overflow:visible;gap:0;padding:8px 40px 0}
.hand .card{width:116px!important;height:150px!important;margin-left:-34px;flex:0 0 auto;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;z-index:10;overflow:visible}
.hand .card:first-child{margin-left:0}
.hand .card:hover,.hand .card.hand-selected{z-index:9999!important;transform:translateY(-18px) scale(1.06)!important;box-shadow:0 0 0 3px rgba(255,255,255,.34),0 24px 42px rgba(0,0,0,.58)!important}
.hand .card.invalid{opacity:1;filter:saturate(.45) brightness(.75)}
.hand .card .cost{display:flex!important;position:absolute;left:-13px;top:4px;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#07131b;border:2px solid #fff;align-items:center;justify-content:center;font-weight:950;z-index:80;box-shadow:0 3px 10px rgba(0,0,0,.45)}
.hand .card .stats{position:absolute;left:-10px;top:43px;z-index:100;display:flex;flex-direction:column;gap:4px;align-items:flex-start;font-size:13px;font-weight:950;text-shadow:0 2px 3px rgba(0,0,0,.9)}
.hand .card .stats .atk{color:var(--red)}.hand .card .stats .hp{color:#8df58f}
.end-turn-wrap{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:108px;display:flex;flex-direction:column;align-items:center;gap:6px}
.end-turn{width:104px;height:104px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 35% 25%,#fff4a8,#f1ca4e 44%,#9d6814);color:#160e03;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,0,0,.44),inset 0 -9px 18px rgba(0,0,0,.18)}
.end-turn:disabled{opacity:.55;filter:saturate(.5);cursor:not-allowed}.end-turn>span{position:absolute;font-size:18px;font-weight:950;line-height:.9;text-align:center}.end-turn>small{position:absolute;bottom:16px;font-size:12px;font-weight:950}
.timer-ring{position:absolute;inset:-7px;width:118px;height:118px;transform:rotate(-90deg)}
.timer-track{fill:none;stroke:rgba(255,255,255,.24);stroke-width:8}.timer-progress{fill:none;stroke:#60f783;stroke-width:8;stroke-linecap:round;transition:.2s}.timer-progress.mid{stroke:#ffe45c}.timer-progress.low{stroke:#ff5f5f}
.timer-status{font-size:11px;color:#aab6ce;font-weight:900}
.card{width:84px;height:106px;border-radius:12px;border:2px solid rgba(255,255,255,.18);background:linear-gradient(160deg,#273a65,#101827);padding:6px;display:flex;flex-direction:column;justify-content:space-between;position:relative;box-shadow:0 11px 22px rgba(0,0,0,.32);cursor:pointer;overflow:hidden}
.card.enemy{background:linear-gradient(160deg,#642b36,#211017)}.card.spell-card{background:linear-gradient(160deg,#5b2742,#21101d)}
.card .art{position:absolute;inset:0;border-radius:10px;overflow:hidden;z-index:0;opacity:.9}.card .art img{width:100%;height:100%;object-fit:cover;display:block}.card .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.42) 58%,rgba(0,0,0,.86))}
.card .card-info,.card .stats,.card .cost{position:relative;z-index:2}.card-info{margin-top:auto}.name{font-size:10px;font-weight:950;line-height:1.05;text-shadow:0 2px 3px rgba(0,0,0,.9)}.type{font-size:8px;text-transform:uppercase;color:#aab6cd;font-weight:900}.stats{display:flex;justify-content:space-between;font-size:11px;font-weight:950}.atk{color:var(--red)}.hp{color:#8df58f}.card .cost{display:none}
.card.can-attack{border-color:rgba(255,214,82,.95)!important;box-shadow:0 0 0 2px rgba(255,214,82,.34),0 0 14px rgba(255,214,82,.24),0 12px 22px rgba(0,0,0,.34)!important}
.card.attack-active,.card.attack-active.selected,.card.can-attack.attack-active{z-index:999!important;border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(255,214,82,.6),0 0 28px rgba(255,214,82,.72),0 28px 42px rgba(0,0,0,.55)!important;animation:attackFloat .75s ease-in-out infinite alternate!important;overflow:visible}
.card.attack-active::before{content:"";display:block;position:absolute;inset:-6px;border-radius:16px;padding:2px;background:conic-gradient(from var(--attack-angle,0deg),transparent 0deg,rgba(255,214,82,.25) 45deg,var(--gold) 90deg,#fff6a7 120deg,transparent 180deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:attackSpin 1s linear infinite}
.card.attack-hover-target{box-shadow:0 0 0 4px rgba(255,104,104,.65),0 0 28px rgba(255,104,104,.42),0 14px 28px rgba(0,0,0,.42)!important}
.card.face-down .art,.card.face-down .card-info,.card.face-down .stats{display:none}.card.face-down{background:linear-gradient(135deg,#10182d,#3b285f);border-color:#8e70db}.card.face-down::after{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:950;color:#cdbdff}
.card.buff-blessing{box-shadow:0 0 0 2px rgba(120,255,155,.5),0 0 18px rgba(120,255,155,.38)}
.drag-source{opacity:0!important}.drag-ghost{position:fixed;z-index:30050!important;pointer-events:none;transform:translate(-50%,-50%) scale(.7);touch-action:none;user-select:none;-webkit-user-select:none;will-change:left,top}
body.game-dragging .drag-ghost{
  visibility:visible!important;
  opacity:1!important;
  display:block!important;
}
.utility-panel{position:fixed;left:16px;top:16px;width:210px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:20px;background:var(--panel);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(9px);z-index:6000;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}
body.utility-collapsed .utility-panel{transform:translateX(-250px);opacity:0;pointer-events:none}.panel-open{position:fixed;left:0;top:16px;width:34px;height:86px;border-radius:0 16px 16px 0;border:1px solid rgba(255,255,255,.18);border-left:0;background:rgba(8,12,24,.86);color:#fff;z-index:5900;display:none;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,.42);backdrop-filter:blur(8px)}body.utility-collapsed .panel-open{display:block}.panel-open:hover,.panel-open:focus-visible{background:rgba(33,52,84,.96);outline:0}
.phase-badge,.turn-badge,.mode-hint{border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-weight:900}.phase-badge{font-size:17px}.phase-badge-hidden,.mode-hint-hidden,.battle-log-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}.turn-badge{display:none!important;color:#d7e1f4}.mode-hint{font-size:12px;color:#ffd66e;min-height:38px}.gameplay-menu-title{padding:2px 4px 4px;color:#75e8ff;font-size:12px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.surrender-btn{min-height:46px;border:0;border-radius:15px;background:linear-gradient(180deg,#ff8a7b,#b9333f);color:#220407;font-weight:1000;cursor:pointer;box-shadow:0 12px 24px rgba(0,0,0,.32),0 0 18px rgba(255,91,91,.16)}.surrender-btn:hover,.surrender-btn:focus-visible{filter:brightness(1.08);outline:3px solid rgba(255,120,120,.22);outline-offset:2px}.battle-log{min-height:120px;max-height:390px;overflow:auto;border-radius:14px;background:rgba(0,0,0,.24);padding:9px;color:#b8c4dd;font-size:12px}.battle-log div{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.main-menu-overlay{position:fixed;inset:0;z-index:20500;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 36%,rgba(117,232,255,.17),transparent 28%),rgba(3,7,16,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .22s ease}.main-menu-overlay[hidden]{display:none}.main-menu-overlay.open{opacity:1;pointer-events:auto}body.main-menu-open{overflow:hidden}.main-menu-card{width:min(430px,calc(100vw - 38px));padding:28px 24px 24px;border-radius:24px;border:1px solid rgba(255,255,255,.18);background:radial-gradient(circle at 24% 0,rgba(255,214,82,.16),transparent 36%),linear-gradient(180deg,rgba(18,28,50,.97),rgba(6,10,20,.98));box-shadow:0 34px 100px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.12);text-align:center;transform:translateY(16px) scale(.96);transition:transform .24s cubic-bezier(.2,.8,.2,1)}.main-menu-overlay.open .main-menu-card{transform:translateY(0) scale(1)}.main-menu-kicker{display:inline-flex;margin-bottom:10px;padding:6px 11px;border-radius:999px;border:1px solid rgba(117,232,255,.24);background:rgba(117,232,255,.09);color:#75e8ff;font-size:11px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.main-menu-card h1{margin:0;color:#fff3a8;font-size:clamp(44px,8vw,66px);line-height:.95;font-weight:1000;text-transform:uppercase;text-shadow:0 5px 0 rgba(0,0,0,.42),0 0 28px rgba(255,214,82,.28)}.main-menu-card p{max-width:330px;margin:14px auto 12px;color:#cbd7ea;font-size:14px;line-height:1.5}.main-menu-active-deck{margin:0 auto 18px;padding:8px 10px;border:1px solid rgba(255,214,82,.22);border-radius:999px;background:rgba(255,214,82,.08);color:#ffe18b;font-size:12px;font-weight:950}.main-menu-actions{display:grid;gap:10px}.main-menu-actions button{min-height:46px;border-radius:15px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(33,52,84,.95),rgba(11,20,38,.95));color:#d9f5ff;font-weight:950;cursor:pointer}.main-menu-actions button:hover,.main-menu-actions button:focus-visible{border-color:rgba(117,232,255,.48);box-shadow:0 0 0 3px rgba(117,232,255,.12);outline:0}.main-menu-actions .main-menu-play{min-height:56px;border:0;background:linear-gradient(180deg,#fff08a,#d79a24);color:#1b1002;font-size:18px;box-shadow:0 16px 30px rgba(0,0,0,.34),0 0 24px rgba(255,214,82,.2)}
.main-menu-overlay{overflow:hidden}.main-menu-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.main-menu-bg-placeholder{position:absolute;inset:0;background-image:url("../assets/menu/main_menu_bg.png"),radial-gradient(circle at 50% 34%,rgba(255,214,82,.18),transparent 28%),radial-gradient(circle at 20% 58%,rgba(117,232,255,.16),transparent 32%),radial-gradient(circle at 82% 54%,rgba(255,91,91,.16),transparent 30%),linear-gradient(180deg,#070a12 0%,#101b31 45%,#03050b 100%);background-size:cover,auto,auto,auto,auto;background-position:center}.main-menu-bg-placeholder::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.48) 38%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.18)),radial-gradient(circle at 50% 54%,transparent 0 19%,rgba(0,0,0,.42) 48%,rgba(0,0,0,.72) 100%)}.main-menu-character{position:absolute;bottom:-2vh;width:clamp(240px,33vw,520px);height:min(78vh,680px);opacity:.96;filter:drop-shadow(0 28px 38px rgba(0,0,0,.62));transform-origin:bottom center}.main-menu-character::before,.main-menu-character::after{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:center bottom;background-size:contain}.main-menu-character::before{z-index:2;background-image:var(--menu-character-image)}.main-menu-character::after{z-index:1;inset:8% 7% 0;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(117,232,255,.34) 18%,rgba(17,30,58,.82) 45%,rgba(255,214,82,.46));clip-path:polygon(47% 0,61% 12%,67% 29%,82% 37%,72% 50%,86% 68%,69% 100%,28% 100%,15% 70%,28% 51%,18% 34%,35% 25%);opacity:.62}.main-menu-character-left{--menu-character-image:url("../assets/menu/main_menu_enemy_left.png");left:calc(50% - min(42vw,620px));transform:translateX(-8%) rotate(-2deg)}.main-menu-character-right{--menu-character-image:url("../assets/menu/main_menu_enemy_right.png");right:calc(50% - min(42vw,620px));transform:translateX(8%) rotate(2deg)}.main-menu-card{position:relative;z-index:2}.main-menu-overlay.open .main-menu-character-left{animation:mainMenuLeftIn .48s cubic-bezier(.2,.8,.2,1) both}.main-menu-overlay.open .main-menu-character-right{animation:mainMenuRightIn .48s cubic-bezier(.2,.8,.2,1) both}@keyframes mainMenuLeftIn{from{opacity:0;transform:translateX(-18%) rotate(-4deg) scale(.96)}to{opacity:.96;transform:translateX(-8%) rotate(-2deg) scale(1)}}@keyframes mainMenuRightIn{from{opacity:0;transform:translateX(18%) rotate(4deg) scale(.96)}to{opacity:.96;transform:translateX(8%) rotate(2deg) scale(1)}}
.main-menu-action-group{display:grid;gap:9px}.main-menu-manage-group,.main-menu-learn-group{grid-template-columns:1fr 1fr}.main-menu-action-group+.main-menu-action-group{margin-top:9px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09)}.main-menu-footer{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:center}.main-menu-actions .main-menu-about{min-height:0;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.055);color:#9fb0cc;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.main-menu-actions .main-menu-about:hover,.main-menu-actions .main-menu-about:focus-visible{color:#d9f5ff;border-color:rgba(117,232,255,.42);box-shadow:0 0 0 3px rgba(117,232,255,.1);outline:0}.about-overlay{z-index:22100}.about-shell{width:min(520px,calc(100vw - 32px));height:auto;min-height:0;margin:auto;padding:18px;border-radius:22px}.about-head{display:grid;grid-template-columns:auto 1fr auto;text-align:center}.about-head .menu-back-btn{justify-self:start}.about-head-spacer{width:64px}.about-body{display:grid;gap:12px;padding:10px 4px 2px;color:#cbd7ea;text-align:center;font-size:14px;line-height:1.55}.about-body p{margin:0}.about-body strong{margin-top:4px;color:#fff3a8;font-size:13px;letter-spacing:.05em;text-transform:uppercase}@media(max-width:520px){.main-menu-manage-group,.main-menu-learn-group{grid-template-columns:1fr}.about-head-spacer{display:none}.about-head{grid-template-columns:auto 1fr}.about-head>div{text-align:left}}
@media(max-width:760px){.main-menu-bg-placeholder::after{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.62) 35%,rgba(0,0,0,.64) 65%,rgba(0,0,0,.28)),radial-gradient(circle at 50% 54%,transparent 0 18%,rgba(0,0,0,.54) 46%,rgba(0,0,0,.82) 100%)}.main-menu-character{bottom:-3vh;width:clamp(190px,48vw,310px);height:min(66vh,520px);opacity:.5;filter:drop-shadow(0 18px 26px rgba(0,0,0,.58))}.main-menu-character::after{opacity:.42}.main-menu-character-left{left:-34px;transform:translateX(-6%) rotate(-2deg)}.main-menu-character-right{right:-34px;transform:translateX(6%) rotate(2deg)}.main-menu-overlay.open .main-menu-character-left{animation:none}.main-menu-overlay.open .main-menu-character-right{animation:none}}
.main-menu-character{
  bottom:-1vh;
  width:clamp(300px,38vw,620px);
  height:min(86vh,760px);
}

.main-menu-character-left{
  left:clamp(-90px,-4vw,-28px);
  transform:translate3d(0,0,0) scale(1.08);
}

.main-menu-character-right{
  right:clamp(-90px,-4vw,-28px);
  transform:translate3d(0,0,0) scale(1.08);
}

.main-menu-scene::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:max(130vw,130vh);
  aspect-ratio:1;
  z-index:1;
  pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,244,184,.2) 0 7%,transparent 18%),
    conic-gradient(
      from 0deg,
      transparent 0deg 12deg,
      rgba(117,232,255,.22) 18deg,
      rgba(255,244,184,.38) 25deg,
      transparent 38deg 70deg,
      rgba(117,232,255,.14) 82deg,
      transparent 100deg 142deg,
      rgba(255,214,82,.24) 154deg,
      rgba(255,244,184,.34) 160deg,
      transparent 174deg 220deg,
      rgba(117,232,255,.16) 232deg,
      transparent 250deg 300deg,
      rgba(255,244,184,.24) 314deg,
      transparent 330deg 360deg
    );
  mix-blend-mode:screen;
  opacity:.58;
  transform:translate3d(-50%,-50%,0) rotate(0deg);
  filter:blur(.5px);
  animation:mainMenuRaySpin 18s linear infinite;
}

.main-menu-scene::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 46%,rgba(117,232,255,.24),transparent 24%),
    radial-gradient(circle at 88% 44%,rgba(255,214,82,.2),transparent 25%),
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.1),transparent 18%);
  mix-blend-mode:screen;
  opacity:.7;
  animation:mainMenuGlowPulse 5.8s ease-in-out infinite;
}

.main-menu-overlay.open .main-menu-character-left{
  animation:none;
}

.main-menu-overlay.open .main-menu-character-right{
  animation:none;
}

@keyframes mainMenuRaySpin{
  from{transform:translate3d(-50%,-50%,0) rotate(0deg)}
  to{transform:translate3d(-50%,-50%,0) rotate(360deg)}
}

@keyframes mainMenuGlowPulse{
  0%,100%{opacity:.46;filter:blur(0)}
  50%{opacity:.82;filter:blur(1px)}
}

@media(max-width:760px){
  .main-menu-character{
    bottom:-2vh;
    width:clamp(220px,54vw,360px);
    height:min(70vh,560px);
    opacity:.58;
  }

  .main-menu-character-left{
    left:-62px;
  }

  .main-menu-character-right{
    right:-62px;
  }
}

.main-menu-character::after{
  display:none !important;
}
.collection-open-btn{border:1px solid rgba(117,232,255,.26);border-radius:14px;padding:10px;background:linear-gradient(180deg,rgba(33,52,84,.95),rgba(11,20,38,.95));color:#d9f5ff;font-weight:950;cursor:pointer}.collection-open-btn:hover{border-color:rgba(117,232,255,.48);box-shadow:0 0 18px rgba(117,232,255,.14)}
.phase-banner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:10000;opacity:0}.phase-banner.show{animation:phasePop 1s ease forwards}.phase-banner span{padding:20px 38px;border-radius:24px;background:rgba(8,12,24,.92);border:2px solid rgba(255,255,255,.18);box-shadow:0 24px 70px rgba(0,0,0,.5);font-size:40px;font-weight:950;text-transform:uppercase}
.game-end-overlay{position:fixed;inset:0;z-index:21000;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.11),transparent 24%),rgba(3,6,14,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .22s ease}
.game-end-overlay[hidden]{display:none}.game-end-overlay.show{opacity:1;pointer-events:auto}.game-end-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 42%,rgba(117,232,255,.26),transparent 34%);animation:endGlow 2.4s ease-in-out infinite alternate}.game-end-overlay.defeat .game-end-glow{background:radial-gradient(circle at 50% 42%,rgba(255,72,98,.28),transparent 34%)}.game-end-overlay.draw .game-end-glow{background:radial-gradient(circle at 50% 42%,rgba(205,220,235,.22),transparent 34%)}
.game-end-card{position:relative;width:min(440px,calc(100vw - 36px));padding:28px 24px 22px;border-radius:22px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(18,28,50,.96),rgba(6,10,20,.97));box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.12);text-align:center;overflow:hidden;transform:translateY(18px) scale(.94);opacity:.2}.game-end-overlay.show .game-end-card{animation:endCardIn .48s cubic-bezier(.2,.9,.2,1) forwards}
.game-end-card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 24%,rgba(255,255,255,.13) 34%,transparent 45% 100%);transform:translateX(-120%)}.game-end-overlay.show .game-end-card::before{animation:endSheen 1.1s ease .18s forwards}.game-end-burst{position:absolute;left:50%;top:34px;width:170px;height:170px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,214,82,.46),transparent 58%);filter:blur(2px);opacity:.75}.game-end-overlay.defeat .game-end-burst{background:radial-gradient(circle,rgba(255,72,98,.48),transparent 58%)}.game-end-overlay.draw .game-end-burst{background:radial-gradient(circle,rgba(200,220,235,.34),transparent 58%)}
.game-end-kicker{position:relative;display:inline-flex;margin-bottom:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);color:#ffd66e;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.12em}.game-end-overlay.defeat .game-end-kicker{color:#ff9ca7}.game-end-overlay.draw .game-end-kicker{color:#cbd5e1}
.game-end-title{position:relative;margin:0;font-size:clamp(42px,9vw,68px);line-height:.95;font-weight:1000;text-transform:uppercase;color:#fff2a8;text-shadow:0 5px 0 rgba(0,0,0,.42),0 0 28px rgba(255,214,82,.42)}.game-end-overlay.defeat .game-end-title{color:#ff9aa7;text-shadow:0 5px 0 rgba(0,0,0,.42),0 0 28px rgba(255,72,98,.38)}.game-end-overlay.draw .game-end-title{color:#e4edf8;text-shadow:0 5px 0 rgba(0,0,0,.42),0 0 24px rgba(190,210,235,.24)}
.game-end-subtitle{position:relative;margin:12px auto 18px;max-width:310px;color:#c8d4e8;font-size:14px;line-height:1.45}.game-end-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px}.game-end-stats span{border-radius:14px;padding:10px 8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}.game-end-stats b{display:block;font-size:24px;line-height:1;font-weight:950}.game-end-stats small{display:block;margin-top:5px;color:#9fb0cc;font-size:10px;font-weight:900;text-transform:uppercase}
.game-end-actions{position:relative;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.game-end-actions button{min-width:128px;border:0;border-radius:14px;padding:12px 14px;font-weight:950;cursor:pointer}.game-end-primary{background:linear-gradient(180deg,#fff08a,#d79a24);color:#1b1002;box-shadow:0 12px 24px rgba(0,0,0,.32),0 0 22px rgba(255,214,82,.22)}.game-end-secondary{background:rgba(255,255,255,.09);color:#dbe7f8;border:1px solid rgba(255,255,255,.15)!important;box-shadow:none}.game-end-actions button:focus-visible{outline:3px solid rgba(117,232,255,.75);outline-offset:3px}
.review-board-menu{position:fixed;left:50%;top:14px;z-index:20950;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translate(-50%,-8px);transition:opacity .18s ease,transform .18s ease}.review-board-menu[hidden]{display:none}.review-board-menu.show{opacity:1;transform:translate(-50%,0)}.review-board-back{pointer-events:auto;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:11px 18px;background:linear-gradient(180deg,rgba(33,52,84,.96),rgba(8,14,28,.97));color:#dff7ff;font-weight:1000;box-shadow:0 16px 34px rgba(0,0,0,.38),0 0 22px rgba(117,232,255,.14);cursor:pointer}.review-board-back:hover,.review-board-back:focus-visible{border-color:rgba(117,232,255,.52);box-shadow:0 18px 38px rgba(0,0,0,.42),0 0 0 3px rgba(117,232,255,.14);outline:0}
.initiative-overlay{position:fixed;inset:0;z-index:21100;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 34%,rgba(117,232,255,.16),transparent 26%),rgba(3,6,14,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .22s ease}.initiative-overlay[hidden]{display:none}.initiative-overlay.show{opacity:1;pointer-events:auto}.initiative-card{width:min(520px,calc(100vw - 32px));padding:24px;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:radial-gradient(circle at 18% 0,rgba(255,214,82,.15),transparent 36%),linear-gradient(180deg,rgba(18,28,50,.97),rgba(6,10,20,.98));box-shadow:0 30px 88px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.12);text-align:center;transform:translateY(14px) scale(.96);transition:transform .24s cubic-bezier(.2,.8,.2,1)}.initiative-overlay.show .initiative-card{transform:translateY(0) scale(1)}.initiative-kicker{display:inline-flex;margin-bottom:9px;padding:6px 11px;border-radius:999px;border:1px solid rgba(117,232,255,.24);background:rgba(117,232,255,.09);color:#75e8ff;font-size:11px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.initiative-card h1{margin:0;color:#fff3a8;font-size:clamp(34px,7vw,50px);line-height:.96;font-weight:1000;text-transform:uppercase;text-shadow:0 4px 0 rgba(0,0,0,.38),0 0 26px rgba(255,214,82,.24)}.initiative-card p{max-width:390px;margin:12px auto 16px;color:#cbd7ea;font-size:13px;line-height:1.45}.initiative-actions{display:grid;gap:10px}.initiative-choice{display:grid;gap:5px;min-height:82px;padding:15px;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:linear-gradient(180deg,rgba(33,52,84,.95),rgba(11,20,38,.95));color:#d9f5ff;text-align:left;cursor:pointer;box-shadow:0 14px 28px rgba(0,0,0,.28);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.initiative-choice:hover,.initiative-choice:focus-visible{transform:translateY(-2px);border-color:rgba(255,214,82,.52);box-shadow:0 18px 36px rgba(0,0,0,.34),0 0 0 3px rgba(255,214,82,.12);outline:0}.initiative-choice span{color:#fff3a8;font-size:18px;font-weight:1000;text-transform:uppercase}.initiative-choice strong{color:#b9c8dd;font-size:12px;line-height:1.35}.initiative-first{background:linear-gradient(180deg,rgba(42,61,96,.96),rgba(11,20,38,.96))}.initiative-second{background:linear-gradient(180deg,rgba(55,80,78,.96),rgba(10,26,29,.96))}
.collection-overlay{position:fixed;inset:0;z-index:22000;padding:18px;background:rgba(3,7,16,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .2s ease}.collection-overlay[hidden]{display:none}.collection-overlay.open{opacity:1;pointer-events:auto}body.collection-open{overflow:hidden}
.collection-shell{width:min(1180px,calc(100vw - 28px));height:min(780px,calc(100dvh - 28px));margin:auto;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:radial-gradient(circle at 18% 0,rgba(117,232,255,.15),transparent 28%),linear-gradient(145deg,rgba(18,28,50,.98),rgba(6,10,20,.98));box-shadow:0 34px 100px rgba(0,0,0,.68);transform:translateY(14px) scale(.98);transition:transform .22s cubic-bezier(.2,.8,.2,1)}.collection-overlay.open .collection-shell{transform:translateY(0) scale(1)}
.collection-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.collection-kicker{display:block;color:#75e8ff;font-size:11px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}.collection-head h1{margin:2px 0 0;font-size:32px;line-height:1;font-weight:1000}.collection-close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.collection-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) 142px 160px 150px;gap:8px}.collection-toolbar input,.collection-toolbar select{min-width:0;height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.13);background:rgba(5,9,18,.76);color:#edf7ff;padding:0 12px;font-weight:850;outline:0}.collection-toolbar input:focus,.collection-toolbar select:focus{border-color:rgba(117,232,255,.62);box-shadow:0 0 0 3px rgba(117,232,255,.12)}
.collection-body{min-height:0;display:grid;grid-template-columns:1fr;gap:12px;flex:1}.collection-grid-wrap{min-height:0;display:flex;flex-direction:column;gap:8px}.collection-count{color:#aab6ce;font-size:12px;font-weight:900}.collection-grid{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;padding:2px 5px 2px 2px;scrollbar-width:thin}
.collection-card{position:relative;min-height:178px;border:2px solid rgba(255,255,255,.14);border-radius:16px;padding:0;overflow:hidden;background:linear-gradient(160deg,#273a65,#101827);color:#fff;text-align:left;cursor:pointer;box-shadow:0 12px 24px rgba(0,0,0,.28);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.collection-card.spell{background:linear-gradient(160deg,#5b2742,#21101d)}.collection-card:hover{transform:translateY(-2px);border-color:rgba(255,214,82,.82);box-shadow:0 0 0 2px rgba(255,214,82,.18),0 18px 32px rgba(0,0,0,.38)}.collection-cost{position:absolute;left:7px;top:7px;z-index:5;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#75e8ff;color:#07131b;border:2px solid #fff;font-weight:1000}.collection-art{position:absolute;inset:0;overflow:hidden}.collection-art img{width:100%;height:100%;object-fit:cover;display:block}.collection-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 0,rgba(0,0,0,.12) 42%,rgba(0,0,0,.78) 82%,rgba(0,0,0,.94) 100%)}
.collection-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 8px 8px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.66) 42%,rgba(0,0,0,.86));pointer-events:none}.collection-info strong{display:block;font-size:12px;line-height:1.08;text-shadow:0 2px 3px rgba(0,0,0,.9)}.collection-info small{display:block;margin-top:2px;color:#b7c5db;font-size:9px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collection-ability-icons{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;max-width:calc(100% - 42px);pointer-events:none}.collection-ability-icon{position:relative;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:rgba(5,9,18,.78);border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 10px rgba(0,0,0,.32);font-size:12px;font-weight:950}.collection-ability-icon em{position:absolute;right:-5px;top:-6px;min-width:13px;height:13px;display:grid;place-items:center;border-radius:999px;background:rgba(215,225,240,.9);color:#08101d;font-size:8px;font-style:normal;line-height:1}.collection-stats{position:absolute;right:7px;top:7px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:#dce7f8;font-size:10px;font-weight:950}.collection-stats span{min-width:34px;height:20px;display:flex;align-items:center;justify-content:center;padding:0 6px;border-radius:999px;background:rgba(4,8,17,.82);border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 10px rgba(0,0,0,.28)}.collection-stats .atk{color:#ff7770}.collection-stats .counter{color:#ffc86f}.collection-stats .hp{color:#85f0a4}
.collection-detail{min-height:0;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.055)}.collection-detail-card{min-height:0;height:100%;display:grid;place-items:start center}.collection-detail-art{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:18px 18px 0 0;background:linear-gradient(145deg,#263a65,#111a2d)}.collection-detail-art img{width:100%;height:100%;object-fit:cover;display:block}.collection-detail-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.72))}.collection-detail-art span{position:absolute;left:14px;top:14px;z-index:2;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#75e8ff;color:#07131b;border:2px solid #fff;font-weight:1000}.collection-detail-copy{padding:16px}.collection-detail-copy small{color:#9fb0cc;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.collection-detail-copy h2{margin:5px 0 12px;font-size:28px;line-height:1.05}.collection-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.collection-detail-stat{border-radius:13px;padding:10px 8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);text-align:center}.collection-detail-stat b{display:block;font-size:21px;line-height:1;font-weight:1000}.collection-detail-stat span{display:block;margin-top:5px;color:#aab6ce;font-size:10px;font-weight:900;text-transform:uppercase}.collection-passives{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.collection-passives span{border-radius:999px;padding:5px 8px;background:rgba(117,232,255,.1);border:1px solid rgba(117,232,255,.24);color:#d9f5ff;font-size:11px;font-weight:900}.collection-detail-copy p{margin:0;color:#d6dfef;line-height:1.5;font-size:14px}.collection-empty{height:100%;display:grid;place-items:center;color:#aab6ce;font-weight:900}
.collection-inspect-preview{width:100%;padding:12px;display:grid;place-items:center}.collection-detail .inspect-card{width:min(100%,215px);margin:0 auto;border-radius:18px}.collection-detail .inspect-card-cost{top:9px;left:9px;width:36px;height:36px;font-size:17px}.collection-detail .inspect-card-body{padding:14px 12px 12px}.collection-detail .inspect-card-name{padding-right:40px;font-size:18px}.collection-detail .inspect-card-type{font-size:9px;letter-spacing:.09em}.collection-detail .inspect-card-description{margin-top:7px;font-size:10px;line-height:1.3}.collection-detail .inspect-card-stats{right:9px;bottom:9px;gap:4px}.collection-detail .inspect-stat{min-width:35px;height:30px;padding:0 6px;border-radius:11px;font-size:12px}
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:12000}.damage-float{position:fixed;font-size:28px;font-weight:950;color:#ff7070;text-shadow:0 2px 0 #000;animation:damageFloat .9s ease forwards}.combat-calc{position:fixed;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.82);border:1px solid rgba(255,255,255,.25);font-weight:950;animation:calcFloat .95s ease forwards}.projectile{position:fixed;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6b0,#ff8a00 42%,#e72900 70%);box-shadow:0 0 20px #ff8a00,0 0 38px rgba(255,40,0,.75);z-index:12500}.blessing-orb{position:fixed;width:42px;height:42px;border-radius:50%;border:3px solid #9cffb1;box-shadow:0 0 24px #75ff98,inset 0 0 18px #baffc8;z-index:12500}.trap-reveal{position:fixed;z-index:12500;pointer-events:none}.flying-card{position:fixed!important;z-index:12500!important;pointer-events:none!important;margin:0!important;transform-origin:center center!important;box-shadow:0 0 0 4px rgba(255,214,82,.75),0 0 32px rgba(255,214,82,.85),0 34px 52px rgba(0,0,0,.7)!important}.draw-card{position:fixed;width:86px;height:112px;border-radius:14px;background:linear-gradient(135deg,#18233b,#384b7a);border:2px solid rgba(255,255,255,.22);box-shadow:0 22px 44px rgba(0,0,0,.55),0 0 24px rgba(117,232,255,.32);z-index:12000;pointer-events:none;transform-style:preserve-3d}.draw-card::before{content:"";position:absolute;inset:10px;border-radius:10px;border:2px solid rgba(255,255,255,.18)}
.target-line-svg{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:11000;overflow:visible}.target-line-svg path#targetLine{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12 10;marker-end:url(#targetArrow);filter:drop-shadow(0 0 8px rgba(255,228,92,.8));opacity:0}.target-line-svg path#targetLine.show{opacity:1;animation:lineFlow .55s linear infinite}.target-arrow-head{fill:var(--gold);filter:drop-shadow(0 0 6px rgba(255,228,92,.85))}
.hit{animation:shake .4s ease}.bump{animation:bump .5s ease}.die{animation:die .62s ease forwards}.impact-flash{animation:impactFlash .34s ease}
@keyframes attackFloat{0%{transform:translate3d(0,-4px,0) rotate(-.6deg) scale(1.025)}100%{transform:translate3d(0,-22px,0) rotate(.6deg) scale(1.07)}}
@keyframes attackSpin{from{--attack-angle:0deg}to{--attack-angle:360deg}}@property --attack-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes dashMarch{from{background-position:0 0}to{background-position:48px 0}}@keyframes lineFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-22}}
@keyframes phasePop{0%{opacity:0;transform:scale(.9)}18%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(1.06)}}
@keyframes endCardIn{0%{opacity:.2;transform:translateY(18px) scale(.94)}60%{opacity:1;transform:translateY(-4px) scale(1.025)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes endSheen{to{transform:translateX(120%)}}@keyframes endGlow{from{transform:scale(.96);opacity:.72}to{transform:scale(1.08);opacity:1}}
@keyframes damageFloat{0%{opacity:0;transform:translateY(10px) scale(.8)}18%{opacity:1;transform:translateY(0) scale(1.12)}100%{opacity:0;transform:translateY(-55px) scale(1)}}
@keyframes calcFloat{0%{opacity:0;transform:translateY(14px) scale(.85)}18%{opacity:1;transform:translateY(0) scale(1)}78%{opacity:1}100%{opacity:0;transform:translateY(-24px) scale(.96)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.1) rotate(-2deg)}72%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1)}}@keyframes die{0%{opacity:1;transform:scale(1)}55%{opacity:.9;filter:brightness(1.8)}100%{opacity:0;transform:scale(.55) rotate(8deg);filter:brightness(.2)}}@keyframes impactFlash{0%{filter:brightness(1);transform:scale(1)}35%{filter:brightness(2);transform:scale(1.08)}100%{filter:brightness(1);transform:scale(1)}}
.collision-burst{position:fixed;width:56px;height:56px;border-radius:50%;pointer-events:none;z-index:12600;background:radial-gradient(circle,rgba(255,255,255,.95) 0 9%,rgba(255,224,92,.95) 10% 18%,rgba(255,112,64,.68) 19% 34%,transparent 60%);box-shadow:0 0 26px rgba(255,206,72,.92),0 0 48px rgba(255,92,42,.36);animation:collisionBurst .42s ease-out forwards}.damage-float{font-size:34px!important;color:#ff4040!important;text-shadow:0 3px 0 #000,0 0 14px rgba(255,36,36,.55)!important}.damage-float.heal-float{color:#69ff9d!important;text-shadow:0 3px 0 #001b0a,0 0 14px rgba(82,255,144,.5)!important}.damage-float:first-letter{font-size:1.1em}@keyframes collisionBurst{0%{opacity:0;transform:scale(.35) rotate(0deg)}22%{opacity:1;transform:scale(1.08) rotate(24deg)}100%{opacity:0;transform:scale(1.9) rotate(70deg)}}
@media(max-width:1200px){.utility-panel{width:210px}.battlefield{grid-template-columns:112px minmax(530px,1fr) 112px}.hero{width:106px}.board-grid{column-gap:10px}.utility-panel{opacity:.95}}
@media(max-width:900px){body{overflow-y:auto}.game-shell{padding:10px}.battlefield{grid-template-columns:1fr}.hero-side{order:0}.board{order:1;overflow-x:auto}.player-side{order:2}.board-grid{min-width:560px}.bottom-ui{grid-template-columns:1fr}.hand-panel{padding-bottom:0}.utility-panel{position:fixed;left:8px;top:8px;width:min(220px,calc(100vw - 16px))}.panel-open{top:8px}.hand{justify-content:flex-start;overflow-x:auto;padding-left:24px}.phase-banner span{font-size:28px}.collection-overlay{padding:8px}.collection-shell{width:calc(100vw - 12px);height:calc(100dvh - 12px);padding:12px;border-radius:18px}.collection-toolbar{grid-template-columns:1fr 1fr}.collection-search{grid-column:1/-1}.collection-body{grid-template-columns:1fr;grid-template-rows:1fr}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}.collection-card{min-height:160px}}

/* Final card ratio: non-board card surfaces match the detail viewer. */
:root{--card-aspect-ratio:3 / 4}
.collection-grid{
  --collection-card-width:132px;
  --collection-card-height:calc(var(--collection-card-width) * 4 / 3);
  grid-template-columns:repeat(auto-fill,var(--collection-card-width)) !important;
  grid-auto-rows:var(--collection-card-height) !important;
  align-items:start !important;
  justify-content:center !important;
  gap:12px !important;
}
.collection-card{
  width:var(--collection-card-width) !important;
  height:var(--collection-card-height) !important;
  min-width:var(--collection-card-width) !important;
  min-height:var(--collection-card-height) !important;
  max-width:var(--collection-card-width) !important;
  max-height:var(--collection-card-height) !important;
  aspect-ratio:var(--card-aspect-ratio) !important;
  display:block !important;
}

@media(max-width:900px){
  .collection-grid{
    --collection-card-width:118px;
    gap:10px !important;
  }
}

.collection-tag-panel{
  flex:0 0 auto;
  display:grid;
  gap:6px;
  min-height:0;
  padding:7px 9px 6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(5,9,18,.36);
}
.collection-active-tags{
  display:none;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overflow-y:visible;
  padding:0 0 3px;
  scrollbar-width:none;
}
.collection-active-tags.has-active-tags{
  display:flex;
}
.collection-tag-list{
  min-height:32px;
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:1px 0 4px;
  scrollbar-width:none;
}
.collection-active-tags::-webkit-scrollbar,
.collection-tag-list::-webkit-scrollbar{
  display:none;
}
.collection-tag-label,
.collection-tag-empty{
  flex:0 0 auto;
  color:#9fb0cc;
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.collection-tag-chip,
.collection-tag-clear{
  flex:0 0 auto;
  height:28px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(5,9,18,.62);
  color:#dbe7f8;
  padding:0 9px;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.collection-tag-chip b{
  font-size:11px;
  line-height:1;
}
.collection-tag-chip em{
  display:grid;
  place-items:center;
  width:15px;
  height:15px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-style:normal;
  font-size:11px;
  line-height:1;
}
.collection-tag-chip:hover,
.collection-tag-clear:hover{
  border-color:rgba(117,232,255,.55);
  background:rgba(117,232,255,.12);
}
.collection-tag-chip.selected,
.collection-tag-chip.active{
  border-color:rgba(255,214,82,.72);
  background:rgba(255,214,82,.16);
  color:#fff2b8;
}
.collection-tag-clear{
  border-color:rgba(255,112,112,.34);
  color:#ffb7b7;
}
.guide-open-btn{
  border-color:rgba(255,214,82,.32);
  color:#fff2b8;
}
.guide-open-btn:hover{
  border-color:rgba(255,214,82,.62);
  box-shadow:0 0 18px rgba(255,214,82,.16);
}
.tutorial-open-btn{
  border-color:rgba(137,255,171,.32);
  color:#d8ffe4;
}
.tutorial-open-btn:hover{
  border-color:rgba(137,255,171,.62);
  box-shadow:0 0 18px rgba(137,255,171,.16);
}
.tutorial-coach{
  position:fixed;
  left:18px;
  top:18px;
  z-index:13000;
  width:min(380px,calc(100vw - 36px));
  max-height:calc(100dvh - 24px);
  overflow:auto;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(137,255,171,.34);
  background:linear-gradient(155deg,rgba(14,28,30,.96),rgba(5,9,18,.96));
  box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 28px rgba(137,255,171,.12);
  color:#eaf7ff;
  transition:left .16s ease,top .16s ease;
}

.tutorial-coach[data-placement="screen-bottom"]{
  max-height:min(230px,34dvh);
}
body.tutorial-active.card-inspector-open .tutorial-coach{
  z-index:31050;
}
.tutorial-coach[hidden]{
  display:none;
}
.tutorial-coach-head{margin-bottom:10px}
.tutorial-coach-head span{
  color:#89ffab;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.tutorial-coach h2{
  margin:0 0 7px;
  font-size:20px;
  line-height:1.05;
  font-weight:1000;
}
.tutorial-coach p{
  margin:0;
  color:#c7d2e6;
  font-size:13px;
  line-height:1.45;
  font-weight:700;
}
.tutorial-card-name{
  color:#ffffff;
  font-weight:1000;
}
.tutorial-nudge{
  margin-top:10px!important;
  color:#ffd66e!important;
  font-weight:900!important;
}
.tutorial-next{
  width:100%;
  margin-top:12px;
  border:1px solid rgba(137,255,171,.42);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(137,255,171,.24),rgba(64,173,105,.18));
  color:#ecfff2;
  padding:9px 12px;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.24),0 0 18px rgba(137,255,171,.12);
}
.tutorial-next:hover{
  border-color:rgba(137,255,171,.78);
  transform:translateY(-1px);
}
.tutorial-focus-spot{
  position:fixed;
  z-index:9000;
  pointer-events:none;
  border-radius:18px;
  opacity:1;
  box-shadow:0 0 0 9999px rgba(0,0,0,.24),0 0 24px rgba(255,64,64,.26);
  transition:
    left .16s ease,
    top .16s ease,
    width .16s ease,
    height .16s ease,
    box-shadow .55s ease,
    opacity .55s ease;
}
body.tutorial-active.card-inspector-open .tutorial-focus-spot{
  z-index:31020;
}
.tutorial-focus-spot.is-strong{
  box-shadow:0 0 0 9999px rgba(0,0,0,.68),0 0 34px rgba(255,64,64,.42);
}
.tutorial-focus-spot.is-soft{
  box-shadow:0 0 0 9999px rgba(0,0,0,.18),0 0 20px rgba(255,64,64,.22);
}
.tutorial-focus-spot[hidden]{
  display:none;
}
body.tutorial-active .drag-ghost{
  z-index:13050!important;
}
.tutorial-highlight{
  position:relative;
  z-index:9998!important;
  outline:3px solid rgba(255,64,64,.96)!important;
  outline-offset:4px!important;
  box-shadow:0 0 0 7px rgba(255,64,64,.2),0 0 34px rgba(255,64,64,.8)!important;
  animation:tutorialPulse .82s ease-in-out infinite alternate!important;
}
.slot.tutorial-highlight{
  border-color:rgba(255,64,64,.96)!important;
  background:rgba(255,64,64,.14)!important;
}
.tutorial-allowed{
  cursor:pointer!important;
}
.tutorial-action-highlight{
  animation:tutorialActionBlink .55s ease-in-out infinite alternate!important;
  transform-origin:center center;
}
@keyframes tutorialPulse{
  from{filter:brightness(1)}
  to{filter:brightness(1.28)}
}
@keyframes tutorialActionBlink{
  from{
    filter:brightness(1);
    transform:scale(1);
  }
  to{
    filter:brightness(1.45);
    transform:scale(1.025);
  }
}
body.guide-open{
  overflow:hidden;
}
.guide-shell{
  width:min(1060px,calc(100vw - 28px));
  height:min(820px,calc(100dvh - 28px));
}
.guide-body{
  min-height:0;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:max-content;
  align-items:start;
  gap:10px;
  padding:2px 4px 2px 2px;
  scrollbar-width:thin;
}
.guide-card{
  position:relative;
  min-height:0;
  height:auto;
  padding:18px 16px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  overflow:visible;
}
.guide-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 0 0,rgba(117,232,255,.14),transparent 38%);
  pointer-events:none;
}
.guide-card-primary{
  grid-column:span 2;
  min-height:120px;
  background:linear-gradient(145deg,rgba(117,232,255,.15),rgba(255,214,82,.08));
}
.guide-card-wide{
  grid-column:span 2;
}
.guide-number{
  position:relative;
  display:inline-flex;
  margin-bottom:10px;
  color:#75e8ff;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.14em;
}
.guide-card h2{
  position:relative;
  margin:0 0 8px;
  color:#fff;
  font-size:18px;
  line-height:1.05;
  font-weight:1000;
}
.guide-card p{
  position:relative;
  margin:0;
  color:#c7d2e6;
  font-size:13px;
  line-height:1.45;
  font-weight:650;
}
.guide-list{
  position:relative;
  margin:0;
  padding-left:17px;
  color:#c7d2e6;
  font-size:13px;
  line-height:1.42;
  font-weight:650;
}
.guide-list li{
  margin:0 0 6px;
}
.guide-list li:last-child{
  margin-bottom:0;
}
.guide-list-columns{
  columns:1;
  column-gap:0;
}
.guide-list-columns li{
  break-inside:avoid;
}
.guide-icon-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.guide-icon-grid-wide{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.guide-icon-grid span{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  padding:7px 9px;
  background:rgba(5,9,18,.56);
  border:1px solid rgba(255,255,255,.1);
  color:#dbe7f8;
  font-size:11px;
  font-weight:900;
}
.guide-icon-grid-wide span{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:flex-start;
  border-radius:14px;
}
.guide-icon-grid b{
  flex:0 0 18px;
  text-align:center;
  font-size:13px;
  line-height:1;
}
.guide-icon-grid-wide b{
  grid-row:1 / span 2;
}
.guide-icon-grid strong{
  display:block;
  min-width:0;
  color:#fff;
  font-size:11px;
  line-height:1.18;
}
.guide-icon-grid em{
  display:block;
  min-width:0;
  margin-top:3px;
  color:#aebbd3;
  font-size:10px;
  line-height:1.32;
  font-style:normal;
  font-weight:750;
  white-space:normal;
  overflow:visible;
}

.quit-tutorial-btn{
  display:none;
  min-height:46px;
  border:0;
  border-radius:15px;
  background:linear-gradient(180deg,#8bd7ff,#28739c);
  color:#04111a;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(0,0,0,.32),0 0 18px rgba(117,232,255,.16);
}

.quit-tutorial-btn:hover,
.quit-tutorial-btn:focus-visible{
  filter:brightness(1.08);
  outline:3px solid rgba(117,232,255,.24);
  outline-offset:2px;
}

body.tutorial-active .surrender-btn{
  display:none;
}

body.tutorial-active .quit-tutorial-btn{
  display:block;
}

.versus-shell{
  width:min(520px,calc(100vw - 28px));
  height:auto;
  max-height:calc(100dvh - 28px);
  margin:0;
  align-items:center;
  justify-self:center;
  align-self:center;
}

.versus-overlay,
.campaign-overlay{
  display:grid;
  place-items:center;
}

.versus-head,
.campaign-head{
  position:relative;
  width:100%;
  justify-content:center;
  text-align:center;
  min-height:46px;
}

.menu-back-btn{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  min-width:76px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#dbe7f8;
  font-size:12px;
  font-weight:950;
  cursor:pointer;
}

.menu-back-btn:hover,
.menu-back-btn:focus-visible{
  border-color:rgba(117,232,255,.45);
  background:rgba(117,232,255,.12);
  outline:0;
}

.about-overlay{
  display:grid;
  place-items:center;
  padding:18px;
  z-index:22100;
}

.about-overlay .about-shell{
  width:min(460px,calc(100vw - 32px));
  height:auto;
  min-height:0;
  max-height:calc(100dvh - 32px);
  margin:0;
  display:grid;
  gap:16px;
  padding:20px;
  border-radius:22px;
  align-self:center;
  justify-self:center;
  overflow:visible;
  background:
    radial-gradient(circle at 18% 0,rgba(255,214,82,.14),transparent 34%),
    radial-gradient(circle at 86% 18%,rgba(117,232,255,.12),transparent 28%),
    linear-gradient(180deg,rgba(18,28,50,.98),rgba(6,10,20,.99));
}

.about-overlay.open .about-shell{
  transform:translateY(0) scale(1);
}

.about-overlay .about-head{
  position:relative;
  min-height:42px;
  display:grid;
  grid-template-columns:76px 1fr 76px;
  align-items:center;
  justify-content:initial;
  gap:10px;
  text-align:center;
}

.about-overlay .about-head .menu-back-btn{
  position:static;
  transform:none;
  justify-self:start;
  min-width:68px;
  height:36px;
}

.about-overlay .about-head>div{
  min-width:0;
}

.about-overlay .collection-kicker{
  margin:0 0 4px;
}

.about-overlay #aboutTitle{
  margin:0;
  font-size:30px;
  line-height:1;
}

.about-head-spacer{
  width:68px;
}

.about-overlay .about-body{
  display:grid;
  gap:10px;
  padding:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(3,7,16,.34);
  color:#cbd7ea;
  text-align:left;
  font-size:13px;
  line-height:1.55;
}

.about-overlay .about-body p{
  margin:0;
}

.about-overlay .about-body strong{
  display:block;
  margin-top:2px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.1);
  color:#fff3a8;
  font-size:12px;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}

@media(max-width:520px){
  .about-overlay{
    padding:12px;
  }

  .about-overlay .about-shell{
    width:calc(100vw - 24px);
    padding:16px;
  }

  .about-overlay .about-head{
    grid-template-columns:68px 1fr 28px;
  }

  .about-head-spacer{
    width:28px;
  }

  .about-overlay #aboutTitle{
    font-size:25px;
  }
}

.versus-mode-list{
  width:100%;
  max-width:440px;
  display:grid;
  gap:10px;
}

.versus-mode-card{
  display:grid;
  gap:5px;
  min-height:86px;
  padding:16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:
    radial-gradient(circle at 16% 0,rgba(255,214,82,.14),transparent 36%),
    linear-gradient(180deg,rgba(27,43,73,.96),rgba(8,14,28,.97));
  color:#dce8f8;
  text-align:left;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(0,0,0,.3);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.versus-mode-card:hover,
.versus-mode-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,214,82,.5);
  box-shadow:0 18px 40px rgba(0,0,0,.36),0 0 0 3px rgba(255,214,82,.12);
  outline:0;
}

.versus-mode-card span{
  color:#fff3a8;
  font-size:20px;
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
}

.versus-mode-card strong{
  color:#b9c8dd;
  font-size:12px;
  line-height:1.35;
}

.campaign-shell{
  width:min(640px,calc(100vw - 28px));
  height:auto;
  max-height:calc(100dvh - 28px);
  margin:0;
  align-items:center;
  justify-self:center;
  align-self:center;
}

.campaign-intro{
  width:100%;
  max-width:560px;
  margin:0;
  padding:9px 12px;
  border:1px solid rgba(117,232,255,.18);
  border-radius:14px;
  background:rgba(117,232,255,.07);
  color:#c9d7ea;
  font-size:12px;
  font-weight:800;
  line-height:1.45;
}

.campaign-grid{
  width:100%;
  max-width:560px;
  max-height:min(70dvh,860px);
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  overflow-x:hidden;
  overflow-y:auto;
  padding:2px 8px 4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.campaign-grid::-webkit-scrollbar{
  display:none;
}

.campaign-stage-card{
  position:relative;
  isolation:isolate;
  min-height:68px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:12px;
  row-gap:4px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 0,rgba(255,214,82,.12),transparent 36%),
    linear-gradient(180deg,rgba(24,38,66,.95),rgba(8,14,28,.96));
  color:#dce8f8;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease,filter .18s ease;
}

.campaign-stage-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--stage-bg);
  background-size:cover;
  background-position:center;
  opacity:.72;
  filter:saturate(1.08) contrast(1.04);
  transform:scale(1.02);
  transition:transform .22s ease,opacity .18s ease,filter .18s ease;
}

.campaign-stage-card.stage-bg-1::before{
  background-image:url("../assets/campaign/bg_stage1.png");
}

.campaign-stage-card.stage-bg-2::before{
  background-image:url("../assets/campaign/bg_stage2.png");
}

.campaign-stage-card.stage-bg-3::before{
  background-image:url("../assets/campaign/bg_stage3.png");
}

.campaign-stage-card.stage-bg-4::before{
  background-image:url("../assets/campaign/bg_stage4.png");
}

.campaign-stage-card.stage-bg-5::before{
  background-image:url("../assets/campaign/bg_stage5.png");
}

.campaign-stage-card.stage-bg-6::before{
  background-image:url("../assets/campaign/bg_stage6.png");
}

.campaign-stage-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(5,9,18,.92),rgba(5,9,18,.62) 48%,rgba(5,9,18,.88)),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.48));
  pointer-events:none;
}

.campaign-stage-card:hover,
.campaign-stage-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,214,82,.5);
  box-shadow:0 14px 30px rgba(0,0,0,.32),0 0 0 3px rgba(255,214,82,.12);
  outline:0;
}

.campaign-stage-card:hover::before,
.campaign-stage-card:focus-visible::before{
  opacity:.86;
  transform:scale(1.055);
}

.campaign-stage-card.is-locked{
  cursor:not-allowed;
  opacity:.48;
  filter:saturate(.55);
}

.campaign-stage-card.is-locked:hover{
  transform:none;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

.campaign-stage-card.is-cleared{
  border-color:rgba(98,255,159,.28);
}

.campaign-stage-card > *{
  position:relative;
  z-index:2;
}

.campaign-stage-number{
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:58px;
  height:42px;
  padding:5px 9px;
  border-radius:13px;
  background:rgba(7,13,24,.76);
  border:1px solid rgba(117,232,255,.2);
  color:#75e8ff;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  font-size:10px;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.campaign-stage-card strong{
  display:block;
  min-width:0;
  color:#fff3a8;
  font-size:17px;
  line-height:1.05;
  text-shadow:0 2px 4px rgba(0,0,0,.9);
}

.campaign-stage-card em{
  display:block;
  min-width:0;
  color:#aebbd3;
  font-size:11px;
  font-style:normal;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-shadow:0 2px 3px rgba(0,0,0,.9);
}

.campaign-stage-card small{
  display:block;
  justify-self:end;
  grid-column:3;
  grid-row:1;
  color:#9fb0cc;
  font-size:11px;
  font-weight:900;
  line-height:1.35;
  text-shadow:0 2px 3px rgba(0,0,0,.9);
}

.campaign-stage-status{
  justify-self:end;
  grid-column:3;
  grid-row:2;
  min-width:78px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#d7e1f4;
  font-size:10px;
  font-weight:1000;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.campaign-stage-card.is-unlocked .campaign-stage-status{
  color:#75e8ff;
  border-color:rgba(117,232,255,.24);
  background:rgba(117,232,255,.08);
}

.campaign-stage-card.is-cleared .campaign-stage-status{
  color:#62ff9f;
  border-color:rgba(98,255,159,.28);
  background:rgba(98,255,159,.09);
}

.campaign-stage-card.is-locked .campaign-stage-status{
  color:#a8b1c2;
}

@media(max-width:900px){
  .tutorial-coach{
    width:min(340px,calc(100vw - 16px));
    padding:12px;
  }
  .collection-tag-panel{
    padding:6px 7px 5px;
    gap:5px;
  }
  .collection-tag-chip,
  .collection-tag-clear{
    height:26px;
    padding:0 7px;
    font-size:10px;
  }
  .guide-shell{
    width:calc(100vw - 12px);
    height:calc(100dvh - 12px);
  }
  .guide-body{
    grid-template-columns:1fr;
    gap:8px;
  }
  .guide-card-primary{
    grid-column:auto;
  }
  .guide-card-wide{
    grid-column:auto;
  }
  .guide-card{
    min-height:auto;
    padding:15px 14px;
  }
  .guide-icon-grid,
  .guide-icon-grid-wide{
    grid-template-columns:1fr;
  }
  .guide-list-columns{
    columns:1;
  }
  .campaign-shell{
    width:calc(100vw - 12px);
    max-height:calc(100dvh - 12px);
  }
  .campaign-stage-card{
    grid-template-columns:auto minmax(0,1fr);
    min-height:74px;
  }
  .campaign-stage-card small,
  .campaign-stage-status{
    grid-column:2;
    justify-self:start;
  }
}

/* Centered gameplay pause menu. */
.utility-panel{
  position:fixed !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  width:auto !important;
  max-height:none !important;
  display:grid !important;
  place-items:center !important;
  padding:20px !important;
  border:0 !important;
  border-radius:0 !important;
  background:
    radial-gradient(circle at 50% 36%,rgba(117,232,255,.13),transparent 28%),
    rgba(3,7,16,.72) !important;
  box-shadow:none !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  z-index:22000 !important;
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
  transition:opacity .2s ease !important;
}

body.utility-collapsed .utility-panel{
  opacity:0 !important;
  transform:none !important;
  pointer-events:none !important;
}

.gameplay-menu-card{
  width:min(360px,calc(100vw - 34px));
  display:grid;
  gap:11px;
  padding:22px 20px 20px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  background:
    radial-gradient(circle at 24% 0,rgba(255,214,82,.14),transparent 36%),
    linear-gradient(180deg,rgba(18,28,50,.98),rgba(6,10,20,.98));
  box-shadow:
    0 34px 100px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.12);
  text-align:center;
  transform:translateY(0) scale(1);
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}

body.utility-collapsed .gameplay-menu-card{
  transform:translateY(16px) scale(.96);
}

.gameplay-menu-title{
  padding:2px 4px 8px !important;
  color:#75e8ff !important;
  font-size:12px !important;
  font-weight:1000 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

.gameplay-menu-card button{
  min-height:48px;
  border-radius:15px;
  font-size:15px;
}

.gameplay-menu-continue{
  border:0;
  background:linear-gradient(180deg,#fff08a,#d79a24);
  color:#1b1002;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 14px 26px rgba(0,0,0,.34),0 0 22px rgba(255,214,82,.2);
}

.gameplay-menu-continue:hover,
.gameplay-menu-continue:focus-visible{
  filter:brightness(1.06);
  outline:3px solid rgba(255,214,82,.22);
  outline-offset:2px;
}

.gameplay-menu-card .surrender-btn,
.gameplay-menu-card .quit-tutorial-btn{
  width:100%;
}

.panel-open{
  z-index:21950 !important;
}

body:not(.utility-collapsed) .panel-open{
  display:none !important;
}

body.main-menu-open .panel-open,
body.main-menu-open .utility-panel{
  display:none !important;
  pointer-events:none !important;
}

/* Mobile comfort pass: denser overlays and smaller tutorial hints. */
@media(max-width:520px){
  .collection-shell{
    gap:8px !important;
    padding:10px !important;
  }

  .collection-head{
    gap:8px !important;
  }

  .collection-head h1{
    font-size:24px !important;
  }

  .collection-toolbar{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }

  .collection-toolbar input,
  .collection-toolbar select{
    height:38px !important;
    border-radius:11px !important;
    font-size:12px !important;
  }

  .collection-tag-panel{
    padding:5px 6px 4px !important;
    gap:4px !important;
  }

  .collection-grid{
    --collection-card-width:104px;
    gap:8px !important;
  }

  .collection-cost{
    width:24px !important;
    height:24px !important;
    font-size:12px !important;
  }

  .tutorial-coach{
    width:min(308px,calc(100vw - 18px)) !important;
    max-height:min(260px,40dvh) !important;
    padding:10px !important;
    border-radius:14px !important;
  }

  .tutorial-coach-head{
    margin-bottom:6px !important;
  }

  .tutorial-coach-head span{
    font-size:9px !important;
  }

  .tutorial-coach h2{
    margin-bottom:5px !important;
    font-size:16px !important;
  }

  .tutorial-coach p{
    font-size:11px !important;
    line-height:1.34 !important;
  }

  .tutorial-nudge{
    margin-top:7px !important;
  }

  .tutorial-next{
    min-height:34px !important;
    margin-top:8px !important;
    padding:7px 10px !important;
    font-size:10px !important;
  }

  .gameplay-menu-card,
  .main-menu-card{
    width:min(330px,calc(100vw - 24px)) !important;
    padding:20px 16px 16px !important;
  }
}

@media(max-height:680px){
  .tutorial-coach{
    max-height:34dvh !important;
  }

  .phase-banner span{
    padding:14px 22px !important;
    font-size:24px !important;
  }
}

/* Main menu logo + deck quick selector v22 */
.main-menu-logo{
  position:absolute;
  left:max(22px,calc(50% - 640px));
  top:28px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 8px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(16,29,52,.86),rgba(5,9,18,.9));
  box-shadow:0 18px 46px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-align:left;
}
.main-menu-logo-mark{
  position:relative;
  width:42px;
  height:48px;
  display:grid;
  place-items:center;
  color:#1a1002;
  font-size:15px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff08a,#d89a24);
  clip-path:polygon(50% 0,92% 20%,88% 78%,50% 100%,12% 78%,8% 20%);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}
.main-menu-logo-text{display:grid;gap:1px;text-transform:uppercase;letter-spacing:.08em;line-height:1}
.main-menu-logo-text strong{color:#fff3a8;font-size:14px;font-weight:1000}
.main-menu-logo-text em{color:#75e8ff;font-size:10px;font-style:normal;font-weight:950;opacity:.92}
.main-menu-deck-picker{
  display:grid;
  gap:7px;
  max-width:360px;
  border-radius:18px;
  padding:10px 12px 11px;
  text-align:left;
}
.main-menu-deck-picker label{
  color:#75e8ff;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.main-menu-deck-picker select{
  width:100%;
  min-height:36px;
  padding:0 34px 0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(28,46,78,.98),rgba(10,18,34,.98));
  color:#fff3a8;
  font-weight:950;
  outline:0;
  cursor:pointer;
}
.main-menu-deck-picker select:hover,
.main-menu-deck-picker select:focus-visible{
  border-color:rgba(117,232,255,.56);
  box-shadow:0 0 0 3px rgba(117,232,255,.12);
}
.main-menu-deck-picker small{
  color:#cbd7ea;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  opacity:.92;
}
@media (max-width:760px){
  .main-menu-logo{
    left:18px;
    top:16px;
    transform:scale(.86);
    transform-origin:top left;
  }
  .main-menu-logo-text{display:none}
  .main-menu-card{margin-top:34px}
}


/* Battle Log panel v23 */
.battle-log-panel{
  position:fixed;
  left:max(14px,env(safe-area-inset-left));
  top:50%;
  transform:translateY(-50%);
  z-index:1120;
  width:min(290px,28vw);
  max-width:calc(100vw - 28px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(13,24,43,.9),rgba(5,9,18,.92));
  box-shadow:0 20px 54px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  transition:opacity .22s ease,transform .22s ease,width .22s ease;
}
body.main-menu-open .battle-log-panel,
body.collection-open .battle-log-panel,
body.deck-builder-open .battle-log-panel{
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%) translateX(-14px);
}
.battle-log-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px 8px 12px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,214,82,.1),rgba(117,232,255,.04));
}
.battle-log-head strong{
  display:block;
  color:#fff3a8;
  font-size:12px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.battle-log-head span{
  display:block;
  margin-top:3px;
  color:#9fb0c7;
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
}
.battle-log-actions{display:flex;align-items:center;gap:6px}
.battle-log-actions button{
  min-width:30px;
  min-height:28px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.07);
  color:#d9f5ff;
  font-size:10px;
  font-weight:950;
  cursor:pointer;
}
.battle-log-actions button:hover,.battle-log-actions button:focus-visible{
  border-color:rgba(117,232,255,.5);
  outline:0;
  box-shadow:0 0 0 3px rgba(117,232,255,.1);
}
.battle-log-panel .battle-log{
  min-height:0;
  max-height:min(42dvh,380px);
  overflow:auto;
  border-radius:0;
  background:rgba(0,0,0,.18);
  padding:7px;
  color:#cbd7ea;
  font-size:11px;
  scrollbar-width:thin;
}
.battle-log-panel .battle-log:empty::before{
  content:'Important match events will appear here.';
  display:block;
  padding:9px 7px;
  color:#8493aa;
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}
.battle-log-line{
  display:grid;
  grid-template-columns:22px 1fr auto;
  align-items:start;
  gap:7px;
  padding:7px 6px;
  border-bottom:1px solid rgba(255,255,255,.055);
  animation:battleLogIn .18s ease both;
}
.battle-log-line:last-child{border-bottom:0}
.battle-log-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  font-size:12px;
  line-height:1;
}
.battle-log-text{
  min-width:0;
  color:#d7e1f4;
  font-weight:800;
  line-height:1.28;
}
.battle-log-meta{
  color:#8392aa;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
  padding-top:2px;
}
.battle-log-line[data-kind="combat"] .battle-log-icon{background:rgba(255,91,91,.14);color:#ffb5ac}
.battle-log-line[data-kind="spell"] .battle-log-icon{background:rgba(117,232,255,.13);color:#a8f4ff}
.battle-log-line[data-kind="draw"] .battle-log-icon{background:rgba(255,214,82,.14);color:#fff0a5}
.battle-log-line[data-kind="turn"] .battle-log-icon{background:rgba(174,139,255,.14);color:#d8c9ff}
.battle-log-line[data-kind="death"] .battle-log-icon{background:rgba(255,255,255,.11);color:#e8edf7}
.battle-log-line[data-kind="ai"] .battle-log-icon{background:rgba(104,255,160,.12);color:#b6ffd4}
.battle-log-panel.is-collapsed{width:auto}
.battle-log-panel.is-collapsed .battle-log,
.battle-log-panel.is-collapsed #battleLogHint,
.battle-log-panel.is-collapsed #battleLogClear{display:none}
.battle-log-panel.is-collapsed .battle-log-head{border-bottom:0;padding:9px 8px 9px 10px}
.battle-log-panel.is-collapsed .battle-log-head strong{font-size:11px}
@keyframes battleLogIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:900px){
  .battle-log-panel{width:min(230px,42vw);top:auto;bottom:90px;transform:none}
  body.main-menu-open .battle-log-panel,
  body.collection-open .battle-log-panel,
  body.deck-builder-open .battle-log-panel{transform:translateX(-14px)}
  .battle-log-panel .battle-log{max-height:28dvh}
}
@media(max-width:620px){
  .battle-log-panel{left:10px;bottom:82px;width:46px;border-radius:14px}
  .battle-log-panel:not(.is-open-mobile) .battle-log,
  .battle-log-panel:not(.is-open-mobile) #battleLogHint,
  .battle-log-panel:not(.is-open-mobile) #battleLogClear{display:none}
  .battle-log-panel:not(.is-open-mobile) .battle-log-head{padding:8px;border-bottom:0}
  .battle-log-panel:not(.is-open-mobile) .battle-log-head strong{font-size:0}
  .battle-log-panel:not(.is-open-mobile) .battle-log-head strong::before{content:'LOG';font-size:10px;color:#fff3a8}
  .battle-log-panel.is-open-mobile{width:min(280px,calc(100vw - 20px))}
}

.main-menu-logo{display:none!important}

/* v6.15 tutorial coach: compact docked placement during board interactions. */
.tutorial-coach[data-placement="screen-top"]{
  width:min(340px,calc(100vw - 28px));
  max-height:min(168px,25dvh);
  padding:10px 12px;
  border-radius:14px;
}
.tutorial-coach[data-placement="screen-top"] .tutorial-coach-head{margin-bottom:5px}
.tutorial-coach[data-placement="screen-top"] h2{font-size:17px;margin-bottom:4px}
.tutorial-coach[data-placement="screen-top"] p{font-size:12px;line-height:1.3}


/* Beast Tactics v6.18: MP4 menu background without dark overlay */
.main-menu-overlay{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.main-menu-scene{
  background:#03050b url("../assets/menu/main_menu_bg.png") center/cover no-repeat;
}
.main-menu-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  background:transparent;
  transform:translateZ(0);
}
.main-menu-scene::before,
.main-menu-scene::after{
  display:none!important;
  content:none!important;
  background:none!important;
  opacity:0!important;
}
.main-menu-card{z-index:2}
@media(max-width:760px){
  .main-menu-video{object-position:center}
}
@media(prefers-reduced-motion:reduce){
  .main-menu-video{display:none}
  .main-menu-scene{background:#03050b url("../assets/menu/main_menu_bg.png") center/cover no-repeat}
}