/* * Cockpit Hub + Skill Card Modal — P1 + patches. * * Two opaque rectangular panels replace the painted side panels in * mission_bg.png. Container width is sized via `min()` so it always matches * the PNG's 1672/941 aspect — % coordinates track painted artwork reliably * across viewport sizes. * * Patch v3 changes (this revision): * - Both panels reduced ~10% (left 22% wide, right 25% wide, both 58% tall). * - Both panels moved down + outward (top 7%, left/right 0.5%). * - Back button now sits inside the left panel header area, smaller and * less bright, with text "← Back to Pack Select". * - Left panel content restructured: pack/level title, "Training to unlock * skill:" label, teaser, "Read Skill Card carefully first" instruction, * then the Continue chip when shown (chip is now a flex item inside * the panel, no longer floating absolutely). * - Right panel button hierarchy: Read Skill Card gets a "Recommended * first" tag, Boss Only gets amber warning styling, Start Full Mission * stays the gold CTA. * * Debug helper: `body.cockpit-debug` adds 2px red outlines around both * panels + Continue chip + Back button. Toggle by adding the class to . */ /* ========================================================================== COCKPIT — wide overlay layout (default) ========================================================================== */ #cockpit-screen.overlay.screen { background: var(--color-bg, #020617); align-items: center; justify-content: center; padding: 0; overflow: hidden; backdrop-filter: none; -webkit-backdrop-filter: none; } .cockpit-bg { display: none; } .cockpit-content { position: relative; width: min(100vw, calc(100vh * 1672 / 941)); height: auto; aspect-ratio: 1672 / 941; background-image: url('../assets/ui/mission_bg.png'); background-position: center; background-size: cover; background-repeat: no-repeat; display: block; padding: 0; border: none; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 0; max-width: 100vw; max-height: 100vh; } /* ========================================================================== LEFT PANEL — replaces painted NUMERAI TRANSMISSION Contains: NUMERAI strip, Back button, pack/level title, skill label, teaser, instruction, and the Continue chip. ========================================================================== */ .cockpit-content .cockpit-header { position: absolute; top: 10%; left: 0.5%; width: 24%; height: 55%; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 30px 14px 14px; /* extra top padding for the NUMERAI strip */ background: rgba(8, 12, 28, 0.93); border: 1px solid rgba(168, 85, 247, 0.55); border-radius: 10px; box-shadow: 0 0 24px rgba(168, 85, 247, 0.18), inset 0 0 18px rgba(168, 85, 247, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: left; overflow: hidden; } /* NUMERAI TRANSMISSION strip pinned to the panel's top edge */ .cockpit-content .cockpit-header::before { content: 'NUMERAI TRANSMISSION'; position: absolute; top: 0; left: 0; right: 0; padding: 6px 8px 5px; font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(0.6rem, 0.85vw, 0.78rem); font-weight: 700; letter-spacing: 1.6px; color: rgba(190, 130, 255, 0.95); text-align: center; border-bottom: 1px solid rgba(168, 85, 247, 0.35); background: rgba(28, 16, 56, 0.75); text-shadow: 0 0 10px rgba(168, 85, 247, 0.55); } /* Pack + Level title — bigger now per design feedback */ .cockpit-content .cockpit-header-title { margin: 2px 0 6px; font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(0.95rem, 1.45vw, 1.2rem); font-weight: 700; letter-spacing: 0.6px; color: var(--color-text, #ffffff); text-transform: none; /* mixed case per design feedback */ text-shadow: 0 0 10px rgba(0, 212, 255, 0.45); line-height: 1.2; } .cockpit-content .cockpit-pack-name { color: var(--color-text, #ffffff); } .cockpit-content .cockpit-level { color: var(--color-primary, #00d4ff); font-weight: 700; } .cockpit-content .cockpit-header-sep { margin: 0 4px; color: rgba(255, 255, 255, 0.45); } /* "Training to unlock skill:" label */ .cockpit-content .cockpit-skill-label { margin: 6px 0 0; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: clamp(0.78rem, 1.1vw, 0.95rem); font-weight: 600; letter-spacing: 0.4px; color: rgba(0, 212, 255, 0.85); text-transform: uppercase; } /* Cockpit skill title — the actual skill card title (loaded from JSON or inlined from the iframe hero). Sits between the "Training to unlock skill:" label and the teaser, gives the player a literal match with the card they're about to open. Hidden when empty so the cockpit degrades to the legacy layout for cards without a title. */ .cockpit-content .cockpit-skill-title { margin: 2px 0 0; font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(0.95rem, 1.3vw, 1.12rem); font-weight: 700; line-height: 1.35; color: var(--color-text, #ffffff); letter-spacing: 0.2px; } .cockpit-content .cockpit-skill-title:empty { display: none; } .cockpit-content .cockpit-teaser { margin: 6px 0 0; font-family: var(--font-main, 'Inter', sans-serif); font-size: clamp(0.85rem, 1.15vw, 1.02rem); line-height: 1.45; color: rgba(220, 230, 248, 0.92); } /* "Read Skill Card carefully first" instruction line */ .cockpit-content .cockpit-instruction { margin: 10px 0 0; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: clamp(0.75rem, 1.02vw, 0.9rem); font-style: italic; color: rgba(190, 130, 255, 0.92); letter-spacing: 0.3px; text-shadow: 0 0 6px rgba(168, 85, 247, 0.3); } .cockpit-content .cockpit-instruction--muted { color: rgba(220, 230, 248, 0.55); text-shadow: none; } /* Stats block (playtime + encouragement) — anchored above the Continue chip via margin-top: auto so it stays glued to the bottom of the panel. */ .cockpit-content .cockpit-stats { margin-top: auto; padding-top: 8px; border-top: 1px dashed rgba(168, 85, 247, 0.3); display: flex; flex-direction: column; gap: 4px; } /* Engagement #4 — Coach of the Day narrator line in the cockpit hero. Renders just below the training-stats block. Visually a soft pep panel: small coach SVG on the left, line on the right, gold accent. */ .cockpit-content .cockpit-coach-greeting { /* Phase H round 24: bumped the Coach of the Day strip in the cockpit so the kid clearly sees which coach is cheering them on. Larger SVG (56px), more padding + a gold glow band so it reads as a "live companion" not a tooltip. The text shows the coach's cockpit greeting from getCockpitGreeting(state) which always uses the active Coach of the Day. */ display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; background: linear-gradient(135deg, rgba(60, 30, 90, 0.55), rgba(30, 20, 50, 0.4)); border: 1px solid rgba(255, 216, 107, 0.48); border-radius: 12px; font-size: clamp(0.86rem, 1.05vw, 1rem); line-height: 1.4; color: rgba(240, 232, 255, 0.96); box-shadow: 0 0 18px rgba(255, 216, 107, 0.18); } .cockpit-content .cockpit-coach-greeting.hidden { display: none; } .cockpit-content .cockpit-coach-greeting__svg { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, rgba(255, 216, 107, 0.32), rgba(40, 24, 70, 0.1)); border: 1px solid rgba(255, 216, 107, 0.32); border-radius: 10px; overflow: hidden; } .cockpit-content .cockpit-coach-greeting__svg svg { width: 100%; height: 100%; } .cockpit-content .cockpit-coach-greeting__text strong { color: #ffd86b; font-weight: 700; } .cockpit-content .cockpit-stats-time { margin: 0; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: clamp(0.78rem, 1.05vw, 0.95rem); letter-spacing: 0.4px; color: rgba(220, 230, 248, 0.85); } .cockpit-content .cockpit-stats-label { color: rgba(168, 130, 220, 0.85); text-transform: uppercase; font-size: 0.85em; font-weight: 600; letter-spacing: 0.6px; margin-right: 6px; } .cockpit-content .cockpit-stats-value { color: var(--color-primary, #00d4ff); font-weight: 700; text-shadow: 0 0 8px rgba(0, 212, 255, 0.4); } .cockpit-content .cockpit-stats-encouragement { margin: 0; font-family: var(--font-main, 'Inter', sans-serif); font-size: clamp(0.72rem, 0.98vw, 0.88rem); font-style: italic; color: rgba(255, 220, 130, 0.9); letter-spacing: 0.2px; line-height: 1.35; text-shadow: 0 0 6px rgba(255, 170, 0, 0.18); } /* Continue chip — sits right under the stats block at the very bottom */ .cockpit-content .cockpit-continue-chip { position: relative; margin-top: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.45); border-radius: 6px; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: clamp(0.72rem, 0.95vw, 0.85rem); } .cockpit-content .cockpit-continue-chip.hidden { display: none; } /* Level picker (P7.5l-fix / Phase H round 28) — sits inline beside the Back button in the top-controls row. Matches Back's height + font so the two chrome controls visually pair as a single chip group. */ .cockpit-content .cockpit-level-picker { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 3px 8px; background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.35); border-radius: 8px; } .cockpit-content .cockpit-level-picker.hidden { display: none; } .cockpit-level-picker-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(0, 212, 255, 0.18); color: #bae6fd; border: 1px solid rgba(0, 212, 255, 0.55); border-radius: 6px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; user-select: none; transition: background 120ms ease, border-color 120ms ease, transform 80ms ease; } .cockpit-level-picker-btn:hover:not(:disabled) { background: rgba(0, 212, 255, 0.32); border-color: rgba(0, 212, 255, 0.85); transform: translateY(-1px); } .cockpit-level-picker-btn:active:not(:disabled) { transform: translateY(0); } .cockpit-level-picker-btn:disabled { opacity: 0.32; cursor: default; } .cockpit-level-picker-readout { font-family: var(--font-ui, 'Rajdhani', sans-serif); /* Matches the Back button's ~10-12px font scale */ font-size: clamp(0.84rem, 1.05vw, 0.96rem); font-weight: 700; letter-spacing: 0.5px; color: rgba(220, 230, 248, 0.95); min-width: 96px; text-align: center; } .cockpit-content .cockpit-continue-message { color: rgba(220, 240, 255, 0.95); letter-spacing: 0.3px; } .cockpit-content .cockpit-continue-btn { appearance: none; -webkit-appearance: none; background: rgba(0, 212, 255, 0.25); border: 1px solid rgba(0, 212, 255, 0.7); color: #ffffff; padding: 5px 10px; border-radius: 4px; font: inherit; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; align-self: stretch; text-align: center; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .cockpit-content .cockpit-continue-btn:hover, .cockpit-content .cockpit-continue-btn:focus-visible { background: rgba(0, 212, 255, 0.4); border-color: rgba(0, 212, 255, 1); box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); outline: none; } /* ========================================================================== BACK BUTTON — small chip in the top-left corner of the cockpit screen, outside the left panel (per P1 patch v4 design feedback). ========================================================================== */ /* Phase H round 28: top control row hosts Back + level picker side by side. Out of the header panel so the chrome sits above the Numerai Transmission card without overlap. */ .cockpit-content .cockpit-top-controls { display: flex; align-items: center; gap: 10px; padding: 1.5%; position: absolute; top: 0; /* May 2026: extend to full width so the Commander chip can sit on the right via margin-left:auto, mirroring the menu top-bar layout. */ left: 0; right: 0; z-index: 4; pointer-events: none; /* let the painted backdrop receive clicks */ } .cockpit-content .cockpit-top-controls > * { pointer-events: auto; } /* Commander chip — top-right, mirrors the .mm-profile-chip style on the main-menu top bar. Icon (animal/emoji from profileIconService) + "Commander" eyebrow + nickname. */ .cockpit-content .cockpit-commander { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 10px; background: rgba(2, 6, 23, 0.78); border: 1px solid rgba(168, 130, 220, 0.45); border-radius: 999px; color: rgba(220, 230, 248, 0.95); font-family: var(--font-ui, 'Rajdhani', sans-serif); /* Match the Back-button typography weight; readable but unobtrusive. */ font-size: clamp(0.84rem, 1.05vw, 0.96rem); letter-spacing: 0.4px; /* Subtle entrance — no hover transform, this is identity not action. */ transition: border-color 0.18s ease, box-shadow 0.18s ease; } .cockpit-content .cockpit-commander:hover { border-color: rgba(190, 130, 255, 0.85); box-shadow: 0 0 12px rgba(168, 85, 247, 0.35); } .cockpit-content .cockpit-commander__icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, rgba(168, 85, 247, 0.45), rgba(40, 20, 80, 0.7) 70%); border: 1px solid rgba(190, 130, 255, 0.55); border-radius: 50%; font-size: 1rem; line-height: 1; flex-shrink: 0; } .cockpit-content .cockpit-commander__body { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; } .cockpit-content .cockpit-commander__label { font-size: 0.58rem; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(190, 130, 255, 0.9); } .cockpit-content .cockpit-commander__name { font-size: 1em; font-weight: 700; color: #ecf7ff; letter-spacing: 0.5px; } .cockpit-content .cockpit-back-btn { position: static; margin: 0; background: rgba(2, 6, 23, 0.78); border: 1px solid rgba(168, 130, 220, 0.45); border-radius: 8px; color: rgba(200, 200, 240, 0.85); font-family: var(--font-ui, 'Rajdhani', sans-serif); /* Phase H round 28: shortened label ("Back to Pack Select" → "Back") + font-size reduced ~20% from `clamp(1.2rem, 1.64vw, 1.44rem)` to `clamp(0.96rem, 1.3vw, 1.15rem)` so the chip feels like a compact control rather than the page title. Vertical padding tightened to match the new size. */ font-size: clamp(0.96rem, 1.3vw, 1.15rem); font-weight: 600; letter-spacing: 0.6px; text-transform: none; padding: 6px 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .cockpit-content .cockpit-back-btn:hover, .cockpit-content .cockpit-back-btn:focus-visible { background: rgba(168, 85, 247, 0.22); border-color: rgba(190, 130, 255, 0.85); color: #ffffff; outline: none; } /* ========================================================================== RIGHT PANEL — replaces painted button column ========================================================================== */ .cockpit-content .cockpit-button-grid { position: absolute; top: 10%; right: 0.5%; width: 24%; height: 55%; display: flex; flex-direction: column; gap: 1.2%; padding: 12px 14px; background: rgba(8, 12, 28, 0.93); border: 1px solid rgba(0, 212, 255, 0.55); border-radius: 10px; box-shadow: 0 0 24px rgba(0, 212, 255, 0.18), inset 0 0 18px rgba(0, 212, 255, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .cockpit-content .cockpit-btn { position: static; appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; flex: 1; width: auto; height: auto; padding: 6px 14px; background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(0, 212, 255, 0.35); border-radius: 8px; color: var(--color-text, #ffffff); font-family: var(--font-ui, 'Rajdhani', sans-serif); text-align: left; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; top: auto; right: auto; left: auto; bottom: auto; font-size: inherit; } .cockpit-content .cockpit-btn:hover:not(:disabled), .cockpit-content .cockpit-btn:focus-visible:not(:disabled) { background: rgba(0, 212, 255, 0.18); border-color: rgba(0, 212, 255, 0.95); box-shadow: 0 0 14px rgba(0, 212, 255, 0.35); outline: none; } .cockpit-content .cockpit-btn:active:not(:disabled) { background: rgba(0, 212, 255, 0.28); box-shadow: 0 0 10px rgba(0, 212, 255, 0.7), inset 0 0 12px rgba(0, 212, 255, 0.15); } .cockpit-content .cockpit-btn-title, .cockpit-content .cockpit-btn-sub, .cockpit-content .cockpit-btn-tag { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; border: 0; } .cockpit-content .cockpit-btn-title { font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(0.78rem, 1.15vw, 1rem); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(220, 240, 255, 0.98); line-height: 1.1; } .cockpit-content .cockpit-btn-sub { font-size: clamp(0.58rem, 0.76vw, 0.7rem); font-weight: 500; color: rgba(220, 230, 248, 0.7); letter-spacing: 0.3px; line-height: 1.25; margin-top: 2px; } /* "Recommended first" tag on Read Skill Card */ .cockpit-content .cockpit-btn-tag { display: inline-block; align-self: flex-start; margin-bottom: 4px; padding: 2px 7px; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: clamp(0.5rem, 0.7vw, 0.62rem); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(0, 212, 255, 0.95); background: rgba(0, 212, 255, 0.15); border: 1px solid rgba(0, 212, 255, 0.5); border-radius: 3px; line-height: 1.1; } /* Read Skill Card — slightly emphasised border to match the "recommended" framing */ .cockpit-content #btn-cockpit-read-card { border-color: rgba(0, 212, 255, 0.55); box-shadow: inset 0 0 8px rgba(0, 212, 255, 0.05); } /* Boss Only — amber/warning accent, signals "advanced" */ .cockpit-content .cockpit-btn--warning, .cockpit-content .cockpit-btn--boss { border-color: rgba(255, 200, 50, 0.5); background: rgba(40, 28, 12, 0.7); } .cockpit-content .cockpit-btn--warning:hover:not(:disabled), .cockpit-content .cockpit-btn--warning:focus-visible:not(:disabled), .cockpit-content .cockpit-btn--boss:hover:not(:disabled), .cockpit-content .cockpit-btn--boss:focus-visible:not(:disabled) { background: rgba(255, 200, 50, 0.18); border-color: rgba(255, 220, 100, 0.95); box-shadow: 0 0 14px rgba(255, 200, 50, 0.4); } .cockpit-content .cockpit-btn--warning .cockpit-btn-title, .cockpit-content .cockpit-btn--boss .cockpit-btn-title { color: rgba(255, 220, 130, 0.95); } /* Start Full Mission — primary CTA, orange/gold tint. Phase H round 28: `flex: 1.6` removed so all 5 buttons share the same height. The accent color + glow already mark it as the primary CTA without needing to be taller. */ .cockpit-content #btn-cockpit-start-mission, .cockpit-content .cockpit-btn--primary { flex: 1; background: linear-gradient(135deg, rgba(255, 170, 0, 0.22), rgba(255, 120, 0, 0.18)); border-color: rgba(255, 170, 0, 0.65); box-shadow: inset 0 0 12px rgba(255, 170, 0, 0.1); } .cockpit-content .cockpit-btn--primary:hover:not(:disabled), .cockpit-content .cockpit-btn--primary:focus-visible:not(:disabled) { background: linear-gradient(135deg, rgba(255, 170, 0, 0.4), rgba(255, 120, 0, 0.3)); border-color: rgba(255, 200, 60, 1); box-shadow: 0 0 20px rgba(255, 170, 0, 0.55), inset 0 0 14px rgba(255, 200, 80, 0.15); } .cockpit-content .cockpit-btn--primary:active:not(:disabled) { box-shadow: 0 0 16px rgba(255, 170, 0, 0.9), inset 0 0 18px rgba(255, 220, 100, 0.25); } .cockpit-content .cockpit-btn--primary .cockpit-btn-title { color: rgba(255, 200, 100, 0.98); text-shadow: 0 0 10px rgba(255, 170, 0, 0.4); } /* Disabled state — dimmed; native `title` attribute provides the tooltip */ .cockpit-content .cockpit-btn:disabled, .cockpit-content .cockpit-btn--disabled { cursor: not-allowed; opacity: 0.4; background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.12); color: rgba(220, 230, 248, 0.5); } .cockpit-content .cockpit-btn:disabled:hover, .cockpit-content .cockpit-btn--disabled:hover { background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; } /* ========================================================================== DEBUG ALIGNMENT BORDERS ========================================================================== */ body.cockpit-debug .cockpit-content .cockpit-header, body.cockpit-debug .cockpit-content .cockpit-button-grid, body.cockpit-debug .cockpit-content .cockpit-continue-chip:not(.hidden), body.cockpit-debug .cockpit-content .cockpit-back-btn { outline: 2px solid rgba(255, 50, 50, 0.95) !important; outline-offset: -1px; } /* ========================================================================== COCKPIT TOAST (unchanged) ========================================================================== */ .cockpit-toast { position: fixed; left: 50%; bottom: clamp(20px, 6vh, 60px); transform: translate(-50%, 12px); background: rgba(2, 6, 23, 0.92); border: 1px solid rgba(0, 212, 255, 0.45); color: #ffffff; padding: 12px 20px; border-radius: 999px; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: 0.95rem; letter-spacing: 0.4px; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 0.18s ease, transform 0.22s ease; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 212, 255, 0.18); max-width: 90vw; text-align: center; } .cockpit-toast.hidden { display: none; } .cockpit-toast--visible { opacity: 1; transform: translate(-50%, 0); } /* ========================================================================== SKILL CARD MODAL (unchanged from P1) ========================================================================== */ #skill-card-modal.overlay.screen { z-index: 30; background: rgba(0, 0, 0, 0.7); align-items: center; } .skill-card-panel { width: min(720px, 92vw); max-height: min(86vh, 760px); overflow-y: auto; text-align: left; padding: 26px 28px; } .skill-card-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 212, 255, 0.18); margin-bottom: 16px; } .skill-card-id { display: inline-block; font-family: var(--font-display, 'Orbitron', sans-serif); font-size: 0.85rem; font-weight: 700; letter-spacing: 1.2px; padding: 4px 10px; border-radius: 6px; background: rgba(0, 212, 255, 0.18); border: 1px solid rgba(0, 212, 255, 0.45); color: var(--color-primary, #00d4ff); } .skill-card-title { margin: 0; font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 700; letter-spacing: 0.5px; color: var(--color-text, #ffffff); } .skill-card-summary { margin: 4px 0 14px; } .skill-card-headline { margin: 0 0 8px; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: 1.1rem; font-weight: 600; line-height: 1.45; color: rgba(220, 230, 248, 0.96); } .skill-card-example-line { margin: 0; font-family: var(--font-main, 'Inter', sans-serif); font-size: 0.95rem; font-weight: 500; color: var(--color-primary, #00d4ff); font-style: italic; } .skill-card-toggle-detail { align-self: flex-start; margin: 4px 0 12px; } .skill-card-detail.hidden { display: none; } .skill-card-detail { display: block; margin-top: 6px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.14); } .skill-card-explanation { font-family: var(--font-main, 'Inter', sans-serif); font-size: 0.96rem; line-height: 1.6; color: rgba(220, 230, 248, 0.92); margin: 0 0 14px; } .skill-card-section-heading { font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: 0.82rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(0, 212, 255, 0.85); margin: 18px 0 6px; } .skill-card-method, .skill-card-tips, .skill-card-watchouts, .skill-card-examples { margin: 0 0 4px; padding-left: 22px; font-family: var(--font-main, 'Inter', sans-serif); font-size: 0.94rem; line-height: 1.55; color: rgba(220, 230, 248, 0.92); } .skill-card-method li, .skill-card-tips li, .skill-card-watchouts li { margin-bottom: 4px; } .skill-card-examples li { margin-bottom: 10px; } .skill-card-method.hidden, .skill-card-tips.hidden, .skill-card-watchouts.hidden, .skill-card-examples.hidden { display: none; } .skill-card-example-q { font-family: var(--font-ui, 'Rajdhani', sans-serif); font-weight: 600; color: rgba(0, 212, 255, 0.92); } .skill-card-example-w { font-size: 0.88rem; color: rgba(220, 230, 248, 0.78); } .skill-card-actions { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* ========================================================================== SKILL CARD MODAL — HTML mode (P7.5i) Iframe-driven view used when assets/skill_cards/_hero.html exists. The JSON-template sections share the same #skill-card-modal but are hidden via JS when this mode is active. ========================================================================== */ /* Full-screen iframe surface — matches the standalone hero pages in assets/skill_cards/, which are authored for the whole viewport. The overlay's own padding is zeroed so the panel can sit edge-to-edge. */ #skill-card-modal.skill-card-modal--html { padding: 0; } #skill-card-modal.skill-card-modal--html .skill-card-panel { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border-radius: 0; border: 0; display: flex; flex-direction: column; overflow: hidden; } .skill-card-html-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; } .skill-card-html-wrap.hidden { display: none; } .skill-card-html-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(0, 212, 255, 0.18); flex-wrap: wrap; } .skill-card-html-title { margin: 0; font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(0.95rem, 1.5vw, 1.15rem); font-weight: 700; letter-spacing: 0.5px; color: var(--color-text, #ffffff); flex: 1 1 auto; min-width: 0; } .skill-card-html-tabs { display: flex; gap: 6px; align-items: center; } .skill-card-html-tabs.hidden { display: none; } .skill-card-html-tab.hidden { display: none; } .skill-card-html-tab--active { background: rgba(0, 212, 255, 0.22); border-color: rgba(0, 212, 255, 0.6); color: var(--color-primary, #00d4ff); } .skill-card-html-close { background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(220, 230, 248, 0.92); font-size: 1.2rem; line-height: 1; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .skill-card-html-close:hover, .skill-card-html-close:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: rgba(0, 212, 255, 0.55); color: var(--color-primary, #00d4ff); } .skill-card-iframe-host { position: relative; flex: 1; min-height: 0; background: #0a0f1c; } .skill-card-iframe { width: 100%; height: 100%; border: 0; display: block; } .skill-card-iframe-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 15, 28, 0.92); color: rgba(220, 230, 248, 0.88); font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: 1rem; letter-spacing: 1.5px; text-transform: uppercase; z-index: 1; pointer-events: none; } .skill-card-iframe-loading.hidden { display: none; } /* Mobile / narrow viewport: tighten header chrome. The panel itself is already full-screen at every viewport — see the base rule above. */ @media (max-width: 700px) { .skill-card-html-header { padding: 8px 10px; gap: 8px; } .skill-card-html-title { font-size: 0.95rem; /* On the smallest screens, the card-id chip + tabs + close are the priority; let the title wrap or compress. */ flex-basis: 100%; order: 3; } } /* ========================================================================== MOBILE / PORTRAIT FALLBACK ========================================================================== */ @media (max-aspect-ratio: 3 / 2), (max-width: 720px) { #cockpit-screen.overlay.screen { background: rgba(2, 6, 23, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); align-items: flex-start; justify-content: center; padding-block: clamp(12px, 3vh, 28px); padding-inline: clamp(10px, 3vw, 20px); overflow-y: auto; } .cockpit-content { position: relative; width: 100%; max-width: 760px; max-height: none; height: auto; aspect-ratio: auto; background-image: none; display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 18px 20px; border: 1px solid rgba(0, 212, 255, 0.25); border-radius: var(--panel-radius, 14px); background: rgba(2, 6, 23, 0.72); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 12px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 212, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cockpit-content::before { content: ''; display: block; width: 100%; height: clamp(140px, 26vh, 240px); background: url('../assets/ui/mission_bg.png') center 38% / cover no-repeat; border-radius: 8px; border: 1px solid rgba(0, 212, 255, 0.18); } .cockpit-content .cockpit-header, .cockpit-content .cockpit-continue-chip, .cockpit-content .cockpit-btn, .cockpit-content .cockpit-button-grid, .cockpit-content .cockpit-back-btn, .cockpit-content .cockpit-stats { position: static; width: auto; height: auto; top: auto; right: auto; left: auto; bottom: auto; } .cockpit-content .cockpit-stats { margin-top: 4px; padding-top: 10px; border-top: 1px dashed rgba(168, 85, 247, 0.25); text-align: center; } .cockpit-content .cockpit-stats-time, .cockpit-content .cockpit-stats-encouragement { text-align: center; } .cockpit-content .cockpit-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; text-align: center; border: none; border-radius: 0; box-shadow: none; overflow: visible; gap: 10px; } .cockpit-content .cockpit-header::before { display: none; } .cockpit-content .cockpit-back-btn { align-self: flex-start; margin: 0; padding: 5px 12px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(220, 230, 248, 0.85); font-size: 0.82rem; letter-spacing: 0.3px; } .cockpit-content .cockpit-header-title { font-size: clamp(1.05rem, 2.4vw, 1.5rem); letter-spacing: 1.5px; text-shadow: 0 0 14px rgba(0, 212, 255, 0.4); text-align: center; } .cockpit-content .cockpit-skill-label { text-align: center; font-size: clamp(0.78rem, 1.2vw, 0.92rem); } .cockpit-content .cockpit-teaser { font-size: clamp(0.78rem, 1.2vw, 0.92rem); max-width: 56ch; margin-left: auto; margin-right: auto; text-align: center; } .cockpit-content .cockpit-instruction { text-align: center; font-size: clamp(0.7rem, 1.05vw, 0.85rem); } .cockpit-content .cockpit-continue-chip:not(.hidden) { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; border-radius: 999px; background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.35); align-self: center; width: auto; margin-top: 0; } .cockpit-content .cockpit-continue-message { color: rgba(220, 230, 248, 0.9); text-shadow: none; } .cockpit-content .cockpit-continue-btn { background: rgba(0, 212, 255, 0.22); border-color: rgba(0, 212, 255, 0.6); padding: 6px 14px; border-radius: 999px; align-self: auto; } .cockpit-content .cockpit-button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; background: transparent; border: none; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; } .cockpit-content .cockpit-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 0 1 auto; padding: 14px 18px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; text-align: left; color: var(--color-text, #ffffff); font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: 1rem; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .cockpit-content .cockpit-btn:hover:not(:disabled), .cockpit-content .cockpit-btn:focus-visible:not(:disabled) { background: rgba(0, 212, 255, 0.12); border-color: rgba(0, 212, 255, 0.6); box-shadow: 0 0 18px rgba(0, 212, 255, 0.18); } .cockpit-content .cockpit-btn-tag { margin-bottom: 4px; } .cockpit-content .cockpit-btn-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .cockpit-content .cockpit-btn-sub { font-size: 0.82rem; font-weight: 500; color: rgba(220, 230, 248, 0.72); letter-spacing: 0.3px; } .cockpit-content #btn-cockpit-start-mission, .cockpit-content .cockpit-btn--primary { grid-column: 1 / -1; flex: 0 1 auto; background: linear-gradient(135deg, rgba(255, 170, 0, 0.22), rgba(255, 120, 0, 0.18)); border-color: rgba(255, 170, 0, 0.55); box-shadow: none; } .cockpit-content .cockpit-btn--primary:hover:not(:disabled), .cockpit-content .cockpit-btn--primary:focus-visible:not(:disabled) { background: linear-gradient(135deg, rgba(255, 170, 0, 0.4), rgba(255, 120, 0, 0.3)); border-color: rgba(255, 200, 60, 1); box-shadow: 0 0 24px rgba(255, 170, 0, 0.4); } .cockpit-content .cockpit-btn--warning, .cockpit-content .cockpit-btn--boss { background: rgba(40, 28, 12, 0.6); border-color: rgba(255, 200, 50, 0.45); } .cockpit-content .cockpit-btn--primary .cockpit-btn-title { color: rgba(255, 200, 100, 0.98); text-shadow: none; } .cockpit-content .cockpit-btn:disabled, .cockpit-content .cockpit-btn--disabled { opacity: 0.45; cursor: not-allowed; background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.08); } .cockpit-content .cockpit-btn:disabled:hover, .cockpit-content .cockpit-btn--disabled:hover { background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; } body.cockpit-debug .cockpit-content .cockpit-btn, body.cockpit-debug .cockpit-content .cockpit-header, body.cockpit-debug .cockpit-content .cockpit-button-grid, body.cockpit-debug .cockpit-content .cockpit-continue-chip:not(.hidden), body.cockpit-debug .cockpit-content .cockpit-back-btn { outline: none !important; } @media (max-width: 540px) { .cockpit-content .cockpit-button-grid { grid-template-columns: 1fr; } .cockpit-content .cockpit-btn--primary { grid-column: 1; } } } /* ========================================================================== P7.5h Commit 4 — Command Check screen (alternate cockpit layout) Single centered panel with a list of past skills under review and a single Launch button. Reused: .cockpit-back-btn from the main cockpit for the corner back button (so its positioning + sizing match exactly). ========================================================================== */ #command-check-screen.overlay.screen { background: var(--color-bg, #020617); align-items: center; justify-content: center; padding: 0; overflow: hidden; } #command-check-screen .cc-bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(168, 85, 247, 0.12), transparent 60%), radial-gradient(circle at 70% 80%, rgba(0, 212, 255, 0.10), transparent 60%), var(--color-bg, #020617); pointer-events: none; } /* Themed mode: an inline background-image (set by renderCCBackground) shows the per-CC backdrop full-bleed, sharp and unblurred. The gradient above is intentionally overridden so the artwork isn't tinted purple/cyan. */ #command-check-screen.cc-bg-themed .cc-bg { background: var(--color-bg, #020617); background-size: cover; background-position: center; background-repeat: no-repeat; } #command-check-screen .cc-bg-scene { position: absolute; inset: 0; opacity: 0.45; filter: blur(1.5px); display: flex; align-items: center; justify-content: center; gap: 24px; pointer-events: none; z-index: 0; flex-wrap: wrap; max-width: 100%; } #command-check-screen .cc-bg-coach svg { width: 90px; height: 108px; } #command-check-screen .cc-bg-caption { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 1; text-align: center; font-style: italic; color: #ffd86b; font-size: 13px; pointer-events: none; padding: 0 16px; } #command-check-screen .cc-content { position: relative; width: min(720px, 92vw); max-height: 92vh; margin: clamp(40px, 6vh, 60px) auto; padding: 24px clamp(20px, 4vw, 36px) 28px; background: rgba(8, 12, 28, 0.94); border: 1px solid rgba(0, 212, 255, 0.55); border-radius: 14px; box-shadow: 0 0 32px rgba(0, 212, 255, 0.22), inset 0 0 22px rgba(0, 212, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overscroll-behavior: contain; } /* Themed mode: top-anchor the menu so the image's central scene shows below it instead of being covered. Specificity must match #command-check-screen.overlay.screen (3 classes + 1 id) so the align-items override actually wins. */ #command-check-screen.overlay.screen.cc-bg-themed { align-items: flex-start; } #command-check-screen.cc-bg-themed .cc-content { margin-top: clamp(12px, 2vh, 20px); margin-bottom: clamp(12px, 2vh, 20px); /* "Do not blur the background" — drop the card's backdrop-filter so even the area directly under the card stays sharp. The card's 0.94 opacity dark fill keeps the menu text crisp on its own. */ backdrop-filter: none; -webkit-backdrop-filter: none; } #command-check-screen .cockpit-back-btn { position: absolute; top: 12px; left: 12px; /* Match the .cc-content card: dark fill + cyan border/glow, rounded. Without this override the button takes the browser-default white. */ background: rgba(8, 12, 28, 0.94); border: 1px solid rgba(0, 212, 255, 0.55); border-radius: 10px; padding: 8px 14px; color: rgba(0, 212, 255, 0.92); font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: 14px; font-weight: 600; letter-spacing: 0.4px; cursor: pointer; box-shadow: 0 0 12px rgba(0, 212, 255, 0.18), inset 0 0 8px rgba(0, 212, 255, 0.06); transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; } #command-check-screen .cockpit-back-btn:hover, #command-check-screen .cockpit-back-btn:focus-visible { background: rgba(0, 212, 255, 0.18); border-color: #5dd6ff; color: #ffffff; outline: none; box-shadow: 0 0 18px rgba(0, 212, 255, 0.35); } /* Commander chip on the Command Check screen — same visual treatment as the cockpit chip (defined under `.cockpit-content .cockpit-commander` higher up) but positioned absolutely top-right of the .cc-content card to match the Back button anchored top-left. */ #command-check-screen .cockpit-commander { position: absolute; top: 12px; right: 12px; margin-left: 0; /* parent isn't flex here; reset the auto-push */ display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 10px; background: rgba(2, 6, 23, 0.78); border: 1px solid rgba(168, 130, 220, 0.45); border-radius: 999px; color: rgba(220, 230, 248, 0.95); font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: 14px; letter-spacing: 0.4px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } #command-check-screen .cockpit-commander:hover { border-color: rgba(190, 130, 255, 0.85); box-shadow: 0 0 12px rgba(168, 85, 247, 0.35); } #command-check-screen .cockpit-commander__icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, rgba(168, 85, 247, 0.45), rgba(40, 20, 80, 0.7) 70%); border: 1px solid rgba(190, 130, 255, 0.55); border-radius: 50%; font-size: 1rem; line-height: 1; flex-shrink: 0; } #command-check-screen .cockpit-commander__body { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; } #command-check-screen .cockpit-commander__label { font-size: 0.58rem; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(190, 130, 255, 0.9); } #command-check-screen .cockpit-commander__name { font-size: 1em; font-weight: 700; color: #ecf7ff; letter-spacing: 0.5px; } #command-check-screen .cc-header { margin-top: 32px; /* leave room for the back button */ text-align: center; display: flex; flex-direction: column; gap: 4px; } #command-check-screen .cc-eyebrow { margin: 0; font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(0.7rem, 1.05vw, 0.84rem); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(0, 212, 255, 0.88); text-shadow: 0 0 10px rgba(0, 212, 255, 0.4); } #command-check-screen .cc-title { margin: 0; font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: 1.5px; color: #ffffff; text-shadow: 0 0 16px rgba(0, 212, 255, 0.5); } #command-check-screen .cc-pack-name { margin: 0; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: clamp(0.85rem, 1.15vw, 1rem); letter-spacing: 0.4px; color: rgba(168, 130, 220, 0.95); } #command-check-screen .cc-encourage { margin: 10px auto 0; max-width: 56ch; font-family: var(--font-main, 'Inter', sans-serif); font-size: clamp(0.92rem, 1.2vw, 1.05rem); font-style: italic; line-height: 1.5; color: rgba(255, 220, 130, 0.92); text-shadow: 0 0 8px rgba(255, 170, 0, 0.2); } #command-check-screen .cc-skill-list-wrap { display: flex; flex-direction: column; gap: 8px; } #command-check-screen .cc-skill-list-heading { margin: 0; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: clamp(0.78rem, 1.05vw, 0.92rem); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(190, 130, 255, 0.95); } #command-check-screen .cc-skill-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; } #command-check-screen .cc-skill-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 8px; color: rgba(220, 230, 248, 0.92); font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: clamp(0.82rem, 1.05vw, 0.95rem); text-align: left; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } #command-check-screen .cc-skill-row:hover, #command-check-screen .cc-skill-row:focus-visible { background: rgba(0, 212, 255, 0.10); border-color: rgba(0, 212, 255, 0.6); outline: none; transform: translateY(-1px); } #command-check-screen .cc-skill-row-level { flex: 0 0 auto; min-width: 32px; padding: 2px 6px; border-radius: 4px; background: rgba(168, 85, 247, 0.18); color: rgba(220, 200, 255, 0.95); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82em; font-weight: 700; text-align: center; letter-spacing: 0.3px; } #command-check-screen .cc-skill-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #command-check-screen .cc-skill-row-card { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78em; color: rgba(148, 163, 184, 0.85); } #command-check-screen .cc-mission-time { margin: 6px 0 0; text-align: center; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: clamp(0.85rem, 1.1vw, 0.98rem); color: rgba(203, 213, 225, 0.85); } #command-check-screen .cc-mission-time span { color: var(--color-primary, #00d4ff); font-weight: 700; } #command-check-screen .cc-actions { display: flex; justify-content: center; margin-top: 4px; } #command-check-screen .cc-launch-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 240px; padding: 14px 32px; border: none; border-radius: 10px; background: linear-gradient(45deg, rgba(251, 146, 60, 0.95), rgba(244, 114, 182, 0.92)); color: #ffffff; font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 20px rgba(251, 146, 60, 0.32); transition: transform 0.15s ease, box-shadow 0.15s ease; } #command-check-screen .cc-launch-btn:hover, #command-check-screen .cc-launch-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(251, 146, 60, 0.48); outline: none; } /* Stage navigator on the CC screen — walks the same interleaved sequence as the cockpit-screen picker so the player can advance to the next level without backing out. Layout: [◀] readout [▶], centered. */ #command-check-screen .cc-stage-picker { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; } #command-check-screen .cc-stage-picker-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(0, 212, 255, 0.55); border-radius: 999px; background: rgba(8, 12, 28, 0.85); color: rgba(207, 250, 254, 0.95); font-size: 1rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } #command-check-screen .cc-stage-picker-btn:hover:not(:disabled), #command-check-screen .cc-stage-picker-btn:focus-visible:not(:disabled) { background: rgba(0, 212, 255, 0.16); border-color: rgba(0, 212, 255, 0.85); outline: none; transform: translateY(-1px); } #command-check-screen .cc-stage-picker-btn:disabled { opacity: 0.35; cursor: not-allowed; } #command-check-screen .cc-stage-picker-readout { min-width: 200px; text-align: center; font-family: var(--font-ui, 'Rajdhani', sans-serif); font-size: clamp(0.85rem, 1.15vw, 1rem); font-weight: 600; letter-spacing: 0.6px; color: rgba(220, 230, 248, 0.92); } @media (max-width: 700px) { #command-check-screen .cc-content { margin: 16px auto; padding: 18px 14px 22px; gap: 12px; } #command-check-screen .cc-skill-rows { grid-template-columns: 1fr; } }