/* Payout Menu. Built to the board in art/ref/ref_site.jpg: a dark bottle green ground, labelled
   hairline strips, flat 1 px interface cells, one monospace, one blackletter wordmark, one red. */

@font-face { font-family: Sligoil; src: url(/fonts/Sligoil-Micro.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Sligoil; src: url(/fonts/Sligoil-MicroMedium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Sligoil; src: url(/fonts/Sligoil-MicroBold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Cook; src: url(/fonts/UnifrakturCook-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --ground: #01211e;
  --panel: #07261f;
  --screen: #0b2b25;
  --line: rgba(163, 206, 190, 0.30);
  --line-up: rgba(163, 206, 190, 0.55);
  --ink: #d6ece1;
  --dim: #83a89b;
  --red: #f0334a;
  --red-dim: #8d3340;
  --cream: #dbcfc2;
  --scr-x: 13.1%;
  --scr-y: 13.9%;
  --scr-w: 74.1%;
  --scr-h: 53.0%;
  --pad: clamp(16px, 3.4vw, 64px);
  --gap: clamp(14px, 1.4vw, 24px);
  --band-air: clamp(56px, 7vw, 120px);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Sligoil, ui-monospace, monospace;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* the world behind the board: one blurred room, drifting on its own clock */
.world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.world::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: #01211e url(/img/backdrop.webp) center / cover no-repeat;
  opacity: 0.34;
  filter: blur(40px) saturate(0.75);
  animation: drift 140s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: scale(1.06) translate3d(-1.2%, 0.6%, 0); } to { transform: scale(1.14) translate3d(1.2%, -0.8%, 0); } }

.board { position: relative; z-index: 1; padding: clamp(28px, 3.4vw, 56px) var(--pad) clamp(56px, 6vw, 110px); }

.band { margin-bottom: var(--band-air); scroll-margin-top: 24px; }
.band:last-child { margin-bottom: 0; }

/* ---------- the band strip: the whole navigation of the site ---------- */
.strip {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 clamp(28px, 3.6vw, 64px);
  min-height: 64px;
  padding: 10px 28px;
  border: 1px solid var(--line);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.strip-l { text-decoration: none; }
.strip-l:hover { color: #fff; }
.strip-r { color: var(--dim); font-size: 18px; line-height: 1.55; }

/* ---------- shared screen grammar ---------- */
.scr {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4cqw, 14px);
  width: 100%;
  height: 100%;
  padding: clamp(12px, 2.2cqw, 20px);
  background: var(--screen);
  overflow: hidden;
}
.scr-top, .scr-bottom { display: flex; align-items: stretch; gap: 10px; min-height: 52px; }
@container (max-width: 700px) { .scr-top, .scr-bottom { min-height: 48px; } }
.scr-top { flex: none; }
.scr-bottom { flex: none; }
.scr-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(10px, 1.6cqw, 20px); border: 1px solid var(--line); padding: 32px 40px; min-height: 0; }
.scr-head { display: flex; gap: 20px; align-items: flex-start; }

.tag {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  font-size: 16px;
  color: var(--dim);
  white-space: nowrap;
}
.tag.red { color: var(--red); border-color: var(--red-dim); }
.tag.dim { color: var(--dim); }
.brandmark { font-family: Cook, serif; font-size: 22px; line-height: 1.1; color: var(--ink); padding: 14px 24px; letter-spacing: 0; }

.fill {
  flex: 1 1 auto;
  min-width: 24px;
  border: 1px solid var(--line);
  background-image:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 7px);
  background-position: 3px 3px;
}
@container (max-width: 520px) { .scr-top .fill:nth-of-type(2) { display: none; } .scr-top .tag.red { white-space: normal; line-height: 1.3; text-align: center; padding: 10px 16px; } }
.lamp { flex: none; width: 48px; border: 1px solid var(--red-dim); background: var(--red); }
.lamp.off { background: transparent; border-color: var(--line); }

/* ---------- band 1: the terminal ---------- */
.stage { display: flex; justify-content: center; }
.figrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(20px, 2.2vw, 32px); }
@media (min-width: 860px) { .figrow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.figrow .fig { padding: 20px 30px; }
.figrow .fig-v { font-size: 28px; }
.terminal { position: relative; width: min(1120px, 100%, max(880px, calc((100vh - 240px) / 1.024))); }
.terminal-shell { display: block; width: 100%; height: auto; }
.terminal-glass {
  position: absolute;
  border-radius: 1.4%;
  overflow: hidden;
  left: var(--scr-x, 10.5%);
  top: var(--scr-y, 11.5%);
  width: var(--scr-w, 79%);
  height: var(--scr-h, 57%);
}
.terminal-glass::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 78% 6%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 55%);
}

/* the unframed placement: the same screen laid straight on the board */
.scr-loose { border: 1px solid var(--line); }

