@font-face { font-family: "PS2P"; src: url("fonts/PressStart2P-Regular.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "JBM"; src: url("fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "JBM"; src: url("fonts/JetBrainsMono-600.woff2") format("woff2"); font-weight: 600 700; font-display: block; }

:root {
  --paper: #e5eede;
  --light: #d1d6c8;
  --mid: #b0b5a8;
  --dark: #50514b;
  --ink: #121210;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  --lbl: "PS2P", "Courier New", monospace;
  --fl: 12px;          --fl-s: 10px;        --fb: 13px;          --fn: 24px;          --line: 2px;
  --bu: 3px;           --pad: 24px;
  --top-h: 64px;
  --sec: 40px;         --rb-h: 0px;         --chrome-h: calc(var(--top-h) + var(--rb-h));     color-scheme: light;
}
:root:has(#ribbon:not([hidden])) { --rb-h: 30px; }
html[data-type="b"] { --body: "JBM", ui-monospace, "Consolas", monospace; --fs: 17px; --fs-s: 16px; --lh: 1.5; --code: "JBM", ui-monospace, monospace; --code-fs: 1em; --code-w: 600; --measure: 42em; }
@media (max-width: 899px) {
  :root { --fl: 10px; --fl-s: 9px; --fb: 11px; --fn: 18px; --bu: 2px; --pad: 16px; --top-h: 52px; --sec: 32px; }
  :root, :root:has(#ribbon:not([hidden])) { --chrome-h: 0px; }      html[data-type="a"] { --fs: 17px; --fs-s: 16px; }
  html[data-type="b"] { --fs: 16px; --fs-s: 16px; --lh: 1.45; }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--chrome-h) + var(--s3)); }
body {
  color: var(--ink);
  font: 400 var(--fs)/var(--lh) var(--body);
  font-variant-numeric: tabular-nums;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; font-size: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
code { font-family: var(--code); font-size: var(--code-fs); font-weight: var(--code-w); line-height: 1; background: var(--light); padding: 0.2em 0.35em; white-space: nowrap; }
b, strong { font-weight: 600; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lbl { font: var(--fl)/1.25 var(--lbl); text-transform: uppercase; }
.dim, .k2 { color: var(--dark); }
.bad { color: var(--ink); }
.lnk { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
a.lnk:hover { background: var(--light); }
.num { font: 400 1em/1.1 var(--lbl); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sec-h { font: var(--fl)/1.3 var(--lbl); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.sec-sub { font: 400 var(--fs-s)/var(--lh) var(--body); color: var(--dark); text-transform: none; }
p.sec-sub { margin-top: calc(-1 * var(--s2)); }

.chip {
  display: inline-block; font: var(--fl-s)/1 var(--lbl); text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 5px 7px 4px; white-space: nowrap; vertical-align: middle;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);
  font: var(--fb)/1 var(--lbl); text-transform: uppercase; text-decoration: none; text-align: center; white-space: nowrap;
  color: var(--ink); background: var(--paper); border: var(--line) solid var(--ink); border-radius: 0; cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--light); }
.btn.pri { background: var(--ink); color: var(--paper); }
.btn.pri:hover:not(:disabled) { background: var(--dark); }
.btn:disabled { background: var(--paper); color: var(--mid); border-color: var(--mid); cursor: not-allowed; }
.btn-s {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 var(--s3);
  font: var(--fl-s)/1 var(--lbl); text-transform: uppercase; white-space: nowrap; text-decoration: none;
  color: var(--ink); background: transparent; border: var(--line) solid var(--ink); border-radius: 0; cursor: pointer;
}
.btn-s:hover:not(:disabled) { background: var(--light); }
.btn-s:disabled { color: var(--mid); border-color: var(--mid); cursor: not-allowed; }
.cp {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s2) 0 0;
  background: var(--light); border: 0; cursor: pointer; white-space: nowrap; max-width: 100%;
}
.cp code { background: none; padding: 0 0 0 var(--s2); overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.cp-w { font: 8px/1 var(--lbl); color: var(--dark); }
.cp:hover { background: var(--mid); }
.cp:hover .cp-w { color: var(--ink); }

.box {
  border: calc(8 * var(--bu)) solid transparent;
  border-image: url("img/px/box.png") 8 fill / calc(8 * var(--bu)) stretch;
  image-rendering: pixelated;
  background-clip: padding-box;
}
.box > * { image-rendering: auto; }

.keys { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }
.k {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 3px;
  font: 11px/1 var(--lbl); border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
}
.k.wide { font-size: 8px; padding: 0 4px; }
.k .ka.v { width: 12px; height: 7px; }
.k .ka.h { width: 7px; height: 12px; }
.tk .k .ka.v { width: 18px; height: 10px; }
.tk .k .ka.h { width: 10px; height: 18px; }
.k.on { background: var(--ink); color: var(--paper); }
.k.past { border-color: var(--mid); color: var(--dark); }

.n { font: 10px/1 var(--lbl); background: var(--ink); color: var(--paper); width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; }

.live { display: inline-flex; align-items: center; gap: 7px; font: var(--fl-s)/1 var(--lbl); padding: 6px 8px 5px; border: var(--line) solid var(--ink); white-space: nowrap; }
.live i { width: 8px; height: 8px; background: var(--paper); display: none; }
.live[data-st="live"] { background: var(--ink); color: var(--paper); }
.live[data-st="live"] i { display: block; animation: blink 1.2s steps(1, end) infinite; }
.live[data-st="offline"] { color: var(--dark); border-color: var(--dark); }
.live[data-st="prelaunch"] { border-style: dashed; }
@keyframes blink { 50% { opacity: 0; } }

.cr { display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.cr figcaption { font-size: var(--fs-s); color: var(--dark); max-width: 24ch; }
.cr-sprite {
  --cs: 3;
  display: block; width: calc(var(--sw) * var(--cs) * 1px); height: calc(var(--sh) * var(--cs) * 1px);
  background-repeat: no-repeat; background-size: calc(160px * var(--cs)) calc(144px * var(--cs));
  background-position: calc(var(--sx) * var(--cs) * -1px) calc(var(--sy) * var(--cs) * -1px);
  image-rendering: pixelated;
}
.starters { flex: none; display: flex; gap: var(--s2); align-items: flex-end; }
.st-img { width: 112px; height: 112px; image-rendering: pixelated; }
.cr-q { display: grid; place-items: center; width: 112px; height: 112px; border: var(--line) dashed var(--mid); font: 40px/1 var(--lbl); color: var(--dark); }

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; width: 100%; }
.ribbon {
  position: sticky; top: 0; z-index: 35;
  display: flex; align-items: center; justify-content: center; gap: var(--s4);
  background: var(--ink); color: var(--paper); height: 30px; padding: 0 var(--s3);
  font: var(--fl-s)/1 var(--lbl); text-transform: none;
}
.ribbon b { font-weight: 400; }
.rb-btn { font: var(--fl-s)/1 var(--lbl); color: var(--paper); background: transparent; border: 2px solid var(--paper); padding: 4px 8px; cursor: pointer; }
.rb-btn:hover, .rb-btn[aria-expanded="true"] { background: var(--paper); color: var(--ink); }

.top {
  position: sticky; top: var(--rb-h); z-index: 35; background: var(--paper);
  display: flex; align-items: center; gap: 28px; height: var(--top-h); padding: 0 var(--pad);
  border-bottom: var(--line) solid var(--ink);
}
.top-logo { flex: none; display: block; text-decoration: none; }
.top-logo img { height: 34px; width: auto; }
.tabs { display: flex; gap: 6px; }
.tabs a { font: 14px/1 var(--lbl); text-decoration: none; padding: 12px 12px 11px; white-space: nowrap; }
.tabs a:hover { background: var(--light); }
.tabs a[aria-current] { background: var(--ink); color: var(--paper); }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ca { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.ca .lbl { font-size: var(--fl-s); }
.ca-val { font: var(--fl-s)/1 var(--lbl); background: none; padding: 0; color: var(--dark); }
.ca.set .ca-val { color: var(--ink); }
.ca .btn-s { min-height: 30px; }
.wallet-btn { min-height: 40px; font-size: 12px; text-transform: none; }
.addr { font: var(--fl-s)/1.4 var(--lbl); }
.wallet-btn.on { background: var(--light); }
@media (max-width: 1399px) { .top-ca { display: none; } }
@media (max-width: 1239px) { .tabs a { font-size: 12px; padding: 11px 8px 10px; } .top { gap: var(--s4); } .tabs { gap: 2px; } }
@media (max-width: 1079px) { .tabs a { font-size: 10px; padding: 10px 6px 9px; } .wallet-btn { font-size: 10px; } }

.screens { position: relative; flex: 1 0 auto; }
.screen { width: 100%; max-width: 1480px; margin: 0 auto; padding: var(--s5) var(--pad) var(--s7); }

.btabs { display: none; }

.gv { min-height: 0; min-width: 0; display: flex; }
.gv-slot { flex: 1; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.gv-frame { position: relative; border: 4px solid var(--ink); background: var(--ink); line-height: 0; }
.gv-pic { position: relative; }
.gv-img { image-rendering: pixelated; width: 320px; height: 288px; max-width: none; }
.gv-frame.off .gv-img { opacity: 0.45; filter: grayscale(1); }
.gv-over {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font: var(--fl-s)/1.3 var(--lbl); background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  padding: 6px 8px; text-align: center; width: max-content; max-width: calc(100% - 16px);
}
.gv-over.inv { background: var(--ink); color: var(--paper); }
.gv-toasts { position: absolute; left: 8px; right: 8px; top: 8px; display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.gv-toast { font: var(--fl-s)/1.3 var(--lbl); background: var(--paper); border: 2px solid var(--ink); padding: 4px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.s-home {
  display: grid; column-gap: var(--s7); row-gap: var(--s3); min-height: calc(100vh - var(--chrome-h)); min-height: calc(100dvh - var(--chrome-h));
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: minmax(min-content, 1fr) auto auto;
  grid-template-areas: "game info" "teaser teaser" "foot foot";
}
.s-home, .s-watch { padding-bottom: var(--s4); }
.home-game { grid-area: game; display: flex; flex-direction: column; min-height: 0; }
.home-game .gv { flex: 1; }
.gv-stack { display: grid; row-gap: var(--s2); justify-items: stretch; }
.ichat { width: 0; min-width: 100%; padding: 0 var(--s1); display: grid; }
.ichat li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); min-height: 22px; font-size: var(--fs-s); line-height: 1.3; color: var(--dark); white-space: nowrap; }
.ichat li.new { color: var(--ink); }
.ichat .u { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ichat .m { overflow: hidden; text-overflow: ellipsis; }
.ichat .keys { flex-wrap: nowrap; }
.ich-idle { font-size: var(--fs-s); color: var(--dark); }

.home-info { grid-area: info; align-self: center; display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.home-h { font: 32px/1.35 var(--lbl); }
.home-h span { display: block; }
.home-sub { font-size: calc(var(--fs) * 1.2); max-width: 44ch; }
.steps { display: grid; gap: var(--s2); }
.steps a { display: grid; grid-template-columns: 32px 108px minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s2) 0; text-decoration: none; }
.steps a:hover .w { text-decoration: underline; text-underline-offset: 4px; }
.steps .n { width: 28px; height: 28px; font-size: 12px; }
.steps .w { font: 15px/1 var(--lbl); }
.steps .t { font-size: var(--fs); }
.home-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.home-act .btn { min-height: 52px; padding: 0 22px; font-size: 14px; }
.home-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s5); }
.home-stats { font: var(--fl-s)/1.6 var(--lbl); color: var(--dark); }
.teaser { grid-area: teaser; display: flex; align-items: center; justify-content: center; gap: var(--s3) var(--s4); flex-wrap: wrap; background: var(--light); padding: var(--s2) var(--s4); }
.tz-main { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; min-width: 0; }
.teaser .chip { font-size: var(--fl-s); padding: 6px 8px 5px; }
.teaser .tt { font-size: var(--fs); }
.teaser .cp { background: var(--paper); }
.teaser .cp:hover { background: var(--mid); }
.tz-go { font: var(--fl)/1 var(--lbl); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.teaser.hot { background: var(--ink); color: var(--paper); }
.teaser.hot .chip { background: var(--paper); color: var(--ink); }
.home-fine { font-size: var(--fs-s); color: var(--dark); }
.teaser.launch {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "h time lead cp go" "also also also also also";
  align-items: center; gap: var(--s2) var(--s5); background: var(--paper); border: var(--line) solid var(--ink); padding: var(--s3) var(--s4);
}
.lb-h { grid-area: h; display: flex; align-items: center; gap: var(--s3); }
.lb-t { font: 15px/1.3 var(--lbl); white-space: nowrap; }
.lb-time { grid-area: time; display: flex; align-items: baseline; gap: var(--s2); white-space: nowrap; }
.lb-time .num { font-size: 22px; }
.lb-time span { font-size: var(--fs-s); color: var(--dark); }
.lb-lead { grid-area: lead; font-size: var(--fs); min-width: 0; }
.lb-lead .nw { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1399px) { .teaser.launch { column-gap: var(--s4); } }
.lb-lead b { font: 14px/1.2 var(--lbl); font-weight: 400; }
.teaser.launch .cp { grid-area: cp; background: var(--light); }
.teaser.launch .tz-go { grid-area: go; }
.lb-also { grid-area: also; font-size: var(--fs-s); color: var(--dark); border-top: 1px solid var(--mid); padding-top: var(--s2); }
.teaser.launch.hot { background: var(--ink); color: var(--paper); }
.teaser.launch.hot .lb-time span, .teaser.launch.hot .lb-also { color: var(--paper); }
.teaser.launch.hot .chip { background: var(--paper); color: var(--ink); }
.teaser.launch.hot .cp { background: var(--paper); color: var(--ink); }

.s-watch {
  display: grid; gap: var(--s4) var(--s6); min-height: calc(100vh - var(--chrome-h)); min-height: calc(100dvh - var(--chrome-h));
  grid-template-columns: minmax(0, 1fr) 430px;
  grid-template-rows: minmax(min-content, 1fr) auto;
  grid-template-areas: "main side" "strip strip";
}
.w-main { grid-area: main; display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.w-main > .gv { flex: none; }
.w-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-s); }
.w-head .wm { font: var(--fl)/1.3 var(--lbl); }
.w-head .wv { margin-left: auto; }
.w-side { grid-area: side; display: flex; flex-direction: column; gap: var(--s5); min-width: 0; align-self: start; }
.w-join { display: grid; gap: var(--s3); flex-shrink: 0; border-top: 1px solid var(--mid); padding-top: var(--s3); }
.jsteps { display: grid; gap: var(--s1); }
.jsteps li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3); align-items: center; font-size: var(--fs-s); line-height: 1.3; }
.jsteps .n { width: 20px; height: 20px; font-size: 9px; }
.w-join .btn { min-height: 44px; width: 100%; }
.ticker { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-content: center; font-size: var(--fs-s); }
.ticker li { display: flex; align-items: center; gap: var(--s2); }
.strip {
  grid-area: strip; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5);
  border-top: 1px solid var(--mid); padding-top: var(--s3); font-size: var(--fs-s);
}
.strip > span { display: inline-flex; align-items: center; gap: var(--s2); }
.bdg i { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--ink); margin-right: 3px; }
.bdg i.got { background: var(--ink); }

.votecard { padding: var(--s1) var(--s2); display: grid; gap: var(--s3); flex-shrink: 0; }
.votecard.slim { border: 0; border-image: none; border-top: 4px solid var(--ink); padding: var(--s3) 0 0; }
.vc-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.vc-st { font-size: var(--fs-s); color: var(--dark); text-align: right; }
.vc-foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.vc-empty { font-size: var(--fs-s); color: var(--dark); }
.vc-h .lbl { font-size: var(--fl); }
.vc-t { font: 20px/1 var(--lbl); padding: 5px 6px 4px; }
.votecard.hot .vc-t { background: var(--ink); color: var(--paper); }
.vc-what { font-size: var(--fs-s); color: var(--dark); }
.vc-top { display: grid; gap: 6px; }
.vc-top li { display: grid; grid-template-columns: 20px 104px minmax(0, 1fr) 56px; align-items: center; gap: var(--s2); }
.vc-top .nm { font: 11px/1.2 var(--lbl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-top .wt { font-size: 10px; text-align: right; }
.vc-go { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.vc-go .btn { min-height: 40px; }

.vc-win { font: 13px/1.4 var(--lbl); }
.vc-burn { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-s); }
.vc-burn .chip { font-size: 11px; padding: 6px 8px 5px; }
.vc-ref { font-size: var(--fs-s); color: var(--dark); }
.bar { display: block; height: 10px; background: var(--light); }
.bar i { display: block; height: 100%; background: var(--ink); }

.moves { display: grid; gap: var(--s2); flex-shrink: 0; }
.mv-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s2); align-items: start; }
.mv-k { font-size: var(--fs-s); color: var(--dark); padding-top: 1px; }
.mv-now .mv-body { min-height: 26px; display: flex; align-items: center; }
.mv { display: inline-flex; align-items: center; gap: var(--s3); }
.who { font: var(--fl-s)/1 var(--lbl); }
.mv-list { display: grid; gap: var(--s1); }
.mv-list li { display: flex; align-items: center; gap: var(--s2); min-height: 24px; font-size: var(--fs-s); }
.mv-list .who { flex: none; width: 104px; }
.mv-list .keys { gap: 2px; }
.mv-list .k { min-width: 20px; height: 20px; font-size: 10px; }
.mv-list .why { margin-left: auto; font-size: var(--fs-s); white-space: nowrap; color: var(--dark); }
.mv-list .pos { margin-left: auto; font: var(--fl-s)/1 var(--lbl); white-space: nowrap; color: var(--dark); }
.mv-list .rej { color: var(--dark); }
.mv-list .rej .k { border-color: var(--mid); color: var(--dark); }
.mv-list .rej .why { color: var(--ink); background: var(--light); padding: 0 5px; }
.mv-list li.dim, .mv-body .dim { font-size: var(--fs-s); }

.chat { display: grid; gap: var(--s2); align-content: start; }
.chat .ro { font: 400 var(--fs-s)/1 var(--body); text-transform: none; color: var(--dark); }
.chat-list { display: grid; border-top: 1px solid var(--mid); }
.chat-list li { display: grid; grid-template-columns: 11ch minmax(0, 1fr); column-gap: var(--s3); align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--light); font-size: var(--fs-s); line-height: 1.35; }
.chat-list .u { font-weight: 600; color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list .m { min-width: 0; overflow-wrap: anywhere; }
.chat-list .m code { white-space: normal; padding: 0.1em 0.35em; }
.chat-list li.dim { display: block; color: var(--dark); }

.v-scroll { display: grid; grid-template-columns: minmax(0, 1fr) 430px; grid-template-areas: "main side" "lists lists"; gap: var(--sec); align-items: start; }
.v-col { display: flex; flex-direction: column; gap: var(--sec); min-width: 0; }
.v-main { grid-area: main; }
.v-side { grid-area: side; }
.v-lists { grid-area: lists; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sec); align-items: start; border-top: 1px solid var(--mid); padding-top: var(--s5); }
.v-sec { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-sec.lead { border: var(--line) solid var(--ink); padding: var(--s4) var(--s5) var(--s5); }
.v-sec-h { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.v-k { font: 16px/1 var(--lbl); }
.v-state .chip { font-size: 10px; padding: 6px 8px 5px; }
.v-nn { font-size: var(--fs-s); color: var(--dark); }
.v-what { font-size: var(--fs-s); color: var(--dark); max-width: var(--measure); }
.v-timer { margin-left: auto; display: grid; grid-template-columns: auto auto; grid-template-areas: "n l" "bar bar"; align-items: end; gap: 5px var(--s2); padding: 4px 0; }
.v-timer + .share-btn, .v-sec-h .share-btn { margin-left: var(--s2); }
.v-sec-h .v-timer[hidden] + .share-btn, .v-next .share-btn { margin-left: auto; }
.vt-n { grid-area: n; font: 24px/1 var(--lbl); }
.vt-l { grid-area: l; font: var(--fl-s)/1 var(--lbl); padding-bottom: 2px; color: var(--dark); }
.vt-bar { grid-area: bar; display: block; height: 6px; background: var(--light); min-width: 140px; }
.vt-bar i { display: block; height: 100%; background: var(--ink); }
.v-timer.hot { background: var(--ink); color: var(--paper); padding: 6px var(--s3) 8px; }
.v-timer.hot .vt-l { color: var(--paper); }
.v-timer.hot .vt-bar { background: var(--dark); }
.v-timer.hot .vt-bar i { background: var(--paper); }
@media (prefers-reduced-motion: no-preference) { .v-timer.hot .vt-n { animation: blink 1s steps(1, end) infinite; } }

.board { display: grid; gap: var(--s4); }
.board:empty { display: none; }
.hero-title { font: 18px/1.45 var(--lbl); }
.hero-title.small { font-size: 13px; color: var(--dark); }
.hero-title span { display: block; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4) var(--s5); align-items: center; }
.hero-l { display: grid; gap: var(--s2); min-width: 0; }
.hero-tag { font-size: var(--fs-s); color: var(--dark); }
.hero-name { font: 44px/1.15 var(--lbl); overflow-wrap: anywhere; }
.hero-name.blank { color: var(--mid); }
.hero-nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); font-size: var(--fs-s); }
.hero-nums .num { font-size: 24px; }
.hero-nums .u { margin-left: calc(-1 * var(--s2)); }
.hero-you, .you { font-size: var(--fs-s); }
.hero-say { font-size: var(--fs-s); color: var(--dark); max-width: var(--measure); }
.hero-typed { font: 18px/1.2 var(--lbl); }
.hero-typed .caret { animation: blink 1s steps(1, end) infinite; }
.hero-burn { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-s); }
.chip.big { font-size: 14px; padding: 7px 9px 6px; }
.hero-top, .hero-ref { font-size: var(--fs-s); }
.hero-top b { font-family: var(--lbl); font-weight: 400; font-size: 0.7em; }
.hero-top .you { font-weight: 600; }
.hero-ref { color: var(--dark); }
.acts { display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.hero .acts { margin-top: var(--s2); }
.pick { min-width: 92px; }
.podium { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); border-top: 1px solid var(--mid); padding-top: var(--s4); }
.pod { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s3); align-items: start; min-width: 0; }
.pod .pos, .prow .pos { width: 30px; height: 30px; display: grid; place-items: center; background: var(--light); color: var(--ink); font: 11px/1 var(--lbl); }
.pod-b { display: grid; gap: var(--s1); min-width: 0; justify-items: start; }
.pod .nm { font: 17px/1.25 var(--lbl); font-weight: 400; overflow-wrap: anywhere; }
.pod-nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); font-size: var(--fs-s); }
.pod-nums .num { font-size: 14px; }
.pod .acts { margin-top: var(--s1); }
.pod.mine .pos, .prow.mine .pos { background: var(--ink); color: var(--paper); }
.pstate { justify-self: start; font: 10px/1 var(--lbl); padding: 6px 7px 5px; border: var(--line) solid var(--ink); white-space: nowrap; }
.hero.closed .hero-name { text-decoration: none; }

