*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%}body{background:#2b2622;color:#efe7da;font-family:Segoe UI,Microsoft YaHei,sans-serif}.app{display:flex;flex-direction:column;align-items:center;min-height:100%;padding:16px 12px 32px}.app-header{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}.app-header h1{margin:0;font-size:22px;letter-spacing:2px}.lang-switch{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:5px 10px 5px 8px;border-radius:20px;border:1px solid #6b5a38;background:linear-gradient(180deg,#4a4136,#3a332c);cursor:pointer;transition:border-color .15s,box-shadow .15s}.lang-switch:hover{border-color:#f9a825;box-shadow:0 0 8px #f9a82540}.lang-switch .lang-globe{width:20px;height:20px;color:#f9a825;flex-shrink:0}.lang-switch select{padding:3px 6px;border:none;border-radius:6px;background:transparent;color:#ffe9b0;font-size:13px;font-weight:600;cursor:pointer;outline:none}.lang-switch select:focus-visible{box-shadow:0 0 0 2px #f9a82566}.lang-switch select option{background:#3a332c;color:#efe7da}.main-layout{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;justify-content:center}.board-column{display:flex;flex-direction:column;gap:10px}.side-panel{display:flex;flex-direction:column;gap:12px;width:240px}.hand-panel{background:#3a332c;border:1px solid #55493c;border-radius:8px;padding:8px 10px;min-height:74px}.hand-panel .hand-title{font-size:12px;color:#c9bba4;margin-bottom:6px;display:flex;justify-content:space-between}.hand-panel .hand-title .check-badge{color:#ff8a65;font-weight:700}.hand-items{display:flex;flex-wrap:wrap;gap:6px}.hand-item{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;background:#4a4136;border:1px solid transparent;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s}.hand-item:hover:not(.disabled){background:#5a4f41}.hand-item.selected{border-color:#f9a825;background:#6b5a38}.hand-item.disabled{opacity:.35;cursor:default}.hand-item .count{font-size:12px;color:#d8ccb8}.mini-piece{width:22px;height:26px;clip-path:polygon(50% 0%,100% 24%,88% 100%,12% 100%,0% 24%);display:flex;align-items:center;justify-content:center;font-size:15px;font-family:Yu Mincho,Hiragino Mincho ProN,"Noto Serif JP",serif}.mini-piece.mini-piece-black{background:#26221e;color:#f5efe4}.mini-piece.mini-piece-white{background:#f7f1e3;color:#231f1b}.hand-item.flipped .mini-piece{transform:rotate(180deg)}.board-wrap{position:relative}.board-wrap svg{display:block;background:#d9a45b;border-radius:6px;box-shadow:0 8px 28px #00000073;max-width:92vw;height:auto}.cell-rect{cursor:pointer}.cell-rect:hover{fill:#ffffff1f}.piece-layer g{transition:transform .22s ease;pointer-events:none}.piece-glyph.flip{transform:rotate(180deg)}.controls-col{display:flex;flex-direction:column;gap:8px}.variant-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#c9bba4}.variant-row select{flex:1;padding:7px 8px;border-radius:6px;border:1px solid #55493c;background:#4a4136;color:#efe7da;font-size:13px;cursor:pointer}.controls-col .hint{margin:0;font-size:12px;color:#8d8377;line-height:1.5}.controls{display:flex;gap:8px}.controls button{flex:1;padding:8px 0;border-radius:6px;border:1px solid #55493c;background:#4a4136;color:#efe7da;font-size:14px;cursor:pointer;transition:background .15s}.controls button:hover:not(:disabled){background:#5a4f41}.controls button:disabled{opacity:.4;cursor:default}.rotate-row{display:flex;gap:10px}.rotate-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 0;border-radius:10px;border:2px solid #6b5a38;background:linear-gradient(180deg,#57493a,#46392c);color:#ffe9b0;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.rotate-btn svg{width:30px;height:30px}.rotate-btn .rotate-deg{font-size:17px;font-weight:700;letter-spacing:.5px}.rotate-btn:hover:not(:disabled){border-color:#f9a825;background:linear-gradient(180deg,#6a5944,#574735)}.rotate-btn:active:not(:disabled){transform:scale(.97)}.rotate-btn:disabled{opacity:.35;cursor:default;color:#c9bba4}.drop-facing-panel{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;border:1px solid #55493c;background:#3a332c;transition:border-color .2s,box-shadow .2s,background .2s}.drop-facing-panel.idle{opacity:.55}.drop-facing-panel.awaiting{background:#463c31;border-color:#f9a825;box-shadow:0 0 0 1px #f9a82559,0 0 12px #f9a8252e;animation:facing-pulse 1.6s ease-in-out infinite}.drop-facing-panel.active{background:#463c31;border-color:#ffd54f;box-shadow:0 0 0 1px #ffd54f4d}@keyframes facing-pulse{0%,to{box-shadow:0 0 0 1px #f9a82559,0 0 10px #f9a82524}50%{box-shadow:0 0 0 2px #f9a82599,0 0 18px #f9a8254d}}.drop-facing-panel .dfp-title{font-size:13px;font-weight:700;color:#ffe9b0;letter-spacing:.5px}.drop-facing-panel.idle .dfp-title{color:#c9bba4}.drop-facing-panel .dfp-piece{font-size:12px;color:#ffe9b0}.drop-facing-panel .dfp-hint{font-size:12px;color:#8d8377;line-height:1.4}.facing-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.facing-buttons button{height:46px;border-radius:8px;border:2px solid #6b5a38;background:linear-gradient(180deg,#57493a,#46392c);color:#efe7da;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .1s}.facing-buttons button .facing-glyph{font-size:24px;font-weight:700;line-height:1}.facing-buttons button:hover:not(:disabled){border-color:#f9a825;background:linear-gradient(180deg,#6a5944,#574735)}.facing-buttons button:active:not(:disabled){transform:scale(.96)}.facing-buttons button:disabled{opacity:.45;cursor:default}.facing-buttons button.active{background:#6b5a38;border-color:#ffd54f;color:#ffe9b0;box-shadow:0 0 0 2px #ffd54f40}.status-banner{padding:10px 12px;border-radius:8px;background:#3a332c;border:1px solid #55493c;font-size:14px;line-height:1.6}.status-banner .turn-line{display:flex;align-items:center;gap:8px}.status-banner .turn-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.status-banner .turn-dot.sente{background:#26221e;border:1px solid #8d8377}.status-banner .turn-dot.gote{background:#f7f1e3;border:1px solid #55493c}.status-banner .game-over{margin-top:6px;color:#ffcc80;font-weight:700}.promotion-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:50}.promotion-dialog{background:#efe0bd;color:#2b2622;border-radius:10px;padding:20px 28px;text-align:center;box-shadow:0 10px 40px #00000080}.promotion-dialog h3{margin:0 0 14px;font-size:16px}.promotion-dialog .choices{display:flex;gap:12px;justify-content:center}.promotion-dialog button{min-width:96px;padding:10px 0;font-size:16px;border-radius:8px;border:2px solid #2b2622;cursor:pointer;font-family:Yu Mincho,Hiragino Mincho ProN,"Noto Serif JP",serif}.promotion-dialog button.promote{background:#c62828;color:#fff;border-color:#8e1c1c}.promotion-dialog button.keep{background:#efe0bd}.promotion-dialog button:hover{filter:brightness(1.1)}.lobby-panel{background:#3a332c;border:1px solid #55493c;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:10px}.lobby-title{font-size:13px;color:#c9bba4;font-weight:600;display:flex;justify-content:space-between;align-items:center;cursor:default}.lobby-toggle{display:none}.lobby-content{display:flex;flex-direction:column;gap:10px}.lobby-error{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:6px;background:#c6282833;border:1px solid #c62828;color:#ff8a80;font-size:12px}.lobby-error button{background:none;border:none;color:#ff8a80;font-size:14px;cursor:pointer;padding:0 2px}.lobby-section{display:flex;flex-direction:column;gap:4px}.lobby-label{font-size:12px;color:#8d8377}.lobby-row{display:flex;gap:6px}.lobby-row select,.lobby-row input{flex:1;min-width:0;padding:6px 8px;border-radius:6px;border:1px solid #55493c;background:#4a4136;color:#efe7da;font-size:13px}.lobby-row input{text-transform:uppercase;letter-spacing:2px}.lobby-row input::placeholder{color:#8d8377;letter-spacing:0;text-transform:none}.lobby-primary,.lobby-secondary,.lobby-danger{padding:6px 14px;border-radius:6px;border:1px solid #55493c;font-size:13px;cursor:pointer;transition:background .15s;white-space:nowrap}.lobby-primary{background:#6b5a38;color:#ffe9b0;border-color:#8a7347}.lobby-primary:hover:not(:disabled){background:#7d6a42}.lobby-secondary{background:#4a4136;color:#efe7da}.lobby-secondary:hover:not(:disabled){background:#5a4f41}.lobby-danger{background:#5c3a3a;color:#ffab91;border-color:#7a4a4a}.lobby-danger:hover:not(:disabled){background:#6b4444}.lobby-primary:disabled,.lobby-secondary:disabled,.lobby-danger:disabled{opacity:.4;cursor:default}.lobby-info{display:flex;flex-direction:column;gap:6px}.lobby-row-static{display:flex;align-items:center;gap:8px;font-size:13px}.lobby-row-static .lobby-label{width:64px;flex-shrink:0}.room-code{font-size:20px;font-weight:700;letter-spacing:4px;color:#ffe9b0;font-family:Consolas,Courier New,monospace}.conn-dot{display:inline-flex;align-items:center;gap:6px;font-size:13px}.conn-dot:before{content:"";width:8px;height:8px;border-radius:50%}.conn-dot.online{color:#81c784}.conn-dot.online:before{background:#4caf50}.conn-dot.offline{color:#ffb74d}.conn-dot.offline:before{background:#ff9800}.conn-dot.connecting{color:#90a4ae}.conn-dot.connecting:before{background:#90a4ae;animation:facing-pulse 1.2s ease-in-out infinite}.conn-dot.gone{color:#e57373}.conn-dot.gone:before{background:#e53935}.lobby-actions{display:flex;gap:8px}.lobby-actions button{flex:1}.lobby-hint{margin:0;font-size:12px;color:#8d8377;line-height:1.5}.lobby-hint.warn{color:#ffb74d}@media (max-width: 640px){.app{height:100dvh;min-height:100dvh;padding:4px 8px 8px;overflow:hidden}.app-header{gap:8px;margin-bottom:4px;flex-shrink:0}.app-header h1{font-size:16px;letter-spacing:1px}.lang-switch{padding:3px 8px 3px 6px}.lang-switch .lang-globe{width:16px;height:16px}.lang-switch select{font-size:12px;padding:2px 4px}.main-layout{width:100%;flex:1;min-height:0;gap:4px;flex-direction:column;align-items:stretch;overflow:hidden}.board-column{width:100%;flex:1;min-height:0;gap:2px;align-items:center;justify-content:center}.hand-panel{width:100%;flex-shrink:0;min-height:0;padding:3px 8px;border-radius:6px}.hand-panel .hand-title{font-size:10px;margin-bottom:2px}.hand-items{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px}.hand-item{flex-shrink:0;padding:2px 6px;gap:2px}.mini-piece{width:18px;height:21px;font-size:12px}.hand-item .count{font-size:10px}.board-wrap{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}.board-wrap svg{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:4px}.side-panel{width:100%;flex-shrink:0;gap:4px;max-height:38vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.status-banner{padding:4px 8px;font-size:12px;border-radius:6px;line-height:1.4}.status-banner .turn-dot{width:8px;height:8px}.controls-col{gap:4px}.variant-row{font-size:12px;gap:4px}.variant-row select{padding:6px;font-size:12px}.controls{gap:6px}.controls button{padding:8px 0;font-size:13px;border-radius:6px}.rotate-row{gap:6px}.rotate-btn{padding:6px 0;border-radius:8px;border-width:2px}.rotate-btn svg{width:22px;height:22px}.rotate-btn .rotate-deg{font-size:14px}.controls-col .hint{font-size:11px;line-height:1.3}.lobby-panel{padding:6px 8px;gap:6px;border-radius:6px}.lobby-title{font-size:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.lobby-toggle{display:inline;font-size:12px;color:#8d8377}.lobby-panel.mobile-collapsed .lobby-content{display:none}.lobby-row select,.lobby-row input{padding:6px;font-size:12px}.lobby-primary,.lobby-secondary,.lobby-danger{padding:4px 10px;font-size:12px}.room-code{font-size:16px;letter-spacing:3px}.drop-facing-panel.mobile-hide-idle.idle{display:none}.drop-facing-panel{padding:6px 8px;border-radius:8px;gap:4px}.drop-facing-panel .dfp-title{font-size:12px}.drop-facing-panel .dfp-piece{font-size:11px}.drop-facing-panel .dfp-hint{font-size:11px;line-height:1.3}.facing-buttons{gap:4px}.facing-buttons button{height:40px;border-radius:6px}.facing-buttons button .facing-glyph{font-size:18px}.drop-facing-panel.mobile-overlay.awaiting{position:fixed;bottom:8px;left:8px;right:8px;z-index:40;padding:8px 10px;border-radius:10px;box-shadow:0 -4px 24px #00000080}.drop-facing-panel.mobile-overlay.awaiting .facing-buttons button{height:48px}.promotion-dialog{padding:16px 20px;max-width:92vw}.promotion-dialog button{min-width:84px;padding:12px 0}}.gate-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px;background:#2b2622}.gate-card{width:100%;max-width:420px;padding:32px 28px;border-radius:12px;border:1px solid #6b5a38;background:linear-gradient(180deg,#3a332c,#332d27);text-align:center;box-shadow:0 6px 24px #00000059}.gate-title{margin:0 0 16px;font-size:22px;letter-spacing:2px;color:#ffe9b0}.gate-text{margin:6px 0;font-size:14px;line-height:1.6;color:#efe7da}.gate-error{margin:14px 0 6px;padding:10px 12px;border-radius:8px;border:1px solid #8a4a3a;background:#8a4a3a2e;color:#ffb3a0;font-size:13px;line-height:1.5}.gate-row{display:flex;gap:8px;margin-top:18px}.gate-row input{flex:1;min-width:0;padding:8px 10px;border-radius:6px;border:1px solid #55493c;background:#4a4136;color:#efe7da;font-size:13px}.gate-row input::placeholder{color:#8d8377}.gate-404{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}.gate-404-code{font-size:6rem;font-weight:700;color:#55493c;margin:0}.gate-404-text{font-size:1.2rem;color:#6b5a38;margin:0}