/* DISSOLVE — the Fat Ninjas look. Paper cards on a world illustration, ink
   outlines with a hard drop, Lilita One for the big words and Nunito for the
   rest. One green means "you can act here"; gold is for winning. The board is
   a courtyard in whichever world the room landed in, and a dissolved square
   is a pit, not a grey tile. */

@font-face { font-family: "Lilita One"; font-weight: 400; src: url(/fonts/lilita-one.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; font-weight: 200 1000; src: url(/fonts/nunito.woff2) format("woff2"); font-display: swap; }

:root {
  --display: "Lilita One", "Arial Black", Impact, sans-serif;
  --ui: "Nunito", ui-rounded, -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ground: #f4ead2; --paper: #fdf7e8; --paper-2: #ecdfc0; --sand: #e9d8a6;
  --ink: #232a4a; --dim: #6b6a78; --edge: #232a4a;
  --green: #3f8a37; --green-2: #2f6e2a; --gold: #e8b52a; --gold-2: #b8860b; --red: #c8402a;
  --shadow: 0 4px 0 rgba(35, 42, 74, .35);
  /* the world: set per room from the illustration list */
  --bg: url(/art/bg/bamboo.jpg);
  --tile: #d9c78f; --tile-2: #cdb97e; --rim: #66a343; --pit: #2a2416; --veil: rgba(244, 234, 210, .62);
  --radius: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--ink); }
html, body { margin: 0; height: 100%; color: var(--ink); }
body { background: transparent; }
body { font: 600 15px/1.35 var(--ui); overscroll-behavior: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(var(--veil), var(--veil)), var(--bg) center / cover no-repeat; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--ink); }

.boot { padding: 40vh 0; text-align: center; font: 400 28px var(--display); letter-spacing: .06em; color: #fff; text-shadow: 3px 3px 0 var(--ink); }

/* ── the stage: one 10:16 rectangle for everyone ─────────────────────────── */

#app { min-height: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 18px; }
.stage {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
}
@media (min-width: 700px) {
  #app { padding: 20px; align-items: center; min-height: 100vh; }
  .stage {
    width: min(440px, calc((100vh - 40px) * 10 / 16));
    min-height: min(704px, calc(100vh - 40px));
    border-radius: 20px;
    background: rgba(253, 247, 232, .74);
    border: 3px solid var(--edge);
    box-shadow: 0 8px 0 rgba(35, 42, 74, .35);
    backdrop-filter: blur(6px);
  }
  .rail { display: flex; }
}

.rail { flex-direction: column; gap: 12px; width: 300px; max-height: calc(100vh - 40px); overflow: auto; font-size: 13px; }
@media (max-width: 699px) { .rail { display: none; } }
.rail h3 { margin: 0 0 8px; font: 800 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.rail .logline { padding: 4px 0; border-bottom: 1.5px solid var(--paper-2); font: 600 12.5px/1.3 var(--mono); }
.rail .logline b { font-weight: 800; }

/* ── type ─────────────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; }
h2 { font: 400 24px/1.05 var(--display); letter-spacing: .02em; }
.wordmark { font: 400 20px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); text-shadow: 2px 2px 0 var(--gold); }
.wordmark span { font: 800 13px var(--ui); color: var(--dim); margin-left: 8px; letter-spacing: .1em; text-shadow: none; vertical-align: middle; }
.lede { color: var(--dim); margin: 6px 0 0; font-weight: 600; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.label { font: 800 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* ── chrome ───────────────────────────────────────────────────────────────── */

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; }
.topbar .wordmark { flex: 1; text-align: center; }
.chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--paper); border: 2.5px solid var(--edge);
  font: 800 13px/1 var(--ui); white-space: nowrap;
}
.chip.turn { background: var(--ink); color: var(--paper); }
.chip.turn .n { color: var(--gold); }
.chip.out { opacity: .5; text-decoration: line-through; }
.chip .n { font-family: var(--mono); font-weight: 600; color: var(--dim); }

.card { background: var(--paper); border: 2.5px solid var(--edge); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }

