/* board.css: the run clock, the visitor stub and the SPEEDRUN BOARD, cut from the same cardboard kit as the sign
   (style.css: --cb-fiber, --cb-grain, --cb-light, --cb-flutes, --cb-brad, the board colours, .cb-btn, .cb-stamp).
   Light: the low sun is behind-right, so shadows fall down-left and rims catch on the right. */

/* ---- the run clock: a scoreboard stub pinned over the quiz face's top edge (quiz.js) ---- */
#runclock{position:absolute;left:50%;top:0;z-index:5;translate:-50% -62%;rotate:-1.6deg;pointer-events:none;
  font:700 clamp(11px,2.55cqw,20px)/1 'Barlow Condensed','Roboto Slab',sans-serif;filter:drop-shadow(-3px 4px 3px rgba(40,16,4,.4))}
#runclock .rc-stub{display:flex;align-items:center;gap:.5em;padding:.32em 1.05em .32em 1.55em;border-radius:2px;
  background:var(--cb-brad) .62em 50%/1.05em 1.05em no-repeat,var(--cb-fiber),var(--cb-grain),var(--cb-light),#f6e8c8;
  box-shadow:inset 0 -2px 0 rgba(110,70,30,.35),inset -1.5px 0 0 rgba(255,214,150,.5);
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 .3em,#000 .33em) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 .3em,#000 .33em) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,#0000 .3em,#000 .33em) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 .3em,#000 .33em) right/51% 100% no-repeat}
#runclock .rc-k{font:.82em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.14em;color:#b02a15;mix-blend-mode:multiply;padding-top:.1em}
/* the scoreboard window: a dark slot punched in the stub, brass digits behind it */
#runclock .rc-w{display:inline-block;padding:.2em .45em .14em;border-radius:3px;background:linear-gradient(180deg,#120b05,#2b1b0d 55%,#1a1008);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,214,150,.18),0 1px 0 rgba(255,244,220,.7)}
#runclock b{display:inline-block;min-width:4.1ch;text-align:right;font-weight:700;font-size:1.22em;letter-spacing:.04em;font-variant-numeric:tabular-nums;
  color:var(--cb-mustard);text-shadow:0 0 .35em rgba(239,192,78,.45)}
#runclock.stopped b{color:var(--cb-kick);text-shadow:0 0 .4em rgba(83,252,24,.5)}
#runclock.stopped .rc-k::after{content:' ✓';color:var(--cb-laurel)}
.cb-portrait #runclock{top:9px;translate:-50% 0;font-size:12.5px}
.cb-portrait #quiz:has(#runclock){padding-top:calc(10% + 26px)}   /* room for the clock above the header strip */

/* the rank face: three buttons in one row, wrapping on narrow signs */
#quiz .endrow{display:flex;flex-wrap:wrap;justify-content:center;gap:.7em .8em;align-items:center}
#quiz .endrow .cta{font-size:clamp(12px,3.2cqw,24px)}
#quiz .endrow .next{padding-inline:1.5em 1.55em}

/* ---- the visitor tab: a KCC felt patch hanging from the top of the page on a bit of twine (felt + stitch: depth.css).
   On it, LIFETIME VISITORS on a seven-place cardboard odometer (0,000,000: built for a million+). Pull it and a
   cardboard flap unfolds under it: HERE NOW (live dot), RUNS FINISHED, and FULL BOARD ›. ---- */
#visits{position:fixed;top:0;left:16px;z-index:9;font:12px/1 'Barlow Condensed','Roboto Slab',sans-serif}
#visits[hidden]{display:none}
#visits::before{content:'';position:absolute;left:19px;top:0;width:2px;height:14px;background:#b88e55;box-shadow:1px 0 0 rgba(40,16,4,.35),-.5px 0 0 rgba(255,214,150,.4)}
#vtTab{margin-top:11px;display:flex;align-items:center;gap:.55em;cursor:pointer;color:var(--thread);
  font:700 13px/1 'Barlow Condensed',sans-serif;padding:.62em .75em .55em 1.55em;border-radius:6px;rotate:-2deg;transform-origin:20px 0;
  box-shadow:var(--dp-shadow-hang),var(--dp-pillow);transition:rotate .25s}
