*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#1a1a2e;color:#eee;overflow:hidden}#app{display:flex;height:100vh;width:100vw}#lobby{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#1a1a2ef7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;overflow-y:auto}.lobby-header{display:flex;flex-direction:column;align-items:center;gap:12px}#lobby-logo{width:clamp(140px,28vw,240px);height:auto;border-radius:12px;border:1px solid rgba(79,195,247,.4);box-shadow:0 0 24px #4fc3f733}#lobby h2{font-size:26px;color:#e94560;letter-spacing:2px}.lobby-section{width:min(540px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;background:#16213e;border:1px solid rgba(79,195,247,.25);border-radius:12px}.lobby-section h3{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4fc3f7;margin-bottom:2px}.lobby-row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}#lobby button,#lobby input{padding:10px 16px;border-radius:8px;border:none;font-size:15px}#lobby button{background:#e94560;color:#fff;cursor:pointer}#lobby input{background:#0f3460;color:#eee;border:1px solid #4fc3f7;width:260px}#room-link input{width:320px}#lobby-status{min-height:22px;color:#4fc3f7;font-size:14px}#tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#0a0a14cc;display:flex;align-items:center;justify-content:center;padding:24px}#tutorial-overlay[hidden]{display:none}.tutorial-box{background:#16213e;border:1px solid #4fc3f7;border-radius:12px;padding:24px 28px;max-width:420px;text-align:center}.tutorial-box h3{color:#e94560;margin-bottom:12px}.tutorial-box p{line-height:1.5;margin-bottom:16px}.tutorial-box button{padding:10px 20px;border:none;border-radius:8px;background:#e94560;color:#fff;font-size:15px;cursor:pointer}.tutorial-disable{display:flex;align-items:center;gap:6px;font-size:13px;color:#9fb3c8;margin-bottom:12px}#sidebar-toggle{display:none;position:fixed;top:16px;left:16px;z-index:20;padding:8px;background:#16213e;border:1px solid rgba(79,195,247,.3);border-radius:8px;cursor:pointer;color:#e94560;box-shadow:0 2px 8px #0000004d}.hamburger{display:block;width:24px;height:2px;background:#e94560;position:relative;transition:background .2s}.hamburger:before,.hamburger:after{content:"";position:absolute;left:0;width:100%;height:2px;background:#e94560;transition:transform .2s}.hamburger:before{top:-7px}.hamburger:after{bottom:-7px}#sidebar-toggle[aria-expanded=true] .hamburger{background:transparent}#sidebar-toggle[aria-expanded=true] .hamburger:before{transform:rotate(45deg) translate(5px,5px)}#sidebar-toggle[aria-expanded=true] .hamburger:after{transform:rotate(-45deg) translate(5px,-5px)}@media(max-width:700px){#sidebar-toggle{display:flex;align-items:center;justify-content:center}}#sidebar{width:260px;padding:24px 16px;background:#16213e;display:flex;flex-direction:column;gap:20px;z-index:1;transition:transform .3s ease,box-shadow .3s ease}#sidebar.closed{transform:translate(-100%)}#sidebar.open{transform:translate(0)}@media(max-width:700px){#sidebar-toggle{display:flex;align-items:center;justify-content:center}#sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;z-index:15;box-shadow:4px 0 24px #0006;transform:translate(-100%)}#sidebar.open{transform:translate(0)}#sidebar.closed{transform:translate(-100%)}#app{padding-left:0}#canvas-container{width:100%}}#sidebar h1{font-size:28px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#e94560}#player-info{display:flex;flex-direction:column;gap:10px}.player-card{display:flex;align-items:center;gap:10px;padding:12px;border-radius:8px;background:#0f3460;border:2px solid transparent;transition:border-color .2s,background .2s}.player-card.active{border-color:#e94560;background:#1a1a4e}.ball-indicator{width:20px;height:20px;border-radius:50%;flex-shrink:0}.ball-indicator.light{background:radial-gradient(circle at 35% 35%,#ff8fa3,#e94560);border:1px solid #a0283f}.ball-indicator.dark{background:radial-gradient(circle at 35% 35%,#555,#1a1a1a);border:1px solid #333}.player-label{flex:1;font-size:16px;font-weight:600}.reserve-count{font-size:22px;font-weight:700;color:#e94560}#turn-indicator{padding:10px;border-radius:8px;background:#0f3460;text-align:center;font-size:14px;font-weight:600}#move-count{text-align:center;font-size:13px;color:#9fb3c8}#iso-mini-container{display:flex;justify-content:center;border-radius:8px;overflow:hidden;background:#16213e;border:1px solid rgba(79,195,247,.25)}#iso-mini-container canvas{display:block;width:170px;height:170px;pointer-events:none}#move-options{display:flex;flex-direction:column;gap:8px}#canvas-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}#game-status{margin-top:0;padding:10px;border-radius:8px;background:#0f3460;text-align:center;font-size:14px;min-height:40px;display:flex;align-items:center;justify-content:center}#logout-btn{padding:10px;border:none;border-radius:8px;background:#0f3460;color:#9fb3c8;font-size:13px;cursor:pointer;transition:color .2s,background .2s}#logout-btn:hover{color:#fff;background:#e94560}#logout-btn[hidden]{display:none}#legend{padding:10px;border-radius:8px;background:#0f3460;font-size:12px;margin-top:auto}#legend summary{cursor:pointer;font-weight:600;font-size:13px;-webkit-user-select:none;user-select:none}#legend ul{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:6px}#legend li{display:flex;align-items:center;gap:8px;line-height:1.3}.swatch{width:16px;height:16px;flex-shrink:0;border-radius:50%;display:inline-block}.sw-ring-blue{background:transparent;border:3px solid #4fc3f7}.sw-ring-red{background:transparent;border:3px solid #ff5252}.sw-ring-blue-wide{background:transparent;border:4px solid #4fc3f7}.sw-ring-gray{background:transparent;border:3px solid #9e9e9e}.sw-square-green{border-radius:3px;background:#66bb6a99}.sw-square-yellow{border-radius:3px;background:#ffeb3b99}.sw-disc-red{background:#ff5252d9}.sw-border-active{border-radius:4px;background:#0f3460;border:2px solid #e94560}