/* ================================================================ ASTRO CHICKENS — style.css Theme: Purple/Cyan gaming palette + Poppins font Fonts: Russo One (headings/buttons) · Exo 2 (body) · Orbitron (HUD score) Font loading: via Google Fonts CDN (declared in HTML ) ================================================================ */ :root { /* HUD theme variables — overridden by JS applyThemeHud() */ --hud-bar-bg: rgba(0, 0, 0, 0.55); --hud-bar-shadow: none; --hud-score-color: #ffffff; --hud-score-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); --hud-text-color: #ffffff; --hud-sub-color: rgba(255, 255, 255, 0.75); --hud-coins-color: #22d3ee; --hint-bar-bg: rgba(0, 0, 0, 0.88); --hint-bar-color: rgba(255, 255, 255, 0.6); --hint-kbd-bg: rgba(200, 200, 200, 0.1); --hint-kbd-border: rgba(200, 200, 200, 0.35); --hint-kbd-color: #cccccc; --hbtn-bg: rgba(0, 0, 0, 0.72); --hbtn-border: rgba(255, 255, 255, 0.18); --hbtn-color: rgba(255, 255, 255, 0.8); --ability-color: #22d3ee; --ability-wrap-bg: rgba(0, 0, 0, 0.45); --screen-title-color: #ffffff; --screen-sub-color: rgba(255, 255, 255, 0.75); --screen-prompt-color: rgba(255, 255, 255, 0.45); --screen-backdrop: rgba(4, 8, 15, 0.72); --screen-accent-color: rgba(6, 182, 212, 0.6); --screen-accent-dim: #06b6d4; --screen-btn-bg: rgba(6, 182, 212, 0.07); --screen-btn-border: rgba(6, 182, 212, 0.55); --screen-btn-color: rgba(6, 182, 212, 0.9); --screen-btn-ghost-border: rgba(255, 255, 255, 0.12); --screen-btn-ghost-color: rgba(255, 255, 255, 0.4); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; min-height: 100dvh; background: #04080f; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch; font-family: "Nunito", sans-serif; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } /* Allow body scroll ONLY when lobby is active on short screens */ body.lobby-scroll { overflow-y: auto; } button { font-family: "Nunito", sans-serif; cursor: pointer; border: none; outline: none; background: none; } /* ================================================================ WRAP — centers game at 60% screen width ================================================================ */ #wrap { position: fixed; inset: 0; display: flex; flex-direction: row; align-items: stretch; justify-content: center; background: #04080f; overflow: hidden; padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); max-height: 100dvh; box-sizing: border-box; } /* ── GAME HEADING BLOCK — hidden ── */ #game-heading-block { display: none; } /* ── GAME FRAME: full width by default ── */ #game-frame { display: flex; flex-direction: column; align-items: stretch; border: none; border-radius: 0; background: #04080f; box-shadow: none; overflow: hidden; width: 100%; max-width: 100%; flex: 0 0 100%; min-height: 0; } /* Side panels hidden by default */ #wrap::before, #wrap::after { content: ""; flex: 1; background: #04080f; display: none; } /* ── GAME COLUMN ── */ #game-column { display: flex; flex-direction: column; align-items: stretch; width: 100%; flex: 1; min-height: 0; } /* ── GAME VIEWPORT ── */ #game-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; } /* game-viewport border removed */ /* Mobile: full width below 768px */ @media (max-width: 768px) { #game-frame { width: 100%; max-width: 100%; flex: 0 0 100%; border-left: none; border-right: none; } #wrap::before, #wrap::after { display: none; } } #game-title-bar { display: none; } #game-title-tag { font-family: "Nunito", sans-serif; font-size: 0.48rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(6, 182, 212, 0.35); } /* ── CORNER BUTTONS — anchored to game frame ── */ .corner-btn { position: fixed; display: flex; align-items: center; gap: 6px; padding: clamp(6px, 1.2vh, 10px) clamp(10px, 2vw, 16px); font-family: "Nunito", sans-serif; font-size: clamp(0.62rem, 1.1vw, 0.78rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(6, 182, 212, 0.75); background: rgba(8, 12, 24, 0.85); border: 1px solid rgba(6, 182, 212, 0.2); border-radius: 6px; backdrop-filter: blur(6px); cursor: pointer; transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s; z-index: 50; white-space: nowrap; } .corner-btn svg { width: clamp(11px, 1.4vw, 14px); height: clamp(11px, 1.4vw, 14px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .corner-btn:hover { color: #06b6d4; border-color: rgba(6, 182, 212, 0.55); background: rgba(6, 182, 212, 0.08); box-shadow: 0 0 14px rgba(6, 182, 212, 0.18); } .corner-tl { top: max(env(safe-area-inset-top, 0px), clamp(8px, 1.5vh, 18px)); left: max(env(safe-area-inset-left, 0px), clamp(8px, 1.5vw, 18px)); } .corner-tr { top: max(env(safe-area-inset-top, 0px), clamp(8px, 1.5vh, 18px)); right: max(env(safe-area-inset-right, 0px), clamp(8px, 1.5vw, 18px)); } .corner-bl { bottom: max(env(safe-area-inset-bottom, 0px), clamp(8px, 1.5vh, 18px)); left: max(env(safe-area-inset-left, 0px), clamp(8px, 1.5vw, 18px)); } .corner-br { bottom: max(env(safe-area-inset-bottom, 0px), clamp(8px, 1.5vh, 18px)); right: max(env(safe-area-inset-right, 0px), clamp(8px, 1.5vw, 18px)); } #ext-btn-quit { color: rgba(239, 100, 100, 0.75); border-color: rgba(239, 80, 80, 0.2); } #ext-btn-quit:hover { color: #f87171; border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.08); box-shadow: 0 0 14px rgba(239, 68, 68, 0.18); } @media (max-width: 640px), (max-height: 420px) { .corner-btn span { display: none; } .corner-btn { padding: clamp(6px, 1.2vh, 9px) clamp(8px, 1.5vw, 12px); gap: 0; } } body:not(.game-active) .corner-btn { display: none; } @media (max-width: 768px), (pointer: coarse) { .corner-br, .corner-tr { display: none; } } canvas { display: block; width: 100%; height: 100%; cursor: pointer; } .hide { display: none !important; } /* ── KEY HINT BAR ── */ #key-hint-bar { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: auto; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 5px 18px; background: var(--hint-bar-bg, rgba(0, 0, 0, 0.55)); border-radius: 30px; font-family: "Nunito", sans-serif; font-size: clamp(0.62rem, 1.2vw, 0.78rem); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hint-bar-color, rgba(255, 255, 255, 0.9)); z-index: 12; pointer-events: none; white-space: nowrap; transition: background 0.3s ease, color 0.3s ease; } #key-hint-bar kbd { display: inline-block; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; font-family: "Nunito", sans-serif; font-size: clamp(0.62rem, 1.2vw, 0.78rem); font-weight: 700; margin-right: 3px; } @media (max-height: 480px) { #key-hint-bar { display: none; } } /* ── CONTROLLER PANEL ── */ #ctrl-panel { display: none; flex-shrink: 0; position: relative; z-index: 110; background: transparent; border-top: none; padding: clamp(8px, 1.5vh, 14px) 20px clamp(10px, 2vh, 18px); padding-bottom: max(env(safe-area-inset-bottom, 0px), clamp(10px, 2vh, 18px)); padding-left: max(env(safe-area-inset-left, 0px), 20px); padding-right: max(env(safe-area-inset-right, 0px), 20px); align-items: center; justify-content: space-between; gap: 12px; } @media (max-width: 768px), (pointer: coarse) { #ctrl-panel { display: flex; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.45); border-top: 1px solid rgba(255, 255, 255, 0.08); z-index: 15; } #key-hint-bar { display: none; } } @media (max-height: 420px) and (pointer: coarse) { #ctrl-panel { padding: 5px 14px 7px; gap: 8px; } .ctrl-tap { width: 44px; height: 44px; border-radius: 10px; } .ctrl-tap svg { width: 18px; height: 18px; } .ctrl-util { padding: 5px 10px; min-width: 72px; font-size: 0.52rem; } .ctrl-label { display: none; } } @media (max-height: 500px) and (orientation: landscape) { #key-hint-bar { display: none; } } @media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) { #ctrl-panel { padding: 4px max(env(safe-area-inset-right, 0px), 14px) 4px max(env(safe-area-inset-left, 0px), 14px); gap: 6px; } } /* ── LOBBY landscape phone ── */ @media (max-height: 500px) and (orientation: landscape) { #lobby { /* Content taller than 500px viewport → must scroll from top */ align-items: flex-start; justify-content: center; padding: max(env(safe-area-inset-top, 0px), 8px) max(env(safe-area-inset-right, 0px), 16px) max(env(safe-area-inset-bottom, 0px), 8px) max(env(safe-area-inset-left, 0px), 16px); } .lb-wrap { width: min(700px, calc(100vw - 32px)); margin: 0 auto; padding: 8px 0; } .lb-wrap::before { display: none; } .lb-ew { margin-bottom: 4px; } .lb-head { padding: 0 0 8px; margin-bottom: 8px; } .lb-mid { padding-bottom: 8px; } /* Landscape phones: keep two columns side by side */ #lb-face-lobby { flex-direction: row; align-items: flex-start; gap: 0; } .lb-vdiv { display: block; width: 1px; height: auto; margin: 0 12px; align-self: stretch; background: rgba(255, 255, 255, 0.06); } .lb-env-grid { grid-template-columns: 1fr 1fr; gap: 4px; } .lenv-canvas { height: 32px; } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); gap: 3px; } .lrkt-card { padding: 4px 2px 3px; } .lrkt-canvas { height: 24px; } .lb-foot { padding: 8px 0 0; gap: 8px; } } .ctrl-group { display: flex; flex-direction: column; align-items: center; gap: 6px; } .ctrl-center { gap: 8px; flex-direction: column; } .ctrl-label { font-family: "Nunito", sans-serif; font-size: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.25); } .ctrl-tap { width: 64px; height: 64px; border-radius: 14px; background: rgba(6, 182, 212, 0.08); border: 1.5px solid rgba(6, 182, 212, 0.3); color: rgba(6, 182, 212, 0.7); display: flex; align-items: center; justify-content: center; transition: all 0.12s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .ctrl-tap:active, .ctrl-tap:focus { background: rgba(6, 182, 212, 0.22); border-color: #06b6d4; color: #06b6d4; box-shadow: 0 0 20px rgba(6, 182, 212, 0.35); transform: scale(0.94); } .ctrl-tap svg { width: 24px; height: 24px; fill: currentColor; } .ctrl-lobby { background: rgba(52, 211, 153, 0.06); border-color: rgba(52, 211, 153, 0.25); color: rgba(52, 211, 153, 0.6); } .ctrl-lobby:active, .ctrl-lobby:focus { background: rgba(52, 211, 153, 0.18); border-color: #34d399; color: #34d399; box-shadow: 0 0 18px rgba(52, 211, 153, 0.3); } .ctrl-lobby svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .ctrl-ability { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.3); color: rgba(167, 139, 250, 0.7); } .ctrl-ability:active, .ctrl-ability:focus { background: rgba(167, 139, 250, 0.22); border-color: #a78bfa; color: #a78bfa; box-shadow: 0 0 20px rgba(167, 139, 250, 0.35); transform: scale(0.94); } .ctrl-ability svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ctrl-util { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.4); font-family: "Nunito", sans-serif; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; transition: all 0.14s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; white-space: nowrap; min-width: 90px; } .ctrl-util svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; } .ctrl-util:active { background: rgba(6, 182, 212, 0.1); border-color: rgba(6, 182, 212, 0.4); color: #06b6d4; } /* ================================================================ HUD ================================================================ */ #hud { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 10px 14px 8px; pointer-events: none; z-index: 10; background: transparent; transition: none; } #hud-score { font-family: "Orbitron", sans-serif; font-size: clamp(1.6rem, 4.5vw, 2.6rem); font-weight: 700; color: var(--hud-score-color, #ffffff); text-shadow: none; line-height: 1; transition: color 0.3s ease; } #hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-top: 4px; } #hud-best { font-family: "Nunito", sans-serif; font-size: 0.8rem; letter-spacing: 0.18em; color: var(--hud-text-color, #ffffff); text-shadow: none; text-transform: uppercase; transition: color 0.3s ease; } #hud-level { font-family: "Nunito", sans-serif; font-size: 0.55rem; letter-spacing: 0.18em; color: var(--hud-sub-color, rgba(255, 255, 255, 0.85)); text-shadow: none; text-transform: uppercase; transition: color 0.3s ease; } #hud-btns { position: absolute; bottom: clamp(8px, 1.5vh, 16px); right: clamp(8px, 1.5vw, 16px); display: flex; gap: 6px; z-index: 10; } .hbtn { width: clamp(28px, 4vw, 36px); height: clamp(28px, 4vw, 36px); border-radius: 6px; background: var(--hbtn-bg, rgba(0, 0, 0, 0.72)); border: 1px solid var(--hbtn-border, rgba(255, 255, 255, 0.18)); color: var(--hbtn-color, rgba(255, 255, 255, 0.8)); display: flex; align-items: center; justify-content: center; transition: all 0.18s; backdrop-filter: blur(6px); } .hbtn:hover { border-color: rgba(180, 180, 180, 0.8); color: #ffffff; background: rgba(150, 150, 150, 0.2); box-shadow: 0 0 14px rgba(180, 180, 180, 0.3); } .hbtn svg { width: clamp(12px, 2vw, 15px); height: clamp(12px, 2vw, 15px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Sound icon polygons must be filled, not just stroked */ #ico-sound-on polygon, #ico-sound-off polygon, #ctrl-ico-on polygon, #ctrl-ico-off polygon { fill: currentColor; stroke: none; } /* ================================================================ LEVEL TOAST ================================================================ */ #level-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "Orbitron", sans-serif; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; color: #06b6d4; text-shadow: 0 0 30px rgba(6, 182, 212, 0.7); letter-spacing: 0.2em; pointer-events: none; opacity: 0; z-index: 30; text-align: center; transition: opacity 0.3s; } @keyframes levelIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } } /* ================================================================ SCREENS ================================================================ */ .screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 16px calc(var(--ctrl-h, 0px) + env(safe-area-inset-bottom, 0px) + 16px); box-sizing: border-box; z-index: 120; gap: clamp(5px, 1.2vh, 10px); } .screen-backdrop { position: fixed; inset: 0; background: var(--screen-backdrop, rgba(4, 8, 15, 0.72)); backdrop-filter: blur(6px); } .screen > * { position: relative; z-index: 1; } .s-title { font-family: "Russo One", sans-serif; font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 400; color: var(--screen-title-color, #ffffff); letter-spacing: 0.06em; text-align: center; line-height: 1.1; text-shadow: none; } .s-sub { font-family: "Nunito", sans-serif; font-size: clamp(0.6rem, 1.6vw, 0.88rem); letter-spacing: 0.35em; color: var(--screen-sub-color, rgba(255, 255, 255, 0.75)); text-transform: uppercase; margin-bottom: 6px; } .s-div { width: 55%; display: flex; align-items: center; gap: 10px; margin: 4px 0; } .s-div-line { flex: 1; height: 1px; background: rgba(6, 182, 212, 0.2); } .s-div-gem { width: 5px; height: 5px; background: #888888; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); opacity: 0.6; } .s-prompt { font-family: "Nunito", sans-serif; font-size: clamp(0.72rem, 1.4vw, 0.9rem); letter-spacing: 0.22em; color: var(--screen-prompt-color, rgba(255, 255, 255, 0.55)); text-transform: uppercase; } .go-lbl { font-family: "Nunito", sans-serif; font-size: 0.7rem; letter-spacing: 0.28em; color: var(--screen-sub-color, rgba(255, 255, 255, 0.3)); text-transform: uppercase; } .go-score { font-family: "Orbitron", sans-serif; font-size: clamp(2.4rem, 8vw, 6rem); font-weight: 700; color: var(--screen-accent-dim, #06b6d4); text-shadow: none; line-height: 1; } .go-best { font-family: "Nunito", sans-serif; font-size: 0.8rem; letter-spacing: 0.22em; color: var(--screen-accent-color, rgba(6, 182, 212, 0.6)); text-transform: uppercase; margin-bottom: 4px; } .go-newbest { font-family: "Nunito", sans-serif; font-size: 0.58rem; letter-spacing: 0.22em; color: var(--screen-accent-dim, #06b6d4); text-transform: uppercase; text-shadow: none; display: none; margin-bottom: 2px; } .s-btn { padding: clamp(12px, 1.8vh, 16px) clamp(28px, 5vw, 48px); border: 1.5px solid var(--screen-btn-border, rgba(6, 182, 212, 0.55)); background: var(--screen-btn-bg, rgba(6, 182, 212, 0.07)); color: var(--screen-btn-color, rgba(6, 182, 212, 0.9)); font-family: "Nunito", sans-serif; font-size: clamp(0.72rem, 1.5vw, 0.88rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 10px; position: relative; overflow: hidden; transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.16s; display: flex; align-items: center; gap: 10px; width: min(300px, 82vw); justify-content: center; backdrop-filter: blur(6px); } .s-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(255, 106, 0, 0.18), rgba(6, 182, 212, 0.18) ); transform: scaleX(0); transform-origin: left; transition: transform 0.28s ease; } .s-btn:hover { border-color: rgba(6, 182, 212, 0.85); background: rgba(6, 182, 212, 0.14); color: #fff; box-shadow: 0 0 28px rgba(6, 182, 212, 0.28); transform: translateY(-2px); } .s-btn:hover::before { transform: scaleX(1); } .s-btn > * { position: relative; z-index: 1; } .s-btn svg { width: clamp(13px, 2vw, 16px); height: clamp(13px, 2vw, 16px); fill: currentColor; flex-shrink: 0; } .s-btn-ghost { padding: clamp(10px, 1.5vh, 14px) clamp(24px, 4vw, 40px); border: 1.5px solid var(--screen-btn-ghost-border, rgba(255, 255, 255, 0.12)); background: rgba(255, 255, 255, 0.02); color: var(--screen-btn-ghost-color, rgba(255, 255, 255, 0.4)); font-family: "Nunito", sans-serif; font-size: clamp(0.68rem, 1.3vw, 0.82rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 10px; transition: border-color 0.2s, color 0.2s, background 0.2s; display: flex; align-items: center; gap: 8px; width: min(300px, 82vw); justify-content: center; } .s-btn-ghost:hover { border-color: rgba(6, 182, 212, 0.35); color: rgba(6, 182, 212, 0.7); background: rgba(6, 182, 212, 0.05); } .s-btn-ghost svg { width: clamp(12px, 1.8vw, 15px); height: clamp(12px, 1.8vw, 15px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ================================================================ OVERLAYS ================================================================ */ .overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 8, 15, 0.75); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 200; } .overlay.show { opacity: 1; pointer-events: all; } .panel { background: linear-gradient(145deg, #0d1320, #080e18); border: 1px solid rgba(6, 182, 212, 0.18); border-radius: 8px; padding: clamp(14px, 2.5vh, 36px) clamp(14px, 3vw, 32px) clamp(12px, 2vh, 28px); width: min(320px, 92vw); max-width: 92vw; max-height: 90dvh; overflow-y: auto; text-align: center; position: relative; transform: translateY(12px); transition: transform 0.28s; box-sizing: border-box; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(6, 182, 212, 0.04); } .overlay.show .panel { transform: translateY(0); } .panel::before, .panel::after, .panel .p-br, .panel .p-bl { content: ""; position: absolute; width: 16px; height: 16px; border-color: rgba(6, 182, 212, 0.3); border-style: solid; } .panel::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; } .panel::after { top: 10px; right: 10px; border-width: 1px 1px 0 0; } .panel .p-br { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; } .panel .p-bl { bottom: 10px; left: 10px; border-width: 0 0 1px 1px; } .panel-icon { width: clamp(36px, 6vw, 52px); height: clamp(36px, 6vw, 52px); border-radius: 50%; border: 1px solid rgba(6, 182, 212, 0.2); background: rgba(6, 182, 212, 0.05); display: flex; align-items: center; justify-content: center; margin: 0 auto clamp(10px, 1.5vh, 16px); } .panel-icon svg { width: clamp(18px, 3vw, 24px); height: clamp(18px, 3vw, 24px); fill: none; stroke: rgba(6, 182, 212, 0.7); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .panel-title { font-family: "Orbitron", sans-serif; font-size: clamp(0.78rem, 2vw, 1.1rem); font-weight: 700; letter-spacing: 0.12em; color: #06b6d4; margin-bottom: clamp(2px, 0.4vh, 4px); text-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } .panel-sub { font-family: "Nunito", sans-serif; font-size: clamp(0.4rem, 1vw, 0.52rem); letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.25); text-transform: uppercase; margin-bottom: clamp(12px, 2vh, 20px); } .panel-x { position: absolute; top: 10px; right: 10px; width: clamp(30px, 4vw, 38px); height: clamp(30px, 4vw, 38px); border-radius: 7px; color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; transition: color 0.18s, background 0.18s; z-index: 10; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; } .panel-x svg { width: clamp(10px, 1.5vw, 14px); height: clamp(10px, 1.5vw, 14px); } .panel-x:hover { color: #06b6d4; background: rgba(6, 182, 212, 0.12); border-color: rgba(6, 182, 212, 0.25); } .p-btn { width: 100%; padding: clamp(8px, 1.4vh, 12px) clamp(10px, 2vw, 16px); border-radius: 4px; border: 1px solid rgba(6, 182, 212, 0.2); background: rgba(6, 182, 212, 0.04); color: rgba(6, 182, 212, 0.7); font-family: "Nunito", sans-serif; font-size: clamp(0.62rem, 1.4vw, 0.78rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: all 0.18s; box-sizing: border-box; } .p-btn:hover { background: rgba(6, 182, 212, 0.1); border-color: rgba(6, 182, 212, 0.5); color: #06b6d4; box-shadow: 0 0 18px rgba(6, 182, 212, 0.15); } .p-btn.primary { background: #666666; color: #ffffff; border-color: #666666; } .p-btn.primary:hover { background: rgba(6, 182, 212, 0.85); box-shadow: 0 0 24px rgba(6, 182, 212, 0.4); } .p-btn.danger { border-color: rgba(255, 60, 60, 0.25); color: rgba(200, 80, 80, 0.6); } .p-btn.danger:hover { border-color: rgba(255, 60, 60, 0.6); color: #e06060; background: rgba(200, 60, 60, 0.07); } .p-gap { height: clamp(4px, 1vh, 8px); } .toggle { width: clamp(32px, 5vw, 40px); height: clamp(17px, 2.5vw, 21px); border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); position: relative; transition: all 0.2s; flex-shrink: 0; } .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: clamp(11px, 1.8vw, 15px); height: clamp(11px, 1.8vw, 15px); border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: transform 0.2s, background 0.2s; } .toggle.on { background: rgba(6, 182, 212, 0.3); border-color: rgba(6, 182, 212, 0.5); } .toggle.on::after { transform: translateX(clamp(14px, 2.2vw, 19px)); background: #06b6d4; } .p-stack { display: flex; flex-direction: column; gap: clamp(5px, 1vh, 8px); width: 100%; } .p-row { display: flex; gap: clamp(5px, 1vw, 8px); width: 100%; } .p-row .p-btn { flex: 1; } /* Settings panel */ .settings-panel { max-width: min(420px, 96vw); width: 92%; padding: clamp(10px, 2vh, 20px) clamp(12px, 3.5vw, 24px) clamp(8px, 1.5vh, 16px); text-align: left; max-height: 72dvh; overflow-y: auto; } .settings-panel::-webkit-scrollbar { width: 3px; } .settings-panel::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.3); border-radius: 2px; } .sp-title { font-family: "Nunito", sans-serif; font-size: clamp(13px, 1.8vw, 18px); font-weight: 700; letter-spacing: 0.02em; color: #fff; margin-bottom: clamp(2px, 0.4vh, 4px); } .sp-sub { font-family: "Nunito", sans-serif; font-size: clamp(9px, 1.1vw, 12px); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.28); margin-bottom: clamp(8px, 1.2vh, 14px); } .sp-group-label { font-family: "Nunito", sans-serif; font-size: clamp(8px, 1vw, 10px); letter-spacing: 0.35em; text-transform: uppercase; color: rgba(6, 182, 212, 0.75); padding-bottom: clamp(3px, 0.4vh, 5px); margin-bottom: clamp(4px, 0.6vh, 7px); margin-top: clamp(7px, 1vh, 11px); border-bottom: 1px solid rgba(6, 182, 212, 0.15); } .sp-grid { display: flex; flex-direction: column; gap: 0; } .sp-row { display: flex; align-items: center; justify-content: space-between; padding: clamp(4px, 0.7vh, 7px) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .sp-row:last-child { border-bottom: none; } .sp-row-info { display: flex; flex-direction: column; gap: 1px; } .sp-lbl { font-family: "Nunito", sans-serif; font-size: clamp(11px, 1.5vw, 15px); font-weight: 600; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.75); } .sp-desc { font-family: "Nunito", sans-serif; font-size: clamp(9px, 1vw, 11px); color: rgba(255, 255, 255, 0.28); } .sp-pills { display: flex; gap: clamp(4px, 0.8vw, 6px); width: 100%; margin-top: clamp(2px, 0.3vh, 4px); } .sp-pill { flex: 1; padding: clamp(5px, 0.7vh, 7px) clamp(4px, 0.8vw, 6px); border-radius: 6px; border: 1px solid rgba(6, 182, 212, 0.18); background: rgba(255, 255, 255, 0.03); color: rgba(6, 182, 212, 0.45); font-family: "Nunito", sans-serif; font-size: clamp(10px, 1.2vw, 13px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all 0.16s; } .sp-pill:hover { border-color: rgba(6, 182, 212, 0.4); color: rgba(6, 182, 212, 0.8); } .sp-pill.active { border-color: #aaaaaa; background: rgba(200, 200, 200, 0.1); color: #ffffff; box-shadow: 0 0 10px rgba(200, 200, 200, 0.15); } .sp-hint { font-family: "Nunito", sans-serif; font-size: clamp(9px, 1vw, 11px); color: rgba(255, 255, 255, 0.25); margin: clamp(2px, 0.4vh, 4px) 0 0; } .toggle.on { background: rgba(6, 182, 212, 0.28); border-color: rgba(6, 182, 212, 0.55); } .toggle.on::after { transform: translateX(clamp(14px, 2.2vw, 19px)); background: #06b6d4; } /* ── COIN SYSTEM ── */ /* Lobby-only settings: visible only when settings opened from lobby */ .sp-lobby-only { display: contents; /* default: show all children normally */ } .settings-panel.gameplay-mode .sp-lobby-only { display: none; /* hide during gameplay */ } .sp-reset { width: 100%; margin-top: clamp(8px, 1.2vh, 12px); padding: clamp(7px, 1vh, 9px); border-radius: 6px; border: 1px solid rgba(239, 68, 68, 0.25); background: rgba(239, 68, 68, 0.05); color: rgba(239, 68, 68, 0.6); font-family: "Nunito", sans-serif; font-size: clamp(10px, 1.2vw, 13px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.18s; } .sp-reset:hover { border-color: rgba(239, 68, 68, 0.6); color: #f87171; background: rgba(239, 68, 68, 0.08); } .sp-save { width: 100%; margin-top: clamp(6px, 1vh, 9px); padding: clamp(8px, 1.2vh, 11px); border-radius: 6px; border: 1px solid rgba(6, 182, 212, 0.5); background: rgba(6, 182, 212, 0.12); color: #06b6d4; font-family: "Nunito", sans-serif; font-size: clamp(11px, 1.4vw, 14px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.18s; } .sp-save:hover { background: rgba(6, 182, 212, 0.22); border-color: #aaaaaa; box-shadow: 0 0 16px rgba(6, 182, 212, 0.2); } /* ── COIN SYSTEM ── */ .coin-val { color: #fde047; } /* ================================================================ LOBBY — Reduced width card ================================================================ */ :root { --lb-bg: #060810; --lb-em: #34d399; --lb-vi: #a78bfa; --lb-ro: #f472b6; --lb-dim: rgba(255, 255, 255, 0.22); --lb-faint: rgba(255, 255, 255, 0.06); } /* ================================================================ LOADING SCREEN ================================================================ */ /* ================================================================ LOADING SCREEN — full redesign ================================================================ */ #loading-screen { /* Iron-clad full-viewport overlay — nothing can clip this */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; /* Matches lobby background exactly — fully opaque to hide game frame */ background: linear-gradient( to bottom, rgba(0, 0, 0, 0.96) 0%, rgba(20, 20, 20, 0.92) 50%, rgba(0, 0, 0, 0.97) 100% ), url("../images/background.jpg") center center / cover no-repeat; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.5s ease; } #loading-screen.hidden { opacity: 0; pointer-events: none; visibility: hidden; } /* Inner content — no card, floats directly on the background */ .ld-wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.5vh, 20px); width: min(460px, calc(100vw - 40px)); text-align: center; } /* Progress bar area */ .ld-bar-area { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .ld-bar-track { width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(6, 182, 212, 0.18); overflow: hidden; position: relative; } .ld-bar-fill { height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, #333333, #888888, #dddddd, #ffffff); box-shadow: 0 0 14px rgba(255, 255, 255, 0.35); transition: width 0.12s linear; position: relative; } .ld-bar-fill::after { content: ""; position: absolute; right: -2px; top: -4px; bottom: -4px; width: 16px; background: rgba(255, 220, 100, 0.5); filter: blur(4px); border-radius: 2px; pointer-events: none; } .ld-bar-row { display: flex; align-items: center; justify-content: space-between; } .ld-bar-label { font-family: "Nunito", sans-serif; font-size: clamp(0.44rem, 1vw, 0.58rem); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.2); } .ld-bar-pct { font-family: "Nunito", sans-serif; font-size: clamp(0.52rem, 1.2vw, 0.68rem); letter-spacing: 0.2em; color: rgba(6, 182, 212, 0.7); } /* ================================================================ LOBBY SELECT BUTTONS (Themes / Rockets) ================================================================ */ .lb-section-select-btns { flex-direction: row !important; gap: clamp(12px, 2.5vw, 24px); } .lb-select-btn { display: flex; align-items: center; gap: 8px; padding: clamp(10px, 1.8vh, 14px) clamp(20px, 4vw, 36px); border-radius: 10px; border: 1px solid rgba(6, 182, 212, 0.4); background: rgba(6, 182, 212, 0.08); color: rgba(6, 182, 212, 0.85); font-family: "Nunito", sans-serif; font-size: clamp(0.72rem, 1.6vw, 0.92rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: transform 0.16s ease, border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s; backdrop-filter: blur(6px); white-space: nowrap; } .lb-select-btn svg { width: clamp(14px, 2.2vw, 18px); height: clamp(14px, 2.2vw, 18px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .lb-select-btn:hover { transform: translateY(-2px); border-color: rgba(6, 182, 212, 0.75); background: rgba(6, 182, 212, 0.16); box-shadow: 0 0 24px rgba(6, 182, 212, 0.22); color: #fff; } .lb-select-btn:active { transform: translateY(0); } /* ================================================================ FULL-PAGE OVERLAYS (Themes / Rockets / Info) ================================================================ */ .lb-overlay { position: fixed; inset: 0; z-index: 350; display: flex; align-items: stretch; justify-content: stretch; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(15, 15, 15, 0.9) 50%, rgba(0, 0, 0, 0.96) 100% ), url("../images/background.jpg") center center / cover no-repeat; opacity: 1; transition: opacity 0.3s ease; } .lb-overlay.hidden { opacity: 0; pointer-events: none; visibility: hidden; } .lb-overlay-inner { width: 100%; height: 100%; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .lb-overlay-inner--narrow { max-width: min(560px, 100vw); margin: 0 auto; } .lb-overlay-inner--wide { max-width: min(820px, 100vw); margin: 0 auto; } /* ── Overlay Header ── */ .lb-ov-header { display: flex; align-items: center; justify-content: space-between; padding: clamp(14px, 2.5vh, 24px) clamp(16px, 3vw, 32px); border-bottom: 1px solid rgba(6, 182, 212, 0.1); flex-shrink: 0; position: relative; } .lb-ov-back { display: flex; align-items: center; gap: 6px; color: rgba(6, 182, 212, 0.8); font-family: "Nunito", sans-serif; font-size: clamp(0.7rem, 1.5vw, 0.88rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 8px 12px; border-radius: 7px; border: 1px solid rgba(6, 182, 212, 0.25); background: rgba(6, 182, 212, 0.06); transition: border-color 0.18s, background 0.18s, color 0.18s; } .lb-ov-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .lb-ov-back:hover { border-color: rgba(6, 182, 212, 0.6); background: rgba(6, 182, 212, 0.12); color: #fff; } .lb-ov-coins { display: flex; align-items: center; gap: 6px; font-family: "Nunito", sans-serif; font-size: clamp(0.65rem, 1.3vw, 0.82rem); color: rgba(253, 224, 71, 0.85); letter-spacing: 0.1em; } .lb-ov-coins svg { color: rgba(253, 224, 71, 0.7); fill: currentColor; } /* ── Overlay Grid Wrapper ── */ .lb-ov-grid-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; padding: clamp(16px, 3vh, 28px) clamp(16px, 3vw, 32px) clamp(20px, 4vh, 36px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .lb-ov-grid-wrap::-webkit-scrollbar { width: 4px; } .lb-ov-grid-wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); } .lb-ov-grid-wrap::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.3); border-radius: 2px; } /* Override env-grid / rkt-grid sizes inside overlay */ #ov-themes .lb-ov-grid-wrap, #ov-rockets .lb-ov-grid-wrap { max-width: 100%; margin: 0; width: 100%; box-sizing: border-box; } #ov-themes .env-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } #ov-rockets .rkt-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (min-width: 480px) { #ov-themes .env-grid { grid-template-columns: repeat(4, 1fr); } #ov-rockets .rkt-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 680px) { #ov-themes .env-grid { grid-template-columns: repeat(5, 1fr); } #ov-rockets .rkt-grid { grid-template-columns: repeat(5, 1fr); } } /* ================================================================ INFO POPUP ================================================================ */ .info-popup-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: clamp(16px, 3vh, 28px) clamp(20px, 4vw, 40px) clamp(20px, 4vh, 40px); display: flex; flex-direction: column; gap: clamp(16px, 3vh, 24px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .info-game-logo { text-align: center; } .info-game-logo .lb-title { font-size: clamp(1.8rem, 5vw, 3rem); } .info-divider { width: 60%; height: 1px; margin: 0 auto; background: linear-gradient( 90deg, transparent, rgba(6, 182, 212, 0.35), transparent ); } .info-section { display: flex; flex-direction: column; gap: 12px; } .info-section-title { font-family: "Nunito", sans-serif; font-size: clamp(0.55rem, 1.3vw, 0.72rem); letter-spacing: 0.5em; text-transform: uppercase; color: rgba(6, 182, 212, 0.8); margin-bottom: 4px; } .info-row { display: flex; align-items: flex-start; gap: 14px; } .info-icon { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(6, 182, 212, 0.2); background: rgba(6, 182, 212, 0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgba(6, 182, 212, 0.8); } .info-icon svg { width: 14px; height: 14px; fill: none; stroke: rgba(6, 182, 212, 0.8); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .info-icon svg[fill="currentColor"] { fill: rgba(6, 182, 212, 0.8); stroke: none; } .info-text { font-family: "Nunito", sans-serif; font-size: clamp(0.78rem, 1.5vw, 0.95rem); font-weight: 500; color: rgba(255, 255, 255, 0.65); line-height: 1.5; padding-top: 6px; } .info-text strong { color: rgba(6, 182, 212, 0.9); font-weight: 700; } .info-controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .info-ctrl-row { display: flex; align-items: center; gap: 10px; font-family: "Nunito", sans-serif; font-size: clamp(0.72rem, 1.3vw, 0.88rem); font-weight: 600; color: rgba(255, 255, 255, 0.55); } .info-ctrl-row kbd { display: inline-block; padding: 3px 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(6, 182, 212, 0.8); font-family: "Nunito", sans-serif; font-size: clamp(0.58rem, 1.1vw, 0.72rem); letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0; } .info-footer { font-family: "Nunito", sans-serif; font-size: clamp(0.46rem, 1vw, 0.58rem); letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255, 255, 255, 0.15); text-align: center; padding-top: 8px; } /* ================================================================ NEW FULL-PAGE LOBBY ================================================================ */ #lobby { position: fixed; inset: 0; z-index: 300; display: flex; align-items: stretch; justify-content: stretch; background: linear-gradient( 135deg, rgba(0, 0, 0, 0.88) 0%, rgba(20, 20, 20, 0.92) 40%, rgba(10, 10, 10, 0.9) 70%, rgba(0, 0, 0, 0.85) 100% ), url("../images/background.jpg") center center / cover no-repeat; opacity: 1; transition: opacity 0.4s ease; padding: 0; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #lobby.hidden { opacity: 0; pointer-events: none; visibility: hidden; } /* ── FULL PAGE LAYOUT ── */ .lb-fullpage { width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: clamp(52px, 10vh, 110px) 20px clamp(52px, 10vh, 110px); box-sizing: border-box; } .lb-section { display: flex; flex-direction: column; align-items: center; justify-content: center; } .lb-section-logo { gap: 8px; text-align: center; width: 100%; } .lb-section-play { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } .lb-section-select-btns { flex-direction: row !important; gap: clamp(12px, 2.5vw, 24px); } .lb-section-icons { flex-direction: row; gap: clamp(16px, 3vw, 32px); } .lb-section-bottom { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.5vh, 28px); } .lb-big-play { width: clamp(130px, 22vw, 190px); height: clamp(130px, 22vw, 190px); border-radius: 50%; border: 3px solid rgba(6, 182, 212, 0.7); background: radial-gradient( circle at 38% 38%, rgba(255, 160, 40, 0.35) 0%, rgba(6, 150, 200, 0.25) 60%, rgba(100, 20, 0, 0.15) 100% ); box-shadow: 0 0 40px rgba(6, 182, 212, 0.35), 0 0 80px rgba(6, 182, 212, 0.15), inset 0 2px 0 rgba(100, 230, 250, 0.2), inset 0 -2px 0 rgba(0, 50, 80, 0.25); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease; position: relative; } .lb-big-play::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(6, 182, 212, 0.2); animation: lbPlayPulse 2.4s ease-in-out infinite; } @keyframes lbPlayPulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.1; transform: scale(1.08); } } .lb-big-play svg { width: clamp(48px, 9vw, 76px); height: clamp(48px, 9vw, 76px); color: #67e8f9; fill: #67e8f9; margin-left: 6%; filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6)); } .lb-big-play:hover { transform: scale(1.07); border-color: #999999; box-shadow: 0 0 60px rgba(6, 182, 212, 0.55), 0 0 120px rgba(6, 182, 212, 0.25), inset 0 2px 0 rgba(255, 200, 100, 0.35), inset 0 -2px 0 rgba(100, 30, 0, 0.3); } .lb-big-play:active { transform: scale(0.97); } /* ── SMALL ICON BUTTONS ── */ .lb-icon-btn { width: clamp(52px, 9vw, 72px); height: clamp(52px, 9vw, 72px); border-radius: 50%; border: 1px solid rgba(6, 182, 212, 0.35); background: rgba(6, 182, 212, 0.08); color: rgba(6, 182, 212, 0.8); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s ease, border-color 0.2s, background 0.2s, box-shadow 0.2s; backdrop-filter: blur(6px); } .lb-icon-btn svg { width: clamp(20px, 3.5vw, 28px); height: clamp(20px, 3.5vw, 28px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .lb-icon-btn:hover { transform: scale(1.1); border-color: rgba(6, 182, 212, 0.7); background: rgba(6, 182, 212, 0.16); box-shadow: 0 0 20px rgba(6, 182, 212, 0.25); color: #fff; } /* ── LOBBY SOUND BUTTON — muted state ── */ #lb-btn-sound .lb-sound-off { display: none; } #lb-btn-sound.muted .lb-sound-on { display: none; } #lb-btn-sound.muted .lb-sound-off { display: block; } #lb-btn-sound.muted { color: rgba(255, 100, 100, 0.7); border-color: rgba(255, 80, 80, 0.35); background: rgba(255, 50, 50, 0.08); } #lb-btn-sound.muted:hover { color: #f87171; border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.12); box-shadow: 0 0 20px rgba(239, 68, 68, 0.2); } .lb-icon-btn:active { transform: scale(0.95); } /* ── HEAD (kept for .lb-ew etc used in lobby and loading screen) ── */ .lb-head { padding: 0 0 clamp(12px, 2vh, 24px); text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: clamp(12px, 2vh, 24px); } .lb-ew { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; } .lb-ew-line { flex: 1; max-width: 44px; height: 1px; background: linear-gradient(to right, transparent, rgba(52, 211, 153, 0.3)); } .lb-ew-line:last-child { background: linear-gradient(to left, transparent, rgba(167, 139, 250, 0.3)); } .lb-ew-txt { font-family: "Nunito", sans-serif; font-size: clamp(0.55rem, 1.2vw, 0.8rem); letter-spacing: 0.8em; text-transform: uppercase; color: #fff; white-space: nowrap; } .lb-title { font-family: "Nunito", sans-serif; font-size: clamp(2rem, 6vw, 5rem); font-weight: 400; letter-spacing: 0.04em; line-height: 1; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: #ffffff; background-clip: unset; color: #ffffff; margin-bottom: 6px; } .lb-tag { font-family: "Nunito", sans-serif; font-size: clamp(0.55rem, 1.2vw, 0.8rem); letter-spacing: 0.4em; text-transform: uppercase; color: #fff; } /* ── MID ── */ .lb-mid { /* Flip container: both faces live inside here, overflow clipped */ display: flex; position: relative; overflow: hidden; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 0; /* Height: let the lobby-face set the natural height; store-face is absolute */ } .lb-col { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; } .lb-col-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; } .lb-col-num { font-family: "Nunito", sans-serif; font-size: clamp(0.26rem, 0.8vw, 0.34rem); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.14); } .lb-col-label { font-family: "Nunito", sans-serif; font-size: clamp(0.5rem, 1.1vw, 0.66rem); letter-spacing: 0.5em; text-transform: uppercase; color: #fff; } .lb-vdiv { width: 1px; background: rgba(255, 255, 255, 0.05); margin: 0 16px; flex-shrink: 0; align-self: stretch; } /* ── ENV GRID ── */ .lb-env-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .lenv-card { border-radius: 7px; overflow: hidden; cursor: pointer; position: relative; border: 1px solid rgba(255, 255, 255, 0.05); transition: border-color 0.18s, transform 0.15s; } .lenv-card:hover { border-color: rgba(255, 255, 255, 0.15); transform: scale(1.025); } .lenv-card.active { border-color: var(--ec, #34d399); } .lenv-card.active::after { content: ""; position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ec, #34d399); pointer-events: none; } .lenv-canvas { display: block; width: 100%; height: clamp(50px, 7vh, 80px); } .lenv-label { padding: 4px 8px 6px; background: rgba(0, 0, 0, 0.6); font-family: "Nunito", sans-serif; font-size: clamp(8px, 1.2vw, 11px); font-weight: 600; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.5); transition: color 0.18s; } .lenv-card.active .lenv-label { color: var(--ec, #34d399); } /* ── ROCKET ROW ── */ .lb-rocket-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .lrkt-card { border-radius: 7px; cursor: pointer; position: relative; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.015); padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: border-color 0.18s, background 0.18s, transform 0.15s; } .lrkt-card:hover { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); transform: translateY(-2px); } .lrkt-card.active { border-color: var(--rc, #34d399); background: rgba(52, 211, 153, 0.05); } .lrkt-dot { position: absolute; top: 5px; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--rc, #34d399); display: none; } .lrkt-card.active .lrkt-dot { display: block; } .lrkt-canvas { display: block; width: 100%; height: clamp(36px, 5vh, 52px); object-fit: contain; } .lrkt-name { font-family: "Nunito", sans-serif; font-size: clamp(7px, 1vw, 9px); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-align: center; } .lrkt-card.active .lrkt-name { color: var(--rc, #34d399); } /* ── FOOT ── */ .lb-foot { display: flex; flex-direction: column; /* stats row on top, launch button full-width below */ align-items: stretch; padding: clamp(12px, 2.5vh, 24px) 0 0; gap: clamp(10px, 1.8vh, 16px); } .lb-stats { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 20px); flex-shrink: 1; min-width: 0; flex-wrap: wrap; } .lb-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; } .lb-stat-val { font-family: "Nunito", sans-serif; font-size: clamp(0.75rem, 1.5vw, 1rem); font-weight: 700; color: #34d399; line-height: 1; } .lb-stat-lbl { font-family: "Nunito", sans-serif; font-size: clamp(0.5rem, 1.1vw, 0.8rem); letter-spacing: 0.3em; text-transform: uppercase; color: #fff; } .lb-stat-div { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.07); } #l-diff-val.diff-normal { color: #34d399; } #l-diff-val.diff-hard { color: #06b6d4; } #l-diff-val.diff-insane { color: #f43f5e; } /* ── LAUNCH ── */ .lb-launch { flex: 1; /* Taller, more prominent — proper CTA button */ height: clamp(44px, 6vh, 52px); min-height: 44px; /* WCAG touch target */ border-radius: 8px; cursor: pointer; border: 1px solid rgba(6, 182, 212, 0.6); background: linear-gradient( 135deg, rgba(6, 182, 212, 0.22) 0%, rgba(6, 182, 212, 0.1) 100% ); color: #67e8f9; font-family: "Nunito", sans-serif; font-size: clamp(0.7rem, 1.6vw, 0.9rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s, transform 0.14s; box-shadow: 0 0 24px rgba(6, 182, 212, 0.12), inset 0 1px 0 rgba(255, 160, 0, 0.1); } .lb-launch:hover { border-color: #aaaaaa; background: rgba(6, 182, 212, 0.28); box-shadow: 0 0 32px rgba(6, 182, 212, 0.28); color: #fff; transform: translateY(-1px); } .lb-launch:active { transform: translateY(0); } @keyframes lbShimmer { 0% { left: -80%; } 100% { left: 160%; } } .lb-launch::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.06), transparent ); animation: lbShimmer 2.4s ease-in-out infinite; pointer-events: none; } /* ── Lobby gear — fixed so it stays visible when lobby scrolls on short screens ── */ .lb-gear { position: fixed; top: max(env(safe-area-inset-top, 0px), 14px); right: max(env(safe-area-inset-right, 0px), 14px); z-index: 310; width: 32px; height: 32px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.28); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.18s; } .lb-gear:hover { border-color: rgba(52, 211, 153, 0.4); color: rgba(52, 211, 153, 0.8); background: rgba(52, 211, 153, 0.06); box-shadow: 0 0 12px rgba(52, 211, 153, 0.1); } .lb-gear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ── DIFFICULTY CHIP ── */ #l-diff-val.diff-normal { color: #34d399; } #l-diff-val.diff-hard { color: #06b6d4; } #l-diff-val.diff-insane { color: #f43f5e; } /* ── RESPONSIVE ── */ /* Tablet / large screen: ensure lb-wrap fills available width gracefully */ @media (max-width: 1024px) and (min-width: 768px) { .lb-wrap { width: min(680px, calc(100vw - 32px)); } } @media (max-width: 767px) { .lb-wrap { width: min(640px, calc(100vw - 32px)); margin: auto; /* center on mobile, don't push right */ } .lb-wrap::before { margin-bottom: 16px; } .lb-head { padding: 0 0 14px; margin-bottom: 14px; } .lb-mid { padding-bottom: 12px; } .lb-env-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .lenv-canvas { height: 48px; } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); gap: 6px; } .lrkt-card { padding: 8px 4px 6px; } .lrkt-canvas { width: 100%; height: 36px; } .lb-foot { padding: 12px 0 0; flex-direction: column; gap: 10px; } .lb-stats { justify-content: center; gap: 10px; } } @media (max-width: 480px) { .lb-wrap { width: 100%; margin: auto; padding: 12px 16px 20px; padding-top: max(env(safe-area-inset-top, 0px), 12px); padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px); box-sizing: border-box; gap: 0; } .lb-wrap::before { margin-bottom: 12px; width: 60%; } .lb-head { padding: 0 0 12px; margin-bottom: 12px; } .lb-ew { margin-bottom: 8px; } .lb-mid { padding-bottom: 10px; } .lb-vdiv { margin: 10px 0; } .lb-col { gap: 6px; } .lb-col-hd { margin-bottom: 0; } .lb-env-grid { grid-template-columns: 1fr 1fr; gap: 5px; } .lenv-canvas { height: 44px; } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); gap: 4px; } .lrkt-card { padding: 6px 2px 5px; gap: 2px; } .lrkt-canvas { width: 100%; height: 32px; } .lrkt-dot { width: 3px; height: 3px; top: 4px; right: 4px; } .lb-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0 0; } .lb-stats { justify-content: center; gap: 0; } .lb-stat { flex: 1; padding: 6px 0; } .lb-stat-div { height: 28px; } .lb-gear { top: max(env(safe-area-inset-top, 0px), 10px); right: max(env(safe-area-inset-right, 0px), 10px); } } @media (max-width: 360px) { .lb-wrap { padding: 12px 12px 16px; padding-top: max(env(safe-area-inset-top, 0px), 12px); padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px); } .lb-env-grid { grid-template-columns: 1fr 1fr; gap: 4px; } .lenv-canvas { height: 38px; } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); gap: 3px; } .lrkt-canvas { height: 26px; } } /* Locked states */ .lenv-card.locked, .lrkt-card.locked { opacity: 0.75; cursor: pointer; position: relative; } .lenv-card.locked .lenv-canvas { filter: brightness(0.45) grayscale(0.4); } .lrkt-card.locked .lrkt-canvas { filter: brightness(0.35) grayscale(0.5); } .lenv-lock { position: absolute; top: 0; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; } .lenv-lock .lock-icon { font-size: clamp(10px, 1.5vw, 14px); line-height: 1; } .lenv-lock .lock-cost { font-family: "Nunito", sans-serif; font-size: clamp(8px, 1vw, 10px); font-weight: 700; color: #fde047; letter-spacing: 0.04em; } .lrkt-lock { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-family: "Nunito", sans-serif; font-size: clamp(7px, 0.9vw, 9px); font-weight: 700; color: #fde047; letter-spacing: 0.04em; background: rgba(0, 0, 0, 0.65); padding: 1px 4px; border-radius: 3px; pointer-events: none; white-space: nowrap; } .lenv-card.locked:hover, .lrkt-card.locked:hover { opacity: 1; box-shadow: 0 0 12px rgba(253, 224, 71, 0.2); border-color: rgba(253, 224, 71, 0.3); } /* ================================================================ LB-MID FLIP CONTAINER — in-place store transition, no overflow ================================================================ */ /* Both faces sit in the same grid cell */ .lb-face { display: flex; width: 100%; min-width: 0; transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } /* Lobby face — row layout (cols side by side) */ #lb-face-lobby { flex-direction: row; align-items: flex-start; gap: 0; opacity: 1; transform: translateX(0); pointer-events: all; } /* Store face — column layout (bar on top, grid below) */ #lb-face-store { flex-direction: column; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateX(28px); pointer-events: none; background: rgba(4, 8, 15, 0.55); backdrop-filter: blur(2px); border-radius: 7px; padding: 4px; } /* When store is open */ .lb-mid.store-open #lb-face-lobby { opacity: 0; transform: translateX(-28px); pointer-events: none; } .lb-mid.store-open #lb-face-store { opacity: 1; transform: translateX(0); pointer-events: all; } /* ── RESPONSIVE: lb-face-lobby column stacking ── These MUST come after the base #lb-face-lobby rule to override it correctly */ /* Portrait tablets + mobile (≤767px): stack env + rocket columns vertically */ @media (max-width: 767px) { #lb-face-lobby { flex-direction: column; align-items: stretch; gap: 12px; } .lb-vdiv { display: none; } } /* Landscape phones (≤500px tall): restore side-by-side columns */ @media (max-height: 500px) and (orientation: landscape) { #lb-face-lobby { flex-direction: row; align-items: flex-start; gap: 0; } .lb-vdiv { display: block; } } /* ── Store bar (back + title + coins) ── */ .lb-store-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 8px; flex-shrink: 0; } .lb-store-back { display: flex; align-items: center; gap: 4px; background: none; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; padding: 4px 9px 4px 6px; color: rgba(255, 255, 255, 0.7); font-family: "Nunito", sans-serif; font-size: clamp(0.48rem, 1vw, 0.62rem); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; } .lb-store-back:hover { border-color: rgba(6, 182, 212, 0.5); color: rgba(6, 182, 212, 0.9); } .lb-store-back svg { flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; } .lb-store-bar-title { font-family: "Nunito", sans-serif; font-size: clamp(0.9rem, 2.2vw, 1.5rem); letter-spacing: 0.12em; color: #fff; text-align: center; flex: 1; padding: 0 8px; } .lb-store-bar-coins { display: flex; align-items: center; gap: 4px; font-family: "Nunito", sans-serif; font-size: clamp(0.48rem, 1vw, 0.62rem); color: #fde047; letter-spacing: 0.06em; flex-shrink: 0; } .lb-store-bar-coins svg { fill: #fde047; } /* ── Scrollable grid area — key: fills remaining height, never overflows ── */ .lb-store-grid-wrap { flex: 1; min-height: 0; /* critical for flex child to shrink */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-right: 2px; /* breathing room for scrollbar */ } .lb-store-grid-wrap::-webkit-scrollbar { width: 3px; } .lb-store-grid-wrap::-webkit-scrollbar-track { background: transparent; } .lb-store-grid-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; } /* ── Toast inside store face ── */ .lb-store-toast { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); background: rgba(20, 14, 4, 0.95); border: 1px solid rgba(6, 182, 212, 0.35); border-radius: 5px; padding: 6px 14px; font-family: "Nunito", sans-serif; font-size: clamp(0.48rem, 1vw, 0.62rem); letter-spacing: 0.12em; color: rgba(6, 182, 212, 0.9); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 10; } .lb-store-toast.show { opacity: 1; transform: translateX(-50%) translateY(-8px); } .lb-store-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; width: 100%; font-family: "Nunito", sans-serif; font-size: clamp(0.46rem, 0.9vw, 0.58rem); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(6, 182, 212, 0.85); border: 1px solid rgba(6, 182, 212, 0.35); background: rgba(6, 182, 212, 0.12); padding: clamp(4px, 0.8vh, 6px) 10px; border-radius: 5px; cursor: pointer; transition: all 0.15s; } .lb-store-link:hover { color: #fff; border-color: rgba(6, 182, 212, 0.7); background: rgba(6, 182, 212, 0.25); } /* ================================================================ AD MODAL ================================================================ */ /* #ad-modal now uses .lb-overlay for all base styling (bg, position, flex, transition). Only override what's unique: z-index to sit above other overlays. */ #ad-modal { z-index: 600; /* Remove background from base state — only apply when open to avoid keeping background.jpg in the compositor while the game is running */ background: none; } /* Restore full background only when the modal is actually open */ #ad-modal:not(.hidden) { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(15, 15, 15, 0.9) 50%, rgba(0, 0, 0, 0.96) 100% ), url("../images/background.jpg") center center / cover no-repeat; } /* Use display:none when hidden so it's fully out of the render tree */ #ad-modal.hidden { display: none !important; visibility: visible; } /* Ad skip button disabled state — keep visible during countdown */ #ad-skip-btn:disabled { opacity: 0.75; cursor: not-allowed; color: rgba(6, 182, 212, 0.6); border-color: rgba(6, 182, 212, 0.3); } /* Ensure span inside button inherits all button text styles */ #ad-skip-btn #ad-skip-txt { font-size: inherit; font-weight: inherit; font-family: inherit; letter-spacing: inherit; } /* Ad modal content — iframe centered, rows aligned like info popup */ .ad-content-wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.5vh, 24px); width: 100%; max-width: min(560px, 100%); padding: clamp(4px, 1vh, 8px) 0; } #ad-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: none; background: transparent; border-radius: 6px; } .ad-why-rows { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 18px); width: 100%; } .s-btn-reward { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(300px, 82vw); padding: clamp(13px, 2vh, 18px) clamp(28px, 5vw, 48px); border-radius: 10px; cursor: pointer; font-family: "Nunito", sans-serif; font-size: clamp(0.72rem, 1.5vw, 0.88rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #04080f; background: linear-gradient(135deg, #333333, #777777, #cccccc); border: none; box-shadow: 0 0 24px rgba(6, 182, 212, 0.45), 0 4px 16px rgba(6, 182, 212, 0.25); transition: all 0.2s; } .s-btn-reward:hover { box-shadow: 0 0 40px rgba(6, 182, 212, 0.65), 0 6px 24px rgba(6, 182, 212, 0.35); transform: translateY(-2px); } .s-btn-reward svg { width: clamp(13px, 2vw, 16px); height: clamp(13px, 2vw, 16px); fill: currentColor; } .s-btn-reward:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* ================================================================ COMPACT HEIGHT — Laptop screens (768px tall or less) This is the PRIMARY fix for the CodeCanyon rejection. On screens like 1366×768, the lobby must compress gracefully. ================================================================ */ /* ================================================================ COMPACT HEIGHT — Laptop screens (≤ 768px tall) The most common rejection scenario: 1366×768, 1920×1080 scaled, 13" MacBook. This compresses spacing so everything fits in one view. ================================================================ */ @media (max-height: 768px) { .lb-wrap::before { margin-bottom: 12px; } .lb-head { padding: 0 0 clamp(8px, 1.5vh, 16px); margin-bottom: clamp(8px, 1.5vh, 16px); } .lb-ew { margin-bottom: 6px; } .lb-title { font-size: clamp(1.4rem, 4.5vw, 3rem); } .lenv-canvas { height: clamp(42px, 6vh, 60px); } .lrkt-canvas { height: clamp(28px, 4vh, 42px); } .lb-foot { padding: clamp(8px, 1.5vh, 14px) 0 0; } .lb-launch { height: clamp(40px, 5vh, 48px); min-height: 40px; } .lb-stat-val { font-size: clamp(0.68rem, 1.3vw, 0.9rem); } .lb-stat-lbl { font-size: clamp(0.44rem, 0.9vw, 0.62rem); } } /* ================================================================ VERY SHORT — phones in landscape, small windows (≤ 560px tall) Content stacks compactly; gaps tighten further. ================================================================ */ @media (max-height: 560px) { .lb-wrap { padding-bottom: 12px; gap: 0; } .lb-wrap::before { display: none; } .lb-head { padding: 0 0 8px; margin-bottom: 8px; } .lb-ew { margin-bottom: 4px; } .lb-title { font-size: clamp(1.2rem, 3.5vw, 2.2rem); margin-bottom: 3px; } .lb-mid { padding-bottom: 8px; } .lb-col { gap: 5px; } .lenv-canvas { height: clamp(34px, 5vh, 48px); } .lrkt-canvas { height: clamp(22px, 3.5vh, 34px); } .lb-foot { padding: 8px 0 0; } .lb-launch { height: 40px; min-height: 40px; font-size: clamp(0.62rem, 1.5vw, 0.78rem); } .lb-stat-val { font-size: 0.7rem; } .lb-stat-lbl { font-size: 0.44rem; letter-spacing: 0.2em; } .lb-stat-div { height: 20px; } } /* ================================================================ STAT BAR — overflow protection on any screen ================================================================ */ .lb-stats { flex-wrap: wrap; min-width: 0; } .lb-stat { min-width: 0; text-align: center; } .lb-stat-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; } /* ── Store link: always tap-safe ── */ .lb-store-link { min-height: 32px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ================================================================ ENVATO RESPONSIVE PATCH — Home Screen Adaptive Layout Fixes: vertical centering, column stacking, narrow viewports, landscape phones, ultra-wide screens, and all in-between. ================================================================ */ /* ── 1. LOBBY: already set to align-items:center in main rule. Only override for short viewports where card exceeds screen height ── */ @media (max-height: 699px) and (orientation: portrait) { #lobby { align-items: flex-start; padding-top: max(env(safe-area-inset-top, 0px), 16px); } } /* ── 2. LB-WRAP: centered by default; offset right only on large desktop ── */ .lb-wrap { width: min(680px, calc(100vw - 32px)); max-width: 680px; box-sizing: border-box; } /* On very large desktop only (≥1441px), push card right via flexbox on parent */ @media (min-width: 1441px) { #lobby { justify-content: flex-end; } } /* 769px–1440px: centering baseline — overridden by 5-breakpoint system later */ @media (min-width: 769px) and (max-width: 1440px) { .lb-wrap { margin: auto; } } /* Tablet range: give the card a bit more breathing room */ @media (min-width: 481px) and (max-width: 767px) { .lb-wrap { width: min(560px, calc(100vw - 32px)); } /* Stack the mid columns on tablet portrait too — target lb-face-lobby, not lb-mid */ #lb-face-lobby { flex-direction: column; align-items: stretch; gap: 12px; } .lb-vdiv { display: none; } .lb-col { width: 100%; } /* Foot: stack stats + button vertically */ .lb-foot { flex-direction: column; align-items: stretch; gap: 10px; } .lb-stats { justify-content: center; } .lb-launch { width: 100%; height: clamp(38px, 6vh, 44px); } } /* ── 3. NARROW PHONES (≤ 400px): rocket grid → 3 columns ── */ @media (max-width: 400px) { .lb-rocket-row { grid-template-columns: repeat(3, 1fr); gap: 4px; } .lrkt-canvas { height: 30px; } } /* ── 4. VERY NARROW (≤ 320px): single column env grid ── */ @media (max-width: 320px) { .lb-env-grid { grid-template-columns: 1fr; gap: 5px; } .lenv-canvas { height: 40px; } .lb-rocket-row { grid-template-columns: repeat(2, 1fr); } .lb-wrap { padding: 10px 10px 16px; padding-top: max(env(safe-area-inset-top, 0px), 10px); } } /* ── 5. LANDSCAPE PHONES (short & wide) ── */ @media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) { .lb-wrap { width: min(800px, calc(100vw - 32px)); } /* Two-column layout for landscape phones — target lb-face-lobby */ #lb-face-lobby { flex-direction: row; align-items: flex-start; gap: 0; } .lb-vdiv { display: block; width: 1px; height: auto; margin: 0 12px; background: rgba(255, 255, 255, 0.05); } .lb-env-grid { grid-template-columns: repeat(2, 1fr); } .lenv-canvas { height: 36px; } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); } .lrkt-canvas { height: 28px; } .lb-head { padding: 0 0 8px; margin-bottom: 8px; } .lb-foot { padding: 6px 0 0; } .lb-launch { height: 32px; } } /* ── 6. LARGE DESKTOP: loosen width slightly ── */ @media (min-width: 1200px) { .lb-wrap { width: min(720px, calc(100vw - 32px)); max-width: 720px; } } /* ── 7. STAT BAR: prevent overflow at any size ── */ .lb-stats { flex-wrap: wrap; gap: clamp(6px, 2vw, 14px); min-width: 0; justify-content: center; } .lb-stat-val { font-size: clamp(0.65rem, 2.5vw, 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; } .lb-stat-lbl { font-size: clamp(0.42rem, 1.5vw, 0.7rem); } /* ── 8. STORE LINK: always readable ── */ .lb-store-link { font-size: clamp(0.52rem, 1.5vw, 0.72rem); white-space: nowrap; } /* ── 9. LAUNCH BUTTON: always full-width on small screens ── */ @media (max-width: 480px) { .lb-launch { width: 100%; flex: unset; } } /* ── 10. COLUMN HEADERS: readable at all sizes ── */ .lb-col-label { font-size: clamp(0.44rem, 1.5vw, 0.66rem); letter-spacing: clamp(0.15em, 0.5vw, 0.5em); } .lb-ew-txt { font-size: clamp(0.48rem, 1.2vw, 0.72rem); letter-spacing: clamp(0.3em, 1vw, 0.8em); } /* ── 11. LOCK ICON on cards: scale with card ── */ .lenv-lock, .lrkt-lock { font-size: clamp(10px, 1.5vw, 14px); } /* ================================================================ COMPREHENSIVE RESPONSIVE SYSTEM — Full Font + UI Scaling Breakpoints: Desktop large : ≥ 1200px wide Desktop medium : 1024px – 1199px Laptop : 768px – 1023px (also height ≤ 768px) Tablet/iPad : 481px – 767px Mobile large : 401px – 480px Mobile medium : 361px – 400px Mobile small : ≤ 360px Height breakpoints: Short laptop : height ≤ 768px Very short : height ≤ 560px Landscape phone: height ≤ 500px + landscape ================================================================ */ /* ── ROOT FONT SCALE — base rem for each tier ── */ :root { --fs-base: 16px; /* Shared font-size tokens — all components reference these */ --fs-hud-score: clamp(1.5rem, 4vw, 2.6rem); --fs-hud-best: clamp(0.65rem, 1.4vw, 0.8rem); --fs-hud-level: clamp(0.48rem, 1vw, 0.58rem); --fs-lobby-title: clamp(1.6rem, 5vw, 4rem); --fs-lobby-tag: clamp(0.48rem, 1.1vw, 0.75rem); --fs-lobby-ew: clamp(0.48rem, 1.1vw, 0.75rem); --fs-lobby-col-label: clamp(0.44rem, 1.4vw, 0.66rem); --fs-lobby-stat-val: clamp(0.68rem, 1.5vw, 1rem); --fs-lobby-stat-lbl: clamp(0.42rem, 1.2vw, 0.72rem); --fs-launch-btn: clamp(0.65rem, 1.5vw, 0.9rem); --fs-corner-btn: clamp(0.58rem, 1vw, 0.78rem); --fs-panel-title: clamp(0.75rem, 1.8vw, 1.1rem); --fs-panel-sub: clamp(0.38rem, 0.9vw, 0.52rem); --fs-s-title: clamp(1rem, 2.8vw, 1.6rem); --fs-go-score: clamp(2.2rem, 7vw, 6rem); --fs-level-toast: clamp(1.2rem, 3.5vw, 2rem); --fs-ctrl-label: clamp(0.42rem, 0.9vw, 0.52rem); --fs-ctrl-util: clamp(0.5rem, 1.1vw, 0.6rem); --fs-key-hint: clamp(0.5rem, 1.1vw, 0.6rem); --fs-store-link: clamp(0.44rem, 0.9vw, 0.58rem); --fs-lenv-label: clamp(8px, 1.2vw, 11px); --fs-lrkt-name: clamp(6px, 0.9vw, 9px); --fs-sp-title: clamp(13px, 1.8vw, 18px); --fs-sp-lbl: clamp(11px, 1.5vw, 15px); --fs-sp-pill: clamp(10px, 1.2vw, 13px); } /* Apply tokens to elements */ #hud-score { font-size: var(--fs-hud-score); } #hud-best { font-size: var(--fs-hud-best); } #hud-level { font-size: var(--fs-hud-level); } .lb-title { font-size: var(--fs-lobby-title); } .lb-tag { font-size: var(--fs-lobby-tag); } .lb-ew-txt { font-size: var(--fs-lobby-ew); } .lb-col-label { font-size: var(--fs-lobby-col-label); } .lb-stat-val { font-size: var(--fs-lobby-stat-val); } .lb-stat-lbl { font-size: var(--fs-lobby-stat-lbl); } .lb-launch { font-size: var(--fs-launch-btn); } .corner-btn { font-size: var(--fs-corner-btn); } .panel-title { font-size: var(--fs-panel-title); } .panel-sub { font-size: var(--fs-panel-sub); } .s-title { font-size: var(--fs-s-title); } .go-score { font-size: var(--fs-go-score); } #level-toast { font-size: var(--fs-level-toast); } .ctrl-label { font-size: var(--fs-ctrl-label); } .ctrl-util { font-size: var(--fs-ctrl-util); } #key-hint-bar { font-size: var(--fs-key-hint); } #key-hint-bar kbd { font-size: var(--fs-key-hint); } .lb-store-link { font-size: var(--fs-store-link); } .lenv-label { font-size: var(--fs-lenv-label); } .lrkt-name { font-size: var(--fs-lrkt-name); } .sp-title { font-size: var(--fs-sp-title); } .sp-lbl { font-size: var(--fs-sp-lbl); } .sp-pill { font-size: var(--fs-sp-pill); } /* ================================================================ DESKTOP LARGE ≥ 1200px ================================================================ */ @media (min-width: 1200px) { :root { --fs-hud-score: clamp(2rem, 3vw, 2.6rem); --fs-lobby-title: clamp(2.8rem, 4.5vw, 4rem); --fs-lobby-stat-val: clamp(0.85rem, 1.2vw, 1rem); --fs-lobby-stat-lbl: clamp(0.55rem, 0.9vw, 0.72rem); --fs-launch-btn: clamp(0.78rem, 1.2vw, 0.9rem); --fs-go-score: clamp(4rem, 6vw, 6rem); } .lb-wrap { width: min(720px, calc(100vw - 32px)); max-width: 720px; } /* ── Popups / Modals ── */ .panel { width: min(360px, 88vw); padding: clamp(18px, 3vh, 40px) clamp(18px, 3.5vw, 36px) clamp(14px, 2.5vh, 32px); } .settings-panel { max-width: 460px; width: 88%; } .s-btn { width: min(280px, 75vw); } .s-btn-reward { max-width: 220px; font-size: 0.82rem; } #ad-modal-inner { width: min(320px, 96vw); } #ad-frame { height: 250px; } } /* ================================================================ DESKTOP MEDIUM 1024px – 1199px ================================================================ */ @media (min-width: 1024px) and (max-width: 1199px) { :root { --fs-hud-score: clamp(1.7rem, 3.5vw, 2.4rem); --fs-lobby-title: clamp(2rem, 4vw, 3.2rem); --fs-lobby-stat-val: clamp(0.75rem, 1.3vw, 0.95rem); --fs-launch-btn: clamp(0.72rem, 1.3vw, 0.88rem); --fs-go-score: clamp(3rem, 6vw, 5rem); } .lb-wrap { width: min(680px, calc(100vw - 32px)); } /* ── Popups / Modals ── */ .panel { width: min(340px, 88vw); } .settings-panel { max-width: 440px; width: 88%; } .s-btn { width: min(265px, 78vw); } #ad-modal-inner { width: min(320px, 96vw); } } @media (min-width: 768px) and (max-width: 1023px) { :root { --fs-hud-score: clamp(1.5rem, 3.5vw, 2.2rem); --fs-lobby-title: clamp(1.8rem, 4.5vw, 3rem); --fs-lobby-tag: clamp(0.46rem, 1.1vw, 0.7rem); --fs-lobby-ew: clamp(0.46rem, 1.1vw, 0.7rem); --fs-lobby-stat-val: clamp(0.7rem, 1.4vw, 0.9rem); --fs-lobby-stat-lbl: clamp(0.42rem, 1.1vw, 0.65rem); --fs-launch-btn: clamp(0.66rem, 1.4vw, 0.84rem); --fs-corner-btn: clamp(0.56rem, 1vw, 0.72rem); --fs-s-title: clamp(0.95rem, 2.5vw, 1.45rem); --fs-go-score: clamp(2.4rem, 6vw, 4.5rem); --fs-level-toast: clamp(1.1rem, 3.2vw, 1.8rem); --fs-sp-title: clamp(12px, 1.6vw, 16px); --fs-sp-lbl: clamp(10px, 1.3vw, 14px); } .lb-wrap { width: min(640px, calc(100vw - 32px)); } #hud { padding: 10px 14px 0; } /* ── Popups / Modals ── */ .panel { width: min(320px, 90vw); } .panel-title { letter-spacing: 0.11em; } .settings-panel { max-width: 420px; width: 90%; padding: clamp(12px, 2.5vh, 24px) clamp(12px, 3vw, 24px) clamp(10px, 2vh, 20px); } .s-btn { width: min(250px, 80vw); } .go-score { font-size: clamp(2.2rem, 6.5vw, 4.5rem); } #ad-modal-inner { width: min(320px, 96vw); } } @media (max-height: 768px) and (min-width: 768px) { :root { --fs-lobby-title: clamp(1.4rem, 4vw, 2.8rem); --fs-lobby-stat-val: clamp(0.64rem, 1.2vw, 0.88rem); --fs-lobby-stat-lbl: clamp(0.4rem, 0.9vw, 0.6rem); --fs-launch-btn: clamp(0.6rem, 1.3vw, 0.82rem); --fs-lenv-label: clamp(7px, 1.1vw, 10px); --fs-lrkt-name: clamp(6px, 0.9vw, 8px); } .lb-head { padding: 0 0 clamp(6px, 1.2vh, 14px); margin-bottom: clamp(6px, 1.2vh, 14px); } .lb-ew { margin-bottom: 5px; } .lb-mid { padding-bottom: clamp(8px, 1.2vh, 14px); } .lb-foot { padding: clamp(6px, 1.2vh, 12px) 0 0; } .lb-launch { height: clamp(38px, 5vh, 48px); min-height: 38px; } .lenv-canvas { height: clamp(40px, 6vh, 64px); } .lrkt-canvas { height: clamp(26px, 4vh, 42px); } .lb-stat-div { height: 20px; } /* ── Popups / Modals ── */ .panel { max-height: 86dvh; overflow-y: auto; } .settings-panel { max-height: 85dvh; padding: clamp(10px, 2vh, 22px) clamp(12px, 2.5vw, 26px) clamp(8px, 1.8vh, 18px); } .screen { gap: clamp(4px, 0.9vh, 8px); } .s-div { margin: 2px 0; } .s-btn-reward { padding: 8px 16px; } } @media (min-width: 481px) and (max-width: 767px) { :root { --fs-hud-score: clamp(1.4rem, 4.5vw, 2rem); --fs-hud-best: clamp(0.62rem, 1.5vw, 0.78rem); --fs-lobby-title: clamp(1.5rem, 5.5vw, 2.6rem); --fs-lobby-tag: clamp(0.46rem, 1.2vw, 0.68rem); --fs-lobby-ew: clamp(0.46rem, 1.2vw, 0.68rem); --fs-lobby-col-label: clamp(0.42rem, 1.3vw, 0.62rem); --fs-lobby-stat-val: clamp(0.68rem, 2vw, 0.9rem); --fs-lobby-stat-lbl: clamp(0.42rem, 1.2vw, 0.62rem); --fs-launch-btn: clamp(0.62rem, 1.6vw, 0.82rem); --fs-corner-btn: clamp(0.54rem, 1.2vw, 0.7rem); --fs-panel-title: clamp(0.7rem, 2vw, 1rem); --fs-s-title: clamp(0.9rem, 3vw, 1.3rem); --fs-go-score: clamp(2rem, 7vw, 3.5rem); --fs-level-toast: clamp(1rem, 3.5vw, 1.6rem); --fs-ctrl-util: clamp(0.46rem, 1.2vw, 0.58rem); --fs-store-link: clamp(0.42rem, 1.1vw, 0.56rem); --fs-lenv-label: clamp(8px, 1.3vw, 10px); --fs-lrkt-name: clamp(6px, 1vw, 8px); --fs-sp-title: clamp(12px, 1.8vw, 15px); --fs-sp-lbl: clamp(10px, 1.5vw, 13px); --fs-sp-pill: clamp(9px, 1.3vw, 12px); } /* Layout adjustments */ .lb-wrap { width: min(560px, calc(100vw - 32px)); } #lb-face-lobby { flex-direction: column; align-items: stretch; gap: 12px; } .lb-vdiv { display: none; } .lb-col { width: 100%; } .lb-foot { flex-direction: column; align-items: stretch; gap: 10px; } .lb-stats { justify-content: center; } .lb-launch { width: 100%; height: clamp(40px, 5.5vh, 48px); min-height: 40px; } .lenv-canvas { height: clamp(44px, 6.5vh, 62px); } .lrkt-canvas { height: clamp(30px, 4.5vh, 44px); } /* Game screen fonts */ #hud { padding: 10px 14px 0; } #hud-score { font-size: clamp(1.4rem, 4.5vw, 2rem); } #hud-right { margin-top: 2px; } /* Ctrl panel */ .ctrl-tap { width: 58px; height: 58px; border-radius: 12px; } .ctrl-tap svg { width: 22px; height: 22px; } /* Screen overlays */ .s-sub { font-size: clamp(0.44rem, 1.4vw, 0.7rem); } .go-lbl { font-size: clamp(0.58rem, 1.5vw, 0.72rem); } .go-best { font-size: clamp(0.68rem, 1.6vw, 0.82rem); } .s-btn { width: min(240px, 78vw); font-size: clamp(0.6rem, 1.4vw, 0.72rem); } .s-btn-ghost { font-size: clamp(0.68rem, 1.5vw, 0.78rem); letter-spacing: 0.14em; } .s-btn-reward { font-size: 0.74rem; max-width: 190px; padding: 9px 18px; } .go-score { letter-spacing: 0; line-height: 1; } .s-title { letter-spacing: 0.03em; } .screen { gap: clamp(4px, 1vh, 8px); } .panel { width: min(300px, 88vw); max-height: 88dvh; overflow-y: auto; } .p-btn { font-size: clamp(0.6rem, 1.5vw, 0.76rem); padding: clamp(8px, 1.4vh, 11px) clamp(10px, 2vw, 15px); } .settings-panel { width: min(400px, 92vw); max-height: 88dvh; padding: clamp(12px, 2.5vh, 22px) clamp(12px, 3vw, 22px) clamp(10px, 2vh, 18px); } .sp-reset, .sp-save { font-size: clamp(10px, 1.6vw, 13px); padding: clamp(9px, 1.4vh, 11px); } .sp-pill { padding: clamp(5px, 0.9vh, 7px) clamp(5px, 1vw, 7px); } #ad-modal-inner { width: min(320px, 96vw); } #ad-label { font-size: 0.55rem; } #ad-skip-btn { font-size: 0.6rem; padding: 4px 9px; } #ad-footer-txt { font-size: 0.5rem; } #ad-frame { height: 250px; } } @media (min-width: 401px) and (max-width: 480px) { :root { --fs-hud-score: clamp(1.3rem, 5vw, 1.8rem); --fs-hud-best: clamp(0.58rem, 1.6vw, 0.72rem); --fs-hud-level: clamp(0.44rem, 1.1vw, 0.54rem); --fs-lobby-title: clamp(1.4rem, 6.5vw, 2.2rem); --fs-lobby-tag: clamp(0.44rem, 1.3vw, 0.62rem); --fs-lobby-ew: clamp(0.44rem, 1.3vw, 0.62rem); --fs-lobby-col-label: clamp(0.4rem, 1.3vw, 0.58rem); --fs-lobby-stat-val: clamp(0.62rem, 3vw, 0.85rem); --fs-lobby-stat-lbl: clamp(0.38rem, 1.4vw, 0.58rem); --fs-launch-btn: clamp(0.6rem, 1.8vw, 0.76rem); --fs-corner-btn: clamp(0.52rem, 1.2vw, 0.66rem); --fs-s-title: clamp(0.85rem, 3.5vw, 1.2rem); --fs-go-score: clamp(1.8rem, 8vw, 3rem); --fs-level-toast: clamp(0.95rem, 4vw, 1.4rem); --fs-ctrl-util: clamp(0.44rem, 1.3vw, 0.56rem); --fs-lenv-label: clamp(7px, 1.5vw, 10px); --fs-lrkt-name: clamp(6px, 1.2vw, 8px); --fs-sp-title: clamp(11px, 2vw, 14px); --fs-sp-lbl: clamp(10px, 1.8vw, 13px); --fs-sp-pill: clamp(9px, 1.5vw, 11px); --fs-store-link: clamp(0.4rem, 1.2vw, 0.54rem); } .lb-wrap { width: 100%; padding: 14px 16px 18px; padding-top: max(env(safe-area-inset-top, 0px), 14px); padding-bottom: max(env(safe-area-inset-bottom, 0px), 18px); box-sizing: border-box; } .lb-wrap::before { margin-bottom: 10px; width: 55%; } .lb-head { padding: 0 0 12px; margin-bottom: 12px; } .lb-ew { margin-bottom: 7px; } .lb-mid { padding-bottom: 10px; } .lb-vdiv { margin: 9px 0; } .lb-col { gap: 6px; } .lb-col-hd { margin-bottom: 0; } .lenv-canvas { height: 44px; } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); gap: 4px; } .lrkt-canvas { height: 32px; } .lb-foot { flex-direction: column; gap: 10px; padding: 12px 0 0; } .lb-stats { justify-content: center; gap: 0; } .lb-stat { flex: 1; padding: 5px 0; } .lb-stat-div { height: 24px; } .lb-launch { width: 100%; flex: unset; height: clamp(42px, 5.5vh, 48px); } /* Game HUD */ #hud { padding: 9px 12px 0; } .hbtn { width: clamp(26px, 5vw, 32px); height: clamp(26px, 5vw, 32px); } /* Touch controls */ .ctrl-tap { width: 60px; height: 60px; border-radius: 12px; } .ctrl-tap svg { width: 22px; height: 22px; } /* Screens */ .s-btn { width: min(220px, 82vw); font-size: clamp(0.58rem, 1.5vw, 0.7rem); } .s-btn-ghost { font-size: 0.68rem; letter-spacing: 0.13em; padding: 0.5em 1.6em; } .s-btn-reward { font-size: 0.7rem; max-width: 180px; padding: 8px 15px; } .s-title { letter-spacing: 0.02em; } .go-score { letter-spacing: 0; line-height: 1; margin: 0; } .s-div { width: 60%; margin: 2px 0; } .screen { gap: clamp(3px, 0.8vh, 7px); padding: 12px 14px calc(var(--ctrl-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px); } .panel { width: min(280px, 90vw); max-height: 87dvh; overflow-y: auto; padding: 14px 14px 12px; } .panel-title { letter-spacing: 0.09em; } .p-btn { font-size: clamp(0.58rem, 1.5vw, 0.72rem); } .p-row { gap: clamp(4px, 1vw, 7px); } .settings-panel { width: 94%; max-height: 87dvh; padding: clamp(11px, 2.5vh, 18px) clamp(11px, 3vw, 18px) clamp(9px, 1.8vh, 15px); } .sp-title { letter-spacing: 0.01em; } .sp-group-label { letter-spacing: 0.28em; } .sp-reset, .sp-save { font-size: clamp(10px, 1.8vw, 12px); padding: clamp(8px, 1.3vh, 10px); } .sp-row { padding: clamp(5px, 0.9vh, 8px) 0; } .sp-pills { gap: clamp(3px, 0.7vw, 5px); } #ad-modal-inner { width: min(320px, 96vw); } #ad-label { font-size: 0.54rem; } #ad-skip-btn { font-size: 0.58rem; padding: 3px 8px; } #ad-footer-txt { font-size: 0.48rem; } #ad-frame { height: 250px; } } @media (min-width: 361px) and (max-width: 400px) { :root { --fs-hud-score: clamp(1.2rem, 5.5vw, 1.6rem); --fs-hud-best: clamp(0.54rem, 1.7vw, 0.68rem); --fs-hud-level: clamp(0.42rem, 1.1vw, 0.52rem); --fs-lobby-title: clamp(1.2rem, 7vw, 2rem); --fs-lobby-tag: clamp(0.42rem, 1.4vw, 0.58rem); --fs-lobby-ew: clamp(0.42rem, 1.4vw, 0.58rem); --fs-lobby-col-label: clamp(0.38rem, 1.3vw, 0.54rem); --fs-lobby-stat-val: clamp(0.58rem, 3.5vw, 0.8rem); --fs-lobby-stat-lbl: clamp(0.36rem, 1.4vw, 0.54rem); --fs-launch-btn: clamp(0.56rem, 2vw, 0.72rem); --fs-corner-btn: clamp(0.5rem, 1.2vw, 0.62rem); --fs-s-title: clamp(0.8rem, 3.8vw, 1.1rem); --fs-go-score: clamp(1.6rem, 9vw, 2.8rem); --fs-level-toast: clamp(0.9rem, 4.5vw, 1.3rem); --fs-ctrl-util: clamp(0.42rem, 1.4vw, 0.54rem); --fs-lenv-label: clamp(7px, 1.7vw, 9px); --fs-lrkt-name: clamp(5px, 1.3vw, 7px); --fs-sp-title: clamp(11px, 2.2vw, 13px); --fs-sp-lbl: clamp(9px, 1.9vw, 12px); --fs-sp-pill: clamp(8px, 1.6vw, 10px); --fs-store-link: clamp(0.38rem, 1.2vw, 0.52rem); } .lb-wrap { width: 100%; padding: 12px 14px 16px; padding-top: max(env(safe-area-inset-top, 0px), 12px); padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px); box-sizing: border-box; } .lb-wrap::before { display: none; } .lb-head { padding: 0 0 10px; margin-bottom: 10px; } .lb-ew { margin-bottom: 6px; } .lb-mid { padding-bottom: 8px; } .lb-vdiv { margin: 8px 0; } .lb-col { gap: 5px; } .lenv-canvas { height: 40px; } .lb-rocket-row { grid-template-columns: repeat(3, 1fr); gap: 4px; } .lrkt-canvas { height: 30px; } .lb-foot { flex-direction: column; gap: 8px; padding: 10px 0 0; } .lb-stats { gap: 0; } .lb-stat { flex: 1; padding: 5px 0; } .lb-stat-div { height: 22px; } .lb-launch { width: 100%; flex: unset; height: 42px; } /* Controls */ .ctrl-tap { width: 56px; height: 56px; border-radius: 11px; } .ctrl-tap svg { width: 20px; height: 20px; } /* HUD */ #hud { padding: 8px 10px 0; } #hud-right { margin-top: 2px; } /* Screen overlays */ .s-btn { width: min(200px, 84vw); font-size: 0.64rem; padding: 0.5em 1.5em; } .s-btn-ghost { font-size: 0.64rem; letter-spacing: 0.12em; padding: 0.48em 1.4em; } .s-btn-reward { font-size: 0.68rem; max-width: 172px; padding: 8px 13px; } .s-title { letter-spacing: 0.02em; } .go-score { letter-spacing: 0; line-height: 1; margin: 0; } .s-div { width: 62%; margin: 2px 0; } .screen { gap: clamp(3px, 0.7vh, 6px); padding: 10px 12px calc(var(--ctrl-h, 0px) + env(safe-area-inset-bottom, 0px) + 10px); } .panel { width: min(264px, 92vw); padding: 12px 12px 10px; max-height: 86dvh; overflow-y: auto; } .panel-title { letter-spacing: 0.08em; } .p-btn { font-size: clamp(0.56rem, 1.5vw, 0.7rem); padding: clamp(7px, 1.2vh, 10px) clamp(8px, 1.5vw, 13px); } .p-gap { height: clamp(3px, 0.8vh, 6px); } .p-row { gap: clamp(4px, 1vw, 6px); } .go-lbl { font-size: 0.6rem; } .go-best { font-size: 0.64rem; } .s-sub { letter-spacing: 0.3em; } .settings-panel { width: 95%; max-height: 86dvh; padding: 11px 11px 10px; } .sp-reset, .sp-save { font-size: clamp(9px, 1.8vw, 11px); } .sp-row { padding: 5px 0; } .sp-pill { padding: 5px 4px; } #ad-modal-inner { width: 94vw; } #ad-label { font-size: 0.5rem; } #ad-skip-btn { font-size: 0.56rem; padding: 3px 7px; } #ad-footer-txt { font-size: 0.46rem; } #ad-frame { height: 250px; } } @media (max-width: 360px) { :root { --fs-hud-score: clamp(1.1rem, 6vw, 1.4rem); --fs-hud-best: clamp(0.5rem, 1.8vw, 0.62rem); --fs-hud-level: clamp(0.4rem, 1.1vw, 0.5rem); --fs-lobby-title: clamp(1.1rem, 7.5vw, 1.7rem); --fs-lobby-tag: clamp(0.4rem, 1.5vw, 0.54rem); --fs-lobby-ew: clamp(0.4rem, 1.5vw, 0.54rem); --fs-lobby-col-label: clamp(0.36rem, 1.4vw, 0.5rem); --fs-lobby-stat-val: clamp(0.54rem, 4vw, 0.72rem); --fs-lobby-stat-lbl: clamp(0.34rem, 1.4vw, 0.5rem); --fs-launch-btn: clamp(0.52rem, 2.2vw, 0.68rem); --fs-corner-btn: clamp(0.48rem, 1.3vw, 0.6rem); --fs-s-title: clamp(0.75rem, 4vw, 1rem); --fs-go-score: clamp(1.4rem, 10vw, 2.4rem); --fs-level-toast: clamp(0.85rem, 5vw, 1.2rem); --fs-ctrl-util: clamp(0.4rem, 1.5vw, 0.52rem); --fs-lenv-label: clamp(6px, 1.8vw, 9px); --fs-lrkt-name: clamp(5px, 1.4vw, 7px); --fs-sp-title: clamp(10px, 2.4vw, 12px); --fs-sp-lbl: clamp(9px, 2vw, 11px); --fs-sp-pill: clamp(8px, 1.8vw, 10px); --fs-store-link: clamp(0.36rem, 1.3vw, 0.5rem); --fs-panel-title: clamp(0.68rem, 2.2vw, 0.88rem); } .lb-wrap { width: 100%; padding: 10px 10px 14px; padding-top: max(env(safe-area-inset-top, 0px), 10px); padding-bottom: max(env(safe-area-inset-bottom, 0px), 14px); box-sizing: border-box; } .lb-wrap::before { display: none; } .lb-head { padding: 0 0 8px; margin-bottom: 8px; } .lb-ew { margin-bottom: 5px; } .lb-mid { padding-bottom: 6px; } .lb-vdiv { margin: 7px 0; } .lb-col { gap: 4px; } .lb-env-grid { grid-template-columns: 1fr 1fr; gap: 4px; } .lenv-canvas { height: 36px; } .lb-rocket-row { grid-template-columns: repeat(3, 1fr); gap: 3px; } .lrkt-card { padding: 5px 2px 4px; gap: 2px; } .lrkt-canvas { height: 26px; } .lrkt-dot { width: 3px; height: 3px; top: 3px; right: 3px; } .lb-foot { flex-direction: column; gap: 7px; padding: 8px 0 0; } .lb-stats { gap: 0; } .lb-stat { flex: 1; padding: 4px 0; } .lb-stat-div { height: 20px; } .lb-launch { width: 100%; flex: unset; height: 40px; min-height: 40px; letter-spacing: 0.1em; } .lb-gear { top: max(env(safe-area-inset-top, 0px), 8px); right: max(env(safe-area-inset-right, 0px), 8px); width: 28px; height: 28px; } .lb-gear svg { width: 12px; height: 12px; } .lb-store-link { padding: 3px 7px; } /* Touch controls */ .ctrl-tap { width: 50px; height: 50px; border-radius: 10px; } .ctrl-tap svg { width: 18px; height: 18px; } .ctrl-util { padding: 5px 9px; min-width: 68px; gap: 4px; } #ctrl-panel { padding: 6px 10px 8px; gap: 7px; } /* HUD */ #hud { padding: 7px 9px 0; } #hud-right { margin-top: 1px; } #hud-btns { bottom: 6px; right: 6px; gap: 4px; } /* Screen overlays */ .s-btn { width: min(190px, 86vw); font-size: 0.62rem; padding: 0.5em 1.4em; } .s-btn-ghost { font-size: 0.62rem; letter-spacing: 0.1em; padding: 0.45em 1.2em; } .s-btn-reward { font-size: 0.64rem; max-width: 160px; padding: 8px 12px; } .s-title { letter-spacing: 0.01em; } .go-score { letter-spacing: 0; line-height: 1; margin: 0; } .go-lbl { font-size: 0.56rem; letter-spacing: 0.18em; } .go-best { font-size: 0.58rem; letter-spacing: 0.18em; } .go-newbest { font-size: 0.52rem; } .s-sub { font-size: 0.44rem; letter-spacing: 0.25em; } .s-div { width: 65%; margin: 1px 0; } .s-prompt { font-size: 0.68rem; letter-spacing: 0.22em; } .screen { gap: clamp(2px, 0.6vh, 5px); padding: 9px 10px calc(var(--ctrl-h, 0px) + env(safe-area-inset-bottom, 0px) + 9px); } .panel { width: min(250px, 94vw); padding: 12px 10px 10px; max-height: 85dvh; overflow-y: auto; } .panel-title { font-size: 0.7rem; letter-spacing: 0.06em; } .panel-sub { font-size: 0.38rem; letter-spacing: 0.16em; } .panel-icon { width: clamp(30px, 7vw, 40px); height: clamp(30px, 7vw, 40px); margin-bottom: clamp(7px, 1.2vh, 12px); } .panel-icon svg { width: clamp(14px, 3.5vw, 19px); height: clamp(14px, 3.5vw, 19px); } .p-btn { font-size: clamp(0.54rem, 1.6vw, 0.66rem); padding: clamp(6px, 1.1vh, 9px) clamp(8px, 1.5vw, 12px); } .p-gap { height: 3px; } .p-row { gap: 4px; } /* Settings */ .settings-panel { width: 96%; max-height: 85dvh; padding: 10px 10px 10px; } .sp-sub { letter-spacing: 0.06em; } .sp-group-label { letter-spacing: 0.22em; } .sp-row { padding: 5px 0; } .sp-reset, .sp-save { font-size: clamp(9px, 2vw, 11px); padding: 8px; gap: 5px; } /* Ad modal */ #ad-modal-inner { width: 96vw; } #ad-modal-header { padding: 6px 10px; } #ad-label { font-size: 0.46rem; } #ad-skip-btn { font-size: 0.54rem; padding: 3px 7px; } #ad-footer-txt { font-size: 0.44rem; } #ad-frame { height: 250px; } } /* ================================================================ VERY SHORT VIEWPORT height ≤ 500px (landscape phones) ================================================================ */ @media (max-height: 500px) and (orientation: landscape) { :root { --fs-lobby-title: clamp(1rem, 3.5vw, 1.8rem); --fs-lobby-stat-val: clamp(0.56rem, 1.2vw, 0.75rem); --fs-lobby-stat-lbl: clamp(0.36rem, 0.9vw, 0.52rem); --fs-launch-btn: clamp(0.54rem, 1.3vw, 0.7rem); --fs-hud-score: clamp(1.2rem, 3.5vw, 1.7rem); --fs-hud-best: clamp(0.54rem, 1.2vw, 0.66rem); } .lb-wrap::before { display: none; } .lb-head { padding: 0 0 6px; margin-bottom: 6px; } .lb-ew { margin-bottom: 3px; } .lb-mid { flex-direction: row; padding-bottom: 6px; } .lb-vdiv { width: 1px; height: auto; margin: 0 10px; background: rgba(255, 255, 255, 0.05); } .lenv-canvas { height: clamp(30px, 5vh, 42px); } .lrkt-canvas { height: clamp(22px, 4vh, 32px); } .lb-foot { padding: 5px 0 0; gap: 6px; } .lb-launch { height: 32px; min-height: 32px; } .lb-stat-div { height: 16px; } .lb-stat-val { font-size: 0.6rem; } .lb-stat-lbl { font-size: 0.36rem; } /* Touch ctrl */ .ctrl-tap { width: 44px; height: 44px; border-radius: 9px; } .ctrl-tap svg { width: 17px; height: 17px; } .ctrl-label { display: none; } #ctrl-panel { padding: 4px 12px 4px; gap: 6px; } /* HUD compact */ #hud { padding: 6px 10px 0; } /* ── Popups / Modals (landscape phones) ── */ .overlay { align-items: center; overflow-y: auto; } .panel { max-height: 80dvh; overflow-y: auto; padding: 10px 14px 9px; } .panel-icon { width: 34px; height: 34px; margin-bottom: 8px; } .p-gap { height: 3px; } .settings-panel { max-height: 82dvh; overflow-y: auto; padding: 8px 12px 8px; } .sp-group-label { margin-top: 6px; margin-bottom: 4px; } .sp-row { padding: 4px 0; } .sp-reset, .sp-save { padding: 7px; margin-top: 7px; } .screen { justify-content: flex-start; overflow-y: auto; padding-top: max(env(safe-area-inset-top, 0px), 8px); gap: clamp(2px, 0.6vh, 5px); } .go-score { font-size: clamp(1.6rem, 5vw, 2.8rem); line-height: 1; } .s-title { font-size: clamp(0.9rem, 3vw, 1.3rem); } .s-btn { width: min(200px, 45vw); padding: 0.4em 1.4em; } .s-btn-ghost { padding: 0.4em 1.2em; font-size: 0.66rem; } .s-btn-reward { padding: 7px 14px; font-size: 0.68rem; } .s-div { margin: 1px 0; } #ad-modal-inner { width: min(320px, 96vw); max-height: 84dvh; overflow: hidden; } #ad-frame { height: 250px; } #ad-modal-header { padding: 5px 10px; } #ad-modal-footer { padding: 4px 10px; } } @media (max-width: 480px) { #hud-score { line-height: 1; } #hud-best { letter-spacing: 0.14em; } #hud-level { letter-spacing: 0.14em; } #hud-btns { bottom: clamp(5px, 1vh, 10px); right: clamp(5px, 1vw, 10px); } .hbtn { border-radius: 5px; } } /* ── Level toast scaling per breakpoint ── */ @media (max-width: 767px) { #level-toast { letter-spacing: 0.15em; } } @media (max-width: 480px) { #level-toast { letter-spacing: 0.1em; } } @media (max-width: 360px) { #level-toast { letter-spacing: 0.08em; } } /* ================================================================ GAME TITLE BAR + KEY HINT per device ================================================================ */ @media (min-width: 769px) and (max-width: 1199px) { #game-title-tag { font-size: 0.46rem; letter-spacing: 0.28em; } #key-hint-bar { font-size: 0.55rem; gap: 16px; } #key-hint-bar kbd { font-size: 0.55rem; } } @media (max-width: 768px) { #game-title-tag { font-size: 0.44rem; letter-spacing: 0.25em; } } /* ================================================================ CORNER BUTTONS — tighter on smaller screens ================================================================ */ @media (max-width: 900px) { .corner-tl { top: max(env(safe-area-inset-top, 0px), clamp(6px, 1.2vh, 14px)); left: max(env(safe-area-inset-left, 0px), clamp(6px, 1.2vw, 14px)); } .corner-tr { top: max(env(safe-area-inset-top, 0px), clamp(6px, 1.2vh, 14px)); right: max(env(safe-area-inset-right, 0px), clamp(6px, 1.2vw, 14px)); } .corner-bl { bottom: max(env(safe-area-inset-bottom, 0px), clamp(6px, 1.2vh, 14px)); left: max(env(safe-area-inset-left, 0px), clamp(6px, 1.2vw, 14px)); } .corner-br { bottom: max(env(safe-area-inset-bottom, 0px), clamp(6px, 1.2vh, 14px)); right: max(env(safe-area-inset-right, 0px), clamp(6px, 1.2vw, 14px)); } } /* ================================================================ LOCK BADGES — scale with card size ================================================================ */ @media (max-width: 480px) { .lenv-lock .lock-icon { font-size: 10px; } .lenv-lock .lock-cost { font-size: 7px; } .lrkt-lock { font-size: 7px; padding: 1px 3px; } } @media (max-width: 360px) { .lenv-lock .lock-icon { font-size: 9px; } .lenv-lock .lock-cost { font-size: 6px; } .lrkt-lock { font-size: 6px; } } /* ================================================================ STORE LINK BUTTON — always readable, no overflow ================================================================ */ .lb-store-link { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 400px) { .lb-store-link { letter-spacing: 0.1em; gap: 4px; padding: clamp(3px, 0.7vh, 5px) 8px; } } /* ================================================================ CTRL PANEL — fine-tune per breakpoint ================================================================ */ @media (min-width: 481px) and (max-width: 767px) { #ctrl-panel { padding: clamp(9px, 1.6vh, 13px) 18px clamp(10px, 1.8vh, 16px); gap: 11px; } } @media (max-width: 360px) { .ctrl-center { gap: 6px; } .ctrl-group { gap: 4px; } } /* ── Lobby card: offset right only on very large desktop (≥1441px) via flexbox ── */ @media (min-width: 1441px) { #lobby { justify-content: flex-end; } } /* 769px–1440px: all handled by the 5-breakpoint system below; just ensure centering baseline */ @media (min-width: 769px) and (max-width: 1440px) { .lb-wrap { margin: auto; } } /* ================================================================ ENV + ROCKET CARD STYLES — used inside lb-store-grid-wrap ================================================================ */ /* env-grid inside store face */ .env-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 44vw), 1fr)); gap: 8px; padding-bottom: 4px; } /* rkt-grid inside store face */ .rkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(110px, 30vw), 1fr)); gap: 8px; padding-bottom: 4px; } /* ── ENV CARD ── */ .env-card { border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: border-color 0.16s, transform 0.14s; position: relative; } .env-card:hover { border-color: rgba(255, 255, 255, 0.18); transform: scale(1.02); } .env-card.active { border-color: var(--accent, #34d399); } .env-card.active::after { content: "✓"; position: absolute; top: 4px; right: 6px; font-size: 9px; color: var(--accent, #34d399); font-weight: 700; } .env-canvas-wrap { position: relative; height: clamp(52px, 7vw, 72px); overflow: hidden; } .env-canvas-wrap canvas { width: 100%; height: 100%; display: block; } .env-locked-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); font-size: 1.1rem; } .env-info { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 3px; } .env-name { font-family: "Nunito", sans-serif; font-size: clamp(0.58rem, 1.1vw, 0.72rem); font-weight: 700; color: #fff; letter-spacing: 0.02em; } .env-desc { font-family: "Nunito", sans-serif; font-size: clamp(0.5rem, 0.95vw, 0.62rem); color: rgba(255, 255, 255, 0.45); line-height: 1.3; } .env-cost { font-family: "Nunito", sans-serif; font-size: clamp(0.5rem, 0.95vw, 0.62rem); color: #fde047; letter-spacing: 0.04em; } .env-action { margin-top: 5px; padding: 5px 8px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.7); font-family: "Nunito", sans-serif; font-size: clamp(0.5rem, 0.95vw, 0.62rem); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; width: 100%; transition: background 0.14s, border-color 0.14s, color 0.14s; } .env-action:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); color: #fff; } .env-action.btn-active { border-color: var(--accent, #34d399); color: var(--accent, #34d399); background: rgba(52, 211, 153, 0.06); cursor: default; } .env-action.btn-select { border-color: rgba(6, 182, 212, 0.35); color: rgba(6, 182, 212, 0.9); } .env-action.btn-select:hover { background: rgba(6, 182, 212, 0.1); border-color: rgba(6, 182, 212, 0.6); } .env-action.btn-buy { border-color: rgba(253, 224, 71, 0.25); color: rgba(253, 224, 71, 0.8); } .env-action.btn-buy:hover:not(:disabled) { background: rgba(253, 224, 71, 0.08); border-color: rgba(253, 224, 71, 0.5); } .env-action:disabled { opacity: 0.35; cursor: not-allowed; } /* ── ROCKET CARD ── */ .rkt-card { border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.015); cursor: pointer; position: relative; transition: border-color 0.16s, transform 0.14s, background 0.16s; display: flex; flex-direction: column; align-items: stretch; } .rkt-card:hover { border-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); background: rgba(255, 255, 255, 0.04); } .rkt-card.active { border-color: var(--accent, #34d399); background: rgba(52, 211, 153, 0.04); } .rkt-preview { height: clamp(60px, 9vw, 84px); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-radius: 7px 7px 0 0; } .rkt-preview canvas { display: block; } .rkt-locked-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); font-size: 1rem; } .rkt-info { padding: 5px 7px 7px; display: flex; flex-direction: column; gap: 3px; } .rkt-name { font-family: "Nunito", sans-serif; font-size: clamp(0.5rem, 0.9vw, 0.62rem); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-align: center; } .rkt-card.active .rkt-name { color: var(--accent, #34d399); } .rkt-desc { font-family: "Nunito", sans-serif; font-size: clamp(0.48rem, 0.88vw, 0.6rem); color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.3; } .rkt-cost { font-family: "Nunito", sans-serif; font-size: clamp(0.48rem, 0.88vw, 0.6rem); color: #fde047; text-align: center; letter-spacing: 0.04em; } .rkt-abilities { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-bottom: 4px; } .ability-badge { padding: 1px 4px; border-radius: 3px; font-family: "Nunito", sans-serif; font-size: clamp(0.36rem, 0.65vw, 0.46rem); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; } .ab-speed { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.25); } .ab-flame { background: rgba(251, 146, 60, 0.15); color: #06b6d4; border: 1px solid rgba(251, 146, 60, 0.25); } .ab-shield { background: rgba(125, 211, 252, 0.15); color: #7dd3fc; border: 1px solid rgba(125, 211, 252, 0.25); } .ab-stealth { background: rgba(167, 139, 250, 0.15); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.25); } .ab-boost { background: rgba(253, 224, 71, 0.15); color: #fde047; border: 1px solid rgba(253, 224, 71, 0.25); } .ab-armor { background: rgba(156, 163, 175, 0.15); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.25); } .ab-energy { background: rgba(244, 114, 182, 0.15); color: #f472b6; border: 1px solid rgba(244, 114, 182, 0.25); } .ab-trail { background: rgba(192, 132, 252, 0.15); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.25); } .rkt-action { margin-top: 4px; padding: 5px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.7); font-family: "Nunito", sans-serif; font-size: clamp(0.48rem, 0.9vw, 0.6rem); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; width: 100%; transition: background 0.14s, border-color 0.14s, color 0.14s; } .rkt-action:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); color: #fff; } .rkt-action.btn-active { border-color: var(--accent, #34d399); color: var(--accent, #34d399); background: rgba(52, 211, 153, 0.06); cursor: default; } .rkt-action.btn-select { border-color: rgba(6, 182, 212, 0.35); color: rgba(6, 182, 212, 0.9); } .rkt-action.btn-select:hover { background: rgba(6, 182, 212, 0.1); border-color: rgba(6, 182, 212, 0.6); } .rkt-action.btn-buy { border-color: rgba(253, 224, 71, 0.25); color: rgba(253, 224, 71, 0.8); } .rkt-action.btn-buy:hover:not(:disabled) { background: rgba(253, 224, 71, 0.08); border-color: rgba(253, 224, 71, 0.5); } .rkt-action:disabled { opacity: 0.35; cursor: not-allowed; } /* ================================================================ LOBBY RESPONSIVE — Five Explicit Breakpoints 0–480px Small Mobile 481–768px Mobile (standard) 769–1024px Tablet 1025–1280px Small Laptop 1281–1440px Laptop ================================================================ */ /* ── SMALL MOBILE: 0 – 480px ── */ @media (max-width: 480px) { #lobby { align-items: flex-start; padding: max(env(safe-area-inset-top, 0px), 12px) max(env(safe-area-inset-right, 0px), 12px) max(env(safe-area-inset-bottom, 0px), 16px) max(env(safe-area-inset-left, 0px), 12px); } .lb-wrap { width: 100%; max-width: 100%; margin: auto; padding: 0; box-sizing: border-box; } .lb-wrap::before { display: none; } .lb-head { padding: 0 0 10px; margin-bottom: 10px; } .lb-ew { margin-bottom: 6px; } .lb-mid { padding-bottom: 10px; } #lb-face-lobby { flex-direction: column; align-items: stretch; gap: 10px; } .lb-vdiv { display: none; } .lb-col { width: 100%; gap: 6px; } .lb-col-hd { margin-bottom: 2px; } .lenv-canvas { height: clamp(38px, 5.5vh, 52px); } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); gap: 4px; } .lrkt-canvas { height: clamp(28px, 4vh, 38px); } .lb-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 0 0; } .lb-stats { justify-content: center; gap: 0; flex-wrap: nowrap; } .lb-stat { flex: 1; padding: 5px 0; } .lb-stat-div { height: 22px; } .lb-launch { width: 100%; flex: unset; height: clamp(42px, 5.5vh, 48px); min-height: 42px; } .lb-gear { top: max(env(safe-area-inset-top, 0px), 10px); right: max(env(safe-area-inset-right, 0px), 10px); width: 30px; height: 30px; } } /* ── MOBILE (STANDARD): 481 – 768px ── */ @media (min-width: 481px) and (max-width: 768px) { #lobby { align-items: center; padding: max(env(safe-area-inset-top, 0px), 16px) max(env(safe-area-inset-right, 0px), 16px) max(env(safe-area-inset-bottom, 0px), 16px) max(env(safe-area-inset-left, 0px), 16px); } .lb-wrap { width: min(540px, calc(100vw - 32px)); max-width: 540px; margin: auto; } .lb-wrap::before { width: 50%; margin-bottom: 14px; } .lb-head { padding: 0 0 clamp(10px, 1.8vh, 20px); margin-bottom: clamp(10px, 1.8vh, 20px); } .lb-ew { margin-bottom: 8px; } .lb-mid { padding-bottom: 12px; } #lb-face-lobby { flex-direction: column; align-items: stretch; gap: 12px; } .lb-vdiv { display: none; } .lb-col { width: 100%; gap: 7px; } .lenv-canvas { height: clamp(44px, 6vh, 60px); } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); gap: 5px; } .lrkt-canvas { height: clamp(30px, 4.5vh, 44px); } .lb-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: clamp(10px, 1.6vh, 16px) 0 0; } .lb-stats { justify-content: center; } .lb-launch { width: 100%; height: clamp(40px, 5.5vh, 48px); min-height: 40px; } .lb-gear { top: max(env(safe-area-inset-top, 0px), 12px); right: max(env(safe-area-inset-right, 0px), 12px); width: 32px; height: 32px; } } /* ── TABLET: 769 – 1024px ── */ @media (min-width: 769px) and (max-width: 1024px) { #lobby { align-items: center; padding: max(env(safe-area-inset-top, 0px), 20px) max(env(safe-area-inset-right, 0px), 24px) max(env(safe-area-inset-bottom, 0px), 20px) max(env(safe-area-inset-left, 0px), 24px); } .lb-wrap { width: min(660px, calc(100vw - 48px)); max-width: 660px; margin: auto; } .lb-wrap::before { margin-bottom: 18px; } .lb-head { padding: 0 0 clamp(12px, 2vh, 22px); margin-bottom: clamp(12px, 2vh, 22px); } .lb-ew { margin-bottom: 10px; } .lb-mid { padding-bottom: clamp(12px, 2vh, 20px); } #lb-face-lobby { flex-direction: row; align-items: flex-start; gap: 0; } .lb-vdiv { display: block; width: 1px; height: auto; align-self: stretch; margin: 0 16px; background: rgba(255, 255, 255, 0.05); flex-shrink: 0; } .lb-col { width: 0; flex: 1; gap: 8px; } .lenv-canvas { height: clamp(46px, 6.5vh, 64px); } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); gap: 6px; } .lrkt-canvas { height: clamp(32px, 4.5vh, 46px); } .lb-foot { flex-direction: row; align-items: center; gap: 16px; padding: clamp(12px, 2vh, 18px) 0 0; } .lb-stats { justify-content: flex-start; flex: 1; } .lb-launch { flex: 0 0 auto; min-width: 140px; height: clamp(42px, 5.5vh, 50px); } .lb-gear { top: max(env(safe-area-inset-top, 0px), 14px); right: max(env(safe-area-inset-right, 0px), 16px); width: 34px; height: 34px; } } /* ── SMALL LAPTOP: 1025 – 1280px ── */ @media (min-width: 1025px) and (max-width: 1280px) { #lobby { align-items: center; padding: max(env(safe-area-inset-top, 0px), 20px) max(env(safe-area-inset-right, 0px), 32px) max(env(safe-area-inset-bottom, 0px), 20px) max(env(safe-area-inset-left, 0px), 32px); } .lb-wrap { width: min(700px, calc(100vw - 64px)); max-width: 700px; margin: auto; transform: none; } .lb-head { padding: 0 0 clamp(14px, 2.2vh, 24px); margin-bottom: clamp(14px, 2.2vh, 24px); } #lb-face-lobby { flex-direction: row; align-items: flex-start; gap: 0; } .lb-vdiv { display: block; width: 1px; height: auto; align-self: stretch; margin: 0 18px; background: rgba(255, 255, 255, 0.05); flex-shrink: 0; } .lb-col { width: 0; flex: 1; gap: 9px; } .lenv-canvas { height: clamp(48px, 7vh, 66px); } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); gap: 6px; } .lrkt-canvas { height: clamp(34px, 5vh, 48px); } .lb-foot { flex-direction: row; align-items: center; gap: 18px; padding: clamp(14px, 2.2vh, 20px) 0 0; } .lb-stats { flex: 1; } .lb-launch { flex: 0 0 auto; min-width: 150px; height: clamp(44px, 5.5vh, 52px); } .lb-gear { top: max(env(safe-area-inset-top, 0px), 16px); right: max(env(safe-area-inset-right, 0px), 18px); width: 36px; height: 36px; } } /* ── LAPTOP: 1281 – 1440px ── */ @media (min-width: 1281px) and (max-width: 1440px) { #lobby { justify-content: flex-end; } .lb-wrap { width: min(720px, 52vw); max-width: 720px; transform: none; } .lb-head { padding: 0 0 clamp(16px, 2.5vh, 28px); margin-bottom: clamp(16px, 2.5vh, 28px); } #lb-face-lobby { flex-direction: row; align-items: flex-start; gap: 0; } .lb-vdiv { display: block; width: 1px; height: auto; align-self: stretch; margin: 0 20px; background: rgba(255, 255, 255, 0.05); flex-shrink: 0; } .lb-col { width: 0; flex: 1; gap: 10px; } .lenv-canvas { height: clamp(50px, 7.5vh, 68px); } .lb-rocket-row { grid-template-columns: repeat(4, 1fr); gap: 7px; } .lrkt-canvas { height: clamp(36px, 5.5vh, 50px); } .lb-foot { flex-direction: row; align-items: center; gap: 20px; padding: clamp(16px, 2.5vh, 24px) 0 0; } .lb-stats { flex: 1; } .lb-launch { flex: 0 0 auto; min-width: 160px; height: clamp(46px, 6vh, 54px); } .lb-gear { top: max(env(safe-area-inset-top, 0px), 16px); right: max(env(safe-area-inset-right, 0px), 20px); width: 36px; height: 36px; } } /* ── LOBBY: compact height override across all breakpoints ── */ @media (max-height: 600px) and (min-width: 769px) { .lb-wrap { transform: none !important; margin: auto !important; } #lobby { align-items: flex-start; } .lb-head { padding: 0 0 8px; margin-bottom: 8px; } .lb-ew { margin-bottom: 4px; } .lenv-canvas { height: clamp(36px, 5vh, 48px); } .lrkt-canvas { height: clamp(24px, 3.5vh, 36px); } .lb-foot { padding: 8px 0 0; } .lb-launch { height: clamp(36px, 5vh, 44px); min-height: 36px; } } /* ================================================================ FULL RESPONSIVE SCALING SYSTEM — CodeCanyon Quality Pass Every text element, button, popup, and UI component is scaled at each official breakpoint. CSS variables wired to real elements. Breakpoints: 0–480 | 481–768 | 769–1024 | 1025–1280 | 1281–1440 ================================================================ */ /* ── BASE: Wire CSS variables to elements (desktop default) ── */ :root { --fs-hud-score: clamp(1.6rem, 4.5vw, 2.6rem); --fs-hud-best: 0.8rem; --fs-hud-level: 0.55rem; --fs-hud-coins: 0.62rem; --fs-lobby-title: clamp(2rem, 6vw, 5rem); --fs-lobby-tag: clamp(0.55rem, 1.2vw, 0.8rem); --fs-lobby-ew: clamp(0.55rem, 1.2vw, 0.8rem); --fs-lobby-col-num: clamp(0.26rem, 0.8vw, 0.34rem); --fs-lobby-col-label: clamp(0.5rem, 1.1vw, 0.66rem); --fs-lobby-stat-val: clamp(0.75rem, 1.5vw, 1rem); --fs-lobby-stat-lbl: clamp(0.5rem, 1.1vw, 0.8rem); --fs-launch-btn: clamp(0.7rem, 1.6vw, 0.9rem); --fs-lenv-label: clamp(8px, 1.2vw, 11px); --fs-lrkt-name: clamp(7px, 1vw, 9px); --fs-store-back: clamp(0.48rem, 1vw, 0.62rem); --fs-store-title: clamp(0.9rem, 2.2vw, 1.5rem); --fs-store-coins: clamp(0.48rem, 1vw, 0.62rem); --fs-store-link: clamp(0.46rem, 0.9vw, 0.58rem); --fs-toast: clamp(0.48rem, 1vw, 0.62rem); --fs-s-title: clamp(1.1rem, 3vw, 1.6rem); --fs-s-sub: clamp(0.5rem, 1.5vw, 0.8rem); --fs-s-prompt: 0.8rem; --fs-go-lbl: 0.7rem; --fs-go-score: clamp(2.4rem, 8vw, 6rem); --fs-go-best: 0.8rem; --fs-go-newbest: 0.58rem; --fs-s-btn: 0.7rem; --fs-s-btn-ghost: 0.75rem; --fs-s-btn-reward: 0.78rem; --fs-level-toast: clamp(1.4rem, 4vw, 2rem); --fs-corner-btn: clamp(0.62rem, 1.1vw, 0.78rem); --fs-ctrl-util: 0.58rem; --fs-ctrl-label: 0.5rem; --fs-key-hint: 0.58rem; --fs-game-title-tag: 0.48rem; --fs-panel-title: clamp(0.78rem, 2vw, 1.1rem); --fs-panel-sub: clamp(0.4rem, 1vw, 0.52rem); --fs-p-btn: clamp(0.62rem, 1.4vw, 0.78rem); --fs-sp-title: clamp(13px, 1.8vw, 18px); --fs-sp-sub: clamp(9px, 1.1vw, 12px); --fs-sp-group: clamp(8px, 1vw, 10px); --fs-sp-lbl: clamp(11px, 1.5vw, 15px); --fs-sp-desc: clamp(9px, 1vw, 11px); --fs-sp-pill: clamp(10px, 1.2vw, 13px); --fs-sp-hint: clamp(9px, 1vw, 11px); --fs-sp-reset: clamp(10px, 1.2vw, 13px); --fs-sp-save: clamp(11px, 1.4vw, 14px); --fs-env-name: clamp(0.58rem, 1.1vw, 0.72rem); --fs-env-desc: clamp(0.5rem, 0.95vw, 0.62rem); --fs-env-cost: clamp(0.5rem, 0.95vw, 0.62rem); --fs-env-action: clamp(0.5rem, 0.95vw, 0.62rem); --fs-rkt-name: clamp(0.5rem, 0.9vw, 0.62rem); --fs-rkt-desc: clamp(0.48rem, 0.88vw, 0.6rem); --fs-rkt-cost: clamp(0.48rem, 0.88vw, 0.6rem); --fs-ability-badge: clamp(0.36rem, 0.65vw, 0.46rem); --fs-ad-label: 0.58rem; --fs-ad-skip: 0.62rem; --fs-ad-footer: 0.52rem; --fs-unlock-cost: 0.8rem; --fs-unlock-need: 0.72rem; --btn-h-launch: clamp(44px, 6vh, 52px); --btn-h-p-btn: clamp(36px, 4.5vh, 44px); --btn-h-s-btn: auto; --panel-w: min(320px, 92vw); --settings-w: min(420px, 96vw); } /* Apply variables to all elements */ #hud-score { font-size: var(--fs-hud-score); } #hud-best { font-size: var(--fs-hud-best); } #hud-level { font-size: var(--fs-hud-level); } #hud-coins { font-size: var(--fs-hud-coins, 0.6rem); color: var(--hud-coins-color, #22d3ee); font-weight: 700; transition: color 0.3s ease; } .lb-title { font-size: var(--fs-lobby-title); } .lb-tag { font-size: var(--fs-lobby-tag); } .lb-ew-txt { font-size: var(--fs-lobby-ew); } .lb-col-num { font-size: var(--fs-lobby-col-num); } .lb-col-label { font-size: var(--fs-lobby-col-label); } .lb-stat-val { font-size: var(--fs-lobby-stat-val); } .lb-stat-lbl { font-size: var(--fs-lobby-stat-lbl); } .lb-launch { font-size: var(--fs-launch-btn); height: var(--btn-h-launch); } .lenv-label { font-size: var(--fs-lenv-label); } .lrkt-name { font-size: var(--fs-lrkt-name); } .lb-store-back { font-size: var(--fs-store-back); } .lb-store-bar-title { font-size: var(--fs-store-title); } .lb-store-bar-coins { font-size: var(--fs-store-coins); } .lb-store-link { font-size: var(--fs-store-link); } .lb-store-toast { font-size: var(--fs-toast); } .s-title { font-size: var(--fs-s-title); } .s-sub { font-size: var(--fs-s-sub); } .s-prompt { font-size: var(--fs-s-prompt); } .go-lbl { font-size: var(--fs-go-lbl); } .go-score { font-size: var(--fs-go-score); } .go-best { font-size: var(--fs-go-best); } .go-newbest { font-size: var(--fs-go-newbest); } .s-btn { font-size: var(--fs-s-btn); } .s-btn-ghost { font-size: var(--fs-s-btn-ghost); } .s-btn-reward { font-size: var(--fs-s-btn-reward); } #level-toast { font-size: var(--fs-level-toast); } .corner-btn { font-size: var(--fs-corner-btn); } .ctrl-util { font-size: var(--fs-ctrl-util); } .ctrl-label { font-size: var(--fs-ctrl-label); } #key-hint-bar, #key-hint-bar kbd { font-size: var(--fs-key-hint); } #game-title-tag { font-size: var(--fs-game-title-tag); } .panel-title { font-size: var(--fs-panel-title); } .panel-sub { font-size: var(--fs-panel-sub); } .p-btn { font-size: var(--fs-p-btn); } .sp-title { font-size: var(--fs-sp-title); } .sp-sub { font-size: var(--fs-sp-sub); } .sp-group-label { font-size: var(--fs-sp-group); } .sp-lbl { font-size: var(--fs-sp-lbl); } .sp-desc { font-size: var(--fs-sp-desc); } .sp-pill { font-size: var(--fs-sp-pill); } .sp-hint { font-size: var(--fs-sp-hint); } .sp-reset { font-size: var(--fs-sp-reset); } .sp-save { font-size: var(--fs-sp-save); } .env-name { font-size: var(--fs-env-name); } .env-desc { font-size: var(--fs-env-desc); } .env-cost { font-size: var(--fs-env-cost); } .env-action { font-size: var(--fs-env-action); } .rkt-name { font-size: var(--fs-rkt-name); } .rkt-desc { font-size: var(--fs-rkt-desc); } .rkt-cost { font-size: var(--fs-rkt-cost); } .ability-badge { font-size: var(--fs-ability-badge); } .panel { width: var(--panel-w); } .settings-panel { max-width: var(--settings-w); } /* ================================================================ BREAKPOINT 1: Small Mobile — 0 to 480px ================================================================ */ @media (max-width: 480px) { :root { /* Text scale: ~65–72% of desktop base */ --fs-hud-score: clamp(1.1rem, 5.5vw, 1.55rem); --fs-hud-best: clamp(0.52rem, 1.8vw, 0.65rem); --fs-hud-level: clamp(0.4rem, 1.1vw, 0.5rem); --fs-hud-coins: clamp(0.4rem, 1.1vw, 0.5rem); --fs-lobby-title: clamp(1.1rem, 7vw, 1.9rem); --fs-lobby-tag: clamp(0.38rem, 1.4vw, 0.54rem); --fs-lobby-ew: clamp(0.38rem, 1.4vw, 0.54rem); --fs-lobby-col-num: clamp(0.22rem, 0.9vw, 0.3rem); --fs-lobby-col-label: clamp(0.38rem, 1.3vw, 0.52rem); --fs-lobby-stat-val: clamp(0.56rem, 3.5vw, 0.78rem); --fs-lobby-stat-lbl: clamp(0.34rem, 1.4vw, 0.5rem); --fs-launch-btn: clamp(0.54rem, 2vw, 0.7rem); --fs-lenv-label: clamp(6px, 1.6vw, 9px); --fs-lrkt-name: clamp(5px, 1.2vw, 7px); --fs-store-back: clamp(0.42rem, 1.3vw, 0.55rem); --fs-store-title: clamp(0.75rem, 3vw, 1.05rem); --fs-store-coins: clamp(0.42rem, 1.3vw, 0.55rem); --fs-store-link: clamp(0.38rem, 1.2vw, 0.5rem); --fs-toast: clamp(0.4rem, 1.2vw, 0.52rem); --fs-s-title: clamp(0.82rem, 3.8vw, 1.1rem); --fs-s-sub: clamp(0.38rem, 1.3vw, 0.52rem); --fs-s-prompt: clamp(0.62rem, 2vw, 0.72rem); --fs-go-lbl: clamp(0.52rem, 1.8vw, 0.62rem); --fs-go-score: clamp(1.4rem, 9.5vw, 2.4rem); --fs-go-best: clamp(0.52rem, 1.8vw, 0.62rem); --fs-go-newbest: clamp(0.44rem, 1.4vw, 0.52rem); --fs-s-btn: clamp(0.54rem, 1.8vw, 0.65rem); --fs-s-btn-ghost: clamp(0.56rem, 1.8vw, 0.66rem); --fs-s-btn-reward: clamp(0.58rem, 1.8vw, 0.68rem); --fs-level-toast: clamp(0.85rem, 5vw, 1.2rem); --fs-corner-btn: clamp(0.48rem, 1.3vw, 0.6rem); --fs-ctrl-util: clamp(0.4rem, 1.4vw, 0.52rem); --fs-ctrl-label: clamp(0.38rem, 1.1vw, 0.46rem); --fs-key-hint: 0.48rem; --fs-game-title-tag: 0.38rem; --fs-panel-title: clamp(0.65rem, 2.4vw, 0.82rem); --fs-panel-sub: clamp(0.34rem, 1.1vw, 0.44rem); --fs-p-btn: clamp(0.52rem, 1.7vw, 0.65rem); --fs-sp-title: clamp(10px, 2.4vw, 13px); --fs-sp-sub: clamp(8px, 1.6vw, 10px); --fs-sp-group: clamp(7px, 1.4vw, 9px); --fs-sp-lbl: clamp(9px, 2vw, 12px); --fs-sp-desc: clamp(7px, 1.4vw, 9px); --fs-sp-pill: clamp(8px, 1.7vw, 10px); --fs-sp-hint: clamp(7px, 1.4vw, 9px); --fs-sp-reset: clamp(8px, 1.8vw, 10px); --fs-sp-save: clamp(9px, 2vw, 11px); --fs-env-name: clamp(0.46rem, 1.3vw, 0.58rem); --fs-env-desc: clamp(0.42rem, 1.1vw, 0.52rem); --fs-env-cost: clamp(0.42rem, 1.1vw, 0.52rem); --fs-env-action: clamp(0.42rem, 1.1vw, 0.52rem); --fs-rkt-name: clamp(0.42rem, 1.1vw, 0.52rem); --fs-rkt-desc: clamp(0.4rem, 1vw, 0.5rem); --fs-rkt-cost: clamp(0.4rem, 1vw, 0.5rem); --fs-ability-badge: clamp(0.3rem, 0.8vw, 0.38rem); --fs-ad-label: clamp(0.42rem, 1.3vw, 0.52rem); --fs-ad-skip: clamp(0.46rem, 1.4vw, 0.55rem); --fs-ad-footer: clamp(0.38rem, 1.1vw, 0.46rem); --fs-unlock-cost: clamp(0.62rem, 2vw, 0.72rem); --fs-unlock-need: clamp(0.56rem, 1.8vw, 0.64rem); /* Component sizes */ --btn-h-launch: clamp(38px, 5.5vh, 46px); --btn-h-p-btn: clamp(32px, 4vh, 38px); --panel-w: min(280px, 93vw); --settings-w: min(360px, 95vw); } /* Layout adjustments */ .lb-wrap { width: 100%; padding: 12px 14px 16px; padding-top: max(env(safe-area-inset-top, 0px), 12px); padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px); } .lb-mid { padding-bottom: 9px; } .lb-foot { gap: 8px; padding-top: 9px; } .lb-gear { width: 28px; height: 28px; } .lb-gear svg { width: 12px; height: 12px; } .panel { padding: 12px 12px 10px; max-height: 87dvh; } .settings-panel { padding: 10px 11px 9px; max-height: 87dvh; } .sp-row { padding: 5px 0; } .sp-pills { gap: 3px; } .sp-pill { padding: 5px 4px; } .sp-reset, .sp-save { padding: 7px; gap: 5px; } .p-btn { padding: clamp(7px, 1.3vh, 10px) clamp(9px, 1.8vw, 13px); } .p-row { gap: 5px; } .ctrl-tap { width: 52px; height: 52px; border-radius: 11px; } .ctrl-tap svg { width: 19px; height: 19px; } #ctrl-panel { padding: 6px 12px 8px; gap: 8px; } .s-btn { width: min(210px, 84vw); padding: 0.48em 1.4em; } .s-btn-ghost { padding: 0.46em 1.3em; } .s-btn-reward { padding: 8px 13px; max-width: 175px; } .screen { gap: clamp(3px, 0.7vh, 6px); padding: 10px 12px calc(var(--ctrl-h, 0px) + env(safe-area-inset-bottom, 0px) + 10px); } .s-div { width: 62%; margin: 2px 0; } .panel-icon { width: clamp(30px, 7vw, 40px); height: clamp(30px, 7vw, 40px); margin-bottom: clamp(7px, 1.2vh, 12px); } .panel-icon svg { width: clamp(14px, 3.5vw, 20px); height: clamp(14px, 3.5vw, 20px); } .p-stack { gap: 5px; } .lb-store-bar { padding: 0 0 6px; margin-bottom: 6px; } .lb-store-back { padding: 3px 7px 3px 5px; } #ad-modal-inner { width: min(300px, 95vw); } #ad-modal-header { padding: 6px 10px; } #ad-modal-footer { padding: 5px 10px; } #hud { padding: 8px 11px 0; } #hud-btns { bottom: 6px; right: 6px; gap: 4px; } .hbtn { width: clamp(24px, 5vw, 30px); height: clamp(24px, 5vw, 30px); } .hbtn svg { width: clamp(10px, 2vw, 13px); height: clamp(10px, 2vw, 13px); } } /* ================================================================ BREAKPOINT 2: Mobile Standard — 481px to 768px ================================================================ */ @media (min-width: 481px) and (max-width: 768px) { :root { /* Text scale: ~75–82% of desktop base */ --fs-hud-score: clamp(1.3rem, 4.5vw, 1.9rem); --fs-hud-best: clamp(0.6rem, 1.6vw, 0.72rem); --fs-hud-level: clamp(0.44rem, 1.1vw, 0.52rem); --fs-hud-coins: clamp(0.44rem, 1.1vw, 0.52rem); --fs-lobby-title: clamp(1.5rem, 5.5vw, 2.6rem); --fs-lobby-tag: clamp(0.44rem, 1.2vw, 0.62rem); --fs-lobby-ew: clamp(0.44rem, 1.2vw, 0.62rem); --fs-lobby-col-num: clamp(0.24rem, 0.8vw, 0.3rem); --fs-lobby-col-label: clamp(0.42rem, 1.2vw, 0.58rem); --fs-lobby-stat-val: clamp(0.64rem, 2vw, 0.84rem); --fs-lobby-stat-lbl: clamp(0.4rem, 1.2vw, 0.58rem); --fs-launch-btn: clamp(0.6rem, 1.7vw, 0.76rem); --fs-lenv-label: clamp(7px, 1.4vw, 10px); --fs-lrkt-name: clamp(6px, 1.1vw, 8px); --fs-store-back: clamp(0.45rem, 1.1vw, 0.58rem); --fs-store-title: clamp(0.85rem, 2.4vw, 1.2rem); --fs-store-coins: clamp(0.45rem, 1.1vw, 0.58rem); --fs-store-link: clamp(0.42rem, 1.1vw, 0.54rem); --fs-toast: clamp(0.44rem, 1.1vw, 0.56rem); --fs-s-title: clamp(0.9rem, 3vw, 1.3rem); --fs-s-sub: clamp(0.42rem, 1.4vw, 0.62rem); --fs-s-prompt: clamp(0.64rem, 1.8vw, 0.74rem); --fs-go-lbl: clamp(0.55rem, 1.6vw, 0.66rem); --fs-go-score: clamp(1.8rem, 7.5vw, 3.2rem); --fs-go-best: clamp(0.6rem, 1.6vw, 0.72rem); --fs-go-newbest: clamp(0.46rem, 1.2vw, 0.54rem); --fs-s-btn: clamp(0.58rem, 1.5vw, 0.68rem); --fs-s-btn-ghost: clamp(0.6rem, 1.6vw, 0.7rem); --fs-s-btn-reward: clamp(0.62rem, 1.6vw, 0.72rem); --fs-level-toast: clamp(1rem, 3.8vw, 1.55rem); --fs-corner-btn: clamp(0.52rem, 1.2vw, 0.64rem); --fs-ctrl-util: clamp(0.44rem, 1.3vw, 0.54rem); --fs-ctrl-label: clamp(0.4rem, 1.1vw, 0.48rem); --fs-key-hint: 0.5rem; --fs-game-title-tag: 0.4rem; --fs-panel-title: clamp(0.7rem, 2.1vw, 0.9rem); --fs-panel-sub: clamp(0.36rem, 1.1vw, 0.46rem); --fs-p-btn: clamp(0.56rem, 1.6vw, 0.7rem); --fs-sp-title: clamp(11px, 1.9vw, 14px); --fs-sp-sub: clamp(8px, 1.5vw, 11px); --fs-sp-group: clamp(7px, 1.3vw, 9px); --fs-sp-lbl: clamp(10px, 1.6vw, 13px); --fs-sp-desc: clamp(8px, 1.2vw, 10px); --fs-sp-pill: clamp(8px, 1.4vw, 11px); --fs-sp-hint: clamp(7px, 1.2vw, 10px); --fs-sp-reset: clamp(9px, 1.6vw, 11px); --fs-sp-save: clamp(10px, 1.7vw, 12px); --fs-env-name: clamp(0.5rem, 1.2vw, 0.62rem); --fs-env-desc: clamp(0.46rem, 1vw, 0.56rem); --fs-env-cost: clamp(0.46rem, 1vw, 0.56rem); --fs-env-action: clamp(0.46rem, 1vw, 0.56rem); --fs-rkt-name: clamp(0.44rem, 1vw, 0.55rem); --fs-rkt-desc: clamp(0.42rem, 0.95vw, 0.52rem); --fs-rkt-cost: clamp(0.42rem, 0.95vw, 0.52rem); --fs-ability-badge: clamp(0.32rem, 0.7vw, 0.42rem); --fs-ad-label: clamp(0.46rem, 1.3vw, 0.55rem); --fs-ad-skip: clamp(0.5rem, 1.4vw, 0.58rem); --fs-ad-footer: clamp(0.42rem, 1.1vw, 0.5rem); --fs-unlock-cost: clamp(0.66rem, 1.8vw, 0.76rem); --fs-unlock-need: clamp(0.58rem, 1.6vw, 0.66rem); /* Component sizes */ --btn-h-launch: clamp(40px, 5.5vh, 48px); --btn-h-p-btn: clamp(34px, 4.2vh, 40px); --panel-w: min(300px, 90vw); --settings-w: min(400px, 93vw); } /* Layout adjustments */ .lb-wrap { width: min(420px, calc(100vw - 24px)); } .lb-mid { padding-bottom: 11px; } .lb-foot { gap: 9px; padding-top: 10px; } .lb-gear { width: 30px; height: 30px; } .panel { padding: 13px 13px 11px; max-height: 88dvh; } .settings-panel { padding: 11px 13px 10px; max-height: 88dvh; } .sp-row { padding: 5px 0; } .sp-pill { padding: 5px 5px; } .sp-reset, .sp-save { padding: 8px; } .p-btn { padding: clamp(8px, 1.4vh, 11px) clamp(10px, 1.9vw, 14px); } .ctrl-tap { width: 58px; height: 58px; border-radius: 12px; } .ctrl-tap svg { width: 21px; height: 21px; } #ctrl-panel { padding: clamp(8px, 1.5vh, 12px) 16px clamp(9px, 1.7vh, 14px); gap: 10px; } .s-btn { width: min(240px, 80vw); padding: 0.5em 1.7em; } .s-btn-ghost { padding: 0.5em 1.5em; } .s-btn-reward { padding: 9px 16px; max-width: 188px; } .screen { gap: clamp(4px, 0.9vh, 7px); } .s-div { width: 58%; } .lb-store-bar { padding: 0 0 7px; margin-bottom: 7px; } #ad-modal-inner { width: min(300px, 94vw); } #ad-modal-header { padding: 7px 11px; } #hud { padding: 9px 13px 0; } .hbtn { width: clamp(26px, 4.5vw, 32px); height: clamp(26px, 4.5vw, 32px); } .hbtn svg { width: clamp(11px, 2vw, 14px); height: clamp(11px, 2vw, 14px); } } /* ================================================================ BREAKPOINT 3: Tablet — 769px to 1024px ================================================================ */ @media (min-width: 769px) and (max-width: 1024px) { :root { /* Text scale: ~83–88% of desktop base */ --fs-hud-score: clamp(1.45rem, 3.8vw, 2.1rem); --fs-hud-best: clamp(0.66rem, 1.4vw, 0.76rem); --fs-hud-level: clamp(0.46rem, 1vw, 0.54rem); --fs-hud-coins: clamp(0.46rem, 1vw, 0.54rem); --fs-lobby-title: clamp(1.8rem, 4.5vw, 3rem); --fs-lobby-tag: clamp(0.46rem, 1.1vw, 0.66rem); --fs-lobby-ew: clamp(0.46rem, 1.1vw, 0.66rem); --fs-lobby-col-num: clamp(0.24rem, 0.75vw, 0.32rem); --fs-lobby-col-label: clamp(0.44rem, 1.05vw, 0.6rem); --fs-lobby-stat-val: clamp(0.68rem, 1.4vw, 0.9rem); --fs-lobby-stat-lbl: clamp(0.42rem, 1.1vw, 0.65rem); --fs-launch-btn: clamp(0.64rem, 1.4vw, 0.82rem); --fs-lenv-label: clamp(8px, 1.3vw, 11px); --fs-lrkt-name: clamp(6px, 1vw, 9px); --fs-store-back: clamp(0.46rem, 1vw, 0.6rem); --fs-store-title: clamp(0.88rem, 2.1vw, 1.3rem); --fs-store-coins: clamp(0.46rem, 1vw, 0.6rem); --fs-store-link: clamp(0.44rem, 0.95vw, 0.56rem); --fs-toast: clamp(0.46rem, 1vw, 0.58rem); --fs-s-title: clamp(0.95rem, 2.5vw, 1.4rem); --fs-s-sub: clamp(0.44rem, 1.4vw, 0.68rem); --fs-s-prompt: clamp(0.66rem, 1.6vw, 0.76rem); --fs-go-lbl: clamp(0.58rem, 1.4vw, 0.68rem); --fs-go-score: clamp(2.2rem, 6.5vw, 4.5rem); --fs-go-best: clamp(0.66rem, 1.4vw, 0.76rem); --fs-go-newbest: clamp(0.48rem, 1.1vw, 0.56rem); --fs-s-btn: clamp(0.6rem, 1.3vw, 0.7rem); --fs-s-btn-ghost: clamp(0.62rem, 1.4vw, 0.72rem); --fs-s-btn-reward: clamp(0.64rem, 1.4vw, 0.74rem); --fs-level-toast: clamp(1.1rem, 3.2vw, 1.8rem); --fs-corner-btn: clamp(0.56rem, 1vw, 0.72rem); --fs-ctrl-util: clamp(0.48rem, 1.1vw, 0.56rem); --fs-ctrl-label: clamp(0.42rem, 0.95vw, 0.5rem); --fs-key-hint: 0.54rem; --fs-game-title-tag: 0.44rem; --fs-panel-title: clamp(0.74rem, 1.9vw, 0.96rem); --fs-panel-sub: clamp(0.38rem, 1vw, 0.48rem); --fs-p-btn: clamp(0.58rem, 1.4vw, 0.72rem); --fs-sp-title: clamp(12px, 1.7vw, 16px); --fs-sp-sub: clamp(9px, 1.3vw, 12px); --fs-sp-group: clamp(8px, 1.1vw, 10px); --fs-sp-lbl: clamp(10px, 1.4vw, 14px); --fs-sp-desc: clamp(8px, 1.1vw, 11px); --fs-sp-pill: clamp(9px, 1.3vw, 12px); --fs-sp-hint: clamp(8px, 1.1vw, 11px); --fs-sp-reset: clamp(9px, 1.2vw, 12px); --fs-sp-save: clamp(10px, 1.3vw, 13px); --fs-env-name: clamp(0.52rem, 1.1vw, 0.66rem); --fs-env-desc: clamp(0.46rem, 0.95vw, 0.58rem); --fs-env-cost: clamp(0.46rem, 0.95vw, 0.58rem); --fs-env-action: clamp(0.46rem, 0.95vw, 0.58rem); --fs-rkt-name: clamp(0.46rem, 0.9vw, 0.58rem); --fs-rkt-desc: clamp(0.44rem, 0.86vw, 0.56rem); --fs-rkt-cost: clamp(0.44rem, 0.86vw, 0.56rem); --fs-ability-badge: clamp(0.33rem, 0.62vw, 0.43rem); --fs-ad-label: clamp(0.5rem, 1.1vw, 0.56rem); --fs-ad-skip: clamp(0.54rem, 1.2vw, 0.6rem); --fs-ad-footer: clamp(0.46rem, 1vw, 0.5rem); --fs-unlock-cost: clamp(0.68rem, 1.6vw, 0.78rem); --fs-unlock-need: clamp(0.62rem, 1.4vw, 0.7rem); /* Component sizes */ --btn-h-launch: clamp(42px, 5.5vh, 50px); --btn-h-p-btn: clamp(35px, 4.4vh, 42px); --panel-w: min(320px, 90vw); --settings-w: min(420px, 92vw); } /* Layout adjustments */ .lb-wrap { width: min(560px, calc(100vw - 48px)); } .panel { padding: clamp(13px, 2.2vh, 22px) clamp(14px, 2.8vw, 24px) clamp(11px, 2vh, 20px); } .settings-panel { padding: clamp(12px, 2.2vh, 22px) clamp(13px, 2.6vw, 24px) clamp(10px, 1.8vh, 18px); max-height: 86dvh; } .lb-store-bar { padding: 0 0 8px; margin-bottom: 8px; } #ad-modal-inner { width: min(310px, 93vw); } #hud { padding: 10px 14px 0; } .hbtn { width: clamp(27px, 3.8vw, 33px); height: clamp(27px, 3.8vw, 33px); } } /* ================================================================ BREAKPOINT 4: Small Laptop — 1025px to 1280px ================================================================ */ @media (min-width: 1025px) and (max-width: 1280px) { :root { /* Text scale: ~88–93% of desktop base */ --fs-hud-score: clamp(1.5rem, 3.6vw, 2.2rem); --fs-hud-best: clamp(0.68rem, 1.3vw, 0.76rem); --fs-hud-level: clamp(0.48rem, 1vw, 0.54rem); --fs-hud-coins: clamp(0.48rem, 1vw, 0.54rem); --fs-lobby-title: clamp(2rem, 4.2vw, 3.4rem); --fs-lobby-tag: clamp(0.5rem, 1.1vw, 0.7rem); --fs-lobby-ew: clamp(0.5rem, 1.1vw, 0.7rem); --fs-lobby-col-num: clamp(0.25rem, 0.78vw, 0.32rem); --fs-lobby-col-label: clamp(0.46rem, 1.05vw, 0.62rem); --fs-lobby-stat-val: clamp(0.7rem, 1.4vw, 0.92rem); --fs-lobby-stat-lbl: clamp(0.44rem, 1.05vw, 0.68rem); --fs-launch-btn: clamp(0.66rem, 1.35vw, 0.84rem); --fs-lenv-label: clamp(8px, 1.2vw, 11px); --fs-lrkt-name: clamp(7px, 0.95vw, 9px); --fs-store-back: clamp(0.46rem, 0.96vw, 0.6rem); --fs-store-title: clamp(0.9rem, 2vw, 1.35rem); --fs-store-coins: clamp(0.46rem, 0.96vw, 0.6rem); --fs-store-link: clamp(0.44rem, 0.9vw, 0.56rem); --fs-toast: clamp(0.46rem, 0.95vw, 0.58rem); --fs-s-title: clamp(1rem, 2.6vw, 1.45rem); --fs-s-sub: clamp(0.46rem, 1.35vw, 0.7rem); --fs-s-prompt: clamp(0.68rem, 1.5vw, 0.76rem); --fs-go-lbl: clamp(0.6rem, 1.3vw, 0.68rem); --fs-go-score: clamp(2.4rem, 6vw, 4.8rem); --fs-go-best: clamp(0.68rem, 1.3vw, 0.76rem); --fs-go-newbest: clamp(0.5rem, 1.05vw, 0.56rem); --fs-s-btn: clamp(0.62rem, 1.25vw, 0.72rem); --fs-s-btn-ghost: clamp(0.64rem, 1.3vw, 0.73rem); --fs-s-btn-reward: clamp(0.66rem, 1.3vw, 0.74rem); --fs-level-toast: clamp(1.2rem, 3.5vw, 1.9rem); --fs-corner-btn: clamp(0.58rem, 1vw, 0.74rem); --fs-ctrl-util: clamp(0.5rem, 1.05vw, 0.58rem); --fs-ctrl-label: clamp(0.44rem, 0.95vw, 0.5rem); --fs-key-hint: 0.55rem; --fs-game-title-tag: 0.46rem; --fs-panel-title: clamp(0.75rem, 1.8vw, 0.98rem); --fs-panel-sub: clamp(0.38rem, 0.96vw, 0.5rem); --fs-p-btn: clamp(0.6rem, 1.3vw, 0.74rem); --fs-sp-title: clamp(12px, 1.6vw, 16px); --fs-sp-sub: clamp(9px, 1.2vw, 12px); --fs-sp-group: clamp(8px, 1vw, 10px); --fs-sp-lbl: clamp(10px, 1.35vw, 14px); --fs-sp-desc: clamp(8px, 1.05vw, 11px); --fs-sp-pill: clamp(9px, 1.2vw, 12px); --fs-sp-hint: clamp(8px, 1.05vw, 11px); --fs-sp-reset: clamp(10px, 1.15vw, 12px); --fs-sp-save: clamp(10px, 1.25vw, 13px); --fs-env-name: clamp(0.54rem, 1.05vw, 0.68rem); --fs-env-desc: clamp(0.48rem, 0.92vw, 0.6rem); --fs-env-cost: clamp(0.48rem, 0.92vw, 0.6rem); --fs-env-action: clamp(0.48rem, 0.92vw, 0.6rem); --fs-rkt-name: clamp(0.48rem, 0.88vw, 0.6rem); --fs-rkt-desc: clamp(0.46rem, 0.84vw, 0.58rem); --fs-rkt-cost: clamp(0.46rem, 0.84vw, 0.58rem); --fs-ability-badge: clamp(0.34rem, 0.62vw, 0.44rem); --fs-ad-label: clamp(0.52rem, 1.05vw, 0.57rem); --fs-ad-skip: clamp(0.56rem, 1.15vw, 0.61rem); --fs-ad-footer: clamp(0.48rem, 1vw, 0.52rem); --fs-unlock-cost: clamp(0.7rem, 1.55vw, 0.78rem); --fs-unlock-need: clamp(0.64rem, 1.35vw, 0.7rem); /* Component sizes */ --btn-h-launch: clamp(43px, 5.6vh, 51px); --btn-h-p-btn: clamp(36px, 4.5vh, 43px); --panel-w: min(330px, 90vw); --settings-w: min(420px, 90vw); } .lb-wrap { width: min(620px, calc(100vw - 64px)); } .settings-panel { max-height: 84dvh; } #hud { padding: 12px 16px 0; } } /* ================================================================ BREAKPOINT 5: Laptop — 1281px to 1440px ================================================================ */ @media (min-width: 1281px) and (max-width: 1440px) { :root { /* Text scale: ~92–96% of desktop base */ --fs-hud-score: clamp(1.55rem, 3.8vw, 2.35rem); --fs-hud-best: clamp(0.7rem, 1.3vw, 0.78rem); --fs-hud-level: clamp(0.5rem, 0.98vw, 0.54rem); --fs-hud-coins: clamp(0.5rem, 0.98vw, 0.54rem); --fs-lobby-title: clamp(2rem, 4.5vw, 4rem); --fs-lobby-tag: clamp(0.52rem, 1.1vw, 0.74rem); --fs-lobby-ew: clamp(0.52rem, 1.1vw, 0.74rem); --fs-lobby-col-num: clamp(0.26rem, 0.78vw, 0.33rem); --fs-lobby-col-label: clamp(0.48rem, 1.06vw, 0.64rem); --fs-lobby-stat-val: clamp(0.72rem, 1.45vw, 0.96rem); --fs-lobby-stat-lbl: clamp(0.46rem, 1.08vw, 0.72rem); --fs-launch-btn: clamp(0.68rem, 1.4vw, 0.86rem); --fs-lenv-label: clamp(8px, 1.15vw, 11px); --fs-lrkt-name: clamp(7px, 0.96vw, 9px); --fs-store-back: clamp(0.47rem, 0.96vw, 0.61rem); --fs-store-title: clamp(0.92rem, 2.1vw, 1.4rem); --fs-store-coins: clamp(0.47rem, 0.96vw, 0.61rem); --fs-store-link: clamp(0.45rem, 0.9vw, 0.57rem); --fs-toast: clamp(0.47rem, 0.96vw, 0.6rem); --fs-s-title: clamp(1.05rem, 2.7vw, 1.5rem); --fs-s-sub: clamp(0.47rem, 1.38vw, 0.73rem); --fs-s-prompt: clamp(0.7rem, 1.52vw, 0.78rem); --fs-go-lbl: clamp(0.62rem, 1.32vw, 0.7rem); --fs-go-score: clamp(2.4rem, 6.5vw, 5.4rem); --fs-go-best: clamp(0.7rem, 1.32vw, 0.78rem); --fs-go-newbest: clamp(0.52rem, 1.06vw, 0.57rem); --fs-s-btn: clamp(0.64rem, 1.28vw, 0.73rem); --fs-s-btn-ghost: clamp(0.66rem, 1.32vw, 0.74rem); --fs-s-btn-reward: clamp(0.68rem, 1.32vw, 0.76rem); --fs-level-toast: clamp(1.3rem, 3.7vw, 1.95rem); --fs-corner-btn: clamp(0.6rem, 1.04vw, 0.76rem); --fs-ctrl-util: clamp(0.52rem, 1.06vw, 0.58rem); --fs-ctrl-label: clamp(0.46rem, 0.96vw, 0.5rem); --fs-key-hint: 0.56rem; --fs-game-title-tag: 0.47rem; --fs-panel-title: clamp(0.76rem, 1.85vw, 1rem); --fs-panel-sub: clamp(0.39rem, 0.97vw, 0.51rem); --fs-p-btn: clamp(0.62rem, 1.35vw, 0.76rem); --fs-sp-title: clamp(12px, 1.65vw, 17px); --fs-sp-sub: clamp(9px, 1.25vw, 12px); --fs-sp-group: clamp(8px, 1vw, 10px); --fs-sp-lbl: clamp(11px, 1.38vw, 15px); --fs-sp-desc: clamp(9px, 1.06vw, 11px); --fs-sp-pill: clamp(10px, 1.22vw, 13px); --fs-sp-hint: clamp(9px, 1.06vw, 11px); --fs-sp-reset: clamp(10px, 1.18vw, 13px); --fs-sp-save: clamp(11px, 1.28vw, 14px); --fs-env-name: clamp(0.56rem, 1.06vw, 0.7rem); --fs-env-desc: clamp(0.5rem, 0.93vw, 0.61rem); --fs-env-cost: clamp(0.5rem, 0.93vw, 0.61rem); --fs-env-action: clamp(0.5rem, 0.93vw, 0.61rem); --fs-rkt-name: clamp(0.5rem, 0.89vw, 0.61rem); --fs-rkt-desc: clamp(0.47rem, 0.85vw, 0.59rem); --fs-rkt-cost: clamp(0.47rem, 0.85vw, 0.59rem); --fs-ability-badge: clamp(0.35rem, 0.63vw, 0.45rem); --fs-ad-label: clamp(0.54rem, 1.06vw, 0.58rem); --fs-ad-skip: clamp(0.58rem, 1.16vw, 0.62rem); --fs-ad-footer: clamp(0.5rem, 1.01vw, 0.52rem); --fs-unlock-cost: clamp(0.72rem, 1.57vw, 0.79rem); --fs-unlock-need: clamp(0.66rem, 1.37vw, 0.71rem); /* Component sizes */ --btn-h-launch: clamp(44px, 5.8vh, 52px); --btn-h-p-btn: clamp(37px, 4.6vh, 44px); --panel-w: min(340px, 88vw); --settings-w: min(424px, 88vw); } .lb-wrap { width: min(660px, 48vw); } } /* ================================================================ UNLOCK POPUP inline styles — scale cost + need-more text ================================================================ */ #ov-unlock [style*="font-size:.8rem"] { font-size: var(--fs-unlock-cost) !important; } #ov-unlock [style*="font-size:.72rem"] { font-size: var(--fs-unlock-need) !important; } /* ================================================================ PANEL MIN-HEIGHT — prevent panels being too tall on small screens ================================================================ */ @media (max-width: 480px) { .panel { min-width: 0; } .settings-panel { min-width: 0; } .overlay { align-items: center; justify-content: center; padding-top: max(env(safe-area-inset-top, 0px), 8px); padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px); overflow-y: auto; } } /* ================================================================ HUD COINS — responsive scaling ================================================================ */ #hud-coins { font-family: "Nunito", sans-serif; font-size: var(--fs-hud-coins); letter-spacing: 0.14em; color: rgba(253, 224, 71, 0.65); text-transform: uppercase; } /* ================================================================ CRITICAL FIX — Force variable application with !important The base rules have higher specificity; variables must override. This covers EVERY text element visible in images 1-6. ================================================================ */ /* ── ALL TEXT ELEMENTS: force variable font-sizes ── */ #hud-score { font-size: var(--fs-hud-score) !important; } #hud-best { font-size: var(--fs-hud-best) !important; } #hud-level { font-size: var(--fs-hud-level) !important; } #hud-coins { font-size: var(--fs-hud-coins) !important; } .lb-title { font-size: var(--fs-lobby-title) !important; } .lb-tag { font-size: var(--fs-lobby-tag) !important; } .lb-ew-txt { font-size: var(--fs-lobby-ew) !important; } .lb-col-num { font-size: var(--fs-lobby-col-num) !important; } .lb-col-label { font-size: var(--fs-lobby-col-label) !important; } .lb-stat-val { font-size: var(--fs-lobby-stat-val) !important; } .lb-stat-lbl { font-size: var(--fs-lobby-stat-lbl) !important; } .lb-launch { font-size: var(--fs-launch-btn) !important; } .lenv-label { font-size: var(--fs-lenv-label) !important; } .lrkt-name { font-size: var(--fs-lrkt-name) !important; } .lb-store-back { font-size: var(--fs-store-back) !important; } .lb-store-bar-title { font-size: var(--fs-store-title) !important; } .lb-store-bar-coins { font-size: var(--fs-store-coins) !important; } .lb-store-link { font-size: var(--fs-store-link) !important; } .lb-store-toast { font-size: var(--fs-toast) !important; } /* IMAGE 2 & 3: In-game start screen text */ .s-title { font-size: var(--fs-s-title) !important; } .s-sub { font-size: var(--fs-s-sub) !important; } .s-prompt { font-size: var(--fs-s-prompt) !important; } #key-hint-bar { font-size: var(--fs-key-hint) !important; } #key-hint-bar kbd { font-size: var(--fs-key-hint) !important; } #game-title-tag { font-size: var(--fs-game-title-tag) !important; } .corner-btn { font-size: var(--fs-corner-btn) !important; } .ctrl-util { font-size: var(--fs-ctrl-util) !important; } .ctrl-label { font-size: var(--fs-ctrl-label) !important; } #level-toast { font-size: var(--fs-level-toast) !important; } /* IMAGE 5: Game over screen */ .go-lbl { font-size: var(--fs-go-lbl) !important; } .go-score { font-size: var(--fs-go-score) !important; } .go-best { font-size: var(--fs-go-best) !important; } .go-newbest { font-size: var(--fs-go-newbest) !important; } .s-btn { font-size: var(--fs-s-btn) !important; } .s-btn-ghost { font-size: var(--fs-s-btn-ghost) !important; } .s-btn-reward { font-size: var(--fs-s-btn-reward) !important; } /* IMAGE 4: Settings popup */ .sp-title { font-size: var(--fs-sp-title) !important; } .sp-sub { font-size: var(--fs-sp-sub) !important; } .sp-group-label { font-size: var(--fs-sp-group) !important; } .sp-lbl { font-size: var(--fs-sp-lbl) !important; } .sp-desc { font-size: var(--fs-sp-desc) !important; } .sp-pill { font-size: var(--fs-sp-pill) !important; } .sp-hint { font-size: var(--fs-sp-hint) !important; } .sp-reset { font-size: var(--fs-sp-reset) !important; } .sp-save { font-size: var(--fs-sp-save) !important; } /* IMAGE 4: Panel / overlay common text */ .panel-title { font-size: var(--fs-panel-title) !important; } .panel-sub { font-size: var(--fs-panel-sub) !important; } .p-btn { font-size: var(--fs-p-btn) !important; } /* IMAGE 1: Store grid cards */ .env-name { font-size: var(--fs-env-name) !important; } .env-desc { font-size: var(--fs-env-desc) !important; } .env-cost { font-size: var(--fs-env-cost) !important; } .env-action { font-size: var(--fs-env-action) !important; } .rkt-name { font-size: var(--fs-rkt-name) !important; } .rkt-desc { font-size: var(--fs-rkt-desc) !important; } .rkt-cost { font-size: var(--fs-rkt-cost) !important; } .ability-badge { font-size: var(--fs-ability-badge) !important; } /* IMAGE 6: Ad modal */ /* IMAGE 4 FIX: Settings panel MUST shrink, not grow — cap width per breakpoint */ .settings-panel { max-width: var(--settings-w) !important; width: 92% !important; } /* ── Unlock popup inline font-sizes via attribute selector ── */ #ov-unlock [style*="font-size:.8rem"] { font-size: var(--fs-unlock-cost) !important; } #ov-unlock [style*="font-size:.72rem"] { font-size: var(--fs-unlock-need) !important; } /* ================================================================ SETTINGS PANEL WIDTH — must DECREASE on smaller screens Image 4 shows it was INCREASING — fix all breakpoints ================================================================ */ @media (max-width: 480px) { :root { --settings-w: min(310px, 94vw); } .settings-panel { max-width: var(--settings-w) !important; width: 94% !important; } } @media (min-width: 481px) and (max-width: 768px) { :root { --settings-w: min(370px, 92vw); } .settings-panel { max-width: var(--settings-w) !important; width: 92% !important; } } @media (min-width: 769px) and (max-width: 1024px) { :root { --settings-w: min(390px, 90vw); } .settings-panel { max-width: var(--settings-w) !important; width: 90% !important; } } @media (min-width: 1025px) and (max-width: 1280px) { :root { --settings-w: min(405px, 88vw); } .settings-panel { max-width: var(--settings-w) !important; width: 88% !important; } } @media (min-width: 1281px) and (max-width: 1440px) { :root { --settings-w: min(415px, 86vw); } .settings-panel { max-width: var(--settings-w) !important; width: 86% !important; } } /* ================================================================ IMAGE 2 & 3: IN-GAME SCREEN — GET READY / SIGNAL LOST .s-sub letter-spacing fights readability on small screens ================================================================ */ @media (max-width: 480px) { .s-sub { letter-spacing: 0.2em !important; } .s-prompt { letter-spacing: 0.18em !important; } .go-lbl { letter-spacing: 0.18em !important; } .go-best { letter-spacing: 0.14em !important; } .s-btn { letter-spacing: 0.14em !important; width: min(200px, 84vw) !important; } .s-btn-ghost { letter-spacing: 0.12em !important; } #key-hint-bar { letter-spacing: 0.08em !important; gap: 10px !important; } #key-hint-bar kbd { letter-spacing: 0.08em !important; } } @media (min-width: 481px) and (max-width: 768px) { .s-sub { letter-spacing: 0.28em !important; } .s-prompt { letter-spacing: 0.2em !important; } .s-btn { letter-spacing: 0.16em !important; } #key-hint-bar { letter-spacing: 0.1em !important; gap: 14px !important; } } @media (min-width: 769px) and (max-width: 1024px) { .s-sub { letter-spacing: 0.3em !important; } #key-hint-bar { letter-spacing: 0.11em !important; gap: 16px !important; } } /* ================================================================ IMAGE 1: LOBBY — env/rocket card labels, col headers These use px in base rule — ensure they scale ================================================================ */ @media (max-width: 480px) { .lenv-label { padding: 3px 6px 4px !important; } .lrkt-card { padding: 5px 2px 4px !important; gap: 2px !important; } .lb-col-hd { gap: 5px !important; margin-bottom: 1px !important; } .lb-store-link { padding: 3px 7px !important; gap: 4px !important; } .lb-store-link svg { width: 9px !important; height: 9px !important; } } @media (min-width: 481px) and (max-width: 768px) { .lenv-label { padding: 3px 7px 5px !important; } .lb-col-hd { gap: 6px !important; } .lb-store-link { padding: 4px 8px !important; } .lb-store-link svg { width: 10px !important; height: 10px !important; } } @media (min-width: 769px) and (max-width: 1024px) { .lb-store-link svg { width: 10px !important; height: 10px !important; } } /* ================================================================ IMAGE 5: GAME OVER SCREEN — all elements scaled ================================================================ */ @media (max-width: 480px) { .go-score { line-height: 1 !important; letter-spacing: 0 !important; margin: 0 !important; } .s-btn-reward { max-width: 170px !important; } .s-div { width: 65% !important; } } @media (min-width: 481px) and (max-width: 768px) { .go-score { line-height: 1 !important; letter-spacing: 0.02em !important; } .s-btn-reward { max-width: 185px !important; } } @media (min-width: 769px) and (max-width: 1024px) { .go-score { letter-spacing: 0.02em !important; } } /* ================================================================ IMAGE 6: AD MODAL — header, skip, footer, frame ================================================================ */ @media (max-width: 480px) { #ad-modal-inner { width: min(300px, 95vw) !important; } #ad-modal-header { padding: 6px 10px !important; gap: 5px !important; } #ad-modal-footer { padding: 5px 10px !important; } #ad-frame { height: 250px !important; } } @media (min-width: 481px) and (max-width: 768px) { #ad-modal-inner { width: min(300px, 92vw) !important; } #ad-modal-header { padding: 7px 11px !important; } #ad-modal-footer { padding: 6px 11px !important; } } /* ================================================================ CTRL PANEL BUTTONS — TAP TO FLY / PAUSE / LOBBY / SCORE text Image 2 & 3 bottom bar buttons ================================================================ */ @media (max-width: 480px) { .ctrl-tap { width: 50px !important; height: 50px !important; } .ctrl-tap svg { width: 18px !important; height: 18px !important; } .ctrl-util { font-size: var(--fs-ctrl-util) !important; min-width: 64px !important; padding: 5px 8px !important; gap: 4px !important; } .ctrl-util svg { width: 12px !important; height: 12px !important; } #ctrl-panel { padding: 6px 10px 8px !important; gap: 7px !important; } } @media (min-width: 481px) and (max-width: 768px) { .ctrl-tap { width: 56px !important; height: 56px !important; } .ctrl-tap svg { width: 20px !important; height: 20px !important; } .ctrl-util { font-size: var(--fs-ctrl-util) !important; padding: 6px 11px !important; } #ctrl-panel { padding: clamp(8px, 1.5vh, 12px) 15px clamp(9px, 1.7vh, 13px) !important; } } @media (min-width: 769px) and (max-width: 1024px) { .ctrl-util { font-size: var(--fs-ctrl-util) !important; } } /* ================================================================ GLOBAL SIZE REDUCTION PASS — All breakpoints Reduces ALL text, buttons, panels, and UI elements noticeably at every breakpoint per requirements. Priority elements: Pause popup, Quit popup, Lobby, Settings popup. ================================================================ */ /* ── BASE (desktop default): reduce all root token maximums ── */ :root { --fs-lobby-title: clamp(1.6rem, 4.5vw, 3.6rem); --fs-lobby-tag: clamp(0.44rem, 1vw, 0.68rem); --fs-lobby-ew: clamp(0.44rem, 1vw, 0.68rem); --fs-lobby-col-label: clamp(0.4rem, 0.95vw, 0.58rem); --fs-lobby-stat-val: clamp(0.62rem, 1.3vw, 0.88rem); --fs-lobby-stat-lbl: clamp(0.4rem, 1vw, 0.66rem); --fs-launch-btn: clamp(0.58rem, 1.3vw, 0.82rem); --fs-lenv-label: clamp(7px, 1vw, 10px); --fs-lrkt-name: clamp(6px, 0.85vw, 8px); /* Popups / Panels */ --fs-panel-title: clamp(0.68rem, 1.7vw, 0.98rem); --fs-panel-sub: clamp(0.34rem, 0.85vw, 0.46rem); --fs-p-btn: clamp(0.55rem, 1.2vw, 0.7rem); /* Settings */ --fs-sp-title: clamp(11px, 1.5vw, 16px); --fs-sp-sub: clamp(8px, 1vw, 11px); --fs-sp-group: clamp(7px, 0.9vw, 9px); --fs-sp-lbl: clamp(9px, 1.3vw, 13px); --fs-sp-desc: clamp(7px, 0.9vw, 10px); --fs-sp-pill: clamp(8px, 1.1vw, 11px); --fs-sp-hint: clamp(7px, 0.9vw, 10px); --fs-sp-reset: clamp(9px, 1.1vw, 11px); --fs-sp-save: clamp(9px, 1.2vw, 12px); /* In-game screens */ --fs-s-title: clamp(0.9rem, 2.6vw, 1.4rem); --fs-s-btn: clamp(0.6rem, 1.2vw, 0.66rem); --fs-s-btn-ghost: clamp(0.62rem, 1.3vw, 0.68rem); --fs-s-btn-reward: clamp(0.64rem, 1.3vw, 0.7rem); --fs-go-score: clamp(2rem, 7vw, 5rem); --fs-go-lbl: clamp(0.56rem, 1.2vw, 0.64rem); --fs-go-best: clamp(0.62rem, 1.2vw, 0.72rem); /* HUD */ --fs-hud-score: clamp(1.4rem, 3.8vw, 2.2rem); --fs-hud-best: clamp(0.58rem, 1.2vw, 0.72rem); /* Store */ --fs-store-title: clamp(0.8rem, 1.9vw, 1.3rem); --fs-env-name: clamp(0.52rem, 1vw, 0.64rem); --fs-rkt-name: clamp(0.45rem, 0.82vw, 0.56rem); /* Panel sizes */ --panel-w: min(290px, 90vw); --settings-w: min(380px, 92vw); } /* Panel and button height reductions (base) */ .panel { padding: clamp(12px, 2vh, 28px) clamp(12px, 2.5vw, 26px) clamp(10px, 1.8vh, 22px) !important; } .settings-panel { max-height: 70dvh !important; padding: clamp(9px, 1.8vh, 18px) clamp(10px, 3vw, 20px) clamp(8px, 1.5vh, 14px) !important; } .lb-launch { height: clamp(38px, 5vh, 46px) !important; min-height: 38px !important; } .p-btn { padding: clamp(6px, 1.2vh, 10px) clamp(8px, 1.6vw, 14px) !important; } .sp-pill { padding: clamp(4px, 0.6vh, 6px) clamp(3px, 0.7vw, 5px) !important; } .sp-reset, .sp-save { padding: clamp(6px, 0.9vh, 9px) !important; } .panel-icon { width: clamp(32px, 5vw, 44px) !important; height: clamp(32px, 5vw, 44px) !important; margin-bottom: clamp(8px, 1.2vh, 13px) !important; } .panel-icon svg { width: clamp(15px, 2.5vw, 21px) !important; height: clamp(15px, 2.5vw, 21px) !important; } .p-gap { height: clamp(3px, 0.7vh, 6px) !important; } /* ── SMALL MOBILE: 0 – 480px ── */ @media (max-width: 480px) { :root { --fs-lobby-title: clamp(0.95rem, 6.5vw, 1.65rem); --fs-lobby-tag: clamp(0.32rem, 1.2vw, 0.46rem); --fs-lobby-ew: clamp(0.32rem, 1.2vw, 0.46rem); --fs-lobby-col-label: clamp(0.3rem, 1.1vw, 0.44rem); --fs-lobby-stat-val: clamp(0.48rem, 3vw, 0.66rem); --fs-lobby-stat-lbl: clamp(0.28rem, 1.2vw, 0.42rem); --fs-launch-btn: clamp(0.46rem, 1.8vw, 0.6rem); --fs-lenv-label: clamp(5px, 1.3vw, 8px); --fs-lrkt-name: clamp(4px, 1vw, 6px); --fs-panel-title: clamp(0.56rem, 2.1vw, 0.7rem); --fs-panel-sub: clamp(0.28rem, 0.9vw, 0.36rem); --fs-p-btn: clamp(0.44rem, 1.5vw, 0.56rem); --fs-sp-title: clamp(9px, 2.1vw, 11px); --fs-sp-sub: clamp(7px, 1.4vw, 9px); --fs-sp-group: clamp(6px, 1.2vw, 8px); --fs-sp-lbl: clamp(8px, 1.7vw, 10px); --fs-sp-desc: clamp(6px, 1.2vw, 8px); --fs-sp-pill: clamp(7px, 1.4vw, 9px); --fs-sp-hint: clamp(6px, 1.2vw, 8px); --fs-sp-reset: clamp(7px, 1.5vw, 9px); --fs-sp-save: clamp(7px, 1.6vw, 9px); --fs-s-title: clamp(0.7rem, 3.4vw, 0.96rem); --fs-s-btn: clamp(0.46rem, 1.5vw, 0.56rem); --fs-s-btn-ghost: clamp(0.48rem, 1.5vw, 0.58rem); --fs-s-btn-reward: clamp(0.5rem, 1.5vw, 0.6rem); --fs-go-score: clamp(1.2rem, 8.5vw, 2rem); --fs-go-lbl: clamp(0.44rem, 1.5vw, 0.54rem); --fs-go-best: clamp(0.44rem, 1.5vw, 0.54rem); --fs-hud-score: clamp(0.95rem, 5vw, 1.35rem); --fs-hud-best: clamp(0.44rem, 1.5vw, 0.56rem); --fs-store-title: clamp(0.65rem, 2.6vw, 0.9rem); --fs-env-name: clamp(0.38rem, 1.1vw, 0.5rem); --fs-rkt-name: clamp(0.36rem, 1vw, 0.46rem); --panel-w: min(252px, 92vw); --settings-w: min(310px, 94vw); } /* Element sizing */ .panel { padding: 10px 10px 9px !important; max-height: 86dvh !important; } .settings-panel { padding: 8px 9px 8px !important; max-height: 86dvh !important; } .lb-launch { height: clamp(34px, 5vh, 40px) !important; min-height: 34px !important; } .p-btn { padding: clamp(5px, 1vh, 8px) clamp(7px, 1.4vw, 11px) !important; } .sp-pill { padding: 4px 3px !important; } .sp-reset, .sp-save { padding: 6px !important; gap: 4px !important; } .panel-icon { width: clamp(26px, 6vw, 34px) !important; height: clamp(26px, 6vw, 34px) !important; margin-bottom: clamp(5px, 1vh, 8px) !important; } .panel-icon svg { width: clamp(12px, 3vw, 16px) !important; height: clamp(12px, 3vw, 16px) !important; } .lb-gear { width: 26px !important; height: 26px !important; } .lb-gear svg { width: 11px !important; height: 11px !important; } .lenv-canvas { height: clamp(32px, 4.5vh, 44px) !important; } .lrkt-canvas { height: clamp(22px, 3.5vh, 32px) !important; } .lrkt-card { padding: 4px 2px 3px !important; gap: 1px !important; } .p-gap { height: 2px !important; } .p-row { gap: 3px !important; } .s-btn { width: min(180px, 82vw) !important; padding: 0.44em 1.2em !important; } .s-btn-ghost { padding: 0.42em 1.1em !important; } .s-btn-reward { max-width: 155px !important; padding: 6px 10px !important; } .screen { gap: clamp(2px, 0.5vh, 4px) !important; } .sp-row { padding: 4px 0 !important; } .sp-pills { gap: 2px !important; } .p-stack { gap: 4px !important; } } /* ── MOBILE STANDARD: 481 – 768px ── */ @media (min-width: 481px) and (max-width: 768px) { :root { --fs-lobby-title: clamp(1.25rem, 5vw, 2.2rem); --fs-lobby-tag: clamp(0.36rem, 1.1vw, 0.54rem); --fs-lobby-ew: clamp(0.36rem, 1.1vw, 0.54rem); --fs-lobby-col-label: clamp(0.34rem, 1.1vw, 0.5rem); --fs-lobby-stat-val: clamp(0.54rem, 1.8vw, 0.72rem); --fs-lobby-stat-lbl: clamp(0.32rem, 1.1vw, 0.48rem); --fs-launch-btn: clamp(0.5rem, 1.5vw, 0.64rem); --fs-lenv-label: clamp(6px, 1.2vw, 9px); --fs-lrkt-name: clamp(5px, 0.95vw, 7px); --fs-panel-title: clamp(0.6rem, 1.9vw, 0.78rem); --fs-panel-sub: clamp(0.3rem, 0.95vw, 0.4rem); --fs-p-btn: clamp(0.48rem, 1.4vw, 0.6rem); --fs-sp-title: clamp(9px, 1.7vw, 12px); --fs-sp-sub: clamp(7px, 1.3vw, 10px); --fs-sp-group: clamp(6px, 1.1vw, 8px); --fs-sp-lbl: clamp(8px, 1.4vw, 11px); --fs-sp-desc: clamp(6px, 1.1vw, 9px); --fs-sp-pill: clamp(7px, 1.25vw, 10px); --fs-sp-hint: clamp(6px, 1.1vw, 9px); --fs-sp-reset: clamp(7px, 1.4vw, 10px); --fs-sp-save: clamp(8px, 1.5vw, 10px); --fs-s-title: clamp(0.76rem, 2.7vw, 1.1rem); --fs-s-btn: clamp(0.5rem, 1.4vw, 0.6rem); --fs-s-btn-ghost: clamp(0.52rem, 1.45vw, 0.62rem); --fs-s-btn-reward: clamp(0.54rem, 1.45vw, 0.64rem); --fs-go-score: clamp(1.5rem, 7vw, 2.7rem); --fs-go-lbl: clamp(0.46rem, 1.4vw, 0.58rem); --fs-go-best: clamp(0.5rem, 1.4vw, 0.62rem); --fs-hud-score: clamp(1.1rem, 4vw, 1.62rem); --fs-hud-best: clamp(0.5rem, 1.4vw, 0.62rem); --fs-store-title: clamp(0.72rem, 2.2vw, 1rem); --fs-env-name: clamp(0.42rem, 1.1vw, 0.54rem); --fs-rkt-name: clamp(0.38rem, 0.95vw, 0.48rem); --panel-w: min(268px, 92vw); --settings-w: min(340px, 93vw); } .panel { padding: 11px 11px 10px !important; max-height: 87dvh !important; } .settings-panel { padding: 9px 11px 9px !important; max-height: 87dvh !important; } .lb-launch { height: clamp(36px, 5.2vh, 42px) !important; min-height: 36px !important; } .p-btn { padding: clamp(6px, 1.1vh, 9px) clamp(8px, 1.5vw, 12px) !important; } .sp-pill { padding: 4px 4px !important; } .sp-reset, .sp-save { padding: 6px 8px !important; } .panel-icon { width: clamp(28px, 6vw, 36px) !important; height: clamp(28px, 6vw, 36px) !important; margin-bottom: clamp(6px, 1vh, 10px) !important; } .panel-icon svg { width: clamp(13px, 3vw, 17px) !important; height: clamp(13px, 3vw, 17px) !important; } .lenv-canvas { height: clamp(36px, 5.5vh, 50px) !important; } .lrkt-canvas { height: clamp(24px, 4vh, 36px) !important; } .p-gap { height: 3px !important; } .p-row { gap: 4px !important; } .s-btn { width: min(200px, 80vw) !important; padding: 0.46em 1.4em !important; } .s-btn-ghost { padding: 0.44em 1.2em !important; } .s-btn-reward { max-width: 168px !important; padding: 7px 12px !important; } .screen { gap: clamp(2px, 0.6vh, 5px) !important; } .sp-row { padding: 4px 0 !important; } .sp-pills { gap: 3px !important; } .p-stack { gap: 4px !important; } } /* ── TABLET: 769 – 1024px ── */ @media (min-width: 769px) and (max-width: 1024px) { :root { --fs-lobby-title: clamp(1.5rem, 4vw, 2.6rem); --fs-lobby-tag: clamp(0.38rem, 1vw, 0.58rem); --fs-lobby-ew: clamp(0.38rem, 1vw, 0.58rem); --fs-lobby-col-label: clamp(0.36rem, 0.95vw, 0.52rem); --fs-lobby-stat-val: clamp(0.58rem, 1.25vw, 0.78rem); --fs-lobby-stat-lbl: clamp(0.35rem, 1vw, 0.55rem); --fs-launch-btn: clamp(0.54rem, 1.25vw, 0.7rem); --fs-lenv-label: clamp(6px, 1.1vw, 9px); --fs-lrkt-name: clamp(5px, 0.88vw, 7px); --fs-panel-title: clamp(0.62rem, 1.7vw, 0.82rem); --fs-panel-sub: clamp(0.31rem, 0.9vw, 0.42rem); --fs-p-btn: clamp(0.5rem, 1.3vw, 0.62rem); --fs-sp-title: clamp(10px, 1.5vw, 13px); --fs-sp-sub: clamp(8px, 1.2vw, 10px); --fs-sp-group: clamp(7px, 1vw, 8px); --fs-sp-lbl: clamp(9px, 1.3vw, 12px); --fs-sp-desc: clamp(7px, 1vw, 9px); --fs-sp-pill: clamp(8px, 1.2vw, 10px); --fs-sp-hint: clamp(7px, 1vw, 9px); --fs-sp-reset: clamp(8px, 1.1vw, 10px); --fs-sp-save: clamp(8px, 1.2vw, 11px); --fs-s-title: clamp(0.8rem, 2.3vw, 1.2rem); --fs-s-btn: clamp(0.52rem, 1.2vw, 0.62rem); --fs-s-btn-ghost: clamp(0.54rem, 1.25vw, 0.64rem); --fs-s-btn-reward: clamp(0.56rem, 1.25vw, 0.66rem); --fs-go-score: clamp(1.9rem, 5.8vw, 3.8rem); --fs-go-lbl: clamp(0.5rem, 1.25vw, 0.6rem); --fs-go-best: clamp(0.56rem, 1.25vw, 0.66rem); --fs-hud-score: clamp(1.25rem, 3.5vw, 1.85rem); --fs-hud-best: clamp(0.56rem, 1.25vw, 0.68rem); --fs-store-title: clamp(0.76rem, 1.9vw, 1.1rem); --fs-env-name: clamp(0.44rem, 1vw, 0.56rem); --fs-rkt-name: clamp(0.4rem, 0.84vw, 0.5rem); --panel-w: min(278px, 90vw); --settings-w: min(350px, 90vw); } .panel { padding: clamp(11px, 1.9vh, 20px) clamp(12px, 2.2vw, 20px) clamp(9px, 1.6vh, 16px) !important; max-height: 86dvh !important; } .settings-panel { padding: clamp(10px, 1.9vh, 18px) clamp(11px, 2.2vw, 18px) clamp(8px, 1.6vh, 14px) !important; max-height: 83dvh !important; } .lb-launch { height: clamp(37px, 5.2vh, 44px) !important; min-height: 37px !important; } .p-btn { padding: clamp(6px, 1.2vh, 9px) clamp(8px, 1.5vw, 12px) !important; } .sp-pill { padding: clamp(4px, 0.6vh, 6px) clamp(4px, 0.7vw, 5px) !important; } .sp-reset, .sp-save { padding: clamp(6px, 0.9vh, 8px) !important; } .panel-icon { width: clamp(30px, 4.5vw, 38px) !important; height: clamp(30px, 4.5vw, 38px) !important; } .panel-icon svg { width: clamp(14px, 2.4vw, 19px) !important; height: clamp(14px, 2.4vw, 19px) !important; } .lenv-canvas { height: clamp(38px, 5.5vh, 54px) !important; } .lrkt-canvas { height: clamp(26px, 4vh, 38px) !important; } .p-gap { height: clamp(3px, 0.6vh, 5px) !important; } .s-btn { width: min(210px, 76vw) !important; } .s-btn-reward { max-width: 175px !important; } .sp-row { padding: clamp(4px, 0.7vh, 6px) 0 !important; } .p-stack { gap: 4px !important; } } /* ── SMALL LAPTOP: 1025 – 1280px ── */ @media (min-width: 1025px) and (max-width: 1280px) { :root { --fs-lobby-title: clamp(1.7rem, 3.8vw, 2.9rem); --fs-lobby-tag: clamp(0.42rem, 1vw, 0.62rem); --fs-lobby-ew: clamp(0.42rem, 1vw, 0.62rem); --fs-lobby-col-label: clamp(0.38rem, 0.95vw, 0.54rem); --fs-lobby-stat-val: clamp(0.6rem, 1.3vw, 0.82rem); --fs-lobby-stat-lbl: clamp(0.36rem, 0.96vw, 0.58rem); --fs-launch-btn: clamp(0.56rem, 1.25vw, 0.74rem); --fs-lenv-label: clamp(7px, 1.1vw, 10px); --fs-lrkt-name: clamp(5px, 0.88vw, 8px); --fs-panel-title: clamp(0.64rem, 1.65vw, 0.86rem); --fs-panel-sub: clamp(0.32rem, 0.88vw, 0.44rem); --fs-p-btn: clamp(0.52rem, 1.2vw, 0.64rem); --fs-sp-title: clamp(10px, 1.45vw, 14px); --fs-sp-sub: clamp(8px, 1.1vw, 11px); --fs-sp-group: clamp(7px, 0.9vw, 9px); --fs-sp-lbl: clamp(9px, 1.25vw, 12px); --fs-sp-desc: clamp(7px, 0.95vw, 9px); --fs-sp-pill: clamp(8px, 1.1vw, 10px); --fs-sp-hint: clamp(7px, 0.95vw, 9px); --fs-sp-reset: clamp(8px, 1.05vw, 10px); --fs-sp-save: clamp(9px, 1.15vw, 11px); --fs-s-title: clamp(0.85rem, 2.4vw, 1.28rem); --fs-s-btn: clamp(0.54rem, 1.15vw, 0.64rem); --fs-s-btn-ghost: clamp(0.56rem, 1.2vw, 0.65rem); --fs-s-btn-reward: clamp(0.58rem, 1.2vw, 0.66rem); --fs-go-score: clamp(2.1rem, 5.5vw, 4.2rem); --fs-go-lbl: clamp(0.52rem, 1.2vw, 0.62rem); --fs-go-best: clamp(0.58rem, 1.2vw, 0.68rem); --fs-hud-score: clamp(1.35rem, 3.3vw, 1.95rem); --fs-hud-best: clamp(0.58rem, 1.2vw, 0.68rem); --fs-store-title: clamp(0.78rem, 1.8vw, 1.16rem); --fs-env-name: clamp(0.46rem, 0.95vw, 0.6rem); --fs-rkt-name: clamp(0.42rem, 0.82vw, 0.52rem); --panel-w: min(288px, 90vw); --settings-w: min(365px, 90vw); } .panel { padding: clamp(12px, 2vh, 22px) clamp(12px, 2.5vw, 22px) clamp(10px, 1.8vh, 18px) !important; max-height: 84dvh !important; } .settings-panel { padding: clamp(10px, 1.9vh, 18px) clamp(11px, 2.2vw, 18px) clamp(8px, 1.5vh, 14px) !important; max-height: 82dvh !important; } .lb-launch { height: clamp(38px, 5.2vh, 45px) !important; min-height: 38px !important; } .p-btn { padding: clamp(6px, 1.2vh, 9px) clamp(8px, 1.6vw, 13px) !important; } .sp-pill { padding: clamp(4px, 0.65vh, 6px) clamp(3px, 0.75vw, 5px) !important; } .sp-reset, .sp-save { padding: clamp(6px, 0.9vh, 8px) !important; } .panel-icon { width: clamp(30px, 4.5vw, 40px) !important; height: clamp(30px, 4.5vw, 40px) !important; } .panel-icon svg { width: clamp(14px, 2.4vw, 20px) !important; height: clamp(14px, 2.4vw, 20px) !important; } .lenv-canvas { height: clamp(40px, 6vh, 56px) !important; } .lrkt-canvas { height: clamp(28px, 4.5vh, 40px) !important; } .s-btn { width: min(220px, 74vw) !important; } .sp-row { padding: clamp(4px, 0.65vh, 6px) 0 !important; } .p-stack { gap: clamp(3px, 0.6vh, 5px) !important; } } /* ── LAPTOP: 1281 – 1440px ── */ @media (min-width: 1281px) and (max-width: 1440px) { :root { --fs-lobby-title: clamp(1.8rem, 4vw, 3.4rem); --fs-lobby-tag: clamp(0.44rem, 1vw, 0.64rem); --fs-lobby-ew: clamp(0.44rem, 1vw, 0.64rem); --fs-lobby-col-label: clamp(0.4rem, 0.97vw, 0.56rem); --fs-lobby-stat-val: clamp(0.62rem, 1.35vw, 0.84rem); --fs-lobby-stat-lbl: clamp(0.38rem, 0.98vw, 0.62rem); --fs-launch-btn: clamp(0.58rem, 1.28vw, 0.76rem); --fs-lenv-label: clamp(7px, 1.05vw, 10px); --fs-lrkt-name: clamp(6px, 0.88vw, 8px); --fs-panel-title: clamp(0.66rem, 1.7vw, 0.88rem); --fs-panel-sub: clamp(0.33rem, 0.9vw, 0.45rem); --fs-p-btn: clamp(0.54rem, 1.24vw, 0.66rem); --fs-sp-title: clamp(10px, 1.5vw, 15px); --fs-sp-sub: clamp(8px, 1.15vw, 11px); --fs-sp-group: clamp(7px, 0.92vw, 9px); --fs-sp-lbl: clamp(9px, 1.28vw, 13px); --fs-sp-desc: clamp(7px, 0.98vw, 10px); --fs-sp-pill: clamp(8px, 1.12vw, 11px); --fs-sp-hint: clamp(7px, 0.98vw, 10px); --fs-sp-reset: clamp(8px, 1.08vw, 11px); --fs-sp-save: clamp(9px, 1.18vw, 12px); --fs-s-title: clamp(0.88rem, 2.5vw, 1.32rem); --fs-s-btn: clamp(0.56rem, 1.18vw, 0.65rem); --fs-s-btn-ghost: clamp(0.58rem, 1.22vw, 0.66rem); --fs-s-btn-reward: clamp(0.6rem, 1.22vw, 0.68rem); --fs-go-score: clamp(2.1rem, 5.8vw, 4.6rem); --fs-go-lbl: clamp(0.54rem, 1.22vw, 0.63rem); --fs-go-best: clamp(0.6rem, 1.22vw, 0.7rem); --fs-hud-score: clamp(1.38rem, 3.5vw, 2rem); --fs-hud-best: clamp(0.6rem, 1.22vw, 0.7rem); --fs-store-title: clamp(0.8rem, 1.95vw, 1.22rem); --fs-env-name: clamp(0.48rem, 0.98vw, 0.62rem); --fs-rkt-name: clamp(0.44rem, 0.84vw, 0.54rem); --panel-w: min(295px, 88vw); --settings-w: min(372px, 88vw); } .panel { padding: clamp(12px, 2vh, 24px) clamp(13px, 2.6vw, 24px) clamp(10px, 1.8vh, 19px) !important; max-height: 82dvh !important; } .settings-panel { padding: clamp(10px, 1.9vh, 18px) clamp(11px, 2.2vw, 18px) clamp(8px, 1.5vh, 14px) !important; max-height: 80dvh !important; } .lb-launch { height: clamp(39px, 5.4vh, 46px) !important; min-height: 39px !important; } .p-btn { padding: clamp(6px, 1.2vh, 9px) clamp(9px, 1.7vw, 13px) !important; } .sp-pill { padding: clamp(4px, 0.66vh, 6px) clamp(4px, 0.76vw, 5px) !important; } .sp-reset, .sp-save { padding: clamp(6px, 0.9vh, 8px) !important; } .panel-icon { width: clamp(31px, 4.6vw, 42px) !important; height: clamp(31px, 4.6vw, 42px) !important; } .panel-icon svg { width: clamp(14px, 2.4vw, 21px) !important; height: clamp(14px, 2.4vw, 21px) !important; } .lenv-canvas { height: clamp(42px, 6.5vh, 58px) !important; } .lrkt-canvas { height: clamp(30px, 4.8vh, 42px) !important; } .s-btn { width: min(228px, 72vw) !important; } .sp-row { padding: clamp(4px, 0.65vh, 6px) 0 !important; } .p-stack { gap: clamp(4px, 0.7vh, 6px) !important; } } /* ── FORCE VARIABLE APPLICATION across all breakpoints ── */ #hud-score { font-size: var(--fs-hud-score) !important; } #hud-best { font-size: var(--fs-hud-best) !important; } .lb-title { font-size: var(--fs-lobby-title) !important; } .lb-tag { font-size: var(--fs-lobby-tag) !important; } .lb-ew-txt { font-size: var(--fs-lobby-ew) !important; } .lb-col-label { font-size: var(--fs-lobby-col-label) !important; } .lb-stat-val { font-size: var(--fs-lobby-stat-val) !important; } .lb-stat-lbl { font-size: var(--fs-lobby-stat-lbl) !important; } .lb-launch { font-size: var(--fs-launch-btn) !important; } .lenv-label { font-size: var(--fs-lenv-label) !important; } .lrkt-name { font-size: var(--fs-lrkt-name) !important; } .panel-title { font-size: var(--fs-panel-title) !important; } .panel-sub { font-size: var(--fs-panel-sub) !important; } .p-btn { font-size: var(--fs-p-btn) !important; } .sp-title { font-size: var(--fs-sp-title) !important; } .sp-sub { font-size: var(--fs-sp-sub) !important; } .sp-group-label { font-size: var(--fs-sp-group) !important; } .sp-lbl { font-size: var(--fs-sp-lbl) !important; } .sp-desc { font-size: var(--fs-sp-desc) !important; } .sp-pill { font-size: var(--fs-sp-pill) !important; } .sp-hint { font-size: var(--fs-sp-hint) !important; } .sp-reset { font-size: var(--fs-sp-reset) !important; } .sp-save { font-size: var(--fs-sp-save) !important; } .s-title { font-size: var(--fs-s-title) !important; } .s-btn { font-size: var(--fs-s-btn) !important; } .s-btn-ghost { font-size: var(--fs-s-btn-ghost) !important; } .s-btn-reward { font-size: var(--fs-s-btn-reward) !important; } .go-score { font-size: var(--fs-go-score) !important; } .go-lbl { font-size: var(--fs-go-lbl) !important; } .go-best { font-size: var(--fs-go-best) !important; } .lb-store-bar-title { font-size: var(--fs-store-title) !important; } .env-name { font-size: var(--fs-env-name) !important; } .rkt-name { font-size: var(--fs-rkt-name) !important; } .panel { width: var(--panel-w) !important; } .settings-panel { max-width: var(--settings-w) !important; } /* AD MODAL — legacy responsive scaling block removed; #ad-skip-btn now inherits .lb-ov-back fully */ /* ================================================================ CRITICAL FIXES — v4 patch 1. Ad modal: remove hardcoded 300px width — make truly responsive 2. Overlay: always center on ALL screens (no flex-start on mobile) 3. All popups: deeper font + button + padding reduction every bp ================================================================ */ /* ── FIX 2: Overlay — always centered, never flex-start on mobile ── */ .overlay { align-items: center !important; justify-content: center !important; padding-top: 0 !important; overflow-y: auto !important; } /* Keep scroll ability but stay centered */ @media (max-width: 480px) { .overlay { align-items: center !important; justify-content: center !important; padding-top: max(env(safe-area-inset-top, 0px), 8px) !important; padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important; } #ad-modal { align-items: center !important; justify-content: center !important; } } @media (min-width: 481px) and (max-width: 768px) { .overlay { align-items: center !important; justify-content: center !important; } #ad-modal { align-items: center !important; justify-content: center !important; } } /* ── FIX 3: All popups — deeper reduction every breakpoint ── */ /* BASE tokens — tighter than previous pass */ :root { --fs-panel-title: clamp(0.6rem, 1.5vw, 0.88rem); --fs-panel-sub: clamp(0.3rem, 0.78vw, 0.42rem); --fs-p-btn: clamp(0.5rem, 1.1vw, 0.64rem); --panel-w: min(272px, 88vw); } .panel { width: var(--panel-w) !important; padding: clamp(10px, 1.8vh, 22px) clamp(10px, 2.2vw, 20px) clamp(8px, 1.5vh, 18px) !important; } .p-btn { padding: clamp(5px, 1vh, 9px) clamp(7px, 1.4vw, 12px) !important; font-size: var(--fs-p-btn) !important; } .p-gap { height: clamp(2px, 0.5vh, 5px) !important; } .p-row { gap: clamp(3px, 0.8vw, 6px) !important; } .p-stack { gap: clamp(3px, 0.7vh, 6px) !important; } .panel-icon { width: clamp(28px, 4.5vw, 38px) !important; height: clamp(28px, 4.5vw, 38px) !important; margin-bottom: clamp(6px, 1vh, 11px) !important; } .panel-icon svg { width: clamp(13px, 2.2vw, 19px) !important; height: clamp(13px, 2.2vw, 19px) !important; } .panel-x { width: clamp(24px, 3.5vw, 32px) !important; height: clamp(24px, 3.5vw, 32px) !important; top: 7px !important; right: 7px !important; } .panel-x svg { width: clamp(9px, 1.4vw, 12px) !important; height: clamp(9px, 1.4vw, 12px) !important; } /* ── 0–480px: most aggressive reduction ── */ @media (max-width: 480px) { :root { --fs-panel-title: clamp(0.5rem, 1.9vw, 0.62rem); --fs-panel-sub: clamp(0.26rem, 0.85vw, 0.34rem); --fs-p-btn: clamp(0.42rem, 1.4vw, 0.52rem); --panel-w: min(240px, 90vw); } .panel { width: var(--panel-w) !important; padding: 8px 9px 7px !important; max-height: 84dvh !important; border-radius: 6px !important; } .p-btn { padding: 4px 7px !important; font-size: var(--fs-p-btn) !important; border-radius: 3px !important; } .p-gap { height: 2px !important; } .p-row { gap: 3px !important; } .p-stack { gap: 3px !important; } .panel-icon { width: clamp(22px, 5.5vw, 28px) !important; height: clamp(22px, 5.5vw, 28px) !important; margin-bottom: clamp(4px, 0.8vh, 6px) !important; border-radius: 50% !important; } .panel-icon svg { width: clamp(10px, 2.8vw, 14px) !important; height: clamp(10px, 2.8vw, 14px) !important; } .panel-x { width: clamp(20px, 5vw, 26px) !important; height: clamp(20px, 5vw, 26px) !important; top: 5px !important; right: 5px !important; border-radius: 4px !important; } .panel-x svg { width: clamp(7px, 1.8vw, 10px) !important; height: clamp(7px, 1.8vw, 10px) !important; } /* Corner decorations */ .panel::before, .panel::after, .panel .p-br, .panel .p-bl { width: 10px !important; height: 10px !important; } .panel::before { top: 6px !important; left: 6px !important; } .panel::after { top: 6px !important; right: 6px !important; } .panel .p-br { bottom: 6px !important; right: 6px !important; } .panel .p-bl { bottom: 6px !important; left: 6px !important; } } /* ── 481–768px ── */ @media (min-width: 481px) and (max-width: 768px) { :root { --fs-panel-title: clamp(0.52rem, 1.7vw, 0.68rem); --fs-panel-sub: clamp(0.27rem, 0.88vw, 0.36rem); --fs-p-btn: clamp(0.44rem, 1.35vw, 0.54rem); --panel-w: min(252px, 90vw); } .panel { width: var(--panel-w) !important; padding: 9px 10px 8px !important; max-height: 85dvh !important; } .p-btn { padding: 5px 8px !important; font-size: var(--fs-p-btn) !important; } .p-gap { height: 2px !important; } .p-row { gap: 3px !important; } .p-stack { gap: 3px !important; } .panel-icon { width: clamp(24px, 5vw, 30px) !important; height: clamp(24px, 5vw, 30px) !important; margin-bottom: clamp(5px, 0.9vh, 8px) !important; } .panel-icon svg { width: clamp(11px, 2.5vw, 15px) !important; height: clamp(11px, 2.5vw, 15px) !important; } .panel-x { width: clamp(22px, 4.5vw, 28px) !important; height: clamp(22px, 4.5vw, 28px) !important; top: 6px !important; right: 6px !important; } .panel-x svg { width: clamp(8px, 1.6vw, 11px) !important; height: clamp(8px, 1.6vw, 11px) !important; } .panel::before, .panel::after, .panel .p-br, .panel .p-bl { width: 11px !important; height: 11px !important; } } /* ── 769–1024px ── */ @media (min-width: 769px) and (max-width: 1024px) { :root { --fs-panel-title: clamp(0.56rem, 1.6vw, 0.74rem); --fs-panel-sub: clamp(0.28rem, 0.85vw, 0.38rem); --fs-p-btn: clamp(0.46rem, 1.25vw, 0.56rem); --panel-w: min(258px, 88vw); } .panel { width: var(--panel-w) !important; padding: clamp(10px, 1.7vh, 17px) clamp(10px, 1.9vw, 16px) clamp(8px, 1.4vh, 13px) !important; max-height: 84dvh !important; } .p-btn { padding: clamp(5px, 1vh, 7px) clamp(7px, 1.4vw, 10px) !important; font-size: var(--fs-p-btn) !important; } .p-gap { height: clamp(2px, 0.4vh, 4px) !important; } .p-row { gap: clamp(3px, 0.7vw, 5px) !important; } .p-stack { gap: clamp(3px, 0.6vh, 5px) !important; } .panel-icon { width: clamp(25px, 4.2vw, 32px) !important; height: clamp(25px, 4.2vw, 32px) !important; } .panel-icon svg { width: clamp(12px, 2.2vw, 16px) !important; height: clamp(12px, 2.2vw, 16px) !important; } } /* ── 1025–1280px ── */ @media (min-width: 1025px) and (max-width: 1280px) { :root { --fs-panel-title: clamp(0.58rem, 1.55vw, 0.78rem); --fs-panel-sub: clamp(0.29rem, 0.84vw, 0.4rem); --fs-p-btn: clamp(0.48rem, 1.15vw, 0.58rem); --panel-w: min(264px, 87vw); } .panel { width: var(--panel-w) !important; padding: clamp(11px, 1.8vh, 18px) clamp(11px, 2vw, 17px) clamp(9px, 1.5vh, 14px) !important; max-height: 82dvh !important; } .p-btn { padding: clamp(5px, 1vh, 8px) clamp(7px, 1.3vw, 10px) !important; font-size: var(--fs-p-btn) !important; } .p-gap { height: clamp(2px, 0.45vh, 4px) !important; } .p-row { gap: clamp(3px, 0.7vw, 5px) !important; } .p-stack { gap: clamp(3px, 0.65vh, 5px) !important; } } /* ── 1281–1440px ── */ @media (min-width: 1281px) and (max-width: 1440px) { :root { --fs-panel-title: clamp(0.6rem, 1.58vw, 0.82rem); --fs-panel-sub: clamp(0.3rem, 0.85vw, 0.41rem); --fs-p-btn: clamp(0.5rem, 1.18vw, 0.6rem); --panel-w: min(268px, 86vw); } .panel { width: var(--panel-w) !important; padding: clamp(11px, 1.9vh, 19px) clamp(11px, 2.1vw, 18px) clamp(9px, 1.6vh, 15px) !important; max-height: 80dvh !important; } .p-btn { padding: clamp(5px, 1vh, 8px) clamp(8px, 1.35vw, 11px) !important; font-size: var(--fs-p-btn) !important; } .p-gap { height: clamp(2px, 0.46vh, 5px) !important; } .p-row { gap: clamp(3px, 0.72vw, 5px) !important; } .p-stack { gap: clamp(3px, 0.66vh, 5px) !important; } } /* Force all popup font variables at final cascade position */ .panel-title { font-size: var(--fs-panel-title) !important; } .panel-sub { font-size: var(--fs-panel-sub) !important; } .p-btn { font-size: var(--fs-p-btn) !important; } /* ================================================================ EXTRACTED INLINE STYLES — replaces style= attributes in HTML (Rejection #30 fix) ================================================================ */ /* Display utilities */ .rkt-grid-hidden { display: none; } .hidden-svg { display: none; } .hidden-btn { display: none; } /* Margin helpers */ .s-btn-mt { margin-top: 7px; } .s-sub-nomargin { margin-bottom: 0; } .s-div-mt { margin-top: 6px; } /* Star icons in go-newbest */ .star-icon { width: 10px; height: 10px; fill: #06b6d4; display: inline-block; vertical-align: middle; } .star-icon-left { margin-right: 4px; } .star-icon-right { margin-left: 4px; } /* Go-coins display */ .go-coins-display { color: #fde047; font-size: 0.72rem; letter-spacing: 0.08em; margin-top: 4px; } /* Panel button inline SVG icons */ .p-btn-icon { width: 12px; height: 12px; vertical-align: middle; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2; } .p-btn-icon-fill { width: 11px; height: 11px; vertical-align: middle; margin-right: 5px; fill: currentColor; } /* Panel icon variants */ .panel-icon-danger { border-color: rgba(200, 60, 60, 0.3); background: rgba(200, 60, 60, 0.05); } .panel-icon-error { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); } .panel-icon-gold { border-color: rgba(253, 224, 71, 0.3); background: rgba(253, 224, 71, 0.05); } /* SVG icon color variants */ .icon-danger { stroke: rgba(200, 80, 80, 0.7); } .icon-error { stroke: rgba(239, 68, 68, 0.7); } .icon-gold { stroke: rgba(253, 224, 71, 0.8); fill: none; stroke-width: 2; } /* Panel title color variants */ .panel-title-danger { color: #e06060; text-shadow: 0 0 20px rgba(220, 60, 60, 0.3); } .panel-title-error { color: #f87171; text-shadow: 0 0 20px rgba(239, 68, 68, 0.25); } .panel-title-gold { color: #fde047; text-shadow: 0 0 20px rgba(253, 224, 71, 0.25); } /* Overlay z-index layers */ .ov-settings-layer { z-index: 400; } .ov-reset-layer { z-index: 410; } .ov-unlock-layer { z-index: 420; } /* Panel close button icon */ .panel-x-icon { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.5; } /* Unlock popup rows */ .unlock-cost-row { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); margin: 4px 0 12px; text-align: center; } .unlock-short-msg { font-size: 0.72rem; color: rgba(239, 68, 68, 0.7); text-align: center; margin-bottom: 10px; display: none; } /* Ad modal title */ .ad-modal-title { font-family: "Nunito", sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(6, 182, 212, 0.8); } /* Google Fonts — loaded via CDN (Rejection #2 documentation) */ /* Fonts: Poppins (900 Black), Orbitron (HUD) */ /* Loaded from: https://fonts.googleapis.com (CDN, not bundled locally) */ .coin-label { color: #fde047; font-weight: 700; } /* ================================================================ INFO-STYLE POPUP REDESIGN All popups now use the same full-page overlay design as the info popup. Applies to: pause, quit, settings, reset, unlock/purchase, ad modal. ================================================================ */ /* Override .overlay to use lb-overlay full-page background */ #ov-pause, #ov-quit, #ov-settings, #ov-reset, #ov-unlock { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(15, 15, 15, 0.9) 50%, rgba(0, 0, 0, 0.96) 100% ), url("../images/background.jpg") center center / cover no-repeat !important; backdrop-filter: none !important; align-items: stretch !important; justify-content: stretch !important; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #ov-pause.show, #ov-quit.show, #ov-settings.show, #ov-reset.show, #ov-unlock.show { opacity: 1; pointer-events: all; } /* Center content vertically — full page, no card, just center y */ #ov-pause .lb-overlay-inner, #ov-quit .lb-overlay-inner, #ov-reset .lb-overlay-inner, #ov-unlock .lb-overlay-inner { width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Settings stays top-aligned (scrollable) */ #ov-settings .lb-overlay-inner { width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; } /* Ad skip button — inherits .lb-ov-back fully, no overrides needed */ #ad-skip-btn #ad-skip-txt { font-size: inherit; font-weight: inherit; font-family: inherit; letter-spacing: inherit; } /* Settings popup — scrollable body handled by info-section now */ #ov-settings .info-popup-body { flex: 1; min-height: 0; overflow: visible; } /* Override settings panel inside new layout */ #ov-settings .settings-panel { max-width: 100% !important; width: 100% !important; max-height: none !important; overflow-y: visible !important; } /* Settings info-section: scrollable container for settings content */ #ov-settings .info-section { overflow-y: auto; -webkit-overflow-scrolling: touch; } #ov-settings .info-section::-webkit-scrollbar { width: 3px; } #ov-settings .info-section::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.3); border-radius: 2px; } /* Ensure lb-select-btn hover on quit/reset danger variant */ #ov-quit .lb-select-btn:last-child:hover, #ov-reset .lb-select-btn:last-child:hover { border-color: rgba(239, 68, 68, 0.6) !important; color: #f87171 !important; background: rgba(239, 68, 68, 0.1) !important; box-shadow: 0 0 20px rgba(239, 68, 68, 0.2) !important; } /* Unlock gold button hover */ #btn-unlock-confirm:hover { border-color: rgba(253, 224, 71, 0.7) !important; color: #fde047 !important; background: rgba(253, 224, 71, 0.1) !important; box-shadow: 0 0 20px rgba(253, 224, 71, 0.2) !important; } /* Ensure transition animation for new popup structure */ #ad-modal .lb-overlay-inner { transform: translateY(0); transition: transform 0.3s ease; width: 100%; height: 100%; } /* #ad-modal show/hide is now handled by .lb-overlay / .lb-overlay.hidden */ /* ================================================================ CENTER Y FIX Vertically center content in full-page overlays. No card styling — plain full-page layout, content centered in Y. ================================================================ */ /* Quit / Pause / Reset / Unlock / Ad modal: lb-overlay-inner fills full page, info-popup-body is the flex child that holds the actual content. Make it grow and center its children vertically. */ #ov-quit .info-popup-body, #ov-pause .info-popup-body, #ov-reset .info-popup-body, #ov-unlock .info-popup-body { justify-content: center !important; flex: 1 !important; min-height: 0 !important; } /* Ad modal: scrolls from top so nothing gets clipped on small screens */ #ad-modal .info-popup-body { justify-content: flex-start !important; flex: 1 !important; min-height: 0 !important; align-items: center !important; } /* Ad modal: center the section title */ #ad-modal .info-section-title { text-align: center; } /* Ad modal: info-section centers iframe */ #ad-modal .info-section { align-items: center; width: 100%; } #ad-modal .info-divider { width: 60%; } #ad-modal #ad-frame { background: transparent !important; } /* Info popup: lb-overlay-inner--narrow fills height, info-popup-body centers its content vertically */ #ov-info .info-popup-body { justify-content: center !important; } /* ================================================================ CENTER Y — SETTINGS + ALL REMAINING POPUPS ================================================================ */ /* Settings: lb-overlay-inner centers the header + body as a unit */ #ov-settings .lb-overlay-inner { justify-content: flex-start !important; } /* Settings info-popup-body: fills available space, info-section scrolls inside */ #ov-settings .info-popup-body { flex: 1 !important; max-height: none !important; min-height: 0 !important; } /* ================================================================ LOBBY LAYOUT — title larger, logo top, play center, bottom flex-end ================================================================ */ /* Bigger title in lobby only — popups keep their own inline sizes */ #lobby .lb-title { font-size: clamp(2.4rem, 6vw, 5rem) !important; margin-bottom: 4px; } #lobby .lb-tag { font-size: clamp(0.6rem, 1.4vw, 0.9rem) !important; } #lobby .lb-ew-txt { font-size: clamp(0.5rem, 1.1vw, 0.72rem) !important; letter-spacing: 0.45em; } /* ── Lobby coins display ── */ .lb-lobby-coins { display: flex; align-items: center; gap: 6px; margin-top: clamp(10px, 1.8vh, 18px); font-family: "Nunito", sans-serif; font-size: clamp(0.72rem, 1.4vw, 0.92rem); font-weight: 700; letter-spacing: 0.12em; color: rgba(253, 224, 71, 0.9); padding: clamp(6px, 1vh, 10px) clamp(16px, 3vw, 28px); border-radius: 30px; border: 1px solid rgba(253, 224, 71, 0.2); background: rgba(253, 224, 71, 0.05); } .lb-lobby-coins svg { color: rgba(253, 224, 71, 0.8); fill: currentColor; flex-shrink: 0; } /* ================================================================ LOBBY THEME SYSTEM — Orange (default) & Dark Mode Activated by data-lobby-theme="dark" on ================================================================ */ /* ── Theme selector pills ── */ .sp-theme-pills { display: flex; gap: 8px; width: 100%; margin-top: 4px; } .sp-theme-pill { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(8px, 1.2vh, 12px) clamp(6px, 1.2vw, 10px) clamp(6px, 1vh, 9px); border-radius: 8px; border: 1.5px solid rgba(6, 182, 212, 0.2); background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: all 0.18s; position: relative; overflow: hidden; } .sp-theme-pill:hover { border-color: rgba(6, 182, 212, 0.45); background: rgba(255, 255, 255, 0.05); transform: translateY(-1px); } .sp-theme-pill.active { border-color: rgba(6, 182, 212, 0.75); background: rgba(6, 182, 212, 0.1); box-shadow: 0 0 14px rgba(6, 182, 212, 0.18); } /* Active checkmark */ .sp-theme-pill.active::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #06b6d4; box-shadow: 0 0 6px rgba(6, 182, 212, 0.7); } /* Swatch preview area */ .sp-theme-swatch { width: 100%; height: 36px; border-radius: 5px; overflow: hidden; position: relative; flex-shrink: 0; } /* Purple theme swatch */ .sp-theme-pill[data-theme="orange"] .sp-theme-swatch { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2a 100%); border: 1px solid rgba(200, 200, 200, 0.35); } .sp-theme-pill[data-theme="orange"] .sp-theme-swatch::before { content: ""; position: absolute; inset: 4px 4px 4px auto; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #888888, #dddddd); box-shadow: 0 0 8px rgba(200, 200, 200, 0.5); } .sp-theme-pill[data-theme="orange"] .sp-theme-swatch::after { content: ""; position: absolute; bottom: 5px; left: 5px; right: 14px; height: 2px; border-radius: 1px; background: rgba(6, 182, 212, 0.35); } /* Dark theme swatch */ .sp-theme-pill[data-theme="dark"] .sp-theme-swatch { background: linear-gradient(135deg, #0a0f1a 0%, #111827 100%); border: 1px solid rgba(148, 163, 184, 0.2); } .sp-theme-pill[data-theme="dark"] .sp-theme-swatch::before { content: ""; position: absolute; inset: 4px 4px 4px auto; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #94a3b8, #cbd5e1); box-shadow: 0 0 8px rgba(148, 163, 184, 0.5); } .sp-theme-pill[data-theme="dark"] .sp-theme-swatch::after { content: ""; position: absolute; bottom: 5px; left: 5px; right: 14px; height: 2px; border-radius: 1px; background: rgba(148, 163, 184, 0.25); } .sp-theme-label { font-family: "Nunito", sans-serif; font-size: clamp(9px, 1.3vw, 12px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); transition: color 0.18s; } .sp-theme-pill.active .sp-theme-label { color: rgba(255, 255, 255, 0.9); } /* Dark pill active uses slate accent */ .sp-theme-pill[data-theme="dark"].active { border-color: rgba(148, 163, 184, 0.6); background: rgba(148, 163, 184, 0.08); box-shadow: 0 0 14px rgba(148, 163, 184, 0.12); } .sp-theme-pill[data-theme="dark"].active::after { background: #94a3b8; box-shadow: 0 0 6px rgba(148, 163, 184, 0.5); } /* ================================================================ DARK LOBBY THEME Applied via: body[data-lobby-theme="dark"] Affects: #lobby, #loading-screen, .lb-overlay, overlays, popups, settings, ad modal — everything lobby-facing ================================================================ */ /* ── Color token overrides ── */ body[data-lobby-theme="dark"] { --lbt-accent: #94a3b8; --lbt-accent-bright: #cbd5e1; --lbt-accent-glow: rgba(148, 163, 184, 0.25); --lbt-accent-border: rgba(148, 163, 184, 0.22); --lbt-accent-border2: rgba(148, 163, 184, 0.5); --lbt-bg-deep: #060a12; --lbt-bg-mid: #0d1422; --lbt-panel: linear-gradient(145deg, #0d1525, #080f1c); --lbt-orange-dim: rgba(148, 163, 184, 0.18); } /* ── Lobby background ── */ body[data-lobby-theme="dark"] #lobby { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(15, 15, 15, 0.75) 50%, rgba(0, 0, 0, 0.88) 100% ), url("../images/background.jpg") center center / cover no-repeat; } /* ── Loading screen ── */ body[data-lobby-theme="dark"] #loading-screen { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.97) 0%, rgba(10, 10, 10, 0.94) 50%, rgba(0, 0, 0, 0.98) 100% ), url("../images/background.jpg") center center / cover no-repeat; } body[data-lobby-theme="dark"] .ld-bar-fill { background: linear-gradient(90deg, #4a6080, #6b82a4, #94a3b8, #c0cfe0); box-shadow: 0 0 14px rgba(148, 163, 184, 0.45); } body[data-lobby-theme="dark"] .ld-bar-fill::after { background: rgba(180, 210, 240, 0.4); } body[data-lobby-theme="dark"] .ld-bar-track { border-color: rgba(148, 163, 184, 0.18); } body[data-lobby-theme="dark"] .ld-bar-pct { color: rgba(148, 163, 184, 0.75); } /* ── Lobby overlays (themes/rockets/info/settings pages) ── */ body[data-lobby-theme="dark"] .lb-overlay { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.96) 0%, rgba(12, 12, 12, 0.91) 50%, rgba(0, 0, 0, 0.97) 100% ), url("../images/background.jpg") center center / cover no-repeat; } /* ── Popups that use .overlay + background.jpg ── */ body[data-lobby-theme="dark"] #ov-pause, body[data-lobby-theme="dark"] #ov-quit, body[data-lobby-theme="dark"] #ov-settings, body[data-lobby-theme="dark"] #ov-reset, body[data-lobby-theme="dark"] #ov-unlock, body[data-lobby-theme="dark"] #ad-modal { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.96) 0%, rgba(12, 12, 12, 0.91) 50%, rgba(0, 0, 0, 0.97) 100% ), url("../images/background.jpg") center center / cover no-repeat !important; } /* ── .panel cards ── */ body[data-lobby-theme="dark"] .panel { background: linear-gradient(145deg, #0d1525, #080f1c) !important; border-color: rgba(148, 163, 184, 0.18) !important; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.75), 0 0 60px rgba(148, 163, 184, 0.03) !important; } body[data-lobby-theme="dark"] .panel::before, body[data-lobby-theme="dark"] .panel::after, body[data-lobby-theme="dark"] .panel .p-br, body[data-lobby-theme="dark"] .panel .p-bl { border-color: rgba(148, 163, 184, 0.28) !important; } body[data-lobby-theme="dark"] .panel-title { color: #94a3b8 !important; text-shadow: 0 0 20px rgba(148, 163, 184, 0.25) !important; } body[data-lobby-theme="dark"] .panel-icon { border-color: rgba(148, 163, 184, 0.2) !important; background: rgba(148, 163, 184, 0.05) !important; } body[data-lobby-theme="dark"] .panel-icon svg { stroke: rgba(148, 163, 184, 0.75) !important; } body[data-lobby-theme="dark"] .panel-x:hover { color: #94a3b8 !important; background: rgba(148, 163, 184, 0.1) !important; border-color: rgba(148, 163, 184, 0.25) !important; } /* ── .p-btn ── */ body[data-lobby-theme="dark"] .p-btn { border-color: rgba(148, 163, 184, 0.2) !important; color: rgba(148, 163, 184, 0.75) !important; background: rgba(148, 163, 184, 0.03) !important; } body[data-lobby-theme="dark"] .p-btn:hover { background: rgba(148, 163, 184, 0.1) !important; border-color: rgba(148, 163, 184, 0.5) !important; color: #cbd5e1 !important; box-shadow: 0 0 16px rgba(148, 163, 184, 0.14) !important; } body[data-lobby-theme="dark"] .p-btn.primary { background: #475569 !important; color: #f1f5f9 !important; border-color: #475569 !important; } body[data-lobby-theme="dark"] .p-btn.primary:hover { background: rgba(71, 85, 105, 0.85) !important; box-shadow: 0 0 24px rgba(148, 163, 184, 0.35) !important; } /* ── Header (lb-ov-header) back button & coins ── */ body[data-lobby-theme="dark"] .lb-ov-header { border-bottom-color: rgba(148, 163, 184, 0.1) !important; } body[data-lobby-theme="dark"] .lb-ov-back { color: rgba(148, 163, 184, 0.85) !important; border-color: rgba(148, 163, 184, 0.25) !important; background: rgba(148, 163, 184, 0.05) !important; } body[data-lobby-theme="dark"] .lb-ov-back:hover { border-color: rgba(148, 163, 184, 0.6) !important; background: rgba(148, 163, 184, 0.1) !important; color: #f1f5f9 !important; } /* Header title text */ body[data-lobby-theme="dark"] .lb-ov-header [style*="color:#fff"] { color: #e2e8f0 !important; } body[data-lobby-theme="dark"] .lb-ov-header [style*="rgba(255,140,0"] { color: rgba(148, 163, 184, 0.6) !important; } /* ── Info divider ── */ body[data-lobby-theme="dark"] .info-divider { background: linear-gradient( 90deg, transparent, rgba(148, 163, 184, 0.25), transparent ) !important; } /* ── Settings group labels ── */ body[data-lobby-theme="dark"] .sp-group-label { color: rgba(148, 163, 184, 0.65) !important; border-bottom-color: rgba(148, 163, 184, 0.12) !important; } /* ── sp-pill ── */ body[data-lobby-theme="dark"] .sp-pill { border-color: rgba(148, 163, 184, 0.18) !important; color: rgba(148, 163, 184, 0.5) !important; background: rgba(255, 255, 255, 0.02) !important; } body[data-lobby-theme="dark"] .sp-pill:hover { border-color: rgba(148, 163, 184, 0.4) !important; color: rgba(203, 213, 225, 0.85) !important; } body[data-lobby-theme="dark"] .sp-pill.active { border-color: #6b82a4 !important; background: rgba(148, 163, 184, 0.14) !important; color: #cbd5e1 !important; box-shadow: 0 0 10px rgba(148, 163, 184, 0.15) !important; } /* ── Toggle ── */ body[data-lobby-theme="dark"] .toggle.on { background: rgba(148, 163, 184, 0.28) !important; border-color: rgba(148, 163, 184, 0.55) !important; } body[data-lobby-theme="dark"] .toggle.on::after { background: #94a3b8 !important; } /* ── sp-save & sp-reset ── */ body[data-lobby-theme="dark"] .sp-save { border-color: rgba(148, 163, 184, 0.5) !important; background: rgba(148, 163, 184, 0.1) !important; color: #94a3b8 !important; } body[data-lobby-theme="dark"] .sp-save:hover { background: rgba(148, 163, 184, 0.18) !important; border-color: #94a3b8 !important; box-shadow: 0 0 16px rgba(148, 163, 184, 0.18) !important; } /* ── Lobby big play button ── */ body[data-lobby-theme="dark"] .lb-big-play { border-color: rgba(148, 163, 184, 0.6) !important; background: radial-gradient( circle at 38% 38%, rgba(148, 163, 184, 0.28) 0%, rgba(71, 85, 105, 0.2) 60%, rgba(30, 41, 59, 0.12) 100% ) !important; box-shadow: 0 0 40px rgba(148, 163, 184, 0.22), 0 0 80px rgba(100, 116, 139, 0.1), inset 0 2px 0 rgba(203, 213, 225, 0.18), inset 0 -2px 0 rgba(15, 23, 42, 0.3) !important; } body[data-lobby-theme="dark"] .lb-big-play::before { border-color: rgba(148, 163, 184, 0.2) !important; } body[data-lobby-theme="dark"] .lb-big-play svg { color: #94a3b8 !important; fill: #94a3b8 !important; filter: drop-shadow(0 0 8px rgba(148, 163, 184, 0.4)) !important; } body[data-lobby-theme="dark"] .lb-big-play:hover { border-color: #6b82a4 !important; box-shadow: 0 0 60px rgba(148, 163, 184, 0.38), 0 0 120px rgba(100, 116, 139, 0.18), inset 0 2px 0 rgba(203, 213, 225, 0.25), inset 0 -2px 0 rgba(15, 23, 42, 0.3) !important; } /* ── Small icon buttons ── */ body[data-lobby-theme="dark"] .lb-icon-btn { border-color: rgba(148, 163, 184, 0.3) !important; background: rgba(100, 116, 139, 0.07) !important; color: rgba(148, 163, 184, 0.8) !important; } body[data-lobby-theme="dark"] .lb-icon-btn:hover { border-color: rgba(148, 163, 184, 0.65) !important; background: rgba(100, 116, 139, 0.14) !important; box-shadow: 0 0 20px rgba(148, 163, 184, 0.2) !important; color: #f1f5f9 !important; } /* ── Gear button ── */ body[data-lobby-theme="dark"] .lb-gear { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.07) !important; color: rgba(255, 255, 255, 0.25) !important; } body[data-lobby-theme="dark"] .lb-gear:hover { border-color: rgba(148, 163, 184, 0.4) !important; color: rgba(148, 163, 184, 0.8) !important; background: rgba(148, 163, 184, 0.06) !important; box-shadow: 0 0 12px rgba(148, 163, 184, 0.1) !important; } /* ── Launch button ── */ body[data-lobby-theme="dark"] .lb-launch { border-color: rgba(148, 163, 184, 0.5) !important; background: linear-gradient( 135deg, rgba(100, 116, 139, 0.18) 0%, rgba(71, 85, 105, 0.1) 100% ) !important; color: #94a3b8 !important; box-shadow: 0 0 24px rgba(148, 163, 184, 0.1), inset 0 1px 0 rgba(148, 163, 184, 0.08) !important; } body[data-lobby-theme="dark"] .lb-launch:hover { border-color: #6b82a4 !important; background: rgba(100, 116, 139, 0.25) !important; box-shadow: 0 0 32px rgba(148, 163, 184, 0.22) !important; color: #f1f5f9 !important; } /* ── Select buttons (themes / rockets) ── */ body[data-lobby-theme="dark"] .lb-select-btn { border-color: rgba(148, 163, 184, 0.35) !important; background: rgba(100, 116, 139, 0.07) !important; color: rgba(148, 163, 184, 0.85) !important; } body[data-lobby-theme="dark"] .lb-select-btn:hover { border-color: rgba(148, 163, 184, 0.7) !important; background: rgba(100, 116, 139, 0.15) !important; box-shadow: 0 0 24px rgba(148, 163, 184, 0.18) !important; color: #fff !important; } /* ── Lobby title gradient ── */ body[data-lobby-theme="dark"] .lb-title { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #f1f5f9 !important; background-clip: unset !important; color: #f1f5f9 !important; } /* ── Stat values & labels ── */ body[data-lobby-theme="dark"] .lb-stat-val { color: #64748b !important; } /* Override difficulty colors to neutral in dark mode */ body[data-lobby-theme="dark"] #l-diff-val.diff-normal { color: #64748b !important; } body[data-lobby-theme="dark"] #l-diff-val.diff-hard { color: #78716c !important; } body[data-lobby-theme="dark"] #l-diff-val.diff-insane { color: #6b7280 !important; } /* ── Column headers ── */ body[data-lobby-theme="dark"] .lb-col-label { color: rgba(148, 163, 184, 0.65) !important; } body[data-lobby-theme="dark"] .lb-vdiv { background: rgba(148, 163, 184, 0.06) !important; } body[data-lobby-theme="dark"] .lb-head { border-bottom-color: rgba(148, 163, 184, 0.06) !important; } body[data-lobby-theme="dark"] .lb-mid { border-bottom-color: rgba(148, 163, 184, 0.06) !important; } /* ── Env cards ── */ body[data-lobby-theme="dark"] .lenv-card { border-color: rgba(148, 163, 184, 0.08) !important; } body[data-lobby-theme="dark"] .lenv-card:hover { border-color: rgba(148, 163, 184, 0.2) !important; } body[data-lobby-theme="dark"] .lenv-card.active { border-color: var(--ec, #64748b) !important; } /* ── Rocket cards ── */ body[data-lobby-theme="dark"] .lrkt-card { border-color: rgba(148, 163, 184, 0.07) !important; background: rgba(148, 163, 184, 0.01) !important; } body[data-lobby-theme="dark"] .lrkt-card:hover { border-color: rgba(148, 163, 184, 0.18) !important; background: rgba(148, 163, 184, 0.04) !important; } body[data-lobby-theme="dark"] .lrkt-card.active { border-color: #4b5563 !important; background: rgba(100, 116, 139, 0.05) !important; } /* ── Store face (coins bar) ── */ body[data-lobby-theme="dark"] .lb-store-bar { border-bottom-color: rgba(148, 163, 184, 0.08) !important; } body[data-lobby-theme="dark"] .lb-store-back { border-color: rgba(148, 163, 184, 0.12) !important; color: rgba(148, 163, 184, 0.75) !important; } body[data-lobby-theme="dark"] .lb-store-back:hover { border-color: rgba(148, 163, 184, 0.5) !important; color: rgba(148, 163, 184, 0.95) !important; } body[data-lobby-theme="dark"] .lb-store-link { color: rgba(148, 163, 184, 0.85) !important; border-color: rgba(148, 163, 184, 0.32) !important; background: rgba(100, 116, 139, 0.1) !important; } body[data-lobby-theme="dark"] .lb-store-link:hover { color: #fff !important; border-color: rgba(148, 163, 184, 0.65) !important; background: rgba(100, 116, 139, 0.22) !important; } body[data-lobby-theme="dark"] .lb-store-toast { background: rgba(10, 15, 28, 0.95) !important; border-color: rgba(148, 163, 184, 0.3) !important; color: rgba(148, 163, 184, 0.9) !important; } body[data-lobby-theme="dark"] .lb-store-bar-title { color: #e2e8f0 !important; } /* ── Overlay grid header ── */ body[data-lobby-theme="dark"] .lb-ov-header { border-bottom-color: rgba(148, 163, 184, 0.1) !important; } body[data-lobby-theme="dark"] #ad-skip-btn { color: rgba(148, 163, 184, 0.75) !important; border-color: rgba(148, 163, 184, 0.2) !important; } body[data-lobby-theme="dark"] #ad-skip-btn:not(:disabled):hover { color: #94a3b8 !important; border-color: rgba(148, 163, 184, 0.5) !important; background: rgba(148, 163, 184, 0.08) !important; } body[data-lobby-theme="dark"] #ad-modal-footer { border-top-color: rgba(148, 163, 184, 0.06) !important; } /* ── .s-btn (in-game screens inherit lobby theme on screen overlays) ── */ body[data-lobby-theme="dark"] .s-btn { border-color: rgba(148, 163, 184, 0.45) !important; background: rgba(100, 116, 139, 0.06) !important; color: rgba(148, 163, 184, 0.9) !important; } body[data-lobby-theme="dark"] .s-btn:hover { border-color: rgba(148, 163, 184, 0.75) !important; background: rgba(100, 116, 139, 0.14) !important; color: #fff !important; box-shadow: 0 0 28px rgba(148, 163, 184, 0.22) !important; } body[data-lobby-theme="dark"] .s-btn::before { background: linear-gradient( 90deg, rgba(100, 116, 139, 0.18), rgba(148, 163, 184, 0.18) ) !important; } /* ── s-title gradient ── */ body[data-lobby-theme="dark"] .s-title { background: linear-gradient( 135deg, #6b82a4 0%, #e2e8f0 35%, #f8fafc 65%, #94a3b8 100% ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── s-div accent line ── */ body[data-lobby-theme="dark"] .s-div-line { background: rgba(148, 163, 184, 0.2) !important; } body[data-lobby-theme="dark"] .s-div-gem { background: #6b82a4 !important; } /* ── Reward button ── */ body[data-lobby-theme="dark"] .s-btn-reward { background: linear-gradient(135deg, #475569, #64748b, #94a3b8) !important; box-shadow: 0 0 24px rgba(148, 163, 184, 0.35), 0 4px 16px rgba(71, 85, 105, 0.2) !important; color: #f1f5f9 !important; } body[data-lobby-theme="dark"] .s-btn-reward:hover { box-shadow: 0 0 40px rgba(148, 163, 184, 0.5), 0 6px 24px rgba(71, 85, 105, 0.3) !important; } /* ── game-title-bar, key-hint-bar ── */ body[data-lobby-theme="dark"] #game-title-bar-REMOVED { background: rgba(6, 10, 20, 0.97) !important; border-bottom-color: rgba(148, 163, 184, 0.1) !important; } body[data-lobby-theme="dark"] #game-title-tag { color: rgba(148, 163, 184, 0.3) !important; } body[data-lobby-theme="dark"] #game-viewport { border-bottom-color: rgba(148, 163, 184, 0.07) !important; } body[data-lobby-theme="dark"] #key-hint-bar kbd { color: rgba(148, 163, 184, 0.55) !important; } /* ── Lobby coins display ── */ body[data-lobby-theme="dark"] .lb-lobby-coins { color: rgba(148, 163, 184, 0.85) !important; border-color: rgba(148, 163, 184, 0.18) !important; background: rgba(148, 163, 184, 0.04) !important; } body[data-lobby-theme="dark"] .lb-lobby-coins svg { color: rgba(148, 163, 184, 0.75) !important; } body[data-lobby-theme="dark"] .lb-ov-coins { color: rgba(148, 163, 184, 0.8) !important; } body[data-lobby-theme="dark"] .lb-ov-coins svg { color: rgba(148, 163, 184, 0.65) !important; } /* ── Quit/reset danger buttons keep their red in dark mode ── */ body[data-lobby-theme="dark"] #ov-quit .lb-select-btn:last-child, body[data-lobby-theme="dark"] #ov-reset .lb-select-btn:last-child { border-color: rgba(239, 68, 68, 0.28) !important; color: rgba(239, 100, 100, 0.75) !important; background: rgba(239, 68, 68, 0.04) !important; } /* ── Lock badges stay yellow (coin color) in both themes ── */ /* no override needed — fde047 stays */ /* ── s-prompt ── */ body[data-lobby-theme="dark"] .s-prompt { color: rgba(255, 255, 255, 0.25) !important; } /* ================================================================ AD MODAL — PINNED HEADING + SCROLLABLE BODY Heading lives outside info-popup-body so it never scrolls away. ================================================================ */ .ad-modal-heading { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: clamp(18px, 3vh, 28px) clamp(16px, 3vw, 32px) clamp(14px, 2vh, 20px); text-align: center; border-bottom: 1px solid rgba(6, 182, 212, 0.1); } /* Allow the overlay inner to let its child body scroll */ #ad-modal .lb-overlay-inner { overflow: hidden; } #ad-modal .info-popup-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: clamp(24px, 4vh, 40px); } /* Ad countdown wrap — shown in skip button during ad countdown */ .ad-countdown-wrap { font-size: 0.8em; opacity: 0.6; } /* ================================================================ INLINE STYLE EXTRACTIONS — Rejection #30 All styles previously written as inline style="" attributes have been moved here. ================================================================ */ /* --- Utility: hidden elements (JS-compat divs) --- */ .js-hidden { display: none; } /* --- SVG icon sizes used in overlay buttons --- */ .svg-icon-sm { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .svg-icon-sm-round { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .svg-icon-sm-fill { width: 16px; height: 16px; fill: currentColor; } .svg-icon-panel { width: clamp(20px, 3.5vw, 28px); height: clamp(20px, 3.5vw, 28px); fill: none; stroke-width: 1.8; stroke-linecap: round; } .svg-icon-panel-round { width: clamp(20px, 3.5vw, 28px); height: clamp(20px, 3.5vw, 28px); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .svg-icon-panel-plain { width: clamp(20px, 3.5vw, 28px); height: clamp(20px, 3.5vw, 28px); } .svg-icon-panel-orange { width: clamp(20px, 3.5vw, 28px); height: clamp(20px, 3.5vw, 28px); fill: none; stroke: rgba(6, 182, 212, 0.7); stroke-width: 1.8; stroke-linecap: round; } /* --- Sound off SVG (hidden by default, toggled by JS) --- */ #ico-sound-off, #ctrl-ico-off { display: none; } /* --- Ad iframe --- */ #ad-frame { display: block; width: 100%; border: none; background: transparent; border-radius: 6px; aspect-ratio: 16 / 9; } /* --- Overlay inner width variants --- */ .lb-overlay-inner--narrow-480 { max-width: min(480px, 100vw); } .lb-overlay-inner--narrow-560 { max-width: min(560px, 100vw); } /* --- Popup body alignment variants --- */ .info-popup-body--centered { align-items: center; gap: clamp(14px, 2.5vh, 22px); } .info-popup-body--gap { gap: clamp(14px, 2.5vh, 22px); } /* --- Game logo stack inside panels --- */ .info-game-logo--stack { display: flex; flex-direction: column; align-items: center; gap: 8px; } /* --- Panel icon base (circle container for SVG) --- */ .panel-icon--circle { width: clamp(44px, 7vw, 60px); height: clamp(44px, 7vw, 60px); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; } /* Pause panel — orange tint */ .panel-icon--pause { border: 1px solid rgba(6, 182, 212, 0.2); background: rgba(6, 182, 212, 0.05); } /* Danger/quit panel — inherits panel-icon-danger colors */ .panel-icon--auto { width: clamp(44px, 7vw, 60px); height: clamp(44px, 7vw, 60px); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; } /* --- Panel titles (overrides gradient for colored variants) --- */ .panel-title--colored { font-size: clamp(1.4rem, 4vw, 2.2rem); background: none; -webkit-text-fill-color: unset; } .panel-title--pause { font-size: clamp(1.4rem, 4vw, 2.2rem); } .panel-tag--sm { font-size: clamp(0.44rem, 1vw, 0.62rem); } /* --- Info section variants --- */ .info-section--grow { flex: 1; min-height: 0; } .info-section--centered-280 { align-items: center; width: min(280px, 80vw); gap: 10px; } .info-section--centered-300 { align-items: center; width: min(300px, 84vw); gap: 4px; } /* --- Overlay grid wrap (scrollable theme/rocket grids) --- */ .lb-ov-grid-wrap--scroll { flex: 1; overflow-y: auto; padding: 0; margin-top: 4px; } /* --- Full-width centered button (used across all panels) --- */ .lb-select-btn--full { width: 100%; justify-content: center; } /* --- Lobby button (secondary, muted) --- */ #btn-pause-lobby { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.03); } /* --- Quit / confirm danger button --- */ .lb-select-btn--danger { border-color: rgba(239, 68, 68, 0.3); color: rgba(239, 100, 100, 0.75); background: rgba(239, 68, 68, 0.04); } /* --- Quit panel: lighter danger variant --- */ .lb-select-btn--danger-light { border-color: rgba(239, 68, 68, 0.25); color: rgba(239, 100, 100, 0.7); background: rgba(239, 68, 68, 0.04); } /* --- Gold/unlock button --- */ .lb-select-btn--gold { border-color: rgba(253, 224, 71, 0.4); color: rgba(253, 224, 71, 0.85); background: rgba(253, 224, 71, 0.05); } /* --- Cancel/ghost button (very subtle) --- */ .lb-select-btn--ghost { border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.02); } /* --- Settings panel (transparent, borderless inside overlay) --- */ .settings-panel--bare { width: 100%; max-width: 100%; background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0; overflow: visible; max-height: none; } /* --- Info divider with responsive vertical margin --- */ .info-divider--spaced { margin: clamp(10px, 1.8vh, 18px) 0; } /* --- Unlock cost row --- */ .info-ctrl-row--cost { justify-content: center; font-size: clamp(0.68rem, 1.4vw, 0.82rem); color: rgba(255, 255, 255, 0.5); } .coin-label--spaced { margin-left: 6px; } .unlock-short-msg--sm { font-size: clamp(0.6rem, 1.2vw, 0.72rem); } /* --- ad-placeholder.html html element bg --- */ html.ad-page { background: transparent; } /* ================================================================ ASTRO CHICKENS — Game-specific additions ================================================================ */ /* Title color override — clean white */ .lb-title { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #ffffff !important; background-clip: unset !important; color: #ffffff !important; } /* Power-up color classes */ .powerup-weapon { color: #22d3ee; } .powerup-shield { color: #60a5fa; } .powerup-life { color: #f87171; } .powerup-rapid { color: #a3e635; } .powerup-spread { color: #c084fc; } .powerup-laser { color: #0891b2; } /* HUD lives display */ #hud-best { font-size: clamp(0.5rem, 1.2vw, 0.65rem); letter-spacing: 0.08em; } /* Wave clear banner — drawn on canvas, no extra CSS needed */ /* Boss health bar glow effect (canvas-drawn, reference only) */ .boss-health-glow { filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.8)); } /* Touch control hint - left side = move, right = shoot */ #ctrl-btn-tap svg { transform: rotate(-90deg); } /* Mobile virtual control labels */ #ctrl-left .ctrl-label { color: #34d399; } #ctrl-right .ctrl-label { color: #22d3ee; } /* Astro Chickens themed game heading */ #game-heading-block .lb-tag { letter-spacing: 0.3em; } /* Wave/level toast styling */ #level-toast { text-shadow: 0 0 20px rgba(251, 191, 36, 0.8), 0 0 40px rgba(6, 182, 212, 0.4); } /* ── Ability pill — inside key-hint-bar ── */ #ability-pill { display: inline-flex; align-items: center; gap: 5px; padding: 0 4px 0 6px; border-left: 1px solid rgba(255, 255, 255, 0.25); margin-left: 4px; } #hud-ability { font-family: "Nunito", sans-serif; font-size: clamp(0.6rem, 1.1vw, 0.74rem); font-weight: 700; letter-spacing: 0.08em; color: #ffffff; white-space: nowrap; text-transform: uppercase; } #hud-ability-track-wrap { display: inline-flex; align-items: center; } #hud-ability-track { width: clamp(40px, 6vw, 70px); height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 3px; overflow: hidden; } #hud-ability-bar { display: block; height: 100%; width: 100%; background: #ffffff; border-radius: 3px; transition: width 0.2s linear; } /* ── RUSSO ONE — Bold heading override ── */ .lb-title { font-family: "Russo One", sans-serif !important; } .s-title { font-family: "Russo One", sans-serif !important; } .s-prompt { font-family: "Russo One", sans-serif !important; } .hud-score { font-family: "Russo One", sans-serif !important; } #hud-score { font-family: "Russo One", sans-serif !important; } .go-title { font-family: "Russo One", sans-serif !important; } #go-title { font-family: "Russo One", sans-serif !important; } .level-toast { font-family: "Russo One", sans-serif !important; } #level-toast { font-family: "Russo One", sans-serif !important; } .lb-tag { font-family: "Russo One", sans-serif !important; } h1, h2, h3, h4 { font-family: "Russo One", sans-serif !important; font-weight: 400; } #lobby-play, .lb-btn-play, .env-action, .btn-select, .btn-buy { font-family: "Russo One", sans-serif !important; } /* ================================================================ TITLE — LIGHT THEME override (jungle, desert, cloudy, arctic) When HUD is in light mode the in-game overlay title switches dark ================================================================ */ body[data-hud-light="1"] .s-title { color: #111827 !important; -webkit-text-fill-color: #111827 !important; background: none !important; -webkit-background-clip: unset !important; }