*{box-sizing:border-box;margin:0;padding:0}:root{--color-p1: #e74c3c;--color-p2: #3498db;--color-p3: #2ecc71;--color-p4: #f1c40f;--color-bg: #1a1a2e;--color-surface: #16213e;--color-cell: #0f3460;--color-cell-hover: #1a4a7a;--color-text: #eee;--color-muted: #888;--board-size: min(90vw, 90vh - 140px, 500px)}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--color-bg);color:var(--color-text);display:flex;justify-content:center;align-items:center;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#app{width:100%;max-width:540px;padding:12px;display:flex;flex-direction:column;align-items:center}#version-footer{position:fixed;bottom:4px;right:8px;font-size:.65rem;color:var(--color-muted);opacity:.5}#lobby{text-align:center}#lobby h1{font-size:2.5rem;margin-bottom:4px}.subtitle{color:var(--color-muted);margin-bottom:24px}.lobby-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}button{padding:14px 28px;font-size:1.1rem;font-weight:600;border:none;border-radius:10px;background:var(--color-cell);color:var(--color-text);cursor:pointer;transition:background .15s}button:active{background:var(--color-cell-hover)}#join-form{display:flex;gap:8px;justify-content:center}#room-input{padding:12px;font-size:1.2rem;text-align:center;text-transform:uppercase;letter-spacing:4px;width:160px;border:2px solid var(--color-cell);border-radius:10px;background:var(--color-surface);color:var(--color-text)}#room-info{margin-top:16px}#room-code{font-size:1.5rem;letter-spacing:4px;text-transform:uppercase}#btn-copy-code{padding:6px 16px;font-size:.85rem;margin:8px 0}#player-list{display:flex;gap:12px;justify-content:center;margin:16px 0}.player-dot{width:36px;height:36px;border-radius:50%;opacity:.3;transition:opacity .3s}.player-dot.connected{opacity:1}.player-dot.p1{background:var(--color-p1)}.player-dot.p2{background:var(--color-p2)}.player-dot.p3{background:var(--color-p3)}.player-dot.p4{background:var(--color-p4)}#room-info p{font-size:.9rem;margin:8px 0;color:var(--color-text)}.hint{color:var(--color-muted);font-size:.8rem!important}#game{width:100%;display:flex;flex-direction:column;align-items:center;position:relative}#hud{width:100%;max-width:500px;margin-bottom:12px}#you-are{text-align:center;font-size:.9rem;margin-bottom:8px;padding:4px 12px;background:var(--color-surface);border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px}.you-are-dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle}.you-are-dot.p1{background:var(--color-p1)}.you-are-dot.p2{background:var(--color-p2)}.you-are-dot.p3{background:var(--color-p3)}.you-are-dot.p4{background:var(--color-p4)}#player-indicators{display:flex;justify-content:center;gap:16px;margin-bottom:8px}.indicator{display:flex;align-items:center;gap:6px;font-size:.85rem;opacity:.5;transition:opacity .2s}.indicator.active{opacity:1}.indicator-dot{width:16px;height:16px;border-radius:50%}.indicator-dot.p1{background:var(--color-p1)}.indicator-dot.p2{background:var(--color-p2)}.indicator-dot.p3{background:var(--color-p3)}.indicator-dot.p4{background:var(--color-p4)}#turn-info{text-align:center;font-size:1rem;margin-bottom:6px;min-height:1.5em;display:flex;align-items:center;justify-content:center;gap:8px}.turn-dot{display:inline-block;width:20px;height:20px;border-radius:50%;flex-shrink:0}.turn-dot.p1{background:var(--color-p1)}.turn-dot.p2{background:var(--color-p2)}.turn-dot.p3{background:var(--color-p3)}.turn-dot.p4{background:var(--color-p4)}#timer-bar-container{width:100%;height:6px;background:var(--color-surface);border-radius:3px;overflow:hidden}#timer-bar{height:100%;width:100%;border-radius:3px;background:var(--color-p1);transition:background .3s}#timer-bar.running{animation:shrink 5s linear forwards}#timer-bar.urgent{background:#e74c3c!important}@keyframes shrink{0%{width:100%}to{width:0%}}#board{width:var(--board-size);height:var(--board-size);display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:4px}.cell{background:var(--color-cell);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;position:relative}.cell:active{background:var(--color-cell-hover)}.cell.blocked{background:var(--color-bg);cursor:default;opacity:.3}.cell.valid-target{background:var(--color-cell-hover)}.cell.selected{outline:3px solid white;outline-offset:-3px}.piece{width:70%;height:70%;border-radius:50%;transition:transform .15s}.piece.p1{background:var(--color-p1)}.piece.p2{background:var(--color-p2)}.piece.p3{background:var(--color-p3)}.piece.p4{background:var(--color-p4)}.piece.selectable{cursor:pointer;box-shadow:0 0 0 3px #ffffff4d}#game-over{position:absolute;inset:0;background:#000c;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:10}#game-over.visible{display:flex}#game-over-message{font-size:1.8rem;font-weight:700;text-align:center}@media(orientation:landscape)and (max-height:500px){#app{flex-direction:row;max-width:none;gap:16px}#hud{width:180px;margin-bottom:0}:root{--board-size: min(85vh, 85vw - 200px, 400px)}}