:root {
  --night: #131A17; --slab: #1B2521; --slab2: #22302A; --line: #2E3D36; --chalk: #EDE6D6; --dim: #98A59E; --sink: #E4572E;
  --baize: #1E6B52; --cushion: #0D3527; --cream: #FBF7EE; --mint: #3DDBA6; --ink: #1D2420;
  --disp: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --text: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto; background: var(--night); color: var(--chalk); font: 400 15px/1.5 var(--text);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 14px 120px; max-width: 720px;
}
code { font-family: var(--mono); }
a { color: inherit; }

/* the name strip: small, not a bar */
.marquee { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--dim); min-height: 30px; }
.marquee img { border-radius: 50%; }
.marquee b { font: 400 19px/1 var(--disp); color: var(--chalk); letter-spacing: .01em; }
.marquee-no { margin-left: auto; font: 500 11.5px/1 var(--mono); }

/* headline, then the live sentence */
.callout { margin: 2px 0 0; font: 400 44px/.98 var(--disp); letter-spacing: .005em; color: var(--chalk); }
.nowline { margin: 0; font-size: 15px; line-height: 1.5; color: #D8D2C3; }
.nowline code { background: var(--slab2); color: var(--chalk); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.nowline b { color: var(--sink); }

/* the table: the map */
.baize { background: var(--slab); border-radius: 22px; padding: 10px 10px 12px; }
.baize-hd { display: flex; justify-content: space-between; gap: 8px; font: 600 12px/1.2 var(--text); padding: 2px 4px 8px; color: var(--dim); }
.baize-clock { font: 500 12px/1.2 var(--mono); color: var(--sink); text-align: right; }
.baize-felt svg { display: block; width: 100%; height: auto; }
.baize-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--dim); padding: 8px 4px 0; }
.baize-key span { display: inline-flex; align-items: center; gap: 6px; }
.kdot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.kdot-next { border: 2px solid var(--sink); }
.kdot-ball { background: var(--cream); }
.kline { width: 18px; border-top: 2px dashed var(--sink); display: inline-block; }
.pocketrow { margin-top: 10px; padding: 8px 4px 0; border-top: 1px solid var(--line); }
.pocketrow[hidden] { display: none; }
.pocketrow-t { font: 600 11px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pocketrow ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pocketrow li { font: 500 11.5px/1 var(--mono); background: var(--slab2); border-radius: 999px; padding: 6px 9px; color: var(--dim); }

/* svg pieces */
.f-rail { fill: var(--cushion); }
.f-cloth { fill: var(--baize); }
.f-spot { fill: none; stroke: #3A8F70; stroke-width: 2; stroke-dasharray: 5 6; }
.f-hole { fill: #06150F; }
.f-ball { fill: var(--cream); stroke: var(--ink); stroke-width: 2.5; }
.f-ball.is-me { fill: var(--mint); }
.f-ring { fill: none; stroke: var(--sink); stroke-width: 4; }
.f-amt { font: 400 26px var(--disp); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.f-who { font: 500 17px var(--mono); fill: #D7EDE4; text-anchor: middle; }
.f-gain { font: 700 18px var(--text); fill: #FFD9CB; text-anchor: middle; }
.f-tag { font: 400 18px var(--disp); fill: var(--cream); text-anchor: middle; dominant-baseline: central; letter-spacing: .06em; }
.f-tagbox { fill: var(--sink); }
.f-pay { stroke: var(--sink); stroke-width: 2.5; stroke-dasharray: 6 6; fill: none; }
.f-pot { font: 400 22px var(--disp); fill: var(--cream); }
.f-potn { font: 400 34px var(--disp); fill: #FFE7DD; }
.f-first { fill: rgba(228, 87, 46, .2); stroke: var(--sink); stroke-width: 3; stroke-dasharray: 7 5; animation: firstpulse 1.6s ease-in-out infinite; }
.f-firsttx { font: 400 21px var(--disp); fill: var(--cream); text-anchor: middle; }
.f-new { animation: dropin .7s cubic-bezier(.2, 1.4, .4, 1); transform-box: fill-box; transform-origin: center; }
@keyframes firstpulse { 50% { stroke-opacity: .35; } }
@keyframes dropin { from { transform: scale(.2); opacity: 0; } }

/* the bench: rack-in form, scorebook, rules */
.bench { display: grid; gap: 12px; }
.chalkup { background: var(--cream); color: var(--ink); border-radius: 20px; padding: 14px 14px 12px; }
.chalkup-row { display: flex; align-items: flex-end; gap: 8px; }
.chalkup-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.chalkup-lbl { font: 600 11px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #5D665F; }
.chalkup-in { width: 100%; font: 400 24px/1 var(--disp); color: var(--ink); background: #EFE9DC; border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; outline: none; }
.chalkup-in:focus { border-color: var(--baize); box-shadow: 0 0 0 3px rgba(30, 107, 82, .25); }
.chalkup-tk { font: 600 11px/1 var(--mono); color: #5D665F; padding-bottom: 16px; }
.chalkup-go { flex: none; font: 400 19px/1 var(--disp); letter-spacing: .02em; background: var(--sink); color: var(--cream); border: 0; border-radius: 12px; padding: 14px 16px; cursor: pointer; }
.chalkup-go:disabled { background: #CFC6B4; color: #7A7466; cursor: default; }
.chalkup-if { margin: 9px 0 0; font-size: 13px; color: #5D665F; }
.chalkup-if b { color: var(--ink); }
.chalkup-owed { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #EFE9DC; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.chalkup-owed[hidden] { display: none; }
.chalkup-owed button { font: 600 13px/1 var(--text); background: var(--baize); color: var(--cream); border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; }

.scorebook { background: var(--slab); border-radius: 20px; padding: 12px 14px; }
.scorebook-hd { display: flex; align-items: center; justify-content: space-between; font: 400 17px/1 var(--disp); }
.scorebook-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sink); animation: firstpulse 1.4s infinite; }
.scorebook-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; max-height: 340px; overflow: auto; }
.scorebook-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; }
.scorebook-list time { font: 500 11.5px/1.6 var(--mono); color: var(--dim); }
.scorebook-list li.is-sink span { color: #FF8A66; font-weight: 600; }
.scorebook-list li.is-quiet { display: block; color: var(--dim); border: 0; }
.scorebook-list li.is-print { animation: printline .9s ease-out; }
@keyframes printline { from { background: rgba(228, 87, 46, .28); } }
.houserules { padding: 4px 4px 0; }
.houserules-t { font: 400 24px/1.1 var(--disp); margin: 0 0 8px; }
.houserules-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; color: #D8D2C3; }
.houserules-list b { color: var(--chalk); }
.slate { margin-top: 12px; background: var(--baize); color: #E8F4EE; border-radius: 16px; padding: 12px 14px; font-size: 13.5px; }
.slate p { margin: 0 0 8px; }
.slate p:last-child { margin: 0; }
.slate b { color: #FFD9CB; }
.slate-t { font: 400 15px/1 var(--disp); color: var(--mint); letter-spacing: .03em; }

.tail { display: grid; gap: 6px; font-size: 12px; color: var(--dim); padding: 16px 4px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.tail code { font-size: 11.5px; color: var(--chalk); }
.tail nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.tail nav a { font-weight: 600; color: var(--chalk); }

/* the CA: a dock above the thumb, fixed at every width */
.cadock {
  position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 30; margin: 0 auto; max-width: 700px;
  display: flex; align-items: center; gap: 8px; background: var(--cream); color: var(--ink);
  border-radius: 16px; padding: 7px 7px 7px 9px; box-shadow: 0 -2px 0 var(--sink) inset, 0 10px 30px rgba(0, 0, 0, .45);
}
.cadock-k { flex: none; font: 400 13px/1 var(--disp); background: var(--sink); color: var(--cream); padding: 7px 8px; border-radius: 10px; }
.cadock-addr { flex: 1; min-width: 0; font: 500 11px/1.25 var(--mono); word-break: break-all; user-select: all; }
.cadock-addr.is-wait { user-select: none; color: #6F7871; font: 500 12.5px/1.25 var(--text); word-break: normal; }
.cadock-copy { flex: none; font: 600 13px/1 var(--text); background: var(--ink); color: var(--cream); border: 0; border-radius: 10px; padding: 11px 14px; cursor: pointer; }
.cadock-copy:disabled { background: #D9D2C2; color: #8C877A; cursor: default; }
.cadock-copy.is-done { background: var(--baize); }
.cadock-gm { flex: none; font: 500 12px/1 var(--text); color: #4A5550; padding: 0 6px 0 2px; }
.cadock-gm[hidden] { display: none; }

.veil { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .6); display: grid; place-items: end center; }
.veil[hidden] { display: none; }
.veil-card { width: min(560px, 100%); max-height: 80vh; overflow: auto; background: var(--slab); color: var(--chalk); border-radius: 18px 18px 0 0; padding: 14px 16px 22px; }
.veil-hd { display: flex; justify-content: space-between; align-items: center; font: 400 19px/1 var(--disp); margin-bottom: 10px; }
.veil-hd button { font: 600 13px/1 var(--text); background: var(--slab2); color: var(--chalk); border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.hist { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }
.wpick { display: grid; gap: 8px; }
.wpick button { display: flex; align-items: center; gap: 10px; font: 600 14px var(--text); background: var(--slab2); color: var(--chalk); border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; }
.wpick img { width: 24px; height: 24px; }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 50; background: var(--chalk); color: var(--ink); font: 600 13px/1 var(--text); padding: 11px 16px; border-radius: 999px; }

@media (min-width: 640px) {
  body { padding: 18px 22px 130px; gap: 14px; }
  .callout { font-size: 58px; }
  .nowline { font-size: 16.5px; }
  .chalkup { padding: 18px 20px 16px; }
  .chalkup-in { font-size: 28px; }
  .chalkup-go { font-size: 22px; padding: 15px 22px; }
  .cadock-addr { font-size: 13px; }
}
@media (min-width: 1000px) {
  body { max-width: 1180px; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 28px; padding: 22px 28px 130px; }
  .marquee, .callout, .nowline, .baize { grid-column: 1; }
  .bench { grid-column: 2; grid-row: 1 / span 4; align-self: start; position: sticky; top: 18px; }
  .tail { grid-column: 1 / -1; }
  .marquee b { font-size: 24px; }
  .callout { font-size: 72px; }
  .nowline { font-size: 17px; max-width: 64ch; }
  .scorebook-list { max-height: 260px; }
  .baize { padding: 14px 16px 16px; }
  .cadock { max-width: 860px; padding: 9px 9px 9px 12px; }
}