/* =====================================================================
   UNASSISTED — the club: today's card, score sheet, locker, board, rules, duels
   ===================================================================== */

/* ---------- today's card ---------- */
.hub { padding-top: clamp(1.1rem, 3vw, 2rem); }
.hub-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.5rem; padding-bottom: .8rem; border-bottom: var(--line) solid var(--ink); }
.hub-no { font-size: clamp(3.4rem, 14vw, 7.4rem); margin-top: .15rem; }
.hub-date { display: grid; gap: .3rem; text-align: right; }
.hub-date .cond { font-size: clamp(1.3rem, 4vw, 1.9rem); }
.hub-fan { padding-top: 2.4rem; }
.hub-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.8rem; margin: 0 0 2.6rem; }
.hub-next { margin: 0; color: var(--ink-2); }
.hub-next b { color: var(--ink); font-weight: 400; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.hub-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.2rem, 4vw, 2.4rem); align-items: center; }
.hub-brain { display: grid; justify-items: center; gap: .5rem; padding: .9rem 1rem .8rem; text-align: center; text-decoration: none; background: var(--paper-hi); border: var(--line) solid var(--ink); border-radius: 12px; box-shadow: var(--shadow); transform: rotate(1.2deg); transition: transform .14s var(--ease-out), box-shadow .14s; }
.hub-brain:hover { transform: rotate(0deg) translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.hub-brain .brain { width: min(100%, 15rem); }
.hub-brain span { color: var(--ink-2); }
.hub-fried { font: 400 clamp(1.5rem, 5vw, 2rem)/1 var(--f-fat); color: var(--red); text-transform: uppercase; }
@media (max-width: 760px) { .hub-grid { grid-template-columns: 1fr; } .hub-date { text-align: left; } .hub-brain { transform: none; } }
.night { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.4rem; max-width: 40rem; margin: 0 auto 2.6rem; background: var(--paper-hi); box-shadow: 5px 5px 0 var(--pink); transform: rotate(-.6deg); }
.night p { margin: 0; }

/* ---------- the score sheet ---------- */
.scoresheet { max-width: 46rem; margin: clamp(1.2rem, 3vw, 2rem) auto 0; padding: 1.4rem clamp(1rem, 4vw, 2.2rem) 1.5rem; }
.ss-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: var(--line) solid var(--ink); }
.ss-head .wm { font-size: clamp(1.3rem, 4.4vw, 1.9rem); }
.ss-meta { display: grid; grid-template-columns: auto auto 1fr; gap: .5rem 1.6rem; padding: .9rem 0; border-bottom: 2px dashed var(--ink); }
.ss-meta .kicker { display: block; color: var(--ink-2); font-size: .68rem; margin-bottom: .2rem; }
.ss-meta b { font: 900 clamp(1.15rem, 3.4vw, 1.5rem)/1 var(--f-cond); letter-spacing: .03em; text-transform: uppercase; }
.ss-table { width: 100%; border-collapse: collapse; }
.ss-table td { padding: .75rem .35rem; border-bottom: 2px solid var(--ink); vertical-align: middle; }
.ss-no { width: 2.4rem; font: 400 1.15rem/1 var(--f-fat); }
.ss-ev { font: 900 clamp(1.15rem, 3.6vw, 1.45rem)/1.05 var(--f-cond); letter-spacing: .04em; text-transform: uppercase; }
.ss-ev small { display: block; margin-top: .25rem; font: 400 .82rem/1.25 var(--f-type); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.ss-barcell { width: 34%; }
.ss-bar { position: relative; height: .95rem; border: 2px solid var(--ink); background: var(--paper); overflow: hidden; }
.ss-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--tone); transition: width .9s var(--ease-out); }
.ss-pts { width: 4.2rem; text-align: right; font: 400 clamp(1.4rem, 5vw, 1.9rem)/1 var(--f-fat); }
tr.todo { opacity: .45; }
@media (max-width: 560px) { .ss-barcell { display: none; } }
.ss-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; }
.ss-sig { display: grid; gap: .2rem; min-width: 9rem; }
.ss-sig .kicker { border-top: 2px solid var(--ink); padding-top: .3rem; font-size: .66rem; color: var(--ink-2); }
.sigmark { width: 11rem; max-width: 100%; height: 3.4rem; overflow: visible; }
.sigmark path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sig-none { font: 700 2rem/1 var(--f-hand); color: var(--red); }
.ss-total { display: flex; align-items: baseline; gap: .7rem; }
.ss-total b { font: 400 clamp(4.2rem, 17vw, 7.4rem)/.82 var(--f-fat); color: var(--red); font-variant-numeric: tabular-nums; }
.ss-total small { font: 900 1.3rem/1 var(--f-cond); letter-spacing: .08em; }
.ss-stamps { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; min-height: 0; margin-top: .9rem; }
.ss-stamps:empty { display: none; }
.after { max-width: 46rem; margin: 2rem auto 0; display: grid; gap: 1.6rem; }
.after-note { margin: 0; }
.after-punch { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.4rem; align-items: center; }
.after-punch-side { display: grid; gap: .7rem; justify-items: start; }
.after-punch-side p { margin: 0; }
.punched-line { font: 400 1.1rem/1.35 var(--f-type); }
.punched-line b { display: block; font: 400 2.2rem/1 var(--f-fat); color: var(--red); text-transform: uppercase; }
.fried-move { margin: 0; font-size: 1.05rem; }
.fried-move i { font-style: normal; color: var(--ink-3); }
.fried-move b { font: 900 1.25rem/1 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; }
.fried-move span { margin-left: .5rem; font: 900 1rem/1 var(--f-cond); }
.fried-move .up { color: var(--green); } .fried-move .down { color: var(--red); }
@media (max-width: 640px) { .after-punch { grid-template-columns: 1fr; } }
.share h2 { font-size: clamp(2rem, 7vw, 3rem); margin-bottom: .8rem; }
.share-text { margin: 0 0 1rem; padding: 1rem 1.1rem; background: var(--paper-hi); border: 2px dashed var(--ink); font: 400 clamp(.82rem, 2.6vw, 1rem)/1.5 var(--f-type); white-space: pre-wrap; overflow-x: auto; }
.share-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: .7rem; }
.rankline { margin: 0; padding: .8rem 1rem; border: var(--line) solid var(--ink); background: var(--yellow); color: var(--dark); }
.rankline .link { color: var(--dark); }

