/* Gladiator's Arena - aplexotools.com/arena. Self-contained: the site's fonts and Wowdle's icons; the only requests go to this site's own /api.
   The pit (stage3d.js) fills the window and everything here lies over it. The look is the game a raider knows: dark slate
   panels with a worn gold edge, square icons in coloured frames, bars with numbers on them. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('/fonts/sora-latin.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #07060c; --panel: #17141f; --panel-2: #1f1b29; --ink: #0c0a12; --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
  --text: #f2eee4; --muted: #b3ab9c; --dim: #7d766b;
  --gold: #ffd76a; --gold-2: #c8963a; --gold-3: #7a6535; --blood: #e8463c; --good: #4be06a; --bad: #ff5a5a; --xp: #a66bff;
  --display: Sora, Inter, system-ui, sans-serif; --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1); --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --np-w: 248px; --low: 190px; --topy: 82px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; height: 100%; overflow: hidden; color: var(--text); font: 14px/1.5 var(--font); background: var(--bg); overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--gold); color: #1a1206; font-weight: 700; }
.skip:focus { top: 12px; }
kbd { font: 700 10px var(--font); letter-spacing: .03em; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .85); }
.shout { position: fixed; left: 0; top: 0; z-index: 999; margin: 0; padding: 8px; max-width: 100%; white-space: pre-wrap; font: 13px monospace; color: #fff; background: #b00020; }

/* ---------- the pit ---------- */
.stage { position: fixed; inset: 0; z-index: 0; background: #05050b; }
.stage .as-gl { transition: filter 1.6s ease; }
body.fallen .stage .as-gl { filter: grayscale(1) brightness(.62) contrast(1.08); }
.calm body.fallen .stage .as-gl, body.fallen.calm .stage .as-gl { transition: none; }
body.sheet-open .as-own, body[data-screen="maker"] .as-own, body.sheet-open #run, body.sheet-open .foot { visibility: hidden; }

/* ---------- the top: brand, the run in short, the page's buttons ---------- */
.top { position: fixed; left: 0; right: 0; top: 0; z-index: 30; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); background: linear-gradient(180deg, rgba(5, 4, 10, .9), rgba(5, 4, 10, .55) 70%, transparent); pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 700 14px var(--display); color: var(--text); flex: none; }
.brand img { display: block; border-radius: 8px; }
.crumb { font: 600 14px var(--display); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumb .sep { color: var(--dim); margin-right: 8px; }
.strip { display: flex; align-items: center; gap: 6px; margin-left: 6px; flex: none; }
.strip-it { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; background: rgba(10, 8, 16, .78); border: 1px solid var(--line-2); font: 700 12px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip-it img { border-radius: 50%; display: block; }
.strip-it.hp .ic { color: #ff5d5d; }
.strip-it.gold b { color: var(--gold); }
.strip-it.wind { color: #9fe8ff; border-color: rgba(120, 220, 255, .45); box-shadow: 0 0 10px rgba(120, 220, 255, .25); }
.strip-it.wind.spent { color: var(--dim); border-color: var(--line); box-shadow: none; text-decoration: line-through; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(14, 12, 20, .78); color: var(--text); padding: 0; font-size: 16px; }
.icon-btn:hover { border-color: var(--gold-2); color: var(--gold); }
.icon-btn[aria-pressed="true"] { border-color: var(--gold-2); color: var(--gold); background: rgba(60, 44, 14, .8); }
#soundBtn .off, #soundBtn[aria-pressed="true"] .on { display: none; }
#soundBtn[aria-pressed="true"] .off { display: block; }
.icon-btn .dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.icon-btn.noted::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.login-link { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 9px; background: #5865f2; color: #fff; text-decoration: none; font: 600 13px var(--font); }
.login-link .ic { fill: currentColor; stroke: none; }
.account { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--font); color: var(--muted); }
.avatar { border-radius: 50%; display: block; }

/* ---------- screens lie over the pit and let it through ---------- */
main { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen { position: absolute; inset: 0; pointer-events: none; }
.boot { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); margin: 0; padding: 10px 18px; border-radius: 10px; background: rgba(10, 8, 16, .8); color: var(--muted); pointer-events: auto; }
.foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: center; padding: 6px 14px calc(6px + env(safe-area-inset-bottom)); font-size: 11px; color: var(--dim); background: linear-gradient(0deg, rgba(5, 4, 10, .9), transparent); pointer-events: none; }
.foot a { pointer-events: auto; color: var(--muted); }
.foot-links { display: flex; gap: 14px; }
.panel { background: linear-gradient(180deg, rgba(31, 27, 41, .96), rgba(18, 16, 25, .97)); border: 1px solid var(--gold-3); border-radius: 12px; box-shadow: 0 0 0 1px #000, 0 20px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 230, 170, .14); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid #4a4257; background: linear-gradient(180deg, #2b2637, #1c1825); color: var(--text); font: 600 13.5px var(--font); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--gold-2); }
.btn:disabled { opacity: .45; }
.btn.gold { border-color: #f1c65a; background: linear-gradient(180deg, #ffe08a, #e2a93a 55%, #a86e17); color: #2a1a02; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 18px rgba(255, 180, 50, .28); text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
.btn.gold:hover:not(:disabled) { filter: brightness(1.08); border-color: #fff0b8; }
.btn.big { min-height: 48px; padding: 0 22px; font: 700 16px var(--display); }
.btn.small { min-height: 30px; padding: 0 10px; font-size: 12px; }
.btn.danger { border-color: #7a2a2a; color: #ffb4b4; }
.btn.danger.armed { background: #7a1f1f; color: #fff; border-color: #ff6a6a; }
.btn.glint { border-color: var(--q, var(--gold)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 14px color-mix(in srgb, var(--q, var(--gold)) 55%, transparent); }
.btn kbd { margin-left: 2px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--gold); text-decoration: underline; font: inherit; }
.mini-x { position: relative; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 7px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); color: var(--muted); }
/* a small button is still a thumb's width to hit */
.mini-x::after, .rp-b::after { content: ''; position: absolute; inset: -7px; }
.mini-x:hover { color: #fff; border-color: var(--gold-2); }

/* ---------- a framed icon ---------- */
.fr { position: relative; display: inline-block; flex: none; line-height: 0; border-radius: 5px; background: #000; box-shadow: 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--q, #6f6146) 82%, #000), 0 2px 6px rgba(0, 0, 0, .5); }
.fr img { display: block; border-radius: 4px; }
.fr-n { position: absolute; right: 2px; bottom: 1px; font: 800 12px/1 var(--font); color: #fff; text-shadow: 0 0 3px #000, 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* ---------- tooltip ---------- */
.tip { position: fixed; z-index: 80; max-width: min(320px, calc(100vw - 12px)); padding: 10px 12px; border-radius: 8px; background: rgba(12, 10, 20, .97); border: 1px solid #8d8474; box-shadow: 0 0 0 1px #000, 0 12px 34px rgba(0, 0, 0, .7); pointer-events: none; }
.tip.card { padding: 0; border: 0; background: none; box-shadow: none; max-width: min(360px, calc(100vw - 12px)); }
.tt p { margin: 0 0 3px; font-size: 13px; line-height: 1.38; }
.tt p:last-child { margin-bottom: 0; }
.tl-name { font: 700 15px var(--display) !important; margin-bottom: 4px !important; }
.tl-slot { color: var(--muted); }
.tl-strong { color: #fff; font-weight: 600; }
.tl-stat { color: #fff; }
.tl-edge { color: #ffe9a8; }
.tl-equip { color: #1eff00; }
.tl-class { color: var(--muted); }
.tl-sell { color: var(--muted); }
.tl-note { color: var(--dim); font-style: italic; margin-top: 6px !important; }
.tl-good { color: #36e25c; }
.tl-bad { color: #ff5a5a !important; }
.tt-cmp { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-2); }
.tl-cmp-head { color: var(--muted); font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 12px; right: 12px; top: 64px; z-index: 90; width: fit-content; margin-inline: auto; transform: translateY(-14px); max-width: min(520px, calc(100vw - 24px)); padding: 9px 16px; border-radius: 9px; background: rgba(16, 13, 24, .96); border: 1px solid var(--gold-3); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); font-weight: 600; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.toast.show { opacity: 1; transform: none; }
/* a note that is not about the fight (the picture was made smaller for a slow device) stands low, over the bar's edge: never on a
   plate, on what the champion is about to do, or on the title of a window */
.toast.low, body[data-screen="between"] .toast.low { top: auto; bottom: calc(var(--low) + 58px); font-size: 12.5px; font-weight: 500; padding: 6px 12px; }
.toast.low.show .link-btn { pointer-events: auto; }   /* (the note lets a tap through to what is under it; its link takes one) */
body.has-win .toast.low { display: none; }             /* (never over a window: it waits until the window is closed) */
/* between fights the road runs along the top: a line of news stands under it, not on its stops */
body[data-screen="between"] .toast { top: 122px; }
.toast.bad { border-color: #a03838; color: #ffd0d0; }
.toast.good { border-color: #2f8a45; color: #d3ffdd; }

/* ================= make a gladiator ================= */
.maker { display: grid; grid-template-columns: minmax(0, 1fr) min(540px, 48vw); gap: 0; padding: 56px 18px 34px; }
.maker-fig { position: relative; pointer-events: auto; touch-action: pan-y; cursor: grab; min-height: 0; }
.maker-fig::after { content: ''; position: absolute; left: 50%; bottom: 7%; width: 46%; height: 10px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c, #ffd76a) 60%, transparent), transparent); opacity: .5; pointer-events: none; }
.fig-hint { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); margin: 0; font-size: 11px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.maker-fig.turned .fig-hint, .doll-hole.turned .fig-hint { opacity: 0; }
.maker-form { pointer-events: auto; align-self: center; max-height: 100%; overflow: auto; padding: 22px 24px 20px; }
.logo { margin: 0; font: 800 34px/1.05 var(--display); letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 0 #000; }
.logo span { background: linear-gradient(180deg, #ffe9a8, #e2a93a 60%, #a86e17); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #000); }
.tagline { margin: 6px 0 14px; color: var(--muted); }
.lbl { display: block; margin: 14px 0 7px; font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 6px 9px; border-radius: 10px; border: 1px solid #3b3447; background: linear-gradient(180deg, #262130, #18151f); text-align: center; min-width: 0; transition: transform .15s var(--ease), border-color .15s; }
.tile:hover { border-color: color-mix(in srgb, var(--c) 70%, #000); }
.tile[aria-checked="true"] { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 18px color-mix(in srgb, var(--c) 40%, transparent), inset 0 0 22px color-mix(in srgb, var(--c) 14%, transparent); transform: translateY(-2px); }
.tile-t { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.tile-t b { font: 700 14px var(--display); color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.race .tile-t b { color: var(--text); }
/* eight races stand in two rows of four: each tile a small row of its own (icon and name), so that the two rows together
   are as tall as the one row of four was and the name row stays in the window. The racial is named in the line under
   the tiles, for the race that is picked: beside an icon its name was cut short */
.tile.race { flex-direction: row; align-items: center; text-align: left; gap: 8px; padding: 6px 7px; }
.tile.race .fr img { width: 30px; height: 30px; }
.tile.race .tile-t b { font-size: 13px; }
.tile.race .tile-t small { display: none; }
.tile-t small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the road: two tiles side by side, a drawn glyph each (a winding road, crossed swords), the road's own sentence under them */
.road-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile.rtile { flex-direction: row; align-items: center; text-align: left; gap: 11px; padding: 9px 12px; }
.tile.rtile .tile-t b { white-space: normal; line-height: 1.15; }
.tile.rtile .tile-t small { white-space: normal; line-height: 1.25; }
.rtile-ic { width: 30px; height: 30px; stroke-width: 1.6; color: var(--c); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 45%, transparent)); }
.road-about { min-height: 0; }
.road-about b { color: var(--gold); font-weight: 600; }
.pick-about { margin: 9px 0 0; font-size: 13px; color: var(--muted); min-height: 3em; }
.pick-about b { color: var(--text); }
.starts { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 8px; color: var(--text); font-size: 12.5px; }
.starts small { color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.name-row { display: flex; gap: 10px; }
.name-row input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 8px; border: 1px solid #4a4257; background: #0d0b13; font: 600 17px var(--display); color: #fff; }
.name-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 215, 106, .18); }
.form-note { min-height: 1.4em; margin: 8px 0 0; color: var(--bad); font-weight: 600; font-size: 13px; }
.secrets-line { margin: 2px 0 0; color: var(--dim); font-size: 12px; letter-spacing: .02em; }   /* one quiet line: how many, never which (finds.js) */
.win.ask { left: 50%; top: max(96px, 20dvh); width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - max(96px, 20dvh) - 12px); transform: translateX(-50%); animation-name: win-in-t; }   /* a question the run asks (finds.js) */
.win.ask .ask-text { margin: 0 0 10px; font-size: 15px; }
.win.ask .lacts .btn { flex: 1 1 100%; white-space: normal; text-align: left; }
.again-box { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 2px; border-radius: 10px; border: 1px solid var(--gold-3); background: rgba(60, 44, 14, .35); }
.again-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.again-text b { font: 700 14px var(--display); }
.again-text span { font-size: 12.5px; color: var(--muted); }
/* a returning player has the Again box above the choices: the tagline he has read makes room for it */
.maker-form:has(.again-box:not([hidden])) .tagline { display: none; }

/* ================= the run ================= */
.mid-top { position: absolute; left: 0; right: 0; top: 50px; display: flex; justify-content: center; pointer-events: none; }
.xch { display: flex; align-items: center; gap: 10px; height: 30px; max-width: calc(100vw - 16px); padding: 0 14px; border-radius: 999px; background: rgba(10, 8, 16, .8); border: 1px solid var(--line-2); pointer-events: auto; }
/* two rows of it: the count, and who lands the first blow. Side by side where there is room; on a phone the second under the first */
.xch-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xch-row + .xch-row { flex: 0 1 auto; }
.xch #xchNum { font: 700 12.5px var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.xch-pips { display: flex; gap: 3px; }
.xch-pips i { width: 7px; height: 7px; border-radius: 50%; background: #2c2738; }
.xch-pips i.sudden { box-shadow: 0 0 0 1px #8a2a2a; }
.xch-pips i.done { background: #8a7a52; }
.xch-pips i.done.sudden { background: #c94040; }
.xch-pips i.now { background: var(--gold); box-shadow: 0 0 8px var(--gold); transform: scale(1.35); }
.xch-pips i.now.sudden { background: #ff5a5a; box-shadow: 0 0 8px #ff5a5a; }
.xch-note { font: 700 11.5px var(--font); color: #ff7a7a; white-space: nowrap; }
/* who strikes first this exchange: one short word by the counter, and a lit marker on that fighter's plate */
.xch-first { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 1px 7px 1px 5px; border-radius: 999px; font: 800 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: rgba(255, 215, 106, .14); border: 1px solid rgba(255, 215, 106, .5); color: var(--gold); }
.xch-first b { font: inherit; letter-spacing: inherit; }
.xch-first .xf-who { min-width: 0; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }   /* a long name gives way; the word after it never does */
.xch-first .xf-what { flex: none; }
.xch-first .ic { flex: none; width: 11px; height: 11px; fill: currentColor; stroke: none; }
.xch-first.his { background: rgba(255, 90, 90, .14); border-color: rgba(255, 110, 100, .55); color: #ff9a8a; }
.xch-first.idle { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #cfc8ba; }   /* he strikes no blow this exchange */
.xch-first.idle.answers { background: rgba(255, 150, 40, .16); border-color: rgba(255, 170, 70, .7); color: #ffbe6a; }   /* no blow of his own, but his stance answers one (a coil, a Sidestep, a Bristle) */
.xch-first.opener { box-shadow: 0 0 10px rgba(255, 215, 106, .45); }
.np-init { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 1px 6px 1px 4px; border-radius: 999px; background: linear-gradient(180deg, #ffe08a, #e2a93a); color: #2a1a02; font: 800 9px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 0 1px #000, 0 0 12px rgba(255, 200, 80, .75); animation: first-in .36s var(--bounce); }
.np-init .ic { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.np-right .np-init { background: linear-gradient(180deg, #ff9a8a, #d9362c); color: #fff; box-shadow: 0 0 0 1px #000, 0 0 12px rgba(255, 80, 60, .7); }
.np-init.opener { box-shadow: 0 0 0 1px #000, 0 0 18px rgba(255, 230, 120, .95); }
.np-init.unsure { background: linear-gradient(180deg, #e9d9a8, #b89a52); box-shadow: 0 0 0 1px #000; }   /* first, unless his hidden move is quick */
@keyframes first-in { from { transform: scale(1.6); opacity: 0; } }
.calm .np-init { animation: none; }
.np-first .np-box { border-color: rgba(255, 226, 160, .6); }
.np-intent.first { border-color: #ff8a6a; }
.np-intent.first .np-intent-t i { color: #ffb4a4; }
.np-intent.answers { border-color: #ffa94a; }
.np-intent.answers .np-intent-t i { color: #ffbe6a; font-weight: 700; }   /* a stance that answers a blow: what comes back is the line to read */
.xch.sudden { border-color: #8a2a2a; box-shadow: 0 0 16px rgba(255, 60, 60, .25); }
.road { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; pointer-events: auto; }
.rp { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 84px; position: relative; }
/* the road between the stops is a track of dashes: walked, it is gold; the stop he stands at sends out a ring, the next one glows red (a camp warm) */
.rp + .rp::before { content: ''; position: absolute; right: calc(50% + 17px); top: 15px; width: calc(100% - 28px); height: 2px; background: repeating-linear-gradient(90deg, #3a3346 0 5px, transparent 5px 9px); }
.rp.s-done + .rp::before, .rp.s-here::before { background: repeating-linear-gradient(90deg, var(--gold-2) 0 5px, transparent 5px 9px); }
.rp-b { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #4a4257; background: radial-gradient(circle at 50% 35%, #231d2e, #110e17); color: var(--muted); padding: 0; font-size: 15px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.rp.k-gate .rp-b { border-radius: 8px; }
.rp.s-done .rp-b { border-color: var(--gold-3); color: var(--gold-2); }
.rp.s-here .rp-b { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px rgba(255, 215, 106, .5); }
.rp.s-here .rp-b::before { content: ''; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(255, 215, 106, .7); animation: here-ring 1.9s ease-out infinite; pointer-events: none; }
@keyframes here-ring { 0% { transform: scale(.78); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
.calm .rp.s-here .rp-b::before { animation: none; opacity: .4; }
.rp.s-next .rp-b { border-color: #c94040; color: #ff8a8a; box-shadow: 0 0 12px rgba(255, 70, 50, .35); }
.rp.k-camp.s-next .rp-b { border-color: #c8863a; color: #ffb45a; box-shadow: 0 0 12px rgba(255, 150, 50, .35); }
/* a long name takes a second line (on a phone a third) and is whole ("The Houndma…" and "Gorefist the U…" stood there with room on both sides); a road of few stops gives each of them more room */
.rp-l { font-size: 10.5px; line-height: 1.16; color: var(--muted); max-width: 100%; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-shadow: 0 1px 2px #000; }
.road.few .rp { width: min(108px, calc((100vw - 24px - 6px * (var(--stops, 4) - 1)) / var(--stops, 4))); }
.rp.s-here .rp-l { color: var(--gold); }

/* ---------- the long road: where he stands, over the pit ---------- */
.where { display: flex; justify-content: center; pointer-events: auto; }
.where-b { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--gold-3); background: rgba(10, 8, 16, .84); color: var(--text); font: 600 12.5px var(--font); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.where-b .ic { color: var(--gold); }
.where-b b { font: 700 12.5px var(--display); color: #ffe9a8; white-space: nowrap; }
.where-b span { color: var(--muted); white-space: nowrap; }
.where-b:hover { border-color: var(--gold); }

/* ================= the map of the long road ================= */
/* It covers the pit between the stops: the land in SVG (map.js draws it), scrolling where it is taller than the window (a phone),
   the dock over its foot as between any two fights. Every colour of the land is the stretch's; the places are small drawings. */
.map { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; pointer-events: auto; background: #120d1c; overflow: hidden; }
.map-scroll { width: 100%; height: 100%; overflow: auto; touch-action: pan-x pan-y; scrollbar-width: thin; scrollbar-color: #4a4257 transparent; overscroll-behavior: contain; }
.mapsvg { display: block; font-family: var(--font); user-select: none; -webkit-user-select: none; }
body[data-screen="map"] main::after { display: none; }
.ribbon { fill: none; stroke: rgba(22, 12, 6, .5); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.ribbon-mid { fill: none; stroke: rgba(255, 232, 190, .22); stroke-width: 1.5; stroke-dasharray: 6 11; stroke-linecap: round; }
.seam { stroke: rgba(255, 230, 170, .12); stroke-width: 1; stroke-dasharray: 2 6; }
.st-pill { fill: rgba(8, 6, 14, .55); stroke: rgba(255, 230, 170, .14); stroke-width: 1; }
.st-name { font: 800 15px var(--display); letter-spacing: .02em; paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 3px; }
.st-stops { font: 700 9.5px var(--font); letter-spacing: .14em; text-transform: uppercase; opacity: .85; paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 2px; }
.stars circle { animation: twinkle 3.2s ease-in-out var(--d, 0s) infinite; }
@keyframes twinkle { 50% { opacity: .15; } }
.motes circle { fill: rgba(255, 225, 170, .35); animation: mote var(--t, 9s) ease-in-out var(--d, 0s) infinite; }
@keyframes mote { 0%, 100% { transform: translate(0, 0); opacity: .1; } 30% { opacity: .6; } 50% { transform: translate(14px, -18px); } 80% { opacity: .5; } }
.arena-far .af-base { fill: rgba(0, 0, 0, .35); }
.arena-far .af-wall { fill: #d8c49a; stroke: #4a3418; stroke-width: 1.2; }
.arena-far .af-arch { fill: #2a1a0c; }
.arena-far .af-rim { fill: none; stroke: #ffd76a; stroke-width: 2.2; }
.arena-halo { animation: halo 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { opacity: .55; transform: scale(1.12); } }
.dusk { fill: #1a1030; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.mapsvg.walking .dusk { opacity: .34; }
/* the lines between the places: the server's `to`. Walked gold; from where he stands to the places in reach lit and moving; past a place he did not take, faint */
.ln { fill: none; stroke: rgba(255, 240, 210, .22); stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; }
.ln.walked { stroke: var(--gold-2); stroke-width: 3; stroke-dasharray: none; opacity: .9; }
.ln.open { stroke: #ffe9a8; stroke-width: 3; stroke-dasharray: 8 7; animation: ants 1.1s linear infinite; filter: drop-shadow(0 0 4px rgba(255, 215, 106, .7)); }
@keyframes ants { to { stroke-dashoffset: -30; } }
.ln.dead { stroke: rgba(255, 255, 255, .07); }
/* a place is chosen: the lines on from it are lit (where it leads), and a place of the row after it that cannot be reached from there goes grey */
.ln.onward { stroke: #ffe9a8; stroke-width: 2.4; stroke-dasharray: 2 7; opacity: .95; }
.places .pl.cut { opacity: .28; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
/* a place */
.pl { cursor: default; outline: none; }
.pl .hit { fill: transparent; stroke: none; }
.pl .pg { transition: transform .18s var(--ease); transform-box: fill-box; transform-origin: center; }
.pl.s-next { cursor: pointer; }
.pl.s-next:hover .pg, .pl.s-next:focus-visible .pg, .pl.sel .pg { transform: scale(1.14); }
.pl.s-next:focus-visible .ring { stroke: #fff; }
.pl .ring { fill: rgba(255, 215, 106, .08); stroke: rgba(255, 215, 106, .85); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring-pulse 1.9s ease-out infinite; }
@keyframes ring-pulse { 0% { transform: scale(.82); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.pl.sel .ring { animation: none; opacity: 1; transform: scale(1.05); fill: rgba(255, 215, 106, .16); stroke: var(--gold); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(255, 215, 106, .8)); }
.pl.going .ring { fill: rgba(255, 215, 106, .25); }
.pl.s-passed { opacity: .42; filter: grayscale(.8); }
.pl.s-done { opacity: .82; }
.pl.s-ahead { opacity: .94; }
.pl.s-here .pg { filter: drop-shadow(0 0 6px rgba(255, 215, 106, .55)); }
.pl-name { font: 700 11px var(--font); fill: #f4ead2; paint-order: stroke; stroke: rgba(0, 0, 0, .75); stroke-width: 3px; stroke-linejoin: round; }
.pl-name.two { font-weight: 600; fill: #e2dbcc; }
.pl.s-next .pl-name, .pl.sel .pl-name { fill: #fff; }
.pl.s-here .pl-name { fill: var(--gold); }
.pl-elite { font: 800 8.5px var(--font); letter-spacing: .16em; text-transform: uppercase; fill: var(--gold); paint-order: stroke; stroke: rgba(0, 0, 0, .7); stroke-width: 2.5px; }
.pl-passed { font: 600 8.5px var(--font); font-style: italic; fill: #cfc8ba; paint-order: stroke; stroke: rgba(0, 0, 0, .7); stroke-width: 2.5px; }
.lv-c { fill: #0f0d15; stroke: rgba(255, 255, 255, .42); stroke-width: 1; }
.lv-c.skull { stroke: #c94040; }
.lv-n { font: 800 10px var(--font); }
.lv-skull { color: #ff4d4d; }
.done-mark circle { fill: var(--gold); stroke: #000; stroke-width: 1; }
.done-mark use { color: #1a1206; stroke-width: 3; }
/* the drawings: an arena's gate (an Elite's with the laurel), a gatekeeper's gate, the Grand Arena, a camp, a town, a signpost, the gate of the town he left */
.ar-wall { fill: #cfa972; stroke: #3a2614; stroke-width: 1.3; }
.ar-door { fill: #1a1008; }
.ar-flag { fill: #c94040; stroke: #3a2614; stroke-width: 1; }
.ar-laurel { fill: none; stroke: #ffd76a; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 215, 106, .8)); }
.gt-wall { fill: #6e5447; stroke: #1a0e0a; stroke-width: 1.4; }
.gt-door { fill: #120806; }
.gt-skull { color: #ff5a5a; filter: drop-shadow(0 0 4px rgba(255, 60, 60, .8)); }
.ga-base { fill: rgba(0, 0, 0, .4); }
.ga-wall { fill: #e9d7a8; stroke: #4a3418; stroke-width: 1.4; }
.ga-arch { fill: #2a1a0c; }
.ga-rim { fill: none; stroke: #ffd76a; stroke-width: 2.4; }
.ga-laurel { color: #ffd76a; filter: drop-shadow(0 0 5px rgba(255, 215, 106, .9)); }
.pl.last .pg { filter: drop-shadow(0 0 10px rgba(255, 200, 80, .55)); }
.cp-tent { fill: #8a6a48; stroke: #2a1a0c; stroke-width: 1.3; }
.cp-door { fill: #2a1a0c; }
.cp-logs { fill: none; stroke: #4a2e14; stroke-width: 2; stroke-linecap: round; }
.cp-fire { fill: #ff9a3c; stroke: #ffd76a; stroke-width: .8; filter: drop-shadow(0 0 5px rgba(255, 150, 50, .9)); transform-box: fill-box; transform-origin: 50% 100%; animation: fire-lick .9s ease-in-out infinite; }
@keyframes fire-lick { 50% { transform: scaleY(.84) scaleX(1.08); } }
.tw-house { fill: #b89a74; stroke: #3a2614; stroke-width: 1.2; }
.tw-house.b { fill: #a68a66; }
.tw-roof { fill: none; stroke: #6b2f1e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tw-chimney { fill: #4a3a30; }
.tw-win { fill: #ffd76a; filter: drop-shadow(0 0 3px rgba(255, 200, 80, .9)); }
.ev-post { fill: none; stroke: #6a4a2a; stroke-width: 3; stroke-linecap: round; }
.ev-sign { fill: #d9c39a; stroke: #3a2614; stroke-width: 1.2; }
.ev-sign.b { fill: #c9b38a; }
.ev-q { font: 800 11px var(--display); fill: #2a1a0c; }
.ev-foot { fill: rgba(0, 0, 0, .3); }
.st-wall { fill: #8a7a66; stroke: #1a0e0a; stroke-width: 1.2; }
.st-door { fill: #1a1008; }
/* the gladiator on the map: his class's medallion, bobbing where he stands; the dust of his walk */
.you { pointer-events: none; }
.you-in { animation: you-bob 1.7s ease-in-out infinite; }
@keyframes you-bob { 50% { transform: translateY(-4px); } }
.you-glow { fill: rgba(255, 215, 106, .22); }
.you-ring { fill: #0c0a12; stroke: var(--c, #ffd76a); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(255, 215, 106, .6)); }
.you-pin { fill: var(--c, #ffd76a); stroke: #000; stroke-width: 1; }
.dust { fill: rgba(225, 195, 140, .75); transform-box: fill-box; transform-origin: center; animation: dust-puff .9s ease-out forwards; }
@keyframes dust-puff { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4) translateY(-6px); } }
/* the dock on the map */
.dock.on-map { background: linear-gradient(0deg, rgba(8, 6, 14, .97) 70%, transparent); }
.dock.at-place { padding-top: 16px; background: linear-gradient(0deg, rgba(8, 6, 14, .9) 60%, transparent); }
.dock.at-place .dock-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.pcard.fork { border-color: #5b4f3a; }
.calm .stars circle, .calm .motes circle, .calm .arena-halo, .calm .ln.open, .calm .pl .ring, .calm .cp-fire, .calm .you-in { animation: none; }
.calm .ln.open { filter: none; }
.calm .dusk { transition: none; }
/* a road that says `dark` (the server's word): the same places under no sky. Nothing on the horizon, no stars; fires and windows burn blue */
.mapsvg.dark .arena-far, .mapsvg.dark .arena-halo, .mapsvg.dark .stars { display: none; }
.mapsvg.dark .ribbon { stroke: rgba(2, 6, 12, .6); }
.mapsvg.dark .ribbon-mid { stroke: rgba(160, 215, 255, .2); }
.mapsvg.dark .motes circle { fill: rgba(150, 210, 255, .3); }
.mapsvg.dark .cp-fire { fill: #5ab8ff; stroke: #c8ecff; filter: drop-shadow(0 0 6px rgba(90, 180, 255, .95)); }
.mapsvg.dark .tw-win { fill: #9fd8ff; filter: drop-shadow(0 0 3px rgba(120, 200, 255, .9)); }
.mapsvg.dark .ln { stroke: rgba(190, 225, 255, .2); }

/* ================= a market town, an encounter: places of the long road ================= */
.place { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; pointer-events: auto; overflow: auto; background: #120d1c; scrollbar-width: thin; scrollbar-color: #4a4257 transparent; }
body[data-screen="town"] main::after, body[data-screen="event"] main::after { display: none; }
/* the three lights of the road (map.js has the same): --sky0 the top of the sky, --sky1 the horizon, --ground the ground, --hill the hills */
.place.m-0 { --sky0: #f0cd92; --sky1: #d79b5c; --hill: #a56f39; --ground: #8a5b2e; --ground2: #5a371b; }
.place.m-1 { --sky0: #e8885a; --sky1: #9f3a2a; --hill: #742519; --ground: #5c2a20; --ground2: #381814; }
.place.m-2 { --sky0: #2a2254; --sky1: #15112c; --hill: #1c1536; --ground: #2a2042; --ground2: #140e22; }
.town, .event { position: relative; min-height: 100%; display: flex; flex-direction: column; padding-bottom: calc(var(--low) + 16px); }
.town-sky, .ev-sky { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(180deg, color-mix(in srgb, var(--sky0) 70%, #000) 0%, var(--sky0) 45%, var(--sky1) 100%); z-index: 0; }
.town-hills { position: absolute; left: 0; right: 0; top: 36%; height: 14%; z-index: 0; background: radial-gradient(60% 100% at 20% 100%, var(--hill), transparent 70%), radial-gradient(50% 90% at 70% 100%, color-mix(in srgb, var(--hill) 80%, #000), transparent 70%); }
.town::after, .event::after { content: ''; position: absolute; left: 0; right: 0; top: 46%; bottom: 0; z-index: 0; background: linear-gradient(180deg, var(--ground), var(--ground2)); }
.town-head { position: relative; z-index: 1; padding: 22px 24px 0; text-align: center; }
.town-head small, .ev-where { display: block; font: 700 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #ffe9a8; text-shadow: 0 1px 3px #000, 0 0 10px #000; }
.town-head h2 { margin: 4px 0 2px; font: 800 clamp(30px, 5vw, 46px)/1.05 var(--display); color: #fff; text-shadow: 0 2px 0 #000, 0 0 24px rgba(0, 0, 0, .6); }
.town-head p { margin: 0; color: #f4ead2; text-shadow: 0 1px 3px #000, 0 0 10px #000; font-size: 13.5px; }
.town-purse { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 5px 12px 5px 8px; border-radius: 999px; background: rgba(10, 8, 16, .78); border: 1px solid var(--gold-3); font-size: 12.5px; color: var(--muted); }
.town-purse img { border-radius: 50%; }
.town-purse b { font: 700 16px var(--display); color: var(--gold); }
/* the street: three shopfronts, a keeper's face in each window, his line under the sign */
.street { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; width: min(1120px, 100% - 32px); margin: 18px auto 0; }
.shopfront { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 0 12px; border: 0; background: none; color: var(--text); text-align: center; border-radius: 14px; transition: transform .18s var(--ease); }
.shopfront:hover, .shopfront:focus-visible { transform: translateY(-4px); }
.shopfront .front { width: 100%; max-width: 300px; height: auto; display: block; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); }
.shopfront .lit { filter: drop-shadow(0 0 6px rgba(255, 200, 80, .9)); animation: window-light 2.6s ease-in-out infinite; }
@keyframes window-light { 50% { opacity: .78; } }
.keeper-box { position: absolute; left: 50%; top: 52%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50% 50% 8px 8px; background: radial-gradient(circle at 50% 30%, #2a2235, #0c0a12); border: 2px solid var(--roof); box-shadow: 0 0 0 1px #000, 0 6px 14px rgba(0, 0, 0, .6); overflow: hidden; }
.keeper { width: 100%; height: 100%; display: block; }
.glow-eye { filter: drop-shadow(0 0 3px #b388ff); }
.sign { position: relative; display: inline-flex; align-items: center; gap: 9px; margin-top: -2px; padding: 6px 14px 6px 7px; border-radius: 10px; background: linear-gradient(180deg, #2b2637, #1c1825); border: 1px solid var(--gold-3); box-shadow: 0 0 0 1px #000, 0 8px 20px rgba(0, 0, 0, .55); text-align: left; }
.sign b { display: block; font: 700 16px var(--display); color: var(--gold); }
.sign small { font-size: 11px; color: var(--muted); }
.keeper-line { margin: 10px 10px 0; max-width: 300px; font-size: 12.5px; font-style: italic; line-height: 1.4; color: #f4ead2; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.shop-hint { display: inline-block; margin-top: 7px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line-2); font: 600 11px var(--font); color: #e9dcc0; }
.cobbles { position: relative; z-index: 1; height: 34px; margin-top: 8px; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .25) 30%, transparent 32%) 0 0 / 28px 16px, radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .18) 30%, transparent 32%) 14px 8px / 28px 16px; opacity: .6; }
/* a shop */
/* (it hangs from a fixed line under the top and grows downwards: centred, it grew at both ends when a piece was chosen, so the
   row under the cursor became another row and the tooltip another piece's. The line is under where a toast stands: "Bought ...") */
.win.shop { left: 50%; top: max(104px, 11dvh); width: min(560px, calc(100vw - 20px)); max-height: calc(100dvh - max(104px, 11dvh) - 12px); transform: translateX(-50%); animation-name: win-in-t; }
@keyframes win-in-t { from { opacity: 0; transform: translate(-50%, 12px) scale(.97); } }
.win.shop .win-body { display: flex; flex-direction: column; padding: 10px 12px 12px; }
/* what is chosen can be long (a named piece with what would change): the gold button stays at the foot of the window while it scrolls */
.win.shop .shop-detail .lacts { position: sticky; bottom: -12px; z-index: 2; margin: 10px -11px -10px; padding: 8px 11px 10px; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, rgba(10, 9, 16, 0), rgba(10, 9, 16, .97) 34%); }
.win.shop .win-body > * { flex: none; }
.win.shop.enchanter { width: min(900px, calc(100vw - 20px)); }
.shop-purse { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.shop-purse img { border-radius: 50%; }
.shop-purse b { font: 700 16px var(--display); color: var(--gold); }
.shop-bags { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-bags.full { color: #ff9a9a; }
.shop-tabs { display: flex; gap: 0; margin-bottom: 10px; border: 1px solid #4a4257; border-radius: 8px; overflow: hidden; }
.shop-tab { flex: 1; min-height: 34px; border: 0; border-left: 1px solid #4a4257; background: #1c1825; font-weight: 600; color: var(--muted); }
.shop-tab:first-child { border-left: 0; }
.shop-tab.on { background: linear-gradient(180deg, #ffe08a, #e2a93a); color: #2a1a02; }
.srows { display: flex; flex-direction: column; gap: 5px; max-height: min(44dvh, 420px); overflow: auto; margin: -2px; padding: 2px; }
.srow { position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; padding: 6px 9px 6px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--q, #fff) 18%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--q, #fff) 13%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .035) 60%); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--q, #fff) 70%, transparent); text-align: left; min-width: 0; color: var(--text); }
.srow:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--q, #fff) 20%, rgba(255, 255, 255, .06)), rgba(255, 255, 255, .08) 60%); }
.srow.sel { border-color: var(--gold-2); background: linear-gradient(90deg, color-mix(in srgb, var(--q, #fff) 18%, rgba(120, 90, 30, .22)), rgba(120, 90, 30, .22) 60%); }
.srow.rare .fr { box-shadow: 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--q, #6f6146) 82%, #000), 0 0 14px color-mix(in srgb, var(--q, #fff) 55%, transparent); }
.srow.sold { opacity: .45; }
.srow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.srow-n { font: 700 14px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow-t small { font-size: 11.5px; color: var(--muted); }
.srow.nofit:not(.sold) small { color: #ff9a9a; }
.price { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; background: rgba(0, 0, 0, .45); border: 1px solid var(--gold-3); color: var(--gold); font: 700 12.5px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price img { border-radius: 50%; }
.price.cannot { border-color: #7a2a2a; color: #ff9a9a; }
.price.sold { border-color: var(--line-2); color: var(--dim); }
.shop-detail { margin-top: 10px; }
.shop-note { margin: 10px 0 0; font-size: 11.5px; color: var(--dim); text-align: center; }
.cards3.ench .tcard { padding: 12px 12px 10px; gap: 5px; }
.price-line { color: var(--gold); font-weight: 700; }
.tcard.cannot { opacity: .55; }
.lift-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: 9px; background: rgba(8, 7, 14, .7); border: 1px solid var(--line-2); text-align: left; }
.lift-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lift-t b { font: 700 13px var(--display); }
.lift-t small { font-size: 11.5px; color: var(--muted); }
/* an encounter */
.event .ev-sky { height: 38%; }
.event::after { top: 38%; }
.ev-scene { position: relative; z-index: 1; height: 38%; min-height: 150px; display: flex; align-items: flex-end; justify-content: center; margin: 0 auto; width: min(760px, 100%); }
.ev-art { width: 100%; height: 86%; max-height: 300px; display: block; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5)); }
.ea-ground { fill: rgba(0, 0, 0, .18); }
.ea-fig { transform-box: fill-box; transform-origin: 50% 100%; }
.ea-wood { fill: #6a4a2a; } .ea-wood.d { fill: #4a3018; } .ea-wood.line { fill: none; stroke: #6a4a2a; stroke-width: 3; stroke-linecap: round; }
.ea-sign { fill: #d9c39a; stroke: #3a2614; stroke-width: 1.2; }
.ea-stone { fill: #8a8597; stroke: #2a2535; stroke-width: 1.2; } .ea-stone.d { fill: #6a6577; }
.ea-dark { fill: #120d1c; } .ea-dark.line { fill: none; stroke: #120d1c; stroke-width: 3; }
.ea-flame { fill: #ffb45a; filter: drop-shadow(0 0 5px rgba(255, 170, 60, .9)); animation: fire-lick .9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.ea-gold { fill: #ffd76a; stroke: #7a5a12; stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(255, 215, 106, .7)); }
.ea-water { fill: #2a4a6a; } .ea-bridge { fill: none; stroke: #6a4a2a; stroke-width: 10; stroke-linecap: round; } .ea-bridge.rail { stroke: #8a6a4a; stroke-width: 2.5; }
.ea-bar { fill: none; stroke: #c94040; stroke-width: 4; stroke-dasharray: 10 6; }
.ea-grass { fill: #4a6a2a; } .ea-moon { fill: #e9dcc0; opacity: .8; } .ea-curse { fill: #7a5cc0; filter: drop-shadow(0 0 6px #7a5cc0); animation: fire-lick 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.ea-horn { fill: #cfc8ba; stroke: #2a2535; } .ea-die { fill: #fff; stroke: #2a2535; stroke-width: 1.2; } .ea-blood { fill: #b3261c; } .ea-banner { fill: #c94040; stroke: #3a0a0a; stroke-width: 1.2; }
.ea-grey { fill: #cfc8ba; } .ea-bowl { fill: #6a6577; stroke: #2a2535; } .ea-ash { fill: #4a4257; } .ea-pack { fill: #5a4a3a; stroke: #2a1a0c; stroke-width: 1.2; } .ea-wind { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; stroke-linecap: round; }
.ea-fig circle, .ea-fig path { fill: #8a5a3a; } .ea-fig path { fill: #4a3a5a; }
.ea-fig.hood circle { fill: #2a2235; } .ea-fig.hood path { fill: #3a3447; }
.ea-fig.hurt path { fill: #7a2a2a; } .ea-fig.herald path { fill: #c94040; } .ea-fig.herald circle { fill: #d9a877; } .ea-fig.old path { fill: #6a6577; } .ea-fig.old circle { fill: #d9a877; }
.ev-card { position: relative; z-index: 1; width: min(680px, 100% - 24px); margin: 10px auto 0; padding: 16px 18px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(31, 27, 41, .97), rgba(18, 16, 25, .98)); border: 1px solid var(--gold-3); box-shadow: 0 0 0 1px #000, 0 20px 50px rgba(0, 0, 0, .6); }
.ev-card h2 { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; font: 800 24px/1.1 var(--display); color: #fff; }
.ev-text { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: #ece5d6; }
.choices { display: grid; gap: 9px; }
.choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 11px 13px; border-radius: 10px; border: 1px solid #4a4257; background: linear-gradient(180deg, #262130, #18151f); color: var(--text); text-align: left; transition: transform .15s var(--ease), border-color .15s; }
.choice:hover:not(:disabled), .choice:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.choice.fight { border-color: #7a2a2a; }
.choice.fight:hover:not(:disabled) { border-color: #ff6a6a; }
.choice:disabled { opacity: .55; cursor: default; }
.choice-label { font: 700 15px var(--display); color: var(--gold); }
.choice.fight .choice-label { color: #ff9a8a; }
.choice-lines { margin: 0; padding: 0 0 0 16px; font-size: 13px; line-height: 1.45; color: #e2dbcc; }
.choice-why { font-size: 11.5px; color: #ff9a9a; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .4); border: 1px solid color-mix(in srgb, var(--c, #8d8474) 60%, transparent); color: var(--c, #e9dcc0); font: 700 11.5px var(--font); }
.chip .ic { width: 13px; height: 13px; }
.chip.good { --c: #4be06a; } .chip.bad { --c: #ff8a8a; } .chip.odds { --c: #9fd0ff; } .chip.fight { --c: #ff9a8a; } .chip.cost { --c: #ffd76a; }
.chip .fr { margin-left: -3px; }
.ev-note { margin: 10px 0 0; font-size: 11.5px; color: var(--dim); text-align: center; }
.outcome { margin-top: 6px; }
.outcome-lines { margin: 8px 0 10px; padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.5; color: #fff; }
.die { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 4px; }
.die-face { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, #fff, #d9d2c4); color: #1a1206; font: 800 30px var(--display); box-shadow: 0 0 0 2px #000, 0 8px 18px rgba(0, 0, 0, .5); }
.die.rolling .die-face { animation: die-roll .18s linear infinite; }
@keyframes die-roll { 0% { transform: rotate(-10deg) scale(1.05); } 50% { transform: rotate(8deg) scale(.96); } 100% { transform: rotate(-10deg) scale(1.05); } }
.die.settled.won .die-face { box-shadow: 0 0 0 2px #000, 0 0 22px rgba(75, 224, 106, .8); }
.die.settled.lost .die-face { box-shadow: 0 0 0 2px #000, 0 0 22px rgba(255, 80, 80, .7); background: linear-gradient(180deg, #e9dcc0, #b3aa9a); }
.die small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.die.settled.won small { color: #8df0a0; } .die.settled.lost small { color: #ff9a9a; }
.calm .shopfront .lit, .calm .ea-flame, .calm .ea-curse, .calm .die.rolling .die-face { animation: none; }

.banner { position: absolute; left: 50%; top: 112px; transform: translateX(-50%); width: min(760px, calc(100vw - 24px)); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; opacity: 0; }
.banner.in { animation: banner-in .5s var(--bounce) forwards; }
@keyframes banner-in { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.94); } to { opacity: 1; transform: translateX(-50%); } }
.banner-small { font: 700 12.5px var(--display); letter-spacing: .16em; text-transform: uppercase; color: #e9dcc0; text-shadow: 0 1px 3px #000, 0 0 12px #000; }
.banner-big { font: 800 clamp(26px, 5.4vw, 50px)/1.08 var(--display); color: var(--gold); text-shadow: 0 2px 0 #3a2200, 0 0 26px rgba(255, 170, 40, .6), 0 0 4px #000; }
.banner-sub { margin-top: 3px; font: 600 14px var(--font); color: #f4ead2; text-shadow: 0 1px 3px #000, 0 0 12px #000; max-width: 620px; }
.banner.b-boss .banner-big { font-style: italic; font-weight: 700; font-size: clamp(20px, 3.6vw, 34px); color: #fff; text-shadow: 0 2px 0 #000, 0 0 22px rgba(255, 60, 60, .7); }
.banner.b-intro.b-boss .banner-big, .banner.b-intro .banner-big { font-style: normal; font-weight: 800; font-size: clamp(24px, 4.4vw, 40px); color: #ffe9c2; text-shadow: 0 2px 0 #000, 0 0 22px rgba(255, 90, 60, .55); }
.banner.b-wind .banner-big { color: #b9f0ff; text-shadow: 0 2px 0 #06303c, 0 0 26px rgba(120, 220, 255, .8); }
.banner.b-sudden .banner-big { color: #ff5a4a; text-shadow: 0 2px 0 #2a0000, 0 0 30px rgba(255, 40, 30, .85), 0 0 4px #000; letter-spacing: .04em; text-transform: uppercase; }
.banner.b-sudden .banner-small { color: #ffb0a8; }
.banner.b-sudden { top: 90px; }
.banner.b-sudden .banner-sub { max-width: none; }
/* a level: the word itself is the stage's, in the middle of the pit; this is the line under it and the bar that starts again */
/* with a giant or a creature in the pit his plate and his intent hang where a banner would stand: it stands low instead (hud.js, bannerRoom) */
.banner.b-low { top: auto; bottom: calc(var(--low) + 64px); }
.banner.b-low::before { content: ''; position: absolute; z-index: -1; inset: -14px -30px -12px; background: radial-gradient(ellipse at center, rgba(4, 3, 8, .78), rgba(4, 3, 8, .55) 52%, rgba(4, 3, 8, 0) 72%); pointer-events: none; }
.banner.b-ding { top: 46%; }
.banner.b-ding .banner-sub { font: 700 16px var(--display); color: #fff2c0; }
.banner-bar { position: relative; width: min(420px, 78vw); height: 16px; margin-top: 9px; border-radius: 5px; overflow: hidden; background: #110e18; box-shadow: 0 0 0 1px #000, 0 0 0 2px #3a3246, 0 0 18px rgba(150, 90, 255, .35); }
.banner-bar i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(180deg, #d2adff, #8a45ee 55%, #5a22b0); transition: transform 1.1s var(--ease); }
.banner-bar b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/1 var(--font); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.calm .banner-bar i { transition-duration: .2s; }
/* a card that is held for the reader (a gatekeeper's rule, the first time he is met): a line that runs out with its time, and what ends it sooner */
.banner-go { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.banner-go[hidden] { display: none; }
.banner-go i { display: block; width: min(240px, 56vw); height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow: 0 0 8px rgba(255, 200, 80, .55); transform-origin: left center; animation: go-drain var(--go-ms, 8000ms) linear forwards; }
@keyframes go-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.banner-go b { font: 700 10.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: #e9dcc0; text-shadow: 0 1px 3px #000, 0 0 10px #000; }
/* sudden death: the pit is lit red at its edges for as long as it lasts */
.stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; background: radial-gradient(120% 90% at 50% 55%, rgba(120, 0, 0, 0) 52%, rgba(190, 20, 10, .34) 100%); }
body.sudden .stage::after { opacity: 1; animation: sudden-pulse 2.2s ease-in-out infinite; }
@keyframes sudden-pulse { 50% { opacity: .62; } }
.calm body.sudden .stage::after { animation: none; }
/* the camp: night over the pit, warm where the fire burns */
.stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1s ease; background: radial-gradient(46% 40% at 54% 60%, rgba(255, 150, 50, .13), rgba(10, 14, 40, 0) 70%), linear-gradient(180deg, rgba(6, 10, 44, .5), rgba(8, 10, 34, .18) 55%, rgba(0, 0, 0, 0)); }
body.at-camp .stage::before { opacity: 1; }
/* a blow you take is felt at the edges of the picture: a red flash that fades (under the page's own bars, over the pit); under a
   quarter of your health the edges breathe. Calm leaves it out, as it leaves out the shakes. */
/* (the red is a band along each edge, a fifth of that edge's dimension: on an upright phone a round glow covered the whole width) */
main::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(210, 30, 20, .55), rgba(210, 30, 20, 0) 20%, rgba(210, 30, 20, 0) 80%, rgba(210, 30, 20, .55)), linear-gradient(180deg, rgba(210, 30, 20, .5), rgba(210, 30, 20, 0) 20%, rgba(210, 30, 20, 0) 80%, rgba(210, 30, 20, .5)); transition: opacity .6s ease-out; }
body.hurt main::after { opacity: 1; transition: opacity .04s; }
body.low-hp:not(.hurt) main::after { opacity: .45; animation: low-breath 1.7s ease-in-out infinite; }
@keyframes low-breath { 50% { opacity: .14; } }
body[data-screen="maker"] main::after, body[data-screen="end"] main::after, body.sheet-open main::after, .calm main::after { display: none; }

/* the announcer's caption: over the sand under the fighters, never on a plate, the intent or the bar */
/* (centred by its margins, not by left: 50% and a shift: that way a box can only grow to half the window, and on a phone a line
   stood five rows tall in half the width) */
.caption { position: fixed; left: 12px; right: 12px; bottom: calc(var(--low) + 14px); z-index: 45; width: fit-content; margin-inline: auto; display: flex; align-items: baseline; gap: 9px; max-width: min(640px, calc(100vw - 24px)); padding: 7px 14px 8px; border-radius: 9px; background: rgba(10, 8, 16, .82); border: 1px solid rgba(255, 215, 106, .35); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); font: 600 15px/1.35 var(--font); color: #f4ead2; text-align: left; pointer-events: none; animation: caption-in .18s ease-out; }
.caption-who { flex: none; font: 800 10px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
@keyframes caption-in { from { opacity: 0; transform: translateY(6px); } }
/* while a window is open (a talent draw, the loot, the card at the end) he is read above it, at the top, not underneath it */
body.has-win .caption { bottom: auto; top: 122px; background: rgba(10, 8, 16, .94); }
body.has-win[data-screen="end"] .caption { top: 54px; }
.calm .caption { animation: none; }
@media (max-width: 760px) { .caption { left: 8px; right: 8px; max-width: calc(100vw - 16px); font-size: 13px; padding: 5px 10px 6px; bottom: calc(var(--low) + 8px); } body.has-win .caption { top: 104px; } body.has-win[data-screen="end"] .caption { top: 48px; } }
@media (max-height: 520px) and (min-width: 480px) { .caption { font-size: 12.5px; padding: 4px 10px 5px; bottom: calc(var(--low) + 4px); } body.has-win .caption, body.has-win[data-screen="end"] .caption { top: 46px; } }
.log { position: absolute; left: 12px; bottom: calc(var(--low) + 10px); width: 340px; max-height: min(40vh, 320px); display: flex; flex-direction: column; border-radius: 9px; background: rgba(10, 8, 16, .84); border: 1px solid var(--line-2); pointer-events: auto; }
.log-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 11px; font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); border-bottom: 1px solid var(--line); }
.log-body { overflow: auto; padding: 6px 11px 9px; font-size: 12.5px; line-height: 1.42; user-select: text; }
.log-l { margin: 0; color: #d9d2c4; }
.log-l.head { margin-top: 7px; font: 700 10.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.log-l.head:first-child { margin-top: 0; }
.log-l.good { color: #8df0a0; }
.log-l.bad { color: #ff9a9a; }
.log-l.warn { color: #ffd76a; }
.log-l.gold { color: var(--gold); font-weight: 600; }

/* ---------- nameplates (hung on the fighters by the stage) ---------- */
.np { pointer-events: none; will-change: transform; font-family: var(--font); }
.np-in { position: absolute; left: 0; bottom: 0; width: var(--np-w); transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; }
.np-box { position: relative; padding: 5px 6px 6px; border-radius: 7px; background: linear-gradient(180deg, rgba(26, 21, 34, .84), rgba(9, 8, 15, .86)); border: 1px solid rgba(255, 226, 160, .3); box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 230, 170, .14); pointer-events: auto; }
/* a sliver on the plate's outer edge in the colour of the name: the class on yours, the gold of an Elite or a gatekeeper on his */
.np-box::after { content: ''; position: absolute; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--np-k, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--np-k, transparent) 60%, transparent); pointer-events: none; }
.np-left .np-box::after { left: -1px; } .np-right .np-box::after { right: -1px; }
/* his plate keeps his card (a press or a hover opens it): a small mark on its corner says so */
.np-card { cursor: help; }
.np-info { position: absolute; right: -7px; bottom: -7px; z-index: 1; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #17131f; border: 1px solid rgba(255, 226, 160, .55); color: #e9dcc0; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.np-info .ic { width: 11px; height: 11px; stroke-width: 2.4; }
.np-card:hover .np-info, .np-card:focus-visible .np-info { border-color: var(--gold); color: var(--gold); }
.np-dead .np-info { display: none; }
.compact .np-info { right: -3px; bottom: -6px; width: 15px; height: 15px; }
.np-elite .np-box { border-color: #d9b45a; box-shadow: 0 0 0 1px #5b420f, 0 0 16px rgba(255, 200, 80, .28), 0 6px 18px rgba(0, 0, 0, .55); }
.np-boss .np-box { border: 2px solid #f1c65a; box-shadow: 0 0 0 1px #5b420f, 0 0 22px rgba(255, 80, 60, .45), 0 6px 18px rgba(0, 0, 0, .55); }
.np-elite .np-box::before, .np-boss .np-box::before { content: 'Elite'; position: absolute; right: 8px; top: -8px; padding: 1px 7px 2px; border-radius: 3px; background: linear-gradient(180deg, #ffe08a, #c8963a); color: #2a1a02; font: 800 8.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.np-boss .np-box::before { content: 'Gatekeeper'; background: linear-gradient(180deg, #ff8a6a, #b3261c); color: #fff; }
.np-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; min-width: 0; }
.np-lvl { flex: none; min-width: 21px; height: 21px; display: grid; place-items: center; padding: 0 3px; border-radius: 4px 4px 9px 9px; background: #17131f; border: 1px solid rgba(255, 255, 255, .28); font: 800 12px/1 var(--font); font-variant-numeric: tabular-nums; }
.np-lvl .ic { width: 14px; height: 14px; }
.np-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px/1.15 var(--display); text-shadow: 0 1px 2px #000; }
.np-hp { position: relative; height: 19px; border-radius: 4px; overflow: hidden; background: #0a0910; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .06); }
.np-hp i { position: absolute; inset: 0; transform-origin: left center; }
.np-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--np-c) 78%, #fff), var(--np-c) 46%, color-mix(in srgb, var(--np-c) 60%, #000)); transition: transform .16s ease-out; }
.np-ghost { background: #fff1dc; opacity: .9; transition: transform .7s cubic-bezier(.3, .7, .2, 1) .32s; }
.np-jump i { transition: none !important; }
.np-hp::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -6px 8px rgba(0, 0, 0, .28); pointer-events: none; }
.np-hit { animation: np-hit .28s ease-out; }
@keyframes np-hit { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.np-low .np-fill { animation: np-low .9s ease-in-out infinite; }
@keyframes np-low { 50% { filter: brightness(1.5); } }
.calm .np-low .np-fill { animation: none; filter: brightness(1.25); }
.np-marks i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); transform: none; inset: auto; top: 0; bottom: 0; }
.np-hp-text { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 700 11.5px/1 var(--font); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
.np-res { position: relative; height: 11px; margin-top: 3px; border-radius: 3px; overflow: hidden; background: #0a0910; box-shadow: 0 0 0 1px #000; }
.np-res-fill { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(180deg, color-mix(in srgb, var(--res-c) 75%, #fff), var(--res-c) 55%, color-mix(in srgb, var(--res-c) 62%, #000)); transition: transform .3s ease-out; }
.np-res-text { position: absolute; inset: 0; display: grid; place-items: center; font: 700 8.5px/1 var(--font); letter-spacing: .04em; color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
.np-cast { position: relative; display: flex; align-items: center; gap: 5px; height: 21px; margin-top: 4px; padding: 0 5px 0 2px; border-radius: 4px; overflow: hidden; background: #0a0910; box-shadow: 0 0 0 1px #000, 0 0 10px color-mix(in srgb, var(--cast-c) 50%, transparent); }
.np-cast-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(180deg, color-mix(in srgb, var(--cast-c) 80%, #fff), var(--cast-c) 55%, color-mix(in srgb, var(--cast-c) 55%, #000)); opacity: .9; }
.np-cast-go .np-cast-fill { animation: cast-fill 1s ease-out forwards, cast-pulse 1s ease-in-out 1s infinite; }
@keyframes cast-fill { to { transform: scaleX(1); } }
@keyframes cast-pulse { 50% { filter: brightness(1.35); } }
.calm .np-cast-go .np-cast-fill { animation: none; transform: scaleX(1); }
.np-cast-icon, .np-cast-name, .np-cast-cover, .np-cast-lock { position: relative; z-index: 1; }
.np-cast-cover { flex: none; padding: 1px 5px; border-radius: 3px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(143, 208, 255, .6); font: 700 9px/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: #bfe3ff; white-space: nowrap; }
.np-cast-icon { line-height: 0; }
.np-cast-icon img { display: block; border-radius: 3px; box-shadow: 0 0 0 1px #000; }
.np-cast-name { flex: 1; min-width: 0; font: 700 11.5px/1 var(--font); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-cast-lock { color: #dfe6ef; font-size: 13px; line-height: 0; }
.np-auras { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; pointer-events: auto; }
.np-aura { position: relative; line-height: 0; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--q, #666); animation: aura-in .3s var(--bounce); }
.np-aura.bad { box-shadow: 0 0 0 1px #000, 0 0 0 2px #c0392b; }
.np-aura.good { box-shadow: 0 0 0 1px #000, 0 0 0 2px #3f8fd0; }
.np-aura img { display: block; border-radius: 3px; }
.np-aura b { position: absolute; right: -3px; bottom: -4px; min-width: 13px; padding: 1px 2px; border-radius: 3px; background: #000; font: 800 10px/1 var(--font); text-align: center; color: #fff; }
.np-aura b:empty { display: none; }
@keyframes aura-in { from { transform: scale(1.8); opacity: 0; } }
.np-procs { position: absolute; left: 100%; bottom: 4px; margin-left: 6px; display: flex; gap: 3px; }
.np-right .np-procs { left: auto; right: 100%; margin: 0 6px 0 0; }
.np-proc { line-height: 0; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 10px #ffd76a; animation: proc 1.5s ease-out forwards; }
.np-proc img { display: block; border-radius: 4px; }
@keyframes proc { 0% { transform: scale(1.7); opacity: 0; } 14% { transform: scale(1); opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.np-dead .np-box { filter: grayscale(1); opacity: .55; }
.np-dead .np-auras, .np-dead .np-intent { display: none; }
/* what the champion is about to do */
.np-intent { align-self: center; display: flex; align-items: center; gap: 8px; max-width: 100%; margin-bottom: 3px; padding: 5px 10px 5px 5px; border-radius: 8px; border: 1px solid #b23a30; background: linear-gradient(180deg, rgba(74, 18, 16, .96), rgba(36, 10, 12, .96)); box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, .6); text-align: left; pointer-events: auto; color: #fff; }
.np-intent.pop { animation: intent-pop .42s var(--bounce); }
@keyframes intent-pop { from { transform: translateY(8px) scale(.86); opacity: 0; } }
.np-intent-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.np-intent-t small { font: 700 9px var(--font); letter-spacing: .16em; text-transform: uppercase; color: #ff9a8a; }
.np-intent-t b { font: 700 13.5px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-intent-t i { font: 600 11.5px/1.2 var(--font); font-style: normal; color: #ffd9c2; font-variant-numeric: tabular-nums; }   /* (it may take a second row: a long line was cut at the plate's edge) */
.np-intent.casts { border-color: #ffd76a; box-shadow: 0 0 0 1px #000, 0 0 16px rgba(255, 215, 106, .55); animation: intent-pop .42s var(--bounce), casts 1.1s ease-in-out .5s infinite; }
@keyframes casts { 50% { box-shadow: 0 0 0 1px #000, 0 0 26px rgba(255, 215, 106, .95); } }
.calm .np-intent.casts { animation: none; }
.np-intent.hid { border-color: #5a5468; background: linear-gradient(180deg, rgba(40, 36, 52, .96), rgba(20, 18, 28, .96)); }
.np-q { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; background: #0c0a12; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a5468; font: 800 20px var(--display); color: #cfc8ff; }
/* while the exchange is shown his card waits, dimmed; the moment his move is staged it lights up ("Now"), and a move he had hidden
   is turned over ("Revealed"): the reveal of the duel of nerves (hud.js, holdIntent, revealIntent) */
.np-intent.wait { opacity: .55; filter: saturate(.55) brightness(.85); transition: opacity .35s ease, filter .35s ease; }
.np-intent.now { border-color: #ffd76a; background: linear-gradient(180deg, rgba(96, 40, 18, .97), rgba(42, 14, 12, .97)); box-shadow: 0 0 0 1px #000, 0 0 24px rgba(255, 180, 60, .75), 0 6px 18px rgba(0, 0, 0, .6); animation: intent-now .55s var(--bounce); }
.np-intent.now .np-intent-t small { color: var(--gold); }
.np-intent.now .fr { box-shadow: 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--q, #6f6146) 82%, #000), 0 0 14px color-mix(in srgb, var(--q, #ffd76a) 70%, transparent); }
.np-intent.revealed { animation: intent-flip .6s var(--ease); transform-origin: 50% 100%; }
.np-intent.revealed .np-intent-t small { color: #fff0b8; letter-spacing: .2em; }
@keyframes intent-now { 0% { transform: scale(.92); filter: brightness(2.2); } 45% { transform: scale(1.08); } 100% { transform: none; filter: none; } }
@keyframes intent-flip { 0% { transform: perspective(360px) rotateX(92deg); opacity: 0; filter: brightness(2.4); } 55% { transform: perspective(360px) rotateX(-14deg); opacity: 1; } 80% { transform: perspective(360px) rotateX(6deg); } 100% { transform: none; filter: none; } }
.calm .np-intent.now, .calm .np-intent.revealed { animation: none; }
.calm .np-intent.wait { transition: none; }

/* the bag on the body */
.body-btn { width: 0; height: 0; padding: 0; border: 0; background: none; pointer-events: none; }
.body-btn-in { position: absolute; left: 0; top: 0; transform: translate(-50%, -135%); display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; border: 2px solid var(--q, #fff); background: rgba(12, 10, 20, .88); color: #fff; font: 700 14px var(--display); box-shadow: 0 0 0 1px #000, 0 0 20px color-mix(in srgb, var(--q, #fff) 70%, transparent); pointer-events: auto; cursor: pointer; white-space: nowrap; animation: bob 1.6s ease-in-out infinite; }
.body-btn-in .ic { color: var(--q, #fff); font-size: 17px; }
.body-btn:hover .body-btn-in, .body-btn:focus-visible .body-btn-in { background: rgba(40, 32, 60, .95); }
@keyframes bob { 50% { transform: translate(-50%, -150%); } }
.calm .body-btn-in { animation: none; }
.body-btn.spent .body-btn-in { animation: none; box-shadow: 0 0 0 1px #000; color: #c9c4d4; }   /* nothing is left on it: quiet, and still a button */

/* ---------- the fight's bottom: info line, resource, action bar, experience ---------- */
.hud { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 10px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(5, 4, 10, .94) 62%, transparent); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-info { margin: 0; min-height: 21px; max-width: min(760px, 100%); font: 600 13.5px var(--font); color: #e9e2d0; text-align: center; text-shadow: 0 1px 3px #000; pointer-events: none; }
.hud-info.sel b { color: var(--gold); margin-right: 9px; font-family: var(--display); }
.hud-info.bad { color: #ff8a8a; }
.hud-info .warn { color: #ff8a8a; }   /* what the screen can see is a mistake: a Guard that stops nothing of his blow, a blow into a stance that answers it */
/* whose move is being shown */
.hud-info.turn.mine { color: #bff0c8; }
.hud-info.turn.his { color: #ffb4a4; }
.res { display: flex; align-items: center; gap: 9px; width: min(672px, 100%); font: 700 12px var(--font); }
.res-name { color: var(--res-c); text-transform: uppercase; letter-spacing: .1em; min-width: 52px; text-shadow: 0 1px 2px #000; }
.res-pips { flex: 1; display: flex; gap: 3px; }
.res-pips i { flex: 1; height: 12px; border-radius: 2px; background: #15121c; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .05); }
.res-pips i.on { background: linear-gradient(180deg, color-mix(in srgb, var(--res-c) 70%, #fff), var(--res-c) 50%, color-mix(in srgb, var(--res-c) 60%, #000)); box-shadow: 0 0 0 1px #000, 0 0 7px color-mix(in srgb, var(--res-c) 60%, transparent); }
.res-pips i.spend { animation: spend .7s ease-in-out infinite; }
@keyframes spend { 50% { opacity: .3; } }
.calm .res-pips i.spend { animation: none; opacity: .45; }
.res-num { font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.res-plus { color: var(--dim); font-weight: 600; white-space: nowrap; }
.rage { display: inline-flex; align-items: center; gap: 3px; padding-left: 8px; border-left: 1px solid var(--line-2); }
.rage-l { display: inline-flex; align-items: center; gap: 4px; line-height: 0; margin-right: 3px; }
.rage-l b { font: 700 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #ff9a3c; }
.rage { cursor: help; }
.rage-l img { border-radius: 3px; display: block; }
.rage i { width: 9px; height: 9px; transform: rotate(45deg); background: #1b1620; box-shadow: 0 0 0 1px #000; }
.rage i.on { background: #ff7a3c; box-shadow: 0 0 0 1px #000, 0 0 6px #ff7a3c; }
.bar { display: flex; gap: 12px; padding: 8px; border-radius: 11px; background: linear-gradient(180deg, #2c2636, #15121c); border: 1px solid var(--gold-3); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 230, 170, .18), 0 10px 34px rgba(0, 0, 0, .65); }
.bar-main, .bar-side { display: flex; gap: 6px; }
.bar-side { padding-left: 12px; border-left: 1px solid rgba(255, 230, 170, .16); }
.slot { position: relative; width: 60px; height: 60px; flex: none; padding: 0; border: 0; border-radius: 6px; background: #0b0910; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a5d45; overflow: visible; transition: transform .12s var(--ease), box-shadow .12s; }
.slot img { width: 100%; height: 100%; display: block; border-radius: 5px; }
.slot::after { content: ''; position: absolute; inset: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -14px 14px rgba(0, 0, 0, .34); pointer-events: none; }
.slot:hover:not(.empty):not(.locked) { box-shadow: 0 0 0 1px #000, 0 0 0 2px #e9d39a, 0 6px 12px rgba(0, 0, 0, .5); transform: translateY(-2px); }
.slot:active:not(.empty):not(.locked) { transform: translateY(1px) scale(.97); transition-duration: .05s; }
.slot.empty { background: repeating-linear-gradient(135deg, #100e16 0 6px, #0b0910 6px 12px); box-shadow: 0 0 0 1px #000, 0 0 0 2px #2e2937; }
.slot.empty .slot-key { opacity: .35; }
.slot-key { position: absolute; left: 3px; top: 3px; z-index: 2; padding: 0 3px; border: 0; background: rgba(0, 0, 0, .55); font: 700 10px/13px var(--font); color: #f3e9cf; }
.slot-cost { position: absolute; right: 4px; bottom: 2px; z-index: 2; font: 800 14px/1 var(--font); text-shadow: 0 0 3px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.slot-cost.short { color: #ff4d4d !important; }
.slot-n { position: absolute; right: 4px; bottom: 2px; z-index: 2; font: 800 14px/1 var(--font); color: #fff; text-shadow: 0 0 3px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.slot.off img { filter: grayscale(.75) brightness(.5); }
.slot.locked { cursor: default; }
.slot.locked img { filter: brightness(.6) saturate(.7); }
.slot.locked.off img { filter: grayscale(.85) brightness(.34); }
.slot.sel { transform: translateY(-7px); box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold), 0 0 22px rgba(255, 200, 80, .8), 0 8px 14px rgba(0, 0, 0, .6); }
.slot.buzz { animation: buzz .3s; }
@keyframes buzz { 20% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 80% { transform: translateX(-2px); } }
.slot-cd { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border-radius: 5px; background: conic-gradient(rgba(0, 0, 0, .1) calc((1 - var(--cd)) * 360deg), rgba(0, 0, 0, .72) 0); }
.slot-cd b { font: 800 24px/1 var(--display); color: #fff; text-shadow: 0 0 6px #000, 0 2px 0 #000; }
.slot-cd .ic { position: absolute; right: 3px; top: 3px; font-size: 12px; color: #ff8a8a; }
.slot-tag { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2px 0; border-radius: 0 0 5px 5px; background: rgba(0, 0, 0, .78); font: 700 9px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: #b9b2a4; }
.slot-tag.go { color: #1a1206; background: var(--gold); }
.slot-tag.cast, .slot-tag.first, .slot-tag.second, .slot-tag.dodge { color: #ffd76a; left: auto; right: 0; bottom: auto; top: 0; width: auto; padding: 2px 4px; border-radius: 0 5px 0 5px; }
/* a blow's place in the exchange against the move he has shown: 1st (gold) lands before his blow, 2nd (grey) after it; 1st? while
   his move is hidden and could be quick. Where he strikes no blow there is nothing to mark but the chance his move leaves it */
.slot-tag.first { color: #1a1206; background: var(--gold); }
.slot-tag.first.unsure { color: #2a2206; background: #c9b673; }
.slot-tag.second { color: #cfc8ba; background: rgba(0, 0, 0, .78); }
.slot-tag.dodge { color: #fff; background: #b3261c; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.slot-tag.back { font-size: 7px; padding: 2px 3px; }   /* "Answered": a blow into a stance that answers it (small: on a wide bar the key beside it stays in sight) */
.slot.release { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold); animation: release 1s ease-in-out infinite; }
@keyframes release { 50% { box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff3c4, 0 0 26px rgba(255, 215, 106, .95); } }
.calm .slot.release { animation: none; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold), 0 0 16px rgba(255, 215, 106, .7); }
.commit { min-width: 112px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 7px; border: 1px solid #4a4257; background: linear-gradient(180deg, #2b2637, #1a1722); color: var(--dim); font: 700 15px var(--display); }
.commit.ready { border-color: #f1c65a; background: linear-gradient(180deg, #ffe08a, #e2a93a 55%, #a86e17); color: #2a1a02; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 22px rgba(255, 180, 50, .5); animation: ready 1.2s ease-in-out infinite; }
@keyframes ready { 50% { filter: brightness(1.14); } }
.calm .commit.ready { animation: none; }
.commit.skipper { flex-direction: row; gap: 7px; color: var(--text); border-color: #6a5d45; animation: skip-arm .6s steps(1, end) both; }
/* locked in, the reply on its way: the button says so and keeps moving (on Calm too: a wait must never look frozen) */
.commit.held { flex-direction: row; gap: 7px; color: var(--gold); border-color: var(--gold-2); background: linear-gradient(180deg, #3a2f18, #241d10); opacity: 1; }
.commit.held .wait { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: wait-dot .8s ease-in-out infinite; }
@keyframes wait-dot { 50% { opacity: .2; transform: scale(.5); } }
.calm .commit.held .wait { animation-duration: 1.3s; }
/* the button that was locked in: lit at once, and through the exchange */
.slot.chosen, .slot.locked.chosen { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold), 0 0 18px rgba(255, 200, 80, .75); }
.slot.locked.chosen img { filter: none; }
.slot-check { position: absolute; left: -7px; bottom: -7px; z-index: 3; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--gold); color: #1a1206; stroke-width: 3.2; box-shadow: 0 0 0 1px #000; animation: check-in .25s var(--bounce); }
@keyframes check-in { from { transform: scale(0); } }
.calm .slot-check { animation: none; }
/* Skip stands where Lock in stood: for the first moments of a show it is not armed (a double tap must not swallow the exchange), and looks it */
@keyframes skip-arm { from { opacity: .32; } to { opacity: 1; } }
.commit kbd { font-size: 9px; }
.commit.ready kbd { background: rgba(0, 0, 0, .25); border-color: rgba(0, 0, 0, .3); color: #2a1a02; }
.xp { position: relative; width: min(672px, 100%); height: 13px; border-radius: 4px; overflow: hidden; background: #110e18; box-shadow: 0 0 0 1px #000, 0 0 0 2px #2e2937; }
.xp i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(180deg, #c79bff, #8a45ee 55%, #5a22b0); transition: transform 1s var(--ease); }
.xp span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 9.5px/1 var(--font); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }

/* ---------- between fights: the dock ---------- */
.dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(5, 4, 10, .95) 66%, transparent); pointer-events: none; }
.dock > * { pointer-events: auto; }
.dock-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: end; max-width: 1080px; margin: 0 auto; }
.dock-left { display: flex; flex-direction: column; gap: 8px; }
.dock-next { min-width: 0; display: flex; flex-direction: column; gap: 4px; max-width: 560px; justify-self: center; width: 100%; }
.dock-cap { font: 700 10.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 1px 2px #000; }
.dock-go { display: flex; flex-direction: column; align-items: stretch; gap: 5px; max-width: 250px; }
.dock-note { margin: 0; font-size: 11.5px; color: var(--muted); text-align: center; text-shadow: 0 1px 2px #000; }
.pcard { padding: 10px 12px; border-radius: 10px; background: linear-gradient(180deg, rgba(34, 29, 44, .96), rgba(18, 16, 25, .97)); border: 1px solid #5b4f3a; box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0, 0, 0, .55); text-align: left; }
.pcard.k-elite { border-color: #d9b45a; }
.pcard.k-gate { border-color: #c94040; box-shadow: 0 0 0 1px #000, 0 0 18px rgba(255, 60, 60, .22), 0 10px 30px rgba(0, 0, 0, .55); }
.pcard-head { display: flex; align-items: center; gap: 10px; }
.lvl { flex: none; min-width: 30px; height: 32px; display: grid; place-items: center; padding: 0 4px; border-radius: 6px 6px 13px 13px; background: #0f0d15; border: 1px solid rgba(255, 255, 255, .3); font: 800 15px/1 var(--display); }
.lvl.skull { color: #ff4d4d; border-color: #c94040; font-size: 18px; }
.lvl.camp { color: #ffb45a; border-color: #8a5a22; font-size: 17px; }
.pcard-who { min-width: 0; display: flex; flex-direction: column; }
.pcard-who b { font: 700 15px/1.2 var(--display); color: #fff; }
.pcard-who small { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--muted); }
.pcard-kind { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #e9dcc0; }
.k-elite .pcard-kind { color: var(--gold); }
.k-gate .pcard-kind { color: #ff7a7a; }
.pcard-trick { margin: 7px 0 0; font-size: 12.5px; line-height: 1.42; color: #e2dbcc; }
.pcard-skills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.pcard-drops { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.pcard-drops small { width: 100%; margin-bottom: -2px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pcard.small .pcard-trick { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* a quiet place: what it is worth to him as he stands (a Rest in health, a town's prices beside his purse), and where the road leads from it */
.pcard-worth { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: #bfe6c8; }
.k-town .pcard-worth { color: #ffe9a8; }
.pcard-leads { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.pcard-leads .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--gold-2); }
.pcard-leads.cut { color: #ffcf9a; }
.pcard-leads.cut .ic { color: #ff9a5a; }
/* the card as his plate shows it in a fight: every move with its sentence */
.pcard-moves { display: grid; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.pcard-move { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; }
.pcard-move p { margin: 0; font-size: 11.5px; line-height: 1.36; color: #cfc8ba; }
.pcard-move b { display: block; font: 700 12.5px/1.25 var(--display); color: #ffe9a8; }
.pcard-note { margin: 9px 0 0; font-size: 11px; font-style: italic; color: var(--dim); }
/* the camp */
.campbox { max-width: 1080px; margin: 0 auto 12px; }
.camp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #ffb45a; text-shadow: 0 1px 2px #000; }
.camp-head b { font: 700 16px var(--display); color: #ffe2b0; }
.camp-head span { font-size: 12.5px; color: var(--muted); }
.camp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.svc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid #6a5433; background: linear-gradient(180deg, rgba(58, 39, 20, .96), rgba(22, 17, 14, .97)); box-shadow: 0 0 0 1px #000, inset 0 0 30px rgba(255, 130, 40, .08), inset 0 1px 0 rgba(255, 200, 120, .12), 0 10px 26px rgba(0, 0, 0, .5); text-align: left; min-width: 0; transition: transform .15s var(--ease), border-color .15s; }
.svc:hover:not(.used) { transform: translateY(-2px); }
/* the fire in the head flickers; the dock is warm at the camp */
.camp-head .ic { color: #ffb45a; filter: drop-shadow(0 0 6px rgba(255, 150, 50, .8)); animation: flicker 1.3s ease-in-out infinite; }
@keyframes flicker { 50% { opacity: .65; transform: scale(.92) translateY(1px); } }
.calm .camp-head .ic { animation: none; }
body.at-camp .dock { background: linear-gradient(0deg, rgba(16, 8, 4, .95) 66%, transparent); }
.svc:hover:not(.used) { border-color: var(--gold); }
.svc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.svc-t b { font: 700 15px var(--display); color: #fff; }
.svc-t small { font-size: 12px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-p { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .4); border: 1px solid #2f8a45; color: #8df0a0; font: 700 11.5px var(--font); white-space: nowrap; }
.svc-p.pay { border-color: var(--gold-3); color: var(--gold); }
.svc.used { opacity: .5; }
.svc.used .svc-p { border-color: var(--line-2); color: var(--dim); }
.svc.cannot .svc-p { border-color: #7a2a2a; color: #ff9a9a; }

/* ================= windows ================= */
.layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.win-shade { position: absolute; inset: 0; background: rgba(4, 3, 8, .62); pointer-events: auto; }
.win-shade.clear { background: radial-gradient(ellipse at 50% 45%, rgba(4, 3, 8, .5), rgba(4, 3, 8, .78)); }
.win-shade:has(+ .win.sheet) { background: none; }
.win { position: absolute; pointer-events: auto; display: flex; flex-direction: column; border-radius: 11px; background: linear-gradient(180deg, #211c2c, #13111a); border: 1px solid #8a7340; box-shadow: 0 0 0 1px #000, 0 26px 70px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 230, 170, .16); animation: win-in .22s var(--ease); outline: none; }
@keyframes win-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.win-head { display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 14px; border-bottom: 1px solid rgba(255, 230, 170, .14); background: linear-gradient(180deg, rgba(90, 70, 30, .28), transparent); border-radius: 10px 10px 0 0; }
.win-title { flex: 1; min-width: 0; font: 700 16px var(--display); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-body { padding: 14px; overflow: auto; min-height: 0; }
.win-lead { margin: 0 0 12px; color: var(--muted); text-align: center; }
.win-on { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -4px 0 12px; color: var(--muted); }
.win-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
/* one of three: talents, enchants, brews */
.win.pick3 { left: 50%; top: 50%; width: min(900px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); transform: translate(-50%, -50%); animation-name: win-in-c; }
@keyframes win-in-c { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.97); } }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 14px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--q) 45%, #2a2535); background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--q) 22%, transparent), transparent 70%), linear-gradient(180deg, #282233, #15121c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); text-align: center; min-width: 0; transition: transform .16s var(--ease), box-shadow .16s, border-color .16s; }
/* the three come in one after the other, a foil light runs over the one under the hand, and the icon wears its school's glow */
.tcard { overflow: hidden; animation: card-in .45s var(--bounce) backwards; }
.cards3 .tcard:nth-child(2) { animation-delay: .09s; } .cards3 .tcard:nth-child(3) { animation-delay: .18s; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.tcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .1) 50%, transparent 62%); transform: translateX(-130%); pointer-events: none; }
.tcard:hover::after, .tcard.sel::after { animation: shine 1.1s ease-out forwards; }
.tcard > .fr { box-shadow: 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--q) 82%, #000), 0 0 22px color-mix(in srgb, var(--q) 42%, transparent); }
.tcard-school { position: relative; padding-bottom: 7px; }
.tcard-school::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 38px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--q), transparent); }
.calm .tcard { animation: none; } .calm .tcard::after { display: none; }
.tcard:hover { transform: translateY(-3px); border-color: var(--q); }
.tcard.sel { transform: translateY(-5px); border-color: var(--q); box-shadow: 0 0 0 2px var(--q), 0 0 28px color-mix(in srgb, var(--q) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1); }
.tcard-school { font: 700 10.5px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--q); }
.tcard-name { font: 700 18px/1.15 var(--display); color: #fff; }
.tcard-kind { font-size: 11.5px; color: var(--muted); }
.tcard-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: #ece5d6; }
.tcard-meta { margin-top: auto; padding-top: 6px; font-size: 11.5px; color: var(--dim); }
.tcard.has { opacity: .55; }
.outbox { width: 100%; text-align: center; }
.outbox p { margin: 0 0 9px; font-weight: 600; color: var(--gold); }
.outrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.outb { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 9px; border: 1px solid #4a4257; background: #1c1825; font-weight: 600; }
.outb:hover { border-color: var(--bad); }
.outb.keep:hover { border-color: var(--gold); }
/* the loot window */
.win.loot { right: max(14px, 2.4vw); top: calc(50% - 24px); width: 340px; max-height: calc(100dvh - 240px); transform: translateY(-50%); animation-name: win-in-r; }
@keyframes win-in-r { from { opacity: 0; transform: translateY(calc(-50% + 10px)) scale(.97); } }
.win.loot .win-body { padding: 10px; display: flex; flex-direction: column; overflow: hidden; }
.lscroll { flex: 1 1 auto; min-height: 0; overflow: auto; margin: -2px; padding: 2px; }
.win.loot .win-body > .lacts { flex: none; }
.lrows { display: flex; flex-direction: column; gap: 5px; }
/* a row is tinted in its rarity's colour from its left edge; from blue up a light runs over it as it is revealed */
.lrow { position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; padding: 6px 9px 6px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--q, #fff) 18%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--q, #fff) 13%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .035) 60%); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--q, #fff) 70%, transparent); text-align: left; min-width: 0; }
.lrow:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--q, #fff) 20%, rgba(255, 255, 255, .06)), rgba(255, 255, 255, .08) 60%); }
.lrow.sel { border-color: var(--gold-2); background: linear-gradient(90deg, color-mix(in srgb, var(--q, #fff) 18%, rgba(120, 90, 30, .22)), rgba(120, 90, 30, .22) 60%); }
.lrow.reveal { animation: reveal .36s var(--bounce) backwards; }
.lrow.rare::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 36%, color-mix(in srgb, var(--q, #fff) 40%, #fff) 50%, transparent 64%); opacity: .38; transform: translateX(-130%); animation: shine 1.3s .6s ease-out forwards; pointer-events: none; }
.lrow.rare .fr { box-shadow: 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--q, #6f6146) 82%, #000), 0 0 14px color-mix(in srgb, var(--q, #fff) 55%, transparent); }
@keyframes shine { to { transform: translateX(130%); } }
.calm .lrow.rare::after { display: none; }
/* the window's own edge is the colour of the best thing in the body (its sparkle) */
.win.loot { border-color: color-mix(in srgb, var(--q, #8a7340) 55%, #8a7340); box-shadow: 0 0 0 1px #000, 0 0 36px color-mix(in srgb, var(--q, #000) 30%, transparent), 0 26px 70px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 230, 170, .16); }
.win.loot .win-head { background: linear-gradient(180deg, color-mix(in srgb, var(--q, #5a461e) 24%, transparent), transparent); }
@keyframes reveal { from { opacity: 0; transform: translateX(16px) scale(.94); } }
.lrow-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lrow-n { font: 700 14px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-t small { font-size: 11.5px; color: var(--muted); }
.lrow.nofit small { color: #ff9a9a; }
.lempty { margin: 14px 0; text-align: center; color: var(--dim); }
.ldetail, .sdetail { margin-top: 10px; padding: 10px 11px; border-radius: 9px; background: rgba(8, 7, 14, .7); border: 1px solid var(--line-2); }
.lacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lswap-h { margin: 9px 0 7px; font-weight: 600; color: var(--gold); font-size: 13px; }
.lfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.lbags { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.lbags.full { color: #ff9a9a; }
.lnote { margin: 8px 0 0; font-size: 11.5px; color: var(--dim); text-align: center; }
/* the character sheet: the whole window; the figure shows through the hole in the middle of the doll */
.win.sheet { inset: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
.win.sheet .win-head { position: relative; z-index: 2; margin: 54px auto 0; width: min(1180px, calc(100vw - 24px)); border: 1px solid #8a7340; border-bottom: 0; border-radius: 11px 11px 0 0; background: linear-gradient(180deg, #2a2233, #1c1825); }
.win.sheet .win-title { display: flex; align-items: baseline; gap: 10px; font-size: 19px; }
.win.sheet .win-title small { font: 600 13px var(--font); color: var(--muted); }
.win.sheet .win-body { flex: 0 1 auto; width: min(1180px, calc(100vw - 24px)); margin: 0 auto 12px; padding: 0; overflow: visible; display: grid; grid-template-columns: minmax(400px, 1fr) minmax(0, 1.75fr); border: 1px solid #8a7340; border-top: 0; border-radius: 0 0 11px 11px; max-height: calc(100dvh - 54px - 49px - 12px); }
.doll { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: min(56dvh, 470px) minmax(34px, 1fr); min-height: 0; }
.doll-hole { position: relative; min-height: 220px; box-shadow: 0 0 0 200vmax rgba(6, 5, 10, .88); touch-action: pan-y; cursor: grab; pointer-events: auto; background: radial-gradient(ellipse at 50% 100%, rgba(255, 190, 90, .1), transparent 60%); }
.doll-col { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 14px 12px; background: linear-gradient(180deg, #1d1926, #13111a); }
.doll-feet { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; align-items: flex-start; justify-content: center; gap: 8px; padding: 9px 12px; background: linear-gradient(180deg, #1d1926, #13111a); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); text-align: center; }
.is-locked .doll-feet { color: #ffb4b4; }
.eq { position: relative; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; }
.eq.none { background: #0c0a12; box-shadow: 0 0 0 1px #000, 0 0 0 2px #2e2937; }
.eq-empty { font: 600 9px var(--font); letter-spacing: .05em; text-transform: uppercase; color: #4f4860; text-align: center; padding: 0 2px; }
.eq.sel .fr, .cell.sel .fr { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold), 0 0 16px rgba(255, 200, 80, .7); }
.eq-ench { position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 8px currentColor; }
.sheet-rest { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 0; background: linear-gradient(180deg, #1d1926, #13111a); border-left: 1px solid rgba(255, 230, 170, .14); border-radius: 0 0 11px 0; }
.stats, .bags { min-height: 0; overflow: auto; padding: 14px; }
.bags { border-left: 1px solid var(--line); }
.cap { display: block; margin: 0 0 7px; font: 700 10.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.st-top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 7px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 13px; }
.st span { color: var(--muted); }
.st b { font: 700 14px var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.st.hp b { color: #ff8a8a; }
.st.res b { color: var(--res-c); font-size: 12px; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.st-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 8px 3px 7px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); text-align: center; min-width: 0; }
.stat b { font: 800 20px/1 var(--display); color: #fff; }
.stat span { font-size: 11px; color: var(--gold-2); font-weight: 700; margin-top: 3px; }
.stat small { font-size: 10px; line-height: 1.25; color: var(--muted); margin-top: 2px; }
.st-sig { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 9px 10px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.st-sig b { display: block; font: 700 13px var(--display); }
.st-sig small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.st-tal, .st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.st-tal .cap, .st-bar .cap { width: 100%; margin-bottom: 0; }
.barsk { padding: 0; border: 0; background: none; border-radius: 6px; opacity: .45; }
.barsk.on { opacity: 1; }
.barsk.on .fr { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold); }
.belt { display: flex; gap: 8px; margin-bottom: 12px; }
.bag-grid { display: grid; grid-template-columns: repeat(5, 44px); gap: 8px; }
.bag-grid.small { grid-template-columns: repeat(5, 40px); gap: 6px; }
.cell { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; }
.bag-grid.small .cell { width: 40px; height: 40px; }
.cell.empty { background: #0c0a12; box-shadow: 0 0 0 1px #000, 0 0 0 2px #2e2937, inset 0 0 10px rgba(0, 0, 0, .8); }
.cell.pot.zero .fr { filter: grayscale(1) brightness(.5); }
.cell .runs { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 1px); font: 700 9px var(--font); font-style: normal; color: #8df0a0; white-space: nowrap; }
.cell .up { position: absolute; left: -2px; top: -4px; font: 800 11px var(--font); font-style: normal; color: #36e25c; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.purse { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.purse img { border-radius: 50%; display: block; }
.purse b { font: 700 16px var(--display); color: var(--gold); }
.purse-bags { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.sdetail-none { margin: 0; font-size: 12.5px; color: var(--dim); }
/* the card at the end */
.win.endcard { left: 50%; top: 50%; width: min(560px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); transform: translate(-50%, -50%); animation-name: win-in-c; animation-duration: .5s; }
.win.endcard .win-body { padding: 22px 22px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.win.endcard.died { border-color: #8a2a2a; box-shadow: 0 0 0 1px #000, 0 0 60px rgba(255, 40, 40, .22), 0 26px 70px rgba(0, 0, 0, .8); }
.win.endcard.won { border-color: #f1c65a; box-shadow: 0 0 0 1px #000, 0 0 70px rgba(255, 200, 80, .35), 0 26px 70px rgba(0, 0, 0, .8); }
body.end-side .win.endcard { left: 70%; }
body.end-side .win-shade.clear { background: linear-gradient(90deg, rgba(4, 3, 8, 0) 18%, rgba(4, 3, 8, .72) 52%); }
.end-crest { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; font-size: 28px; color: #2a1a02; background: radial-gradient(circle at 35% 30%, #fff3c4, #e2a93a 55%, #8a5a12); box-shadow: 0 0 0 2px #000, 0 0 24px rgba(255, 190, 70, .5); }
.died .end-crest { color: #fff; background: radial-gradient(circle at 35% 30%, #ff8a8a, #b01e1e 55%, #4a0a0a); box-shadow: 0 0 0 2px #000, 0 0 24px rgba(255, 50, 50, .5); }
.abandoned .end-crest { color: #dfe6ef; background: radial-gradient(circle at 35% 30%, #8a8597, #3a3547 60%, #1c1825); box-shadow: 0 0 0 2px #000; }
.end-title { margin: 10px 0 2px; font: 800 34px/1.05 var(--display); letter-spacing: .02em; color: var(--gold); text-shadow: 0 2px 0 #3a2200; }
/* a champion's word is gold that catches the light, and his crest breathes */
.win.endcard.won .end-title { background: linear-gradient(100deg, #e2a93a 0%, #ffe9a8 44%, #fff8e0 50%, #ffe9a8 56%, #e2a93a 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #3a2200); animation: title-shimmer 2.8s ease-in-out .5s infinite; }
@keyframes title-shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.win.endcard.won .end-crest { animation: crest-breathe 2.2s ease-in-out infinite; }
@keyframes crest-breathe { 50% { box-shadow: 0 0 0 2px #000, 0 0 40px rgba(255, 190, 70, .85); } }
.calm .win.endcard.won .end-title, .calm .win.endcard.won .end-crest { animation: none; }
.died .end-title { color: #ff6a6a; text-shadow: 0 2px 0 #3a0000; }
.abandoned .end-title { color: #dfe6ef; text-shadow: 0 2px 0 #000; }
.end-who { margin: 0 0 12px; color: var(--muted); }
.end-who b { font: 700 16px var(--display); }
.end-truth { margin: 0 0 6px; font: 700 17px/1.35 var(--display); color: #fff; }
.end-line { margin: 0; color: #e2dbcc; }
.end-more { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.end-stops { display: flex; justify-content: center; gap: 4px; margin: 16px 0 4px; padding: 0; list-style: none; width: 100%; }
.es { flex: 1; max-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; position: relative; }
.es + .es::before { content: ''; position: absolute; right: calc(50% + 18px); top: 16px; width: calc(100% - 32px); height: 2px; background: #3a3346; }
.es-i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #4a4257; background: #17141f; color: var(--dim); font-size: 16px; }
.es.s-won .es-i, .es.s-rested .es-i { border-color: var(--gold-2); color: var(--gold); }
.es.s-fell .es-i { border-color: #ff5a5a; color: #ff5a5a; box-shadow: 0 0 14px rgba(255, 60, 60, .5); }
.es.s-left .es-i { border-color: #8a8597; color: #dfe6ef; }
.es small { max-width: 100%; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.end-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 12px 0 0; }
.en { display: flex; flex-direction: column; padding: 8px 4px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.en b { font: 800 19px/1.1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.en span { font-size: 10.5px; color: var(--muted); }
.end-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 9px; margin: 12px 0 0; }
.end-head small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.end-head b { font: 800 16px var(--display); letter-spacing: .08em; color: var(--gold); }
.end-head span { font-size: 12.5px; color: var(--muted); }
.end-gear { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; margin-top: 12px; }
.end-gear .sep { width: 1px; height: 24px; background: var(--line-2); margin: 0 3px; }
.end-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.end-note { margin: 8px 0 0; font-size: 11.5px; color: var(--dim); }
/* a way on behind a won run (`card.door`): a cold box of its own over the card's buttons; and the line of honour of a road that has one */
.end-door { width: 100%; margin: 0 0 12px; padding: 12px 14px; border: 1px solid rgba(122, 208, 255, .5); border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, rgba(22, 36, 56, .96), rgba(8, 12, 20, .98)); box-shadow: inset 0 0 26px rgba(90, 170, 255, .16), 0 0 22px rgba(90, 170, 255, .14); }
.end-door p { margin: 0 0 10px; color: #d4e9f8; font-size: 13.5px; line-height: 1.45; }
.end-door .btn { width: 100%; }
.end-door small { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.35; color: var(--dim); }
.end-honour { margin: 6px 0 0; color: #9fd8ff; font-style: italic; }
.win.endcard.dark.won { border-color: #7ad0ff; box-shadow: 0 0 0 1px #000, 0 0 70px rgba(90, 170, 255, .32), 0 26px 70px rgba(0, 0, 0, .8); }
.win.endcard.dark.died { border-color: #3d5a78; }
/* the long road's card: twelve stops as small pictures, the story a sentence a stop, the score and the board */
.win.endcard.long { width: min(640px, calc(100vw - 20px)); }
.win.endcard.long .win-body { padding: 18px 20px 16px; }
.end-stops.long { gap: 3px; margin: 12px 0 6px; }
.end-stops.long .es { max-width: 44px; }
.end-stops.long .es-i { width: 28px; height: 28px; font-size: 13px; border-width: 2px; }
.end-stops.long .es + .es::before { right: calc(50% + 14px); top: 13px; width: calc(100% - 26px); }
.es.s-traded .es-i, .es.s-met .es-i { border-color: #8a7340; color: #ffe9a8; }
.es.k-camp.s-rested .es-i { color: #ffb45a; border-color: #8a5a22; }
.es.s-ahead .es-i { opacity: .45; }
/* (the story is read in full: the card scrolls as a whole and keeps its buttons at its foot. In a box of its own the list showed
   three and a half of eight sentences on a phone, and cut the one that says where he fell) */
.end-walk { flex: none; width: 100%; margin: 6px 0 0; padding: 8px 10px; list-style: none; text-align: left; border-radius: 8px; background: rgba(8, 7, 14, .6); border: 1px solid var(--line); }
.win.endcard.long .win-body > * { flex: none; }
.end-foot { width: 100%; }
.win.endcard.long .end-foot { position: sticky; bottom: -16px; z-index: 2; margin: 10px -20px -16px; width: calc(100% + 40px); padding: 22px 20px 14px; background: linear-gradient(180deg, rgba(21, 18, 28, 0), #15121c 20px); }
.win.endcard.long .end-foot .end-acts { margin-top: 0; }
.ew { display: flex; gap: 9px; align-items: baseline; padding: 2px 0; font-size: 12.5px; line-height: 1.4; color: #e2dbcc; }
.ew b { flex: none; min-width: 18px; font: 700 11px var(--font); color: var(--dim); text-align: right; }
.ew.s-won b { color: var(--gold-2); } .ew.s-fell b, .ew.s-fell span { color: #ff8a8a; } .ew.s-rested b, .ew.s-traded b, .ew.s-met b { color: #9fd0ff; }
.end-more.branch { color: #cfc8ba; font-style: italic; }
.win.endcard.long .end-nums { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }   /* (five numbers; the Proving's four keep their one row) */
.end-board { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; padding: 8px 12px; border-radius: 9px; background: rgba(255, 215, 106, .08); border: 1px solid var(--gold-3); font-size: 13px; color: var(--muted); }
.end-board .ic { color: var(--gold); }
.end-board b { font: 700 14px var(--display); color: #fff; }
.end-board.best { border-color: var(--gold-2); box-shadow: 0 0 18px rgba(255, 200, 80, .25); }
/* the boards */
.board-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 0; padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.board-line b { color: #fff; }
.win.board { left: 50%; top: 50%; width: min(620px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); transform: translate(-50%, -50%); animation-name: win-in-c; }
.win.board .win-body { display: flex; flex-direction: column; padding: 10px 12px 12px; }
.win.board .win-body > * { flex: none; }
.board-season { margin: 0 0 8px; text-align: center; font-size: 12.5px; color: var(--muted); }
.board-tabs { margin-bottom: 8px; }
.board-cls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cchip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); color: var(--muted); font: 600 12px var(--font); }
.cchip.on { border-color: var(--c, var(--gold)); color: var(--c, var(--gold)); background: color-mix(in srgb, var(--c, var(--gold)) 14%, transparent); }
.bscroll { flex: 1 1 auto !important; min-height: 0; max-height: min(52dvh, 460px); overflow: auto; margin: -2px; padding: 2px; scrollbar-width: thin; }
.brows { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.brow { position: relative; display: grid; grid-template-columns: 30px 28px minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.brow.me { border-color: var(--gold-2); background: rgba(255, 215, 106, .08); }
.brank { font: 800 15px var(--display); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.brank.first { color: var(--gold); }
.bav { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: #0c0a12; color: var(--dim); }
.bav img { display: block; border-radius: 50%; }
.bwho { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.buser { font: 700 13.5px var(--display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bwho small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhow { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.bhow b { font: 700 13px var(--display); color: #ffe9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhow small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow.r-won .bhow b { color: var(--gold); }
.bruns { font-size: 11px; color: var(--dim); white-space: nowrap; }
.blaurel { position: absolute; right: 6px; top: -7px; width: 14px; height: 14px; color: var(--gold); }
.board-me { margin-top: 10px; }
.board-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--dim); }
.board-note.bad { color: #ff9a9a; }

/* ---------- settings and help ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 14px; background: rgba(4, 3, 8, .7); overflow: auto; }
.dlg { position: relative; width: min(440px, 100%); padding: 20px; border-radius: 12px; background: linear-gradient(180deg, #211c2c, #13111a); border: 1px solid #8a7340; box-shadow: 0 0 0 1px #000, 0 26px 70px rgba(0, 0, 0, .75); outline: none; }
.dlg.wide { width: min(680px, 100%); }
.dlg-title { margin: 0 0 14px; font: 700 20px var(--display); color: var(--gold); }
.close-x { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); color: var(--muted); }
.rows { display: flex; flex-direction: column; gap: 16px; }
.row-head { display: flex; justify-content: space-between; margin-bottom: 7px; font-weight: 600; }
.row-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.seg { display: flex; gap: 0; border: 1px solid #4a4257; border-radius: 8px; overflow: hidden; }
.seg button { flex: 1; min-height: 36px; border: 0; border-left: 1px solid #4a4257; background: #1c1825; font-weight: 600; }
.seg button:first-child { border-left: 0; }
.seg button[aria-checked="true"] { background: linear-gradient(180deg, #ffe08a, #e2a93a); color: #2a1a02; }
input[type="range"] { width: 100%; accent-color: var(--gold); }
.toggles { display: flex; flex-direction: column; gap: 12px; }
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.track { flex: none; width: 40px; height: 22px; border-radius: 999px; background: #2e2937; position: relative; transition: background .15s; }
.track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s var(--ease); }
.switch input:checked + .track { background: var(--gold-2); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--gold); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; font-weight: 600; }
.switch-text small { font-weight: 400; font-size: 12px; color: var(--muted); }
.dlg-foot { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); text-align: center; }
.help { display: grid; gap: 12px; max-height: min(64dvh, 620px); overflow: auto; padding-right: 6px; }
.help h3 { margin: 0 0 3px; font: 700 14px var(--display); color: #fff; }
.help p { margin: 0; font-size: 13.5px; color: #d9d2c4; }
.win-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ================= a narrow screen (a phone held upright, Discord's panel) ================= */
@media (max-width: 760px) {
  /* the red of a blow you take, on a narrow picture: a fifth of the width from either side met in the middle, and with the stage's own flash the whole screen stood red.
     The side bands are a tenth of the width here, and all four a little fainter */
  main::after { background: linear-gradient(90deg, rgba(210, 30, 20, .46), rgba(210, 30, 20, 0) 10%, rgba(210, 30, 20, 0) 90%, rgba(210, 30, 20, .46)), linear-gradient(180deg, rgba(210, 30, 20, .4), rgba(210, 30, 20, 0) 15%, rgba(210, 30, 20, 0) 85%, rgba(210, 30, 20, .4)); }
  .crumb, .brand span, #soundBtn, #helpBtn, .account, .login-link span, .res-plus, .commit kbd, .btn kbd { display: none; }
  .top { height: 44px; gap: 6px; padding: 0 8px; }
  /* (the run's strip may give way, the page's buttons never leave the window: a visitor's Log in button stood half outside a
     phone 390 wide while health, the Second Wind and three digits of gold were shown) */
  .strip { margin-left: 0; gap: 4px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .top-actions { gap: 4px; }
  .login-link { width: 36px; padding: 0; justify-content: center; }
  .strip-it { padding: 0 7px; height: 24px; font-size: 11.5px; }
  .strip-it.wind b { display: none; }
  .mid-top { top: 46px; }
  /* the counter in two short rows: the count, and under it who lands the first blow (one row ran off both edges of a phone) */
  .xch { height: auto; min-height: 26px; flex-direction: column; gap: 2px; padding: 3px 10px 4px; border-radius: 13px; }
  .xch-row { gap: 7px; justify-content: center; max-width: 100%; }
  .xch #xchNum { font-size: 11px; }
  .xch-first .xf-who { max-width: 56vw; }
  .xch-pips i { width: 5px; height: 5px; }
  .xch-note { font-size: 10.5px; }
  /* The fight fills an upright phone, so the room under the counter is the champion's plate and his intent. What is written
     across the pit (a gatekeeper's line, sudden death, a Second Wind) stands low instead: across the fighters' feet and the
     sand, above the announcer's caption, on a soft dark band of its own. A kill is written where the bar stood (it is gone
     by then); a level stays in the middle. */
  .banner { top: auto; bottom: calc(var(--low) + 64px); }
  .banner::before { content: ''; position: absolute; z-index: -1; inset: -14px -30px -12px; background: radial-gradient(ellipse at center, rgba(4, 3, 8, .78), rgba(4, 3, 8, .55) 52%, rgba(4, 3, 8, 0) 72%); pointer-events: none; }
  .banner.b-sudden { top: auto; }
  .banner.b-win { bottom: 92px; }
  .banner.b-win::before, .banner.b-ding::before { display: none; }
  .short-pit .banner { bottom: calc(var(--low) + 8px); }
  .short-pit .banner.b-win { bottom: 60px; }
  .rp { width: 68px; }
  .map, .place { top: 44px; }
  .town-head { padding: 14px 12px 0; }
  .town-head p { font-size: 12.5px; }
  .street { grid-template-columns: 1fr; gap: 10px; width: calc(100% - 20px); margin-top: 12px; }
  .shopfront { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(10, 8, 16, .5); border: 1px solid var(--line); text-align: left; }
  .shopfront .front { grid-row: 1 / span 3; width: 104px; }
  .keeper-box { left: 62px; top: 45%; width: 30px; transform: translate(-50%, -50%); }
  .shopfront .sign { margin-top: 0; padding: 4px 10px 4px 5px; justify-self: start; }
  .shopfront .sign b { font-size: 14px; }
  .keeper-line { margin: 0; max-width: none; font-size: 11.5px; line-height: 1.35; }   /* (said in full: two lines cut the armourer and the enchanter off in the middle of a sentence) */
  .shop-hint { margin-top: 0; font-size: 10.5px; justify-self: start; }
  .event .ev-sky, .event::after { top: 0; }
  .event .ev-sky { height: 28%; }
  .event::after { top: 28%; }
  .ev-scene { height: 28%; min-height: 120px; }
  .cobbles { display: none; }
  .win.shop { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 82dvh; transform: none; border-radius: 14px 14px 0 0; animation-name: sheet-up; padding-bottom: env(safe-area-inset-bottom); }

  .ev-card { width: calc(100% - 16px); padding: 12px 12px 10px; }
  .ev-card h2 { font-size: 20px; }
  .ev-text { font-size: 13.5px; }
  .where-b { height: 30px; font-size: 11.5px; padding: 0 11px 0 9px; }
  .where-b span { display: none; }
  .st-name { font-size: 13px; }
  .toast { top: 52px; }
  body[data-screen="between"] .toast { top: 106px; }
  body[data-screen="map"] .toast { top: 47px; font-size: 12.5px; padding: 5px 12px; }   /* (a line of news on the map: small, right under the top, not across the places) */
  /* the maker: the figure above, the form below */
  .maker { grid-template-columns: 1fr; grid-template-rows: 24dvh minmax(0, 1fr); padding: 46px 8px 30px; }   /* (a class with much to say pushed the races under the name row: the form gets the room) */
  .maker-form { align-self: stretch; padding: 14px 14px 16px; }
  .logo { font-size: 25px; }
  .tagline { margin: 3px 0 6px; font-size: 13px; }
  /* a returning player has the Again box above the choices: it is one low row here */
  .again-box { margin: 6px 0 2px; padding: 7px 10px; }
  .again-text span { display: none; }
  .lbl { margin: 10px 0 6px; }
  .tiles { gap: 6px; }
  .tile { padding: 8px 3px 7px; gap: 5px; }
  .tile-t b { font-size: 12.5px; }
  .tile-t small { font-size: 10px; }
  .tile.race { flex-direction: column; text-align: center; gap: 4px; padding: 6px 3px 5px; }   /* (a phone: the name under the icon) */
  .tile.race .tile-t b { font-size: 12px; }
  .pick-about { font-size: 12px; min-height: 0; }
  /* the name and the way in stay in reach while the choices above them scroll */
  .maker-form label.lbl { display: none; }
  .name-row { position: sticky; bottom: -16px; z-index: 2; gap: 8px; margin-top: 6px; padding: 12px 0 16px; background: linear-gradient(180deg, rgba(19, 17, 26, 0), #13111a 26%); }
  .name-row input { height: 46px; padding: 0 11px; font-size: 15px; }
  .name-row .btn.big { min-height: 46px; padding: 0 13px; font-size: 14.5px; }
  .foot > span { display: none; }
  /* the action bar in two rows of large buttons */
  .hud { gap: 5px; padding: 22px 8px calc(6px + env(safe-area-inset-bottom)); }
  /* on a phone the fight has every row it can get: the experience bar is on the sheet and under every kill's banner */
  .hud .xp { display: none; }
  /* a small phone has no sand to spare under the fighters: there his caption stands at the very top, over the page's own bar
     (health is on the plate as well), never across the two of them */
  .short-pit body:not(.has-win) .caption { bottom: auto; top: 3px; font-size: 12.5px; line-height: 1.3; padding: 3px 9px 4px; background: rgba(10, 8, 16, .95); }
  .hud-info { font-size: 12.5px; min-height: 19px; }
  .bar { flex-direction: column; gap: 6px; width: 100%; padding: 7px; }
  .bar-main { justify-content: space-between; }
  .bar-side { padding-left: 0; border-left: 0; }
  .slot { width: calc((100vw - 16px - 16px - 30px) / 6); height: calc((100vw - 16px - 16px - 30px) / 6); max-width: 64px; max-height: 64px; }
  .commit { flex: 1; min-width: 0; height: auto; font-size: 16px; }
  .log { left: 8px; right: 8px; width: auto; max-height: 24vh; }
  /* (while an exchange is shown the log makes room for the pit: on this screen it lies over the fighters) */
  body.showing .log { opacity: 0; pointer-events: none; }
  .banner.b-ding, .short-pit .banner.b-ding { top: 40%; bottom: auto; }
  .banner.b-ding .banner-sub { font-size: 14px; }
  .icon-btn { width: 38px; height: 38px; }
  /* a champion's card on a phone: a sheet from the bottom, so that he is seen cheering above it */
  body.end-top .win.endcard { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 60dvh; transform: none; border-radius: 16px 16px 0 0; animation-name: sheet-up; padding-bottom: env(safe-area-inset-bottom); }
  body.end-top .end-crest { display: none; }
  body.end-top .end-title { margin-top: 0; }
  body.end-top .win-shade.clear { background: linear-gradient(180deg, rgba(4, 3, 8, 0) 30%, rgba(4, 3, 8, .7) 62%); }
  /* the dock */
  .dock { padding: 24px 8px calc(8px + env(safe-area-inset-bottom)); }
  .dock-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "next next" "left go"; gap: 8px; align-items: stretch; }
  .dock-next { grid-area: next; max-width: none; }
  .dock-left { grid-area: left; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .dock-left .btn { flex: 1; padding: 0 8px; font-size: 12.5px; min-height: 44px; }
  .dock-go { grid-area: go; max-width: none; }
  .dock-go .btn.big { padding: 0 10px; font-size: 14.5px; white-space: normal; line-height: 1.15; }
  .dock-note { display: none; }
  .pcard { padding: 8px 10px; }
  .camp-list { grid-template-columns: 1fr; gap: 6px; }
  .campbox { margin-bottom: 8px; }
  .svc { padding: 7px 10px; }
  .svc .fr img { width: 34px; height: 34px; }
  .svc-t small { -webkit-line-clamp: 1; }
  /* windows */
  .cards3 { grid-template-columns: 1fr; gap: 8px; }
  .tcard { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: auto; column-gap: 12px; row-gap: 1px; align-items: start; text-align: left; padding: 10px 12px; }
  .tcard > .fr { grid-row: 1 / span 5; }
  .tcard > .fr img { width: 48px; height: 48px; }
  .tcard-name { font-size: 16px; }
  .tcard-text { font-size: 13px; margin-top: 2px; }
  .win.pick3 .win-body { padding: 10px; }
  .win-lead { margin-bottom: 8px; font-size: 13px; }
  .win.loot { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 68dvh; transform: none; border-radius: 14px 14px 0 0; animation-name: sheet-up; padding-bottom: env(safe-area-inset-bottom); }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
  .lrow { padding: 8px 9px 8px 7px; }
  .win.sheet .win-head { margin-top: 0; width: 100%; border-radius: 0; border-left: 0; border-right: 0; }
  .win.sheet .win-title { font-size: 16px; flex-wrap: wrap; gap: 0 8px; }
  .win.sheet .win-body { flex: 1; width: 100%; margin: 0; grid-template-columns: 1fr; grid-template-rows: 250px minmax(0, 1fr); max-height: none; border: 0; border-radius: 0; }
  .doll { grid-template-rows: minmax(0, 1fr) auto; }
  .sheet-rest { grid-template-columns: 1fr; overflow: auto; border-left: 0; border-top: 1px solid rgba(255, 230, 170, .14); border-radius: 0; display: flex; flex-direction: column; }
  .stats, .bags { overflow: visible; padding: 12px; flex: none; min-height: auto; }
  .bags { order: -1; border-left: 0; border-bottom: 1px solid var(--line); }
  .doll-col { padding: 8px 8px; gap: 8px; }
  .eq { width: 46px; height: 46px; }
  .eq .fr img { width: 40px; height: 40px; }
  .doll-feet { padding: 5px 8px; font-size: 11px; }
  .bag-grid { grid-template-columns: repeat(5, minmax(0, 44px)); justify-content: space-between; }
  .win.endcard .win-body { padding: 16px 14px 14px; }
  .win.endcard.long .win-body { padding: 14px 12px 12px; }
  .end-stops.long .es-i { width: 24px; height: 24px; font-size: 11px; }
  .end-stops.long .es + .es::before { right: calc(50% + 12px); top: 11px; width: calc(100% - 22px); }
  .brow { grid-template-columns: 24px 24px minmax(0, 1.2fr) minmax(0, 1fr); gap: 7px; padding: 5px 7px; }
  .bwho small, .bhow b, .bhow small { white-space: normal; }   /* (a gladiator's class and where he fell are read whole on a phone: they wrap, they are not cut) */
  .bav, .bav img { width: 24px; height: 24px; }
  .bruns { display: none; }
  .end-title { font-size: 28px; }
  .end-truth { font-size: 15.5px; }
  /* the long card's foot on a phone: its three buttons in one row and nothing under them (stacked, they and their note took
     half of a champion's sheet from the story) */
  .win.endcard.long .end-foot { bottom: -12px; margin: 6px -12px -12px; width: calc(100% + 24px); padding: 16px 10px 10px; background: linear-gradient(180deg, rgba(21, 18, 28, 0), #15121c 14px); }
  .win.endcard.long .end-acts { display: grid; grid-template-columns: 1.15fr 1fr 1.15fr; gap: 6px; }
  .win.endcard.long .end-acts .btn { min-height: 44px; padding: 0 6px; font-size: 13px; white-space: nowrap; }
  .win.endcard.long .end-acts .btn.big { font-size: 14.5px; }
  .win.endcard.long .end-note { display: none; }
}
/* a narrow phone, a run on the road: the site's own mark makes room for the run's strip (the way back to all tools is in the
   settings). Gold decides forks on the long road: it is shown at every width */
@media (max-width: 420px) {
  body[data-screen]:not([data-screen="maker"]):not([data-screen="end"]) .brand { display: none; }
}
/* a very narrow phone: everything in the top bar a little tighter; health, the Second Wind and gold all stay */
@media (max-width: 372px) {
  .rp-l { font-size: 9.5px; letter-spacing: -.01em; }   /* (the longest word of a name, Houndmaster's, in a quarter of 320 px) */
  .top { gap: 4px; padding: 0 6px; }
  .strip { gap: 3px; }
  .strip-it { padding: 0 6px; gap: 4px; font-size: 11px; }
  .icon-btn, .login-link { width: 34px; height: 34px; }
  .top-actions { gap: 3px; }
}
/* small plates: set by the page where the picture is small (a narrow window, a low one) */
.compact .np-name { font-size: 12px; }
/* a name and the First marker on a small plate: beside the marker there is room for twelve letters (a phone's plate read
   "The Twin Fan…" and "The Houndm…" while it held the marker). A plate whose name is longer (np-wide) carries the marker
   on its upper edge, a tab as the Gatekeeper tag is on the other corner; a long name (np-long: over 17 letters, The
   Houndmaster's Hound has 23) is set smaller and tighter as well, on every plate */
.np-long .np-name { font-size: 13px; letter-spacing: -.015em; }
.np-long .np-init { position: absolute; left: 8px; top: -8px; margin: 0; }   /* (on a wide plate too: "The Houndmaster's Hou…" stood on a desktop while it held the marker) */
.compact .np-long .np-name { font-size: 10px; letter-spacing: -.025em; }
.compact .np-wide .np-init { position: absolute; left: 8px; top: -8px; margin: 0; }
.compact .np-init { font-size: 8px; padding: 1px 4px 1px 3px; }
.compact .np-init .ic { width: 8px; height: 8px; }
.compact .xch-first { font-size: 9.5px; padding: 0 5px 0 4px; }
.compact .np-box { padding: 4px 5px 5px; }
.compact .np-hp { height: 17px; }
.compact .np-res { height: 9px; }
.compact .np-res-text { font-size: 7.5px; }
.compact .np-intent { padding: 4px 8px 4px 4px; gap: 6px; }
.compact .np-intent .fr img, .compact .np-q { width: 26px; height: 26px; }
.compact .np-intent-t b { font-size: 12px; }
.compact .np-intent-t i { font-size: 10.5px; }
.compact .np-aura img { width: 18px; height: 18px; }
/* a low, wide window: what he is about to do stands beside his plate, not over it (and never past the edge of a
   window that is narrow as well: a long name is cut short there) */
.low .np-intent { position: absolute; left: calc(100% + 6px); top: 0; margin: 0; max-width: none; white-space: nowrap; }
.low.tight .np-intent { max-width: calc(50vw - var(--np-w) - 12px); overflow: hidden; }
.low.tight .np-intent-t { min-width: 0; }
.low.tight .np-intent-t b, .low.tight .np-intent-t i { display: block; overflow: hidden; text-overflow: ellipsis; }
/* a very low window (a phone on its side, Discord's strip): the counter and the road move up into the top bar, the
   action bar is one low row, and what can be read elsewhere (experience: the sheet) makes room for the pit */
@media (max-height: 520px) and (min-width: 480px) {
  .top { height: 42px; }
  /* a gatekeeper's line, sudden death: under the plates, just over the bar, and small */
  .banner.b-boss, .banner.b-intro, .banner.b-sudden { top: auto; bottom: calc(var(--low) + 4px); }
  .banner.b-boss .banner-big, .banner.b-intro .banner-big, .banner.b-sudden .banner-big { font-size: 18px; }
  .banner.b-boss .banner-sub, .banner.b-intro .banner-sub, .banner.b-sudden .banner-sub { display: none; }
  .banner.b-ding { top: 50%; }
  body.showing .log { opacity: 0; pointer-events: none; }
  .st-top { grid-template-columns: 1fr; }
  .st { flex-wrap: wrap; }
  .crumb, .brand span, .res-plus, .xp, .rp-l, .dock-note, .dock-cap, #soundBtn, #helpBtn, .account { display: none; }
  /* the counter and the road stand in the top bar here: between the run's strip and the page's buttons (the page measures both:
     --mid-l, --mid-r), so that neither lies under a button, however many buttons there are */
  .mid-top { top: 6px; left: var(--mid-l, 0px); right: var(--mid-r, 0px); }
  .strip-it.wind b { display: none; }
  .xch { flex-direction: row; height: 28px; min-height: 0; max-width: 100%; gap: 8px; padding: 0 10px; border-radius: 999px; }   /* (one row here: it stands in the top bar) */
  .xch-row { flex: none; }
  .xch-row + .xch-row { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .xch-first { flex: 0 1 auto; }
  .xch-first .xf-who { max-width: 110px; flex: 0 1 auto; }   /* (the name gives way first, down to nothing; the word after it stays) */
  .xch-note { overflow: hidden; text-overflow: ellipsis; }
  .rp { width: 56px; }
  .banner { top: 48px; bottom: auto; }
  .banner::before { display: none; }
  .banner-big { font-size: 24px; }
  .banner-sub { font-size: 12.5px; }
  .toast { top: 48px; }
  .hud { gap: 4px; padding: 10px 10px calc(6px + env(safe-area-inset-bottom)); }
  .hud-info { min-height: 0; font-size: 12px; }
  .hud-info:empty { display: none; }
  .res { width: min(560px, 100%); font-size: 11px; }
  .res-pips i { height: 8px; }
  .bar { padding: 6px; gap: 8px; }
  .slot { width: 46px; height: 46px; }
  .commit { height: 46px; min-width: 92px; font-size: 13px; flex-direction: row; gap: 6px; }
  .dock { padding: 12px 10px calc(8px + env(safe-area-inset-bottom)); }
  .dock-left { flex-direction: row; }
  .pcard { padding: 7px 10px; }
  .pcard-trick, .pcard-skills, .pcard-drops { display: none; }
  .campbox { margin-bottom: 6px; }
  .camp-head { margin-bottom: 4px; }
  .svc { padding: 6px 10px; }
  .svc .fr img { width: 32px; height: 32px; }
  .svc-t small { -webkit-line-clamp: 1; }
  .maker { grid-template-columns: minmax(0, 1fr) min(540px, 58vw); padding: 46px 10px 26px; }
  .maker-form { padding: 12px 16px; }
  .logo { font-size: 22px; }
  .tagline { display: none; }
  .lbl { margin: 8px 0 5px; }
  .tile { flex-direction: row; padding: 6px; gap: 6px; text-align: left; }
  .tile .fr img { width: 30px; height: 30px; }
  .tile.race { flex-direction: row; text-align: left; padding: 4px 6px; gap: 6px; }
  .tile.race .fr img { width: 24px; height: 24px; }
  .tile.race .tile-t b { font-size: 12px; }
  .pick-about { font-size: 12px; min-height: 0; margin-top: 5px; }
  .starts { display: none; }
  .foot > span { display: none; }
  .win.sheet .win-head { margin-top: 44px; }
  .win.sheet .win-body { max-height: calc(100dvh - 44px - 49px - 6px); margin-bottom: 6px; }
  .doll { grid-template-rows: minmax(0, 1fr) auto; }
  .win.loot { top: calc(50% + 16px); max-height: calc(100dvh - 60px); }
  .cards3 { gap: 8px; }
  .tcard { padding: 10px 10px 9px; gap: 4px; }
  .tcard > .fr img { width: 40px; height: 40px; }
  .tcard-text { font-size: 12.5px; }
  .win.endcard .win-body { padding: 12px 16px; }
  .end-crest { display: none; }
  .end-title { margin-top: 0; font-size: 24px; }
  .end-stops { margin: 8px 0 2px; }
  .end-nums { margin-top: 6px; }
  .end-acts { margin-top: 10px; }
}
/* Calm (the player's own choice in the settings, never the device's): windows and rows simply appear. A device's wish for
   less motion is not read: the class is the one switch (core.js, applyMotion), and the page opens in Full everywhere. */
/* A low window that is narrow as well (a small phone on its side: 568 by 320). The narrow screen's rules reach it too,
   so here the bar is put back into ONE low row and everything that is not the fight makes room for the pit. */
@media (max-height: 520px) and (min-width: 480px) and (max-width: 760px) {
  .hud { gap: 3px; padding: 8px 6px calc(4px + env(safe-area-inset-bottom)); }
  .bar { flex-direction: row; width: auto; gap: 6px; padding: 5px; }
  .bar-main { justify-content: flex-start; gap: 4px; }
  .bar-side { gap: 4px; padding-left: 6px; border-left: 1px solid rgba(255, 230, 170, .16); }
  .slot { width: min(46px, calc((100vw - 138px) / 9)); height: min(46px, calc((100vw - 138px) / 9)); max-width: none; max-height: none; }
  .commit { flex: none; min-width: 74px; height: auto; align-self: stretch; font-size: 12.5px; }
  .res { width: min(520px, 100%); }
  .res-name, .res-num { font-size: 10.5px; }
  .hud-info { font-size: 11.5px; }
  .xch-pips, .strip-it.gold, .rage-l b { display: none; }
  .banner.b-boss .banner-big, .banner.b-intro .banner-big, .banner.b-sudden .banner-big { font-size: 15px; }
  .banner-small { font-size: 10px; }
  .dock-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; align-items: end; }
  .dock-next, .dock-left, .dock-go { grid-area: auto; }
  .dock-left .btn { flex: none; }
  .camp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* a low window that is not wide either (a phone on its side): the fifteen dots give their room to who lands the first blow */
@media (max-height: 520px) and (min-width: 480px) and (max-width: 980px) { .xch-pips { display: none; } }
.calm .win, .calm .lrow.reveal, .calm .np-aura, .calm .banner.in { animation-duration: .01s; }

/* ================================================================== the Square (square.js) and a duel between two players (duel.js)
   Plain on purpose, in the page's own manner: every part has a class of its own, the markup is simple, and a designer dresses
   it after this. What the classes are is listed in toolsapi/ARENA_PAGE.md ("The Square and a duel on the page"). Nothing here is read by the code but
   `hidden`, `.sq-clock[data-ends]` (its number is set four times a second) and the classes the code toggles (named there). */
/* ---------- the ways in: a button that says how many are there (the maker's line, the dock, the end card) ---------- */
.maker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.maker-head .logo { min-width: 0; }
.maker-head .square-go { flex: none; }
.square-go { position: relative; }
.square-go-n { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: rgba(0, 0, 0, .45); color: var(--gold); font: 700 12px/1.4 var(--font); font-variant-numeric: tabular-nums; text-align: center; }
.square-go-dot { position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--blood); box-shadow: 0 0 0 2px #15121c; }
.end-acts .square-go { flex-basis: 100%; }

/* ---------- the screen: the gladiator on his turntable, the panel beside him ---------- */
.square { display: grid; grid-template-columns: minmax(0, 1fr) min(580px, 52vw); gap: 0; padding: 56px 18px 16px; }
.sq-fig { position: relative; pointer-events: auto; touch-action: pan-y; cursor: grab; min-height: 0; }
.sq-fig::after { content: ''; position: absolute; left: 50%; bottom: 7%; width: 46%; height: 10px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c, #ffd76a) 60%, transparent), transparent); opacity: .5; pointer-events: none; }
.sq-fig.turned .fig-hint { opacity: 0; }
body.sq-nofig .square { grid-template-columns: minmax(0, 640px); justify-content: center; }
body.sq-nofig .sq-fig { display: none; }
.sq-panel { pointer-events: auto; display: flex; flex-direction: column; min-height: 0; max-height: 100%; align-self: center; padding: 14px 16px 12px; }
.sq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sq-title { margin: 0; font: 800 26px/1.1 var(--display); letter-spacing: -.01em; color: #fff; outline: none; }
.sq-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.sq-status { margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); font-size: 13px; color: var(--text); }
.sq-status.bad { color: var(--bad); border-color: rgba(255, 90, 90, .4); }
.sq-status.off { color: var(--gold); }
.sq-body { flex: 1; min-height: 0; overflow: auto; margin-top: 10px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #4a4257 transparent; }
.sq-lbl { margin: 14px 0 6px; }
.sq-lead { margin: 0 0 10px; line-height: 1.5; color: var(--text); }
.sq-lead.strong { color: var(--gold); font-weight: 600; }
.sq-small { margin: 6px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sq-small.warn { color: #ffb86a; }
.sq-count { margin: 0 0 12px; color: var(--muted); }
.sq-login { text-decoration: none; }
.sq-acts-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 4px; }
.sq-sub-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.sq-sub-title { font: 700 16px var(--display); color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a player's picture, a gladiator in a line, a thing on a table */
.sq-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #0d0b13; border: 1px solid #4a4257; color: var(--dim); }
.sq-av img { width: 100%; height: 100%; object-fit: cover; }
.sq-av .ic { width: 18px; height: 18px; }
.sq-name { font: 700 14.5px var(--font); color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-glad { margin: 0; font-size: 12.5px; color: var(--muted); }
.sq-glad.none { font-style: italic; color: var(--dim); }
.sq-thing { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; font-size: 13px; }
.sq-thing.none { font-style: italic; color: var(--dim); }
.sq-clock { margin-left: auto; padding: 1px 7px; border-radius: 8px; background: rgba(0, 0, 0, .4); color: var(--gold); font: 700 12px/1.5 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- his own row and switches ---------- */
.sq-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--gold-3); background: rgba(60, 44, 14, .28); }
.sq-me > .sq-av { width: 44px; height: 44px; }
.sq-me-t { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sq-source { font-size: 11.5px; color: var(--dim); }
.sq-switches { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.sq-switches .switch { gap: 9px; font-size: 13px; }
/* ---------- what lies on a body; invites ---------- */
.sq-spoils, .sq-invites, .sq-gone { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sq-spoil { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--gold-2); background: rgba(60, 44, 14, .4); }
.sq-spoil-t { flex: 1; min-width: 0; font-size: 13px; }
.sq-invite { padding: 9px 11px; border-radius: 10px; border: 1px solid #5b4f3a; background: linear-gradient(180deg, rgba(34, 29, 44, .98), rgba(18, 16, 25, .98)); }
.sq-invite.in { border-color: var(--gold-2); }
.sq-invite-t { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; font-size: 13.5px; }
.sq-invite-t b { color: #fff; }
.sq-invite-g, .sq-invite-w { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.sq-table { display: flex; flex-direction: column; gap: 5px; margin: 7px 0 0; }
.sq-table-r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.sq-table-r small { min-width: 96px; font-size: 11.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.sq-invite-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* the tray: an invite on every other screen */
.sq-tray { position: fixed; right: 12px; top: 58px; z-index: 46; width: min(360px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.sq-tray .sq-invite { pointer-events: auto; box-shadow: 0 0 0 1px #000, 0 12px 34px rgba(0, 0, 0, .7); }

/* ---------- who is here: a row a player, opened by a press ---------- */
.sq-people, .sq-duels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sq-row { border-radius: 10px; border: 1px solid #3b3447; background: linear-gradient(180deg, #262130, #18151f); }
.sq-row.me { border-color: var(--gold-3); }
.sq-row.open { border-color: var(--gold-2); }
.sq-row.away { opacity: .72; }
.sq-who { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; font: inherit; }
.sq-who-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sq-who-1 { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; }
.sq-tag { padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--muted); font: 700 10px/1.3 var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sq-tag.flag { background: rgba(255, 215, 106, .16); color: var(--gold); }
.sq-tag.unread { background: var(--blood); color: #fff; }
.sq-doing { font-size: 12px; color: var(--dim); }
.sq-more { flex: none; width: 16px; height: 16px; color: var(--dim); transition: transform .15s var(--ease); }
.sq-row.open .sq-more { transform: rotate(90deg); }
.sq-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 10px 10px; }
.sq-emote-at { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px; }
.sq-emote-at small { margin-right: 2px; font-size: 11.5px; color: var(--dim); }
.sq-emotes { display: flex; flex-wrap: wrap; gap: 6px; }
.sq-emote { min-height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid #4a4257; background: #1c1825; color: var(--text); font: 600 12px var(--font); }
.sq-emote:hover { border-color: var(--gold-2); }
.sq-feed { margin-top: 8px; }
.sq-feed-l { margin: 2px 0; font-size: 12.5px; font-style: italic; color: var(--muted); }
.sq-feed-l.mine { color: var(--text); }
/* the duels going on */
.sq-duel-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid #3b3447; background: linear-gradient(180deg, #262130, #18151f); }
.sq-duel-row.k-stakes { border-color: var(--gold-3); }
.sq-duel-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sq-duel-t small { font-size: 12px; color: var(--dim); }
.sq-duel-1 { display: flex; flex-wrap: wrap; gap: 2px 7px; align-items: baseline; }
.sq-vs { font-style: normal; font-size: 11.5px; color: var(--dim); }

/* ---------- a gladiator on the spot; a whisper; a sheet; a stake ---------- */
.sq-tiles .tile { padding: 8px 4px 7px; }
.sq-make-note { min-height: 1.4em; }
.sq-thread { display: flex; flex-direction: column; gap: 5px; min-height: 120px; max-height: 44dvh; overflow: auto; padding: 8px; border-radius: 9px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); scrollbar-width: thin; }
.sq-line { max-width: 86%; margin: 0; padding: 5px 9px; border-radius: 9px; background: #262130; font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.sq-line small { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.sq-line.mine { align-self: flex-end; background: rgba(120, 86, 22, .5); }
.sq-say { display: flex; gap: 8px; margin-top: 8px; }
.sq-say-in { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid #4a4257; background: #0d0b13; color: #fff; font: 500 14px var(--font); }
.sq-say-in:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 215, 106, .18); }
.sq-sheet-who { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.sq-sheet-name { font: 700 17px var(--display); }
.sq-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.sq-num { display: flex; flex-direction: column; padding: 7px 9px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.sq-num b { font: 700 16px var(--display); color: #fff; }
.sq-num span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.sq-five { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.sq-stat b { color: #fff; margin-right: 4px; }
.sq-sig { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sq-sig b { color: #fff; }
.sq-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.sq-icons .cap { width: 100%; margin: 0; }
.sq-things { display: flex; flex-direction: column; gap: 6px; }
.sq-thing-b { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border-radius: 9px; border: 1px solid #3b3447; background: linear-gradient(180deg, #262130, #18151f); color: inherit; text-align: left; font: inherit; }
.sq-thing-b.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), inset 0 0 18px rgba(255, 215, 106, .12); }
.sq-thing-b:disabled { opacity: .5; }
.sq-thing-t { display: flex; flex-direction: column; min-width: 0; }
.sq-thing-t small { font-size: 12px; color: var(--dim); }

/* ---------- a duel: the strip over the bar, the end where the bar stood ---------- */
.duel-strip { display: flex; align-items: center; gap: 10px; width: min(760px, 100%); padding: 5px 8px; border-radius: 9px; background: rgba(10, 8, 16, .82); border: 1px solid rgba(255, 226, 160, .3); pointer-events: auto; }
.ds-clock { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 30px; border-radius: 7px; overflow: hidden; background: #0d0b13; border: 1px solid var(--gold-3); }
.ds-clock i { position: absolute; inset: 0; background: linear-gradient(90deg, #7a5a14, #c8963a); transform-origin: left center; transition: transform .25s linear; }
.ds-clock b { position: relative; font: 800 15px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.ds-clock.low { border-color: var(--bad); }
.ds-clock.low i { background: linear-gradient(90deg, #7a1f1f, #e8463c); }
.ds-clock.done { opacity: .6; }
.ds-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ds-kind { font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); white-space: nowrap; }
.ds-watching { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 7px; background: rgba(105, 204, 240, .16); color: #9fdcf5; font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.ds-status { font: 600 13.5px var(--font); color: #fff; }
.ds-status.warn { color: #ffb86a; }
.ds-status.bad { color: var(--bad); }
.ds-table { flex: none; display: inline-flex; align-items: center; gap: 7px; max-width: 46%; min-width: 0; overflow: hidden; }
.ds-table .sq-thing { min-width: 0; }
.ds-table .sq-thing b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ds-vs { font-style: normal; font-size: 11px; color: var(--dim); }
.ds-stands { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ds-quit { flex: none; }
.ds-quit.armed { background: #7a1f1f; color: #fff; border-color: #ff6a6a; }
body.dueling .hud .xp { display: none; }
/* a watcher has no bar: the strip is all there is at the foot of the pit, and no blow is his to feel */
body[data-duel="watch"] .hud > :not(.duel-strip) { display: none; }
body[data-duel="watch"] .hud { padding-top: 8px; background: none; }
body[data-duel="watch"] main::after { display: none; }
.xch-first.watch { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #e9e2d0; }
.duel-end { pointer-events: none; }
.de-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; max-width: 980px; margin: 0 auto; padding: 12px 16px; border-radius: 12px; background: linear-gradient(180deg, rgba(31, 27, 41, .97), rgba(18, 16, 25, .98)); border: 1px solid var(--gold-3); box-shadow: 0 0 0 1px #000, 0 20px 50px rgba(0, 0, 0, .6); pointer-events: auto; }
.de-title { display: block; font: 800 24px/1.1 var(--display); color: #fff; }
.duel-end.won .de-title { color: var(--gold); }
.duel-end.lost .de-title { color: #ff9a8a; }
.de-line { margin: 3px 0 0; font-size: 14px; color: var(--text); }
.de-what { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.de-left { margin: 4px 0 0; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.de-acts { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.banner.b-duel .banner-big { font-style: normal; }

@media (max-width: 760px) {
  /* a phone: the gladiator over the panel, as the maker has him; the list has the room */
  .square { grid-template-columns: minmax(0, 1fr); grid-template-rows: 20dvh minmax(0, 1fr); padding: 46px 8px 8px; }   /* (minmax: the name row of its maker held the panel wider than a phone) */
  body.sq-nofig .square { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .sq-panel { align-self: stretch; padding: 12px 12px 10px; }
  .sq-title { font-size: 21px; }
  .sq-acts .btn, .sq-invite-acts .btn { min-height: 40px; flex: 1 1 auto; }
  .sq-emote { min-height: 36px; }
  .sq-who { min-height: 58px; }
  .sq-tray { left: 8px; right: 8px; top: 50px; width: auto; }
  /* the dock's way in is a small button beside Character: the dock is as tall as it was */
  .dock-left .square-go .square-go-l, .maker-head .square-go .square-go-l { display: none; }
  .dock-left .square-go { flex: 0 0 auto; }
  .dock-row:has(.square-go) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .sq-me { gap: 6px 10px; padding: 8px 10px; }
  .sq-me .switch-text small, .sq-source { display: none; }
  .sq-switches { gap: 6px 16px; }
  .duel-strip { gap: 7px; padding: 4px 6px; }
  .ds-kind { display: none; }
  .ds-table .sq-thing b, .ds-vs { display: none; }
  .ds-table { gap: 4px; }
  .ds-status { font-size: 12.5px; }
  .ds-quit { min-height: 34px; padding: 0 8px; }
  .de-row { grid-template-columns: 1fr; gap: 10px; padding: 10px 12px; }
  .de-title { font-size: 20px; }
  .de-acts { flex-direction: row; flex-wrap: wrap; }
  .de-acts .btn { flex: 1 1 auto; min-height: 44px; }
}
@media (max-height: 520px) and (min-width: 480px) {
  .square { grid-template-columns: minmax(0, 1fr) min(540px, 60vw); padding: 46px 10px 6px; }
  .sq-panel { padding: 8px 12px; }
  .sq-title { font-size: 18px; }
  .sq-me { gap: 4px 10px; padding: 6px 10px; }
  .sq-me > .sq-av { width: 34px; height: 34px; }
  .sq-me .switch-text small, .sq-source { display: none; }
  .sq-switches { gap: 4px 16px; }
  .sq-lbl { margin: 8px 0 5px; }
  .de-row { padding: 8px 12px; }
  .de-what, .de-left { display: none; }
}