*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Helvetica Neue,Arial,Hiragino Sans,sans-serif;background:#0a0a1a;color:#eee;min-height:100vh;display:flex;align-items:center;justify-content:center}button{cursor:pointer;border:none;border-radius:6px;font-size:.9em;font-weight:700;padding:8px 16px;transition:filter .15s,transform .1s}button:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:gold;color:#222}.btn-secondary{background:#444;color:#eee}.btn-online{background:#4a90e2;color:#222}.btn-cpu{background:#4caf50;color:#222}.btn-special{background:gold;color:#333}.btn-active{background:orange;color:#fff}.btn-end{background:#4caf50;color:#fff}.btn-cancel{background:#e74c3c;color:#fff}.btn-large{padding:12px 28px;font-size:1.05em}.lobby{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px 20px;max-width:460px;width:100%}.lobby-title{font-size:2.5em;color:gold;text-shadow:0 0 15px rgba(255,215,0,.5);letter-spacing:.1em}.lobby-subtitle{color:#aaa;font-size:1em}.lobby-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:260px}.join-form{display:flex;flex-direction:column;align-items:center;gap:12px;color:#ccc}.code-input{background:#16213e;border:2px solid #0f3460;border-radius:8px;color:gold;font-size:2em;font-weight:700;letter-spacing:.3em;padding:10px 16px;text-align:center;width:160px;text-transform:uppercase}.code-input:focus{outline:none;border-color:gold}.error-msg{color:#ff6b6b;font-size:.9em}.legend{background:#16213e;border:1px solid #0f3460;border-radius:8px;padding:14px 18px;width:100%}.legend h3{color:gold;margin-bottom:10px;font-size:.85em}.legend ul{list-style:none}.legend li{font-size:.78em;color:#bbb;margin-bottom:5px}.waiting-box{background:#16213e;border:2px solid #0f3460;border-radius:12px;padding:30px 40px;text-align:center;display:flex;flex-direction:column;gap:16px;color:#ccc}.room-code-display{display:flex;flex-direction:column;align-items:center;gap:6px}.room-code-label{font-size:.85em;color:#aaa}.room-code{font-size:3em;font-weight:700;color:gold;letter-spacing:.3em;text-shadow:0 0 10px rgba(255,215,0,.4)}.waiting-hint{font-size:.85em;color:#888}.waiting-spinner{color:gold;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.game-layout{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px}.status-bar{background:#16213e;border:2px solid #0f3460;border-radius:10px;padding:10px 24px;text-align:center;min-width:320px;display:flex;flex-direction:column;gap:4px}.phase-message{font-size:.8em;color:#aaa;min-height:1.1em}.protection-status{display:flex;flex-direction:column;gap:4px;margin-top:4px}.protection-indicator{font-size:.75em;padding:4px 8px;border-radius:4px;background:#4caf5033;border:1px solid #4CAF50;font-weight:700}.protection-indicator.p1{color:#ff9060}.protection-indicator.p2{color:#7090ff}.captured-area{display:flex;align-items:center;gap:8px;min-width:320px;min-height:32px;padding:4px 8px;background:#16213e;border-radius:6px}.captured-label{font-size:.75em;color:#888;white-space:nowrap}.captured-pieces{display:flex;flex-wrap:wrap;gap:4px}.captured-icon{font-size:1.1em;cursor:default}.board{display:flex;flex-direction:column;gap:3px;background:#8b6914;border:4px solid #8B6914;border-radius:6px;padding:3px}.board-row{display:flex;gap:3px}.cell{width:62px;height:62px;background:#f0d58c;border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:background .1s}.cell:hover{background:#e8ca78}.cell.selected{background:gold!important;box-shadow:inset 0 0 0 2px #b80}.cell.valid-move{background:#90ee90}.cell.valid-move:hover{background:#70de70}.cell.valid-capture{background:#ffb6c1}.cell.valid-capture:hover{background:#ff8c9e}.cell.swap-target{background:#add8e6}.cell.swap-target:hover{background:#7bc8e8}.cell.tengu-move{background:#ffeaa0}.cell.tengu-move:hover{background:#ffe070}.piece{width:56px;height:56px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;-webkit-user-select:none;user-select:none;pointer-events:none;clip-path:polygon(50% 0%,100% 25%,100% 100%,0% 100%,0% 25%)}.piece.p1{background:linear-gradient(145deg,#ff7b4a,#c30);color:#fff}.piece.p2{background:linear-gradient(145deg,#5580ff,#13c);color:#fff}.piece.rotated,.piece.rotated .piece-icon,.piece.rotated .piece-name,.piece.rotated .piece-info-btn{transform:rotate(180deg)}.piece.protected{box-shadow:0 0 8px 2px #4caf5099}.piece-icon{font-size:1.5em;line-height:1}.piece-name{font-size:.44em;text-align:center;line-height:1.1;margin-top:1px}.piece-info-btn{position:absolute;bottom:2px;right:2px;font-size:.65em;background:#ffffffd9;color:#333;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0;pointer-events:auto;z-index:2;font-weight:700;border:1px solid rgba(0,0,0,.2)}.piece-info-btn:hover{background:gold;transform:scale(1.1)}.special-used-badge{position:absolute;top:2px;right:2px;font-size:.42em;background:gold;color:#333;border-radius:3px;padding:1px 3px;font-weight:700;pointer-events:none;z-index:2}.action-panel{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:36px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100}.game-over-box{background:#16213e;border:3px solid #ffd700;border-radius:16px;padding:40px 50px;text-align:center;display:flex;flex-direction:column;gap:14px}.game-over-box h2{font-size:2em}.game-over-box p{font-size:1.1em}.piece-info-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:90;padding:20px}.piece-info-panel{background:#16213e;border:3px solid #ffd700;border-radius:12px;padding:24px;max-width:360px;width:100%;position:relative;box-shadow:0 4px 20px #ffd7004d}.piece-info-close{position:absolute;top:8px;right:8px;background:transparent;color:#aaa;font-size:1.2em;padding:4px 8px;border-radius:4px}.piece-info-close:hover{background:#ffffff1a;color:#fff}.piece-info-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #0f3460}.piece-info-icon{font-size:2.5em;line-height:1}.piece-info-header h3{font-size:1.5em;color:gold;margin:0}.piece-info-content{display:flex;flex-direction:column;gap:16px}.piece-info-section h4{color:gold;font-size:.9em;margin-bottom:6px}.piece-info-section p{color:#ccc;font-size:.9em;line-height:1.5;margin:0}.piece-info-badge{background:#444;color:gold;padding:6px 10px;border-radius:6px;font-size:.8em;text-align:center;font-weight:700}.piece-info-badge.protection{background:#4caf50;color:#fff}.movement-pattern{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}.mini-board{display:inline-flex;flex-direction:column;gap:2px;background:#0a0a1a;padding:4px;border-radius:4px;border:1px solid #444}.mini-row{display:flex;gap:2px}.mini-cell{width:20px;height:20px;background:#2a2a3a;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:.7em}.mini-cell.mini-center{background:gold;border:2px solid #bb8800}.mini-cell.mini-move{background:#90ee90;border:1px solid #70DE70}.mini-piece{font-size:1.2em;line-height:1}.pattern-note{font-size:.75em;color:#aaa;font-style:italic}