/* Checkers: a painted street-corner board and bottle-cap pieces. Shares the felt-and-paper tokens of the rest of the app. */
:root{
  --cap-cream-1:#fffaf0;--cap-cream-2:#efe2c0;--cap-cream-3:#a99568;
  --cap-red-1:#ff9a9e;--cap-red-2:#c8141c;--cap-red-3:#6f080e;
}
.cb{--bs:clamp(272px,min(100vw - 32px,100dvh - 296px),620px)}
.cb .brand{font-size:clamp(20px,6vw,28px)}
.cb-main{width:100%;align-self:stretch;display:grid;gap:10px;justify-items:center;grid-template-areas:"opp" "stage" "me" "status";grid-template-columns:minmax(0,var(--bs));justify-content:center;flex:1;align-content:start}
#cb-opp{grid-area:opp}.cb-stage{grid-area:stage}#cb-me{grid-area:me}.cb-status{grid-area:status}

/* player strips */
.pl{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:7px 12px 7px 8px;border-radius:14px;background:rgba(0,0,0,.24);border:1px solid var(--line);transition:border-color .25s,background .25s,box-shadow .25s}
.pl.turn{border-color:rgba(244,197,66,.7);background:rgba(244,197,66,.09);box-shadow:0 0 0 3px rgba(244,197,66,.12)}
.pl .av{width:38px;height:38px;flex:none;background:transparent;border-radius:0;display:block;font-size:0}
.pl .av .capsvg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.pl .nm{text-align:left;align-items:flex-start;flex-wrap:nowrap;display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;line-height:1.2}
.pl .nm b{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl .nm small{color:var(--mute);font-size:12px}
.pl .tag.turn{background:var(--gold);color:var(--gold-ink);white-space:nowrap}
.pl .tag.win{background:var(--gold);color:var(--gold-ink)}
.s0,.s1,.pc.s0,.pc.s1{--c1:var(--cap-cream-1);--c2:var(--cap-cream-2);--c3:var(--cap-cream-3)}
.s1,.pc.s1{--c1:var(--cap-red-1);--c2:var(--cap-red-2);--c3:var(--cap-red-3)}

/* the board: wooden frame, cream and deep-green squares */
.cb-stage{position:relative;width:var(--bs);max-width:100%}
.cb-frame{width:100%;padding:3.4%;border-radius:16px;
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),linear-gradient(145deg,#94612f,#63391a 55%,#432610);
  box-shadow:0 20px 44px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,225,170,.4),inset 0 -3px 0 rgba(0,0,0,.4)}