/* ---------- the locker ---------- */
.locker h2, .rulespage h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin-bottom: .9rem; display: flex; align-items: baseline; gap: .8rem; }
.locker h2 small { font: 400 .9rem/1 var(--f-type); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.locker .sec-head h1 { font-size: clamp(2.4rem, 9vw, 5rem); word-break: break-word; }
.lk-sec { margin-top: clamp(2.2rem, 6vw, 3.4rem); }
.lk-card { max-width: 30rem; }
.lk-sig { display: grid; gap: .2rem; margin-top: .4rem; }
.lk-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.4rem, 5vw, 3rem); align-items: center; }
.facts { margin: 0; display: grid; gap: .1rem; }
.facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 2px dashed var(--ink); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font: 900 1.1rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.facts dd { margin: 0; font: 400 clamp(1.8rem, 6vw, 2.5rem)/1 var(--f-fat); }
@media (max-width: 760px) { .lk-row { grid-template-columns: 1fr; } }

/* the head map: five zones, each filled to your current form */
.brain { width: 100%; height: auto; overflow: visible; }
.bz-stem { fill: var(--paper-lo); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.bz-base { fill: var(--paper-lo); }
.bz-fill { fill: var(--tone); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--lv, 0)); transition: transform .6s var(--ease-out); }
.bz-fill.t-slate { fill: var(--green); }
.bz-fold { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; opacity: .28; }
.bz-line { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.bz-num { font: 400 22px/1 var(--f-fat); fill: var(--ink); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--paper-hi); stroke-width: 6px; stroke-linejoin: round; }
.bz-soft { fill: none; stroke: var(--red); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
/* …and the same brain in a frying pan (the fry test). --heat runs 0 to 1. */
.brain.pan { --heat: 0; }
.pan-body, .pan-lip, .pan-handle { fill: var(--slate); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.pan-floor { fill: color-mix(in srgb, var(--slate) 80%, var(--paper-hi)); }
.pan-glow { fill: var(--red); opacity: calc(var(--heat) * .6); filter: blur(9px); }
.pan-steam path { fill: none; stroke: var(--ink-3); stroke-width: 4; stroke-linecap: round; opacity: calc((var(--heat) - .15) * 1.25); animation: steam 2.4s ease-in-out infinite; }
.pan-steam path:nth-child(2) { animation-delay: .5s; } .pan-steam path:nth-child(3) { animation-delay: 1s; }
@keyframes steam { 0%, 100% { transform: translateY(7px); } 50% { transform: translateY(-5px); } }
.headmap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem clamp(1.4rem, 5vw, 3.2rem); align-items: center; padding: clamp(1rem, 3.5vw, 1.8rem); background: var(--paper-hi); border: var(--line) solid var(--ink); box-shadow: var(--shadow-lg); }
.headmap-fig { margin: 0; }
.headmap h2 { font-size: clamp(2.6rem, 8vw, 4.4rem); margin: .2rem 0 .4rem; }
.headmap .sec-sub { margin-bottom: .9rem; }
.headmap-fig figcaption { margin-top: .5rem; text-align: center; font: 400 .82rem/1.3 var(--f-type); color: var(--ink-2); }
.lk-rate { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .8rem; margin: 0 0 .8rem; }
.lk-rate b { font: 400 clamp(3.4rem, 12vw, 5.4rem)/.85 var(--f-fat); color: var(--red); }
.lk-rate span { font: 400 clamp(1.5rem, 5vw, 2.1rem)/1 var(--f-fat); text-transform: uppercase; }
.lk-rate small { display: block; margin-top: .35rem; font: 400 .85rem/1.2 var(--f-type); text-transform: none; color: var(--ink-2); }
.lk-rate a { font: 700 1rem/1 var(--f-cond); letter-spacing: .1em; }
.lk-rate small a { font: inherit; letter-spacing: 0; }
.bz-legend { list-style: none; margin: 0; padding: 0; }
.bz-legend li { display: grid; grid-template-columns: 1.05rem 1fr auto 2.6rem; gap: .65rem; align-items: center; padding: .42rem 0; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.bz-legend li:last-child { border-bottom: 0; }
.bz-legend i { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--tone); border: 2px solid var(--ink); }
.bz-legend .t-slate i { background: var(--green); }
.bz-legend span { font: 900 1.12rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.bz-legend em { font: 400 .82rem/1 var(--f-type); font-style: normal; }
.bz-legend em.up { color: var(--green); } .bz-legend em.down { color: var(--red); }
.bz-legend b { text-align: right; font: 400 1.35rem/1 var(--f-fat); }
.bz-legend li.soft span { color: var(--red); }
.soft-tip { margin: 1.3rem 0 0; font-size: 1.12rem; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-.8deg); }
.soft-tip b { font-weight: 700; }
.scrub { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; padding-top: 1rem; border-top: 2px dashed var(--ink); }
.scrub input { flex: 1 1 10rem; min-width: 0; min-height: 2.5rem; accent-color: var(--red); }
.scrub span { color: var(--ink-2); }
@media (max-width: 760px) { .headmap { grid-template-columns: 1fr; } }

.passport { list-style: none; margin: 0; padding: 1.4rem 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1rem; background: var(--paper-hi); border: var(--line) solid var(--ink); box-shadow: var(--shadow); }
.passport li { display: grid; justify-items: center; align-content: start; gap: .55rem; text-align: center; }
.passport .stamp { font-size: clamp(.85rem, 2.4vw, 1.1rem); }
.passport small { font: 400 .76rem/1.3 var(--f-type); color: var(--ink-2); max-width: 13rem; }
.passport .ghost .stamp { color: var(--ink-3); border-style: dashed; filter: none; opacity: .45; mix-blend-mode: normal; }
.passport .ghost small { opacity: .7; }
@media (max-width: 760px) { .passport { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pages { display: grid; gap: .5rem; }
.pg { background: var(--paper-hi); border: 2px solid var(--ink); }
.pg summary { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: baseline; padding: .75rem .9rem; cursor: pointer; list-style: none; }
.pg summary::-webkit-details-marker { display: none; }
.pg-no { font: 900 .95rem/1 var(--f-cond); letter-spacing: .08em; color: var(--ink-2); }
.pg-q { font-weight: 600; }
.pg summary b { font: 400 1.3rem/1 var(--f-fat); }
.pg-text { margin: 0; padding: .2rem .9rem .9rem; font: 400 1rem/1.7 var(--f-type); white-space: pre-wrap; }
.settings { display: grid; gap: .2rem; }
.settings label { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; min-height: 2.6rem; cursor: pointer; }
.settings .remind { margin-top: .35rem; }
.settings input[type="checkbox"] { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--red); }
.settings span { font: 900 1.12rem/1.1 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; }
.lk-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.1rem 0 .7rem; }

/* ---------- reminders and rain checks ---------- */
.remind { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.remind-solo { font: 900 1.12rem/1.1 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; }
.remind-tip { flex: 1 0 100%; margin: 0; max-width: 30rem; }
.remind-time { padding: .4rem .5rem .28rem; font: 400 1.05rem/1 var(--f-type); color: var(--ink); background: var(--paper-hi); border: 2px solid var(--ink); border-radius: 5px; }
.nudge { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; padding-top: 1.1rem; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-.4deg); }
.nudge b { font: 900 1.25rem/1 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; }
.punch-checks { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; margin: .9rem 0 0; padding-top: .75rem; border-top: 2px dashed var(--ink); }
.punch-checks small { font: 400 .8rem/1.2 var(--f-type); color: var(--ink-2); }
.stub { padding: .32rem .65rem .22rem; border: 2px dashed var(--ink-3); border-radius: 4px; color: var(--ink-3); font: 900 .76rem/1 var(--f-cond); letter-spacing: .13em; text-transform: uppercase; }
.stub.on { border: 2px solid var(--ink); background: var(--yellow); color: var(--dark); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-2deg); }
.stub.on + .stub.on { transform: rotate(1.5deg); }

