/* Staketable — a garden table drawn in wire on a night field. One accent (lime, the drawn chair in the logo), thin lines, the ring is the tool.
   Chassis: dark ground · the CA on a stake planted at the left edge · a paragraph first (the last draw, told). */
:root {
  --night: #0b1310;
  --night-2: #101b17;
  --night-3: #15231e;
  --wire: #34493f;
  --wire-hi: #557064;
  --leaf: #d6e2da;
  --moss: #8a9d92;
  --lime: #9ef03c;
  --lime-dim: rgba(158, 240, 60, .14);
  --lime-glow: rgba(158, 240, 60, .5);
  --face: 'Major Mono Display', 'Azeret Mono', ui-monospace, monospace;
  --read: 'Literata', Georgia, serif;
  --code: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --post-w: 44px;
}
* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--leaf); font-family: var(--read); font-size: 15px; line-height: 1.55;
  padding: 0 14px 40px calc(var(--post-w) + 12px);
  background-image:
    linear-gradient(rgba(85, 112, 100, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 112, 100, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "plaque" "story" "rig" "printout" "howcard" "groundline";
  overflow-x: hidden;
}
a { color: var(--lime); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--code); }
button { font: inherit; cursor: pointer; }

/* ---------- the stake: CA planted at the left edge ---------- */
.stakepost {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 30;
  width: var(--post-w); max-height: calc(100vh - 260px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 0 14px; background: var(--night-2);
  border: 1px solid var(--wire-hi); border-left: 0; border-radius: 0 12px 12px 0;
  box-shadow: 6px 0 24px rgba(0, 0, 0, .45);
}
.stakepost::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 14px; background: var(--wire-hi); }
.stakepost-tick, .stakepost-addr, .stakepost-gm { writing-mode: vertical-rl; }
.stakepost-tick { font-family: var(--code); font-size: 9.5px; letter-spacing: .08em; color: var(--moss); text-transform: uppercase; }
.stakepost-addr {
  font-size: 11px; line-height: 1; letter-spacing: .02em; color: var(--leaf); user-select: all; -webkit-user-select: all;
  word-break: break-all;
}
.stakepost-addr.is-waiting { color: var(--moss); font-style: italic; user-select: none; -webkit-user-select: none; }
.stakepost-copy {
  writing-mode: vertical-rl; padding: 10px 4px; border-radius: 8px; border: 1px solid var(--lime); background: var(--lime);
  color: var(--night); font-family: var(--code); font-size: 11px; font-weight: 600; letter-spacing: .06em;
}
.stakepost-copy[data-done="1"] { background: transparent; color: var(--lime); }
.stakepost-gm { font-family: var(--code); font-size: 9.5px; color: var(--moss); letter-spacing: .06em; }

/* ---------- plaque (name + wallet), short on purpose ---------- */
.plaque {
  grid-area: plaque; display: flex; align-items: center; gap: 9px; height: 46px; margin: 8px 0 4px;
  border-bottom: 1px dashed var(--wire);
}
.plaque-mark { border-radius: 50%; border: 1px solid var(--wire-hi); }
.plaque-word { font-family: var(--face); font-size: 17px; letter-spacing: .02em; }
.plaque-no { white-space: nowrap; font-family: var(--code); font-size: 10.5px; color: var(--moss); border: 1px solid var(--wire); border-radius: 99px; padding: 2px 8px; }
.plaque-wallet {
  margin-left: auto; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--wire-hi); background: transparent;
  color: var(--leaf); font-family: var(--code); font-size: 11px;
}
.plaque-wallet[data-on="1"] { border-color: var(--lime); color: var(--lime); }

/* ---------- the story: the last draw, told ---------- */
.story {
  grid-area: story; margin: 14px 0 6px; font-size: 18px; line-height: 1.5; font-weight: 400; color: var(--leaf);
  max-width: 40em; text-wrap: pretty;
}
.story b { font-weight: 600; color: var(--lime); }
.story em { font-style: normal; font-family: var(--code); font-size: .82em; color: var(--leaf); background: var(--night-3); padding: 1px 5px; border-radius: 4px; }
.story .story-now { color: var(--moss); }

