/* A-MAZE-ING CHALLENGE — visualizer UI shell * Design tokens are BINDING (docs/superpowers/plans/2026-07-10-amazeing-phase4.5-visualizer.md, * "Design tokens (frontend-design)" section). No webfonts, no external * requests of any kind — this stylesheet is entirely self-contained. */ :root { --bg: #060913; --panel: #0a1120; --grid: #12324a; --text: #c9e7f2; --dim: #5d7f91; --alert: #ff3b30; --hue-0: #00e5ff; /* cyan */ --hue-1: #ff7a1a; /* ember */ --hue-2: #ff2fd6; /* magenta */ --hue-3: #3dff8b; /* green */ --hue-4: #ffd21f; /* gold */ --hue-5: #9d6bff; /* violet */ --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace; --dur-slide: 420ms; --dur-fade: 500ms; --dur-tick: 120ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-slide: 1ms; --dur-fade: 1ms; --dur-tick: 1ms; } #bg-video { display: none; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--text); font-family: var(--mono); min-height: 100%; } /* The page background lives on ONLY. It propagates to the canvas, * which paints below everything — including the negative-z-index cards-page * background video. A background on itself paints in the in-flow * layer, OVER negative-z-index children, and would hide the video * entirely (CSS 2.1 Appendix E painting order). */ html { background: var(--bg); } body { display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } /* ------------------------------------------------------------------ */ /* Cards-page background video */ /* ------------------------------------------------------------------ */ #bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; /* TJ-tunable: the one knob for background intensity */ pointer-events: none; z-index: -1; /* above the canvas background, below all content */ } #bg-video.bg-video-hidden { display: none; } .display { font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; } /* ------------------------------------------------------------------ */ /* Reconnect banner */ /* ------------------------------------------------------------------ */ #banner { display: none; padding: 0.4em 1em; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; text-align: center; color: var(--bg); background: var(--alert); } #banner.visible { display: block; } @keyframes banner-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } } #banner.visible { animation: banner-pulse 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { #banner.visible { animation: none; } } /* ------------------------------------------------------------------ */ /* Header chrome */ /* ------------------------------------------------------------------ */ header { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.9em 1.2em; border-bottom: 1px solid var(--grid); background: var(--panel); flex-wrap: wrap; } header h1 { margin: 0; font-size: 1rem; color: var(--text); } .credits { margin-top: 0.35em; font-size: 0.65rem; letter-spacing: 0.08em; color: var(--dim); } .header-status { display: flex; align-items: center; gap: 1.2em; font-size: 0.75rem; color: var(--dim); } #session-count { color: var(--text); } .health { display: flex; align-items: center; gap: 0.5em; text-transform: uppercase; letter-spacing: 0.08em; } .health-dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0.4em currentColor; flex: none; } .health-dot.ok { background: var(--hue-3); color: var(--hue-3); } .health-dot.demo { background: var(--hue-4); color: var(--hue-4); } .health-dot.err { background: var(--alert); color: var(--alert); } /* ------------------------------------------------------------------ */ /* Sort control (viz-cards-update): header segmented control choosing */ /* card order — HANDLE (default) / DURATION / FASTEST / PROGRESS. */ /* ------------------------------------------------------------------ */ .sort-control { display: flex; gap: 0.35em; flex-wrap: wrap; } .sort-btn { border: 1px solid var(--grid); border-radius: 4px; background: var(--panel); color: var(--dim); font-family: var(--mono); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.3em 0.6em; cursor: pointer; } .sort-btn:hover { color: var(--text); border-color: var(--text); } .sort-btn:focus-visible { outline: 2px solid var(--hue-0); outline-offset: 2px; } .sort-btn[aria-pressed="true"] { color: var(--hue-0); border-color: var(--hue-0); } /* ------------------------------------------------------------------ */ /* Handle filter (2026-07-19): toolbar text input next to the sort */ /* control. Matching happens in app.js; non-matching cards get */ /* .filter-hidden. Nothing is persisted. */ /* ------------------------------------------------------------------ */ .filter-control { display: flex; align-items: center; gap: 0.5em; } .filter-input { border: 1px solid var(--grid); border-radius: 4px; background: var(--panel); color: var(--text); font-family: var(--mono); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.3em 0.6em; width: 11em; } .filter-input::placeholder { color: var(--dim); opacity: 1; } .filter-input:focus-visible { outline: 2px solid var(--hue-0); outline-offset: 2px; } .filter-count { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--dim); white-space: nowrap; } .card.filter-hidden { display: none; } /* ------------------------------------------------------------------ */ /* Main / routes */ /* ------------------------------------------------------------------ */ main { flex: 1; padding: 1.2em; width: 100%; max-width: 1400px; margin: 0 auto; } .view { display: none; } .view.active { display: block; } /* ------------------------------------------------------------------ */ /* Empty state */ /* ------------------------------------------------------------------ */ #empty-state { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; padding: 4em 1em; text-align: center; color: var(--dim); } #empty-state.visible { display: flex; } #empty-state .headline { color: var(--text); font-size: 1.1rem; } .hint { color: var(--dim); font-size: 0.8rem; } .hint code { font-family: inherit; color: var(--text); } /* ------------------------------------------------------------------ */ /* Cards grid */ /* ------------------------------------------------------------------ */ #cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1em; } .card { position: relative; display: block; /* Per-hue theming (2026-07-19): the border, internal separator lines (--card-line) and panel background all derive from the card's own handle hue (--card-hue, stamped per element by app.js) — mixed hard toward the page background so the tint aids eye-tracking without costing legibility. Requires color-mix (everywhere since 2023). */ --card-line: color-mix(in srgb, var(--card-hue, var(--hue-0)) 34%, var(--bg)); border: 1px solid var(--card-line); background: color-mix(in srgb, var(--card-hue, var(--hue-0)) 9%, var(--bg)); border-radius: 6px; padding: 0.8em 0.9em; transition: transform var(--dur-tick) ease, opacity var(--dur-fade) ease, filter var(--dur-fade) ease; } .card:hover { transform: translateY(-1px); } .card:focus-visible { outline: 2px solid var(--card-hue, var(--text)); outline-offset: 2px; } .card.card-enter { animation: card-slide-in var(--dur-slide) ease-out; } @keyframes card-slide-in { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .card.terminal { filter: grayscale(1) brightness(0.75); opacity: 0.4; } .card.leaving { opacity: 0; transform: translateY(6px); } .card-top { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.7em; } .hue-chip { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--card-hue, var(--text)); box-shadow: 0 0 0.5em var(--card-hue, transparent); flex: none; } .handle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: var(--card-hue, var(--text)); } .state-tag { font-size: 0.65rem; padding: 0.15em 0.5em; border: 1px solid currentColor; border-radius: 3px; white-space: nowrap; } .state-tag.completed { color: var(--hue-3); } .state-tag.dropped { color: var(--alert); } .state-tag.signal_lost { color: var(--dim); } .card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; text-align: center; margin-bottom: 0.7em; } .stat .stat-value { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.3rem; color: var(--text); } /* Card micro-motion (Task 5): a ~120ms highlight on stat change, driven by JS add/remove of this class (app.js's tickStat) rather than a bare transition — a transition alone never returns to scale(1) once the target class is added and left on. */ .stat .stat-value.tick { animation: stat-tick var(--dur-tick) ease-out; } @keyframes stat-tick { 0% { transform: scale(1.22); } 100% { transform: scale(1); } } .stat .stat-label { font-size: 0.6rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.14em; } .card-foot { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--dim); border-top: 1px solid var(--card-line, var(--grid)); padding-top: 0.5em; } /* ------------------------------------------------------------------ */ /* Card detail sub-section (viz-cards-update): AVG/LAYER, AVG/CUBE, */ /* ATTEMPTS — a quiet row below the main stats, deliberately smaller/ */ /* dimmer so it doesn't compete with cube/layer/moves-per-sec. Distinct */ /* classes (not .stat/.stat-value/.stat-label) so this styling never */ /* has to out-specificity the main stats rules above. */ /* ------------------------------------------------------------------ */ .card-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3em; text-align: center; margin-bottom: 0.6em; padding-top: 0.5em; border-top: 1px solid var(--card-line, var(--grid)); } .detail-stat-value { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; color: var(--dim); } .detail-stat-label { font-size: 0.55rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.75; } /* ------------------------------------------------------------------ */ /* Detail view: isometric ghost-stack renderer (Task 4) */ /* ------------------------------------------------------------------ */ .back-link { display: inline-block; margin-bottom: 1em; color: var(--dim); font-size: 0.8rem; } .back-link:hover, .back-link:focus-visible { color: var(--text); } .detail-handle { font-size: 1.1rem; margin: 0 0 0.8em 0; } /* Canvas (left/main) + HUD (right) side by side; HUD stacks below the canvas under 720px per the plan's responsive floor. */ .detail-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.2em; align-items: start; } @media (max-width: 720px) { .detail-layout { grid-template-columns: 1fr; } } .detail-canvas-wrap { position: relative; /* Per-hue theming (2026-07-20): the map module inherits its session's card color schema — --card-hue is stamped on .detail-layout by app.js. The BACKGROUND here is only the pre-first-frame fallback: drawDetailFrame keeps it synced to the canvas's per-cube tint so module and map read as one seamless surface. */ --card-line: color-mix(in srgb, var(--card-hue, var(--hue-0)) 34%, var(--bg)); border: 1px solid var(--card-line); background: color-mix(in srgb, var(--card-hue, var(--hue-0)) 9%, var(--bg)); border-radius: 6px; padding: 1em 1.2em; min-width: 0; } .detail-canvas { display: block; width: 100%; border-radius: 4px; background: var(--bg); cursor: grab; /* Single-finger drag is handled entirely via pointer events (Task 3 pan); prevent the browser's own touch-scroll/pinch-zoom from competing with it. */ touch-action: none; } .detail-canvas.panning { cursor: grabbing; } /* Task 3: on-screen zoom controls, positioned over the canvas's own corner (inside the padded .detail-canvas-wrap, which is why it needs position: relative above) for touch/no-wheel displays. --card-hue is set on this container from the session's own hue (same custom property `.card:focus-visible` already uses) so hover/focus rings match. */ .zoom-controls { position: absolute; top: 1.5em; right: 1.6em; display: flex; flex-direction: column; gap: 0.35em; z-index: 1; } .zoom-btn { width: 1.9em; height: 1.9em; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--card-hue, var(--hue-0)) 34%, var(--bg)); border-radius: 4px; background: color-mix(in srgb, var(--card-hue, var(--hue-0)) 12%, var(--bg)); color: var(--text); font-family: var(--mono); font-size: 0.95rem; line-height: 1; cursor: pointer; } .zoom-btn:hover { border-color: var(--card-hue, var(--text)); color: var(--card-hue, var(--text)); } .zoom-btn:focus-visible { outline: 2px solid var(--card-hue, var(--text)); outline-offset: 2px; } .detail-hud { --card-line: color-mix(in srgb, var(--card-hue, var(--hue-0)) 34%, var(--bg)); border: 1px solid var(--card-line); background: color-mix(in srgb, var(--card-hue, var(--hue-0)) 9%, var(--bg)); border-radius: 6px; padding: 1em 1.2em; display: flex; flex-direction: column; gap: 0.8em; } .hud-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.35em; font-size: 0.85rem; } .hud-list li { display: flex; justify-content: space-between; gap: 1em; border-bottom: 1px solid var(--card-line, var(--grid)); padding-bottom: 0.35em; } .hud-list .hud-label { color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; } /* Detail HUD micro-motion (Task 5): the layer counter ticks on layer-up; the cube counter rolls old->new on a cube-teleport. */ .hud-value.tick { display: inline-block; animation: stat-tick var(--dur-tick) ease-out; } .hud-value.roll { display: inline-block; animation: hud-roll var(--dur-slide) ease-out; } @keyframes hud-roll { 0% { transform: translateY(-60%); opacity: 0; } 60% { transform: translateY(8%); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } .hud-tools { display: flex; flex-wrap: wrap; gap: 0.3em; justify-content: flex-end; } /* Compass HUD line (Phase 6.5 Task 5): dim value so it doesn't compete with the more actionable stats above it -- the label is already dim via .hud-label. */ .hud-value.hud-dim { color: var(--dim); } .tool-tag { font-size: 0.75rem; color: var(--text); border: 1px solid var(--grid); border-radius: 3px; padding: 0.05em 0.35em; } .detail-state-tag { align-self: flex-start; font-size: 0.7rem; padding: 0.2em 0.6em; border: 1px solid currentColor; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.1em; } .detail-state-tag.live { color: var(--hue-0); } .detail-state-tag.completed { color: var(--hue-3); } .detail-state-tag.dropped { color: var(--alert); } .detail-state-tag.signal_lost { color: var(--dim); } .not-found { color: var(--alert); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } /* ------------------------------------------------------------------ */ /* Responsive floor: ~360px stacks single-column */ /* ------------------------------------------------------------------ */ @media (max-width: 420px) { #cards-grid { grid-template-columns: 1fr; } header { flex-direction: column; align-items: flex-start; } .card-stats { grid-template-columns: repeat(3, 1fr); gap: 0.25em; } .stat .stat-value { font-size: 1.05rem; } } /* ------------------------------------------------------------------ */ /* Leaderboard view (2026-07-19): #cards-grid.board flattens the SAME */ /* card elements into dense single rows — no separate DOM, so sort/ */ /* filter/tick/sense/removal behavior is identical in both views. Rank */ /* numbers are a CSS counter; .filter-hidden rows are display:none and */ /* therefore neither render nor increment it. */ /* ------------------------------------------------------------------ */ #cards-grid.board { display: block; counter-reset: boardrank; } #cards-grid.board .card { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em 1.1em; counter-increment: boardrank; padding: 0.35em 0.9em; margin-bottom: 0.4em; border-radius: 4px; } #cards-grid.board .card::before { content: counter(boardrank); min-width: 1.8em; text-align: right; color: var(--dim); font-family: var(--mono); font-size: 0.8em; } #cards-grid.board .card-top { margin-bottom: 0; flex: 1 1 11em; min-width: 9em; } #cards-grid.board .card-stats, #cards-grid.board .card-detail { display: flex; gap: 1.1em; margin: 0; border: none; padding: 0; flex: 0 0 auto; } #cards-grid.board .stat, #cards-grid.board .detail-stat { display: flex; align-items: baseline; gap: 0.35em; text-align: left; } /* Value first, tiny label after — a self-labeling dense row. */ #cards-grid.board .stat .stat-value { font-size: 0.95em; } #cards-grid.board .stat .stat-label, #cards-grid.board .detail-stat .detail-stat-label { font-size: 0.58em; } #cards-grid.board .card-foot { margin: 0; border: none; padding: 0; display: flex; gap: 0.9em; flex: 0 0 auto; } /* ------------------------------------------------------------------ */ /* Tool carrier (2026-07-19, v2): holding a tool lights the card's own */ /* hue up NEON — full-strength border plus a 1px ring (the "+1px */ /* wider" border with no layout shift) and a soft glow; the internal */ /* separator lines brighten with it. Non-carriers keep the muted-hue */ /* border from .card above. Terminal dimming still stacks on top. */ /* ------------------------------------------------------------------ */ .card.tool-carrier { border-color: var(--card-hue, var(--hue-3)); box-shadow: 0 0 0 1px var(--card-hue, var(--hue-3)), 0 0 10px color-mix(in srgb, var(--card-hue, var(--hue-3)) 45%, transparent); --card-line: color-mix(in srgb, var(--card-hue, var(--hue-0)) 60%, var(--bg)); } /* ------------------------------------------------------------------ */ /* FLIP re-sort slide (2026-07-19): a card whose list position changed */ /* is offset back to its old spot with transition disabled */ /* (.card-slide-prep), then released to identity under .card-sliding. */ /* Transform-only — never triggers layout during the animation. */ /* ------------------------------------------------------------------ */ .card.card-slide-prep { transition: none; } .card.card-sliding { transition: transform var(--dur-slide) ease; }