/* Colour marks number decades; animation follows selection, counting and awards. */
:root{--table:#faedd7;--paper:#fff9e8;--ink:#223957}body{background:radial-gradient(ellipse at 20% 10%,#f8d38b66,transparent 45%),radial-gradient(ellipse at 90% 65%,#75bdaf33,transparent 40%),var(--table)}body:before{height:12px}header{position:relative;z-index:1}.logo{font-style:italic;text-shadow:2px 3px 0 #edb841;transform:rotate(-4deg)}.logo span{text-shadow:none;transform:rotate(4deg)}main{position:relative}.sheet{border:2px solid #d7b980;border-radius:24px;box-shadow:0 7px 0 #dfc59a,0 14px 28px #60472315;position:relative;background:linear-gradient(140deg,#fffdf4,#fff5dd)}.sheet:before{content:'';position:absolute;left:18px;right:18px;top:0;height:5px;background:linear-gradient(90deg,#167269 0 25%,#c7553e 25% 50%,#d89420 50% 75%,#386690 75%);border-radius:0 0 6px 6px}button{box-shadow:0 3px 0 #2239572a;transition:transform .18s,box-shadow .18s,background .18s}button:hover:not(:disabled){transform:translateY(-3px) rotate(-1deg);box-shadow:0 6px 0 #22395725}button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #22395725}.primary{box-shadow:0 4px 0 #08463f!important}.primary:hover:not(:disabled){background:#105b52!important}nav button{box-shadow:none}.welcome{gap:55px;padding-top:0}.welcome .big{font-size:110px;letter-spacing:-7px;color:#223957;text-shadow:4px 4px 0 #e9b747;transform:rotate(-5deg);margin:5px 0 25px}.home-playground{position:relative;height:270px;width:100%;isolation:isolate;display:flex;align-items:center;justify-content:center}.home-rings{position:absolute;width:250px;height:250px;border:15px solid #e4ac39;border-radius:50%;box-shadow:0 0 0 14px #f1d68e,0 0 0 28px #df775d,0 0 0 40px #75b9a1;transform:rotate(-12deg)}.home-rings:after{content:'';position:absolute;inset:22px;border:3px dashed #22395755;border-radius:50%;animation:ring-turn 35s linear infinite}.demo-token{--piece-colour:#167269;position:absolute;width:90px;height:90px;border-radius:23px;background:var(--piece-colour);color:white;font-size:44px;border:3px solid #fff5de;box-shadow:0 8px 0 #203a6130,0 12px 20px #203a6120;animation:token-drift 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.8s);z-index:2}.demo-token:nth-of-type(1){left:8%;top:32%}.demo-token:nth-of-type(2){left:27%;top:7%}.demo-token:nth-of-type(3){right:19%;top:14%}.demo-token:nth-of-type(4){right:3%;bottom:15%}.demo-token:nth-of-type(5){left:34%;bottom:4%}.home-crown{width:85px;position:absolute;right:0;top:-10px;transform:rotate(20deg)}.intro h1{font-size:37px}.number{color:var(--piece-colour);border:2px solid color-mix(in srgb,var(--piece-colour) 65%,#fff9e8);background:color-mix(in srgb,var(--piece-colour) 8%,#fff9e8);box-shadow:0 4px 0 color-mix(in srgb,var(--piece-colour) 35%,#dcc9a3);border-radius:12px;min-height:48px;transform:rotate(var(--tilt));transition:transform .18s}.number:hover:not(:disabled){background:var(--piece-colour);color:white;transform:translateY(-6px) rotate(-4deg);box-shadow:0 9px 0 #22395720}.number.selected{background:var(--piece-colour);border-color:var(--piece-colour);color:white;transform:none;box-shadow:0 2px 0 #22395730}.number:disabled:not(.selected){background:#e6dcc9;color:#736d62;border:1px dashed #9a8e78;box-shadow:none}.grid{gap:10px;margin:24px 0}.chosen{gap:12px;padding:12px 0}.slot{border-color:var(--piece-colour);background:#fffdf4;border-radius:13px;box-shadow:0 5px 0 #d7c5a1;color:var(--piece-colour);height:95px;max-width:100px}.slot.filled{background:color-mix(in srgb,var(--piece-colour) 9%,white);border-width:3px}.slot.crossed{background:#e5ddca;position:relative}.slot.crossed:after{content:'';position:absolute;left:8px;right:8px;top:30px;height:3px;background:var(--piece-colour);transform:rotate(-15deg)}.slot small{color:#344960}.blocked{padding:12px 16px;background:#e3ede2;border-radius:12px;border-bottom:3px solid #aac9b6}.token{background:#223957;border:2px solid #fff9e8;box-shadow:0 3px 0 #22395730;transform:rotate(-8deg)}.danger{border:2px dashed #c7553e;background:#ffe1c9;font-weight:bold}.roomhead h1{font-size:34px}.sidebar h2{font-style:italic}.players li{position:relative;border:0;gap:12px;border-radius:14px;padding:14px 10px;margin:7px 0;background:#fff7e3;border-bottom:3px solid #dfc79d}.players li>div:first-of-type{flex:1;min-width:0}.player-token{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--player-colour);color:white;font-size:24px;display:grid;place-items:center;border:3px solid #fff9e8;box-shadow:0 3px 0 #22395730;font-weight:900}.players li.active{background:#d4eade;border:2px solid var(--player-colour);box-shadow:0 4px 0 #99bfa8;animation:active-breathe 3s ease-in-out infinite}.players li.active .player-token{animation:caller-nod 2.8s ease-in-out infinite}.live-points{font-size:13px;color:#167269;padding-bottom:4px;font-weight:bold}.stats{font-size:13px}.counter{padding:5px 0 18px}.counter>p:first-child{font-weight:900;font-size:23px}.count-dial{position:relative;width:260px;height:260px;margin:16px auto 30px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#fffdf3 55%,#f4dfb9 56%,#fff5db 68%);box-shadow:0 10px 0 #d9bd86,0 18px 25px #60472318}.dial-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.dial-base{fill:none;stroke:#e8d3a4;stroke-width:13}.dial-progress{fill:none;stroke:#167269;stroke-width:13;stroke-linecap:round}.count{font-size:115px;letter-spacing:-6px;position:relative;text-shadow:3px 4px 0 #efca70;color:#223957}.dial-end{position:absolute;right:-10px;top:12px;background:#c7553e;color:white;border:3px solid #fff9e8;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-weight:bold;transform:rotate(12deg)}.caller-badge{position:absolute;bottom:-15px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#f4c85c;padding:8px 24px;border:2px solid #223957;border-radius:9px;box-shadow:0 4px 0 #ba944c;transform:rotate(-3deg);font-weight:900}.call{border-radius:15px;padding:14px 30px;position:relative}.call:not(:disabled){animation:call-invite 3s ease-in-out infinite}.track{height:17px;border:2px solid #b19e74;background:#e6dac0;overflow:visible}.track span{border-radius:7px;box-shadow:0 3px 0 #16726930}.trophy{width:140px;margin:0 auto 10px;filter:drop-shadow(0 8px 0 #d9bd86);animation:trophy-float 4s ease-in-out infinite}.victory h1{font-size:clamp(32px,4vw,48px)}.celebration-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.celebration-controls button{font-size:13px;padding:8px 12px}.winner{background:#ffe6a0!important}.rounds{margin-top:18px}.rounds th{color:#806020;font-size:13px}.rounds td{padding:12px 6px}.rounds tbody tr:nth-child(4n+1){background:#f3e5c4}.rounds tbody tr:nth-child(4n+3){background:#e1ede2}#stage-effects{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}.flying-piece{position:absolute;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--piece-colour);border:2px solid #fff4d8;color:white;font-weight:900;box-shadow:0 3px 0 #22395730}.flying-piece.crown{width:40px;height:40px;background:none;border:0;box-shadow:none}.shock-ring{position:absolute;width:90px;height:90px;border:4px solid;border-radius:50%}.selection-fly{position:absolute;border-radius:12px;background:#167269;color:white;font-size:23px;font-weight:900;display:grid;place-items:center;border:3px solid #fff9e8;box-shadow:0 7px 15px #22395735}#table-moment{position:fixed;top:100px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 28px);padding:13px 28px;background:#167269;color:white;border:3px solid #fff7e3;border-radius:12px;box-shadow:0 6px 0 #22395730;font-size:22px;font-weight:900;text-align:center;pointer-events:none;z-index:21;opacity:0}#table-moment.visible{opacity:1}#table-moment.collision{background:#b04833}#table-moment.crown{background:#f3c654;color:#223957}#chatToggle{bottom:15px;right:12px;font-size:13px;padding:8px 12px;min-height:38px}body.calm *,body.calm *:before,body.calm *:after{animation:none!important;transition:none!important}body.calm .demo-token{transform:rotate(var(--tilt))}@keyframes token-drift{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-14px) rotate(calc(var(--tilt) + 6deg))}}@keyframes ring-turn{to{transform:rotate(360deg)}}@keyframes active-breathe{50%{box-shadow:0 4px 0 #99bfa8,0 0 0 4px #16726918}}@keyframes caller-nod{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}@keyframes call-invite{0%,80%,100%{transform:translateY(0)}88%{transform:translateY(-5px) rotate(-2deg)}94%{transform:translateY(-3px) rotate(2deg)}}@keyframes trophy-float{50%{transform:translateY(-8px) rotate(5deg)}}@media(max-width:800px){.home-playground{height:225px}.home-rings{width:190px;height:190px;border-width:11px;box-shadow:0 0 0 10px #f1d68e,0 0 0 20px #df775d,0 0 0 30px #75b9a1}.demo-token{width:70px;height:70px;font-size:32px;border-radius:17px}.welcome .big{font-size:85px}.intro h1{font-size:32px}.grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.number{min-height:44px;font-size:17px;border-radius:9px}.chosen{gap:6px}.slot{height:88px;font-size:28px}.blocked{padding:10px}.sheet{padding:18px;border-radius:20px}.roomhead h1{font-size:28px}.count-dial{width:235px;height:235px}.count{font-size:105px}.players li{padding:12px}.counter>p:first-child{font-size:21px}.table{gap:24px}.trophy{width:120px}#table-moment{font-size:17px;top:90px;padding:12px 20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.demo-token{transform:rotate(var(--tilt))}}
/* Dark numerals preserve contrast; decade colour remains on the tile edges. */
.number{color:#223957}.number.selected,.number:hover:not(:disabled){color:var(--piece-ink)}.number.selected:hover{transform:none;box-shadow:0 2px 0 #22395730}.players li:nth-child(5n+3) .player-token{color:#223957}.flying-piece{color:#223957;background:#f8df9c;border-color:var(--piece-colour)}
@media(max-width:800px){#chatToggle{bottom:10px;right:8px}body:has(.grid) #chatToggle{position:static;display:block;margin:0 16px 20px auto}body:has(.grid) #chatToggle[hidden]{display:none}}
.demo-token:hover,.demo-token:focus-visible{animation-play-state:paused}
.demo-token:nth-of-type(3){color:#223957}.slot{color:#223957}.slot small{font-size:14px;font-weight:bold}
@media(max-width:800px){#chatToggle{position:static;display:block;margin:0 16px 20px auto}#chatToggle[hidden]{display:none}.slot small{font-size:13px}}