:root{--bg: #f3f3f1;--panel-bg: #ffffff;--text: #1a1a1a;--muted: #6b6b6b;--border: #d6d6d6;--board-wood: #deb887;--board-grid: #5c4022;--square-selected: #b8dcff;--zone-overlay: rgba(20, 20, 20, .1);--piece-white-bg: #fdfdfd;--piece-white-border: #2a2a2a;--piece-white-fg: #111111;--piece-black-bg: #1e1e1e;--piece-black-border: #000000;--piece-black-fg: #f2f2f2;--tier-level1: #a9d9f2;--tier-level2: #2f7fd1;--tier-level3: #4caf72;--tier-unlimited: #d94f4f;--danger: #c0392b}@media (prefers-color-scheme: dark){:root{--bg: #17181a;--panel-bg: #212225;--text: #ececec;--muted: #9a9a9a;--border: #3a3b3e;--square-selected: #35597a;--zone-overlay: rgba(255, 255, 255, .08);--piece-white-bg: #efefef;--piece-white-border: #cfcfcf;--piece-white-fg: #111111;--piece-black-bg: #0e0e0e;--piece-black-border: #000000;--piece-black-fg: #f2f2f2}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}.app{min-height:100vh;display:flex;flex-direction:column}.reconnect-banner{background:var(--danger);color:#fff;text-align:center;padding:.5rem;font-weight:600}.home-screen{margin:auto;padding:2rem;max-width:420px;display:flex;flex-direction:column;gap:1rem;align-items:stretch;text-align:center}.home-screen h1{font-size:1.8rem;margin-bottom:.5rem}.field{display:flex;flex-direction:column;gap:.25rem;text-align:left;font-size:.9rem;color:var(--muted)}.field input{font-size:1rem;padding:.5rem}.home-actions{display:flex;flex-direction:column;gap:.75rem}.divider{color:var(--muted);font-size:.85rem}.join-row{display:flex;gap:.5rem}.join-row input{flex:1;text-align:center;letter-spacing:.15em;text-transform:uppercase}button{font-size:1rem;padding:.6rem 1rem;border-radius:6px;border:1px solid var(--border);background:var(--panel-bg);color:var(--text);cursor:pointer}button:hover:not(:disabled){border-color:var(--muted)}button:disabled{opacity:.5;cursor:default}.solo-panel{display:flex;flex-direction:column;gap:.6rem;border:1px solid var(--border);border-radius:8px;padding:1rem}.solo-panel h3{margin:0}.option-row{display:flex;gap:.4rem}.option-row button{flex:1;padding:.4rem .5rem;font-size:.9rem}.option-selected{outline:2px solid var(--square-selected);outline-offset:2px;font-weight:700}.error-banner{color:var(--danger);font-size:.9rem}.warn-banner{color:var(--danger);font-size:.85rem}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--muted);border-radius:50%;margin:.5rem auto;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.searching-box{display:flex;flex-direction:column;align-items:center;gap:.5rem}.room-code{font-size:2rem;letter-spacing:.2em;font-weight:700;padding:.5rem 1rem;border:2px dashed var(--border);border-radius:8px}.game-screen{display:flex;gap:1.5rem;align-items:flex-start;justify-content:center;padding:1.5rem;flex-wrap:wrap}.side-panel{width:220px;background:var(--panel-bg);border:1px solid var(--border);border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.side-panel h2,.side-panel h3{margin:.2rem 0}.your-turn{font-weight:700}.hint{color:var(--muted);font-size:.85rem}.board{display:grid;border:2px solid var(--board-grid);background:var(--board-wood);width:max-content}.square{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-right:1px solid var(--board-grid);border-bottom:1px solid var(--board-grid)}.square-selected{outline:3px solid var(--square-selected);outline-offset:-3px;z-index:2}.square-zone:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--zone-overlay);pointer-events:none}.move-highlight{position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:4px;pointer-events:none;z-index:3;opacity:.45;border-width:0}.move-highlight-occupied{background:transparent;border-width:4px;border-style:solid;opacity:.7}.tier-level1{background-color:var(--tier-level1);border-color:var(--tier-level1)}.tier-level2{background-color:var(--tier-level2);border-color:var(--tier-level2)}.tier-level3{background-color:var(--tier-level3);border-color:var(--tier-level3)}.tier-unlimited{background-color:var(--tier-unlimited);border-color:var(--tier-unlimited)}.stack{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.stack-layer{position:absolute}.stack-count{position:absolute;bottom:2px;right:4px;font-size:.7rem;font-weight:700;background:var(--panel-bg);border:1px solid var(--border);border-radius:4px;padding:0 3px;z-index:10}.piece{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;-webkit-user-select:none;user-select:none;border-width:2px;border-style:solid}.piece-white{background:var(--piece-white-bg);border-color:var(--piece-white-border);color:var(--piece-white-fg)}.piece-black{background:var(--piece-black-bg);border-color:var(--piece-black-border);color:var(--piece-black-fg)}.hand-tray{display:flex;flex-wrap:wrap;gap:.4rem}.hand-piece-wrapper{position:relative}.hand-empty{color:var(--muted);font-size:.85rem}.hand-piece{position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;border-width:2px}.hand-piece-kanji{font-size:1.1rem;font-weight:700}.hand-piece-count{position:absolute;bottom:-4px;right:-4px;background:var(--panel-bg);color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:.65rem;padding:0 4px}.hand-piece-selected{outline:3px solid var(--square-selected);outline-offset:2px}.piece-tooltip-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:250;pointer-events:none}.piece-tooltip{background:var(--panel-bg);border:1px solid var(--border);border-radius:8px;padding:.75rem;box-shadow:0 6px 24px #00000059;display:flex;flex-direction:column;align-items:center;gap:.35rem}.piece-tooltip-title{font-weight:700;font-size:.85rem;white-space:nowrap}.piece-tooltip-kanji{color:var(--muted);font-weight:400}.movement-preview{display:flex;flex-direction:column;align-items:center;gap:.25rem}.preview-grid{display:grid;border:1px solid var(--board-grid);background:var(--board-wood)}.preview-square{position:relative;border-right:1px solid var(--board-grid);border-bottom:1px solid var(--board-grid)}.preview-highlight{position:absolute;top:1px;right:1px;bottom:1px;left:1px;opacity:.55}.preview-level{font-size:.7rem;color:var(--muted)}.chat-panel{width:240px;background:var(--panel-bg);border:1px solid var(--border);border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.5rem;max-height:520px}.chat-panel h3{margin:0}.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem;min-height:120px}.chat-message{display:flex;flex-direction:column;font-size:.85rem;padding:.35rem .5rem;border-radius:6px;max-width:90%}.chat-mine{align-self:flex-end;background:var(--square-selected)}.chat-theirs{align-self:flex-start;background:var(--border)}.chat-author{font-size:.7rem;font-weight:700;opacity:.7}.chat-input-row{display:flex;gap:.4rem}.chat-input-row input{flex:1;min-width:0}.help-button{align-self:flex-start;font-size:.8rem;padding:.3rem .6rem;color:var(--muted)}.tutorial-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300}.tutorial-dim{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6}.tutorial-spotlight{position:fixed;border-radius:8px;outline:3px solid var(--square-selected);box-shadow:0 0 0 9999px #000000a6;pointer-events:none;transition:all .15s ease}.tutorial-bubble{position:fixed;width:320px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow-y:auto;background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;padding:1rem;box-shadow:0 6px 24px #0000004d;display:flex;flex-direction:column;gap:.5rem}.tutorial-bubble h4{margin:0}.tutorial-controls{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tutorial-progress{font-size:.8rem;color:var(--muted)}.tutorial-buttons{display:flex;gap:.4rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--panel-bg);border-radius:10px;padding:1.5rem;max-width:420px;width:90%;display:flex;flex-direction:column;gap:.75rem}.modal-actions{display:flex;gap:.5rem;flex-wrap:wrap}.modal-cancel{color:var(--muted)}.turncoat-option{display:flex;align-items:center;gap:.5rem;font-size:.9rem}