button {
  appearance: none; cursor: pointer;
  font: 800 15px var(--ui); color: var(--ink);
  background: var(--paper); border: 2.5px solid var(--edge); border-radius: 10px;
  padding: 0 16px; min-height: 46px; box-shadow: var(--shadow); transition: transform .08s;
}
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(35, 42, 74, .35); }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
button.primary { background: var(--green); color: #fff; border-color: var(--green-2); box-shadow: 0 4px 0 var(--green-2); font: 400 22px var(--display); letter-spacing: .04em; width: 100%; min-height: 54px; }
button.primary:disabled { background: var(--paper-2); color: var(--dim); border-color: var(--edge); box-shadow: none; opacity: .7; }
button.quiet { background: transparent; border-color: transparent; box-shadow: none; }
button.icon { width: 44px; min-height: 44px; padding: 0; font: 400 18px var(--display); border-radius: 50%; }
button.seg { border-radius: 0; flex: 1; min-height: 40px; padding: 0 8px; font-size: 13px; box-shadow: none; }
.segs { display: flex; }
.segs .seg:first-child { border-radius: 10px 0 0 10px; }
.segs .seg:last-child { border-radius: 0 10px 10px 0; }
.segs .seg.on { background: var(--ink); color: var(--paper); }

input[type="text"] { width: 100%; min-height: 46px; padding: 0 12px; border: 2.5px solid var(--edge); border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 800; }
input[type="text"]:focus { outline: none; box-shadow: 0 0 0 3px var(--green); }
input.code { letter-spacing: .3em; text-transform: uppercase; font: 400 22px var(--display); }

.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 2px solid var(--edge); }
.swatch { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font: 400 15px var(--display); color: #fff; border: 2.5px solid var(--edge); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.players .row { min-height: 40px; }
.players .seat-empty { border-top: 1.5px dashed var(--paper-2); padding-top: 8px; }
.swatch.empty { background: transparent; border-style: dashed; color: var(--dim); }
.players .you { color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.players .off { color: var(--dim); font-size: 12px; }
.bigcode { font: 400 46px/1 var(--display); letter-spacing: .22em; color: var(--ink); text-shadow: 3px 3px 0 var(--gold); padding-left: .22em; }

/* ── title (home) ─────────────────────────────────────────────────────────── */

.title { position: relative; margin: -10px -12px 0; padding: 40px 16px 26px; text-align: center; overflow: hidden; min-height: 300px; display: grid; place-items: center; background: var(--ink) var(--bg) center / cover no-repeat; }
@media (min-width: 700px) { .title { border-radius: 17px 17px 0 0; } }
.title .veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(35, 42, 74, .88), rgba(35, 42, 74, .12) 60%); }
.title .words { position: relative; color: #fff; animation: card-in .7s cubic-bezier(.2, .9, .3, 1.2); }
.title h1 { font: 400 clamp(44px, 12vw, 64px)/.95 var(--display); letter-spacing: .03em; margin: 0; text-shadow: 4px 4px 0 var(--ink), 0 14px 40px rgba(0, 0, 0, .45); }
.title .tag { font: 800 13px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: 10px; }
.title .peek { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pop { position: absolute; overflow: hidden; --h: min(24vh, 190px); }
.pop img { position: absolute; height: var(--h); width: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.pop.bottom, .pop.top { width: calc(var(--h) * .9); height: var(--h); }
.pop.left, .pop.right { width: var(--h); height: calc(var(--h) * .9); }
.pop.bottom { bottom: 0; } .pop.top { top: 0; } .pop.left { left: 0; } .pop.right { right: 0; }
.pop.bottom img { animation: pop-b 2.8s ease-in-out forwards; }
.pop.top img { animation: pop-t 2.8s ease-in-out forwards; }
.pop.left img { animation: pop-l 2.8s ease-in-out forwards; }
.pop.right img { animation: pop-r 2.8s ease-in-out forwards; }
@keyframes pop-b { 0% { transform: translate(-50%, 60%) } 25% { transform: translate(-50%, 0%) } 50% { transform: translate(-50%, -3%) scale(1.1) } 72% { transform: translate(-50%, 0%) scale(1.04) } 100% { transform: translate(-50%, 60%) } }
@keyframes pop-t { 0% { transform: translate(-50%, -160%) rotate(180deg) } 25% { transform: translate(-50%, -100%) rotate(180deg) } 50% { transform: translate(-50%, -97%) rotate(180deg) scale(1.1) } 72% { transform: translate(-50%, -100%) rotate(180deg) scale(1.04) } 100% { transform: translate(-50%, -160%) rotate(180deg) } }
@keyframes pop-l { 0% { transform: translate(-50%, -50%) rotate(90deg) translateY(110%) } 25% { transform: translate(-50%, -50%) rotate(90deg) translateY(50%) } 50% { transform: translate(-50%, -50%) rotate(90deg) translateY(47%) scale(1.1) } 72% { transform: translate(-50%, -50%) rotate(90deg) translateY(50%) scale(1.04) } 100% { transform: translate(-50%, -50%) rotate(90deg) translateY(110%) } }
@keyframes pop-r { 0% { transform: translate(-50%, -50%) rotate(-90deg) translateY(110%) } 25% { transform: translate(-50%, -50%) rotate(-90deg) translateY(50%) } 50% { transform: translate(-50%, -50%) rotate(-90deg) translateY(47%) scale(1.1) } 72% { transform: translate(-50%, -50%) rotate(-90deg) translateY(50%) scale(1.04) } 100% { transform: translate(-50%, -50%) rotate(-90deg) translateY(110%) } }
@keyframes card-in { from { transform: translateY(40px) scale(.9); opacity: 0 } }

/* ── the roster: your ninjas still to place, as cards ─────────────────────── */

.reserve { display: flex; gap: 8px; margin-top: 8px; }
.piecechip {
  flex: 1; min-height: 0; padding: 0; overflow: hidden; position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--paper); border-radius: 12px;
}
.piecechip .face { height: 62px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: var(--sand); }
.piecechip .face img { height: 60px; width: auto; transform: translateY(4px); transition: transform .12s; }
.piecechip.on .face img { transform: translateY(2px) scale(1.08); }
.piecechip .pname { font: 400 13px var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 5px 4px 6px; text-align: center; border-top: 2.5px solid var(--edge); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); background: var(--c); }
.piecechip.on { box-shadow: 0 0 0 3px var(--green), var(--shadow); border-color: var(--green-2); }
.piecechip.spent { opacity: .35; box-shadow: none; }
.piecechip.spent .face img { filter: grayscale(1); }

/* the pattern tile: arrows where a ninja moves, crosses where it blows up */
.pattern { width: 44px; height: 44px; flex: none; overflow: visible; }
.pattern .pc { fill: var(--tile); stroke: var(--edge); stroke-width: .06; }
.pattern .pc.alt { fill: var(--tile-2); }
.pattern .arrow { fill: none; stroke: var(--ink); stroke-width: .16; stroke-linecap: round; stroke-linejoin: round; }
.pattern .boom { fill: none; stroke: var(--red); stroke-width: .18; stroke-linecap: round; }
.pattern .me { fill: var(--ink); stroke: var(--paper); stroke-width: .08; }
.piecechip .face { position: relative; }
.piecechip .face .pattern { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; }
.keylegend { display: flex; gap: 14px; justify-content: center; font: 800 10.5px var(--ui); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-top: 6px; }
.keylegend span { display: inline-flex; align-items: center; gap: 5px; }
.keylegend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--tile); border: 1.5px solid var(--edge); position: relative; }
.keylegend .lg-arrow::after { content: "→"; position: absolute; inset: 0; font: 800 10px/11px var(--ui); color: var(--ink); text-align: center; }
.keylegend .lg-boom::after { content: "×"; position: absolute; inset: 0; font: 800 12px/11px var(--ui); color: var(--red); text-align: center; }