.headline { flex: 1 1 60%; min-width: 0; }
.wordmark { font-family: Cook, serif; font-size: clamp(34px, 5.6cqw, 64px); line-height: 1.22; letter-spacing: 0; padding-bottom: 2px; }
.lede { margin: 8px 0 0; max-width: 40ch; font-size: 18px; color: var(--ink); }
.cloche { flex: 0 0 auto; width: clamp(68px, 11cqw, 132px); height: auto; align-self: flex-start; image-rendering: pixelated; }

.figures { display: grid; grid-template-columns: 1fr; gap: 12px; }
.fig { border: 1px solid var(--line); padding: 13px 20px; min-width: 0; }
.fig-big { grid-column: 1 / -1; padding: 20px clamp(26px, 6cqw, 32px); }
.fig-k { display: block; font-size: 16px; line-height: 1.35; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fig-v { display: block; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.fig-big .fig-v { font-size: clamp(26px, 8.2cqw, 80px); letter-spacing: 0.01em; line-height: 1.08; white-space: nowrap; }

/* the contract strip inside the screen's own bottom bar */
.cell { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); padding: 0 20px; min-height: 48px; text-decoration: none; }
.mark-cell { flex: none; width: 60px; justify-content: center; background: var(--cream); border-color: var(--cream); }
.mark-cell img { display: block; width: 22px; height: 22px; object-fit: contain; }
.mark-cell.off { background: rgba(219, 207, 194, 0.26); border-color: rgba(219, 207, 194, 0.26); cursor: not-allowed; }
.mark-cell.off img { opacity: 0.55; }
.ca-cell { flex: 1 1 auto; min-width: 0; gap: 16px; padding: 10px 20px; }
.ca-k { flex: none; font-size: 16px; color: var(--dim); }
.ca-v { flex: 1 1 auto; min-width: 0; font-size: 16px; overflow-wrap: anywhere; user-select: all; }
.ca-copy, .key {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 1px solid var(--line-up); background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; letter-spacing: 0.05em; cursor: pointer; text-decoration: none;
}
.ca-copy { min-height: 40px; padding: 0 18px; }
.key:hover, .ca-copy:hover { border-color: var(--ink); color: #fff; }
.key:active, .ca-copy:active { background: rgba(163, 206, 190, 0.08); }
.key[disabled], .key.off { color: var(--dim); border-color: var(--line); cursor: not-allowed; }
.key.wide { flex: 1 1 auto; }
.key.big { min-height: 56px; font-size: 18px; }
.key.on { border-color: var(--red); color: var(--red); }

/* ---------- band 2: the dishes ---------- */
.dishes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 620px) { .dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dishes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dish {
  container-type: inline-size;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.dish-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; min-height: 40px; }
.dish-top .tag { font-size: 16px; padding: 0 18px; }
.dish-top .lamp { width: 40px; }
.dish-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); padding: 22px; }
.dish-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dish-foot { margin-top: auto; display: grid; gap: 12px; }
.dish-day { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--dim); }
.dish-day span:last-child { color: var(--ink); }
.dish-pic { flex: none; width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.dish-txt { min-width: 0; flex: 1 1 auto; }
.dish-name { white-space: nowrap; }
.dish-name { font-size: 22px; line-height: 1.2; }
.dish-sub { font-size: 16px; line-height: 1.5; color: var(--dim); min-height: 3em; }
.dish-share { display: flex; align-items: center; gap: 12px; }
.pill { flex: 1 1 auto; height: 18px; border: 1px solid var(--red-dim); border-radius: 9px; overflow: hidden; }
.pill-f { display: block; height: 100%; background: var(--red); border-radius: 9px 0 0 9px; }
.share-n { flex: none; font-size: 16px; color: var(--ink); min-width: 56px; text-align: right; }
.dish-bottom { display: flex; flex-direction: column; gap: 8px; }
.dish-bottom .tag { flex: 1 1 auto; justify-content: center; padding: 9px 18px; min-width: 0; }
.dish-bottom .key { width: 100%; padding: 0 22px; }
.aside { margin: var(--gap) 0 0; max-width: 90ch; font-size: 18px; color: var(--dim); }

/* ---------- panels (the pass, the table, the kitchen) ---------- */
.panel { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); padding: 14px; gap: 12px; }
.panel-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; min-height: 44px; }
.panel-top .tag { min-width: 0; max-width: 100%; white-space: normal; line-height: 1.3; }
.panel-top .fill { min-width: 40px; }
.panel-body { flex: 1 1 auto; border: 1px solid var(--line); padding: clamp(20px, 2vw, 28px); min-width: 0; }
.panel-foot { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); padding: 20px; }
.foot-note { margin: 0; font-size: 16px; color: var(--dim); }
.empty { margin: 0; color: var(--dim); font-size: 18px; }

