*{box-sizing:border-box}body{margin:0;background:#f1f3f8;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}#root{height:100vh;width:100vw}button{font:inherit;cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed}.app{min-height:100vh;background-color:#c7f0ff;background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:22px 22px,44px 44px;background-position:0 0,10px 10px;color:#1b1b1b;font-family:Nunito,Segoe UI,system-ui,sans-serif}.lobby{padding:24px;display:flex;flex-direction:column;gap:20px;height:100vh;overflow:hidden}.lobby header h1{font-size:2rem;margin-bottom:4px}.lobby-actions{display:flex;gap:12px;flex-wrap:wrap}.lobby-actions button{padding:14px 20px;border-radius:999px;border:4px solid #000;background:#ff69b4;color:#000;font-size:1rem;font-weight:700;box-shadow:0 4px #0000001a;transition:transform .12s ease}.lobby-actions button:last-child{background:#fff}.lobby-actions button:active{transform:scale(.92)}.error{color:#c62828}.game-list{display:grid;gap:16px}.game-card{background:#fff;border-radius:22px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;border:4px solid #000;box-shadow:0 4px #0000000d}.game-card button{padding:12px 18px;border-radius:999px;border:4px solid #000;background:gold;color:#000;font-weight:700;transition:transform .12s ease}.game-card button:active{transform:scale(.92)}.empty{color:#666}.game-page{height:100vh;width:100vw;display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:12px 16px 18px;position:relative;overflow:hidden}.top-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.top-spacer{justify-self:end;width:48px;height:48px}.round-info{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:999px;border:4px solid #000;background:#fff;text-align:center;width:fit-content}.round-info strong{font-size:1.1rem}.turn-toggle{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:4px solid #000;background:#fff;justify-self:center}.turn-toggle span{font-weight:700;opacity:.5}.turn-toggle span.active{opacity:1}.toggle-pill{width:60px;height:28px;background:#000;border-radius:999px;position:relative}.toggle-pill.left .toggle-thumb{transform:translate(4px)}.toggle-pill.right .toggle-thumb{transform:translate(32px)}.toggle-thumb{position:absolute;top:4px;width:20px;height:20px;border-radius:50%;background:gold;transition:transform .2s ease}.hud-center{display:grid;grid-template-columns:minmax(150px,180px) minmax(300px,1fr) minmax(120px,160px);gap:16px;align-items:center;height:100%}.score-panel,.guess-panel{background:#fff;border-radius:24px;border:4px solid #000;padding:16px;display:flex;flex-direction:column;gap:12px}.score-row{display:flex;justify-content:space-between;font-weight:600}.board-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px}.turn-status{background:#fff;border-radius:999px;border:4px solid #000;padding:8px 20px;font-weight:700}.guess-panel h3,.score-panel h3{margin:0}.hint{font-size:.9rem;margin:0}.bottom-left{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:6px}.peek-chip{width:90px;height:90px;border-radius:50%;border:4px solid #000;background:#fff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .15s ease}.peek-chip:active{transform:scale(.92)}.peek-face{width:70%;height:70%;border-radius:50%;border:3px dashed #000;background:#e0f7ff}.peek-reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#fff;transform:translateY(100%);transition:transform .15s ease}.peek-chip.is-peeking .peek-reveal{transform:translateY(0)}.peek-chip.is-peeking .peek-face{opacity:0}.peek-label{font-size:.8rem}.secret-swatch{width:28px;height:28px;border-radius:50%;border:3px solid #000}.secret-text{text-transform:capitalize;font-weight:700}.bottom-right{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.guess-button{width:86px;height:86px;border-radius:50%;border:4px solid #000;background:#ff69b4;color:#000;font-size:1rem;font-weight:800;box-shadow:0 6px #0003;transition:transform .12s ease}.guess-button.active{animation:pulse 1.6s ease-in-out infinite}.guess-button:active{transform:scale(.9)}.move-info{position:absolute;left:50%;bottom:20px;transform:translate(-50%);background:#fff;border-radius:999px;border:4px solid #000;padding:8px 18px;font-weight:600}.winner-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#32cd32;border-radius:24px;border:4px solid #000;padding:20px 32px;font-size:1.4rem;font-weight:800;display:grid;gap:10px;text-align:center}.winner-banner h3{margin:0}.winner-banner p{margin:0;font-size:1rem}.winner-actions{display:flex;gap:12px;justify-content:center}.winner-actions button{padding:10px 18px;border-radius:999px;border:4px solid #000;font-weight:700;background:#fff}.winner-actions button:first-child{background:gold}.round-banner{position:absolute;top:18%;left:50%;transform:translate(-50%);background:#fff;border-radius:24px;border:4px solid #000;padding:16px 26px;display:grid;gap:6px;text-align:center;font-weight:700}.error{position:absolute;top:90px;left:50%;transform:translate(-50%);background:#fff;border-radius:999px;border:3px solid #000;padding:6px 16px;color:#c62828;font-weight:600}.connecting{padding:12px 18px;border-radius:999px;border:4px solid #000;background:#fff;font-weight:700}.secret-swatch.red{background:#e53935}.secret-swatch.orange{background:#fb8c00}.secret-swatch.yellow{background:#fdd835}.secret-swatch.green{background:#43a047}.secret-swatch.blue{background:#1e88e5}.secret-swatch.purple{background:#8e24aa}.secret-swatch.pink{background:#ec407a}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media(max-width:1024px){.hud-center{grid-template-columns:minmax(130px,160px) minmax(280px,1fr) minmax(110px,140px);gap:12px}.board{width:clamp(300px,52vw,480px)}}.board{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:12px;width:clamp(320px,55vw,520px);margin:0 auto;padding:14px;background:#d7f3ff;border-radius:28px;border:4px solid #000;touch-action:none;position:relative}.board-node{aspect-ratio:1 / 1;border-radius:50%;border:3px solid #000;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px #0000001f;position:relative;overflow:hidden;touch-action:manipulation;transition:transform .12s ease,filter .12s ease}.board-node:active{transform:scale(.92);filter:brightness(.92)}.board-node.ripple:before{content:"";position:absolute;width:20px;height:20px;border-radius:999px;background:#ffffffbf;left:var(--ripple-x);top:var(--ripple-y);transform:translate(-50%,-50%) scale(.2);animation:ripple .45s ease-out forwards}.board-node.selectable{border-color:gold;box-shadow:0 0 0 3px #ffd70059}.board-node.selected{border-color:#ff69b4;box-shadow:0 0 0 4px #ff69b459}.board-node.destination{border-color:#32cd32;box-shadow:0 0 0 4px #32cd3233}.board-node.destination:after{content:"";position:absolute;inset:6px;border-radius:50%;border:3px dashed #ffd700;animation:rotate-ring 2.4s linear infinite}.board-node.target{background:#fff6b8;border-color:#000}.piece{width:70%;height:70%;border-radius:50%;box-shadow:inset 0 0 0 3px #fff9;transition:transform .2s ease}.piece.moved{animation:hop .55s ease-out}.color-red{background:#e53935}.color-orange{background:#fb8c00}.color-yellow{background:#fdd835}.color-green{background:#43a047}.color-blue{background:#1e88e5}.color-purple{background:#8e24aa}.color-pink{background:#ec407a}@keyframes rotate-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ripple{to{transform:translate(-50%,-50%) scale(4.6);opacity:0}}@keyframes hop{0%{transform:scale(1)}40%{transform:scale(1.25)}to{transform:scale(1)}}.color-picker{display:grid;grid-template-columns:1fr;gap:10px}.color-button{min-height:56px;border-radius:999px;border:3px solid #000;font-size:.85rem;text-transform:capitalize;background:#f4f4f4;box-shadow:0 4px #0000001a;transition:transform .12s ease,filter .12s ease;touch-action:manipulation}.color-button:active{transform:scale(.9);filter:brightness(.92)}.color-button.active{border-color:#ff69b4;box-shadow:0 0 0 4px #ff69b459}.color-button.red{background:#ffcdd2}.color-button.orange{background:#ffe0b2}.color-button.yellow{background:#fff9c4}.color-button.green{background:#c8e6c9}.color-button.blue{background:#bbdefb}.color-button.purple{background:#e1bee7}.color-button.pink{background:#f8bbd0}