/* ============================================================================ Z-INDEX CONTRACT — full-screen / cross-cutting layers only. Small values (1-4) scattered elsewhere in this file are LOCAL stacking within a single component's own position:relative parent (e.g. an icon sitting above its own background) and never compete with the global layers below — they are not part of this contract and don't need to fit into it. When adding a new full-screen/overlay layer, slot it into this order instead of picking an arbitrary number: 20 #hud (top-of-screen status header and combat-control rail) 24 tactical-pause badge 25 build bar 26 weapon bar (inside #hud) 27 hud quickbar wrapper (inside the weapon bar) 28 gadget bar (inside #hud) 30 joystick base 31 joystick hint 34 command-fab menu (radial popout) 35 command-fab (button that opens it) 40 #hitFlash (damage-taken screen flash) 45 #gateFlash / #onboardLayer (attention-getting popups, tutorial hints) 50 .overlay-screen (start/pause/game-over full screens) 60 .modal (settings, armory, loadout, etc.) 65 #bannerLayer (mid-combat banners) 70 #toastLayer (mid-combat toasts) 180 .recruit-reveal (rare-pull celebration overlay) ============================================================================ */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-touch-callout: none; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #05070c; overflow: hidden; position: fixed; overscroll-behavior: none; font-family: 'Rajdhani', sans-serif; color: #cfe8ff; } /* 100vh on mobile Safari means "viewport height with the address bar collapsed" — taller than what's actually visible whenever the address bar is showing (the normal state, not an edge case). Every layout trick below (justify-content:flex-end, .title-block's margin-top:auto) was sizing itself against that inflated height, not the real visible one, so on a real phone it could push content — sometimes the deploy button itself — down past the actual bottom of the screen. 100dvh is the real fix (tracks the actual visible viewport, address bar and all); 100vh stays first only as a fallback for browsers that don't support dvh yet. */ #app { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; touch-action: none; } canvas#arena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: radial-gradient(ellipse at center, #0d1420 0%, #05070c 70%); cursor: crosshair; touch-action: none; } /* Real WebGL layer for true-3D gem geometry (rotatable octahedron mesh), composited exactly over the 2D arena canvas. Transparent, click-through — the 2D canvas underneath still owns all input/gameplay; this only adds pixels on top of it. Falls back to nothing (2D facet rendering keeps running underneath, untouched) if WebGL2 isn't available. */ canvas#gems3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; } /* ---------- overlay screens ---------- */ .overlay-screen { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; background: radial-gradient(ellipse at 50% 30%, rgba(30,60,90,0.35), rgba(2,4,8,0.96) 70%); } /* REAL BUG this fixes: the shared 35%-opacity center tint reads fine over a calm start-screen backdrop, but game-over freezes on whatever the battle looked like at the moment of death — sometimes a busy, brightly-colored swarm (puzzle blocks, particles) — and 35% wasn't dark enough to keep the result text legible against that. Game-over is also never meant to show the frozen action through it (unlike the start screen's live ambient demo, which relies on exactly that transparency), so it gets a real backdrop. */ #gameOverScreen { background: radial-gradient(ellipse at 50% 30%, rgba(10,14,20,0.88), rgba(2,4,8,0.98) 70%); } .hidden { display: none !important; } /* the start screen alone lets the live animated canvas (ambientFrame in game.js) show through behind it, fading to solid dark toward the bottom where text/buttons need full contrast — every other overlay-screen user (game-over) keeps the original opaque radial gradient untouched. */ #startScreen { background: linear-gradient(180deg, rgba(4,8,11,0.04) 0px, rgba(4,8,11,0.08) 320px, rgba(4,8,11,0.94) 650px, rgba(4,8,11,0.98) 100%); /* the animated hero/transformation demo (ambientFrame in game.js) draws near the top of the canvas (heroY = H*0.2) — pin all the text/UI to the bottom instead of centering it, so that graphic is actually visible instead of being sat on top of by the title */ justify-content: flex-end; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } .title-block { display: flex; flex-direction: column; gap: 6px; animation: titleIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes titleIn { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .game-title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(36px, 8vw, 64px); letter-spacing: 6px; color: #7ff0ff; text-shadow: 0 0 18px rgba(70,220,255,0.65), 0 0 40px rgba(70,220,255,0.25); } .game-title.small { font-size: clamp(24px, 6vw, 40px); color: #ff5a6e; text-shadow: 0 0 18px rgba(255,80,100,0.6); } .game-sub { font-family: 'Orbitron', sans-serif; font-size: 13px; letter-spacing: 4px; color: #6ea3c9; text-transform: uppercase; } .lore-block { max-width: 520px; font-size: 16px; line-height: 1.5; color: #9fc2e0; animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; } #startScreen .lore-block { background: rgba(8,14,22,0.4); border: 1px solid rgba(120,200,255,0.14); border-radius: 12px; padding: 14px 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .founders-offer { margin-top: 14px; padding: 12px 16px; border-radius: 8px; max-width: 320px; border: 1px solid rgba(255,209,102,0.4); background: rgba(255,209,102,0.06); display: flex; flex-direction: column; align-items: center; gap: 6px; } .founders-offer-title { color: #ffd166; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1px; } .founders-offer-desc { color: #bfe4ff; font-size: 12px; text-align: center; } .big-btn { font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 2px; padding: 16px 40px; font-size: 16px; color: #04141c; background: linear-gradient(180deg, #7ff0ff, #37b8e0); border: none; border-radius: 6px; cursor: pointer; box-shadow: 0 0 24px rgba(70,220,255,0.45), inset 0 -3px 0 rgba(0,0,0,0.2); } .big-btn:active { transform: translateY(1px); } .small-btn { padding: 10px 26px; font-size: 13px; } #startBtn { animation: ctaPulse 2.6s ease-in-out infinite, fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; } /* Resume picks up a save checkpoint left behind by a quit/crash/closed tab — distinct amber color (not the cyan Deploy uses) so it reads as "continue what you had," and sits above Deploy since it's the action most players in this situation actually want. */ #resumeBtn, #pauseResumeBtn { background: linear-gradient(180deg, #ffd166, #e0972f); box-shadow: 0 0 24px rgba(255,190,70,0.45), inset 0 -3px 0 rgba(0,0,0,0.2); margin-bottom: 8px; } #resumeLabel { font-weight: 900; } /* Older resumable runs are managed from the start-screen command FAB. */ .run-history-card { width:min(520px,92vw); gap:10px; } .run-history-hint { margin:0; color:#9db5c8; text-align:center; font-size:12px; line-height:1.35; } .run-history-list { display:flex; flex-direction:column; gap:8px; max-height:48vh; overflow-y:auto; overscroll-behavior:contain; } .run-history-empty { padding:18px 8px; color:#7893a7; text-align:center; font:700 11px 'Orbitron',sans-serif; letter-spacing:1px; } .run-history-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid rgba(255,209,102,.2); border-radius:9px; background:rgba(255,209,102,.045); } .run-history-item.latest { border-color:rgba(255,209,102,.5); background:rgba(255,209,102,.09); } .run-history-info { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; } .run-history-info b { color:#ffe3a0; font:800 11px 'Orbitron',sans-serif; letter-spacing:.7px; } .run-history-info small { color:#9db5c8; font:600 11px 'Rajdhani',sans-serif; } .run-history-actions { display:flex; flex:0 0 auto; gap:5px; } .run-history-actions button { min-height:34px; padding:6px 8px; border-radius:6px; font:800 9px 'Orbitron',sans-serif; letter-spacing:.5px; cursor:pointer; } .run-history-resume { color:#281800; border:1px solid #ffc65a; background:linear-gradient(180deg,#ffd166,#e0972f); } .run-history-delete { color:#ff9dab; border:1px solid rgba(255,111,145,.4); background:rgba(255,70,100,.08); } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 0 24px rgba(70,220,255,0.45), inset 0 -3px 0 rgba(0,0,0,0.2); } 50% { box-shadow: 0 0 42px rgba(70,220,255,0.8), inset 0 -3px 0 rgba(0,0,0,0.2); } } .start-row { display: flex; gap: 10px; animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both; } .diag-link { position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); right: 12px; background: none; border: none; color: rgba(120,160,190,0.35); font-size: 10px; letter-spacing: 1px; cursor: pointer; font-family: 'Rajdhani', sans-serif; } .essence-row { display: flex; align-items: center; gap: 6px; font-family: 'Orbitron', sans-serif; font-size: 14px; letter-spacing: 1px; color: #ffd166; background: rgba(255,209,102,0.08); border: 1px solid rgba(255,209,102,0.25); border-radius: 20px; padding: 6px 16px; animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; } .essence-icon { background: linear-gradient(135deg, #fff2b3, #ffd166); box-shadow: 0 0 8px rgba(255,209,102,0.6); } .mode-select-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 380px; } .mode-btn { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 1px; font-weight: 700; padding: 8px 12px; border-radius: 6px; cursor: pointer; color: #7d9cba; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); } .mode-btn.active-mode { color: #04141c; background: linear-gradient(180deg, #7ff0ff, #37b8e0); border-color: transparent; box-shadow: 0 0 14px rgba(70,220,255,0.4); } .mode-desc { font-size: 12px; color: #6b8bab; max-width: 380px; text-align: center; min-height: 16px; } .streak-badge { margin-left: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: rgba(255,138,58,0.15); border: 1px solid rgba(255,138,58,0.4); color: #ff8a3a; } .daily-bonus-card { align-items: center; text-align: center; } .daily-streak-line { font-size: 13px; color: #9fc2e0; letter-spacing: 1px; } .daily-bonus-amount { font-family: 'Orbitron', sans-serif; font-size: 32px; font-weight: 800; color: #ffd166; text-shadow: 0 0 18px rgba(255,209,102,0.6); } /* opt-in for the streak reminder notification (mobile app only, game.js) */ .streak-reminder-offer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(255,138,58,0.35); border-radius: 10px; background: rgba(255,138,58,0.08); } .streak-reminder-offer p { margin: 0; font-size: 13px; color: #ffd6b0; } .streak-reminder-offer .big-btn { background: linear-gradient(180deg, #ffb46b, #ff8a3a); color: #1a0d00; } /* ---------- HUD ---------- */ #hud { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: max(4px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left)); pointer-events: none; background: linear-gradient(180deg, rgba(3,6,12,0.85), rgba(3,6,12,0)); min-height: 52px; overflow: visible; } /* HUD clusters float over a canvas that repaints every frame. Without their own compositor layers the overlapping region (glowing text, gradients) was re-rastered each frame — measured at ~7ms/frame on integrated graphics. Promoted layers raster once and only repaint on a real HUD change. */ #hud, #weaponBar, #gadgetBar, #toastLayer, #onboardLayer, #sosPrompt { will-change: transform; } .hud-left { display: flex; flex-direction: column; gap: 3px; width: 150px; } .stat { display: flex; align-items: center; gap: 6px; } .stat-label { font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #b3d2ea; width: 46px; } .stat-value { flex: 0 0 46px; text-align: right; color: #d7e8f3; font: 700 10px 'Rajdhani', sans-serif; letter-spacing: .1px; white-space: nowrap; } .player-level-hud { color: #7ff0ff; font: 800 10px 'Orbitron', sans-serif; letter-spacing: .5px; text-shadow: 0 0 6px rgba(127,240,255,.45); } .weapon-label { font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 1px; color: #7ff0ff; text-shadow: 0 0 6px rgba(127,240,255,0.5); flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; line-height: 1.15; } .stat-weapon { align-items: flex-start; } .stat-weapon .stat-label { flex: 0 0 46px; padding-top: 1px; } .stat-soldier { align-items: flex-start; } .stat-soldier .stat-label { flex: 0 0 52px; width: 52px; padding-top: 1px; } .player-level-hud { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; } .player-name { min-width: 0; overflow-wrap: anywhere; word-break: normal; line-height: 1.1; } .player-level-badge { display: inline-block; padding: 1px 4px; border: 1px solid rgba(127,240,255,.28); border-radius: 3px; background: rgba(127,240,255,.08); color: #b3d2ea; font: 700 8px 'Rajdhani', sans-serif; letter-spacing: .5px; line-height: 1.15; text-shadow: none; white-space: nowrap; } .bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.1); overflow: hidden; border: 1px solid rgba(255,255,255,0.16); } /* scaleX, not width: a width transition forces layout every animation frame */ .bar-fill { height: 100%; width: 100%; transform-origin: left center; transition: transform 0.25s ease; } .hp-bar .bar-fill { background: linear-gradient(90deg, #ff5a6e, #ff9a5a); } .shield-bar .bar-fill { background: linear-gradient(90deg, #4ad0ff, #7ff0ff); } .hud-mid { text-align: center; margin-top: -2px; transform: none; position: relative; } .hud-mid { position: relative; z-index: 2; } .mode-label { font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:1px; color:#7ff0ff; text-shadow:0 0 8px rgba(127,240,255,.5); } .wave-label { font-family: 'Orbitron', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: 2px; color: #ffd166; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.85), 0 0 10px rgba(255,209,102,0.5); } /* The HUD floats over the canvas, so enemy tags and float text drawn near the top edge used to run straight through WAVE n; a soft dark plate behind the mode/wave/timer block keeps the counter readable over any battlefield. */ #modeLabel, #waveLabel, #waveTimer { position: relative; } #waveLabel::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(100% + 56px); height: 190%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(2,6,12,.72), rgba(2,6,12,.45) 60%, rgba(2,6,12,0)); z-index: -1; pointer-events: none; } #waveTimer { text-shadow: 0 1px 2px #000; } .wave-timer { font-size: 12px; font-weight: 600; color: #a9c4dc; margin-top: 2px; } /* THE LAST ASSEMBLY: the stage name may wrap onto two lines and the objective onto three inside the wave column (fitHudText in game.js shrinks each until it fits). The label keeps overflow visible so its backing plate still shows. */ #hud #waveLabel.hud-objective { white-space: normal; line-height: 1.05; letter-spacing: .5px; max-height: 2.12em; } #hud #waveTimer.hud-objective { white-space: normal; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } #modeLabel, #waveLabel, #waveTimer { max-width: 100%; } #waveLabel, #modeLabel { white-space: nowrap; } /* ---------- SOS backup prompt ---------- */ /* only shown when updateSOS (game.js) decides the fight is genuinely going badly — never a decorative always-on button */ .sos-prompt { position: absolute; left: 18px; top: auto; bottom: 86px; transform: none; z-index: 27; pointer-events: none; } .sos-btn { pointer-events: auto; font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 1px; padding: 10px 20px; border-radius: 22px; color: #fff3e0; background: linear-gradient(160deg,#5a1a10,#2a0a06); border: 1px solid rgba(255,120,70,0.6); box-shadow: 0 0 18px rgba(255,90,40,0.5); animation: sosPulse 1s ease-in-out infinite; } /* On a phone the prompt sat on the move stick, where the steering thumb can't tap it. It goes to the open top centre, under the wave counter. */ @media (pointer: coarse) { .sos-prompt { left: 50%; transform: translateX(-50%); top: 96px; bottom: auto; } .sos-btn { font-size: 11px; padding: 9px 16px; white-space: nowrap; } } @media (pointer: coarse) and (max-width: 500px) and (orientation: portrait) { .sos-prompt { top: 150px; } } @keyframes sosPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 18px rgba(255,90,40,0.5); } 50% { transform: scale(1.05); box-shadow: 0 0 28px rgba(255,120,50,0.75); } } .hud-right { display: flex; gap: 4px; align-items: center; justify-content: flex-end; } .hud-right { position: relative; z-index: 3; } .currency { display: flex; align-items: center; gap: 5px; font-family: 'Orbitron', sans-serif; font-size: 14px; } .hud-subtext { font-size: 8px; opacity: 0.65; letter-spacing: 0.3px; } .cur-icon { width: 14px; height: 14px; border-radius: 3px; display: inline-block; } .salvage-icon { background: linear-gradient(135deg, #9dffb0, #2fbf6a); box-shadow: 0 0 8px rgba(80,255,140,0.6); } .core-icon { background: linear-gradient(135deg, #d8b3ff, #8a3ffc); box-shadow: 0 0 8px rgba(160,90,255,0.6); } .mute-btn { pointer-events: auto; font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 1px; padding: 7px 10px; min-height: 34px; border-radius: 6px; background: rgba(6,10,18,0.78); color: #cfe9ff; border: 1px solid rgba(120,200,255,0.3); cursor: pointer; } .mute-btn.muted { color: #ff8a8a; border-color: rgba(255,90,110,0.4); } .pause-btn { font-size: 13px; padding: 7px 12px; min-width: 42px; } .tactical-pause-badge { position: absolute; top: max(66px, calc(env(safe-area-inset-top) + 56px)); left: 50%; z-index: 24; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; font: 800 9px/1 'Orbitron', sans-serif; letter-spacing: 2px; color: #ffd166; background: rgba(8,12,20,.82); border: 1px solid rgba(255,209,102,.38); box-shadow: 0 0 18px rgba(255,190,70,.15); pointer-events: none; } /* ---------- pause ---------- */ .pause-card { align-items: center; gap: 14px; width: min(320px, 85vw); } .ghost-btn { background: rgba(255,255,255,0.05); color: #bfe4ff; box-shadow: none; border: 1px solid rgba(120,200,255,0.3); } /* ---------- build bar ---------- */ /* both screen corners are now spoken for — movement stick bottom-left, aim stick bottom-right (see .aim-joystick-base) — so build/power actions collapse into a single bottom-CENTER toggle instead of a permanent row competing for either corner, or worse, sitting inside a joystick's own catch zone. Collapsed by default: real screen space back for aiming, one tap away when actually needed. The .open/collapsed states are separate from the .hidden class game.js already toggles on game start/end — hidden controls whether this exists at all outside a live run, open controls whether it's currently expanded during one. */ #buildBar { position: absolute; left: 50%; bottom: max(132px, calc(env(safe-area-inset-bottom) + 122px)); z-index: 25; transform: translateX(-50%) translateY(10px) scale(.95); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: min(560px, calc(100vw - 140px)); background: rgba(3,10,16,.9); border: 1px solid rgba(127,240,255,.22); border-radius: 14px; padding: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: .18s ease; } #buildBar.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); } .build-slot { width: 62px; height: 58px; border-radius: 8px; background: rgba(6,10,18,0.82); border: 1px solid rgba(120,200,255,0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; position: relative; font-family: 'Rajdhani', sans-serif; } .build-key { font-family: 'Orbitron', sans-serif; font-size: 12px; color: #7ff0ff; } .build-name { font-size: 9px; letter-spacing: 1px; color: #bfe4ff; } .build-cost { font-size: 9px; color: #7dd88f; } .build-cd { font-size: 9px; color: #ffb37d; } .build-slot.active-mode { border-color: #7ff0ff; box-shadow: 0 0 14px rgba(70,220,255,0.5); } .build-slot.on-cooldown { opacity: 0.4; } /* Field equipment shares the combat rail with Blaster and Spread. */ .hud-quickbar { position: static; display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; } .quick-slot { min-width: 0; width: auto; height: 34px; padding: 0 2px; border-radius: 7px; background: rgba(6,10,18,0.84); border: 1px solid rgba(120,200,255,0.28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font-family: 'Orbitron', sans-serif; line-height: 1; pointer-events: auto; } .quick-slot .qs-name { font-size: 7px; font-weight: 700; letter-spacing: 0; color: #d3ecff; } .quick-slot .qs-cost { font-size: 9px; color: #8ee89f; } .quick-slot .qs-cd { font-size: 9px; color: #ffbf8f; } .quick-slot.active-mode { border-color: #7ff0ff; box-shadow: 0 0 10px rgba(70,220,255,0.5); } .quick-slot.on-cooldown { opacity: 0.4; } @media (pointer: coarse) and (max-width: 900px) { .wave-label { font-size:13px; letter-spacing:.7px; white-space:nowrap; line-height:1.05; } .mode-label { font-size:8px; letter-spacing:.5px; line-height:1; } .wave-timer { font-size:9px; margin-top:1px; white-space:nowrap; } #waveLabel::before { width:calc(100% + 20px); height:165%; } } /* ---------- modal ---------- */ .modal { position: absolute; inset: 0; z-index: 60; background: rgba(2,4,8,0.86); display: flex; align-items: center; justify-content: center; } .modal-card { width: min(560px, 92vw); max-height: 82vh; overflow-y: auto; background: #0a1120; border: 1px solid rgba(120,200,255,0.3); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 0 60px rgba(70,220,255,0.15); } .modal-title { font-family: 'Orbitron', sans-serif; font-size: 20px; letter-spacing: 3px; color: #7ff0ff; text-align: center; } .modal-close-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: rgba(255,255,255,0.06); border: 1px solid rgba(120,200,255,0.25); border-radius: 50%; color: #bfe4ff; font-size: 14px; line-height: 1; cursor: pointer; } .modal-fine-print { color: #6b8bab; font-size: 11px; text-align: center; line-height: 1.4; } .modal-store-msg { color: #ff8a8a; font-size: 12px; text-align: center; padding: 8px 10px; background: rgba(255,90,90,0.08); border: 1px solid rgba(255,90,90,0.3); border-radius: 6px; } .modal-link-btn { background: none; border: none; color: #6b8bab; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px; font-family: 'Rajdhani', sans-serif; } .big-btn:disabled { opacity: 0.55; cursor: default; } .armory-list { display: flex; flex-direction: column; gap: 8px; } .armory-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } .leaderboard-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; } .leaderboard-status { text-align: center; color: #6b8bab; font-size: 13px; padding: 20px 0; letter-spacing: 1px; } .leaderboard-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); font-size: 13px; } .leaderboard-row.me { background: rgba(127,240,255,0.1); border-color: rgba(127,240,255,0.4); } .leaderboard-rank { font-family: 'Orbitron', sans-serif; color: #7d9cba; width: 34px; } .leaderboard-name { flex: 1; color: #bfe4ff; letter-spacing: 0.5px; } .leaderboard-wave { font-family: 'Orbitron', sans-serif; color: #ffd166; } .trophy-species-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0; } .trophy-chip { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; padding: 10px 4px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } .trophy-chip.locked { opacity: 0.35; filter: grayscale(1); } .trophy-chip-dot { width: 20px; height: 20px; border-radius: 5px; } .trophy-chip-label { font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 0.5px; color: #9fc3dd; text-align: center; } .settings-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); } .settings-row-toggle { flex-direction: row; align-items: center; justify-content: space-between; } .settings-label { font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 1px; color: #cfe8ff; } .settings-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: rgba(127,240,255,0.15); outline: none; } .settings-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg,#7ff0ff,#37b8e0); cursor: pointer; box-shadow: 0 0 10px rgba(70,220,255,0.6); } .settings-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; border: none; background: linear-gradient(180deg,#7ff0ff,#37b8e0); cursor: pointer; box-shadow: 0 0 10px rgba(70,220,255,0.6); } .armory-item-info { display: flex; flex-direction: column; gap: 2px; } .armory-item-name { font-family: 'Orbitron', sans-serif; font-size: 13px; color: #cfe8ff; } .armory-item-desc { font-size: 12px; color: #7d9cba; } .armory-buy { font-family: 'Orbitron', sans-serif; font-size: 12px; padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; color: #04141c; background: linear-gradient(180deg,#9dffb0,#2fbf6a); white-space: nowrap; } .armory-buy.core-cost { background: linear-gradient(180deg,#d8b3ff,#8a3ffc); color: #150022; } .armory-buy:disabled { opacity: 0.35; cursor: not-allowed; } .armory-item.maxed .armory-buy { opacity: 0.35; } .gem-upgrade { border-color:rgba(112,232,255,.28); background:linear-gradient(105deg,rgba(65,210,255,.09),rgba(162,80,255,.06)); box-shadow:inset 3px 0 0 #70e8ff; } .gem-upgrade-icon { display:inline-block; color:#bff8ff; text-shadow:0 0 8px #47dfff,0 0 14px #a755ff; animation:gemUpgradePulse 1.8s ease-in-out infinite; } @keyframes gemUpgradePulse { 50% { transform:scale(1.18) rotate(45deg); filter:brightness(1.5); } } .tutorial-step { font-size: 14px; line-height: 1.7; color: #bfe4ff; min-height: 140px; } .tutorial-step b { color: #7ff0ff; } .tutorial-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tutorial-dots { display: flex; gap: 6px; } .tutorial-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(120,200,255,0.25); } .tutorial-dots span.active { background: #7ff0ff; box-shadow: 0 0 6px rgba(127,240,255,0.7); } .tutorial-card { width:min(900px,96vw); max-height:min(92dvh,900px); display:flex; flex-direction:column; gap:10px; padding:clamp(14px,2.2vw,24px); } .tutorial-modal { z-index:90; } .tutorial-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .tutorial-dont-show { display:flex; align-items:center; gap:8px; width:fit-content; color:#a9c5d5; font:700 11px 'Orbitron',sans-serif; cursor:pointer; } .tutorial-dont-show input { width:15px; height:15px; margin:0; accent-color:#c99bff; cursor:pointer; } .tutorial-kicker { color:#c99bff; font:800 9px 'Orbitron',sans-serif; letter-spacing:1.5px; } .tutorial-heading .modal-title { margin:3px 0 0; text-align:left; } .tutorial-skip { border:1px solid rgba(201,155,255,.28); border-radius:7px; padding:7px 11px; background:rgba(12,18,27,.85); color:#b9a8d6; font:800 9px 'Orbitron',sans-serif; cursor:pointer; } .tutorial-progress { height:3px; overflow:hidden; border-radius:4px; background:rgba(127,240,255,.12); } .tutorial-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#7ff0ff,#c99bff); transition:width .25s ease; } .tutorial-step { min-height:0; max-height:62dvh; overflow:auto; padding:2px 2px 6px; font-size:clamp(13px,1.5vw,15px); line-height:1.55; } .tutorial-step h3 { margin:2px 0 8px; color:#fff; font:900 clamp(16px,2vw,21px) 'Orbitron',sans-serif; letter-spacing:.4px; } .tutorial-step p { margin:7px 0; } .tutorial-step ul { margin:7px 0 10px; padding-left:19px; } .tutorial-step li { margin:4px 0; } .tutorial-step b { color:#7ff0ff; } .tutorial-step em { color:#ffd166; font-style:normal; font-weight:800; } .tutorial-video { width:100%; max-height:34dvh; aspect-ratio:16/9; object-fit:contain; } .tutorial-columns,.tutorial-options-grid,.tutorial-hazard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0; } .tutorial-info-card { min-width:0; padding:9px 11px; border:1px solid rgba(127,240,255,.18); border-radius:9px; background:linear-gradient(135deg,rgba(15,32,46,.88),rgba(8,13,23,.88)); } .tutorial-info-card b { display:block; margin-bottom:3px; font:800 10px 'Orbitron',sans-serif; letter-spacing:.35px; } .tutorial-info-card small { display:block; color:#9db3c9; font-size:12px; line-height:1.35; } .tutorial-info-card em { display:block; margin-top:5px; font-size:10px; } .tutorial-callout { margin:10px 0 2px; padding:9px 11px; border-left:3px solid #ffd166; border-radius:0 8px 8px 0; background:rgba(255,209,102,.08); color:#e8edf3; font-size:12px; } .tutorial-level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:10px 0; } .tutorial-level-card { min-width:0; overflow:hidden; border:1px solid rgba(201,155,255,.25); border-radius:10px; background:linear-gradient(180deg,rgba(23,17,38,.88),rgba(8,12,20,.94)); text-align:center; } .tutorial-level-card strong,.tutorial-level-card small,.tutorial-level-card em { display:block; padding:0 5px; } .tutorial-level-card strong { margin-top:4px; color:#fff; font:800 9px 'Orbitron',sans-serif; } .tutorial-level-card small { min-height:25px; padding-top:3px; color:#b6c9d6; font-size:10px; } .tutorial-level-card em { padding:4px 2px 7px; color:#ffd166; font:800 8px 'Orbitron',sans-serif; font-style:normal; letter-spacing:.3px; } .tutorial-level-card canvas { display:block; width:100%; height:98px; background:radial-gradient(ellipse at 50% 82%,rgba(127,240,255,.1),transparent 63%); } .tutorial-splash-label { margin:14px 0 4px; color:#ffd166; font:800 9px 'Orbitron',sans-serif; letter-spacing:1px; } .tutorial-mini-splash { padding:5px 3px 2px; background:radial-gradient(ellipse at 50% 100%,rgba(201,155,255,.12),transparent 72%); } .tutorial-mini-splash b { display:block; color:#fff; font:900 8px 'Orbitron',sans-serif; letter-spacing:1.1px; } .tutorial-mini-splash small { display:block; color:#7d9cba; font:700 6px 'Orbitron',sans-serif; letter-spacing:.25px; } .tutorial-level-card .tutorial-splash-pick { min-height:22px; padding:4px 2px; border-top:1px solid rgba(127,240,255,.13); color:#7ff0ff; font:800 7px 'Orbitron',sans-serif; } .tutorial-action { display:flex; justify-content:center; } .tutorial-action button { width:min(100%,500px); } .tutorial-voice { padding-inline:9px; color:#d5c5f3; } .tutorial-voice[aria-pressed="false"] { color:#8597a5; } .tutorial-narration-status { min-height:12px; color:#8496a4; font:600 10px 'Rajdhani',sans-serif; text-align:center; } .evolution-operator-picker { display:flex; align-items:center; gap:10px; margin:5px 0 10px; color:#96afbf; font:800 9px 'Orbitron',sans-serif; letter-spacing:.7px; } .evolution-operator-picker select { flex:1; min-width:0; border:1px solid rgba(127,240,255,.3); border-radius:7px; padding:8px 10px; background:#0a121c; color:#eafcff; font:700 12px 'Orbitron',sans-serif; } .evolution-operator-picker select:focus-visible { outline:2px solid #7ff0ff; outline-offset:2px; } .guided-panel-hint { margin:4px 0 10px; padding:9px 11px; border-left:3px solid #ffd166; border-radius:0 8px 8px 0; background:rgba(255,209,102,.08); color:#dceaf0; font:700 12px/1.4 'Rajdhani',sans-serif; } .guided-demo-target { position:relative; z-index:1; outline:2px solid #ffd166 !important; outline-offset:3px; box-shadow:0 0 0 5px rgba(255,209,102,.14),0 0 22px rgba(255,209,102,.32) !important; animation:guidedTargetPulse 1.3s ease-in-out infinite; } @keyframes guidedTargetPulse { 50% { outline-color:#fff2b8; box-shadow:0 0 0 8px rgba(255,209,102,.08),0 0 28px rgba(255,209,102,.5); } } @media (max-width:620px) { .tutorial-card { width:calc(100vw - 16px); max-height:94dvh; gap:8px; padding:12px; } .tutorial-step { max-height:63dvh; font-size:13px; } .tutorial-columns,.tutorial-options-grid,.tutorial-hazard-grid { gap:6px; } .tutorial-info-card { padding:7px 8px; } .tutorial-info-card small { font-size:11px; } .tutorial-level-grid { gap:5px; } .tutorial-level-card canvas { height:78px; } .tutorial-level-card small { min-height:31px; font-size:9px; } .tutorial-nav { gap:5px; flex-wrap:wrap; justify-content:center; } .tutorial-nav .small-btn { padding:8px 7px; font-size:8px; } .tutorial-voice { letter-spacing:-.25px; } } @media (prefers-reduced-motion:reduce) { .tutorial-progress i { transition:none; } .guided-demo-target { animation:none; } } .diag-list { display: flex; flex-direction: column; gap: 8px; font-size: 11px; color: #9fc2e0; max-height: 50vh; overflow-y: auto; } .diag-entry { padding: 8px 10px; border-radius: 6px; background: rgba(255,90,110,0.06); border: 1px solid rgba(255,90,110,0.2); } .diag-empty { text-align: center; color: #5c7a99; padding: 20px 0; } /* ---------- weapon switcher (tap, no hold needed — works one-handed) ---------- */ /* a tight 2x2 grid pinned to the top-right corner. A single row of 4 was measured at ~200px wide on a 375px phone screen — past horizontal center, directly blocking straight-up aiming. A 2x2 grid stays under ~95px, fully clear of center. */ #weaponBar { position: absolute; right: 8px; top: 68px; z-index: 26; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 92px; } #specialWeaponSlot { grid-column: 1 / -1; } #weaponBar.weapon-melee { width: 136px; grid-template-columns: repeat(2, 64px); } #weaponBar.weapon-melee .weapon-slot { width: 64px; } #weaponBar.weapon-melee #specialWeaponSlot { width: 100%; } .weapon-slot { width: 44px; height: 40px; border-radius: 7px; background: rgba(6,10,18,0.84); border: 1px solid rgba(120,200,255,0.28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; font-family: 'Rajdhani', sans-serif; padding: 0 2px; } .weapon-key { font-family: 'Orbitron', sans-serif; font-size: 11px; color: #7ff0ff; } .weapon-name { font-size: 8.5px; font-weight: 700; line-height: 1.05; letter-spacing: 0.3px; color: #bfe4ff; max-width: 100%; max-height: 2.1em; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: normal; overflow-wrap: normal; text-align: center; } .weapon-slot.active-weapon { border-color: #7ff0ff; box-shadow: 0 0 12px rgba(70,220,255,0.5); background: rgba(70,220,255,0.12); } .weapon-slot.locked-weapon { opacity: 0.35; } .weapon-slot.shake-slot { animation: shakeSlot 0.35s ease; } .player-btn.robot-locked { filter:saturate(.35); opacity:.72; position:relative; } .robot-lock-badge { position:absolute; left:4px; right:4px; bottom:3px; padding:3px 2px; border-radius:6px; background:rgba(3,7,13,.9); color:#ffd166; font:800 8px 'Orbitron',sans-serif; letter-spacing:.2px; line-height:1.15; white-space:normal; text-align:center; overflow-wrap:break-word; } .loadout-card { max-width:620px; } .loadout-section-title { margin:14px 0 7px; color:#7ff0ff; font:900 10px 'Orbitron',sans-serif; letter-spacing:1.2px; } .choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .loadout-choice { min-height:62px; padding:8px; border-radius:9px; border:1px solid rgba(127,240,255,.2); background:rgba(5,12,20,.78); color:#b9d7e8; font:700 9px 'Orbitron',sans-serif; } .loadout-choice b,.loadout-choice small { display:block; } .loadout-choice small { margin-top:5px; color:#86a4b5; font:600 10px 'Rajdhani',sans-serif; } .loadout-choice.selected { border-color:#ffd166; color:#fff; background:rgba(255,209,102,.11); box-shadow:0 0 14px rgba(255,209,102,.16); } .recruit-list { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; max-height:245px; overflow:auto; flex-shrink:0; } /* a scroll box in the flex-column card otherwise shrinks to zero height and hides every row */ .recruit-row { display:grid; grid-template-columns:46px 1fr auto; gap:8px; align-items:center; padding:7px; border:1px solid rgba(127,240,255,.15); border-radius:8px; background:rgba(5,12,20,.72); } .recruit-row img { width:42px; height:42px; object-fit:contain; } .recruit-row b,.recruit-row small { display:block; } .recruit-row small { color:#8ea9b9; } .recruit-progress { height:4px; margin-top:4px; border-radius:4px; background:#172733; overflow:hidden; } .recruit-progress i { display:block; height:100%; background:linear-gradient(90deg,#2bdcff,#ffd166); } .evolution-card{position:relative;width:min(760px,94vw);max-height:92vh;overflow:auto;background:radial-gradient(circle at 20% 10%,rgba(70,220,255,.13),transparent 35%),linear-gradient(155deg,#101d28,#05090e)} .allied-title{color:#9dffb0!important;margin-top:15px}.allied-force-note{font:600 11px 'Rajdhani';line-height:1.25;color:#89a9bf;padding:7px 9px;border-left:2px solid #9dffb0;background:rgba(157,255,176,.05)}.allied-force-roster{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}.allied-force-roster .allied-chip{position:relative;min-height:70px;border:1px solid rgba(157,255,176,.2);border-radius:8px;background:rgba(5,15,14,.72);overflow:hidden;text-align:center}.allied-force-roster img{width:100%;height:50px;object-fit:contain;opacity:.86}.allied-force-roster b{display:block;color:#bdebc7;font:800 7px 'Orbitron';letter-spacing:.4px}.allied-force-roster small{display:block;color:#6d9c7d;font:700 8px 'Rajdhani'}@media(max-width:600px){.allied-force-roster{grid-template-columns:repeat(4,1fr)}} .evolution-close{position:absolute;right:12px;top:12px;z-index:2}.evolution-inspector{display:grid;grid-template-columns:minmax(150px,38%) 1fr;gap:16px;align-items:center;margin:10px 0 16px}.evolution-preview-wrap{position:relative;min-height:250px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(127,240,255,.22);border-radius:18px;background:radial-gradient(circle,rgba(68,211,255,.17),transparent 64%);overflow:hidden}.evolution-preview-wrap img{width:100%;height:290px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(90,225,255,.35))}.evolution-preview-wrap span{position:absolute;left:9px;bottom:9px;padding:5px 8px;border-radius:999px;background:#07121b;color:#ffd166;font:800 9px 'Orbitron';letter-spacing:1px}.evolution-summary h3{margin:0;color:#fff;font:900 22px 'Orbitron';letter-spacing:1px}.evolution-summary>b{display:block;color:#7ff0ff;font:800 13px 'Orbitron';margin:8px 0}.evolution-summary p{color:#9fbbce;font:600 12px 'Rajdhani';line-height:1.35}.evolution-history{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;color:#d6ecf8;font:700 10px 'Rajdhani'}.evolution-history span{padding:6px;background:rgba(255,255,255,.045);border-radius:7px}.evolution-branches,.evolution-stages,.evolution-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 16px}.evolution-node{min-height:74px;padding:9px;border:1px solid rgba(127,240,255,.16);border-radius:10px;background:rgba(5,12,18,.8);color:#8da9bc;text-align:left}.evolution-node b{display:block;color:#eaffff;font:800 10px 'Orbitron';margin-bottom:5px}.evolution-node small{display:block;font:600 10px 'Rajdhani';line-height:1.18}.evolution-node.selected{border-color:#7ff0ff;box-shadow:0 0 16px rgba(70,220,255,.22);background:rgba(27,74,91,.38)}.evolution-node.unlocked b{color:#9dffb0}.evolution-node:disabled{opacity:.45}.evolution-cost{margin-top:6px;color:#ffd166!important;font-weight:800!important}@media(max-width:600px){.evolution-inspector{grid-template-columns:1fr}.evolution-preview-wrap{min-height:210px}.evolution-preview-wrap img{height:230px}.evolution-branches,.evolution-stages,.evolution-parts{grid-template-columns:1fr 1fr}} .recruit-reveal { position:fixed; inset:0; z-index:180; display:grid; place-items:center; pointer-events:none; background:radial-gradient(circle,rgba(43,220,255,.22),rgba(0,0,0,.82)); animation:recruitReveal 2.4s both; } .recruit-reveal-card { position:relative; width:250px; padding:25px; text-align:center; border:2px solid #ffd166; border-radius:18px; background:#07131d; box-shadow:0 0 70px rgba(255,209,102,.45); overflow:hidden; } .recruit-reveal img { width:150px; height:150px; object-fit:contain; position:relative; } .recruit-reveal small,.recruit-reveal b { display:block; position:relative; font-family:'Orbitron',sans-serif; } .recruit-reveal small { color:#7ff0ff; font-size:9px; letter-spacing:1px; }.recruit-reveal b{color:#ffd166;font-size:22px;margin-top:7px;} .recruit-rays { position:absolute; inset:-80%; background:repeating-conic-gradient(from 0deg,rgba(255,209,102,.15) 0 8deg,transparent 8deg 18deg); animation:spinRays 5s linear infinite; } @keyframes spinRays{to{transform:rotate(360deg)}} @keyframes recruitReveal{0%{opacity:0;transform:scale(.7)}12%,82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}} @media(max-width:520px){.choice-grid{grid-template-columns:1fr}} /* one soldier per row so the Essence price button is never clipped */ .recruit-list { grid-template-columns:1fr; } /* a price the player cannot pay yet, or a full-game-only purchase */ .armory-buy.insufficient { filter:grayscale(.85); opacity:.62; } @keyframes shakeSlot { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); border-color: #ff5a6e; } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } /* ---------- virtual joystick (touch/mobile) ---------- */ .joystick-base { position: absolute; width: 108px; height: 108px; border-radius: 50%; background: rgba(10,16,26,0.35); border: 2px solid rgba(127,240,255,0.35); z-index: 30; pointer-events: none; transform: translate(-50%, -50%); box-shadow: 0 0 20px rgba(0,0,0,0.3) inset; } .joystick-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bfe9ff, #2fb8e0); box-shadow: 0 0 14px rgba(127,240,255,0.6); transform: translate(-50%, -50%); } /* the aim/shoot stick — same mechanics as the movement stick, just a distinct warm accent so a glance tells the two apart even mid-fight */ .aim-joystick-base { border-color: rgba(255,110,90,0.4); } .aim-joystick-knob { background: radial-gradient(circle at 35% 30%, #ffd7c9, #ff6a4a); box-shadow: 0 0 14px rgba(255,106,74,0.6); } .evolution-customize{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:8px 0;color:#9fc5d9;font:700 10px Orbitron,sans-serif}.evolution-customize label{display:flex;align-items:center;gap:8px}.evolution-customize input{width:34px;height:22px;border:1px solid #55dfff;background:transparent}.evolution-customize span{color:#ffd166} .joystick-hint { position:absolute; inset:0; z-index:31; pointer-events:none; animation:joystickHintIn .35s ease-out; } .joystick-hint-copy { position:absolute; left:50%; bottom:132px; transform:translateX(-50%); color:#eafcff; font:900 12px 'Orbitron',sans-serif; letter-spacing:2px; text-shadow:0 0 12px #2bdcff; white-space:nowrap; } .joystick-hint-side { position:absolute; bottom:22px; width:104px; height:104px; border:2px dashed rgba(127,240,255,.8); border-radius:50%; background:rgba(43,220,255,.08); box-shadow:0 0 24px rgba(43,220,255,.22); display:flex; align-items:center; justify-content:center; animation:joystickHintPulse 1.15s ease-in-out infinite; } .joystick-hint-side span { color:#7ff0ff; font:900 10px 'Orbitron',sans-serif; text-align:center; max-width:70px; } .joystick-hint-left { left:22px; } .joystick-hint-right { right:22px; border-color:rgba(255,106,74,.85); background:rgba(255,106,74,.08); box-shadow:0 0 24px rgba(255,106,74,.22); } .joystick-hint-right span { color:#ff9b80; } @keyframes joystickHintIn { from { opacity:0; } to { opacity:1; } } @keyframes joystickHintPulse { 50% { transform:scale(1.08); filter:brightness(1.3); } } @media (pointer:fine) { .joystick-hint { display:none !important; } } @media (max-width: 700px), (pointer: coarse) { #weaponBar:not(.weapon-open) .weapon-slot:not(.active-weapon) { display: none; } #weaponBar:not(.weapon-open) .weapon-slot.active-weapon::after { content: '⌄'; margin-left: 3px; color: #ffd166; font-size: 10px; } #weaponBar.weapon-open { padding: 5px; border-radius: 10px; background: rgba(3,8,15,.9); border: 1px solid rgba(127,240,255,.2); box-shadow: 0 10px 28px rgba(0,0,0,.5); } #weaponBar.weapon-open .weapon-slot:not(.hidden) { display: flex; } } /* ---------- damage feedback ---------- */ #hitFlash { position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,60,60,0) 40%, rgba(255,40,40,0.4) 100%); } #hitFlash.flash { animation: hitFlash 0.22s ease-out; } @keyframes hitFlash { 0% { opacity: var(--hit-flash-opacity, 0.65); } 100% { opacity: 0; } } .run-discovery { color: #ffd166; font-size: .86em; letter-spacing: .04em; } body[data-color-palette="protanopia"] #arena { filter: saturate(.82) hue-rotate(18deg) contrast(1.04); } /* a distinct cyan/gold flash for the wave-gate popup appearing — deliberately NOT reusing #hitFlash's red, which reads as "you got hurt"; this needs to read as "something needs your attention" instead, and repeats a couple times so it can't be missed mid-fight the way a single flash could be */ #gateFlash { position: absolute; inset: 0; z-index: 45; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(127,240,255,0) 35%, rgba(255,209,102,0.5) 100%); } #gateFlash.flash { animation: gateFlash 0.9s ease-out; } @keyframes gateFlash { 0%, 40%, 80% { opacity: 0.7; } 20%, 60% { opacity: 0.1; } 100% { opacity: 0; } } /* ---------- stage banner ---------- */ /* popup announcements (wave/stage/toast chatter) were drowning the screen — suppressed at the layer level so game logic can keep calling toast()/banner code freely without needing every call site touched */ #bannerLayer, #toastLayer { display: flex; } #bannerLayer { position: absolute; inset: 0; z-index: 65; align-items: center; justify-content: center; pointer-events: none; } .stage-banner { font-family: 'Orbitron', sans-serif; font-weight: 900; letter-spacing: 3px; text-align: center; font-size: clamp(20px, 5vw, 34px); color: #ffd166; text-shadow: 0 0 22px rgba(255,209,102,0.7), 0 0 50px rgba(255,209,102,0.3); animation: bannerIn 0.5s ease, bannerOut 0.6s ease 2.4s forwards; } @keyframes bannerIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes bannerOut { to { opacity: 0; transform: scale(1.08); } } .boss-banner { font-family: 'Orbitron', sans-serif; font-weight: 900; letter-spacing: 3px; text-align: center; font-size: clamp(22px, 6vw, 40px); color: #ff5a6e; text-shadow: 0 0 26px rgba(255,90,110,0.8), 0 0 60px rgba(255,90,110,0.4); animation: bannerIn 0.4s ease, bossPulse 0.5s ease-in-out 0.4s 3, bannerOut 0.6s ease 3s forwards; } @keyframes bossPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* ---------- toasts ---------- */ #toastLayer { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 70; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; } .toast { font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 1px; padding: 7px 16px; border-radius: 20px; background: rgba(6,10,18,0.88); border: 1px solid rgba(120,200,255,0.3); color: #cfe8ff; animation: toastIn 0.25s ease, toastOut 0.4s ease 2.2s forwards; } @keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } } #onboardLayer { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); z-index: 45; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(340px, 88vw); } .onboard-prompt { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.5px; text-align: center; padding: 9px 16px; border-radius: 10px; background: rgba(6,14,24,0.92); border: 1px solid rgba(255,209,102,0.5); color: #ffe9b8; box-shadow: 0 0 16px rgba(255,209,102,0.15); animation: toastIn 0.25s ease; transition: opacity 0.5s ease; } .onboard-prompt.fade { opacity: 0; } /* Three purposeful tools sit apart from the gun selector: crowd control, precision damage, and a risky close-range blast. */ #gadgetBar { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:28; display:flex; gap:7px; max-width:calc(100vw - 20px); flex-wrap:wrap; justify-content:center; } /* Keep the mouse/keyboard battlefield's bottom-center lane clear for movement and aiming. Touch screens use the dedicated dock above the sticks. */ @media (pointer:fine) { #gadgetBar { left:auto; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); transform:none; flex-direction:column; gap:6px; max-width:110px; } #gadgetBar .gadget-slot { width:110px; min-width:110px; } } .gadget-slot { min-width:76px; height:43px; border-radius:9px; border:1px solid rgba(255,209,102,.42); background:rgba(7,11,18,.88); color:#eafcff; font:700 9px 'Orbitron',sans-serif; display:grid; grid-template-columns:20px 1fr; grid-template-rows:1fr 1fr; align-items:center; cursor:pointer; } .gadget-slot .gadget-key { grid-row:1/3; color:#ffd166; font-size:12px; } .gadget-slot small { color:#9dffb0; font:700 10px 'Rajdhani',sans-serif; } .gadget-slot.on-cooldown { opacity:.48; border-color:rgba(120,150,175,.25); } .gadget-slot.on-cooldown small { color:#90a4b8; } @media (max-width:700px), (pointer:coarse) { #gadgetBar { bottom:calc(max(14px,env(safe-area-inset-bottom)) + 168px); } .gadget-slot { min-width:68px; } } /* Touch screens have no keyboard: drop the key letters/numbers from the gadget and weapon buttons and let the labels use the space. */ @media (pointer:coarse) { /* Keep touch actions above the bottom-corner movement/aim zones. The active build slot itself toggles build mode, so the wide DONE chip is redundant on touch and used to sit over both thumb zones. */ #buildModeChip { display:none !important; } .gadget-slot .gadget-key, .weapon-slot .weapon-key { display:none; } .gadget-slot { grid-template-columns:1fr; justify-items:center; text-align:center; } } @media (max-width: 720px) { #buildBar { bottom: max(128px, calc(env(safe-area-inset-bottom) + 118px)); gap: 5px; } .build-slot { width: 50px; height: 48px; } } @media (max-width: 420px) { #buildBar { gap: 4px; } .build-slot { width: 44px; height: 44px; border-radius: 6px; } .build-key { font-size: 10px; } .build-name { font-size: 7.5px; letter-spacing: 0.2px; } .build-cost, .build-cd { font-size: 7.5px; } #hud { padding: 6px 8px; grid-template-columns: minmax(92px, 1fr) auto; grid-template-areas: 'left right' 'mid mid'; row-gap: 2px; } .hud-left { grid-area: left; width: 116px; gap: 3px; } .hud-mid { grid-area: mid; margin-top: 0; } .hud-right { grid-area: right; gap: 2px; min-width: 0; } .hud-right .cur-icon { width: 12px; height: 12px; } .hud-right .currency { gap: 3px; font-size: 11px; } .hud-right .mute-btn { padding: 6px 7px; min-height: 32px; font-size: 9px; letter-spacing: .3px; } .hud-right .pause-btn { padding: 6px 9px; min-width: 38px; font-size: 12px; } .stat-label { width: 40px; font-size: 9.5px; } .stat-value { flex-basis: 42px; font-size: 9px; } .player-level-hud { font-size: 9px; } .stat-weapon .stat-label { flex-basis: 40px; } .stat-soldier .stat-label { flex-basis: 44px; width: 44px; font-size: 9px; letter-spacing: .3px; } .player-name { font-size: 9px; } .weapon-label { font-size: 10px; } .wave-label { font-size: 15px; } .wave-timer { font-size: 10.5px; } .currency { font-size: 12px; } .weapon-slot { width: 46px; height: 40px; } .weapon-key { font-size: 10px; } .weapon-name { font-size: 8.5px; } /* #hud grows a second row at this width, so keep the combat rail clear. */ #weaponBar { top: 92px; } } /* 2026 command-deck redesign: compact, thumb-friendly snap carousels. */ #startScreen { justify-content:flex-start; gap:10px; overflow-y:auto; scrollbar-width:none; padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); } #startScreen::-webkit-scrollbar,.snap-carousel::-webkit-scrollbar { display:none; } /* margin-top:auto here used to soak up ALL leftover vertical space in one single gap above the title — harmless on a short viewport, but on a taller phone (or the inflated 100vh a mobile browser reports with its address bar showing — see #app's 100dvh fix above) that gap could grow into most of the screen, shoving the mission/battlefield pickers and the deploy button down off the visible area entirely. Capped so it reads as deliberate breathing room, not a bug. */ #startScreen .title-block { margin-top: 220px; } #startScreen .game-title { font-size:clamp(28px,8vw,52px); line-height:.95; } .start-topline { position:fixed; z-index:80; top:max(12px,env(safe-area-inset-top)); left:max(14px,env(safe-area-inset-left)); right:max(14px,env(safe-area-inset-right)); display:flex; justify-content:space-between; align-items:center; pointer-events:none; } .start-topline>* { pointer-events:auto; } .icon-btn { width:40px; height:40px; border-radius:50%; border:1px solid rgba(127,240,255,.25); background:rgba(4,10,16,.76); color:#bfe4ff; font-size:18px; } .selection-panel { width:min(680px,100%); display:flex; flex-direction:column; gap:7px; padding:10px; border:1px solid rgba(127,240,255,.14); border-radius:18px; background:linear-gradient(145deg,rgba(8,19,28,.88),rgba(4,8,13,.76)); backdrop-filter:blur(12px); box-shadow:0 18px 60px rgba(0,0,0,.4); } .selector-heading { display:flex; justify-content:space-between; align-items:center; padding:0 4px; font-family:'Orbitron',sans-serif; color:#dffaff; font-size:11px; letter-spacing:1.5px; } .selector-heading small { color:#547993; font-size:8px; } .map-heading { margin-top:3px; color:#ffd166; } .snap-carousel { overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .player-select-row { display:flex; gap:10px; width:100%; padding:2px 1px 4px; justify-content:center; } .player-btn { flex:0 0 108px; height:134px; scroll-snap-align:center; position:relative; overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(160deg,#16232c,#070b10); color:#7893a7; padding:6px 4px 8px; font:700 10px 'Orbitron'; letter-spacing:.4px; } .player-btn img { display:block; width:100%; height:100px; object-fit:contain; object-position:center 20%; filter:saturate(.65) brightness(.7); transition:.18s ease; } /* VALKYRIE has no authored sprite — canvas.player-portrait is drawn procedurally at runtime (see renderSwordfighterPortrait in game.js) and sits in the exact same slot/box as every other operator's above. */ .player-btn canvas.player-portrait, .player-btn canvas.deployment-portrait { display:block; width:100%; height:100px; transition:.18s ease; } /* a transparent overlay drawn with the same weapon shape/color the real in-game gun uses for that soldier's default weapon (see renderPortraitWeaponIcon in game.js) — sits exactly over the portrait below it so the selection tile actually shows what they're holding, not just an empty-handed sprite. */ .player-btn canvas.weapon-overlay { position:absolute; top:6px; left:4px; width:calc(100% - 8px); height:100px; pointer-events:none; } .player-btn.active-player { color:#fff3bd; border-color:#ffd166; box-shadow:0 0 14px rgba(255,190,70,.28),inset 0 0 0 1px rgba(255,209,102,.2); } .player-btn.active-player img { filter:saturate(1.08) brightness(1.08); transform:scale(1.05); } .player-btn.active-player canvas.player-portrait, .player-btn.active-player canvas.deployment-portrait { filter:saturate(1.08) brightness(1.08); transform:scale(1.05); } .player-btn.active-player[data-deploying-label]::after { content:attr(data-deploying-label); } .player-btn.active-player::after { content:'DEPLOYING'; position:absolute; top:5px; left:6px; padding:3px 6px; border-radius:5px; background:rgba(255,209,102,.92); color:#251500; font:900 7px 'Orbitron'; letter-spacing:.6px; box-shadow:0 0 9px rgba(255,209,102,.55); } .operator-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px 9px; min-height:42px; padding:7px 10px; border:1px solid rgba(255,209,102,.24); border-radius:10px; background:linear-gradient(100deg,rgba(255,209,102,.09),rgba(7,19,28,.72) 48%); box-shadow:inset 3px 0 0 #ffd166; } .operator-summary-kicker { grid-column:1 / -1; color:#718da1; font:800 7px 'Orbitron'; letter-spacing:1.4px; } .operator-summary>b { color:#fff1b4; font:900 11px 'Orbitron'; letter-spacing:1px; } #operatorSummaryRole { color:#9fc8df; font:700 9px 'Rajdhani'; letter-spacing:.8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .operator-summary-stats { margin-left:auto; display:flex; gap:8px; } .operator-summary-stats span { display:grid; grid-template-columns:auto 34px; align-items:center; gap:4px; color:#718da1; font:800 6px 'Orbitron'; } .operator-summary-stats i { display:block; width:34px; height:4px; overflow:hidden; border-radius:4px; background:rgba(255,255,255,.09); } .operator-summary-stats i::after { content:''; display:block; width:var(--rating,50%); height:100%; background:linear-gradient(90deg,#55dfff,#ffd166); box-shadow:0 0 6px #55dfff; } .operator-summary-abilities { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; } .operator-summary-abilities .profile-ability { padding:5px 6px; } .operator-summary-abilities .profile-ability span { display:none; } .operator-summary-lore { grid-column:1/-1; margin:1px 0 0; color:#718da1; font:italic 9px/1.25 'Rajdhani',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:700px) { .operator-summary { grid-template-columns:auto minmax(0,1fr); } .operator-summary-stats { grid-column:1/-1; margin-left:0; } .operator-summary-abilities { display:flex; overflow-x:auto; scrollbar-width:none; } .operator-summary-abilities .profile-ability { flex:0 0 auto; } .operator-summary-abilities .profile-ability b { white-space:nowrap; } .operator-summary-lore { display:none; } } /* tapping a robot pops its stat/bio card up front and center — a real readable size instead of squeezing it into the tiny 66px carousel tile itself (tried that first as an in-place flip; it just came out too small to read). Reuses the same .modal/.modal-card look every other popup in this game already has, so it doesn't feel like a bolted-on new pattern. */ .robot-profile-card { width:min(350px,90vw); max-height:min(88dvh,680px); overflow-y:auto; align-items:center; text-align:center; position:relative; gap:7px; padding:14px 16px; } .robot-profile-close { position:absolute; top:8px; right:8px; width:28px; height:28px; font-size:14px; } .robot-profile-img-wrap { position:relative; width:94px; height:94px; } /* Level 1/2/3 bodies side by side; tap one to show it in the big portrait. */ .robot-profile-levels { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:100%; } .robot-profile-levels:empty { display:none; } .profile-level { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 3px 6px; border-radius:9px; border:1px solid rgba(127,240,255,.22); background:rgba(6,12,22,.72); color:#dff6ff; cursor:pointer; font-family:'Rajdhani',sans-serif; } .profile-level.active { border-color:#7ff0ff; box-shadow:0 0 12px rgba(127,240,255,.35); } .profile-level canvas { width:72px; height:84px; } .profile-level b { font:800 9px 'Orbitron',sans-serif; color:#7ff0ff; letter-spacing:.04em; } .profile-level small { font-size:10.5px; font-weight:700; line-height:1.1; min-height:2.2em; } .profile-level em { font:700 9px 'Orbitron',sans-serif; font-style:normal; color:#ffd166; } .profile-level.owned em { color:#9dffb0; } .robot-profile-img { width:94px; height:94px; object-fit:contain; filter:drop-shadow(0 0 13px rgba(127,240,255,0.35)); } .robot-profile-weapon-overlay { position:absolute; inset:0; width:94px; height:94px; pointer-events:none; } .robot-profile-role { font:800 12px 'Orbitron',sans-serif; color:#ffd166; letter-spacing:1.5px; margin-top:-6px; } .robot-profile-stats { display:flex; flex-direction:column; gap:5px; width:100%; padding:0 6px; } .robot-profile-stats .stat-row { display:flex; align-items:center; gap:8px; } .robot-profile-stats .stat-label { font:700 11px 'Rajdhani',sans-serif; color:#9fc3dd; flex:0 0 32px; text-align:left; } .robot-profile-stats .stat-bar { flex:1; height:7px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; } .robot-profile-stats .stat-fill { display:block; height:100%; background:linear-gradient(90deg,#7ff0ff,#9dffb0); transition:width .3s ease; } .robot-profile-abilities { width:100%; padding:8px; border:1px solid rgba(127,240,255,.16); border-radius:10px; background:rgba(4,12,18,.72); text-align:left; } .robot-profile-abilities h3 { margin:0 0 6px; color:#ffd166; font:900 8px 'Orbitron',sans-serif; letter-spacing:1.1px; } #robotProfileAbilities { display:grid; gap:4px; } .profile-ability { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 8px; padding:6px 7px; border-radius:7px; background:rgba(127,240,255,.055); } .profile-ability b { min-width:0; color:#dffaff; font:800 8px 'Orbitron',sans-serif; line-height:1.25; } .profile-ability em { white-space:nowrap; padding:2px 5px; border:1px solid rgba(114,233,255,.25); border-radius:4px; color:#72e9ff; background:rgba(114,233,255,.08); font:800 6.5px 'Orbitron',sans-serif; font-style:normal; line-height:1.3; } .profile-ability span { grid-column:1/-1; color:#9db3c9; font:600 9px 'Rajdhani',sans-serif; line-height:1.2; } .mode-select-row,.map-select-row { display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:9px; width:100%; max-width:none; } .mode-select-row { justify-content:center; } .mode-carousel-shell { position:relative; width:100%; padding:0 32px; } .mode-btn { flex:0 0 min(43vw,150px); height:112px; scroll-snap-align:center; position:relative; overflow:hidden; text-align:left; font-family:'Orbitron',sans-serif; padding:70px 9px 8px; border-radius:14px; color:#9ab4c9; background:linear-gradient(145deg,#101b25,#070b10); border:1px solid rgba(255,255,255,.11); } .mode-btn,.map-btn,.player-btn { transition: transform .16s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease; } .mode-btn:hover,.map-btn:hover,.player-btn:hover { transform: translateY(-2px); filter: brightness(1.08); } /* every other clickable control shared the same base styles but never got a hover/focus pass — mouse users had no affordance that these were interactive at all (keyboard focus was invisible too) */ .big-btn,.utility-btn,.mute-btn,.icon-btn,.ghost-btn,.modal-link-btn,.modal-close-x,.robot-profile-close,.build-slot,.quick-slot { transition: filter .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .big-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .utility-btn:hover,.mute-btn:hover,.icon-btn:hover,.ghost-btn:hover,.build-slot:hover,.quick-slot:hover,.map-arrow:hover,.gadget-slot:hover,.loadout-choice:hover,.evolution-node:hover,.trophy-chip:hover { border-color: rgba(127,240,255,.55); filter: brightness(1.15); } .modal-link-btn:hover,.modal-close-x:hover,.robot-profile-close:hover { color: #7ff0ff; border-color: rgba(127,240,255,.55); } .big-btn:focus-visible,.utility-btn:focus-visible,.mute-btn:focus-visible,.icon-btn:focus-visible,.ghost-btn:focus-visible,.modal-link-btn:focus-visible,.modal-close-x:focus-visible,.robot-profile-close:focus-visible,.build-slot:focus-visible,.quick-slot:focus-visible,.mode-btn:focus-visible,.map-btn:focus-visible,.player-btn:focus-visible,.map-arrow:focus-visible,.gadget-slot:focus-visible,.loadout-choice:focus-visible,.evolution-node:focus-visible,.trophy-chip:focus-visible { outline: 2px solid #7ff0ff; outline-offset: 2px; } .mode-btn b,.map-btn b { display:block; font-size:11px; letter-spacing:1px; color:#eaffff; } .mode-btn em,.map-btn em { display:block; margin-top:3px; font:700 8px 'Rajdhani'; letter-spacing:1px; color:#66859c; font-style:normal; } .mode-btn.active-mode { color:#fff; background:linear-gradient(145deg,#132833,#080d14); border-color:#7ff0ff; box-shadow:inset 0 0 0 1px rgba(127,240,255,.25),0 0 22px rgba(70,220,255,.18); transform:translateY(-1px); } .mode-btn.mode-locked { filter:saturate(.35) brightness(.62); } .mode-lock-badge { position:absolute; z-index:3; top:7px; right:7px; padding:3px 5px; border-radius:5px; background:rgba(4,8,14,.9); border:1px solid rgba(255,209,102,.55); color:#ffd166; font:800 6px 'Orbitron'; letter-spacing:.5px; } .mode-desc { width:100%; max-width:none; font-size:11px; color:#89a9bf; text-align:left; min-height:16px; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mode-art { position:absolute; inset:0 0 43px; background:radial-gradient(circle at 50% 65%,rgba(73,196,255,.22),transparent 55%),linear-gradient(135deg,#132b36,#080d14); } .mode-btn[data-mode="classic"] .mode-art { background-image:linear-gradient(0deg,rgba(5,9,14,.15),transparent 55%),url('assets/modes/classic.webp'); background-size:cover; background-position:center 42%; } .mode-btn[data-mode="zen"] .mode-art { background-image:linear-gradient(0deg,rgba(5,9,14,.14),transparent 55%),url('assets/modes/zen.webp'); background-size:cover; background-position:center 38%; } .mode-btn[data-mode="bossrush"] .mode-art { background-image:linear-gradient(0deg,rgba(5,0,5,.12),transparent 55%),url('assets/modes/bossrush.webp'); background-size:cover; background-position:center 28%; } .mode-btn[data-mode="assembly"] .mode-art:after,.mode-btn[data-mode="assembly"] .mode-art:before,.mode-btn[data-mode="assembly"] .mode-art i,.mode-btn[data-mode="classic"] .mode-art:after,.mode-btn[data-mode="zen"] .mode-art:after,.mode-btn[data-mode="bossrush"] .mode-art:after,.mode-btn[data-mode="zen"] .mode-art:before,.mode-btn[data-mode="bossrush"] .mode-art:before,.mode-btn[data-mode="zen"] .mode-art i,.mode-btn[data-mode="bossrush"] .mode-art i { display:none; } .mode-art:after { content:''; position:absolute; left:50%; bottom:9px; width:46px; height:52px; transform:translateX(-50%); background:linear-gradient(90deg,#22323e,#94bed0 46%,#263744 55%); clip-path:polygon(35% 0,65% 0,78% 22%,100% 38%,82% 54%,76% 100%,24% 100%,18% 54%,0 38%,22% 22%); filter:drop-shadow(0 0 9px #48d9ff); } .master-robot:before { content:''; position:absolute; z-index:2; left:50%; top:12px; width:33px; height:25px; transform:translateX(-50%); border:3px solid #95dcef; background:#101921; clip-path:polygon(12% 0,88% 0,100% 40%,78% 100%,22% 100%,0 40%); box-shadow:0 0 14px #49dbff; } .master-robot i { position:absolute; z-index:3; left:50%; top:24px; width:22px; height:3px; transform:translateX(-50%); background:#ff385c; box-shadow:0 0 10px #ff385c; } .boss-robot { background:radial-gradient(circle at 50% 60%,rgba(255,40,75,.35),transparent 58%),linear-gradient(135deg,#2b0c14,#09090f); } .boss-robot:after { filter:drop-shadow(0 0 12px #ff385c); transform:translateX(-50%) scale(1.15); } .zen-robot i { background:#7ff0ff; box-shadow:0 0 10px #7ff0ff; } .alliance-art { background:radial-gradient(circle at 35% 55%,rgba(176,107,255,.32),transparent 35%),radial-gradient(circle at 67% 50%,rgba(255,90,110,.3),transparent 35%),#0c1018; } .map-btn { flex:0 0 min(58vw,178px); height:82px; scroll-snap-align:center; position:relative; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:#080d13; color:#cfe8ff; text-align:left; padding:45px 10px 7px; font-family:'Orbitron',sans-serif; } .map-btn.active-map { border-color:#ffd166; box-shadow:inset 0 0 0 1px rgba(255,209,102,.2),0 0 16px rgba(255,150,60,.15); } .map-btn.map-locked { filter:grayscale(.65) brightness(.55); } .map-lock-badge { position:absolute; top:6px; right:8px; font-size:15px; filter:none; text-shadow:0 1px 3px rgba(0,0,0,.8); } .map-carousel-shell { position:relative; width:100%; padding:0 32px; } .map-carousel-shell .map-select-row { width:100%; } .player-carousel-shell { position:relative; width:100%; padding:0 32px; } .player-carousel-shell .player-select-row { width:100%; } .map-arrow { position:absolute; z-index:4; top:50%; transform:translateY(-50%); width:30px; height:58px; padding:0; border:1px solid rgba(255,209,102,.42); border-radius:9px; background:linear-gradient(180deg,rgba(19,29,39,.96),rgba(6,10,15,.96)); color:#ffd166; font:700 29px/1 'Rajdhani'; box-shadow:0 0 16px rgba(255,180,60,.15); cursor:pointer; } .map-arrow:active { transform:translateY(-50%) scale(.94); background:rgba(255,209,102,.18); } .map-arrow-prev { left:0; } .map-arrow-next { right:0; } .map-preview { position:absolute; inset:0 0 36px; } .generated-classic-preview { background-image:linear-gradient(0deg,rgba(4,8,12,.12),transparent),url('assets/battlefields/classic-arena.webp'); background-size:cover; background-position:center 47%; } .generated-zen-preview { background-image:linear-gradient(0deg,rgba(4,8,12,.1),transparent),url('assets/battlefields/zen-arena.webp'); background-size:cover; background-position:center 54%; } .generated-rubycanyon-preview { background:radial-gradient(ellipse at 50% 70%,#3a0c18 0%,#0e0306 100%); position:relative; overflow:hidden; } .generated-rubycanyon-preview::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(-55deg,transparent 0,transparent 8px,rgba(255,58,92,.22) 8px,rgba(255,58,92,.22) 10px); } .foundry-preview { background:linear-gradient(155deg,transparent 42%,rgba(255,85,35,.9) 44%,transparent 48%),radial-gradient(circle at 60% 70%,#ff6533,transparent 25%),#171117; } .void-preview { background:linear-gradient(25deg,transparent 47%,rgba(126,90,255,.7) 48%,transparent 51%),radial-gradient(circle at 50% 45%,#713dff,transparent 24%),#070919; } .garden-preview { background:radial-gradient(ellipse at 28% 75%,#46f0d0 0 8%,transparent 9%),radial-gradient(ellipse at 70% 55%,#ba58ff 0 10%,transparent 11%),linear-gradient(140deg,#071b1e,#11102b); } .map-preview[style] { background:radial-gradient(circle at 68% 36%,var(--p1) 0 5%,transparent 7%),linear-gradient(145deg,transparent 43%,color-mix(in srgb,var(--p1) 65%,transparent) 45%,transparent 48%),radial-gradient(circle at 28% 70%,var(--p1),transparent 22%),var(--p2); } .utility-grid { display:grid; grid-template-columns:repeat(5,1fr); width:min(520px,100%); gap:6px; } .utility-btn { min-height:38px; padding:7px 4px; border-radius:9px; border:1px solid rgba(127,240,255,.14); background:rgba(8,16,24,.76); color:#8eacc1; font:700 9px 'Orbitron'; letter-spacing:.4px; } .command-fab { position:fixed; z-index:35; right:max(16px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); width:52px; height:52px; border-radius:50%; border:1px solid #7ff0ff; background:linear-gradient(145deg,#193744,#071017); color:#eaffff; font:700 28px/1 'Orbitron'; box-shadow:0 0 24px rgba(71,223,255,.35); transition:.2s ease; } .command-fab[aria-expanded="true"] { transform:rotate(45deg); background:#3a1724; border-color:#ff6f91; } .command-fab-menu { position:fixed; z-index:34; right:18px; bottom:78px; width:min(250px,72vw); grid-template-columns:repeat(2,1fr); padding:9px; border-radius:14px; background:rgba(3,10,16,.96); border:1px solid rgba(127,240,255,.25); box-shadow:0 14px 44px rgba(0,0,0,.65); transform:translateY(12px) scale(.94); opacity:0; pointer-events:none; transition:.18s ease; } .command-fab-menu.open { transform:none; opacity:1; pointer-events:auto; } .command-fab-menu.open .utility-btn { animation:commandItemIn .22s cubic-bezier(.2,.8,.2,1) both; } .command-fab-menu.open .utility-btn:nth-child(2n) { animation-delay:.025s; } .full-game-fab-btn { color:#ffd166; border-color:rgba(255,209,102,.38); background:rgba(52,34,8,.82); } @keyframes commandItemIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } } #ingameArsenalBtn:before { content:'⚔' !important; } #ingameUpgradesBtn:before { content:'↑' !important; } #startBtn { width:min(520px,100%); padding:13px 16px; font-size:13px; } #selectedMapLabel { color:#fff; } /* Production has one purchase only; legacy à-la-carte money buttons stay absent. */ .money-buy { display:none !important; } #medicSlot.medic-locked { opacity:.62; filter:saturate(.45); } #medicSlot.medic-locked .qs-name::after { content:' · LOCKED'; color:#9bb1c8; font-size:8px; } @media (max-width:420px) { #startScreen { padding-left:10px; padding-right:10px; } #startScreen .title-block { margin-top:220px; } .selection-panel { padding:8px; } .mode-btn { flex-basis:46%; height:104px; padding-top:64px; } .map-btn { flex-basis:58vw; } .utility-grid { grid-template-columns:repeat(3,1fr); } .operator-summary { grid-template-columns:auto 1fr; } .operator-summary-stats { grid-column:1 / -1; width:100%; justify-content:space-between; margin-left:0; } .operator-summary-stats span { grid-template-columns:auto minmax(38px,1fr); flex:1; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* Touch screens swipe the start-screen rows; the ‹ › buttons stay for mouse users. The card that settles in the centre is the selection (see TOUCH_CAROUSELS in game.js). Side padding lets the first and last cards reach the centre and the neighbours peek in; dots show position. */ .carousel-dots { display:none; } @media (pointer: coarse) { .map-arrow { display:none !important; } .player-carousel-shell, .mode-carousel-shell, .map-carousel-shell { padding:0; } .player-select-row, .mode-select-row, .map-select-row { justify-content:flex-start; } .player-select-row { padding-left:calc(50% - 54px); padding-right:calc(50% - 54px); } .mode-btn { flex-basis:min(43vw,150px); } .mode-select-row { padding-left:calc(50% - min(21.5vw,75px)); padding-right:calc(50% - min(21.5vw,75px)); } .map-btn { flex-basis:min(58vw,178px); } .map-select-row { padding-left:calc(50% - min(29vw,89px)); padding-right:calc(50% - min(29vw,89px)); } .player-btn:not(.active-player), .mode-btn:not(.active-mode), .map-btn:not(.active-map) { opacity:.72; } /* negative margins soak up most of the panel gap so the dots add almost no height */ .carousel-dots { display:flex; justify-content:center; gap:6px; height:6px; margin:-4px 0 -2px; } .carousel-dots i { width:6px; height:6px; border-radius:3px; background:rgba(127,240,255,.22); transition:width .18s ease, background .18s ease; } .carousel-dots i.on { width:16px; background:#7ff0ff; } .carousel-dots.count { height:auto; margin:-3px 0 -2px; font:700 9px 'Orbitron',sans-serif; letter-spacing:1.5px; color:#7ff0ff; } /* no backdrop blur on phones: the panel is already near-opaque, and the blur surface alone held ~65 MB of graphics memory on a Galaxy Note10 */ .selection-panel { gap:5px; backdrop-filter:none; -webkit-backdrop-filter:none; background:linear-gradient(145deg,rgba(8,19,28,.95),rgba(4,8,13,.9)); } /* the command menu button now lives in the header, so DEPLOY is full width */ #startBtn { padding-left:10px; padding-right:10px; font-size:12px; letter-spacing:1.4px; } .essence-row { white-space:nowrap; font-size:12px; padding:5px 12px; gap:5px; max-width:calc(100% - 104px); } .streak-badge { margin-left:2px; padding:1px 6px; font-size:10px; white-space:nowrap; } #startScreen .title-block { isolation:isolate; position:relative; } #startScreen .title-block::before { content:''; position:absolute; inset:-12px -18px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at center, rgba(2,8,13,.66), rgba(2,8,13,0) 72%); } #startScreen .game-title { text-shadow:0 2px 0 #02080d, 0 0 8px #02080d, 0 0 18px rgba(70,220,255,.6); } #startScreen .game-sub { text-shadow:0 1px 0 #02080d, 0 0 6px #02080d; } #commandFab { top:max(12px,env(safe-area-inset-top)); bottom:auto; right:calc(max(14px,env(safe-area-inset-right)) + 48px); width:40px; height:40px; font-size:20px; } #commandFabMenu { top:calc(max(12px,env(safe-area-inset-top)) + 50px); bottom:auto; right:14px; } } /* Start screen text: nothing cut off with an ellipsis, headings on one line */ .selector-heading { gap:8px; } .selector-heading span { white-space:nowrap; } .selector-heading small { text-align:right; line-height:1.25; } .mode-desc { white-space:normal; overflow:visible; text-overflow:clip; min-height:2.7em; line-height:1.35; } /* the demo button stays small but gets a ~44px tap area */ .soldier-demo-btn::after { content:''; position:absolute; inset:-11px; } /* locked pick: DEPLOY turns into the unlock button */ #startBtn.deploy-locked { background:linear-gradient(180deg,#ffd166,#e0a53a); } /* battlefield filter for free players */ .map-select-row.free-only .map-btn.map-locked { display:none; } /* modes limited to certain battlefields (THE LAST ASSEMBLY: applyModeBattlefields in game.js) */ .map-select-row .map-btn.mode-excluded { display:none !important; } .map-filter-btn { font:700 8px 'Orbitron',sans-serif; letter-spacing:1px; color:#ffd166; background:rgba(255,209,102,.08); border:1px solid rgba(255,209,102,.4); border-radius:12px; padding:6px 10px; min-height:28px; } .map-filter-btn[aria-pressed="true"] { background:#ffd166; color:#251500; } /* build mode: finish chip above the build menu button */ .build-mode-chip { position:absolute; left:50%; bottom:calc(max(14px,env(safe-area-inset-bottom)) + 108px); transform:translateX(-50%); z-index:29; display:flex; align-items:center; gap:10px; padding:6px 6px 6px 14px; border-radius:22px; border:1px solid rgba(127,240,255,.7); background:rgba(4,16,24,.92); color:#dffaff; font:800 10px 'Orbitron',sans-serif; letter-spacing:1px; white-space:nowrap; box-shadow:0 0 18px rgba(70,220,255,.3); } .build-mode-chip .build-chip-done { padding:7px 11px; border-radius:14px; background:#7ff0ff; color:#04141c; } #hud.hidden ~ #buildModeChip { display:none !important; } /* ---------- Mobile combat HUD ---------- Status stays at the top. All support/tactical actions live in one compact upper-left rail; weapon and field controls live in the upper-right rail. */ @media (max-height: 500px) { #weaponBar { top: 58px; right: max(10px, env(safe-area-inset-right)); width: 62px; grid-template-columns: 1fr; gap: 6px; } #weaponBar .weapon-slot { width: 62px; height: 32px; border-radius: 9px; } #weaponBar.weapon-melee { width: 62px; grid-template-columns: 1fr; } #weaponBar.weapon-melee .weapon-slot { width: 62px; } #weaponBar.weapon-open { width: auto; grid-template-columns: repeat(2, 62px); } .hud-quickbar { grid-template-columns: 1fr; } /* FLARE / FORGE / bought powers: a second column beside the weapon rail (TURRET, SEED...), not a free-floating bar in the middle of the arena */ #gadgetBar { left:auto; right:calc(max(10px, env(safe-area-inset-right)) + 68px); top:58px; bottom:auto; transform:none; flex-direction:column; flex-wrap:nowrap; width:62px; max-width:62px; padding:0; gap:6px; justify-content:flex-start; border-radius:0; background:none; } #gadgetBar .forge-blueprints { position:static; order:9; flex-direction:column; gap:6px; } .gadget-slot { min-width: 62px; width: 62px; height: 32px; border-radius: 9px; font-size: 8px; padding: 0 4px; } .gadget-slot small { font-size: 8px; } /* TERRA and TITAN side by side at 29px each spilled READY / SHARDS out of the tiles */ /* tutorial hint cards: bottom strip between the two joysticks, not over the soldier */ #onboardLayer { bottom: max(6px, env(safe-area-inset-bottom)); width: min(300px, calc(100vw - 340px)); gap: 4px; } .onboard-prompt { font-size: 11px; line-height: 1.2; padding: 5px 10px; } .mute-btn:not(.pause-btn) { min-width: 34px; width: 34px; padding: 0; font-size: 15px; } /* 60px tiles have no room for key letters */ .gadget-slot .gadget-key, .weapon-slot .weapon-key { display: none; } .gadget-slot { grid-template-columns: 1fr; justify-items: center; text-align: center; } .hud-quickbar .quick-slot { height: 32px; min-height: 32px; } } /* Portrait keeps the same left-support / right-combat organization. */ @media (max-width: 500px) and (orientation: portrait) { #weaponBar { top: 150px; right: max(8px, env(safe-area-inset-right)); width: 60px; grid-template-columns: 1fr; gap: 6px; } #weaponBar .weapon-slot { width: 60px; height: 32px; border-radius: 9px; } #weaponBar.weapon-melee { width: 60px; grid-template-columns: 1fr; } #weaponBar.weapon-melee .weapon-slot { width: 60px; } .hud-quickbar { grid-template-columns: 1fr; } #weaponBar.weapon-open { width: auto; grid-template-columns: repeat(2, 60px); } #gadgetBar { left:50%; top:auto; right:auto; bottom:calc(max(14px,env(safe-area-inset-bottom)) + 168px); transform:none; width:136px; max-width:136px; flex-direction:row; gap:6px; padding:4px 5px 4px 3px; justify-content:flex-start; border-radius:4px 12px 12px 4px; background:rgba(3,10,16,.86); } #gadgetBar .forge-blueprints { position:static; order:9; flex-direction:row; gap:6px; } .gadget-slot { min-width: 60px; width: 60px; height: 36px; border-radius: 9px; font-size: 8px; padding: 0 4px; } .gadget-slot small { font-size: 8px; } .mute-btn:not(.pause-btn) { min-width: 32px; width: 32px; padding: 0; font-size: 14px; } /* 60px tiles have no room for key letters */ .gadget-slot .gadget-key, .weapon-slot .weapon-key { display: none; } .gadget-slot { grid-template-columns: 1fr; justify-items: center; text-align: center; } } /* authored battlefield art on the preview card, cropped like Classic Arena */ .map-preview.art-preview { background-size:cover !important; background-position:center 47% !important; } /* This mandatory wave-transition UI must precede the desktop-only block. The Chromium 74 lowering pass can otherwise scope later rules under that media query, leaving the paused Loadout Bay invisible on touch phones. */ .bay-overlay { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(1,5,10,.74); backdrop-filter:blur(5px); font-family:'Orbitron',sans-serif; } .bay-card { position:relative; width:min(640px,94vw); max-height:90vh; overflow:auto; padding:14px 16px 10px; background:linear-gradient(145deg,rgba(8,22,36,.98),rgba(3,9,18,.98)); border:1px solid rgba(127,240,255,.6); border-radius:16px; box-shadow:0 0 50px rgba(0,0,0,.75); color:#dff6ff; text-align:center; } .bay-kicker { font-size:10px; letter-spacing:2px; color:#7ff0ff; } .bay-title { font-size:19px; font-weight:900; margin:3px 0 2px; } .bay-sub { font:700 10px 'Rajdhani',sans-serif; letter-spacing:1.4px; opacity:.6; margin-bottom:6px; } .bay-section { margin-top:8px; padding-top:7px; border-top:1px solid rgba(255,255,255,.07); } .bay-label { text-align:left; color:var(--c); font-size:9px; letter-spacing:1.6px; margin:0 2px 5px; } .bay-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .bay-opt { display:flex; flex-direction:column; justify-content:space-between; gap:3px; min-height:62px; padding:7px 8px; border:1px solid color-mix(in srgb,var(--c) 50%,transparent); border-left:3px solid var(--c); border-radius:8px; background:rgba(12,28,44,.92); color:#dff8ff; text-align:left; cursor:pointer; transition:transform .12s ease, background .12s ease; } .bay-opt:hover, .bay-opt:focus-visible { background:rgba(22,44,64,.96); transform:translateY(-1px); } .bay-opt.selected { border-color:#9dffb0; background:rgba(35,75,50,.92); box-shadow:0 0 12px rgba(157,255,176,.22); } .selection-status { color:#9dffb0; font:700 11px/1.4 'Rajdhani',sans-serif; text-align:center; margin:8px 0; } #saveEvolution:disabled { opacity:.45; cursor:default; } .bay-opt b { color:var(--c); font:800 10px 'Orbitron',sans-serif; letter-spacing:.4px; } .bay-opt small { font:600 11px/1.15 'Rajdhani',sans-serif; color:#cfe4f2; opacity:.78; } .bay-opt span { font:800 8px 'Orbitron',sans-serif; color:#ffd166; letter-spacing:.8px; } .bay-level-hint { margin-top:8px; padding:6px 10px; border-radius:8px; border:1px dashed rgba(255,209,102,.4); color:#ffd166; font:700 9.5px 'Orbitron',sans-serif; letter-spacing:.5px; text-align:center; } .bay-skip { margin-top:9px; padding:12px 18px; border:1px solid rgba(127,240,255,.5); border-radius:7px; background:rgba(30,70,90,.7); color:#dff8ff; font:700 10px 'Orbitron',sans-serif; cursor:pointer; } .bay-skip:disabled { opacity:.45; cursor:default; } @media (max-width:520px) { .bay-grid { grid-template-columns:1fr; } .bay-opt { min-height:0; } } @media (max-height:520px) { .bay-card { padding:10px 12px 6px; } .bay-title { font-size:15px; } .bay-opt { min-height:0; padding:5px 7px; } .bay-opt small { display:none; } } /* Desktop web (mouse + wide window) only: the deck used to sit in a 680px column with empty space either side, so the operator row overflowed and centred overflow hid the first and last cards. Widen the deck, let cards share the row, and centre safely so every card is reachable. Touch screens keep the compact swipe carousels above. */ @media (pointer: fine) and (min-width: 900px) { .selection-panel { width:min(1180px,100%); } .player-carousel-shell, .mode-carousel-shell, .map-carousel-shell { padding:0 38px; } .map-arrow[hidden] { display:none; } .player-carousel-shell.carousel-fits, .mode-carousel-shell.carousel-fits, .map-carousel-shell.carousel-fits { padding:0; } .player-select-row, .mode-select-row { justify-content:safe center; } .carousel-fits .player-select-row, .carousel-fits .mode-select-row { padding-left:0; padding-right:0; } .carousel-fits .player-btn, .carousel-fits .mode-btn { max-width:none; } .snap-carousel.more-right { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent); } .snap-carousel.more-left { -webkit-mask-image:linear-gradient(90deg,transparent,#000 64px); mask-image:linear-gradient(90deg,transparent,#000 64px); } .snap-carousel.more-left.more-right { -webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent); mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent); } .player-btn { flex:1 1 0; min-width:104px; max-width:176px; height:clamp(118px,min(13vw,19vh),196px); font-size:11px; } .player-btn img, .player-btn canvas.player-portrait, .player-btn canvas.deployment-portrait, .player-btn canvas.weapon-overlay { height:calc(100% - 34px); object-fit:contain; object-position:center 20%; } .mode-btn { flex:1 1 0; min-width:150px; max-width:300px; height:clamp(100px,min(11vw,15vh),150px); padding-top:calc(clamp(100px,min(11vw,15vh),150px) - 42px); } .mode-btn b, .map-btn b { font-size:12px; } .map-btn { flex:0 0 clamp(178px,17vw,220px); height:clamp(78px,min(7.5vw,11vh),100px); padding-top:calc(clamp(78px,min(7.5vw,11vh),100px) - 37px); } /* the summary spans the full deck here, so its phone-sized 6-9px text was unreadable */ .operator-summary { gap:6px 12px; padding:10px 14px; } .operator-summary-kicker { font-size:10px; } .operator-summary>b { font-size:17px; } #operatorSummaryRole { font-size:16px; } .operator-summary-stats { gap:14px; } .operator-summary-stats span { grid-template-columns:auto 56px; gap:6px; font-size:10px; } .operator-summary-stats i { width:56px; height:5px; } .operator-summary-abilities { display:flex; flex-wrap:wrap; gap:8px; } .operator-summary-abilities .profile-ability { flex:0 0 auto; grid-template-columns:auto auto; gap:3px 12px; padding:8px 12px; } .operator-summary-abilities .profile-ability b { font-size:13px; white-space:nowrap; } .operator-summary-abilities .profile-ability em { font-size:10px; padding:3px 7px; } .operator-summary-lore { font-size:16px; } } /* Swarmforge: the FORGE button and the blueprint row that appears above it (absolutely placed so it never widens the gadget bar on a phone) */ .gadget-slot.forge-gadget { border-color:rgba(201,155,255,.6); } .gadget-slot.forge-gadget .gadget-key { color:#c99bff; } .gadget-slot.forge-gadget small { color:#e6ccff; } #hud #gadgetBar #forgeTornado b { font:700 6px/1 'Rajdhani',sans-serif; letter-spacing:0; white-space:nowrap; } #hud #gadgetBar #forgeTornado small { font-size:5px; letter-spacing:-.1px; white-space:nowrap; } /* Keep the held Forge action touchable while allowing a horizontal swipe to scroll the combat-control strip when this last tile is partly off-screen. */ #forgeHarvest { touch-action:pan-x; user-select:none; -webkit-user-select:none; } #forgeHarvest.forge-live { background:rgba(42,18,64,.94); box-shadow:0 0 16px rgba(201,155,255,.55); } /* Onboarding pulse — gold ring on the FORGE button for players on their first two waves */ @keyframes forgeOnboardPulse { 0%,100% { box-shadow:0 0 0 2px rgba(255,209,102,.25); } 50% { box-shadow:0 0 0 5px rgba(255,209,102,.75), 0 0 18px rgba(255,209,102,.45); } } #forgeHarvest.forge-onboard-pulse { animation:forgeOnboardPulse 1.4s ease-in-out infinite; border-color:rgba(255,209,102,.8) !important; } @media (prefers-reduced-motion:reduce) { #forgeHarvest.forge-onboard-pulse { animation:none; border-color:rgba(255,209,102,.8) !important; } } .forge-blueprints { position:absolute; right:0; bottom:calc(100% + 8px); display:flex; gap:7px; } .gadget-slot.forge-gadget.forge-titan { border-color:#ffd166; box-shadow:0 0 14px rgba(255,209,102,.45); } .gadget-slot.forge-gadget.forge-titan .gadget-key { color:#ffd166; } #forgeTitanBtn { border-color:rgba(255,209,102,.7); background:rgba(24,19,9,.9); } #forgeTitanBtn .qs-name { color:#ffd166; } #forgeTitanBtn .qs-cost { color:#ffe7a7; } #forgeTitanBtn:disabled { opacity:.82; cursor:default; box-shadow:0 0 8px rgba(255,209,102,.18); } #forgeTitanBtn:not(:disabled) { box-shadow:0 0 14px rgba(255,209,102,.45); } /* HOW TO PLAY gameplay clips */ .tutorial-video { display:block; width:100%; max-width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:12px; border-radius:8px; border:1px solid rgba(201,155,255,.4); background:#05070d; } /* THE LAST ASSEMBLY mission card art */ .mode-btn[data-mode="assembly"] .mode-art { background-color:#15102b; background-image:linear-gradient(0deg,rgba(5,9,14,.15),transparent 55%),url('assets/modes/assembly.webp?v=20260925'); background-size:cover; background-position:center 18%; } /* THE LAST ASSEMBLY false victory: the non-critical HUD bars are torn upward (health and objective stay) */ body.assembly-seized #gadgetBar { animation:assemblySeizeCentered 3.4s ease-in forwards; pointer-events:none; } body.assembly-seized #weaponBar { animation:assemblySeize 3.4s ease-in forwards; pointer-events:none; } @keyframes assemblySeizeCentered { 0% { transform:translateX(-50%); } 25% { filter:hue-rotate(70deg) brightness(1.5); } 100% { transform:translate(-50%,-120vh) rotate(-9deg); opacity:0; } } @keyframes assemblySeize { 0% { transform:none; } 25% { filter:hue-rotate(70deg) brightness(1.5); } 100% { transform:translateY(-120vh) rotate(7deg); opacity:0; } } @media (prefers-reduced-motion:reduce) { body.assembly-seized #gadgetBar, body.assembly-seized #weaponBar { animation:none; opacity:0; } } /* the build menu button lives in the bottom control row, sized like the gadgets */ /* One free Ember run remains visible until it is used. */ .mode-lock-badge.trial-badge { background:rgba(255,209,102,.18); color:#ffd166; border-color:rgba(255,209,102,.55); } .map-btn .map-trial-badge { position:absolute; top:6px; right:6px; z-index:3; font-size:9px; letter-spacing:.08em; padding:3px 6px; border-radius:6px; background:rgba(255,209,102,.18); color:#ffd166; border:1px solid rgba(255,209,102,.55); pointer-events:none; } /* tester builds only — created in JS when a tester token is present */ .tester-watermark { position:fixed; inset:0; z-index:9998; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; padding:6px 10px; } .tester-watermark span { font:600 10px/1.2 'Rajdhani',system-ui,sans-serif; letter-spacing:.14em; color:rgba(255,255,255,.28); text-shadow:0 1px 2px rgba(0,0,0,.6); } .tester-watermark span:last-child { align-self:flex-end; } .test-plan-panel { position:fixed; left:10px; bottom:10px; z-index:9999; width:min(320px,calc(100vw - 20px)); max-height:min(60vh,520px); overflow:auto; background:rgba(6,10,18,.94); border:1px solid rgba(127,240,255,.45); border-radius:10px; color:#c8e6f5; font:500 12px/1.45 'Rajdhani',system-ui,sans-serif; } .test-plan-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid rgba(127,240,255,.25); letter-spacing:.08em; } .test-plan-head button { background:none; border:none; color:#7ff0ff; font-size:18px; line-height:1; cursor:pointer; padding:0 4px; } .test-plan-panel.collapsed .test-plan-body { display:none; } .test-plan-body { padding:8px 10px 10px; } .test-plan-blurb { margin:0 0 8px; color:#9fb4c4; } .test-plan-tasks { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; } .test-plan-tasks li { display:flex; gap:8px; align-items:flex-start; } .test-plan-tasks input { margin-top:2px; accent-color:#7ff0ff; } .test-plan-panel textarea { width:100%; box-sizing:border-box; background:rgba(0,0,0,.35); color:#c8e6f5; border:1px solid rgba(127,240,255,.3); border-radius:6px; padding:6px; font:inherit; resize:vertical; } .test-plan-copy { width:100%; margin-top:8px; padding:8px; background:rgba(127,240,255,.14); color:#7ff0ff; border:1px solid rgba(127,240,255,.5); border-radius:6px; letter-spacing:.08em; font:600 12px/1 'Rajdhani',system-ui,sans-serif; cursor:pointer; } .test-plan-copied { margin-top:6px; min-height:14px; color:#ffd166; letter-spacing:.06em; } .test-plan-fallback { margin-top:8px; height:120px; } /* the operator included with the full game */ .welcome-picker { position:fixed; inset:0; z-index:170; display:grid; place-items:center; padding:16px; background:rgba(2,4,8,.88); } .welcome-card { width:min(460px,calc(100vw - 28px)); } .welcome-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:10px 0; max-height:52vh; overflow:auto; } .welcome-status { min-height:30px; color:#ffd166; font-size:12px; line-height:1.3; text-align:center; } .welcome-actions { display:grid; grid-template-columns:1.2fr 1fr; gap:8px; } .welcome-actions .big-btn { width:100%; min-width:0; margin:0; padding:12px 10px; font-size:12px; letter-spacing:1px; } .welcome-pick { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px 22px; background:rgba(10,18,28,.85); border:1px solid rgba(127,240,255,.35); border-radius:10px; color:#c8e6f5; cursor:pointer; } .welcome-pick:hover,.welcome-pick:focus-visible { border-color:#ffd166; box-shadow:0 0 18px rgba(255,209,102,.35); outline:none; } .welcome-pick.coop-focus,.welcome-actions .coop-focus,.welcome-continue.coop-focus { outline:2px solid #7ff0ff; outline-offset:2px; filter:brightness(1.12); } .welcome-pick.selected { border-color:#ffd166; background:rgba(64,48,12,.55); box-shadow:inset 0 0 0 1px rgba(255,209,102,.45),0 0 18px rgba(255,209,102,.3); } .welcome-pick img { width:78px; height:78px; object-fit:contain; } .welcome-pick b { font:700 12px/1.1 'Orbitron',sans-serif; letter-spacing:.06em; } .welcome-pick em { font-style:normal; font-size:9px; letter-spacing:.08em; color:#7ff0ff; text-align:center; } .welcome-pick-selected { position:absolute; right:5px; bottom:5px; color:#ffd166; font:800 8px/1 'Orbitron',sans-serif; letter-spacing:.07em; opacity:0; } .welcome-pick.selected .welcome-pick-selected { opacity:1; } .welcome-accepted { align-items:center; text-align:center; gap:10px; } .welcome-accepted-mark { display:grid; place-items:center; width:48px; height:48px; border:2px solid #9dffb0; border-radius:50%; color:#9dffb0; font:800 28px/1 'Orbitron',sans-serif; box-shadow:0 0 22px rgba(157,255,176,.22); } .welcome-accepted-copy { color:#eafcff; font:700 16px/1.35 'Rajdhani',sans-serif; } .welcome-accepted-copy b { display:block; color:#ffd166; font:800 20px/1.2 'Orbitron',sans-serif; letter-spacing:.06em; } .welcome-accepted-note { color:#9fb4c4; font:600 12px/1.4 'Rajdhani',sans-serif; } .welcome-continue { width:100%; margin:0; } @media (max-width:520px) { .welcome-card { padding:14px; gap:9px; } .welcome-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:48vh; } .welcome-pick img { width:66px; height:66px; } .welcome-actions { grid-template-columns:1fr; } .welcome-actions .big-btn { min-height:42px; } } /* ============================================================ LIVING MAP — Ruby Canyon mode HUD elements ============================================================ */ /* Mode card art */ .mode-btn[data-mode="livingmap"] .mode-art { background: radial-gradient(ellipse at 50% 70%, #3a0c18 0%, #0e0306 100%); position: relative; overflow: hidden; } /* Ruby vein decoration on the mode card */ .mode-btn[data-mode="livingmap"] .mode-art::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -45deg, transparent 0px, transparent 14px, rgba(255,58,92,.18) 14px, rgba(255,58,92,.18) 16px ); } .mode-btn[data-mode="livingmap"] .mode-art::after { content: '🔧'; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 26px; opacity: .85; } /* Construction progress HUD */ .construction-hud { position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(14, 3, 6, .82); border: 1px solid rgba(255, 58, 92, .5); border-radius: 6px; padding: 5px 12px; z-index: 120; font-family: 'Rajdhani', sans-serif; pointer-events: none; white-space: nowrap; } .construction-hud.hidden { display: none; } .construction-label { color: #ffaabb; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; min-width: 110px; } .construction-bar-wrap { width: 140px; height: 8px; background: rgba(255,58,92,.18); border-radius: 4px; overflow: hidden; } .construction-bar-fill { height: 100%; width: 0%; background: #c8f060; border-radius: 4px; transition: width .1s linear, background .3s; } .construction-pct { color: #fff; font-size: 12px; font-weight: 700; min-width: 34px; text-align: right; } /* Objective strip */ .objective-strip { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(14, 3, 6, .80); border: 1px solid rgba(255, 58, 92, .4); border-radius: 5px; padding: 4px 14px; z-index: 120; font-family: 'Rajdhani', sans-serif; pointer-events: none; max-width: 90vw; } .objective-strip.hidden { display: none; } .objective-kicker { color: #ff3a5c; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; flex-shrink: 0; } #objectiveText { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } @media (max-width: 900px) { .objective-strip { top: 112px; max-width: 86vw; } } @media (max-width: 420px) { .objective-strip { top: 142px; padding: 4px 8px; gap: 5px; } .objective-kicker { font-size: 8px; } #objectiveText { font-size: 10px; letter-spacing: .02em; } } /* Loadout purchases: price line, soldier level strip, path picker */ .loadout-choice em { display:block; margin-top:5px; color:#ffd166; font:800 8px 'Orbitron',sans-serif; font-style:normal; letter-spacing:.7px; } .loadout-buy { border-style:dashed; } .loadout-choice.short em, .level-chip.short em { color:#8ea3b5; } .level-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:-2px 0 6px 54px; } .level-chip { padding:6px 7px; border-radius:8px; border:1px solid rgba(201,155,255,.35); background:rgba(20,12,34,.72); color:#e4d4ff; text-align:left; font:800 9px 'Orbitron',sans-serif; cursor:pointer; } .level-chip b, .level-chip small, .level-chip em { display:block; } .level-chip small { margin-top:2px; color:#b9a8d6; font:600 10px/1.1 'Rajdhani',sans-serif; } .level-chip em { margin-top:4px; color:#ffd166; font:800 8px 'Orbitron',sans-serif; font-style:normal; letter-spacing:.6px; } .level-chip.selected { border-color:#ffd166; background:rgba(255,209,102,.1); box-shadow:0 0 12px rgba(255,209,102,.15); } .level-chip.locked { border-style:dashed; } .level-chip:disabled { opacity:.45; cursor:default; } .level-path-note { grid-column:1/-1; color:#b9a8d6; font:700 9px 'Rajdhani',sans-serif; letter-spacing:.8px; } .level-paths { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } @media (max-width:520px) { .level-strip { margin-left:0; } .level-paths { grid-template-columns:1fr; } } /* Low-end device tier (LOW_END_DEVICE in game.js): backdrop blur is a full re-render of everything behind the panel on every frame; on budget GPUs a single blurred panel costs more than the whole battlefield. */ .low-end *, .low-end *::before, .low-end *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* GL layer (GLLayer in game.js): the painted arena is drawn by WebGL on a canvas underneath, so the 2D game canvas must let it show through. */ canvas#arena.gl-under { background: transparent; } /* ---------- Desktop / tablet combat HUD: grouped, nothing over the wave ---------- top bar: HP left, mode + wave centre, currency / sound / pause right right combat rail: BLASTER, SPREAD, TURRET, SEED, TERRA right quickbar: TURRET, SEED, TERRA, TITAN; bottom row: FLARE, FORGE, TORNADO */ @media (min-width: 701px) and (min-height: 501px) { #gadgetBar .forge-blueprints { position: static; order: 9; } } /* Web builds are closed until the entitlement service validates a purchased account token or a non-renewable one-day free pass. */ .web-access-gate { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:18px; background:radial-gradient(circle at 50% 20%,rgba(42,22,68,.96),rgba(2,5,10,.99) 62%); } .web-access-gate.hidden { display:none; } .web-access-card { width:min(430px,calc(100vw - 28px)); padding:24px; border:1px solid rgba(201,155,255,.65); border-radius:14px; background:#080d16; box-shadow:0 24px 90px #000,0 0 45px rgba(201,155,255,.18); text-align:center; } .web-access-kicker { color:#c99bff; font:800 10px 'Orbitron',sans-serif; letter-spacing:.18em; } .web-access-card p { color:#b9c8d6; line-height:1.4; } .web-access-card label,.settings-web-access label { display:block; margin:10px 0; color:#9fb4c4; font:700 10px 'Orbitron',sans-serif; letter-spacing:.08em; text-align:left; } .web-access-card input,.settings-web-access input { width:100%; box-sizing:border-box; margin-top:6px; padding:11px 12px; border:1px solid rgba(127,240,255,.35); border-radius:7px; background:#03070c; color:#fff; font:700 14px 'Rajdhani',sans-serif; } .web-access-error { min-height:20px; color:#ff8f87; font-weight:700; } .web-access-card small { display:block; margin-top:12px; color:#72889a; line-height:1.35; } .settings-web-access { margin:14px 0; padding:12px; border:1px solid rgba(201,155,255,.35); border-radius:10px; background:rgba(18,10,31,.62); } .settings-full-game { display:flex; flex-direction:column; gap:10px; margin:14px 0; padding:12px; border:1px solid rgba(255,209,102,.4); border-radius:10px; background:rgba(40,28,8,.58); text-align:left; } .settings-full-game>div { display:flex; flex-direction:column; gap:4px; } .settings-full-game b { color:#ffd166; font:800 12px 'Orbitron',sans-serif; letter-spacing:.08em; } .settings-full-game small { color:#b9c9d5; font-size:12px; line-height:1.35; } .settings-full-game .big-btn { width:100%; } .settings-cloud-save { margin:14px 0; padding:12px; border:1px solid rgba(127,240,255,.35); border-radius:10px; background:rgba(7,24,32,.7); } .settings-cloud-save>div:first-child { display:flex; flex-direction:column; gap:4px; } .settings-cloud-save p { margin:8px 0; color:#9fb4c4; font-size:12px; line-height:1.35; } .settings-cloud-save small { color:#9fb4c4; line-height:1.35; } .settings-cloud-save label { display:block; margin:10px 0; color:#9fb4c4; font:700 10px 'Orbitron',sans-serif; letter-spacing:.08em; text-align:left; } .settings-cloud-save input { width:100%; box-sizing:border-box; margin-top:6px; padding:11px 12px; border:1px solid rgba(127,240,255,.35); border-radius:7px; background:#03070c; color:#fff; font:700 14px 'Rajdhani',sans-serif; } .settings-web-access>div:first-child { display:flex; justify-content:space-between; gap:12px; } .settings-web-access small { color:#9fb4c4; } .settings-web-actions { display:flex; gap:8px; flex-wrap:wrap; } .web-access-result { margin-top:8px; color:#7ff0ff; word-break:break-word; } /* Portrait phones: the HUD band (HP, wave counter, quick slots) runs to ~143px, so toasts start below it instead of covering WAVE n, and stay between the left gadget column and the right weapon column. */ @media (max-width: 500px) and (orientation: portrait) { #toastLayer { top: 150px; width: calc(100vw - 160px); max-width: 300px; } #toastLayer .toast { text-align: center; padding: 6px 12px; } } /* Loadout buy states: anything the player cannot act on is greyed, not just dimmed text — and it is a real disabled button (see setBuyState). */ .buy-state-locked, .buy-state-short, .buy-state-maxed, .buy-state-unavailable { opacity: .48; filter: grayscale(.85); cursor: not-allowed; border-style: solid !important; } .buy-state-locked:hover, .buy-state-short:hover, .buy-state-maxed:hover, .buy-state-unavailable:hover { border-color: rgba(127,240,255,.2) !important; filter: grayscale(.85) !important; } .loadout-choice.buy-state-short em, .level-chip.buy-state-short em, .armory-buy.buy-state-short { color: #ff9a8a !important; } .loadout-choice.buy-state-locked em, .level-chip.buy-state-locked em, .armory-buy.buy-state-locked { color: #c9b27a !important; } .loadout-choice.buy-state-maxed em { color: #9dffb0 !important; } .loadout-choice.buy-state-available em, .level-chip.buy-state-available em { color: #7ff0ff; } .loadout-choice.buy-state-equipped em, .level-chip.buy-state-equipped em { color: #ffd166; } .armory-buy.buy-state-available { box-shadow: 0 0 10px rgba(127,240,255,.25); } .armory-buy.buy-state-owned { opacity: .7; } /* Essence sits top-right wherever it can be spent: the start screen (its header runs right-to-left: gear, menu, then the balance), the Loadout (a sticky pill that stays in view while the long panel scrolls) and the between-wave Loadout Bay. */ .start-topline { flex-direction: row-reverse; } #loadoutPanel .essence-row, #evolutionPanel .essence-row { position: sticky; top: 0; z-index: 3; margin-left: auto; width: max-content; background: rgba(12,16,10,.92); animation: none; } .profile-essence { align-self:flex-end; margin:0 30px 4px 0; font-size:10px; padding:4px 8px; } .hud-essence small { font-size:8px; } @media (max-width:600px) { .hud-right { flex-wrap:wrap; } .hud-essence { order:-1; flex-basis:100%; justify-content:flex-end; } } .bay-card { position: relative; } .bay-essence { position: absolute; top: 10px; right: 12px; font-size: 11px; padding: 4px 10px; animation: none; } /* Compact soldier/tetros row above the centered title and menu. */ @media (min-width:760px) { #startScreen .title-block { margin-top:160px; } } /* Viewport fit (fitStartScreen in game.js): on screens too short for the whole start screen, the soldier row gives up some height first, then the menu under the title scales down, so nothing needs scrolling. */ #startScreen.fit-gap .title-block { margin-top:var(--splash-gap); } #startScreen .selection-panel, #startScreen > .big-btn { zoom:var(--menu-zoom,1); } @media (pointer:coarse) { #commandFab { right: auto; left: calc(max(14px,env(safe-area-inset-left)) + 48px); } #commandFabMenu { right: auto; left: 14px; } } .no-flexgap .player-level-hud>*+* { margin-top: 2px; } /* ---------- Phone landscape combat HUD (touch, 500px tall or less) ---------- One compact status block top-left, one tidy two-column control rail top-right, so the middle of the arena stays clear. Layout only. */ @media (max-height: 500px) and (pointer: coarse) { .hud-left { width: 168px; gap: 2px; } .hud-left .stat { gap: 4px; } .hud-left .stat-label { font-size: 7px; letter-spacing: .3px; width: 36px; flex: 0 0 36px; } .hud-left .bar { height: 6px; } .hud-left .stat-value { font-size: 9px; } /* soldier and weapon: one short line each, no wrapping into the arena */ .stat-weapon, .stat-soldier { align-items: center; } .stat-weapon .stat-label, .stat-soldier .stat-label { flex: 0 0 36px; width: 36px; padding-top: 0; } .weapon-label { font-size: 9px; letter-spacing: .4px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; } .player-level-hud { flex-direction: row; align-items: center; gap: 4px; font-size: 9px; } .hud-right .currency { font-size: 11px; gap: 3px; } .hud-right .mute-btn { min-width: 30px; width: 30px; height: 30px; padding: 0; font-size: 12px; } /* control rail: two slim columns of equal tiles in the top-left corner, between the status block and the wave counter; the first grid column reserves their width so the wave label sits right beside them */ #hud { grid-template-columns: 294px auto minmax(0, 1fr); } #hud > .hud-right { justify-self: end; } /* phones: the Essence/Salvage chips keep icon + number only */ .hud-right .currency .hud-subtext, .hud-right .currency small { display: none; } #weaponBar { top: 4px; left: calc(max(10px, env(safe-area-inset-left)) + 236px); right: auto; width: 58px; gap: 4px; } #weaponBar .weapon-slot { width: 58px; height: 26px; border-radius: 8px; } #weaponBar.weapon-melee, #weaponBar.weapon-melee .weapon-slot { width: 58px; } #weaponBar.weapon-open { grid-template-columns: repeat(2, 58px); } .hud-quickbar { gap: 4px; } .hud-quickbar .quick-slot { height: 26px; min-height: 26px; gap: 1px; border-radius: 8px; } .quick-slot .qs-name { font-size: 6.5px; } .quick-slot .qs-cost, .quick-slot .qs-cd { font-size: 7.5px; letter-spacing: 0; white-space: nowrap; } #gadgetBar { top: 4px; left: calc(max(10px, env(safe-area-inset-left)) + 174px); right: auto; width: 58px; max-width: 58px; gap: 4px; } #gadgetBar .gadget-slot { width: 58px; min-width: 58px; height: 26px; border-radius: 8px; font-size: 7px; } #gadgetBar .gadget-slot small { font-size: 7px; white-space: nowrap; } /* active weapon and its menu caret on one line */ #weaponBar .weapon-slot { flex-direction: row; gap: 2px; } #weaponBar .weapon-name { font-size: 8px; white-space: nowrap; max-height: none; } #forgeTitanBtn .qs-cost { font-size: 6.5px; } /* lighter tiles: the rail should not read as a solid wall over the arena */ #weaponBar .weapon-slot, .hud-quickbar .quick-slot, #gadgetBar .gadget-slot { background: rgba(6,10,18,.66); } } /* ---------- Phone landscape start screen ---------- The portrait/desktop stack (soldier row, wordmark, menu) cannot fit 390px of height. Here the wordmark shrinks into the top bar between the utility buttons and the Essence chip, a small operator stands beside it (drawn in ambientFrame), and the menu gets the full width underneath. */ @media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) { #startScreen { gap: 8px; padding-top: calc(max(12px, env(safe-area-inset-top)) + 50px); } #startScreen .title-block, #startScreen.fit-gap .title-block { position: fixed; z-index: 79; top: calc(max(12px, env(safe-area-inset-top)) + 2px); left: 50%; transform: translateX(-50%); margin: 0; gap: 1px; pointer-events: none; animation: none; } #startScreen .game-title { font-size: 26px; letter-spacing: 3px; line-height: 1; } #startScreen .game-sub { font-size: 7px; letter-spacing: 2.4px; } /* two columns: operator + summary on the left, mission + battlefield on the right */ #startScreen .selection-panel { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 5px; align-items: start; } #startScreen .selection-panel > .selector-heading:first-child { grid-area: 1 / 1; } #startScreen .player-carousel-shell { grid-area: 2 / 1; } #startScreen .player-carousel-shell + .carousel-dots { grid-area: 3 / 1; } #startScreen .operator-summary { grid-area: 4 / 1 / 8 / 2; } #startScreen .operator-summary + .selector-heading { grid-area: 1 / 2; } #startScreen .mode-carousel-shell { grid-area: 2 / 2; } #startScreen .mode-carousel-shell + .carousel-dots { grid-area: 3 / 2; } #startScreen .mode-desc { grid-area: 4 / 2; } #startScreen .map-heading { grid-area: 5 / 2; } #startScreen .map-carousel-shell { grid-area: 6 / 2; } #startScreen .map-carousel-shell + .carousel-dots { grid-area: 7 / 2; } #startScreen .selector-heading small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-left: 8px; } /* half-width columns: shorter operator tiles and the stacked phone summary */ #startScreen .player-btn { height: 116px; } #startScreen .player-btn img, #startScreen .player-btn canvas.player-portrait, #startScreen .player-btn canvas.deployment-portrait, #startScreen .player-btn canvas.weapon-overlay { height: 84px; } #startScreen .operator-summary { grid-template-columns: auto minmax(0, 1fr); } #startScreen .operator-summary-stats { grid-column: 1 / -1; margin-left: 0; } #startScreen .operator-summary-abilities { display: flex; overflow-x: auto; scrollbar-width: none; } #startScreen .operator-summary-abilities .profile-ability { flex: 0 0 auto; } #startScreen .operator-summary-abilities .profile-ability b { white-space: nowrap; } #startScreen > .big-btn { width: min(420px, 100%); } } /* Flat top control line: every action is its own tile. The wrappers remain for game logic only and contribute no visual grouping or paired rows. */ #hud { grid-template-columns: minmax(126px, 150px) minmax(0, 6fr) minmax(88px, 110px) minmax(0, 3fr) minmax(136px, 190px); grid-auto-rows: min-content; align-content: start; column-gap: 4px; } #combatControlRail { display: contents; } #hud .hud-left { grid-column: 1; grid-row: 1; width: 100%; } #hud #weaponBar, #hud .hud-mid, #hud #gadgetBar, #hud .hud-right { grid-row: 1; align-self: start; } #hud #weaponBar { position: static; inset: auto; transform: none; z-index: 26; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 3px; width: 100%; max-width: 100%; min-width: 0; min-height: 30px; grid-column: 2; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; overflow-x: auto; overflow-y: visible; scrollbar-width: none; touch-action: pan-x; pointer-events: auto; } #hud #weaponBar::-webkit-scrollbar { display: none; } #hud #gadgetBar { scrollbar-width: thin; scrollbar-color: rgba(201,155,255,.62) rgba(201,155,255,.08); } #hud #gadgetBar::-webkit-scrollbar { height: 3px; } #hud #gadgetBar::-webkit-scrollbar-track { background: rgba(201,155,255,.08); border-radius: 3px; } #hud #gadgetBar::-webkit-scrollbar-thumb { background: rgba(201,155,255,.62); border-radius: 3px; } /* Keep the always-used shard-harvest action near the start of the phone strip; optional bought powers and the shard-spending Tornado follow it. */ @media (max-width: 700px), (pointer: coarse) { #hud #gadgetBar #flareSatchelGadget { order: 0; } #hud #gadgetBar #forgeHarvest { order: 1; } #hud #gadgetBar #teleportPower { order: 2; } #hud #gadgetBar #flightPower { order: 3; } #hud #gadgetBar #stealthPower { order: 4; } #hud #gadgetBar #forgeTornado { order: 5; } } #hud #weaponBar .weapon-slot, #hud #weaponBar .quick-slot { position: relative; display: flex; flex: 0 0 50px; flex-direction: column; width: 50px; min-width: 50px; height: 30px; min-height: 30px; padding: 2px; border-radius: 7px; gap: 1px; text-align: center; align-items: center; justify-content: center; line-height: 1; } #hud #weaponBar:not(.weapon-open) .weapon-slot:not(.active-weapon) { display: flex; } #hud #weaponBar .weapon-key { display: block; font-size: 9px; line-height: 1; } #hud #weaponBar .weapon-name { display: block; font-size: 6px; line-height: 1; letter-spacing: 0; white-space: normal; } #hud #weaponBar #specialWeaponSlot { flex: 0 0 50px; } #hud #weaponBar #hudQuickbar { display: contents; } #hud #weaponBar .quick-slot .qs-name { font-size: 6px; line-height: 1; } #hud #weaponBar .quick-slot .qs-cost, #hud #weaponBar .quick-slot .qs-cd { font-size: 7px; line-height: 1; } #hud .hud-mid { grid-column: 3; text-align: center; margin: 0; align-self: start; } #hud #gadgetBar { position: static; inset: auto; transform: none; z-index: 28; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 3px; width: 100%; max-width: 100%; min-width: 0; min-height: 30px; grid-column: 4; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; overflow-x: auto; overflow-y: visible; scrollbar-width: thin; scrollbar-color: rgba(201,155,255,.62) rgba(201,155,255,.08); touch-action: pan-x; pointer-events: auto; } #hud #gadgetBar .forge-blueprints { position: static; display: contents; } #hud #gadgetBar .gadget-slot { display: flex; flex: 0 0 50px; flex-direction: column; align-items: center; justify-content: center; width: 50px; min-width: 50px; height: 30px; min-height: 30px; padding: 2px; border-radius: 7px; gap: 1px; font-size: 6px; line-height: 1; text-align: center; } #hud #gadgetBar .gadget-key { display: block; font-size: 9px; line-height: 1; } #hud #gadgetBar .gadget-slot b { font-size: 6px; line-height: 1; } #hud #gadgetBar .gadget-slot small { font-size: 6px; line-height: 1; white-space: nowrap; } #hud .hud-right { grid-column: 5; width: 100%; min-width: 0; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 4px; } body.assembly-seized #hud #gadgetBar, body.assembly-seized #hud #weaponBar { pointer-events: none; } @media (max-width: 700px) { #hud { grid-template-columns: minmax(58px, 68px) minmax(0, 6fr) minmax(55px, 70px) minmax(0, 3fr) minmax(44px, 50px); column-gap: 2px; } #hud .hud-left { gap: 3px; } #hud .hud-left .stat-label, #hud .hud-left .stat-value, #hud .hud-left .stat-weapon, #hud .hud-left .stat-soldier, #hud #coopP1Head, #hud #coopP2Hud { display: none !important; } #hud .hud-left .stat { display: block; margin-bottom: 3px; } #hud .hud-left .bar { display: block; width: 100%; min-width: 10px; height: 8px; } #hud #weaponBar, #hud #gadgetBar { gap: 2px; } #hud #weaponBar .weapon-slot, #hud #weaponBar .quick-slot, #hud #weaponBar #specialWeaponSlot, #hud #gadgetBar .gadget-slot { flex-basis: 40px; width: 40px; min-width: 40px; height: 34px; min-height: 34px; } #hud #weaponBar .weapon-key, #hud #gadgetBar .gadget-key { font-size: 8px; } #hud #weaponBar .weapon-name, #hud #weaponBar .quick-slot .qs-name, #hud #gadgetBar .gadget-slot b { font-size: 7px; } #hud #weaponBar .quick-slot .qs-cost, #hud #weaponBar .quick-slot .qs-cd, #hud #gadgetBar .gadget-slot small { font-size: 6px; } #hud #waveLabel { font-size: 12px; letter-spacing: .4px; white-space: nowrap; } #hud #modeLabel { font-size: 7px; letter-spacing: .3px; } #hud #waveTimer { font-size: 7px; white-space: nowrap; } #hud .hud-right { gap: 2px; align-items: flex-start; } #hud .hud-right .currency small, #hud .hud-right .currency .hud-subtext, #hud .hud-right .currency:not(.hud-essence) { display: none; } #hud .hud-essence { gap: 0; } #hud .hud-essence #hudEssenceCount { display: none; } #hud .hud-right .cur-icon { width: 12px; height: 12px; } #hud #muteBtn, #hud #pauseBtn { flex: 0 0 20px; width: 20px; min-width: 20px; height: 22px; min-height: 22px; padding: 2px; font-size: 0; letter-spacing: 0; } #hud #muteBtn::after { content: '♪'; font-size: 12px; } #hud #pauseBtn { font-size: 9px; } #hud #captureApexBtn, #hud #summonApexBtn { padding: 2px; min-height: 22px; font-size: 5px; } .sos-prompt { left: 50%; right: auto; top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 186px); transform: translateX(-50%); } } @media (max-width: 390px) { #hud { grid-template-columns: minmax(36px, 40px) minmax(0, 6fr) minmax(46px, 50px) minmax(0, 3fr) minmax(44px, 50px); } #hud #weaponBar .weapon-slot, #hud #weaponBar .quick-slot, #hud #weaponBar #specialWeaponSlot, #hud #gadgetBar .gadget-slot { flex-basis: 40px; width: 40px; min-width: 40px; height: 34px; min-height: 34px; padding: 1px; } #hud #weaponBar, #hud #gadgetBar { gap: 1px; } #hud #weaponBar .weapon-key, #hud #gadgetBar .gadget-key { font-size: 8px; } #hud #weaponBar .weapon-name, #hud #weaponBar .quick-slot .qs-name, #hud #gadgetBar .gadget-slot b { font-size: 7px; } #hud #weaponBar .quick-slot .qs-cost, #hud #weaponBar .quick-slot .qs-cd, #hud #gadgetBar .gadget-slot small { font-size: 6.5px; } #hud #waveLabel { font-size: 10px; letter-spacing: 0; } #hud #waveTimer { font-size: 6px; } } @media (max-width: 350px) { #hud { grid-template-columns: minmax(32px, 36px) minmax(0, 6fr) minmax(42px, 46px) minmax(0, 4fr) minmax(42px, 46px); } #hud #weaponBar .weapon-slot, #hud #weaponBar .quick-slot, #hud #weaponBar #specialWeaponSlot, #hud #gadgetBar .gadget-slot { flex-basis: 36px; width: 36px; min-width: 36px; height: 32px; min-height: 32px; padding: 1px; } #hud #weaponBar .weapon-name, #hud #weaponBar .quick-slot .qs-name, #hud #gadgetBar .gadget-slot b { font-size: 6px; } } @media (max-height: 500px) and (pointer: coarse) { .sos-prompt { left: 50%; right: auto; top: auto; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 52px); transform: translateX(-50%); } } /* ---------- Touch start screen: console-style picker ---------- Phones and tablets (pointer:coarse) swap the carousels for #mobileDeck: one row each for operator, mode, battlefield (and co-op when a controller is present), a wide DEPLOY button, and a large animated operator that ambientFrame (game.js) draws inside #mobileDeckHero over the selected battlefield's art. Desktop and Steam keep the approved splash above. */ .mobile-deck, .mobile-deck-hero { display: none; } @media (pointer: coarse) { #startScreen.overlay-screen { display: grid; grid-template-columns: minmax(0, min(46%, 420px)) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto auto minmax(0, 1fr); align-items: stretch; justify-items: stretch; column-gap: 18px; row-gap: 8px; overflow: hidden; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: none; text-align: left; } #startScreen.overlay-screen .selection-panel { display: none; } #startScreen.overlay-screen .title-block, #startScreen.overlay-screen.fit-gap .title-block { grid-column: 1; grid-row: 1; position: static; transform: none; margin: 0; align-items: flex-start; gap: 3px; pointer-events: none; } #startScreen.overlay-screen .game-title { font-size: clamp(26px, 4.6vw, 40px); letter-spacing: 3px; line-height: 1; text-shadow: 0 2px 0 #02080d, 0 0 14px rgba(70,220,255,.55); } #startScreen.overlay-screen .game-sub { position: relative; padding-left: 38px; font-size: 8px; letter-spacing: 2.4px; text-shadow: 0 1px 0 #02080d; } /* the orange tick marks under the wordmark */ #startScreen.overlay-screen .game-sub::before { content: ''; position: absolute; left: 0; top: 50%; width: 30px; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, #ff8a3d 0 7px, transparent 7px 10px); transform: skewX(-30deg); } #startScreen.overlay-screen .title-block::before { display: none; } .mobile-deck { grid-column: 1; grid-row: 3; align-self: end; display: flex; flex-direction: column; gap: 7px; min-width: 0; } .mobile-deck-hero { display: block; grid-column: 2; grid-row: 1 / -1; position: relative; margin-top: 46px; min-height: 0; pointer-events: none; } /* targeting reticle beside the operator and a floor glow under its boots */ .mobile-deck-hero::before { content: ''; position: absolute; left: 8%; top: 34%; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(127,240,255,.55); background: radial-gradient(circle, rgba(127,240,255,.9) 0 2px, transparent 3px), linear-gradient(rgba(127,240,255,.5), rgba(127,240,255,.5)) center / 1px 100% no-repeat, linear-gradient(90deg, rgba(127,240,255,.5), rgba(127,240,255,.5)) center / 100% 1px no-repeat; box-shadow: 0 0 18px rgba(70,220,255,.35), inset 0 0 12px rgba(70,220,255,.25); opacity: .7; } .mobile-deck-hero::after { content: ''; position: absolute; left: 50%; bottom: 15px; width: min(70%, 260px); height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(70,220,255,.28), transparent 70%); } .md-row { display: grid; grid-template-columns: 54px 30px minmax(0, 1fr) 30px; align-items: center; height: 52px; border: 1px solid rgba(127,240,255,.24); border-radius: 7px; overflow: hidden; background: linear-gradient(90deg, rgba(9,26,38,.92), rgba(5,13,21,.8)); box-shadow: inset 0 1px 0 rgba(127,240,255,.08), 0 6px 18px rgba(0,0,0,.35); } .md-row[hidden] { display: none; } .md-row:not(.md-row-coop):focus-within { border-color: #7ff0ff; box-shadow: 0 0 16px rgba(70,220,255,.4), inset 0 0 0 1px rgba(127,240,255,.35); } .md-thumb { align-self: stretch; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(127,240,255,.22); background: #07121b center / cover no-repeat; overflow: hidden; } .md-thumb canvas { width: 100%; height: 100%; } .md-thumb-demo { position: relative; height: 100%; padding: 0; border-top: 0; border-bottom: 0; border-left: 0; border-radius: 0; color: inherit; } /* a small ▶ badge marks operators with a move preview */ .md-thumb-demo.md-has-demo::after { content: '▶'; position: absolute; right: 3px; bottom: 3px; width: 15px; height: 15px; border-radius: 50%; background: rgba(4,12,18,.85); border: 1px solid rgba(127,240,255,.5); color: #7ff0ff; font: 7px/13px sans-serif; text-align: center; } .md-arrow { height: 100%; padding: 0; border: 0; background: none; color: #7ff0ff; font: 700 22px/1 'Orbitron', sans-serif; text-shadow: 0 0 8px rgba(70,220,255,.6); touch-action: manipulation; } .md-arrow:active { color: #fff; background: rgba(127,240,255,.12); } .md-text { min-width: 0; padding: 0 4px; } .md-text small { display: block; color: #8fb3c4; font: 700 8px 'Orbitron', sans-serif; letter-spacing: 1.6px; } .md-text b { display: block; overflow: hidden; color: #fff; font: 900 clamp(12px, 2.3vw, 16px) 'Orbitron', sans-serif; letter-spacing: 1px; white-space: nowrap; text-overflow: ellipsis; } .md-row.md-locked b { color: #ffd166; } .md-row.md-locked b::before { content: '🔒 '; font-size: .85em; } .md-row-coop { grid-template-columns: 54px minmax(0, 1fr); } .md-row-coop .md-text { padding-left: 12px; } .md-row-coop .md-text b { font-size: 11px; } .md-thumb-coop { gap: 5px; } .md-thumb-coop i { position: relative; width: 13px; height: 12px; margin-top: 12px; border-radius: 6px 6px 2px 2px; background: #4fd6ff; } .md-thumb-coop i::before { content: ''; position: absolute; left: 2px; top: -11px; width: 9px; height: 9px; border-radius: 50%; background: inherit; } .md-thumb-coop i + i { background: #ffb02e; } #startScreen.overlay-screen > .big-btn { grid-column: 1; width: 100%; zoom: 1; } /* rows, RESUME and DEPLOY form one block centred under the title (the empty rows 2 and 7 share the spare height), so DEPLOY moves up when there is no RESUME instead of staying pinned to the bottom edge */ #startScreen.overlay-screen #resumeBtn { grid-row: 4; } #startScreen.overlay-screen #startBtn { grid-row: 5; } #startScreen.overlay-screen #resumeBtn { padding: 9px 12px; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; } #startScreen.overlay-screen #startBtn { position: relative; padding: 14px 16px; border: 2px solid #4fe0ff; border-radius: 10px; background: linear-gradient(180deg, rgba(18,60,82,.95), rgba(6,26,38,.95)); color: #fff; font-size: 0; letter-spacing: 0; box-shadow: 0 0 22px rgba(79,224,255,.45), inset 0 0 18px rgba(79,224,255,.22); } /* the full "DEPLOY TO " text stays in the DOM for screen readers; the battlefield row already names the map, so the button just says DEPLOY */ #startScreen.overlay-screen #startBtn::before { content: 'DEPLOY'; font: 900 22px/1 'Orbitron', sans-serif; letter-spacing: 3px; text-shadow: 0 0 12px rgba(127,240,255,.7); } #startScreen.overlay-screen #startBtn.deploy-locked { border-color: #ffd166; background: linear-gradient(180deg, #ffd166, #e0a53a); color: #1a1000; box-shadow: 0 0 20px rgba(255,209,102,.4); } #startScreen.overlay-screen #startBtn.deploy-locked::before { content: '🔒 UNLOCK FULL GAME'; font-size: 15px; letter-spacing: 1.5px; text-shadow: none; } /* utility cluster top-right, above the operator: Essence, settings, menu */ #startScreen .start-topline { left: auto; right: calc(max(14px, env(safe-area-inset-right)) + 48px); flex-direction: row; gap: 8px; } #startScreen #commandFab { top: max(12px, env(safe-area-inset-top)); bottom: auto; left: auto; right: max(14px, env(safe-area-inset-right)); width: 40px; height: 40px; font-size: 20px; } #startScreen #commandFabMenu { top: calc(max(12px, env(safe-area-inset-top)) + 50px); bottom: auto; left: auto; right: 14px; } } /* Short landscape phones: tighter rows so all four and DEPLOY fit. */ @media (pointer: coarse) and (orientation: landscape) and (max-height: 420px) { #startScreen.overlay-screen { row-gap: 6px; } .mobile-deck { gap: 5px; } .md-row { height: 44px; grid-template-columns: 48px 28px minmax(0, 1fr) 28px; } #startScreen.overlay-screen #startBtn { padding: 10px 14px; } #startScreen.overlay-screen #startBtn::before { font-size: 19px; } } /* Portrait: wordmark under the utility bar, operator filling the middle, picker rows and DEPLOY along the bottom within thumb reach. */ @media (pointer: coarse) and (orientation: portrait) { #startScreen.overlay-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(120px, 1fr) auto auto auto auto; padding-top: calc(max(12px, env(safe-area-inset-top)) + 52px); } #startScreen.overlay-screen .title-block { grid-row: 1; } .mobile-deck-hero { grid-column: 1; grid-row: 2; margin-top: 0; } .mobile-deck { grid-row: 3; align-self: start; width: min(100%, 520px); justify-self: center; } #startScreen.overlay-screen #resumeBtn { grid-row: 4; } #startScreen.overlay-screen #startBtn { grid-row: 5; } #startScreen.overlay-screen > .big-btn { width: min(100%, 520px); justify-self: center; } } /* Phones only: each HUD weapon tile shows one short word (data-short, set by syncHudWeaponShortNames in game.js) at a readable size instead of the full name squeezed into two 6px lines. Tablets, desktop and Steam keep full names. */ @media (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 500px) { #hud #weaponBar .weapon-name[data-short], #hud .weapon-slot .weapon-name[data-short] { font-size: 0; letter-spacing: 0; max-height: none; white-space: nowrap; overflow: hidden; text-overflow: clip; } #hud #weaponBar .weapon-name[data-short]::after, #hud .weapon-slot .weapon-name[data-short]::after { content: attr(data-short); display: block; font-size: 8px; line-height: 1.1; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hud #gadgetBar #forgeTornado b { font-size:8px; line-height:1.1; letter-spacing:.3px; } #hud #weaponBar .weapon-name[data-short] { flex-shrink: 0; min-height: 9px; } /* the selected tile's caret sits on its bottom edge instead of squeezing the name */ #hud #weaponBar .weapon-slot.active-weapon { position: relative; } #hud #weaponBar .weapon-slot.active-weapon::after { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); font-size: 8px; line-height: 1; } } /* Wider phones (landscape, over 700px): Essence and Salvage side by side on the top line, sound and pause beneath them, so Salvage no longer drops onto the button row. Narrower phones keep their own layout above. */ @media (max-height: 500px) and (pointer: coarse) and (min-width: 701px) { #hud > .hud-right { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: center; column-gap: 8px; row-gap: 4px; } } /* Pause menu: one even column. The card used to stretch to the modal width while each button sized to its own label (128-251px), and RESUME's extra bottom margin made the gaps uneven. */ #pauseOverlay .pause-card { width: min(340px, 88vw); max-width: 340px; padding: 22px 22px 24px; gap: 12px; align-items: stretch; text-align: center; } #pauseOverlay .pause-card .modal-title { margin: 0 0 4px; } #pauseOverlay .pause-card .big-btn { width: 100%; min-width: 0; margin: 0; min-height: 48px; padding: 12px 14px; font-size: 14px; letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-height: 500px) { #pauseOverlay .pause-card { width: min(320px, 88vw); padding: 14px 18px 16px; gap: 8px; } #pauseOverlay .pause-card .big-btn { min-height: 40px; padding: 9px 12px; font-size: 13px; } }