/* the key: who moves how */
.key { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.keyrow { display: flex; align-items: center; gap: 10px; }
.keyrow img { width: 48px; height: 48px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 0 rgba(35, 42, 74, .3)); }
.keyrow b { font: 400 16px var(--display); letter-spacing: .04em; }

/* ── the arena ────────────────────────────────────────────────────────────── */

.boardwrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; margin: 8px 0; }
.boardbox { width: min(100%, 56vh); }
.arena { position: relative; border: 3px solid var(--edge); border-radius: 12px; background: var(--rim); box-shadow: 0 6px 0 rgba(35, 42, 74, .35); padding: 4%; }
.arena.shake { animation: shake .4s ease-out; }
@keyframes shake { 0% { transform: translate(0, 0) } 20% { transform: translate(-3px, 2px) } 40% { transform: translate(3px, -2px) } 60% { transform: translate(-2px, 1px) } 80% { transform: translate(2px, -1px) } 100% { transform: translate(0, 0) } }
svg.board { width: 100%; height: auto; touch-action: manipulation; user-select: none; display: block; overflow: visible; }

.pit { fill: var(--pit); }
.pitedge { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: .06; pointer-events: none; }
.cell { fill: var(--tile); stroke: var(--edge); stroke-width: .045; stroke-opacity: .55; }
.cell.alt { fill: var(--tile-2); }
.cell.crease { fill: var(--c); fill-opacity: .42; }
.cell.crease.alt { fill-opacity: .34; }
.creaseline { fill: none; stroke: var(--c); stroke-width: .07; }
.creasemark { fill: var(--c); font: 400 .34px var(--display); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--edge); stroke-width: .04; }
.cell.can { fill: var(--green); fill-opacity: .72; stroke: var(--green-2); stroke-opacity: 1; stroke-width: .06; }
.cell.melt { animation: melt .55s ease-in forwards; transform-box: fill-box; transform-origin: center; pointer-events: none; }
@keyframes melt { 0% { opacity: 1; transform: scale(1) } 60% { opacity: .9; transform: scale(.7) rotate(6deg) } 100% { opacity: 0; transform: scale(.1) rotate(14deg) } }
.cell.pending { fill: url(#pendingstripe); stroke: var(--red); stroke-width: .07; stroke-opacity: 1; }
.coord { fill: #fff; font: 800 .3px var(--ui); pointer-events: none; opacity: .9; paint-order: stroke; stroke: var(--edge); stroke-width: .06; }
.lastfrom { fill: none; stroke: #fff; stroke-width: .06; stroke-dasharray: .14 .1; opacity: .8; pointer-events: none; }
.ghost { opacity: .4; pointer-events: none; }
.blast { pointer-events: none; transform-box: fill-box; transform-origin: center; animation: blast .55s ease-out forwards; }
@keyframes blast { 0% { transform: scale(.2); opacity: 0 } 25% { transform: scale(1.25); opacity: 1 } 70% { transform: scale(1.05); opacity: 1 } 100% { transform: scale(1.4); opacity: 0 } }

.piece { will-change: transform; }
.piece .shadow { fill: rgba(35, 42, 74, .35); }
.piece .mat { fill: var(--c); stroke: var(--edge); stroke-width: .045; }
.piece image { pointer-events: none; transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; }
.piece:nth-child(2n) image { animation-delay: -1.1s; }
.piece:nth-child(3n) image { animation-delay: -2.2s; }
@keyframes breathe { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(1.04) scaleX(.98) } }
.piece.sel .ring { stroke: var(--green); stroke-width: .09; fill: none; }
.piece.stuck .mat { fill-opacity: .45; }
.piece.stuck image { opacity: .55; animation: none; }
.piece.hop image { animation: hop .38s ease-out; }
@keyframes hop { 0% { transform: translateY(0) } 45% { transform: translateY(-.22px) scale(1.06) } 100% { transform: translateY(0) } }

.controls { display: flex; flex-direction: column; gap: 8px; }
.controls .row button { flex: 1; }
.status { min-height: 20px; color: var(--dim); font-size: 13.5px; text-align: center; font-weight: 700; }
.status b { color: var(--ink); font-weight: 800; }

/* ── drawer & toast ───────────────────────────────────────────────────────── */

.scrim { position: absolute; inset: 0; background: rgba(35, 42, 74, .55); border-radius: inherit; z-index: 30; }
.drawer { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 31; background: var(--paper); border: 3px solid var(--edge); border-radius: 16px; padding: 14px; max-height: 82%; overflow: auto; box-shadow: 0 8px 0 rgba(35, 42, 74, .35); animation: card-in .35s cubic-bezier(.2, .9, .3, 1.2); }
.drawer h3 { font: 400 24px var(--display); letter-spacing: .03em; text-shadow: 2px 2px 0 var(--gold); margin-bottom: 8px; }
.drawer ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink); font-weight: 600; }
.drawer li { margin: 6px 0; }
.drawer li b { font-weight: 800; }
.toast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 9px; font: 800 13px var(--ui); z-index: 40; white-space: nowrap; animation: toastin 2.6s ease forwards; }
@keyframes toastin { 0% { opacity: 0 } 8% { opacity: 1 } 80% { opacity: 1 } 100% { opacity: 0 } }

