/* MATH — a Windows-shaped desk in the Elysium palette: deep teal, one cyan
   accent, white primary buttons, warm sand for the silicon half. */
:root {
  --paper:      #04181c;
  --ink:        #34b7dd;
  --ink-deep:   #1e4d5a;
  --ink-text:   #93d9ee;   /* ink-deep used to double as text; on a dark desk it cannot */

  /* chrome, all from the Elysium brand scale */
  --bar-hi:     #2d7388;
  --bar-lo:     #1e4d5a;
  --face:       #051d22;   /* window body, a shade above the desk */
  --face-hi:    #0f2a30;
  --face-lo:    #071317;
  --line:       #163b44;
  --text:       #e8eef0;
  --muted:      #8e999b;
  --link:       #6fcde8;
  --ok:         #6fcde8;
  --warn:       #ffb86a;

--font-ui:    "Inter", Tahoma, Verdana, "Segoe UI", sans-serif;
  --font-title: "Inter", "Trebuchet MS", Tahoma, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Times New Roman", Times, serif;
  --task-h:     34px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow: hidden;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5; color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
code, pre, kbd { font-family: var(--font-mono); font-size: .95em; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; color: #04181c; background: #fff; padding: 6px; z-index: 999; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- desk */
#wallpaper { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%;
  pointer-events: none; }
.desktop { position: relative; z-index: 1; height: calc(100vh - var(--task-h)); overflow: hidden; }

.topright { position: absolute; z-index: 5; right: 18px; top: 16px; display: flex; gap: 8px; align-items: center; }
.ticker { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 10px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text); background: rgba(4,24,28,.86); border: 1px solid var(--line); white-space: nowrap; }
.ticker[hidden] { display: none; }
.ticker b { font-weight: 600; color: var(--ink-text); }
.ticker .t-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.ticker .t-cap { color: var(--muted); font-variant-numeric: tabular-nums; }
.ticker .ca { color: var(--link); }
.ticker .copy-btn { margin: 0; }

/* ------------------------------------------------------------- icons */
.desk-icons { position: absolute; z-index: 3; left: 22px; top: 20px;
  display: grid; grid-template-columns: repeat(2, 96px); gap: 6px 4px; }
.icon { width: 96px; padding: 8px 4px 6px; text-align: center; cursor: default; user-select: none;
  text-decoration: none; color: var(--text); display: block; border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
  animation: icon-in .45s ease both; }
.desk-icons .icon:nth-child(n) { animation-delay: calc(var(--i, 0) * .045s); }
@keyframes icon-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.icon .ico { display: block; height: 56px; margin: 0 auto 5px; }
.icon .ico svg { display: block; margin: 0 auto; width: 52px; height: 52px; image-rendering: pixelated;
  filter: drop-shadow(1px 2px 0 rgba(52,183,221,.18)); transition: transform .2s cubic-bezier(.34,1.5,.64,1); }
.icon span:last-child { display: inline-block; font-size: 11px; line-height: 1.25; padding: 2px 6px;
  font-family: var(--font-mono); letter-spacing: -.01em;
  background: rgba(4,24,28,.94); box-shadow: 0 0 0 1px rgba(4,24,28,.94); }
.icon:hover { background: rgba(52,183,221,.10); border-color: rgba(52,183,221,.35); }
.icon:hover .ico svg { transform: scale(1.1) rotate(-2deg); }
.icon.is-sel { background: rgba(52,183,221,.20); border-color: var(--ink); }
.icon.is-sel span:last-child { background: var(--ink); color: var(--paper); }
.desk-icons .icon.bin { grid-column: 2; margin-top: 12px; }

/* ------------------------------------------------------------- windows */
.windows { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.win {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column; min-width: 0;
  background: var(--face);
  border: 1px solid var(--ink-deep);
  box-shadow: 2px 2px 0 rgba(52,183,221,.14), 0 10px 26px rgba(0,0,0,0.39);
  transition: box-shadow .18s ease;
  animation: win-in .16s ease both;
}
@keyframes win-in { from { opacity: 0; transform: translateY(-6px) scale(.995); } to { opacity: 1; transform: none; } }
.win.is-active { box-shadow: 3px 3px 0 rgba(52,183,221,.24), 0 22px 54px rgba(0,0,0,0.60); }
.win.is-closing { opacity: 0; transform: scale(.99); transition: opacity .15s ease, transform .15s ease; }
.win.is-min { display: none; }
.win.is-max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100%; }
/* Maximised, the body has to own the rest of the window.

   Left alone it keeps its 560px ceiling, sizes itself to its content and
   stops - and everything below that is bare window background, which on a
   dark window is a light slab across the bottom. flex:1 hands it the
   remaining height; min-height:0 is what lets a flex child shrink below its
   content and scroll instead of pushing the window open. */
.win.is-max > .win-body { flex: 1 1 auto; max-height: none; min-height: 0; }
.win.is-dragging { user-select: none; }

