/* Matchdrop — a stencilled sampler on bone paper. Ten pads are the ten entries of the current drop. */
:root{
  --paper:#EEE7D9; --paper-2:#E4DBC9; --ink:#1B1712; --ink-2:#4A4238; --dim:#7A6F61; --rule:#CFC3AE;
  --hot:#F2541B; --hot-soft:#F8C9B1; --pad:#231E18; --pad-ink:#F3ECDF;
  --f-disp:"Saira Stencil One", Impact, sans-serif; --f-body:"Archivo", system-ui, sans-serif; --f-mono:"JetBrains Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"count" "pads" "feed" "base";
  padding-bottom:230px;
}
a{color:inherit}
code{font-family:var(--f-mono)}
button{font:inherit; cursor:pointer}

/* ---------- the count: one live figure ---------- */
.cue-count{grid-area:count; padding:18px 16px 6px; min-width:0}
.cue-tag{display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.02em}
.cue-tag img{border-radius:6px; display:block}
.cue-tag b{font-family:var(--f-disp); font-weight:400; font-size:18px; letter-spacing:.04em}
.cue-tag span{margin-left:auto; color:var(--dim); font-family:var(--f-mono); font-size:12px}
.cue-fig{
  font-family:var(--f-disp); font-size:132px; line-height:.86; letter-spacing:-.01em; margin:14px 0 4px;
  color:var(--ink); transition:color .3s;
}
.cue-fig[data-zero="1"]{color:var(--hot)}
.cue-cap{font-size:16px; color:var(--ink-2); max-width:30ch}
.cue-cap b{color:var(--ink)}
.cue-last{
  display:flex; align-items:baseline; gap:10px; margin-top:14px; padding:10px 12px; text-decoration:none;
  border:1.5px dashed var(--ink); border-radius:4px; background:var(--paper-2);
}
.cue-last-k{font-family:var(--f-disp); font-size:13px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.cue-last-v{font-size:13px; color:var(--ink-2); min-width:0}
.cue-last-v b{color:var(--hot)}
.cue-last-v code{font-size:12px}

/* ---------- the pads ---------- */
.pad-zone{grid-area:pads; padding:10px 16px 8px; min-width:0}
.says{margin:6px 0 14px; font-size:16px; line-height:1.45}
.says b{background:var(--hot-soft); padding:0 3px}
.pad-bank{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px}
.pad-cell{
  position:relative; aspect-ratio:4/5; border-radius:6px; border:1.5px dashed var(--rule); background:transparent;
  display:flex; flex-direction:column; justify-content:space-between; padding:7px 6px 6px; min-width:0; overflow:hidden;
  transition:background .25s, border-color .25s, transform .15s;
}
.pad-n{font-family:var(--f-disp); font-size:22px; line-height:1; color:var(--rule)}
.pad-w{font-family:var(--f-mono); font-size:10px; line-height:1.2; color:var(--dim); white-space:nowrap; overflow:hidden}
.pad-w .long{display:none}
.pad-cell[data-st="next"]{border:2px solid var(--hot); cursor:pointer; animation:padbeat 1.1s ease-in-out infinite}
.pad-cell[data-st="next"] .pad-n{color:var(--hot)}
.pad-cell[data-st="next"] .pad-w{color:var(--hot); font-family:var(--f-body); font-weight:800; font-size:11px}
.pad-cell[data-st="in"]{background:var(--pad); border:1.5px solid var(--pad)}
.pad-cell[data-st="in"] .pad-n{color:var(--pad-ink)}
.pad-cell[data-st="in"] .pad-w{color:#BDB3A3}
.pad-cell[data-me="1"] .pad-w{color:var(--hot)}
.pad-cell[data-st="strobe"]{background:var(--pad); border:1.5px solid var(--pad); animation:padstrobe .5s steps(2) infinite}
.pad-cell[data-st="strobe"] .pad-n{color:var(--pad-ink)}
.pad-cell[data-st="took"]{background:var(--hot); border:2px solid var(--ink); transform:translateY(-3px)}
.pad-cell[data-st="took"] .pad-n, .pad-cell[data-st="took"] .pad-w{color:var(--ink)}
.pad-cell[data-st="took"]::after{
  content:"TOOK IT"; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) rotate(-14deg);
  font-family:var(--f-disp); font-size:12px; letter-spacing:.06em; color:var(--ink); border:2px solid var(--ink);
  padding:1px 4px; background:var(--paper); white-space:nowrap;
}
@keyframes padbeat{0%,100%{box-shadow:0 0 0 0 rgba(242,84,27,.0)}50%{box-shadow:0 0 0 5px rgba(242,84,27,.22)}}
@keyframes padstrobe{0%{background:var(--pad)}100%{background:var(--hot)}}
.pad-meter{height:6px; background:var(--paper-2); border-radius:3px; margin:14px 0 8px; overflow:hidden}
.pad-meter-fill{display:block; height:100%; width:0; background:var(--hot); transition:width .6s cubic-bezier(.2,.8,.2,1)}
.pad-clock{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink-2); font-family:var(--f-mono)}
.pad-how{background:none; border:none; padding:0; color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-family:var(--f-body); font-size:13px; white-space:nowrap}

