/* Scutchery — the board. Cream paper, slate ink, one straw accent; stencil for words, mono for figures so the
   digit 1 never turns into a bare stroke. The strike form comes first, the strick under it, the tape beside it
   from 1000 px. No header strip: the name lives inside the form, the address lives in the stamp on top. */
:root{
  --paper:#F1E8D2; --paper2:#E8DDC3; --paper3:#D9CBAA;
  --ink:#1D2126; --slate:#5B6B7B; --slate2:#8C9AA6;
  --straw:#CFA84B; --straw2:#B8923A;
  --rule:rgba(29,33,38,.16); --rule2:rgba(29,33,38,.34);
  --stamp:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--paper)}
body{
  background:var(--paper); color:var(--ink);
  font:400 15px/1.5 "Libre Franklin",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding:calc(var(--stamp) + 14px) 14px 30px;
}
.sten{font-family:"Allerta Stencil",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.05em}
.num{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none !important}
h2,h3{font-family:"Allerta Stencil",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.05em;margin:0}

/* ---------- the stamp: fixed across the top at every width ---------- */
#stamp{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--stamp);
  display:flex; align-items:center; gap:8px; padding:0 10px;
  background:var(--ink); color:var(--paper); border-bottom:3px solid var(--straw);
}
.stamp-tag{display:none;font-family:"Allerta Stencil",Impact,sans-serif;font-size:14px;letter-spacing:.08em;color:var(--straw);white-space:nowrap}
.stamp-addr{
  flex:1 1 auto; min-width:0; display:block;
  font:600 11px/1.25 "JetBrains Mono",ui-monospace,monospace; letter-spacing:0; color:var(--paper);
  white-space:nowrap; overflow:hidden; user-select:all;
}
.stamp-addr[data-empty="1"]{white-space:normal;font-weight:400;font-size:10.5px;color:var(--slate2);user-select:none}
.stamp-copy{
  flex:0 0 auto; height:34px; padding:0 12px; border:2px solid var(--straw); color:var(--straw);
  font-family:"Allerta Stencil",Impact,sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.stamp-copy[data-done="1"]{background:var(--straw);color:var(--ink)}
.stamp-copy:disabled{opacity:.4;cursor:default}
.stamp-gm{display:none;flex:0 0 auto;font-size:11px;letter-spacing:.06em;color:var(--slate2);text-decoration:none;white-space:nowrap}
.stamp-gm:hover{color:var(--paper)}
@media (max-width:399px){ .stamp-addr{font-size:10.3px} }

/* ---------- the swing: the form, first on the page ---------- */
.swing{
  max-width:640px; margin:0 auto 18px; position:relative;
  border:2px solid var(--ink); background:var(--paper2); padding:14px 14px 16px;
}
.swing::before{content:"";position:absolute;inset:5px;border:1px dashed var(--rule2);pointer-events:none}
.swing-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.mark{font-size:24px;line-height:1;text-decoration:none}
.strick-no{font-size:10.5px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;white-space:nowrap}
.swing-live{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--rule2);border:1px solid var(--rule2);margin:0 0 12px}
.swing-live div{background:var(--paper);padding:8px 9px;min-width:0}
.swing-live dt{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0 0 3px;white-space:nowrap}
.swing-live dd{margin:0;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swing-form{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch}
.stepper{display:flex;border:2px solid var(--ink);background:var(--paper);align-items:stretch}
.stepper button{width:36px;font-size:20px;line-height:1;color:var(--ink)}
.stepper button:hover{background:var(--paper3)}
.stepper input{width:44px;text-align:center;border:0;background:transparent;font:600 18px "JetBrains Mono",monospace;color:var(--ink);-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.strike{
  min-height:54px; padding:6px 12px; background:var(--ink); color:var(--straw); border:2px solid var(--ink);
  font-family:"Allerta Stencil",Impact,sans-serif; font-size:16px; letter-spacing:.06em; text-transform:uppercase; line-height:1.05;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0;
}
.strike b{font:500 10.5px/1.2 "Libre Franklin",sans-serif;letter-spacing:.04em;color:var(--paper);text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.strike:disabled{opacity:.5;cursor:default}
.cuff{
  grid-column:1 / -1; min-height:36px; border:1.5px solid var(--rule2); background:var(--paper);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate);
}
.cuff[data-on="1"]{color:var(--ink);border-color:var(--ink)}
.swing-note{margin:10px 0 0;font-size:12.5px;color:var(--slate);line-height:1.5}
.swing-note b{color:var(--ink)}
.swing-line{margin:6px 0 0;font-size:13px;color:var(--slate)}

/* ---------- the board: thirty slots ---------- */
.board{max-width:640px;margin:0 auto 18px}
.board-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 8px}
.board-head h2{font-size:14px}
.board-head em{font-style:normal;font-size:11px;color:var(--slate);letter-spacing:.06em}
.strick{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.slot{
  aspect-ratio:1 / 1.12; border:1.5px solid var(--rule2); background:var(--paper); min-width:0; position:relative;
  display:flex; flex-direction:column; justify-content:space-between; padding:5px 6px; transform-origin:center;
}
.slot i{font-style:normal;font-size:12px;font-weight:600}
.slot em{font-style:normal;font-size:9px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot u{text-decoration:none;font-size:9px;color:var(--slate2);white-space:nowrap}
.slot[data-side="struck"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.slot[data-side="struck"] em,.slot[data-side="struck"] u{color:var(--paper);opacity:.72}
.slot[data-side="next"]{border:2px dashed var(--straw2);background:rgba(207,168,75,.14)}
.slot[data-side="next"] u{color:var(--straw2);font-weight:600}
.slot[data-side="before"]{background:var(--paper3);color:var(--slate);border-color:var(--paper3)}
.slot[data-side="break"]{background:var(--straw);color:var(--ink);border-color:var(--straw2)}
.slot[data-side="break"] em,.slot[data-side="break"] u{color:var(--ink);opacity:.8}
.slot[data-side="late"]{background:var(--ink);color:var(--straw);border-color:var(--ink)}
.slot[data-side="late"] em,.slot[data-side="late"] u{color:var(--straw);opacity:.85}
.slot[data-side="unstruck"]{opacity:.42}
.slot.fresh{animation:stampin .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes stampin{from{transform:scale(1.35) rotate(-5deg);opacity:0}to{transform:none;opacity:1}}
.board-key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--slate);margin:10px 0 0}
.board-key span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border:1px solid var(--rule2);background:var(--paper)}
.board-key span[data-k="struck"]::before{background:var(--ink)}
.board-key span[data-k="next"]::before{border:1.5px dashed var(--straw2);background:rgba(207,168,75,.14)}
.board-key span[data-k="before"]::before{background:var(--paper3);border-color:var(--paper3)}
.board-key span[data-k="break"]::before{background:var(--straw)}
.board-key span[data-k="late"]::before{background:var(--ink);box-shadow:inset 0 0 0 2px var(--straw)}

/* ---------- the tally: tape, ledger, the rule ---------- */
.tally{max-width:640px;margin:0 auto 18px;display:grid;gap:14px}
.crate{border:1.5px solid var(--rule2);background:var(--paper)}
.crate-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 11px;border-bottom:1px solid var(--rule)}
.crate-head h3{font-size:12px}
.crate-head span{font-size:10.5px;color:var(--slate);letter-spacing:.06em}
.crate-body{padding:9px 11px 11px}
.tapeln{display:grid;grid-template-columns:38px 1fr auto;gap:8px;padding:6px 0;border-bottom:1px dotted var(--rule);font-size:12.5px;align-items:baseline}
.tapeln:last-child{border-bottom:0}
.tapeln i{font-style:normal;font-weight:600}
.tapeln em{font-style:normal;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tapeln u{text-decoration:none;color:var(--slate2);font-size:11px}
.tapeln[data-k="split"] i{color:var(--straw2)}
.ledln{display:grid;grid-template-columns:38px 1fr auto;gap:8px;padding:6px 0;border-bottom:1px dotted var(--rule);font-size:12.5px;align-items:baseline}
.ledln:last-child{border-bottom:0}
.ledln i{font-style:normal;font-weight:600}
.ledln em{font-style:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledln u{text-decoration:none;font-weight:600}
.ledln[data-broke="0"]{color:var(--slate)}
.mute{color:var(--slate);font-size:12.5px;margin:0;line-height:1.5}
.rulebook{margin:0;padding:0;list-style:none;counter-reset:rule}
.rulebook li{position:relative;padding:0 0 7px 30px;font-size:12.5px;line-height:1.5;counter-increment:rule}
.rulebook li::before{content:"§" counter(rule);position:absolute;left:0;top:1px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--straw2);font-weight:600}
.rulebook b{font-weight:600}

/* ---------- prose pages: rules / ledger / hand ---------- */
.folio{border:1.5px solid var(--rule2);background:var(--paper);padding:14px 14px 16px}
.folio h2{font-size:18px;margin:0 0 10px}
.folio p{margin:0 0 10px;font-size:13.5px;line-height:1.6}
.folio p b{font-weight:600}
.wide{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 0}
.roster{width:100%;border-collapse:collapse;font-size:12.5px}
.roster th{text-align:left;font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);padding:6px 8px;border-bottom:1px solid var(--rule2)}
.roster td{padding:7px 8px;border-bottom:1px dotted var(--rule);white-space:nowrap}
.collectbtn{min-height:30px;padding:0 10px;border:1.5px solid var(--ink);font-family:"Allerta Stencil",Impact,sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--straw)}

