:root,[data-theme=classic]{--bg: #f5f3ef;--panel-bg: #ffffff;--text: #21201c;--text-muted: #77746c;--border: #e4e1d9;--board-frame: #46403a;--point-a: #d9d2c4;--point-b: #c17a63;--bar-bg: #322d28;--checker-white-fill: #faf9f6;--checker-white-border: #8f8879;--checker-black-fill: #221f1b;--checker-black-border: #000000;--accent: #c17a63;--accent-text: #ffffff;--highlight: #34c759}[data-theme=walnut]{--bg: #f2f1ea;--panel-bg: #ffffff;--text: #22261f;--text-muted: #767c6e;--border: #dce0d2;--board-frame: #3d4237;--point-a: #dedbc9;--point-b: #7c9c81;--bar-bg: #2b2f25;--checker-white-fill: #faf9f4;--checker-white-border: #a2a58f;--checker-black-fill: #24271f;--checker-black-border: #000000;--accent: #6b8f71;--accent-text: #ffffff;--highlight: #e3a857}[data-theme=dark]{--bg: #0e0e11;--panel-bg: #17171c;--text: #ededf0;--text-muted: #8d8d96;--border: #26262e;--board-frame: #212127;--point-a: #2d2d36;--point-b: #423349;--bar-bg: #131317;--checker-white-fill: #ededf0;--checker-white-border: #8d8d96;--checker-black-fill: #0a0a0d;--checker-black-border: #45454f;--accent: #7c6ff5;--accent-text: #ffffff;--highlight: #35d28a}[data-theme=midnight]{--bg: #080c12;--panel-bg: #101823;--text: #e6ecf1;--text-muted: #7f909d;--border: #1c2836;--board-frame: #16212c;--point-a: #223040;--point-b: #26454f;--bar-bg: #0c141c;--checker-white-fill: #e6ecf1;--checker-white-border: #62727e;--checker-black-fill: #060a0f;--checker-black-border: #3a4c58;--accent: #38bdb0;--accent-text: #06110f;--highlight: #f2b84b}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}button{font-family:inherit}a{color:var(--accent)}.page{max-width:1800px;margin:0 auto;padding:24px clamp(8px,4vw,16px) 64px}.home-page{display:flex;flex-direction:column;align-items:center;text-align:center}.home-title-row{display:flex;align-items:center;gap:12px}.home-layout{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px;text-align:left;width:100%}.home-card{background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;padding:24px;margin-top:24px;max-width:560px;width:100%}.room-list-card{max-width:420px}.room-list-card h2{margin:0 0 16px;font-size:18px}.room-list-empty{color:var(--text-muted);font-size:14px;margin:0}.room-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.room-list-row{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer;text-align:left}.room-list-row:hover{border-color:var(--accent)}.room-list-code{font-family:monospace;font-weight:600;font-size:15px}.room-list-players{font-size:13px;color:var(--text-muted)}.room-list-status{font-size:12px;padding:2px 8px;border-radius:10px;background:var(--panel-bg);border:1px solid var(--border)}.room-list-status-in_progress{color:var(--accent);border-color:var(--accent)}.chat-panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:24px;width:100%;display:flex;flex-direction:column;gap:10px;box-sizing:border-box}.home-layout>.chat-panel{max-width:420px;margin-top:0}.chat-panel h2{margin:0;font-size:16px}.chat-messages{height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}.chat-empty{color:var(--text-muted);font-size:13px;margin:0}.chat-message{font-size:13px;line-height:1.4;word-break:break-word}.chat-message-name{font-weight:600;margin-right:6px}.chat-message-mine .chat-message-name{color:var(--accent)}.chat-input-row{display:flex;gap:8px}.chat-input-row input{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px}.chat-input-row .btn{padding:8px 14px;font-size:13px;flex-shrink:0}.sound-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--panel-bg);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.sound-toggle:hover{border-color:var(--accent)}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.field label{font-size:13px;color:var(--text-muted)}.field input:not([type=checkbox]){width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:16px}.checkbox-field{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);cursor:pointer}.checkbox-field input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.option-row{display:flex;gap:10px;flex-wrap:wrap}.option-button{border:2px solid var(--border);background:var(--panel-bg);color:var(--text);border-radius:8px;padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px}.option-button.selected{border-color:var(--accent)}.swatch{display:flex;gap:2px}.swatch span{width:12px;height:12px;border-radius:50%;display:inline-block}.direction-preview{font-size:20px}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:8px;padding:10px 18px;font-size:15px;cursor:pointer}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}.error-text{color:#d33;font-size:14px;margin-top:8px}.divider{border-top:1px solid var(--border);margin:20px 0}.room-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}.room-header-left{display:flex;align-items:center;gap:14px}.room-header-right{display:flex;align-items:center;gap:10px}.room-code{font-family:monospace;font-size:18px;background:var(--panel-bg);color:var(--text);border:1px solid var(--border);padding:4px 10px;border-radius:6px;cursor:pointer;transition:border-color .15s ease}.room-code:hover{border-color:var(--accent)}.banner{padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:14px}.banner-info{background:var(--panel-bg);border:1px solid var(--border)}.undo-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 14px;font-size:13px}.undo-banner span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.undo-banner .btn{padding:5px 12px;font-size:13px;flex-shrink:0}.undo-banner-inactive{visibility:hidden}.banner-warn{background:#7a5b00;color:#fff}.game-layout{display:grid;gap:16px;align-items:start;grid-template-columns:220px 1fr 220px;grid-template-areas:"black-player board white-player" "cube         board ." "spectators   board ."}.area-board{grid-area:board}.area-black-player{grid-area:black-player;min-width:0}.area-white-player{grid-area:white-player;min-width:0}.area-cube{grid-area:cube}.area-spectators{grid-area:spectators}@media(max-width:900px){.game-layout{grid-template-columns:1fr 1fr;grid-template-areas:"black-player white-player" "board        board" "cube         spectators"}}@media(max-width:560px){.game-layout{grid-template-columns:1fr;grid-template-areas:"black-player" "white-player" "board" "cube" "spectators"}}.player-panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px}.player-panel.active{border-color:var(--accent)}.player-color-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0}.player-color-dot.white{background:var(--checker-white-fill);border:2px solid var(--checker-white-border)}.player-color-dot.black{background:var(--checker-black-fill);border:2px solid var(--checker-black-border)}.player-name{font-weight:600}.player-meta{font-size:12px;color:var(--text-muted)}.open-seat{background:var(--panel-bg);border:1px dashed var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}.spectator-list{background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;padding:12px;font-size:13px}.dice-tray{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.8cqw,12px)}.dice-faces{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.2cqw,8px)}.turn-controls{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.6cqw,10px)}.icon-btn{width:clamp(24px,6.5cqw,40px);height:clamp(24px,6.5cqw,40px);border-radius:50%;border:1px solid var(--border);background:var(--panel-bg);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #00000059;flex-shrink:0}.icon-btn:disabled{opacity:.4;cursor:not-allowed}.icon-btn-primary{background:var(--accent);color:var(--accent-text);border-color:transparent}.icon-btn svg{width:72%;height:72%}.roll-btn{width:clamp(28px,7.5cqw,46px);height:clamp(28px,7.5cqw,46px)}.icon-btn.is-busy{animation:icon-btn-pulse 1s ease-in-out infinite}@keyframes icon-btn-pulse{0%,to{opacity:1}50%{opacity:.45}}.die{width:clamp(24px,6.5cqw,52px);height:clamp(24px,6.5cqw,52px);border-radius:clamp(4px,1.4cqw,10px);background:var(--panel-bg);border:2px solid var(--border);padding:clamp(3px,1cqw,7px);box-sizing:border-box}.die.used{opacity:.35}.die-pips{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;width:100%;height:100%}.die-pip{border-radius:50%;background:transparent}.die-pip-active{background:var(--text)}.cube-panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px}.cube-value{width:48px;height:48px;border-radius:8px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;background:var(--bg)}.board-frame{display:flex;gap:clamp(4px,1.2vw,8px);background:var(--board-frame);padding:clamp(6px,1.5vw,10px);border-radius:10px;width:100%;max-width:1300px;margin:0 auto;box-sizing:border-box;container-type:inline-size}.board-grid{position:relative;flex:1;display:grid;grid-template-columns:1fr .2fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"topleft bar topright" "bottomleft bar bottomright";gap:4px;background:var(--board-frame);width:100%;aspect-ratio:1.3 / 1}.dice-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;pointer-events:none}.dice-overlay button{pointer-events:auto}.cell-topleft{grid-area:topleft}.cell-topright{grid-area:topright}.cell-bottomleft{grid-area:bottomleft}.cell-bottomright{grid-area:bottomright}.cell-bar{grid-area:bar}.point-group{display:flex;gap:2px;height:100%;min-height:0}.point{flex:1;min-height:0;position:relative;display:flex;align-items:center;padding:4px 0;border:none;background:transparent;cursor:default;min-width:0}.point-top{flex-direction:column}.point-bottom{flex-direction:column-reverse}.point-triangle{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.point-top .point-triangle{clip-path:polygon(0 0,100% 0,50% 100%)}.point-bottom .point-triangle{clip-path:polygon(0 100%,100% 100%,50% 0)}.point-shade-a{--point-color: var(--point-a)}.point-shade-b{--point-color: var(--point-b)}.point-triangle{background:var(--point-color)}.point-selectable{cursor:pointer}.point-selectable .point-triangle{filter:brightness(1.15)}.point-destination{cursor:pointer}.point-destination .point-triangle{background:var(--highlight)}.point-selected .point-triangle{background:var(--accent)}.point-destination .point-triangle:before,.point-selected .point-triangle:before{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;clip-path:inherit;background:var(--point-color)}.checker-stack{position:relative;display:flex;flex-direction:inherit;align-items:center;gap:2px;width:100%}.checker{width:20px;height:20px;width:clamp(11px,5.5cqw,64px);height:clamp(11px,5.5cqw,64px);border-radius:50%;flex-shrink:0;margin:0 auto}.checker-white{background:var(--checker-white-fill);border:2px solid var(--checker-white-border);box-shadow:0 0 0 1px #0000002e,0 2px 3px #0000004d}.checker-black{background:var(--checker-black-fill);border:2px solid var(--checker-black-border);box-shadow:0 0 0 1px #ffffff29,0 2px 3px #0006}.checker-draggable{cursor:grab;touch-action:none}.checker-dragging{position:relative;z-index:50;cursor:grabbing;box-shadow:0 8px 16px #0006;pointer-events:none}.checker-stack-overlap{gap:0}.checker-stack-overlap .checker{margin-top:calc(-1 * var(--checker-overlap, 0px));margin-bottom:calc(-1 * var(--checker-overlap, 0px))}.checker-stack-overlap .checker:first-child{margin-top:0}.checker-stack-overlap .checker:last-child{margin-bottom:0}.checker-flat{height:6px;height:clamp(3px,1.4cqw,16px);border-radius:2px}.checker-stack-flat{gap:1px}.cell-bar{display:flex}.bar-spot{width:100%;background:var(--bar-bg);border:none;border-radius:6px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 0;cursor:default}.bar-half{display:flex;flex-direction:column;align-items:center;gap:2px}.off-column{display:flex;flex-direction:column;gap:4px;width:40px;width:clamp(24px,9cqw,130px);flex-shrink:0}.off-tray{background:var(--panel-bg);border:1px solid var(--border);border-radius:6px;min-height:0;flex:1;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:default;overflow:hidden}.game-over-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10}.game-over-modal{background:var(--panel-bg);border-radius:12px;padding:24px;text-align:center;min-width:280px}