:root,[data-theme=light]{--c-bg: #f8fafc;--c-surface: #ffffff;--c-border: #e8edf2;--c-border-soft: #f1f5f9;--c-text: #0f172a;--c-text-2: #475569;--c-text-3: #94a3b8;--c-primary: #6366f1;--c-primary-d: #4f46e5;--c-primary-bg: #eef2ff;--c-green: #16a34a;--c-green-bg: #f0fdf4;--c-red: #dc2626;--c-red-bg: #fef2f2;--shadow-sm: 0 1px 2px rgba(15,23,42,.05);--shadow-md: 0 2px 8px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.05);--shadow-lg: 0 8px 32px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);--radius: 10px;--radius-lg: 14px}[data-theme=dark]{--c-bg: #0f1117;--c-surface: #1a1d27;--c-border: #2d3148;--c-border-soft: #22263a;--c-text: #e8eaf6;--c-text-2: #9fa8c7;--c-text-3: #5a6490;--c-primary: #818cf8;--c-primary-d: #a5b4fc;--c-primary-bg: #1e2245;--c-green: #4ade80;--c-green-bg: #052e16;--c-red: #f87171;--c-red-bg: #2d1212;--shadow-sm: 0 1px 2px rgba(0,0,0,.3);--shadow-md: 0 2px 8px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);--shadow-lg: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4)}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--c-bg);color:var(--c-text);line-height:1.6}.page{min-height:100vh;display:flex;flex-direction:column}.navbar{background:var(--c-surface);border-bottom:1px solid var(--c-border);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100}.navbar-inner{display:flex;align-items:center;gap:1.5rem;padding:0 1.5rem;height:56px;max-width:1200px;margin:0 auto;width:100%}.navbar-logo{font-size:1.15rem;font-weight:700;color:var(--c-text);text-decoration:none;letter-spacing:.02em;flex-shrink:0}.navbar-links{display:flex;gap:.25rem;flex:1}.nav-link{font-size:.9rem;color:var(--c-text-2);text-decoration:none;padding:.375rem .875rem;border-radius:6px;transition:background .1s,color .1s}.nav-link:hover{background:var(--c-bg);color:var(--c-text)}.nav-link-active{background:var(--c-primary-bg);color:var(--c-primary);font-weight:500}.navbar-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.theme-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--c-border);background:var(--c-surface);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:border-color .1s}.theme-btn:hover{border-color:var(--c-primary)}.navbar-user{font-size:.875rem;color:var(--c-text-3)}.navbar-logout{padding:.35rem .875rem;border:1px solid var(--c-border);border-radius:6px;background:var(--c-surface);cursor:pointer;font-size:.8125rem;color:var(--c-text-2);transition:border-color .1s,color .1s}.navbar-logout:hover{border-color:var(--c-red);color:var(--c-red)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--c-bg)}.login-card{background:var(--c-surface);border-radius:var(--radius-lg);border:1px solid var(--c-border);padding:2rem;width:100%;max-width:380px;box-shadow:var(--shadow-md)}.login-title{font-size:1.375rem;font-weight:700;color:var(--c-text);text-align:center;margin:0 0 1.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.8375rem;font-weight:500;color:var(--c-text-2);margin-bottom:.375rem}.form-group input{width:100%;padding:.6rem .875rem;border:1px solid var(--c-border);border-radius:8px;font-size:.9375rem;color:var(--c-text);background:var(--c-surface);transition:border-color .1s,box-shadow .1s}.form-group input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px #6366f126}.form-error{background:var(--c-red-bg);border:1px solid var(--c-red);border-radius:7px;padding:.5rem .75rem;font-size:.8375rem;color:var(--c-red);margin-bottom:1rem}.submit-btn{width:100%;padding:.7rem;background:var(--c-primary);color:#fff;border:none;border-radius:8px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background .1s;box-shadow:0 2px 4px #6366f140}.submit-btn:hover:not(:disabled){background:var(--c-primary-d)}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.lobby{flex:1;padding:2rem 1.5rem 3rem;max-width:1200px;margin:0 auto;width:100%}.lobby-layout{display:grid;grid-template-columns:1fr 280px;gap:1.5rem;align-items:start}@media (max-width: 768px){.lobby-layout{grid-template-columns:1fr}}.lobby-section-title{font-size:1rem;font-weight:600;color:var(--c-text-2);text-transform:uppercase;letter-spacing:.05em;margin:0 0 1rem}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}.lobby-players{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:1.125rem;box-shadow:var(--shadow-sm)}.lobby-no-players{font-size:.875rem;color:var(--c-text-3);margin:0;padding:.5rem 0}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.player-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .625rem;background:var(--c-bg);border:1px solid var(--c-border-soft);border-radius:8px}.player-item-name{font-size:.9rem;font-weight:500;color:var(--c-text)}.player-item-actions{display:flex;align-items:center;gap:.375rem;flex-shrink:0}.challenge-btn{padding:.25rem .625rem;background:var(--c-primary-bg);color:var(--c-primary);border:1px solid transparent;border-radius:6px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:background .1s,border-color .1s}.challenge-btn:hover{border-color:var(--c-primary)}.challenge-btn-sm{padding:.2rem .5rem;font-size:.75rem}.challenge-game-btn{padding:.25rem .5rem;background:var(--c-primary);color:#fff;border:none;border-radius:6px;font-size:.75rem;font-weight:500;cursor:pointer;transition:background .1s}.challenge-game-btn:hover{background:var(--c-primary-d)}.challenge-cancel-btn{padding:.25rem .4rem;background:none;color:var(--c-text-3);border:1px solid var(--c-border);border-radius:6px;font-size:.75rem;cursor:pointer;transition:color .1s}.challenge-cancel-btn:hover{color:var(--c-red);border-color:var(--c-red)}.game-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:1.5rem;cursor:pointer;display:flex;flex-direction:column;gap:.875rem;transition:border-color .15s,box-shadow .15s,transform .15s;box-shadow:var(--shadow-sm)}.game-card:hover{border-color:var(--c-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.game-card-disabled{cursor:default;opacity:.55}.game-card-disabled:hover{border-color:var(--c-border);box-shadow:var(--shadow-sm);transform:none}.game-card-icon{font-size:2.5rem;line-height:1}.game-card-body{flex:1}.game-card-title{font-size:1.25rem;font-weight:700;color:var(--c-text);margin:0 0 .125rem}.game-card-subtitle{font-size:.8125rem;color:var(--c-text-3);margin:0 0 .625rem}.game-card-desc{font-size:.875rem;color:var(--c-text-2);margin:0;line-height:1.5}.game-card-footer{display:flex}.game-badge{font-size:.75rem;font-weight:600;padding:.2rem .625rem;border-radius:99px}.game-badge-available{background:var(--c-green-bg);color:var(--c-green)}.game-badge-soon{background:var(--c-border-soft);color:var(--c-text-3)}.game-page{flex:1;padding:1.5rem;max-width:1200px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1.5rem}.game-page-header{display:flex;align-items:center;gap:1.25rem}.back-btn{background:none;border:1px solid var(--c-border);border-radius:8px;color:var(--c-text-2);padding:.4rem .875rem;font-size:.875rem;cursor:pointer;transition:border-color .1s,color .1s;flex-shrink:0}.back-btn:hover{border-color:var(--c-primary);color:var(--c-primary)}.game-page-title{font-size:1.5rem;font-weight:700;color:var(--c-text);margin:0;line-height:1.2}.game-page-subtitle{font-size:.875rem;color:var(--c-text-3);margin:0}.game-layout{flex:1;display:grid;grid-template-columns:280px 1fr 280px;gap:1.25rem;align-items:start}@media (max-width: 900px){.game-layout{grid-template-columns:1fr}.game-layout-spacer{display:none}}.game-board-area{display:flex;justify-content:center;align-items:flex-start}.game-board-wrap{width:100%;max-width:740px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.game-placeholder{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--c-text-3);font-size:.9375rem}.game-placeholder-icon{font-size:4rem;line-height:1;opacity:.35}.game-placeholder-sub{font-size:.8125rem;color:var(--c-text-3);margin:0}.game-sidebar{display:flex;flex-direction:column;gap:1rem}.game-panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:1rem 1.125rem;box-shadow:var(--shadow-sm)}.game-panel-title{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-3);margin:0 0 .875rem}.player-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0}.player-row+.player-row{border-top:1px solid var(--c-border-soft)}.player-label{font-size:.8125rem;color:var(--c-text-3)}.player-name{font-size:.9rem;font-weight:500;color:var(--c-text-2)}.move-list{min-height:80px;max-height:200px;overflow-y:auto}.move-list-empty{font-size:.8375rem;color:var(--c-text-3);margin:0;text-align:center;padding:1rem 0}.game-actions{display:flex;flex-direction:column;gap:.5rem}.action-btn{width:100%;padding:.55rem;background:var(--c-primary);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .1s}.action-btn:hover:not(:disabled){background:var(--c-primary-d)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.action-btn-danger{background:transparent;border:1px solid var(--c-border);color:var(--c-text-2)}.action-btn-danger:hover:not(:disabled){border-color:var(--c-red);color:var(--c-red);background:transparent}.player-name-you{color:var(--c-primary);font-weight:600}.challenge-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.challenge-list-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.challenge-name{font-size:.875rem;color:var(--c-text-2)}.challenge-name-active{color:var(--c-primary);font-weight:600}.game-lobby-page{flex:1;padding:1.5rem;max-width:760px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1.5rem}.game-lobby-header{display:flex;align-items:center;gap:1rem}.game-lobby-title-wrap{display:flex;align-items:center;gap:.75rem;flex:1}.game-lobby-icon{font-size:2rem;line-height:1}.game-lobby-title{font-size:1.5rem;font-weight:700;color:var(--c-text);margin:0;line-height:1.2}.game-lobby-subtitle{font-size:.875rem;color:var(--c-text-3);margin:0}.new-game-btn{padding:.5rem 1rem;background:var(--c-primary);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .1s;flex-shrink:0}.new-game-btn:hover{background:var(--c-primary-d)}.new-game-form-wrap{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm)}.new-game-form{display:flex;flex-direction:column;gap:1rem;max-width:360px}.new-game-form-title{font-size:1rem;font-weight:600;color:var(--c-text);margin:0}.form-hint{font-size:.875rem;color:var(--c-text-3);margin:0}.form-group select{width:100%;padding:.6rem .875rem;border:1px solid var(--c-border);border-radius:8px;font-size:.9375rem;color:var(--c-text);background:var(--c-surface);transition:border-color .1s;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.form-group select:focus{outline:none;border-color:var(--c-primary)}.game-list-section{display:flex;flex-direction:column;gap:.75rem}.game-list-title{font-size:.875rem;font-weight:600;color:var(--c-text-2);text-transform:uppercase;letter-spacing:.05em;margin:0}.game-list-empty{font-size:.875rem;color:var(--c-text-3);padding:1rem 0}.game-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.game-list-item{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.125rem;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);cursor:pointer;transition:border-color .1s,box-shadow .1s;box-shadow:var(--shadow-sm)}.game-list-item:hover{border-color:var(--c-primary);box-shadow:var(--shadow-md)}.game-list-item-past{opacity:.7}.game-list-item-past:hover{opacity:1}.game-list-item-left,.game-list-item-right{display:flex;align-items:center;gap:.75rem}.game-list-opponent{font-size:.9375rem;font-weight:600;color:var(--c-text)}.game-list-turn{font-size:.8125rem;color:var(--c-text-3);padding:.15rem .5rem;border-radius:99px;border:1px solid var(--c-border)}.game-list-turn.my-turn{background:var(--c-primary-bg);color:var(--c-primary);border-color:transparent;font-weight:600}.game-list-time{font-size:.8125rem;color:var(--c-text-3)}.game-list-chevron{font-size:1.25rem;color:var(--c-text-3);line-height:1}.status-badge{font-size:.75rem;font-weight:600;padding:.2rem .5rem;border-radius:99px}.status-active{background:var(--c-green-bg);color:var(--c-green)}.status-finished{background:var(--c-border-soft);color:var(--c-text-3)}.game-board-loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--c-text-3);font-size:.9375rem}.game-turn-label{font-weight:500;color:var(--c-primary)!important}.move-list-ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem}.move-list-entry{display:flex;align-items:center;gap:.4rem;font-size:.8125rem;padding:.15rem 0}.move-number{color:var(--c-text-3);min-width:1.5rem;font-variant-numeric:tabular-nums}.move-text{color:var(--c-text-2);font-family:Courier New,monospace}.chess-board-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.25rem}.chess-board-frame{padding:20px 20px 26px 26px;background:linear-gradient(145deg,#9c7030,#7a5218 55%,#5c3a0c);border-radius:4px;box-shadow:0 8px 32px #00000061,0 2px 8px #0003,inset 0 1px #ffe6962e,inset 0 -2px #00000040}.chess-board-inner{display:flex;align-items:flex-start;gap:5px}.chess-board-col{display:flex;flex-direction:column;gap:0}.chess-rank-labels{display:flex;flex-direction:column;width:16px}.chess-rank-label{width:16px;height:56px;font-size:.68rem;color:#ffdc82d1;display:flex;align-items:center;justify-content:center;font-weight:600}.chess-file-labels{display:flex;margin-top:5px}.chess-file-label{width:56px;font-size:.68rem;color:#ffdc82d1;display:flex;align-items:center;justify-content:center;font-weight:600}.chess-board{display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px #0000002e}.chess-row{display:flex}.chess-cell{width:56px;height:56px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:filter .08s;-webkit-user-select:none;user-select:none}.cell-light{background:#f0d9b5}.cell-dark{background:#b58863}.chess-cell:hover{filter:brightness(1.08)}.cell-selected{background:#f6f650d1!important;filter:none!important}.cell-light.cell-last-move{background:#cdd26ad9!important;filter:none!important}.cell-dark.cell-last-move{background:#aaa23ae6!important;filter:none!important}.cell-legal-dot{position:absolute;width:28%;height:28%;border-radius:50%;background:#0000002e;pointer-events:none;z-index:1}.cell-legal-capture{width:100%;height:100%;border-radius:50%;background:transparent;border:5px solid rgba(0,0,0,.18)}.chess-piece-disc{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;transition:transform .08s}.chess-piece-disc:hover{transform:scale(1.07)}.chess-disc-white{background:radial-gradient(circle at 38% 35%,rgba(255,255,255,.55) 0%,rgba(220,200,160,.22) 60%,transparent 100%);box-shadow:0 2px 4px #0000004d,inset 0 1px #fff6}.chess-disc-black{background:radial-gradient(circle at 38% 35%,rgba(80,50,20,.5) 0%,rgba(30,15,5,.3) 60%,transparent 100%);box-shadow:0 2px 4px #0006,inset 0 1px #ffffff14}.chess-piece{font-size:2.4rem;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none}.chess-piece-white{color:#fffcf0;filter:drop-shadow(0 0 1.5px #3a2800) drop-shadow(0 1px 3px rgba(0,0,0,.7))}.chess-piece-black{color:#1a0e04;filter:drop-shadow(0 0 1px rgba(255,240,200,.8)) drop-shadow(0 1px 2px rgba(0,0,0,.3))}.chess-captured-area{width:100%;min-height:1.5rem;padding:0 .25rem}.chess-captured-row{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}.chess-captured-label{font-size:.75rem;color:var(--c-text-3);margin-right:.25rem}.chess-captured-piece{font-size:1.15rem;opacity:.65}.chess-status-banner,.shogi-status-banner{width:100%;text-align:center;padding:.4rem .75rem;border-radius:6px;font-weight:600;font-size:.9rem}.chess-status-check,.shogi-status-check{background:#dc26261f;color:var(--c-red);border:1px solid rgba(220,38,38,.25)}.chess-status-checkmate,.shogi-status-checkmate{background:var(--c-red-bg);color:var(--c-red);border:1px solid rgba(220,38,38,.3)}.chess-status-stalemate{background:var(--c-border-soft);color:var(--c-text-2);border:1px solid var(--c-border)}.shogi-board-container{width:100%;display:flex;flex-direction:row;align-items:stretch}.shogi-side-panel{width:92px;min-width:92px;display:flex;flex-direction:column;justify-content:space-between;padding:.875rem .5rem;border-right:1px solid rgba(139,94,60,.3);background:linear-gradient(180deg,#dcb97833,#c89b501f);gap:1rem}.shogi-hand-block{display:flex;flex-direction:column;gap:.25rem;flex:1}.shogi-hand-label{font-size:.63rem;font-weight:600;color:var(--c-text-3);letter-spacing:.04em;text-align:center;padding-bottom:.3rem;border-bottom:1px solid rgba(139,94,60,.2);margin-bottom:.15rem}.shogi-hand-empty{font-size:.68rem;color:var(--c-text-3);text-align:center;padding:.3rem 0;opacity:.55}.shogi-hand-slot{display:flex;align-items:center;gap:.25rem;padding:.2rem .3rem;border-radius:5px;border:1px solid transparent;background:none;cursor:default;transition:background .1s,border-color .1s;width:100%;line-height:1}.shogi-hand-slot-clickable{cursor:pointer}.shogi-hand-slot-clickable:hover:not(:disabled){background:#6366f11a;border-color:#6366f159}.shogi-hand-slot-selected{background:var(--c-primary-bg)!important;border-color:var(--c-primary)!important}.shogi-hand-slot:disabled{opacity:.55;cursor:default}.shogi-hand-slot-count{font-size:.7rem;font-weight:700;color:var(--c-text-2);min-width:14px}.shogi-board-right{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.25rem 2.25rem 1rem 1.5rem;gap:.5rem}.shogi-board-wrap{position:relative;display:inline-block}.shogi-board{display:flex;flex-direction:column;border:3px solid #6B4220;border-radius:1px;box-shadow:0 6px 24px #00000047,0 2px 6px #00000029,inset 0 1px #ffffc81f;background:linear-gradient(145deg,#d4a03a,#c8902a 40%,#be821e)}.shogi-row{display:flex}.shogi-cell{width:56px;height:56px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;border-right:1px solid rgba(80,40,0,.22);border-bottom:1px solid rgba(80,40,0,.22);background:transparent;transition:background .08s;-webkit-user-select:none;user-select:none}.shogi-row:first-child .shogi-cell{border-top:none}.shogi-cell:first-child{border-left:none}.shogi-cell:hover{background:#ffe66438}.shogi-cell.cell-selected{background:#fff53c80!important}.shogi-cell.cell-last-move{background:#1e6e3240!important}.shogi-star{position:absolute;width:7px;height:7px;border-radius:50%;background:#50280073;pointer-events:none;z-index:0}.shogi-col-labels{display:flex;position:absolute;top:-20px;left:0;right:0}.shogi-col-label{flex:1;font-size:.68rem;color:var(--c-text-3);text-align:center}.shogi-row-labels{display:flex;flex-direction:column;position:absolute;top:0;right:-22px;bottom:0}.shogi-row-label{flex:1;font-size:.68rem;color:var(--c-text-3);display:flex;align-items:center;justify-content:center}.promotion-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.promotion-dialog{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;gap:1rem;min-width:260px}.promotion-dialog-title{font-size:1rem;font-weight:600;color:var(--c-text);margin:0}.promotion-dialog-choices{display:flex;gap:.75rem}.promotion-choice-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;width:80px;padding:.75rem .5rem;background:var(--c-bg);border:2px solid var(--c-border);border-radius:var(--radius);cursor:pointer;transition:border-color .1s,background .1s}.promotion-choice-btn:hover{border-color:var(--c-primary);background:var(--c-primary-bg)}.promo-yes{border-color:#c0392b;background:#fef2ee}.promo-yes:hover{background:#fde0d6;border-color:#c0392b}.chess-promo-btn{width:72px;padding:.6rem .4rem}.promotion-choice-piece{font-size:2.6rem;line-height:1}.promo-btn-label{font-size:.8rem;font-weight:600;color:var(--c-text)}.turn-mine{color:var(--c-green)!important}@media (max-width: 640px){.game-page{padding:.75rem;gap:.75rem}.game-page-title{font-size:1.2rem}.game-page-subtitle{font-size:.8rem}.game-board-wrap{background:none;border:none;border-radius:0;box-shadow:none;padding:0}.move-list{max-height:160px;overflow-y:auto}.game-sidebar{gap:.75rem}.game-panel{padding:.75rem}}@media (max-width: 560px){.chess-board-container{padding:.75rem .5rem}.chess-board-frame{padding:10px 10px 14px 14px}.chess-cell{width:42px;height:42px}.chess-rank-label{width:14px;height:42px;font-size:.6rem}.chess-file-label{width:42px;font-size:.6rem}.chess-piece{font-size:1.65rem}.chess-piece-disc{width:36px;height:36px}}@media (max-width: 420px){.chess-board-frame{padding:8px 8px 12px 12px}.chess-cell{width:36px;height:36px}.chess-rank-label{height:36px}.chess-file-label{width:36px}.chess-piece{font-size:1.45rem}.chess-piece-disc{width:30px;height:30px}}@media (max-width: 768px){.shogi-side-panel{width:78px;min-width:78px}}@media (max-width: 560px){.shogi-board-container{flex-direction:column}.shogi-side-panel{width:100%;min-width:unset;flex-direction:row;justify-content:space-between;border-right:none;border-bottom:1px solid rgba(139,94,60,.3);padding:.5rem .75rem;gap:.5rem;background:linear-gradient(90deg,#dcb9782e,#c89b501a)}.shogi-hand-block{flex:1;flex-direction:row;flex-wrap:wrap;gap:.25rem;align-items:center}.shogi-hand-label{width:100%;border-bottom:none;padding-bottom:0;margin-bottom:0;font-size:.6rem}.shogi-board-right{padding:1rem 1.5rem .5rem .75rem}.shogi-cell{width:38px;height:38px}.shogi-col-labels,.shogi-row-labels{display:none}.shogi-board-right{padding:.75rem}}@media (max-width: 400px){.shogi-cell{width:33px;height:33px}}@media (max-width: 640px){.sudoku-game-page{padding:.75rem;gap:.75rem}.sudoku-game-layout{flex-direction:column}.sudoku-controls{gap:.75rem}.sudoku-hints{display:none}}@media (max-width: 560px){.sudoku-board{grid-template-columns:repeat(9,40px);grid-template-rows:repeat(9,40px)}.sudoku-cell{width:40px;height:40px}.sc-given .sc-number,.sc-user .sc-number{font-size:1.15rem}.sc-note{font-size:.55rem}.sudoku-numpad{grid-template-columns:repeat(5,1fr)}.sudoku-erase-btn{grid-column:span 2}.sudoku-diff-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 420px){.sudoku-board{grid-template-columns:repeat(9,35px);grid-template-rows:repeat(9,35px)}.sudoku-cell{width:35px;height:35px}.sc-given .sc-number,.sc-user .sc-number{font-size:1rem}}@media (max-width: 480px){.game-grid{grid-template-columns:1fr}}.sudoku-lobby{padding:2rem 1.5rem;max-width:700px;margin:0 auto;width:100%}.sudoku-lobby-header{text-align:center;margin-bottom:2rem}.sudoku-lobby-title{font-size:2rem;font-weight:800;margin:0;color:var(--c-text);letter-spacing:-.5px}.sudoku-logo{font-size:1.8rem;margin-right:.3rem;color:var(--c-primary)}.sudoku-lobby-sub{color:var(--c-text-3);margin:.25rem 0 0;font-size:.95rem}.sudoku-diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem}.sudoku-diff-card{background:var(--c-surface);border:2px solid var(--c-border);border-radius:var(--radius-lg);padding:1.25rem 1rem;cursor:pointer;text-align:left;transition:transform .1s,box-shadow .1s,border-color .15s;position:relative;overflow:hidden}.sudoku-diff-card:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.sudoku-diff-card:disabled{opacity:.7;cursor:default}.sudoku-diff-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px}.diff-easy:before{background:#16a34a}.diff-medium:before{background:#2563eb}.diff-hard:before{background:#ea580c}.diff-expert:before{background:#dc2626}.diff-easy{border-color:#bbf7d0}.diff-medium{border-color:#bfdbfe}.diff-hard{border-color:#fed7aa}.diff-expert{border-color:#fecaca}[data-theme=dark] .diff-easy{border-color:#14532d}[data-theme=dark] .diff-medium{border-color:#1e3a5f}[data-theme=dark] .diff-hard{border-color:#431407}[data-theme=dark] .diff-expert{border-color:#450a0a}.sudoku-diff-label{font-size:1.3rem;font-weight:800;color:var(--c-text)}.diff-easy .sudoku-diff-label{color:#15803d}.diff-medium .sudoku-diff-label{color:#1d4ed8}.diff-hard .sudoku-diff-label{color:#c2410c}.diff-expert .sudoku-diff-label{color:#b91c1c}[data-theme=dark] .diff-easy .sudoku-diff-label{color:#4ade80}[data-theme=dark] .diff-medium .sudoku-diff-label{color:#93c5fd}[data-theme=dark] .diff-hard .sudoku-diff-label{color:#fb923c}[data-theme=dark] .diff-expert .sudoku-diff-label{color:#f87171}.sudoku-diff-sub{font-size:.8rem;color:var(--c-text-3);margin-bottom:.5rem}.sudoku-diff-desc{font-size:.85rem;color:var(--c-text-2);margin-bottom:.75rem}.sudoku-diff-stats{font-size:.8rem;color:var(--c-text-3);display:flex;gap:.4rem;align-items:center}.sdstat-done{color:var(--c-green);font-weight:600}.sudoku-diff-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#ffffffbf;font-size:.85rem;color:var(--c-text-2);font-weight:600;border-radius:inherit}[data-theme=dark] .sudoku-diff-loading{background:#1a1d27cc}.sudoku-section-title{font-size:1rem;font-weight:700;color:var(--c-text);margin:0 0 .75rem}.sudoku-active-section{margin-top:.5rem}.sudoku-active-list{display:flex;flex-direction:column;gap:.5rem}.sudoku-active-item{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:.75rem 1rem;display:flex;align-items:center;gap:1rem;cursor:pointer;transition:background .1s;font-size:.9rem;color:var(--c-text);width:100%;text-align:left}.sudoku-active-item:hover{background:var(--c-border-soft)}.sudoku-active-diff{font-weight:700;font-size:.85rem;padding:.2rem .6rem;border-radius:6px}.diff-easy.sudoku-active-diff{color:#15803d;background:#dcfce7}.diff-medium.sudoku-active-diff{color:#1d4ed8;background:#dbeafe}.diff-hard.sudoku-active-diff{color:#c2410c;background:#ffedd5}.diff-expert.sudoku-active-diff{color:#b91c1c;background:#fee2e2}[data-theme=dark] .diff-easy.sudoku-active-diff{color:#4ade80;background:#052e16}[data-theme=dark] .diff-medium.sudoku-active-diff{color:#93c5fd;background:#0c2147}[data-theme=dark] .diff-hard.sudoku-active-diff{color:#fb923c;background:#431407}[data-theme=dark] .diff-expert.sudoku-active-diff{color:#f87171;background:#450a0a}.sudoku-active-time{color:var(--c-text-2);font-variant-numeric:tabular-nums}.sudoku-active-date{color:var(--c-text-3);font-size:.8rem;flex:1}.sudoku-active-arrow{color:var(--c-text-3);margin-left:auto}.sudoku-game-page{padding:1.25rem 1.5rem;max-width:780px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1.25rem}.sudoku-game-header{display:flex;align-items:center;gap:1rem}.sudoku-game-meta{display:flex;align-items:center;gap:1rem;margin-left:auto}.sudoku-diff-badge{font-size:.8rem;font-weight:700;padding:.25rem .7rem;border-radius:6px}.diff-easy.sudoku-diff-badge{color:#15803d;background:#dcfce7}.diff-medium.sudoku-diff-badge{color:#1d4ed8;background:#dbeafe}.diff-hard.sudoku-diff-badge{color:#c2410c;background:#ffedd5}.diff-expert.sudoku-diff-badge{color:#b91c1c;background:#fee2e2}[data-theme=dark] .diff-easy.sudoku-diff-badge{color:#4ade80;background:#052e16}[data-theme=dark] .diff-medium.sudoku-diff-badge{color:#93c5fd;background:#0c2147}[data-theme=dark] .diff-hard.sudoku-diff-badge{color:#fb923c;background:#431407}[data-theme=dark] .diff-expert.sudoku-diff-badge{color:#f87171;background:#450a0a}.sudoku-timer{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--c-text);background:var(--c-surface);border:1px solid var(--c-border);border-radius:8px;padding:.2rem .75rem}.sudoku-complete-banner{background:var(--c-green-bg);border:2px solid var(--c-green);border-radius:var(--radius);padding:1rem 1.5rem;color:var(--c-green);font-weight:700;font-size:1.05rem;text-align:center}.sudoku-game-layout{display:flex;gap:1.75rem;align-items:flex-start}.sudoku-board{display:grid;grid-template-columns:repeat(9,52px);grid-template-rows:repeat(9,52px);border:3px solid var(--c-text);border-radius:4px;background:var(--c-surface);box-shadow:var(--shadow-lg);flex-shrink:0;outline:none}.sudoku-cell{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid var(--c-border);cursor:pointer;position:relative;box-sizing:border-box;-webkit-user-select:none;user-select:none;transition:background .08s}.sudoku-cell:hover{background:var(--c-border-soft)}.sc-top-thick{border-top:2.5px solid var(--c-text)}.sc-left-thick{border-left:2.5px solid var(--c-text)}.sc-given .sc-number{font-size:1.3rem;font-weight:800;color:var(--c-text)}.sc-user .sc-number{font-size:1.3rem;font-weight:600;color:var(--c-primary)}.sc-sel{background:#dbeafe!important}[data-theme=dark] .sc-sel{background:#1e3a5f!important}.sc-peer{background:#f0f4ff}[data-theme=dark] .sc-peer{background:#1a1d2e}.sc-same-n{background:#dbeafe}[data-theme=dark] .sc-same-n{background:#1e3271}.sc-error .sc-number{color:var(--c-red)!important}.sc-error{background:var(--c-red-bg)!important}.sc-notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:1px}.sc-note{display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--c-text-3);line-height:1}.sc-note-on{color:var(--c-primary);font-weight:700}.sudoku-controls{display:flex;flex-direction:column;gap:1rem;flex:1}.sudoku-note-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:2px solid var(--c-border);border-radius:8px;background:var(--c-surface);color:var(--c-text-2);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .1s}.sudoku-note-toggle.active{border-color:var(--c-primary);background:var(--c-primary-bg);color:var(--c-primary)}.snt-icon{font-size:1rem}.sudoku-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.sudoku-num-btn{padding:.65rem 0;background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:8px;font-size:1.3rem;font-weight:700;color:var(--c-text);cursor:pointer;transition:background .1s,transform .05s}.sudoku-num-btn:hover:not(:disabled){background:var(--c-primary-bg);border-color:var(--c-primary);color:var(--c-primary);transform:translateY(-1px)}.sudoku-num-btn:disabled{opacity:.4;cursor:default}.sudoku-erase-btn{grid-column:span 3;padding:.55rem;background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:8px;font-size:.9rem;font-weight:600;color:var(--c-text-2);cursor:pointer;transition:background .1s}.sudoku-erase-btn:hover:not(:disabled){background:var(--c-red-bg);border-color:var(--c-red);color:var(--c-red)}.sudoku-erase-btn:disabled{opacity:.4;cursor:default}.sudoku-validate-btn{padding:.6rem 1rem;background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:8px;font-size:.9rem;font-weight:600;color:var(--c-text-2);cursor:pointer;transition:background .1s}.sudoku-validate-btn:hover{background:var(--c-green-bg);border-color:var(--c-green);color:var(--c-green)}.sudoku-error-msg{font-size:.85rem;color:var(--c-red);font-weight:600;padding:.5rem .75rem;background:var(--c-red-bg);border-radius:6px}.sudoku-hints{display:flex;flex-direction:column;gap:.3rem;margin-top:.5rem}.sh-row{font-size:.8rem;color:var(--c-text-3);display:flex;align-items:center;gap:.5rem}kbd{background:var(--c-border-soft);border:1px solid var(--c-border);border-radius:4px;padding:.05rem .35rem;font-size:.75rem;font-family:inherit;color:var(--c-text-2)}.sudoku-restart-btn{padding:.2rem .75rem;background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:7px;font-size:.85rem;font-weight:600;color:var(--c-text-2);cursor:pointer;transition:all .1s}.sudoku-restart-btn:hover:not(:disabled){border-color:var(--c-red);color:var(--c-red);background:var(--c-red-bg)}.sudoku-restart-btn:disabled{opacity:.5;cursor:default}