/* ---------- the hem: footer ---------- */
.hem{max-width:640px;margin:10px auto 0;padding:14px 0 0;border-top:2px solid var(--ink);font-size:11.5px;color:var(--slate);display:grid;gap:5px}
.hem code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;word-break:break-all;color:var(--ink)}
.hem a{color:var(--ink)}
.hem-nav{display:flex;flex-wrap:wrap;gap:6px 14px;text-transform:uppercase;letter-spacing:.12em;font-size:10.5px}
.hem-nav a{text-decoration:none;border-bottom:1px solid var(--rule2)}
.hem-nav a[aria-current]{border-bottom-color:var(--straw2);color:var(--straw2)}

/* ---------- the shed: sheet for wallet pick + strike confirm ---------- */
.shed{position:fixed;inset:0;z-index:60;background:rgba(29,33,38,.55);display:flex;align-items:flex-end;justify-content:center}
.shedbox{width:100%;max-width:520px;background:var(--paper);border-top:4px solid var(--straw);padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:86vh;overflow:auto}
.shedhead{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font-size:15px}
.shedshut{font-size:24px;line-height:1;width:34px;height:34px;color:var(--slate)}
.shedbody p{margin:0 0 9px;font-size:13.5px;line-height:1.55}
.shedbody p b{font-weight:600}
.fire{width:100%;min-height:50px;margin:6px 0 0;background:var(--ink);color:var(--straw);font-family:"Allerta Stencil",Impact,sans-serif;font-size:15px;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink)}
.fire:disabled{opacity:.5}
.wellpick{display:grid;gap:8px}
.wellpick button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--rule2);background:var(--paper2);text-align:left;font-size:14px}
.wellpick img{width:24px;height:24px;border-radius:4px}
.flashnote{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--paper);padding:9px 14px;font-size:12.5px;max-width:92vw;border-left:3px solid var(--straw);animation:noteup .25s ease-out}
@keyframes noteup{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- a wider measure ---------- */
@media (min-width:640px){
  body{padding:calc(var(--stamp) + 22px) 22px 36px}
  .stamp-tag{display:inline}
  .stamp-gm{display:inline-block}
  .stamp-addr{font-size:13px}
  .swing,.board,.tally,.hem{max-width:740px}
  .swing{padding:18px 20px 20px}
  .mark{font-size:30px}
  .swing-live dd{font-size:21px}
  .strike{font-size:18px;min-height:58px}
  .strick{grid-template-columns:repeat(10,1fr);gap:5px}
  .slot i{font-size:13px}
  .slot em,.slot u{font-size:9.5px}
  .board-head h2{font-size:15px}
  .folio h2{font-size:22px}
}

/* ---------- the desk: the form and the strick on the left, the tally standing beside them ---------- */
@media (min-width:1000px){
  body{
    display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:0 26px; align-content:start;
    grid-template-areas:"swing tally" "board tally" "hem hem";
    max-width:1180px; margin:0 auto; padding:calc(var(--stamp) + 26px) 28px 40px;
  }
  #stamp{padding:0 28px}
  .stamp-addr{font-size:14px}
  .swing{grid-area:swing;max-width:none;margin:0 0 20px;padding:22px 24px 24px}
  .board{grid-area:board;max-width:none;margin:0}
  .tally{grid-area:tally;max-width:none;margin:0;align-self:start;position:sticky;top:calc(var(--stamp) + 26px)}
  .hem{grid-area:hem;max-width:none;margin:26px 0 0;grid-template-columns:1fr 1fr;gap:6px 24px}
  .hem-nav{grid-column:1 / -1}
  .mark{font-size:40px}
  .swing-live dd{font-size:26px}
  .swing-form{grid-template-columns:auto 1fr auto;align-items:stretch}
  .cuff{grid-column:auto;min-width:130px}
  .strike{font-size:20px;min-height:62px}
  .swing-note{font-size:13.5px}
  .strick{gap:6px}
  .slot{padding:7px 8px}
  .slot i{font-size:15px}
  .slot em,.slot u{font-size:10px}
  .board-head h2{font-size:17px}
  .shed{align-items:center}
  .shedbox{border:2px solid var(--ink);border-top:4px solid var(--straw)}
}