.pass-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 1100px) { .pass-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.round { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.round:first-child { padding-top: 0; }
.round:last-child { border-bottom: 0; padding-bottom: 0; }
.round-h { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.round-id { font-size: 20px; }
.round-m { font-size: 16px; color: var(--dim); }
.round-dishes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 4px 14px; font-size: 16px; }
.chip img { width: 18px; height: 18px; image-rendering: pixelated; }
.round-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 16px; }
.round-links a { color: var(--dim); }
.round-links a:hover { color: var(--ink); }

.crowd-row { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 16px; }
.crowd-row:last-child { margin-bottom: 0; }
.crowd-bar { height: 16px; border: 1px solid var(--line); }
.crowd-bar span { display: block; height: 100%; background: var(--ink); }
.crowd-row.mine .crowd-bar span { background: var(--red); }
.crowd-n { text-align: right; }

.table-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (min-width: 1100px) { .table-grid { grid-template-columns: minmax(560px, 0.6fr) minmax(0, 1fr); } }
.handheld { position: relative; width: min(560px, 100%); margin: 0 auto; }
.handheld-shell { display: block; width: 100%; height: auto; }
.handheld-glass { position: absolute; left: var(--hh-x, 16.3%); top: var(--hh-y, 17.9%); width: var(--hh-w, 70.7%); height: var(--hh-h, 29.9%); border-radius: 1%; overflow: hidden; }
.table-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.wallet-body { gap: 8px; justify-content: flex-start; }
.w-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.wallet-body { gap: 14px; }
.w-k { font-size: 16px; color: var(--dim); white-space: nowrap; }
.w-v { font-size: 18px; text-align: right; overflow-wrap: anywhere; min-width: 0; }

.tab-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 18px; }
.tab-row:first-child { padding-top: 14px; }
.tab-row:last-child { border-bottom: 0; }
.tab-a { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tab-a img { width: 24px; height: 24px; image-rendering: pixelated; }
.tab-v { text-align: right; overflow-wrap: anywhere; }

/* ---------- band 5: the kitchen ---------- */
.kitchen-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (min-width: 1100px) { .kitchen-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wide-panel { grid-column: 1 / -1; } }
.feebar { display: flex; height: 56px; border: 1px solid var(--line); }
.seg { flex: 0 0 calc(var(--w) * 1%); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--ground); }
.seg:last-child { border-right: 0; }
.seg-n { font-size: 18px; color: var(--ground); font-weight: 700; }
.seg-pot { background: #8fb39d; }
.seg-burn { background: var(--red); }
.seg-work { background: #b8893a; }
.legend { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; font-size: 18px; }
.legend li { display: flex; align-items: baseline; gap: 14px; }
.legend b { color: var(--ink); font-weight: 700; }
.dot { flex: none; width: 14px; height: 14px; transform: translateY(1px); }
.dot-pot { background: #8fb39d; } .dot-burn { background: var(--red); } .dot-work { background: #b8893a; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: flex; gap: 18px; align-items: baseline; }
.step-n { flex: none; width: 48px; height: 48px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--red); }
.step-t { flex: 1 1 auto; font-size: 18px; }
.risk { margin: 0; font-size: 18px; color: var(--ink); }
.chart-panel .panel-body { padding: 0; min-height: 320px; display: flex; }
.chart-panel iframe { flex: 1 1 auto; border: 0; width: 100%; min-height: 320px; }
.chart-panel .empty { padding: clamp(20px, 2vw, 28px); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px);
  padding: 14px 28px; border: 1px solid var(--line-up); background: var(--screen);
  font-size: 18px; opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; z-index: 20;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.up { opacity: 1; transform: translate(-50%, 0); }

/* ---------- the devices only exist where their screens can hold 18 px type ---------- */
@media (max-width: 1279px) {
  .terminal { width: 100%; }
  .terminal-shell { display: none; }
  .terminal-glass { position: static; width: 100%; height: auto; }
  .terminal-glass::after { display: none; }
  #scr-main { border: 1px solid var(--line); min-height: 0; }
}
@media (max-width: 1099px) {
  .handheld-shell { display: none; }
  .handheld { width: 100%; }
  .handheld-glass { position: static; width: 100%; height: auto; }
  #scr-wallet { border: 1px solid var(--line); }
#scr-wallet .scr-body { padding: 24px; }
}
@media (max-width: 719px) {
  body { font-size: 17px; }
  .strip { min-height: 56px; padding: 10px 20px; font-size: 17px; }
  .scr { padding: 14px; }
  .scr-body { padding: 28px 34px; }
  .scr-bottom { flex-wrap: wrap; }
  .ca-cell { flex: 1 1 100%; flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
  .ca-v { flex: 1 1 100%; }
  .scr-bottom .key { flex: 1 1 auto; padding: 0 16px; }
  .scr-bottom .mark-cell { flex: 0 0 64px; width: 64px; }
  .round-h { gap: 4px 14px; }
  .figrow { grid-template-columns: minmax(0, 1fr); }
  .figrow .fig { padding: 18px 26px; }
  .figrow .fig-v { font-size: 24px; }
  .seg-n { display: none; }
  .feebar { height: 44px; }
  .fig-k { font-size: 16px; }
}

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