:root { --bg: #0d0b17; --ink: #f4ecd6; --gold: #ffc85a; --glow: #7de3ff; --panel: #1b1730; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 600 14px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#app { height: 100dvh; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 50% 0, #241d44, var(--bg)); }
#hud { display: flex; gap: 6px; align-items: center; padding: max(6px, env(safe-area-inset-top)) 8px 6px; }
.pill { background: var(--panel); border: 1px solid #ffffff22; border-radius: 999px; padding: 6px 10px; color: var(--ink); font: inherit; white-space: nowrap; }
.pill b { color: var(--gold); }
button { font: inherit; color: inherit; cursor: pointer; }
.pill.btn { min-width: 44px; min-height: 40px; }
.glowbar { position: relative; flex: 1; height: 28px; border-radius: 999px; background: #0008; border: 1px solid #7de3ff55; overflow: hidden; }
.glowbar i { position: absolute; inset: 0 auto 0 0; width: 50%; background: linear-gradient(90deg, #2a7fb8, var(--glow)); box-shadow: 0 0 14px var(--glow); transition: width .12s; }
.glowbar span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; text-shadow: 0 1px 3px #000; }
#stage { position: relative; flex: 0 0 auto; margin: 0 auto; }
#board { display: block; touch-action: none; border-radius: 10px; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: #0d0b17cc; backdrop-filter: blur(3px); z-index: 5; }
.overlay.hidden, .hidden { display: none !important; }
.card { background: var(--panel); border: 1px solid #ffc85a55; border-radius: 16px; padding: 22px 20px; text-align: center; width: min(86%, 340px); box-shadow: 0 10px 40px #000a; }
h1 { margin: 0 0 6px; letter-spacing: .14em; font-size: 30px; color: var(--gold); text-shadow: 0 0 18px #ffb03a88; }
h2 { margin: 0 0 8px; color: var(--gold); letter-spacing: .08em; }
.tag { margin: 0 0 16px; opacity: .9; }
.small { font-size: 12px; opacity: .6; margin: 10px 0 0; }
.big { background: linear-gradient(#ffd877, #f0a52f); color: #2a1a00; border: 0; border-radius: 12px; padding: 12px 22px; font-weight: 800; letter-spacing: .06em; min-height: 46px; box-shadow: 0 3px 0 #8a5a10; }
.big.small { padding: 6px 12px; min-height: 40px; margin: 0; opacity: 1; font-size: 13px; }
.big:disabled { filter: grayscale(1); opacity: .5; }
.alt { background: #2a2548; color: var(--ink); box-shadow: 0 3px 0 #0006; }
#strip { display: flex; align-items: center; gap: 8px; padding: 4px 8px; min-height: 48px; }
.lab { font-size: 10px; opacity: .6; letter-spacing: .1em; }
#preview { flex: 1; display: flex; gap: 6px; overflow: hidden; }
.pv { display: flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid #ffffff1a; border-radius: 10px; padding: 2px 5px; font-size: 11px; }
.pv.boss { border-color: #ff6a6a; box-shadow: 0 0 8px #ff6a6a66; }
.pv canvas { width: 22px; height: 22px; }
#handbar { display: flex; gap: 6px; align-items: stretch; padding: 4px 8px max(8px, env(safe-area-inset-bottom)); }
#hand { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hc { position: relative; aspect-ratio: 3/4.2; border-radius: 10px; overflow: hidden; border: 2px solid var(--rc, #888); background: #000; touch-action: none; transition: transform .12s; }
.hc img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.hc .cost { position: absolute; top: 2px; left: 2px; min-width: 22px; height: 22px; border-radius: 50%; background: #0b2a42; border: 2px solid var(--glow); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.hc .nm { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, #000c); font-size: 10px; padding: 8px 2px 2px; text-align: center; }
.hc canvas { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; }
.hc.sel { transform: translateY(-8px); box-shadow: 0 0 14px var(--rc); }
.hc.poor { filter: grayscale(.8) brightness(.7); }
#nextcard { width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 9px; opacity: .85; gap: 2px; }
#nextcard .hc { width: 36px; aspect-ratio: 3/4.2; }
#nextcard .hc .cost, #nextcard .hc .nm, #nextcard .hc canvas { display: none; }
.hero { width: 64px; border: 2px solid #ffc85a66; border-radius: 12px; background: #1a1530; position: relative; overflow: hidden; font-size: 10px; letter-spacing: .06em; }
.hero i { position: absolute; inset: auto 0 0 0; height: 0; background: linear-gradient(#ffe9a0, #f0a52f); opacity: .55; }
.hero span { position: relative; }
.hero.ready { border-color: var(--gold); box-shadow: 0 0 16px #ffc85a; animation: rdy 1s infinite alternate; }
@keyframes rdy { to { box-shadow: 0 0 4px #ffc85a; } }
#tip { position: absolute; left: 0; right: 0; bottom: 0; }
#info { position: absolute; left: 8px; right: 8px; bottom: 8px; background: #1b1730ee; border: 1px solid #ffc85a55; border-radius: 12px; padding: 8px 10px; display: flex; gap: 10px; align-items: center; z-index: 3; }
#info .t { flex: 1; font-size: 12px; } #info b { color: var(--gold); font-size: 14px; }
#toast { position: absolute; top: 8px; left: 8px; right: 8px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .25s; text-shadow: 0 1px 4px #000; font-weight: 800; z-index: 4; }
#toast.on { opacity: 1; }
#tip { display: none; }
@media (prefers-reduced-motion: reduce) { .hero.ready { animation: none; } .hc { transition: none; } }

.hc.in { animation: drawin .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes drawin { from { transform: translateY(40px) scale(.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hc.in { animation: none; } }

#coach { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; background: #102a3ae6; border: 2px solid var(--glow); border-radius: 12px; padding: 10px 40px 10px 12px; font-size: 14px; box-shadow: 0 0 18px #7de3ff55; animation: coachin .3s; }
#coach button { position: absolute; top: 4px; right: 4px; background: none; border: 0; color: var(--ink); font-size: 18px; width: 34px; height: 34px; }
@keyframes coachin { from { transform: translateY(20px); opacity: 0; } }
.card.scroll { max-height: 92%; overflow-y: auto; text-align: left; width: min(94%, 420px); }
.rl { margin: 0 0 14px; padding-left: 20px; font-weight: 500; font-size: 13.5px; }
.rl li { margin: 0 0 9px; } .rl b { color: var(--gold); }
#rulesok { display: block; margin: 0 auto; }
.hc.hint { animation: hintpulse 1s infinite alternate; }
@keyframes hintpulse { to { box-shadow: 0 0 16px var(--glow); transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .hc.hint, #coach { animation: none; } }
#rulesok { position: sticky; bottom: 0; }

#intel { padding: 3px 10px; font-size: 12px; min-height: 26px; color: #bfe8ff; line-height: 1.25; }
#intel b { color: var(--gold); }
.hc .ty { position: absolute; bottom: 18px; left: 3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-style: normal; border: 2px solid #000a; }
.hc .ty.p { background: #ff8f5a; color: #3a1000; } .hc .ty.m { background: #8fb8ff; color: #001a40; }
#cardinfo { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 4; background: #14102ae8; border: 2px solid var(--rc, #888); border-radius: 12px; padding: 8px 10px; font-size: 12.5px; box-shadow: 0 0 18px #000a; }
#cardinfo b.nm { font-size: 15px; color: var(--rc, var(--gold)); } #cardinfo .st { opacity: .85; margin: 2px 0; font-variant-numeric: tabular-nums; }
#cardinfo .ln { margin-top: 3px; } #cardinfo i { font-style: normal; color: var(--gold); }
.boon { display: block; width: 100%; text-align: left; margin: 0 0 8px; padding: 10px 12px; background: #231d44; border: 2px solid #ffc85a66; border-radius: 12px; color: var(--ink); }
.boon b { color: var(--gold); display: block; font-size: 15px; } .boon span { font-weight: 500; font-size: 13px; opacity: .92; }
.boon:active { background: #35296a; }
#captives { display: flex; gap: 10px; justify-content: center; margin: 0 0 14px; }
#captives figure { margin: 0; width: 72px; } #captives img { width: 72px; border-radius: 10px; border: 2px solid #ff6a6a; filter: grayscale(.7) brightness(.8); }
#captives figcaption { font-size: 10px; opacity: .8; margin-top: 2px; }
#freed img { width: 190px; border-radius: 14px; border: 3px solid var(--gold); box-shadow: 0 0 40px #ffc85a; animation: freeit .8s cubic-bezier(.2,1.5,.4,1); }
@keyframes freeit { from { transform: scale(.3) rotate(-10deg); filter: grayscale(1) brightness(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #freed img { animation: none; } }
.stars { font-size: 34px; color: var(--gold); letter-spacing: 6px; margin: 4px 0 8px; } .stars i { font-style: normal; opacity: .25; }
.modes { display: flex; gap: 4px; margin: 4px 0 0; } .modes button { flex: 1; min-height: 34px; border-radius: 8px; border: 1px solid #ffffff33; background: #2a2548; color: var(--ink); font-size: 12px; } .modes button.on { background: var(--gold); color: #2a1a00; font-weight: 800; }
#info { flex-wrap: wrap; } #info .t { flex: 1 1 100%; }
.pv img { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #ff6a6a; object-fit: cover; }

#infoslot { height: 80px; position: relative; overflow: hidden; }
#cardinfo { position: static; margin: 2px 6px; border-width: 1px; padding: 4px 8px; font-size: 11.5px; line-height: 1.25; box-shadow: none; height: 76px; overflow: hidden; }
#cardinfo b.nm { font-size: 13px; } #cardinfo .st, #cardinfo .ln { margin: 0; }

#decks .card { width: min(98%, 480px); max-height: 96%; padding: 12px 10px; display: flex; flex-direction: column; text-align: center; }
#decks .dtop { display: flex; gap: 4px; justify-content: center; min-height: 64px; margin: 6px 0; } #decks .dtop .hc { width: 17%; max-width: 70px; }
#decks .dgrid { overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; flex: 1; touch-action: pan-y; }
#decks .dgrid .hc.in-deck { outline: 3px solid var(--gold); } #decks .dgrid .hc.locked { filter: grayscale(.9) brightness(.5); }
#decks .cnt { position: absolute; top: 2px; right: 2px; background: #000b; border-radius: 8px; padding: 0 5px; font-size: 11px; }
#decks .loan { position: absolute; top: 24px; left: 2px; background: #3a8f3a; border-radius: 6px; padding: 0 4px; font-size: 9px; }
#decks .msg { font-size: 12px; min-height: 30px; margin: 2px 0 6px; opacity: .9; }
#decks .row { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
#decks { position: fixed; inset: 0; z-index: 20; }
#decks .card { height: 96dvh; max-height: 96dvh; min-height: 0; }
#decks .dgrid { min-height: 0; }
#decks .dgrid { align-content: start; grid-auto-rows: min-content; }
#decks .dgrid .hc { width: 100%; height: auto; flex: none; }

#worlds { position: fixed; inset: 0; z-index: 20; }
#worlds .card { width: min(98%, 480px); max-height: 96dvh; overflow-y: auto; padding: 14px 12px; text-align: left; }
.wd { display: flex; gap: 10px; align-items: center; padding: 10px; margin: 0 0 8px; border-radius: 12px; background: #231d44; border: 1px solid #ffffff22; width: 100%; color: var(--ink); text-align: left; }
.wd .sw { width: 46px; height: 46px; border-radius: 10px; flex: none; border: 2px solid #ffffff44; } .wd b { color: var(--gold); display: block; } .wd small { opacity: .8; display: block; font-weight: 500; }
.wd.lock { opacity: .55; } .wd .st { margin-left: auto; text-align: right; font-size: 12px; white-space: nowrap; } .wd .stars { font-size: 16px; letter-spacing: 1px; margin: 0; }
.raid { border-color: #ff6a6a88; background: #2e1a2a; }
.hc .nm small { display: block; font-size: 8px; color: var(--glow); letter-spacing: .04em; }
#towers b.full { color: #ff8a8a; }
.lbrow { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 4px; } .lbrow.me { color: var(--gold); }
#pausebox .card { text-align: center; } #pausebox .big { width: 100%; }
.newtag { position: absolute; top: 2px; left: 2px; background: #e33; border-radius: 6px; padding: 0 4px; font-size: 9px; }
.cardrow { display: flex; gap: 6px; justify-content: center; margin: 8px 0; } .cardrow .hc { width: 72px; }

.snds { display: grid; gap: 6px; margin: 6px 0 12px; text-align: left; } .snds label { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 13px; } .snds label span { min-width: 64px; } .snds input[type=range] { flex: 1; min-height: 34px; accent-color: #ffc85a; }

#hintbtn { position: absolute; right: 8px; top: 2px; z-index: 3; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 2px solid #ffe27a; background: #3a2d10; color: #ffe27a; font: 800 12px system-ui; } #intel { padding-right: 112px; }

.rvis { text-align: center; margin: 4px 0 8px; min-height: 80px; display: grid; place-items: center; } .rbody { font-size: 14.5px; font-weight: 500; line-height: 1.4; margin: 0 0 10px; } .rbody b { color: var(--gold); }
.rdots { display: flex; gap: 5px; justify-content: center; margin: 4px 0 10px; } .rdots i { width: 8px; height: 8px; border-radius: 50%; background: #ffffff33; } .rdots i.on { background: var(--gold); }
.rnav { display: flex; gap: 10px; justify-content: center; } .rnav .big { min-width: 120px; } #rulescard .chip { display: block; margin: 8px auto 0; background: none; border: 0; color: #fff9; text-decoration: underline; min-height: 36px; }
#rules .card { width: min(94%, 420px); }
#rules { position: fixed; inset: 0; z-index: 40; } #pausebox { z-index: 12; }