body{margin:0;font-family:Georgia,Times New Roman,serif;background:#1a0a00;color:#f5e6c8;overflow:hidden}#root{width:100%;min-height:100dvh}:root{--bg-deep: #1a0a00;--bg-panel: #2d1800;--gold: #e8b84b;--gold-dim: #c8a060;--border: #5a3a10;--text-light: #f5e6c8;--space-xs: clamp(6px, .8dvh, 10px);--space-sm: clamp(8px, 1.2dvh, 14px);--space-md: clamp(10px, 1.8dvh, 20px);--space-lg: clamp(14px, 2.5dvh, 28px);--fs-xs: clamp(16px, 2dvh, 20px);--fs-sm: clamp(18px, 2.4dvh, 24px);--fs-md: clamp(22px, 3dvh, 32px);--fs-lg: clamp(28px, 4dvh, 48px);--fs-xl: clamp(36px, 5.5dvh, 72px);--fs-xxl: clamp(44px, 6.5dvh, 88px)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Georgia,Times New Roman,serif;background:var(--bg-deep);color:var(--text-light);min-height:100dvh;overflow:hidden}.btn-primary{background:linear-gradient(145deg,#c8860a,#e8b84b,#c8860a);color:#1a0a00;border:none;padding:var(--space-md) clamp(36px,5vw,70px);font-size:var(--fs-md);font-family:Georgia,serif;font-weight:700;border-radius:12px;cursor:pointer;letter-spacing:3px;box-shadow:0 6px 20px #0008,inset 0 1px #fff4;transition:transform .1s,box-shadow .1s;display:block;margin:var(--space-xs) auto;min-width:clamp(280px,35vw,360px);min-height:56px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px #0009}.btn-primary:active{transform:translateY(1px)}.btn-secondary{background:transparent;color:var(--gold-dim);border:2px solid var(--gold-dim);padding:var(--space-sm) clamp(30px,4vw,56px);font-size:var(--fs-sm);font-family:Georgia,serif;border-radius:12px;cursor:pointer;letter-spacing:2px;transition:all .2s;display:block;margin:var(--space-xs) auto;min-width:clamp(280px,35vw,360px);min-height:52px}.btn-secondary:hover{background:#c8a06022;border-color:var(--gold);color:var(--gold)}.btn-back{background:transparent;color:#a08040;border:1px solid var(--border);padding:var(--space-xs) clamp(16px,2vw,30px);font-size:var(--fs-xs);font-family:Georgia,serif;border-radius:8px;cursor:pointer;margin-top:var(--space-sm);transition:all .2s}.btn-back:hover{border-color:var(--gold);color:var(--gold)}.screen{width:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center}.screen-title{justify-content:center;background:radial-gradient(ellipse at center,#3d1a00 0%,var(--bg-deep) 70%);padding:var(--space-sm) 20px;text-align:center;height:100dvh;overflow:hidden}.screen-title h1{font-size:var(--fs-xxl);color:var(--gold);text-shadow:3px 3px 8px #000,0 0 30px #e8b84b55;letter-spacing:6px;margin-bottom:var(--space-xs)}.screen-title .subtitle{font-size:var(--fs-md);color:var(--gold-dim);margin-bottom:var(--space-lg);letter-spacing:3px}.screen-title .chess-icon{font-size:clamp(50px,8dvh,90px);margin-bottom:var(--space-sm)}.title-piece{width:clamp(80px,11dvh,130px);height:clamp(80px,11dvh,130px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fed,#e8c8a0 60%,#c89060);border:4px solid #8b1a1a;box-shadow:inset 0 0 0 2px #8b1a1a44,inset 0 -6px 12px #8b1a1a33,0 6px 20px #0008,0 0 40px #e8b84b33;color:#8b0000;display:flex;align-items:center;justify-content:center;font-family:STKaiti,KaiTi,Songti SC,serif;font-weight:700;font-size:clamp(48px,6.5dvh,80px);line-height:1;margin:0 auto var(--space-sm);-webkit-user-select:none;user-select:none}.screen-campaign{padding:var(--space-sm) 20px;background:radial-gradient(ellipse at top,#2d1400 0%,var(--bg-deep) 60%);height:100dvh;justify-content:flex-start;overflow:hidden}.screen-campaign h2{font-size:var(--fs-lg);color:var(--gold);text-align:center;margin-bottom:2px;letter-spacing:4px;flex-shrink:0}.campaign-subtitle{text-align:center;color:var(--gold-dim);font-size:var(--fs-xs);margin-bottom:var(--space-sm);flex-shrink:0}.levels-grid{display:flex;flex-direction:column;gap:clamp(4px,.8dvh,10px);max-width:600px;width:100%;flex:1;min-height:0;justify-content:center}.level-card{background:linear-gradient(135deg,#2d1800,#1f1000);border:2px solid var(--border);border-radius:10px;padding:clamp(6px,1dvh,16px) var(--space-md);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:var(--space-sm);position:relative;overflow:hidden}.level-card:hover:not(.locked){border-color:var(--gold);background:linear-gradient(135deg,#3d2200,#2a1500);transform:translate(4px)}.level-card.locked{opacity:.5;cursor:not-allowed}.level-card.completed{border-color:#4a8a4a}.level-card.completed:after{content:"✓";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:var(--fs-lg);color:#4a8a4a}.level-num{font-size:var(--fs-lg);color:var(--gold);min-width:clamp(35px,4vw,55px);text-align:center;font-weight:700}.level-info h3{font-size:var(--fs-sm);color:var(--text-light);margin-bottom:2px}.level-info p{font-size:var(--fs-xs);color:var(--gold-dim)}.difficulty-stars{color:var(--gold);font-size:var(--fs-xs);margin-top:3px}.screen-story{justify-content:center;padding:var(--space-lg) 20px;text-align:center;background:radial-gradient(ellipse at center,#1a0d00,#0d0600 70%)}.story-portrait{font-size:clamp(50px,8dvh,100px);margin-bottom:var(--space-md)}.story-name{font-size:var(--fs-lg);color:var(--gold);margin-bottom:var(--space-sm);letter-spacing:3px}.story-text{font-size:var(--fs-sm);color:var(--gold-dim);line-height:1.6;max-width:620px;margin:0 auto var(--space-md)}.story-challenge{font-size:var(--fs-sm);color:#a08040;margin-bottom:var(--space-md);font-style:italic}.screen-game{height:100dvh;min-height:0;justify-content:flex-start;overflow:hidden}.game-top-bar{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-xs) var(--space-md);background:#1a0a00ee;border-bottom:2px solid #5a3a1044;flex-shrink:0}.opponent-info-bar{display:flex;align-items:center;gap:var(--space-xs);flex-shrink:0}.mute-btn{background:var(--bg-panel);color:var(--gold-dim);border:2px solid var(--border);border-radius:10px;width:clamp(40px,5dvh,56px);height:clamp(40px,5dvh,56px);font-size:clamp(18px,2.4dvh,24px);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s}.mute-btn:hover{border-color:var(--gold);color:var(--gold)}.opponent-avatar{font-size:clamp(28px,4dvh,44px);line-height:1}.opponent-name-side{font-size:var(--fs-xs);color:var(--gold);letter-spacing:1px;font-weight:700}.player-vs-line{font-size:clamp(12px,1.5dvh,16px);color:var(--gold-dim);letter-spacing:1px;line-height:1.1;max-width:clamp(140px,24vw,280px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vs-label{opacity:.7;margin-left:2px}.status-bar{background:var(--bg-panel);border:2px solid var(--border);border-radius:8px;padding:var(--space-xs) var(--space-md);flex:1;text-align:center;font-size:var(--fs-sm);color:var(--text-light);min-height:clamp(32px,4dvh,48px);display:flex;align-items:center;justify-content:center;font-weight:700}.status-bar.red{color:#e85050}.status-bar.thinking,.status-bar.status-thinking{color:var(--gold);animation:status-thinking-pulse 1.6s ease-in-out infinite}@keyframes status-thinking-pulse{0%,to{opacity:1;border-color:var(--border)}50%{opacity:.6;border-color:var(--gold)}}.status-bar.status-check{color:#ff4040;border-color:#ff4040;animation:statusPulse .8s ease-in-out infinite}.status-bar.status-win{color:#7de07d;border-color:#7de07d88}.status-bar.status-lose{color:#e85050;border-color:#e8505088}@keyframes statusPulse{0%,to{box-shadow:0 0 #ff404088}50%{box-shadow:0 0 0 6px #ff404000}}.board-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;position:relative}.board-canvas{display:block;cursor:pointer;border-radius:4px;box-shadow:0 0 40px #000c,0 0 80px #e8b84b22;touch-action:none}.game-bottom-bar{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-xs) var(--space-md);background:#1a0a00ee;border-top:2px solid #5a3a1044;flex-shrink:0}.captured-bar{display:flex;align-items:center;gap:var(--space-md);flex:1;min-width:0}.captured-section{display:flex;align-items:center;gap:6px;min-width:0;flex:1}.captured-label{font-size:var(--fs-xs);color:var(--gold-dim);letter-spacing:1px;white-space:nowrap;flex-shrink:0}.captured-row{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;padding:2px 0}.captured-row::-webkit-scrollbar{height:4px}.captured-row::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:2px}.captured-row::-webkit-scrollbar-track{background:transparent}.captured-piece{flex-shrink:0}.captured-piece{width:clamp(20px,2.5dvh,30px);height:clamp(20px,2.5dvh,30px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(10px,1.3dvh,14px);font-weight:700;line-height:1}.captured-piece.red{background:radial-gradient(circle,#cc3030,#880010);color:#ffe8c0;border:1.5px solid #ff9060}.captured-piece.black{background:radial-gradient(circle,#3050a0,#0a0a20);color:#c0d8ff;border:1.5px solid #6080c0}.game-controls{display:flex;gap:var(--space-xs);flex-shrink:0}.ctrl-btn{background:var(--bg-panel);color:var(--gold-dim);border:2px solid var(--border);padding:var(--space-sm) var(--space-md);font-size:var(--fs-xs);font-family:Georgia,serif;border-radius:12px;cursor:pointer;transition:all .2s;min-height:clamp(44px,5dvh,60px);display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.ctrl-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}.ctrl-btn:disabled{opacity:.4;cursor:not-allowed}.ctrl-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;margin-left:6px;border-radius:11px;background:#c8860a33;border:1px solid var(--gold-dim);color:var(--gold);font-size:.85em;font-weight:700;line-height:1}.ctrl-btn:disabled .ctrl-badge{background:#0003;border-color:#5a3a1088;color:#8a6a3a}.toast{position:fixed;left:50%;top:clamp(60px,8dvh,100px);transform:translate(-50%);background:#2d1800ee;color:var(--gold);border:2px solid var(--gold-dim);border-radius:10px;padding:var(--space-sm) var(--space-lg);font-size:var(--fs-sm);font-weight:700;letter-spacing:2px;box-shadow:0 10px 30px #0009;z-index:120;animation:toastIn .2s ease-out,toastOut .3s ease-in 1.5s forwards;pointer-events:none}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes toastOut{to{opacity:0;transform:translate(-50%,-8px)}}.check-banner{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:115;pointer-events:none;animation:checkIn .25s ease-out,checkOut .35s ease-in 1s forwards}.check-banner-text{font-size:clamp(60px,12dvh,140px);font-weight:700;letter-spacing:12px;font-family:STKaiti,KaiTi,Georgia,serif;color:#ff3030;text-shadow:0 0 20px #ff303088,0 0 40px #ff303055,4px 4px 0 #000,-2px -2px 0 #000;padding:clamp(20px,3dvh,40px) clamp(40px,6vw,80px);background:radial-gradient(ellipse at center,#1a0a00cc,#1a0a0099 50%,#1a0a0000 80%);border-radius:20px}.check-banner-ai .check-banner-text{color:#ffc040;text-shadow:0 0 20px #ffc04088,0 0 40px #ffc04055,4px 4px 0 #000,-2px -2px 0 #000}@keyframes checkIn{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes checkOut{to{opacity:0;transform:scale(1.15)}}.speech-container{flex-shrink:0;align-self:stretch;display:flex;justify-content:flex-start;padding:var(--space-xs) var(--space-md) 0 var(--space-md);pointer-events:none}.speech-bubble{background:#2d1800ee;border:2px solid #e8b84b88;border-radius:12px;padding:var(--space-xs) var(--space-md);font-size:var(--fs-xs);color:#f0d080;text-align:left;opacity:0;transition:opacity 3s ease-out;pointer-events:none;font-style:italic;line-height:1.4;overflow-wrap:break-word;box-shadow:0 4px 12px #0008;max-width:min(480px,80vw);position:relative}.speech-bubble:before{content:"";position:absolute;top:-8px;left:12px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:8px solid #e8b84b88}.speech-bubble:after{content:"";position:absolute;top:-6px;left:13px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #2d1800ee}.speech-bubble.visible{opacity:1;transition:opacity .3s ease-in}.result-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;z-index:100;justify-content:center;align-items:center}.result-overlay.show{display:flex}.result-box{background:linear-gradient(145deg,#2d1800,var(--bg-deep));border:3px solid var(--gold);border-radius:16px;padding:var(--space-lg) clamp(24px,4vw,60px);text-align:center;box-shadow:0 20px 60px #0009;max-width:440px}.result-icon{font-size:clamp(48px,7dvh,88px);margin-bottom:var(--space-sm)}.result-title{font-size:var(--fs-xl);color:var(--gold);margin-bottom:var(--space-xs);letter-spacing:4px}.result-msg{font-size:var(--fs-sm);color:var(--gold-dim);margin-bottom:var(--space-md);line-height:1.6}.result-buttons{display:flex;flex-direction:column;gap:var(--space-xs)}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;z-index:110;display:flex;justify-content:center;align-items:center;padding:var(--space-md)}.confirm-box{background:linear-gradient(145deg,#2d1800,var(--bg-deep));border:3px solid var(--gold);border-radius:16px;padding:var(--space-lg) clamp(24px,4vw,48px);text-align:center;box-shadow:0 20px 60px #0009;max-width:440px;width:100%}.confirm-title{font-size:var(--fs-lg);color:var(--gold);margin-bottom:var(--space-sm);letter-spacing:3px}.confirm-msg{font-size:var(--fs-sm);color:var(--gold-dim);margin-bottom:var(--space-md);line-height:1.6}.confirm-buttons{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap}.confirm-buttons .btn-primary,.confirm-buttons .btn-secondary{display:inline-block;margin:0;min-width:0;flex:1 1 140px;padding:var(--space-sm) var(--space-md);letter-spacing:2px;font-size:var(--fs-sm)}.level-transition{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s ease;pointer-events:none}.level-transition.active{opacity:1;pointer-events:all}.level-transition.fade-out{opacity:0}.transition-scene{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.transition-location{font-size:var(--fs-xl);color:var(--gold);letter-spacing:6px;margin-bottom:var(--space-md)}.transition-flavor{font-size:var(--fs-sm);color:var(--gold-dim);line-height:2;white-space:pre-line}.screen-freeplay{padding:var(--space-sm) 20px;background:radial-gradient(ellipse at top,#2d1400 0%,var(--bg-deep) 60%);height:100dvh;justify-content:flex-start;overflow:hidden}.screen-freeplay h2{font-size:var(--fs-lg);color:var(--gold);text-align:center;margin-bottom:var(--space-xs);letter-spacing:4px}.screen-howto{padding:var(--space-lg) 20px;overflow-y:auto}.admin-screen>*{flex-shrink:0}.screen-howto h2{font-size:var(--fs-lg);color:var(--gold);text-align:center;margin-bottom:var(--space-md);letter-spacing:4px}.rules-section{max-width:700px;width:100%;margin-bottom:var(--space-md)}.rules-section h3{font-size:var(--fs-md);color:var(--gold);margin-bottom:var(--space-xs);border-bottom:1px solid var(--border);padding-bottom:var(--space-xs)}.rules-section p,.rules-section li{font-size:var(--fs-sm);color:var(--gold-dim);line-height:1.9;margin-bottom:var(--space-xs)}.rules-section ul{padding-left:28px}.piece-table{width:100%;border-collapse:collapse;margin-top:var(--space-sm)}.piece-table th{background:var(--bg-panel);color:var(--gold);padding:var(--space-sm);font-size:var(--fs-sm);text-align:left;border:1px solid var(--border)}.piece-table td{padding:var(--space-sm);font-size:var(--fs-xs);color:var(--gold-dim);border:1px solid var(--border);vertical-align:top}.piece-table tr:nth-child(2n) td{background:#1f1000}@media (max-width: 900px){.game-top-bar{flex-wrap:wrap}.game-bottom-bar{flex-wrap:wrap;justify-content:center}.captured-bar,.game-controls{width:100%;justify-content:center}.game-controls .ctrl-btn{flex:1;min-width:0}.board-area{flex-direction:column;gap:var(--space-xs);padding:var(--space-xs) 0}}@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}