/* ── the result ───────────────────────────────────────────────────────────── */

.banner { text-align: center; padding: 6px 0 4px; }
.banner .hero { position: relative; width: 110px; height: 110px; margin: 0 auto 4px; }
.banner .hero img { position: relative; z-index: 2; height: 110px; width: auto; display: block; margin: 0 auto; animation: hero-pop .6s cubic-bezier(.2, .9, .3, 1.4); transform-origin: 50% 100%; filter: drop-shadow(0 4px 0 rgba(35, 42, 74, .35)); }
@keyframes hero-pop { from { transform: scale(.4) } }
.banner .hero .burst { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle, var(--gold) 0, rgba(232, 181, 42, .5) 45%, rgba(232, 181, 42, 0) 70%); animation: burst 1.2s ease-out infinite alternate; }
@keyframes burst { from { transform: scale(.85) } to { transform: scale(1.1) } }
.banner h2 { font: 400 clamp(30px, 8vw, 40px)/1 var(--display); text-shadow: 3px 3px 0 var(--gold); letter-spacing: .03em; }
.banner .names { font: 800 12px var(--ui); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin-top: 6px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.stats div { background: var(--sand); border-radius: 10px; padding: 8px 4px; display: flex; flex-direction: column; text-align: center; }
.stats b { font: 400 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.stats span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin-top: 3px; font-weight: 800; }
.badge { font: 800 10.5px var(--ui); padding: 2px 7px; border-radius: 999px; background: var(--gold); border: 1.5px solid var(--edge); color: var(--ink); letter-spacing: .06em; text-transform: uppercase; }