/* Tape Bingo: dense, monospaced, a dark tape board by default and a paper tape in light mode. */
:root {
  --bg: #f3f0e7; --panel: #fbfaf6; --cell: #e2ded1; --cell-fg: #2a302d; --cell-dim: #8d968f;
  --lit: #1c9a59; --lit-fg: #ffffff; --line: #e39a00; --line-fg: #1d1404;
  --fg: #101412; --muted: #59645e; --rule: #d6d1c2; --accent: #13744a; --btn: #101412; --btn-fg: #f3f0e7;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0f0e; --panel: #131917; --cell: #222b27; --cell-fg: #cdd6d1; --cell-dim: #66736c;
    --lit: #2fd27a; --lit-fg: #06100a; --line: #ffb21e; --line-fg: #1a1204;
    --fg: #eef3ef; --muted: #8e9c95; --rule: #25302b; --accent: #45e08f; --btn: #eef3ef; --btn-fg: #0c0f0e;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--mono); }
a { color: var(--accent); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 560px; margin: 0 auto; padding: 12px 16px 6px; }
.brand { display: inline-flex; align-items: center; }
.wm { width: 132px; height: auto; display: block; }
.clock { font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; }
@media (min-width: 400px) { .clock { font-size: 12px; } }
.clock #cd { color: var(--fg); font-variant-numeric: tabular-nums; }
.sep { opacity: .6; }

main { max-width: 560px; margin: 0 auto; padding: 0 16px 24px; }
.play { padding-top: 4px; }
.whose { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.status { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 6px 0 10px; min-height: 34px; }
.big { font-size: 28px; font-weight: 800; letter-spacing: .04em; line-height: 1.1; white-space: nowrap; }
.status.won .big { color: var(--line); }
.small { font-size: 12px; color: var(--muted); text-align: right; }

.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 100%; aspect-ratio: 1; }
.sq {
  position: relative; min-width: 0; padding: 4px 3px; border: 0; border-radius: 6px; background: var(--cell); color: var(--cell-fg);
  font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer;
  overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.sq .s1 { font-size: clamp(9px, 2.8vw, 13px); font-weight: 800; line-height: 1.15; white-space: nowrap; }
.sq .s2 { font-size: clamp(8.5px, 2.45vw, 11px); line-height: 1.12; margin-top: 2px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq .t { font-size: clamp(8.5px, 2.4vw, 10px); font-weight: 800; margin-top: 2px; letter-spacing: .02em; }
.sq.lit { background: var(--lit); color: var(--lit-fg); }
.sq.line { background: var(--line); color: var(--line-fg); }
.sq.dead { color: var(--cell-dim); }
.sq.dead .s2 { text-decoration: line-through; }
.sq.nodata::after { content: "…"; position: absolute; top: 1px; right: 4px; font-size: 10px; color: var(--cell-dim); }
.sq.free .star { font-size: 18px; line-height: 1; margin-top: 2px; }
.sq.sel { outline: 3px solid var(--fg); outline-offset: -3px; }
.sq.new { animation: pop .9s ease-out; }
@keyframes pop { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sq.new { animation: none; } }
.sq:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.detail { margin-top: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; font-size: 13px; }
.detail .d-label { margin: 0 0 6px; font-weight: 700; }
.detail .d-state { margin: 0 0 6px; }
.detail .d-state.on { color: var(--accent); }
.detail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; overflow-wrap: anywhere; }
.detail .row { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn {
  font: inherit; font-size: 14px; font-weight: 700; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--rule);
  background: var(--panel); color: var(--fg); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.btn.primary { background: var(--btn); color: var(--btn-fg); border-color: var(--btn); flex: 1 1 100%; font-size: 16px; padding: 13px 16px; }
.btn[disabled] { opacity: .5; cursor: default; }
.link { margin: 8px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.note { margin: 8px 0 0; font-size: 12px; color: var(--muted); min-height: 1em; }
.strip { margin: 14px 0 0; padding: 8px 10px; border: 1px dashed var(--rule); border-radius: 8px; font-size: 13px; }
.meta { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.mine { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 12px; font-size: 13px; }
.mine p { margin: 4px 0; }

#token { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; }
#token h2 { font-size: 14px; margin: 0 0 8px; }
#token h3 { margin: 14px 0 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.addr { display: flex; gap: 8px; align-items: flex-start; }
.addr code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.addr button { font: inherit; font-size: 12px; padding: 2px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--panel); color: var(--fg); }
.links a { margin-right: 14px; }

.foot { max-width: 560px; margin: 0 auto; padding: 8px 16px 28px; font-size: 12px; color: var(--muted); }

/* the how page */
.doc h1 { font-size: 20px; margin: 10px 0 6px; }
.doc h2 { font-size: 15px; margin: 22px 0 6px; }
.doc p, .doc li { font-size: 13px; }
.doc ul { padding-left: 18px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th, .tbl td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl td.n, .tbl th.n { text-align: right; white-space: nowrap; }
.tbl .on { color: var(--accent); font-weight: 700; }
.scroll { overflow-x: auto; }

@media (min-width: 720px) {
  .top, main, .foot { max-width: 620px; }
  .grid { gap: 7px; }
  .big { font-size: 34px; }
  .btn.primary { flex: 0 1 auto; }
}
.actions .link { flex: 1 1 100%; margin: 2px 0 0; }