:root{
  color-scheme:dark;
  --ink:#f7f5ea;--muted:#aab8af;--panel:#0d1712;--panel2:#111f18;--line:rgba(255,255,255,.12);
  --green:#56d06e;--gold:#e7c36b;--danger:#ff6b6b;--shadow:0 24px 70px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
body{margin:0;background:
 radial-gradient(circle at 20% -10%,rgba(85,205,110,.12),transparent 32rem),
 radial-gradient(circle at 90% 15%,rgba(231,195,107,.08),transparent 30rem),
 #07100c;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button,a{font:inherit}
button{cursor:pointer}
.showdown-shell{width:min(1500px,100%);margin:0 auto;padding:18px clamp(14px,2vw,30px) 56px}
.game-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;padding:10px 0 26px}
.hub-link{justify-self:start;color:var(--muted);text-decoration:none;font-weight:800;letter-spacing:.02em}
.hub-link:hover{color:white}
.brand-lockup{text-align:center}
.eyebrow,.section-kicker{display:block;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:900}
.brand-lockup h1{margin:.15rem 0 0;font-size:clamp(2rem,5vw,4.6rem);line-height:.9;letter-spacing:-.055em}
.brand-lockup h1 span{color:var(--green)}
.brand-lockup p{margin:.55rem 0 0;color:var(--muted);font-weight:650}
.header-actions{justify-self:end;display:flex;gap:9px}
.ghost-button,.icon-button,.primary-button{border:1px solid var(--line);border-radius:999px;padding:.72rem 1rem;background:rgba(255,255,255,.04);color:white;font-weight:850}
.ghost-button:hover,.icon-button:hover{background:rgba(255,255,255,.09)}
.primary-button{background:linear-gradient(135deg,#56d06e,#31a958);border-color:transparent;color:#041008;box-shadow:0 10px 28px rgba(75,214,111,.2)}
.primary-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.compact{padding:.58rem .88rem}
.family-screen{display:grid;gap:20px}
.intro-panel{display:grid;gap:8px;max-width:820px}
.intro-panel h2{font-size:clamp(1.8rem,4vw,3.5rem);margin:0;letter-spacing:-.04em}
.intro-panel p{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.65}
.record-strip{display:inline-flex;width:max-content;margin-top:6px;padding:.55rem .8rem;border:1px solid var(--line);border-radius:999px;color:#dce8df;background:rgba(255,255,255,.03);font-weight:800}
.family-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.family-choice{position:relative;overflow:hidden;text-align:left;min-height:214px;padding:20px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));color:white;box-shadow:0 12px 34px rgba(0,0,0,.16);transition:.2s transform,.2s border-color,.2s background}
.family-choice:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035))}
.family-choice::after{content:"";position:absolute;right:-34px;bottom:-50px;width:150px;height:150px;border:22px solid currentColor;border-radius:50%;opacity:.07}
.family-choice .family-name{font-size:1.55rem;font-weight:950;letter-spacing:-.03em}
.family-choice p{color:#c2cec7;line-height:1.45;min-height:63px}
.family-choice strong{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.family-choice[data-family="kush"]{color:#81d48d}.family-choice[data-family="haze"]{color:#e9d66f}.family-choice[data-family="skunk"]{color:#d9e0d9}.family-choice[data-family="gas"]{color:#ff8b6a}.family-choice[data-family="cookies"]{color:#e6b584}.family-choice[data-family="fruit"]{color:#ff8fc4}.family-choice[data-family="purple"]{color:#c69cff}.family-choice[data-family="frost"]{color:#9de8ff}
.battle-screen{display:grid;gap:14px}
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch}
.fighter-summary,.round-core{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));padding:15px 17px}
.side-label{color:var(--muted);font-size:.69rem;font-weight:950;letter-spacing:.13em}
.fighter-summary>strong{display:block;font-size:1.4rem;margin:.25rem 0 .7rem}
.player-summary{text-align:right}
.meter-row{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;font-size:.78rem}
.garden-meter{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.garden-meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#39ae58,#77e88b);transition:width .3s}
.mini-stats{display:flex;gap:10px;margin-top:8px;color:var(--muted);font-size:.76rem;font-weight:800}
.player-summary .mini-stats{justify-content:flex-end}
.round-core{min-width:170px;display:grid;place-items:center;align-content:center;text-align:center}
.turn-badge{padding:.38rem .62rem;border-radius:999px;background:rgba(86,208,110,.13);color:#84eb97;font-size:.67rem;font-weight:950;letter-spacing:.1em}
.turn-badge.cpu{background:rgba(255,107,107,.12);color:#ff9c9c}
.round-core b{font-size:1.35rem;margin-top:6px}.round-core small{color:var(--muted);margin-top:3px}
.passive-ribbon{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.passive-ribbon>div{border:1px solid var(--line);border-radius:16px;padding:10px 13px;background:rgba(255,255,255,.025)}
.passive-ribbon>div:last-child{text-align:right}
.passive-ribbon span{display:block;color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900}
.passive-ribbon strong{display:block;margin-top:2px}.passive-ribbon small{color:#aab8af}
.arena{position:relative;border:1px solid rgba(255,255,255,.13);border-radius:30px;padding:18px;background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)),radial-gradient(circle at 50% 48%,rgba(86,208,110,.09),transparent 26rem),linear-gradient(135deg,#0b1811,#0a130f 55%,#11130c);box-shadow:var(--shadow);overflow:hidden}
.arena::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);pointer-events:none}
.arena-label{position:relative;z-index:1;color:var(--muted);font-size:.68rem;letter-spacing:.16em;font-weight:950}
.your-label{text-align:right}
.lane-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:10px 0}
.lane{min-height:246px;border:1px dashed rgba(255,255,255,.16);border-radius:22px;padding:10px;display:grid;place-items:center;position:relative;transition:.2s}
.lane.valid-target{border-style:solid;border-color:rgba(86,208,110,.7);box-shadow:inset 0 0 0 1px rgba(86,208,110,.18),0 0 30px rgba(86,208,110,.07)}
.lane.valid-target:hover{background:rgba(86,208,110,.06)}
.lane-index{position:absolute;left:10px;top:8px;color:rgba(255,255,255,.28);font-size:.68rem;font-weight:900}
.empty-lane{color:rgba(255,255,255,.28);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem}
.midline{position:relative;z-index:1;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.3);font-size:.61rem;letter-spacing:.18em;font-weight:950}
.midline i{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.card{width:min(100%,220px);min-height:220px;border-radius:20px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:linear-gradient(155deg,#18241d,#0d1611 65%);box-shadow:0 15px 34px rgba(0,0,0,.3);display:flex;flex-direction:column;transition:.2s transform,.2s box-shadow,.2s opacity}
.card::before{content:"";position:absolute;width:140px;height:140px;right:-54px;top:-52px;border-radius:50%;background:currentColor;opacity:.1;filter:blur(2px)}
.card[data-family="kush"]{color:#81d48d}.card[data-family="haze"]{color:#ead76f}.card[data-family="skunk"]{color:#e2e8e2}.card[data-family="gas"]{color:#ff8b6a}.card[data-family="cookies"]{color:#e7b584}.card[data-family="fruit"]{color:#ff8fc4}.card[data-family="purple"]{color:#c69cff}.card[data-family="frost"]{color:#9de8ff}
.card-head{padding:12px 12px 6px;position:relative;z-index:1}
.card-stage{display:flex;justify-content:space-between;font-size:.63rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:currentColor}
.card h3{margin:.35rem 0 0;color:white;font-size:1.08rem;line-height:1.05;letter-spacing:-.02em}
.card-art{margin:7px 11px;height:76px;border-radius:13px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,currentColor 0 9%,transparent 10%),radial-gradient(circle at 38% 56%,currentColor 0 8%,transparent 9%),radial-gradient(circle at 62% 56%,currentColor 0 8%,transparent 9%),radial-gradient(circle at 48% 70%,currentColor 0 7%,transparent 8%),linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.015));opacity:.9}
.card-art::after{content:"";position:absolute;inset:12px 42%;background:linear-gradient(currentColor,transparent);transform:rotate(12deg);filter:blur(.3px)}
.card-body{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 11px 11px;margin-top:auto}
.stat-box{padding:7px;border-radius:11px;background:rgba(255,255,255,.055);color:#b9c7be;font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900}
.stat-box b{display:block;color:white;font-size:1.05rem;letter-spacing:0}
.role-tag{grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-footer{padding:0 11px 11px;display:flex;justify-content:space-between;align-items:center;color:#dbe5dd;font-size:.71rem;font-weight:800}
.shield-pill{color:#9de8ff}
.attack-button{margin:0 10px 10px;border:0;border-radius:11px;padding:.65rem;background:rgba(255,255,255,.08);color:white;font-weight:900}
.attack-button:hover:not(:disabled){background:rgba(255,255,255,.14)}
.attack-button:disabled{opacity:.35;cursor:not-allowed}
.card.exhausted{opacity:.62}
.card.exhausted::after{content:"SPENT";position:absolute;inset:auto 10px 10px auto;background:#111;border:1px solid rgba(255,255,255,.18);padding:.22rem .4rem;border-radius:999px;font-size:.58rem;font-weight:950;letter-spacing:.1em;color:#c8d2cc}
.hand-panel,.battle-feed{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.025);padding:14px}
.hand-head,.feed-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hand-head p{margin:.18rem 0 0;color:var(--muted);font-size:.84rem}
.turn-actions{display:flex;gap:8px}
.hand{display:flex;gap:12px;overflow-x:auto;padding:13px 2px 4px;scroll-snap-type:x proximity}
.hand .card{min-width:174px;min-height:204px;scroll-snap-align:start;cursor:pointer}
.hand .card:hover{transform:translateY(-5px)}
.hand .card.selected{outline:2px solid var(--green);box-shadow:0 16px 40px rgba(70,216,106,.17);transform:translateY(-7px)}
.hand .card.unplayable{opacity:.52}
.hand .card-art{height:59px}
.hand .card-body{padding-bottom:10px}
.feed-head{color:#dce7df;font-weight:900}
.feed-head button{border:0;background:none;color:var(--muted);font-weight:800}
.feed-head button:hover{color:white}
.battle-feed ol{display:grid;gap:7px;margin:12px 0 0;padding:0;list-style:none;max-height:170px;overflow:auto}
.battle-feed li{display:flex;gap:8px;color:#aebcb3;font-size:.82rem;border-top:1px solid rgba(255,255,255,.05);padding-top:7px}
.battle-feed li b{color:#6f7f75;min-width:34px}
.rules-dialog{width:min(900px,calc(100% - 24px));border:1px solid rgba(255,255,255,.14);border-radius:28px;background:#0b1510;color:white;padding:28px;box-shadow:var(--shadow)}
.rules-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}
.rules-dialog h2{font-size:clamp(2rem,4vw,3.4rem);margin:.3rem 0 1.1rem;letter-spacing:-.04em}
.dialog-close{position:absolute;right:15px;top:13px;border:0;background:rgba(255,255,255,.07);color:white;width:38px;height:38px;border-radius:50%;font-size:1.4rem}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rules-grid article{border:1px solid var(--line);border-radius:17px;padding:15px;background:rgba(255,255,255,.03)}
.rules-grid article>b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(86,208,110,.13);color:#7de891}
.rules-grid h3{margin:.65rem 0 .35rem}.rules-grid p,.rules-note{color:var(--muted);line-height:1.5}
.rules-note{margin-bottom:0}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:50;padding:.8rem 1rem;border-radius:999px;background:#f0f5f1;color:#07100c;font-weight:900;opacity:0;pointer-events:none;transition:.22s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.result-overlay{position:fixed;z-index:60;inset:0;display:grid;place-items:center;background:rgba(2,7,4,.76);backdrop-filter:blur(9px);padding:16px}
.result-overlay[hidden]{display:none}
.result-card{width:min(580px,100%);border:1px solid rgba(255,255,255,.16);border-radius:28px;background:linear-gradient(180deg,#122019,#0b1510);padding:28px;box-shadow:var(--shadow);text-align:center}
.result-card h2{font-size:clamp(2.4rem,7vw,5rem);margin:.35rem 0 .4rem;letter-spacing:-.06em}
.result-card p{color:var(--muted);line-height:1.5}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0}
.result-stats div{border:1px solid var(--line);border-radius:15px;padding:10px;background:rgba(255,255,255,.03)}
.result-stats b{display:block;font-size:1.35rem}.result-stats span{font-size:.68rem;text-transform:uppercase;color:var(--muted);font-weight:900;letter-spacing:.08em}
.result-actions{display:flex;justify-content:center;gap:9px}
@keyframes hitFlash{0%{filter:brightness(1)}35%{filter:brightness(1.8)}100%{filter:brightness(1)}}
@keyframes enterCard{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.card{animation:enterCard .24s ease both}.lane.hit .card{animation:hitFlash .28s ease}
@media(max-width:980px){.game-header{grid-template-columns:1fr auto}.brand-lockup{grid-column:1/-1;grid-row:1;text-align:left}.hub-link{grid-row:2}.header-actions{grid-row:2}.family-grid{grid-template-columns:repeat(2,1fr)}.scoreboard{grid-template-columns:1fr 1fr}.round-core{grid-column:1/-1;grid-row:1;min-width:0}.cpu-summary{grid-row:2}.player-summary{grid-row:2}.rules-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.showdown-shell{padding-inline:10px}.brand-lockup h1{font-size:2.55rem}.brand-lockup p{font-size:.85rem}.header-actions{gap:6px}.header-actions button{padding:.58rem .68rem;font-size:.78rem}.family-grid{grid-template-columns:1fr 1fr;gap:9px}.family-choice{padding:14px;min-height:190px;border-radius:18px}.family-choice .family-name{font-size:1.2rem}.family-choice p{font-size:.83rem}.passive-ribbon{grid-template-columns:1fr}.passive-ribbon>div:last-child{text-align:left}.arena{padding:10px;border-radius:21px}.lane-grid{gap:6px}.lane{min-height:198px;padding:5px;border-radius:14px}.lane-index{left:6px;top:5px}.card{min-height:180px;border-radius:14px}.card h3{font-size:.82rem}.card-head{padding:8px 8px 4px}.card-stage{font-size:.52rem}.card-art{height:45px;margin:4px 7px}.card-body{padding:3px 7px 7px;gap:4px}.stat-box{padding:5px;font-size:.52rem}.stat-box b{font-size:.82rem}.unit-footer{padding:0 7px 7px;font-size:.58rem}.attack-button{margin:0 6px 6px;padding:.5rem;font-size:.7rem}.hand .card{min-width:150px}.hand .card-art{height:48px}.scoreboard{gap:7px}.fighter-summary,.round-core{padding:10px;border-radius:16px}.fighter-summary>strong{font-size:1rem}.meter-row{font-size:.66rem}.mini-stats{font-size:.63rem}.rules-grid{grid-template-columns:1fr}}
@media(max-width:460px){.family-grid{grid-template-columns:1fr}.brand-lockup h1{font-size:2.2rem}.lane{min-height:172px}.card{min-height:158px}.card-art{height:36px}.role-tag{display:none}.attack-button{font-size:.62rem;padding:.42rem}.hand-head{align-items:flex-end}.turn-actions{flex-direction:column}.primary-button,.ghost-button{padding:.62rem .78rem}.result-stats{grid-template-columns:1fr 1fr}}