.plist { display: flex; flex-direction: column; }
.plist:empty { display: none; }
.plist > .empty { padding: var(--s3) 0; font-size: var(--fs-s); color: var(--dark); }
.prow {
  display: grid; align-items: center; column-gap: var(--s3); row-gap: var(--s1);
  grid-template-columns: 30px minmax(110px, 1.1fr) minmax(40px, 1fr) 72px 56px 92px 320px;
  grid-template-areas: "pos pn bar pt pu pw act";
  padding: var(--s2) 0; min-height: 52px; border-bottom: 1px solid var(--light);
}
.prow > .pos { grid-area: pos; }
.prow > .pn { grid-area: pn; min-width: 0; display: grid; gap: 2px; }
.prow > .bar { grid-area: bar; }
.prow > .pt { grid-area: pt; text-align: right; font-size: 11px; }
.prow > .pu { grid-area: pu; text-align: right; font-size: var(--fs-s); color: var(--dark); white-space: nowrap; }
.prow > .pw { grid-area: pw; text-align: right; font-size: var(--fs-s); color: var(--dark); white-space: nowrap; }
.prow > .acts, .prow > .pstate { grid-area: act; justify-self: end; }
.pn .nm { font: 13px/1.25 var(--lbl); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn .you { color: var(--ink); }
.prow .acts { flex-wrap: nowrap; }
.prow .cp, .pod .cp, .hero .cp { width: 220px; justify-content: space-between; }
.prow .cp code { min-width: 0; }

.asteps, .as-b, .nc, .wc, .hero-l, .v-mine, .v-burners, .v-hist, .v-mine-l, .board, .p-steps, .p-moves, .p-faq, .p-pad { grid-template-columns: minmax(0, 1fr); }
.act { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s1) var(--s3) var(--s3); min-width: 0; }
.act.flash { animation: flash 0.9s steps(2, end) 1; }
@keyframes flash { 50% { background-color: var(--light); } }
.act-h { display: flex; flex-direction: column; gap: var(--s3); }
.act-t { font-size: 13px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: var(--line) solid var(--ink); }
.seg button { font: 10px/1.2 var(--lbl); padding: 8px 6px; min-height: 34px; background: var(--paper); border: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg button:hover:not([aria-pressed="true"]) { background: var(--light); }
.seg button + button { border-left: var(--line) solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.asteps { display: grid; gap: var(--s4); }
.as { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.as > .n { margin-top: 1px; }
.as-b { display: grid; gap: var(--s2); min-width: 0; }
.as-t { font-size: var(--fs-s); font-weight: 600; }
.as-out { font-weight: 400; }
.v-field { display: flex; align-items: stretch; border: var(--line) solid var(--ink); background: var(--paper); }
.v-name { flex: 1; width: 0; min-width: 0; border: 0; background: transparent; padding: 9px 12px; font: 16px/1.2 var(--lbl); text-transform: none; outline: none; }
.v-field:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.v-name::placeholder { color: var(--mid); font-size: 12px; }
.v-count { flex: none; display: grid; place-items: center; padding: 0 10px; font: 11px/1 var(--lbl); border-left: var(--line) solid var(--ink); }
.v-count.over { background: var(--ink); color: var(--paper); }
.v-reason { font-size: var(--fs-s); min-height: 1.3em; color: var(--dark); line-height: 1.3; }
.v-reason.bad { color: var(--ink); font-weight: 600; }
.sym { font: 11px/1.5 var(--lbl); color: var(--ink); word-spacing: 2px; }
.v-reason.bad::before { content: "\00d7  "; font-family: var(--lbl); font-size: 11px; }
.gbox { border: 4px double var(--ink); padding: 10px 12px; background: var(--paper); }
.gbox-t { font: 12px/1.6 var(--lbl); overflow-wrap: anywhere; }
.gbox-t mark { background: var(--ink); color: var(--paper); padding: 0 1px; }
.gbox-t .blank { color: var(--mid); }
.nc { display: grid; gap: var(--s3); }
.nc:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.nc-row { display: grid; gap: var(--s1); }
.nc-k { font-size: var(--fs-s); }
.nc-c { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.nc .vault-ca { background: var(--light); padding: 0 0 0 var(--s2); min-height: 36px; }
.nc .vault-ca .btn-s { min-height: 36px; border-width: 0 0 0 var(--line); }
.nc-open { min-height: 36px; }
.nc-alt { font-size: var(--fs-s); color: var(--dark); }
.nc-note { font-size: var(--fs-s); color: var(--dark); }
.wc { display: grid; gap: var(--s2); }
.v-rule { font-size: var(--fs-s); color: var(--dark); border-top: 1px solid var(--light); padding-top: var(--s2); }
.amt-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "l in" "ch ch"; gap: var(--s2) var(--s3); align-items: center; }
.amt-row > .lbl { grid-area: l; font-size: var(--fl-s); }
.amt { width: 100%; min-width: 0; border: var(--line) solid var(--ink); background: var(--paper); padding: 0 var(--s2); height: 36px; font: 12px/1 var(--lbl); }
.amt::placeholder { color: var(--mid); }
.amt-row > .amt { grid-area: in; height: 40px; font-size: 14px; }
.amt-row > .qchips { grid-area: ch; }
.qchips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.qc { font: 10px/1 var(--lbl); min-height: 32px; padding: 0 10px; background: var(--paper); border: var(--line) solid var(--ink); cursor: pointer; }
.qc:hover:not(:disabled) { background: var(--light); }
.qc:disabled { color: var(--mid); border-color: var(--mid); cursor: not-allowed; }
.v-amsg { font-size: var(--fs-s); color: var(--dark); }
.v-amsg:empty { display: none; }
.v-amsg.bad { color: var(--ink); font-weight: 600; }
.v-go { min-height: 50px; font-size: 14px; }

.v-mine, .v-burners, .v-hist { display: grid; gap: var(--s3); align-content: start; }
.v-mine-l { display: grid; gap: var(--s3); font-size: var(--fs-s); }
.v-mine-l > .btn-s { justify-self: start; }
.watch { display: flex; gap: var(--s2); }
.watch .wa { flex: 1; font-size: 11px; }
.mine-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.mine-f { color: var(--dark); }
.mylist { display: grid; }
.mp { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; grid-template-areas: "ms mn ma" "ms mt cx"; gap: 2px var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--light); }
.mp .ms { grid-area: ms; justify-self: start; align-self: start; font-size: 8px; padding: 5px 6px 4px; }
.mp .mn { grid-area: mn; overflow-wrap: anywhere; color: var(--dark); }
.mp .mn b { font: 11px/1 var(--lbl); font-weight: 400; color: var(--ink); }
.mp .ma { grid-area: ma; font-size: 11px; text-align: right; }
.mp .mt { grid-area: mt; white-space: nowrap; }
.mp .cx { grid-area: cx; justify-self: end; min-height: 30px; }
.mp.pending .ms, .mp.refunding .ms, .mp.bumped .ms { background: var(--paper); color: var(--ink); border: 2px dashed var(--ink); }
.mp.held .ms { background: var(--dark); }
.mp.refunded .ms { background: var(--light); color: var(--ink); }
.burners { display: grid; }
.burners li { display: grid; grid-template-columns: 30px auto minmax(0, 1fr) 64px; gap: var(--s3); align-items: center; min-height: 40px; border-bottom: 1px solid var(--light); font-size: var(--fs-s); }
.burners .pos { font: 10px/1 var(--lbl); color: var(--dark); }
.burners .who small { font-size: var(--fs-s); font-family: var(--body); font-weight: 600; }
.burners .bw { color: var(--dark); min-width: 0; overflow-wrap: anywhere; }
.burners .bn { font: 11px/1.3 var(--lbl); font-weight: 400; color: var(--ink); }
.burners .bm { color: var(--dark); white-space: nowrap; }
.burners .bb { font-size: 11px; text-align: right; }
.burners li.you { font-weight: 600; }
.burners li.dim { display: block; border: 0; }
.hist { display: grid; font-size: var(--fs-s); }
.hist li { display: grid; gap: 2px; padding: var(--s2) 0; border-bottom: 1px solid var(--light); }
.hl { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.hist .cr, .hist .arr { font: 10px/1 var(--lbl); color: var(--dark); }
.hist .hl b { font: 12px/1 var(--lbl); font-weight: 400; }
.hb { margin-left: auto; color: var(--dark); }
.hb .num { font-size: 11px; color: var(--ink); }
.hd { color: var(--dark); white-space: normal; }

@media (max-width: 1239px) {
  .v-scroll { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sec) var(--s5); }
  .hero-name { font-size: 36px; }
}
@media (max-width: 1399px) {
  .prow { grid-template-columns: 30px minmax(0, 1fr) 72px 56px; grid-template-areas: "pos pn pt pu" ". bar pw pw" ". act act act"; }
  .prow > .acts, .prow > .pstate { justify-self: start; }
}

.e-scroll {
  display: grid; gap: var(--sec) var(--s7); align-items: start;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas: "how stats" "fee stats" "badges stats" "rivals stats" "when stats" "ledger stats" "fine stats";
}
.e-how { grid-area: how; display: grid; gap: var(--s4); }
.loops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.loop { border-top: 4px solid var(--ink); padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.loop-h { font: 14px/1 var(--lbl); display: flex; align-items: center; gap: var(--s3); }
.loop-t { font-size: var(--fs-s); max-width: var(--measure); }
.fl { display: grid; }
.fl li { position: relative; border: var(--line) solid var(--ink); padding: 6px 10px; font-size: var(--fs-s); line-height: 1.25; text-align: center; }
.fl li + li { margin-top: var(--s4); }
.fl li + li::before { content: ""; position: absolute; left: calc(50% - 1px); top: -16px; width: 2px; height: 8px; background: var(--ink); }
.fl li + li::after { content: ""; position: absolute; left: calc(50% - 6px); top: -9px; border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.fl li.ink, .fl .fork .ink { background: var(--ink); color: var(--paper); }
.fl li.fork { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); border: 0; padding: 0; }
.fl .fork span { border: var(--line) solid var(--ink); padding: 6px 8px; }
.loop-addr { margin-top: auto; flex-wrap: wrap; }
.e-down { font-size: var(--fs-s); color: var(--dark); }
.e-fee { grid-area: fee; display: grid; gap: var(--s3); }
.e-more { font-size: var(--fs-s); color: var(--dark); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.e-more .lnk { color: var(--ink); }
.e-stats { grid-area: stats; position: sticky; top: calc(var(--chrome-h) + var(--s5)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.tile { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s1); align-content: start; padding: calc(var(--s3) + var(--line)); }
.tile.hot { padding: var(--s3); border: var(--line) solid var(--ink); }
.tile .tlb { font: var(--fl-s)/1.3 var(--lbl); color: var(--dark); margin-bottom: var(--s1); }
.tn { font-size: 22px; margin-bottom: var(--s1); }
.ts { font-size: var(--fs-s); color: var(--dark); line-height: 1.3; }
.e-ms { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.e-badges { grid-area: badges; }
.e-rivals { grid-area: rivals; }
.mtrack { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s2); }
#e-rivals { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mc { display: grid; gap: var(--s1); align-content: start; min-width: 0; min-height: 104px; padding: var(--s2); border: var(--line) solid var(--mid); font-size: var(--fs-s); line-height: 1.3; color: var(--dark); }
.mc-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: 2px; }
.bd-n { font: 12px/1 var(--lbl); width: 28px; height: 28px; display: grid; place-items: center; background: var(--light); color: var(--dark); }
.mc .bd-n { min-width: 26px; width: auto; height: 26px; padding: 0 3px; font-size: 11px; background: transparent; border: 2px solid var(--mid); flex: none; }
.mc .tl { font: 8px/1.3 var(--lbl); color: var(--dark); }
.mc-t { font: 9px/1.5 var(--lbl); font-weight: 400; overflow-wrap: anywhere; }
.mc .mt { overflow-wrap: anywhere; }
.mc .mt .num { font-size: 11px; color: var(--ink); }
.mc .md { display: block; }
.mc.done { border-color: var(--ink); color: var(--ink); }
.mc.done .bd-n { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mc.done .tl { color: var(--ink); }
.mc.next { border-color: var(--ink); border-style: dashed; color: var(--ink); }
.mc.next .bd-n { border-color: var(--ink); color: var(--ink); }
.mc.passed .mc-t { text-decoration: line-through; }
.mc.end { border-color: var(--ink); color: var(--ink); }
.mc.end .bd-n { border-color: var(--ink); color: var(--ink); }
.mc.end.done .bd-n { background: var(--ink); color: var(--paper); }
.e-when { grid-area: when; font-size: var(--fs-s); color: var(--dark); max-width: var(--measure); margin-top: calc(var(--s2) - var(--sec)); }
.e-ledger { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.e-ledger { grid-area: ledger; }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.ledger th { font: 400 var(--fs-s)/1.2 var(--body); text-align: left; color: var(--dark); padding: 0 var(--s3) var(--s2) 0; border-bottom: 1px solid var(--mid); }
.ledger td { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--light); }
.ledger .r { text-align: right; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger .num { font-size: 11px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); align-items: baseline; font-size: var(--fs-s); }
.facts dt { font: var(--fl-s)/1.3 var(--lbl); color: var(--dark); }
.e-fine { grid-area: fine; font-size: var(--fs-s); color: var(--dark); max-width: var(--measure); }

.s-play { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sec) var(--s7); align-items: start; }
.p-col { display: flex; flex-direction: column; gap: var(--sec); min-width: 0; }
.p-steps, .p-moves, .p-faq, .p-pad { display: grid; gap: var(--s3); align-content: start; }
.psteps { display: grid; gap: var(--s3); }
.psteps li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); font-size: var(--fs-s); }
.psteps b { font: 13px/1 var(--lbl); font-weight: 400; margin-right: 4px; }
.psteps .btn { min-height: 42px; }
.p-facts li { grid-template-columns: 24px minmax(0, 1fr); }
.p-more { font-size: var(--fs-s); justify-self: start; }
.tag { font: 9px/1 var(--lbl); font-weight: 400; padding: 5px 6px 4px; border: 2px solid var(--ink); }
.tag.ink { background: var(--ink); color: var(--paper); }
.line { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s1); }
.slot { min-width: 0; min-height: 56px; background: var(--paper); border: 2px solid var(--ink); display: grid; align-content: start; gap: 3px; padding: 4px; }
.slot.free { border: 2px dashed var(--mid); background: transparent; }
.slot .sn { font: 8px/1 var(--lbl); color: var(--dark); }
.slot .sw { font: 8px/1.1 var(--lbl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot code { font: 8px/1.1 var(--lbl); background: none; padding: 0; white-space: normal; }
.slot:first-child { border-width: 3px; }
.line-cap { display: flex; justify-content: space-between; font-size: var(--fs-s); color: var(--dark); margin-top: var(--s1); }
.p-faq details { border-bottom: 1px solid var(--mid); }
.p-faq summary { cursor: pointer; padding: var(--s2) 0; font-size: var(--fs-s); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s3); }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: "\25bc"; font: 10px/1.8 var(--lbl); }
.p-faq details[open] summary::after { content: "\25b2"; }
.p-faq details p { padding: 0 0 var(--s3); font-size: var(--fs-s); max-width: var(--measure); }

.p-try { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s1) var(--s3) var(--s3); }
.p-try h2 { font-size: 13px; }
.try-in { width: 100%; border: var(--line) solid var(--ink); background: var(--paper); padding: 12px 14px; font: 20px/1.2 var(--lbl); }
.try-chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.chipb { font: 12px/1 var(--lbl); background: var(--light); border: 0; padding: 9px 10px; min-height: 38px; cursor: pointer; }
.chipb:hover { background: var(--mid); }
.try-out { min-height: 120px; display: grid; gap: var(--s3); align-content: start; border-top: 1px solid var(--mid); padding-top: var(--s3); }
.try-k { font: var(--fl-s)/1.2 var(--lbl); color: var(--dark); }
.try-keys { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tk { display: grid; justify-items: center; gap: 4px; }
.tk .k { min-width: 36px; height: 36px; font-size: 14px; }
.tk .k.wide { font-size: 9px; }
.tw { font-size: var(--fs-s); color: var(--dark); }
.try-say { font-size: var(--fs-s); }
.try-rule { font-size: var(--fs-s); color: var(--dark); line-height: 1.5; max-width: var(--measure); }
.pad {
  min-height: 210px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center;
  background: var(--light); border-radius: 18px 18px 64px 18px; padding: 20px 26px;
}
.dpad { display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 44px); }
.dpad .up { grid-area: 1 / 2; } .dpad .left { grid-area: 2 / 1; } .dmid { grid-area: 2 / 2; background: var(--ink); } .dpad .right { grid-area: 2 / 3; } .dpad .down { grid-area: 3 / 2; }
.pb { font: 10px/1 var(--lbl); cursor: pointer; border: 0; padding: 0; }
.dpad .pb { background: var(--ink); color: var(--paper); }
.dpad .pb:hover, .ab .pb:hover { background: var(--dark); }
.ab { display: flex; gap: 26px; align-items: center; transform: rotate(-22deg); }
.ab .round { width: 62px; height: 62px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 14px; }
.ab .a { margin-top: -26px; }
.ss { display: flex; gap: 14px; align-self: end; }
.ss .pill { min-width: 66px; height: 22px; border-radius: 11px; background: var(--dark); color: var(--paper); font-size: 9px; transform: rotate(-22deg); }
.ss .pill:hover { background: var(--ink); }
.keymap { display: grid; }
.keymap > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: var(--s3); padding: 7px 0; border-top: 1px solid var(--mid); font-size: var(--fs-s); }
.keymap > div:last-child { border-bottom: 1px solid var(--mid); }
.keymap dt { display: flex; }

