@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--color-primary: #15803D;--color-on-primary: #FFFFFF;--color-secondary: #166534;--color-accent: #D97706;--color-background: #0F172A;--color-foreground: #FFFFFF;--color-border: rgba(255,255,255,.08);--color-destructive: #DC2626;--board-light: #F0D9B5;--board-dark: #B58863;--board-selected: rgba(21, 128, 61, .55);--board-valid-move: rgba(0, 0, 0, .14);--board-capture-ring: rgba(0, 0, 0, .25);--board-check: rgba(220, 38, 38, .55);--board-last-move: rgba(155, 199, 0, .35);--glass-bg: rgba(255,255,255,.04);--glass-border: rgba(255,255,255,.07);--glass-radius: 14px;--font: "Inter", system-ui, -apple-system, sans-serif;--navbar-h: 52px}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:var(--font);background:var(--color-background);color:var(--color-foreground);overflow:hidden;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:12px;padding-top:calc(var(--navbar-h) + 12px);gap:10px}.navbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:var(--navbar-h);background:#0f172ae0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--color-border)}.navbar-brand{display:flex;align-items:center;gap:10px}.brand-icon{font-size:22px;line-height:1}.brand-text{font-size:18px;font-weight:700;letter-spacing:-.01em}.navbar-status{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:#fffc}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.active{background:#22c55e;box-shadow:0 0 8px #22c55e80}.status-dot.waiting{background:var(--color-accent);box-shadow:0 0 8px #d9770680}.game-container{display:flex;gap:16px;align-items:flex-start;max-width:1100px;width:100%;justify-content:center}.board-wrapper{position:relative;background:#ffffff0a;border-radius:var(--glass-radius);padding:10px;border:1px solid var(--color-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 40px #00000059;flex-shrink:0}.board{display:grid;grid-template-columns:repeat(8,1fr);width:min(68vmin,520px);height:min(68vmin,520px);border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a}.square{display:flex;align-items:center;justify-content:center;font-size:min(7.5vmin,52px);cursor:pointer;position:relative;transition:background .12s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.square.light{background:var(--board-light)}.square.dark{background:var(--board-dark)}.square.selected{background:var(--board-selected)!important}.square.valid-move:after{content:"";position:absolute;width:28%;height:28%;background:var(--board-valid-move);border-radius:50%;pointer-events:none;z-index:1}.square.capture-move:after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:4px solid var(--board-capture-ring);border-radius:50%;pointer-events:none;z-index:1}.square.check{background:var(--board-check)!important;animation:pulse-check .7s ease-in-out infinite alternate}.square.last-move{background:var(--board-last-move)!important}@keyframes pulse-check{0%{opacity:.7}to{opacity:1}}.square .piece{position:relative;z-index:2;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25));transition:transform .08s ease;pointer-events:none}.square .piece.black-piece{filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}.coord-label{position:absolute;font-size:10px;font-weight:700;opacity:.55;pointer-events:none;z-index:1;line-height:1}.coord-file{bottom:2px;right:4px}.coord-rank{top:2px;left:4px}.square.light .coord-label{color:var(--board-dark)}.square.dark .coord-label{color:var(--board-light)}.sidebar{display:flex;flex-direction:column;gap:10px;width:210px;flex-shrink:0}.sidebar-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--glass-radius);padding:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.sidebar-card h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#fff6;margin-bottom:8px}.turn-indicator{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}.turn-circle{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.2);flex-shrink:0}.turn-circle.white{background:#fff;border-color:#fff6}.turn-circle.black{background:#1a1a2e;border-color:#ffffff4d}.turn-label{font-size:15px}.check-badge{margin-top:8px;padding:4px 10px;background:#dc262626;border:1px solid rgba(220,38,38,.3);border-radius:6px;font-size:13px;font-weight:600;color:#ef4444;text-align:center;animation:pulse-check .7s ease-in-out infinite alternate}.captured-section{min-height:28px}.captured-row{display:flex;flex-wrap:wrap;gap:1px;min-height:22px}.captured-piece{font-size:20px;line-height:1;opacity:.85}.captured-empty{font-size:12px;color:#ffffff40}.move-history{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}.move-history::-webkit-scrollbar{width:4px}.move-history::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:2px}.move-empty{font-size:12px;color:#ffffff40}.move-list{display:grid;grid-template-columns:28px 1fr 1fr;gap:1px 6px;font-size:13px;font-family:Inter,SF Mono,monospace;direction:ltr}.move-number{color:#ffffff4d;text-align:right;font-size:12px}.move-white,.move-black{padding:1px 4px;border-radius:3px;font-size:13px;font-weight:500}.move-white{color:#ffffffd9}.move-black{color:#ffffffa6}.move-white:hover,.move-black:hover{background:#ffffff0d}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.info-item{display:flex;flex-direction:column;gap:1px}.info-label{font-size:11px;color:#ffffff59;text-transform:uppercase;letter-spacing:.05em}.info-value{font-size:16px;font-weight:700;color:var(--color-foreground)}.notation-count{font-size:24px;font-weight:700;color:var(--color-foreground)}.btn-group{display:flex;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:1px solid var(--color-border);border-radius:8px;background:var(--glass-bg);color:var(--color-foreground);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:all .18s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}.btn:hover{background:#ffffff17;transform:translateY(-1px);box-shadow:0 4px 14px #0003}.btn:active{transform:translateY(0)}.btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-secondary);border-color:var(--color-secondary)}.btn-accent{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.btn-accent:hover{background:#b45309;border-color:#b45309}.btn-lg{padding:12px 28px;font-size:15px;font-weight:600;width:100%}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:#1a2332;border:1px solid var(--color-border);border-radius:18px;padding:28px 32px;text-align:center;box-shadow:0 20px 60px #00000080;animation:slideUp .25s ease;max-width:380px;width:90%}@keyframes slideUp{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}.modal h2{font-size:20px;font-weight:700;margin-bottom:6px}.modal-sub{color:#ffffff8c;font-size:14px;margin-bottom:20px}.promotion-choices{display:flex;gap:12px;justify-content:center}.promotion-btn{width:68px;height:68px;font-size:42px;border:2px solid var(--color-border);border-radius:14px;background:var(--glass-bg);cursor:pointer;transition:all .18s ease;display:flex;align-items:center;justify-content:center;color:var(--color-foreground)}.promotion-btn:hover{background:#ffffff1f;border-color:var(--color-accent);transform:scale(1.1);box-shadow:0 4px 16px #d9770633}.game-over-modal h2{font-size:26px;margin-bottom:8px}.game-over-modal .modal-sub{font-size:15px;margin-bottom:24px}@media (max-width: 900px){.game-container{flex-direction:column;align-items:center;gap:10px}.sidebar{width:100%;max-width:540px;flex-direction:row;flex-wrap:wrap}.sidebar .sidebar-card{flex:1;min-width:140px}.board{width:min(85vmin,480px);height:min(85vmin,480px)}.square{font-size:min(9.5vmin,48px)}.move-history{max-height:120px}}@media (max-width: 540px){.app{padding:6px;padding-top:calc(var(--navbar-h) + 6px)}.navbar{padding:0 12px}.brand-text{font-size:15px}.status-text{font-size:12px}.board{width:94vmin;height:94vmin}.square{font-size:10vmin}.sidebar-card{padding:10px}.btn{font-size:12px;padding:6px 12px}.modal{padding:20px 16px}.promotion-btn{width:56px;height:56px;font-size:34px}}