/* Copied from src/ui/board/Counter.css by `npm run twoplayer -- build`; do not edit. */
/* A venue's counter (option B, approved 15 Oct; 2026-10-15-stats-board compact, -stats-phone, -stats-motion) */
.cnt { position:relative; min-width:0; height:80px; padding:6px 10px 0; background:linear-gradient(#191612, #0F0E0C); border:1px solid #33302A; border-top-color:#4A443A; box-shadow:inset 0 1px 0 rgba(255,240,210,.04); transition:border-color .4s, box-shadow .4s; }
.cnt.met { border-color:rgba(226,188,94,.6); box-shadow:inset 0 1px 0 rgba(255,240,210,.05), 0 0 14px rgba(226,188,94,.25); }
.cnt.danger { border-color:#FF2A12; background:linear-gradient(rgba(70,14,8,.95), rgba(18,8,6,.96)); box-shadow:0 0 0 1px rgba(255,42,18,.5), 0 0 16px rgba(255,30,10,.45); animation:cnt-danger 1.1s ease-in-out infinite; }
@keyframes cnt-danger { 50% { box-shadow:0 0 0 1px rgba(255,42,18,.85), 0 0 26px rgba(255,30,10,.7); } }
.cnt .t1 { display:flex; align-items:baseline; gap:6px; height:22px; }
.cnt .t1 b { font:900 24px/1 'Big Shoulders Display'; color:#FFE2D6; }
.cnt .t1 strong { font:800 15px/1 'Big Shoulders Display'; letter-spacing:.05em; text-transform:uppercase; color:var(--paper, #EFE6D2); white-space:nowrap; }
.cnt.met .t1 strong { color:#F2D488; }
.cnt.danger .t1 b, .cnt.danger .t1 strong { color:#FF8A73; }
.cnt .t1 span { margin-left:auto; font:700 10px/1 'IBM Plex Mono'; letter-spacing:.18em; text-transform:uppercase; color:#B9B09D; white-space:nowrap; }
.cnt .toks { display:grid; grid-template-columns:repeat(10, 1fr); gap:3px; height:27px; margin-top:4px; }
.cnt .tk { position:relative; }
.cnt .tk i { position:absolute; inset:0 6%; background:center/contain no-repeat; transition:opacity .3s, filter .3s; }
.cnt .tk i.theirs { opacity:.6; filter:saturate(.75); }
.cnt .tk i.mine { filter:drop-shadow(0 0 5px rgba(240,96,63,.35)); }
.cnt .tk.next i { inset:28% 26%; opacity:1; }
.cnt .dial { position:absolute; left:50%; top:50%; width:30px; height:30px; transform:translate(-50%,-50%); filter:drop-shadow(0 0 4px rgba(240,96,63,.45)); }
.cnt .dial path.on { animation:cnt-wedge .32s cubic-bezier(.2,1.4,.4,1); transform-origin:20px 20px; }
@keyframes cnt-wedge { 0% { transform:scale(.4); fill:#FFE08A; } 100% { transform:scale(1); } }
/* the worked example's beats (tools/art/mockups/2026-10-13-rules.html, which draws with this file): five wedges make a
   whole token, the full dial holds and glows, then the token pops with a gold ring; a token lost shakes and dims, then
   turns over with a blue ring while the dial keeps off it (founder, 17 Oct), and the dial comes back once it has turned */
.cnt .tk.full .dial { animation:cnt-full .5s ease-in-out infinite alternate; }
@keyframes cnt-full { from { transform:translate(-50%,-50%) scale(1); filter:drop-shadow(0 0 4px rgba(240,96,63,.45)); } to { transform:translate(-50%,-50%) scale(1.35); filter:drop-shadow(0 0 12px rgba(255,200,90,.95)); } }
.cnt .tk.pop i { animation:cnt-pop .8s cubic-bezier(.2,1.5,.4,1); }
.cnt .tk.pop:after { content:''; position:absolute; inset:-6px; border:3px solid #F2C66A; border-radius:50%; animation:cnt-ring .8s ease-out forwards; pointer-events:none; }
@keyframes cnt-pop { 0% { transform:scale(.4); filter:brightness(2.2); } 60% { transform:scale(1.45); } 100% { transform:scale(1); filter:none; } }
.cnt .tk.losing i { animation:cnt-losing .18s ease-in-out infinite alternate; }
@keyframes cnt-losing { from { transform:translateX(-2px) rotate(-4deg); filter:brightness(1.3) drop-shadow(0 0 6px rgba(255,90,60,.9)); } to { transform:translateX(2px) rotate(4deg); filter:brightness(.7) saturate(.5); } }
.cnt .tk.lost i { inset:0 6%; opacity:1; animation:cnt-flip .8s cubic-bezier(.3,1.4,.5,1); }
@keyframes cnt-flip { 0% { transform:rotateY(90deg) scale(1.2); filter:brightness(2); } 100% { transform:rotateY(0) scale(1); filter:none; } }
.cnt .tk.lost:after { content:''; position:absolute; inset:-6px; border:3px solid #79A8C8; border-radius:50%; animation:cnt-ring .8s ease-out forwards; pointer-events:none; }
@keyframes cnt-ring { from { opacity:1; transform:scale(.5); } to { opacity:0; transform:scale(1.9); } }
.cnt .tk.nodial .dial { opacity:0; }
.cnt .tk.dialin .dial { animation:cnt-dial-in .5s ease-out; }
/* the turned token eases back to its place under the dial as the dial returns (no jump) */
.cnt .tk.dialin i { animation:cnt-settle .5s ease-out; }
@keyframes cnt-settle { from { inset:0 6%; } }
@keyframes cnt-dial-in { from { opacity:0; transform:translate(-50%,-50%) scale(.4); } }
.cnt.fallen .dial path { fill:#1E1A16 !important; stroke:#2E2822 !important; transition:fill .6s, stroke .6s; } /* fallen: what is left of the last token drains (the Fall) */
.cnt .und { display:grid; grid-template-columns:repeat(10, 1fr); gap:3px; margin-top:3px; }
.cnt .und span { height:2px; border-radius:1px; background:#24201B; transition:background .35s, box-shadow .35s; }
.cnt .und span.mine { background:#E0533A; box-shadow:0 0 5px rgba(240,96,63,.75); }
.cnt .und span.need, .cnt .und span.win { background:rgba(226,188,94,.32); }
.cnt .und span.mine.win { background:#E0533A; box-shadow:0 0 5px rgba(240,96,63,.75), 0 0 0 1px rgba(242,212,136,.5); }
.cnt .und span.goal { background:#F2D488; box-shadow:0 0 5px rgba(242,212,136,.85); }
.cnt .ends { position:relative; height:12px; margin-top:2px; font:600 8px/12px 'IBM Plex Mono'; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; opacity:.85; }
.cnt .ends span { position:absolute; } .cnt .ends .lo { left:0; color:#B8786A; } .cnt .ends .hi { right:0; color:#8C8370; } .cnt .ends .go { transform:translateX(-50%); color:#E2BC5E; }

/* the phone: 40 px, the token as label, ten segments */
.cnt.ph { height:40px; padding:4px 6px 0; overflow:hidden; }
.cnt.ph .hd { display:flex; align-items:center; gap:4px; height:19px; }
.cnt.ph .ic { flex:none; width:14px; height:17px; background:center/contain no-repeat; filter:drop-shadow(0 0 3px rgba(240,96,63,.4)); }
.cnt.ph .hd b { font:900 17px/1 'Big Shoulders Display'; color:#FFE2D6; }
.cnt.ph .hd strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 10.5px/1 'Big Shoulders Display'; letter-spacing:.05em; text-transform:uppercase; color:var(--paper, #EFE6D2); }
.cnt.ph.met .hd strong { color:#F2D488; } .cnt.ph.danger .hd b, .cnt.ph.danger .hd strong { color:#FF8A73; }
.cnt.ph .strip { position:absolute; left:6px; right:6px; bottom:6px; display:grid; grid-template-columns:repeat(10, 1fr); gap:2px; }
.cnt.ph .s { position:relative; height:6px; border-radius:1px; background:rgba(76,131,168,.35); }
.cnt.ph .s.mine { background:linear-gradient(#F0603F, #B32A17); box-shadow:0 0 4px rgba(240,96,63,.7); }
.cnt.ph .s.need:after, .cnt.ph .s.win:after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:rgba(226,188,94,.45); }
.cnt.ph .s.goal:after { content:''; position:absolute; left:0; right:0; bottom:-3.5px; height:2px; background:#F2D488; box-shadow:0 0 4px rgba(242,212,136,.9); }
.cnt.ph .s.next { background:none; }
.cnt.ph .s .dial { width:11px; height:11px; }
.cnt.ph .s.full .dial { animation:cnt-full .5s ease-in-out infinite alternate; }
.cnt.ph .s.pop { animation:cnt-seg .8s ease-out; } .cnt.ph .s.lost { animation:cnt-seg-out .8s ease-out; }
.cnt.ph .s.losing { animation:cnt-losing-seg .18s ease-in-out infinite alternate; }
@keyframes cnt-losing-seg { to { opacity:.45; } }
@keyframes cnt-seg { 0% { box-shadow:0 0 10px rgba(255,214,140,1); } }
@keyframes cnt-seg-out { 0% { box-shadow:0 0 10px rgba(156,203,234,1); } }