/* ============================================================ Syberland. Global styles Palettes are CSS variables set on Day/night flips the `night` class on . ============================================================ */ :root { --tile-w: 64; --tile-h: 64; /* Defaults (overridden by data-palette) */ --bg: #0a0f08; --bg-2: #0e1610; --panel: rgba(14, 22, 16, 0.86); --panel-edge: rgba(127, 255, 92, 0.18); --ink: #d9f5cf; --ink-dim: #8eb682; --accent: #39ff14; --accent-2: #7fff5c; --accent-3: #ffd166; --danger: #ff5a4e; --link: #5ce1ff; --wood: #2d3a22; --carpet: #16261a; --carpet-2: #1a2c1f; --tile-floor: #1f2c20; --tile-floor-2: #243524; --wall: #2a3a26; --wall-top: #3a5232; --wall-side: #1c2818; --shadow: rgba(0,0,0,.45); --hud-radius: 14px; } /* ── Palette: Hacker Green (default) ───────────────────────── */ body[data-palette="green"] { --bg: #0a0f08; --bg-2: #0e1610; --panel: rgba(14, 22, 16, 0.86); --panel-edge: rgba(127, 255, 92, 0.18); --ink: #d9f5cf; --ink-dim: #8eb682; --accent: #39ff14; --accent-2: #7fff5c; --accent-3: #ffd166; --carpet: #5a7a52; --carpet-2: #4a6a44; --tile-floor: #6e8a64; --tile-floor-2: #5e7a56; --wall: #3c5232; --wall-top: #527a44; --wall-side: #2a3b22; --wood: #2d3a22; --door: #a8d088; } body[data-palette="green"].night { --bg: #050805; --bg-2: #070b07; --ink: #c9eebf; --carpet: #2a4226; --carpet-2: #233a20; --tile-floor: #364a30; --tile-floor-2: #2e4028; --wall: #1c2a18; --wall-top: #2a4022; --wall-side: #0e1809; --accent: #5cff3c; --accent-2: #b0ff90; } /* ── Palette: Sunset Office (warm) ─────────────────────────── */ body[data-palette="sunset"] { --bg: #1a1208; --bg-2: #221a0e; --panel: rgba(34, 22, 14, 0.86); --panel-edge: rgba(255, 190, 100, 0.22); --ink: #fff1d4; --ink-dim: #c9a87a; --accent: #ffb454; --accent-2: #ffd089; --accent-3: #ff6f5e; --carpet: #a06038; --carpet-2: #8a4f2e; --tile-floor: #c08858; --tile-floor-2: #ad7548; --wall: #7a4628; --wall-top: #a8633a; --wall-side: #5a3019; --wood: #6a3a1c; --door: #ffc080; } body[data-palette="sunset"].night { --bg: #0e0904; --carpet: #553520; --carpet-2: #6a4326; --tile-floor: #6a3f24; --tile-floor-2: #573320; --wall: #4a2a16; --wall-top: #683d20; --wall-side: #2d180b; } /* ── Palette: Cyber Neon (magenta/cyan) ────────────────────── */ body[data-palette="neon"] { --bg: #0a0518; --bg-2: #0f0a22; --panel: rgba(15, 10, 34, 0.86); --panel-edge: rgba(0, 230, 255, 0.25); --ink: #e6dcff; --ink-dim: #9d8ed1; --accent: #ff2bd6; --accent-2: #00e6ff; --accent-3: #ffd166; --carpet: #3a2480; --carpet-2: #432d92; --tile-floor: #4630a8; --tile-floor-2: #3a2890; --wall: #5e3fb0; --wall-top: #7a55d8; --wall-side: #2a1f56; --wood: #4a2e8f; --door: #00e6ff; } body[data-palette="neon"].night { --bg: #050018; --carpet: #1a0f48; --carpet-2: #221558; --tile-floor: #1f1455; --tile-floor-2: #281966; --wall: #2f1e6d; --wall-top: #4a30a8; --wall-side: #100828; } /* ── Palette: Retro CRT (phosphor on black) ────────────────── */ body[data-palette="crt"] { --bg: #000; --bg-2: #050a05; --panel: rgba(0, 12, 0, 0.92); --panel-edge: rgba(51, 255, 51, 0.35); --ink: #b6ffb6; --ink-dim: #5fbf5f; --accent: #33ff33; --accent-2: #99ff99; --accent-3: #ffff66; --carpet: #1a3e1a; --carpet-2: #224d22; --tile-floor: #245c24; --tile-floor-2: #1a481a; --wall: #2a5e2a; --wall-top: #3f8a3f; --wall-side: #0f2e0f; --wood: #1c3e1c; --door: #66ff66; } /* ── Layout ─────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } body { background: var(--bg); color: var(--ink); font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; image-rendering: pixelated; } .app { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 50% 45%, var(--bg-2), var(--bg) 80%); } /* Subtle scanlines + vignette over the whole app for game feel */ .scanlines { pointer-events: none; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px); z-index: 100; mix-blend-mode: overlay; } body[data-palette="crt"] .scanlines { background: repeating-linear-gradient(0deg, rgba(0,0,0,0.35) 0 2px, transparent 2px 4px), radial-gradient(ellipse 100% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.65) 100%); mix-blend-mode: normal; } /* ── Game stage ─────────────────────────────────────────────── */ .stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; } .world-cam { position: relative; display: block; transform-origin: 0 0; will-change: transform; /* Camera position is driven imperatively in world.jsx via translate3d */ } .world { position: relative; transform-style: preserve-3d; } .world > * { position: absolute; left: 0; top: 0; } /* Tiles drawn as orthogonal squares (top-down) */ .tile { position: absolute; width: calc(var(--tile-w) * 1px); height: calc(var(--tile-h) * 1px); pointer-events: none; } .tile svg { display: block; } /* Player sprite. Position driven by transform via rAF in world.jsx. The element is anchored at (0,0); margin offsets its feet to its own transform origin so translate3d(cx, cy) places feet at (cx, cy). */ .player { position: absolute; left: 0; top: 0; width: 40px; height: 72px; margin-left: -20px; margin-top: -64px; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.55)); transition: filter .12s; will-change: transform; transform: translate3d(0, 0, 0); } .player-anchor { position: absolute; left: 0; top: 0; will-change: transform; transform: translate3d(0, 0, 0); } .player::before { /* outline halo behind character. Using box-shadow on a sibling pseudo */ content: ""; position: absolute; left: 4px; top: 4px; right: 4px; bottom: 4px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,61,240,.4), transparent 70%); z-index: -1; pointer-events: none; } .player.is-moving { filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); } .player-marker { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; animation: player-bob 1s ease-in-out infinite; } .player-marker .lbl { background: var(--accent); color: #000; font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: 9px; letter-spacing: .12em; padding: 2px 6px; border-radius: 3px; box-shadow: 0 0 0 1.5px #000, 0 0 12px var(--accent); } .player-marker .arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--accent); filter: drop-shadow(0 0 2px var(--accent)); } .player-marker.fading { animation: marker-fade 1.2s ease-out forwards; } @keyframes player-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } } @keyframes marker-fade { 0% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); } } .player-pulse { position: absolute; left: 50%; top: 50%; width: 64px; height: 32px; margin-left: -32px; margin-top: -8px; border-radius: 50%; border: 2px solid var(--accent); pointer-events: none; opacity: 0; animation: player-pulse 1.6s ease-out infinite; } @keyframes player-pulse { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } } .shadow-blob { position: absolute; width: 28px; height: 10px; margin-left: -14px; margin-top: -6px; background: radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%); pointer-events: none; } /* NPC sprite */ .npc { position: absolute; width: 40px; height: 72px; margin-left: -20px; margin-top: -64px; cursor: pointer; filter: drop-shadow(0 4px 3px rgba(0,0,0,.5)); } .npc:hover .npc-sprite { transform: translateY(-2px); } .npc-sprite { transition: transform .15s ease-out; } .npc-hint { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 16px; height: 18px; background: var(--accent); border-radius: 50%; display: grid; place-items: center; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 11px; color: #000; box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 12px var(--accent); animation: bob 1.6s ease-in-out infinite; } .npc-hint::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 6px; height: 6px; background: var(--accent); } .npc-hint.done { background: var(--ink-dim); box-shadow: 0 0 0 2px rgba(0,0,0,.4); } .npc-hint.done::after { background: var(--ink-dim); } @keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } } .npc-label { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .04em; color: var(--ink); background: rgba(0,0,0,.6); padding: 2px 5px; border-radius: 3px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; } .npc:hover .npc-label { opacity: 1; } /* ── Overworld idle "breathing" bob ────────────────────────────── A subtle 1px vertical bob keeps standing characters alive without re-baking sprites. Scoped to .npc / idle .player so dialog portraits (which already cycle their own idle frames) are unaffected. Per-NPC --bob-delay staggers the town so they don't breathe in unison. */ /* A planted "breathing" idle: a tiny vertical squash/stretch anchored at the FEET (transform-origin bottom) so the character subtly breathes in place instead of bobbing off the floor. */ @keyframes idle-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.022); } } .npc .char-polished { transform-origin: 50% 100%; animation: idle-breathe 3.4s ease-in-out infinite; animation-delay: var(--bob-delay, 0s); } .npc:hover .char-polished { filter: brightness(1.18); } .player:not(.is-moving) .char-polished { transform-origin: 50% 100%; animation: idle-breathe 3.8s ease-in-out infinite; } /* Decor (desks, chairs, server racks etc). Drop-shadow makes pieces sit on the floor */ .decor { position: absolute; pointer-events: none; /* Unified prop grounding for the redesign: a soft shadow cast down-right to match the HD characters' top-left key light. (Dropped the saturate() pass here — an extra per-prop filter that hurt scroll FPS on low-end machines for negligible visual gain.) */ filter: drop-shadow(1px 3px 2px rgba(0,0,0,.5)); } /* ── Performance mode ────────────────────────────────────────────── Safety net for low-end machines. Drops the continuously-composited and filtered decorative work: prop drop-shadows (49 filtered layers), the idle "breathing" + ambient pulse animations, dust particles, and soft blob shadows. Gameplay and layout are unchanged. */ .perf-mode .decor { filter: none !important; } .perf-mode .npc .char-polished, .perf-mode .player:not(.is-moving) .char-polished, .perf-mode .door-glow, .perf-mode .player-pulse, .perf-mode .daily-dot, .perf-mode .chamber-dot, .perf-mode .quest-pill .pip { animation: none !important; } .perf-mode .dust, .perf-mode .shadow-blob { display: none !important; } .decor.click { pointer-events: auto; cursor: pointer; } /* Pulsing accent strip along door thresholds */ .door-glow { animation: door-pulse 2.4s ease-in-out infinite; } @keyframes door-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } /* ── HUD ─────────────────────────────────────────────────────── */ .hud { position: absolute; inset: 0; z-index: 50; pointer-events: none; } .hud > * { pointer-events: auto; } .hud-topbar { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; gap: 12px; } /* PERF: the in-world HUD overlays the scrolling map, so a backdrop blur would re-compute every frame while walking (a major FPS cost on low-end machines). The panel background is already 86% opaque, so the blur is nearly invisible; drop it for these persistent surfaces. Modals/dialogs keep their blur (the world is static behind them). */ .brand, .quest-pill, .hud-stats, .minimap, .controls, .btn, .btn-grp { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .brand { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .hud-hub-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; margin-right: 2px; background: rgba(255,255,255,.04); border: 1px solid var(--panel-edge); border-radius: 9px; color: var(--ink); font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; } .hud-hub-btn:hover { background: rgba(70,240,200,.14); border-color: var(--accent); color: var(--accent); } .hud-hub-btn:active { transform: translateY(1px); } .hud-hub-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .brand-logo { width: 28px; height: 28px; background: var(--accent); border-radius: 6px; display: grid; place-items: center; color: #000; font-weight: 800; font-family: "JetBrains Mono", monospace; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 12px var(--accent); } .brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; } .brand-name em { color: var(--ink-dim); font-style: normal; font-weight: 500; font-size: 11px; margin-left: 6px; letter-spacing: .04em; text-transform: uppercase; } .hud-quest { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } /* Campaign-arc pill: the smaller second line under the quest pill that points at the player's active arc (Continue: · 3/12). */ .quest-pill.arc-pill { font-size: 11px; padding: 4px 12px 4px 10px; gap: 7px; color: var(--ink-dim); } .quest-pill.arc-pill .arc-mark { color: var(--accent-2); flex-shrink: 0; } /* In-drill combo chip: consecutive correct calls in a mini-game. */ .mg-combo { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: rgba(255, 138, 76, .14); border: 1px solid rgba(255, 138, 76, .45); color: #ffb27a; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; white-space: nowrap; animation: dialog-in .18s ease-out; } /* Breach Week chained-arc interstitial: the "previously on" recap card shown before each chapter, and the locked-chapter notice. */ .chain-wrap { display: grid; place-items: center; } .chain-card { width: min(620px, 92vw); background: var(--panel-solid, #0b1418); border: 1px solid rgba(70, 240, 200, .35); border-radius: 16px; padding: 26px 30px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); } .chain-kicker { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .16em; color: var(--accent); margin-bottom: 14px; } .chain-prev { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; color: var(--ink-dim); text-transform: uppercase; margin-bottom: 8px; } .chain-text { font-size: 15.5px; line-height: 1.65; color: var(--ink); margin: 0 0 20px; } .chain-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Spaced-repetition Review button (appears only when items are due). */ .review-btn { border-color: rgba(92, 225, 255, .45); } .review-btn .review-badge { background: rgba(92, 225, 255, .16); border: 1px solid rgba(92, 225, 255, .5); color: var(--accent-2); } /* "Next up" compass strip at the top of the Dossier. */ .dossier-nextup { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 18px; border-bottom: 1px solid var(--panel-edge); background: rgba(70, 240, 200, .04); } .dossier-nextup-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .14em; color: var(--ink-dim); flex-shrink: 0; } .dossier-nextup-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--panel-edge); color: var(--ink); font-size: 12px; cursor: pointer; max-width: 100%; text-align: left; transition: border-color .15s ease, background .15s ease; } .dossier-nextup-chip:hover { border-color: var(--accent); background: rgba(70, 240, 200, .1); } .dossier-nextup-chip.review { border-color: rgba(92, 225, 255, .4); color: var(--accent-2); } .dossier-nextup-chip.review:hover { border-color: var(--accent-2); background: rgba(92, 225, 255, .1); } /* Daily-streak flame chip on the Today button. */ .streak-chip { display: inline-flex; align-items: center; margin-left: 5px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 138, 76, .14); border: 1px solid rgba(255, 138, 76, .45); color: #ffb27a; font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700; } .quest-pill { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 999px; padding: 7px 14px 7px 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12.5px; max-width: 520px; } .quest-pill .pip { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); flex-shrink: 0; } .quest-pill b { color: var(--accent); font-weight: 600; } .hud-stats { display: flex; gap: 8px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 12px; padding: 6px 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: "JetBrains Mono", monospace; font-size: 11px; align-items: center; } .hud-stats .stat { display: flex; align-items: center; gap: 5px; } .hud-stats .stat b { color: var(--accent); } .hud-stats .div { width: 1px; height: 16px; background: var(--panel-edge); } /* Rank chip. Left-most stat with rank pip + level bar */ .hud-stats .rank-chip { display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 2px; } .rank-pip { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 70%); box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 10px var(--accent); flex-shrink: 0; } .rank-bar { position: relative; width: 46px; height: 4px; background: rgba(0,0,0,.4); border: 1px solid var(--panel-edge); border-radius: 999px; overflow: hidden; margin-left: 2px; } .rank-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 999px; transition: width .4s ease; } /* Bottom bar */ .hud-bottombar { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 12px; } /* Auto-hide while walking: the controls hint + button row fade out so the world stays clear, then fade back when you stop (JS removes .hud-away after a short delay) or when you mouse over the bottom strip. The minimap stays visible for navigation. */ .hud-bottombar .controls, .hud-bottombar .btn-row { transition: opacity .3s ease, transform .3s ease; } .hud-bottombar.hud-away .controls, .hud-bottombar.hud-away .btn-row { opacity: 0; transform: translateY(10px); pointer-events: none; } .hud-bottombar.hud-away:hover .controls, .hud-bottombar.hud-away:hover .btn-row { opacity: 1; transform: none; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .hud-bottombar .controls, .hud-bottombar .btn-row { transition: opacity .12s linear; transform: none !important; } } .controls { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-dim); } .key { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; background: rgba(255,255,255,.08); border: 1px solid var(--panel-edge); border-bottom-width: 2px; border-radius: 5px; color: var(--ink); font-size: 10px; font-weight: 600; } .controls .grp { display: flex; align-items: center; gap: 5px; } .btn-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; } .btn { appearance: none; background: var(--panel); border: 1px solid var(--panel-edge); color: var(--ink); padding: 9px 14px; border-radius: 10px; font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: all .12s; } .btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } .btn:active { transform: translateY(1px) scale(.97); } .btn .badge { background: var(--accent); color: #000; font-weight: 700; font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 1px 5px; border-radius: 4px; min-width: 14px; text-align: center; } .btn-primary { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; } .btn-primary:hover { color: #000; filter: brightness(1.08); } .btn-ghost { background: transparent; } .btn-danger { color: var(--danger); border-color: rgba(255,90,78,.35); } /* Segmented HUD toolbar. Loose pills are grouped into clean clusters: each group is one rounded panel and the inner buttons go transparent, so the bar reads as tidy segmented controls instead of many floating pills. State styling (daily glow, chamber cyan, muted toggles) still layers on top. */ .btn-grp { display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .btn-grp .btn { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 10px; padding: 8px 12px; } .btn-grp .btn:hover { background: rgba(255,255,255,.07); transform: none; } .btn-grp-toggles .btn { font-size: 12px; padding: 7px 10px; } /* On/Off status switch on the sound toggles: a state pill with a glowing dot so on/off reads at a glance, with the literal On/Off kept for clarity. */ .toggle-state { display: inline-flex; align-items: center; gap: 5px; font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px 2px 6px; border-radius: 999px; background: rgba(57,255,20,.15); color: var(--accent); } .toggle-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); } .echo-voice-btn.is-off .toggle-state { background: rgba(255,255,255,.08); color: var(--ink-dim); } .echo-voice-btn.is-off .toggle-state::before { background: var(--ink-dim); box-shadow: none; } /* Minimap (top-right corner of bottom bar) */ .minimap { width: 160px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 8px 10px; cursor: pointer; transition: border-color .15s ease, transform .15s ease; } .minimap:hover { border-color: var(--accent); transform: translateY(-1px); } .minimap-h { display: flex; flex-direction: column; gap: 1px; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; } .minimap-h > span:first-child { color: var(--accent); font-weight: 700; } .minimap-zone { color: var(--ink); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .minimap-foot { margin-top: 6px; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); text-align: center; opacity: .7; } .minimap:hover .minimap-foot { opacity: 1; color: var(--accent); } .minimap-grid { position: relative; width: 100%; aspect-ratio: 22 / 16; background: var(--bg-2); border-radius: 4px; overflow: hidden; } .minimap-grid .mm-tile { position: absolute; background: var(--carpet); } .minimap-grid .mm-wall { background: var(--wall-top); } .minimap-grid .mm-floor-tile { background: var(--tile-floor-2); } .minimap-grid .mm-floor-ops { background: #1a2330; } .minimap-grid .mm-floor-stairs { background: #22302a; } .minimap-grid .mm-floor-exec { background: #4a3220; } .minimap-grid .mm-floor-red { background: #3a1010; } .minimap-grid .mm-door { background: var(--door); } .minimap-grid .mm-npc { width: 4px; height: 4px; background: var(--accent-3); border-radius: 50%; margin-left: -2px; margin-top: -2px; } .minimap-grid .mm-npc.done { background: var(--ink-dim); } .minimap-grid .mm-player { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-left: -3px; margin-top: -3px; box-shadow: 0 0 6px var(--accent); animation: mm-player-pulse 1.6s ease-in-out infinite; } @keyframes mm-player-pulse { 0%, 100% { box-shadow: 0 0 4px var(--accent); } 50% { box-shadow: 0 0 10px var(--accent), 0 0 16px var(--accent); } } /* ── Interactive building map (full overlay) ─────────────────── */ .imap-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 10, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 400; padding: 24px; animation: imap-fade .18s ease; } @keyframes imap-fade { from { opacity: 0; } to { opacity: 1; } } .imap-panel { width: min(560px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.55); overflow: hidden; } .imap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--panel-edge); } .imap-title { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--ink); } .imap-sub { margin-top: 4px; font-size: 12px; color: var(--ink-dim); } .imap-sub b { color: var(--accent); font-weight: 700; } .imap-close { flex: none; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .05em; color: var(--ink); background: var(--bg-2); border: 1px solid var(--panel-edge); border-radius: 8px; padding: 6px 10px; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .imap-close:hover { border-color: var(--accent); color: var(--accent); } .imap-floors { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; overflow-y: auto; } .imap-floor { border: 1px solid var(--panel-edge); border-radius: 10px; padding: 8px 10px 10px; background: var(--bg-2); opacity: .62; transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease; } .imap-floor.current { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 22px -6px var(--accent); } .imap-floor-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-family: "JetBrains Mono", monospace; } .imap-floor-tag { flex: none; width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--bg); background: var(--ink-dim); border-radius: 6px; } .imap-floor.current .imap-floor-tag { background: var(--accent); } .imap-floor-name { font-size: 12px; font-weight: 700; color: var(--ink); } .imap-floor-sub { font-size: 10px; color: var(--ink-dim); letter-spacing: .04em; } .imap-here { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--accent); animation: mm-player-pulse 1.6s ease-in-out infinite; text-shadow: 0 0 8px var(--accent); } .imap-grid { position: relative; width: 100%; background: var(--bg); border-radius: 6px; overflow: hidden; } .imap-grid .mm-tile { position: absolute; background: var(--carpet); } .imap-grid .mm-wall { background: var(--wall-top); } .imap-grid .mm-floor-tile { background: var(--tile-floor-2); } .imap-grid .mm-floor-ops { background: #1a2330; } .imap-grid .mm-floor-stairs { background: #22302a; } .imap-grid .mm-floor-exec { background: #4a3220; } .imap-grid .mm-floor-red { background: #3a1010; } .imap-grid .mm-door { background: var(--door); } .imap-zone { position: absolute; transform: translate(-50%, 0); font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: rgba(6, 10, 14, .6); padding: 1px 4px; border-radius: 4px; white-space: nowrap; pointer-events: none; } .imap-npc { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; } .imap-npc-dot { width: 7px; height: 7px; background: var(--accent-3); border: 1px solid rgba(0,0,0,.5); border-radius: 50%; box-shadow: 0 0 5px var(--accent-3); } .imap-npc:not(.done) .imap-npc-dot { animation: mm-player-pulse 2s ease-in-out infinite; } .imap-npc.done .imap-npc-dot { background: var(--ink-dim); box-shadow: none; animation: none; } .imap-npc-name { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--ink); text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.95); white-space: nowrap; } .imap-player { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; z-index: 5; pointer-events: none; } .imap-player-dot { width: 10px; height: 10px; background: var(--accent); border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 8px var(--accent); animation: mm-player-pulse 1.4s ease-in-out infinite; } .imap-player-lbl { font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--accent); text-shadow: 0 1px 2px rgba(0,0,0,.95); } .imap-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--panel-edge); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .04em; color: var(--ink-dim); } .imap-legend span { display: inline-flex; align-items: center; gap: 5px; } .imap-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .imap-legend .lg-you { background: var(--accent); box-shadow: 0 0 5px var(--accent); } .imap-legend .lg-npc { background: var(--accent-3); box-shadow: 0 0 5px var(--accent-3); } .imap-legend .lg-done { background: var(--ink-dim); } .imap-legend .lg-stair { background: #22302a; border: 1px solid var(--panel-edge); border-radius: 2px; } /* ── Dialog (NPC speech) ─────────────────────────────────────── */ .dialog-wrap { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 96px; pointer-events: none; z-index: 60; } .dialog { pointer-events: auto; width: min(720px, 92vw); background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px; padding: 18px 20px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: dialog-in .18s ease-out; } @keyframes dialog-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .dialog-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .dialog-portrait { /* Grown from 56x56 to 56x72 so the polished pixel sprite (head + body + legs) fits without cropping the head. Legacy SVG sprite was 40x72 and looked fine in a 56x56 box because it under-filled; the new polished sprite is intrinsically 56x72. */ width: 56px; height: 72px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--panel-edge); display: grid; place-items: center; overflow: hidden; } /* Polished canvas portrait. Shared visual treatment across every place the React Character renders forward-facing (DialogBox, LessonStage, ScenarioStage, Dossier, FollowupOffer, etc). The image itself sets intrinsic 56x72; containers may shrink via max-width but should preserve the aspect to avoid head squish. */ .char-polished { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; max-width: 100%; height: auto; } /* In-world overworld characters render at NATIVE 56×72 so their feet reach the floor (the dialog-portrait path keeps the max-width fit above). The 56px width is centered over the 40px tile anchor via the negative margin. */ .npc .char-polished, .player .char-polished { max-width: none; width: 56px; height: 72px; margin-left: -8px; } /* HD overworld sprites are 3:4 (96x128); let height drive width (~54px) and re-centre over the tile anchor so feet stay planted and the head isn't squished. */ .npc img.char-hd, .player img.char-hd { width: auto; height: 72px; margin-left: -7px; } .dialog-name { font-weight: 600; font-size: 16px; } .dialog-role { font-size: 12px; color: var(--ink-dim); font-family: "JetBrains Mono", monospace; letter-spacing: .04em; } .dialog-text { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin-bottom: 14px; text-wrap: pretty; } .dialog-text .ascii-typo { font-family: "JetBrains Mono", monospace; background: rgba(0,0,0,.35); border: 1px solid var(--panel-edge); padding: 2px 5px; border-radius: 4px; color: var(--accent); } .dialog-actions { display: flex; gap: 8px; justify-content: flex-end; } /* Scenario picker (NPCs offering multiple scenarios) */ .scenario-picker { width: 100%; } .scenario-picker-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; } .scenario-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .scenario-pick-btn { appearance: none; text-align: left; background: rgba(0,0,0,.3); border: 1px solid var(--panel-edge); color: var(--ink); padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: all .15s; font-family: inherit; } .scenario-pick-btn:hover { border-color: var(--accent); background: rgba(57,255,20,.06); } .scenario-pick-btn.done { border-color: var(--accent-2); } .scenario-pick-btn .pick-label { font-size: 13px; font-weight: 600; color: var(--ink); } .scenario-pick-btn .pick-blurb { font-size: 11px; color: var(--ink-dim); margin-top: 4px; line-height: 1.4; } .scenario-pick-btn .pick-done { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--accent-2); margin-top: 6px; letter-spacing: .04em; } /* ── Modal overlay (dossier, scenarios) ───────────────────────── */ .modal-wrap { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 70; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in .15s ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal { width: min(1000px, 94vw); max-height: 86vh; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.6); overflow: hidden; display: flex; flex-direction: column; } .modal-head { padding: 18px 22px; border-bottom: 1px solid var(--panel-edge); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .modal-head h2 { font-size: 18px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; } .modal-head h2 .tag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; padding: 3px 7px; background: rgba(0,0,0,.3); border: 1px solid var(--panel-edge); border-radius: 4px; color: var(--accent); text-transform: uppercase; } .modal-body { padding: 22px; overflow-y: auto; flex: 1; } .modal-foot { padding: 14px 22px; border-top: 1px solid var(--panel-edge); display: flex; justify-content: space-between; align-items: center; gap: 12px; } /* ── Scenarios ──────────────────────────────────────────────── */ .scn-progress { height: 4px; width: 100%; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; } .scn-progress span { display: block; height: 100%; background: var(--accent); transition: width .25s ease; } .scn-grid { display: grid; gap: 12px; } .scn-card { border: 1px solid var(--panel-edge); border-radius: 10px; padding: 14px 16px; background: rgba(0,0,0,.18); cursor: pointer; transition: all .15s; position: relative; } .scn-card:hover { border-color: var(--accent); background: rgba(0,0,0,.32); transform: translateY(-1px); } .scn-card.selected { border-color: var(--accent); background: rgba(0,0,0,.4); box-shadow: 0 0 0 1px var(--accent); } .scn-card.correct { border-color: var(--accent-2); background: rgba(127,255,92,.07); } .scn-card.wrong { border-color: var(--danger); background: rgba(255,90,78,.07); } .scn-card .verdict { position: absolute; top: 12px; right: 14px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; } .scn-card .verdict.ok { color: var(--accent-2); } .scn-card .verdict.bad { color: var(--danger); } .email-preview { font-family: "JetBrains Mono", monospace; font-size: 12.5px; } .email-preview .from { color: var(--ink-dim); } .email-preview .subj { color: var(--ink); font-weight: 500; margin: 4px 0; } .email-preview .body { color: var(--ink-dim); font-size: 12px; } .email-preview a { color: var(--link); text-decoration: underline; } /* SafeMarkup pseudo-anchor. Matches the old styling but is a span, so the link is illustrative (non-clickable) and there's no XSS surface. */ .sm-a { color: var(--link); text-decoration: underline; cursor: text; } /* ── NPC Reputation badges (in DialogBox + Dossier) ─────────── */ .rep-badge { white-space: nowrap; user-select: none; transition: transform .15s ease, box-shadow .15s ease; } .rep-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.4); } /* Dossier relationship card grid */ .rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; } .rel-card { background: rgba(0,0,0,.35); border: 1px solid var(--panel-edge); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; transition: border-color .2s; } .rel-card:hover { border-color: var(--accent); } .rel-card-head { display: flex; align-items: center; gap: 8px; } .rel-card-portrait { width: 32px; height: 48px; display: flex; align-items: flex-start; justify-content: center; flex-shrink: 0; } .rel-card-name { font-weight: 700; font-size: 13px; color: var(--ink); } .rel-card-role { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); } .rel-card-bar { height: 5px; background: rgba(255,255,255,.05); border-radius: 3px; overflow: hidden; margin-top: 4px; } .rel-card-bar-fill { height: 100%; transition: width .5s ease; } .rel-card-meta { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-dim); } /* ══════════════════════════════════════════════════════════════ CURRICULUM BROWSER ────────────────────────────────────────────────────────────── 3-pane layout: track tabs at top, paths on left, modules in middle, module detail on right. Status badges everywhere so the player always knows what's playable now vs what's drafted. ══════════════════════════════════════════════════════════════ */ .curr-browser { display: flex; flex-direction: column; height: 100%; min-height: 540px; gap: 10px; } .curr-header { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--panel-edge); } .curr-track-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .curr-track-tab { appearance: none; background: rgba(0,0,0,.35); border: 1px solid var(--panel-edge); color: var(--ink-dim); padding: 8px 14px; border-radius: 8px; font-family: inherit; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all .15s; } .curr-track-tab:hover { color: var(--ink); } .curr-track-tab.active { background: rgba(0,0,0,.5); border-width: 2px; font-weight: 700; } .curr-track-count { margin-left: 6px; font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 1px 6px; background: rgba(255,255,255,.06); border-radius: 999px; } .curr-track-live { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--accent-2); letter-spacing: .08em; } .curr-overall { font-size: 11.5px; color: var(--ink-dim); font-family: "JetBrains Mono", monospace; } .curr-body { display: grid; grid-template-columns: 260px 320px 1fr; gap: 10px; flex: 1; min-height: 0; overflow: hidden; } .curr-paths, .curr-modules, .curr-detail { background: rgba(0,0,0,.25); border: 1px solid var(--panel-edge); border-radius: 10px; padding: 10px; overflow-y: auto; } .curr-track-blurb { background: rgba(0,0,0,.35); padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; } .curr-track-blurb-h { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; } .curr-track-blurb-body { font-size: 12px; color: var(--ink-dim); line-height: 1.55; } .curr-path { display: block; width: 100%; text-align: left; appearance: none; background: rgba(0,0,0,.3); border: 1px solid var(--panel-edge); color: var(--ink); padding: 10px 12px; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all .12s; font-family: inherit; } .curr-path:hover { background: rgba(0,0,0,.45); } .curr-path.active { border-color: var(--accent); background: rgba(0,230,255,.04); } .curr-path-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .curr-path-label { font-weight: 700; font-size: 13px; } .curr-path-count { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-dim); } .curr-path-blurb { font-size: 11px; color: var(--ink-dim); line-height: 1.5; margin-bottom: 6px; } .curr-path-level { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1px solid; } .curr-path-level.lvl-beginner { color: var(--accent-2); border-color: var(--accent-2); } .curr-path-level.lvl-intermediate{ color: var(--accent-3); border-color: var(--accent-3); } .curr-path-level.lvl-advanced { color: var(--danger); border-color: var(--danger); } .curr-modules-h { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--panel-edge); } .curr-module { display: block; width: 100%; text-align: left; appearance: none; background: rgba(0,0,0,.3); border: 1px solid var(--panel-edge); color: var(--ink); padding: 8px 10px; border-radius: 6px; margin-bottom: 5px; cursor: pointer; transition: all .12s; font-family: inherit; } .curr-module:hover { background: rgba(0,0,0,.45); } .curr-module.active { border-color: var(--accent); background: rgba(0,230,255,.05); } .curr-module.completed { border-left: 3px solid var(--accent-2); } .curr-module-head { display: flex; align-items: center; gap: 6px; } .curr-module-id { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--ink-dim); width: 40px; flex-shrink: 0; } .curr-module-title { flex: 1; font-size: 12.5px; line-height: 1.4; } .curr-module-status { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; } .curr-module-status.status-live { color: var(--accent-2); background: rgba(127,255,92,.1); } .curr-module-status.status-ready { color: var(--accent-3); background: rgba(255,209,102,.1); } .curr-module-status.status-draft { color: var(--ink-dim); background: rgba(255,255,255,.04); } .curr-module-meta { display: flex; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-dim); margin-top: 4px; padding-left: 46px; } .curr-detail-kicker { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .curr-detail-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.3; } .curr-detail-meta { display: flex; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-dim); margin-bottom: 12px; } .curr-detail-summary { font-size: 13px; color: var(--ink); line-height: 1.6; margin-bottom: 14px; } .curr-detail-block { margin-bottom: 14px; padding: 10px 12px; background: rgba(0,0,0,.3); border-radius: 8px; } .curr-detail-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; } .curr-detail-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); line-height: 1.6; } .curr-detail-list li { margin-bottom: 4px; } .curr-detail-prereqs { display: flex; flex-wrap: wrap; gap: 6px; } .curr-detail-prereqs code { font-family: "JetBrains Mono", monospace; font-size: 11px; padding: 2px 8px; background: rgba(0,230,255,.08); border: 1px solid rgba(0,230,255,.3); color: var(--accent); border-radius: 4px; } .curr-detail-cta { margin-top: 12px; } .curr-detail-done { font-size: 11px; color: var(--accent-2); margin-top: 6px; font-family: "JetBrains Mono", monospace; } .curr-detail-status-msg { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; } .curr-detail-status-msg.ready { background: rgba(255,209,102,.08); border: 1px dashed var(--accent-3); color: var(--ink); } .curr-detail-status-msg.draft { background: rgba(255,255,255,.04); border: 1px dashed var(--panel-edge); color: var(--ink-dim); } .curr-detail-empty { color: var(--ink-dim); text-align: center; padding-top: 40px; font-style: italic; } /* ══════════════════════════════════════════════════════════════ LAB RUNNER (curriculum modules using reusable templates) ────────────────────────────────────────────────────────────── Visual shell for concept-drill, match-pairs, decision-walk templates + the shared verdict screen. ══════════════════════════════════════════════════════════════ */ .lab { padding: 4px 0; } .lab-intro { background: rgba(0, 230, 255, .04); border: 1px dashed rgba(0, 230, 255, .35); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 13px; line-height: 1.6; color: var(--ink); } .lab-round-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; } .lab-scene-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .lab-scene-situation { font-size: 14px; line-height: 1.6; color: var(--ink); padding: 12px 14px; background: rgba(0,0,0,.3); border-left: 3px solid var(--accent-3); border-radius: 0 8px 8px 0; margin-bottom: 12px; } .lab-prompt { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 12px; } .lab-display { margin-bottom: 14px; border-radius: 8px; overflow: hidden; border: 1px solid var(--panel-edge); } .lab-display-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); padding: 6px 10px; background: rgba(0,0,0,.45); border-bottom: 1px solid var(--panel-edge); } .lab-display-body { margin: 0; padding: 12px 14px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.55; color: var(--ink); background: #04080c; white-space: pre-wrap; overflow-x: auto; max-height: 320px; } .lab-display-code .lab-display-body { color: var(--link); } .lab-display-log .lab-display-body { color: var(--ink); } .lab-display-config .lab-display-body { color: var(--accent-3); } .lab-display-text .lab-display-body { font-family: inherit; font-size: 13.5px; line-height: 1.6; color: var(--ink-dim); white-space: pre-wrap; background: rgba(0,0,0,.25); } .lab-options { display: grid; gap: 8px; margin-bottom: 14px; } .lab-option { appearance: none; background: rgba(0,0,0,.35); border: 1px solid var(--panel-edge); color: var(--ink); padding: 11px 14px; border-radius: 8px; font-family: inherit; font-size: 13.5px; line-height: 1.5; text-align: left; cursor: pointer; transition: all .15s; } .lab-option:hover:not(:disabled) { background: rgba(255,255,255,.04); border-color: var(--accent); transform: translateX(2px); } .lab-option.correct { background: rgba(127,255,92,.08); border-color: var(--accent-2); } .lab-option.wrong { background: rgba(255,90,78,.08); border-color: var(--danger); } .lab-option.faded { opacity: 0.42; } .lab-option-txt { font-size: 13.5px; line-height: 1.55; } .lab-option-why { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--panel-edge); font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); } .lab-foot { display: flex; justify-content: flex-end; margin-top: 8px; } /* ── Match Pairs ─────────────────────────────────────────────── */ .lab-pairs-meta { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-dim); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--panel-edge); } .lab-pairs-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lab-pairs-col { display: flex; flex-direction: column; gap: 6px; } .lab-pairs-col-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; margin-bottom: 4px; } .lab-pair-tile { appearance: none; background: rgba(0,0,0,.35); border: 1px solid var(--panel-edge); color: var(--ink); padding: 10px 12px; border-radius: 8px; font-family: inherit; font-size: 12.5px; line-height: 1.5; text-align: left; cursor: pointer; transition: all .12s; } .lab-pair-tile:hover:not(:disabled) { background: rgba(255,255,255,.05); border-color: var(--accent); } .lab-pair-tile.selected { background: rgba(0,230,255,.08); border-color: var(--accent); box-shadow: 0 0 12px rgba(0,230,255,.3); } .lab-pair-tile.matched { background: rgba(127,255,92,.08); border-color: var(--accent-2); color: var(--ink); opacity: 0.85; cursor: default; } .lab-pair-tile.matched::after { content: " ✓"; color: var(--accent-2); font-weight: bold; } .lab-pair-tile.wrong { background: rgba(255,90,78,.15); border-color: var(--danger); animation: pair-wrong-shake .35s ease; } @keyframes pair-wrong-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* ── Verdict screen (shared by all lab templates) ────────────── */ .lab-verdict { text-align: center; padding: 20px 10px; } .lab-verdict-kicker { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; } .lab-verdict-tier { font-size: 64px; font-weight: 700; line-height: 1; font-family: "JetBrains Mono", monospace; text-shadow: 0 0 24px currentColor; margin-bottom: 4px; } .lab-verdict-headline { font-size: 22px; font-weight: 700; margin-bottom: 8px; } .lab-verdict-score { font-size: 14px; color: var(--ink-dim); margin-bottom: 16px; } .lab-takeaways { text-align: left; max-width: 580px; margin: 0 auto 16px; display: flex; flex-direction: column; gap: 8px; } .lab-takeaway { padding: 10px 14px; background: rgba(0,0,0,.3); border-left: 3px solid var(--accent-3); border-radius: 0 8px 8px 0; } .lab-takeaway h4 { margin: 0 0 4px; font-size: 12.5px; color: var(--accent-3); font-family: "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: uppercase; } .lab-takeaway p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); } .lab-verdict-cta { margin-top: 14px; } /* ══════════════════════════════════════════════════════════════ LESSON SCENE (character-driven curriculum delivery) ────────────────────────────────────────────────────────────── Reuses Signal Chamber + Case Narrative primitives. Adds: • lesson-snippet. Floating snippet panel beside character • lesson-pairs-board. Match-pairs grid styled in scene • lesson-verdict-scene. Instructor-narrated close-out ══════════════════════════════════════════════════════════════ */ .lesson-stage { min-height: 320px; } /* Snippet panel. Appears mid-stage when a round has a code/log/config excerpt. Positioned to read like an attached terminal/document the instructor is pointing at. */ .lesson-snippet { position: relative; z-index: 2; margin: 12px 32px; max-width: calc(100% - 64px); border-radius: 10px; overflow: hidden; border: 1px solid var(--panel-edge); background: rgba(4, 8, 12, .85); box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: snippet-in .35s ease-out; } @keyframes snippet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .lesson-snippet-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); padding: 6px 10px; background: rgba(0,0,0,.55); border-bottom: 1px solid var(--panel-edge); } .lesson-snippet-body { margin: 0; padding: 10px 14px; font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-x: auto; max-height: 200px; } .lesson-snippet-code .lesson-snippet-body { color: #c8e8f0; } .lesson-snippet-log .lesson-snippet-body { color: #d9f5cf; } .lesson-snippet-config .lesson-snippet-body { color: #ffd9a8; } .lesson-snippet-text .lesson-snippet-body { font-family: inherit; font-size: 13px; color: var(--ink-dim); } /* Lesson dialogue inherits all story-dialogue styling, just nudge it so it's not crammed when snippet is shown above. */ .lesson-dialogue { /* no overrides needed */ } /* Match-pairs board, scene-friendly variant. Lives INSIDE the dialogue panel below the instructor's prompt. */ .lesson-pairs-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; max-height: 280px; overflow-y: auto; } .lesson-pairs-col { display: flex; flex-direction: column; gap: 5px; } .lesson-pairs-col-h { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; margin-bottom: 3px; } .lesson-pair-tile { appearance: none; background: rgba(0,0,0,.4); border: 1px solid var(--panel-edge); color: var(--ink); padding: 7px 10px; border-radius: 6px; font-family: inherit; font-size: 11.5px; line-height: 1.4; text-align: left; cursor: pointer; transition: all .12s; } .lesson-pair-tile:hover:not(:disabled) { background: rgba(0,230,255,.06); border-color: var(--accent); } .lesson-pair-tile.selected { background: rgba(0,230,255,.1); border-color: var(--accent); box-shadow: 0 0 10px rgba(0,230,255,.35); } .lesson-pair-tile.matched { background: rgba(127,255,92,.1); border-color: var(--accent-2); color: var(--ink); opacity: 0.85; cursor: default; } .lesson-pair-tile.matched::after { content: " ✓"; color: var(--accent-2); font-weight: bold; } .lesson-pair-tile.wrong { background: rgba(255,90,78,.18); border-color: var(--danger); animation: pair-wrong-shake .35s ease; } /* Match-pairs scene variant. Expand dialogue panel a bit since the board lives inside it. */ .match-pairs-scene .lesson-dialogue { min-height: 360px; max-height: 50vh; } .match-pairs-scene .lesson-stage { min-height: 200px; } /* Verdict scene. Slightly more breathing room, dim background tint */ .lesson-verdict-scene .story-env-back { filter: brightness(0.7); } /* ══════════════════════════════════════════════════════════════ REACTION STATES. Per-character animated states driven by [data-reaction] and .react-* classes. Each state has its own distinct body language that READS even on a small pixel sprite. Cinematic layering: these animations override the default active/speaking transforms, so the reaction is unambiguous. ══════════════════════════════════════════════════════════════ */ /* Reaction overlay. Colored vignette that fades in for urgent / frustrated states, creating environmental coupling. */ .lesson-reaction-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .35s ease, background .35s ease; } .lesson-stage[data-reaction="urgent"] .lesson-reaction-overlay { opacity: 1; background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255, 50, 50, .35), transparent 70%), linear-gradient(180deg, rgba(255, 50, 50, .08), rgba(255, 50, 50, .18)); animation: react-overlay-pulse-urgent 1s ease-in-out infinite; } .lesson-stage[data-reaction="frustrated"] .lesson-reaction-overlay { opacity: 1; background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 120, 90, .22), transparent 75%); animation: react-overlay-pulse-frustrated 1.4s ease-in-out infinite; } .lesson-stage[data-reaction="concerned"] .lesson-reaction-overlay { opacity: 0.6; background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 200, 80, .14), transparent 75%); } .lesson-stage[data-reaction="agreeing"] .lesson-reaction-overlay, .lesson-stage[data-reaction="confident"] .lesson-reaction-overlay { opacity: 0.7; background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(127, 255, 92, .15), transparent 75%); } .lesson-stage[data-reaction="thinking"] .lesson-reaction-overlay { opacity: 0.4; background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0, 200, 255, .10), transparent 75%); } @keyframes react-overlay-pulse-urgent { 0%, 100% { opacity: 0.7; } 50% { opacity: 1.0; } } @keyframes react-overlay-pulse-frustrated { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } } /* Per-state character GLOW only. The sprite's BODY motion is now driven by frame-based SVG animation in Character (real per-frame pixel changes), so CSS no longer transforms the sprite. CSS only keeps glow/filter atmospherics. */ .story-char.react-agreeing .story-char-sprite { filter: drop-shadow(0 0 10px rgba(127, 255, 92, .45)); } .story-char.react-concerned .story-char-sprite { filter: drop-shadow(0 0 8px rgba(255, 200, 80, .4)); } .story-char.react-frustrated .story-char-sprite { filter: drop-shadow(0 0 10px rgba(255, 90, 78, .55)); } .story-char.react-urgent .story-char-sprite { filter: drop-shadow(0 0 16px rgba(255, 90, 78, .85)); } .story-char.react-confident .story-char-sprite { filter: drop-shadow(0 0 16px rgba(127, 255, 92, .6)); } .story-char.react-thinking .story-char-sprite { filter: drop-shadow(0 0 8px rgba(0, 200, 255, .45)); } /* Environmental ambient: flickering stars, scrolling data strips, pulsing screens. Gives the scene a sense of place and life without competing with the character. */ .lesson-env-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .lesson-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 3px rgba(255, 255, 255, .6); animation: star-flicker 2s ease-in-out infinite; opacity: 0.3; } @keyframes star-flicker { 0%, 100% { opacity: 0.15; transform: scale(0.85); } 50% { opacity: 0.9; transform: scale(1.1); } } .case-narrative[data-env="war-room"] .lesson-star { background: rgba(0, 230, 255, .6); box-shadow: 0 0 4px rgba(0, 230, 255, .65); } .case-narrative[data-env="soc"] .lesson-star { background: rgba(127, 255, 92, .55); box-shadow: 0 0 4px rgba(127, 255, 92, .6); } .case-narrative[data-env="executive-office"] .lesson-star { background: rgba(255, 200, 100, .5); box-shadow: 0 0 4px rgba(255, 200, 100, .55); } /* Scrolling data strip. A horizontal band of pixel-density rendering */ .lesson-data-strip { position: absolute; left: -100%; width: 100%; height: 3px; background: repeating-linear-gradient( 90deg, rgba(0, 230, 255, 0) 0px, rgba(0, 230, 255, .35) 6px, rgba(0, 230, 255, 0) 12px, rgba(0, 230, 255, .55) 18px, rgba(0, 230, 255, 0) 24px ); animation: data-scroll 12s linear infinite; opacity: 0.6; } .case-narrative[data-env="soc"] .lesson-data-strip { background: repeating-linear-gradient( 90deg, rgba(127, 255, 92, 0) 0px, rgba(127, 255, 92, .35) 6px, rgba(127, 255, 92, 0) 12px, rgba(127, 255, 92, .55) 18px, rgba(127, 255, 92, 0) 24px ); } @keyframes data-scroll { from { transform: translateX(0); } to { transform: translateX(200%); } } /* Screen flicker. Small rectangular "monitors" pulsing in the background */ .lesson-screen-flicker { position: absolute; width: 28px; height: 18px; background: rgba(0, 230, 255, .15); border: 1px solid rgba(0, 230, 255, .25); border-radius: 2px; animation: screen-flicker 2.4s ease-in-out infinite; filter: blur(0.5px); } .case-narrative[data-env="soc"] .lesson-screen-flicker { background: rgba(127, 255, 92, .15); border-color: rgba(127, 255, 92, .3); } @keyframes screen-flicker { 0%, 100% { opacity: 0.4; } 20% { opacity: 0.9; } 21% { opacity: 0.3; } 60% { opacity: 0.7; } 61% { opacity: 0.4; } } /* Executive-office window glow. Large soft amber rectangle */ .lesson-window-glow { position: absolute; top: 8%; right: 6%; width: 80px; height: 100px; background: radial-gradient(ellipse, rgba(255, 200, 80, .18), transparent 70%); filter: blur(8px); animation: window-glow-pulse 8s ease-in-out infinite; } @keyframes window-glow-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } /* Reduced motion. Disable env ambient motion too */ @media (prefers-reduced-motion: reduce) { .lesson-star, .lesson-data-strip, .lesson-screen-flicker, .lesson-window-glow { animation: none !important; } } /* ══════════════════════════════════════════════════════════════ PHASER GAME ENGINE LAYER ────────────────────────────────────────────────────────────── The Pixel Lobby. Full-screen modal hosting a Phaser canvas. ══════════════════════════════════════════════════════════════ */ .phaser-lobby-wrap { /* Inherits .modal-wrap + .signal-chamber-wrap full-screen sizing */ } .phaser-stage-wrap { background: #04080c; border: 1px solid var(--panel-edge); border-radius: 16px; width: min(960px, 96vw); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.6); } .phaser-stage-header { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--panel-edge); background: rgba(0,0,0,.5); } .phaser-stage-kicker { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .14em; color: var(--accent-2); text-transform: uppercase; background: rgba(127,255,92,.08); padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(127,255,92,.3); } .phaser-stage-title { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .08em; color: var(--ink); text-transform: uppercase; } .phaser-stage-canvas { background: #04080c; display: flex; align-items: center; justify-content: center; } .phaser-stage-canvas canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; } .phaser-stage-foot { padding: 8px 18px; border-top: 1px solid var(--panel-edge); font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-dim); letter-spacing: .06em; text-align: center; } /* ── SOC Floor (Phaser scene 2) ───────────────────────────────── */ .phaser-soc-wrap { /* Inherits .modal-wrap full-screen sizing */ } .soc-btn { /* Same shape as lobby-btn, distinct accent so it reads as a separate game scene rather than a copy of the lobby launcher. */ border-color: rgba(255, 80, 80, 0.4); background: linear-gradient(180deg, rgba(255,80,80,.08), rgba(255,80,80,.02)); } .soc-btn:hover { border-color: rgba(255, 80, 80, 0.7); background: linear-gradient(180deg, rgba(255,80,80,.18), rgba(255,80,80,.06)); } /* ── SOC Alert Triage Modal ───────────────────────────────────── */ .soc-alert-wrap { /* Sits ABOVE the Phaser stage modal. Overlay style */ background: rgba(2, 6, 12, 0.78); z-index: 1200; display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; animation: socAlertFadeIn 220ms ease-out; } @keyframes socAlertFadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } .soc-alert-modal { width: min(560px, 92vw); background: linear-gradient(180deg, #1a0e0e, #0e0606); border: 2px solid rgba(255, 80, 80, 0.55); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.7), 0 0 30px rgba(255,80,80,.18); padding: 22px 26px; font-family: "Space Grotesk", system-ui, sans-serif; color: var(--ink); } .soc-alert-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .soc-alert-sev { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em; padding: 3px 10px; border-radius: 4px; border: 1px solid currentColor; text-transform: uppercase; } .soc-alert-sev.sev-crit { color: #ff5050; background: rgba(255, 80, 80, 0.12); animation: socSevPulse 1.2s ease-in-out infinite; } .soc-alert-sev.sev-high { color: #ffd166; background: rgba(255, 209, 102, 0.12); } .soc-alert-sev.sev-med { color: #5ce1ff; background: rgba(92, 225, 255, 0.12); } @keyframes socSevPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .soc-alert-mitre { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-dim); letter-spacing: .1em; } .soc-alert-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: .01em; } .soc-alert-body { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--ink-dim); } .soc-alert-choices { display: flex; flex-direction: column; gap: 8px; } .soc-alert-choice { text-align: left; font-size: 13px; padding: 10px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); transition: background 120ms, border-color 120ms, transform 80ms; } .soc-alert-choice:hover { background: rgba(255,255,255,.09); border-color: rgba(0,230,255,.5); } .soc-alert-choice:active { transform: scale(0.98); } .soc-alert-verdict { margin-top: 4px; padding: 14px 16px; border-radius: 10px; font-size: 13px; line-height: 1.5; animation: socVerdictIn 260ms ease-out; } @keyframes socVerdictIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .soc-alert-verdict.verdict-good { background: rgba(127, 255, 92, 0.08); border: 1px solid rgba(127, 255, 92, 0.45); } .soc-alert-verdict.verdict-bad { background: rgba(255, 80, 80, 0.08); border: 1px solid rgba(255, 80, 80, 0.45); } .verdict-tag { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em; margin-bottom: 8px; color: var(--ink); } .verdict-feedback { color: var(--ink-dim); margin-bottom: 10px; } .verdict-score { font-family: "JetBrains Mono", monospace; font-size: 12px; margin-bottom: 12px; letter-spacing: .06em; } .delta-pos { color: #7fff5c; font-weight: 700; } .delta-neg { color: #ff5050; font-weight: 700; } /* ── SOC Drill Completion ────────────────────────────────────── */ .soc-complete-wrap { background: rgba(2, 6, 12, 0.86); z-index: 1300; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; animation: socAlertFadeIn 300ms ease-out; } .soc-complete-modal { width: min(480px, 92vw); background: linear-gradient(180deg, #0e1828, #06101a); border: 2px solid rgba(0, 230, 255, 0.5); border-radius: 14px; box-shadow: 0 16px 50px rgba(0,0,0,.7), 0 0 40px rgba(0,230,255,.15); padding: 28px 32px; text-align: center; font-family: "Space Grotesk", system-ui, sans-serif; color: var(--ink); } .soc-complete-kicker { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .18em; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; } .soc-complete-title { font-size: 22px; margin: 0 0 16px; letter-spacing: .01em; } .soc-complete-score { font-family: "JetBrains Mono", monospace; font-size: 14px; margin-bottom: 14px; color: var(--ink); } .soc-complete-grade { font-size: 13px; line-height: 1.5; color: var(--ink-dim); margin-bottom: 22px; font-style: italic; } .soc-complete-actions { display: flex; justify-content: center; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .soc-alert-sev.sev-crit { animation: none; } .soc-alert-wrap, .soc-complete-wrap, .soc-alert-verdict { animation: none; } } /* HUD lobby button */ .lobby-btn { background: linear-gradient(180deg, rgba(127,255,92,.12), rgba(127,255,92,.05)); border-color: rgba(127,255,92,.4); color: var(--accent-2); } .lobby-btn:hover { background: linear-gradient(180deg, rgba(127,255,92,.22), rgba(127,255,92,.08)); border-color: var(--accent-2); box-shadow: 0 0 14px rgba(127,255,92,.3); } /* Talking. Default speaker behavior (gentle bob); we keep the existing .speaking head-tilt active. No reaction override. */ /* Active speaker glow ring intensifies on urgent/frustrated states */ .lesson-stage[data-reaction="urgent"] .story-char.active::before, .lesson-stage[data-reaction="frustrated"] .story-char.active::before { background: radial-gradient(ellipse 60% 50% at 50% 80%, rgba(255, 90, 78, .45), transparent 70%); animation-duration: 1s !important; } .lesson-stage[data-reaction="confident"] .story-char.active::before { background: radial-gradient(ellipse 60% 50% at 50% 80%, rgba(127, 255, 92, .45), transparent 70%); } /* Reduced motion. Short-circuit reaction animations to single transitions, no continuous loops. Accessibility comes first. */ @media (prefers-reduced-motion: reduce) { .story-char.react-agreeing .story-char-sprite, .story-char.react-concerned .story-char-sprite, .story-char.react-frustrated .story-char-sprite, .story-char.react-urgent .story-char-sprite, .story-char.react-surprised .story-char-sprite, .story-char.react-thinking .story-char-sprite, .story-char.react-confident .story-char-sprite { animation: none !important; transform: none !important; } .lesson-reaction-overlay { animation: none !important; } } /* Reuse story-mode CSS for stage, characters, particles, dialogue, choices, typewriter, continue button, decision-mode, speaking-dots, camera pan, ambient effects. Nothing else to redefine. */ .url-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .url-tile { padding: 14px; border: 1px solid var(--panel-edge); border-radius: 10px; cursor: pointer; text-align: center; transition: all .15s; } .url-tile:hover { border-color: var(--accent); background: rgba(0,0,0,.25); } .url-tile .browser { display: flex; align-items: center; gap: 5px; background: var(--bg-2); padding: 5px 8px; border-radius: 6px; margin-bottom: 8px; font-family: "JetBrains Mono", monospace; font-size: 13px; } .url-tile .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); } .url-tile .url { color: var(--ink); flex: 1; text-align: left; } .url-tile .label { font-size: 11.5px; color: var(--ink-dim); } .url-tile.correct { border-color: var(--accent-2); background: rgba(127,255,92,.07); } .url-tile.wrong { border-color: var(--danger); background: rgba(255,90,78,.07); } .dns-table { font-family: "JetBrains Mono", monospace; font-size: 12.5px; width: 100%; border-collapse: collapse; } .dns-table th { font-weight: 500; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--panel-edge); color: var(--ink-dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } .dns-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; } .dns-table tr { cursor: pointer; transition: background .12s; } .dns-table tr:hover td { background: rgba(255,255,255,.03); } .dns-table tr.selected td { background: rgba(57,255,20,.07); } .dns-table tr.flagged td { background: rgba(255,90,78,.09); color: var(--danger); } .dns-table tr.ok-row td { background: rgba(127,255,92,.06); } .dns-table .ip { color: var(--ink); } .dns-table .bad-ip { color: var(--danger); font-weight: 500; } .packet-stream { display: flex; flex-direction: column; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 12px; max-height: 320px; overflow-y: auto; padding: 4px; } .packet { display: grid; grid-template-columns: 80px 1fr 90px 70px; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--panel-edge); border-radius: 6px; cursor: pointer; transition: all .12s; background: rgba(0,0,0,.18); } .packet:hover { border-color: var(--accent); } .packet.flagged { border-color: var(--danger); background: rgba(255,90,78,.05); } .packet.cleared { opacity: 0.5; } .packet .time { color: var(--ink-dim); } .packet .src { color: var(--ink); } .packet .verdict { text-align: right; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); } .packet .verdict.bad { color: var(--danger); } .packet .tag { padding: 1px 6px; border-radius: 3px; font-size: 10px; letter-spacing: .04em; background: rgba(255,255,255,.06); color: var(--ink-dim); text-align: center; } .packet .tag.tls { color: var(--accent-2); } .packet .tag.http { color: var(--accent-3); } .packet .tag.dns { color: var(--link); } /* Recon terminal (Priya scenario) */ .terminal { background: #04080a; border: 1px solid var(--panel-edge); border-radius: 10px; padding: 14px 16px; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ink); height: 340px; overflow-y: auto; line-height: 1.55; box-shadow: inset 0 0 24px rgba(0,0,0,.5); } .terminal .tline { white-space: pre-wrap; word-break: break-word; font-family: "JetBrains Mono", monospace; } .terminal .tline-sys { color: var(--ink-dim); font-style: italic; } .terminal .tline-cmd { color: var(--ink); } .terminal .tline-out { color: #c8e8d0; } .terminal .tline-err { color: var(--danger); } .terminal .tline-hint { color: var(--accent-3); margin-top: 2px; } .terminal .tline-ok { color: var(--accent-2); font-weight: 600; background: rgba(127,255,92,.05); padding: 4px 6px; border-left: 2px solid var(--accent-2); border-radius: 0 4px 4px 0; } .terminal input::placeholder { color: var(--ink-dim); } .terminal::-webkit-scrollbar { width: 8px; } .terminal::-webkit-scrollbar-track { background: transparent; } .terminal::-webkit-scrollbar-thumb { background: rgba(127,255,92,.18); border-radius: 4px; } /* Verdict screens at the end of scenarios */ .verdict-screen { text-align: center; padding: 16px 12px 8px; } .verdict-screen .big { font-size: 36px; font-weight: 700; margin: 8px 0 4px; } .verdict-screen .big.win { color: var(--accent-2); } .verdict-screen .big.lose { color: var(--danger); } .verdict-screen .sub { color: var(--ink-dim); font-size: 14px; margin-bottom: 20px; } .takeaway { text-align: left; background: rgba(0,0,0,.25); border-left: 2px solid var(--accent); padding: 14px 16px; border-radius: 0 8px 8px 0; margin: 12px 0; } .takeaway h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-family: "JetBrains Mono", monospace; } .takeaway p { margin: 0; font-size: 13.5px; line-height: 1.55; } /* ── Dossier ──────────────────────────────────────────────────── */ .dossier-grid { display: grid; grid-template-columns: 220px 1fr; gap: 22px; min-height: 460px; } .dossier-side { border-right: 1px solid var(--panel-edge); padding-right: 16px; display: flex; flex-direction: column; gap: 4px; } .dossier-side .item { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; transition: background .12s; } .dossier-side .item:hover { background: rgba(255,255,255,.04); } .dossier-side .item.active { background: rgba(57,255,20,.08); color: var(--accent); } .dossier-side .item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-dim); flex-shrink: 0; } .dossier-side .item.learned .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); } .dossier-side .summary { margin-top: auto; padding: 10px 12px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-dim); border-top: 1px solid var(--panel-edge); } .dossier-side .summary b { color: var(--accent); } .dossier-main h3 { margin: 0 0 4px; font-size: 22px; font-weight: 600; } .dossier-main .kicker { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .dossier-main h4 { margin: 18px 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); } .dossier-main p { font-size: 14px; line-height: 1.6; } .dossier-main ul { padding-left: 18px; } .dossier-main li { font-size: 14px; line-height: 1.6; margin-bottom: 4px; } .dossier-main .locked { display: grid; place-items: center; min-height: 360px; text-align: center; color: var(--ink-dim); border: 1px dashed var(--panel-edge); border-radius: 12px; font-size: 14px; } .dossier-main .locked .lock-icon { font-family: "JetBrains Mono", monospace; font-size: 32px; margin-bottom: 12px; color: var(--ink-dim); } /* Track groups in the Dossier sidebar */ .track-group { margin-bottom: 14px; padding-bottom: 6px; } .track-group + .track-group { border-top: 1px solid var(--panel-edge); padding-top: 12px; } .track-group-h { padding: 0 4px 8px; margin-bottom: 4px; } .track-name { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; } .track-progress { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-dim); } .track-bar { margin-top: 4px; position: relative; width: 100%; height: 3px; background: rgba(0,0,0,.4); border-radius: 999px; overflow: hidden; } .track-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 999px; transition: width .4s ease; } .track-hint { margin-top: 4px; font-size: 10px; color: var(--ink-dim); font-style: italic; opacity: .8; } /* Inline Term lookup component */ .term-pop { position: relative; display: inline; cursor: pointer; border-bottom: 1px dotted var(--accent); color: var(--accent); white-space: nowrap; } .term-pop:hover { background: rgba(57,255,20,.08); } .term-pop .term-pop-icon { font-size: 9px; opacity: .6; margin-left: 2px; vertical-align: super; } .term-tooltip { position: absolute; left: 0; top: 100%; margin-top: 6px; z-index: 500; display: flex; flex-direction: column; gap: 4px; min-width: 240px; max-width: 320px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4); cursor: default; animation: dialog-in .15s ease-out; } .term-tooltip-name { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .04em; } .term-tooltip-def { font-size: 12px; line-height: 1.5; color: var(--ink); font-style: normal; } .term-tooltip-eg { font-size: 11px; line-height: 1.4; color: var(--ink-dim); font-style: italic; margin-top: 2px; } .term-tooltip-close { font-size: 9px; color: var(--ink-dim); font-family: "JetBrains Mono", monospace; letter-spacing: .06em; text-align: right; margin-top: 2px; opacity: .6; } /* ── Guided Learn path ─────────────────────────────────────────────────── */ .learn { padding: 4px 2px; } .learn-intro { font-size: 13px; line-height: 1.6; color: var(--ink-dim); margin-bottom: 16px; max-width: 720px; } .learn-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .learn-section { appearance: none; text-align: left; cursor: pointer; background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); border-radius: 12px; padding: 13px 15px; color: var(--ink); transition: border-color .15s, background .15s; } .learn-section:hover { border-color: var(--accent); background: rgba(57,255,20,.05); } .learn-section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; } .learn-section-name { font: 600 13.5px/1.25 "Space Grotesk", system-ui, sans-serif; } .learn-section-count { font: 700 11px/1 "JetBrains Mono", monospace; color: var(--ink-dim); } .learn-section-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; } .learn-section-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; } .learn-walk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .learn-walk-title { font: 600 14px/1 "Space Grotesk", system-ui, sans-serif; color: var(--ink); } .learn-walk-progress { margin-left: auto; font: 700 11px/1 "JetBrains Mono", monospace; color: var(--ink-dim); } .learn-card { background: rgba(255,255,255,.04); border: 1px solid var(--panel-edge); border-radius: 14px; padding: 22px 24px; min-height: 180px; max-width: 640px; margin: 0 auto; } .learn-card-term-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .learn-card-term { font: 700 24px/1.15 "Space Grotesk", system-ui, sans-serif; color: var(--ink); } .learn-card-badge { font: 700 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .1em; padding: 3px 8px; border-radius: 999px; } .learn-card-badge.new { background: var(--accent); color: #000; } .learn-card-badge.learned { background: rgba(255,255,255,.1); color: var(--ink-dim); } .learn-card-def { font-size: 15.5px; line-height: 1.65; color: var(--ink); margin-bottom: 12px; } .learn-card-eg { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); font-style: italic; } .learn-walk-nav { display: flex; justify-content: space-between; gap: 12px; max-width: 640px; margin: 16px auto 0; } /* ── ECHO narrator caption ─────────────────────────────────────────────── */ .echo-narrator { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 560; width: min(620px, calc(100vw - 48px)); background: linear-gradient(180deg, rgba(8,14,20,.94), rgba(8,14,20,.88)); border: 1px solid var(--link); border-left: 3px solid var(--link); border-radius: 12px; padding: 11px 16px 12px; box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 22px rgba(92,225,255,.18); backdrop-filter: blur(4px); cursor: pointer; animation: echo-in .25s cubic-bezier(.2,.8,.3,1); } @keyframes echo-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } .echo-narrator-tag { display: inline-flex; align-items: center; gap: 5px; font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--link); margin-bottom: 6px; } .echo-eye { font-size: 11px; animation: echo-pulse 2.4s ease-in-out infinite; } @keyframes echo-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } } .echo-narrator-line { font-size: 14px; line-height: 1.55; color: var(--ink); } /* IRIS, ECHO's co-narrator, gets her own accent so it is obvious at a glance who is talking (ECHO = cyan, IRIS = magenta). */ .echo-narrator.speaker-iris { border-color: #ff6fb5; border-left-color: #ff6fb5; box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 22px rgba(255,111,181,.2); } .echo-narrator.speaker-iris .echo-narrator-tag { color: #ff6fb5; } /* ECHO voice quick-toggle in the HUD bottom bar. When muted it reads as a dimmed, struck-through control so the off state is obvious at a glance. */ /* Floating quick-controls shown over full-screen surfaces (scenarios, episodes, SOC, lobby) where the main toolbar is hidden. Sits top-of-stack, bottom-right, faint until hovered so it never competes with the scene. */ .quick-audio { position: fixed; right: 14px; bottom: 14px; z-index: 9000; display: flex; gap: 6px; opacity: .8; transition: opacity .15s ease; } .quick-audio:hover, .quick-audio:focus-within { opacity: 1; } .qa-btn { width: 38px; height: 38px; display: grid; place-items: center; font-size: 16px; line-height: 1; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 10px; color: var(--ink); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); } .qa-btn:hover { border-color: var(--accent); } .qa-btn.is-off { opacity: .5; } .qa-btn.qa-on { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px rgba(57,255,20,.3); } .qa-btn.qa-collapse { font-size: 18px; opacity: .7; } .qa-btn.qa-collapse:hover { opacity: 1; } /* ── Responsive shell: fit small laptops, tablets, and phones ───────── The HUD is a fixed overlay over a scrolling map. Below ~760px the top/bottom bars overflow, so wrap + tighten them, let the button clusters reflow, and shed non-essential chrome (keyboard hint, minimap) that won't fit. Scenario modals keep their own responsive rules. */ @media (max-width: 760px) { .hud-topbar { top: 8px; left: 8px; right: 8px; gap: 6px; flex-wrap: wrap; } .hud-quest { flex: 1 1 100%; order: 3; } .quest-pill { max-width: 100%; font-size: 11px; padding: 6px 10px; } .hud-stats { font-size: 10px; padding: 5px 8px; gap: 6px; } .hud-bottombar { left: 8px; right: 8px; bottom: 8px; flex-wrap: wrap; justify-content: center; gap: 6px; } .controls { display: none; } /* keyboard hint: not essential / no room */ .minimap { display: none; } /* Map is still reachable via the 🗺 button */ .btn-row { margin-left: 0; width: 100%; justify-content: center; } .btn-grp { flex-wrap: wrap; justify-content: center; padding: 3px; gap: 3px; } .btn { font-size: 11.5px; padding: 7px 10px; } } @media (max-width: 460px) { .brand-name em { display: none; } /* drop the "Day 1 · Office hours" subtitle */ .hud-stats { display: none; } /* reclaim width on tiny screens */ .quest-pill { font-size: 10.5px; } .btn { font-size: 11px; padding: 6px 9px; gap: 5px; } .qa-btn { width: 34px; height: 34px; font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .quick-audio { transition: none; } } .echo-voice-btn { gap: 6px; } /* Off state now reads via the explicit On/Off pill, so just a gentle dim (no strikethrough, which clashed with the state pill). */ .echo-voice-btn.is-off { opacity: .72; } /* Daily challenge button in HUD */ .daily-btn { position: relative; } .daily-btn.has-new { border-color: var(--accent); box-shadow: 0 0 12px rgba(57,255,20,.3); } .daily-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); animation: dot-pulse 1.5s ease-in-out infinite; } /* ⬢ Signal Chamber button. Cyan-themed to match the chamber's UI */ .chamber-btn { position: relative; } .chamber-btn.unlocked { border-color: #00e6ff; color: #00e6ff; box-shadow: 0 0 12px rgba(0, 230, 255, .35); } .chamber-btn.sealed { opacity: 0.55; border-color: rgba(0, 230, 255, .2); color: #88c8d8; } .chamber-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; background: #00e6ff; border-radius: 50%; box-shadow: 0 0 8px #00e6ff; animation: dot-pulse 1.5s ease-in-out infinite; } @keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* ── Badges grid (3rd Dossier tab) ──────────────────────────────── */ .badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 480px; overflow-y: auto; padding-right: 6px; } .badges-grid::-webkit-scrollbar { width: 8px; } .badges-grid::-webkit-scrollbar-thumb { background: rgba(127,255,92,.18); border-radius: 4px; } .badge { padding: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--panel-edge); border-radius: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; transition: all .15s; position: relative; } .badge.earned { border-color: var(--accent); background: rgba(57,255,20,.06); box-shadow: 0 0 16px rgba(57,255,20,.08); } .badge.locked { opacity: 0.55; } .badge-icon { font-size: 28px; width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 6px; background: rgba(0,0,0,.4); border: 1px solid var(--panel-edge); border-radius: 12px; } .badge.earned .badge-icon { background: rgba(57,255,20,.1); border-color: var(--accent); text-shadow: 0 0 10px var(--accent); } .badge-name { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: .02em; } .badge.locked .badge-name { color: var(--ink-dim); } .badge.earned .badge-name { color: var(--accent); } .badge-desc { font-size: 11px; line-height: 1.4; color: var(--ink-dim); margin-top: 2px; } .badge-status { margin-top: 6px; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; } .badge-status.on { color: var(--accent-2); background: rgba(127,255,92,.08); } .badge-status.off { color: var(--ink-dim); background: rgba(0,0,0,.3); } /* ── News ticker (between topbar and bottom controls) ────────── */ .news-ticker { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: 720px; padding: 6px 14px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 999px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-dim); z-index: 60; animation: news-fade .35s ease; pointer-events: none; } .news-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 8px var(--accent-3); flex-shrink: 0; animation: news-pulse 1.4s ease-in-out infinite; } .news-tag { font-weight: 700; letter-spacing: .08em; color: var(--accent-3); font-size: 10px; padding: 1px 6px; background: rgba(255,209,102,.1); border-radius: 4px; } .news-text { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 540px; } @keyframes news-fade { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes news-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Network topology diagram (Jordan scenario) ──────────────── */ .net-topology { background: rgba(0,0,0,.3); border: 1px solid var(--panel-edge); border-radius: 12px; padding: 14px; } .net-topology svg text { user-select: none; } /* ── News ticker clickable state ─────────────────────────────── */ .news-ticker.clickable { cursor: pointer; pointer-events: auto; transition: all .15s; } .news-ticker.clickable:hover { border-color: var(--accent-3); background: rgba(255,209,102,.05); } .news-more { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--accent-3); margin-left: 4px; opacity: 0.7; } /* ── v2 Case Study. Multi-dimensional executive sim ─────────── */ .csv2-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; } .csv2-setup-card { padding: 10px 12px; background: rgba(0,0,0,.25); border: 1px solid var(--panel-edge); border-radius: 8px; } .csv2-setup-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; } .csv2-setup-val { font-size: 12.5px; color: var(--ink); line-height: 1.5; } /* Meter bar. Financial / reputation / legal / technical */ .meter-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; background: rgba(0,0,0,.3); border: 1px solid var(--panel-edge); border-radius: 10px; } .meter { display: flex; flex-direction: column; gap: 4px; } .meter-h { display: flex; align-items: baseline; gap: 4px; font-family: "JetBrains Mono", monospace; } .meter-icon { font-size: 13px; } .meter-label { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); margin-right: auto; } .meter-val { font-size: 11px; font-weight: 700; color: var(--ink); } .meter-delta { font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; animation: delta-pop .4s ease; } .meter-delta.pos { color: var(--accent-2); background: rgba(127,255,92,.12); } .meter-delta.neg { color: var(--danger); background: rgba(255,90,78,.12); } .meter-delta.money-neg { color: var(--danger); } .meter-delta.money-pos { color: var(--accent-2); } @keyframes delta-pop { 0% { transform: translateY(-4px); opacity: 0; } 50% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } .meter-bar-track { height: 4px; background: rgba(0,0,0,.4); border-radius: 999px; overflow: hidden; } .meter-bar-fill { height: 100%; border-radius: 999px; transition: width .5s ease, background .5s ease; } /* v2 choice cards */ .csv2-choice { padding: 14px 16px; background: rgba(0,0,0,.3); border: 1px solid var(--panel-edge); border-radius: 10px; cursor: pointer; transition: all .15s; } .csv2-choice:hover { border-color: var(--accent); background: rgba(57,255,20,.04); } .csv2-choice.picked { border-color: var(--accent-2); background: rgba(127,255,92,.08); } .csv2-choice.fade { opacity: 0.35; pointer-events: none; } .csv2-impact-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .csv2-chip { font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 2px 7px; border-radius: 4px; letter-spacing: .02em; } .csv2-chip.pos { color: var(--accent-2); background: rgba(127,255,92,.08); border: 1px solid rgba(127,255,92,.3); } .csv2-chip.neg { color: var(--danger); background: rgba(255,90,78,.08); border: 1px solid rgba(255,90,78,.3); } /* ── NPC followup marker ─────────────────────────────────────── */ .npc-hint.followup { background: var(--accent-3); color: #000; box-shadow: 0 0 14px var(--accent-3); animation: followup-pulse 1.6s ease-in-out infinite; } @keyframes followup-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 12px var(--accent-3); } 50% { transform: scale(1.12); box-shadow: 0 0 18px var(--accent-3); } } /* ── Mission Timer (Hard mode) ───────────────────────────────── */ .mission-timer { position: fixed; top: 100px; right: 20px; z-index: 500; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(0,0,0,.6); border: 1px solid var(--accent-3); border-radius: 999px; font-family: "JetBrains Mono", monospace; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 16px rgba(255,209,102,.25); animation: timer-in .3s ease; } .mission-timer.critical { border-color: var(--danger); box-shadow: 0 0 18px rgba(255,90,78,.6); animation: timer-critical .8s ease-in-out infinite; } .mt-icon { font-size: 14px; } .mt-label { font-size: 9px; letter-spacing: .12em; color: var(--accent-3); } .mission-timer.critical .mt-label { color: var(--danger); } .mt-time { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .04em; } @keyframes timer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes timer-critical { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* ── Threat Intel Digest grid ────────────────────────────────── */ .digest-group-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--panel-edge); display: flex; align-items: center; justify-content: space-between; } .digest-count { background: rgba(57,255,20,.1); color: var(--accent); padding: 1px 6px; border-radius: 4px; font-size: 9px; } .digest-list { display: flex; flex-direction: column; gap: 6px; } .digest-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(0,0,0,.2); border: 1px solid var(--panel-edge); border-radius: 8px; cursor: pointer; transition: all .12s; } .digest-item:hover { border-color: var(--accent-3); background: rgba(255,209,102,.04); } .digest-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-3); flex-shrink: 0; } .digest-text { flex: 1; font-size: 12.5px; color: var(--ink); line-height: 1.45; } .digest-arrow { color: var(--accent-3); font-size: 11px; font-family: "JetBrains Mono", monospace; opacity: .6; } /* ══════════════════════════════════════════════════════════════ THE SIGNAL CHAMBER. Weekly live-service operations center ══════════════════════════════════════════════════════════════ */ .signal-chamber-wrap { display: grid; place-items: center; background: rgba(0, 8, 16, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 600; } .signal-chamber { background: #04080c; border: 1px solid #00e6ff; border-radius: 14px; width: min(96vw, 1100px); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0, 230, 255, .25), inset 0 0 60px rgba(0, 230, 255, .04); color: #c8e8f0; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; overflow: hidden; } .signal-h { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: rgba(0, 230, 255, .06); border-bottom: 1px solid rgba(0, 230, 255, .25); font-family: "JetBrains Mono", monospace; } .signal-eye { font-size: 20px; color: #00e6ff; text-shadow: 0 0 12px #00e6ff; } .signal-eye.live { animation: signal-pulse 1.4s ease-in-out infinite; } @keyframes signal-pulse { 0%, 100% { opacity: 1; text-shadow: 0 0 12px #00e6ff; } 50% { opacity: .65; text-shadow: 0 0 4px #00e6ff; } } .signal-title { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #00e6ff; font-weight: 700; } .signal-clock { margin-left: auto; color: var(--danger); font-size: 12px; letter-spacing: .08em; } .signal-beat-count { color: #88c8d8; font-size: 10px; letter-spacing: .1em; } .signal-body { flex: 1; overflow-y: auto; padding: 22px; } /* Entry card */ .signal-drill-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } .signal-drill-row .btn { font-size: 12.5px; } .signal-entry-card { text-align: center; max-width: 540px; margin: 20px auto; padding: 28px; background: rgba(0, 230, 255, .03); border: 1px solid rgba(0, 230, 255, .2); border-radius: 12px; } .signal-eye-big { font-size: 56px; color: #00e6ff; text-shadow: 0 0 24px #00e6ff; margin-bottom: 10px; animation: signal-pulse 2s ease-in-out infinite; } .signal-week-tag { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .16em; color: #88c8d8; margin-bottom: 12px; } .signal-entry-card h2 { margin: 0 0 12px; font-size: 22px; color: #c8e8f0; } .signal-entry-card p { font-size: 14px; line-height: 1.6; color: #88c8d8; margin: 8px 0; } /* Locked card */ .signal-locked-card { text-align: center; max-width: 540px; margin: 20px auto; padding: 28px; background: rgba(0,0,0,.4); border: 1px dashed rgba(0, 230, 255, .3); border-radius: 12px; } .signal-locked-icon { font-size: 40px; margin-bottom: 12px; } .signal-locked-card h2 { margin: 0 0 8px; font-size: 24px; color: #c8e8f0; } .signal-locked-card p { font-size: 13.5px; color: #88c8d8; line-height: 1.6; } .signal-countdown { font-family: "JetBrains Mono", monospace; font-size: 32px; font-weight: 700; color: #00e6ff; margin: 16px 0; text-shadow: 0 0 16px rgba(0, 230, 255, .5); letter-spacing: .06em; } .signal-last-perf { margin-top: 16px; padding: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(0, 230, 255, .15); border-radius: 8px; text-align: left; } .signal-last-h { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em; color: #88c8d8; } .signal-last-title { font-size: 14px; font-weight: 600; color: #c8e8f0; margin: 4px 0; } .signal-last-tier { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; } .signal-tier { font-family: "JetBrains Mono", monospace; font-size: 22px; font-weight: 700; } /* History */ .signal-history { margin-top: 24px; max-width: 540px; margin-left: auto; margin-right: auto; } .signal-history-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: #88c8d8; margin-bottom: 8px; } .signal-history-list { display: grid; gap: 4px; } .signal-history-row { display: grid; grid-template-columns: 50px 1fr 40px; gap: 10px; align-items: center; padding: 6px 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(0, 230, 255, .1); border-radius: 6px; font-size: 12px; } .signal-history-week { font-family: "JetBrains Mono", monospace; font-size: 10px; color: #88c8d8; } .signal-history-title { color: #c8e8f0; } .signal-history-tier { font-family: "JetBrains Mono", monospace; font-weight: 700; text-align: right; font-size: 14px; } /* Generating phase */ .signal-synth { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 360px; } .signal-synth-eye { font-size: 80px; color: #00e6ff; text-shadow: 0 0 32px #00e6ff; animation: signal-synth-spin 2s linear infinite; margin-bottom: 30px; } @keyframes signal-synth-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .signal-synth-text { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em; color: #00e6ff; text-align: center; } .signal-synth-line { margin: 4px 0; animation: signal-synth-fadein .8s ease forwards; opacity: 0; } .signal-synth-line:nth-child(1) { animation-delay: 0s; } .signal-synth-line:nth-child(2) { animation-delay: .4s; } .signal-synth-line:nth-child(3) { animation-delay: .8s; } .signal-synth-line:nth-child(4) { animation-delay: 1.2s; } @keyframes signal-synth-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Briefing card */ .signal-briefing { max-width: 720px; margin: 0 auto; } .signal-brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .signal-brief-card { padding: 12px 14px; background: rgba(0, 230, 255, .03); border: 1px solid rgba(0, 230, 255, .15); border-radius: 8px; } .signal-brief-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em; color: #88c8d8; margin-bottom: 4px; } .signal-brief-val { font-size: 13px; color: #c8e8f0; line-height: 1.5; } .signal-brief-block { margin: 12px 0; } .signal-brief-text { font-size: 13.5px; line-height: 1.65; color: #c8e8f0; margin-top: 6px; } .signal-brief-callout { margin-top: 18px; padding: 14px 18px; background: rgba(255, 209, 102, .08); border: 1px solid var(--accent-3); border-radius: 10px; font-size: 14px; color: #ffd166; line-height: 1.55; } /* Active gameplay. Ops body grid */ .ops-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; padding: 16px; flex: 1; min-height: 0; overflow: hidden; } .ops-feed { background: rgba(0,0,0,.5); border: 1px solid rgba(0, 230, 255, .15); border-radius: 8px; padding: 12px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; overflow-y: auto; max-height: 460px; } .ops-feed-h { font-size: 10px; letter-spacing: .14em; color: #00e6ff; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 230, 255, .15); } .ops-feed-item { display: grid; grid-template-columns: 56px 80px 1fr; gap: 8px; padding: 4px 0; line-height: 1.5; border-bottom: 1px dotted rgba(0, 230, 255, .08); animation: ops-feed-in .35s ease; } .ops-feed-item.decision { background: rgba(0, 230, 255, .08); padding: 6px 8px; margin: 4px -8px; border-radius: 4px; border-bottom: none; } .ops-feed-item.positive .ops-feed-msg { color: var(--accent-2); } .ops-feed-item.follow { background: rgba(0,0,0,.3); padding: 4px 8px; margin: 2px -8px; border-radius: 3px; } .ops-feed-t { color: #88c8d8; font-size: 10px; } .ops-feed-src { color: var(--accent-3); font-weight: 700; font-size: 10px; } .ops-feed-msg { color: #c8e8f0; word-wrap: break-word; } @keyframes ops-feed-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .ops-decision { background: rgba(0,0,0,.4); border: 1px solid rgba(0, 230, 255, .15); border-radius: 8px; padding: 14px; overflow-y: auto; max-height: 460px; } .ops-choice { padding: 12px 14px; background: rgba(0, 230, 255, .03); border: 1px solid rgba(0, 230, 255, .2); border-radius: 8px; cursor: pointer; transition: all .15s; } .ops-choice:hover { border-color: #00e6ff; background: rgba(0, 230, 255, .08); } .ops-choice.picked { border-color: var(--accent-2); background: rgba(127, 255, 92, .1); } .ops-choice.fade { opacity: .35; pointer-events: none; } .ops-impact-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .ops-chip { font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 1px 7px; border-radius: 4px; letter-spacing: .02em; } .ops-chip.pos { color: var(--accent-2); background: rgba(127,255,92,.08); border: 1px solid rgba(127,255,92,.3); } .ops-chip.neg { color: var(--danger); background: rgba(255,90,78,.08); border: 1px solid rgba(255,90,78,.3); } /* Meters bar (bottom) */ .ops-meters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px 20px; background: rgba(0, 230, 255, .04); border-top: 1px solid rgba(0, 230, 255, .2); } .ops-meter { display: flex; flex-direction: column; gap: 4px; } .ops-meter-h { display: flex; align-items: baseline; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 10px; color: #88c8d8; letter-spacing: .04em; } .ops-meter-val { margin-left: auto; font-size: 13px; font-weight: 700; color: #c8e8f0; } .ops-meter-delta { font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 700; animation: delta-pop .4s ease; } .ops-meter-delta.pos { color: var(--accent-2); background: rgba(127,255,92,.12); } .ops-meter-delta.neg { color: var(--danger); background: rgba(255,90,78,.12); } .ops-meter-track { height: 4px; background: rgba(0,0,0,.5); border-radius: 999px; overflow: hidden; } .ops-meter-fill { height: 100%; border-radius: 999px; transition: width .5s ease; } /* Outcome */ .signal-outcome { text-align: center; max-width: 720px; margin: 0 auto; } .signal-tier-big { font-family: "JetBrains Mono", monospace; font-size: 64px; font-weight: 700; margin-bottom: 4px; text-shadow: 0 0 24px currentColor; } .signal-outcome-block { margin-top: 14px; padding: 14px 16px; border-radius: 10px; text-align: left; border: 1px solid; } /* ══════════════════════════════════════════════════════════════ SIGNAL CHAMBER, STORY MODE (scene-based dialogue UI) Replaces the old split-panel dashboard with a cinematic character-driven presentation. ══════════════════════════════════════════════════════════════ */ .signal-chamber.story { background: #04080c; overflow: hidden; } .story-scene-clock { margin-left: auto; color: var(--accent-3); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em; } .story-scene-progress { color: #5fa8c4; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; margin-right: 8px; } /* Stage area. Character row + environment backdrop */ .story-stage { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 430px; padding: 40px 36px 24px; overflow: hidden; animation: scene-fade-in .5s ease-out; } .story-env-back { position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: background 1s ease; } /* Environment palettes. Structured rooms, not flat gradients. A row of monitor-screen glows across the top reads as a wall-mounted bank; a sharp bright stop is the wall/floor horizon; ::before adds a receding floor grid. Reliable (main element isn't animated). */ .signal-chamber.story[data-env="war-room"] .story-env-back { background: radial-gradient(circle 46px at 14% 17%, rgba(0,230,255,.20), transparent 66%), radial-gradient(circle 42px at 32% 13%, rgba(255,90,78,.15), transparent 66%), radial-gradient(circle 46px at 50% 17%, rgba(0,230,255,.17), transparent 66%), radial-gradient(circle 42px at 68% 13%, rgba(255,209,102,.13), transparent 66%), radial-gradient(circle 46px at 86% 17%, rgba(0,230,255,.16), transparent 66%), radial-gradient(ellipse 75% 50% at 50% 96%, rgba(0,100,150,.30), transparent 72%), linear-gradient(180deg, #0a1626 0%, #0a1422 55%, rgba(0,230,255,.13) 56.5%, #0a1a2a 58%, #070f19 100%); } .signal-chamber.story[data-env="war-room"] .story-env-back::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,230,255,.04) 1px, transparent 1px); background-size: 100% 32px; opacity: .5; } .signal-chamber.story[data-env="executive-office"] .story-env-back { background: radial-gradient(ellipse 64% 46% at 50% 20%, rgba(255,190,110,.20), transparent 66%), radial-gradient(circle 30px at 22% 24%, rgba(255,150,70,.16), transparent 64%), radial-gradient(circle 30px at 78% 24%, rgba(255,150,70,.16), transparent 64%), radial-gradient(ellipse 70% 50% at 50% 95%, rgba(255,150,70,.16), transparent 72%), linear-gradient(180deg, #241405 0%, #2a1810 55%, rgba(255,180,90,.14) 56.5%, #20120a 58%, #160d06 100%); } .signal-chamber.story[data-env="press-room"] .story-env-back { background: radial-gradient(circle 40px at 18% 14%, rgba(255,255,255,.14), transparent 64%), radial-gradient(circle 40px at 40% 11%, rgba(120,200,255,.12), transparent 64%), radial-gradient(circle 40px at 62% 11%, rgba(120,200,255,.12), transparent 64%), radial-gradient(circle 40px at 84% 14%, rgba(255,255,255,.14), transparent 64%), radial-gradient(ellipse 70% 50% at 50% 96%, rgba(120,140,180,.16), transparent 72%), linear-gradient(180deg, #1c1c24 0%, #14141c 55%, rgba(180,200,230,.12) 56.5%, #101018 58%, #0a0a12 100%); } .signal-chamber.story[data-env="soc"] .story-env-back { background: radial-gradient(circle 46px at 14% 17%, rgba(57,255,20,.18), transparent 66%), radial-gradient(circle 42px at 33% 13%, rgba(127,255,92,.14), transparent 66%), radial-gradient(circle 46px at 52% 17%, rgba(57,255,20,.16), transparent 66%), radial-gradient(circle 42px at 70% 13%, rgba(255,209,102,.12), transparent 66%), radial-gradient(circle 46px at 87% 17%, rgba(57,255,20,.15), transparent 66%), radial-gradient(ellipse 75% 50% at 50% 96%, rgba(40,160,60,.26), transparent 72%), linear-gradient(180deg, #07140d 0%, #081410 55%, rgba(57,255,20,.11) 56.5%, #0a190f 58%, #050b08 100%); } /* shared floor. Faint receding perspective grid + contact shadow */ .story-env-back::before { content: ""; position: absolute; inset: 57% 0 0 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 7.5%), linear-gradient(180deg, transparent, rgba(0,0,0,.55)); } @keyframes scene-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Character row */ .story-chars { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 50px; flex-wrap: wrap; } .story-char { display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all .35s ease; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); } .story-char.dim { opacity: 0.45; transform: scale(0.88); } .story-char.active { opacity: 1; transform: scale(1.08) translateY(-6px); filter: drop-shadow(0 0 18px rgba(0, 230, 255, .55)) drop-shadow(0 12px 24px rgba(0, 0, 0, .7)); } .story-char-sprite { width: 130px; height: 174px; position: relative; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; } .story-char-sprite .char-polished { max-width: none; width: 126px; height: 162px; } /* The Character SVG sprite renders ~40×72; this contains it nicely */ .story-char-name { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: #c8e8f0; letter-spacing: .02em; white-space: nowrap; } .story-char.active .story-char-name { color: #00e6ff; text-shadow: 0 0 8px rgba(0, 230, 255, .6); } .story-char-role { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #5fa8c4; white-space: nowrap; } /* Tension indicators. Small dots in top-right of stage */ .story-tension { position: absolute; top: 12px; right: 16px; display: flex; gap: 8px; z-index: 2; } .tension-dot { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; background: rgba(0,0,0,.4); border: 1px solid; transition: border-color .4s ease, box-shadow .4s ease; } .tension-dot.good { border-color: var(--accent-2); box-shadow: 0 0 8px rgba(127,255,92,.25); } .tension-dot.mid { border-color: var(--accent-3); box-shadow: 0 0 8px rgba(255,209,102,.25); } .tension-dot.bad { border-color: var(--danger); box-shadow: 0 0 12px rgba(255,90,78,.45); animation: tension-pulse 1.4s ease-in-out infinite; } @keyframes tension-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } /* Dialogue box. Visual-novel style bottom panel */ .story-dialogue { position: relative; background: linear-gradient(180deg, rgba(0,20,30,.85), rgba(0,12,20,.95)); border-top: 2px solid #00e6ff; padding: 16px 28px 18px; min-height: 130px; z-index: 3; box-shadow: 0 -8px 24px rgba(0,0,0,.6); animation: dialogue-in .25s ease-out; } @keyframes dialogue-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .story-speaker { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #00e6ff; text-transform: uppercase; margin-bottom: 6px; } .story-speaker-role { color: #5fa8c4; font-weight: 400; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; } .story-line { font-size: 16px; line-height: 1.55; color: #e8f4f8; font-style: italic; } .story-continue { position: absolute; right: 22px; bottom: 12px; appearance: none; background: transparent; color: #00e6ff; border: 1px solid rgba(0, 230, 255, .4); padding: 4px 14px; border-radius: 8px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: lowercase; cursor: pointer; animation: continue-pulse 1.6s ease-in-out infinite; transition: all .15s; } .story-continue:hover { background: rgba(0, 230, 255, .12); border-color: #00e6ff; } @keyframes continue-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Choice list. Appears when a decision beat fires */ .story-choices { margin-top: 12px; } .story-choices-h { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .14em; color: #5fa8c4; text-transform: uppercase; margin-bottom: 6px; } .story-choice { appearance: none; display: block; width: 100%; text-align: left; background: rgba(0, 230, 255, .04); border: 1px solid rgba(0, 230, 255, .25); color: #e8f4f8; padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all .12s; font-family: inherit; font-size: 14px; line-height: 1.45; } .story-choice:hover { background: rgba(0, 230, 255, .12); border-color: #00e6ff; transform: translateX(4px); } .story-choice-quote { font-style: italic; } /* ── Outcome (debrief). Uses same story-* primitives plus extras ── */ .signal-chamber.story.outcome { /* Subtle darker base. Feels like the end of the day */ } .signal-chamber.story.outcome .story-stage { min-height: 320px; } .signal-chamber.story.outcome .story-env-back { /* Slightly warmer, more "after-hours" feel for the war-room debrief */ background: radial-gradient(ellipse 70% 60% at 50% 90%, rgba(0,60,90,.18), transparent 70%), linear-gradient(180deg, #050810 0%, #0a1018 100%); } .outcome-tier-banner { position: absolute; top: 12px; left: 16px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 8px; background: rgba(0,0,0,.5); border: 1px solid; border-radius: 10px; backdrop-filter: blur(2px); } .outcome-tier-letter { font-family: "JetBrains Mono", monospace; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: inherit; text-shadow: 0 0 12px currentColor; } .outcome-tier-headline { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: inherit; opacity: .9; } .outcome-narrator { color: #ffd166 !important; letter-spacing: .14em !important; font-size: 11px !important; } .outcome-reveal-line { font-style: normal !important; color: #e8f4f8 !important; font-size: 14.5px !important; line-height: 1.6 !important; border-left: 2px solid rgba(255,209,102,.55); padding-left: 14px; margin-top: 4px; } .outcome-study-tag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--accent-3); align-self: center; margin-right: 4px; } /* ══════════════════════════════════════════════════════════════ CASE STUDY · NARRATIVE / "DAY IN THE LIFE" engine ────────────────────────────────────────────────────────────── Cinematic, character-driven UI for the v3 case study engine. Mirrors the Signal Chamber story-mode primitives but with its own header chrome and a multi-thread triage screen. ══════════════════════════════════════════════════════════════ */ .case-narrative-wrap { /* Full-screen wrapper. Shares chrome with .signal-chamber-wrap */ } .case-narrative { position: relative; display: flex; flex-direction: column; background: #04080c; border: 1px solid var(--panel-edge); border-radius: 16px; width: min(1100px, 96vw); height: min(820px, 92vh); overflow: hidden; color: var(--ink); font-family: inherit; } .case-narrative.intro { overflow: auto; } /* Header bar */ .cnh { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--panel-edge); background: rgba(0,0,0,.35); flex-shrink: 0; } .cnh-eye { color: var(--accent); font-size: 16px; text-shadow: 0 0 12px currentColor; } .cnh-eye.live { animation: cnh-pulse 1.8s ease-in-out infinite; } @keyframes cnh-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } } .cnh-title { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .08em; color: var(--ink); text-transform: uppercase; } .cnh-day, .cnh-phase { margin-left: auto; color: var(--accent-3); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } .cnh-progress { color: #5fa8c4; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } /* INTRO PHASE. Sets the day before it starts */ .cn-intro { padding: 32px 36px 24px; max-width: 880px; margin: 0 auto; width: 100%; } .cn-kicker { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .cn-title { font-size: 30px; font-weight: 700; margin: 0 0 4px; color: var(--ink); } .cn-industry { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .06em; margin-bottom: 18px; } .cn-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .cn-intro-card { background: rgba(0,0,0,.35); border: 1px solid var(--panel-edge); border-radius: 10px; padding: 12px 14px; } .cn-card-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em; color: var(--ink-dim); text-transform: uppercase; margin-bottom: 4px; } .cn-card-val { font-size: 13.5px; color: var(--ink); line-height: 1.5; } .cn-trigger { margin-top: 4px; padding: 14px 16px; background: rgba(255,90,78,.07); border: 1px solid var(--danger); border-radius: 10px; } .cn-trigger-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--danger); margin-bottom: 6px; } .cn-trigger-body { font-size: 13.5px; line-height: 1.7; color: var(--ink); } .cn-cast-preview { margin-top: 18px; } .cn-cast-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--ink-dim); margin-bottom: 10px; } .cn-cast-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .cn-cast-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 120px; } .cn-cast-portrait { width: 52px; height: 80px; display: flex; align-items: flex-start; justify-content: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); margin-bottom: 4px; } .cn-cast-name { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; color: #c8e8f0; text-align: center; } .cn-cast-role { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #5fa8c4; text-align: center; } .cn-intro-rules { margin-top: 18px; padding: 14px 16px; background: rgba(0,0,0,.3); border: 1px dashed var(--panel-edge); border-radius: 10px; font-size: 13px; line-height: 1.7; color: var(--ink-dim); } .cn-intro-cta { margin-top: 18px; display: flex; justify-content: center; } /* STORY phase. Stage + dialogue (mirrors story-mode chamber) */ .case-narrative.story { /* uses the story-stage + cn-dialogue primitives */ } .cn-stage { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 430px; padding: 40px 36px 24px; overflow: hidden; animation: cn-scene-fade .45s ease-out; } .cn-env-back { position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: background 1s ease; } .case-narrative[data-env="war-room"] .cn-env-back { background: radial-gradient(circle 46px at 14% 17%, rgba(0,230,255,.20), transparent 66%), radial-gradient(circle 42px at 32% 13%, rgba(255,90,78,.15), transparent 66%), radial-gradient(circle 46px at 50% 17%, rgba(0,230,255,.17), transparent 66%), radial-gradient(circle 42px at 68% 13%, rgba(255,209,102,.13), transparent 66%), radial-gradient(circle 46px at 86% 17%, rgba(0,230,255,.16), transparent 66%), radial-gradient(ellipse 75% 50% at 50% 96%, rgba(0,100,150,.30), transparent 72%), linear-gradient(180deg, #0a1626 0%, #0a1422 55%, rgba(0,230,255,.13) 56.5%, #0a1a2a 58%, #070f19 100%); } .case-narrative[data-env="war-room"] .cn-env-back::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,230,255,.04) 1px, transparent 1px); background-size: 100% 32px; opacity: .5; } .case-narrative[data-env="executive-office"] .cn-env-back { background: radial-gradient(ellipse 64% 46% at 50% 20%, rgba(255,190,110,.20), transparent 66%), radial-gradient(circle 30px at 22% 24%, rgba(255,150,70,.16), transparent 64%), radial-gradient(circle 30px at 78% 24%, rgba(255,150,70,.16), transparent 64%), radial-gradient(ellipse 70% 50% at 50% 95%, rgba(255,150,70,.16), transparent 72%), linear-gradient(180deg, #241405 0%, #2a1810 55%, rgba(255,180,90,.14) 56.5%, #20120a 58%, #160d06 100%); } .case-narrative[data-env="press-room"] .cn-env-back { background: radial-gradient(circle 40px at 18% 14%, rgba(255,255,255,.14), transparent 64%), radial-gradient(circle 40px at 40% 11%, rgba(120,200,255,.12), transparent 64%), radial-gradient(circle 40px at 62% 11%, rgba(120,200,255,.12), transparent 64%), radial-gradient(circle 40px at 84% 14%, rgba(255,255,255,.14), transparent 64%), radial-gradient(ellipse 70% 50% at 50% 96%, rgba(120,140,180,.16), transparent 72%), linear-gradient(180deg, #1c1c24 0%, #14141c 55%, rgba(180,200,230,.12) 56.5%, #101018 58%, #0a0a12 100%); } .case-narrative[data-env="soc"] .cn-env-back { background: radial-gradient(circle 46px at 14% 17%, rgba(57,255,20,.18), transparent 66%), radial-gradient(circle 42px at 33% 13%, rgba(127,255,92,.14), transparent 66%), radial-gradient(circle 46px at 52% 17%, rgba(57,255,20,.16), transparent 66%), radial-gradient(circle 42px at 70% 13%, rgba(255,209,102,.12), transparent 66%), radial-gradient(circle 46px at 87% 17%, rgba(57,255,20,.15), transparent 66%), radial-gradient(ellipse 75% 50% at 50% 96%, rgba(40,160,60,.26), transparent 72%), linear-gradient(180deg, #07140d 0%, #081410 55%, rgba(57,255,20,.11) 56.5%, #0a190f 58%, #050b08 100%); } .cn-env-back::before { content: ""; position: absolute; inset: 57% 0 0 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 7.5%), linear-gradient(180deg, transparent, rgba(0,0,0,.55)); } @keyframes cn-scene-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Character row on stage */ .cn-chars { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 48px; flex-wrap: wrap; } .cn-char { display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all .35s ease; filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)); } .cn-char.dim { opacity: 0.45; transform: scale(0.88); } .cn-char.active { opacity: 1; transform: scale(1.08) translateY(-6px); filter: drop-shadow(0 0 18px rgba(0, 230, 255, .55)) drop-shadow(0 12px 24px rgba(0, 0, 0, .7)); } .cn-char-sprite { width: 130px; height: 174px; position: relative; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; } .cn-char-sprite .char-polished { max-width: none; width: 126px; height: 162px; } .cn-char-name { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: #c8e8f0; white-space: nowrap; } .cn-char.active .cn-char-name { color: #00e6ff; text-shadow: 0 0 8px rgba(0, 230, 255, .6); } .cn-char-role { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #5fa8c4; white-space: nowrap; } /* Pressure indicators. Collapsed dots → expanded panel */ .cn-pressure { position: absolute; top: 12px; right: 16px; z-index: 4; } .cn-pressure-toggle { appearance: none; background: rgba(0,0,0,.55); border: 1px solid var(--panel-edge); border-radius: 999px; padding: 6px 10px; display: flex; gap: 6px; align-items: center; cursor: pointer; } .cn-pressure-toggle:hover { border-color: var(--accent); } .cn-press-dot { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; background: rgba(0,0,0,.4); border: 1px solid; transition: border-color .4s ease, box-shadow .4s ease; } .cn-press-dot.good { border-color: var(--accent-2); box-shadow: 0 0 6px rgba(127,255,92,.25); } .cn-press-dot.mid { border-color: var(--accent-3); box-shadow: 0 0 6px rgba(255,209,102,.25); } .cn-press-dot.bad { border-color: var(--danger); box-shadow: 0 0 10px rgba(255,90,78,.45); animation: cn-press-pulse 1.4s ease-in-out infinite; } @keyframes cn-press-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } .cn-pressure-panel { background: rgba(8, 14, 22, .95); border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; min-width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,.7); } .cn-pressure-h { display: flex; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--accent); margin-bottom: 8px; text-transform: uppercase; } .cn-pressure-close { margin-left: auto; appearance: none; background: transparent; border: 0; color: var(--ink-dim); cursor: pointer; font-size: 14px; } .cn-press-row { display: grid; grid-template-columns: 16px 1fr 100px 60px; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; } .cn-press-icon { font-size: 14px; } .cn-press-label { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink); } .cn-press-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; } .cn-press-fill { height: 100%; transition: width .4s ease; } .cn-press-fill.good { background: var(--accent-2); } .cn-press-fill.mid { background: var(--accent-3); } .cn-press-fill.bad { background: var(--danger); } .cn-press-val { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-dim); text-align: right; } /* Dialogue panel. Visual novel style */ .cn-dialogue { position: relative; background: linear-gradient(180deg, rgba(0,20,30,.85), rgba(0,12,20,.95)); border-top: 2px solid #00e6ff; padding: 16px 28px 18px; min-height: 130px; z-index: 3; box-shadow: 0 -8px 24px rgba(0,0,0,.6); animation: cn-dialogue-in .25s ease-out; flex-shrink: 0; } @keyframes cn-dialogue-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .cn-speaker { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #00e6ff; text-transform: uppercase; margin-bottom: 6px; } .cn-speaker-role { color: #5fa8c4; font-weight: 400; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; } .cn-line { font-size: 16px; line-height: 1.55; color: #e8f4f8; font-style: italic; } .cn-continue { position: absolute; right: 22px; bottom: 12px; appearance: none; background: transparent; color: #00e6ff; border: 1px solid rgba(0, 230, 255, .4); padding: 4px 14px; border-radius: 8px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: lowercase; cursor: pointer; animation: cn-continue-pulse 1.6s ease-in-out infinite; transition: all .15s; } .cn-continue:hover { background: rgba(0, 230, 255, .12); border-color: #00e6ff; } @keyframes cn-continue-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .cn-choices { margin-top: 12px; } .cn-choices-h { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .14em; color: #5fa8c4; text-transform: uppercase; margin-bottom: 6px; } .cn-choice { appearance: none; display: block; width: 100%; text-align: left; background: rgba(0, 230, 255, .04); border: 1px solid rgba(0, 230, 255, .25); color: #e8f4f8; padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all .12s; font-family: inherit; font-size: 14px; line-height: 1.45; } .cn-choice:hover { background: rgba(0, 230, 255, .12); border-color: #00e6ff; transform: translateX(4px); } .cn-choice-quote { font-style: italic; } /* TRIAGE PHASE. Multi-thread triage screen */ .case-narrative.triage { overflow: auto; } .cn-triage-body { padding: 24px 30px; display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; width: 100%; } .cn-triage-h { text-align: center; margin-bottom: 4px; } .cn-triage-title { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; margin-bottom: 4px; } .cn-triage-sub { font-size: 13.5px; color: var(--ink-dim); line-height: 1.6; max-width: 640px; margin: 0 auto; } .cn-thread-list { display: flex; flex-direction: column; gap: 12px; } .cn-thread { background: rgba(0,0,0,.4); border: 1px solid var(--panel-edge); border-radius: 12px; padding: 14px 16px; transition: border-color .2s; } .cn-thread.assigned { border-color: rgba(0, 230, 255, .4); background: rgba(0, 230, 255, .04); } .cn-thread.urg-high { border-left: 3px solid var(--danger); } .cn-thread.urg-med { border-left: 3px solid var(--accent-3); } .cn-thread.urg-low { border-left: 3px solid var(--accent-2); } .cn-thread-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .cn-urg-dot { font-size: 10px; } .cn-urg-dot.urg-high { color: var(--danger); animation: cn-press-pulse 1.4s ease-in-out infinite; } .cn-urg-dot.urg-med { color: var(--accent-3); } .cn-urg-dot.urg-low { color: var(--accent-2); } .cn-thread-title { font-size: 15px; font-weight: 700; color: var(--ink); } .cn-thread-num { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-dim); } .cn-thread-summary { font-size: 13px; color: var(--ink-dim); line-height: 1.55; margin-bottom: 12px; } .cn-mode-row { display: flex; gap: 8px; flex-wrap: wrap; } .cn-mode { appearance: none; flex: 1; min-width: 150px; background: rgba(0,0,0,.4); border: 1px solid var(--panel-edge); color: var(--ink); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12.5px; display: flex; align-items: center; gap: 6px; transition: all .15s; } .cn-mode:hover:not(:disabled) { background: rgba(255,255,255,.04); } .cn-mode:disabled { opacity: 0.4; cursor: not-allowed; } .cn-mode.active { box-shadow: 0 0 0 2px currentColor inset; } .cn-mode-deep.active { color: var(--accent); border-color: var(--accent); background: rgba(0,230,255,.08); } .cn-mode-quick.active { color: var(--accent-3); border-color: var(--accent-3); background: rgba(255,209,102,.08); } .cn-mode-delegate.active { color: var(--accent-2); border-color: var(--accent-2); background: rgba(127,255,92,.08); } .cn-mode-icon { font-size: 14px; } .cn-mode-tag { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .06em; font-weight: 700; } .cn-mode-lieut { font-size: 10px; color: var(--ink-dim); margin-left: 4px; } .cn-mode-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.45); border: 1px solid currentColor; } .cn-mode-badge.cn-mode-deep { color: var(--accent); } .cn-mode-badge.cn-mode-quick { color: var(--accent-3); } .cn-mode-badge.cn-mode-delegate { color: var(--accent-2); } .cn-triage-foot { display: flex; justify-content: center; margin-top: 8px; } /* REVEAL PHASE. Post-mortem screen */ .case-narrative.reveal { overflow: auto; } .cn-reveal-body { padding: 28px 32px; max-width: 880px; margin: 0 auto; width: 100%; } .cn-reveal-block { background: rgba(0,0,0,.35); border: 1px solid var(--danger); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; } .cn-reveal-block.your-run { border-color: var(--accent-2); background: rgba(127,255,92,.05); } .cn-reveal-h { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em; color: var(--danger); text-transform: uppercase; margin-bottom: 8px; } .cn-reveal-text { margin: 0 0 10px; font-size: 13.5px; line-height: 1.7; color: var(--ink); } .cn-reveal-cost { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink); padding: 8px 10px; background: rgba(0,0,0,.3); border-left: 2px solid var(--accent-3); margin-bottom: 12px; } .cn-reveal-lessons-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--danger); margin-bottom: 6px; margin-top: 8px; } .cn-reveal-lessons { margin: 0; padding-left: 20px; color: var(--ink); font-size: 12.5px; line-height: 1.7; } .cn-reveal-lessons li { margin-bottom: 4px; } .cn-history-list { display: flex; flex-direction: column; gap: 10px; } .cn-history-row { padding: 10px 12px; background: rgba(0,0,0,.35); border: 1px solid var(--panel-edge); border-radius: 8px; } .cn-history-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .cn-history-phase { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; } .cn-history-mode { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.4); } .cn-history-mode.cn-mode-deep { color: var(--accent); } .cn-history-mode.cn-mode-quick { color: var(--accent-3); } .cn-history-mode.cn-mode-delegate { color: var(--accent-2); } .cn-history-thread { font-size: 12.5px; color: var(--ink-dim); margin-bottom: 4px; } .cn-history-choice { font-size: 13.5px; color: var(--ink); font-style: italic; line-height: 1.5; } .cn-history-narr { margin-top: 4px; font-size: 12px; color: var(--ink-dim); line-height: 1.5; } .cn-reveal-cta { display: flex; gap: 10px; justify-content: center; margin-top: 16px; } /* ══════════════════════════════════════════════════════════════ CINEMATIC LAYER. Shared by Signal Chamber + CaseNarrative ────────────────────────────────────────────────────────────── This is the "make it feel alive" pass. Animations layered on top of the existing story-* and cn-* primitives: • Typewriter caret + pending state • Character idle breathing • Active speaker emphasis (glow pulse, head bob) • Animated SpeakingDots above the active character • Camera pan toward active speaker • Staggered choice reveal • Ambient drifting particles in the environment • Decision-mode emphasis (scene slowdown feel) • Cinema-cut overlay (phase transitions) ══════════════════════════════════════════════════════════════ */ /* ── Typewriter ──────────────────────────────────────────────── */ .typewriter { display: inline; cursor: pointer; } .typewriter.typing .tw-caret { display: inline-block; margin-left: 1px; color: var(--accent); animation: tw-blink 0.85s steps(1) infinite; font-weight: 400; opacity: .8; transform: translateY(-1px); } @keyframes tw-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Continue button while typewriter still typing. Visually subdued so it doesn't pull attention but still clickable to skip+advance. */ .story-continue.pending, .cn-continue.pending { opacity: 0.18; pointer-events: auto; animation: none; transform: scale(0.94); } .story-continue.pending:hover, .cn-continue.pending:hover { opacity: 0.35; } /* Choices hidden until the dialogue line completes, then stagger-in. */ .story-choices.pending, .cn-choices.pending { opacity: 0; transform: translateY(8px); pointer-events: none; } .story-choices.revealed, .cn-choices.revealed { opacity: 1; transform: translateY(0); transition: opacity .35s ease-out, transform .35s ease-out; } .story-choices.revealed .story-choice, .cn-choices.revealed .cn-choice { animation: choice-pop .35s cubic-bezier(.2, .8, .3, 1) backwards; } @keyframes choice-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Speaking indicator dots ─────────────────────────────────── */ .speaking-dots { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px 10px; background: rgba(0, 230, 255, .14); border: 1px solid rgba(0, 230, 255, .45); border-radius: 14px; box-shadow: 0 0 14px rgba(0, 230, 255, .35); z-index: 5; animation: dots-pop .25s ease-out backwards; } @keyframes dots-pop { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .speaking-dots::after { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(45deg); width: 6px; height: 6px; background: rgba(0, 230, 255, .14); border-right: 1px solid rgba(0, 230, 255, .45); border-bottom: 1px solid rgba(0, 230, 255, .45); } .speaking-dots span { width: 5px; height: 5px; border-radius: 50%; background: #00e6ff; box-shadow: 0 0 6px rgba(0, 230, 255, .8); animation: speak-bounce 1.1s ease-in-out infinite; } .speaking-dots span:nth-child(2) { animation-delay: .18s; } .speaking-dots span:nth-child(3) { animation-delay: .36s; } @keyframes speak-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.55; } 30% { transform: translateY(-4px); opacity: 1; } } /* Make the character containers positioning-relative so dots can sit above the sprite. */ .story-char, .cn-char { position: relative; } /* ── Character idle breathing. Every character, very subtle ── */ .story-char-sprite, .cn-char-sprite { animation: char-idle-breath 4.8s ease-in-out infinite; transform-origin: 50% 80%; will-change: transform; } .story-char.dim .story-char-sprite, .cn-char.dim .cn-char-sprite { animation: char-idle-breath 6.4s ease-in-out infinite; } @keyframes char-idle-breath { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.5px) scale(1.012); } } /* Active speaker. Gentle bob + glow pulse layered on top of the existing .active/.dim transform state. */ .story-char.active .story-char-sprite, .cn-char.active .cn-char-sprite { animation: char-active-bob 2.4s ease-in-out infinite; } @keyframes char-active-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.02); } } /* While actively speaking. Head tilt animation drives a "talking" feel */ .story-char.speaking .story-char-sprite, .cn-char.speaking .cn-char-sprite { animation: char-speaking 0.45s ease-in-out infinite; } @keyframes char-speaking { 0%, 100% { transform: translateY(-3px) scale(1.02) rotate(0deg); } 50% { transform: translateY(-4px) scale(1.02) rotate(-0.8deg); } } /* State-specific acting for scenario casts. These sit on the sprite wrapper so the generated pixel frame changes and the stage motion agree. */ .story-char[data-anim="urgent"] .story-char-sprite, .cn-char[data-anim="urgent"] .cn-char-sprite { animation: char-urgent-act .55s cubic-bezier(.2,.8,.3,1) infinite; } .story-char[data-anim="frustrated"] .story-char-sprite, .cn-char[data-anim="frustrated"] .cn-char-sprite { animation: char-frustrated-act .42s steps(2) infinite; } .story-char[data-anim="concerned"] .story-char-sprite, .cn-char[data-anim="concerned"] .cn-char-sprite { animation: char-concerned-act 3.8s ease-in-out infinite; } .story-char[data-anim="thinking"] .story-char-sprite, .cn-char[data-anim="thinking"] .cn-char-sprite { animation: char-thinking-act 4.6s ease-in-out infinite; } .story-char[data-anim="confident"] .story-char-sprite, .cn-char[data-anim="confident"] .cn-char-sprite, .story-char[data-anim="agreeing"] .story-char-sprite, .cn-char[data-anim="agreeing"] .cn-char-sprite { animation: char-confident-act 2.8s ease-in-out infinite; } .story-char[data-anim="urgent"] .char-polished, .cn-char[data-anim="urgent"] .char-polished, .story-char[data-anim="frustrated"] .char-polished, .cn-char[data-anim="frustrated"] .char-polished { filter: drop-shadow(0 0 9px rgba(255,90,78,.65)); } .story-char[data-anim="confident"] .char-polished, .cn-char[data-anim="confident"] .char-polished, .story-char[data-anim="agreeing"] .char-polished, .cn-char[data-anim="agreeing"] .char-polished { filter: drop-shadow(0 0 9px rgba(127,255,92,.48)); } @keyframes char-urgent-act { 0%, 100% { transform: translateY(-4px) scale(1.035) rotate(-.6deg); } 50% { transform: translateY(-7px) scale(1.055) rotate(.7deg); } } @keyframes char-frustrated-act { 0%, 100% { transform: translateX(-1px) translateY(-3px) scale(1.015); } 50% { transform: translateX(1px) translateY(-4px) scale(1.025); } } @keyframes char-concerned-act { 0%, 100% { transform: translateY(1px) scale(.992); } 50% { transform: translateY(0) scale(1.006); } } @keyframes char-thinking-act { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-2px) rotate(.8deg); } } @keyframes char-confident-act { 0%, 100% { transform: translateY(-2px) scale(1.02); } 50% { transform: translateY(-5px) scale(1.04); } } /* Active speaker glow ring around sprite */ .story-char.active::before, .cn-char.active::before { content: ""; position: absolute; inset: -8px -8px 28px -8px; border-radius: 50%; background: radial-gradient(ellipse 60% 50% at 50% 80%, rgba(0, 230, 255, .25), transparent 70%); pointer-events: none; animation: speaker-glow-pulse 2.4s ease-in-out infinite; z-index: -1; } @keyframes speaker-glow-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1.0; transform: scale(1.08); } } /* ── Camera pan. Translate the whole char row toward speaker ── */ .story-camera, .cn-camera { transition: transform .55s cubic-bezier(.2, .8, .3, 1); transform: translate3d(var(--pan-x, 0px), 0, 0); will-change: transform; } /* ── Ambient particles drifting upward through the env ─────── */ .story-particles, .cn-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .story-particle, .cn-particle { position: absolute; bottom: -8px; width: 3px; height: 3px; border-radius: 50%; background: rgba(0, 230, 255, .5); box-shadow: 0 0 6px rgba(0, 230, 255, .6); animation: particle-drift 6s linear infinite; opacity: 0; } .signal-chamber.story[data-env="war-room"] .story-particle, .case-narrative[data-env="war-room"] .cn-particle { background: rgba(0, 230, 255, .55); box-shadow: 0 0 7px rgba(0, 230, 255, .65); } .signal-chamber.story[data-env="executive-office"] .story-particle, .case-narrative[data-env="executive-office"] .cn-particle { background: rgba(255, 180, 80, .45); box-shadow: 0 0 7px rgba(255, 180, 80, .55); } .signal-chamber.story[data-env="press-room"] .story-particle, .case-narrative[data-env="press-room"] .cn-particle { background: rgba(255, 255, 255, .35); box-shadow: 0 0 6px rgba(255, 255, 255, .35); } .signal-chamber.story[data-env="soc"] .story-particle, .case-narrative[data-env="soc"] .cn-particle { background: rgba(127, 255, 92, .55); box-shadow: 0 0 7px rgba(127, 255, 92, .55); } @keyframes particle-drift { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.75; } 90% { opacity: 0.75; } 100% { transform: translateY(-380px) translateX(20px); opacity: 0; } } /* ── Stage tension ambient lighting. Escalates on bad pressure ── */ .cn-stage.stage-tense .cn-env-back, .story-stage[data-tense="tense"] .story-env-back { animation: stage-urgency-pulse 1.4s ease-in-out infinite; } @keyframes stage-urgency-pulse { 0%, 100% { box-shadow: inset 0 0 80px rgba(255, 90, 78, .0); } 50% { box-shadow: inset 0 0 120px rgba(255, 90, 78, .25); } } .cn-stage.stage-tense::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,90,78,.0), rgba(255,90,78,.06)); z-index: 1; animation: stage-urgency-tint 1.4s ease-in-out infinite; } @keyframes stage-urgency-tint { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* ── Decision-mode emphasis. When a choice fires, dialogue panel grows a subtle red accent + scene tints toward urgency ── */ .story-dialogue.decision-mode, .cn-dialogue.decision-mode { border-top-color: var(--accent-3); box-shadow: 0 -8px 24px rgba(0,0,0,.6), 0 -2px 14px rgba(255,209,102,.4); animation: decision-snap .35s cubic-bezier(.2, .8, .3, 1); } @keyframes decision-snap { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-2px) scale(1.005); box-shadow: 0 -8px 24px rgba(0,0,0,.6), 0 -2px 22px rgba(255,209,102,.55); } 100% { transform: translateY(0) scale(1); } } /* ── Cinema-cut overlay. Phase transitions ────────────────── */ .cinema-cut { position: absolute; inset: 0; z-index: 99; pointer-events: none; background: rgba(0, 0, 0, .55); animation: cinema-cut-fade 1.6s ease-in-out forwards; display: flex; align-items: center; justify-content: center; } @keyframes cinema-cut-fade { 0% { opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } } .cinema-cut-bars { position: absolute; inset: 0; pointer-events: none; } .cinema-cut-bar { position: absolute; left: 0; right: 0; height: 60px; background: #000; animation: cinema-bar-slide 1.6s ease-in-out forwards; } .cinema-cut-bar.top { top: -60px; } .cinema-cut-bar.bottom { bottom: -60px; } @keyframes cinema-bar-slide { 0% { transform: translateY(0); } 18% { transform: translateY(60px); } 78% { transform: translateY(60px); } 100% { transform: translateY(0); } } .cinema-cut-bar.bottom { animation-name: cinema-bar-slide-bottom; } @keyframes cinema-bar-slide-bottom { 0% { transform: translateY(0); } 18% { transform: translateY(-60px); } 78% { transform: translateY(-60px); } 100% { transform: translateY(0); } } .cinema-cut-text { text-align: center; color: #00e6ff; font-family: "JetBrains Mono", monospace; animation: cinema-text-in 1.6s ease-out forwards; z-index: 100; } @keyframes cinema-text-in { 0% { opacity: 0; transform: translateY(10px); letter-spacing: 0; } 25% { opacity: 1; transform: translateY(0); letter-spacing: .12em; } 78% { opacity: 1; } 100% { opacity: 0; } } .cinema-cut-kicker { font-size: 11px; letter-spacing: .2em; color: var(--accent-3); margin-bottom: 6px; } .cinema-cut-title { font-size: 28px; font-weight: 700; color: #e8f4f8; letter-spacing: .04em; text-shadow: 0 0 22px rgba(0, 230, 255, .6); } .cinema-cut-subtitle { font-size: 13px; color: var(--ink-dim); margin-top: 6px; letter-spacing: .08em; } /* ── Animated scan lines drifting through environments ───── */ .signal-chamber.story[data-env="war-room"] .story-env-back::after, .case-narrative[data-env="war-room"] .cn-env-back::after { animation: scan-drift 8s linear infinite; } @keyframes scan-drift { 0% { background-position: 0 0; } 100% { background-position: 0 32px; } } /* ── Prep Room (Signal Chamber study) ────────────────────────── */ .signal-chamber.prep-room { /* same chrome as live chamber */ } .prep-tabs { display: flex; gap: 4px; margin-left: auto; margin-right: 12px; } .prep-tab { appearance: none; background: rgba(0, 230, 255, .04); border: 1px solid rgba(0, 230, 255, .2); color: #88c8d8; padding: 6px 12px; border-radius: 8px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .06em; cursor: pointer; transition: all .15s; } .prep-tab:hover { color: #c8e8f0; border-color: rgba(0, 230, 255, .4); } .prep-tab.active { background: rgba(0, 230, 255, .1); border-color: #00e6ff; color: #00e6ff; } .prep-pane { max-width: 760px; margin: 0 auto; } .prep-section-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em; color: #00e6ff; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 230, 255, .15); } .prep-empty { padding: 40px 20px; text-align: center; color: #88c8d8; font-size: 13px; background: rgba(0, 0, 0, .3); border: 1px dashed rgba(0, 230, 255, .2); border-radius: 10px; } .prep-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .prep-stat-card { padding: 12px 14px; background: rgba(0, 230, 255, .04); border: 1px solid rgba(0, 230, 255, .15); border-radius: 8px; text-align: center; } .prep-stat-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em; color: #88c8d8; margin-bottom: 4px; } .prep-stat-val { font-size: 24px; font-weight: 700; color: #c8e8f0; font-family: "JetBrains Mono", monospace; } .prep-tier-bars { display: grid; gap: 6px; } .prep-tier-row { display: grid; grid-template-columns: 30px 1fr 30px; gap: 10px; align-items: center; } .prep-tier-letter { font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 700; text-align: center; } .prep-tier-track { height: 8px; background: rgba(0, 0, 0, .5); border-radius: 999px; overflow: hidden; } .prep-tier-fill { height: 100%; border-radius: 999px; transition: width .6s ease; } .prep-tier-count { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #88c8d8; text-align: right; } .prep-meter-grid { display: grid; gap: 8px; } .prep-meter-row { display: grid; grid-template-columns: 130px 1fr 50px; gap: 10px; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 11px; color: #c8e8f0; } .prep-meter-label { color: #88c8d8; } .prep-meter-track { height: 6px; background: rgba(0, 0, 0, .5); border-radius: 999px; overflow: hidden; } .prep-meter-fill { height: 100%; border-radius: 999px; transition: width .6s ease; } .prep-meter-val { text-align: right; font-weight: 700; } .prep-archive-list { display: grid; gap: 8px; } .prep-archive-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(0, 230, 255, .03); border: 1px solid rgba(0, 230, 255, .15); border-radius: 8px; } .prep-archive-title { font-size: 13.5px; font-weight: 600; color: #c8e8f0; } .prep-archive-source { font-size: 10px; letter-spacing: .08em; color: var(--accent-3); font-family: "JetBrains Mono", monospace; } .prep-archive-played { font-size: 10px; color: #88c8d8; font-family: "JetBrains Mono", monospace; } .prep-archive-industry { font-size: 11.5px; color: #88c8d8; margin-top: 2px; } .prep-archetype-card { padding: 18px 22px; background: linear-gradient(135deg, rgba(0,230,255,.06), rgba(127,255,92,.04)); border: 1px solid #00e6ff; border-radius: 12px; } .prep-pattern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .prep-pattern-card { padding: 12px 14px; background: rgba(0, 0, 0, .35); border: 1px solid; border-radius: 8px; } .prep-pattern-card.pos { border-color: var(--accent-2); } .prep-pattern-card.neg { border-color: var(--accent-3); } .prep-pattern-h { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em; color: #88c8d8; } .prep-pattern-val { font-size: 18px; font-weight: 700; color: #c8e8f0; margin: 4px 0; } .prep-pattern-note { font-size: 11px; color: #88c8d8; line-height: 1.5; } .prep-recommend { padding: 14px 16px; background: rgba(0, 230, 255, .04); border: 1px solid rgba(0, 230, 255, .25); border-radius: 10px; font-size: 13px; color: #c8e8f0; line-height: 1.6; } .prep-guide-block { margin-bottom: 18px; padding: 14px 16px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(0, 230, 255, .15); border-radius: 8px; } .prep-guide-block h4 { margin: 0 0 8px; color: #00e6ff; font-size: 14px; letter-spacing: .04em; } .prep-guide-block p, .prep-guide-block ul { margin: 4px 0; color: #c8e8f0; font-size: 13px; line-height: 1.6; } /* Dossier tabs */ .dossier-tabs { display: flex; gap: 4px; margin-left: auto; margin-right: 12px; } .dossier-tab { appearance: none; background: rgba(0,0,0,.25); border: 1px solid var(--panel-edge); color: var(--ink-dim); padding: 6px 12px; border-radius: 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .04em; cursor: pointer; transition: all .15s; } .dossier-tab:hover { color: var(--ink); border-color: rgba(255,255,255,.18); } .dossier-tab.active { background: rgba(57,255,20,.1); border-color: var(--accent); color: var(--accent); } /* Glossary tab */ .glossary { display: flex; flex-direction: column; gap: 14px; min-height: 460px; } .glossary-search { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(0,0,0,.25); border: 1px solid var(--panel-edge); border-radius: 10px; } .glossary-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--ink); font-family: "JetBrains Mono", monospace; font-size: 13px; } .glossary-search input::placeholder { color: var(--ink-dim); } .glossary-count { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-dim); } .glossary-body { display: flex; flex-direction: column; gap: 18px; max-height: 440px; overflow-y: auto; padding-right: 8px; } .glossary-body::-webkit-scrollbar { width: 8px; } .glossary-body::-webkit-scrollbar-track { background: transparent; } .glossary-body::-webkit-scrollbar-thumb { background: rgba(127,255,92,.18); border-radius: 4px; } .glossary-group-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--panel-edge); } .glossary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; } .glossary-item { padding: 10px 12px; background: rgba(0,0,0,.2); border: 1px solid var(--panel-edge); border-radius: 8px; transition: border-color .12s; } .glossary-item:hover { border-color: var(--accent-2); } .glossary-item .g-term { font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 600; color: var(--accent); margin-bottom: 4px; letter-spacing: .02em; } .glossary-item .g-def { font-size: 12.5px; line-height: 1.5; color: var(--ink); } .glossary-item .g-eg { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--ink-dim); font-style: italic; } .glossary-empty { text-align: center; padding: 40px; color: var(--ink-dim); font-size: 13px; } /* ── Title screen ───────────────────────────────────────────── */ .title-wrap { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, var(--bg-2), var(--bg)); z-index: 200; animation: fade-in .25s ease-out; } .title-card { text-align: center; max-width: 560px; padding: 32px; } .title-logo { width: 96px; height: 96px; margin: 0 auto 20px; background: var(--accent); border-radius: 18px; display: grid; place-items: center; color: #000; font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: 56px; box-shadow: 0 0 0 6px var(--bg-2), 0 0 40px var(--accent); } .title-card h1 { font-size: 52px; margin: 0 0 4px; letter-spacing: -.02em; font-weight: 700; } .title-card .tag { color: var(--accent); font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; } .title-card p { color: var(--ink-dim); font-size: 15px; line-height: 1.6; margin-bottom: 28px; text-wrap: pretty; } /* Day/night sky tint over the world */ .sky-tint { position: absolute; inset: 0; pointer-events: none; z-index: 5; mix-blend-mode: multiply; transition: background .8s ease; } body:not(.night) .sky-tint { background: transparent; } body.night .sky-tint { background: linear-gradient(180deg, rgba(20,30,60,.45), rgba(10,20,40,.45)); } /* Window "light" through office windows */ .window-light { position: absolute; pointer-events: none; border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%; filter: blur(20px); opacity: .35; transition: opacity .8s, background .8s; } body:not(.night) .window-light { background: #fff8d6; } body.night .window-light { background: #5ac8ff; opacity: .22; } body[data-palette="neon"]:not(.night) .window-light { background: #ffc1f2; opacity: .35; } body[data-palette="crt"] .window-light { background: var(--accent); opacity: .15; } /* Tiny floating dust particles for atmosphere */ .dust { position: absolute; inset: 0; pointer-events: none; z-index: 10; } .dust span { position: absolute; width: 2px; height: 2px; background: var(--accent); border-radius: 50%; opacity: 0; animation: dust 6s linear infinite; box-shadow: 0 0 4px var(--accent); } @keyframes dust { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .35; } 90% { opacity: .35; } 100% { transform: translateY(-300px); opacity: 0; } } /* ══════════════════════════════════════════════════════════════ ACCESSIBILITY LAYER ────────────────────────────────────────────────────────────── Production-quality a11y primitives: • prefers-reduced-motion → disable all decorative animations, cap transitions, kill character bobbing + particle drift + speaker glow pulses + cinema-cut motion • :focus-visible rings on every interactive element so keyboard users always see where focus is • aria-hidden helpers (.sr-only) for screen reader text • visible button label fallback when icon-only ══════════════════════════════════════════════════════════════ */ /* ── Reduced-motion safe defaults ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Kill every keyframe animation across the platform. The vestibular systems that need this don't care about the bob. They need it gone. */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Preserve essential UI feedback (focus rings still need their fade-in), but cut decorative motion entirely. */ .speaking-dots, .cn-particle, .story-particle, .cn-particles, .story-particles, .tw-caret, .cinema-cut, .cinema-cut-bars, .cinema-cut-bar, .cinema-cut-text { animation: none !important; opacity: 1 !important; } /* Particles + caret are decorative. Hide entirely in reduced-motion. */ .cn-particle, .story-particle, .tw-caret { display: none !important; } /* Character idle/bob/speaking. Flatten to static "alive" pose. */ .story-char-sprite, .cn-char-sprite { transform: none !important; } /* Cinema cut still needs to be visible as a flash, but no slide. */ .cinema-cut-bar { transform: none !important; } } /* ── Keyboard focus ring. Visible on EVERY interactive element ── */ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 230, 255, .25); border-radius: 4px; } /* Don't show the legacy 3px Chrome outline */ button:focus:not(:focus-visible), input:focus:not(:focus-visible) { outline: none; } /* Story-mode + case-narrative choice cards. Make focus state obvious */ .story-choice:focus-visible, .cn-choice:focus-visible, .cn-mode:focus-visible, .csv2-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: inset 0 0 0 1px var(--accent), 0 0 12px rgba(0, 230, 255, .35); transform: translateX(4px); } /* ── Screen-reader-only utility ──────────────────────────────── */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Higher-contrast adjustments at user request ─────────────── */ @media (prefers-contrast: more) { :root { --ink: #ffffff; --ink-dim: #cfe5cc; --panel-edge: rgba(127, 255, 92, 0.55); } .cn-choice, .story-choice, .csv2-choice { border-width: 2px !important; } } /* ── Reduced motion ────────────────────────────────────────────── Honour the OS "reduce motion" setting: collapse decorative CSS animations + transitions (idle bobs, pulses, marker float, modal fades). JS-driven walk frames still advance, but the constant ambient motion that can trigger vestibular discomfort is removed. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .npc .char-polished, .player .char-polished, .player-pulse, .player-marker { animation: none !important; } } /* ── Keyboard focus visibility ─────────────────────────────────── Mouse users see nothing extra; keyboard users get a clear, themed focus ring on every interactive control. :focus-visible only fires for keyboard / programmatic focus, so it never flashes on click. */ .btn:focus-visible, button:focus-visible, .minimap:focus-visible, [role="button"]:focus-visible, a:focus-visible, .cn-choice:focus-visible, .story-choice:focus-visible, .csv2-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ── Decor layout editor ─────────────────────────────────────────── */ .dec-catch { position: absolute; left: 0; top: 0; z-index: 5000; cursor: crosshair; background: repeating-linear-gradient(0deg, rgba(120,220,255,.05) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(120,220,255,.05) 0 1px, transparent 1px 64px); } .dec-pin { position: absolute; z-index: 5001; transform: translate(-50%, -50%); display: grid; place-items: center; cursor: grab; touch-action: none; } .dec-pin:active { cursor: grabbing; } .dec-pin-dot { width: 16px; height: 16px; border-radius: 999px; background: rgba(57,255,20,.25); border: 2px solid #39ff14; box-shadow: 0 0 6px rgba(57,255,20,.6); } .dec-pin:hover .dec-pin-dot { background: rgba(57,255,20,.5); } .dec-pin.sel .dec-pin-dot { width: 22px; height: 22px; background: rgba(255,210,80,.35); border-color: #ffd24a; box-shadow: 0 0 10px rgba(255,210,80,.8); } .dec-pin-label { position: absolute; top: -22px; white-space: nowrap; font: 700 11px/1 "JetBrains Mono", monospace; color: #ffd24a; background: rgba(8,12,8,.9); padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(255,210,80,.5); } .dec-editor { position: fixed; left: 12px; top: 84px; z-index: 10000; width: 264px; max-height: calc(100vh - 200px); overflow: auto; background: rgba(10,14,18,.96); color: #d8e0e8; border: 1px solid rgba(57,255,20,.4); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.55); padding: 12px; font-family: system-ui, sans-serif; font-size: 12px; backdrop-filter: blur(4px); } .dec-ed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dec-ed-head b { color: #39ff14; font-size: 13px; letter-spacing: .02em; } .dec-ed-x { background: none; border: 1px solid rgba(255,255,255,.18); color: #cdd5dd; border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 11px; } .dec-ed-x:hover { border-color: #39ff14; color: #39ff14; } .dec-ed-help { color: #8a96a2; line-height: 1.4; margin-bottom: 10px; } .dec-ed-help kbd { background: rgba(255,255,255,.1); border-radius: 3px; padding: 0 4px; font-family: "JetBrains Mono", monospace; font-size: 10px; } .dec-ed-sel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 8px; margin-bottom: 10px; } .dec-ed-sel.dim { color: #6a7682; text-align: center; } .dec-ed-info { margin-bottom: 8px; } .dec-ed-info b { color: #5fe0ff; } .dec-ed-btns { display: flex; flex-wrap: wrap; gap: 6px; } .dec-editor .btn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #d8e0e8; border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 11px; font-family: inherit; } .dec-editor .btn:hover { border-color: #39ff14; color: #39ff14; } .dec-editor .btn.danger:hover { border-color: #ff5a4e; color: #ff5a4e; } .dec-ed-palette { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 10px; } .dec-ed-lbl { color: #8a96a2; } .dec-ed-chip { background: rgba(95,224,255,.08); border: 1px solid rgba(95,224,255,.3); color: #aee6ff; border-radius: 999px; padding: 3px 8px; cursor: pointer; font-size: 10px; font-family: "JetBrains Mono", monospace; } .dec-ed-chip:hover { background: rgba(95,224,255,.22); } .dec-ed-foot { display: flex; align-items: center; gap: 6px; } .dec-ed-count { margin-left: auto; color: #6a7682; font-size: 10px; } .dec-ed-export { margin-top: 10px; } .dec-ed-export-head { color: #8a96a2; font-size: 10px; margin-bottom: 4px; } .dec-ed-export-head button { background: none; border: none; color: #5fe0ff; cursor: pointer; text-decoration: underline; font-size: 10px; } .dec-ed-export textarea { width: 100%; height: 120px; resize: vertical; background: #05080a; color: #9fd0a0; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 6px; font-family: "JetBrains Mono", monospace; font-size: 10px; } /* edit-mode toggle button lit state */ .btn.edit-btn.active { border-color: #39ff14; color: #39ff14; box-shadow: 0 0 10px rgba(57,255,20,.4); } /* ── Phishing comedy-story flagship ──────────────────────────────── */ .phish-story .scn-grid.phish-triage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 920px; margin: 14px auto 0; padding: 0 16px; } .phish-story .scn-card { transition: border-color .15s, box-shadow .15s; } .phish-story .scn-card.correct { border-color: #39ff14; box-shadow: 0 0 0 1px rgba(57,255,20,.4) inset; } .phish-story .scn-card.wrong { border-color: #ff5a4e; box-shadow: 0 0 0 1px rgba(255,90,78,.4) inset; } .phish-verdict { margin-top: 10px; text-align: center; font-weight: 700; font-family: "JetBrains Mono", monospace; font-size: 13px; padding: 6px; border-radius: 6px; } .phish-verdict.ok { color: #39ff14; background: rgba(57,255,20,.1); } .phish-verdict.bad { color: #ff5a4e; background: rgba(255,90,78,.1); } .phish-foot { display: flex; justify-content: center; margin: 16px 0 8px; } .phish-bec { max-width: 620px; margin: 4px auto 0; padding: 0 16px; } .phish-bec .email-preview { border: 1px solid rgba(255,90,78,.4); border-radius: 10px; box-shadow: 0 0 16px rgba(255,90,78,.15); } .phish-options { max-width: 620px; margin: 14px auto 0; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; } .phish-opt { text-align: left; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: #e6ecf2; cursor: pointer; font-size: 14px; line-height: 1.4; font-family: inherit; transition: border-color .15s, background .15s; } .phish-opt:hover { border-color: var(--accent); background: rgba(57,255,20,.08); } .phish-outcome { max-width: 620px; margin: 14px auto 0; padding: 14px 16px; background: rgba(0,0,0,.3); border-radius: 12px; text-align: center; } .phish-outcome p { color: #cdd5dd; line-height: 1.5; font-size: 14px; margin: 8px 0 14px; } .phish-outcome-tag { display: inline-block; font-weight: 800; letter-spacing: .04em; font-family: "JetBrains Mono", monospace; font-size: 13px; padding: 4px 12px; border-radius: 999px; } .phish-outcome-tag.ok { color: #39ff14; background: rgba(57,255,20,.12); } .phish-outcome-tag.bad { color: #ff5a4e; background: rgba(255,90,78,.12); } .phish-result { max-width: 560px; margin: 24px auto 0; padding: 24px; text-align: center; } .phish-result-grade { font-family: "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--accent); font-size: 14px; text-transform: uppercase; } .phish-result-score { font-size: 56px; font-weight: 800; color: #fff; line-height: 1.1; margin: 6px 0; } .phish-result-score span { font-size: 26px; color: var(--ink-dim); font-weight: 600; } .phish-result-sub { color: var(--ink-dim); font-size: 13px; margin-bottom: 18px; } .phish-result-rules { text-align: left; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; } .phish-result-rules div { color: #cdd5dd; font-size: 13.5px; line-height: 1.7; } .phish-result-btns { display: flex; gap: 10px; justify-content: center; } /* ── VerdictScreen: in-character debrief + per-item review ────────── */ .verdict-debrief { text-align: left; margin: 16px auto 4px; max-width: 560px; background: rgba(57,255,20,.06); border: 1px solid rgba(57,255,20,.25); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 14px; } .verdict-debrief .vd-speaker { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .04em; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; } .verdict-debrief .vd-role { color: var(--ink-dim); font-weight: 500; } .verdict-debrief .vd-line { color: var(--ink); font-size: 14px; line-height: 1.5; font-style: italic; margin-top: 4px; } .verdict-review { text-align: left; margin: 14px auto 4px; max-width: 560px; } .verdict-review .vr-h { font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; } .verdict-review .vr-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 8px; margin-bottom: 6px; background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); } .verdict-review .vr-row.ok { border-left: 3px solid var(--accent); } .verdict-review .vr-row.bad { border-left: 3px solid var(--danger); } .verdict-review .vr-mark { flex-shrink: 0; font-weight: 800; font-size: 14px; line-height: 1.5; } .verdict-review .vr-row.ok .vr-mark { color: var(--accent); } .verdict-review .vr-row.bad .vr-mark { color: var(--danger); } .verdict-review .vr-label { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink); margin-bottom: 2px; } .verdict-review .vr-detail { font-size: 13px; line-height: 1.45; color: var(--ink-dim); } /* ── Story-chapter drill shell (interactive drill after the intro) ── */ .story-drill-shell { max-width: 860px; margin: 0 auto; padding: 18px 22px 28px; min-height: 100%; } .story-drill-chip { font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(57,255,20,.3); background: rgba(57,255,20,.06); border-radius: 999px; padding: 5px 10px; display: inline-block; margin-bottom: 14px; } /* ── The IT Caller: interactive real-time scenario ──────────────────── */ .itc { max-width: 900px; margin: 0 auto; padding: 0 8px 24px; } .itc-call { border: 1px solid rgba(255,90,78,.45); background: rgba(255,90,78,.06); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; } .itc-call.hot { border-color: #ff5a4e; animation: itc-pulse 1.1s ease-in-out infinite; } .itc-call-head { display: flex; justify-content: space-between; align-items: center; font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .07em; color: #ff5a4e; margin-bottom: 9px; } .itc-timer { color: var(--ink-dim); } .itc-tension { height: 4px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-bottom: 11px; } .itc-tension-fill { height: 100%; background: linear-gradient(90deg, #39ff14, #ffd166, #ff5a4e); transition: width 1s linear; } .itc-call-line { font-size: 15px; line-height: 1.5; color: var(--ink); } .itc-maya { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; padding: 8px 12px; background: rgba(95,224,255,.05); border-left: 3px solid #5fe0ff; border-radius: 8px; } .itc-maya-av { width: 40px; height: 52px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; } .itc-maya-av svg, .itc-maya-av img, .itc-maya-av canvas { width: 40px; height: auto; } .itc-maya-line { font-size: 13.5px; font-style: italic; color: #aee6ff; line-height: 1.45; } .itc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } @media (max-width: 640px) { .itc-cols { grid-template-columns: 1fr; } } .itc-panel { background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); border-radius: 10px; padding: 12px; } .itc-h { font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 10px; } .itc-act { display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 9px 11px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: var(--ink); cursor: pointer; font-size: 13px; font-family: inherit; line-height: 1.35; } .itc-act:hover { border-color: var(--accent); background: rgba(57,255,20,.08); } .itc-act.done { color: var(--accent); border-color: rgba(57,255,20,.3); background: rgba(57,255,20,.06); cursor: default; } .itc-note { font-size: 13px; line-height: 1.45; margin-bottom: 8px; } .itc-note.flag { color: #ffcf66; } .itc-note.dim { color: var(--ink-dim); font-style: italic; } .itc-decide { border-top: 1px solid var(--panel-edge); padding-top: 14px; } .itc-decide-label { display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 10px; } .itc-decide-btns { display: flex; gap: 8px; flex-wrap: wrap; } .itc-dec { flex: 1; min-width: 170px; padding: 11px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: var(--ink); cursor: pointer; font-size: 13px; font-family: inherit; } .itc-dec:hover { border-color: var(--accent); color: var(--accent); } .itc-dec.danger:hover { border-color: #ff5a4e; color: #ff5a4e; } .itc-act.fresh { border-color: var(--accent); color: var(--accent); background: rgba(57,255,20,.1); animation: itc-fresh 1s ease-in-out infinite; } @keyframes itc-fresh { 0%,100% { box-shadow: 0 0 0 rgba(57,255,20,0); } 50% { box-shadow: 0 0 12px rgba(57,255,20,.45); } } .itc-decide-locked { display: block; font-size: 12.5px; font-style: italic; color: var(--ink-dim); text-align: center; padding: 4px 0; } @keyframes itc-pulse { 0%,100% { box-shadow: 0 0 14px rgba(255,90,78,.18); } 50% { box-shadow: 0 0 26px rgba(255,90,78,.42); } } /* ── Episode engine: cold open + live feed ──────────────────────────── */ .ep-cold { text-align: center; padding: 70px 20px 90px; } .ep-cold-icon { font-size: 52px; display: inline-block; animation: ep-ring .55s ease-in-out infinite; } .ep-cold-text { font-size: 22px; color: var(--ink); margin-top: 16px; font-weight: 700; } .ep-cold-sub { color: var(--ink-dim); margin-top: 10px; font-style: italic; max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.5; } @keyframes ep-ring { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } } .ep-feed { height: 240px; overflow-y: auto; padding-right: 4px; } .ep-row { margin-bottom: 5px; font-size: 12.5px; line-height: 1.45; } .ep-row .ep-t { color: var(--ink-dim); font-family: "JetBrains Mono", monospace; font-size: 10px; margin-right: 7px; } .ep-row.caller .ep-txt { color: #ff9a8e; } .ep-row.sys .ep-txt { color: #5fe0ff; } .ep-row.you .ep-txt { color: #8effa0; } .ep-row.you .ep-txt::before { content: "You "; color: var(--ink-dim); } .ep-row.sys .ep-txt::before { content: "ALERT "; color: #5fe0ff; opacity: .7; font-size: 10px; } .ep-row.note .ep-txt { color: var(--ink-dim); font-style: italic; } /* ── Episode 1: cinematic scene ─────────────────────────────────────── */ .ep1-wrap { max-width: 920px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; } .ep1-room { display: block; width: 100%; height: 360px; object-fit: cover; background: #090d14; border-bottom: 1px solid rgba(255,255,255,.06); } /* ── The stage: room art with a live, animated cast acting on top of it ── */ .ep1-stage { position: relative; width: 100%; height: 232px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.06); } .ep1-stage .ep1-room { position: absolute; inset: 0; height: 100%; border-bottom: none; } .ep1-stage::after { /* soft footlights + vignette so the cast sits IN the room */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); } .ep1-stage.is-fail::after { background: radial-gradient(120% 90% at 50% 110%, rgba(255,42,42,.18) 0%, rgba(0,0,0,.6) 100%); } .ep1-stage.is-win::after { background: radial-gradient(120% 90% at 50% 110%, rgba(57,255,20,.12) 0%, rgba(0,0,0,.5) 100%); } .ep1-cast { position: absolute; inset: 0; pointer-events: none; } .ep1-actor { position: absolute; transform-origin: bottom center; filter: drop-shadow(0 6px 5px rgba(0,0,0,.55)); transition: left .9s cubic-bezier(.4,0,.2,1); animation: ep1-breathe 3.4s ease-in-out infinite; } .ep1-actor.a-you { animation-delay: -1.1s; } .ep1-actor.a-guide{ animation-delay: -2.2s; } .ep1-actor::after { /* contact shadow on the floor */ content: ""; position: absolute; left: 50%; bottom: -3px; width: 38px; height: 8px; transform: translateX(-50%); background: rgba(0,0,0,.45); border-radius: 50%; filter: blur(2px); z-index: -1; } .ep1-actor.speaking { filter: drop-shadow(0 0 9px rgba(255,209,102,.55)) drop-shadow(0 6px 5px rgba(0,0,0,.55)); } @keyframes ep1-breathe { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: 3px; } } .ep1-actor .char-polished { max-width: none; width: 98px; height: 126px; transform-origin: 50% 88%; will-change: transform, filter; } .ep1-actor[data-anim="urgent"] .char-polished { animation: ep1-urgent-act .48s cubic-bezier(.2,.8,.3,1) infinite; filter: drop-shadow(0 0 10px rgba(255,90,78,.7)); } .ep1-actor[data-anim="frustrated"] .char-polished { animation: ep1-frustrated-act .38s steps(2) infinite; filter: drop-shadow(0 0 9px rgba(255,90,78,.6)); } .ep1-actor[data-anim="thinking"] .char-polished { animation: ep1-thinking-act 4.2s ease-in-out infinite; } .ep1-actor[data-anim="concerned"] .char-polished { animation: ep1-concerned-act 3.6s ease-in-out infinite; filter: drop-shadow(0 0 7px rgba(255,209,102,.35)); } .ep1-actor[data-anim="confident"] .char-polished, .ep1-actor[data-anim="agreeing"] .char-polished { animation: ep1-confident-act 2.6s ease-in-out infinite; filter: drop-shadow(0 0 9px rgba(127,255,92,.45)); } @keyframes ep1-urgent-act { 0%, 100% { transform: translateY(-2px) scale(1.02) rotate(-.7deg); } 50% { transform: translateY(-6px) scale(1.05) rotate(.8deg); } } @keyframes ep1-frustrated-act { 0%, 100% { transform: translateX(-1px) translateY(-1px) scale(1.01); } 50% { transform: translateX(1px) translateY(-3px) scale(1.025); } } @keyframes ep1-thinking-act { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: translateY(-2px) rotate(.7deg); } } @keyframes ep1-concerned-act { 0%, 100% { transform: translateY(1px) scale(.99); } 50% { transform: translateY(0) scale(1.006); } } @keyframes ep1-confident-act { 0%, 100% { transform: translateY(-1px) scale(1.015); } 50% { transform: translateY(-4px) scale(1.035); } } .ep1-bubble { position: absolute; top: -14px; left: 50%; margin-left: -15px; display: flex; gap: 3px; padding: 4px 6px; background: rgba(12,16,22,.92); border: 1px solid rgba(255,209,102,.5); border-radius: 8px; } .ep1-bubble i { width: 4px; height: 4px; border-radius: 50%; background: #ffd166; animation: ep1-dot 1s infinite; } .ep1-bubble i:nth-child(2){ animation-delay: .18s; } .ep1-bubble i:nth-child(3){ animation-delay: .36s; } @keyframes ep1-dot { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } .ep1-tag { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: rgba(8,10,14,.82); padding: 3px 5px; border-radius: 4px; } /* persistent tension meter, always on top so the cast never hides it */ .ep1-meter { position: absolute; top: 12px; right: 12px; z-index: 6; min-width: 168px; padding: 8px 11px; border-radius: 9px; background: rgba(6,9,13,.82); border: 1px solid rgba(95,224,255,.35); box-shadow: 0 4px 18px rgba(0,0,0,.4); backdrop-filter: blur(3px); } /* case-study running tally (replaces the removed animated stage) */ .ep1-casemeter { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #1c2a3a; background: rgba(6,9,13,.5); } .ep1-casemeter .ep1-meter-label { display: inline; } .ep1-casemeter .ep1-meter-num { display: inline; font-size: 14px; margin: 0; } .ep1-casemeter .ep1-meter-bar { flex: 1; max-width: 220px; } .ep1-meter-label { display: block; font: 700 10px/1.1 "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--link); } .ep1-meter-num { display: block; font: 800 19px/1.1 "JetBrains Mono", monospace; color: var(--ink); margin: 3px 0 2px; } /* status word (RISING / CRITICAL / SECURED) so meter state is not color-only */ .ep1-meter-status { display: block; font: 700 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--link); margin: 0 0 5px; } .ep1-meter-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; } .ep1-meter-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--link)); transition: width .9s cubic-bezier(.4,0,.2,1); } .ep1-meter.hot { border-color: rgba(255,90,78,.7); animation: ep1-meterpulse 1s ease-in-out infinite; } .ep1-meter.hot .ep1-meter-label { color: var(--danger); } .ep1-meter.hot .ep1-meter-num, .ep1-meter.hot .ep1-meter-status { color: var(--danger); } .ep1-meter.hot .ep1-meter-bar i { background: linear-gradient(90deg, var(--accent-3), var(--danger)); } .ep1-meter.ok { border-color: rgba(57,255,20,.6); } .ep1-meter.ok .ep1-meter-num { color: var(--accent-2); font-size: 14px; } .ep1-meter.ok .ep1-meter-status { color: var(--accent-2); } .ep1-meter.ok .ep1-meter-bar i { background: var(--accent); } @keyframes ep1-meterpulse { 0%,100% { box-shadow: 0 4px 18px rgba(0,0,0,.4); } 50% { box-shadow: 0 0 16px rgba(255,90,78,.5); } } .ep1-phone.ring { animation: ep1-shake .25s linear infinite; transform-origin: 160px 110px; } @keyframes ep1-shake { 0%,100% { transform: translate(150px,102px) rotate(-3deg); } 50% { transform: translate(150px,102px) rotate(3deg); } } .ep1-lower { margin: 0; padding: 16px 22px 14px; background: linear-gradient(180deg, rgba(8,10,14,.6), rgba(8,10,14,.95)); } .ep1-lower.cold { text-align: center; padding: 28px 22px; } .ep1-cap { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 8px; } .ep1-cap.dim { color: var(--ink-dim); font-size: 13.5px; } /* Pre-episode concept primer (active teaching before the scene) */ .ep1-primer-h { font: 700 12px/1.3 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } /* Explicit upfront lesson card (always shown before a scene) */ .ep1-lesson { padding: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 700px; margin: 0 auto; } .ep1-lesson-eyebrow { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .ep1-lesson-title { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.3; } .ep1-lesson-intro { font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); margin-bottom: 4px; } .ep1-lesson .ep1-primer-list { margin: 4px auto 14px; max-width: none; } /* Interactive lesson drill: practice the skill, get feedback */ .ep1-drill-ask { font-size: 16px; line-height: 1.45; color: var(--ink); margin: 6px 0 4px; } .ep1-drill-opts { display: flex; flex-direction: column; gap: 9px; } .ep1-drill-opts.row { flex-direction: row; flex-wrap: wrap; } .ep1-drill-opt { text-align: left; padding: 13px 15px; border-radius: 10px; font-size: 14.5px; font-family: inherit; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: var(--ink); transition: background .12s, border-color .12s; } .ep1-drill-opts.row .ep1-drill-opt { flex: 1 1 200px; } .ep1-drill-opt.mono { font-family: "JetBrains Mono", monospace; font-size: 13.5px; letter-spacing: .01em; } .ep1-drill-opt:hover:not(:disabled) { border-color: var(--accent); background: rgba(57,255,20,.07); } .ep1-drill-opt:disabled { cursor: default; } .ep1-drill-opt.right { border-color: #2ec27a; background: rgba(46,194,122,.14); color: #b6f0cf; font-weight: 700; } .ep1-drill-opt.wrong { border-color: #ff5a4e; background: rgba(255,90,78,.14); color: #ffb7b0; } .ep1-drill-opt.dim { opacity: .45; } .ep1-drill-fb { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; } .ep1-drill-fb.ok { background: rgba(46,194,122,.1); border: 1px solid rgba(46,194,122,.4); color: #cdeeda; } .ep1-drill-fb.no { background: rgba(255,159,67,.1); border: 1px solid rgba(255,159,67,.4); color: #ffe0bd; } .ep1-drill-fb b { color: inherit; } .ep1-primer-list { display: flex; flex-direction: column; gap: 9px; text-align: left; max-width: 600px; margin: 0 auto 16px; } .ep1-primer-term { background: rgba(255,255,255,.04); border: 1px solid var(--panel-edge); border-radius: 10px; padding: 10px 14px; } .ep1-primer-term-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ep1-primer-name { font: 700 14px/1.2 "Space Grotesk", system-ui, sans-serif; color: var(--ink); } .ep1-primer-badge { font: 700 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; } .ep1-primer-badge.new { background: var(--accent); color: #000; } .ep1-primer-badge.review { background: rgba(255,255,255,.1); color: var(--ink-dim); } .ep1-primer-def { font-size: 13px; line-height: 1.5; color: var(--ink-dim); } /* Teach-then-test: warm-up teaching card before a drill */ .teach-rules { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 4px; } .teach-rule { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); text-align: left; } .teach-rule b { color: var(--ink); } .teach-rule code, .teach-example code { font-family: "JetBrains Mono", monospace; font-size: 12px; background: rgba(120,140,180,.12); padding: 1px 5px; border-radius: 4px; color: #ffd27a; } .teach-rule-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #04140a; font: 800 12px/22px "JetBrains Mono", monospace; text-align: center; } .teach-example { margin-top: 14px; padding: 11px 13px; background: rgba(120,140,180,.07); border: 1px solid var(--panel-edge); border-radius: 9px; text-align: left; } .teach-ex-h { font: 700 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .teach-ex-row { font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); } /* Require-investigation prompt + missed-items debrief */ .inbox-inspect-prompt { margin-top: 10px; padding: 9px 12px; font-size: 12.5px; color: #ffb23e; background: rgba(255,178,62,.08); border: 1px dashed rgba(255,178,62,.4); border-radius: 8px; text-align: center; } .ep1-missed { margin-top: 14px; padding: 12px 14px; background: rgba(255,90,78,.06); border: 1px solid rgba(255,90,78,.3); border-radius: 10px; text-align: left; } .ep1-missed-h { font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #ff8a7e; margin-bottom: 8px; } .ep1-missed-item { margin-bottom: 9px; } .ep1-missed-item:last-child { margin-bottom: 0; } .ep1-missed-item.fp { opacity: .85; } .ep1-missed-subj { font-size: 12.5px; color: var(--ink); } .ep1-missed-tell { font-size: 12px; line-height: 1.45; color: var(--ink-dim); margin-top: 2px; } /* Post-episode concept recap (reinforcement) */ .ep1-recap { margin-top: 14px; padding: 12px 14px; background: rgba(57,255,20,.05); border: 1px solid var(--panel-edge); border-radius: 10px; text-align: left; } .ep1-recap-h { font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .ep1-recap-term { font-size: 12.5px; line-height: 1.5; margin-bottom: 5px; color: var(--ink-dim); } .ep1-recap-name { font-weight: 700; color: var(--ink); } .ep1-recap-def { margin-left: 6px; } .ep1-answer { margin-top: 14px; padding: 12px 26px; border-radius: 10px; font-size: 15px; font-family: inherit; cursor: pointer; background: var(--accent); color: #04140a; font-weight: 700; border: none; animation: itc-pulse 1.2s ease-in-out infinite; } .ep1-speakrow { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; } .ep1-port { width: 34px; height: 44px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; border-radius: 6px; } .ep1-port.unknown { background: #1a0c0c; border: 1px solid #ff5a4e; } .ep1-port.unknown span { color: #ff5a4e; font-weight: 800; font-size: 22px; } .ep1-name { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; } .ep1-name.caller { color: #ff7a6e; } .ep1-name.vance { color: #5fe0ff; } .ep1-line { font-size: 16px; line-height: 1.5; color: var(--ink); min-height: 48px; } .ep1-theo { margin: 0 22px 8px; padding: 8px 12px; background: rgba(95,224,255,.05); border-left: 3px solid #5fe0ff; border-radius: 8px; } .ep1-theo-who { display: block; font: 700 9px/1 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #5fe0ff; margin-bottom: 3px; } .ep1-theo-line { font-size: 13px; font-style: italic; color: #aee6ff; line-height: 1.45; } .ep1-choices { display: flex; flex-direction: column; gap: 8px; padding: 4px 22px 26px; } .ep1-choice-hint { color: var(--ink-dim); font-style: italic; font-size: 13px; } .ep1-choice { text-align: left; padding: 11px 14px; border-radius: 9px; font-size: 14px; font-family: inherit; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: var(--ink); } .ep1-choice:hover { border-color: var(--accent); background: rgba(57,255,20,.08); } .ep1-choice.fresh { border-color: var(--accent); color: var(--accent); animation: itc-fresh 1s ease-in-out infinite; } .ep1-choice.act { border-color: #ffd166; color: #ffd166; background: rgba(255,209,102,.08); font-weight: 700; } /* Player-paced "tap to continue" through dialogue (one speaker at a time) */ .ep1-continue { align-self: flex-start; padding: 10px 18px; border-radius: 9px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; background: rgba(57,255,20,.1); border: 1px solid var(--accent); color: var(--accent); } .ep1-continue:hover { background: rgba(57,255,20,.18); } /* Visual-novel dialogue: current speaker's portrait beside their line, switching sides */ .ep1-vn { display: flex; align-items: flex-end; gap: 14px; padding: 12px 22px 4px; min-height: 156px; } .ep1-vn.is-guide { flex-direction: row-reverse; } .ep1-vn-portrait { flex: 0 0 auto; width: 112px; display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); } .ep1-vn-portrait .char-polished { width: var(--vn-cw, 104px); height: var(--vn-ch, 132px); max-width: none; } .ep1-vn-portrait img.char-polished[data-raster] { height: 100%; width: auto; } .ep1-vn-portrait img.char-hd { height: var(--vn-ch, 132px); width: auto; } /* HD sprites are 3:4 (96x128); let height drive width so they never squish in containers whose fixed width assumed the legacy 56x72 (~0.78) ratio. */ .ep1-actor img.char-hd, .story-char-sprite img.char-hd, .cn-char-sprite img.char-hd { width: auto; } .ep1-vn-icon { font-size: 60px; line-height: 1; } .ep1-vn-body { flex: 1; min-width: 0; padding-bottom: 8px; } .ep1-vn.is-guide .ep1-vn-body { text-align: right; } .ep1-vn-name { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 9px; } .ep1-vn-name.actor { color: #ffd166; } .ep1-vn-name.guide { color: #8fc4ff; } .ep1-vn-sub { color: var(--ink-dim); font-weight: 600; text-transform: none; letter-spacing: 0; } .ep1-vn-line { font-size: 16px; line-height: 1.55; color: var(--ink); } .ep1-vn.is-guide .ep1-vn-line { font-style: italic; color: #cfe4ff; } /* CRT evidence cut-in */ .ep1-crt { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(2,4,8,.78); } .ep1-crt-card { width: min(560px, 90vw); background: #05080a; border: 2px solid #2ec27a; border-radius: 10px; box-shadow: 0 0 40px rgba(46,194,122,.25); padding: 16px; animation: ep1-crtin .18s ease-out; } @keyframes ep1-crtin { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ep1-crt-tag { font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .1em; color: #2ec27a; margin-bottom: 10px; } .ep1-crt-screen { background: #020604; border: 1px solid rgba(46,194,122,.25); border-radius: 6px; padding: 12px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.7; color: #7fdca0; } .ep1-crt-line.hot { color: #fff; background: rgba(255,90,78,.18); box-shadow: -8px 0 0 rgba(255,90,78,.18); } .ep1-crt-tell { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: #ffcf66; } .ep1-crt-x { margin-top: 14px; background: none; border: 1px solid rgba(46,194,122,.4); color: #2ec27a; border-radius: 7px; padding: 7px 14px; cursor: pointer; font-family: inherit; font-size: 12px; } .ep1-crt-x:hover { background: rgba(46,194,122,.12); } /* New-model teaching: per-lead coaching header, concept chip, red-herring tag */ .ep1-crt-teachh { margin-top: 14px; font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #8fb7ff; } .ep1-crt-teachh + .ep1-crt-tell { margin-top: 6px; } .ep1-crt-concept { margin-top: 10px; font-size: 12px; color: var(--ink-dim); } .ep1-crt-concept b { color: #aee6ff; } .ep1-crt-herring { margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(255,159,67,.16); border: 1px solid rgba(255,159,67,.5); color: #ff9f43; letter-spacing: .08em; } /* Leads disabled while a line is still being spoken (no talking over) */ .ep1-choice[disabled] { opacity: .4; cursor: default; pointer-events: none; } .ep1-choice-hint.speaking { color: #8fb7ff; font-style: normal; letter-spacing: .04em; } /* Red-herring lead button */ .ep1-choice.herring:hover { border-color: #ff9f43; background: rgba(255,159,67,.08); } /* Pre-decision synthesis ("the picture so far") */ .ep1-synth { border: 1px solid rgba(143,183,255,.4); background: rgba(143,183,255,.06); border-radius: 10px; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; } .ep1-synth-h { font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #8fb7ff; } .ep1-synth-line { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink); } .ep1-synth-dot { color: #8fb7ff; flex: 0 0 auto; } .ep1-synth .ep1-choice.act { margin-top: 6px; } /* ── SOC SIEM sandbox: interactive triage console ─────────────────── */ .siem-wrap { width: min(1040px, 96vw); height: min(92vh, 760px); margin: auto; display: flex; flex-direction: column; background: #070b11; border: 1px solid #1c2a3a; border-radius: 12px; overflow: hidden; color: var(--ink); } .siem-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #0c1320; border-bottom: 1px solid #1c2a3a; } .siem-head .cnh-title { font-weight: 700; letter-spacing: .04em; } .siem-head .cnh-phase { color: var(--ink-dim); font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .08em; margin-left: auto; } .siem-head .btn { margin-left: 8px; } .siem-stab { display: inline-flex; align-items: center; gap: 6px; } .siem-stab .ep1-meter-label { font: 700 9px/1 "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--ink-dim); } .siem-stab .ep1-meter-bar { position: relative; width: 90px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; display: inline-block; } .siem-stab .ep1-meter-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #2ec27a, #7fdca0); transition: width .3s; } .siem-brief { padding: 28px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: auto; } .siem-last { padding: 9px 16px; font-size: 12.5px; line-height: 1.4; border-bottom: 1px solid #1c2a3a; } .siem-last.ok { background: rgba(46,194,122,.1); color: #9fe6bf; } .siem-last.bad { background: rgba(255,90,78,.12); color: #ffb0a8; } .siem-board { flex: 1; display: flex; min-height: 0; } .siem-queue { width: 270px; flex: 0 0 270px; border-right: 1px solid #1c2a3a; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .siem-detail { flex: 1; padding: 12px 16px; overflow-y: auto; } .siem-col-h { font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .12em; color: #5fb0ff; margin-bottom: 10px; } .siem-empty { color: var(--ink-dim); font-size: 13px; font-style: italic; padding: 8px 2px; } .siem-card { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-radius: 8px; background: #101826; border: 1px solid #1c2a3a; border-left: 4px solid #5fb0ff; cursor: grab; user-select: none; transition: background .12s, border-color .12s, transform .08s; } .siem-card:hover { background: #15203230; background: #16223a; } .siem-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .siem-card:active { cursor: grabbing; transform: scale(.99); } .siem-sev { font: 700 9px/1 "JetBrains Mono", monospace; color: #07101a; padding: 3px 5px; border-radius: 4px; letter-spacing: .04em; } .siem-card-title { font-size: 13px; } .siem-detail-tag { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .06em; margin-bottom: 10px; } .siem-logs { background: #020604; border: 1px solid rgba(46,194,122,.2); border-radius: 6px; padding: 12px; font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.7; color: #7fdca0; } .siem-logline.enriched { color: #ffcf66; margin-top: 6px; border-top: 1px dashed rgba(255,207,102,.3); padding-top: 6px; } .siem-ents { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .siem-ent { font: 600 11px/1 "JetBrains Mono", monospace; padding: 4px 8px; border-radius: 999px; background: rgba(95,176,255,.12); border: 1px solid rgba(95,176,255,.4); color: #8fc4ff; } .siem-enrich { margin-top: 12px; } .siem-enriched-note { margin-top: 12px; font: 600 11px/1 "JetBrains Mono", monospace; color: #2ec27a; } .siem-osint { margin-top: 14px; } .siem-osint-h { font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .12em; color: #5fb0ff; margin-bottom: 8px; } .siem-ent-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .siem-tools { display: inline-flex; flex-wrap: wrap; gap: 6px; } .siem-tool { font: 600 11px/1 "JetBrains Mono", monospace; padding: 6px 10px; border-radius: 6px; background: rgba(95,176,255,.1); border: 1px solid rgba(95,176,255,.4); color: #8fc4ff; cursor: pointer; } .siem-tool:hover:not(:disabled) { background: rgba(95,176,255,.2); } .siem-tool.done { opacity: .5; cursor: default; color: #7fdca0; border-color: rgba(46,194,122,.4); background: rgba(46,194,122,.08); } .siem-notes { margin-top: 16px; border-top: 1px solid #1c2a3a; padding-top: 12px; } .siem-note { font-size: 12.5px; line-height: 1.5; color: #c9d6e4; margin-bottom: 6px; padding-left: 10px; border-left: 2px solid #2a3b52; } .siem-note-k { color: #8fc4ff; font-family: "JetBrains Mono", monospace; font-size: 11px; } /* OSINT terminal column */ .siem-term { width: 330px; flex: 0 0 330px; border-left: 1px solid #1c2a3a; display: flex; flex-direction: column; min-height: 0; background: #04070b; } .siem-term .siem-col-h { padding: 10px 12px 0; } .siem-term-out { flex: 1; overflow-y: auto; padding: 6px 12px 10px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; line-height: 1.55; } .siem-tline { white-space: pre-wrap; word-break: break-word; } .siem-tline.info { color: #5f7da0; } .siem-tline.cmd { color: #e6edf5; margin-top: 4px; } .siem-tline.out { color: #7fdca0; } .siem-tline.err { color: #ff7a6e; } .siem-prompt { color: #39ff14; } .siem-term-in { display: flex; align-items: center; gap: 6px; border-top: 1px solid #1c2a3a; padding: 8px 12px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; } .siem-term-in input { flex: 1; background: transparent; border: none; outline: none; color: #e6edf5; font-family: inherit; font-size: inherit; } .siem-term-in input::placeholder { color: #46627f; } @media (max-width: 980px) { .siem-term { width: 250px; flex-basis: 250px; } } .siem-lanes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; border-top: 1px solid #1c2a3a; background: #0a0f18; } .siem-lane { border: 1.5px dashed #2a3b52; border-radius: 9px; padding: 12px 8px; text-align: center; cursor: pointer; transition: background .12s, border-color .12s; } .siem-lane:hover { border-color: #3a557a; } .siem-lane.over { border-color: var(--accent); border-style: solid; background: rgba(57,255,20,.08); } .siem-lane-h { font-weight: 700; font-size: 14px; } .siem-lane-sub { font-size: 11px; color: var(--ink-dim); margin-top: 2px; } .siem-lane-hint { font: 600 9px/1 "JetBrains Mono", monospace; letter-spacing: .08em; color: #46627f; margin-top: 8px; text-transform: uppercase; } @media (max-width: 720px) { .siem-queue { flex-basis: 200px; width: 200px; } .siem-lanes { grid-template-columns: repeat(2, 1fr); } } /* ── Inbox triage mini-game (the phishing lesson you PLAY) ───────────── */ .inbox-wrap { display: flex; flex-direction: column; min-height: 0; } .inbox-row { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border-radius: 8px; background: #101826; border: 1px solid #1c2a3a; border-left: 3px solid #2a3b52; cursor: pointer; user-select: none; transition: background .12s, border-color .12s; animation: inboxArrive .35s ease; } .inbox-row:hover { background: #16223a; } .inbox-row.sel { border-color: var(--accent); border-left-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } @keyframes inboxArrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .inbox-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: #5fb0ff; box-shadow: 0 0 6px rgba(95,176,255,.7); } .inbox-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .inbox-from { font-weight: 700; font-size: 13px; color: #e6edf5; } .inbox-subj { font-size: 12px; color: #9fb0c4; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; } .inbox-msg { display: flex; flex-direction: column; gap: 10px; } .inbox-msg-h { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; } .inbox-field { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: #cdd5dd; } .inbox-flabel { flex: 0 0 44px; font: 700 10px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; color: #5fb0ff; text-transform: uppercase; } .inbox-real { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #ffcf66; background: rgba(255,207,102,.12); border-radius: 4px; padding: 1px 5px; } .inbox-link { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #8fc4ff; word-break: break-all; } .inbox-link .inbox-real { color: #ff9d5c; background: rgba(255,157,92,.14); } .inbox-dim { color: var(--ink-dim); font-style: italic; } .inbox-body { font-size: 13.5px; line-height: 1.55; color: #c9d6e4; border-left: 2px solid #2a3b52; padding-left: 12px; } .inbox-tools { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .inbox-acts { display: flex; gap: 10px; margin-top: 6px; border-top: 1px solid #1c2a3a; padding-top: 12px; } .inbox-act { flex: 1; padding: 11px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1.5px solid #2a3b52; background: #0e1622; color: #cdd5dd; transition: background .12s, border-color .12s; } .inbox-act.trust:hover { border-color: #2ec27a; background: rgba(46,194,122,.1); color: #9fe6bf; } .inbox-act.report:hover { border-color: #ff5a4e; background: rgba(255,90,78,.1); color: #ffb0a8; } .inbox-amount { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; color: #ffcf66; } .mg-scopes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; border-left: 2px solid #2a3b52; padding-left: 12px; } .mg-scopes li { font-size: 13px; color: #c9d6e4; line-height: 1.4; } .mg-scopes li::before { content: "• "; color: #5fb0ff; } .mg-scopes li.danger { color: #ffb0a8; font-weight: 600; } .mg-scopes li.danger::before { content: "⚠ "; color: #ff5a4e; } /* climax */ .ep1-decwrap { padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; } .ep1-dechead { font-size: 16px; font-weight: 700; color: #ff7a6e; text-align: center; margin-bottom: 8px; } .ep1-dec { text-align: left; padding: 14px 16px; border-radius: 10px; font-size: 14.5px; font-family: inherit; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); color: var(--ink); } .ep1-dec:hover { border-color: var(--accent); color: var(--accent); } .ep1-dec.danger:hover { border-color: #ff5a4e; color: #ff5a4e; } @media (max-width: 720px) { .story-stage, .cn-stage { min-height: 360px; padding: 32px 18px 18px; } .story-chars, .cn-chars { gap: 24px; } .story-char-sprite, .cn-char-sprite { width: 100px; height: 136px; } .story-char-sprite .char-polished, .cn-char-sprite .char-polished, .ep1-actor .char-polished { width: 96px; height: 124px; } } /* ── Mastery dashboard (Dossier > Mastery) ──────────────────────────── */ .mastery { display: flex; flex-direction: column; gap: 18px; } .mastery-empty { color: var(--ink-dim); font-size: 14px; line-height: 1.6; padding: 24px; text-align: center; } .mastery-summary { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--panel-edge); } .mastery-stat { display: flex; flex-direction: column; line-height: 1.1; } .mastery-stat b { font: 700 22px/1 "JetBrains Mono", monospace; color: var(--accent); } .mastery-stat span { font-size: 11px; color: var(--ink-dim); margin-top: 3px; } .mastery-summary-hint { flex: 1 1 220px; min-width: 180px; font-size: 12px; color: var(--ink-dim); line-height: 1.5; } .mastery-track { display: flex; flex-direction: column; gap: 6px; } .mastery-track-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; } .mastery-track-name { font: 700 12px/1 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--accent-2); text-transform: uppercase; } .mastery-track-count { font: 600 11px/1 "JetBrains Mono", monospace; color: var(--ink-dim); } .mastery-row { display: grid; grid-template-columns: 150px 1fr 92px; grid-template-areas: "name bar tier" "meta meta meta"; gap: 4px 12px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.02); border: 1px solid var(--panel-edge); } .mastery-row.untried { opacity: .58; } .mastery-name { grid-area: name; font-size: 13px; font-weight: 600; color: var(--ink); } .mastery-bar { grid-area: bar; position: relative; height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; } .mastery-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; transition: width .4s ease; } .mastery-tier { grid-area: tier; text-align: right; font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .03em; } .mastery-meta { grid-area: meta; font: 500 11px/1.3 "JetBrains Mono", monospace; color: var(--ink-dim); } @media (min-width: 560px) { .mastery-row { grid-template-columns: 160px 1fr 220px 96px; grid-template-areas: "name bar meta tier"; } .mastery-meta { text-align: right; } } /* ── Campaigns tab (multi-episode story arcs) ── */ .campaigns { display: flex; flex-direction: column; gap: 18px; } .campaigns-hint { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; padding: 12px 16px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--panel-edge); } .arc { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid var(--panel-edge); } .arc.arc-complete { border-color: rgba(57,255,20,.4); background: rgba(57,255,20,.04); } .arc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .arc-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .arc-title { font: 700 14px/1.2 "JetBrains Mono", monospace; color: var(--accent-2); letter-spacing: .02em; } .arc-blurb { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; } .arc-count { flex: 0 0 auto; font: 700 12px/1 "JetBrains Mono", monospace; color: var(--ink-dim); padding-top: 2px; } .arc-bar { position: relative; height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; } .arc-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); transition: width .4s ease; } .arc-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .arc-step-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.02); border: 1px solid var(--panel-edge); color: var(--ink); cursor: pointer; text-align: left; transition: background .12s, border-color .12s; } .arc-step-btn:hover { background: rgba(255,255,255,.06); border-color: var(--accent-2); } .arc-step.done .arc-step-btn { opacity: .72; } .arc-step.next .arc-step-btn { border-color: var(--accent); background: rgba(57,255,20,.06); } .arc-step-mark { flex: 0 0 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font: 700 11px/1 "JetBrains Mono", monospace; background: rgba(255,255,255,.06); color: var(--ink-dim); } .arc-step.done .arc-step-mark { background: rgba(57,255,20,.16); color: var(--accent); } .arc-step.next .arc-step-mark { background: var(--accent); color: #07120a; } .arc-step-name { flex: 1 1 auto; font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arc-step-tag { flex: 0 0 auto; font: 500 10.5px/1 "JetBrains Mono", monospace; color: var(--ink-dim); } .arc-step-next { flex: 0 0 auto; font: 700 9px/1 "JetBrains Mono", monospace; letter-spacing: .08em; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 3px 5px; } /* ── Responsive pass: keep mini-game boards usable on narrow viewports ── */ /* The live console header and action rows must never clip their controls. */ .siem-head { flex-wrap: wrap; } .inbox-acts { flex-wrap: wrap; } .inbox-act { min-width: 130px; } @media (max-width: 620px) { /* Stack the queue above the detail so the detail + action buttons get the full width instead of being crushed into a ~200px column. */ .siem-board { flex-direction: column; } .siem-queue { width: auto; flex: 0 0 auto; max-height: 34vh; border-right: none; border-bottom: 1px solid #1c2a3a; } .siem-detail { padding: 12px; } .inbox-subj { max-width: none; white-space: normal; } .siem-head .cnh-phase { margin-left: 0; } .siem-head .btn { margin-left: auto; } } /* ── Ranking mini-game (makeRankGame): order five items by danger ── */ .rank-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; margin-top: 12px; } .rank-col-h { font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: 1.5px; color: var(--ink-dim); margin-bottom: 8px; } .rank-pool, .rank-slots { display: flex; flex-direction: column; gap: 7px; } .rank-item { display: block; width: 100%; text-align: left; background: rgba(120,140,180,.07); border: 1px solid var(--panel-edge); border-radius: 8px; padding: 9px 11px; cursor: pointer; transition: border-color .12s, transform .12s; color: var(--ink); font: inherit; } .rank-item:hover { border-color: var(--accent); transform: translateY(-1px); } .rank-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rank-item-label { font: 600 12.5px/1.4 Inter, sans-serif; } .rank-item-sub { font: 500 11px/1.4 "JetBrains Mono", monospace; color: var(--ink-dim); margin-top: 2px; } .rank-item.placed { border-color: var(--accent); background: rgba(57,255,20,.06); } .rank-slot { display: flex; align-items: center; gap: 9px; min-height: 48px; } .rank-slot.empty { border: 1px dashed var(--panel-edge); border-radius: 8px; padding: 6px 11px; color: var(--ink-dim); } .rank-slot .rank-item { flex: 1; } .rank-slot-hint { font: 500 11px/1.2 "JetBrains Mono", monospace; color: var(--ink-dim); } .rank-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(120,140,180,.07); border: 1px solid var(--panel-edge); color: var(--ink-dim); font: 800 11px/20px "JetBrains Mono", monospace; text-align: center; } .rank-col-h + .rank-slot .rank-num, .rank-reveal-row:first-child .rank-num { background: var(--danger); border-color: transparent; color: #fff; } .rank-empty { font: 500 12px/1.5 Inter, sans-serif; color: var(--ink-dim); padding: 8px 2px; } .rank-reveal { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; } .rank-reveal-row { display: flex; gap: 10px; align-items: flex-start; background: rgba(120,140,180,.07); border: 1px solid var(--panel-edge); border-radius: 8px; padding: 10px 12px; } .rank-reveal-row.hit { border-left: 3px solid var(--accent); } .rank-reveal-row.miss { border-left: 3px solid var(--danger); } .rank-reveal-row .rank-num { margin-top: 1px; } .rank-reveal-label { font: 600 12.5px/1.45 Inter, sans-serif; } .rank-yours { font: 600 10.5px/1 "JetBrains Mono", monospace; margin-left: 6px; white-space: nowrap; } .rank-yours.hit { color: var(--accent); } .rank-yours.miss { color: var(--danger); } .rank-reveal-why { font: 400 12px/1.55 Inter, sans-serif; color: var(--ink-dim); margin-top: 4px; } @media (max-width: 720px) { .rank-cols { grid-template-columns: 1fr; } } /* ── Weekly Gauntlet (seasonal endgame) ── */ .gauntlet-btn.cleared { border-color: var(--accent); color: var(--accent); } .gauntlet-theme { margin-bottom: 14px; } .gauntlet-theme-kicker { font: 700 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; } .gauntlet-theme-title { font: 700 17px/1.3 "Space Grotesk", Inter, sans-serif; color: var(--ink); } .gauntlet-theme-blurb { font: 400 12.5px/1.55 Inter, sans-serif; color: var(--ink-dim); margin-top: 4px; } .gauntlet-steps { display: flex; flex-direction: column; gap: 8px; } .gauntlet-step { display: flex; align-items: center; gap: 11px; background: rgba(120,140,180,.07); border: 1px solid var(--panel-edge); border-radius: 9px; padding: 10px 12px; } .gauntlet-step.played { border-color: rgba(127,255,92,.35); } .gauntlet-step-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(120,140,180,.12); border: 1px solid var(--panel-edge); color: var(--ink-dim); font: 800 11px/20px "JetBrains Mono", monospace; text-align: center; } .gauntlet-step-body { flex: 1; min-width: 0; } .gauntlet-step-title { font: 600 13px/1.35 Inter, sans-serif; color: var(--ink); } .gauntlet-step-sub { font: 500 10.5px/1.4 "JetBrains Mono", monospace; color: var(--ink-dim); margin-top: 1px; } .gauntlet-step-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .gauntlet-step-score { font: 700 11.5px/1 "JetBrains Mono", monospace; color: var(--ink-dim); } .gauntlet-step-score.good { color: var(--accent); } .gauntlet-step-score.dim { opacity: .7; font-weight: 500; } .gauntlet-run { padding: 6px 12px; font-size: 12px; } .gauntlet-agg { margin-top: 13px; padding: 10px 13px; border: 1px dashed var(--panel-edge); border-radius: 9px; font: 500 12.5px/1.5 Inter, sans-serif; color: var(--ink-dim); } .gauntlet-agg.cleared { border-style: solid; border-color: var(--accent); color: var(--accent); } .gauntlet-season { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; } .gauntlet-season-label { font: 600 11px/1.4 "JetBrains Mono", monospace; color: var(--ink-dim); } .gauntlet-season-hist { display: inline-flex; gap: 4px; } .gauntlet-hist-pip { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--panel-edge); color: var(--ink-dim); font: 700 10px/16px "JetBrains Mono", monospace; text-align: center; } .gauntlet-hist-pip.win { border-color: var(--accent); color: var(--accent); } @media (max-width: 720px) { .gauntlet-step { flex-wrap: wrap; } .gauntlet-step-side { width: 100%; justify-content: flex-end; } } /* Gauntlet difficulty note under the aggregate bar */ .gauntlet-tier-note { margin-top: 9px; font: 500 11px/1.55 Inter, sans-serif; color: var(--ink-dim); } .gauntlet-tier-note b { color: var(--accent-3); }