/* dyor.wick.pics — spectator page.
   Direction: a cartoon bot on a dark bottle-green felt, drawn in the comic-panel idiom (hard ink
   outlines, offset shadows, halftone). Colour is SEMANTIC, never decoration:
   mint = up / simulated · tomato = down / refused · marigold = quoted-only / caution · sky = thinking.
   Font: Recursive (OFL, Google Fonts, self-hosted) — one variable file; the CASL axis makes the
   display type friendly, the MONO axis makes the tape. */

@font-face {
  font-family: "Recursive";
  src: url("fonts/recursive-latin.woff2") format("woff2");
  font-weight: 300 1000;
  font-style: oblique 0deg 15deg;
  font-display: swap;
}

:root {
  --bg: #0C1714;
  --panel: #132620;
  --panel-2: #183029;
  --panel-3: #1D3830;
  --edge: #050C0A;
  --line: #264239;
  --bone: #F1E9D8;
  --text-2: #BDB6A4;
  --text-3: #93A69B;
  --mint: #8EE6B0;
  --tomato: #FF8B6E;
  --marigold: #F5BD4F;
  --sky: #8CC8F0;
  --teal: #2D7F68;
  --series-sim: #2FA86C;
  --series-all: #5E97E0;
  --r: 16px;
  --r-sm: 10px;
  --drop: 5px 5px 0 0 var(--edge);
  --ease: cubic-bezier(.2, .9, .25, 1.15);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --casl: 0;
  --mono: 0;
  --gut: 16px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { font-variation-settings: "CASL" var(--casl), "MONO" var(--mono), "CRSV" 0.5; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 60% at 50% -10%, #173a2f 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--bone);
  font-family: "Recursive", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  min-height: 100dvh;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: var(--sky); }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--marigold); color: var(--bg); padding: 8px 12px; border-radius: 8px; z-index: 20; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--gut) 10px;
  max-width: 1440px; margin: 0 auto;
}
.mark { display: flex; align-items: baseline; --casl: 1; }
.mark-word { font-weight: 900; font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
.mark-host { font-weight: 500; font-size: 14px; color: var(--text-3); margin-left: 1px; }

.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: var(--panel); box-shadow: 0 0 0 2px var(--edge), 3px 3px 0 0 var(--edge);
  font-size: 13px; font-weight: 600; color: var(--text-2);
  --mono: 1;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.status[data-state="live"] { color: var(--bone); }
.status[data-state="live"] .status-dot { background: var(--mint); animation: pulse 2.4s var(--ease-out) infinite; }
.status[data-state="ended"] .status-dot { background: var(--marigold); }
.status[data-state="lost"] .status-dot { background: var(--tomato); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(142, 230, 176, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(142, 230, 176, 0); } }

.fixture-flag {
  margin: 0 var(--gut) 12px; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--marigold); color: var(--bg); font-weight: 700; font-size: 14px; text-align: center;
  box-shadow: 0 0 0 2px var(--edge);
}

/* ── layout ──────────────────────────────────────────────────────────────── */
.layout { max-width: 1440px; margin: 0 auto; padding: 0 var(--gut) 48px; display: grid; gap: 28px; }
.side, .main { display: grid; grid-auto-rows: max-content; gap: 28px; align-content: start; min-width: 0; }

.sec-title { font-size: 21px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; --casl: 1; }
.sec-sub { color: var(--text-2); font-size: 15px; max-width: 62ch; margin-top: 6px; }

.panel, .stage, .score, .chart-card, .prompt-box, .tick, .hold, .notes {
  background: var(--panel);
  border-radius: var(--r);
  box-shadow: 0 0 0 2px var(--edge), var(--drop);
}

/* ── the stage ───────────────────────────────────────────────────────────── */
.stage {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "bot bubble" "who who" "clock clock";
  column-gap: 0;
  padding: 18px 18px 18px;
  background:
    radial-gradient(circle at 26% 44%, rgba(142, 230, 176, .13) 0, transparent 46%),
    radial-gradient(rgba(241, 233, 216, .075) 1.3px, transparent 1.6px) 0 0 / 11px 11px,
    var(--panel);
}