.strike-row{margin-top:16px}
.strike-go{
  width:100%; border:none; border-radius:6px; padding:16px 18px; background:var(--ink); color:var(--paper);
  font-family:var(--f-disp); font-size:20px; letter-spacing:.04em; text-align:center;
}
.strike-go:hover{background:#000000}
.strike-go:disabled{opacity:.5; cursor:not-allowed}
.strike-fine{margin:8px 0 0; font-size:12.5px; color:var(--dim)}
.me-row[hidden], .cash-go[hidden], .spin-go[hidden]{display:none}
.me-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:9px 12px; border:1px solid var(--rule); border-radius:6px; font-size:13px; font-family:var(--f-mono)}
.cash-go{border:none; background:var(--hot); color:var(--ink); border-radius:4px; padding:7px 12px; font-weight:800; font-family:var(--f-body)}

/* ---------- the feed pane ---------- */
.feed-zone{grid-area:feed; padding:18px 16px 0; min-width:0; display:flex; flex-direction:column; gap:16px}
.won-card{border:2px solid var(--ink); border-radius:6px; padding:14px; background:var(--paper)}
.won-card[data-mode="drawn"]{background:var(--ink); color:var(--paper)}
.won-card[data-mode="drawn"] .won-small{color:#C9BFAF}
.won-card[data-mode="drawn"] .won-small a{color:var(--paper)}
.won-card[data-mode="pending"]{border-color:var(--hot)}
.won-k{font-family:var(--f-disp); font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px}
.won-card[data-mode="drawn"] .won-k{color:var(--hot)}
.won-big{margin:0; font-size:20px; font-weight:800; line-height:1.25}
.won-big em{font-style:normal; color:var(--hot)}
.won-small{margin:6px 0 0; font-size:13px; color:var(--ink-2); overflow-wrap:anywhere}
.won-small code{font-size:11.5px}
.won-strip{display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:3px; margin-top:12px}
.won-strip:empty{display:none}
.won-dot{height:16px; border-radius:2px; background:#5A5146; font:10px/16px var(--f-mono); text-align:center; color:#C9BFAF}
.won-dot[data-w="1"]{background:var(--hot); color:var(--ink); font-weight:600}
.spin-go{margin-top:12px; width:100%; border:2px solid var(--hot); background:var(--hot); color:var(--ink); border-radius:6px; padding:11px; font-weight:800}

.tape-card-md{border-top:2px solid var(--ink); padding-top:10px}
.tape-head-md{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--f-disp); font-size:14px; letter-spacing:.08em; text-transform:uppercase}
.tape-head-md i{font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--dim); text-transform:none; letter-spacing:0}
.tape-rows{list-style:none; margin:8px 0 0; padding:0; max-height:300px; overflow:auto; font-family:var(--f-mono); font-size:12px}
.tape-rows li{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:8px; padding:6px 0; border-bottom:1px dashed var(--rule); align-items:baseline}
.tape-rows li.tape-fresh{animation:tapein .7s ease-out}
.tape-rows .tape-none{display:block; color:var(--dim); font-family:var(--f-body); font-size:13px; border:none}
.tk-md{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim)}
.tk-md[data-k="drawn"]{color:var(--hot); font-weight:600}
.tw-md{min-width:0; overflow-wrap:anywhere}
.tt-md{color:var(--dim); font-size:11px}
@keyframes tapein{from{background:var(--hot-soft)}to{background:transparent}}

.howto{border-top:2px solid var(--ink); padding-top:10px}
.howto-h{font-family:var(--f-disp); font-weight:400; font-size:20px; letter-spacing:.03em; margin:0 0 8px}
.howto-steps{margin:0; padding-left:20px; font-size:14px}
.howto-steps li{margin-bottom:6px}
.howto-sum{margin-top:10px; border:1.5px solid var(--ink); border-radius:6px; overflow:hidden; font-family:var(--f-mono); font-size:12.5px}
.howto-sum div{display:flex; justify-content:space-between; gap:10px; padding:7px 10px; border-bottom:1px dashed var(--rule)}
.howto-sum div:last-child{border-bottom:none}
.howto-sum b{color:var(--hot)}