/* ---------- the rig: the ring of ten seats ---------- */
.rig { grid-area: rig; margin: 6px 0 20px; }
.rig-frame { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 1 / 1; }
.ring { width: 100%; height: 100%; display: block; overflow: visible; }
.mesh-line { stroke: var(--wire); stroke-width: 1; fill: none; }
.mesh-line.is-dash { stroke-dasharray: 3 5; }
.mesh-rim { stroke: var(--wire-hi); stroke-width: 1.4; fill: rgba(16, 27, 23, .7); }
.seat-o { fill: var(--night); stroke: var(--wire-hi); stroke-width: 1.2; stroke-dasharray: 4 4; transition: fill .4s, stroke .4s; }
.seat-n { font-family: var(--face); font-size: 17px; fill: var(--moss); dominant-baseline: middle; }
.seat-w { font-family: var(--code); font-size: 13px; fill: var(--moss); dominant-baseline: middle; }
.seat.is-sat .seat-o { fill: var(--night-3); stroke: var(--leaf); stroke-dasharray: none; }
.seat.is-sat .seat-n { fill: var(--leaf); }
.seat.is-sat .seat-w { fill: var(--leaf); }
.seat.is-mine .seat-o { stroke: var(--lime); }
.seat.is-mine .seat-w { fill: var(--lime); }
.seat.is-next { cursor: pointer; }
.seat.is-next .seat-o { stroke: var(--lime); stroke-dasharray: none; stroke-width: 2; animation: beckon 1.6s ease-in-out infinite; }
.seat.is-next .seat-n, .seat.is-next .seat-w { fill: var(--lime); }
.seat.is-drawn .seat-o { fill: var(--lime); stroke: var(--lime); stroke-dasharray: none; filter: drop-shadow(0 0 14px var(--lime-glow)); }
.seat.is-drawn .seat-n { fill: var(--night); }
.seat.is-drawn .seat-w { fill: var(--lime); font-weight: 600; }
.seat.is-dim { opacity: .45; }
.seat.is-fresh .seat-o { animation: settle .9s ease-out; }
@keyframes beckon { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }
@keyframes settle { 0% { fill: var(--lime); } 100% { fill: var(--night-3); } }
.ray-line { stroke: var(--lime); stroke-width: 1.6; stroke-dasharray: 2 6; }
.ray-sweep { transform-origin: 0 0; animation: sweep 2.4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.core-pot { font-family: var(--face); font-size: 40px; fill: var(--leaf); }
.core-of { font-family: var(--code); font-size: 11px; fill: var(--moss); letter-spacing: .04em; }
.core-id { font-family: var(--code); font-size: 10.5px; fill: var(--lime); letter-spacing: .1em; text-transform: uppercase; }
.rig-live { margin: 10px 0 2px; text-align: center; font-size: 16.5px; font-weight: 600; }
.rig-live b { color: var(--lime); }
.rig-clock, .rig-seat, .rig-mine { margin: 2px 0; text-align: center; font-family: var(--code); font-size: 11.5px; color: var(--moss); }
.rig-seat { min-height: 1.6em; word-break: break-all; }
.rig-acts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin: 12px auto 6px; max-width: 380px; }
.sow {
  padding: 15px 18px; border-radius: 14px; border: 0; background: var(--lime); color: var(--night);
  font-family: var(--read); font-size: 16.5px; font-weight: 600;
}
.sow:disabled { background: var(--night-3); color: var(--moss); border: 1px dashed var(--wire-hi); cursor: default; }
.reap { padding: 12px 16px; border-radius: 14px; border: 1px solid var(--lime); background: transparent; color: var(--lime); font-family: var(--code); font-size: 13px; }

