.play{background:var(--paper);min-height:100svh;color:var(--ink)}.play-head{align-items:center;gap:20px;max-width:1180px;margin:0 auto;padding:22px 32px;display:flex}.play-back{font:500 14px/1 var(--sans);margin-left:auto;padding:12px 0;text-decoration:none}.code-chip{font:600 13px/1 var(--sans);letter-spacing:.18em;background:#f1ecdf;border-radius:999px;padding:8px 14px}.play-wrap{max-width:1180px;margin:0 auto;padding:16px 32px 64px}.play-hero{max-width:720px;animation:rise .8s var(--ease) both;flex-direction:column;gap:14px;display:flex}.play-hero h1{font:500 clamp(36px, 5vw, 64px)/1.02 var(--sans);letter-spacing:-.025em;text-wrap:balance}.play-hero p{color:#4a5544;font-size:17px}.play-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;gap:28px;margin-top:36px;display:grid}.panel{animation:rise .7s var(--ease) .1s both;background:#fff;border-radius:18px;flex-direction:column;gap:18px;padding:28px;display:flex;box-shadow:0 1px 2px #1e2a1b0f,0 18px 36px -28px #1e2a1b59}.panel.join{animation-delay:.18s}.panel.narrow{max-width:440px;margin:40px auto 0}.panel h2{font:400 42px/1 var(--brush)}.panel p{color:#4a5544}.field{flex-direction:column;gap:8px;display:flex}.field>span,.field-label{font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#4a5544}.input{height:46px;font:500 15px/1 var(--sans);background:#faf8f1;border:1.5px solid #d9d4c6;border-radius:12px;padding:0 14px;transition:border-color .3s}.input:focus{border-color:var(--ink);outline:none}.code-input{text-align:center;height:68px;font:600 30px/1 var(--sans);letter-spacing:.5em;padding-left:.5em}.select{height:38px;font:500 14px/1 var(--sans);cursor:pointer;background:#fff;border:1.5px solid #d9d4c6;border-radius:10px;padding:0 10px}.seg{background:#f1ecdf;border-radius:999px;align-self:flex-start;gap:4px;padding:4px;display:inline-flex}.seg button{height:38px;font:500 14px/1 var(--sans);cursor:pointer;transition:background-color .35s var(--ease), color .35s;background:0 0;border:0;border-radius:999px;padding:0 18px}.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.seg.small button{height:32px;padding:0 12px;font-size:13px}.mode-body{animation:fade .4s var(--ease);flex-direction:column;gap:16px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:12px 14px;display:flex}.games-pick{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.game-chip{font:500 14px/1.1 var(--sans);text-align:left;cursor:pointer;transition:border-color .3s, box-shadow .3s, transform .4s var(--ease);background:#fff;border:1.5px solid #e5e0d2;border-radius:12px;align-items:center;gap:10px;padding:13px 14px;display:flex}.game-chip:hover{transform:translateY(-2px)}.game-chip i{background:var(--c);border-radius:4px;flex:none;width:14px;height:14px}.game-chip[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.stepper{align-items:center;gap:8px;display:inline-flex}.stepper button{width:34px;height:34px;font:500 18px/1 var(--sans);cursor:pointer;background:#fff;border:1.5px solid #d9d4c6;border-radius:50%}.stepper b{text-align:center;min-width:22px;font:600 16px/1 var(--sans);font-variant-numeric:tabular-nums}.legs{flex-direction:column;gap:10px;list-style:none;display:flex}.leg{animation:rise .45s var(--ease) both;background:#faf8f1;border-radius:12px;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;display:flex}.leg>i{background:var(--c);border-radius:3px;width:10px;height:10px}.x{cursor:pointer;opacity:.6;background:0 0;border:0;border-radius:50%;width:32px;height:32px;margin-left:auto;font-size:20px;line-height:1}.x:hover{opacity:1;background:#f1ecdf}.add{align-self:flex-start;box-shadow:inset 0 0 0 1.5px #d9d4c6}.panel-foot{font:500 14px/1 var(--sans);color:#4a5544;border-top:1px solid #ece8dc;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;display:flex}.lobby{text-align:center;animation:rise .7s var(--ease) both;flex-direction:column;align-items:center;gap:22px;padding-top:24px;display:flex}.room-code{font:600 clamp(64px, 11vw, 128px)/1 var(--sans);letter-spacing:.14em;padding-left:.14em}.players{flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px;list-style:none;display:flex}.player{font:500 15px/1 var(--sans);animation:pop-in .5s var(--spring) both;background:#fff;border-radius:999px;align-items:center;gap:10px;padding:12px 16px;transition:opacity .4s;display:flex;box-shadow:0 1px 2px #1e2a1b14}.player i{border-radius:50%;width:12px;height:12px}.player.off{opacity:.4}.badge{font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;background:#f1ecdf;border-radius:999px;padding:4px 8px}.playlist{flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;display:flex}.leg-chip{font:500 13px/1 var(--sans);border:1.5px solid #e5e0d2;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;display:inline-flex}.leg-chip i{background:var(--c);width:9px;height:9px}.leg-chip.plain{border-style:dashed}.btn.big{height:56px;padding:0 28px;font-size:16px}.muted{color:#6b7365;font-size:15px}.connecting{text-align:center;padding-top:80px;animation:1.6s ease-in-out infinite lull-twinkle}.countdown{z-index:30;background:var(--bg,var(--paper));color:var(--ink);text-align:center;animation:fade .4s var(--ease);flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:fixed;inset:0}.countdown strong{font-size:clamp(56px,9vw,104px);line-height:.95}.countdown b{font:400 clamp(120px, 26vw, 260px)/1 var(--brush);animation:count-pop .9s var(--spring) both}@keyframes count-pop{0%{opacity:0;transform:scale(1.6)}}[data-game=lights-out].countdown,[data-game=unblock].countdown{color:#f4efe3}.racing{--hud:44px}.hud{z-index:20;color:#faf8f1;max-width:calc(100vw - 24px);font:500 13px/1 var(--sans);animation:rise .6s var(--ease) both;background:#1e2a1beb;border-radius:999px;align-items:center;gap:16px;padding:9px 18px;display:flex;position:fixed;bottom:12px;left:50%;overflow-x:auto;transform:translate(-50%);box-shadow:0 12px 30px -12px #00000073}.hud .clock{font:600 16px/1 var(--sans);font-variant-numeric:tabular-nums}.racer{white-space:nowrap;align-items:center;gap:7px;display:flex}.racer>i{background:var(--c);border-radius:50%;width:9px;height:9px}.racer b{font-variant-numeric:tabular-nums;color:var(--c);filter:brightness(1.35);font-weight:600}.bar{background:#fff3;border-radius:3px;width:52px;height:5px;overflow:hidden}.bar span{background:var(--c);height:100%;transition:width .6s var(--ease);display:block}.toast{z-index:25;color:#1e2a1b;font:500 14px/1 var(--sans);animation:rise .5s var(--spring) both;white-space:nowrap;background:#fff;border-radius:999px;align-items:center;gap:8px;padding:12px 18px;display:flex;position:fixed;bottom:70px;left:50%;transform:translate(-50%);box-shadow:0 12px 30px -14px #0006}.toast.warn{background:#f6d9cf;top:80px;bottom:auto}.g-penalty{font:500 13px/1 var(--sans);opacity:.8}.results{max-width:640px;animation:rise .7s var(--ease) both;flex-direction:column;gap:18px;margin:24px auto 0;display:flex}.results h2{font:500 clamp(32px, 4.4vw, 52px)/1.04 var(--sans);letter-spacing:-.02em}.results h3{font:500 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#4a5544;margin-top:10px}.placings,.standings{flex-direction:column;gap:8px;list-style:none;display:flex}.placings li,.standings li{animation:rise .5s var(--ease) both;background:#fff;border-radius:14px;align-items:center;gap:12px;padding:14px 18px;display:flex;box-shadow:0 1px 2px #1e2a1b0f}.placings li.me,.standings li.me{box-shadow:inset 0 0 0 2px #1e2a1b}.rank{width:22px;font:600 18px/1 var(--sans);font-variant-numeric:tabular-nums}.standings i{border-radius:50%;width:10px;height:10px}.who{font:500 16px/1 var(--sans)}.sub{color:#6b7365;font-variant-numeric:tabular-nums;font-size:14px}.placings b,.standings b{font:600 16px/1 var(--sans);font-variant-numeric:tabular-nums;margin-left:auto}.final .standings li:first-child{background:#f4d322;padding:20px 18px}.final .standings li:first-child .who{font-size:20px}.final-actions{flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;display:flex}@media (max-width:860px){.play-head{padding:16px}.play-wrap{padding:8px 16px 48px}.play-grid{grid-template-columns:1fr}.panel{padding:22px 18px}.hud{gap:12px;padding:8px 14px}.bar{width:36px}}