/* * App chrome styles. * * Colours come from WebAwesome design tokens — the document opts into the dark * theme with class="wa-dark" on , so this shell and the WebAwesome * components (badges, buttons, tooltip, dialog) share ONE coherent palette with * correct contrast. No per-element colour hacks, no fighting the framework. * * The game-board art (grass, path, enemies, towers, beams) is drawn on the * canvas by the renderer, so those colours live in JS, not here. * * To match the game's sky-blue accent, override the brand ramp here, e.g. * :root { --wa-color-brand-50: #38bdf8; ... } (see docs/reference/webawesome-theming.md) */ body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--wa-color-surface-default); color: var(--wa-color-text-normal); font-family: var(--wa-font-family-body, system-ui, sans-serif); } [x-cloak] { display: none !important; } .game { display: flex; flex-direction: column; gap: 12px; } /* HUD ---------------------------------------------------------------------- */ .hud { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .hud wa-badge { font-size: 0.95rem; } .build-hint { color: var(--wa-color-text-quiet); font-size: 0.85rem; } .speed-controls { display: inline-flex; gap: 4px; margin-left: auto; /* push speed controls to the right of the HUD row */ } /* Game field --------------------------------------------------------------- */ #game-canvas { border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); cursor: default; } #game-canvas[data-armed='true'] { cursor: crosshair; /* a tower is armed; click to place */ } /* Tower shop --------------------------------------------------------------- */ .shop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .shop-label { font-weight: 600; } .shop-hint { color: var(--wa-color-text-quiet); font-size: 0.85rem; } /* Intro modal -------------------------------------------------------------- */ .intro-list { margin: 0.5rem 0 0; padding-left: 1.1rem; line-height: 1.6; } /* End-of-game dialog ------------------------------------------------------- */ /* Content inherits the themed dialog text colour automatically under wa-dark; the stats line is muted for hierarchy. */ .end-stats { margin: 0.25rem 0 0; color: var(--wa-color-text-quiet); } .end-record { margin: 0.5rem 0 0; font-weight: 700; } /* The game-over modal's only action is "Play again" — hide the header close button (it was a dead affordance, since wa-hide is blocked while ended). */ .end-dialog::part(close-button) { display: none; }