.bot { grid-area: bot; width: 100%; max-width: 230px; margin-left: -6px; height: auto; align-self: end; overflow: visible; position: relative; z-index: 1; margin-top: 4px; }
.bot-all { transform-origin: 110px 210px; }
.bot .bot-shadow { fill: var(--edge); opacity: .55; }
.bot .bot-head { fill: var(--bone); stroke: var(--edge); stroke-width: 5; }
.bot .bot-screen { fill: #10261F; stroke: var(--edge); stroke-width: 4; }
.bot .bot-bolt { fill: var(--marigold); stroke: var(--edge); stroke-width: 4.5; }
.bot .bot-body { fill: var(--teal); stroke: var(--edge); stroke-width: 5; }
.bot .bot-chest { fill: #10261F; stroke: var(--edge); stroke-width: 3.5; }
.bot .bot-spark { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bot .bot-neck { fill: #D8CDB5; stroke: var(--edge); stroke-width: 4; }
.bot .bot-leg { fill: #D8CDB5; stroke: var(--edge); stroke-width: 4; }
.bot .bot-foot { fill: var(--teal); stroke: var(--edge); stroke-width: 4; }
.bot .bot-limb { fill: none; stroke: var(--edge); stroke-width: 13; stroke-linecap: round; }
.bot .bot-arm .bot-limb + .bot-hand { fill: var(--bone); stroke: var(--edge); stroke-width: 4.5; }
.bot .bot-arm { transition: transform 420ms var(--ease); }
.bot .bot-arm-l { transform-origin: 70px 156px; }
.bot .bot-arm-r { transform-origin: 150px 156px; }
.bot .bot-wick { fill: none; stroke: var(--edge); stroke-width: 5; stroke-linecap: round; }
.bot .bot-flame { fill: var(--marigold); stroke: var(--edge); stroke-width: 3.5; }
.bot .bot-core { fill: #FFF1C9; }
.bot .bot-fire { transform-origin: 110px 28px; transition: transform 300ms var(--ease); transform: scale(var(--fire, 1)); }
.bot .bot-smoke { display: none; fill: none; stroke: var(--text-3); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.bot .bot-cheek { fill: var(--tomato); opacity: 0; transition: opacity 300ms ease-out; }
.bot .bot-coin { display: none; }
.bot .bot-coin circle { fill: var(--marigold); stroke: var(--edge); stroke-width: 4; }
.bot .bot-coin path { stroke: var(--edge); stroke-width: 2.6; stroke-linecap: round; }
.bot .bot-sweat { fill: var(--sky); stroke: var(--edge); stroke-width: 3; display: none; }
.bot .bot-zzz { display: none; fill: var(--text-2); font-weight: 900; font-size: 20px; font-family: "Recursive", sans-serif; }

.bot .eyes, .bot .mouth { display: none; }
.bot .eyes rect, .bot .eyes circle { fill: var(--mint); }
.bot .eyes .glint { fill: #10261F; }
.bot .eyes path { fill: none; stroke: var(--mint); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.bot .mouth { fill: none; stroke: var(--mint); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.bot .m-grin { fill: var(--mint); stroke-width: 3; }
.bot .m-o { fill: var(--mint); stroke: none; }

/* moods: eyes / mouth / arms / flame */
.bot[data-mood="holding"]  { --fire: 1; }
.bot[data-mood="holding"]  .e-calm, .bot[data-mood="holding"] .m-flat { display: inline; }
.bot[data-mood="holding"]  .bot-arm-l { transform: rotate(18deg); }
.bot[data-mood="holding"]  .bot-arm-r { transform: rotate(-18deg); }

.bot[data-mood="thinking"] { --fire: .85; }
.bot[data-mood="thinking"] .e-look, .bot[data-mood="thinking"] .m-wave { display: inline; }
.bot[data-mood="thinking"] .bot-arm-r { transform: rotate(-100deg); }
.bot[data-mood="thinking"] .eyes rect, .bot[data-mood="thinking"] .mouth { fill: var(--sky); stroke: var(--sky); }
.bot[data-mood="thinking"] .m-wave { fill: none; }

.bot[data-mood="trading"]  { --fire: 1.25; }
.bot[data-mood="trading"]  .e-wide, .bot[data-mood="trading"] .m-o { display: inline; }
.bot[data-mood="trading"]  .bot-arm-r { transform: rotate(-58deg); }
.bot[data-mood="trading"]  .bot-arm-l { transform: rotate(12deg); }
.bot[data-mood="trading"]  .bot-coin { display: inline; }

.bot[data-mood="up"]       { --fire: 1; }
.bot[data-mood="up"]       .e-happy, .bot[data-mood="up"] .m-grin { display: inline; }
.bot[data-mood="up"]       .bot-cheek { opacity: .9; }
.bot[data-mood="up"]       .bot-arm-l { transform: rotate(84deg); }
.bot[data-mood="up"]       .bot-arm-r { transform: rotate(-84deg); }

.bot[data-mood="down"]     { --fire: .7; }
.bot[data-mood="down"]     .e-sad, .bot[data-mood="down"] .m-frown { display: inline; }
.bot[data-mood="down"]     .bot-sweat { display: inline; }
.bot[data-mood="down"]     .bot-arm-l { transform: rotate(-6deg); }
.bot[data-mood="down"]     .bot-arm-r { transform: rotate(6deg); }

.bot[data-mood="refused"]  { --fire: .7; }
.bot[data-mood="refused"]  .e-squint, .bot[data-mood="refused"] .m-zig { display: inline; }
.bot[data-mood="refused"]  .eyes path, .bot[data-mood="refused"] .mouth { stroke: var(--tomato); }
.bot[data-mood="refused"]  .bot-arm-l { transform: rotate(-38deg); }
.bot[data-mood="refused"]  .bot-arm-r { transform: rotate(38deg); }

.bot[data-mood="confused"] { --fire: 1.25; }
.bot[data-mood="confused"] .e-odd, .bot[data-mood="confused"] .m-wave { display: inline; }
.bot[data-mood="confused"] .eyes rect, .bot[data-mood="confused"] .mouth { fill: var(--marigold); stroke: var(--marigold); }
.bot[data-mood="confused"] .m-wave { fill: none; }
.bot[data-mood="confused"] .bot-arm-r { transform: rotate(-96deg); }

.bot[data-mood="asleep"]   { --fire: 0; }
.bot[data-mood="asleep"]   .bot-smoke { display: inline; }
.bot[data-mood="asleep"]   .e-closed, .bot[data-mood="asleep"] .m-flat { display: inline; }
.bot[data-mood="asleep"]   .bot-zzz { display: inline; }
.bot[data-mood="asleep"]   .eyes path, .bot[data-mood="asleep"] .mouth { stroke: var(--text-3); }
.bot[data-mood="asleep"]   .bot-spark { stroke: var(--text-3); }
.bot[data-mood="asleep"]   .bot-arm-l { transform: rotate(-4deg); }
.bot[data-mood="asleep"]   .bot-arm-r { transform: rotate(4deg); }

.bot[data-mood="waiting"]  { --fire: .85; }
.bot[data-mood="waiting"]  .e-calm, .bot[data-mood="waiting"] .m-flat { display: inline; }
.bot[data-mood="waiting"]  .bot-arm-l { transform: rotate(8deg); }
.bot[data-mood="waiting"]  .bot-arm-r { transform: rotate(-8deg); }

.bubble {
  grid-area: bubble; align-self: start; position: relative; z-index: 1;
  background: var(--bone); color: var(--bg);
  border-radius: 18px; padding: 12px 14px 13px;
  box-shadow: 0 0 0 2.5px var(--edge), 4px 4px 0 0 var(--edge);
  margin: 10px 0 0 -10px;
  transition: transform 260ms var(--ease);
}
.bubble::after {
  content: ""; position: absolute; left: -13px; bottom: 22px;
  width: 20px; height: 20px; background: var(--bone);
  clip-path: polygon(100% 0, 0 60%, 100% 100%);
  filter: drop-shadow(-2.5px 0 0 var(--edge));
}
.bubble-kicker { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #3E5A50; --mono: 1; }
.bubble-text { font-size: 15.5px; font-weight: 650; line-height: 1.32; margin-top: 3px; --casl: 1; text-wrap: balance; }
.bubble[data-tone="up"] .bubble-kicker { color: #1F7A4A; }
.bubble[data-tone="down"] .bubble-kicker, .bubble[data-tone="refused"] .bubble-kicker { color: #B23A1C; }
.bubble[data-tone="thinking"] .bubble-kicker { color: #1F5E8A; }
.bubble[data-tone="caution"] .bubble-kicker { color: #8A5A00; }
.bubble.is-pop { animation: pop 420ms var(--ease); }
@keyframes pop { 0% { transform: scale(.9) rotate(-2deg); } 100% { transform: none; } }

.who { grid-area: who; margin-top: 16px; position: relative; z-index: 1; }
.entrant { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; --casl: 1; text-wrap: balance; }
.declared { margin-top: 6px; font-size: 17px; font-weight: 600; color: var(--bone); }
.declared-effort { color: var(--sky); }
.declared-effort:not(:empty)::before { content: " \00B7  "; color: var(--text-3); }
.who-meta { color: var(--text-3); font-size: 14px; margin-top: 2px; --mono: 1; }

.clock { grid-area: clock; margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--line); }
.clock-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.clock-num { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; --mono: 1; font-variant-numeric: tabular-nums; }
.clock-label { color: var(--text-2); font-size: 15px; }
.fuse { position: relative; height: 6px; margin-top: 12px; border-radius: 99px; background: repeating-linear-gradient(90deg, #6C5A3A 0 6px, #56482F 6px 9px); box-shadow: 0 0 0 2px var(--edge); }
.fuse-burnt { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px 0 0 99px; background: var(--edge); }
.fuse-spark {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: radial-gradient(circle, #FFF3C4 0 30%, var(--marigold) 45%, rgba(245, 189, 79, 0) 72%);
  animation: spark 900ms steps(3) infinite;
}
.fuse[data-ended] .fuse-spark { display: none; }
@keyframes spark { 0% { transform: scale(1); } 33% { transform: scale(1.35) rotate(40deg); } 66% { transform: scale(.85); } }
.clock-next { margin-top: 8px; color: var(--text-3); font-size: 14px; --mono: 1; }

/* ── score ───────────────────────────────────────────────────────────────── */
.score { padding: 18px 18px 16px; }
.score-label { font-size: 14px; font-weight: 700; color: var(--text-2); --casl: 1; }
.score-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
#score-usd { font-size: 58px; font-weight: 900; letter-spacing: -0.035em; line-height: 1; --casl: 1; font-variant-numeric: tabular-nums; }
.delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 18px; font-weight: 800; --mono: 1; font-variant-numeric: tabular-nums;
  padding: 3px 10px; border-radius: 999px; box-shadow: 0 0 0 2px var(--edge);
}
.delta:empty { display: none; }
.delta[data-sign="up"] { background: var(--mint); color: var(--bg); }
.delta[data-sign="down"] { background: var(--tomato); color: var(--bg); }
.delta[data-sign="flat"] { background: var(--panel-3); color: var(--bone); }
.delta-sm { font-size: 13px; padding: 1px 8px; margin-left: 8px; }
.score-eth { color: var(--text-2); font-size: 14px; margin-top: 8px; --mono: 1; }
.score-alt { margin-top: 16px; display: grid; gap: 8px; }
.alt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; border-top: 1.5px solid var(--line); }
.alt-row dt { color: var(--text-2); font-size: 14px; }
.alt-row dd { font-weight: 750; font-size: 17px; --mono: 1; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.alt-when { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); }
.score-stamp { margin-top: 12px; color: var(--text-3); font-size: 13px; line-height: 1.45; }

/* ── holdings ────────────────────────────────────────────────────────────── */
.hold-list { display: grid; gap: 12px; margin-top: 14px; }
.hold { padding: 13px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
.hold-sym { font-weight: 850; font-size: 18px; --casl: 1; min-width: 0; overflow-wrap: anywhere; }
.hold-sym small { font-weight: 600; font-size: 12px; color: var(--text-3); margin-left: 6px; --mono: 1; }
.hold-val:empty { display: none; }
.hold-val { font-weight: 800; font-size: 18px; text-align: right; --mono: 1; font-variant-numeric: tabular-nums; }
.hold-qty, .hold-sub { color: var(--text-2); font-size: 13px; --mono: 1; font-variant-numeric: tabular-nums; }
.hold-sub { text-align: right; }
.hold-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hold-note { grid-column: 1 / -1; color: var(--text-3); font-size: 13px; margin-top: 6px; }
.hold--cash { background: var(--panel-2); }
.hold--lp .lp-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 10px; }
.lp-grid div { display: flex; flex-direction: column; }
.lp-grid dt { font-size: 12px; color: var(--text-3); }
.lp-grid dd { font-size: 14px; font-weight: 650; --mono: 1; font-variant-numeric: tabular-nums; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 750; line-height: 1; padding: 5px 8px; border-radius: 999px;
  --mono: 1; box-shadow: 0 0 0 1.5px var(--edge);
}
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag-sim { background: rgba(142, 230, 176, .14); color: var(--mint); }
.tag-quoted { background: rgba(245, 189, 79, .14); color: var(--marigold); }
.tag-refused { background: rgba(255, 139, 110, .14); color: var(--tomato); }
.tag-plain { background: var(--panel-3); color: var(--text-2); }
.tag-plain::before { display: none; }

/* ── chart ───────────────────────────────────────────────────────────────── */
.chart-card { padding: 16px 16px 12px; }
.chart-head { display: grid; gap: 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.lg { display: inline-block; }
.lg-sim { width: 22px; height: 3px; border-radius: 2px; background: var(--series-sim); }
.lg-all { width: 22px; height: 0; border-top: 2.5px dashed var(--series-all); }
.lg-liq { width: 10px; height: 10px; border-radius: 50%; background: var(--series-sim); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--bone); }
.lg-mid { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--series-sim); background: var(--panel); }
.chart-note { margin-top: 10px; font-size: 13px; color: var(--text-3); max-width: 70ch; }
.chart-wrap { position: relative; margin-top: 12px; }
.chart { display: block; width: 100%; height: 230px; overflow: visible; touch-action: pan-y; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis-t { fill: var(--text-3); font-size: 11.5px; font-family: "Recursive", ui-monospace, monospace; font-variation-settings: "MONO" 1; }
.chart .base { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 2 5; }
.chart .base-t { fill: var(--text-2); font-size: 11.5px; font-weight: 600; font-family: "Recursive", sans-serif; }
.chart .future { fill: rgba(241, 233, 216, .025); }
.chart .now { stroke: var(--marigold); stroke-width: 1.5; }
.chart .now-t { fill: var(--marigold); font-size: 11.5px; font-weight: 750; font-family: "Recursive", sans-serif; }
.chart .ln { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln-sim { stroke: var(--series-sim); stroke-width: 2.75; }
.chart .ln-all { stroke: var(--series-all); stroke-dasharray: 6 5; }
.chart .ln-mid { stroke: var(--marigold); stroke-width: 1.75; stroke-dasharray: 1.5 4; opacity: .9; }
.chart .ln-out { opacity: .5; }
.chart .ln-sim.ln-out { stroke-dasharray: 5 4; }
.chart .pt-mid { stroke: var(--marigold) !important; }
.lg-midln { width: 22px; height: 0; border-top: 2.5px dotted var(--marigold); }
/* the two assessments, named on the chart itself (Chef TG 12943) */
.chart-key { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 10px; margin: 0;
  padding: 0 2px; list-style: none; font-size: 10px; line-height: 1.3; color: var(--text-2); pointer-events: none; --mono: 1; }
.chart-key .lg-liq, .chart-key .lg-mid, .chart-key .lg-est { width: 8px; height: 8px; }
.lg-est { width: 10px; height: 10px; border-radius: 50%; border: 2px dotted var(--bone); background: var(--panel); }
.chart .pt-est { fill: var(--panel) !important; stroke: var(--bone) !important; stroke-width: 2.25 !important; stroke-dasharray: 2.5 2.5; }
/* Profile is a tab now (Chef TG 12953): the profile fits the panel and scrolls inside it */
.panel-profile .prof-head { margin-top: 4px; }
.log-numbers { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--edge); }
.chart-key li { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.chart-key .lg { flex: none; }
.chart .pt { stroke: var(--panel); stroke-width: 2; }
.chart .pt-liq { fill: var(--series-sim); stroke: var(--bone); stroke-width: 2; }
.chart .pt-mid { fill: var(--panel); stroke: var(--series-sim); stroke-width: 2.25; }
.chart .pt-all { fill: var(--series-all); stroke: var(--panel); }
.chart .end-t { font-size: 12px; font-weight: 750; font-family: "Recursive", sans-serif; fill: var(--bone); }
.chart .xhair { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .hot { fill: var(--bone); stroke: var(--edge); stroke-width: 2; }
.chart .empty-t { fill: var(--text-2); font-size: 14px; font-family: "Recursive", sans-serif; }
.tip {
  position: absolute; top: 0; left: 0; pointer-events: none; z-index: 3;
  background: var(--bone); color: var(--bg); border-radius: 12px; padding: 8px 11px;
  box-shadow: 0 0 0 2px var(--edge), 3px 3px 0 0 var(--edge);
  font-size: 13px; line-height: 1.35; min-width: 150px; --mono: 1;
}
.tip b { font-weight: 800; }
.tip .tip-k { color: #3E5A50; font-size: 12px; }
.chart-table { margin-top: 10px; font-size: 14px; color: var(--text-2); }
.chart-table summary, .prompt-box summary { cursor: pointer; }
.chart-table summary { padding: 6px 0; font-weight: 600; }
.chart-table summary:hover { color: var(--bone); }
.table-scroll { overflow-x: auto; margin-top: 8px; }
.chart-table table { border-collapse: collapse; width: 100%; font-size: 13px; --mono: 1; font-variant-numeric: tabular-nums; }
.chart-table th { text-align: left; color: var(--text-3); font-weight: 600; padding: 4px 10px 6px 0; border-bottom: 1.5px solid var(--line); }
.chart-table td { padding: 4px 10px 4px 0; white-space: nowrap; }

/* ── the tape ────────────────────────────────────────────────────────────── */
.tape-head { display: grid; }
.tape-list { display: grid; gap: 18px; margin-top: 16px; counter-reset: none; }
.tick { padding: 14px 14px 14px; position: relative; }
.tick::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--tone, var(--text-3));
}
.tick[data-v="traded"]  { --tone: var(--mint); }
.tick[data-v="refused"] { --tone: var(--tomato); }
.tick[data-v="hold"]    { --tone: var(--text-3); }
.tick[data-v="error"]   { --tone: var(--marigold); }
.tick.is-new { animation: land 620ms var(--ease); }
@keyframes land { 0% { transform: translateY(-10px) scale(.985); opacity: 0; } 100% { transform: none; opacity: 1; } }

.tick-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.face { width: 44px; height: 39px; display: block; }
.face-head { fill: var(--bone); stroke: var(--edge); stroke-width: 3.5; }
.face-screen { fill: #10261F; }
.face-wick { fill: none; stroke: var(--tone, var(--text-3)); stroke-width: 3.5; stroke-linecap: round; }
.face .f-eyes rect { fill: var(--tone, var(--mint)); }
.face .f-eyes path { fill: none; stroke: var(--tone, var(--mint)); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tick[data-v="hold"] .face .f-eyes rect { fill: var(--mint); }
.tick[data-v="hold"] .face .f-eyes path { stroke: var(--mint); }
.tick-when { display: flex; flex-direction: column; min-width: 0; }
.tick-n { font-weight: 850; font-size: 17px; line-height: 1.15; --casl: 1; }
.tick-t { color: var(--text-3); font-size: 13px; --mono: 1; white-space: nowrap; }
.verdict {
  font-size: 13px; font-weight: 800; padding: 5px 10px; border-radius: 999px; line-height: 1;
  background: var(--tone); color: var(--bg); box-shadow: 0 0 0 1.5px var(--edge); --casl: 1; white-space: nowrap;
}
.tick[data-v="hold"] .verdict { background: var(--panel-3); color: var(--bone); }

.thought { margin-top: 12px; position: relative; }
.reasoning {
  font-size: 16px; line-height: 1.58; color: var(--bone); max-width: 68ch; text-wrap: pretty;
  white-space: pre-line;
}
.thought.is-clamped .reasoning { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -0.17em; background: var(--sky); border-radius: 2px; animation: blink 900ms steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.readmore {
  margin-top: 6px; background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--sky); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.readmore:hover { color: var(--bone); }
.no-answer { color: var(--marigold); font-size: 15px; }
.no-answer code { color: var(--text-2); font-size: 13px; --mono: 1; font-family: inherit; overflow-wrap: anywhere; }

.orders { display: grid; gap: 10px; margin-top: 14px; }
.order { background: var(--panel-2); border-radius: 12px; padding: 11px 12px; box-shadow: inset 0 0 0 1.5px var(--line); }
.order-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 16px; }
.oside { font-weight: 850; --casl: 1; }
.oside-buy { color: var(--mint); }
.oside-sell { color: var(--marigold); }
.oside-lp { color: var(--sky); }
.order-tok { font-weight: 750; }
.order-amt { color: var(--text-2); font-size: 14px; --mono: 1; }
.route { color: var(--text-2); font-size: 13px; margin-top: 6px; overflow-wrap: anywhere; }
.route b { color: var(--bone); font-weight: 700; }
.fall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 9px; --mono: 1; font-variant-numeric: tabular-nums; }
.fall div { background: var(--panel); padding: 6px 7px 7px; min-width: 0; }
.fall div:first-child { border-radius: 8px 0 0 8px; }
.fall div:last-child { border-radius: 0 8px 8px 0; background: var(--panel-3); }
.fall dt { font-size: 11px; color: var(--text-3); }
.fall dd { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.25; }
.fall .neg { color: var(--tomato); }
.fall .unit { display: block; font-size: 11px; font-weight: 500; color: var(--text-2); }
.order-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ledger-note { font-size: 13px; color: var(--text-2); margin-top: 7px; line-height: 1.4; }
.ledger-note b { color: var(--tomato); font-weight: 700; }
.refusal { margin-top: 7px; font-size: 14px; color: var(--tomato); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }

.leaned { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.leaned-k { font-size: 12px; color: var(--text-3); margin-right: 2px; --mono: 1; }
.chip {
  font-size: 12.5px; padding: 4px 9px; border-radius: 999px; background: var(--panel-3); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line); --mono: 1; line-height: 1.3; overflow-wrap: anywhere;
}
.chip b { color: var(--sky); font-weight: 700; }
.tick-foot { margin-top: 10px; font-size: 12px; color: var(--text-3); --mono: 1; }

.more, .empty-cta {
  justify-self: start; margin-top: 16px; cursor: pointer;
  background: var(--bone); color: var(--bg); border: 0; border-radius: 999px; padding: 10px 18px;
  font-weight: 800; font-size: 15px; --casl: 1;
  box-shadow: 0 0 0 2px var(--edge), 3px 3px 0 0 var(--edge);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.more:hover { transform: translate(-1px, -1px); box-shadow: 0 0 0 2px var(--edge), 4px 4px 0 0 var(--edge); }
.more:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px var(--edge), 1px 1px 0 0 var(--edge); }

.empty {
  padding: 20px 18px; border-radius: var(--r); background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--line); color: var(--text-2);
}
.empty b { display: block; color: var(--bone); font-size: 17px; font-weight: 800; --casl: 1; margin-bottom: 4px; }

/* ── prompt + notes ──────────────────────────────────────────────────────── */
.prompt-box { padding: 0; }
.prompt-box summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; }
.prompt-box summary::-webkit-details-marker { display: none; }
.summary-hint { font-size: 13px; font-weight: 750; color: var(--sky); --mono: 1; }
.prompt-box[open] .summary-hint { color: var(--text-3); }
.prompt-box summary:hover .summary-hint { color: var(--bone); }
.prompt-sha { padding: 0 16px; color: var(--text-3); font-size: 12px; --mono: 1; overflow-wrap: anywhere; }
.prompt-text {
  margin: 10px 0 0; padding: 14px 16px 18px; max-height: 60vh; overflow: auto;
  font-family: "Recursive", ui-monospace, monospace; --mono: 1; font-size: 13px; line-height: 1.55; color: var(--text-2);
  white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1.5px solid var(--line);
}

.notes { padding: 18px 18px 20px; background: var(--panel-2); }
.note-list { margin-top: 12px; display: grid; gap: 10px; counter-reset: n; }
.note-list li { position: relative; padding-left: 30px; color: var(--text-2); font-size: 14.5px; max-width: 72ch; counter-increment: n; }
.note-list li::before {
  content: counter(n); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-3); color: var(--bone); font-size: 11.5px; font-weight: 800; --mono: 1;
}

/* ── motion: gentle life on the bot, only when welcome ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .bot-all { animation: bob 3.6s ease-in-out infinite; }
  .bot .bot-flame, .bot .bot-core { animation: flick 1.3s ease-in-out infinite; transform-origin: 110px 28px; }
  .bot[data-mood="thinking"] .bot-all { animation-duration: 1.8s; }
  .bot[data-mood="asleep"] .bot-all { animation-duration: 6s; }
  .bot .e-calm { animation: blinky 5.2s infinite; transform-origin: 110px 82px; }
  .bot[data-mood="trading"] .bot-coin { animation: flip 900ms var(--ease) infinite alternate; transform-origin: 178px 206px; }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes flick { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.1, .92) rotate(4deg); } }
@keyframes blinky { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes flip { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── phone + tablet: one column, in reading order (the two desktop panes dissolve) ── */
@media (max-width: 1079.98px) {
  .side, .main { display: contents; }
  .stage { order: 1; } .score { order: 2; } .chart-card { order: 3; } .holds { order: 4; }
  .tape { order: 5; } .prompt { order: 6; } .notes { order: 7; }
}

/* ── wider screens ───────────────────────────────────────────────────────── */
@media (min-width: 560px) {
  :root { --gut: 24px; }
  .stage { grid-template-columns: 230px minmax(0, 1fr); padding: 22px; }
  #score-usd { font-size: 66px; }
  .entrant { font-size: 46px; }
  .lp-grid { grid-template-columns: repeat(4, 1fr); }
  .chart { height: 270px; }
}

@media (min-width: 1080px) {
  :root { --gut: 28px; }
  body { overflow: hidden; height: 100dvh; display: flex; flex-direction: column; }
  .bar { width: 100%; padding-top: 16px; }
  .layout {
    width: 100%; flex: 1; min-height: 0;
    grid-template-columns: minmax(380px, 430px) minmax(0, 1fr);
    gap: 32px; padding-bottom: 0;
  }
  .side, .main {
    overflow-y: auto; min-height: 0; height: 100%;
    padding: 6px 12px 40px 6px; margin: -6px -12px 0 -6px;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .stage { grid-template-columns: 200px minmax(0, 1fr); }
  .main { gap: 32px; }
  .chart { height: 300px; }
  .tape-head { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 20px; }
  .tape-head .sec-sub { margin-top: 0; }
  .tick { padding: 16px 18px 16px; }
  .tick-body:has(.orders) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 22px; align-items: start; }
  .tick-body .orders { margin-top: 12px; }
}

/* ══ LOCKED WINDOW — Chef TG 12663 (2026-09-24): the page is one locked game window. The first view is the robot,
   who it is and how it is doing; its latest move sits under that with a More button; everything data-heavy
   is folded away, so the page only gets more complicated when the viewer asks it to. ══ */
html, body { height: 100%; }
body { overflow: hidden; height: 100dvh; background-attachment: scroll; }
.cab {
  position: fixed; inset: 0; display: flex; justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
}
.win {
  width: 100%; max-width: 780px; height: 100%; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border-radius: 22px;
  box-shadow: 0 0 0 3px var(--edge), 0 0 0 7px var(--panel-3), 0 0 0 10px var(--edge), 10px 12px 0 8px rgba(0, 0, 0, .45);
}
.win-bar {
  flex: none; max-width: none; margin: 0; padding: 11px 14px 10px;
  background: var(--panel-2); border-bottom: 3px solid var(--edge);
}
.win-bar .mark-word { font-size: 22px; }
.lock { width: 14px; height: 16px; margin-right: 8px; align-self: center; flex: none; }
.lock rect { fill: var(--marigold); stroke: var(--edge); stroke-width: 1.6; }
.lock path { fill: none; stroke: var(--bone); stroke-width: 2.2; stroke-linecap: round; }
.mode-chip {
  margin-left: 10px; align-self: center; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 6px; background: var(--bone); color: var(--bg); --mono: 1;
}
.win-view {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 14px 14px 36px; display: grid; gap: 18px; align-content: start;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  background: radial-gradient(120% 50% at 50% 0%, #173a2f 0%, transparent 60%);
}

/* the stage: robot + bubble, who it is, then two big tiles */
.stage { grid-template-areas: "bot bubble" "who who" "board board" "next next"; }
.board { grid-area: board; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; margin-top: 16px; position: relative; z-index: 1; }
.tile { background: var(--panel-3); border-radius: 14px; padding: 11px 13px 12px; box-shadow: 0 0 0 2px var(--edge), 3px 3px 0 0 var(--edge); min-width: 0; }
.tile-k { font-size: 12.5px; font-weight: 700; color: var(--text-2); --casl: 1; }
.tile-v { margin-top: 2px; line-height: 1; }
.tile-s { margin-top: 8px; }
#score-usd { font-size: 40px; }
.tile-clock .clock-num { font-size: 30px; }
.tile-clock .fuse { margin-top: 14px; }
.stage > .clock-next { grid-area: next; margin-top: 10px; position: relative; z-index: 1; }
.entrant { font-size: 34px; }
.declared { font-size: 15.5px; overflow-wrap: anywhere; }

/* the latest move */
.tape { display: grid; }
.tape .sec-title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); --mono: 1; margin: 0 2px 10px; }
.tape .tape-list { margin-top: 0; }

/* folds: everything data-heavy, closed until asked for */
.folds { display: grid; gap: 12px; }
.fold, .fold.notes, .fold.prompt-box { padding: 0 !important; background: var(--panel) !important; border-radius: var(--r); box-shadow: 0 0 0 2px var(--edge), 4px 4px 0 0 var(--edge); }
.fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: var(--r);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold-t { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; --casl: 1; }
.fold-h { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750; color: var(--text-3); --mono: 1; }
.fold-h::after {
  content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bone); color: var(--bg); font-size: 16px; font-weight: 900; line-height: 1;
  transition: transform 200ms var(--ease-out);
}
.fold[open] > summary .fold-h::after { transform: rotate(45deg); }
.fold > summary:hover .fold-t { color: var(--mint); }
.fold-b, .fold-b.chart-card, .fold-b.score { background: none !important; box-shadow: none !important; border-radius: 0; padding: 0 16px 16px !important; }
.fold .prompt-sha { padding: 0; }
.fold .prompt-text { margin: 10px -16px -16px; }
.fold .note-list { margin-top: 0; }
.fold .legend { margin-bottom: 8px; }
.score-k { color: var(--text-2); font-size: 14px; }

/* the robot's new body */
.bot .bot-belt { fill: var(--edge); }
.bot .bot-buckle { fill: var(--marigold); stroke: var(--edge); stroke-width: 3.5; }
.bot .bot-sole { fill: var(--edge); }
.bot .bot-shoulder { fill: var(--bone); stroke: var(--edge); stroke-width: 4; }
.bot .bot-arm-l { transform-origin: 60px 152px; }
.bot .bot-arm-r { transform-origin: 160px 152px; }
@media (prefers-reduced-motion: no-preference) {
  .bot[data-mood="trading"] .bot-coin { transform-origin: 188px 202px; }
}

@media (min-width: 560px) {
  .cab { padding: 18px; }
  .win-view { padding: 18px 20px 40px; gap: 22px; }
  .stage { grid-template-columns: 220px minmax(0, 1fr); }
  #score-usd { font-size: 52px; }
  .tile-clock .clock-num { font-size: 36px; }
  .entrant { font-size: 42px; }
}
@media (min-width: 1080px) {
  .cab { padding: 26px; }
  .tick-body:has(.orders) { display: block; }
}
/* rows keep their full height inside the scrolling view (an overflow:hidden grid item may otherwise shrink to 0),
   and the old phone reading order is switched off: the window has its own order */
.win-view { grid-auto-rows: max-content; }
.win-view .stage, .win-view .tape, .win-view .folds, .win-view .fold { order: 0 !important; }
/* both mitts: the right one sits after the coin, so the old sibling selector never reached it (it drew black) */
.bot .bot-hand { fill: var(--bone); stroke: var(--edge); stroke-width: 4.5; }
/* the two tiles size their big number to the TILE, not the screen (Chef TG 12672: the countdown spilled out of its
   box on his phone). 7 mono digits ≈ 4.3em, so 21cqi always fits; the value gets the same treatment. */
.tile { container-type: inline-size; overflow: hidden; }
.tile-clock .clock-num { font-size: min(38px, 23.5cqi) !important; white-space: nowrap; letter-spacing: -0.04em; }
#score-usd { font-size: min(52px, 24cqi) !important; white-space: nowrap; }
.tile-val .delta { white-space: nowrap; font-size: min(18px, 11cqi); }
.board { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

/* ══ ROUND 2 — Chef TG 12675: status on one line, a smaller robot and bubble, the latest move at the very bottom,
   the full log and the live thinking in full-window sheets that close with × ══ */
.win-bar .mark { min-width: 0; }
.status { white-space: nowrap; flex: none; }
@media (max-width: 389.98px) { .win-bar .mark-host { display: none; } }

.stage { grid-template-columns: 112px minmax(0, 1fr); padding: 14px 14px 14px; }
.bot { max-width: 112px; margin: 0; align-self: center; }
.bubble {
  display: block; width: auto; text-align: left; border: 0; font: inherit; cursor: pointer;
  padding: 8px 11px 9px; border-radius: 14px; margin: 0 0 0 4px; align-self: center;
}
.bubble::after { left: -11px; bottom: auto; top: 50%; margin-top: -9px; width: 16px; height: 18px; }
.bubble > span { display: block; }
.bubble-kicker { font-size: 11px; }
.bubble-text { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bubble-cta { margin-top: 5px; font-size: 11.5px; font-weight: 800; color: #1F5E8A; --mono: 1; }
.bubble:hover .bubble-cta { text-decoration: underline; }
.who { margin-top: 12px; }
.entrant { font-size: 30px; }
.board { margin-top: 12px; }

.latest { display: grid; gap: 8px; }
.latest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.latest-title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); --mono: 1; }
.more-sm { margin-top: 0; padding: 7px 14px; font-size: 13.5px; }

.log-list { display: grid; gap: 6px; }
.logrow {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 9px 12px; border-radius: 12px; background: var(--panel);
  box-shadow: 0 0 0 2px var(--edge); white-space: nowrap; font-size: 14px;
}
.lr-t { flex: none; color: var(--text-3); font-size: 12.5px; --mono: 1; font-variant-numeric: tabular-nums; }
.lr-v { flex: none; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--panel-3); color: var(--bone); --mono: 1; }
.logrow[data-v="traded"] .lr-v { background: var(--mint); color: var(--bg); }
.logrow[data-v="refused"] .lr-v { background: var(--tomato); color: var(--bg); }
.logrow[data-v="error"] .lr-v { background: var(--marigold); color: var(--bg); }
.lr-x { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.logrow-empty { white-space: normal; color: var(--text-2); }

.win { position: relative; }
.sheet { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg); border-radius: 22px; overflow: hidden; }
.sheet-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; background: var(--panel-2); border-bottom: 3px solid var(--edge); }
.sheet-t { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; --casl: 1; }
.sheet-x {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--bone); color: var(--bg); font-size: 24px; font-weight: 900; line-height: 1;
  box-shadow: 0 0 0 2px var(--edge), 2px 2px 0 0 var(--edge);
}
.sheet-x:active { transform: translate(1px, 1px); }
.sheet-view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 30px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sheet-view.tape { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .sheet:not([hidden]) { animation: sheet-in 240ms var(--ease-out); }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-width: 560px) {
  .stage { grid-template-columns: 150px minmax(0, 1fr); padding: 18px; }
  .bot { max-width: 150px; }
  .bubble-text { font-size: 15px; }
  .entrant { font-size: 36px; }
}

/* ══ ROUND 3 — Chef TG 12677: ONE FIXED SCREEN, Hearthstone-style. Robot + bubble top-left, the two tiles stacked
   to its right, a compact profile line, the chart on the main screen, a dock, the latest move at the bottom.
   Everything else opens as a full-window sheet: tap the robot (profile + prompt), the bubble (its thinking),
   a tile or the chart (the numbers), the dock, or the log. ══ */
.win-view { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 14px; }
.win-view > * { flex: none; }
.win-view > .chart-main { flex: 1 1 auto; min-height: 150px; }

button.bubble, .bot-btn, button.tile, button.who, .link-btn, .dock-b {
  font: inherit; color: inherit; border: 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
}
.stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hero tiles" "who who";
  gap: 12px 12px; padding: 12px;
}
.hero { grid-area: hero; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; position: relative; z-index: 1; }
.hero .bubble { width: 100%; margin: 0; padding: 7px 10px 8px; border-radius: 12px; }
.hero .bubble::after {
  left: calc(50% - 9px); top: auto; bottom: -12px; margin: 0; width: 18px; height: 13px;
  clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2.5px 0 var(--edge));
}
.hero .bubble-kicker { font-size: 10.5px; }
.hero .bubble-text { font-size: 13px; -webkit-line-clamp: 3; }
.hero .bubble-cta { font-size: 11px; margin-top: 3px; }
.bot-btn { display: block; background: none; padding: 0; width: min(100%, 118px); border-radius: 16px; }
.bot-btn .bot { width: 100%; max-width: none; margin: 0; display: block; }
.bot-btn:hover .bot-all { filter: brightness(1.08); }

.tiles { grid-area: tiles; display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-width: 0; position: relative; z-index: 1; }
.tile { display: flex; flex-direction: column; justify-content: center; }
.tile > span { display: block; }
button.tile:hover { box-shadow: 0 0 0 2px var(--mint), 3px 3px 0 0 var(--edge); }
.tile-s { margin-top: 6px; }
.tile-clock .fuse { margin-top: 10px; display: block; }
.tile-clock .clock-next { margin-top: 7px; font-size: 11px; line-height: 1.3; color: var(--text-3); }

.who { grid-area: who; display: block; width: 100%; background: none; padding: 0; margin: 0; position: relative; z-index: 1; }
.who > span { display: block; }
.who-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.who .entrant { font-size: 22px; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-more { flex: none; font-size: 12px; font-weight: 800; color: var(--sky); --mono: 1; }
.who .declared { margin-top: 3px; font-size: 14px; }
.who .who-meta { font-size: 12px; margin-top: 1px; }
.who:hover .who-more { text-decoration: underline; }

.chart-main {
  display: flex; flex-direction: column; background: var(--panel); border-radius: var(--r);
  box-shadow: 0 0 0 2px var(--edge), 4px 4px 0 0 var(--edge); padding: 10px 12px 8px;
}
.chart-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.mini-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); --mono: 1; }
.link-btn { background: none; padding: 2px 0; font-size: 12.5px; font-weight: 800; color: var(--sky); --mono: 1; }
.chart-main .chart-wrap { flex: 1; position: relative; min-height: 110px; }
.chart-main .chart { position: absolute; inset: 0; width: 100%; height: 100% !important; }

.dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dock-b {
  text-align: center; padding: 9px 6px; border-radius: 12px; background: var(--panel-3); color: var(--bone);
  font-size: 14px; font-weight: 800; --casl: 1; box-shadow: 0 0 0 2px var(--edge), 3px 3px 0 0 var(--edge);
}
.dock-b:hover { background: var(--panel-2); }
.dock-b:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px var(--edge), 1px 1px 0 0 var(--edge); }

.latest { gap: 6px; }

/* sheets' contents */
.sheet-h { font-size: 15px; font-weight: 800; margin: 20px 0 8px; --casl: 1; }
.sheet .prompt-box { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.sheet .prompt-sha { padding: 0; }
.sheet .prompt-text { margin: 8px 0 0; max-height: none; border: 1.5px solid var(--line); border-radius: 12px; }
.sheet .score { background: none; box-shadow: none; padding: 0; }
.sheet .legend { margin: 0 0 8px; }
.sheet .chart-table { margin-top: 12px; }
.prof-head { display: flex; align-items: center; gap: 14px; }
.prof-bot { width: 110px; flex: none; }
.prof-bot .bot { width: 100%; max-width: none; margin: 0; }
.prof-name { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; --casl: 1; overflow-wrap: anywhere; }
.prof-model { margin-top: 4px; color: var(--sky); font-weight: 650; }
.prof-list { margin-top: 16px; display: grid; gap: 0; }
.prof-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1.5px solid var(--line); }
.prof-row dt { color: var(--text-3); font-size: 13px; }
.prof-row dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }

@media (min-width: 560px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px; }
  .bot-btn { width: min(100%, 150px); }
  .hero .bubble-text { font-size: 14px; }
  .who .entrant { font-size: 28px; }
  .win-view { padding: 16px 18px 18px; gap: 14px; }
}
button.bubble { color: var(--bg); }
.hero .bubble > .bubble-text { display: -webkit-box; }
.who > .who-top { display: flex; }
.hero .bot-btn { width: min(100%, 100px); }
@media (min-width: 560px) { .hero .bot-btn { width: min(100%, 150px); } }
.win-view > .chart-main { min-height: 104px; }
.chart-main .chart-wrap { min-height: 70px; }

/* ══ Chef TG 12696: no floating. The body stays planted; life comes from the face and arms instead — it glances
   left and right, blinks (e-calm, above), and now and then gives a small arm wiggle. Individual `translate`/`rotate`
   properties so these stack on top of the mood poses (which use `transform`) instead of replacing them. ══ */
.bot-all, .bot[data-mood] .bot-all { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .bot .eyes { animation: glance 7.5s ease-in-out infinite; }
  .bot[data-mood="asleep"] .eyes { animation: none; }
  .bot .bot-arm-l { animation: wiggle-l 9s ease-in-out infinite; }
  .bot .bot-arm-r { animation: wiggle-r 11s ease-in-out 3s infinite; }
  .bot[data-mood="asleep"] .bot-arm-l, .bot[data-mood="asleep"] .bot-arm-r { animation: none; }
}
@keyframes glance {
  0%, 38%, 100% { translate: 0 0; }
  44%, 54% { translate: -6px 0; }
  60%, 72% { translate: 6px 0; }
  78% { translate: 0 0; }
}
@keyframes wiggle-l { 0%, 84%, 100% { rotate: 0deg; } 88% { rotate: 14deg; } 92% { rotate: -4deg; } 96% { rotate: 10deg; } }
@keyframes wiggle-r { 0%, 86%, 100% { rotate: 0deg; } 90% { rotate: -14deg; } 94% { rotate: 4deg; } 97% { rotate: -9deg; } }
/* the bubble keeps a constant height (3 text lines) so the bot below it never jumps when the text changes */
.hero .bubble-text { min-height: calc(3 * 1.3em); }
/* Chef TG 12699: the profile lives ONLY behind the robot. The name/model/harness block stays in the DOM (the
   script still fills it, and the profile sheet reads the run) but is not shown on the main screen. */
.stage > .who { display: none; }
.stage { grid-template-areas: "hero tiles"; }
.delta[data-sign="caution"] { background: var(--marigold); color: var(--bg); }
#score-usd.is-word { font-size: min(34px, 15cqi) !important; }

/* ══ Chef TG 12700: hint that the robot is tappable WITHOUT any text. Game idiom: the character stands on a soft glowing
   ring that breathes, waves once when the page opens, and lifts a little under a finger or pointer. ══ */
.bot-btn { cursor: pointer; }
.bot-btn .bot { transition: translate 180ms var(--ease-out), scale 120ms var(--ease-out); }
.bot-btn .bot-shadow { fill: var(--mint); opacity: .22; transform-origin: 110px 222px; }
.bot-btn:hover .bot, .bot-btn:focus-visible .bot { translate: 0 -3px; }
.bot-btn:hover .bot-shadow { opacity: .4; }
.bot-btn:active .bot { scale: .96; translate: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .bot-btn .bot-shadow { animation: ring 3.2s ease-in-out infinite; }
  .bot-btn .bot:not([data-mood="asleep"]) .bot-arm-r { animation: hello 1.3s ease-in-out .7s 1, wiggle-r 11s ease-in-out 3s infinite; }
}
@keyframes ring { 0%, 100% { opacity: .16; scale: 1; } 50% { opacity: .36; scale: 1.08 1.15; } }
@keyframes hello { 0%, 100% { rotate: 0deg; } 20% { rotate: -70deg; } 35% { rotate: -50deg; } 50% { rotate: -72deg; } 65% { rotate: -50deg; } 80% { rotate: -60deg; } }

/* ══ Chef TG 12703: the top row is ROBOT · BUBBLE · TILES — robot and bubble share two thirds, the two tiles
   stack in the last third, smaller and with smaller type. ══ */
.stage { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; padding: 10px; }
.hero { flex-direction: row; align-items: center; gap: 10px; }
.hero .bot-btn { order: 0; flex: none; width: 44%; max-width: 150px; }
.hero .bubble { order: 1; flex: 1 1 auto; min-width: 0; padding: 7px 9px 8px; }
.hero .bubble::after {
  left: -11px; top: 50%; bottom: auto; margin-top: -9px; width: 12px; height: 18px;
  clip-path: polygon(100% 0, 0 50%, 100% 100%); filter: drop-shadow(-2.5px 0 0 var(--edge));
}
.hero .bubble-text { font-size: 12.5px; -webkit-line-clamp: 4; min-height: calc(4 * 1.3em); }
.hero .bubble-kicker { font-size: 10px; }
.hero .bubble-cta { font-size: 10.5px; }
.tiles { gap: 8px; }
.tile { padding: 8px 9px 9px; border-radius: 12px; }
.tile-k { font-size: 10.5px; }
.tile-s { margin-top: 4px; }
.tile-val .delta { font-size: min(13px, 10cqi); padding: 1px 6px; }
.tile-clock .fuse { margin-top: 7px; height: 5px; }
.tile-clock .fuse-spark { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.tile-clock .clock-next { font-size: 10px; margin-top: 5px; }
@media (min-width: 560px) {
  .stage { padding: 12px; gap: 12px; }
  .hero .bubble-text { font-size: 14px; -webkit-line-clamp: 3; min-height: calc(3 * 1.3em); }
  .hero .bubble-kicker { font-size: 11px; }
  .tile-k { font-size: 12px; }
  .tile-clock .clock-next { font-size: 11px; }
}

/* ══ Chef TG 12706: robot, bubble and the tile stack are ONE height, and that height is as small as it can be. The
   row takes the height of its tallest part and every part stretches to it; the tiles lose their third line (the
   "next look" text moved beside Latest move) and the fuse becomes the countdown tile's bottom edge. ══ */
.stage { align-items: stretch; }
.hero { align-items: stretch; }
.hero .bot-btn { display: flex; align-items: center; justify-content: center; }
.hero .bubble {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k c" "t t";
  align-content: center; column-gap: 6px; row-gap: 2px; align-self: stretch;
}
.hero .bubble-kicker { grid-area: k; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .bubble-cta {
  grid-area: c; margin: 0; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  background: #1F5E8A; color: var(--bone); font-size: 12px; line-height: 1; font-weight: 900; text-decoration: none !important;
}
.hero .bubble-text { grid-area: t; -webkit-line-clamp: 4; min-height: 0; }
.tiles { grid-template-rows: 1fr 1fr; gap: 6px; }
.tile { padding: 6px 8px 7px; justify-content: center; }
.tile-val { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k s" "v v"; align-content: center; column-gap: 4px; }
.tile-val .tile-k { grid-area: k; }
.tile-val .tile-s { grid-area: s; margin: 0; }
.tile-val .tile-v { grid-area: v; margin-top: 3px; }
.tile-val .delta { font-size: min(11px, 9cqi); padding: 0 5px; box-shadow: 0 0 0 1.5px var(--edge); }
.tile-k { font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#score-usd { font-size: min(44px, 21cqi) !important; }
.tile-clock { position: relative; padding-bottom: 12px; }
.tile-clock .clock-num { margin-top: 3px; font-size: min(34px, 21cqi) !important; }
.tile-clock .fuse { position: absolute; left: 8px; right: 8px; bottom: 6px; margin: 0; height: 4px; }
.latest-title .clock-next { margin-left: 6px; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--text-3); font-weight: 600; }
@media (min-width: 560px) {
  .tile { padding: 8px 10px 9px; }
  .tile-k { font-size: 11.5px; }
  .tile-val .delta { font-size: min(13px, 9cqi); }
  .tile-clock { padding-bottom: 14px; }
}
/* phones: the % pill goes UNDER the value so the label is never squeezed to "W…" */
.tile-val { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "v" "s"; }
.tile-val .tile-s { margin-top: 3px; justify-self: start; }
.tile-val .tile-v { margin-top: 2px; }
.tiles { grid-template-rows: auto 1fr; }

/* ══ Chef TG 12709/12711: the run length sits under the robot; the countdown's label is the tick count; the fuse has
   a notch at every tick; the value tile says what the book is in, and an estimate is marked ≈ and amber. ══ */
.hero .bot-btn { flex-direction: column; gap: 2px; }
.bot-cap { display: block; font-size: 10.5px; font-weight: 800; color: var(--text-3); --mono: 1; white-space: nowrap; text-align: center; }
.fuse .notch { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--bone); border-radius: 1px; opacity: .85; pointer-events: none; }
.fuse .notch.is-past { opacity: .3; }
.tile-val .tile-s { display: flex; align-items: center; gap: 5px; min-width: 0; }
.score-sub { font-size: 10.5px; color: var(--text-2); --mono: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#score-usd.is-est { color: var(--marigold); }
@media (min-width: 560px) { .bot-cap { font-size: 12px; } .score-sub { font-size: 12px; } }
/* the Live pill doubles as the refresh button (Chef TG 12721) */
button.status { font: inherit; border: 0; cursor: pointer; }
.status-re { margin-left: 6px; font-weight: 900; opacity: .7; }
button.status:hover .status-re { opacity: 1; }
button.status:active { transform: translate(1px, 1px); }

/* ══ the bubble's kicker is a coloured verdict chip; the top panel's rim is green when up, red when down (Chef TG 12723);
   more air between the countdown digits and its fuse (Chef TG 12727) ══ */
.hero .bubble-kicker {
  justify-self: start; max-width: 100%; padding: 1px 7px; border-radius: 999px; font-weight: 800; letter-spacing: .01em;
  background: #D9D0BC; color: #2A3A34;
}
.bubble[data-tone="up"] .bubble-kicker { background: #2FA86C; color: #06150F; }
.bubble[data-tone="down"] .bubble-kicker, .bubble[data-tone="refused"] .bubble-kicker { background: #E0664A; color: #1A0703; }
.bubble[data-tone="thinking"] .bubble-kicker { background: #2F6F9E; color: #F1E9D8; }
.bubble[data-tone="caution"] .bubble-kicker { background: var(--marigold); color: #1A1204; }
.stage[data-result="up"] { box-shadow: 0 0 0 2px var(--edge), 0 0 0 4px rgba(142, 230, 176, .55), 0 0 22px rgba(142, 230, 176, .18), var(--drop); }
.stage[data-result="down"] { box-shadow: 0 0 0 2px var(--edge), 0 0 0 4px rgba(255, 139, 110, .55), 0 0 22px rgba(255, 139, 110, .16), var(--drop); }
.tile-clock { padding-bottom: 17px; }
.tile-clock .fuse { bottom: 7px; }
@media (min-width: 560px) { .tile-clock { padding-bottom: 20px; } .tile-clock .fuse { bottom: 8px; } }
.tile-clock { padding-bottom: 22px; }
.tile-clock .fuse { bottom: 8px; }
@media (min-width: 560px) { .tile-clock { padding-bottom: 25px; } .tile-clock .fuse { bottom: 9px; } }
@media (max-width: 389.98px) { .hero .bubble-kicker { font-size: 9.5px; padding: 1px 5px; letter-spacing: 0; } .hero .bubble { column-gap: 4px; } }

/* ══ Chef TG 12736: the prompt folds shut in the profile (a small down arrow), and the profile is tightened so it fits
   one phone screen ══ */
.prompt-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; }
.prompt-sum::-webkit-details-marker { display: none; }
.caret-d { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--sky); transition: transform 160ms var(--ease-out); }
.prompt-box[open] .caret-d { transform: rotate(180deg); }
.prof-head { gap: 12px; }
.prof-bot { width: 84px; }
.prof-name { font-size: 22px; }
.prof-list { margin-top: 10px; }
.prof-row { padding: 5px 0; grid-template-columns: 96px minmax(0, 1fr); }
.prof-row dt { font-size: 12px; }
.prof-row dd { font-size: 13px; }
.prompt-sum { justify-content: flex-start !important; padding: 0 !important; }

/* ══ Chef TG 12742/12744: past runs open in the SAME screen; a thin bar says you are looking back; the prompt can be copied ══ */
.dock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dock-b { font-size: 13.5px; padding: 9px 4px; }
.pastbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none;
  padding: 7px 12px; border-radius: 12px; background: var(--marigold); color: var(--bg); font-size: 13px; font-weight: 700;
  box-shadow: 0 0 0 2px var(--edge);
}
.pastbar b { font-weight: 900; white-space: nowrap; }
.runs-sub { margin: 0 0 10px; font-size: 13.5px; }
.runs-list { display: grid; gap: 6px; }
/* repeats of a model group under their best run (Chef TG 13057–13059) */
.rungroup { display: grid; gap: 4px; }
.rg-more { justify-self: start; margin-left: 12px; font: inherit; font-size: 12px; font-weight: 800; color: var(--text-2); background: var(--panel-2);
  border: 0; border-radius: 999px; padding: 3px 11px; box-shadow: 0 0 0 1.5px var(--edge); cursor: pointer; }
.rg-more:hover, .rg-more[aria-expanded="true"] { color: var(--bone); }
.rg-list { display: grid; gap: 4px; margin: 0 0 4px 12px; padding: 0 0 0 10px; list-style: none; border-left: 2px solid var(--edge); }
.rg-list[hidden] { display: none; }
.runrow {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--bone);
  background: var(--panel); box-shadow: 0 0 0 2px var(--edge);
}
.runrow:hover { background: var(--panel-2); }
.runrow.is-here { box-shadow: 0 0 0 2px var(--edge), 0 0 0 4px var(--sky); }
.rr-d { font-size: 12px; color: var(--text-3); --mono: 1; font-variant-numeric: tabular-nums; }
.rr-m { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; --casl: 1; }
.rr-l { font-size: 12px; color: var(--text-2); --mono: 1; }
.rr-p { font-size: 12.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; --mono: 1; font-variant-numeric: tabular-nums; background: var(--panel-3); }
.rr-p[data-sign="up"] { background: var(--mint); color: var(--bg); }
.rr-p[data-sign="down"] { background: var(--tomato); color: var(--bg); }
.rr-p[data-sign="live"] { background: var(--sky); color: var(--bg); }
.copy-btn {
  margin-left: auto; padding: 4px 11px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800;
  background: var(--bone); color: var(--bg); box-shadow: 0 0 0 2px var(--edge), 2px 2px 0 0 var(--edge); --mono: 1;
}
.prompt-box:not([open]) .copy-btn { display: none; }

/* ══ Chef TG 12749: the bubble is only as tall as its words (it no longer stretches to the row), and its pointer sits
   up level with the robot's mouth instead of halfway down ══ */
.hero { align-items: flex-start; }
.hero .bot-btn { align-self: center; }
.hero .bubble { align-self: flex-start; align-content: start; margin-top: 6px; }
.hero .bubble::after { top: 22px; margin-top: 0; }
@media (min-width: 560px) { .hero .bubble { margin-top: 14px; } .hero .bubble::after { top: 26px; } }
.hero .bubble { margin-top: 0; } .hero .bubble::after { top: 22px; margin-top: 0; }
.hero .bubble { flex: 0 1 auto; }   /* as wide as its words need, never wider than the space */

/* ══ Chef TG 12753: no spotlight, no hover lift, no "1 h run". Under the robot sits its CALL-SIGN on a little LCD plate,
   in a Casio-style 14-segment face (DSEG14, OFL) and emerald segments; hovering the robot or the plate slowly lights it
   up, and a tap on either opens the profile. ══ */
@font-face { font-family: "DSEG14"; src: url("fonts/dseg14-classic-italic.woff2") format("woff2"); font-display: block; }
.bot-btn:hover .bot, .bot-btn:focus-visible .bot { translate: none; }
.bot-btn .bot-shadow { fill: var(--edge) !important; opacity: .55 !important; animation: none !important; scale: 1; }
.bot-cap {
  position: relative; display: inline-block; margin-top: 3px; padding: 4px 7px 3px; border-radius: 5px;
  font-family: "DSEG14", ui-monospace, monospace; font-style: italic; font-weight: 400; font-size: 11px; letter-spacing: .08em;
  font-variation-settings: normal; line-height: 1; white-space: nowrap;
  color: #2FA877; background: #06120D;
  box-shadow: inset 0 0 0 1.5px #0F2A1F, inset 0 2px 5px rgba(0, 0, 0, .7), 0 0 0 1.5px var(--edge);
  transition: color 900ms ease, text-shadow 900ms ease, box-shadow 900ms ease;
}
.bot-cap::before {            /* the unlit segments behind the digits, like a real LCD */
  content: attr(data-ghost); position: absolute; inset: 4px 7px 3px; color: #2FA877; opacity: .09; pointer-events: none;
}
.bot-btn:hover .bot-cap, .bot-btn:focus-visible .bot-cap {
  color: #5FF0B0; text-shadow: 0 0 4px rgba(80, 230, 160, .9), 0 0 12px rgba(80, 230, 160, .45);
  box-shadow: inset 0 0 0 1.5px #1B5A40, inset 0 2px 5px rgba(0, 0, 0, .7), 0 0 0 1.5px var(--edge), 0 0 14px rgba(80, 230, 160, .25);
}
@media (min-width: 560px) { .bot-cap { font-size: 13px; padding: 5px 9px 4px; } .bot-cap::before { inset: 5px 9px 4px; } }

/* ══ call-sign v2 (Chef TG 12756): ORIGIN-LAB-MODEL, longer, so the plate sizes its digits to the robot's column —
   one line when there is room, a two-line LCD when there is not. DSEG14 advances ~0.9 em per character. ══ */
.hero .bot-btn { container-type: inline-size; }
.bot-cap { padding: 4px 6px 3px; letter-spacing: .08em; font-size: min(13px, calc((100cqi - 16px) / (var(--n, 10) * 0.9))); }
.bot-cap::before { content: none; }
.cs-line { position: relative; display: inline; }
.cs-line::before { content: attr(data-ghost); position: absolute; inset: 0; opacity: .09; pointer-events: none; }
@container (max-width: 140px) {
  .bot-cap { font-size: min(12px, calc((100cqi - 14px) / (var(--n2, 7) * 0.9))); line-height: 1.25; text-align: left; }
  .cs-line { display: block; }
}
/* longer call-signs (…-FH): a slightly wider robot column on phones and tighter LCD spacing */
.hero .bot-btn { width: 48%; }
.bot-cap { letter-spacing: .04em; }
.cs-line::before { letter-spacing: .04em; }
@container (max-width: 140px) { .bot-cap { font-size: min(12px, calc((100cqi - 12px) / (var(--n2, 7) * 0.86))); } }
@container (max-width: 140px) { .bot-cap { font-size: min(12px, calc((100cqi - 14px) / (var(--n2, 7) * 0.96))); } }
@media (min-width: 560px) { .hero .bot-btn { max-width: 178px; } }
/* Past runs show each run's call-sign on a mini LCD plate (Chef TG 12777) */
.rr-cs {
  justify-self: start; font-family: "DSEG14", ui-monospace, monospace; font-style: italic; font-weight: 400;
  font-size: 11px; letter-spacing: .04em; color: #2FA877; background: #06120D; padding: 4px 6px 3px; border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px #0F2A1F; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap;
}
.runrow:hover .rr-cs { color: #5FF0B0; text-shadow: 0 0 4px rgba(80, 230, 160, .8); transition: color 600ms ease, text-shadow 600ms ease; }
/* rows: call-sign on top, date beneath it, so a 12-character code never gets clipped on a small phone */
.runrow { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "cs l p" "d l p"; row-gap: 4px; }
.runrow .rr-cs { grid-area: cs; }
.runrow .rr-d { grid-area: d; font-size: 11px; }
.runrow .rr-l { grid-area: l; }
.runrow .rr-p { grid-area: p; }
/* code on top; under it the model in plain words, then the date (Chef TG 12781: keep the descriptions) */
.runrow { grid-template-areas: "cs l p" "m l p" "d l p"; row-gap: 3px; }
.runrow .rr-m { grid-area: m; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ══ Chef TG 12795: FOLDER TABS. The selected tab is the same colour as the panel and has no bottom edge, so it reads
   as part of it; the others sit slightly lower and darker. Only the panel changes when you switch. ══ */
.win-view > .tabbox { flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column; }
.tabs { display: flex; gap: 4px; padding: 0 6px; position: relative; z-index: 2; }
.tab {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 13.5px; font-weight: 800; --casl: 1; cursor: pointer;
  color: var(--text-2); background: var(--panel-3); border: 0; border-radius: 12px 12px 0 0;
  padding: 7px 6px 6px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 2px 0 0 var(--edge), inset 2px 0 0 0 var(--edge), inset -2px 0 0 0 var(--edge);
}
.tab:hover { color: var(--bone); }
.tab[aria-selected="true"] {
  color: var(--bone); background: var(--panel); margin-top: 0; padding-top: 10px; margin-bottom: -2px;
  box-shadow: inset 0 2px 0 0 var(--edge), inset 2px 0 0 0 var(--edge), inset -2px 0 0 0 var(--edge);
}
.tabpanel {
  flex: 1 1 auto; min-height: 0; position: relative; background: var(--panel); border-radius: var(--r);
  box-shadow: 0 0 0 2px var(--edge), 4px 4px 0 0 var(--edge); padding: 12px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.tabpanel[hidden] { display: none !important; }
.panel-chart { display: flex; flex-direction: column; padding: 8px 10px 6px; }
.panel-chart .chart-wrap { flex: 1; position: relative; min-height: 90px; }
.panel-chart .chart { position: absolute; inset: 0; width: 100%; height: 100% !important; }
.tabpanel .score { background: none; box-shadow: none; padding: 0; }
.tabpanel .legend { margin: 0 0 8px; }
.tabpanel .sheet-h { margin: 16px 0 6px; }
.tabpanel .hold-list { margin-top: 8px; }
.faq details { border-top: 1.5px solid var(--line); padding: 10px 0; }
.faq details:first-child { border-top: 0; padding-top: 0; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 15px; --casl: 1; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: " ▾"; color: var(--sky); font-size: 12px; }
.faq details[open] summary::after { content: " ▴"; }
.faq p { margin-top: 6px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
a.dock-b { display: grid; place-items: center; text-decoration: none; }
.panel-log .tape { display: block; } .panel-log .tape-list { margin-top: 0; }
/* Trading only / After compute switch (Chef TG 12803) */
.seg { display: inline-flex; margin: 0 0 8px; padding: 3px; border-radius: 999px; background: var(--panel-3); box-shadow: 0 0 0 2px var(--edge); }
.seg-b { font: inherit; font-size: 13px; font-weight: 800; border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer; background: none; color: var(--text-2); --casl: 1; }
.seg-b[aria-checked="true"] { background: var(--bone); color: var(--bg); }
.seg-note { font-size: 12.5px; color: var(--text-3); margin: 0 0 8px; }
.runrow { grid-template-areas: "cs l p" "m l p" "c l p" "d l p"; }
.runrow .rr-c { grid-area: c; font-size: 11.5px; color: var(--marigold); --mono: 1; }

/* ══ SLIM (Chef TG 12805): every pixel of height goes to content. Thinner bar, tabs, buttons and gaps, tighter panels
   and sheets — same look, less air. ══ */
.cab { padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)); }
.win-bar { padding: 6px 10px 5px; }
.win-bar .mark-word { font-size: 19px; }
button.status { padding: 4px 10px; font-size: 13px; }
.win-view { padding: 8px 8px 8px; gap: 8px; }
.pastbar { padding: 4px 10px; font-size: 12px; }
.stage { padding: 7px 8px; gap: 8px 8px; }
.tile { padding: 5px 7px 6px; }
.tile-clock { padding-bottom: 15px; }
.tile-clock .fuse { bottom: 6px; }
.tabs { padding: 0 4px; gap: 3px; }
.tab { font-size: 12.5px; padding: 4px 4px 3px; margin-top: 3px; border-radius: 9px 9px 0 0; }
.tab[aria-selected="true"] { padding-top: 6px; }
.tabpanel { padding: 8px 9px; }
.panel-chart { padding: 4px 6px 2px; }
.dock { gap: 5px; }
.dock-b { padding: 5px 4px; font-size: 12.5px; border-radius: 10px; }
.latest { gap: 4px; }
.latest-title { font-size: 11px; }
.more-sm { padding: 3px 11px; font-size: 12.5px; }
.logrow { padding: 5px 10px; font-size: 13px; }
/* inside panels and sheets */
.panel-log .tick { padding: 9px 10px; }
.panel-log .tick-body .orders { margin-top: 8px; }
.hold-list { gap: 8px; }
.hold { padding: 9px 10px; }
.sheet-bar { padding: 5px 8px 5px 12px; }
.sheet-t { font-size: 16px; }
.sheet-x { width: 30px; height: 30px; font-size: 20px; }
.sheet-view { padding: 10px 10px 20px; }
.runrow { padding: 7px 10px; row-gap: 1px; }
.prof-list { margin-top: 6px; }
.prof-row { padding: 4px 0; }
.runs-sub { margin-bottom: 6px; }
@media (min-width: 560px) {
  .cab { padding: 14px; }
  .win-view { padding: 10px 12px 10px; gap: 10px; }
  .stage { padding: 9px 10px; }
  .tab { font-size: 13.5px; padding: 5px 6px 4px; }
  .tab[aria-selected="true"] { padding-top: 7px; }
  .dock-b { padding: 6px 4px; font-size: 13.5px; }
}
.panel-log .reasoning { font-size: 14px; line-height: 1.42; } .panel-log .tick-head { margin-bottom: 4px; } .panel-log .order { padding: 8px 10px; }
/* the plan it wrote before the window opened (Chef TG 12846) */
.planbox { margin: 0 0 8px; border-radius: 12px; background: var(--panel-3); box-shadow: 0 0 0 1.5px var(--edge); padding: 7px 10px; }
.planbox summary { cursor: pointer; font-weight: 800; font-size: 13px; color: var(--mint); --casl: 1; list-style: none; }
.planbox summary::-webkit-details-marker { display: none; }
.planbox summary::after { content: " ▾"; font-size: 11px; }
.planbox[open] summary::after { content: " ▴"; }
.planbox.is-none summary { color: var(--text-3); }
.plan-text { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); white-space: pre-wrap; }

/* ══ Chef TG 12856: the call-sign is ONE line that shrinks to fit, never wraps. It gets its own row under the robot
   and may run on under the bubble, so a 13-character code stays readable on a small phone. ══ */
.hero { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "bot bubble" "cap cap";
  align-items: start; column-gap: 10px; row-gap: 4px; container-type: inline-size; }
.hero .bot-btn { grid-area: bot; width: auto; max-width: none; }
.hero .bot-btn .bot { width: min(96px, 30cqi); }
.hero .bubble { grid-area: bubble; }
.cap-btn { grid-area: cap; justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; max-width: 100%; }
.bot-cap { font-size: min(13px, calc((100cqi - 16px) / (var(--n, 12) * 0.9))); white-space: nowrap; }
.cs-line { display: inline !important; }
.cap-btn:hover .bot-cap, .cap-btn:focus-visible .bot-cap, .bot-btn:hover ~ .cap-btn .bot-cap {
  color: #5FF0B0; text-shadow: 0 0 4px rgba(80, 230, 160, .9), 0 0 12px rgba(80, 230, 160, .45);
  box-shadow: inset 0 0 0 1.5px #1B5A40, inset 0 2px 5px rgba(0, 0, 0, .7), 0 0 0 1.5px var(--edge), 0 0 14px rgba(80, 230, 160, .25);
}
@media (min-width: 560px) { .hero .bot-btn .bot { width: min(150px, 34cqi); } }
.hero .bot-btn { container-type: normal; } .hero .bot-btn .bot { width: min(96px, 30cqi); }
.hero .bot-btn .bot { width: min(100px, 42cqi); } @media (min-width: 560px) { .hero .bot-btn .bot { width: min(150px, 36cqi); } }

/* ══ Chef TG 12859: dock = Entrance · Past runs · Docs · (a 4th to come); everything else lives behind Docs ══ */
.dock-empty { visibility: hidden; }
.doclist { list-style: none; display: grid; gap: 6px; }
.doclist button, .doclist a {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; text-decoration: none;
  font: inherit; font-size: 15px; font-weight: 800; --casl: 1; color: var(--bone); cursor: pointer;
  padding: 9px 12px; border: 0; border-radius: 12px; background: var(--panel); box-shadow: 0 0 0 2px var(--edge);
}
.doclist button:hover, .doclist a:hover { background: var(--panel-2); }
.doclist span { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.legal p { color: var(--text-2); font-size: 14.5px; line-height: 1.5; margin-bottom: 10px; }
/* Past runs sort menu (Chef TG 12865) */
.sortbar[hidden] { display: none; }
.sortbar { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.sortbar select { font: inherit; font-weight: 800; color: var(--bg); background: var(--bone); border: 0; border-radius: 999px; padding: 5px 12px; box-shadow: 0 0 0 2px var(--edge); cursor: pointer; }
/* share card sheet (Chef TG 12868) */
.share-img { display: block; width: 100%; border-radius: 12px; box-shadow: 0 0 0 2px var(--edge); background: var(--panel); aspect-ratio: 1200 / 630; }
.share-actions { display: flex; gap: 8px; margin: 10px 0 6px; }
.share-actions .more { margin: 0; text-decoration: none; }
.more-ghost { background: var(--panel-3) !important; color: var(--bone) !important; }

/* ══ RUN PILLS (Chef TG 12875/12877): up to 4 LEDs + call-signs. On phones they get their own slim row under the
   bar; on wider screens they sit in the bar. Grey body = paper money. ══ */
.win-bar { flex-wrap: wrap; row-gap: 5px; }
.pills { order: 3; flex-basis: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }   /* as many columns as pills: 5 live runs stay on one row (TG 13327) */
.pills:empty { display: none; }
.rpill {
  display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 6px; border-radius: 999px; text-decoration: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--text-2); --mono: 1; white-space: nowrap; overflow: hidden;
  background: #26302d; box-shadow: 0 0 0 1.5px var(--edge);
}
.rpill[data-money="real"] { background: #1c4a33; }
.rpill.is-here { box-shadow: 0 0 0 1.5px var(--edge), 0 0 0 3px var(--bone); color: var(--bone); }
a.rpill:hover { color: var(--bone); }
.led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4a4f4d; box-shadow: inset 0 -1px 1px rgba(0,0,0,.5); }
.rpill[data-led="live"] .led { background: #ffffff; box-shadow: 0 0 5px 1px rgba(255,255,255,.85), 0 0 10px rgba(255,255,255,.45); }
.rpill[data-led="prep"] .led { background: #6db3ff; box-shadow: 0 0 5px 1px rgba(109,179,255,.9), 0 0 10px rgba(109,179,255,.5); }
.rpill[data-led="up"] .led { background: #2d7a4f; box-shadow: inset 0 -1px 1px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.2); }
.rpill[data-led="down"] .led { background: #8c3322; box-shadow: inset 0 -1px 1px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.18); }
@media (prefers-reduced-motion: no-preference) {
  .rpill[data-led="live"] .led, .rpill[data-led="prep"] .led { animation: ledpulse 2.4s ease-in-out infinite; }
}
@keyframes ledpulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
button.status { padding: 4px 9px; }
@media (min-width: 700px) {
  .pills { order: 2; flex: 1 1 auto; flex-basis: auto; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: end; margin-right: 6px; }
  .rpill { font-size: 11.5px; padding: 4px 9px; }
}
@media (max-width: 699.98px) { .pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 5px; } .rpill { font-size: 11px; padding: 2px 7px; } }
/* pills: HARNESS-MODEL on phones, one row of 4; the full code with effort on wide screens (Chef TG 12886) */
.rpill .c-full { display: none; }
@media (max-width: 699.98px) {
  .pills { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .rpill { font-size: 10px; padding: 2px 5px; gap: 4px; letter-spacing: 0; }
  .led { width: 7px; height: 7px; }
}
@media (min-width: 700px) { .rpill .c-short { display: none; } .rpill .c-full { display: inline; } }
/* phones: MODEL only, in the bar between the wordmark and ↻ (Chef TG 12891); ".wick.pics" gives way while pills show */
@media (max-width: 699.98px) {
  .win-bar { flex-wrap: nowrap; }
  .win-bar:has(.pills:not(:empty)) .mark-host { display: none; }
  /* a pill that does not fit drops WHOLE to a hidden second row — never cut in half; the newest stay (Chef TG 12891) */
  .pills { order: 2; flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start;
           gap: 3px; height: 20px; overflow: hidden; margin: 0 5px 0 6px; }
  .pills:empty { display: none; }
  .rpill { flex: none; height: 20px; padding: 0 5px 0 4px; }
  .pills { gap: 2px; margin: 0 3px 0 4px; }          /* room for a 5th pill (Chef TG 13329) */
  /* the row clips a 2nd row of pills, so it needs room for the pill's own ring above and below (Chef TG 13336) */
  .pills { box-sizing: content-box; height: 20px; padding: 3px 3px; overflow: hidden; }
  .pills .rpill { padding: 0 4px 0 3px; }
  .win-bar .status { order: 3; flex: none; padding: 4px 7px; }
}

/* the UP/DOWN BAR behind each pill's letters (Chef TG 13372): centre line = the start; the fill grows right in green
   when up, left in red when down, ending in a second line. Scale is shared by the row (see paintPillBars). */
.rpill { position: relative; isolation: isolate; }
.rpill .pbar { position: absolute; inset: 0; z-index: -1; pointer-events: none; --w: 0%;
  background: linear-gradient(to right, transparent calc(50% - .5px), rgba(236,232,220,.28) calc(50% - .5px), rgba(236,232,220,.28) calc(50% + .5px), transparent calc(50% + .5px)); }
.rpill .pbar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; left: 50%; }
.rpill[data-dir="up"] .pbar::after, .rpill[data-dir="down"] .pbar::after { width: max(3px, var(--w)); }
.rpill[data-dir="up"] .pbar::after { background: rgba(45,160,95,.42); box-shadow: inset -1px 0 0 rgba(120,230,160,.9); }
.rpill[data-dir="down"] .pbar::after { left: auto; right: 50%; background: rgba(200,70,50,.42); box-shadow: inset 1px 0 0 rgba(255,140,120,.9); }
.rpill[data-led="prep"] .pbar { display: none; }

/* ══ AI: / SCRIPTS: rows (Chef TG 13583/13636/13639, 2026-09-25). Top row = the AI runs (AI in the loop), the second,
   full-width row = scripted bots (rules written before the run; no AI while it runs). ══ */
.pills::before { content: "AI:"; align-self: center; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-2); margin-right: 2px; }
.pills2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 10px 5px; border-bottom: 1px solid var(--edge); }
.pills2:empty { display: none; }
.pills2::before { content: "SCRIPTS:"; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-2); margin-right: 4px; }
.pills2 .rpill { flex: none; }
@media (max-width: 699.98px) { .pills2 .rpill { font-size: 10px; padding: 2px 6px; } .pills2 { padding: 3px 8px 4px; } }

/* Waiting to buy (Chef TG 13809): a script's standing dip triggers — dashed, quieter, never mistaken for a bag */
.hold--waithead { background: none; border: 0; padding-bottom: 0; }
.hold--waithead > * { grid-column: 1 / -1; text-align: left; }
.hold--waithead .hold-sym { font-size: 15px; }
.hold--wait { border-style: dashed; background: none; opacity: .92; }
.hold--wait .hold-val { font-size: 15px; color: var(--text-2); }