/* ---------- footer ---------- */
.base{grid-area:base; margin-top:22px; padding:16px 16px 10px; border-top:1px solid var(--rule); font-size:12px; color:var(--dim); min-width:0}
.base-row{display:flex; gap:10px; margin-bottom:6px; flex-wrap:wrap}
.base-row span{min-width:92px}
.base-row code{color:var(--ink-2); overflow-wrap:anywhere; min-width:0}
.base-links{display:flex; gap:14px; margin:8px 0}
.base-note{margin:6px 0 0}

/* ---------- the CA dock: a floating card, mid-screen, above the thumb ---------- */
.cadock{
  position:fixed; left:50%; bottom:128px; transform:translateX(-50%); z-index:40;
  width:min(94vw, 760px); display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  background:var(--ink); color:var(--paper); border-radius:14px; padding:10px 12px;
  box-shadow:0 14px 34px -12px rgba(27,23,18,.55), 0 0 0 2px var(--paper);
}
.cadock-k{font-family:var(--f-disp); font-size:13px; letter-spacing:.06em; color:var(--hot)}
.cadock-addr{flex:1 1 0; min-width:0; font-size:10.4px; letter-spacing:-.01em; white-space:nowrap; user-select:all; color:var(--pad-ink)}
.cadock-acts{display:flex; align-items:center; gap:12px; flex:1 0 100%; justify-content:flex-end}
.cadock-copy{border:none; background:var(--hot); color:var(--ink); border-radius:8px; padding:6px 16px; font-weight:800; font-size:13px}
.cadock-copy[data-done="1"]{background:var(--pad-ink)}
.cadock-gm{font-size:12px; color:#BDB3A3; text-decoration:none}
.cadock-gm:hover{color:var(--paper)}

/* ---------- overlay ---------- */
.sheetover{position:fixed; inset:0; background:rgba(27,23,18,.45); z-index:60; display:flex; align-items:flex-end; justify-content:center}
.sheetover.hide{display:none}
.sheetover-box{background:var(--paper); width:min(560px,100%); max-height:80vh; overflow:auto; border-radius:14px 14px 0 0; padding:16px}
.sheetover-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.sheetover-top button{border:none; background:none; font-size:24px; line-height:1}
.picks{display:flex; flex-direction:column; gap:8px}
.picks button{border:1.5px solid var(--ink); background:var(--paper); border-radius:6px; padding:12px; text-align:left; font-weight:600}
.popnote{position:fixed; left:50%; top:16px; transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:9px 14px; border-radius:8px; font-size:13px; z-index:70; max-width:90vw}

/* ---------- 720+: one column, wider measure, bigger object ---------- */
@media (min-width:720px){
  body{max-width:720px; margin:0 auto; padding-bottom:200px}
  .cue-count{padding:26px 24px 8px}
  .cue-fig{font-size:176px}
  .cue-cap{font-size:18px}
  .pad-zone, .feed-zone{padding-left:24px; padding-right:24px}
  .pad-bank{gap:12px}
  .pad-cell{aspect-ratio:1/1; padding:10px}
  .pad-n{font-size:34px}
  .pad-w{font-size:11px}
  .pad-w .short{display:none} .pad-w .long{display:inline}
  .cadock{flex-wrap:nowrap; padding:10px 12px 10px 18px; border-radius:999px}
  .cadock-addr{font-size:13px}
  .cadock-acts{flex:0 0 auto}
}

/* ---------- 1000+: split pane — the pad deck left, the draw + tape right ---------- */
@media (min-width:1000px){
  body{
    max-width:1180px; padding:0 24px 190px;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:0;
    grid-template-areas:"count feed" "pads feed" "base base"; grid-template-rows:auto 1fr auto;
  }
  .pad-zone{align-self:start}
  .cue-count{padding:34px 40px 8px 0}
  .pad-zone{padding:8px 40px 0 0}
  .feed-zone{padding:34px 0 0 40px; border-left:2px dashed var(--ink); position:relative}
  .cue-fig{font-size:220px}
  .says{font-size:18px}
  .pad-n{font-size:40px}
  .won-big{font-size:24px}
  .tape-rows{max-height:340px}
  .base{padding:18px 0 10px}
}
@media (min-width:1300px){ .cue-fig{font-size:250px} }
@media (prefers-reduced-motion:reduce){ .pad-cell{animation:none !important} }