/* ---------- the Board: chalk on slate ---------- */
.chalkboard { max-width: 44rem; background: var(--slate); color: var(--chalk); border: .7rem solid #8A6842; outline: var(--line) solid var(--ink); border-radius: 5px; box-shadow: var(--shadow-lg); padding: 1.2rem clamp(1rem, 4vw, 1.8rem) 1.4rem; font-family: var(--f-hand); min-height: 12rem; }
.chalk-note { margin: 1.6rem 0; font-size: 1.3rem; line-height: 1.35; text-align: center; }
.chalk-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .7rem; margin-bottom: .4rem; border-bottom: 2px dashed color-mix(in srgb, var(--chalk) 40%, transparent); font: 700 .9rem/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); }
.chalk-head b { font: 700 1.6rem/1 var(--f-hand); letter-spacing: 0; }
.chalk-list { list-style: none; margin: 0; padding: 0; }
.chalk-list li { display: grid; grid-template-columns: 2.4rem 1fr auto 3.6rem; gap: .7rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--chalk) 16%, transparent); font-size: 1.3rem; }
.chalk-list li.you { color: var(--yellow); }
.chalk-rank { font-weight: 700; opacity: .7; }
.chalk-name em { font: 700 .7rem/1 var(--f-cond); font-style: normal; letter-spacing: .16em; text-transform: uppercase; padding: .2em .45em .1em; border: 1.5px solid currentColor; border-radius: 99px; margin-left: .4rem; vertical-align: middle; }
.chalk-marks i { font: 400 .78rem/1 var(--f-type); font-style: normal; opacity: .7; margin-left: .5rem; }
.chalk-list b { text-align: right; font-size: 1.6rem; font-weight: 700; }
.chalk-wait { margin: .9rem 0 0; font-size: 1.1rem; line-height: 1.35; opacity: .75; }
/* on a phone the marks drop under the name, so a long ring name keeps its line */
@media (max-width: 560px) {
  .chalk-list li { grid-template-columns: 1.7rem 1fr 3.2rem; row-gap: 0; font-size: 1.15rem; }
  .chalk-list b { font-size: 1.4rem; }
  .chalkboard { padding-inline: .9rem; }
  .chalk-marks { grid-column: 2; grid-row: 2; }
  .chalk-marks:empty { display: none; }
  .chalk-marks i:first-child { margin-left: 0; }
  .chalk-list b { grid-column: 3; grid-row: 1; }
}
.board-foot { max-width: 44rem; margin-top: 1.2rem; }

