:root{--color-bg-primary: #0f172a;--color-bg-secondary: #1e293b;--color-bg-elevated: #334155;--color-bg-overlay: rgba(15, 23, 42, .95);--color-primary: #8b5cf6;--color-primary-hover: #a78bfa;--color-primary-active: #7c3aed;--color-success: #059669;--color-warning: #f97316;--color-error: #dc2626;--color-info: #0ea5e9;--color-text-primary: #ffffff;--color-text-secondary: #cbd5e1;--color-text-muted: #94a3b8;--color-text-disabled: #64748b;--color-border: #475569;--color-border-hover: #64748b;--color-border-active: var(--color-primary);--color-alpha-light: rgba(255, 255, 255, .05);--color-alpha-medium: rgba(255, 255, 255, .1);--color-alpha-strong: rgba(255, 255, 255, .15);--color-accent: #fbbf24;--color-secondary: var(--color-success);--color-player1: var(--color-error);--color-player2: var(--color-info);--color-glow-primary: rgba(139, 92, 246, .4);--color-glow-accent: rgba(251, 191, 36, .3);--color-glow-success: rgba(5, 150, 105, .3);--color-mobile-action: rgba(139, 92, 246, .8);--game-width: 1140px;--game-height: 540px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--border-radius: 8px;--border-radius-sm: 4px;--border-radius-lg: 12px;--border-width-light: 1px;--border-width: 2px;--border-width-top: 3px;--font-base: 16px;--font-xs: .75rem;--font-sm: .875rem;--font-md: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 2rem}*{margin:0;padding:0;box-sizing:border-box}html{font-size:var(--font-base)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;font-size:var(--font-md);background-color:var(--color-bg-primary);color:var(--color-text-primary);overflow:hidden;line-height:1.5}#root{position:relative;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(135deg,var(--color-bg-primary) 0%,var(--color-bg-secondary) 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.game-app{position:relative;aspect-ratio:19 / 9;width:min(100vw,100vh * 19/9);height:min(100vh,100vw * 9/19);overflow:hidden;max-width:var(--game-width);max-height:var(--game-height);border:0 solid var(--color-primary);border-radius:var(--border-radius-lg)}.game-app>.ui-loading,.game-app>.ui-mode,.game-app>.ui-select,.game-app>.ui-game{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column}.btn{min-width:5rem;padding:.5rem 1rem;border:var(--border-width) solid transparent;border-radius:var(--border-radius);font-size:var(--font-md);font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn-primary{padding:.75rem 2.5rem;background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-primary)}.btn-primary:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn-primary:active{background-color:var(--color-primary-active);border-color:var(--color-primary-active)}.btn-secondary{background-color:var(--color-text-disabled);border-color:var(--color-text-disabled);color:var(--color-text-primary)}.btn-secondary:hover{background-color:var(--color-border-hover)}.btn-disabled{padding:.75rem 2.5rem;background-color:var(--color-border)!important;color:var(--color-text-disabled)!important;cursor:not-allowed!important;opacity:.6}.btn-disabled:hover{background-color:var(--color-border)!important}.btn-warning{background:linear-gradient(135deg,var(--color-warning) 0%,var(--color-warning-hover) 100%);border-color:var(--color-warning);color:var(--color-text-primary)}.btn-warning:hover{background:linear-gradient(135deg,var(--color-warning-hover) 0%,var(--color-warning) 100%);border-color:var(--color-warning-hover)}.game-title{font-size:var(--font-2xl);font-weight:700;color:var(--color-accent);text-align:center;margin:0}.orientation-notice{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--color-bg-primary);display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:auto}.orientation-notice-content{text-align:center;padding:var(--spacing-xl)}.orientation-notice-icon{font-size:4rem;margin-bottom:var(--spacing-lg)}.orientation-notice-title{font-size:1.5rem;color:var(--color-text-primary);margin-bottom:var(--spacing-md)}.orientation-notice-desc{color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;gap:var(--spacing-md)}.orientation-notice-rotate{font-size:2rem;animation:rotate 2s infinite linear}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.ui-loading{justify-content:center;align-items:center;text-align:center;padding:var(--spacing-xl)}.loading-content{padding:var(--spacing-xl)}.loading-content .game-title{font-size:var(--font-3xl);font-weight:700;color:var(--color-accent);margin-bottom:var(--spacing-xl)}.loading-info{margin-bottom:var(--spacing-lg)}.loading-text{font-size:var(--font-md);color:var(--color-text-secondary);margin-bottom:var(--spacing-md)}.loading-progress-container{position:relative;width:100%;height:.5rem;background-color:var(--color-alpha-medium);border-radius:var(--border-radius-sm);overflow:hidden;border:var(--border-width) solid var(--color-alpha-strong);margin-bottom:var(--spacing-sm)}.loading-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);border-radius:var(--border-radius-sm);transition:width .3s ease;box-shadow:0 0 10px var(--color-primary)}.loading-percentage{font-size:var(--font-sm);color:var(--color-text-muted);margin-top:var(--spacing-sm)}.ui-mode{justify-content:center;align-items:center;text-align:center;padding:var(--spacing-xl);gap:var(--spacing-xl)}.mode-header{width:100%}.lang-switch{display:none;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius);color:var(--color-text-primary);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-sm);cursor:pointer;transition:all .3s ease}.lang-switch:hover{background:var(--color-bg-elevated)}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(40%,1fr));gap:var(--spacing-xl);width:60%}.mode-button{background:linear-gradient(135deg,var(--color-bg-elevated) 0%,var(--color-bg-secondary) 100%);border:var(--border-width-top) solid var(--color-border);border-radius:var(--border-radius-lg);padding:3rem 0;color:var(--color-text-primary);cursor:pointer;transition:all .3s ease;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.mode-button:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);border-color:var(--color-primary)}.mode-button.selected{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-active) 100%);border-color:var(--color-accent)}.mode-button.disabled{background:linear-gradient(135deg,var(--color-bg-secondary) 0%,var(--color-bg-tertiary) 100%);border-color:var(--color-border-secondary);color:var(--color-text-secondary);cursor:not-allowed;opacity:.6}.mode-button.disabled:hover{transform:none;background:linear-gradient(135deg,var(--color-bg-secondary) 0%,var(--color-bg-tertiary) 100%);border-color:var(--color-border-secondary)}.mode-name{font-size:var(--font-2xl);font-weight:700;margin-bottom:var(--spacing-sm)}.mode-desc{font-size:var(--font-md);color:var(--color-text-secondary)}.ui-select{position:relative;padding:var(--spacing-md);gap:var(--spacing-lg)}.title-bar{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0}.title-bar .game-title{text-align:left;font-size:var(--font-2xl);font-weight:700;color:var(--color-accent)}.select-hint{flex:1;text-align:center;font-size:var(--font-md)}.difficulty-selector{display:flex;justify-content:end;align-items:center;gap:.75rem}.difficulty-text{font-size:var(--font-md)}.difficulty-btn{padding:.3rem .8rem;border:1px solid var(--color-border);border-radius:4px;background:var(--color-alpha-light);color:var(--color-text-secondary);font-size:var(--font-sm);cursor:pointer;transition:all .2s ease}.difficulty-btn:hover{background:var(--color-alpha-medium)}.difficulty-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-primary)}.player-indicators{display:flex;gap:1rem;align-items:center}.player-indicator{display:flex;gap:.5rem;align-items:center;font-size:var(--font-sm)}.player-label{width:1.8rem;height:1.8rem;border-radius:50%;color:var(--color-text-primary);font-size:var(--font-sm);font-weight:700;display:flex;align-items:center;justify-content:center;border:var(--border-width-light) solid var(--color-text-primary)}.player-label.p1{background:var(--color-player1)}.player-label.p2{background:var(--color-player2)}.confirmed-selection{font-weight:700}.waiting-selection{color:var(--color-text-disabled);font-style:italic}.content-area{flex:1;overflow:hidden}.char-grid-container{width:100%;height:100%;overflow:hidden}.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));grid-auto-rows:minmax(9rem,auto);gap:var(--spacing-md);padding:0 var(--spacing-md) 0 0;max-height:100%;overflow-y:auto}.char-grid::-webkit-scrollbar{width:8px}.char-grid::-webkit-scrollbar-track{background:var(--color-bg-elevated);border-radius:3px}.char-grid::-webkit-scrollbar-thumb{background:var(--color-alpha-medium);border-radius:3px}.char-grid::-webkit-scrollbar-thumb:hover{background:var(--color-alpha-strong)}.char-grid::-webkit-scrollbar-thumb:active{background:var(--color-border-hover)}.char-slot{position:relative;min-height:10rem;max-height:10rem;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;background:var(--color-alpha-light);border:2px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-sm);cursor:pointer;transition:all .3s ease;text-align:center}.char-slot:before{content:"";display:block;width:100%;padding-top:100%;position:absolute;top:0;left:0;z-index:-1}.char-slot:hover{border-color:var(--color-border-hover);background:var(--color-alpha-medium)}.char-slot.player1-selected,.char-slot.player2-selected,.char-slot.selected{border-color:var(--color-accent);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-active) 100%)}.char-portrait{flex:1;display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-xs)}.char-icon{width:70%;height:auto;object-fit:cover}.char-placeholder{width:70%;height:auto;border-radius:50%;background:var(--color-bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--color-text-disabled);font-size:var(--font-xs)}.player-mark{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;border-radius:50%;color:var(--color-text-primary);font-size:var(--font-xs);font-weight:700;display:flex;align-items:center;justify-content:center;border:var(--border-width-light) solid var(--color-text-primary)}.player-mark.p1{background:var(--color-player1)}.player-mark.p2{background:var(--color-player2)}.char-name{font-size:var(--font-sm);color:var(--color-text-primary);font-weight:500;margin-top:auto}.action-bar{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:1rem}.char-info{display:flex;flex-direction:column;gap:.25rem}.char-info-desc{color:var(--color-text-secondary);font-size:var(--font-sm)}.char-info-stats{display:flex;gap:.5rem;font-size:var(--font-xs);color:var(--color-accent)}.char-info-placeholder{color:var(--color-text-disabled);font-style:italic;font-size:var(--font-sm)}.action-buttons{flex-shrink:0;display:flex;gap:var(--spacing-md);align-items:center}.game-container{display:flex;flex:1;gap:var(--spacing-sm);padding:var(--spacing-sm);overflow:hidden}.game-play-area{flex:1;display:flex;flex-direction:column}.game-header{background:var(--color-primary);padding:.9rem 1rem;display:flex;justify-content:space-between;align-items:center;color:var(--color-text-primary);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.game-score{font-size:var(--font-md);font-weight:700}.game-info{display:flex;align-items:center;gap:var(--spacing-md)}.game-progress,.game-difficulty{font-size:var(--font-sm);color:var(--color-text-secondary)}.game-timer{width:6rem;text-align:center;font-size:var(--font-lg);font-weight:600;letter-spacing:.1rem}.game-canvas-container{overflow:hidden;position:relative;flex:1;background:var(--color-bg-elevated);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}.game-help-area{width:16%;overflow:hidden;display:flex;flex-direction:column;gap:var(--spacing-lg);border-radius:var(--border-radius);padding:.5rem 1rem}.game-rules,.game-controls{display:flex;flex-direction:column;gap:var(--spacing-sm)}.game-rules h3,.game-controls h3{font-size:var(--font-md);color:var(--color-accent);margin:0;font-weight:700}.game-rules ol,.game-controls ul{font-size:var(--font-sm);color:var(--color-text-secondary);line-height:1.8;margin-left:.75rem}.game-rules ol{list-style:decimal}.game-controls ul{list-style:disc}.game-rules p,.game-controls p{font-size:var(--font-sm);color:var(--color-text-secondary);line-height:2;margin-left:.75rem}.game-buttons{display:flex;justify-content:center;gap:var(--spacing-sm)}.game-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-bg-overlay);display:flex;justify-content:center;align-items:center;z-index:1000}.popup{background:var(--color-bg-elevated);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);text-align:center;width:22rem}.popup-title{margin-bottom:var(--spacing-md);color:var(--color-accent);font-size:var(--font-lg);font-weight:700}.popup-text{margin-bottom:var(--spacing-lg);color:var(--color-text-secondary);line-height:1.5;font-size:var(--font-md)}.popup-buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:center}.next-opponent{display:none;margin:var(--spacing-lg) 0;padding:var(--spacing-md);background:var(--color-alpha-light);border-radius:var(--border-radius);font-size:var(--font-sm)}.next-opponent-title{color:var(--color-text-primary);font-weight:700;margin-bottom:var(--spacing-sm)}.next-opponent-info{display:flex;align-items:center;gap:var(--spacing-md)}.next-opponent-icon{width:4rem;height:auto;border-radius:50%;object-fit:cover}.next-opponent-placeholder{width:4rem;height:4rem;border-radius:50%;background:var(--color-bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--color-text-disabled);font-size:var(--font-xs)}.next-opponent-details{flex:1}.next-opponent-name{text-align:left;color:var(--color-accent);font-weight:700;margin-bottom:var(--spacing-xs)}.next-opponent-stats{color:var(--color-text-secondary);font-size:var(--font-sm)}.ui-complete{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--color-bg-primary) 0%,var(--color-bg-secondary) 100%);display:flex;align-items:center;justify-content:center;z-index:1000}.complete-content{text-align:center;padding:var(--spacing-xl);background:var(--color-bg-elevated);border:var(--border-width-top) solid var(--color-border);border-radius:var(--border-radius-lg)}.complete-title{margin:0;font-size:var(--font-2xl);font-weight:700;color:var(--color-accent)}.complete-achievement{width:100%;gap:var(--spacing-lg);margin:var(--spacing-xl) 0;padding:0 var(--spacing-xl)}.achievement-avatar{float:left;width:6rem;height:auto;margin-right:1rem}.achievement-name{display:block;text-align:left;font-size:var(--font-xl);font-weight:700;color:var(--color-accent)}.achievement-text{margin-top:.5rem;text-align:left;font-size:var(--font-md);color:var(--color-text-primary);font-weight:500}.complete-buttons{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.firework-spark{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:firework-bloom 1.5s ease-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes firework-bloom{0%{transform:translate(-50%,-50%) rotate(var(--angle)) translate(0) scale(1);opacity:1}20%{transform:translate(-50%,-50%) rotate(var(--angle)) translate(30px) scale(1.5);opacity:1}to{transform:translate(-50%,-50%) rotate(var(--angle)) translate(60px) scale(.5);opacity:0}}.mobile-controls{position:absolute;bottom:2rem;left:2rem;right:21%;display:none;justify-content:space-between;align-items:flex-end;z-index:100;pointer-events:none}.mobile-controls.active{display:flex}.movement-controls,.action-controls{display:flex;gap:var(--spacing-lg);pointer-events:auto}.movement-controls{width:50%}.action-controls{justify-content:flex-end;width:50%}.move-btn,.action-btn{width:4rem;height:4rem;background-color:var(--color-alpha-strong);border:2px solid var(--color-alpha-strong);border-radius:20%;color:var(--color-text-primary);font-size:var(--font-lg);font-weight:700;transition:all .2s ease;-webkit-user-select:none;user-select:none;touch-action:manipulation}.move-btn.pressed,.action-btn.pressed{transform:scale(.95)}@media (max-width: 1200px){html{font-size:14px}.char-grid{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));grid-auto-rows:minmax(8.5rem,auto)}.char-slot{min-height:9rem;max-height:9rem}.game-help-area{width:17%}.move-btn,.action-btn{width:5rem;height:5rem}}@media (max-width: 700px){html{font-size:12px}.char-grid{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));grid-auto-rows:minmax(8rem,auto)}.char-slot{min-height:8rem;max-height:8rem;padding:var(--spacing-xs)}}@media (max-height: 400px){html{font-size:12px}}@keyframes pulse{0%{box-shadow:0 0 15px var(--color-glow-accent);transform:scale(1)}50%{box-shadow:0 0 30px var(--color-glow-accent),0 0 15px var(--color-glow-primary);transform:scale(1.02)}to{box-shadow:0 0 15px var(--color-glow-accent);transform:scale(1)}}