.cb-grid{position:relative;aspect-ratio:1;border-radius:4px;box-shadow:0 0 0 2px rgba(20,8,0,.6),0 0 0 3px rgba(255,214,140,.25)}
.cb-sqs{position:absolute;inset:0;display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr)}
.sq{position:relative;display:block;padding:0;margin:0;border:0;border-radius:0;min-width:0;min-height:0}
.sq.l{background:linear-gradient(135deg,#f6ead0,#e8d4a2)}
.sq.d{background:radial-gradient(120% 120% at 30% 25%,#18603f,#0a3523);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sq.d:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;z-index:3}
.sq.lm::before{content:'';position:absolute;inset:0;background:rgba(244,197,66,.2);box-shadow:inset 0 0 0 2px rgba(244,197,66,.45)}
.sq.from::after{content:'';position:absolute;inset:5%;border-radius:50%;border:3px solid var(--gold);box-shadow:0 0 14px rgba(244,197,66,.75)}
.sq .dot{position:absolute;inset:34%;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(244,197,66,.25);animation:cbdot 1.1s ease-in-out infinite;z-index:2}
.sq .dot.jump{inset:20%;background:rgba(255,90,79,.2);border:3px solid #ff6a5f;box-shadow:0 0 0 4px rgba(255,90,79,.2)}
@keyframes cbglow{50%{filter:drop-shadow(0 3px 2px rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(244,197,66,.3))}}
@keyframes cbdot{50%{transform:scale(1.22)}}

/* pieces ride on a layer above the squares and never take taps */
.cb-pcs,.cb-fx{position:absolute;inset:0;pointer-events:none}
.cb-fx{z-index:7}
.pc{position:absolute;width:12.5%;height:12.5%;left:calc(var(--c)*12.5%);top:calc(var(--r)*12.5%);padding:1.1%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.55));transition:transform .18s ease,opacity .18s}
.pc .capsvg{width:100%;height:100%;display:block;overflow:visible}
.pc.king{padding:1.1% 1.1% 1.1% 1.1%}
.pc.sel{transform:translateY(-7%) scale(1.1);filter:drop-shadow(0 8px 5px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(244,197,66,.9));z-index:4}
.pc.go{filter:drop-shadow(0 3px 2px rgba(0,0,0,.55)) drop-shadow(0 0 7px rgba(244,197,66,.85));animation:cbglow 1.7s ease-in-out infinite}
.pc.go.cap{filter:drop-shadow(0 3px 2px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(244,197,66,1));animation-duration:1s}
.pc.ghosted{opacity:.4;transform:scale(.88)}
.pc.hop{animation:cbhop .5s ease-in-out infinite alternate}
@keyframes cbhop{to{transform:translateY(-12%) scale(1.12)}}
.pc.ghost{z-index:5;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.burst{position:absolute;z-index:8;border-radius:50%;border:4px solid #ffd45e;box-shadow:0 0 22px 6px rgba(255,212,94,.7),inset 0 0 14px rgba(255,212,94,.6);transform:translate(-50%,-50%)}

.cb .toast{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%)}
.cb .toast.show{animation:cbtoast 1.5s ease both}
@keyframes cbtoast{0%{opacity:0;transform:translate(-50%,-70%)}12%,80%{opacity:1;transform:translate(-50%,-100%)}100%{opacity:0;transform:translate(-50%,-100%)}}

.cb-status{width:100%;text-align:center;min-height:50px;font-weight:700;font-size:16px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 4px}

/* tally chips in the header reuse the table styles */
.cb .top .tally{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:center;white-space:normal;flex:1 1 150px;min-width:0;justify-content:flex-end;margin-left:0}
@media (max-width:519px){.cb .top .tally{order:3;flex-basis:100%;justify-content:flex-start}.cb .top .brand{display:none}.cb .top .tools{margin-left:auto}}
#cb-games{padding-inline:10px;white-space:nowrap}

/* landscape phones: board on the left, players and status stacked on the right */
@media (orientation:landscape) and (max-height:520px){
  .cb.app{--bs:min(100dvh - 86px,100vw - 330px);display:flex;flex-direction:column;gap:6px;max-width:none}
  .cb .top{grid-area:auto}
  .cb-main{grid-template-columns:var(--bs) minmax(190px,1fr);grid-template-areas:"stage opp" "stage status" "stage me";grid-template-rows:auto 1fr auto;column-gap:16px;justify-items:stretch;align-content:center;justify-content:center}
  .cb-status{align-self:center}
}

/* the picker, end sheet extras and the dashboard tile */
.sheet.cbsheet{max-width:480px}
.rs-list{display:grid;gap:8px;margin-top:14px}
.rs-card{display:flex;align-items:center;gap:12px;text-align:left;padding:11px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);cursor:pointer;min-height:56px}
.rs-card.on{border-color:var(--gold);background:rgba(244,197,66,.12);box-shadow:0 0 0 2px rgba(244,197,66,.25)}
.rs-txt{display:flex;flex-direction:column;gap:1px}.rs-txt b{font-size:16px}.rs-txt small{color:var(--mute)}
.rs-cap{width:34px;height:34px;flex:none;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),transparent 55%),var(--k);box-shadow:0 0 0 3px var(--k2),0 3px 5px rgba(0,0,0,.5)}
.rs-cap.s0{--k:#efe2c0;--k2:#a99568}.rs-cap.s1{--k:#c8141c;--k2:#6f080e}
.rs-blurb{margin:12px 0 0;color:var(--text)}
.seg button small{display:block;font-weight:400;font-size:11px;opacity:.75}
.cb-reason{margin:10px 0 0;color:var(--mute);font-size:13px}
.avatar.cbav{--h:clamp(64px,15vh,96px);background:transparent;border:0;box-shadow:none;width:auto;height:var(--h);position:static;display:flex;align-items:center;justify-content:center;gap:6px}
.avatar.cbav .capsvg{height:100%;width:100%;display:block;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.avatar.cbav > span{display:block;flex:none;width:var(--h);height:var(--h)}
.avatar.cbav:has(.s0 + .s1){gap:14px}