html{font-size:12pt}a{text-decoration:none}body{background-color:var(--color-bg-primary);color:var(--color-text-primary);overflow-x:hidden;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem}h1{margin-bottom:var(--space-lg)}h2{margin-bottom:var(--space-md)}.mb-sm{margin-bottom:var(--space-sm)}.flex{display:flex}.col{flex-direction:column}.row{flex-direction:row}.flex-center{justify-content:center;align-items: center}.flex-justify-center{justify-content:center}.flex-align-center{align-items: center}.space-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gameContainer{display:flex;overflow:hidden;flex-direction:column;width:100vw;height:100vh}.gameMetaBar{display:flex;align-items: center;gap:var(--space-md);padding:var(--space-sm)20%;background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);color:var(--color-text-secondary);min-height:28px;font-size:13px}.gameMetaBar .gameName{color:var(--color-text-primary);font-weight:600}.mapCard{padding:var(--space-sm);border:1px solid var(--color-border);border-radius:var(--border-radius);cursor:pointer;transition:all .2s}.mapCard:hover{background-color:var(--color-bg-secondary)}.mapCard.selected{border-color:var(--color-primary);background-color:var(--color-bg-secondary)}.mapSize{color:var(--color-text-secondary);font-size:.9em}.mapDifficulty{border-radius:4px;padding:2px 6px;font-size:.8em;font-weight:500}.difficulty-easy{color:#166534;background-color:#dcfce7}.difficulty-medium{color:#92400e;background-color:#fef3c7}.difficulty-hard{color:#991b1b;background-color:#fee2e2}.badge-map{color:#3730a3;background-color:#e0e7ff;border-radius:4px;padding:2px 8px;font-size:.8em;font-weight:500}.mapPreview{display:flex;border:1px solid var(--color-border);border-radius:var(--border-radius);background-color:var(--color-bg-secondary);overflow:hidden;justify-content:center;align-items: center}.mapPreview-small{width:160px;height:120px}.mapPreview-medium{width:240px;height:180px}.mapPreview-large{width:320px;height:240px}.mapPreview-grid{display:grid;border:1px solid var(--color-border);gap:0}.mapPreview-tile{border:.5px solid #0000001a;transition:opacity .2s}.mapPreview-tile:hover{opacity:.8}.mapPreview-placeholder{display:flex;text-align:center;color:var(--color-text-secondary);flex-direction:column;justify-content:center;align-items: center;gap:2px;font-size:.8em}.topActionBar{display:flex;padding:var(--space-sm)20%;background-color:var(--color-bg-tertiary);border-bottom:2px solid var(--color-border);justify-content:space-between;align-items: center;gap:var(--space-lg);min-height:48px}.topBarLeft,.topBarCenter,.topBarRight{display:flex;align-items: center;gap:var(--space-md);flex:1}.topBarLeft{justify-content:flex-start}.topBarCenter{justify-content:center}.topBarRight{justify-content:flex-end}.badge{display:inline-block;padding:var(--space-sm)var(--space-md);border-radius:var(--space-lg);border:1px solid var(--color-border);background-color:var(--color-bg-secondary);font-size:.8rem;font-weight:400}.badge-public{background-color:var(--color-accent-green);color:var(--color-text-primary)}.badge-private{background-color:var(--color-accent-yellow);color:var(--color-text-primary)}.btn{padding:var(--space-sm)var(--space-lg);border-radius:var(--space-xs);cursor:pointer;border:none;transition:opacity .2s;font-size:1rem;font-weight:400}.btn:hover:not(:disabled){opacity:.8}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-sm{padding:var(--space-sm)var(--space-md);font-size:.9rem}.btn-lg{padding:var(--space-lg)var(--space-2xl);font-size:1.1rem}.btn-primary{background-color:var(--color-accent-blue);color:var(--color-text-primary)}.btn-success{background-color:var(--color-accent-green);color:var(--color-text-primary)}.btn-danger{background-color:var(--color-accent-red);color:var(--color-text-primary)}.btn-neutral{background-color:var(--color-border-light);color:var(--color-text-primary)}.topBarInfo{display:flex;align-items: center;gap:var(--space-2xl);flex:1;justify-content:center}.fundsDisplay{display:flex;align-items: center;gap:var(--space-sm);padding:var(--space-sm)var(--space-md);background-color:var(--color-bg-secondary);border-radius:var(--space-sm);font-size:14px}.fundsLabel{color:var(--color-text-secondary);font-weight:500}.fundsValue{color:var(--color-accent-yellow);font-weight:700}.coordsDisplay{padding:var(--space-sm)var(--space-md);background-color:var(--color-bg-secondary);border-radius:var(--space-sm);color:var(--color-accent-blue);text-align:center;width:80px;font-family:Courier New,monospace;font-size:14px;font-weight:600}.btn-icon{width:var(--space-3xl);height:var(--space-3xl);display:flex;font-size:var(--space-lg);border-radius:50%;justify-content:center;align-items: center;padding:0;font-weight:700}.gameMainContent{display:flex;overflow:hidden;flex:1}.gameBoardWrapper{display:flex;overflow:auto;background-color:var(--color-bg-primary);flex:1;justify-content:center;align-items: center}.container{padding:var(--space-xl);display:flex;flex-direction:column;justify-content:center;align-items: center;min-height:100vh}.message{color:var(--color-text-secondary);font-size:1.5rem}.error{color:var(--color-accent-red);background-color:var(--color-bg-secondary);padding:var(--space-lg);border-radius:var(--space-sm);text-align:center;max-width:500px}.errorBanner{padding:var(--space-md)var(--space-lg);background-color:var(--color-accent-red);color:var(--color-text-primary);text-align:center;font-size:14px}.victoryBanner{position:fixed;display:flex;z-index:1000;background-color:#000000d9;justify-content:center;align-items: center;inset:0}.victoryContent{background-color:var(--color-bg-secondary);border:3px solid var(--color-accent-yellow);border-radius:var(--space-lg);padding:var(--space-4xl);text-align:center;max-width:500px}.victoryTitle{color:var(--color-accent-yellow);margin:0 0 var(--space-lg)0;font-size:3rem}.victoryText{color:var(--color-text-primary);margin:0 0 var(--space-3xl)0;font-size:1.25rem}.victoryContent .button{margin-top:var(--space-lg)}.authFormContainer{display:flex;padding:var(--space-xl);justify-content:center;align-items: center;min-height:100vh}.authFormCard{display:flex;gap:var(--space-2xl);padding:var(--space-3xl);background-color:var(--color-bg-secondary);border-radius:var(--space-md);border:2px solid var(--color-bg-tertiary);flex-direction:column;width:100%;max-width:400px}.authFormTitle{color:var(--color-text-primary);text-align:center;margin:0;font-size:1.8rem}.authForm{display:flex;gap:var(--space-xl);flex-direction:column}.formGroup{display:flex;gap:var(--space-sm);flex-direction:column}.formLabel{color:var(--color-text-secondary);font-size:.95rem;font-weight:500}.formInput{padding:var(--space-md);background-color:var(--color-bg-primary);color:var(--color-text-primary);border:2px solid var(--color-bg-tertiary);border-radius:var(--space-sm);font-size:1rem}.formInput:focus{outline:none;border-color:var(--color-accent-blue)}.formInput:disabled{opacity:.6;cursor:not-allowed}.formError{padding:var(--space-md);background-color:var(--color-accent-red);color:var(--color-text-primary);border-radius:var(--space-sm);text-align:center;font-size:.95rem}.btn-link{color:var(--color-accent-blue);text-decoration:none;background-color:#0000;border:none}.btn-link:hover:not(:disabled){text-decoration:underline;opacity:1}.page{padding:var(--space-lg);min-height:100vh}.page-center{display:flex;padding:var(--space-xl);justify-content:center;align-items: center;min-height:100vh}.card{background-color:var(--color-bg-secondary);border-radius:var(--space-sm);padding:var(--space-xl)}.card-header{display:flex;margin-bottom:var(--space-xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items: center}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-xl)}.splashContent{display:flex;align-items: center;gap:var(--space-3xl);text-align:center;flex-direction:column;max-width:600px}.splashTitle{color:var(--color-text-primary);margin:0;font-size:5rem}.splashSubtitle{color:var(--color-text-secondary);margin:0;font-size:1.5rem}.sidebar{width:var(--sidebar-width);background-color:var(--color-bg-secondary);padding:var(--space-xl);display:flex;gap:var(--space-xl);overflow-y:auto;border-right:2px solid var(--color-border);flex-direction:column;flex-shrink:0}.modal-overlay{position:fixed;display:flex;z-index:1000;background-color:#000000bf;justify-content:center;align-items: center;width:100vw;height:100vh;top:0;left:0}.modal{background-color:var(--color-bg-secondary);border-radius:var(--space-lg);padding:var(--space-3xl);width:90%;max-width:500px}:root{--color-bg-primary:#1a1a1a;--color-bg-secondary:#2a2a2a;--color-bg-tertiary:#333;--color-text-primary:#e0e0e0;--color-text-secondary:#a0a0a0;--color-accent-blue:#3b82f6;--color-accent-green:#10b981;--color-accent-red:#ef4444;--color-accent-yellow:#fbbf24;--color-border:#444;--color-border-light:#666;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:20px;--space-2xl:24px;--space-3xl:32px;--space-4xl:48px;--sidebar-width:280px;--tile-size:32px}.boardContainer{display:flex;padding:var(--space-lg);justify-content:center;align-items: center;width:100%;height:100%}.board{display:grid;border:1px solid var(--color-border-light);background-color:#000;gap:1px}.tile{width:var(--tile-size,32px);height:var(--tile-size,32px);position:relative;display:flex;cursor:pointer;justify-content:center;align-items: center}.tile:hover{filter:brightness(1.1)}.tile.selected{box-shadow:inset 0 0 0 3px var(--color-accent-yellow)}.tile.moveHighlight{box-shadow:inset 0 0 0 2px var(--color-accent-blue);background-color:#3b82f64d}.tile.attackHighlight{box-shadow:inset 0 0 0 2px var(--color-accent-red);background-color:#ef44444d}.tile.fog-of-war{position:relative}.highlightOverlay{position:absolute;pointer-events:none;z-index:1;inset:0}.moveHighlightOverlay{box-shadow:inset 0 0 0 2px var(--color-accent-blue);background-color:#3b82f64d}.attackHighlightOverlay{box-shadow:inset 0 0 0 2px var(--color-accent-red);background-color:#ef44444d}.fog-overlay{position:absolute;display:flex;color:var(--color-border-light);font-size:calc(var(--tile-size,32px)*.625);pointer-events:none;background-color:#2a2a2a03;justify-content:center;align-items: center;font-weight:700;inset:0}.movementArrow{position:absolute;font-size:calc(var(--tile-size,32px)*.625);color:var(--color-accent-green);text-shadow:-1px -1px #000,1px -1px #000,-1px 1px #000,1px 1px #000;pointer-events:none;z-index:5;animation:arrowPulse 1.5s ease-in-out infinite;font-weight:700;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes arrowPulse{0%,to{opacity:.8;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}}.spriteUnitWrapper{position:absolute;pointer-events:auto;width:100%;height:100%;top:0;left:0}.unit{width:calc(var(--tile-size,32px) - 6px);height:calc(var(--tile-size,32px) - 6px);border-radius:var(--space-sm);border:1px solid var(--color-text-primary);display:flex;font-size:calc(var(--tile-size,32px)*.375);color:var(--color-text-primary);flex-direction:column;justify-content:center;align-items: center;font-weight:700}.unit.selected{border:1px solid var(--color-accent-yellow)}.unitIcon{font-size:calc(var(--tile-size,32px)*.4375);margin-bottom:2px}.unitHp{font-size:calc(var(--tile-size,32px)*.3125)}.unit.animating{position:relative;z-index:10;animation:unitAction .4s ease-out}.unit.moving{position:relative;z-index:10}@keyframes unitAction{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.8)}to{transform:scale(1);filter:brightness(1)}}.legend{display:flex;gap:var(--space-4xl);justify-content:center;width:100%}.legendSection{display:flex;gap:var(--space-md);flex-direction:column;min-width:200px}.legendTitle{color:var(--color-text-primary);font-size:1rem}.legendGrid{display:flex;gap:var(--space-sm);flex-direction:column}.legendItem{display:flex;align-items: center;gap:var(--space-md)}.legendSwatch{width:var(--space-2xl);height:var(--space-2xl);border-radius:var(--space-xs);border:1px solid var(--color-border-light)}.legendUnitIcon{width:var(--space-2xl);height:var(--space-2xl);border-radius:var(--space-xs);background-color:var(--color-border-light);display:flex;color:var(--color-text-primary);justify-content:center;align-items: center;font-size:14px;font-weight:700}.legendLabel{color:var(--color-text-secondary);text-transform:capitalize;font-size:14px}.sprite{position:absolute;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;pointer-events:none;background-repeat:no-repeat;width:100%;height:100%;top:0;left:0}.terrainSprite{z-index:0}.unitSpriteContainer{position:absolute;pointer-events:none;z-index:2;width:100%;height:100%;top:0;left:0}.unitSprite{position:absolute;width:100%;height:100%;top:0;left:0}.unitHpBar{position:absolute;width:calc(100% - var(--space-sm));height:var(--space-xs);overflow:hidden;z-index:3;background-color:#000000b3;border-radius:2px;bottom:2px;left:50%;transform:translate(-50%)}.unitHpBarFill{background-color:var(--color-accent-green);height:100%}.unitHpBarFill.low{background-color:var(--color-accent-red)}.unitHpBarFill.medium{background-color:var(--color-accent-yellow)}.unitSpriteContainer.selected{filter:drop-shadow(0 0 var(--space-sm)var(--color-accent-yellow))}.unitSpriteContainer.animating{animation:unitSpriteAction .4s ease-out}@keyframes unitSpriteAction{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.2);filter:brightness(1.5)drop-shadow(0 0 var(--space-md)var(--color-text-primary))}to{transform:scale(1);filter:brightness(1)}}.unitTooltip{position:fixed;border:1px solid var(--color-border-light);border-radius:var(--space-xs);padding:var(--space-xs)var(--space-sm);z-index:1000;pointer-events:none;display:flex;background-color:#2a2a2af2;flex-direction:column;gap:2px;min-width:48px}.tooltipRow{display:flex;align-items: center;gap:var(--space-sm);font-size:14px;font-weight:600;line-height:1.2}.tooltipIcon{font-size:var(--space-lg);display:flex;justify-content:center;align-items: center;width:18px}.tooltipValue{color:var(--color-text-primary);min-width:18px;font-family:monospace}.unitActionMenu{background:var(--color-bg-tertiary);border:1px solid var(--color-border-light);border-radius:var(--space-xs);padding:var(--space-sm);display:flex;gap:var(--space-xs);z-index:100}.unitActionMenu .actionButton{padding:var(--space-sm)var(--space-md);background:var(--color-border-light);color:var(--color-text-primary);cursor:pointer;border:none;border-radius:3px;font-size:14px}.unitActionMenu .actionButton:hover{background:var(--color-border)}.unitActionMenu .actionButton:active{background:var(--color-bg-secondary)}