*{box-sizing:border-box;margin:0;padding:0}body{color:#eee;background:#1a1a2e;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px;font-family:system-ui,-apple-system,sans-serif;display:flex}#root{width:100%;max-width:1100px}.menu{text-align:center;padding:40px 20px}.menu h1{color:#e94560;margin-bottom:16px;font-size:2.5rem}.menu-buttons{justify-content:center;gap:12px;margin-top:24px;display:flex}.join-form{flex-direction:column;align-items:center;gap:16px;display:flex}.code-input{color:#eee;text-align:center;letter-spacing:.3em;background:#2a2a4a;border:2px solid #3a3a5a;border-radius:8px;width:200px;padding:12px 16px;font-size:1.5rem;font-weight:700}.code-input:focus{border-color:#e94560;outline:none}.room-code-display{letter-spacing:.3em;color:#e94560;background:#2a2a4a;border-radius:8px;margin:16px 0;padding:12px 24px;font-size:2rem;font-weight:700}.error-toast{color:#fff;z-index:200;background:#e94560;border-radius:8px;padding:12px 24px;font-size:.9rem;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0000004d}.subtitle{color:#aaa;max-width:500px;margin-bottom:32px;margin-left:auto;margin-right:auto;line-height:1.6}button{color:#fff;cursor:pointer;background:#e94560;border:none;border-radius:8px;padding:12px 24px;font-size:1rem;transition:opacity .2s}button:hover:not(:disabled){opacity:.85}button:disabled{opacity:.4;cursor:not-allowed}.board-with-labels{grid-template-rows:auto 24px;grid-template-columns:24px auto;gap:0;display:grid}.rank-labels{flex-direction:column;grid-area:1/1;justify-content:space-around;align-items:center;height:min(80vw,560px);display:flex}.file-labels{grid-area:2/2;justify-content:space-around;align-items:center;width:min(80vw,560px);display:flex}.rank-label,.file-label{color:#888;font-size:.8rem;font-weight:600}.board{border:4px solid #333;border-radius:4px;grid-area:1/2;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:min(80vw,560px);height:min(80vw,560px);display:grid;overflow:hidden}.square{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition:background .1s;display:flex;position:relative}.square.light{background:#f0d9b5}.square.dark{background:#b58863}.square.selected{background:#f7ec75!important}.square.valid-move{background:#9bc49b!important}.square.last-move{box-shadow:inset 0 0 0 3px gold}.square.deduction-selected{box-shadow:inset 0 0 0 3px #e94560}.dot{background:#0080004d;border-radius:50%;width:30%;height:30%}.piece{font-size:min(8vw,42px);line-height:1}.piece.white{color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,0 0 2px #000}.piece.black{color:#222;text-shadow:0 0 2px #888}.piece.revealed{animation:.3s reveal}.piece-wrapper{justify-content:center;align-items:center;display:inline-flex;position:relative}.piece-wrapper.revealed{animation:.3s reveal}.piece-wrapper.white .piece{color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,0 0 2px #000}.piece-wrapper.black .piece{color:#222;text-shadow:0 0 2px #888}.piece-badge{color:#fff;background:#e94560e6;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:min(2vw,10px);font-weight:700;line-height:1;display:flex;position:absolute;bottom:-2px;right:-2px}@keyframes reveal{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.piece-number{border-radius:50%;justify-content:center;align-items:center;width:65%;height:65%;font-size:min(3.5vw,18px);font-weight:700;line-height:1;display:flex}.piece-number.white{color:#333;background:#ffffffb3;border:2px solid #999}.piece-number.black{color:#eee;background:#282828bf;border:2px solid #666}.setup-container{padding:20px}.setup-container h2{text-align:center;margin-bottom:20px}.setup-layout{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.pool{flex-direction:column;gap:8px;min-width:140px;display:flex}.pool h3{color:#aaa;margin-bottom:8px;font-size:.9rem}.pool-item{cursor:pointer;background:#2a2a4a;border:2px solid #0000;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.pool-item.selected{border-color:#e94560}.pool-item.empty{opacity:.3;cursor:default}.pool-item .piece{font-size:28px}.pool-item .count{color:#aaa;font-size:.9rem}.ready-btn{margin-top:8px}.game-container{flex-direction:column;align-items:center;gap:16px;display:flex}.game-header{justify-content:space-between;align-items:center;width:100%;max-width:560px;display:flex}.game-header h2{font-size:1.2rem}.history-count{color:#aaa;font-size:.9rem}.game-layout{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:16px;display:flex}.handoff-screen{text-align:center;padding:60px 20px}.handoff-screen h2{margin-bottom:16px;font-size:2rem}.handoff-screen p{color:#aaa;margin-bottom:32px}.deduction-panel{background:#2a2a4a;border-radius:8px;min-width:240px;max-width:320px;max-height:min(80vw,560px);padding:12px;overflow-y:auto}.deduction-panel.collapsed{min-width:auto;padding:8px}.panel-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.panel-header h3{color:#ccc;font-size:.9rem}.panel-controls{align-items:center;gap:8px;display:flex}.debug-toggle{color:#888;cursor:pointer;align-items:center;gap:4px;font-size:.75rem;display:flex}.debug-toggle input{cursor:pointer}.toggle-btn{background:#3a3a5a;border-radius:4px;padding:4px 8px;font-size:.8rem}.deduction-table tr.deduction-mismatch{background:#e945604d!important}.real-cell{text-align:center}.deduction-table{border-collapse:collapse;width:100%;font-size:.85rem}.deduction-table th{text-align:left;color:#888;border-bottom:1px solid #3a3a5a;padding:4px 6px;font-weight:600}.deduction-table td{border-bottom:1px solid #333;padding:4px 6px}.deduction-table tr{cursor:pointer;transition:background .1s}.deduction-table tr:hover{background:#335}.deduction-table tr.selected-row{background:#3a2244}.deduction-table tr.captured{opacity:.4;text-decoration:line-through}.num-cell{text-align:center;width:28px;font-weight:700}.types-cell{width:120px}.types-list{flex-wrap:wrap;gap:2px;display:flex}.type-icon{opacity:.3;font-size:16px}.type-icon.possible{opacity:1}.captured-mark{color:#666}.status-cell{color:#aaa;width:50px;font-size:.75rem}.deduction-detail{border-top:1px solid #3a3a5a;margin-top:12px;padding-top:8px}.deduction-detail h4{color:#ccc;margin-bottom:6px;font-size:.85rem}.detail-history{color:#ccc;font-size:.8rem;line-height:1.8}.history-row{align-items:center;gap:6px;display:flex}.move-num{color:#666;min-width:20px}.capture-mark{color:#e94560;font-size:.75rem}.promo-mark{color:gold}.muted{color:#666}.promotion-dialog{text-align:center;z-index:100;background:#2a2a4a;border-radius:12px;padding:24px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 32px #00000080}.promotion-dialog h3{margin-bottom:16px}.promotion-options{gap:12px;display:flex}.promotion-options button{background:#3a3a5a;padding:12px 16px;font-size:32px}.game-over{text-align:center;padding:60px 20px}.game-over h2{color:#e94560;margin-bottom:16px;font-size:2.5rem}.game-over p{color:#aaa;margin-bottom:32px}.reconnect-btn{background:#2f9e62;margin-bottom:8px}.copy-link-btn{background:#3a3a5a;margin-top:4px}.info-sections{text-align:left;flex-direction:column;gap:10px;max-width:640px;margin:32px auto 0;display:flex}.info-sections details{background:#2a2a4a;border-radius:8px;transition:background .15s;overflow:hidden}.info-sections details:hover{background:#2f2f55}.info-sections summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:12px 16px;font-weight:600;list-style:none;display:flex}.info-sections summary::-webkit-details-marker{display:none}.info-sections summary:after{content:"▸";color:#888;margin-left:auto;transition:transform .15s}.info-sections details[open] summary:after{transform:rotate(90deg)}.info-body{color:#ccc;padding:0 16px 14px;font-size:.92rem;line-height:1.65}.info-body p{margin-bottom:8px}.info-body ol{flex-direction:column;gap:6px;padding-left:20px;display:flex}.info-body h4{color:#e94560;margin:10px 0 4px;font-size:.9rem}.info-body .muted{color:#888;font-size:.85rem}.site-footer{color:#888;text-align:center;margin-top:28px;font-size:.85rem;line-height:1.9}.site-footer a{color:#7ea6d9;text-decoration:none}.site-footer a:hover{text-decoration:underline}.site-footer .muted{color:#666;font-size:.78rem}.opponent-banner{text-align:center;background:#4a2a2a;border:1px solid #e94560;border-radius:8px;width:100%;max-width:560px;padding:10px 16px;font-size:.95rem}.opponent-banner .timer{color:#e94560;font-variant-numeric:tabular-nums;font-weight:700}