/* ---------- private leagues (they live under the Board tab) ---------- */
.lg-chips, .lg-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.lg-chips .pill, .lg-tabs .pill { padding: .55em .85em .42em; font-size: .9rem; text-decoration: none; cursor: pointer; }
.lg-chips .pill:not(.k):hover, .lg-tabs .pill:not(.k):hover { background: var(--yellow); color: var(--dark); }
.lg-tabs { margin-bottom: .8rem; }
.lg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 1.2rem; }
.lg-list { list-style: none; max-width: 44rem; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.lg-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem 1rem .7rem; text-decoration: none; background: var(--paper-hi); border: var(--line) solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .08s ease-out, box-shadow .08s ease-out; }
.lg-row:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.lg-row b { font: 900 clamp(1.2rem, 4vw, 1.5rem)/1 var(--f-cond); letter-spacing: .04em; text-transform: uppercase; }
.lg-row span { font: 400 .85rem/1 var(--f-type); color: var(--ink-2); }
.lg-make, .lg-join { max-width: 44rem; margin-top: 1.5rem; padding-top: 1.1rem; box-shadow: 4px 4px 0 var(--ink); }
.lg-make .lg-actions { margin-top: 0; }
.lg-name { margin: .35rem 0 .9rem; font: 400 clamp(1.6rem, 6.4vw, 2.5rem)/1 var(--f-fat); text-transform: uppercase; }
.lg-join { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.lg-join .kicker { flex: 1 0 100%; margin: 0; }
.lg-join .ans-in { flex: 1 1 9rem; font-size: 1.25rem; letter-spacing: .12em; text-transform: uppercase; }
.lg-invite { margin-top: 1.2rem; }
.rank-leagues { display: grid; gap: .6rem; }
.rank-leagues:empty { display: none; }
.board-foot a { text-decoration: underline; }

/* ---------- rules ---------- */
.rulespage { max-width: 50rem; }
.rules-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.rules-nav a { font: 900 .95rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: .5rem .8rem .4rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-hi); }
.rules-nav a:hover { background: var(--yellow); color: var(--dark); }
.rule-sec { margin-top: clamp(2.2rem, 6vw, 3.2rem); scroll-margin-top: 1rem; }
.rule-sec p { font-size: 1.08rem; max-width: 44rem; }
.signs.small { gap: .9rem; margin: 1.4rem 0 .5rem; }
.signs.small .sign { padding: 1.1rem 1rem 1rem; }
.signs.small .sign b { font-size: clamp(1.5rem, 4vw, 2rem); margin: .35rem 0 .4rem; }
.signs.small .sign span { font-size: .92rem; }
.scoring { display: grid; gap: .7rem; }
.scoring-row { background: var(--paper-hi); border: var(--line) solid var(--ink); border-left: 1rem solid var(--tone); padding: .9rem 1.1rem; }
.scoring-row header { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-bottom: .4rem; }
.scoring-no { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 400 .9rem/1 var(--f-fat); }
.scoring-row h3 { font-size: 1.5rem; margin-right: auto; }
.scoring-row p { margin: 0; font-size: 1rem; }
.classes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.classes span { padding: .5rem .7rem .4rem; background: var(--paper-hi); border: 2px solid var(--ink); font: 400 .82rem/1.2 var(--f-type); }
.classes b { display: block; font: 900 1rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.receipts, .plain-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .6rem; }
.receipts li { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1rem; align-items: baseline; padding: .7rem .9rem; background: var(--paper-hi); border: 2px solid var(--ink); }
.receipts b { font: 900 1.1rem/1.1 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; }
.receipts span { font-size: .96rem; }
@media (max-width: 640px) { .receipts li { grid-template-columns: 1fr; gap: .3rem; } }
.plain-list li { padding-left: 1.4rem; position: relative; font-size: 1.04rem; max-width: 44rem; }
.plain-list li::before { content: "✦"; position: absolute; left: 0; color: var(--red); }

