*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Hiragino Sans,Noto Sans JP,sans-serif;color:#fff}button{font-family:inherit;cursor:pointer}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.dialog{background:#fff;color:#232f3e;border-radius:12px;padding:24px;width:280px;display:flex;flex-direction:column;gap:16px}.dialog-centered{align-items:center}.dialog-title{font-size:18px;font-weight:600;text-align:center;margin:0}.confirm-text{font-size:16px;font-weight:600;text-align:center;margin:0}.dialog-buttons{display:flex;gap:12px;width:100%}.btn-cancel{flex:1;padding:12px;border-radius:8px;border:1px solid #ccc;background:#fff;color:#666;font-size:16px}.btn-ok{flex:1;padding:12px;border-radius:8px;border:none;background:#f90;color:#fff;font-size:16px;font-weight:600}.btn-ok:disabled{opacity:.4;cursor:not-allowed}.name-input,.room-code-input{border:1px solid #ccc;border-radius:8px;padding:12px;font-size:16px;width:100%}.room-code-input{font-size:24px;text-align:center}.room-code-display{background:#fff;cursor:pointer;letter-spacing:4px}.room-code-display.filled{letter-spacing:8px}.room-code-placeholder{font-size:16px;color:#999;letter-spacing:normal}.keypad-overlay{z-index:200}.keypad-display{min-height:36px;margin:0;font-size:28px;letter-spacing:8px;text-align:center}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.keypad-btn{aspect-ratio:1;border:1px solid #ccc;border-radius:8px;background:#fff;font-size:20px;font-weight:600;color:#232f3e;display:flex;align-items:center;justify-content:center}.keypad-btn:active{background:#f0f0f0}.keypad-icon{width:36px;height:36px;object-fit:contain}.keypad-btn-empty{border:none;background:transparent;visibility:hidden}.mode-section{display:flex;flex-direction:column;gap:8px}.mode-label{font-size:12px;color:#888;text-align:center;margin:0}.mode-buttons{display:flex;gap:8px}.mode-btn{flex:1;border:1.5px solid #ccc;border-radius:8px;padding:8px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:2px}.mode-btn-text{font-size:15px;font-weight:700;color:#999}.mode-btn-sub{font-size:10px;color:#bbb}.mode-btn-active{border-color:#f90;background:#ff990014}.mode-btn-active .mode-btn-text{color:#f90}.mode-btn-active .mode-btn-sub{color:#f90;opacity:.8}.error-dialog{align-items:center}.error-title{font-size:18px;font-weight:700;color:#d32f2f;margin:0}.error-message{font-size:14px;text-align:center;margin:0}.home{min-height:100%;background:#232f3e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px}.home-logo{font-size:36px;font-weight:900;color:#f90;letter-spacing:1px;margin:0}.home-player-name{font-size:14px;color:#f90;background:transparent;border:none;margin-top:8px}.home-buttons{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;margin-top:32px}.btn-primary,.btn-outline{border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;border:none}.btn-primary{background:#f90}.btn-primary-text{color:#fff;font-size:20px;font-weight:700}.btn-outline{background:transparent;border:2px solid #ff9900}.btn-outline-text{color:#f90;font-size:20px;font-weight:700}.lobby{min-height:100%;background:#232f3e;padding:24px;display:flex;flex-direction:column;gap:12px}.lobby-caption{color:#90a4ae;font-size:14px;text-align:center;margin:0}.lobby-room-id{color:#f90;font-size:48px;font-weight:900;text-align:center;letter-spacing:8px;margin:0}.lobby-section-title{color:#fff;font-size:16px;font-weight:600;margin:16px 0 0}.lobby-player-list{flex:1;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.lobby-player-row{display:flex;align-items:center;padding:12px 16px;background:#37474f;border-radius:8px;gap:8px}.lobby-player-name{flex:1;color:#fff;font-size:16px}.lobby-host-badge{color:#f90;font-size:12px;border:1px solid #ff9900;padding:2px 6px;border-radius:4px}.lobby-start-btn{background:#f90;border:none;border-radius:12px;padding:16px;color:#fff;font-size:20px;font-weight:700;margin-top:8px}.lobby-start-btn:disabled{opacity:.4;cursor:not-allowed}.lobby-waiting{color:#90a4ae;text-align:center;font-size:14px;margin-top:8px}.lobby-leave-btn{background:transparent;border:1px solid #b0bec5;border-radius:12px;padding:12px;color:#607d8b;font-size:16px;font-weight:600;margin-top:12px}.lobby-leave-btn:active{background:#eceff1}.game{height:100%;background:#f5f5f5;display:flex;flex-direction:column}.card-area{flex:1;overflow:auto;padding:4px}.flipped-header{display:flex;align-items:center;background:#232f3e;padding:8px 12px;min-height:64px}.flipped-slot{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.flipped-icon{width:40px;height:40px;flex-shrink:0}.flipped-name{color:#fff;font-size:10px;line-height:14px}.flipped-empty{color:#546e7a;font-size:12px}.flipped-divider{width:1px;height:40px;background:#546e7a;margin:0 8px}.turn-bar{background:#37474f;padding:6px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.turn-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.turn-text{color:#f90;font-size:13px;font-weight:600}.score-text{color:#90a4ae;font-size:11px}.ready-btn{background:#f90;border:none;padding:8px 16px;border-radius:16px;color:#fff;font-weight:700;font-size:14px}.ready-btn-inactive{background:#546e7a;color:#ccc;cursor:not-allowed}.card-grid{display:grid;gap:2px;width:100%}.card-tile{position:relative;aspect-ratio:1;padding:0;border:none;background:transparent;perspective:500px}.card-inner{position:relative;width:100%;height:100%;transition:transform .2s;transform-style:preserve-3d}.card-inner-flipped{transform:rotateY(180deg)}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;border-radius:2px;overflow:hidden}.card-back{background:#232f3e;border:.5px solid #ff9900}.card-front{background:#fafafa;border:.5px solid #ddd;transform:rotateY(180deg)}.card-front-matched{background:#e8f5e9;border-color:#4caf50}.card-front-old{background:#f5f5f5;border:1px solid #b0bec5}.card-back-icon,.card-front-icon{width:88%;height:88%;object-fit:contain}.match-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000073;z-index:50}.match-card{background:#fff;color:#232f3e;border-radius:16px;padding:20px 28px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 4px 8px #0000004d}.match-title{font-size:20px;font-weight:700;color:#4caf50;margin:0}.match-icon{width:72px;height:72px}.match-label{font-size:13px;color:#555;text-align:center;max-width:200px;margin:0}.match-player{font-size:12px;color:#90a4ae;margin:0}.match-ok{margin-top:4px;background:#f90;border:none;padding:8px 32px;border-radius:20px;color:#fff;font-weight:700;font-size:14px}.result-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.result-dialog{background:#fff;color:#232f3e;border-radius:16px;padding:24px;width:300px;max-height:70%;display:flex;flex-direction:column;gap:16px;align-items:center}.result-title{font-size:22px;font-weight:700;color:#232f3e;margin:0}.result-list{width:100%;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.result-row{display:flex;align-items:center;padding:10px 12px;border-radius:8px;background:#f5f5f5;gap:8px}.result-row-first{background:#fff3e0;border:1px solid #ff9900}.result-rank{width:36px;font-size:16px;font-weight:700;color:#546e7a}.result-name{flex:1;font-size:16px;color:#232f3e}.result-score{font-size:16px;font-weight:600;color:#f90}.result-btn{background:#f90;border:none;padding:12px 40px;border-radius:8px;color:#fff;font-size:16px;font-weight:600}.connection-indicator{position:fixed;top:8px;right:8px;display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:12px;font-size:12px;z-index:1000;background:#00000080;color:#fff}.connection-indicator[data-status=connected]{background:#2ea043d9}.connection-indicator[data-status=connecting],.connection-indicator[data-status=reconnecting]{background:#ff9900d9}.connection-indicator[data-status=disconnected]{background:#d73a49e6}.connection-reconnect{border:none;border-radius:8px;padding:2px 8px;background:#fff;color:#d73a49;font-weight:700;cursor:pointer}.disconnect-banner{margin:8px auto;padding:8px 12px;border-radius:8px;background:#ff990026;border:1px solid #ff9900;color:#f90;text-align:center;font-size:14px}.home-resume{margin:12px 0;padding:12px;border-radius:12px;border:1px solid #ff9900;text-align:center}.home-resume-text{font-size:13px;margin-bottom:8px}.home-resume-buttons{display:flex;gap:12px;justify-content:center}.btn-resume{border:none;border-radius:10px;padding:10px 24px;background:#1f6feb;color:#fff;font-weight:700;cursor:pointer}.btn-end{border:none;border-radius:10px;padding:10px 24px;background:#6e7681;color:#fff;font-weight:700;cursor:pointer}