*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;background:transparent;font-family:var(--font-game);color:var(--color-text-primary);overflow:hidden;image-rendering:pixelated}#app{position:relative;width:100%;height:100%;overflow:hidden}#app canvas{position:absolute;top:0;left:0;z-index:0}.overlay{position:absolute;inset:0;pointer-events:none;z-index:10}.timer-banner{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.timer-banner__sprite{background-repeat:no-repeat;background-position:0 0;position:relative;zoom:2.5}.timer-banner__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-game);font-size:var(--font-size-sm);color:var(--color-text-primary);white-space:nowrap;letter-spacing:.05em;pointer-events:none}.animated-button{display:inline-block;width:var(--animated-button-width);height:var(--animated-button-height);background-image:var(--animated-button-path);background-size:calc(var(--animated-button-width) * 3) var(--animated-button-height);background-position:0px 0px;background-repeat:no-repeat;border:none;cursor:pointer;color:var(--color-text-primary);font-family:var(--font-game);font-size:var(--font-size-sm);text-align:center;line-height:var(--animated-button-height);padding:0;background-color:transparent;outline:var(--bracket-weight) solid var(--color-border);outline-offset:-2px}.animated-button:disabled,.animated-button--disabled{cursor:not-allowed;opacity:.6}.animated-button.animated-button--loaded{outline:none}.ready-widget{position:absolute;bottom:var(--space-lg);right:var(--space-lg);display:flex;align-items:center;gap:var(--space-md);pointer-events:auto}.ready-count{font-size:var(--font-size-sm);color:var(--color-text-primary);white-space:nowrap}.start-flash{position:absolute;inset:0;background:var(--color-accent);opacity:0;pointer-events:none;transition:opacity .1s ease}.start-flash--visible{opacity:.15}.chat-controls{position:absolute;top:var(--space-md);right:var(--space-md);display:flex;gap:8px;z-index:12;pointer-events:auto;transition:top .3s ease}.chat-controls--open{top:calc(var(--space-md) + 320px + var(--space-sm, 4px))}.chat-controls__btn{background:none;border:none;cursor:pointer;padding:0;margin:0;width:32px;height:32px;line-height:0;opacity:.7;transition:opacity .15s ease}.chat-controls__btn:hover,.chat-controls__btn--active{opacity:1}.chat-controls__icon{width:32px;height:32px;image-rendering:pixelated;display:block}.chat-box{position:absolute;top:var(--space-md);right:var(--space-md);width:280px;height:320px;background-image:url(/assets/ui/chatMenu.png);background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;z-index:11;clip-path:inset(0 0 100% 0);transition:clip-path .3s ease}.chat-box--open{clip-path:inset(0 0 0 0);pointer-events:auto}.chat-box__inner{display:flex;flex-direction:column;height:100%;padding:28px 12px 12px;box-sizing:border-box}.chat-box__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px}.chat-box__messages::-webkit-scrollbar{width:4px}.chat-box__messages::-webkit-scrollbar-thumb{background:#c8d4dc4d;border-radius:2px}.chat-msg{font-family:var(--font-game);font-size:var(--font-size-xs);color:var(--color-text-primary);line-height:1.3;word-break:break-word}.chat-msg__name{color:var(--color-accent, #4a9fd4);margin-right:4px}.chat-msg--system{opacity:.6;font-style:italic}.chat-box__input-row{display:flex;gap:4px;margin-top:8px;flex-shrink:0;max-width:100%;box-sizing:border-box}.chat-box__input{flex:1;min-width:0;background:#0000004d;border:1px solid rgba(200,212,220,.2);color:var(--color-text-primary);font-family:var(--font-game);font-size:var(--font-size-xs);padding:4px 8px;outline:none;box-sizing:border-box}.chat-box__input::placeholder{color:#c8d4dc66}.chat-box__input:focus{border-color:#c8d4dc80}.chat-box__send{background:#0000004d;border:1px solid rgba(200,212,220,.2);color:var(--color-text-primary);font-family:var(--font-game);font-size:var(--font-size-xs);padding:4px 10px;cursor:pointer;flex-shrink:0}.chat-box__send:hover{border-color:#c8d4dc80}.chat-msg--self .chat-msg__name{color:var(--color-text-primary);opacity:.7}.chat-msg--self{text-align:left}.chat-msg__name i{color:#c8d4dc80}.chat-box__teams{overflow-y:auto}.teams-list{display:flex;flex-direction:column;gap:12px;width:100%}.team-group{display:flex;flex-direction:column;gap:4px}.team-group__header{font-family:var(--font-game);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.08em;padding-bottom:4px;border-bottom:1px solid rgba(200,212,220,.15)}.team-player{font-family:var(--font-game);font-size:var(--font-size-xs);color:var(--color-text-primary);padding:2px 0;line-height:1.3}.team-player__name{color:var(--color-text-primary)}.team-player__you{color:#c8d4dc80;font-style:italic}.intermission-troop-selector{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;pointer-events:none;opacity:0;transition:opacity var(--transition-fast);z-index:20}.intermission-troop-selector--open{pointer-events:auto;opacity:1}.intermission-troop-selector__panel{position:relative;left:unset;top:unset;transform:unset;background-image:var(--intermission-troop-selector-bg);background-size:100% 100%;background-repeat:no-repeat;padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);width:clamp(250px,25vw,320px);height:auto;max-height:80vh;overflow-y:auto;box-sizing:border-box;align-self:center}.intermission-troop-selector__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xs)}.intermission-troop-selector__card{display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:1px solid rgba(200,212,220,.2);padding:var(--space-xs);cursor:pointer;color:var(--color-text-primary);font-family:var(--font-game);transition:border-color var(--transition-fast),background-color var(--transition-fast);box-sizing:border-box;overflow:hidden}.intermission-troop-selector__icon{width:40px;height:40px;object-fit:contain;display:block;image-rendering:pixelated}.intermission-troop-selector__card:hover{border-color:#c8d4dc8c;background-color:#c8d4dc0d}.intermission-troop-selector__card--selected{border-color:#4a9fd4;border-width:2px}.intermission-troop-selector__name{font-size:var(--font-size-xs);color:var(--color-text-primary);text-align:center;line-height:1.2;word-break:break-word;overflow-wrap:break-word}.intermission-troop-selector__cost{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-align:center}.intermission-troop-selector__credits{font-family:var(--font-game);font-size:var(--font-size-sm);color:var(--color-text-primary);text-align:center;padding:var(--space-xs) 0;border-top:1px solid rgba(200,212,220,.15);margin-top:auto}@media(max-width:500px){.intermission-troop-selector__panel{width:100%}}.troop-hud{position:absolute;bottom:0;left:0;display:grid;grid-template-areas:"portrait  name     actions" "health    health   actions";grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity var(--transition-normal),transform var(--transition-normal);z-index:10}.troop-hud--visible{opacity:1;pointer-events:auto;transform:translateY(0)}.troop-hud__portrait{grid-area:portrait;width:clamp(40px,8vw,80px);aspect-ratio:1;background-color:var(--color-bg-panel, #ffffff);overflow:hidden}.troop-hud__portrait-img{width:100%;height:100%;object-fit:cover;display:block}.troop-hud__name-cell{grid-area:name;display:flex;align-items:flex-end;padding:0 var(--space-sm, .5rem) var(--space-xs, .25rem)}.troop-hud__name{font-family:var(--font-game);font-size:clamp(.6rem,1.5vw,var(--font-size-sm));color:var(--color-text-primary);white-space:nowrap}.troop-hud__actions{grid-area:actions;display:flex;flex-direction:row;align-items:flex-end;gap:clamp(.25rem,1vw,.5rem);padding:var(--space-xs, .25rem) clamp(.25rem,1vw,.5rem)}.troop-hud__action-btn{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;background:none;border:none;padding:clamp(2px,.4vw,4px);cursor:pointer;color:var(--color-text-primary);font-family:var(--font-game);transition:color var(--transition-fast),filter var(--transition-fast);min-width:0}.troop-hud__action-btn:hover:not(:disabled){color:var(--color-text-secondary);filter:brightness(1.3)}.troop-hud__action-btn--active{color:var(--color-text-secondary);filter:brightness(1.3)}.troop-hud__action-btn--disabled{opacity:.35;cursor:not-allowed}.troop-hud__action-label{font-size:clamp(.5rem,1.2vw,var(--font-size-xs));line-height:1;white-space:nowrap}.troop-hud__action-icon{height:clamp(20px,3.5vw,36px);width:auto;max-width:clamp(32px,6vw,64px);display:block;image-rendering:pixelated;object-fit:contain}.troop-hud__health-track{grid-area:health;line-height:0}.troop-hud__health-sprite{display:block;width:100%;height:clamp(28px,2.5vw,48px);image-rendering:pixelated}@font-face{font-family:pixelFont;src:url(/assets/fonts/pixelFont.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}:root{--color-bg: #202E37;--color-bg-panel: #1c2931;--color-border: #7a9898;--color-border-dim:#4a6868;--color-text-primary: #c8d8c0;--color-text-secondary: #7a9898;--color-text-title: #d8e8d0;--color-text-error: #cc4444;--font-game: "pixelFont", "Courier New", monospace;--font-size-xs: clamp(.6rem, 1vw, .75rem);--font-size-sm: clamp(.7rem, 1.2vw, .875rem);--font-size-md: clamp(.85rem, 1.5vw, 1.25rem);--font-size-lg: clamp(1rem, 2vw, 1.75rem);--font-size-xl: clamp(1.2rem, 2.5vw, 1.5rem);--font-size-logo: clamp(1.2rem, 2.5vw, 2rem);--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.5rem;--bracket-weight: 1px;--timer-bar-height: 3px;--timer-banner-path: url(/assets/ui/timerBanner.png);--timer-banner-width: 0px;--intermission-troop-selector-bg: url(/assets/ui/selectionMenu.png);--intermission-troop-selector-width: clamp(260px, 30vw, 400px);--animated-button-path: url(/assets/ui/playButton.png);--animated-button-width: 160px;--animated-button-height: 45px;--health-bar-path: url(/assets/ui/healthBar.png);--health-bar-frame-width: 0px;--health-bar-frame-height: 0px;--transition-fast: 80ms ease;--transition-normal: .14s ease}