/* ---------- duels ---------- */
.duel { padding-top: clamp(1.4rem, 4vw, 2.6rem); }
.callout { max-width: 46rem; margin: 0 auto; padding: clamp(1.4rem, 5vw, 2.6rem); background: var(--yellow); color: var(--dark); border: var(--line) solid var(--ink); box-shadow: var(--shadow-lg); transform: rotate(-.6deg); position: relative; }
.callout h1 { display: grid; gap: .1rem; font-size: clamp(2.2rem, 9vw, 4.6rem); margin: .5rem 0 1rem; word-break: break-word; }
.callout-vs { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--dark); color: var(--yellow); display: grid; place-items: center; font-size: 1.1rem; transform: rotate(-10deg); margin: .2rem 0; }
.callout-them { color: var(--red); }
.callout-card { font-size: 1.3rem; margin: 0 0 .6rem; }
.callout-score { font: 400 1.2rem/1.3 var(--f-type); margin: 0 0 1.4rem; }
.callout-score b { font: 400 2rem/1 var(--f-fat); }
.callout .bellbtn { background: var(--dark); color: var(--light); }
.callout .bellbtn-art .art .o, .callout .bellbtn-art .art .t { stroke: var(--light); }
.callout .bellbtn-art .art .fk { fill: var(--light); } .callout .bellbtn-art .art .o.fw, .callout .bellbtn-art .art .fw { fill: var(--dark); }
.tape-head { font-size: clamp(2.6rem, 10vw, 5.6rem); margin: .3rem 0 1.4rem; word-break: break-word; }
.tapegrid { max-width: 46rem; padding: .6rem clamp(.8rem, 3vw, 1.6rem) 1rem; }
.tape-row { display: grid; grid-template-columns: 1fr 8.5rem 1fr; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 2px solid var(--ink); }
.tape-names b { font: 900 clamp(1rem, 3.4vw, 1.4rem)/1.05 var(--f-cond); letter-spacing: .04em; text-transform: uppercase; }
.tape-names b:last-child { text-align: right; }
.tape-mid { text-align: center; font: 900 1.05rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.tape-side { display: grid; grid-template-columns: 3rem 1fr; gap: .6rem; align-items: center; }
.tape-side.them { grid-template-columns: 1fr 3rem; }
.tape-side b { font: 400 1.5rem/1 var(--f-fat); color: var(--ink-3); }
.tape-side.them b { text-align: right; }
.tape-side.win b { color: var(--ink); }
.tape-bar { position: relative; height: .95rem; border: 2px solid var(--ink); background: var(--paper); }
.tape-bar i { position: absolute; top: 0; bottom: 0; background: var(--tone); }
.tape-side.me .tape-bar i { right: 0; } .tape-side.them .tape-bar i { left: 0; }
.tape-total { border-bottom: 0; }
.tape-total b { font: 400 clamp(2.2rem, 9vw, 3.6rem)/1 var(--f-fat); color: var(--ink-3); }
.tape-total b:last-child { text-align: right; }
.tape-total b.win { color: var(--red); }
@media (max-width: 560px) { .tape-row { grid-template-columns: 1fr 5.6rem 1fr; gap: .4rem; } .tape-mid { font-size: .85rem; } .tape-side { grid-template-columns: 2.3rem 1fr; } .tape-side.them { grid-template-columns: 1fr 2.3rem; } .tape-side b { font-size: 1.15rem; } }

/* ---------- suggestion box ---------- */
.saypage { max-width: 44rem; }
.say { display: grid; gap: .8rem; padding: 1.1rem 1.1rem 1rem; box-shadow: 4px 4px 0 var(--ink); margin-bottom: .9rem; }
.say label { font: 900 clamp(1.25rem, 4.6vw, 1.6rem)/1.1 var(--f-cond); letter-spacing: .03em; text-transform: uppercase; }
.say textarea { display: block; width: 100%; min-height: 9rem; resize: vertical; padding: .7rem .8rem; font: 400 1.1rem/1.45 var(--f-type); background: var(--paper); border: var(--line) solid var(--ink); border-radius: 6px; }
.say textarea:focus { outline: 3px solid var(--blue); outline-offset: 2px; }
.say-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.say-done { font: 400 1.3rem/1.3 var(--f-type); margin: .4rem 0 1rem; max-width: 22rem; }

/* ---------- backstage: the numbers, for whoever runs the club ---------- */
.bk-key { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; max-width: 34rem; box-shadow: 4px 4px 0 var(--ink); margin-bottom: .8rem; }
.bk-key label { font: 900 1.1rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; }
.bk-key .ans-in { font-size: 1.2rem; }
.bk-lock { background: none; border: 0; padding: 0; margin-left: .6rem; cursor: pointer; }
.bk-tiles { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.bk-tiles li { padding: .8rem .9rem .7rem; background: var(--paper-hi); border: var(--line) solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.bk-tiles b { display: block; font: 400 clamp(1.7rem, 6vw, 2.3rem)/1 var(--f-fat); }
.bk-tiles span { font: 400 .8rem/1.25 var(--f-type); color: var(--ink-2); }
.bk-sec { margin-top: clamp(1.8rem, 5vw, 2.6rem); }
.bk-sec h2 { font-size: clamp(1.5rem, 5vw, 2rem); margin: 0 0 .6rem; }
.bk-sec h2 small { font: 400 .9rem/1 var(--f-type); color: var(--ink-2); margin-left: .4rem; }
.bk-sec > p { max-width: 46rem; }
.bk-funnel { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; font: 400 1rem/1.3 var(--f-type); }
.bk-funnel b { font: 400 1.6rem/1 var(--f-fat); }
.bk-funnel i { font-style: normal; color: var(--red); }
.bk-funnel small { color: var(--ink-2); }
.bk-scroll { overflow-x: auto; margin: .6rem 0; background: var(--paper-hi); border: var(--line) solid var(--ink); }
.bk-table { width: 100%; border-collapse: collapse; white-space: nowrap; font: 400 .88rem/1.2 var(--f-type); }
.bk-table th, .bk-table td { padding: .5rem .7rem .4rem; text-align: right; border-bottom: 1px solid var(--paper-lo); }
.bk-table th { font: 900 .8rem/1.1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--paper); border-bottom: 0; }
.bk-table th:first-child, .bk-table td:first-child { position: sticky; left: 0; text-align: left; }
.bk-table td:first-child { background: var(--paper-hi); }
.bk-notes { list-style: none; max-width: 50rem; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bk-notes li { padding: .8rem 1rem .7rem; background: var(--paper-hi); border: 2px solid var(--ink); }
.bk-notes p { margin: 0 0 .35rem; font-size: 1.02rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.bk-errors p { font: 400 .9rem/1.35 var(--f-type); }

/* ---------- page tops ---------- */
.locker, .boardwrap, .rulespage, .saypage, .bkpage { padding-top: clamp(1.2rem, 3.5vw, 2.2rem); }
.sec-head h1 { font-size: clamp(2.6rem, 9vw, 5.2rem); margin: .25rem 0 .5rem; }
.scard-score { margin-top: 0; }

/* score sheet foot on narrow screens: total drops under the signature */
.ss-foot { flex-wrap: wrap; }
.ss-total { margin-left: auto; }
@media (max-width: 560px) { .ss-total b { font-size: clamp(3.6rem, 19vw, 5rem); } .ss-meta { grid-template-columns: auto 1fr; } .ss-meta div:last-child { grid-column: 1 / -1; } }