@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background:#1a1a2e;display:flex;justify-content:center;align-items:center;height:100vh;height:100dvh;font-family:"Press Start 2P",monospace;color:#c8c8d0;overflow:hidden;-webkit-tap-highlight-color:transparent}canvas{image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;max-width:100vw;max-height:100vh;max-height:100dvh;object-fit:contain}#ui{display:none;justify-content:center;align-items:center;width:100%;height:100%;overflow-y:auto;padding:16px}.panel{background:#16213e;border:4px solid #c8c8d0;padding:32px;max-width:400px;width:100%;display:flex;flex-direction:column;gap:16px}@media(max-width:440px){.panel{padding:20px 16px;border-width:3px;gap:12px}}.title{font-size:18px;text-align:center;color:#e8e8e8;margin-bottom:8px}.separator{border-top:2px solid #2a2a3e;margin:4px 0}.desc{font-size:7px;color:#668;line-height:2;text-align:center}.section{display:flex;flex-direction:column;gap:10px}.section-title{font-size:10px;color:#8b9dc3}.input{background:#0f0f23;border:2px solid #c8c8d0;color:#e8e8e8;padding:10px 12px;font-family:"Press Start 2P",monospace;font-size:10px;outline:none}.input:focus{border-color:#8b9dc3}.btn{background:#2a2a3e;border:2px solid #c8c8d0;color:#e8e8e8;padding:12px 16px;min-height:44px;font-family:"Press Start 2P",monospace;font-size:12px;cursor:pointer;text-align:center;touch-action:manipulation}.btn:hover{background:#3a3a5e}.btn:active{background:#4a4a6e}.btn-secondary{font-size:10px;padding:8px 12px}.btn-back{font-size:8px;padding:8px 12px;border-color:#557;color:#888;margin-top:4px}.btn-back:hover{border-color:#88a;color:#aaa}.btn-ready{border-color:#9bc49b;color:#9bc49b}.btn-start{background:#1a3a1a;border-color:#9bc49b;color:#9bc49b}.btn-start.disabled{opacity:.3;cursor:not-allowed}.btn.active{border-color:#8b9dc3;color:#8b9dc3;background:#1a2a4e}.form-area{display:flex;flex-direction:column;gap:10px}.start-hint{font-size:7px;color:#557;text-align:center}.count-select{display:flex;gap:8px}.count-btn{background:#2a2a3e;border:2px solid #c8c8d0;color:#c8c8d0;padding:8px 16px;font-family:"Press Start 2P",monospace;font-size:10px;cursor:pointer;flex:1}.count-btn.active{border-color:#8b9dc3;color:#8b9dc3;background:#1a2a4e}.room-code{font-size:16px;text-align:center;color:#8b9dc3;letter-spacing:4px}.player-count{font-size:10px;text-align:center;color:#c8c8d0}.player-list{display:flex;flex-direction:column;gap:8px}.player-row{display:flex;align-items:center;gap:10px;padding:8px;background:#0f0f23;border:1px solid #2a2a3e}.color-dot{width:12px;height:12px;border-radius:0;display:inline-block;flex-shrink:0}.player-name{font-size:10px;flex:1}.player-status{font-size:8px;color:#666}.player-status.ready{color:#9bc49b}.reaction-float{position:fixed;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:100;animation:reaction-float 2.6s ease-out forwards;transform-origin:center center}.reaction-float-emoji{font-size:36px;font-family:sans-serif;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}.reaction-float-name{font-family:"Press Start 2P",monospace;font-size:6px;text-shadow:0 1px 3px rgba(0,0,0,.8)}@keyframes reaction-float{0%{opacity:0;transform:translateY(0) translate(0) rotate(var(--rot)) scale(.5)}12%{opacity:1;transform:translateY(-10px) translate(0) rotate(var(--rot)) scale(1.2)}25%{opacity:1;transform:translateY(-20px) translate(var(--wobble)) rotate(calc(var(--rot) * .7)) scale(1)}75%{opacity:1;transform:translateY(-60px) translate(calc(var(--wobble) * -.5)) rotate(calc(var(--rot) * -.3)) scale(.9)}to{opacity:0;transform:translateY(-90px) translate(0) rotate(0) scale(.7)}}#hints{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:24px;padding:10px 16px;font-family:"Press Start 2P",monospace;font-size:7px;color:#446;pointer-events:none}#hints span{white-space:nowrap}#hints span b{color:#6a6a8a;font-weight:400}#game-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#000000bf;padding:24px}.overlay-title{font-family:"Press Start 2P",monospace;font-size:20px;color:#e8e8e8;text-align:center}.overlay-subtitle{font-family:"Press Start 2P",monospace;font-size:10px;color:#888;text-align:center;max-width:360px;line-height:2;white-space:pre-line}.overlay-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px;margin-top:8px}.overlay-buttons .btn{width:100%}.overlay-buttons .btn.disabled{opacity:.4;cursor:not-allowed}#reaction-bar{display:none;position:fixed;bottom:32px;left:50%;transform:translate(-50%);z-index:60;gap:8px}#reaction-bar button{background:#2a2a3ecc;border:2px solid #2a2a3e;font-size:20px;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;touch-action:manipulation}#reaction-bar button:hover{border-color:#4a4a6e;background:#3a3a5ee6}#reaction-bar button:active{background:#4a4a6ee6}#global-controls{position:fixed;top:12px;right:12px;z-index:200;display:flex;gap:8px}#global-controls button{background:none;border:2px solid #2a2a3e;color:#668;font-size:18px;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}#global-controls button:hover{border-color:#4a4a6e;color:#88a}#back-btn{font-family:"Press Start 2P",monospace;font-size:14px}.share-link{font-size:7px;color:#6a8ab4;text-align:center;cursor:pointer;padding:6px 8px;border:1px solid #2a3a5e;background:#0f0f23;letter-spacing:1px;-webkit-user-select:all;user-select:all}.share-link:hover{color:#8baad4;border-color:#4a5a7e}.share-copied{color:#9bc49b!important;border-color:#4a7a4a!important}