.dk { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; grid-template-areas: "side main otp"; gap: 0 var(--s7); align-items: start; }
.dk-bar { display: none; }
.dk-side { grid-area: side; padding: 0 var(--s3) var(--s5) 0; display: flex; flex-direction: column; gap: var(--s4); }
@media (min-width: 900px) and (min-height: 800px) { .dk-side { position: sticky; top: calc(var(--chrome-h) + var(--s5)); } }
.dk-q { width: 100%; border: var(--line) solid var(--ink); background: var(--paper); padding: 0 var(--s3); height: 40px; font: 400 var(--fs-s)/1 var(--body); }
.dk-q::placeholder { color: var(--mid); }
.dk-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.dk-toc { display: grid; gap: var(--s3); align-content: start; }
.dk-g summary { list-style: none; cursor: pointer; font: var(--fl-s)/1.3 var(--lbl); color: var(--dark); padding: var(--s2) 0; display: flex; justify-content: space-between; gap: var(--s2); border-bottom: 1px solid var(--mid); }
.dk-g summary::-webkit-details-marker { display: none; }
.dk-g summary::after { content: "\25bc"; font: 8px/1.6 var(--lbl); }
.dk-g[open] summary::after { content: "\25b2"; }
.dk-g ol { display: grid; padding: var(--s2) 0 0; }
.dk-g a { display: block; padding: 6px var(--s2); font-size: var(--fs-s); line-height: 1.3; text-decoration: none; border-left: 3px solid transparent; }
.dk-g a:hover { background: var(--light); }
.dk-g a[aria-current] { border-left-color: var(--ink); background: var(--light); font-weight: 600; }
.dk-results { display: grid; gap: var(--s1); align-content: start; }
.dk-results a { display: grid; gap: 3px; padding: var(--s2); text-decoration: none; font-size: var(--fs-s); line-height: 1.3; }
.dk-results a:hover { background: var(--light); }
.dk-results .rk { font: 8px/1.4 var(--lbl); color: var(--dark); }
.dk-results .dim { padding: var(--s2); font-size: var(--fs-s); }
.dk-main { grid-area: main; min-width: 0; padding: 0 var(--s4) var(--s6) 0; }
.dk-article { max-width: 72ch; display: grid; gap: var(--s4); align-content: start; }
.dk-k { font: var(--fl-s)/1.3 var(--lbl); color: var(--dark); }
.dk-h1 { font: 20px/1.45 var(--lbl); }
.dk-article h2 { font: var(--fl)/1.5 var(--lbl); margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--mid); }
.dk-article h3 { font: var(--fl-s)/1.5 var(--lbl); color: var(--dark); margin-top: var(--s1); }
.dk-article h2 a, .dk-article h3 a { text-decoration: none; }
.dk-article h2 a:hover, .dk-article h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.dk-article p { max-width: var(--measure); }
.lede { font-size: calc(var(--fs) * 1.1); line-height: 1.5; }
.dk-article ul { display: grid; gap: var(--s1); }
.dk-article ul > li { position: relative; padding-left: 18px; max-width: var(--measure); }
.dk-article ul > li::before { content: ""; position: absolute; left: 2px; top: 0.65em; width: 6px; height: 6px; background: var(--ink); }
.dk-article dl { display: grid; gap: 0; }
.dk-article dt { font: 12px/1.5 var(--lbl); padding-top: var(--s3); }
.dk-article dd { font-size: var(--fs-s); max-width: var(--measure); padding: 2px 0 var(--s3); border-bottom: 1px solid var(--light); }
.dsteps > li::before { font-size: 11px; }
.dk-article .btn { justify-self: start; }
.dk-article details { border-bottom: 1px solid var(--mid); max-width: var(--measure); }
.dk-article summary { cursor: pointer; position: relative; padding: var(--s2) 28px var(--s2) 0; font-size: var(--fs-s); font-weight: 600; list-style: none; display: block; }
.dk-article summary::-webkit-details-marker { display: none; }
.dk-article summary::after { content: "\25bc"; position: absolute; right: 0; top: var(--s2); font: 10px/1.8 var(--lbl); }
.dk-article details[open] summary::after { content: "\25b2"; }
.dk-article details p { padding: 0 0 var(--s3); font-size: var(--fs-s); }
.dk-article .ca { flex-wrap: wrap; white-space: normal; }
.dk-article .ca .ca-val { font-size: var(--fl-s); }
.dt { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.dt th { font: var(--fl-s)/1.4 var(--lbl); text-align: left; color: var(--dark); padding: 0 var(--s3) var(--s2) 0; border-bottom: 1px solid var(--mid); vertical-align: bottom; }
.dt td { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--light); vertical-align: top; overflow-wrap: anywhere; line-height: 1.4; }
.dt th:last-child, .dt td:last-child { padding-right: 0; }
.dt td:first-child, .dt th:first-child { overflow-wrap: normal; }      .dt-kv td:first-child { white-space: nowrap; width: 1%; }               .dt .r { text-align: right; white-space: nowrap; }
.dt td code { white-space: normal; line-height: 1.5; }
.dt .ok { font: 9px/1 var(--lbl); background: var(--ink); color: var(--paper); padding: 5px 6px 4px; white-space: nowrap; }
.dt .no { font: 9px/1 var(--lbl); border: 2px solid var(--ink); padding: 3px 4px 2px; white-space: nowrap; }
.callout { border-left: 4px solid var(--ink); padding: var(--s2) var(--s4); display: grid; gap: var(--s1); background: var(--light); max-width: var(--measure); }
.callout.is-note { background: transparent; }
.callout.is-warn { background: var(--ink); color: var(--paper); }
.callout.is-warn code { background: var(--paper); color: var(--ink); }
.callout.is-warn a { color: inherit; }
.co-k { font: var(--fl-s)/1.3 var(--lbl); }
.callout p { font-size: var(--fs-s); }
.dsteps { display: grid; gap: var(--s3); counter-reset: step; }
.dsteps > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); align-items: start; counter-increment: step; }
.dsteps > li::before { content: counter(step); font: 10px/1 var(--lbl); background: var(--ink); color: var(--paper); width: 24px; height: 24px; display: grid; place-items: center; margin-top: 1px; }
.dsteps > li > div { display: grid; gap: var(--s2); min-width: 0; }
.dsteps p { font-size: var(--fs-s); }
.doc-figs { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: start; }
.doc-fig { display: grid; gap: var(--s2); justify-items: start; }
.doc-fig .gv-frame { display: inline-block; }
.doc-fig figcaption { font-size: var(--fs-s); color: var(--dark); max-width: 36ch; }
.dk-starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.dk-st { display: grid; gap: var(--s2); align-content: start; justify-items: start; border-top: 4px solid var(--ink); padding-top: var(--s3); min-width: 0; }
.dk-st .st-img { width: 112px; height: 112px; }
.dk-st b { font: 12px/1.5 var(--lbl); font-weight: 400; }
.dk-st .ln { font: 9px/1.7 var(--lbl); color: var(--dark); }
.dk-st p { font-size: var(--fs-s); }
.dg { display: grid; gap: var(--s3); font-size: var(--fs-s); }
.dg-col { display: grid; justify-items: center; gap: var(--s2); }
.dg-box { border: var(--line) solid var(--ink); padding: 6px 10px; text-align: center; line-height: 1.25; }
.dg-box.ink { background: var(--ink); color: var(--paper); }
.dg-arr { display: block; width: 12px; height: 8px; }
.dg-bar { display: block; width: 100%; height: 28px; }
.dg-legs { display: flex; gap: var(--s3); }
.dg-leg { display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.dg-leg .pc { font: 14px/1 var(--lbl); }
.dg-leg b { font: var(--fl-s)/1.4 var(--lbl); font-weight: 400; overflow-wrap: anywhere; }
.dg-leg p { font-size: var(--fs-s); overflow-wrap: anywhere; }
.dg-time { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s3); border-top: 4px solid var(--ink); padding-top: var(--s3); }
.dg-time li { position: relative; display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.dg-time li::before { content: ""; position: absolute; left: 0; top: calc(-1 * var(--s3) - 4px); width: 2px; height: 12px; background: var(--ink); }
.dg-time .tt { font: var(--fl-s)/1.4 var(--lbl); justify-self: start; }
.dg-time .tt.hot { background: var(--ink); color: var(--paper); padding: 4px 5px 3px; }
.dg-time p { font-size: var(--fs-s); }
.dg-line { gap: var(--s1); }
.dg-line .line-cap { max-width: none; margin: 0; }
.dg-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s3); }
.dg-track li { display: grid; gap: var(--s1); align-content: start; font-size: var(--fs-s); line-height: 1.3; }
.dg-track .bd-n.ink { background: var(--ink); color: var(--paper); }
.dg-track .bd-n.dash { background: var(--paper); outline: 2px dashed var(--ink); outline-offset: -2px; }
.dg-track .tl { font: 9px/1.4 var(--lbl); color: var(--dark); }
.dk-pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s6); border-top: 1px solid var(--mid); padding-top: var(--s4); max-width: 72ch; }
.dk-pn a { display: grid; gap: var(--s1); text-decoration: none; font-size: var(--fs-s); padding: var(--s2) 0; min-width: 0; }
.dk-pn a.next { text-align: right; grid-column: 2; }
.dk-pn .pk { font: var(--fl-s)/1.3 var(--lbl); color: var(--dark); }
.dk-pn a:hover .pt { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.dk-otp { grid-area: otp; position: sticky; top: calc(var(--chrome-h) + var(--s5)); display: grid; gap: var(--s3); align-content: start; }
.dk-otp-h { font-size: var(--fl-s); color: var(--dark); }
.dk-otp-l { display: grid; gap: 2px; }
.dk-otp-l a { display: block; padding: 4px var(--s2); font-size: var(--fs-s); line-height: 1.3; text-decoration: none; border-left: 2px solid var(--light); color: var(--dark); }
.dk-otp-l a:hover, .dk-otp-l a.on { border-left-color: var(--ink); color: var(--ink); }
@media (max-width: 1239px) {
  .dk { grid-template-columns: 230px minmax(0, 1fr); grid-template-areas: "side main"; gap: 0 var(--s6); }
  .dk-otp { display: none; }
}

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: 340px; max-width: 100%;
  background: var(--paper); border-left: 3px solid var(--ink); padding: 14px 16px; overflow: auto;
  display: flex; flex-direction: column; gap: 14px; box-shadow: -8px 0 0 rgba(18, 18, 16, 0.12);
}
.dr-head { display: flex; align-items: center; justify-content: space-between; }
.dr-note { font-size: var(--fs-s); color: var(--dark); }
.dr-group { display: grid; gap: var(--s2); }
.dr-group h2 { font-size: var(--fl-s); color: var(--dark); }
.dr-opts { display: grid; gap: 4px; }
.dopt { text-align: left; font: 400 var(--fs-s)/1.2 var(--body); padding: 8px 10px; border: var(--line) solid var(--ink); background: var(--paper); cursor: pointer; }
.dopt:hover { background: var(--light); }
.dopt[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.dopt[aria-pressed="true"]::before { content: "\25b6  "; font: 10px/1 var(--lbl); }

.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(18, 18, 16, 0.45); display: grid; place-items: center; padding: var(--s4); }
.sheet { width: min(520px, 100%); max-height: 100%; overflow: auto; background: var(--paper); border: 3px solid var(--ink); padding: 18px 20px; display: grid; gap: 14px; }
.sheet-h { font-size: 14px; line-height: 1.4; }
.sheet-body { display: grid; gap: 14px; font-size: var(--fs-s); }
.sheet-body .big { font-size: var(--fs); font-weight: 600; }
.sheet-body .sm { font-size: var(--fs-s); }
.wlist { display: grid; gap: var(--s2); }
.wopt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 12px 14px; border: var(--line) solid var(--ink); background: var(--paper); cursor: pointer; }
.wopt:hover { background: var(--light); }
.wopt.wl { flex-direction: row; align-items: center; gap: 12px; }
.wopt.wl img { width: 24px; height: 24px; image-rendering: auto; flex: none; }
.wopt:disabled { opacity: 0.6; cursor: progress; }
.wopt b { font: 12px/1 var(--lbl); font-weight: 400; }
.wopt span { font-size: var(--fs-s); }
.msg { font: 11px/1.8 var(--lbl); background: var(--light); padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet-act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sheet-act .btn.pri { min-width: 140px; }

.share-wrap { position: fixed; inset: 0; z-index: 55; background: rgba(18, 18, 16, 0.6); display: grid; place-items: center; padding: var(--s4); }
.share { width: min(1280px, 100%); max-height: 100%; overflow: auto; background: var(--paper); border: 3px solid var(--ink); padding: var(--s4) var(--s5); display: grid; gap: var(--s4); }
.share-top { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.share-top .seg { width: 180px; }
#share-close { margin-left: auto; }
.share-stage { position: relative; height: min(60vh, 680px); overflow: hidden; background: var(--light); }
.share-post { display: grid; gap: var(--s2); justify-items: start; }
.share-say { font-size: var(--fs-s); font-weight: 600; }
.share-text { font-size: var(--fs-s); color: var(--dark); max-width: var(--measure); }

.card {
  position: absolute; left: 50%; top: 50%; transform-origin: center center;
  width: 1200px; height: 675px; margin: -337.5px 0 0 -600px;
  background: var(--paper); color: var(--ink);
  border: 48px solid transparent; border-image: url("img/px/box.png") 8 fill / 48px stretch; image-rendering: pixelated; background-clip: padding-box;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 18px; padding: 0 12px;
}
.card > * { image-rendering: auto; }
.card[data-fmt="square"] { width: 1080px; height: 1080px; margin: -540px 0 0 -540px; gap: 36px; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.card[data-fmt="square"] .cd-r { order: -1; justify-self: stretch; display: flex; align-items: center; justify-content: space-between; }
.card[data-fmt="square"] .cd-l { gap: 18px; }
.card[data-fmt="square"] .cd-pod { flex-direction: column; gap: 18px; align-self: end; }
.card[data-fmt="square"] .cd-foot { flex-direction: column; gap: 10px; }
.cd-top { display: flex; align-items: center; gap: 28px; }
.cd-logo { height: 64px; width: auto; }
.cd-k { font: 18px/1.4 var(--lbl); color: var(--dark); }
.cd-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.cd-l { display: grid; gap: 14px; min-width: 0; }
.cd-tag { font: 18px/1 var(--lbl); color: var(--dark); }
.cd-name { font: 84px/1.1 var(--lbl); overflow-wrap: anywhere; }
.card[data-fmt="square"] .cd-name { font-size: 112px; }
.card[data-fmt="square"] .cd-main { grid-template-columns: 1fr; justify-items: stretch; gap: 36px; align-content: start; }
.cd-nums { font-size: 26px; }
.cd-nums b { font: 400 34px/1 var(--lbl); }
.cd-cmd { font-size: 22px; }
.cd-cmd code { font-size: 1em; }
.cd-r { display: grid; justify-items: center; gap: 14px; }
.cd-timer { font: 30px/1 var(--lbl); background: var(--ink); color: var(--paper); padding: 12px 14px; }
.cd-timer.txt { font-size: 16px; line-height: 1.5; max-width: 300px; text-align: center; }
.card .cr figcaption { font-size: 20px; max-width: 30ch; }
.card .cr-sprite { --cs: 4; }
.card .st-img { width: 112px; height: 112px; }
.card .cr-q { width: 160px; height: 160px; font-size: 64px; }
.cd-pod { display: flex; gap: 40px; font-size: 22px; flex-wrap: wrap; }
.cd-pod li { display: flex; align-items: center; gap: 14px; }
.cd-pod .pos { width: 40px; height: 40px; display: grid; place-items: center; background: var(--light); color: var(--ink); font: 16px/1 var(--lbl); }
.cd-pod b { font: 400 24px/1 var(--lbl); }
.cd-pod span { color: var(--dark); }
.cd-pod code { font-size: 18px; }
.cd-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-top: 3px solid var(--ink); padding-top: 14px; font-size: 20px; color: var(--dark); }
.cd-foot b { font: 400 22px/1 var(--lbl); color: var(--ink); }

.note {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--paper); font: var(--fl-s)/1.5 var(--lbl); padding: 10px 14px; text-align: center;
}

@media (max-width: 899px) {
  .app { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .ribbon, .top { position: static; }
  .ribbon { height: 26px; gap: 10px; justify-content: space-between; }
  .ribbon .rb-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ribbon .rb-more { display: none; }
  .top { gap: 10px; }
  .top-logo img { height: 26px; }
  .tabs, .top-ca { display: none; }
  .top-r { gap: var(--s2); }
  .wallet-btn { min-height: 36px; font-size: 10px; padding: 0 10px; }
  .live { padding: 5px 6px 4px; }
  .btabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--paper);
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: var(--line) solid var(--ink);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .btabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 60px; padding: 6px 0; text-decoration: none; font: 8px/1.15 var(--lbl); text-align: center; }
  .btabs svg { width: 24px; height: auto; }
  .btabs a[aria-current] { background: var(--ink); color: var(--paper); }
  .screen { padding: var(--s3) var(--pad) var(--s6); }
  .w-head .live { display: none; }
  .gv-frame { border-width: 3px; }
  .st-img { width: 56px; height: 56px; }
  .cr-q { width: 56px; height: 56px; font-size: 22px; }
  .cr-sprite { --cs: 2; }

  .s-home { display: flex; flex-direction: column; gap: var(--s2); min-height: 0; }
  .s-home > * { flex-shrink: 0; }
  .home-stats { display: none; }
  .home-game { min-height: auto; }
  .home-game .gv { flex: none; min-height: 0; contain: none; }
  .gv-stack { row-gap: var(--s1); }
  .ichat { padding: 0 2px; }
  .ichat li { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: var(--s2); min-height: 20px; font-size: 13px; }
  .ichat .k { height: 18px; min-width: 18px; font-size: 9px; }
  .ichat .k .ka.v { width: 10px; height: 6px; }
  .ichat .k .ka.h { width: 6px; height: 10px; }
  .home-info { gap: var(--s2); align-self: start; }
  .home-h { font-size: 15px; line-height: 1.5; }
  .home-h span { display: inline; }
  .home-sub { font-size: var(--fs); }
  .steps { gap: 0; }
  .steps a { grid-template-columns: 22px 64px minmax(0, 1fr); padding: 2px 0; gap: var(--s2); }
  .steps .n { width: 20px; height: 20px; font-size: 9px; }
  .steps .w { font-size: 10px; }
  .steps .t { font-size: var(--fs-s); line-height: 1.2; }
  .steps .t-how { display: none; }
  .home-act { gap: var(--s2); }
  .home-act .btn { min-height: 44px; font-size: 11px; padding: 0 12px; }
  .home-ca .btn-s { min-height: 30px; }
  .teaser { gap: var(--s2); padding: var(--s2) var(--s3); justify-content: flex-start; }
  .teaser.launch { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h h" "time time" "lead lead" "cp go" "also also"; gap: var(--s2) var(--s3); padding: var(--s3); }
  .lb-t { font-size: 10px; }
  .lb-time .num { font-size: 16px; }
  .lb-lead { font-size: var(--fs-s); }
  .lb-lead b { font-size: 12px; }
  .teaser.launch .cp { justify-self: start; }
  .s-home.launching > .home-game { order: 0; }
  .s-home.launching > .teaser { order: 1; }
  .s-home.launching > .home-info { order: 2; }
  .s-home.launching > .home-foot { order: 3; }
  .teaser .chip { font-size: 9px; }
  .teaser .tt { font-size: var(--fs-s); }
  .teaser .cp { background: var(--paper); }
.teaser .cp:hover { background: var(--mid); }
.tz-go { font-size: 9px; margin-left: auto; }
  .home-fine { font-size: var(--fs-s); }

  .s-watch { display: flex; flex-direction: column; gap: var(--s3); min-height: 0; }
  .s-watch > * { flex-shrink: 0; }
  .w-main { display: contents; }
  .w-head { order: 0; } .w-main > .gv { order: 1; } .w-side { order: 2; } .ticker { order: 3; } .strip { order: 4; }
  .w-head { gap: var(--s2); }
  .w-head .wm { font-size: 9px; }
  .w-head .wv { display: none; }
  .s-watch { gap: var(--sec); }
  .w-head + .gv { margin-top: calc(var(--s2) - var(--sec)); }
  .w-side { gap: var(--sec); }
  .w-side > * { flex-shrink: 0; }
  .chat-list li { grid-template-columns: 9ch minmax(0, 1fr); column-gap: var(--s2); }
  .ticker { gap: var(--s2); flex-direction: column; align-items: flex-start; }
  .strip { justify-content: flex-start; gap: var(--s2) var(--s4); }
  .mv-list .who { width: 84px; }
  .vc-top li { grid-template-columns: 16px 84px minmax(0, 1fr) 48px; }

  .v-scroll { display: flex; flex-direction: column; gap: var(--sec); }
  .v-col, .v-lists { display: contents; }
  .v-now { order: 1; }
  .act { order: 2; }
  .v-next { order: 3; }
  .v-mine { order: 4; }
  .v-burners { order: 5; }
  .v-hist { order: 6; }
  .v-sec.lead { padding: var(--s3) var(--s3) var(--s4); }
  .v-k { font-size: 12px; }
  .v-state .chip { font-size: 9px; }
  .v-timer { gap: 4px 6px; order: 5; flex-basis: 100%; margin-left: 0; grid-template-columns: auto 1fr; }
  .v-sec-h .share-btn, .v-sec-h .v-timer[hidden] + .share-btn { margin-left: auto; }
  .hero .cp, .pod .cp { width: auto; }
  .vt-n { font-size: 17px; }
  .vt-bar { min-width: 84px; height: 5px; }
  .hero { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); }
  .hero.three { grid-template-columns: minmax(0, 1fr); }
  .hero.three .cr { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--s3); }
  .hero-name { font-size: 24px; }
  .hero-title { font-size: 12px; }
  .hero-title.small { font-size: 10px; }
  .hero-nums .num { font-size: 16px; }
  .cr figcaption { font-size: var(--fs-s); max-width: 12ch; }
  .podium { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .pod .nm { font-size: 13px; }
  .pod-nums .num { font-size: 12px; }
  .prow { grid-template-columns: 30px minmax(0, 1fr) auto auto; grid-template-areas: "pos pn pn pt" ". bar pu pw" ". act act act"; row-gap: var(--s1); column-gap: var(--s2); }
  .prow .cp { width: auto; }
  .prow > .acts, .prow > .pstate { justify-self: start; }
  .pick { min-width: 80px; }
  .act { padding: 0 var(--s1) var(--s2); }
  .act-t { font-size: 11px; }
  .v-name { font-size: 14px; padding: 8px 10px; }
  .v-name::placeholder { font-size: 11px; }
  .v-count { font-size: 10px; padding: 0 6px; }
  .v-reason:empty { display: none; }
  .gbox { padding: 6px 8px; }
  .gbox-t { font-size: 10px; line-height: 1.5; }
  .amt-row > .amt { height: 38px; font-size: 13px; }
  .v-go { min-height: 46px; font-size: 12px; }

  .e-scroll { display: flex; flex-direction: column; gap: var(--sec); }
  .e-scroll > * { flex-shrink: 0; }
  .loops { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }

  .loop-h { font-size: 12px; }
  .e-stats { position: static; gap: var(--s2); }
  .tile { padding: calc(var(--s2) + var(--line)); }
  .tile.hot { padding: var(--s2); }
  .tn { font-size: 18px; }
  .mtrack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #e-rivals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc { min-height: 88px; }
  .e-badges .mc-h { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .e-badges .md .sep { display: none; }
  .e-badges .md a { display: table; }
  #e-rivals .mc.end { grid-column: 1 / -1; min-height: 0; }
  .ledger td { white-space: normal; }

  .s-play { display: flex; flex-direction: column; gap: var(--sec); }
  .p-col { display: contents; }
  .p-try { order: 1; gap: var(--s2); }
  .p-steps { order: 2; }
  .p-pad { order: 3; }
  .p-moves { order: 4; }
  .p-faq { order: 5; }
  .try-in { font-size: 16px; padding: 10px 12px; }
  .try-out { min-height: 96px; }
  .tk .k { min-width: 30px; height: 30px; font-size: 12px; }
  .try-rule { display: none; }
  .pad { min-height: 0; grid-template-columns: 1fr 1fr; grid-template-areas: "d ab" "ss ss"; row-gap: 14px; padding: 14px; border-radius: 14px 14px 44px 14px; }
  .dpad { grid-area: d; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 40px); }
  .dpad .pb { font-size: 8px; }
  .ab { grid-area: ab; gap: 20px; }
  .ab .round { width: 52px; height: 52px; }
  .ss { grid-area: ss; justify-self: center; }
  .psteps li { grid-template-columns: 24px minmax(0, 1fr); }
  .keymap > div { grid-template-columns: 100px minmax(0, 1fr); }
  .psteps .btn { grid-column: 2; justify-self: start; }
  .line { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .jsteps { grid-template-columns: minmax(0, 1fr); }

  .dk { display: flex; flex-direction: column; gap: var(--s4); }
  .dk > * { flex-shrink: 0; }
  .dk-bar { display: flex; align-items: center; gap: var(--s3); }
  .dk-bar-k { font-size: var(--fl-s); color: var(--dark); }
  .dk-side { padding: 0 0 var(--s3); border-bottom: 1px solid var(--mid); }
  .dk-main { padding: 0; }
  .dk-article { max-width: none; }
  .dk-h1 { font-size: 14px; line-height: 1.5; }
  .dk-article h2 { font-size: 11px; }
  .dk-article h3 { font-size: 9px; }
  .lede { font-size: var(--fs); }
  .doc-figs { flex-direction: column; }
  .dk-starters { grid-template-columns: minmax(0, 1fr); }
  .dk-st .st-img { width: 56px; height: 56px; }
  .dt-kv, .dt-kv tbody, .dt-kv tr, .dt-kv td { display: block; width: auto; }
  .dt-kv tr { border-bottom: 1px solid var(--light); padding: var(--s2) 0; }
  .dt-kv td { border: 0; padding: 0; }
  .dt-kv td:first-child { font: var(--fl-s)/1.5 var(--lbl); color: var(--dark); white-space: normal; width: auto; padding-bottom: 2px; }
  .dt-kv td:first-child b { font-weight: 400; }
  .dg-legs { flex-direction: column; gap: var(--s2); }
  .dg-leg { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "pc b" "pc p"; column-gap: var(--s3); border-top: 1px solid var(--light); padding-top: var(--s2); }
  .dg-leg .pc { grid-area: pc; }
  .dg-leg b { grid-area: b; }
  .dg-leg p { grid-area: p; }
  .dg-time { grid-auto-flow: row; grid-auto-columns: auto; border-top: 0; border-left: 4px solid var(--ink); padding: 0 0 0 var(--s3); }
  .dg-time li::before { top: 4px; left: calc(-1 * var(--s3) - 4px); width: 12px; height: 2px; }
  .dg-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dk-pn { grid-template-columns: minmax(0, 1fr); }
  .dk-pn a.next { grid-column: 1; }

  .dr-opts { grid-template-columns: 1fr 1fr; }
  .dopt { padding: 7px 8px; }
  .drawer { gap: 10px; padding: 12px; }
  .drawer { top: auto; left: 0; width: 100%; max-height: 78%; border-left: 0; border-top: 3px solid var(--ink); box-shadow: 0 -8px 0 rgba(18, 18, 16, 0.12); }
  .sheet-wrap { align-items: end; padding: 0; }
  .sheet { width: 100%; border-width: 3px 0 0; padding: var(--s4); max-height: 90%; }
  .share-wrap { padding: 0; align-items: end; }
  .share { border-width: 3px 0 0; padding: var(--s3); gap: var(--s3); max-height: 96%; }
  .share-stage { height: 46vh; }
  .note { left: 8px; right: 8px; top: 84px; bottom: auto; transform: none; max-width: none; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.app { grid-template-rows: auto minmax(0, 1fr); }
@media (max-width: 899px) {
  .top .tabs { display: flex; }
  .tabs a { font-size: 10px; padding: 10px 8px 9px; }
}
.s-404 { display: grid; align-content: start; }
.s-404 .dk-article { padding-top: var(--s6); }