.win-bar { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 10px; height: 28px; flex: 0 0 28px;
  background: linear-gradient(180deg, #163b44 0%, #0f2a30 100%);
  color: rgba(255,255,255,.82); font-family: var(--font-title); font-size: 12px; font-weight: 600;
  letter-spacing: .005em; cursor: default; transition: background .16s ease, color .16s ease; }
.win.is-active > .win-bar { background: linear-gradient(180deg, var(--bar-hi) 0%, var(--bar-lo) 100%); color: #fff; }
.win-bar > span:first-child { white-space: nowrap; }
.win-bar .stripes { flex: 1; height: 9px; margin: 0 4px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 1px, transparent 1px 4px); }
.wb { width: 20px; height: 18px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14);
  color: #fff; font: 600 12px/1 var(--font-ui); cursor: pointer; padding: 0; }
.wb:hover { background: rgba(255,255,255,.30); }

.win-body { padding: 14px 16px; overflow: auto; max-height: min(66vh, 560px); }
.win-body.tight { padding: 0; }
.win.dark { background: #071317; color: #e8eef0; border-color: #000; }
.win.dark .win-body { background: #071317; }
.win.dark a { color: #6fcde8; }
.win.dark code { color: #93d9ee; }

/* ------------------------------------------------------------- typography inside windows */
.eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 8px; }
.h1 { font-family: var(--font-title); font-size: 25px; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 10px; font-weight: 700; }
.small { font-size: 12px; margin: 0 0 9px; }
.big { font-family: var(--font-title); font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.math { font-family: var(--font-serif); font-size: 17px; font-style: italic; color: var(--ink-text); margin: 0 0 10px; }
.quote { font-family: var(--font-serif); font-size: 19px; font-style: italic; line-height: 1.35;
  color: var(--ink-text); margin: 0 0 12px; }
.thm { border-left: 2px solid var(--ink); padding: 0 0 0 11px; margin: 0 0 12px; }
.qed { font-family: var(--font-serif); }
.hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two-col { display: grid; grid-template-columns: 1fr 250px; gap: 18px; }

.tip { background: rgba(52,183,221,.07); border: 1px solid rgba(52,183,221,.28); padding: 9px 11px;
  font-size: 12px; margin: 0 0 12px; }
.note { padding: 9px 11px; font-size: 12px; border: 1px solid var(--line); margin-top: 10px; }
.note.ok { border-color: rgba(111,205,232,.5); background: rgba(111,205,232,.08); }
.note.warn { border-color: rgba(255,184,106,.5); background: rgba(255,184,106,.08); }

.tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 6px; border: 1px solid currentColor; }
.tag.ok { color: var(--ok); }
.tag.warn { color: var(--warn); }
.tag.live { color: var(--ink); }

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 12px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; font-family: var(--font-mono); word-break: break-word; }

.btn { font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 6px 13px; cursor: pointer;
  background: var(--face); color: var(--ink-text); border: 1px solid var(--ink-deep);
  box-shadow: 2px 2px 0 rgba(52,183,221,.25); transition: transform .1s ease, box-shadow .1s ease; }
.btn:hover { background: var(--face-hi); }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-primary { background: #fafafa; color: #04181c; border-color: #fafafa; }
.btn-primary:hover { background: #dbf2f9; }
.btn-sm { padding: 4px 9px; font-size: 11px; }
.copy-btn { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; margin-left: 6px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--muted); }
.copy-btn.is-done { color: var(--ok); border-color: var(--ok); }
.ca { font-family: var(--font-mono); font-size: 11px; word-break: break-all; }

.bar { height: 12px; border: 1px solid var(--ink-deep); background: rgba(255,255,255,.06); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s linear; }
.win.dark .bar { border-color: #2d7388; background: rgba(255,255,255,.08); }
.win.dark .bar i { background: #34b7dd; }

.lamp { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2d7388; margin-right: 6px;
  vertical-align: middle; }
.lamp.on { background: #34b7dd; box-shadow: 0 0 8px #34b7dd; }

.hashrow { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; font-size: 11.5px; }
.hashrow code { word-break: break-all; }

.stepper { list-style: none; margin: 10px 0 0; padding: 0; font-size: 11.5px; }
.stepper li { padding: 3px 0 3px 20px; position: relative; color: var(--muted); }
.stepper li::before { content: '○'; position: absolute; left: 2px; }
.stepper li.step-active { color: var(--ink); } .stepper li.step-active::before { content: '◐'; }
.stepper li.step-done { color: var(--ok); } .stepper li.step-done::before { content: '●'; }
.stepper li.step-failed { color: var(--warn); } .stepper li.step-failed::before { content: '×'; }

.tabs { display: flex; gap: 2px; padding: 6px 8px 0; background: var(--face-lo); border-bottom: 1px solid var(--line); }
.tab { font: 600 11.5px var(--font-ui); padding: 5px 12px; cursor: pointer; background: transparent;
  border: 1px solid transparent; border-bottom: 0; color: var(--muted); }
.tab.is-on { background: var(--face); border-color: var(--line); color: var(--ink-text); }

.tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; font-family: var(--font-mono); }
.tbl th { text-align: left; font-family: var(--font-ui); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 6px 10px; border-bottom: 1px solid rgba(30,77,90,.4); }
.tbl-wrap { overflow: auto; }

.plot { width: 100%; height: auto; border: 1px solid var(--line); background: var(--face-lo); display: block; }

/* ------------------------------------------------------------- taskbar */
.taskbar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: var(--task-h);
  display: flex; align-items: center; gap: 6px; padding: 0 8px 0 0;
  background: linear-gradient(180deg, #0f2a30 0%, #071317 100%);
  border-top: 1px solid rgba(255,255,255,.12); color: #fff; }
.start { font-family: var(--font-title); font-weight: 700; font-size: 13px; letter-spacing: .01em;
  height: 100%; padding: 0 18px 0 16px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.14); border: 0; border-right: 1px solid rgba(255,255,255,.25); }
.start:hover { background: rgba(255,255,255,.26); }
.task-list { display: flex; gap: 4px; flex: 1; overflow: hidden; }
.task { font: 500 11.5px var(--font-ui); max-width: 165px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 4px 11px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.task.is-active { background: rgba(255,255,255,.30); }
.tray { display: flex; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,.86); padding-left: 12px; border-left: 1px solid rgba(255,255,255,.22); }

.start-menu { position: fixed; z-index: 30; left: 0; bottom: var(--task-h); width: 268px;
  background: var(--face); border: 1px solid var(--ink-deep); box-shadow: 3px -3px 0 rgba(52,183,221,.22); }
.start-menu .side { padding: 13px 14px; background: linear-gradient(180deg, var(--bar-hi) 0%, var(--bar-lo) 100%); }
.start-menu .side img { display: block; width: 132px; height: auto; }
.start-menu .ico-list { padding: 6px; }
.start-menu a { display: flex; align-items: center; gap: 9px; padding: 6px 9px; text-decoration: none;
  color: var(--text); font-size: 12px; }
.start-menu a:hover { background: var(--ink); color: #04181c; }
.start-menu a svg { width: 16px; height: 16px; flex: 0 0 16px; }
.start-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 8px; }

/* ------------------------------------------------------------- mobile */
@media (max-width: 760px) {
  .windows { position: static; }
  .win { position: relative !important; left: auto !important; top: auto !important;
    width: auto !important; margin: 10px; animation: none; }
  .desktop { height: auto; min-height: calc(100vh - var(--task-h)); overflow: auto; padding-bottom: 20px; }
  body { overflow: auto; }
  .desk-icons { position: static; margin: 14px 0 0 14px; grid-template-columns: repeat(3, 90px); }
  .two-col, .grid-2 { grid-template-columns: 1fr; }
  .topright { position: static; padding: 12px 14px 0; justify-content: flex-end; flex-wrap: wrap; }
  .ticker .t-cap { display: none; }
  .win-body { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ================================================================ polish */
::selection { background: var(--ink); color: #04181c; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.win-body { scrollbar-width: thin; scrollbar-color: rgba(52,183,221,.45) transparent; }
.win-body::-webkit-scrollbar { width: 10px; height: 10px; }
.win-body::-webkit-scrollbar-track { background: transparent; }
.win-body::-webkit-scrollbar-thumb { background: rgba(52,183,221,.35); border: 3px solid transparent;
  background-clip: content-box; }
.win-body::-webkit-scrollbar-thumb:hover { background: rgba(52,183,221,.6); background-clip: content-box; }
.win.dark .win-body { scrollbar-color: rgba(111,205,232,.5) transparent; }

/* ---------------------------------------------------------------- math.exe */
.win-body.prover { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px;
  align-items: start; padding: 20px 22px 22px; }
.plate-fig { margin: 0; }
.plate-img { display: block; width: 340px; height: 424px; image-rendering: pixelated;
  background: var(--ink-deep); border: 1px solid var(--ink-deep);
  box-shadow: 3px 3px 0 rgba(52,183,221,.20); }
.plate-fig figcaption { margin-top: 9px; max-width: 340px; font-size: 11px; line-height: 1.55;
  color: var(--muted); }
.prover-text .quote { font-size: 23px; line-height: 1.28; margin-bottom: 6px; }
.prover-text .math { font-size: 18px; margin-bottom: 12px; }
.prover-text .small { margin-bottom: 10px; }

/* ------------------------------------------------------- the redacted line */
.redact { display: inline-block; margin: 0; font-family: var(--font-mono); font-size: 13px; }
.redact span { display: inline-block; padding: 3px 8px; background: var(--ink-deep); color: transparent;
  cursor: default; transition: background .45s cubic-bezier(.2,.7,.2,1), color .45s ease; }
.redact:hover span, .redact:focus-within span { background: rgba(52,183,221,.10); color: var(--text); }

/* ------------------------------------------------------------ overclock.exe
   The one icon that is not a document. It sits apart from the row because it
   is not a place to read, it is a part of the machine. */
.icon.chip { position: absolute; z-index: 3; right: 46px; top: 44%; width: 104px;
  animation-delay: .55s; border-color: transparent !important; background: none !important; }
.chip .ico { width: 52px; height: 52px; margin: 0 auto 8px;
  background: url(../assets/icons/board.png) center / contain no-repeat;
  filter: drop-shadow(1px 2px 0 rgba(52,183,221,.22));
  transition: transform .22s cubic-bezier(.34,1.5,.64,1), filter .22s ease; }
.icon.chip:hover .ico { transform: scale(1.09) rotate(-1.5deg);
  filter: drop-shadow(2px 4px 0 rgba(52,183,221,.28)); }
.chip .lbl { display: inline-block; font-family: var(--font-mono); font-size: 11px; line-height: 1.25;
  padding: 2px 6px; letter-spacing: -.01em; white-space: pre;
  background: rgba(4,24,28,.94); box-shadow: 0 0 0 1px rgba(4,24,28,.94); }
.icon.chip.is-sel .lbl { background: var(--ink); color: var(--paper); box-shadow: none; }

/* ------------------------------------------------------------- the rig panel
   The thread count is the number the whole window exists to show, so it is the
   only thing here set at display size. */
.rig { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  margin-top: 12px; padding: 12px 14px; background: var(--face-hi);
  border: 1px solid var(--line); box-shadow: inset -1px -1px 0 var(--face-lo); }
.rig-core { display: grid; justify-items: center; min-width: 92px; padding: 10px 12px;
  background: var(--nv-band); color: #fff; border: 1px solid var(--ink-deep); }
.rig-n { font-family: var(--font-mono); font-size: 34px; line-height: 1; color: var(--nv); }
.rig-cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #8e999b; margin-top: 4px; }
.rig.is-cold .rig-n { color: var(--muted); }
.rig-kv dd { font-size: 12px; }

/* the tier table. The row you are on is the point of it, so that row is the
   only one that carries any weight. */
table.tiers { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
table.tiers td { padding: 4px 8px; border-bottom: 1px solid var(--face-lo);
  font-family: var(--font-mono); color: var(--muted); }
table.tiers td:last-child { text-align: right; }
table.tiers tr.is-here td { background: rgba(52,183,221,.07); color: var(--text); font-weight: 600; }
table.tiers tr.is-here td:first-child::before { content: '\25b8\00a0'; color: var(--ink); }

.burn-box { padding: 12px 14px; background: var(--face-hi); border: 1px solid var(--line);
  box-shadow: inset -1px -1px 0 var(--face-lo); }
input.in { font-family: var(--font-mono); font-size: 13px; padding: 5px 8px;
  background: var(--paper); color: var(--text); border: 1px solid var(--line);
  box-shadow: inset 1px 1px 0 var(--face-lo); }
input.in:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.burn-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 12px;
  padding: 3px 0; border-bottom: 1px solid var(--face-lo); }
.burn-row .mono { font-family: var(--font-mono); }

@media (max-width: 760px) {
  .win-body.prover { grid-template-columns: 1fr; }
  .plate-img { width: 100%; max-width: 340px; height: auto; }
  .icon.chip { position: static; margin: 6px 0 0 14px; }
  .rig { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- the mark */
.icon .ico img.app { display: block; width: 52px; height: 52px; margin: 0 auto; border-radius: 10px;
  border: 1px solid var(--ink-deep); box-shadow: 1px 2px 0 rgba(52,183,221,.22);
  image-rendering: auto; transition: transform .2s cubic-bezier(.34,1.5,.64,1); }
.icon:hover .ico img.app { transform: scale(1.08) rotate(-2deg); }
.start-menu a img.app { width: 16px; height: 16px; border-radius: 4px; border: 0; box-shadow: none; }

/* ------------------------------------------------------------- drawn plates */
.icon .ico img.plate-ico { display: block; width: 52px; height: 52px; margin: 0 auto;
  image-rendering: auto; filter: drop-shadow(1px 2px 0 rgba(52,183,221,.18));
  transition: transform .2s cubic-bezier(.34,1.5,.64,1); }
.icon:hover .ico img.plate-ico { transform: scale(1.1) rotate(-2deg); }
.start-menu a img.plate-ico { display: block; width: 16px; height: 16px; }
.letterhead { display: block; width: 150px; height: auto; margin: 0 0 14px; }
@media (max-width: 760px) { .letterhead { width: 128px; } }


/* ------------------------------------------------------------ connect.exe */
.wallet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wallet-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border: 1px solid var(--line); background: var(--face-hi); }
.wallet-row .name { flex: 1; font-weight: 600; font-size: 12.5px; line-height: 1.35; }
.wallet-row .name .muted { font-weight: 400; font-size: 11px; }
.wallet-row.is-on { border-color: var(--ink); background: rgba(52,183,221,.06); }
.wicon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; object-fit: contain;
  background: var(--face-lo); }
.wicon-blank { display: block; background:
  repeating-linear-gradient(45deg, var(--face-lo) 0 4px, var(--face) 4px 8px); }
.wallet-empty { padding: 14px 12px; border: 1px dashed var(--line); text-align: center; }

/* ================================================================== the door
   An ink field with the mark, a six-cell code, and the site's own two moves:
   a registration tear when it refuses, a pixel dissolve when it opens. */
html[data-locked] body { overflow: hidden; }
html[data-locked] .desktop,
html[data-locked] .taskbar,
html[data-locked] .cold,
html[data-locked] #wallpaper { visibility: hidden; }

.gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--ink-deep); color: #fff; cursor: text; --d: 0;
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(45,115,136,.85) 0%, rgba(45,115,136,0) 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
  -webkit-mask-image: repeating-linear-gradient(to bottom,
    #000 0, #000 calc(6px * (1 - var(--d))), transparent calc(6px * (1 - var(--d))), transparent 6px);
  mask-image: repeating-linear-gradient(to bottom,
    #000 0, #000 calc(6px * (1 - var(--d))), transparent calc(6px * (1 - var(--d))), transparent 6px);
}
.gate.is-open { opacity: calc(1 - var(--d) * .55); }

.gate-plate { position: relative; width: min(520px, 88vw); padding: 6px 4px; text-align: left;
  animation: gate-in .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes gate-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* crop marks, the same registration language as the wallpaper */
.gate-mark { position: absolute; inset: -26px -22px; pointer-events: none;
  background:
    linear-gradient(#fff,#fff) left top/22px 1px no-repeat,
    linear-gradient(#fff,#fff) left top/1px 22px no-repeat,
    linear-gradient(#fff,#fff) right top/22px 1px no-repeat,
    linear-gradient(#fff,#fff) right top/1px 22px no-repeat,
    linear-gradient(#fff,#fff) left bottom/22px 1px no-repeat,
    linear-gradient(#fff,#fff) left bottom/1px 22px no-repeat,
    linear-gradient(#fff,#fff) right bottom/22px 1px no-repeat,
    linear-gradient(#fff,#fff) right bottom/1px 22px no-repeat;
  opacity: .45; }

.gate-logo { display: block; width: 240px; height: auto; margin: 0 0 26px; }
.gate-head { margin: 0 0 10px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.gate-body { margin: 0 0 26px; font-size: 13px; line-height: 1.62; max-width: 44ch;
  color: rgba(255,255,255,.9); }

.gate-code { position: relative; display: flex; gap: 9px; }
.gate-code .cell { width: 46px; height: 58px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 22px; color: #fff;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.05);
  transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.gate-code .cell.is-on { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); }
.gate-code .cell.is-next { border-color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.gate-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  border: 0; padding: 0; font-size: 16px; cursor: text; }
.gate-input:focus { outline: none; }

.gate-note { margin: 18px 0 0; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* refusal: the plate tears out of registration, then settles */
.gate.is-denied .gate-plate { animation: gate-shake .42s cubic-bezier(.36,.07,.19,.97) both; }
.gate.is-denied .gate-code .cell { border-color: #ffb86a; background: rgba(255,184,106,.14); }
.gate.is-denied .gate-note { color: #ffb86a; }
.gate.is-denied .gate-plate::before,
.gate.is-denied .gate-plate::after {
  content: ''; position: absolute; left: -30px; right: -30px; height: 2px;
  background: rgba(255,255,255,.9); animation: gate-tear .42s steps(3) both; }
.gate.is-denied .gate-plate::before { top: 32%; }
.gate.is-denied .gate-plate::after { top: 68%; animation-direction: reverse; }
@keyframes gate-shake {
  0% { transform: translateX(0); } 15% { transform: translateX(-9px); }
  32% { transform: translateX(7px); } 52% { transform: translateX(-5px); }
  74% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@keyframes gate-tear { 0% { transform: translateX(-18px); opacity: .9; }
  100% { transform: translateX(16px); opacity: 0; } }

@media (max-width: 560px) {
  .gate-logo { width: 190px; }
  .gate-code .cell { width: 13vw; max-width: 46px; height: 52px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-plate, .gate.is-denied .gate-plate { animation: none; }
  .gate.is-denied .gate-plate::before, .gate.is-denied .gate-plate::after { display: none; }
}

/* ====================================================== the reward asset
   Lives inside miner.exe, under the hash panel: what a block actually pays.
   Green is the only colour on this desk that is not the poster's two, and it
   is spent here and nowhere else. */
:root {
  --nv:      #cac0ad;
  --nv-hi:   #ddd6c7;
  --nv-deep: #91887a;
  --nv-ink:  #04181c;
  --nv-band: #04181c;
}

.nv-tick { font-family: var(--font-mono); font-size: .95em; color: var(--nv-hi);
  background: rgba(202,192,173,.15); padding: 0 4px; border-bottom: 1px solid rgba(202,192,173,.55);
  white-space: nowrap; }
.win.dark .nv-tick { color: #ddd6c7; background: rgba(202,192,173,.16); border-bottom-color: rgba(202,192,173,.45); }

.btn-nv { background: var(--nv); color: var(--nv-ink); border-color: var(--nv-deep);
  box-shadow: 2px 2px 0 rgba(0,0,0,.30); }
.btn-nv:hover { background: var(--nv-hi); }

/* the section sits full bleed inside the miner's padded body */
.nv-section { margin: 18px -16px -14px; padding: 0; border-top: 1px solid #163b44; }

/* the hero band: the card sits on ink, full bleed, under a green rule */
.nv-plate { margin: 0 0 18px; padding: 24px 22px 22px; text-align: center;
  background:
    repeating-linear-gradient(0deg, rgba(202,192,173,.05) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 0%, #0f2a30 0%, var(--nv-band) 70%);
  border-bottom: 2px solid var(--nv); }
.nv-plate img { display: block; margin: 0 auto; width: min(430px, 100%); height: auto;
  image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.nv-plate figcaption { max-width: 470px; margin: 12px auto 0; font-size: 10.5px; line-height: 1.6;
  color: #8e999b; }

.nv-eyebrow { color: var(--nv-deep); margin: 0 16px 8px; }
.nv-quote { font-size: 21px; line-height: 1.3; margin: 0 16px 14px; }
.nv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start;
  padding: 0 16px; }

/* miner.exe is a dark window, so the whole section is repainted for ink */
.win.dark .nv-eyebrow { color: #ddd6c7; }
.win.dark .nv-quote { color: #ebe6dd; }
.win.dark .split { border-color: #163b44; box-shadow: none; }
.win.dark .split-half.burn { background: rgba(52,183,221,.12); border-right-color: #163b44; }
.win.dark .split-half.equity { background: rgba(202,192,173,.13); }
.win.dark .split-half b { color: #93d9ee; }
.win.dark .split-half.equity b { color: #ddd6c7; }
.win.dark .split-half > span,
.win.dark .split-half small { color: #8e999b; }
.win.dark .nv-kv dt { color: #8e999b; }
.win.dark .nv-ledger { border-top-color: #163b44; }
.win.dark .nv-ledger .tbl-wrap { border-color: #163b44; background: rgba(255,255,255,.03); }
.win.dark .tbl th { color: #8e999b; border-bottom-color: #163b44; }
.win.dark .tbl td { border-bottom-color: rgba(22,59,68,.7); }
.win.dark .nv-legal { border-top-color: #163b44; color: #8e999b; }

/* the split, drawn as one object cut in two */
.split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink-deep);
  margin: 0 0 14px; box-shadow: 2px 2px 0 rgba(52,183,221,.14); }
.split-half { padding: 12px 13px; }
.split-half.burn { background: rgba(52,183,221,.07); border-right: 1px solid var(--ink-deep); }
.split-half.equity { background: rgba(202,192,173,.11); }
.split-half b { display: block; font-family: var(--font-title); font-size: 27px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1; color: var(--ink-text); }
.split-half.equity b { color: var(--nv-deep); }
.split-half > span { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.split-half small { display: block; margin-top: 8px; font-size: 11px; line-height: 1.55; color: var(--muted); }

.nv-kv dd { font-size: 11.5px; }
.nv-ledger { margin: 18px 0 0; padding: 14px 16px 0; border-top: 1px solid var(--line); }
.nv-ledger .tbl-wrap { border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.nv-legal { margin: 14px 16px 0; padding: 10px 0 14px; border-top: 1px solid var(--line);
  font-size: 10.5px; line-height: 1.6; }

@media (max-width: 760px) {
  .nv-cols { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split-half.burn { border-right: 0; border-bottom: 1px solid var(--ink-deep); }
  .win.dark .split-half.burn { border-bottom-color: #163b44; }
  .nv-section { margin: 18px -16px -14px; }
}
.win.dark .nv-ledger .eyebrow { color: #6fcde8; }
.win.dark .tag.live { color: #6fcde8; }

/* ---------------------------------------------------------- the holder gate
   Sits directly under the hashrate in miner.exe. Three states, one row: the
   dot carries the colour, the text carries the reason, the buttons carry the
   only action that can change it. */
.gate-panel { display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 10px 12px; border: 1px solid #163b44; background: rgba(255,255,255,.04); }
.gate-panel .gate-text { flex: 1; min-width: 0; }
.gate-panel b { display: block; font-size: 12px; font-weight: 600; color: #e8eef0; }
.gate-panel .small { display: block; margin: 2px 0 0; line-height: 1.5; }
.gate-panel .muted { color: #8e999b; }
.gate-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%;
  background: #2d7388; box-shadow: 0 0 0 3px rgba(45,115,136,.25); }
.gate-panel.is-open   .gate-dot { background: var(--nv);  box-shadow: 0 0 0 3px rgba(202,192,173,.22); }
.gate-panel.is-shut   .gate-dot { background: #ffb86a;    box-shadow: 0 0 0 3px rgba(255,184,106,.22); }
.gate-panel.is-open   { border-color: rgba(202,192,173,.45); background: rgba(202,192,173,.07); }
.gate-panel.is-shut   { border-color: rgba(255,184,106,.45); background: rgba(255,184,106,.07); }
.gate-panel.is-open b { color: #ddd6c7; }
@media (max-width: 760px) { .gate-panel { flex-wrap: wrap; } }
/* only the gate's title is a block; a <b> inside the note stays inline */
.gate-panel .gate-text > b { display: block; }
.gate-panel .small b { display: inline; color: inherit; }
/* a link styled as a button keeps the button's colour, not the link colour */
.win.dark a.btn { color: var(--ink-text); text-decoration: none; }
.win.dark a.btn-nv { color: var(--nv-ink); }
.win.dark a.btn-primary { color: #04181c; }

/* -------------------------------------------------------------- your work
   The miner's own counter. It lives in this browser, for the connected
   address, and the receipt is signed by the wallet so the address on it is
   proven rather than typed. */
.work-panel { margin-top: 16px; padding: 12px 13px; border: 1px solid #163b44;
  background: rgba(255,255,255,.04); }
.work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; }
.work-head .muted { color: #8e999b; font-family: var(--font-mono); }
.work-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.work-stats div { padding: 8px 10px; background: rgba(111,205,232,.09); border: 1px solid #163b44; }
.work-stats b { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 19px; line-height: 1.1; color: #e8eef0; }
.work-stats span { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: #8e999b; }
.work-receipt { width: 100%; margin-top: 10px; padding: 8px 10px; resize: vertical;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: #ddd6c7;
  background: #04181c; border: 1px solid var(--nv-deep); }
@media (max-width: 760px) { .work-stats { grid-template-columns: 1fr 1fr; } }

/* the pool's own payout log, printed under the counters once the miner is
   pointed at a live pool. Empty in practice mode, where nothing is owed. */
.pool-payouts { margin-top: 6px; border-top: 1px solid #163b44; padding-top: 4px; }
.pool-payouts .mono { color: #8e999b; }
.pool-payouts a { color: var(--nv); }

/* ==================================================================== song.exe
   A player panel in the old grey, sunk into one of our windows. The chrome
   around it is the desk's; everything inside it is 1998. */
.song-body { padding: 0; background: #0f2a30; }
.song-panel {
  padding: 14px; display: grid; gap: 14px;
  grid-template-columns: 168px minmax(0, 1fr);
  background: #0f2a30;
  border-top: 1px solid #2d7388;
  border-left: 1px solid #2d7388;
}
.song-sleeve {
  width: 168px; height: 168px; padding: 4px; background: #071317;
  border: 2px inset #2d7388;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.25);
}
.song-sleeve img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  image-rendering: auto;
}

.song-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.song-top { display: flex; align-items: flex-start; gap: 12px; }

/* the spinning disc and the deck, drawn rather than dropped in as art */
.song-disc {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  background:
    radial-gradient(circle at 50% 50%, #0f2a30 0 15%, #2d7388 15% 17%, transparent 17%),
    conic-gradient(from 0deg, #cac0ad, #ebe6dd 12%, #b1a690 25%, #f1efe8 38%,
                   #b1a690 50%, #ebe6dd 62%, #b1a690 75%, #f1efe8 88%, #cac0ad);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.song-disc.is-spinning { animation: disc-spin 2.6s linear infinite; }
@keyframes disc-spin { to { transform: rotate(360deg); } }

.song-deck {
  width: 60px; height: 34px; flex: 0 0 60px; align-self: center;
  background: #163b44; border: 2px outset #2d7388;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.song-deck i { width: 9px; height: 9px; background: #2d7388; border: 1px solid #1e4d5a; }
.song-deck i:first-child { background: #ffb86a; }

.song-vol { margin-left: auto; display: flex; align-items: stretch; gap: 6px; }
.song-vol .keys { display: flex; flex-direction: column; gap: 3px; }
.song-btn {
  font: 700 12px/1 var(--font-ui); min-width: 26px; height: 22px; cursor: pointer;
  background: #163b44; color: #e8eef0; border: 2px outset #2d7388; padding: 0 5px;
}
.song-btn:active, .song-btn.is-on { border-style: inset; background: #0f2a30; }
.song-btn:disabled { opacity: .45; cursor: not-allowed; }
.song-meter {
  width: 12px; border: 2px inset #2d7388; background: #071317;
  display: flex; align-items: flex-end; padding: 2px;
}
.song-meter i { display: block; width: 100%; background: #34b7dd; transition: height .12s linear; }

.song-transport { display: flex; flex-wrap: wrap; gap: 4px; }
.song-transport .song-btn { min-width: 34px; height: 24px; font-size: 11px; }
.song-transport .wide { min-width: 46px; }

.song-fields { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 8px; align-items: center; }
.song-fields label { font: 500 12px var(--font-ui); color: #e8eef0; text-align: right; }
.song-field {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #04181c; border: 2px inset #2d7388; padding: 3px 6px;
  font: 400 13px var(--font-mono); color: #e8eef0; min-width: 0;
}
.song-field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-field b { font: 400 9px/1 var(--font-ui); color: #8e999b; }

.song-seek { display: flex; align-items: center; gap: 10px; padding: 0 14px 16px; background: #0f2a30; }
.song-seek time { font: 400 12px var(--font-mono); color: #e8eef0; flex: 0 0 auto; }
.song-track {
  flex: 1; height: 16px; border: 2px inset #2d7388; background: #071317;
  position: relative; cursor: pointer;
}
.song-track i {
  position: absolute; left: 0; top: 0; bottom: 0; background: #34b7dd;
}
.song-track u {
  position: absolute; top: -2px; bottom: -2px; width: 12px; margin-left: -6px;
  background: #163b44; border: 2px outset #2d7388; text-decoration: none;
}

@media (max-width: 760px) {
  .song-panel { grid-template-columns: 1fr; justify-items: center; }
  .song-right { width: 100%; }
}

/* the tray gained a switch, so on a phone the chain label steps aside for it */
@media (max-width: 760px) {
  .tray { gap: 8px; padding-left: 8px; }
  .tray > span:first-child { display: none; }
}

/* -------------------------------------------------------- the preview code
   A sign, not a lock: every byte of this page is a public static asset, so
   this keeps a passer-by out of an unfinished window and nothing more. Shared
   by every window that is built but not yet announced. */
.code-lock { padding: 22px 18px 20px; text-align: center; position: relative; }
.code-cells { display: flex; gap: 8px; justify-content: center; }
.code-cells i { width: 26px; height: 34px; background: var(--face-hi);
  border: 1px solid var(--line); box-shadow: inset 1px 1px 0 var(--face-lo); }
.code-cells i.is-on { background: var(--ink); border-color: var(--ink-deep); }
.code-cells i.is-next { border-color: var(--ink); }
/* the real input sits over the cells, invisible, so a phone keyboard opens */
.code-input { position: absolute; left: 50%; top: 50%; width: 200px; height: 40px;
  transform: translate(-50%, -50%); opacity: 0; border: 0; background: none;
  font-size: 16px; /* anything smaller and iOS zooms the page on focus */ }
.code-lock.is-denied { animation: code-shake .32s linear; }
.code-lock.is-denied .code-cells i { border-color: var(--warn); }
@keyframes code-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); } 75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .code-lock.is-denied { animation: none; } }

/* ---------------------------------------------------------------- mines.exe
   Minesweeper as it has looked since 1990: a grey field of raised tiles, red
   LED counters at the ends, the face between them. The classic palette is
   kept rather than translated into project blue, because the colours are the
   game's language - a player reads a field by colour long before they read it
   by shape, and relearning that costs more than consistency is worth.

   What is ours is the frame it sits in, the face, and the copy. */
.icon.mines { position: absolute; z-index: 3; right: 46px; top: 62%; width: 104px;
  animation-delay: .65s; border-color: transparent !important; background: none !important; }
.mines .ico { width: 52px; height: 52px; margin: 0 auto 8px;
  background: url(../assets/icons/mines.png) center / contain no-repeat;
  filter: drop-shadow(1px 2px 0 rgba(52,183,221,.22));
  transition: transform .22s cubic-bezier(.34,1.5,.64,1); }
.icon.mines:hover .ico { transform: scale(1.09) rotate(1.5deg); }
.mines .lbl { display: inline-block; font-family: var(--font-mono); font-size: 11px; line-height: 1.25;
  padding: 2px 6px; letter-spacing: -.01em; white-space: pre;
  background: rgba(4,24,28,.94); box-shadow: 0 0 0 1px rgba(4,24,28,.94); }
.icon.mines.is-sel .lbl { background: var(--ink); color: var(--paper); box-shadow: none; }

.ms-body { display: inline-block;
  --ms-face:  #163b44;     /* the tile, raised */
  --ms-hi:    #2d7388;     /* light from the top left */
  --ms-lo:    #071317;     /* and the shadow it casts */
  --ms-open:  #0f2a30;     /* a turned-over tile: flat, not white */
  --ms-line:  #1e4d5a; }

/* ------------------------------------------------------------- the briefing
   The window opens on this rather than on a field. A game that pays something
   should say what it pays before the first click, not after the last one. */
.ms-intro { width: 360px; padding: 4px 2px 2px; }
.ms-intro h3 { margin: 6px 0 2px; font-family: var(--font-title); font-size: 17px; }
.ms-rules { margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; }
.ms-rules li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--face-lo); }
.ms-rules li:last-child { border-bottom: 0; }
.ms-rules b { font-family: var(--font-mono); color: var(--ink); font-weight: 700; }
.ms-start { margin-top: 16px; align-items: center; }

.ms-levels { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.ms-size { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.ms-mode { margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ms-mode.is-live { color: var(--ink); }

/* the outer well and the head inside it, both sunken, light from the top left */
.ms-frame { display: inline-block; padding: 6px; background: var(--ms-face);
  border: 3px solid; border-color: var(--ms-lo) var(--ms-hi) var(--ms-hi) var(--ms-lo); }
.ms-head { display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box; padding: 4px 6px; margin-bottom: 6px; background: var(--ms-face);
  border: 2px solid; border-color: var(--ms-lo) var(--ms-hi) var(--ms-hi) var(--ms-lo); }

.ms-count { font-family: var(--font-mono); font-size: 21px; line-height: 1; font-weight: 700;
  letter-spacing: .08em; padding: 1px 4px; color: #34b7dd; background: #04181c;
  border: 1px solid #163b44; font-variant-numeric: tabular-nums; }

.ms-face { width: 32px; height: 32px; padding: 0; cursor: pointer; background: var(--ms-face);
  border: 3px solid; border-color: var(--ms-hi) var(--ms-lo) var(--ms-lo) var(--ms-hi);
  display: grid; place-items: center; }
.ms-face:active { border-color: var(--ms-lo) var(--ms-hi) var(--ms-hi) var(--ms-lo); }
.ms-face i { display: block; width: 26px; height: 26px; background: center / contain no-repeat;
  background-image: url(../assets/icons/face-play.png); }
.ms-face.is-lost i { background-image: url(../assets/icons/face-lost.png); }

.ms-grid { display: grid; gap: 0; background: var(--ms-line);
  border: 3px solid; border-color: var(--ms-lo) var(--ms-hi) var(--ms-hi) var(--ms-lo); }
.ms-cell { width: 22px; height: 22px; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; line-height: 22px;
  text-align: center; background: var(--ms-face); color: transparent;
  border: 3px solid; border-color: var(--ms-hi) var(--ms-lo) var(--ms-lo) var(--ms-hi);
  -webkit-user-select: none; user-select: none; }
.ms-cell.is-open, .ms-cell.is-down {
  border: 1px solid var(--ms-line); line-height: 20px; background: var(--ms-open); }
.ms-cell.is-flag, .ms-cell.is-mine, .ms-cell.is-boom, .ms-cell.is-wrong { color: #fafafa; }
.ms-cell.is-flag { color: #ffb86a; }
.ms-cell.is-boom { background: #fb2c36; border: 1px solid var(--ms-line); }
.ms-cell.is-wrong { color: #ffb86a; }
.ms-cell:disabled { cursor: default; }

/* the traditional numbers, unchanged */
.ms-cell[data-n="1"] { color: #6fcde8; }
.ms-cell[data-n="2"] { color: #ddd6c7; }
.ms-cell[data-n="3"] { color: #ffb86a; }
.ms-cell[data-n="4"] { color: #c4b4ff; }
.ms-cell[data-n="5"] { color: #ff8b8b; }
.ms-cell[data-n="6"] { color: #93d9ee; }
.ms-cell[data-n="7"] { color: #fafafa; }
.ms-cell[data-n="8"] { color: #8e999b; }

.ms-prize { margin-top: 10px; padding: 9px 11px; font-size: 12px;
  background: var(--nv-band); color: #fff; border: 1px solid var(--ink-deep); }
.ms-prize b { color: var(--nv); }
.ms-prize.is-flat { background: var(--face-hi); color: var(--text); border-color: var(--line); }
.ms-prize.is-flat b { color: var(--ink); }
.ms-kv { margin-top: 10px; }

@media (max-width: 760px) {
  .icon.mines { position: static; margin: 6px 0 0 14px; }
  .ms-intro { width: auto; }
  .ms-cell { width: 26px; height: 26px; line-height: 26px; font-size: 15px; }
  .ms-frame { overflow-x: auto; }
}

/* the two ways out of a connected wallet: another account, or none */
.wallet-actions { display: flex; gap: 8px; margin-top: 8px; padding: 0; list-style: none; }

/* an amount the wallet would only reject later */
.ms-over { color: var(--warn); }

/* ------------------------------------------------------ the payout asset
   Sits inside the work panel, between the figures and the buttons. The
   chosen side is carried by weight and a filled button rather than colour
   alone, so it still reads without colour. */
.token-pick {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(111, 205, 232, .28);
}
.token-pick .row { gap: 6px; flex-wrap: wrap; }
.token-pick .btn { min-width: 68px; }
.token-pick .btn.tok-on { font-weight: 700; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.token-pick .btn[disabled] { opacity: .55; cursor: default; }