/* the brass brad the twine is tied through */
#vtTab::before{content:'';position:absolute;left:9px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;
  background:radial-gradient(circle at 62% 36%,#fff4cc,#e3b85a 30%,#8a6220 70%,#4b3210);box-shadow:-1.5px 2px 1.5px rgba(20,8,1,.55),inset 0 0 0 .5px rgba(60,36,8,.6)}
#vtTab:hover{rotate:0deg}
#vtTab:focus-visible{outline:2px solid var(--cb-kick);outline-offset:3px}
#vtTab .vt-k{font:10.5px/1.05 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.11em;padding-top:.15em;text-align:left}
.vt-car{display:inline-block;font-size:.9em;transition:rotate .2s}
#visits.open .vt-car{rotate:180deg}
/* the odometer: a dark window punched in a kraft frame, a cardboard tile per digit, each with its flap hinge */
.od{display:inline-flex;align-items:stretch;gap:2px;padding:3px;border-radius:3px;
  background:linear-gradient(180deg,#120b05,#2b1b0d 55%,#1a1008);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,214,150,.15),0 0 0 1.5px #b07a42,0 0 0 2.5px #5a3314,-2px 3px 2px 1px rgba(10,4,0,.45)}
.od-d{position:relative;display:grid;place-items:center;width:.98em;height:1.4em;border-radius:2px;font:700 17px/1 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;color:#1d140b;
  background:var(--cb-fiber),linear-gradient(transparent calc(50% - .6px),rgba(60,30,8,.5) calc(50% - .6px) calc(50% + .4px),rgba(255,244,220,.5) calc(50% + .4px) calc(50% + 1px),transparent 0),
    linear-gradient(100deg,rgba(40,16,4,.12),transparent 40%,rgba(255,236,190,.35)),linear-gradient(#fbf0d6 50%,#ecd9b2 50%);
  box-shadow:0 1.5px 0 #8a6234,inset -1px 0 0 rgba(255,240,200,.75),inset 1px 0 0 rgba(90,50,16,.2),-1px 1.5px 1.5px rgba(0,0,0,.55);
  text-shadow:.4px .3px 0 rgba(120,60,20,.22);transform-origin:50% 0;backface-visibility:hidden}
.od-d b{font-weight:700;padding-top:.06em}
.od-z{filter:brightness(.9) sepia(.18)}                  /* places the count hasn't reached yet: still rolled to 0, a duller board */
.od-z b{color:#5b4429}
.od-c{align-self:flex-end;width:.26em;margin:0 0 -2px;font:700 15px/1 'Barlow Condensed',sans-serif;font-style:normal;color:#e9d7b2;text-align:center}
@media (prefers-reduced-motion:no-preference){
  .od-d.od-flip{animation:od-flip .55s var(--od-wait,0ms) cubic-bezier(.3,1.2,.5,1) backwards}
}
@keyframes od-flip{0%{transform:perspective(60px) rotateX(-95deg)}58%{transform:perspective(60px) rotateX(16deg)}80%{transform:perspective(60px) rotateX(-5deg)}100%{transform:none}}
/* the flap: cream board hinged under the patch, brass brads at its top corners; it unfolds down */
#vtDrop{position:absolute;left:6px;top:calc(100% - 4px);width:max-content;min-width:218px;max-width:calc(100vw - 32px);padding:1.15em 1.05em 1em;
  background:var(--cb-brad) .55em .5em/.95em .95em no-repeat padding-box,var(--cb-brad) calc(100% - .55em) .5em/.95em .95em no-repeat padding-box,
    var(--cb-fiber) padding-box,var(--cb-grain) padding-box,var(--cb-light) padding-box,linear-gradient(#f6e8c8,#ecd6ad) padding-box,var(--cb-flutes) border-box;
  border:4px solid transparent;border-radius:3px 3px 6px 6px;box-shadow:var(--dp-shadow-hang),var(--dp-rim);rotate:-1deg;transform-origin:50% 0;
  visibility:hidden;transform:perspective(700px) rotateX(-90deg);transition:transform .3s cubic-bezier(.5,0,.75,.4),visibility 0s .3s}
#visits.open #vtDrop{visibility:visible;transform:none;transition:transform .5s cubic-bezier(.25,1.45,.45,1)}
/* the fold it hangs from: a scored line along its top */
#vtDrop::before{content:'';position:absolute;left:1.6em;right:1.6em;top:.35em;border-top:1.5px dashed rgba(110,70,30,.4)}
#vtDrop dl{margin:0;display:grid;gap:.1em}
#vtDrop dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:1.4em;padding:.38em 0 .3em;border-bottom:1.5px dashed rgba(110,70,30,.32)}
#vtDrop dt{display:flex;align-items:center;gap:.45em;font:11.5px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b3f1a;mix-blend-mode:multiply}
#vtDrop dd{margin:0;font:700 22px/1 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;color:#22160b}
#vtDrop dd{font-size:26px}
/* the live dot: a bead of Kick-green thread, a French knot */
.vt-dot{flex:none;width:.72em;height:.72em;border-radius:50%;background:radial-gradient(circle at 62% 35%,#d8ffc0,#53fc18 38%,#2c9a0a 75%,#155a04);
  box-shadow:0 0 0 1.2px #1d5c10,-1px 1.5px 1px rgba(20,8,1,.45),0 0 6px rgba(83,252,24,.75);animation:vt-live 1.6s ease-in-out infinite}
@keyframes vt-live{50%{box-shadow:0 0 0 1.2px #1d5c10,-1px 1.5px 1px rgba(20,8,1,.45),0 0 1px rgba(83,252,24,.15)}}
/* FULL BOARD ›: a cream felt patch, green thread (shares .lb-full's look) */
.vt-full{display:block;margin:.8em .1em .1em;padding:.62em .9em .5em;text-align:center;text-decoration:none;rotate:-.6deg}
.vt-full:focus-visible{outline:2px solid var(--cb-laurel);outline-offset:3px}

/* ---- the SPEEDRUN BOARD: a cream card with a corrugated rim, taped up beside the sign ---- */
#lboard{position:fixed;z-index:8;display:flex;flex-direction:column;gap:.55em;overflow:hidden;color:#22160b;
  padding:.95em 1.05em 1em;font:500 14px/1.3 'Zilla Slab',Georgia,serif;
  --cb-face:#f6e8c8;background:var(--cb-fiber) padding-box,var(--cb-grain) padding-box,var(--cb-light) padding-box,
    radial-gradient(120% 90% at 30% 20%,#f8ebcf,#ecd3a8) padding-box,var(--cb-flutes) border-box;
  border:5px solid transparent;border-radius:6px;box-shadow:var(--dp-shadow-card),var(--dp-rim);rotate:.7deg;scrollbar-width:thin}
#lboard[hidden]{display:none}
#lboard.lb-in{animation:lb-in .55s cubic-bezier(.25,1.4,.45,1) both}
@keyframes lb-in{0%{opacity:0;transform:translateY(-26px) rotate(-3deg)}100%{opacity:1;transform:none}}
#lboard.over{left:50%;top:46%;translate:-50% -50%;width:min(420px,calc(100vw - 32px));rotate:0deg;box-shadow:0 0 0 100vmax rgba(18,10,4,.5),var(--dp-shadow-card),var(--dp-rim)}
/* the header: a laurel felt patch sewn across the top (felt, gold satin rim, cream running stitch: depth.css), the KCC
   crest on its own round patch sewn over its left end, SPEEDRUN BOARD in Kick-green chenille with a cream felt backing */
.lb-head{display:flex;align-items:center;gap:.6em;padding:.5em .45em .45em 52px;border-radius:5px;color:var(--thread);rotate:-.6deg;margin:.25em -.15em .2em;
  min-height:42px;box-shadow:var(--dp-shadow-hang),var(--dp-pillow)}
.lb-head::before{content:'';position:absolute;z-index:1;left:-9px;top:50%;width:56px;height:56px;margin-top:-28px;rotate:-9deg;box-sizing:border-box;border-radius:50%;
  border:3.5px solid transparent;
  background:repeating-linear-gradient(35deg,rgba(255,255,255,.06) 0 .7px,rgba(0,0,0,.07) .7px 1.5px) padding-box,
    url(kcc/kcc-crest-small.webp) 50% 52%/92% auto no-repeat padding-box,var(--dp-felt) padding-box,
    radial-gradient(circle at 64% 32%,#2b4a30,#173520 55%,#0c1f11) padding-box,
    repeating-conic-gradient(#fff0b8 0 2deg,#d9a441 2deg 5deg,#6e4a14 5deg 7deg) border-box;
  box-shadow:0 0 0 .6px rgba(50,28,6,.75),-3px 5px 5px rgba(14,6,1,.5),inset 3px -4px 6px rgba(0,0,0,.45),inset -1px 1px 2px rgba(255,240,200,.18)}
.lb-title{flex:1;min-width:0;white-space:nowrap;font:clamp(15px,1.35vw,21px)/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.08em;padding:.14em 0 0 .1em;
  background:var(--dp-chenille),linear-gradient(170deg,#b4ff8c,#53fc18 45%,#2fb70a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;
  filter:drop-shadow(1.1px 0 0 #efe0b8) drop-shadow(-1.1px 0 0 #efe0b8) drop-shadow(0 1.1px 0 #efe0b8) drop-shadow(0 -1.1px 0 #efe0b8) drop-shadow(-1px 1.4px 0 #0c2a14) drop-shadow(-1.5px 2.2px 1.4px rgba(0,0,0,.5))}
/* the set + TOP 10: a woven label sewn on over the header's bottom edge, its ends folded under and stitched down */
.lb-chip{position:absolute;z-index:2;right:38px;bottom:-.95em;font:700 11px/1 'Barlow Condensed',sans-serif;letter-spacing:.1em;color:#2a1806;padding:.38em .6em .32em;border-radius:1px;rotate:3deg;
  border-inline:1.5px dashed rgba(90,55,10,.55);text-shadow:.4px -.4px 0 rgba(255,255,255,.3),-.4px .5px 0 rgba(90,55,10,.35);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 1px,transparent 1px 2px),repeating-linear-gradient(0deg,rgba(90,55,10,.1) 0 1px,transparent 1px 2px),var(--cb-light),var(--cb-mustard);
  box-shadow:var(--dp-shadow-glued),var(--dp-rim)}
.lb-x{display:grid;place-items:center;flex:none;width:26px;height:26px;padding:0 0 1px;border:0;border-radius:50%;color:var(--thread);font:700 15px/1 'Barlow Condensed',sans-serif;
  background:var(--dp-felt),radial-gradient(circle at 64% 32%,#2d5a36,#1a4224 60%,#0f2a17);box-shadow:var(--dp-shadow-glued),inset 2px -2px 3px rgba(0,0,0,.35),inset 0 0 0 1.5px rgba(217,164,65,.55)}
.lb-x:hover{color:var(--cb-kick)}.lb-x:focus-visible{outline:2px solid var(--cb-kick);outline-offset:2px}
.lb-rules{margin:.45em 0 0;font:italic 500 12.5px/1.3 'Zilla Slab',serif;color:#4a3420;mix-blend-mode:multiply}
.lb-run{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em .45em;padding:.5em .7em .45em;border-radius:4px;position:relative;
  background:var(--cb-fiber),rgba(120,70,25,.12);box-shadow:inset -3px 4px 6px rgba(60,28,6,.3),inset 2px -2px 0 rgba(255,244,220,.55)}
.lb-run[hidden],.lb-post[hidden]{display:none}
.lb-k{font:11.5px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;color:#b02a15;margin-right:.2em}
.lb-big{font:700 26px/1 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;color:#1d140b}
.lb-in-k{font:italic 500 14px/1 'Zilla Slab',serif;color:#4a3420}
.lb-was{flex-basis:100%;font:500 12.5px/1.2 'Zilla Slab',serif;color:#6b4a2a}
.lb-pb.cb-stamp{position:absolute;right:.55em;top:50%;translate:0 -50%;font-size:14px;color:#b02a15;animation:cb-slam .45s cubic-bezier(.3,1.4,.5,1) both}
.lb-post{display:grid;gap:.35em}
.lb-post label{font:11.5px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;color:#6b3f1a}
.lb-tray{display:flex;gap:.55em;align-items:center;border-radius:8px;padding:.5em .55em .65em;background:var(--cb-fiber),rgba(120,70,25,.13);
  box-shadow:inset -3px 4px 6px rgba(60,28,6,.38),inset 2px -2px 0 rgba(255,244,220,.55),0 0 0 1px rgba(110,64,24,.22)}
/* the handle is written on a strip of white board in marker */
#lbHandle{flex:1;min-width:0;border:0;border-radius:2px;padding:.42em .6em .36em;font:700 19px/1 'Barlow Condensed',sans-serif;letter-spacing:.03em;color:#14243f;
  background:var(--cb-fiber),linear-gradient(#0000 calc(100% - 3px),rgba(61,83,132,.25) 0),#fffaf0;box-shadow:inset 0 2px 3px rgba(60,28,6,.3),0 1px 0 rgba(255,244,220,.8)}
#lbHandle::placeholder{color:#9a8565;font-weight:600}
#lbHandle:focus{outline:2px solid var(--cb-laurel);outline-offset:1px}
#lbSend{font:15px/1 'Homecoming Parade','Roboto Slab',serif;letter-spacing:.08em;padding:.6em .95em .5em;--e:3px;white-space:nowrap}
.lb-msg{margin:0;font:600 13.5px/1.3 'Zilla Slab',serif;color:#4a3420}
.lb-msg:empty{display:none}
.lb-msg.good{color:#1f5a2f}.lb-msg.bad{color:#b02a15}.lb-msg.warn{color:#6b3f1a}
/* the top 10, printed like a results sheet */
.lb-list{list-style:none;margin:0;padding:0;font:600 16px/1.1 'Barlow Condensed',sans-serif;counter-reset:none}
.lb-list li{display:grid;grid-template-columns:2.1em 1fr auto 4.4em;align-items:center;gap:.55em;padding:.34em .35em .3em;border-bottom:1.5px dashed rgba(110,70,30,.3)}
.lb-list li:nth-child(odd){background:rgba(120,70,25,.06)}
.lb-pos{display:inline-grid;place-items:center;width:1.75em;height:1.5em;border-radius:2px;font:700 14px/1 'Barlow Condensed',sans-serif;color:#2a1806;
  background:var(--cb-fiber),var(--cb-light),#e9d7b2;box-shadow:0 1.5px 0 #8a6234,var(--dp-shadow-glued),var(--dp-rim)}
/* the podium: 1st/2nd/3rd are round felt medals in gold, silver and bronze thread */
.lb-list li:nth-child(-n+3) .lb-pos{width:1.75em;height:1.75em;margin:-.15em 0;border-radius:50%;border:2.5px solid transparent;color:var(--th);
  text-shadow:.4px -.4px 0 rgba(255,255,255,.35),-.6px .8px 0 rgba(0,0,0,.45);
  background:var(--dp-felt) padding-box,radial-gradient(circle at 64% 32%,color-mix(in srgb,var(--felt) 75%,#fff),var(--felt) 55%,color-mix(in srgb,var(--felt) 65%,#000)) padding-box,
    repeating-conic-gradient(var(--sat-lt) 0 3deg,var(--sat) 3deg 7deg,var(--sat-dk) 7deg 10deg) border-box;
  box-shadow:0 0 0 .5px rgba(40,20,4,.7),var(--dp-shadow-glued),inset 2px -2px 3px rgba(0,0,0,.35)}
.lb-list li:nth-child(1) .lb-pos{--felt:#1f5a2f;--th:#ffe9a6;--sat:#d9a441;--sat-dk:#6e4a14;--sat-lt:#fff0b8}
.lb-list li:nth-child(2) .lb-pos{--felt:#1f5a2f;--th:#f2f0ea;--sat:#bfbcb4;--sat-dk:#5d5a54;--sat-lt:#fbfaf6}
.lb-list li:nth-child(3) .lb-pos{--felt:#1f5a2f;--th:#ffd2a8;--sat:#c98446;--sat-dk:#6a3a12;--sat-lt:#f6c590}
.lb-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1d140b}
.lb-s{font-variant-numeric:tabular-nums;color:#1f5a2f}
.lb-t{font-variant-numeric:tabular-nums;text-align:right;color:#2a1d10}
/* your row: highlighted in Kick-green marker */
.lb-list li.me{background:linear-gradient(100deg,rgba(83,252,24,.0) 0 1%,rgba(83,252,24,.42) 3% 96%,rgba(83,252,24,0) 99%)}
.lb-list li.me .lb-h::after{content:' (you)';font-weight:500;color:#1f5a2f}
.lb-empty{display:block!important;font:italic 500 14px/1.3 'Zilla Slab',serif;color:#6b4a2a;border:0!important}
.lb-me{margin:0;font:500 13.5px/1.3 'Zilla Slab',serif;color:#2a1d10}
.lb-me:empty{display:none}
.lb-k2{color:#1f5a2f;font-weight:600}

@media (max-width:520px){
  #visits{left:12px}
  #lboard{font-size:13px}
  .lb-list{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  #lboard.lb-in,.lb-pb.cb-stamp,.vt-dot{animation:none}
  #vtDrop,#visits.open #vtDrop,#vtTab,.vt-car{transition:none}
}

/* ---- identity on the board: a typed handle today; Kick rows (once "Log in with Kick" is on) get an avatar + a mark ---- */
.lb-h{display:flex;align-items:center;gap:.35em;min-width:0}
.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-av{width:1.35em;height:1.35em;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1.5px #1d5c10}
/* the "verified on Kick" mark (board.js KICK_MARK, also on board.html): a little tag cut from the KCC ribbon's black board
   (cream pinstripe, kraft rim, like kcc.css .kcc-badge) with a cream check and Kick's own K (the logo's first glyph,
   unaltered, #53FC18). Sized in em, so it follows whatever line it sits on. */
.kv{display:inline-flex;align-items:center;gap:.2em;flex:none;height:1.18em;padding:0 .34em 0 .28em;border-radius:2px;vertical-align:-.18em;rotate:-2deg;
  color:#f4eee0;background:var(--cb-fiber),linear-gradient(170deg,rgba(255,255,255,.1),transparent 45%,rgba(0,0,0,.3)),#0f1115;
  box-shadow:inset 0 0 0 1.5px #0f1115,inset 0 0 0 2.4px rgba(233,223,196,.55),0 0 0 1px #b98a52,-1.5px 2px 0 .5px #5a3314,-2px 3px 3px rgba(30,12,2,.35)}
.kv svg{display:block;flex:none}
.kv-chk{width:.56em;height:.56em}
.kv-k{width:.53em;height:.62em}
.lb-list li.me .lb-h::after{content:none}
.lb-list li.me .lb-name::after{content:' (you)';font-weight:500;color:#1f5a2f}
.lb-kick{display:grid;gap:.5em;padding-bottom:.2em}
.lb-kick .kick-login{display:flex;width:100%;font-size:16px;--rot:-.6deg}
.lb-kick[hidden],.lb-tray[hidden],.lb-post label[hidden]{display:none}
/* logged in with Kick: "POSTING AS <avatar> name ✓KICK" on the same pressed-in tray as the handle box, POST IT, and a
   small pencilled "log out" under it. Logged out: the line + the LOG IN WITH [Kick] button (.kick-login, below). */
.lb-as{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.35em .55em;border-radius:8px;padding:.5em .55em .45em .65em;
  background:var(--cb-fiber),rgba(120,70,25,.13);box-shadow:inset -3px 4px 6px rgba(60,28,6,.38),inset 2px -2px 0 rgba(255,244,220,.55),0 0 0 1px rgba(110,64,24,.22)}
.lb-as[hidden]{display:none}
.lb-as-who{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .4em;min-width:0;font:700 19px/1 'Barlow Condensed',sans-serif;color:#14243f}
.lb-as-who .lb-av{width:1.5em;height:1.5em}
.lb-as-who .lb-av[hidden]{display:none}
.lb-as-k{flex:0 0 100%;order:-1;font:11px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;color:#6b3f1a;padding-top:.15em}
#lbAsSend{font:15px/1 'Homecoming Parade','Roboto Slab',serif;letter-spacing:.08em;padding:.6em .95em .5em;--e:3px;white-space:nowrap}
.lb-out{grid-column:1/-1;justify-self:start;border:0;background:none;padding:.1em 0;cursor:pointer;
  font:italic 500 12.5px/1.2 'Zilla Slab',Georgia,serif;color:#6b4a2a;text-decoration:underline;text-decoration-style:dashed;text-underline-offset:2px}
.lb-out:hover{color:#b02a15}.lb-out:focus-visible{outline:2px solid var(--cb-laurel);outline-offset:2px}
/* FULL BOARD ›: a cream label at the foot of the panel, off to the full page (board.html) */
/* FULL BOARD ›: a cream felt patch at the foot of the panel (depth.css), off to the full page (board.html) */
.lb-full{align-self:flex-end;margin:.25em .15em .25em;padding:.62em .9em .5em;text-decoration:none;rotate:-1deg;transition:rotate .2s}
.lb-full:hover{rotate:0deg}
.lb-full:focus-visible{outline:2px solid var(--cb-laurel);outline-offset:2px}

/* ---- LOG IN WITH [Kick]: one button everywhere (the board panel, the full board page, KCC enrollment's "ENROLL WITH").
   A die-cut board in the KCC ribbon's black (cream pinstripe score line), the words in KCC Cardboard cream, then Kick's
   OFFICIAL wordmark (../kick-logo.svg, unaltered, its own #53FC18) as an <img>: Kick's letters are never redrawn.
   Markup: <a class="cb-btn kick-login" href="/auth/kick/start?return=..."><span class="kl-k">LOG IN WITH</span>
           <img class="kl-logo" src="../kick-logo.svg" alt="Kick" width="72" height="24"></a>
   .kl-say is the line above it ("Post your runs under your Kick name and get the verified mark."). ---- */
.cb-btn.kick-login{--cb-face:#121513;--cb-edge-c:#020302;--cb-text:#f4eee0;--cb-score:rgba(233,223,196,.42);--e:4px;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;text-decoration:none;cursor:pointer;
  font:1em/1 'KCC Cardboard','Homecoming Parade',Rockwell,Georgia,serif;letter-spacing:.07em;padding:.78em 1.25em .72em;
  background:var(--cb-fiber),linear-gradient(170deg,rgba(255,255,255,.09),transparent 45%,rgba(0,0,0,.3)),var(--cb-face);
  text-shadow:0 -.5px 0 #fff,-1px 1px 0 #6e675a,-1.5px 2px 0 #2c2820}
.cb-btn.kick-login:focus-visible{outline:2.5px solid var(--cb-kick);outline-offset:-5px}
.kick-login .kl-k{padding-top:.08em;white-space:nowrap}
.kick-login .kl-logo{display:block;flex:none;height:1.12em;width:auto;filter:drop-shadow(-1px 1.5px 0 rgba(0,0,0,.55))}
.kl-say{margin:0;font:600 13.5px/1.3 'Zilla Slab',Georgia,serif;color:#2a1d10;text-wrap:pretty}
.kl-say .kv{font-size:1.05em}

/* ---- the area code a player enrolled with (KCC enrollment, enroll.js): a tiny cardboard tag next to their name on
   both boards. Cream board, the code in ink, a strip of that region's colour from the Florida map along its foot. ---- */
.ac-tag{--ac:#c98f55;display:inline-block;flex:none;padding:.2em .32em .16em;border-radius:2px;vertical-align:.08em;rotate:1.5deg;
  font:700 .74em/1 'Barlow Condensed','Roboto Slab',sans-serif;letter-spacing:.05em;font-variant-numeric:tabular-nums;color:#22160b;
  background:var(--cb-fiber),linear-gradient(0deg,var(--ac) 0 .2em,transparent .2em),#f6e8c8;
  box-shadow:0 1.5px 0 #8a6234,-1.5px 2px 2px rgba(40,16,4,.3)}
.ac-tag[hidden]{display:none}
.ac-tag[data-area="305"]{--ac:#e56374}.ac-tag[data-area="954"]{--ac:#3ab098}.ac-tag[data-area="561"]{--ac:#87a5cf}.ac-tag[data-area="407"]{--ac:#af88d7}
.ac-tag[data-area="813"]{--ac:#e48531}.ac-tag[data-area="904"]{--ac:#e8bc4d}.ac-tag[data-area="850"]{--ac:#5daa53}

/* ---- the panel never scrolls (board.js fit()): tighter rows first, then rows cut from the bottom of the list (never
   yours, never the top 3), then the small print goes. FULL BOARD › stays pinned to the foot and has everyone. ---- */
.lb-tight{gap:.38em}
.lb-tight .lb-list li{padding:.2em .35em .16em}
.lb-tight .lb-run{padding:.36em .65em .32em}
.lb-tight .lb-big{font-size:23px}
.lb-tight .lb-rules{font-size:11.5px}
.lb-lean .lb-rules,.lb-lean .kl-say,.lb-lean .lb-post label{display:none}
.lb-list li.lb-cut{display:none}
.lb-list.lb-more::after{content:'· · ·';display:block;text-align:center;padding:.15em 0 0;font:700 13px/1 'Barlow Condensed',sans-serif;letter-spacing:.3em;color:#8a6234}
#lboard .lb-full{position:sticky;bottom:0;z-index:2;flex:none}

/* ---- the board's API hiccuped: a kraft note pinned on, retrying with backoff; TRY NOW / TRY AGAIN ---- */
.lb-breath{display:flex;align-items:center;gap:.65em;padding:.55em .65em .5em .75em;border-radius:3px;rotate:-.7deg;
  font:600 13px/1.25 'Zilla Slab',Georgia,serif;color:#2a1d10;
  background:var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-kraft-lt);box-shadow:0 2px 0 #8a6234,var(--dp-shadow-glued),var(--dp-rim)}
.lb-breath[hidden]{display:none}
.lb-breath-say{flex:1;min-width:0}
.lb-breath.gave{background:var(--cb-fiber),var(--cb-grain),var(--cb-light),#f6e8c8}
.lb-again{flex:none;border:0;cursor:pointer;font:11.5px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.08em;--rot:2deg;transition:translate .14s}
.lb-again:hover{translate:0 -1.5px}
.lb-again:focus-visible{outline:2px solid var(--cb-laurel);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lb-again{transition:none}}
