/* Chipbook — a night logbook: one open page of ten chip slots on a near-black field, the CA strapped to the top edge. */
:root {
  --night: #5E6B78; --night-2: #F3EEE4; --night-3: #CFC6B4;
  --paper: #FFFDF7; --paper-2: #EFE9DC; --rule: #D9D0BE;
  --graphite: #23272D; --graphite-2: #3A3F46;
  --chalk: #1C1E21; --dim: #6E695E;
  --ember: #FF6B1F; --ember-soft: rgba(255, 107, 31, .18);
  --strap-h: 46px;
  --f-disp: 'Rethink Sans', 'Figtree', system-ui, sans-serif;
  --f-body: 'Figtree', system-ui, -apple-system, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--chalk); font: 400 15px/1.5 var(--f-body);
  padding-bottom: calc(var(--strap-h) + env(safe-area-inset-bottom)); overflow-x: hidden; }
a { color: inherit; }
code { font-family: var(--f-mono); font-stretch: 75%; }
b { font-weight: 700; }

/* ---------- the CA strap (fixed, docked to the bottom edge) ---------- */
.castrap { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; height: calc(var(--strap-h) + env(safe-area-inset-bottom));
  padding: 0 12px env(safe-area-inset-bottom); display: flex; align-items: center; gap: 8px;
  background: #0B0C0E; border-top: 2px solid var(--ember); box-shadow: 0 -10px 24px -12px rgba(0,0,0,.5); }
.castrap-k { font: 800 12px/1 var(--f-disp); letter-spacing: .04em; color: var(--ember); white-space: nowrap; }
.castrap-ca { flex: 1 1 auto; min-width: 0; font-size: 10.5px; line-height: 1.25; color: #F3EFE6; user-select: all;
  word-break: break-all; font-weight: 600; }
.castrap-ca.is-blank { color: #8E8A82; font-weight: 400; user-select: none; }
.castrap-copy { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: var(--ember); color: #170A02;
  font: 700 12px/1 var(--f-body); cursor: pointer; }
.castrap-copy[data-done="1"] { background: #F3EFE6; }
.castrap-gm { flex: none; font: 500 11px/1 var(--f-mono); font-stretch: 75%; color: #A9A49A; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 430px) { .castrap-tk { display: none; } .castrap-gm { display: none; } .castrap { padding-left: 10px; padding-right: 8px; } }

/* ---------- the masthead: the last draw, told in display type ---------- */
.masthead { padding: 4px 2px 0; min-width: 0; }
.masthead-k { margin: 0 0 6px; font: 500 11px/1.2 var(--f-mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: .07em; color: #D3DAE1; }
.masthead-h { margin: 0; font: 800 34px/1.04 var(--f-disp); letter-spacing: -.025em; color: #FBF8F1; text-wrap: balance; }
.masthead-h em { font-style: normal; color: #FFA066; }

/* ---------- the spread ---------- */
.spread { max-width: 560px; margin: 0 auto; padding: 14px 14px 40px; display: grid; gap: 18px; }
.verso, .recto { display: grid; gap: 16px; min-width: 0; }

/* the drawn moment */
.takeline { background: var(--night-2); border: 1px solid var(--night-3); border-radius: 14px; padding: 12px 14px 13px; }
.takeline-k { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); font-stretch: 75%; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim); }
.takeline-k img { border-radius: 50%; }
.takeline-k i { margin-left: auto; font-style: normal; }
.takeline-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 11px 0 9px; }
.pip { aspect-ratio: 1; border-radius: 50%; background: var(--graphite-2); border: 2px solid var(--night-3); position: relative; }
.pip.is-win { background: var(--ember); border-color: #FFB38A; box-shadow: 0 0 14px 3px rgba(255, 107, 31, .55); }
.pip.is-paid::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: var(--night); }
.pip.is-void { background: transparent; border-style: dashed; }
.takeline[data-state="sealed"] .pip:not(.is-void) { animation: shuffle 1.1s ease-in-out infinite; }
.takeline[data-state="sealed"] .pip:nth-child(2n) { animation-delay: .25s; }
@keyframes shuffle { 50% { background: #6A4A38; } }
.takeline-say { margin: 0; font-size: 14px; color: var(--chalk); }
.takeline-say b { color: #C2410C; }
.takeline-say code { font-size: 11.5px; color: var(--chalk); word-break: break-all; }

/* the open page: the form itself */
.leaf { background: var(--paper); color: #1C1E21; border-radius: 6px 18px 18px 6px; padding: 14px 14px 16px; position: relative;
  box-shadow: inset 10px 0 18px -12px rgba(30,30,30,.3), 0 22px 40px -18px rgba(10,15,25,.6); }
.leaf::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 6px 0 0 6px; background: var(--paper-2); }
.leaf-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1.5px solid var(--rule); }
.leaf-mark { font: 800 22px/1 var(--f-disp); letter-spacing: -.02em; }
.leaf-no { font: 500 12px/1 var(--f-mono); font-stretch: 75%; color: #5E5A51; }
.leaf-clock { margin-left: auto; font: 500 11px/1.2 var(--f-mono); font-stretch: 75%; color: #5E5A51; }
.leaf-clock i { font-style: normal; }
.leaf-clock b { color: #1C1E21; }
.leaf-clock[data-hot="1"] b { color: #C2410C; }

.slotgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0 12px; }
.slot { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 7px 10px 7px 7px;
  border: 1.5px dashed var(--rule); border-radius: 26px; background: transparent; color: #4A473F; cursor: pointer;
  font: 400 12px/1.2 var(--f-body); text-align: left; }
.slot b { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 var(--f-disp);
  border: 1.5px dashed #A79E8A; color: #6E695E; }
.slot i { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.is-ink { border-style: solid; border-color: var(--paper-2); background: var(--paper-2); cursor: default; color: #2A2C30; }
.slot.is-ink b { background: var(--graphite); border: 2px solid #111316; color: var(--paper); }
.slot.is-ink i { font-family: var(--f-mono); font-stretch: 75%; font-size: 11px; }
.slot.is-mine b { border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember-soft); }
.slot.is-fresh b { animation: land .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes land { from { transform: translateY(-14px) scale(.6); opacity: 0; } }
.slot.is-next { border-color: var(--ember); border-style: solid; color: #1C1E21; }
.slot.is-next b { border: 2px solid var(--ember); color: #C2410C; animation: beckon 1.6s ease-in-out infinite; }
@keyframes beckon { 50% { box-shadow: 0 0 0 6px var(--ember-soft); } }
.slot.is-aim { background: rgba(255, 107, 31, .1); border-color: var(--ember); border-style: solid; }
.slot.is-aim b { border-style: solid; border-color: var(--ember); color: #C2410C; }
.slot.is-drawn b { background: var(--ember); border-color: #FFB38A; color: #170A02; box-shadow: 0 0 16px 4px rgba(255,107,31,.5); }
.slot:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.leaf-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 0; border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); }
.tally span { display: block; font: 500 10px/1.2 var(--f-mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: .05em; color: #6E695E; }
.tally b { font: 800 17px/1.25 var(--f-disp); }
.nowline { margin: 11px 0 12px; font-size: 14px; line-height: 1.45; }
.nowline b { color: #B23A07; }

.pen { display: flex; gap: 10px; align-items: stretch; }
.pen-qty { display: flex; align-items: center; border: 1.5px solid #1C1E21; border-radius: 28px; overflow: hidden; flex: none; }
.pen-step { width: 40px; height: 52px; border: 0; background: transparent; font: 500 22px/1 var(--f-body); color: #1C1E21; cursor: pointer; }
.pen-n { width: 26px; text-align: center; font: 800 18px/1 var(--f-disp); }
.pen-go { flex: 1; min-height: 52px; border: 0; border-radius: 28px; background: #1C1E21; color: var(--paper);
  font: 800 16px/1.1 var(--f-disp); letter-spacing: .01em; cursor: pointer; padding: 0 14px; }
.pen-go:not(:disabled):hover { background: #000; }
.pen-go:disabled { opacity: .55; cursor: default; }
.pen-go .em { color: var(--ember); }
.leaf-fine { margin: 10px 0 0; font-size: 12px; color: #5E5A51; }
.linkish { border: 0; background: none; padding: 0; font: 700 12px var(--f-body); color: #B23A07; text-decoration: underline; cursor: pointer; }
.liftbtn { margin-top: 12px; width: 100%; min-height: 46px; border-radius: 24px; border: 2px solid var(--ember); background: var(--ember-soft);
  font: 800 15px var(--f-disp); color: #1C1E21; cursor: pointer; }

/* the right-hand page: margin notes, past pages, how a page works */
.margin, .howto { background: var(--night-2); border: 1px solid var(--night-3); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.margin-k { display: flex; justify-content: space-between; gap: 8px; font: 500 11px/1 var(--f-mono); font-stretch: 75%; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim); padding-bottom: 9px; border-bottom: 1px solid var(--night-3); }
.notes, .pages, .howto-list { list-style: none; margin: 0; padding: 0; }
.notes li { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--night-3); font-size: 13px; }
.notes li:last-child { border-bottom: 0; }
.notes .nk { font: 600 10px/1 var(--f-mono); font-stretch: 75%; text-transform: uppercase; color: var(--dim); }
.notes li[data-k="drawn"] .nk, .notes li[data-k="drawn"] .nt b { color: #C2410C; }
.notes .nt { min-width: 0; overflow-wrap: anywhere; }
.notes .nt code { font-size: 11px; color: var(--dim); }
.notes .nw { font: 400 11px var(--f-mono); font-stretch: 75%; color: var(--dim); }
.notes li.is-new { animation: write .9s ease-out; }
@keyframes write { from { background: var(--ember-soft); } }
.notes-quiet { padding: 12px 0 4px; color: var(--dim); font-size: 13px; }
.pages li { padding: 9px 0; border-bottom: 1px dashed var(--night-3); }
.pages li:last-child { border-bottom: 0; }
.pages .pt { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.pages .pt span { color: #C2410C; font-weight: 700; }
.pages .pi { font: 400 10.5px/1.5 var(--f-mono); font-stretch: 75%; color: var(--dim); overflow-wrap: anywhere; }
.howto-list li { padding: 8px 0; font-size: 14px; border-bottom: 1px dashed var(--night-3); }
.howto-list b { color: var(--chalk); }
.sum { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--paper); color: #1C1E21; }
.sum-k { font: 600 10px/1 var(--f-mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: .06em; color: #B23A07; }
.sum p { margin: 7px 0 0; font-size: 14px; }
.whobox { margin-top: 12px; padding: 10px; border-radius: 10px; border: 1px solid var(--ember); font-size: 13px; overflow-wrap: anywhere; }
.whobox code { font-size: 11px; }

.endpaper { padding: 18px 2px 0; border-top: 1px solid rgba(255,255,255,.22); color: #D3DAE1; font-size: 12px; min-width: 0; }
.endpaper-row { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.endpaper-row span { flex: none; width: 92px; font: 500 10px var(--f-mono); font-stretch: 75%; text-transform: uppercase; }
.endpaper-row code { font-size: 11px; overflow-wrap: anywhere; min-width: 0; color: #FBF8F1; }
.endpaper-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 6px; }
.endpaper-links a { color: #FBF8F1; }
.endpaper-links a.is-off { display: none; }
.endpaper-note { margin: 6px 0 0; }

.pops { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 40; display: grid; gap: 8px; width: min(92vw, 420px); }
.pop { background: #1C1E21; color: #F6F2E9; padding: 11px 14px; border-radius: 12px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  border-left: 4px solid var(--ember); animation: popin .25s ease-out; }
@keyframes popin { from { transform: translateY(-10px); opacity: 0; } }

/* ---------- tablet: wider measure, bigger page ---------- */
@media (min-width: 640px) {
  .masthead-h { font-size: 48px; }
  .spread { max-width: 760px; padding: 22px 24px 48px; gap: 22px; }
  .slotgrid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .slot { flex-direction: column; justify-content: center; text-align: center; min-height: 104px; border-radius: 18px; padding: 10px 6px; gap: 7px; }
  .slot b { width: 48px; height: 48px; font-size: 17px; }
  .slot i { max-width: 100%; }
  .leaf { padding: 20px 22px 22px; }
  .leaf-mark { font-size: 28px; }
  .tally b { font-size: 21px; }
  .nowline { font-size: 15.5px; }
  .takeline-row { gap: 9px; max-width: 520px; }
}
@media (max-width: 380px) { .slot i { font-size: 11px; } .castrap-ca { font-size: 9.5px; } }

/* ---------- desktop: the page on the left, the margin beside it ---------- */
@media (min-width: 1000px) {
  :root { --strap-h: 50px; }
  .castrap { padding-left: max(24px, calc((100vw - 1180px) / 2 + 24px)); padding-right: max(24px, calc((100vw - 1180px) / 2 + 24px)); gap: 14px; }
  .castrap-k { font-size: 14px; }
  .castrap-ca { flex: 0 1 auto; font-size: 13px; }
  .masthead { grid-column: 1 / -1; padding-top: 6px; }
  .masthead-h { font-size: 52px; max-width: 24ch; }
  .spread { max-width: 1180px; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); align-items: start; gap: 28px; padding: 28px 24px 56px; }
  .endpaper { grid-column: 1 / -1; }
  .recto { position: sticky; top: 20px; max-height: calc(100vh - var(--strap-h) - 40px); overflow-y: auto; scrollbar-width: thin; }
  .leaf { padding: 26px 30px 28px; }
  .leaf-mark { font-size: 36px; }
  .slot { min-height: 132px; }
  .slot b { width: 64px; height: 64px; font-size: 22px; }
  .slot i { font-size: 12.5px; }
  .tally b { font-size: 26px; }
  .nowline { font-size: 17px; }
  .pen-go { font-size: 19px; min-height: 60px; }
  .pen-step { height: 60px; width: 48px; }
  .takeline { padding: 16px 20px; }
  .takeline-say { font-size: 16px; }
}