/* ---------- the tape ---------- */
.printout { grid-area: printout; margin: 8px 0 18px; border-top: 1px solid var(--wire); padding-top: 10px; min-width: 0; }
.printout-head { display: flex; justify-content: space-between; font-family: var(--code); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); margin: 4px 0 8px; }
.printout-roll { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.printout-roll li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 42px; gap: 8px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px dotted var(--wire); font-size: 13.5px;
}
.printout-roll li code { font-size: 11.5px; }
.roll-k { font-family: var(--code); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--moss); }
.printout-roll li[data-k="drawn"] .roll-k { color: var(--lime); }
.printout-roll li[data-k="drawn"] { color: var(--leaf); }
.roll-t { font-family: var(--code); font-size: 10.5px; color: var(--moss); text-align: right; }
.printout-roll li.is-new { animation: print .7s steps(7) both; }
@keyframes print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.printout-roll li.is-eg { opacity: .55; }
.printout-roll li.is-say { display: block; color: var(--moss); font-style: italic; border-bottom: 0; }
.printout-past { margin-top: 16px; }
.pastlist { list-style: none; margin: 0; padding: 0; }
.pastlist li { padding: 8px 0; border-bottom: 1px dotted var(--wire); font-size: 13.5px; }
.pastlist li.is-say { color: var(--moss); font-style: italic; border-bottom: 0; }
.past-top { display: flex; justify-content: space-between; gap: 8px; }
.past-top b { color: var(--lime); font-weight: 600; }
.past-dots { display: flex; gap: 4px; margin: 5px 0 3px; }
.past-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--wire-hi); background: var(--night-3); }
.past-dots i.is-w { background: var(--lime); border-color: var(--lime); }
.past-dots i.is-e { background: transparent; border-style: dashed; }
.past-sub { font-family: var(--code); font-size: 10.5px; color: var(--moss); word-break: break-all; }

/* ---------- rules ---------- */
.howcard { grid-area: howcard; margin: 8px 0 18px; border: 1px solid var(--wire); border-radius: 14px; padding: 14px 16px; background: rgba(16, 27, 23, .75); }
.howcard-h { font-family: var(--face); font-size: 18px; font-weight: 400; margin: 0 0 8px; color: var(--lime); }
.howcard-list { margin: 0; }
.howcard-list dt { font-family: var(--code); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); margin-top: 10px; }
.howcard-list dd { margin: 2px 0 0; font-size: 14.5px; }
.howcard-ex { border-left: 2px solid var(--lime); padding-left: 10px; }
.howcard-ex b { color: var(--lime); font-weight: 600; }
.wallet-look { margin-top: 14px; border-top: 1px dashed var(--wire); padding-top: 8px; font-size: 13px; word-break: break-all; }
.wallet-look h3 { font-family: var(--face); font-weight: 400; font-size: 15px; margin: 0 0 4px; }

/* ---------- footer ---------- */
.groundline { grid-area: groundline; border-top: 1px solid var(--wire); padding-top: 12px; font-size: 12.5px; color: var(--moss); }
.groundline-row { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 3px 0; }
.groundline-row code { color: var(--leaf); word-break: break-all; font-size: 11.5px; }
.groundline-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 6px; font-family: var(--code); font-size: 11.5px; }
.groundline-links .is-off { display: none; }
.groundline-note { margin: 6px 0 0; }

.notes { position: fixed; right: 12px; bottom: 14px; z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.note { background: var(--night-3); border: 1px solid var(--lime); color: var(--leaf); padding: 9px 13px; border-radius: 10px; font-size: 13px; max-width: 280px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }

/* ---------- 720–1000: one column, wider measure, bigger ring ---------- */
@media (min-width: 640px) {
  :root { --post-w: 52px; }
  body { padding: 0 32px 48px calc(var(--post-w) + 28px); }
  .stakepost-addr { font-size: 12.5px; }
  .story { font-size: 21px; }
  .rig-frame { max-width: 520px; }
  .core-pot { font-size: 44px; }
  .rig-live { font-size: 18.5px; }
}

/* ---------- ≥1000: recompose — the table and its action left, the tape and the rules right ---------- */
@media (min-width: 1000px) {
  :root { --post-w: 58px; }
  body {
    max-width: calc(1180px + var(--post-w) + 40px); margin: 0 auto;
    padding: 0 40px 56px calc(var(--post-w) + 48px);
    grid-template-columns: minmax(0, 1fr) 380px; column-gap: 48px;
    grid-template-areas: "plaque plaque" "story printout" "rig printout" "rig howcard" "groundline groundline";
    align-items: start;
  }
  .stakepost-addr { font-size: 13.5px; }
  .stakepost-copy { font-size: 12px; padding: 12px 5px; }
  .plaque { height: 56px; margin-top: 14px; }
  .plaque-word { font-size: 21px; }
  .story { font-size: 24px; line-height: 1.45; margin-top: 26px; }
  .rig-frame { max-width: 600px; }
  .printout { margin-top: 26px; border-top: 0; padding-top: 0; }
  .printout-roll { max-height: 420px; }
  .groundline { margin-top: 20px; }
}