/* Squad Draft styles.
   "Sumi night": warm charcoal (not blue) so the eye rests, with bright color saved for what matters:
   paper-white character seals, health bars and buttons, vermilion seal accents, and
   a thin ember line as the one decorative motif (CK dropped the green/black checker, Nov 2, 2026).
   Team colors: Player 1 haori green, Player 2 wisteria indigo. Red is reserved for low health. */
:root{
  --bg:#1a1714; --bg-2:#12100e; --surface:#23201b; --surface-2:#2b2721; --raise:#342e27;
  --fg:#efe6d6; --ink-2:#cdbfa8; --muted:#978b79; --line:#39322a; --line-2:#4f463b;
  --paper:#e9dec8; --paper-ink:#1d1915;
  --btn:#e9dec8; --btn-fg:#1a1714;
  --accent:#e0573b; --gold:#d6a54d; --mark:#d8434f;
  --p1:#52b388; --p2:#8b9cf0; --p3:#e3a447; --p4:#e07fae;
  --hp:#e9dec8; --low:#ff5d4c;
  --display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Segoe UI",system-ui,sans-serif;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 6px 16px rgba(0,0,0,.25);
  --check:linear-gradient(90deg,#7c2417,#e0573b 32%,#d6a54d 50%,#e0573b 68%,#7c2417);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:var(--body);font-size:15px;line-height:1.5;-webkit-tap-highlight-color:transparent;
  background-image:radial-gradient(900px 420px at 90% -140px,rgba(224,87,59,.09),transparent 70%),
    radial-gradient(800px 520px at -10% 110%,rgba(82,179,136,.06),transparent 70%);background-attachment:fixed}
/* ember line along the top */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:5px;background:var(--check);z-index:7}
.wrap{max-width:560px;margin:0 auto;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:120px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;font-weight:800}
h1{font-size:2.7rem;line-height:1.05;letter-spacing:.01em}
h2{font-size:1.35rem;line-height:1.15}
p{margin:0}
.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
.muted{color:var(--muted)}
button{font:inherit;color:inherit;cursor:pointer;border:0;border-radius:10px;touch-action:manipulation}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- buttons, panels, forms ---------- */
.btn{background:var(--btn);color:var(--btn-fg);font-weight:700;padding:13px 18px;font-size:1rem;transition:filter .15s,opacity .15s,transform .1s}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn.team{background:var(--bc);color:var(--btn-fg)}
.btn.ghost{background:transparent;color:var(--fg);border:1.5px solid var(--line-2)}
.btn.small{padding:8px 12px;font-size:.85rem}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > .btn{flex:1}
.panel{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.seg{display:flex;background:var(--bg-2);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;background:transparent;color:var(--muted);padding:9px 6px;font-weight:700;font-size:.9rem}
.seg button.on{background:var(--btn);color:var(--btn-fg)}
label{font-size:.8rem;color:var(--muted);display:flex;flex-direction:column;gap:5px;flex:1;min-width:120px}
input[type=text]{background:var(--bg-2);border:1px solid var(--line-2);color:var(--fg);border-radius:8px;padding:10px;font:inherit}
input:disabled{opacity:.6}
details summary{cursor:pointer;font-weight:700}
details ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
details ul b{color:var(--fg)}

/* ---------- shared: top bar, chips, action bar ---------- */
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.top .title{font-family:var(--display);font-size:1.6rem;font-weight:800;line-height:1.15}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.chip.s{border-color:rgba(214,165,77,.6);color:var(--gold);background:rgba(214,165,77,.08)}
.chip.bad{border-color:rgba(255,93,76,.6);color:#ff8f82;background:rgba(255,93,76,.08)}
.chip.good{border-color:rgba(82,179,136,.6);color:var(--p1);background:rgba(82,179,136,.08)}
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:4;
  padding:28px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:linear-gradient(to bottom,rgba(26,23,20,0),var(--bg) 45%)}
.actionbar .in{max-width:560px;margin:0 auto;display:flex;gap:10px}
.actionbar .btn{flex:1;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.actionbar .btn.ghost{background:var(--surface)}
.tlabel{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---------- setup ---------- */
.setbar{display:flex;justify-content:flex-end;margin-bottom:-14px}
.gear span{font-size:1rem;line-height:1;margin-right:2px}
.setgroup{display:flex;flex-direction:column;gap:8px}
.seg button small{font-size:.66rem;font-weight:500;opacity:.75}
.hero{position:relative;padding-top:18px;display:flex;flex-direction:column;gap:8px}
/* the 滅 of the Corps uniform, as a vermilion seal */
.hero .kanji{position:absolute;right:0;top:14px;width:76px;height:76px;border-radius:12px;background:var(--accent);color:#fff8ee;
  font-family:var(--display);font-size:3.2rem;line-height:1;display:grid;place-items:center;transform:rotate(4deg);box-shadow:0 8px 22px rgba(224,87,59,.3)}
.hero h1,.hero p{padding-right:92px}
.score{display:flex;gap:10px}
.score div{flex:1;text-align:center;padding:10px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.score b{display:block;font-family:var(--display);font-size:1.8rem;font-variant-numeric:tabular-nums}
.recs{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:420px;overflow-y:auto}
.rec{display:grid;grid-template-columns:22px minmax(0,1fr) 1.2fr auto;gap:10px;align-items:center;font-size:.85rem}
.rec.head{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rn{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbar{position:relative;height:18px;border-radius:5px;background:var(--bg-2);overflow:hidden}
.rbar i{position:absolute;inset:0 auto 0 0;background:rgba(214,165,77,.35)}
.rbar b{position:relative;font-size:.72rem;padding-left:6px;line-height:18px;font-variant-numeric:tabular-nums}
.rw{color:var(--muted);font-size:.76rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- who picks first: the wheel ---------- */
.spin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;min-height:calc(100vh - 240px);min-height:calc(100svh - 240px)}
.wheelbox{position:relative;width:min(320px,82vw);aspect-ratio:1}
.wheel{display:block;width:100%;height:100%;transform-origin:50% 50%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.wheel.go{transition:transform 4s cubic-bezier(.12,.68,.12,1)}
.wheel .rim{fill:var(--paper)}
.wheel path{stroke:var(--bg);stroke-width:1.5}
.wheel text{fill:var(--btn-fg);font-family:var(--body);font-weight:700;font-size:12px;text-anchor:middle;dominant-baseline:middle}
/* the 滅 seal in the middle is the spin button; it stays still while the wheel turns */
.hubbtn{position:absolute;left:50%;top:50%;width:27%;height:27%;transform:translate(-50%,-50%);border-radius:50%;z-index:2;
  background:var(--accent);color:#fff8ee;border:4px solid var(--paper);font-family:var(--display);font-size:clamp(1.6rem,8vw,2.2rem);line-height:1;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.hubbtn.ready{animation:beckon 1.6s ease-in-out infinite}
.hubbtn.ready:active{transform:translate(-50%,-50%) scale(.94)}
.hubbtn:disabled{cursor:default}
@keyframes beckon{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 0 rgba(224,87,59,.55)}50%{box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 14px rgba(224,87,59,0)}}
.spinhint{font-size:.95rem;color:var(--muted);min-height:1.5em}
.pointer{position:absolute;left:50%;top:-10px;transform:translateX(-50%);z-index:1;width:0;height:0;
  border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--paper);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.spinres{font-family:var(--display);font-size:2.2rem;font-weight:800;line-height:1.1;animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.spinres,.hubbtn.ready{animation:none}}

/* ---------- draft ---------- */
.draftlayout{display:flex;flex-direction:column;gap:16px}
.dtop{display:flex;flex-direction:column;gap:14px}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tbox{border-radius:12px;padding:10px;border:1px solid var(--line);background:var(--surface);min-width:0;display:flex;flex-direction:column;gap:7px}
.tbox.active{border-color:var(--tc);box-shadow:0 0 0 1px var(--tc) inset}
.tbox .tn{display:flex;justify-content:space-between;gap:6px;font-weight:700;font-size:.88rem;color:var(--tc)}
.tbox .tn span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbox .tn span:last-child{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.meter{height:5px;border-radius:3px;background:var(--bg-2)}
.meter i{display:block;height:100%;border-radius:3px;background:var(--tc);transition:width .3s}
.slots{display:flex;gap:5px;flex-wrap:wrap}
.slot{width:30px;height:36px;border-radius:6px;background:var(--paper);color:var(--paper-ink);font-family:var(--display);font-size:1.05rem;display:grid;place-items:center}
.slot.mk{background:var(--mark);color:#fff}
.slot.leg{background:var(--gold);color:var(--paper-ink)}
.slot.empty{background:transparent;border:1.5px dashed var(--line-2)}
.lockbar{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--surface);border:1.5px dashed var(--line-2);border-radius:12px;padding:10px 12px}
.lockbar span{font-size:.85rem;color:var(--ink-2)}
.order{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:.76rem}
.order .tlabel{margin-right:4px}
.op{color:var(--tc);font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.op.cur{border-color:var(--tc);background:rgba(255,255,255,.04)}
.oarrow{color:var(--muted)}
.dealt{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.82rem;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 12px;padding-top:4px;align-content:start}
/* cost: a small vermilion seal */
/* picture-first draft cards */
.card{position:relative;display:flex;flex-direction:column;padding:0;text-align:left;color:var(--fg);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:14px;overflow:visible;box-shadow:var(--shadow);transition:transform .15s,opacity .15s,border-color .15s,box-shadow .15s}
@media (hover:hover){.card:not(.off):hover{transform:translateY(-3px);border-color:var(--muted);box-shadow:var(--shadow),0 12px 26px rgba(0,0,0,.35)}}
.cart{position:relative;display:block;height:118px;border-radius:13px 13px 0 0;overflow:hidden;background:linear-gradient(160deg,#3a3229,#1d1a16)}
.cart img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.cart::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 45%,rgba(26,23,20,.92) 100%)}
.cart .ck{display:grid;place-items:center;height:100%;font-family:var(--display);font-size:3.2rem;color:var(--paper);opacity:.85}
.cbody{position:relative;flex:1;display:flex;flex-direction:column;gap:2px;padding:0 10px 10px;margin-top:-30px;z-index:1}   /* flex:1 + .stats margin-top:auto: stats line up across a row */
.card .cn{font-weight:800;font-size:.95rem;line-height:1.15;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.card .ct{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.card .stats{padding-top:6px}
.card .badge{position:absolute;top:8px;right:8px;z-index:2;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--mark);color:#fff}
.card.leg .badge{background:var(--gold);color:var(--paper-ink)}
.card.mk{border-color:rgba(216,67,79,.75);box-shadow:0 0 0 1px rgba(216,67,79,.35) inset,var(--shadow)}
.card.leg{border-color:rgba(214,165,77,.85);box-shadow:0 0 24px rgba(214,165,77,.22),var(--shadow)}
.card.sel{outline:3px solid var(--accent);outline-offset:2px}
.card.off{opacity:.32;cursor:not-allowed;box-shadow:none}
.card.off .cart img{filter:grayscale(.7)}
.card .tag{position:absolute;right:8px;top:-9px;z-index:3;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px;color:var(--btn-fg);max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.taken .badge{display:none}
.cost{position:absolute;left:-7px;top:-8px;z-index:3;height:26px;padding:0 8px;border-radius:7px;background:var(--accent);color:#fff8ee;font-weight:800;font-size:.85rem;display:flex;align-items:baseline;justify-content:center;gap:2px;line-height:26px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.4);transform:rotate(-3deg)}
.cost small{font-size:.66rem;font-weight:700;opacity:.85}
.cost.big{background:var(--gold);color:var(--paper-ink)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:auto;padding-top:6px;font-variant-numeric:tabular-nums}
.stats span{display:flex;flex-direction:column;align-items:center;background:var(--bg-2);border-radius:5px;padding:2px 0 3px;font-weight:800;font-size:.86rem;line-height:1.15}
.stats i{font-style:normal;font-size:.55rem;letter-spacing:.08em;color:var(--muted);font-weight:700}

/* draft: pool notes (folds on phones, sidebar on wide screens) */
.notes{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;overflow:hidden}
.nhead{width:100%;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;text-align:left;background:transparent;padding:12px 14px;border-radius:0}
.ntitle{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--gold)}
.nhead .muted{font-size:.8rem;flex:1}
.chev{color:var(--muted);transition:transform .2s}
.notes.open .chev{transform:rotate(180deg)}
.nbody{display:none;flex-direction:column;gap:8px;padding:0 10px 10px}
.notes.open .nbody{display:flex}
.note{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:10px 11px;display:flex;flex-direction:column;gap:4px}
.note.on{border-color:rgba(214,165,77,.55)}
.note.off{opacity:.45}
.note.off .nt{text-decoration:line-through;text-decoration-color:var(--muted)}
.nh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.nk{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;border-radius:4px}
.nk.team{color:var(--p1);background:rgba(82,179,136,.12)}
.nk.vs{color:#ff8f82;background:rgba(255,93,76,.1)}
.nst{font-size:.72rem;font-weight:700;color:var(--muted)}
.nst.live{color:var(--gold)}
.nt{font-weight:700;font-size:.92rem}
.nx{font-size:.82rem;color:var(--ink-2);line-height:1.4}
.nwho{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.nc{display:flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--line);padding:2px 8px 2px 2px;font-size:.74rem;font-weight:700;border-radius:7px}
.nc .gl.sm{width:18px;height:22px;font-size:.72rem}
@media (min-width:960px){
  .wrap:has(.draftlayout){max-width:1000px}
  .draftlayout{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"top side" "grid side";grid-template-rows:auto 1fr;gap:16px 22px;align-items:start}
  .dtop{grid-area:top} .grid{grid-area:grid}
  .notes{grid-area:side;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto}
  .notes .nbody{display:flex}
  .nhead{pointer-events:none} .chev{display:none}
}

/* draft: card detail, centred */
.scrim{position:fixed;inset:0;z-index:5;background:rgba(0,0,0,.62);animation:fade .15s ease-out}
.modal{position:fixed;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.modal .in{pointer-events:auto;position:relative;width:100%;max-width:460px;max-height:100%;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:20px 18px 18px;box-shadow:0 24px 60px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:12px;animation:rise .18s ease-out}
.modal .in > *{flex-shrink:0}   /* a long card scrolls: its picture and header never squash */
.modal .in.mk{border-color:rgba(216,67,79,.7)}
.modal .in.leg{border-color:rgba(214,165,77,.8)}
.modal .x{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;background:var(--bg-2);color:var(--muted);font-size:1.3rem;line-height:1}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.98)}}
.shead{display:flex;gap:12px;align-items:center;padding-right:30px}
.shead > div{flex:1;min-width:0}
.shead .cost{position:static;height:32px;line-height:32px;font-size:1rem;flex:none}
.modal .stats{padding-top:0}
.modal .stats span{font-size:1.1rem;padding:6px 0}
.modal .stats i{font-size:.62rem}
.recline{font-size:.8rem;color:var(--muted)}
.splits{display:flex;flex-direction:column;gap:8px;background:var(--bg-2);border-radius:10px;padding:10px 12px}
.sform{display:flex;gap:9px;align-items:flex-start;font-size:.82rem}
.sform .gl.sm{margin-top:2px}
.sx{color:var(--ink-2)}
.sthen{color:var(--gold);font-size:.74rem;font-weight:700}
.levelpick{display:flex;flex-direction:column;gap:6px}
.recline b{color:var(--fg)}
.mnotes{display:flex;flex-direction:column;gap:8px;padding-top:4px;border-top:1px solid var(--line)}
.mnotes .tlabel{padding-top:8px;color:var(--gold)}
.nwho .tlabel{align-self:center;margin-right:2px}
.nside{display:flex;flex-wrap:wrap;gap:5px}
.nvs{align-self:center;padding:0 4px;font-family:var(--display);font-weight:800;color:var(--gold)}
.sig{font-size:.9rem;background:var(--bg-2);border-left:3px solid var(--accent);border-radius:4px 10px 10px 4px;padding:10px 12px}
.sig .sname{font-weight:700;color:var(--accent)}
.sig .sname .muted{font-weight:500;font-size:.8rem}
.pas{font-size:.84rem;color:var(--ink-2)}

/* ---------- battle ---------- */
.side{display:flex;flex-direction:column;gap:8px}
.sidehead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8rem}
.sidehead .tname{font-family:var(--display);font-weight:800;font-size:1.15rem}
/* character glyph: ink kanji on a paper seal */
.gl{width:38px;height:46px;flex:none;border-radius:6px;background:var(--paper);color:var(--paper-ink);font-family:var(--display);font-size:1.4rem;display:grid;place-items:center}
.gl.mk{background:var(--mark);color:#fff}
.gl.leg{background:var(--gold);color:var(--paper-ink)}
.gl.sm{width:22px;height:26px;font-size:.85rem;border-radius:4px}
.gl.xs{width:30px;height:36px;font-size:1.05rem}
.gl.lg{width:56px;height:68px;font-size:2rem}
/* pin the seal's single grid cell to the seal's own size, so a picture can never stretch a small seal */
.gl{grid-template-columns:100%;grid-template-rows:100%;overflow:hidden}
.gl img,.card .g img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.tb{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.un{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.un .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp{font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.hp.low{color:var(--low)}
.bar{display:block;height:10px;border-radius:6px;background:var(--bg-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:var(--hp);transition:width .5s}
.bar.low i{background:var(--low)}
.bar i.drain{animation:drain .6s ease-out}
@keyframes drain{from{width:var(--from)}}
.meta{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* compact fighter tiles (enemies, results) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.tile{position:relative;display:flex;gap:9px;align-items:flex-start;padding:9px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--tc);border-radius:10px;min-width:0;width:100%;text-align:left;color:inherit;font:inherit}
/* opponents you can tap to target */
.tile.targetable{cursor:pointer;border-color:rgba(224,87,59,.55);border-left-color:var(--tc);animation:aim 1.8s ease-in-out infinite}
.tile.targetable:active{transform:scale(.98)}
.tile.picked{border-color:var(--accent);border-left-color:var(--tc);box-shadow:0 0 0 2px var(--accent) inset,0 0 18px rgba(224,87,59,.35);animation:none}
.tile.picked::after{content:"◎";position:absolute;top:-9px;right:-7px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff8ee;font-size:.95rem;line-height:24px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
@keyframes aim{0%,100%{box-shadow:0 0 0 0 rgba(224,87,59,0)}50%{box-shadow:0 0 0 3px rgba(224,87,59,.25)}}
.aimed{display:flex;align-items:center;gap:3px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.aimed > span:first-child{margin-right:2px}
.tiles .tile .gl.pip{width:16px;height:20px;font-size:.62rem;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.taphint{font-size:.78rem;font-weight:700;color:var(--accent);animation:fade .3s ease-out}
/* who's ahead: one bar split between both teams' remaining health */
.strength{display:flex;flex-direction:column;gap:5px}
.strength .sl{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;opacity:.9}
.strength .sl b{font-variant-numeric:tabular-nums}
.sbar{display:flex;height:5px;border-radius:5px;overflow:hidden;background:var(--bg-2);gap:2px}
.sbar i{display:block;height:100%;transition:width .5s}
.vsdiv{display:flex;align-items:center;gap:12px;color:var(--muted);font-family:var(--display);font-weight:800;letter-spacing:.3em;font-size:.85rem}
.vsdiv::before,.vsdiv::after{content:"";flex:1;height:1px;background:linear-gradient(to right,transparent,var(--line-2),transparent)}
.tile.dead{opacity:.35;filter:grayscale(1)}
.tile.acting{box-shadow:0 0 0 2px var(--gold),0 0 20px rgba(214,165,77,.35);transform:translateY(-2px);transition:transform .2s}
.tiles.simple{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tiles.simple .gl{width:44px;height:54px;font-size:1.55rem}
.tiles.simple .tile{align-items:center}
.tiles.simple .nm{white-space:normal;line-height:1.2}
.hprow{display:flex;align-items:center;gap:7px}
.hprow .bar{flex:1}
.hprow .hp{font-size:.95rem}
/* round playback: who was just hit, healed or knocked out */
.tile.hit{animation:hit .45s ease-out}
.tile.heal{animation:heal .6s ease-out}
.tile.spawn{animation:spawn .7s ease-out}
@keyframes spawn{0%{opacity:0;transform:scale(.8);box-shadow:0 0 0 2px var(--gold),0 0 24px rgba(214,165,77,.6)}100%{opacity:1;transform:none}}
.tile.ko{animation:ko .7s ease-out;opacity:.35;filter:grayscale(1)}
@keyframes hit{0%{transform:translateX(0);box-shadow:0 0 0 2px var(--low)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:none;box-shadow:0 0 0 0 transparent}}
@keyframes heal{0%{box-shadow:0 0 0 2px var(--p1),0 0 18px rgba(82,179,136,.5)}100%{box-shadow:none}}
@keyframes ko{0%{opacity:1;filter:none;transform:scale(1.03);box-shadow:0 0 0 2px var(--low),0 0 24px rgba(255,93,76,.6)}100%{opacity:.35;filter:grayscale(1);transform:none}}
.now{min-height:3.4em;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 14px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--line);font-size:1rem;font-weight:700;color:var(--ink-2);animation:fade .25s ease-out}
.now b{color:var(--fg)}
.now > span{display:block}
/* fighter pictures and coloured health changes inside battle log lines */
.who{white-space:nowrap}
.gl.ls{display:inline-grid;width:20px;height:24px;font-size:.78rem;border-radius:4px;vertical-align:-6px;margin-right:4px}
.now .gl.ls{width:24px;height:29px;font-size:.9rem;vertical-align:-8px}
.log b.dmg,.now b.dmg{color:#ff6b5c}
.log b.gain,.now b.gain{color:#5fd39a}
.now.k{border-color:rgba(255,93,76,.5);color:#ff9488}
.now.h{border-color:rgba(82,179,136,.5);color:#8fd3b2}
.now.x{border-color:rgba(214,165,77,.6);color:var(--gold);font-family:var(--display);font-size:1.15rem}
/* fight stage (round playback): pictures lunge, impact marks flash, numbers float up */
.now{flex-direction:column;gap:8px}
.stage{position:relative;height:104px;width:100%;display:flex;align-items:center;justify-content:center;gap:34px}
.st-by,.st-on{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.gl.stg{width:60px;height:72px;font-size:2.1rem;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.st-nm{font-size:.7rem;font-weight:800;white-space:nowrap}
.st-mark{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--accent);opacity:0;pointer-events:none;text-shadow:0 0 18px rgba(224,87,59,.7);z-index:2}
.pop{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-weight:800;font-size:1.15rem;opacity:0;white-space:nowrap;text-shadow:0 2px 6px rgba(0,0,0,.7);z-index:3}
.pop.dmg{color:#ff6b5c} .pop.gain{color:#5fd39a}
/* hit: attacker lunges, slash flashes, target recoils */
.stage.duo.fx-hit .st-by{animation:lunge .6s ease-in-out}
.stage.fx-hit .st-mark,.stage.fx-ko .st-mark,.stage.fx-burn .st-mark{animation:slash .55s .25s ease-out both}
.stage.fx-hit .st-on,.stage.fx-poison .st-on{animation:recoil .5s .3s ease-out}
.stage .pop{animation:floatup 1.5s .35s ease-out both}
/* knockout: target recoils hard and goes grey under a KO stamp */
.stage.fx-ko .st-mark{font-family:var(--body);font-size:1.6rem;color:#fff;background:var(--low);padding:2px 10px;border-radius:6px;text-shadow:none;animation:stamp .5s .45s ease-out both}
.stage.duo.fx-ko .st-by{animation:lunge .6s ease-in-out}
/* miss / blocked */
.stage.duo.fx-miss .st-by,.stage.duo.fx-block .st-by{animation:lunge .6s ease-in-out}
.stage.fx-miss .st-on{animation:dodge .6s .25s ease-in-out}
.stage.fx-miss .st-mark,.stage.fx-block .st-mark{color:var(--ink-2);text-shadow:none;animation:slash .6s .3s ease-out both}
.stage.fx-block .st-on .gl{animation:shield .7s .25s ease-out}
/* healing, revive, training, guarding: glow instead of impact */
.stage.fx-heal .st-on .gl,.stage.fx-revive .st-on .gl,.stage.fx-buff .st-on .gl{animation:healglow 1.1s .2s ease-out}
.stage.fx-heal .st-mark,.stage.fx-revive .st-mark,.stage.fx-buff .st-mark{color:#5fd39a;text-shadow:0 0 16px rgba(95,211,154,.7);animation:rise 1s .15s ease-out both}
.stage.fx-guard .st-on .gl,.stage.fx-guard .st-by .gl{animation:shield .9s .15s ease-out}
.stage.fx-guard .st-mark{color:#8fb6ff;text-shadow:0 0 16px rgba(143,182,255,.7);animation:rise 1s .1s ease-out both}
.stage.fx-poison .st-on .gl{animation:poisoned 1s .2s ease-out}
.stage.fx-poison .st-mark{color:#b77cff;text-shadow:0 0 16px rgba(183,124,255,.7);animation:rise 1s .15s ease-out both}
.stage.fx-stun .st-mark{color:var(--muted);text-shadow:none;animation:rise 1.2s .1s ease-out both}
.stage.fx-stun .st-on .gl{animation:dodge 1.2s ease-in-out;filter:saturate(.4)}
/* specials: the user powers up in a gold aura */
.stage.fx-special .st-by .gl{animation:charge 1s ease-out}
.stage.fx-special .st-mark{color:var(--gold);text-shadow:0 0 22px rgba(214,165,77,.8);animation:rise 1s .2s ease-out both}
.stage.fx-spawn .st-mark{color:var(--gold);animation:slash .7s .2s ease-out both}
.stage.duo.fx-buff .st-by,.stage.duo.fx-heal .st-by{animation:nudge .6s ease-in-out}
@keyframes lunge{0%{transform:none}40%{transform:translateX(52px) rotate(5deg) scale(1.06)}55%{transform:translateX(44px) rotate(3deg)}100%{transform:none}}
@keyframes nudge{0%,100%{transform:none}45%{transform:translateX(18px)}}
@keyframes slash{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-25deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.35) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(-12deg)}60%{opacity:1;transform:translate(-50%,-50%) scale(.95) rotate(-8deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}}
@keyframes recoil{0%{transform:none}20%{transform:translateX(10px) rotate(4deg)}40%{transform:translateX(-7px)}60%{transform:translateX(5px)}100%{transform:none}}
@keyframes dodge{0%,100%{transform:none;opacity:1}40%{transform:translateX(26px) skewX(-8deg);opacity:.55}}
@keyframes fadegrey{to{filter:grayscale(1) brightness(.6);opacity:.55}}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,8px)}20%{opacity:1;transform:translate(-50%,-6px)}80%{opacity:1;transform:translate(-50%,-22px)}100%{opacity:0;transform:translate(-50%,-30px)}}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-20%) scale(.6)}35%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-110%) scale(1)}}
@keyframes healglow{0%,100%{box-shadow:0 6px 16px rgba(0,0,0,.45)}40%{box-shadow:0 0 0 3px #5fd39a,0 0 26px rgba(95,211,154,.75)}}
@keyframes shield{0%,100%{box-shadow:0 6px 16px rgba(0,0,0,.45)}40%{box-shadow:0 0 0 3px #8fb6ff,0 0 26px rgba(143,182,255,.7)}}
@keyframes poisoned{0%,100%{filter:none}40%{filter:hue-rotate(250deg) saturate(1.8)}}
@keyframes charge{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(214,165,77,0)}40%{transform:scale(1.12);box-shadow:0 0 0 4px var(--gold),0 0 34px rgba(214,165,77,.8)}100%{transform:scale(1);box-shadow:0 6px 16px rgba(0,0,0,.45)}}
/* mirrored when the attacker is on the right (opponent's turn): lunge, recoil, dodge and slash go the other way */
.stage.rev.duo.fx-hit .st-by,.stage.rev.duo.fx-ko .st-by,.stage.rev.duo.fx-miss .st-by,.stage.rev.duo.fx-block .st-by{animation:lunge-l .6s ease-in-out}
.stage.rev.duo.fx-buff .st-by,.stage.rev.duo.fx-heal .st-by{animation:nudge-l .6s ease-in-out}
.stage.rev.fx-hit .st-on,.stage.rev.fx-poison .st-on{animation:recoil-l .5s .3s ease-out}
.stage.rev.fx-miss .st-on{animation:dodge-l .6s .25s ease-in-out}
.stage.rev.fx-hit .st-on::after,.stage.rev.fx-ko .st-on::after{transform:rotate(32deg) scaleX(0);animation-name:streak-l}
/* knockout: the card topples onto its side, away from the hit, and stays down */
.stage.fx-ko .st-on{animation:recoil .45s .2s ease-out, topple .7s .55s cubic-bezier(.5,0,.75,1) forwards}
.stage.rev.fx-ko .st-on{animation:recoil-l .45s .2s ease-out, topple-l .7s .55s cubic-bezier(.5,0,.75,1) forwards}
@keyframes lunge-l{0%{transform:none}40%{transform:translateX(-52px) rotate(-5deg) scale(1.06)}55%{transform:translateX(-44px) rotate(-3deg)}100%{transform:none}}
@keyframes nudge-l{0%,100%{transform:none}45%{transform:translateX(-18px)}}
@keyframes recoil-l{0%{transform:none}20%{transform:translateX(-10px) rotate(-4deg)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}100%{transform:none}}
@keyframes dodge-l{0%,100%{transform:none;opacity:1}40%{transform:translateX(-26px) skewX(8deg);opacity:.55}}
@keyframes streak-l{0%{transform:rotate(32deg) scaleX(0);opacity:1}60%{transform:rotate(32deg) scaleX(1);opacity:1}100%{transform:rotate(32deg) scaleX(1.05);opacity:0}}
@keyframes topple{0%{transform:none}70%{transform:translate(10px,14px) rotate(96deg);filter:grayscale(.6)}85%{transform:translate(9px,12px) rotate(86deg)}100%{transform:translate(10px,14px) rotate(90deg);filter:grayscale(1) brightness(.6);opacity:.7}}
@keyframes topple-l{0%{transform:none}70%{transform:translate(-10px,14px) rotate(-96deg);filter:grayscale(.6)}85%{transform:translate(-9px,12px) rotate(-86deg)}100%{transform:translate(-10px,14px) rotate(-90deg);filter:grayscale(1) brightness(.6);opacity:.7}}
/* team cards: a knocked-out fighter's picture tips over and stays on its side */
.tile.ko .gl{animation:tipover .7s .2s cubic-bezier(.5,0,.75,1) both}
.tile.dead .gl{transform:rotate(90deg) scale(.88)}
@keyframes tipover{0%{transform:none}70%{transform:rotate(100deg) scale(.88)}85%{transform:rotate(85deg) scale(.88)}100%{transform:rotate(90deg) scale(.88)}}
@media (prefers-reduced-motion:reduce){.stage *,.stage .gl,.tile.ko .gl{animation:none!important}.stage .pop{opacity:1}}
/* breathing-style effects on the fight stage (drawings from js/effects.js) */
.sty-water{--sc:#5fb4ff} .sty-flame{--sc:#ff8a2a} .sty-thunder{--sc:#ffe14d} .sty-darkthunder{--sc:#b07cff} .sty-sun{--sc:#ffc13b}
.sty-mist{--sc:#d7e6f2} .sty-wind{--sc:#7ee0a3} .sty-stone{--sc:#c9a27a} .sty-love{--sc:#ff8cc6} .sty-serpent{--sc:#9fd8c8}
.sty-sound{--sc:#c99bff} .sty-insect{--sc:#b98cff} .sty-beast{--sc:#d7a46b} .sty-flower{--sc:#ffb0d0} .sty-moon{--sc:#c6a6ff}
.sty-ice{--sc:#a9e6ff} .sty-blood{--sc:#ff4d5e} .sty-compass{--sc:#7ff0ff} .sty-thread{--sc:#f2f2f2} .sty-drum{--sc:#e0a060}
.sty-claw{--sc:#ff6b5c} .sty-dream{--sc:#d48cff} .sty-slash{--sc:#ffffff}
.stage.sty .st-mark{color:var(--sc);text-shadow:0 0 20px var(--sc)}
.stage.sty .st-on::after{display:none}   /* the style drawing replaces the plain slash streak */
.stage.sty.fx-ko .st-mark{color:#fff;text-shadow:none}
.fxl{position:absolute;left:50%;top:36px;width:120px;height:120px;margin:-60px 0 0 -60px;pointer-events:none;z-index:3;overflow:visible;color:var(--sc,#fff);filter:drop-shadow(0 0 6px var(--sc,#fff))}
.stage.rev .fxl{transform:scaleX(-1)}
.fxl *{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.fxl .solid,.fxl .spray,.fxl .burst,.fxl .drift{fill:currentColor;stroke:none}
.fxl .thick{stroke-width:8} .fxl .thin{stroke-width:2.5}
.fxl .draw{stroke-dasharray:180;stroke-dashoffset:180;animation:fxdraw .45s .26s ease-out forwards, fxfade .45s .85s forwards}
.fxl .d2{animation-delay:.36s,.95s}
.fxl .spray{opacity:0;animation:fxspray .7s .32s ease-out forwards}
.fxl .burst{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:fxburst .7s calc(.26s + var(--d,0s)) ease-out forwards}
.fxl .flick{opacity:0;animation:fxflick .55s .26s steps(1) forwards}
.fxl .f2{animation-delay:.32s}
.fxl .spin{transform-origin:50px 50px;opacity:0;animation:fxspin .85s .24s ease-out forwards}
.fxl .ringx{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:fxring .75s calc(.26s + var(--d,0s)) ease-out forwards}
.fxl .flutter{opacity:0;animation:fxflutter 1.1s calc(.26s + var(--d,0s)) ease-out forwards}
.fxl .drift{opacity:0;filter:blur(3px);animation:fxdrift 1s calc(.22s + var(--d,0s)) ease-out forwards}
.fxl .slice{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:fxslice .6s calc(.26s + var(--d,0s)) ease-out forwards}
.fxl.aura{top:36px;width:140px;height:140px;margin:-70px 0 0 -70px;opacity:.9}
.fxl.aura *{animation-delay:.05s!important}
@keyframes fxdraw{to{stroke-dashoffset:0}}
@keyframes fxfade{to{opacity:0}}
@keyframes fxspray{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes fxburst{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.3) translateY(-10px)}}
@keyframes fxflick{0%{opacity:1}15%{opacity:.15}30%{opacity:1}50%{opacity:.3}65%{opacity:1}100%{opacity:0}}
@keyframes fxspin{0%{opacity:0;transform:scale(.3) rotate(-60deg)}40%{opacity:1;transform:scale(1.05) rotate(0)}100%{opacity:0;transform:scale(1.3) rotate(30deg)}}
@keyframes fxring{0%{opacity:1;transform:scale(.25)}100%{opacity:0;transform:scale(1.5)}}
@keyframes fxflutter{0%{opacity:0;transform:translateY(10px) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@keyframes fxdrift{0%{opacity:0;transform:translateX(-16px)}40%{opacity:.85}100%{opacity:0;transform:translateX(18px)}}
@keyframes fxslice{0%{opacity:0;transform:translateX(-30px) rotate(-30deg)}40%{opacity:1}100%{opacity:0;transform:translateX(30px) rotate(10deg)}}
/* group attacks: one attacker, a row of targets hit together */
.stage.group{height:auto;min-height:104px;gap:18px;padding:6px 0}
.st-targets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;max-width:220px}
.stage.group .st-targets .gl.stg{width:46px;height:56px;font-size:1.5rem}
.stage.group .st-targets .fxl{top:28px;width:90px;height:90px;margin:-45px 0 0 -45px}
.stage.group .st-on .pop{font-size:.95rem}
.stage.group .st-on.koed{animation:recoil .45s .2s ease-out, topple .7s .55s cubic-bezier(.5,0,.75,1) forwards}
.stage.group.rev .st-on.koed{animation:recoil-l .45s .2s ease-out, topple-l .7s .55s cubic-bezier(.5,0,.75,1) forwards}
.stage.group .st-on.missed{animation:dodge .6s .25s ease-in-out}
.stage.group .st-on .pop:not(.dmg){color:var(--muted);font-size:.75rem}
.glines{display:flex;flex-direction:column;gap:2px;font-size:.86rem}
@media (prefers-reduced-motion:reduce){.fxl{display:none}}
/* artwork: faint picture behind battle tiles, wide banner on detail cards */
.fighter{position:relative}
.fighter > *{position:relative}
.tile.hasart::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--art) 70% 22%/cover no-repeat;opacity:.09;pointer-events:none;
  mask-image:linear-gradient(to left,#000 10%,transparent 85%);-webkit-mask-image:linear-gradient(to left,#000 10%,transparent 85%)}
.tile.dead.hasart::before{opacity:.06}
.tile > *{position:relative}
.mbanner{margin:-20px -18px 0;height:150px;border-radius:18px 18px 0 0;overflow:hidden;position:relative}
.mbanner img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.mbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(35,32,27,0) 40%,var(--surface) 100%)}
.mbanner + .shead{margin-top:-46px;position:relative;z-index:1}
.mbanner + .shead .gl.lg{box-shadow:0 0 0 3px var(--surface),0 6px 16px rgba(0,0,0,.5)}
/* main menu: art strip and mode cards */
@keyframes marquee{to{transform:translateX(-50%)}}
.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mode .mk{transition:transform .2s}
.mode.on .mk{transform:scale(1.12)}
@media (min-width:520px){.modes{grid-template-columns:repeat(4,1fr)}}
/* online: create / join, lobby, waiting for the other phone */
.onlinebox{display:flex;flex-direction:column;gap:10px}
.joinrow{display:flex;gap:8px}
.joinrow input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.35em;font-weight:800;text-align:center;font-size:1.1rem}
.onlinemsg{color:var(--accent)}
.lobby{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:24px 0}
.roomcode{font-family:var(--display);font-weight:800;font-size:3.4rem;letter-spacing:.25em;color:var(--fg);background:var(--surface);border:1.5px dashed var(--line-2);border-radius:16px;padding:6px 18px 6px 30px}
.lobbyteams{display:flex;gap:14px;align-items:center;font-family:var(--display);font-weight:800;font-size:1.2rem}
.waiting{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 0;text-align:center}
.dots{display:flex;gap:8px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:dotpulse 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s}
@keyframes dotpulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.7}}
.mode{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 10px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;color:inherit;font:inherit;transition:border-color .15s,transform .15s}
.mode .mk{font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--accent);margin-bottom:4px}
.mode b{font-size:.92rem}
.mode small{font-size:.7rem;color:var(--muted);line-height:1.25}
.mode.on{border-color:var(--paper);background:var(--surface-2);box-shadow:0 0 0 1px var(--paper) inset}
.mode:active{transform:scale(.98)}
/* playback: slim team rows so the fight stage is the focus */
.mini{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:2px 0}
.mini .m{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.42;transition:opacity .25s,transform .25s}
.mini .m.inv{opacity:1;transform:scale(1.1)}
.mini .gl.mini{width:40px;height:40px;border-radius:50%;font-size:1.1rem;box-shadow:0 0 0 2px var(--tc)}
.mini .m.inv .gl.mini{box-shadow:0 0 0 2px var(--tc),0 0 14px var(--tc)}
.mini .mb{display:block;width:40px;height:3px;border-radius:2px;background:var(--bg-2);overflow:hidden}
.mini .mb i{display:block;height:100%;background:var(--hp)}
.mini .mb i.drain{animation:drain .6s ease-out}
.mini .mb.low i{background:var(--low)}
.mini .m.dead{opacity:.3}
.mini .m.dead .gl.mini{filter:grayscale(1);transform:rotate(90deg) scale(.85);box-shadow:none}
.mini .m.hit .gl.mini{animation:hit .45s ease-out}
.mini .m.heal .gl.mini{animation:healglow 1s ease-out}
.mini .m.ko .gl.mini{animation:tipover .7s .2s cubic-bezier(.5,0,.75,1) both}
/* the stage is bigger while it's the main thing on screen */
.now .stage{height:130px}
.now .gl.stg{width:76px;height:92px;font-size:2.6rem;border-radius:10px}
.now .stage .fxl{top:46px}
.now .stage.group{height:auto;min-height:130px}
.now .stage.group .st-targets .gl.stg{width:54px;height:66px;font-size:1.7rem}
.now .stage.group .st-targets{max-width:260px;gap:8px}
.now .stage.group{gap:14px}
.now .stage.group .st-targets .fxl{top:33px}
.now{padding:14px}
/* back-pocket helpers: a slim optional row at the bottom of the draft, and a chip by "Lock in moves" in battle */
.pocket{margin-top:6px;padding-top:12px;border-top:1px dashed var(--line-2)}
.pocketrow{display:flex;flex-wrap:wrap;gap:6px}
.hchip{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;background:transparent;border:1px dashed var(--line-2);border-radius:999px;color:inherit;font:inherit;text-align:left}
.hchip span{display:flex;flex-direction:column;line-height:1.15}
.hchip b{font-size:.76rem} .hchip small{font-size:.64rem;color:var(--muted)}
.hchip .gl.pip,.pchip .gl.pip{width:24px;height:28px;font-size:.8rem;border-radius:999px}
.hchip.off{opacity:.35;cursor:not-allowed}
.hchip.owned{border-style:solid;border-color:var(--tc);opacity:1}
.hchip.owned small{color:var(--tc);font-weight:700}
.hchip.sel{outline:2px solid var(--accent)}
.pchip{flex:none;display:flex;align-items:center;gap:7px;max-width:46%;padding:6px 12px 6px 6px;background:var(--surface);border:1.5px dashed var(--line-2);border-radius:999px;color:inherit;font:inherit;text-align:left;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.pchip span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pchip b{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pchip small{font-size:.62rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pchip.on{border-style:solid;border-color:var(--gold);background:var(--surface-2)}
.pchip.on b{color:var(--gold)}
/* back-pocket helpers */
.pocket{display:flex;flex-direction:column;gap:8px}
.pockethead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:.76rem}
.hcard,.huse{position:relative;display:flex;align-items:center;gap:8px;text-align:left;background:var(--surface);border:1px dashed var(--line-2);border-radius:10px;padding:8px;color:inherit;font:inherit;min-width:0}
.hcard.off{opacity:.35;cursor:not-allowed}
.hcard.sel{outline:2px solid var(--accent)}
.hcard .tag{position:absolute;right:6px;top:-9px;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:4px;color:var(--btn-fg)}
.hb{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.hb b{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb small{font-size:.68rem;color:var(--muted)}
.pocketuse{display:flex;flex-direction:column;gap:6px}
.huse{width:100%}
.huse .hb{flex:1}
.hgo{font-size:.78rem;font-weight:800;color:var(--accent);border:1px solid rgba(224,87,59,.5);border-radius:999px;padding:3px 10px}
.huse.on{border-style:solid;border-color:var(--gold);background:var(--surface-2)}
.huse.on .hgo{color:var(--btn-fg);background:var(--gold);border-color:var(--gold)}
.slot.helper,.slots .gl.xs.helperpip{opacity:.8}
/* crow report */
.crow{background:var(--bg-2);border:1px solid var(--line-2);border-left:3px solid var(--gold);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.crowhead{display:flex;align-items:center;gap:8px}
.crowhead .muted{font-size:.78rem}
.crowline{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-2)}
.crowline .gl.pip{width:16px;height:20px;font-size:.6rem;border-radius:3px}
.crowline b{color:var(--fg)}
.stage.helperfx .st-on .gl{animation:charge 1s ease-out}
/* special quote on the fight stage */
.now .quote{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--fg);animation:dropin .4s .35s ease-out both}
/* match MVP and awards on the win screen */
.mvp{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;animation:popin .5s 1.1s ease-out both}
.mvpmain{display:flex;gap:12px;align-items:center}
.mvpmain .tlabel{color:var(--gold)}
.mvpname{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--tc)}
.awards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.award{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-2);background:var(--bg-2);border-radius:8px;padding:5px 8px}
.award b{color:var(--fg);margin-right:2px}
/* story map */
.stages{display:flex;flex-direction:column;gap:10px}
.stagecard{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:12px;color:inherit;font:inherit;width:100%}
.stagecard.clear{border-left-color:var(--p1)}
.stagecard.locked{opacity:.45;border-left-color:var(--line-2);cursor:not-allowed}
.stagecard:not(.locked):active{transform:scale(.99)}
.snum{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.1rem;background:var(--accent);color:#fff8ee}
.stagecard.clear .snum{background:var(--p1);color:var(--btn-fg)}
.stagecard.locked .snum{background:var(--bg-2);font-size:.9rem}
.sinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.stitle{font-family:var(--display);font-weight:800;font-size:1.1rem}
.splace{font-size:.76rem;color:var(--accent);font-weight:700}
.sblurb{font-size:.82rem;color:var(--ink-2)}
.sfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.sseals{display:flex;gap:3px}
.smeta{font-size:.74rem;color:var(--muted);font-weight:700;white-space:nowrap}
.stagecard.flash{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(214,165,77,.08),var(--surface) 40%)}
.stagecard.flash .snum{background:var(--gold);color:#1a1714}
.archead{display:flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--ink-2);letter-spacing:.02em}
.archead:first-child{margin-top:0}
.arcg{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--bg-2);color:var(--accent);font-size:.95rem}
.stwist{align-self:flex-start;font-size:.72rem;font-weight:800;color:var(--gold);border:1px solid rgba(214,165,77,.5);background:rgba(214,165,77,.08);border-radius:999px;padding:2px 8px}
.sseals{align-items:center;flex-wrap:wrap}
.stags{display:flex;flex-wrap:wrap;gap:5px}
.stwist.foe{color:#ff8a76;border-color:rgba(224,87,59,.5);background:rgba(224,87,59,.08)}
.stwist.ally{color:var(--p1);border-color:rgba(82,179,136,.5);background:rgba(82,179,136,.08)}
.svs{font-size:.7rem;font-weight:800;color:var(--muted);margin:0 4px}
.sbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.goal{align-self:flex-start;font-size:.78rem;font-weight:800;color:var(--gold);border:1px solid rgba(214,165,77,.5);background:rgba(214,165,77,.08);border-radius:999px;padding:3px 10px;margin:-4px 0 8px}
/* story scene: one line at a time over the arc's colours and kanji */
.scene{position:relative;min-height:calc(100vh - 40px);min-height:calc(100dvh - 40px);display:flex;flex-direction:column;justify-content:flex-start;gap:16px;
  padding:16px;border-radius:18px;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;
  background:radial-gradient(120% 80% at 50% 0%,var(--sc1,#3a2a22),var(--bg-2) 70%)}
.scenetop{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 12px}
.scenetop>div{flex:1;display:flex;flex-direction:column;gap:2px}
.scenetop .title{font-family:var(--display);font-weight:800;font-size:1.5rem}
.sceneline{position:relative;margin-top:auto;display:flex;flex-direction:column;gap:12px;background:rgba(18,16,14,.78);border:1px solid var(--line-2);border-radius:16px;padding:16px;animation:scenein .35s ease-out}
.sceneline.narr p{font-style:italic;color:var(--ink-2)}
.sceneline p{margin:0;font-size:1.08rem;line-height:1.5}
.speaker{display:flex;align-items:flex-end;gap:12px}
.speaker .gl.lg{width:88px;height:106px;font-size:2.8rem;border-radius:12px}
.speaker .sname{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--gold)}
.scenefoot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.8rem}
.scenefoot .dots{display:flex;gap:6px}
.scenefoot .dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.scenefoot .dots i.on{background:var(--gold)}
@keyframes scenein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.sceneline{animation:none}}
.arc-prologue{--sc1:#2c3a33;--sc2:#7fb39a}
.arc-asakusa{--sc1:#3a2a36;--sc2:#c88bb5}
.arc-flashback{--sc1:#3d321d;--sc2:#d6a54d}
.arc-tsuzumi{--sc1:#3a2c22;--sc2:#c9915d}
.arc-natagumo{--sc1:#262c3a;--sc2:#9aa6d8}
.arc-mugen{--sc1:#3a2626;--sc2:#e0573b}
.arc-district{--sc1:#3a2233;--sc2:#e07bb2}
.arc-swordsmith{--sc1:#233534;--sc2:#6fc2b8}
.arc-castle{--sc1:#2a2238;--sc2:#a88be0}
.arc-dawn{--sc1:#3d2a1a;--sc2:#f0a24a}
.dealt .undo{margin-left:auto}
/* tap a picture in battle for the fighter's info card */
.sealbtn{flex:none;padding:0;background:none;border-radius:6px;line-height:0;transition:transform .12s}
.sealbtn:active{transform:scale(.93)}
.sealbtn:focus-visible{outline-offset:1px}
.tilebtn{flex:1;min-width:0;display:block;padding:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:6px}
.modal .in.info .ihp{display:flex;flex-direction:column;gap:5px}
.modal .in.info .ihp .un{display:none}
.modal .in.info .ihp .hp{font-size:1.1rem}
.modal .in.info .stats span{font-size:1.05rem}
/* two players: both locked in, waiting for "Start the battle" */
.pass.ready .big{color:var(--fg)}
.rvs{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.rteam{display:flex;flex-direction:column;align-items:center;gap:6px;animation:popin .45s ease-out both}
.rteam:last-child{animation-delay:.15s}
.rname{font-family:var(--display);font-weight:800;color:var(--tc);font-size:1.1rem}
.rseals{display:flex;gap:4px}
.rx{font-family:var(--display);font-weight:800;color:var(--accent);letter-spacing:.2em;animation:pulse 1.4s ease-in-out infinite}
.pass.ready .btn{animation:pulse 1.8s ease-in-out infinite}
/* playback intro: "Round 2 · Fight!" */
.now.intro{min-height:150px;gap:2px;border-color:rgba(224,87,59,.5)}
.now.intro .ir{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);animation:dropin .5s ease-out both}
.now.intro .ig{font-family:var(--display);font-weight:800;font-size:3rem;line-height:1;color:var(--accent);text-shadow:0 0 26px rgba(224,87,59,.6);animation:zoomin .6s .25s cubic-bezier(.2,1.6,.4,1) both}
/* slash streak and impact ring on hits */
.stage.fx-hit .st-on::after,.stage.fx-ko .st-on::after{content:"";position:absolute;left:-30%;top:34%;width:160%;height:4px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#fff 45%,#ffd2c8 55%,transparent);transform:rotate(-32deg) scaleX(0);animation:streak .35s .28s ease-out both;z-index:4}
.stage.fx-hit .st-on::before,.stage.fx-ko .st-on::before,.stage.fx-special .st-by::before,.stage.fx-heal .st-on::before,.stage.fx-revive .st-on::before{
  content:"";position:absolute;left:50%;top:36px;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:3px solid var(--accent);opacity:0;animation:ring .6s .3s ease-out both;z-index:1}
.stage.fx-special .st-by::before{border-color:var(--gold);animation:ring .8s .05s ease-out both, ring .8s .45s ease-out both}
.stage.fx-heal .st-on::before,.stage.fx-revive .st-on::before{border-color:#5fd39a;animation-delay:.2s}
/* big hits and knockouts shake the stage; knockouts flash red */
.now.big{animation:quake .5s .32s ease-out}
.now.big.k{animation:quake .55s .32s ease-out, koflash .9s .3s ease-out}
.now.big .pop{font-size:1.5rem}
.sbar i.drain{animation:drain .7s ease-out}
/* victory */
.win{position:relative}
.win.victory .burst{position:absolute;left:50%;top:44%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:4px solid var(--wc);opacity:0;animation:ring 1.2s .2s ease-out both, ring 1.2s .7s ease-out both;pointer-events:none}
.win .big{animation:zoomin .7s .35s cubic-bezier(.2,1.6,.4,1) both}
.winseals{display:flex;gap:8px;justify-content:center;margin-bottom:6px}
.winseals span{animation:popin .5s calc(.5s + var(--i)*.12s) cubic-bezier(.2,1.5,.4,1) both}
.overteams{display:flex;flex-direction:column;gap:18px}
.overteams .tile{animation:popin .4s calc(.9s + var(--i)*.07s) ease-out both}
@keyframes streak{0%{transform:rotate(-32deg) scaleX(0);opacity:1}60%{transform:rotate(-32deg) scaleX(1);opacity:1}100%{transform:rotate(-32deg) scaleX(1.05);opacity:0}}
@keyframes ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.1)}}
@keyframes quake{0%,100%{transform:none}15%{transform:translate(-6px,2px)}30%{transform:translate(6px,-2px)}45%{transform:translate(-4px,1px)}60%{transform:translate(4px,-1px)}80%{transform:translate(-2px,0)}}
@keyframes koflash{0%{box-shadow:inset 0 0 0 0 rgba(255,93,76,0)}25%{box-shadow:inset 0 0 60px 10px rgba(255,93,76,.45)}100%{box-shadow:inset 0 0 0 0 rgba(255,93,76,0)}}
@keyframes zoomin{0%{opacity:0;transform:scale(2.4)}100%{opacity:1;transform:none}}
@keyframes dropin{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:none}}
@keyframes popin{0%{opacity:0;transform:scale(.6) translateY(10px)}100%{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:none}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.now.big,.now.intro *,.win *,.win .burst,.rteam,.rx,.pass.ready .btn,.overteams .tile,.sbar i.drain{animation:none!important}}
@media (prefers-reduced-motion:reduce){.tile.targetable,.tile.acting,.tile.spawn,.tile.hit,.tile.heal,.tile.ko,.bar i.drain,.now,.modal .in,.scrim{animation:none}}

/* your fighters while choosing moves */
.fighters{display:flex;flex-direction:column;gap:8px}
.fighter{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--tc);border-radius:10px;transition:border-color .15s}
.fighter.open{background:var(--surface-2);border-color:var(--line-2);border-left-color:var(--tc);box-shadow:0 0 0 1px var(--paper) inset,var(--shadow)}
.fhead{display:flex;gap:10px;align-items:flex-start;padding:10px}
.fmain{flex:1;min-width:0;text-align:left;background:transparent;padding:0}
.fmain:disabled{cursor:default;opacity:.6}
.sum{display:block;font-size:.82rem;color:var(--muted)}
.sum.ok{color:var(--p1);font-weight:700}
.fmain:disabled .sum{color:var(--muted)}
.fbody{padding:0 10px 12px;display:flex;flex-direction:column;gap:9px}
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.moves button{background:var(--bg-2);border:1.5px solid var(--line);padding:9px 4px 10px;font-weight:700;font-size:.92rem;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.moves .mk{font-family:var(--display);font-size:1.45rem;line-height:1.1;color:var(--accent)}
.moves button.on .mk{color:#b8331b}
.moves .spn{font-size:.78rem;line-height:1.15}
.moves button{min-height:74px;justify-content:center}
.moves small .cdn{color:var(--accent);font-weight:700}
.targets .tlabel{align-self:center;margin-right:2px}
.aimx{color:var(--accent);font-size:.8rem;line-height:1}
.ibonus{display:flex;flex-direction:column;gap:6px}
.side{gap:10px}
.fbody{gap:10px}
.moves small.cdn{color:var(--accent);font-weight:700}
.moves button small{font-size:.68rem;font-weight:500;color:var(--muted)}
.moves button.on{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.moves button.on small{color:#5c5246}
.moves button:disabled{opacity:.35;cursor:not-allowed}
.hint{font-size:.8rem;color:var(--ink-2)}
.hint b{color:var(--accent)}
.targets{display:flex;gap:6px;flex-wrap:wrap}
.tg{display:flex;align-items:center;gap:7px;background:var(--bg-2);border:1.5px solid var(--line);padding:5px 10px 5px 5px;font-size:.84rem;font-weight:700}
.tg span:last-child{font-variant-numeric:tabular-nums;color:var(--muted)}
.tg .lo{color:var(--low)!important}
.tg.on{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.tg.on span:last-child{color:#5c5246}
.tg.on .lo{color:#c0271a!important}
.tg.on .gl{background:var(--btn-fg);color:var(--paper)}

/* pass the phone: darkest screen so the other player's moves stay hidden */
.pass{min-height:62vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:32px 20px;position:relative;overflow:hidden}
.pass::before{content:"";position:absolute;top:0;left:0;right:0;height:10px;background:var(--check)}
.pass .big{font-family:var(--display);font-size:2.6rem;font-weight:800;line-height:1.1}

/* results, game over */
.log{display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.log div{padding:6px 10px;border-radius:4px 8px 8px 4px;background:var(--bg-2);border-left:3px solid var(--line-2);color:var(--ink-2)}
.log b{font-variant-numeric:tabular-nums;color:var(--fg)}
.log .k{border-left-color:var(--low);color:#ff9488}
.log .k b{color:#ffb3aa}
.log .h{border-left-color:var(--p1);color:#8fd3b2}
.log .x{border-left-color:var(--gold);color:var(--gold);font-weight:700}
.win{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;padding:24px 0 8px}
.win .big{font-family:var(--display);font-size:2.9rem;font-weight:800;line-height:1.05}

/* ---------- 2–4 players ---------- */
.teams.many{grid-template-columns:1fr 1fr}
.overteams.many{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.overteams.many{grid-template-columns:1fr 1fr}}
.strength.multi .sl{flex-wrap:wrap;justify-content:flex-start;gap:2px 14px}
.modepanel{gap:14px}
.setline{display:flex;flex-direction:column;gap:6px}
.names{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pname{min-width:0}
.pname span{color:var(--tc);font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
.pname input{border-left:3px solid var(--tc)}
.subset{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg-2)}
.subset summary{cursor:pointer;font-weight:700;font-size:.88rem}
.subset[open]{display:flex;flex-direction:column;gap:12px}
.storyhead{display:flex;gap:14px;align-items:center}
.sprog{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--gold) calc(var(--won,0)*1%),var(--bg-2) 0);border:1px solid var(--line-2)}
.sprog b{font-family:var(--display);font-size:1.6rem;line-height:1}
.sprog span{font-size:.62rem;color:var(--muted);max-width:60px;line-height:1.1}
.seats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:420px}
.seat{display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;border:1.5px dashed var(--line-2);color:var(--muted);text-align:left}
.seat.on{border-style:solid;border-color:var(--tc);color:var(--fg);background:var(--surface)}
.seat .sn{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-weight:800;font-size:.8rem;background:var(--bg-2);color:var(--tc)}
.seat.on .sn{background:var(--tc);color:#16130f}
.seat b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat small{font-size:.66rem;color:var(--muted)}
.places{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px}
.place{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--tc);color:var(--tc);font-weight:700;font-size:.85rem}
.place b{font-family:var(--display)}
.crowteam{font-weight:800;font-size:.78rem;margin-top:6px}
.aimhint{margin:-4px 0 0}
/* ---------- story scenes ---------- */
.scene .splace{font-size:.76rem;color:var(--sc2,var(--accent));font-weight:700}
.lbox{position:absolute;left:0;right:0;height:14px;background:#000;z-index:2;pointer-events:none}
.lbox.t{top:0;border-radius:18px 18px 0 0}.lbox.b{bottom:0;border-radius:0 0 18px 18px}
.scenetop{z-index:3;padding-top:8px}
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.particles i{position:absolute;left:var(--x);top:-10%;width:6px;height:6px;border-radius:50%;background:var(--sc2);opacity:.5;
  transform:scale(var(--s));animation:fall 7s linear infinite;animation-delay:calc(var(--d)*-1)}
.p-snow i{background:#f3efe8;opacity:.55}
.p-petal i{width:9px;height:6px;border-radius:60% 0 60% 0;background:#f2a6c8;opacity:.6}
.p-leaf i{width:9px;height:5px;border-radius:60% 0 60% 0;background:#7fc79a;opacity:.5}
.p-ember i{background:#ff9b4a;box-shadow:0 0 6px #ff7a2a;opacity:.7;top:auto;bottom:-10%;animation-name:rise}
.p-thread i{width:1px;height:46px;border-radius:0;background:linear-gradient(transparent,#dfe3f3,transparent);opacity:.35}
.p-dust i{width:3px;height:3px;opacity:.35}
@keyframes fall{to{transform:translate(30px,115vh) rotate(260deg) scale(var(--s))}}
@keyframes rise{to{transform:translate(-24px,-115vh) scale(var(--s))}}
.stagecast{position:relative;flex:1;min-height:220px;display:flex;align-items:flex-end;justify-content:center}
.stagecast .gl.lg{width:150px;height:186px;font-size:4.5rem;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.stagecast .lead{position:absolute;bottom:0;animation:enter .45s cubic-bezier(.2,.8,.2,1)}
.stagecast .lead.l{left:8%}.stagecast .lead.r{right:8%}.stagecast .lead.n{display:none}
.stagecast .extra{position:absolute;bottom:26px;opacity:.28;filter:grayscale(.5) blur(.5px);transform:scale(.8)}
.stagecast .extra.l{left:2%}.stagecast .extra.r{right:2%}
@keyframes enter{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.sceneline{z-index:3}
.sceneline.l{border-left:4px solid var(--p1)}.sceneline.r{border-right:4px solid var(--accent);text-align:right}
.sceneline.n{text-align:center;background:rgba(18,16,14,.55)}
.sceneline.n p{font-style:italic;color:var(--ink-2)}
.sceneline .sname{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--gold)}
.typed span{opacity:0;animation:type .01s linear forwards;animation-delay:calc(var(--i)*28ms)}
@keyframes type{to{opacity:1}}
.scenefoot{z-index:3;padding-bottom:10px}
.scenefoot .dots i.done{background:var(--ink-2)}
.vscard{justify-content:flex-start;align-items:stretch;cursor:default}
.vscard .vsrow.l{margin-top:auto}
.vscard .btn.big{margin-bottom:auto}
.vsrow{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.vsc{display:flex;flex-direction:column;align-items:center;gap:4px;animation:enter .5s both}
.vsc .gl.lg{width:84px;height:104px;font-size:2.6rem;border-radius:12px}
.vsrow.r .vsc .gl{box-shadow:0 0 0 2px var(--accent)}
.vsrow.l .vsc .gl{box-shadow:0 0 0 2px var(--p1)}
.vsc small{font-size:.72rem;font-weight:700}
.vsmid{position:relative;z-index:3;display:grid;place-items:center}
.vsmid span{font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--gold);letter-spacing:.06em;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
.vscard .stags{position:relative;z-index:3;justify-content:center}
.vscard .btn.big{position:relative;z-index:3;align-self:center;min-width:200px;font-size:1.1rem}
@media (prefers-reduced-motion: reduce){.particles,.typed span,.stagecast .lead,.vsc,.vsmid span{animation:none!important;opacity:1}}

/* free-for-all move screen: opponents three to a row, so your own team stays in view */
.opps{display:flex;flex-direction:column;gap:10px}
.opps.many .side{gap:6px}
.opps .tiles.simple{grid-template-columns:repeat(3,1fr);gap:6px}
.opps .tiles.simple .tile{padding:6px}
.opps .tiles.simple .nm{font-size:.78rem}
.opps.many .sidehead .tname{font-size:1rem}
.opps .tiles .tile .gl{width:30px;height:36px;font-size:1rem;border-radius:6px}
.opps .tiles.simple .hprow{gap:4px}
.opps .tiles.simple .bar{min-width:24px}
.opps .tiles.simple .hp{font-size:.72rem}


/* story win: newly unlocked characters */
.unlocked{display:flex;flex-direction:column;gap:8px;align-items:center;padding:14px;border:1.5px solid var(--gold);border-radius:16px;background:linear-gradient(180deg,rgba(214,165,77,.14),transparent)}
.unlocked .tlabel{color:var(--gold)}
.ulist{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ucard{display:flex;flex-direction:column;align-items:center;gap:4px;animation:enter .5s both;animation-delay:calc(var(--i)*.15s + .4s)}
.ucard .gl.lg{width:72px;height:88px;font-size:2.2rem;border-radius:12px;box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(214,165,77,.45)}
.ucard b{font-size:.78rem}

/* bans */
.tag.banned{background:#5a2420;color:#ffd9d2}
.btn.banbtn{--bc:var(--accent)!important;background:var(--accent);color:#fff8ee}

.tside{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:0 6px;margin-left:4px}

/* daily challenge */
.daily{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1.5px solid var(--gold);background:linear-gradient(120deg,rgba(214,165,77,.16),var(--surface) 60%)}
.daily.done{border-color:var(--line-2);background:var(--surface)}
.daily.loading{border-style:dashed;border-color:var(--line-2);background:var(--surface)}
.daily .dk{flex:none;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--gold);color:#1a1714;font-weight:800;font-size:1.3rem}
.daily.done .dk{background:var(--bg-2);color:var(--muted)}
.dbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dgoal{font-family:var(--display);font-weight:800;font-size:1.02rem}
.dsq{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.dres{font-weight:800;color:var(--low)}
.dres.ok{color:var(--gold)}

/* codex */
.setbar{gap:8px}
.grid.codex .card.locked .cart{filter:grayscale(1) brightness(.45)}
.grid.codex .card.locked .cbody{opacity:.6}
.lockbadge{position:absolute;left:8px;top:8px;z-index:3;font-size:1rem;filter:drop-shadow(0 2px 4px #000)}
.crec{position:absolute;right:8px;bottom:8px;font-size:.62rem;font-weight:800;color:var(--muted)}
.lockline{padding:10px 12px;border-radius:12px;border:1px dashed var(--gold);color:var(--ink-2);font-size:.86rem}

/* special-move cut-in */
.now.cut{padding:0;overflow:hidden;min-height:190px;border-color:var(--tc,var(--line-2))}
.cutin{position:relative;height:190px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(120% 120% at 20% 50%,color-mix(in srgb,var(--sc,var(--gold)) 30%,transparent),transparent 70%)}
.cutin .lines{position:absolute;inset:-20%;background:repeating-linear-gradient(-12deg,transparent 0 14px,rgba(255,255,255,.07) 14px 16px);animation:zoomlines .5s linear infinite}
@keyframes zoomlines{to{transform:translateX(-30px)}}
.cutin .band{position:relative;z-index:2;display:flex;align-items:center;gap:14px;width:112%;margin-left:-6%;padding:12px 12% 12px 9%;
  background:linear-gradient(90deg,rgba(10,9,8,.92),rgba(10,9,8,.75));clip-path:polygon(0 18%,100% 0,100% 82%,0 100%);
  border-top:3px solid var(--tc);animation:bandin .45s cubic-bezier(.2,.9,.2,1) both}
.cutin.right .band{flex-direction:row-reverse;text-align:right;padding:12px 9% 12px 12%;animation-name:bandinr}
@keyframes bandin{from{transform:translateX(-110%)}to{transform:none}}
@keyframes bandinr{from{transform:translateX(110%)}to{transform:none}}
.cutin .cimg{flex:none;width:118px;height:140px;border-radius:12px;overflow:hidden;background:var(--bg-2);box-shadow:0 0 0 3px var(--tc),0 10px 30px rgba(0,0,0,.6);animation:imgpop .6s .15s cubic-bezier(.2,1.4,.3,1) both}
.cutin .cimg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.cutin .cimg .ck{display:grid;place-items:center;height:100%;font-size:3.4rem}
@keyframes imgpop{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.cutin .ctext{display:flex;flex-direction:column;gap:3px;min-width:0}
.cutin .cwho{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cutin .cmove{font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.1;color:var(--fg);text-shadow:0 2px 0 rgba(0,0,0,.6);animation:enter .4s .25s both}
.cutin .cquote{font-style:italic;color:var(--ink-2);font-size:.86rem;animation:enter .4s .45s both}
.cutin .ckanji{position:absolute;z-index:1;right:4%;bottom:-18px;font-size:150px;line-height:1;font-weight:800;color:var(--sc,var(--gold));opacity:.22;animation:kpop .6s .1s both}
.cutin.right .ckanji{right:auto;left:4%}
@keyframes kpop{from{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.cutin *{animation:none!important}}

/* Local games on a tablet / wide landscape screen: opponents on the left, your team on the right.
   Elsewhere these wrappers don't affect the layout. */
.planwide,.reswide,.rcol{display:contents}
@media (orientation:landscape) and (min-width:820px){
  .localmode .wrap:has(.planwide),.localmode .wrap:has(.reswide.done){max-width:1100px}
  .localmode .planwide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
  .localmode .planwide .opps.many .tiles.simple{grid-template-columns:repeat(3,1fr)}
  .localmode .planwide .opps:not(.many) .tiles.simple{grid-template-columns:1fr 1fr}
  .localmode .reswide.done{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
  .localmode .reswide.done .rcol{display:flex;flex-direction:column;gap:14px}
  .localmode .reswide.done .vsdiv{display:none}
}

/* story: ending scene unlock reveal */
.unlockcard{cursor:pointer}
.unlocktitle{position:relative;z-index:3;margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.unlocktitle b{font-family:var(--display);font-size:1.9rem;color:var(--gold);animation:enter .5s both}
.unlockcard .ulist{position:relative;z-index:3}
.unlockcard .ucard small{font-size:.66rem;color:var(--muted);max-width:110px;text-align:center}
.unlockcard .ucard .gl.lg{width:96px;height:118px}
.ucap{position:relative;z-index:3;text-align:center}

/* ---------- texture: faint paper grain and brush-stroke underlines ---------- */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C30 4 60 3 95 5 S160 9 198 4 L197 8 C160 12 120 11 90 10 S30 12 3 12 Z' fill='black'/%3E%3C/svg%3E");
}
.panel{background:var(--grain),linear-gradient(180deg,var(--surface-2),var(--surface))}
.mode,.stagecard,.daily,.tbox,.fighter,.tile,.note,.crow{background-image:var(--grain)}
.modal .in{background-image:var(--grain)}
.scene{background-image:var(--grain),radial-gradient(120% 80% at 50% 0%,var(--sc1,#3a2a22),var(--bg-2) 70%)}
.hero h1,.top .title,.modal h2{position:relative;display:inline-block}
.hero h1::after,.top .title::after,.modal h2::after{content:'';position:absolute;left:-2px;bottom:-6px;height:7px;width:min(70%,180px);
  background:var(--accent);opacity:.85;-webkit-mask:var(--brush) no-repeat center/100% 100%;mask:var(--brush) no-repeat center/100% 100%;pointer-events:none}
.top .title::after{height:5px;bottom:-4px;width:min(55%,140px);opacity:.7}
.modal h2::after{height:5px;bottom:-5px;opacity:.75}
/* ---------- mode cards: faint character art fading in from the right ---------- */
.mode{position:relative;overflow:hidden;isolation:isolate}
.mode .mart{position:absolute;inset:0 0 0 auto;width:62%;display:flex;justify-content:flex-end;z-index:-1;opacity:.32;transition:opacity .25s;
  -webkit-mask:linear-gradient(90deg,transparent,#000 60%);mask:linear-gradient(90deg,transparent,#000 60%)}
.mode .mart img{height:100%;width:100%;object-fit:cover;object-position:50% 18%;filter:saturate(.85)}
.mode .mart.n2 img{width:50%}
.mode.on .mart{opacity:.55}
.mode .mk,.mode b,.mode small{text-shadow:0 1px 6px rgba(0,0,0,.7)}
/* elements with their own gradient keep it, with the grain on top */
.daily{background:var(--grain),linear-gradient(120deg,rgba(214,165,77,.16),var(--surface) 60%)}
.daily.done,.daily.loading{background:var(--grain),var(--surface)}
.stagecard.flash{background:var(--grain),linear-gradient(90deg,rgba(214,165,77,.08),var(--surface) 40%)}

/* ---------- battle UI polish ---------- */
/* fighters still waiting for a move: one compact row (picture, name + %, chosen move, thin bar) */
.fighters .fighter:not(.open) .fhead{padding:7px 10px;align-items:center}
.fighters .fighter:not(.open) .fhead .gl{width:40px;height:40px;font-size:1.3rem}
.fighters .fighter:not(.open) .tb{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:4px}
.fighters .fighter:not(.open) .un{grid-column:1;grid-row:1;justify-content:flex-start;gap:8px}
.fighters .fighter:not(.open) .hp{font-size:.88rem}
.fighters .fighter:not(.open) .sum{grid-column:2;grid-row:1;text-align:right;font-size:.76rem;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fighters .fighter:not(.open) .bar{grid-column:1/-1;grid-row:2;height:5px}
/* enemies with their special ready glow; small status marks */
.tile.sready{box-shadow:0 0 0 1.5px rgba(214,165,77,.75),0 0 14px rgba(214,165,77,.25);animation:sglow 2.2s ease-in-out infinite}
@keyframes sglow{50%{box-shadow:0 0 0 1.5px rgba(214,165,77,.95),0 0 20px rgba(214,165,77,.4)}}
.smarks{display:flex;gap:3px;margin-top:2px}
.sm{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;font-size:.66rem;font-weight:800;line-height:1}
.sm.s{background:var(--gold);color:#1a1714}
.sm.b{background:rgba(255,93,76,.18);color:#ff8a76;border:1px solid rgba(255,93,76,.45)}
@media (prefers-reduced-motion: reduce){.tile.sready{animation:none}}
/* health bars in each team's colour (red at 25% or less, as before) */
.tile .bar i,.fighter .bar i{background:var(--tc,var(--hp))}
.mini .mb i{background:var(--tc,var(--hp))}
/* the bottom bar never covers the last fighter; a Lock button that isn't ready yet looks clearly unfinished */
.wrap:has(.actionbar){padding-bottom:190px}
.btn.team:disabled{opacity:1;background:transparent;color:var(--muted);border:1.5px dashed color-mix(in srgb,var(--bc) 60%,transparent);box-shadow:none}
.tile .bar.low i,.fighter .bar.low i{background:var(--low)}

/* the close × always sits above a card's picture banner, easy to see */
.modal .x{z-index:6;background:rgba(10,9,8,.72);color:var(--fg);border:1px solid var(--line-2);box-shadow:0 2px 10px rgba(0,0,0,.5);font-size:1.4rem}
.modal .x:hover{background:var(--surface-2)}

/* story: a line spoken mid-battle */
.now.saybeat{flex-direction:row;align-items:center;gap:14px;text-align:left;border-color:var(--tc);background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 14%,transparent),transparent 70%)}
.now.saybeat .gl.stg{flex:none;animation:enter .4s both}
.now.saybeat .sayn{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tc)}
.now.saybeat .sayq{display:block;font-family:var(--display);font-size:1.15rem;line-height:1.3;color:var(--fg);animation:enter .4s .1s both}
.log .say{font-style:italic;color:var(--ink-2)}

/* story: stars */
.stars{display:inline-flex;gap:1px;font-size:.9rem;line-height:1}
.stars i{font-style:normal;color:var(--line-2)}
.stars i.on{color:var(--gold);text-shadow:0 0 8px rgba(214,165,77,.5)}
.unlocktitle .stars{font-size:2.2rem;gap:6px}
.unlocktitle .stars i.on{animation:kpop .5s both}
.unlocktitle .stars i:nth-child(2){animation-delay:.2s}.unlocktitle .stars i:nth-child(3){animation-delay:.4s}
.goals{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--muted)}
.goals span.got{color:var(--gold)}
.vsgoals{position:relative;z-index:3;align-self:center;align-items:flex-start;background:rgba(10,9,8,.6);border:1px solid var(--line-2);border-radius:12px;padding:8px 12px}
.storytotals{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--muted);margin:-4px 0 6px}
.storytotals b{color:var(--fg)}
/* story: the drawn map, a winding path */
.path{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px 0 30px}
.path::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:repeating-linear-gradient(var(--line-2) 0 10px,transparent 10px 18px);border-radius:2px}
.parc{position:relative;z-index:1;align-self:center;display:flex;align-items:center;gap:8px;margin:14px 0 6px;padding:6px 14px 6px 6px;border-radius:999px;
  background:var(--grain),linear-gradient(90deg,var(--sc1,var(--surface)),var(--surface));border:1px solid var(--line-2);font-family:var(--display);font-weight:800;font-size:.92rem}
.parc .arcg{background:var(--sc2,var(--accent));color:#16130f}
.pnode{position:relative;z-index:1;display:grid;grid-template-columns:1fr 52px 1fr;align-items:center;gap:10px}
.pnode .pdot{grid-column:2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.15rem;
  background:var(--accent);color:#fff8ee;border:3px solid var(--bg);box-shadow:0 0 0 2px var(--accent),0 6px 16px rgba(0,0,0,.45)}
.pnode.clear .pdot{background:var(--p1);color:#10241a;box-shadow:0 0 0 2px var(--p1),0 6px 16px rgba(0,0,0,.45)}
.pnode.flash .pdot{background:var(--gold);color:#1a1714;box-shadow:0 0 0 2px var(--gold),0 6px 16px rgba(0,0,0,.45)}
.pnode.locked .pdot{background:var(--bg-2);color:var(--muted);box-shadow:0 0 0 2px var(--line-2);font-size:.9rem}
.pnode.sel .pdot{animation:pulse 1.6s ease-in-out infinite}
.pnode .plabel{grid-row:1;display:flex;flex-direction:column;gap:2px;background:transparent;padding:4px 2px;color:inherit;text-align:left;min-width:0}
.pnode.l .plabel{grid-column:3}
.pnode.r .plabel{grid-column:1;text-align:right;align-items:flex-end}
.pnode .plabel b{font-family:var(--display);font-size:1rem;line-height:1.15}
.pnode .plabel small{color:var(--muted);font-size:.74rem}
.pnode.locked .plabel{opacity:.45}
.pcard{grid-column:1/-1;display:flex;flex-direction:column;gap:7px;margin-top:4px;padding:12px;border-radius:14px;border:1px solid var(--line-2);border-left:4px solid var(--accent);
  background:var(--grain),var(--surface);animation:enter .3s both;text-align:left}
.pnode.clear .pcard{border-left-color:var(--p1)}
.pnode.flash .pcard{border-left-color:var(--gold)}

.dpts{font-weight:800;font-size:.8rem;color:var(--p1);border:1px solid rgba(82,179,136,.5);border-radius:999px;padding:1px 8px}

/* daily / story draft: the set enemy team, full cards you can tap to study */
.theirs{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.theirs .card.off{opacity:1;filter:none}
.theirs .card{border-color:rgba(139,156,240,.45)}

.popline{animation:enter .35s both}

/* compact opponents (move screen): small section header, three cards to a row */
.opps .side{gap:6px}
.opps .sidehead .tname{font-size:1rem}
.opps .tiles.simple .bar{height:6px}
.sm.txt{width:auto;padding:0 6px;font-size:.58rem;letter-spacing:.02em;white-space:nowrap}
.topbtns{display:flex;gap:6px;align-items:center}
.gearmini{padding:6px 10px;font-size:1rem}

/* story map: one chapter card per arc, a row per battle (enemies and unlock rewards always visible) */
.chapters{display:flex;flex-direction:column;gap:14px;padding-bottom:20px}
.chap{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line-2);background:var(--grain),linear-gradient(160deg,var(--sc1,var(--surface)) 0%,var(--surface) 55%)}
.chap::after{content:attr(data-k);}
.chaphead{display:flex;align-items:center;gap:10px;padding:12px 14px 6px}
.chapk{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--sc2,var(--accent));color:#16130f;font-weight:800;font-size:1.15rem}
.chaphead b{font-family:var(--display);font-size:1.15rem}
.chaprows{display:flex;flex-direction:column;padding:4px 8px 10px}
.srow{border-radius:12px;transition:background .15s}
.srow.sel{background:rgba(10,9,8,.35)}
.srowbtn{width:100%;display:flex;align-items:center;gap:10px;padding:8px 6px;background:transparent;color:inherit;text-align:left}
.srow .snum{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1rem;background:var(--accent);color:#fff8ee}
.srow.clear .snum{background:var(--p1);color:#10241a}
.srow.flash .snum{background:var(--gold);color:#1a1714}
.srow.locked .snum{background:var(--bg-2);color:var(--muted);font-size:.8rem}
.srow .sinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.srow .sinfo b{font-family:var(--display);font-size:.98rem;line-height:1.15}
.srow.locked .sinfo b{color:var(--ink-2)}
.sfaces{display:flex;align-items:center;gap:3px;flex-wrap:wrap;font-size:.72rem}
.sfaces .stars{margin-left:6px}
.gl.xs{width:24px;height:24px;font-size:.8rem;border-radius:6px}
.sunl{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.sunl small{font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.sunl span{display:flex;gap:2px;align-items:center}
.sunl .gl{box-shadow:0 0 0 1.5px var(--gold)}
.sunl i{font-style:normal;font-size:.68rem;color:var(--gold);font-weight:800;margin-left:2px}
.srow .pcard{margin:2px 6px 8px}
.unlpreview{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.unlpreview small{width:100%;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.unlpreview span{display:flex;align-items:center;gap:5px;font-size:.78rem}
.unlpreview .gl{box-shadow:0 0 0 1.5px var(--gold)}
.smarks{flex-wrap:wrap}

/* home: credit line and tagline */
.hero .credit{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--gold);opacity:.9;margin-top:6px}
.hero .tagline{font-size:1.02rem;color:var(--ink-2);margin-top:2px}
/* daily / story drafts: the set enemy team's box opens their cards */
.tbox.studybox{color:inherit;font:inherit;text-align:left;cursor:pointer;border-style:dashed}
.tbox.studybox .tn span:last-child{color:var(--p2);font-weight:800}
/* story map polish: arc art, progress, the current chapter, a timeline through the battles */
.chap{isolation:isolate}
.chapart{position:absolute;right:0;top:0;height:120px;width:55%;display:flex;justify-content:flex-end;z-index:-1;opacity:.28;
  -webkit-mask:linear-gradient(90deg,transparent,#000 70%),linear-gradient(#000 40%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 70%) intersect,linear-gradient(#000 40%,transparent)}
.chapart img{height:100%;width:100%;object-fit:cover;object-position:50% 20%}
.chaphead{padding:14px 14px 8px}
.chaphead b{font-size:1.25rem;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.chapprog{margin-left:auto;font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:rgba(10,9,8,.55);color:var(--muted);border:1px solid var(--line-2)}
.chap.current{border-color:var(--sc2,var(--accent));box-shadow:0 0 0 1px var(--sc2,var(--accent)),0 10px 30px rgba(0,0,0,.35)}
.chap.current .chapprog{color:#16130f;background:var(--sc2,var(--accent));border-color:transparent}
.chap.done .chapprog{color:var(--p1);border-color:rgba(82,179,136,.5)}
.chaprows{position:relative}
.chaprows::before{content:'';position:absolute;left:31px;top:14px;bottom:18px;width:2px;background:linear-gradient(var(--line-2),transparent);z-index:0}
.srow{position:relative;z-index:1}
.srow .snum{box-shadow:0 0 0 4px rgba(26,23,20,.9)}
.srow .sinfo b{font-size:1.02rem}
.srow .gl.xs{width:28px;height:28px}
.srow.locked .srowbtn{opacity:.82}
.srow:not(.locked) .srowbtn:hover{background:rgba(255,255,255,.03);border-radius:12px}

/* a mode's settings page: a faint art banner above the settings */
.modehero{position:relative;height:120px;border-radius:16px;overflow:hidden;display:flex;justify-content:flex-end;border:1px solid var(--line-2);background:var(--grain),var(--surface)}
.modehero img{height:100%;width:50%;object-fit:cover;object-position:50% 18%;opacity:.55;-webkit-mask:linear-gradient(90deg,transparent,#000 45%);mask:linear-gradient(90deg,transparent,#000 45%)}
.modehero .mk{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:3.6rem;font-weight:800;color:var(--accent);text-shadow:0 4px 16px rgba(0,0,0,.6)}
.modehero img{width:36%}
.modehero .mk{z-index:2}

/* home: story progress pie and continue button */
.storyhome{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--line-2);background:var(--grain),linear-gradient(120deg,rgba(224,87,59,.12),var(--surface) 60%)}
.storyhome .sprog{width:62px;height:62px}
.storyhome .sprog b{font-size:1.3rem}
.storyhome .sprog span{font-size:.58rem}
.shbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.shbody b{font-family:var(--display);font-size:1.02rem}
.shbody .muted{font-size:.78rem}
.sprog{background:radial-gradient(circle,var(--bg-2) 58%,transparent 59%),conic-gradient(var(--gold) calc(var(--won,0)*1%),var(--line) 0)}

/* daily challenge card, decorated */
.daily{position:relative;overflow:hidden;isolation:isolate;flex-direction:column;align-items:stretch;gap:8px;padding:14px;
  background:var(--grain),linear-gradient(125deg,rgba(214,165,77,.22),rgba(214,165,77,.05) 45%,var(--surface) 75%)}
.daily .dart{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:-1;opacity:.35;-webkit-mask:linear-gradient(90deg,transparent,#000 60%);mask:linear-gradient(90deg,transparent,#000 60%)}
.daily .dart img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.8)}
.daily .dtop{display:flex;flex-direction:row;align-items:center;gap:10px}
.daily .dk{width:38px;height:38px;font-size:1.2rem;box-shadow:0 0 0 2px rgba(214,165,77,.4),0 6px 14px rgba(0,0,0,.4)}
.dstreak{display:block;font-size:.74rem;font-weight:800;color:var(--gold)}
.daily .dgoal{font-size:1.2rem;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.dfoot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.daily .dsq .gl.sm{width:34px;height:34px;box-shadow:0 0 0 1.5px var(--p2)}
.daily.done{background:var(--grain),var(--surface)}
.daily.done .dart{opacity:.15}
/* how to play: five short steps */
.steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start}
.steps .sk{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--accent);color:#fff8ee;font-weight:800}
.steps b{display:block;font-family:var(--display);font-size:1rem}
.steps div{font-size:.86rem;color:var(--ink-2);line-height:1.4}
.goodtoknow{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:.84rem;color:var(--ink-2)}
.goodtoknow p{margin:0}

/* first-time tips */
.tip{position:relative;z-index:4;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(214,165,77,.55);
  background:var(--grain),linear-gradient(120deg,rgba(214,165,77,.16),rgba(26,23,20,.9));animation:enter .35s both}
.tip .tipk{flex:none;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1a1714;background:var(--gold);border-radius:6px;padding:3px 6px;margin-top:2px}
.tip p{flex:1;margin:0;font-size:.86rem;line-height:1.4;color:var(--fg)}
.tip .btn{flex:none;padding:5px 10px}
.scene .tip{margin-top:4px}

/* add to home screen */
.install{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;border:1.5px solid var(--p1);background:var(--grain),linear-gradient(120deg,rgba(82,179,136,.16),var(--surface) 65%)}
.ihead{display:flex;gap:12px;align-items:flex-start}
.ihead div{display:flex;flex-direction:column;gap:3px}
.ihead b{font-family:var(--display);font-size:1.05rem}
.ihead .muted{font-size:.82rem;line-height:1.35}
.ik{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--p1);color:#10241a;font-weight:800;font-size:1.2rem}
.isteps{margin:0;padding-left:22px;font-size:.88rem;display:flex;flex-direction:column;gap:4px}
.ishare{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#2f7bf5;color:#fff;font-size:.75rem;vertical-align:middle}
.ibtns{display:flex;gap:8px}

/* settings: save tab */
.savecode{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:.12em;text-align:center;padding:10px;border-radius:12px;border:1px dashed var(--gold);color:var(--gold);background:var(--bg-2)}
.hint.warn{color:#ffb19f}

/* online: away players and hand-off notes */
.awaytag{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:0 6px;vertical-align:middle}
.netnote{padding:10px 12px;border-radius:12px;border:1px dashed var(--p2);background:rgba(139,156,240,.08);font-size:.86rem;color:var(--ink-2)}

/* move clips (js/clips.js): the special's clip fills the cut-in with the move along the bottom; other moments get a clip box.
   Both wipe in on a diagonal with an impact flash, speed lines that fade, a slow push-in and cinematic bars. */
.now.cut.clip{min-height:0}
.now.cut.clip .cutin{width:100%}
.cutin.hasclip{height:auto;aspect-ratio:16/9;max-height:300px;align-items:flex-end;background:#000;animation:clipwipe .5s cubic-bezier(.2,.9,.2,1) backwards}
.cutin.hasclip.right{animation-name:clipwiper}
@keyframes clipwipe{from{clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%)}to{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}}
@keyframes clipwiper{from{clip-path:polygon(120% 0,120% 0,100% 100%,100% 100%)}to{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}}
.cvid.vidwait{visibility:hidden}
.cvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:clipzoom 4s cubic-bezier(.2,.6,.3,1) both}
@keyframes clipzoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.cutin.hasclip::after,.clipbox::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 60px 10px rgba(0,0,0,.65)}
.cbars{position:absolute;inset:0;z-index:1;pointer-events:none}
.cbars::before,.cbars::after{content:'';position:absolute;left:0;right:0;height:7%;background:#000;animation:barin .45s .1s cubic-bezier(.2,.9,.2,1) both}
.cbars::before{top:0}.cbars::after{bottom:0;transform-origin:bottom}
@keyframes barin{from{transform:scaleY(0)}}
.cutin.hasclip .lines{z-index:1;mix-blend-mode:screen;animation:zoomlines .5s linear infinite,fadeaway 1.1s .2s both}
@keyframes fadeaway{to{opacity:0}}
.cflash{position:absolute;inset:0;z-index:3;background:#fff;pointer-events:none;animation:cflash .5s .12s ease-out both}
@keyframes cflash{0%{opacity:0}15%{opacity:.85}100%{opacity:0}}
.cutin.hasclip .cimg{display:none}
.cutin.hasclip .band,.cutin.hasclip.right .band{width:100%;margin:0;padding:22px 16px 14px;gap:0;clip-path:none;border-top:0;z-index:2;
  background:linear-gradient(transparent,rgba(10,9,8,.9) 55%);animation:bandup .5s .35s cubic-bezier(.2,.9,.2,1) both}
@keyframes bandup{from{transform:translateY(40%);opacity:0}}
.cutin.hasclip .ctext{border-left:3px solid var(--tc);padding-left:10px;align-items:flex-start;text-align:left}
.cutin.hasclip.right .ctext{border-left:0;border-right:3px solid var(--tc);padding:0 10px 0 0;align-items:flex-end;text-align:right}
.cutin.hasclip .cwho{font-size:.7rem}
.cutin.hasclip .cmove{font-size:1.2rem;animation:enter .4s .45s both}
.cutin.hasclip .cquote{font-size:.78rem;animation:enter .4s .65s both}
.cutin.hasclip .ckanji,.clipbox .cstamp{position:absolute;z-index:2;top:10%;right:12px;left:auto;bottom:auto;width:44px;height:44px;display:grid;place-items:center;
  font-size:26px;line-height:1;font-weight:800;color:#fff;opacity:1;border-radius:8px;background:color-mix(in srgb,var(--sc,var(--low)) 82%,#000);
  box-shadow:0 0 0 2px rgba(255,255,255,.85),0 6px 16px rgba(0,0,0,.5);transform:rotate(-8deg);animation:stamp .5s .55s cubic-bezier(.2,1.5,.3,1) both}
.cutin.hasclip.right .ckanji,.clipbox.right .cstamp{right:auto;left:12px;transform:rotate(8deg)}
@keyframes stamp{from{transform:scale(2.4) rotate(-20deg);opacity:0}}
.now.clipbeat{padding:10px;gap:10px}
.clipbox{position:relative;width:100%;max-width:520px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;
  --glow:var(--tc);box-shadow:0 0 0 2px var(--glow),0 0 26px color-mix(in srgb,var(--glow) 45%,transparent),0 10px 26px rgba(0,0,0,.5);animation:clipwipe .5s cubic-bezier(.2,.9,.2,1) backwards}
.clipbox.right{animation-name:clipwiper}
.clipbox.act-regen,.clipbox.act-heal,.clipbox.act-revive{--glow:#5fd38d;animation:clipwipe .5s cubic-bezier(.2,.9,.2,1) backwards,healglow 1.6s .4s ease-in-out infinite}
.clipbox.right.act-regen,.clipbox.right.act-heal,.clipbox.right.act-revive{animation-name:clipwiper,healglow}
.clipbox.act-ko,.clipbox.act-fall{--glow:var(--low)}
.clipbox.act-defend{--glow:#8fb4ff}
@keyframes healglow{50%{box-shadow:0 0 0 2px var(--glow),0 0 44px color-mix(in srgb,var(--glow) 70%,transparent),0 10px 26px rgba(0,0,0,.5)}}
.clipbox.act-regen .cstamp,.clipbox.act-heal .cstamp,.clipbox.act-revive .cstamp{background:#2f8f5b}
.clipbox.act-defend .cstamp{background:#3f5f9f}
.clipbox video{position:absolute;inset:0}
.clipbox .cliptag{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:22px 14px 10px;display:flex;align-items:baseline;gap:8px;text-align:left;font-size:.9rem;
  color:var(--fg);background:linear-gradient(transparent,rgba(10,9,8,.88) 55%);animation:bandup .5s .35s cubic-bezier(.2,.9,.2,1) both}
.clipbox.right .cliptag{flex-direction:row-reverse;text-align:right}
.clipbox .cliptag i{font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px;
  background:color-mix(in srgb,var(--glow) 30%,rgba(0,0,0,.4));color:var(--fg)}
@media (prefers-reduced-motion: reduce){.cutin.hasclip,.clipbox,.cvid,.cbars::before,.cbars::after,.cflash,.clipbox *{animation:none!important}.cflash{display:none}}

/* story: scene pictures (img/scenes/), Mark awakenings between rounds, unlocks one at a time */
.stagecast .scenepor img{object-position:50% 30%}   /* a scene picture in the speaker's portrait frame (same size as the others) */
@keyframes picin{from{opacity:0;transform:scale(.96)}}
.scene.awakening::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(255,80,60,.55),rgba(160,20,20,.25) 45%,transparent 70%);animation:awakeflash 1.4s ease-out both}
@keyframes awakeflash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.stagecast .lead.awaken .gl.lg{box-shadow:0 0 0 3px var(--mark),0 0 40px rgba(255,70,50,.65),0 18px 40px rgba(0,0,0,.55);animation:awakepulse 1.6s .5s ease-in-out infinite}
@keyframes awakepulse{50%{box-shadow:0 0 0 3px var(--mark),0 0 70px rgba(255,90,60,.9),0 18px 40px rgba(0,0,0,.55)}}
.stagecast .lead.awaken{animation:awakein .8s cubic-bezier(.2,1.3,.3,1) both}
@keyframes awakein{0%{transform:scale(.85);filter:brightness(3) saturate(0)}40%{filter:brightness(2)}100%{transform:none;filter:none}}
.markstamp{position:absolute;top:-14px;right:-16px;z-index:3;width:50px;height:50px;display:grid;place-items:center;font-size:28px;font-weight:800;color:#fff;
  background:var(--mark);border-radius:10px;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 8px 18px rgba(0,0,0,.5);transform:rotate(-10deg);animation:stamp .55s .45s cubic-bezier(.2,1.5,.3,1) both}
.markburst{position:absolute;inset:-30%;z-index:-1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,110,70,.45) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:burstspin 8s linear infinite,picin .6s both}
@keyframes burstspin{to{transform:rotate(360deg)}}
.ulist.one{min-height:190px;align-items:center}
.ucard.big{animation:unlockpop .7s cubic-bezier(.2,1.4,.3,1) both}
.ucard.big .gl.lg{width:130px!important;height:160px!important;font-size:3.6rem;box-shadow:0 0 0 3px var(--gold),0 0 36px rgba(214,165,77,.6)}
.ucard.big b{font-size:1.05rem}
@keyframes unlockpop{0%{transform:scale(.4) rotate(-8deg);opacity:0;filter:brightness(3)}60%{filter:brightness(1.4)}100%{transform:none;opacity:1;filter:none}}
.udots{display:flex;gap:6px;justify-content:center;position:relative;z-index:3}
.udots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}.udots i.on{background:var(--gold)}.udots i.done{background:var(--muted)}
@media (prefers-reduced-motion: reduce){.scene.awakening::before,.stagecast .lead.awaken,.stagecast .lead.awaken .gl.lg,.markstamp,.markburst,.ucard.big{animation:none!important}}

/* Win screen: full battle log */
.mlhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.copylog{display:inline-flex;align-items:center;gap:6px}
.matchlog summary{cursor:pointer;color:var(--ink-2);padding:4px 0}
.mlround{margin-top:12px}
.mlr{font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.mlmoves{font-size:.82rem;color:var(--ink-2);border-left:3px solid var(--tc);padding:2px 8px;margin-bottom:4px}
.mlmoves b{color:var(--tc);margin-right:4px}

/* Home: own-pace online games (your turn first, in gold) */
.games{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.games .eyebrow{margin-bottom:2px}
.grow{display:flex;align-items:stretch;border-radius:14px;border:1px solid var(--line-2);background:var(--grain),var(--surface);overflow:hidden}
.grow.mine{border-color:var(--gold);background:var(--grain),linear-gradient(120deg,rgba(214,165,77,.16),var(--surface) 60%)}
.gopen{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;background:none;border:0;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.gopen span{color:var(--muted);font-size:.86rem}
.grow.mine .gopen span{color:var(--gold);font-weight:700}
.gx{width:44px;background:none;border:0;border-left:1px solid var(--line);color:var(--muted);font-size:1.2rem;cursor:pointer}
.asynchint{margin:6px 0}

/* Until Dawn: the sun rises over the battle screen, one step a round (--dawn 0 → 1, set by app.js). It glows over the
   page (screen blend, no taps), under the action bar. */
.dawnsky{display:none;position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
body.dawn .dawnsky{display:block}
.dawnsky::before{content:'';position:absolute;inset:0;opacity:calc(var(--dawn,0)*.9);transition:opacity 2.4s ease;
  background:linear-gradient(to top,rgba(255,140,60,calc(.34 + var(--heat,0) * .2)),rgba(224,87,59,calc(.14 + var(--heat,0) * .16)) 30%,transparent calc(62% + var(--heat,0) * 20%))}
.dawnsky .sun{position:absolute;right:-70px;bottom:70px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,205,.75) 0 26%,rgba(255,201,105,.5) 40%,rgba(255,140,60,.22) 58%,transparent 71%);
  transform:translateY(calc((1 - var(--dawn,0)) * 340px)) scale(calc(1 + var(--heat,0) * .45));opacity:calc(.3 + var(--dawn,0)*.7);
  transition:transform 2.4s cubic-bezier(.3,.7,.3,1),opacity 2.4s ease;animation:sunpulse 5s ease-in-out infinite}
@keyframes sunpulse{50%{filter:brightness(1.12)}}
@media (prefers-reduced-motion: reduce){.dawnsky::before,.dawnsky .sun{transition:none;animation:none}}

/* End credits (story finale): the roll rises slowly; tapping it (or the roll ending) settles it in place */
.credits{position:relative;min-height:calc(100vh - 160px);overflow:hidden;text-align:center;cursor:pointer}
.credits .roll{padding:40px 16px 60px;animation:creditroll 20s linear both}   /* 42 s felt too slow (CK) */
.credits .roll.done{animation:none}
@keyframes creditroll{from{transform:translateY(70vh)}to{transform:translateY(0)}}
.credits .ckanji{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:18px;background:var(--accent);color:#fff;font-family:var(--display);font-size:3rem;box-shadow:0 10px 30px rgba(224,87,59,.35)}
.credits h1{font-family:var(--display);font-size:2.6rem;margin:16px 0 10px}
.credits .cline{margin:4px 0;color:var(--ink-2);font-size:1.05rem}
.credits .cline b{color:var(--gold)}
.credits .cblock{margin:44px 0 0}
.credits .cseals{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:14px}
.credits .cseals span{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px}
.credits .cseals .gl.lg{width:64px;height:78px;border-radius:12px}
.credits .cseals small{color:var(--ink-2);font-size:.78rem}
.credits .cfallen{color:var(--ink-2);line-height:1.9;margin:10px auto 0;max-width:420px}
.credits .cthanks{margin:56px 0 0;font-family:var(--display);font-size:1.6rem;color:var(--gold)}
@media (prefers-reduced-motion: reduce){.credits .roll{animation:none}}

/* Kiriya's Ambush Orders: pick the fighter the trap goes around (under your fighters on the move screen) */
.ambushpick{margin:12px 0 0;padding:10px 12px;border-radius:12px;border:1px dashed var(--gold);background:rgba(214,165,77,.06)}
.ambushpick .tgs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}

/* A place picture behind an arc's cutscenes (img/places/<arc>.jpg), darkened so lines stay readable */
.scene[data-place]{background-image:linear-gradient(to bottom,rgba(12,10,8,.4),rgba(12,10,8,.08) 38%,rgba(12,10,8,.2) 55%,rgba(12,10,8,.88) 80%),var(--place);background-size:cover;background-position:center}

/* Story battles: the battle's place picture behind the whole screen, darker than in the cutscenes (more small text) */
body.placebg{background:transparent}   /* the page colour stays on html; the picture is a fixed layer (iPhones don't do fixed backgrounds) */
body.placebg::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(18,15,12,.68),rgba(18,15,12,.68)),var(--placebg) center/cover no-repeat}

/* Your name: Settings field and the home screen's one-time question */
.namerow{display:flex;gap:8px;margin-top:6px}
.namerow input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;color:var(--fg);font:inherit}
.askname{display:flex;flex-direction:column;gap:2px;padding:12px;margin:10px 0;border-radius:14px;border:1.5px solid var(--gold);background:var(--grain),linear-gradient(120deg,rgba(214,165,77,.14),var(--surface) 60%)}

/* A cutscene line that plays a clip (scene option {clip}): a wide video above the speakers */
.scenevid{position:relative;z-index:2;width:100%;aspect-ratio:16/9;max-height:38vh;border-radius:14px;overflow:hidden;margin:6px 0;
  box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);animation:picin .7s cubic-bezier(.2,.8,.2,1) both}
.scenevid video{width:100%;height:100%;object-fit:cover;display:block}

/* Codex lore: the character's line and a sentence of background */
.lore{margin:8px 0 2px;padding:10px 12px;border-left:3px solid var(--gold);border-radius:4px 10px 10px 4px;background:rgba(214,165,77,.07)}
.lore q{display:block;font-family:var(--display);font-size:1.05rem;color:var(--fg);quotes:"“" "”"}
.lore p{margin:4px 0 0;color:var(--ink-2);font-size:.88rem;line-height:1.45}

.credits .cseals.fallen .gl.lg{filter:grayscale(.65) brightness(.9)}
.credits .cseals.fallen small{max-width:84px;text-align:center;line-height:1.25}
/* A Mark awakening in a story cutscene shakes the screen (CK) */
.scene.awakening{animation:awakeshake .6s cubic-bezier(.36,.07,.19,.97) both}
@keyframes awakeshake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}
@media (prefers-reduced-motion: reduce){.scene.awakening{animation:none}}

/* Settings → Battle background: a dropdown, because there are many places */
.setselect{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg);font:inherit;font-size:16px}

/* Clips never show the phone's own play button: they start by themselves (or on the next tap in Low Power Mode) */
video::-webkit-media-controls,video::-webkit-media-controls-start-playback-button,video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
video{pointer-events:none}

/* ---------- TV mode (js/tv.js): a laptop on the TV shows the game big; a phone is the controller ---------- */
.tvbtn{display:none}
@media (min-width:900px){ .tvbtn{display:inline-flex} }   /* the TV button only shows on laptop-sized screens */
body.tvmode .wrap{max-width:1300px;zoom:var(--tvz,1.2)}   /* --tvz: zoomed to fill the window (tvFit in tv.js) */
body.tvmode .planwide,body.tvmode .reswide.done{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
body.tvmode .reswide.done .rcol{display:flex;flex-direction:column;gap:14px}
body.tvmode .reswide.done .vsdiv{display:none}
body.tvmode .planwide .opps:not(.many) .tiles.simple{grid-template-columns:1fr 1fr}
#tvbadge{position:fixed;left:14px;bottom:14px;z-index:9;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:14px;
  background:rgba(18,15,12,.9);border:1px solid var(--line-2);font-size:.95rem;color:var(--ink-2);box-shadow:0 10px 30px rgba(0,0,0,.5)}
#tvbadge b{color:var(--gold);font-size:1.2rem;letter-spacing:.12em}
#tvbadge i{color:var(--p1);font-style:normal;font-weight:700}
/* the phone controller's "Watch the TV" screen */
.ctlwatch{min-height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:20px}
.ctlwatch .ctlk{font-size:4rem}
.ctlwatch h1{font-family:var(--display);font-size:2.2rem;margin:0}
.ctlwatch .btn.big{min-width:220px;padding:16px 28px;font-size:1.15rem;margin-top:10px}
/* the 1.2× TV zoom would push full-height scenes past the bottom: size them to the screen before zooming */
body.tvmode .scene{min-height:calc(100vh / var(--tvz,1.2) - 150px);min-height:calc(100dvh / var(--tvz,1.2) - 150px)}   /* 150px: the .wrap padding, so the scene fills the window without scrolling */
body.tvmode .credits{min-height:calc((100vh - 160px) / var(--tvz,1.2))}
/* cutscenes and credits on the TV (body.tvscene, set in tvBadge): no page padding, the scene is the whole screen */
body.tvmode.tvscene .wrap{max-width:none;padding:0;gap:0}
body.tvmode.tvscene .scene{min-height:calc(100vh / var(--tvz,1.2));min-height:calc(100dvh / var(--tvz,1.2));border-radius:0;padding:28px 44px}
body.tvmode.tvscene .credits{min-height:calc(100vh / var(--tvz,1.2));min-height:calc(100dvh / var(--tvz,1.2))}
body.tvmode.tvscene #tvbadge{opacity:.45;transition:opacity .3s} body.tvmode.tvscene #tvbadge:hover{opacity:1}

.ctlchoices{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:6px}
.ctlstory{width:100%;max-width:440px;display:flex;flex-direction:column;gap:6px;margin-top:8px;text-align:left}
.ctlrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.ctlrow.won{border-color:var(--line-2)}
.ctlrow.locked{opacity:.5}
.ctlrow .ctln{width:26px;color:var(--muted);font-weight:700;text-align:center}
.ctlrow .ctlt{flex:1;min-width:0;display:flex;flex-direction:column}
.ctlrow .ctlt small{color:var(--muted)}

/* TV: phones in the corner badge, who the TV is waiting on, and the phone's own lines */
#tvbadge .tvseat{font-weight:700;color:var(--tc);white-space:nowrap}
#tvbadge .tvseat.off{color:var(--muted);animation:dotpulse 1.4s infinite}
#tvbadge .tvwait{color:var(--fg);font-weight:600;max-width:320px}
.ctlwho{font-weight:800;font-size:1.1rem;margin:0}
.ctlgone{color:var(--low);font-weight:700;margin:0}
.ctlwaitline{color:var(--gold);font-weight:600;margin:0}

/* ---------- the TV battle board (vTvBoard in tv.js): opponent's cards on top, yours below ----------
   Sizes match BOARD in tv.js (card height --ch from sizeBoard, band 112, row gap 14): the attack flight is worked out from them. */
.board{position:relative;display:flex;flex-direction:column;gap:14px;margin-top:8px}
.arow{display:flex;justify-content:center;gap:18px;height:var(--ch,186px)}
.aband{height:112px;display:flex;align-items:center;justify-content:center;text-align:center}
.acard{position:relative;flex:none;width:var(--w);height:var(--ch,186px);border-radius:14px;background:var(--surface);border:2px solid var(--tc);
  box-shadow:0 8px 22px rgba(0,0,0,.5);display:flex;flex-direction:column;transition:opacity .3s,filter .3s}
.acard .aart{flex:1;min-height:0;border-radius:12px 12px 0 0;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.acard .aart img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.acard .ak{font-family:var(--display);font-size:3.2rem;color:var(--tc)}
.acard .ainfo{padding:6px 9px 8px;display:flex;flex-direction:column;gap:4px}
.acard .anm{font-weight:800;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acard .ahp{display:flex;align-items:center;gap:7px}
.acard .ahp b{font-size:.85rem;min-width:36px;text-align:right}
.acard .abar{flex:1;height:7px;border-radius:4px;background:var(--bg-2);overflow:hidden}
.acard .abar i{display:block;height:100%;background:var(--hp);transition:width .5s}
.acard .abar i.drain{animation:drain .7s .45s ease-out both}
.acard .ahp.low .abar i{background:var(--low)} .acard .ahp.low b{color:var(--low)}
.acard .smarks{position:absolute;top:6px;right:6px}
.acard.dead{opacity:.35;filter:grayscale(1)}
.acard.back{opacity:.55;filter:saturate(.6)}
.acard .fxl{top:42%;width:150px;height:150px;margin:-75px 0 0 -75px}
.acard .amark{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:800;font-size:3rem;color:#fff;
  opacity:0;pointer-events:none;text-shadow:0 0 22px var(--accent),0 0 6px #000;z-index:4}
.acard .apop{position:absolute;top:22%;left:50%;transform:translateX(-50%);font-weight:900;font-size:2rem;opacity:0;white-space:nowrap;
  text-shadow:0 3px 10px rgba(0,0,0,.85);z-index:6;animation:floatup 1.8s .42s ease-out both}
.acard .apop.dmg{color:#ff6b5c} .acard .apop.gain{color:#5fd39a} .acard .apop:not(.dmg):not(.gain){color:var(--ink-2);font-size:1.3rem}
/* the attack: the attacker flies across the board into its target and back, glowing in its team colour */
.acard.fly{z-index:5;animation:afly .95s cubic-bezier(.55,0,.35,1) both}
@keyframes afly{0%{transform:none}12%{transform:translate(calc(var(--dx) * -.06),calc(var(--dy) * -.06)) scale(1.04)}
  36%{transform:translate(var(--dx),var(--dy)) scale(1.14);box-shadow:0 0 0 3px var(--tc),0 0 46px var(--tc)}
  48%{transform:translate(calc(var(--dx) * .9),calc(var(--dy) * .9)) scale(1.08)}100%{transform:none}}
.acard.struck{animation:arecoil .55s .33s ease-out both}
.acard.struck .amark{animation:slash .6s .3s ease-out both}
@keyframes arecoil{0%{transform:none}20%{transform:translate(9px,-4px) rotate(4deg);box-shadow:0 0 0 3px var(--low),0 0 40px rgba(255,93,76,.7)}
  45%{transform:translate(-7px,2px) rotate(-3deg)}70%{transform:translate(4px,0)}100%{transform:none}}
.acard.dodged{animation:dodge .6s .3s ease-in-out both}
.acard.dodged .amark,.acard.blocked .amark{color:var(--ink-2);text-shadow:0 0 8px #000;animation:slash .6s .32s ease-out both}
.acard.blocked{animation:shield .8s .3s ease-out}
/* knocked out: hit, then the card topples and goes grey under a KO stamp */
.acard.felled{animation:afall .9s .55s cubic-bezier(.5,0,.75,1) both}
.acard.felled::after{content:'KO';position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-8deg);padding:4px 14px;border-radius:8px;
  background:var(--low);color:#fff;font-weight:900;font-size:1.6rem;z-index:6;animation:stamp .5s .7s ease-out both}
@keyframes afall{0%{transform:none;filter:none;opacity:1}60%{transform:translateY(10px) rotate(-7deg) scale(.95);filter:grayscale(.7)}100%{transform:translateY(8px) rotate(-5deg) scale(.94);filter:grayscale(1) brightness(.6);opacity:.6}}
/* moves on one fighter: healing and training glow green, guarding blue, poison purple, specials gold */
.acard.fx-heal,.acard.fx-revive,.acard.fx-buff{animation:healglow 1.2s .2s ease-out}
.acard.fx-heal .amark,.acard.fx-revive .amark,.acard.fx-buff .amark{color:#5fd39a;text-shadow:0 0 18px rgba(95,211,154,.8);animation:rise 1.1s .15s ease-out both}
.acard.fx-guard{animation:shield 1s .15s ease-out}
.acard.fx-guard .amark{color:#8fb6ff;text-shadow:0 0 18px rgba(143,182,255,.8);animation:rise 1.1s .1s ease-out both}
.acard.fx-poison{animation:poisoned 1.1s .2s ease-out}
.acard.fx-poison .amark{color:#b77cff;text-shadow:0 0 18px rgba(183,124,255,.8);animation:rise 1.1s .15s ease-out both}
.acard.fx-stun{filter:saturate(.4)} .acard.fx-stun .amark{color:var(--muted);animation:rise 1.2s .1s ease-out both}
.acard.fx-special,.acard.fx-burn{animation:charge 1s ease-out}
.acard.fx-special .amark{color:var(--gold);animation:rise 1s .2s ease-out both}
.acard.fx-burn .amark{color:#ffb347;animation:rise 1s .2s ease-out both}
.acard.fx-spawn .amark,.acard.spawned{animation:spawn .7s ease-out both}
/* big hits shake the whole board; a knockout flashes it red */
.board.big{animation:quake .5s .36s ease-out}
.board.big.k{animation:quake .55s .36s ease-out, koflash .9s .34s ease-out}
/* the line for this beat in the middle of the board */
.aline{max-width:820px;padding:12px 22px;border-radius:14px;background:rgba(14,12,10,.82);border:1px solid var(--line-2);font-size:1.15rem;
  display:flex;align-items:center;gap:14px;animation:dropin .35s ease-out both}
.aline.k{border-color:rgba(255,93,76,.55);color:#ff9488}
.aline.h{border-color:rgba(82,179,136,.55);color:#8fd3b2}
.aline.x{border-color:rgba(214,165,77,.6);color:var(--gold);font-family:var(--display)}
.aline .stage{height:90px;width:auto}
/* while moves are chosen: who the TV is waiting on */
.await{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 26px;border-radius:16px;background:rgba(14,12,10,.82);border:1px dashed var(--line-2)}
.await b{font-family:var(--display);font-size:1.5rem}
.await small{color:var(--muted)}
.adots{display:flex;gap:6px}
.adots i{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:dotpulse 1.2s infinite}
.adots i:nth-child(2){animation-delay:.2s} .adots i:nth-child(3){animation-delay:.4s}
/* specials, clips, lines and the round intro play over the board */
.aover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:8;pointer-events:none}
.aover > .now{width:min(900px,92%);background:rgba(14,12,10,.92);box-shadow:0 20px 60px rgba(0,0,0,.7)}
.aover > .now.cut{min-height:300px}
.aover > .now.intro{min-height:220px}
.aover > .now.intro .ig{font-size:5rem}
.aover .clipbox{max-width:700px}
.board.covered .arow{opacity:.3;filter:blur(1px);transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.board *,.board{animation:none!important}.acard .apop{opacity:1}}

/* the badge once everyone has joined: small and faint, buttons only when the mouse is over it */
#tvbadge.mini{gap:7px;padding:4px 8px;border-radius:10px;font-size:.72rem;opacity:.4;transition:opacity .3s}
#tvbadge.mini b{font-size:.8rem}
#tvbadge.mini .tvk{font-size:.8rem}
#tvbadge.mini .btn,#tvbadge.mini .tvwait{display:none}
#tvbadge.mini:hover{opacity:1} #tvbadge.mini:hover .btn{display:inline-flex}

/* Join a TV: its own button on the phone's home screen (the laptop has TV mode instead) */
.tvjoinbtn{display:inline-flex}
@media (min-width:900px){ .tvjoinbtn{display:none} }
.tvjoinpanel{display:flex;flex-direction:column;gap:8px}
/* the TV's lobby: big code, the two player slots, what to play */
.tvhome{min-height:calc(100vh / var(--tvz,1.2) - 160px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}
.tvhome .hero{display:flex;flex-direction:column;align-items:center;text-align:center} .tvhome .hero .kanji{position:static;margin-bottom:8px}
.tvjoin p{margin:0 0 8px;font-size:1.15rem;color:var(--ink-2)}
.tvcode{font-family:var(--display);font-size:5.5rem;font-weight:800;letter-spacing:.22em;line-height:1;color:var(--gold);text-shadow:0 0 30px rgba(214,165,77,.35)}
.tvslots{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.tvslot{width:300px;display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:16px;background:var(--surface);border:2px dashed var(--line-2);text-align:left}
.tvslot.on{border:2px solid var(--tc);box-shadow:0 0 24px color-mix(in srgb,var(--tc) 30%,transparent)}
.tvslot .tvsn{font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tc)}
.tvslot b{font-size:1.25rem}
.tvmodes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.tvmodes .btn{min-width:260px;padding:14px 22px;font-size:1.05rem}
.tvhome .hint{max-width:640px}
.tvhomebar{display:flex;gap:10px}
#tvbadge[hidden]{display:none}

/* Who picks first: a character thinks of a number; nine numbered character cards (vSpin) */
.guess{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:4px}
.gthink{display:flex;align-items:center;gap:12px;max-width:440px;width:100%}
.gthink .gl.stg{flex:none;width:58px;height:70px}
.gsay{flex:1;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);font-family:var(--display);font-size:1.05rem;position:relative}
.gsay::before{content:'';position:absolute;left:-7px;top:22px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transform:rotate(45deg)}
.gsay .gwho{display:block;font-family:var(--body);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.gsay b{color:var(--gold);font-size:1.3rem}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:440px}
.gcard{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:2px solid var(--tc);background:#000;padding:0;cursor:pointer;
  transition:transform .2s}
.guess.fresh:not(.done) .gcard{animation:popin .35s calc(var(--i) * .04s) ease-out both}
.gcard:not([disabled]):hover{transform:translateY(-3px)}
.gcard .gart{position:absolute;inset:0} .gcard .gart img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.gcard .ck{display:flex;align-items:center;justify-content:center;height:100%;font-size:2.4rem;color:var(--ink-2)}
.gcard .gnum{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(14,12,10,.85);border:2px solid var(--gold);color:var(--gold);font-family:var(--display);font-weight:800;font-size:1.4rem}
.gcard .gtag{position:absolute;top:6px;left:6px;right:6px;padding:3px 6px;border-radius:8px;color:#111;font-weight:800;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard[disabled]{cursor:default}
.guess:not(.done) .gcard[disabled]:not(.taken){filter:saturate(.7) brightness(.8)}
.guess.done .gcard:not(.secret):not(.taken){filter:grayscale(.8) brightness(.45)}
.gcard.secret{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold),0 0 44px rgba(214,165,77,.95);transform:scale(1.14);z-index:2;animation:gpulse 1.6s .8s ease-in-out infinite}
.guess.done .gcard.taken:not(.secret){filter:brightness(.6)}
.gcard .gis{position:absolute;left:0;right:0;top:50%;transform:translateY(-70%) rotate(-4deg);padding:5px 2px;background:var(--gold);color:#111;font-family:var(--display);font-weight:800;font-size:.86rem;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,.6)}
.gcard.secret .gnum{width:50px;height:50px;font-size:1.5rem}
@keyframes gpulse{50%{box-shadow:0 0 0 6px var(--gold),0 0 70px rgba(214,165,77,1)}}
@media (prefers-reduced-motion:reduce){.gcard.secret{animation:none!important}}
.guess.fresh .gcard.secret{animation:greveal .8s ease-out both}
.gcard.secret .gnum{background:var(--gold);color:#111}
.gcard.win{box-shadow:0 0 0 3px var(--tc),0 0 30px var(--tc)}
@keyframes greveal{0%{transform:rotateY(90deg) scale(.9)}60%{transform:rotateY(0) scale(1.08)}100%{transform:scale(1.14)}}
.gwhy{margin:0;text-align:center}
body.tvmode .ggrid{max-width:560px;grid-template-columns:repeat(9,1fr);max-width:none}
body.tvmode .gthink{max-width:560px}
body.tvmode .guess{padding-top:20px}

/* the TV's draft while phones pick: whose turn, the teams, every card dealt */
.tvturn{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 18px;border-radius:14px;border:2px solid var(--tc);
  background:color-mix(in srgb,var(--tc) 12%,var(--surface));text-align:center;flex-wrap:wrap}
.tvturn b{font-family:var(--display);font-size:1.5rem}
.tvgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
.tvhelpers{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Quit in battle asks first */
.quitask{text-align:center;display:flex;flex-direction:column;gap:10px}
.quitask h2{margin:0;font-family:var(--display)}
.quitask .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Opening splash (index.html #splash): "a Kwow Media Productions game", tap to start, the sting, then it fades out */
.splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;cursor:pointer;
  background:radial-gradient(90% 70% at 50% 45%,#2a211b,#0e0c0a 75%);color:var(--fg);-webkit-user-select:none;user-select:none;transition:opacity .7s ease}
.splash.out{opacity:0;pointer-events:none}
.sp-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;animation:fade 1s ease-out both}
.sp-seal{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:14px;border-radius:12px;background:var(--accent);color:#fff;
  font-family:var(--display);font-size:2.4rem;transform:rotate(-4deg);box-shadow:0 10px 30px rgba(224,87,59,.35)}
.sp-a,.sp-game{font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--ink-2);letter-spacing:.08em}
.sp-name{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,7vw,3.4rem);line-height:1.1;color:var(--gold);letter-spacing:.04em;padding:0 16px}
.sp-line{display:block;width:min(420px,70vw);height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:scaleX(0)}
.sp-tap{font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);animation:dotpulse 1.8s ease-in-out infinite}
/* after the tap: a slash of light under the name, the name flares, the seal stamps */
.splash.go .sp-tap{visibility:hidden}
.splash.go .sp-line{animation:spslash .5s .62s cubic-bezier(.2,.8,.2,1) forwards}
.splash.go .sp-name{animation:spflare 1.4s .7s ease-out both}
.splash.go .sp-seal{animation:spstamp .45s .05s cubic-bezier(.2,1.6,.4,1) both}
@keyframes spslash{to{transform:scaleX(1)}}
@keyframes spflare{0%{text-shadow:none}30%{text-shadow:0 0 28px rgba(214,165,77,.9),0 0 60px rgba(224,87,59,.5);transform:scale(1.04)}100%{text-shadow:0 0 12px rgba(214,165,77,.25);transform:none}}
@keyframes spstamp{0%{transform:rotate(-4deg) scale(1.6);opacity:.4}100%{transform:rotate(-4deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.splash *{animation:none!important}.splash.go .sp-line{transform:none}}

/* Dead Calm (CK): a ring of still water around Giyu's whole team, kept up for the rest of the round */
.waterring{position:absolute;inset:-8px -14px;pointer-events:none;z-index:3}
.waterring i{position:absolute;inset:0;border-radius:50%;border:4px solid rgba(120,200,255,.85);box-shadow:0 0 18px rgba(90,180,255,.8),inset 0 0 18px rgba(90,180,255,.55);animation:calmin .9s cubic-bezier(.2,.7,.3,1) both,calmwave 3.4s .9s ease-in-out infinite}
.waterring i:nth-child(2){inset:7px;border-width:2px;border-style:dashed;border-color:rgba(190,232,255,.8);box-shadow:none;animation:calmin .9s .1s cubic-bezier(.2,.7,.3,1) both,calmspin 7s linear infinite}
.waterring i:nth-child(3){inset:-7px;border-width:2px;border-color:rgba(120,200,255,.4);box-shadow:none;animation:calmin .9s .2s cubic-bezier(.2,.7,.3,1) both,calmspin 11s linear infinite reverse}
@keyframes calmin{0%{transform:scale(1.5);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes calmwave{50%{transform:scale(1.025,.975)}}
@keyframes calmspin{to{transform:rotate(360deg)}}
.stage.calmstage{height:128px}
.calmteam{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 26px;z-index:2}
.calmstage .waterring{inset:0 4%}
.calmstage .gl.stg{width:58px;height:70px}
.mini .m.calm .gl.mini{box-shadow:0 0 0 2px rgba(120,200,255,.95),0 0 14px rgba(90,180,255,.95)}
.mini:has(.m.calm){position:relative}
.arow.calm{position:relative}
.arow.calm .waterring{inset:-10px 3%}
/* Nakime (CK): the biwa drops a fighter through the floor; for the rest of the round they're an empty place */
.stage.goneaway{z-index:20}
.stage.goneaway .st-on{animation:pulled 1.4s 1s cubic-bezier(.55,0,.85,.35) both!important;z-index:20}
.stage.goneaway .st-mark{color:#d9b3ff;text-shadow:0 0 16px rgba(190,130,255,.8)}
@keyframes pulled{0%{transform:none;opacity:1}18%{transform:translateY(-12px) rotate(-3deg)}75%{opacity:1}100%{transform:translateY(62vh) rotate(16deg) scale(.82);opacity:0}}
.acard.pulled{animation:pulledtv 1.4s 1s cubic-bezier(.55,0,.85,.35) both!important;z-index:30}
.acard.bot.pulled{z-index:30}
@keyframes pulledtv{0%{transform:none;opacity:1}18%{transform:translateY(-16px) rotate(-3deg)}80%{opacity:1}100%{transform:translateY(120vh) rotate(14deg) scale(.85);opacity:0}}
.acard.lost{opacity:.14;filter:grayscale(1);border-style:dashed}
.mini .m.lost{opacity:.14;filter:grayscale(1)}
/* Kagaya's Final Resolve (CK): one big beat for everyone who awakens */
.now.awakebeat{border-color:rgba(214,70,60,.7);background:radial-gradient(circle at 50% 45%,rgba(214,60,50,.3),rgba(0,0,0,.55));overflow:hidden;padding:18px 12px;animation:awakeshake .6s cubic-bezier(.36,.07,.19,.97) both}
.awaken{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.awk{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--display);font-size:9rem;line-height:1;color:rgba(214,60,50,.26);pointer-events:none;animation:awstamp .7s ease-out both}
.awrow{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.awc{display:flex;flex-direction:column;align-items:center;gap:5px;animation:popin .4s calc(var(--i) * .1s) ease-out both}
.awc small{font-weight:800;color:var(--fg)}
.awpic{position:relative;display:block;width:92px;height:116px;border-radius:12px;overflow:hidden;background:#000;border:2px solid var(--gold);box-shadow:0 0 22px rgba(214,70,60,.75)}
.awaken.many .awpic{width:58px;height:74px}
.awpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.awpic img.old{animation:awold 1s calc(.5s + var(--i) * .14s) ease-in both}
.awpic img.new{animation:awnew 1s calc(.5s + var(--i) * .14s) ease-out both}
.awt{position:relative;font-family:var(--display);font-size:1.25rem;color:var(--gold);text-shadow:0 0 14px rgba(214,70,60,.8);animation:rise .8s .9s ease-out both}
@keyframes awold{to{opacity:0;filter:brightness(3) saturate(0)}}
@keyframes awnew{0%{opacity:0;filter:brightness(3.4)}100%{opacity:1;filter:none}}
@keyframes awstamp{0%{transform:translate(-50%,-50%) scale(2.2);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
body.tvmode .awpic{width:150px;height:190px}
body.tvmode .awaken.many .awpic{width:120px;height:152px}
body.tvmode .awt{font-size:2rem}
.tvcfg{width:100%;max-width:640px;margin:0 auto 12px;display:flex;flex-direction:column;gap:6px}
.ctlround,.ctlwatch .overteams,.ctlwatch .mvp{text-align:left;width:100%}
@media (prefers-reduced-motion:reduce){.waterring i,.acard.pulled,.stage.goneaway .st-on,.now.awakebeat,.awaken *{animation:none!important}.awpic img.old{opacity:0}}

/* Big moments for a few specials (CK): over the whole screen for a beat (effects.js SFX_ART) */
.sfx{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.sfx svg{position:absolute;inset:0;width:100%;height:100%}
.sfx-bolt{animation:boltflash .7s ease-out both}
.sfx-bolt polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;animation:boltdraw .9s cubic-bezier(.2,.9,.2,1) both}
.sfx-bolt .b1{stroke:#ffd84d;stroke-width:16;filter:blur(6px)}
.sfx-bolt .b2{stroke:#fff;stroke-width:5}
.sfx-darkbolt{animation:darkflash .7s ease-out both}
.sfx-darkbolt polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;animation:boltdraw .9s cubic-bezier(.2,.9,.2,1) both}
.sfx-darkbolt .b1{stroke:#7a2bd6;stroke-width:17;filter:blur(6px)}
.sfx-darkbolt .b2{stroke:#120518;stroke-width:6}
@keyframes darkflash{0%,18%{background:transparent}26%{background:rgba(40,10,70,.6)}100%{background:transparent}}
@keyframes boltdraw{0%{stroke-dashoffset:400;opacity:1}35%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes boltflash{0%,18%{background:transparent}26%{background:rgba(255,245,190,.75)}100%{background:transparent}}
:has(> .sfx-bolt) .stage .pop,:has(> .sfx-bolt) .apop,:has(> .sfx-tiger) .stage .pop,:has(> .sfx-tiger) .apop{animation-delay:.65s!important}
:has(> .sfx-ninth) .stage .pop,:has(> .sfx-ninth) .apop{animation-delay:1s!important}
:has(> .sfx-sunform) .stage .pop,:has(> .sfx-sunform) .apop{animation-delay:1.35s!important}
.sfx-mist i{position:absolute;left:-30%;top:var(--y);width:160%;height:34%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(225,235,245,.92),rgba(225,235,245,0) 70%);filter:blur(10px);animation:mistpass 2.2s var(--d) ease-in-out both}
@keyframes mistpass{0%{transform:translateX(-45%);opacity:0}35%,62%{transform:translateX(0);opacity:1}100%{transform:translateX(45%);opacity:0}}
.sfx-drum i{position:absolute;top:50%;left:50%;width:30vmin;height:30vmin;margin:-15vmin;border-radius:50%;border:6px solid rgba(214,165,77,.85);animation:drumring .8s var(--d) ease-out both}
@keyframes drumring{0%{transform:scale(.3);opacity:1}100%{transform:scale(3.4);opacity:0}}
:has(> .sfx-drum) .reswide,:has(> .sfx-drum) .board{animation:drumshake .6s ease-in-out}
@keyframes drumshake{0%,100%{transform:none}15%{transform:translateY(7px)}30%{transform:translateY(-5px)}50%{transform:translateY(6px)}65%{transform:translateY(-4px)}82%{transform:translateY(3px)}}
.sfx-claws line{stroke:#fff;stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 7px #ff5d4c);stroke-dasharray:400;stroke-dashoffset:400;animation:clawcut 1.1s var(--d) cubic-bezier(.2,.8,.3,1) both}
@keyframes clawcut{0%{stroke-dashoffset:400;opacity:1}30%{stroke-dashoffset:0;opacity:1}70%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.firering{position:absolute;top:50%;left:50%;width:min(86vw,62vh);height:min(86vw,62vh);transform:translate(-50%,-50%)}
.firering i{position:absolute;inset:0;border-radius:50%;border:10px solid #ff8a2b;box-shadow:0 0 30px 8px #ff5d1f,inset 0 0 30px 8px #ffb347;animation:firein 1.8s ease-out both,calmspin 3s linear infinite}
.firering i:nth-child(2){inset:12px;border:4px dashed #ffe08a;box-shadow:none;animation-direction:normal,reverse}
.firering i:nth-child(3){inset:-14px;border:5px dotted #ff5d1f;box-shadow:0 0 22px #ff5d1f}
@keyframes firein{0%{opacity:0;scale:.4}22%{opacity:1;scale:1}70%{opacity:1;scale:1}100%{opacity:0;scale:1.14}}
.compassfx{position:absolute;top:50%;left:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;overflow:visible;pointer-events:none}
.compassfx g{transform-origin:50% 50%;animation:compassopen 1.5s ease-out both}
.compassfx line,.compassfx circle{fill:none;stroke:#7fd8ff;stroke-width:1.1;filter:drop-shadow(0 0 3px #ff7ad9)}
.compassfx polygon{fill:#ff9be3}
@keyframes compassopen{0%{transform:scale(.2) rotate(-90deg);opacity:0}35%{transform:scale(1) rotate(0);opacity:1}75%{opacity:1}100%{transform:scale(1.1) rotate(30deg);opacity:0}}
/* Dead Calm stays on any one fighter in the spotlight while their team is under it */
.st-on .waterring,.st-by .waterring{inset:-12px -14px}
.acard .waterring{inset:-14px}
/* Doma: ice petals around the target, the middle stays clear */
.lotusfx{position:absolute;top:50%;left:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;z-index:2}
.st-on .lotusfx{top:38%}
.acard .lotusfx{top:34%;width:112%}
.lotusfx path{fill:rgba(205,240,255,.9);stroke:#fff;stroke-width:.5;filter:drop-shadow(0 0 4px #7fd0ff);opacity:0;animation:lotusopen 1.7s var(--d) ease-out both}
@keyframes lotusopen{0%{opacity:0;transform:translateY(14px)}30%{opacity:1;transform:none}72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
/* Rengoku: Flame Tiger tears across the screen; Ninth Form swallows it in fire */
.tband{position:absolute;left:0;right:0;top:calc(50% - 21vmin);height:42vmin;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(255,80,20,0),#ff5a1c 22%,#ffc24a 50%,#ff5a1c 78%,rgba(255,80,20,0));filter:drop-shadow(0 0 26px #ff6a1f);animation:tigerrun .95s cubic-bezier(.3,.7,.5,1) both}
.tband b{font-family:var(--display);font-size:30vmin;line-height:1;color:#fff6dc;text-shadow:0 0 24px #ff3b12}
@keyframes tigerrun{0%{transform:translateX(-115%) skewX(-16deg)}45%{transform:translateX(0) skewX(-16deg)}62%{transform:translateX(0) skewX(-16deg);opacity:1}100%{transform:translateX(115%) skewX(-16deg);opacity:0}}
.nburst{position:absolute;inset:0;background:radial-gradient(circle,#fff3c4 0,#ffae3a 24%,#ff4a12 52%,rgba(150,20,0,.75) 76%,rgba(120,10,0,0) 100%);animation:ninthburst 1.3s ease-out both}
.nspin{position:absolute;top:50%;left:50%;width:170vmax;height:170vmax;margin:-85vmax;border-radius:50%;background:conic-gradient(rgba(255,240,180,.75),rgba(255,70,10,0) 25%,rgba(255,240,180,.75) 50%,rgba(255,70,10,0) 75%,rgba(255,240,180,.75));mix-blend-mode:screen;animation:ninthburst 1.3s ease-out both,calmspin 1.3s linear}
.sfx-ninth .nk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:34vmin;color:#fff;text-shadow:0 0 30px #ff2a00,0 0 8px #000;animation:ninthstamp 1.3s ease-out both}
@keyframes ninthburst{0%{opacity:0;scale:.2}28%{opacity:1;scale:1}66%{opacity:1}100%{opacity:0;scale:1.3}}
@keyframes ninthstamp{0%{opacity:0;scale:2}26%{opacity:1;scale:1}70%{opacity:1;scale:1}100%{opacity:0;scale:1.05}}
/* One Attack's quick strikes, as one beat (Yoriichi, Type Zero) */
.stage.flurry .st-by{animation:lunge .3s ease-in-out var(--n)}
.stage.flurry.rev .st-by{animation:lunge-l .3s ease-in-out var(--n)}
.stage.flurry .st-on{animation:recoil .3s .08s ease-out var(--n)}
.stage.flurry.rev .st-on{animation:recoil-l .3s .08s ease-out var(--n)}
.stage .pop.fl{margin-left:calc((var(--i) - .5) * 40px);animation:floatup 1.2s calc(.1s + var(--i) * .3s) ease-out both}
/* On the fighter a special lands on */
.tfx{position:absolute;top:38%;left:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;z-index:2}
.acard .tfx{top:34%;width:112%}
.tfx .tfi{transform-box:fill-box;transform-origin:center;animation:tfxin 1.5s var(--d,0s) ease-out both}
@keyframes tfxin{0%{opacity:0;transform:scale(.6)}28%{opacity:1;transform:none}72%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.08)}}
.tfx .moon{fill:#c9a6ff;filter:drop-shadow(0 0 5px #8a4dff)}
.tfx .gust{fill:none;stroke:#c9f5da;stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 4px #49d48b)}
.tfx .fly{fill:#c58bff;filter:drop-shadow(0 0 4px #9b5cff);animation:flyin 1.3s var(--d) ease-in both}
@keyframes flyin{0%{opacity:0;transform:translateY(-16px)}30%{opacity:1}75%{opacity:1;transform:translateY(26px)}100%{opacity:0;transform:translateY(34px)}}
.tfx .sash{fill:none;stroke:#f06aa6;stroke-width:6;stroke-dasharray:90 30;filter:drop-shadow(0 0 3px #000)}
.tfx .pflame{fill:#ff6fb5;opacity:.9;filter:drop-shadow(0 0 6px #ff2f92)}
.tfx .thr{stroke:#e0162f;stroke-width:1.1;filter:drop-shadow(0 0 2px #ff3b52)}
/* Yoriichi: a sun rises, thirteen blades of light cross the screen, and 日 lands */
.sunglow{position:absolute;inset:0;background:radial-gradient(ellipse 90% 60% at 50% 72%,rgba(255,232,170,.95),rgba(255,160,40,.55) 42%,rgba(255,90,20,0) 72%);mix-blend-mode:screen;animation:sunup 2.2s ease-out both}
@keyframes sunup{0%{opacity:0;transform:translateY(34%)}30%{opacity:1;transform:none}70%{opacity:.9}100%{opacity:0}}
.sfx-sunform .ys{position:absolute;left:var(--x);top:var(--y);width:74vmin;height:7px;margin-left:-37vmin;border-radius:6px;background:linear-gradient(90deg,transparent,#ffb03a 12%,#fff 50%,#ffb03a 88%,transparent);box-shadow:0 0 14px 3px rgba(255,170,50,.9);transform:rotate(var(--a)) scaleX(0);animation:ycut 1.9s var(--d) cubic-bezier(.2,.9,.3,1) both}
@keyframes ycut{0%{transform:rotate(var(--a)) scaleX(0);opacity:1}7%{transform:rotate(var(--a)) scaleX(1);opacity:1}55%{transform:rotate(var(--a)) scaleX(1);opacity:.75}100%{transform:rotate(var(--a)) scaleX(1);opacity:0}}
.sflash{position:absolute;inset:0;animation:yflash .8s 1.3s ease-out both}
@keyframes yflash{0%{background:rgba(255,240,190,0)}12%{background:rgba(255,240,190,.75)}100%{background:rgba(255,240,190,0)}}
/* Muzan's whips */
.sfx-whips path,.sfx-whips2 path{fill:none;stroke:#b0132a;stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px #ff2a44);stroke-dasharray:600;stroke-dashoffset:600;animation:whip 1.15s var(--d) cubic-bezier(.2,.8,.3,1) both}
@keyframes whip{0%{stroke-dashoffset:600;opacity:1}38%{stroke-dashoffset:0;opacity:1}72%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
/* Gyomei's flail */
.fball{inset:auto!important;top:50%!important;left:50%!important;width:34vmin!important;height:34vmin!important;margin:-17vmin;fill:#8d9098;stroke:#2c2d31;stroke-width:1.5;animation:flail 1.2s cubic-bezier(.6,0,.9,.5) both}
.fchain{position:absolute;top:0;left:50%;width:6px;height:50%;margin-left:-3px;background:repeating-linear-gradient(#a7aab0 0 8px,#3b3c40 8px 12px);transform-origin:top;animation:chain 1.2s cubic-bezier(.6,0,.9,.5) both}
@keyframes flail{0%{transform:translateY(-90vh) rotate(-30deg)}45%{transform:none}52%{transform:scale(1.08)}82%{transform:none;opacity:1}100%{opacity:0}}
@keyframes chain{0%{transform:scaleY(0)}45%{transform:none}82%{opacity:1}100%{opacity:0}}
:has(> .sfx-flail) .reswide,:has(> .sfx-flail) .board{animation:drumshake .5s .5s ease-in-out}
/* Mitsuri's ribbon blade, Obanai's snake */
.sfx-ribbon path{fill:none;stroke:#ff8ec7;stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #ff4f9e);stroke-dasharray:500;stroke-dashoffset:500;animation:whip 1.3s var(--d) ease-out both}
.sfx-snake path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:500;stroke-dashoffset:500;animation:slither 1.5s cubic-bezier(.3,.7,.4,1) both}
.sfx-snake .body{stroke:#e6e6f2;stroke-width:17;filter:drop-shadow(0 0 7px #7a7ad0)}
.sfx-snake .scale{stroke:#4c4c8a;stroke-width:5;stroke-dasharray:9 12;animation-name:slitherd}
.sfx-snake .two{animation-delay:.1s}
@keyframes slither{0%{stroke-dashoffset:500;opacity:1}42%{stroke-dashoffset:0;opacity:1}78%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes slitherd{0%{opacity:0}42%{opacity:1}78%{opacity:1}100%{opacity:0}}
.fang{position:absolute;top:calc(34% - 16vmin);left:50%;width:0;height:0;border-left:3.5vmin solid transparent;border-right:3.5vmin solid transparent;border-top:18vmin solid #fff;filter:drop-shadow(0 0 7px #a99cff);opacity:0;animation:fang .8s .6s cubic-bezier(.5,0,.9,.5) both}
.fang.l{margin-left:-7vmin}.fang.r{margin-left:0}
@keyframes fang{0%{opacity:0;transform:translateY(-14vmin)}35%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
.sfx-snake .ser{position:absolute;left:0;right:0;top:calc(34% - 13vmin);text-align:center;font-family:var(--display);font-size:24vmin;color:#cfc8ff;text-shadow:0 0 18px #4c4c8a;animation:hiland 1.5s ease-out both}
@keyframes hiland{0%,45%{opacity:0;transform:scale(1.6)}58%{opacity:.85;transform:none}82%{opacity:.85}100%{opacity:0}}
/* Enmu's sleep: eyelids close over the screen */
.lid{position:absolute;left:0;right:0;height:52%;background:#07060c;animation:lidt 2s ease-in-out both}
.lid.t{top:0;transform-origin:top}.lid.b{bottom:0;transform-origin:bottom}
@keyframes lidt{0%,100%{transform:scaleY(0)}38%,62%{transform:scaleY(1)}}
.sfx-sleep .spiral{inset:auto;top:50%;left:50%;width:44vmin;height:44vmin;margin:-22vmin;fill:none;stroke:#b28cff;stroke-width:2.2;animation:sleepspin 2s ease-in-out both}
@keyframes sleepspin{0%,22%{opacity:0;transform:rotate(0)}45%,62%{opacity:1}85%,100%{opacity:0;transform:rotate(300deg)}}
/* Hantengu breaks into his emotions */
.sfx-crack polyline{fill:none;stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #ff4a2c);stroke-dasharray:300;stroke-dashoffset:300;animation:whip 1.5s ease-out both}
.sfx .emo,.sfx .husk{position:absolute;top:50%;left:50%;width:24vmin;height:24vmin;margin:-12vmin;display:grid;place-items:center}
.sfx .emo img,.sfx .husk img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:50%;border:3px solid #ff7a5c;box-shadow:0 0 26px rgba(255,74,44,.8);background:#120a08}
.sfx .emo em,.sfx .husk em{font:normal 800 12vmin/1 var(--display);color:#ff7a5c}
.sfx .emo b,.sfx .husk b{position:absolute;right:-4%;bottom:-4%;font-family:var(--display);font-size:8vmin;line-height:1;color:#fff;text-shadow:0 0 10px #ff4a2c,0 2px 6px #000}
.sfx-crack .husk{animation:huskshake .95s linear both}
@keyframes huskshake{0%{opacity:0;transform:scale(.7)}12%{opacity:1;transform:scale(1)}20%,40%,60%,80%{transform:translateX(-1.6vmin) rotate(-3deg)}30%,50%,70%{transform:translateX(1.6vmin) rotate(3deg)}90%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.5)}}
.sfx-crack .mflash{animation:mergeflash 1.25s ease-out both}
.sfx-crack .emo{animation:emotion 1.9s .85s cubic-bezier(.2,1.2,.4,1) both}
@keyframes emotion{0%{transform:scale(.3);opacity:0}25%{transform:translate(var(--x),var(--y)) scale(1);opacity:1}82%{opacity:1;transform:translate(var(--x),var(--y)) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.9)}}
/* The blow that ends the match, and a team's last fighter */
.sfx-final{animation:finalflash .7s ease-out both}
@keyframes finalflash{0%{background:rgba(255,255,255,.55)}100%{background:transparent}}
/* Muzan's whips */
.sfx-final{animation:finalflash 2.2s ease-out both}
.sfx-final i{position:absolute;left:0;right:0;height:13vh;background:#000;animation:barin 2.2s ease-out both}
.sfx-final i:first-child{top:0}.sfx-final i:nth-child(2){bottom:0}
.sfx-final b{position:absolute;bottom:15vh;left:0;right:0;text-align:center;font-family:var(--display);font-size:13vmin;color:#fff;text-shadow:0 0 22px #ff3b12;animation:ninthstamp 2.2s .25s ease-out both}
@keyframes finalflash{0%{background:#fff;backdrop-filter:grayscale(1)}12%{background:transparent;backdrop-filter:grayscale(1)}75%{backdrop-filter:grayscale(1)}100%{backdrop-filter:none}}
@keyframes barin{0%{transform:scaleY(0)}15%,80%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.sfx-lone>span{position:absolute;bottom:17vh;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:5px 14px;white-space:nowrap;border-radius:99px;background:rgba(0,0,0,.75);border:1px solid var(--tc);font-family:var(--display);animation:lonein 1.8s ease-out both}
@keyframes lonein{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sfx,.compassfx,.lotusfx,.tfx{display:none}}
/* Home: Join a TV, Codex and Settings as one slim row of round icons (CK) */
.setbar{gap:6px;margin-bottom:-10px}
.setbar .gear{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:0;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--fg);font-size:.95rem;line-height:1;cursor:pointer}
.setbar .gear:hover{background:rgba(255,255,255,.12)}
.setbar .gear.tvbtn,.setbar .gear.tvjoinbtn{display:none}
@media (min-width:900px){ .setbar .gear.tvbtn{display:inline-flex} }
@media (max-width:899px){ .setbar .gear.tvjoinbtn{display:inline-flex} }
.tvsteps{margin:6px 0 8px;padding-left:20px;color:var(--ink-2);font-size:.92rem;line-height:1.45}
.tvsteps li{margin-bottom:3px}
/* The Endless Dream */
.orderlist{grid-template-columns:repeat(3,1fr);gap:10px}
.ocard{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:12px;background:var(--surface);border:2px solid var(--line-2);color:var(--fg);cursor:pointer}
.ocard.on{border-color:var(--gold)}
.ocard.first{box-shadow:0 0 14px rgba(214,165,77,.6)}
.ocard .onum{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#111;font-weight:800;display:flex;align-items:center;justify-content:center}
.ceremony{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 8px;text-align:center}
.ceremony .cline{margin:0;font-family:var(--display);font-size:1.1rem}
.ceremony .titles .seg{flex-wrap:wrap;justify-content:center}
/* The Sunrise Theme: earned at the Hashira Ceremony */
body.sunrisetheme{--accent:#d98a2b;background:linear-gradient(180deg,#3a2413 0,#1d1613 42%)}
body.sunrisetheme .hero .kanji{background:linear-gradient(160deg,#ffc24a,#d9582b)}
body.sunrisetheme h1{color:#ffe2a8}
/* A demon cut down by a slayer: the card splits along a slash, and the top half slides away */
.slice{position:relative;display:inline-block}
.slice .sl-b{display:block;clip-path:polygon(0 var(--l,56%),100% var(--r,44%),100% 100%,0 100%);filter:grayscale(.5);animation:slfade 1.5s 1s ease-in forwards}
.slice .sl-t{position:absolute;inset:0;display:block;clip-path:polygon(0 0,100% 0,100% var(--r,44%),0 var(--l,56%));animation:sltop 1.3s .55s cubic-bezier(.5,0,.8,.6) forwards}
.slice .sl-line{position:absolute;left:-14%;right:-14%;top:50%;height:3px;background:#fff;box-shadow:0 0 14px 3px var(--cutc,rgba(255,90,60,.9));transform:rotate(var(--ang,-6.8deg)) scaleX(0);animation:slcut .55s .15s ease-out both}
@keyframes sltop{0%{transform:none;opacity:1}30%{transform:translate(10px,-3px) rotate(3deg);opacity:1}100%{transform:translate(38px,70px) rotate(24deg);opacity:0}}
@keyframes slfade{to{opacity:.4}}
@keyframes slcut{0%{transform:rotate(var(--ang,-6.8deg)) scaleX(0);opacity:1}55%{transform:rotate(var(--ang,-6.8deg)) scaleX(1);opacity:1}100%{transform:rotate(var(--ang,-6.8deg)) scaleX(1);opacity:0}}
.stage.sliced .st-on,.st-on.sliced{animation:none!important}
.stage.rev .slice .sl-t{animation-name:sltop-l}
@keyframes sltop-l{0%{transform:none;opacity:1}30%{transform:translate(-10px,-3px) rotate(-3deg);opacity:1}100%{transform:translate(-38px,70px) rotate(-24deg);opacity:0}}
.acard.cutdown{overflow:visible;background:transparent;border-color:transparent}
.acard.cutdown::before{content:'';position:absolute;left:-10%;right:-10%;top:42%;height:4px;z-index:5;background:#fff;box-shadow:0 0 16px 4px var(--cutc,rgba(255,90,60,.9));transform:rotate(var(--ang,-6.8deg)) scaleX(0);animation:slcut .55s .15s ease-out both}
.acard .sl-wrapb,.acard .sl-wrapt{position:absolute;inset:-2px;display:flex;flex-direction:column;border-radius:14px;background:var(--surface);border:2px solid var(--tc);overflow:hidden}
.acard .sl-wrapb{clip-path:polygon(0 var(--l,48%),100% var(--r,36%),100% 100%,0 100%);animation:slfade 1.5s 1s ease-in forwards}
.acard .sl-wrapt{clip-path:polygon(0 0,100% 0,100% var(--r,36%),0 var(--l,48%));animation:sltopa 1.4s .55s cubic-bezier(.5,0,.8,.6) forwards}
@keyframes sltopa{0%{transform:none;opacity:1}30%{transform:translate(14px,-4px) rotate(3deg);opacity:1}100%{transform:translate(70px,240px) rotate(22deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.slice *,.acard.cutdown *,.acard.cutdown::before{animation:none!important}.slice .sl-t{opacity:0}}
/* Zohakuten's wood dragons rise from under the cards */
.sfx-dragons path{fill:none;stroke:#6e4a2a;stroke-width:22;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #1b5c2e);stroke-dasharray:700;stroke-dashoffset:700;animation:whip 1.5s var(--d) cubic-bezier(.2,.8,.3,1) both}
/* The sun: demons smoulder at the edges from sunrise */
.mini .m.smolder .gl.mini{box-shadow:0 0 0 2px #ff7a2b,0 0 12px 3px rgba(255,110,30,.85);animation:smolder 1.3s ease-in-out infinite}
.acard.smolder{box-shadow:0 0 18px 4px rgba(255,110,30,.75),inset 0 -14px 22px -10px rgba(255,90,20,.6);animation:smolder 1.3s ease-in-out infinite}
@keyframes smolder{50%{filter:brightness(1.15) saturate(1.2)}}
/* A Mark's first use: the pattern flares */
.markflare2{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(circle,rgba(214,60,50,.55),transparent 62%);animation:markflare 1.1s ease-out both}
.markflare2 b{font-family:var(--display);font-size:5.5rem;color:#fff2e6;text-shadow:0 0 22px #e0392b}
@keyframes markflare{0%{opacity:0;transform:scale(1.5)}25%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0}}
/* The bottom bar lives in the page, not over it, so it can't cover a button or get stranded mid-screen on iPhones (CK) */
.wrap{min-height:100dvh;display:flex;flex-direction:column}
body.tvmode .wrap{min-height:calc(100dvh / var(--tvz,1))}
#app>.actionbar{position:sticky;bottom:0;margin:auto calc(-1 * max(16px,env(safe-area-inset-left,0px))) 0;padding-top:14px}
.wrap:has(.actionbar){padding-bottom:0}
.actionbar .btn[disabled]{background:var(--surface);opacity:1;color:var(--ink-2)}
/* Nothing scrolls under the iPhone's clock and battery */
.wrap::before{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:5}
@media (prefers-reduced-motion:reduce){.mini .m.smolder .gl.mini,.acard.smolder,.markflare2{animation:none!important}}
/* Each breathing style cuts its own way: colour and angle (--l and --r are where the cut meets each side) */
.cut-water{--cutc:#5ec2ff;--l:52%;--r:48%;--ang:-2.3deg}
.cut-flame{--cutc:#ff7a1f;--l:64%;--r:36%;--ang:-15deg}
.cut-thunder,.cut-darkthunder{--cutc:#ffe14d;--l:72%;--r:28%;--ang:-23deg}
.cut-darkthunder{--cutc:#a14dff}
.cut-sun{--cutc:#ffc24a;--l:60%;--r:40%;--ang:-11deg}
.cut-mist{--cutc:#d8e8f0;--l:46%;--r:54%;--ang:4.6deg}
.cut-wind{--cutc:#49d48b;--l:30%;--r:70%;--ang:21deg}
.cut-stone{--cutc:#c9b28a;--l:50%;--r:50%;--ang:0deg}
.cut-love{--cutc:#ff7ec0;--l:38%;--r:62%;--ang:13deg}
.cut-serpent{--cutc:#9a8cff;--l:68%;--r:32%;--ang:-20deg}
.cut-sound{--cutc:#ff5fa8}.cut-beast{--cutc:#7fb0c9;--l:34%;--r:66%;--ang:18deg}.cut-flower{--cutc:#ffb3d9}.cut-insect{--cutc:#b77cff}
/* A demon turns to ash in the sun; Shinobu's kill turns purple and crumbles */
.crumble{position:relative;display:inline-block}
.crumble>i{position:absolute;left:var(--x);top:40%;width:5px;height:5px;border-radius:2px;background:#bdb3a6;opacity:0;animation:ashfly 1.6s calc(.45s + var(--d)) ease-out forwards}
.crumble .cr-pic{display:block;animation:crumble 1.5s .35s ease-in forwards}
.crumble.wist>i{background:#b77cff}
.crumble.wist .cr-pic{animation-name:crumblew}
.acard.crumbling{background:transparent;border-color:transparent;overflow:visible}
.acard.crumbling>.crumble{position:absolute;inset:0;display:block}
.acard.crumbling>.cr-pic{position:absolute;inset:-2px;display:flex;flex-direction:column;border-radius:14px;background:var(--surface);border:2px solid var(--tc);overflow:hidden;animation:crumble 1.5s .35s ease-in forwards}
.acard.crumbling.wist>.cr-pic{animation-name:crumblew}
@keyframes crumble{0%{opacity:1;filter:none}40%{filter:grayscale(1) brightness(.6) sepia(.5)}100%{opacity:0;filter:grayscale(1) brightness(.4) blur(3px);transform:translateY(8px)}}
@keyframes crumblew{0%{opacity:1;filter:none}40%{filter:hue-rotate(250deg) saturate(2.2)}100%{opacity:0;filter:hue-rotate(250deg) brightness(.6) blur(3px);transform:translateY(8px)}}
@keyframes ashfly{0%{opacity:0;transform:none}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-70px) rotate(120deg)}}
/* Tamayo's healing flowers */
.tfx .bloom{fill:#ff9ec7;filter:drop-shadow(0 0 3px #ff5fa8)}
.tfx .bloom circle{fill:#ffe08a}
@media (prefers-reduced-motion:reduce){.crumble *,.acard.crumbling *{animation:none!important}.crumble>i{display:none}.cr-pic{opacity:.3}}
/* Muzan's second life: red strands knit the card back together */
.tfx .strand{fill:none;stroke:#c1122f;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 3px #ff2a44)}
.stage.fx-revive .st-on .gl{animation:knitin 1.6s .2s ease-out both}
@keyframes knitin{0%{filter:brightness(.25) saturate(2)}70%{filter:brightness(1.3) saturate(1.5)}100%{filter:none}}
/* Akaza's Annihilation Type: the compass opens under the whole enemy team */
.sfx-annihil .annring{inset:auto!important;top:30%!important;left:50%!important;width:min(84vw,46vh)!important;height:min(84vw,46vh)!important;opacity:.62;transform:translate(-50%,-50%);overflow:visible}
.annring g{transform-origin:50% 50%;animation:compassopen 1.5s ease-out both}
.annring line,.annring circle{fill:none;stroke:#7fd8ff;stroke-width:.45;filter:drop-shadow(0 0 2px #ff7ad9)}
.annring polygon{fill:rgba(255,155,227,.55)}
/* Nakime: the biwa note, and shoji doors sliding shut once the fighter is gone */
.sfx-biwa i{position:absolute;top:50%;left:50%;width:24vmin;height:24vmin;margin:-12vmin;border-radius:50%;border:3px solid rgba(210,170,255,.8);animation:drumring 1s var(--d) ease-out both}
.sfx-biwa b{position:absolute;top:50%;left:50%;font-size:3rem;color:#e3ccff;transform:translate(-50%,-50%);text-shadow:0 0 14px #9b5cff;animation:rise 1s ease-out both}
/* Shoji doors slide shut over the one fighter, then they're gone */
.kdoor{position:absolute;top:0;bottom:20px;width:51%;z-index:4;background:repeating-linear-gradient(90deg,#3a2a1c 0 3px,transparent 3px 33%),repeating-linear-gradient(0deg,#3a2a1c 0 3px,#efe6d2 3px 25%);animation:kdoorl .6s .25s ease-in both}
.kdoor.l{left:0}.kdoor.r{right:0;animation-name:kdoorr}
.acard .kdoor{bottom:0;z-index:6}
@keyframes kdoorl{0%{transform:translateX(-105%);opacity:0}25%{opacity:1}100%{transform:none;opacity:1}}
@keyframes kdoorr{0%{transform:translateX(105%);opacity:0}25%{opacity:1}100%{transform:none;opacity:1}}
/* Rui's threads and Gyokko's vase stay on a fighter until their turn comes back */
.gl{position:relative}
.gl.boundthread::after,.acard.boundthread::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(34deg,transparent 47%,#d3122c 47% 49%,transparent 49%),linear-gradient(-26deg,transparent 58%,#d3122c 58% 60%,transparent 60%),linear-gradient(8deg,transparent 30%,#d3122c 30% 32%,transparent 32%)}
.gl.boundpot::after,.acard.boundpot::after{content:'';position:absolute;left:0;right:0;bottom:0;height:58%;z-index:3;pointer-events:none;border-radius:40% 40% 12% 12%;background:linear-gradient(180deg,#6f8fa0,#37505e);box-shadow:inset 0 3px 0 rgba(255,255,255,.3)}
.tfx .pot{fill:#5d7f90;stroke:#27404d;stroke-width:1.5}
.tfx .potl{fill:none;stroke:#c9dbe3;stroke-width:1.5}
/* Hantengu's emotions slam back into one body */
.sfx-merge .emo{animation:mergein 1.25s ease-in both}
.sfx-merge .zoh{width:34vmin;height:34vmin;margin:-17vmin;animation:zohin 1.7s 1.05s ease-out both}
@keyframes zohin{0%{opacity:0;transform:scale(.4)}22%{opacity:1;transform:scale(1.12)}34%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
@keyframes mergein{0%{transform:translate(var(--x),var(--y));opacity:0}25%{transform:translate(var(--x),var(--y));opacity:1}85%{transform:none;opacity:1}100%{transform:scale(1.5);opacity:0}}
.mflash{position:absolute;inset:0;animation:mergeflash 1.6s ease-out both}
@keyframes mergeflash{0%,70%{background:transparent}78%{background:rgba(255,120,80,.7)}100%{background:transparent}}
/* Yushiro's talisman: the fighter fades to an outline for the round */
.mini .m.talisman .gl.mini{opacity:.35;box-shadow:0 0 0 2px #f2ead8}
.acard.talisman{opacity:.4;border-style:dashed}
.tfx .crk,.tfx .wire{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.tfx .crk{stroke:#ffe9d0;filter:drop-shadow(0 0 3px #d9391f)}
.tfx .wire{stroke:#dfe6ea;stroke-width:1;filter:drop-shadow(0 0 2px #fff)}
/* First light at sunrise */
.sfx-sunsweep i{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,226,150,.8) 50%,transparent 70%);animation:sunsweep 1.8s ease-in-out both}
@keyframes sunsweep{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
/* Kyogai's drum turns the room */
:has(> .sfx-tilt) .reswide,:has(> .sfx-tilt) .board{animation:roomtilt 1.2s ease-in-out}
@keyframes roomtilt{0%,100%{transform:none}35%{transform:rotate(-5deg)}70%{transform:rotate(3deg)}}
/* Round 1: both teams slam in */
.reswide.opener .rcol{animation:slamtop .5s .15s cubic-bezier(.3,1.4,.5,1) both}
.reswide.opener .rcol:last-child{animation-name:slambot}
.board.opener .arow.top{animation:slamtop .5s .15s cubic-bezier(.3,1.4,.5,1) both}
.board.opener .arow.bot{animation:slambot .5s .15s cubic-bezier(.3,1.4,.5,1) both}
@keyframes slamtop{0%{transform:translateY(-120px);opacity:0}100%{transform:none;opacity:1}}
@keyframes slambot{0%{transform:translateY(120px);opacity:0}100%{transform:none;opacity:1}}
/* The match's star steps forward */
.winseals .star{position:relative;z-index:2;transform:scale(1.28) translateY(-6px);filter:drop-shadow(0 0 16px var(--wc))}
@media (prefers-reduced-motion:reduce){.reswide.opener .rcol,.board.opener .arow,.kdoor{animation:none!important}}
/* A picture still decoding shows dark, not a paper-white blank */
.gl:has(img){background:#17130f}
/* The online clock */
#otimer{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:60;padding:3px 12px;border-radius:99px;background:rgba(20,16,12,.85);border:1px solid var(--line-2);color:var(--fg);font-weight:800;font-size:.85rem;font-variant-numeric:tabular-nums;pointer-events:none}
#otimer.low{color:#fff;background:#b3261e;border-color:#ff6b5c}
#otimer[hidden]{display:none}
/* Last round of character animations (CK) */
.tfx .fall{fill:#ffc4dd;animation:petalfall 1.7s var(--d) ease-in both}
@keyframes petalfall{0%{opacity:0;transform:translateY(-14px)}25%{opacity:1}100%{opacity:0;transform:translateY(68px)}}
.ghostcard{position:absolute;left:0;top:0;opacity:0;filter:hue-rotate(160deg) brightness(1.3);animation:ghostslide 1s .1s ease-out both}
@keyframes ghostslide{0%{opacity:.75;transform:none}100%{opacity:0;transform:translateX(-56px) skewX(-8deg)}}
.tfx .fist{fill:#ffe9c9;stroke:#d8552b;stroke-width:1;transform-box:fill-box;transform-origin:center}
.tfx .tzb{fill:#dfe6ea;stroke:#6e7b84;stroke-width:.6;filter:drop-shadow(0 0 3px #fff)}
.tfx .arrow{fill:none;stroke:#ff3b52;stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 3px #ff3b52)}
.tfx .gust2{fill:none;stroke:#bfeee0;stroke-width:3.5;stroke-linecap:round}
.tfx .spear{fill:none;stroke:#ffd25e;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px #ffb03a)}
.tfx .ringx2{fill:none;stroke:#ffd98a;stroke-width:2}
.tfx .puff{fill:rgba(160,90,220,.55);filter:blur(3px)}
.stage.by-michikatsu .st-by{isolation:isolate}
.tfx.sixeyes{left:50%;top:50%;width:190%;height:150%;transform:translate(-50%,-50%);z-index:-1}
.tfx.sixeyes ellipse{fill:rgba(220,50,80,.75);stroke:#ffd25e;stroke-width:.8;filter:drop-shadow(0 0 3px #ff3b52)}
.tfx.ripple{top:48%;width:170%}
.tfx.ripple ellipse{fill:none;stroke:#3b2a5c;stroke-width:2.6}
.stage.by-swamp .st-by .gl,.acard.fly.sinking,.acard.sinking{animation:swampdip 1.6s ease-in-out both}
@keyframes swampdip{0%,100%{transform:none;opacity:1}28%,68%{transform:translateY(30px) scaleY(.6);opacity:0}}
.stage.by-suma .st-by .gl{animation:sumatrip .8s ease-out}
@keyframes sumatrip{0%{transform:none}35%{transform:rotate(14deg) translateY(6px)}70%{transform:rotate(-6deg)}100%{transform:none}}
.stage.shrinking .st-on .gl{animation:cower 1.8s ease-in-out both}
.acard.shrinking{animation:cower 1.8s ease-in-out both}
@keyframes cower{0%{transform:none}25%{transform:scale(.55)}30%{transform:scale(.55) translateX(-2px)}35%{transform:scale(.55) translateX(2px)}40%{transform:scale(.55) translateX(-2px)}45%{transform:scale(.55) translateX(2px)}80%{transform:scale(.55)}100%{transform:none}}
.stage.covering .st-by{animation:coverslide 1.4s ease-in-out both;z-index:3}
.stage.rev.covering .st-by{animation-name:coverslide-l}
@keyframes coverslide{0%,100%{transform:none}35%,70%{transform:translateX(62px)}}
@keyframes coverslide-l{0%,100%{transform:none}35%,70%{transform:translateX(-62px)}}
.crumble.resolve>i{background:#c9a6ff}
.crumble.resolve .cr-pic{animation-name:crumbler}
.acard.crumbling.resolve>.cr-pic{animation-name:crumbler}
@keyframes crumbler{0%{opacity:1;filter:none}45%{filter:brightness(2.6) saturate(.2)}100%{opacity:0;filter:brightness(3) saturate(0)}}
.twist{position:absolute;top:30%;left:50%;display:block;animation:twistgo 1.5s ease-in-out both}
.twist i{position:absolute;left:0;top:calc(var(--i) * 3.6vmin - 16vmin);width:var(--w);height:3.2vmin;margin-left:calc(var(--w) / -2);border:3px solid #6fe3a6;border-radius:50%;box-shadow:0 0 12px #2fbf7a;animation:twistspin .35s linear infinite}
@keyframes twistgo{0%{transform:translateX(-90vw);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(90vw);opacity:0}}
@keyframes twistspin{50%{transform:scaleX(.72) translateX(8px)}}
.wk{position:absolute;left:0;right:0;top:calc(30% - 12vmin);text-align:center;font-family:var(--display);font-size:24vmin;color:#c9f5da;text-shadow:0 0 18px #1f9e62;animation:hiland 1.7s ease-out both}
.sick{inset:auto!important;top:26%!important;left:-20vmin!important;width:26vmin!important;height:26vmin!important;fill:#d3122c;filter:drop-shadow(0 0 8px #ff3b52);animation:sickgo 1.5s ease-in-out both}
.sick.s1{top:38%!important;animation-delay:.14s}
@keyframes sickgo{0%{transform:translateX(0) rotate(0);opacity:1}50%{transform:translateX(112vw) rotate(900deg);opacity:1}100%{transform:translateX(0) rotate(1800deg);opacity:0}}
.ball{position:absolute;left:-13vmin;top:32%;width:11vmin;height:11vmin;border-radius:50%;background:conic-gradient(#e0392b 0 25%,#f4e7c6 0 50%,#2d6cdf 0 75%,#f2c94c 0);box-shadow:inset -6px -8px 14px rgba(0,0,0,.4);animation:ballgo 1.4s linear both}
@keyframes ballgo{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(32vw,16vh) rotate(180deg)}50%{transform:translate(60vw,0) rotate(360deg)}75%{transform:translate(88vw,16vh) rotate(540deg)}100%{transform:translate(124vw,-4vh) rotate(720deg)}}
.sfx-kunai i{position:absolute;top:34%;left:50%;width:4px;height:6vmin;background:linear-gradient(#fff,#6e7b84);transform:rotate(var(--a));animation:kunaiout .8s var(--d) ease-out both}
@keyframes kunaiout{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}100%{opacity:0;transform:rotate(var(--a)) translateY(-44vmin)}}
.smh{position:absolute;left:0;right:0;top:32%;text-align:center;font-family:var(--display);font-size:13vmin;color:#ffe08a;text-shadow:0 3px 0 #7a2a00,0 0 18px #000;animation:smhin 1.6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes smhin{0%{opacity:0;transform:scale(.4) rotate(-6deg)}22%{opacity:1;transform:rotate(-6deg)}78%{opacity:1;transform:rotate(-6deg)}100%{opacity:0;transform:rotate(-6deg) translateY(-14px)}}
.hrun{position:absolute;width:15vmin;height:15vmin;object-fit:cover;border-radius:50%;border:2px solid var(--gold)}
.hrun.mice{bottom:16vh;left:calc(var(--i) * 17vmin - 22vmin);width:12vmin;height:12vmin;animation:miceflex 1.5s calc(var(--i) * .07s) ease-in-out both}
@keyframes miceflex{0%{opacity:0;transform:translateY(24px)}20%{opacity:1;transform:none}40%{transform:scale(1.2)}60%{transform:none}80%{opacity:1;transform:scale(1.2)}100%{opacity:0}}
.hrun.fly{top:16%;left:-16vmin;animation:crowfly 1.5s ease-in-out both}
@keyframes crowfly{0%{transform:translate(0,0) rotate(6deg)}50%{transform:translate(60vw,-4vh) rotate(-4deg)}100%{transform:translate(124vw,3vh) rotate(6deg)}}
.hrun.pad{bottom:16vh;left:-16vmin;animation:catpad 1.6s ease-in-out both}
@keyframes catpad{0%{transform:translateX(0)}45%,62%{transform:translateX(50vw)}100%{transform:translateX(0);opacity:0}}
.hrun.haul{bottom:16vh;right:-16vmin;animation:gotohaul 1.7s ease-in-out both}
@keyframes gotohaul{0%{transform:translateX(0)}40%,55%{transform:translateX(-46vw)}100%{transform:translateX(30vw);opacity:0}}
.hcup{position:absolute;left:50%;top:40%;font-size:13vmin;transform:translateX(-50%);animation:cupin 1.6s ease-out both}
.hcup.tea{top:auto;bottom:18vh}
@keyframes cupin{0%{opacity:0;margin-left:-44vw}35%{opacity:1;margin-left:0}80%{opacity:1}100%{opacity:0}}
.hwash{position:absolute;inset:0;background:radial-gradient(circle at 50% 70%,rgba(110,220,150,.4),transparent 60%);animation:sunup 1.6s ease-out both}
@media (prefers-reduced-motion:reduce){.stage.shrinking .st-on .gl,.acard.shrinking,.stage.covering .st-by,.ghostcard{animation:none!important}}
/* Home: labelled buttons, and the name question as a pop-up (CK) */
.setbar .gear{width:auto;padding:0 10px;border-radius:99px;font-size:.76rem;gap:4px;white-space:nowrap}
.setbar{margin-bottom:8px}
.modal .in.askname{margin:0;gap:6px;border-radius:14px}
.csp{display:block;margin-top:4px;font-size:.62rem;line-height:1.2;min-height:2.4em;color:var(--gold)}
/* Sekido's staff: three crimson strikes from above */
.sfx-redbolt{animation:redflash .7s ease-out both}
.sfx svg.rb{inset:0 auto auto auto;width:16vmin;height:58%}
.sfx svg.rb.r0{left:12%}.sfx svg.rb.r1{left:calc(50% - 8vmin)}.sfx svg.rb.r2{left:calc(88% - 16vmin)}
.sfx-redbolt polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;animation:boltdraw .8s cubic-bezier(.2,.9,.2,1) both}
.sfx-redbolt .r1 polyline{animation-delay:.1s}.sfx-redbolt .r2 polyline{animation-delay:.2s}
.sfx-redbolt .b1{stroke:#ff4a2b;stroke-width:14;filter:blur(5px)}
.sfx-redbolt .b2{stroke:#ffd9b0;stroke-width:4}
@keyframes redflash{0%{background:rgba(255,60,30,.16)}100%{background:transparent}}
/* helpers: drawn pill and tea, Goto carrying the fighter off */
.sfx svg.hcup{inset:auto;left:50%;top:40%;width:18vmin;height:auto;overflow:visible}
.sfx svg.hcup.tea{top:auto;bottom:18vh;width:16vmin}
.hcup .steam{animation:steamup 1.5s ease-in-out infinite}
@keyframes steamup{0%{opacity:0;transform:translateY(6px)}50%{opacity:.9}100%{opacity:0;transform:translateY(-8px)}}
.hrun.hauled{bottom:16vh;left:calc(50% - 7vmin);animation:gothauled 1.7s ease-in-out both}
@keyframes gothauled{0%,40%{transform:none}52%{transform:translateY(-3vh) rotate(-10deg)}100%{transform:translate(62vw,-3vh) rotate(-10deg);opacity:0}}
.reportbox{width:100%;box-sizing:border-box;margin-bottom:8px;padding:10px;border-radius:10px;border:1px solid var(--line-2);background:rgba(0,0,0,.3);color:var(--fg);font:inherit;resize:vertical}
/* splash: the fan-game notice */
.sp-note{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));max-width:440px;margin:0 auto;padding:0 24px;text-align:center;font-size:.68rem;line-height:1.45;letter-spacing:.02em;color:rgba(240,228,205,.55)}
/* Home: Story as the main card, the next battle's place behind it */
.storyhome{position:relative;overflow:hidden;isolation:isolate;min-height:128px;gap:14px;padding:16px 14px;border:1.5px solid var(--accent);box-shadow:0 8px 26px rgba(224,87,59,.18);background:linear-gradient(120deg,#2c1712,var(--surface))}
.storyhome::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,11,9,.92) 30%,rgba(14,11,9,.55) 70%,rgba(14,11,9,.3))}
.shbg{position:absolute;inset:0;z-index:-2}
.shbg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.shhero{position:absolute;right:0;top:0;bottom:0;width:44%;z-index:-1;opacity:.75;-webkit-mask:linear-gradient(90deg,transparent,#000 55%);mask:linear-gradient(90deg,transparent,#000 55%)}
.shhero img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.storyhome .sprog{width:68px;height:68px;box-shadow:0 0 16px rgba(214,165,77,.35)}
.storyhome .eyebrow{color:var(--gold)}
.shbody b{font-size:1.2rem;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.shbody .muted{color:var(--ink-2);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.storyhome .btn{position:relative;box-shadow:0 4px 14px rgba(0,0,0,.45)}
/* Latest Updates tile */
.updhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:12px 0 8px}
.updlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.updlist li{padding-left:12px;border-left:2px solid var(--accent)}
.updlist b{display:block}
.coinbtns{display:flex;justify-content:center;gap:10px;margin-top:10px}
.coinbtns .btn{min-width:120px}
/* Phones: the title comes first, and Join a TV, Codex and Settings get their own row under the game modes */
@media (max-width:899px){
  .wrap > .setbar{order:1;justify-content:stretch;gap:8px;margin:0}
  .wrap > .modes ~ *{order:2}
  .setbar .gear,.setbar .gear.tvjoinbtn{flex:1 1 0;height:42px;font-size:.86rem;border-radius:12px;justify-content:center}
}

/* Final Form */
.muzanline{font:italic 700 1.2rem/1.35 Georgia,serif;text-align:center;margin:18px 8px}
.revealteam{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:14px 0}
.qpswitch{margin:0 0 12px}
.qpswitch .seg{width:100%}
.qpswitch .seg button{flex:1}
.gmgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gmtile{position:relative;display:block;overflow:hidden;isolation:isolate;aspect-ratio:4/5;padding:0;border-radius:16px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);text-align:left;transition:transform .15s,border-color .15s}
.gmtile:hover,.gmtile:focus-visible{border-color:var(--gold)}
.gmtile:active{transform:scale(.98)}
.gmtile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.gmtile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,12,10,.1) 25%,rgba(15,12,10,.72) 62%,rgba(15,12,10,.96))}
.gmmk{position:absolute;top:10px;left:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(15,12,10,.82);font-family:var(--display);font-size:1.25rem;font-weight:800;line-height:1;color:var(--accent)}
.gmstat{position:absolute;top:10px;right:10px;max-width:calc(100% - 56px);padding:3px 8px;border-radius:999px;background:rgba(15,12,10,.78);color:var(--gold);font-size:.68rem;font-weight:700;line-height:1.3}
.gmtext{position:absolute;left:12px;right:12px;bottom:11px;display:grid;gap:3px}
.gmtext b{font-family:var(--display);font-size:1.12rem;font-weight:800;line-height:1.15}
.gmtext small{color:var(--ink-2);font-size:.8rem;line-height:1.3}
.gmtile.hero{grid-column:1/-1;aspect-ratio:auto;height:188px;border:1.5px solid var(--accent)}
.gmtile.hero img{left:auto;right:0;width:66%;object-position:50% 10%}
.gmtile.hero::after{background:linear-gradient(90deg,#12100e 34%,rgba(18,16,14,.55) 50%,transparent 68%)}
.gmtile.hero .gmtext{right:44%;gap:5px}
.gmtile.hero .gmtext b{font-size:1.65rem;color:#fff4e3}
@media (min-width:520px){.gmgrid{grid-template-columns:repeat(4,1fr)}}
.revealhead{text-align:center;margin-top:12px}
.tauntbar{margin:8px 0}
.tauntlist{display:grid;gap:6px;margin-top:8px}
.tauntline{padding:9px 11px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);text-align:left;font-size:.86rem;line-height:1.3}
.tauntline b{color:var(--fg)}
.tauntpop{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);z-index:9999;width:min(92vw,420px);padding:11px 14px;border-radius:12px;border:1px solid var(--gold);background:#1a1714;color:var(--fg);font-weight:700;font-size:.92rem;line-height:1.3;box-shadow:var(--shadow);animation:pop .3s ease-out}
.onlinepage{display:grid;align-content:start;gap:12px}
.lobby .setline,.lobby .subset{width:100%}
.gmgrid.online{grid-template-columns:repeat(2,1fr)}
.gmgrid.online .gmtile:not(.hero){aspect-ratio:3/2}
.gmgrid.online .gmtile.hero{height:158px}
.gmtile.hero .gmtext small{font-size:.82rem}
.localpage{display:grid;align-content:start;gap:12px}
.vsboard{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vsside{position:relative;display:block;overflow:hidden;isolation:isolate;aspect-ratio:1/1;border-radius:16px;border:1.5px solid var(--tc);background:var(--surface);cursor:text}
.vsside img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.vsside::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 40%,rgba(15,12,10,.94) 82%)}
.vsside span{position:absolute;left:10px;right:10px;bottom:52px;color:var(--tc);font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.vsside input{position:absolute;left:10px;right:10px;bottom:10px;width:calc(100% - 20px);border-left:3px solid var(--tc);background:rgba(15,12,10,.82)}
.vsmark{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(-4deg);z-index:2;display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:var(--accent);color:#fff8ee;font-family:var(--display);font-size:1.45rem;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.vshint{text-align:center;margin:0}
.gmgrid.home .gmtile{aspect-ratio:3/2}
.gmgrid.home .gmtext b{font-size:1.08rem}
.gmgrid.home .gmtext small{font-size:.76rem}
details.panel{display:block;padding:13px 16px}
details.panel summary{font-weight:700}
details.panel[open]>summary{margin-bottom:12px}
.newdot{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--accent);color:#fff8ee;font-size:.66rem;font-style:normal;font-weight:800;vertical-align:1px}
.hero{padding-top:12px;gap:4px}
.hero h1{font-size:clamp(2rem,10.5vw,2.8rem);white-space:nowrap;padding-right:0}
.hero .kanji{width:58px;height:58px;font-size:2.3rem;top:8px}
.daily .dart{opacity:.2}
.daily .dgoal{max-width:84%}
.roster{position:relative;display:grid;gap:9px;margin:0 -16px;padding:13px 0 15px;background:linear-gradient(180deg,rgba(214,165,77,.09),rgba(18,16,14,.35));}
.roster::before,.roster::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--check)}
.roster::before{top:0}.roster::after{bottom:0}
.rosterhead{display:flex;align-items:center;gap:8px;margin-top:3px;padding:0 16px;border:0;background:none;color:var(--fg);text-align:left}
.rseal{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--accent);color:#fff8ee;font-family:var(--display);font-size:.9rem;font-weight:800;transform:rotate(-4deg)}
.rosterhead b{font-family:var(--display);font-size:1.08rem}
.rcount{color:var(--gold);font-size:.76rem;font-weight:700;white-space:nowrap}
.rbar{flex:1;min-width:30px;height:5px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.rbar u{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--gold));text-decoration:none}
.rosterhead em{color:var(--muted);font-style:normal;font-size:1.2rem;line-height:1}
.artstrip{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.artstrip::-webkit-scrollbar{display:none}
.artstrip .track{display:flex;gap:9px;width:max-content;padding:4px 16px}
.rp{position:relative;display:flex;flex-direction:column;flex:none;width:68px;padding:3px 3px 0;border:0;border-radius:6px;background:var(--paper);color:var(--paper-ink);box-shadow:0 5px 12px rgba(0,0,0,.5);transform:rotate(1.4deg)}
.rp:nth-child(even){transform:rotate(-1.4deg)}
.rp::after{content:"";position:absolute;top:-3px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.6);transform:translateX(-50%)}
.rp.marked{background:var(--mark);color:#fff}
.rp.marked::after{background:var(--paper)}
.rp.demon{background:#2b2336;color:var(--fg)}
.rp.demon::after{background:var(--p2)}
.rp.lock{background:#26211c;color:var(--muted)}
.rp.lock::after{background:var(--line-2)}
.rp img{display:block;width:100%;height:68px;border-radius:3px;object-fit:cover;object-position:50% 18%}
.rp span{padding:3px 1px 4px;font-size:.62rem;font-weight:800;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp.lock img{filter:grayscale(1) brightness(.3) blur(3px)}
.rp.lock::before{content:"?";position:absolute;inset:3px 3px 20px;z-index:1;display:grid;place-items:center;font-family:var(--display);font-size:1.6rem;font-weight:800;color:var(--ink-2)}
.vsside strong{position:absolute;left:10px;right:10px;bottom:11px;font-family:var(--display);font-size:1.35rem;font-weight:800;line-height:1.3}
.gmgrid.qp .gmtile:not(.hero){aspect-ratio:3/2}
.gmgrid.qp .gmtile.hero{height:124px}
.gmgrid.qp .gmtile.hero .gmtext b{font-size:1.45rem}
.gmtile img{object-position:50% 12%}
.gmtext b{font-size:1.02rem}
.gmgrid.home .gmtext small,.gmgrid.qp .gmtext small{font-size:.72rem}
.storyhome,.daily{padding-block:11px}
.gmgrid.qp .gmtile.hero:first-child{border:1px solid var(--line-2)}
.movecard{display:grid;gap:6px;padding:13px 14px;border-radius:14px;border:1.5px solid var(--gold);background:rgba(214,165,77,.1)}
.movecard b{font-family:var(--display);font-size:1.1rem}
.movecard span,.movecard small{color:var(--ink-2);font-size:.86rem;line-height:1.35}
.movecard .btn{justify-self:start}
.daily.slim{flex-direction:row;align-items:center;gap:12px;padding:9px 12px;border-radius:13px;border-width:1px;background:var(--grain),var(--surface)}
.daily.slim .dbody{flex:1;min-width:0}
.daily.slim .eyebrow{font-size:.64rem}
.daily.slim .dgoal{max-width:none;font-size:.95rem;line-height:1.2;text-shadow:none}
.gmgrid.home .gmtile.hero{aspect-ratio:auto;height:128px}
.kickbtn{margin-left:auto;width:30px;height:30px;padding:0;border:1px solid var(--line-2);border-radius:8px;background:transparent;color:var(--muted);font-size:1.1rem;line-height:1}
.pushask .muted{font-size:.76rem;line-height:1.25}