Spaces:
Running
Running
| :root { | |
| --bg: #0d0d14; | |
| --surface: #13131d; | |
| --surface-2: #1a1a2e; | |
| --paper-white: #fafaf5; | |
| --paper-edge: #2a2a3a; | |
| --mountain: #f59e0b; | |
| --valley: #38bdf8; | |
| --target-ghost: rgba(124, 58, 237, 0.20); | |
| --target-ghost-stroke: rgba(124, 58, 237, 0.45); | |
| --validity: #22d3ee; | |
| --progress: #22c55e; | |
| --economy: #a78bfa; | |
| --text-primary: #f8fafc; | |
| --text-dim: #64748b; | |
| --border: #2a2a3a; | |
| --border-bright: #3a3a5a; | |
| --font-display: 'JetBrains Mono', monospace; | |
| --font-mono: 'IBM Plex Mono', monospace; | |
| } | |
| .app { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| background: var(--bg); | |
| overflow: hidden; | |
| } | |
| /* ─── HEADER ─── */ | |
| .app-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| padding: 0 20px; | |
| height: 48px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--surface); | |
| flex-shrink: 0; | |
| z-index: 10; | |
| } | |
| .app-title { | |
| font-family: var(--font-display); | |
| font-size: 14px; | |
| font-weight: 700; | |
| letter-spacing: 0.12em; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| } | |
| .app-title .title-accent { | |
| color: var(--mountain); | |
| } | |
| .header-sep { | |
| width: 1px; | |
| height: 24px; | |
| background: var(--border); | |
| flex-shrink: 0; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin-left: auto; | |
| } | |
| .replay-badge { | |
| font-size: 10px; | |
| font-family: var(--font-display); | |
| letter-spacing: 0.1em; | |
| color: #38bdf8; | |
| background: rgba(56, 189, 248, 0.1); | |
| border: 1px solid rgba(56, 189, 248, 0.3); | |
| padding: 3px 8px; | |
| border-radius: 3px; | |
| } | |
| .back-to-grid-btn { | |
| font-size: 10px; | |
| font-family: var(--font-display); | |
| letter-spacing: 0.08em; | |
| color: #64748b; | |
| background: transparent; | |
| border: 1px solid #1e2a3a; | |
| padding: 3px 10px; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| } | |
| .back-to-grid-btn:hover { color: #e2e8f0; border-color: #64748b; } | |
| .api-status { | |
| font-size: 11px; | |
| font-family: var(--font-display); | |
| letter-spacing: 0.08em; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .api-status-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--text-dim); | |
| } | |
| .api-status-dot.ok { | |
| background: var(--progress); | |
| box-shadow: 0 0 6px var(--progress); | |
| } | |
| .api-status-dot.err { | |
| background: #ef4444; | |
| box-shadow: 0 0 6px #ef4444; | |
| } | |
| /* ─── MAIN LAYOUT ─── */ | |
| .app-body { | |
| display: grid; | |
| grid-template-columns: 1fr 280px; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .app-left { | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| border-right: 1px solid var(--border); | |
| } | |
| .app-right { | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| background: var(--surface); | |
| } | |
| /* ─── CANVAS ROW ─── */ | |
| .canvas-row { | |
| display: flex; | |
| gap: 0; | |
| padding: 16px; | |
| flex-shrink: 0; | |
| border-bottom: 1px solid var(--border); | |
| overflow-x: auto; | |
| } | |
| .canvas-wrap { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| flex: 1; | |
| min-width: 280px; | |
| } | |
| .canvas-wrap + .canvas-wrap { | |
| margin-left: 16px; | |
| } | |
| .canvas-label { | |
| font-family: var(--font-display); | |
| font-size: 10px; | |
| font-weight: 500; | |
| letter-spacing: 0.14em; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| } | |
| .canvas-svg { | |
| display: block; | |
| background: var(--paper-white); | |
| } | |
| .canvas-3d { | |
| display: block; | |
| background: linear-gradient(180deg, #1a1a2e 0%, #0f101a 100%); | |
| border: 1px solid var(--border); | |
| } | |
| .canvas-label-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| .fold-mode-toggle { | |
| display: inline-flex; | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| } | |
| .fold-mode-btn { | |
| border: none; | |
| background: transparent; | |
| color: var(--text-dim); | |
| font-family: var(--font-display); | |
| font-size: 9px; | |
| letter-spacing: 0.08em; | |
| padding: 3px 7px; | |
| cursor: pointer; | |
| } | |
| .fold-mode-btn + .fold-mode-btn { | |
| border-left: 1px solid var(--border); | |
| } | |
| .fold-mode-btn.active { | |
| color: var(--text-primary); | |
| background: #1f2538; | |
| } | |
| /* ─── STEP FEED ─── */ | |
| .step-feed-section { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .section-header { | |
| font-family: var(--font-display); | |
| font-size: 10px; | |
| font-weight: 500; | |
| letter-spacing: 0.14em; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| padding: 8px 16px; | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| } | |
| .step-feed { | |
| overflow-y: auto; | |
| flex: 1; | |
| padding: 4px 0; | |
| } | |
| .step-entry { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| padding: 8px 16px; | |
| border-bottom: 1px solid var(--border); | |
| cursor: default; | |
| transition: background 0.1s; | |
| } | |
| .step-entry:hover { | |
| background: var(--surface); | |
| } | |
| .step-entry.active { | |
| background: var(--surface-2); | |
| border-left: 2px solid var(--valley); | |
| padding-left: 14px; | |
| } | |
| .step-entry-top { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .step-num { | |
| font-family: var(--font-display); | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: var(--text-dim); | |
| width: 24px; | |
| flex-shrink: 0; | |
| } | |
| .step-instruction { | |
| font-size: 12px; | |
| color: var(--text-primary); | |
| flex: 1; | |
| } | |
| .assign-badge { | |
| font-family: var(--font-display); | |
| font-size: 10px; | |
| font-weight: 700; | |
| padding: 1px 5px; | |
| line-height: 1.4; | |
| flex-shrink: 0; | |
| } | |
| .assign-badge.M { | |
| background: var(--mountain); | |
| color: #0d0d14; | |
| } | |
| .assign-badge.V { | |
| background: var(--valley); | |
| color: #0d0d14; | |
| } | |
| .assign-badge.B { | |
| background: var(--border-bright); | |
| color: var(--text-dim); | |
| } | |
| .step-reward-delta { | |
| font-size: 11px; | |
| color: var(--text-dim); | |
| padding-left: 32px; | |
| } | |
| .step-reward-delta .delta-positive { | |
| color: var(--progress); | |
| } | |
| .step-reward-delta .delta-negative { | |
| color: #ef4444; | |
| } | |
| /* ─── REWARD PANEL ─── */ | |
| .reward-panel { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| } | |
| .reward-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 6px; | |
| } | |
| .reward-row:last-child { | |
| margin-bottom: 0; | |
| } | |
| .reward-label { | |
| font-family: var(--font-display); | |
| font-size: 10px; | |
| font-weight: 500; | |
| letter-spacing: 0.06em; | |
| color: var(--text-dim); | |
| width: 72px; | |
| flex-shrink: 0; | |
| text-transform: uppercase; | |
| } | |
| .reward-track { | |
| flex: 1; | |
| height: 8px; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| } | |
| .reward-bar { | |
| height: 100%; | |
| transition: width 0.4s ease; | |
| } | |
| .reward-value { | |
| font-family: var(--font-display); | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| width: 36px; | |
| text-align: right; | |
| flex-shrink: 0; | |
| } | |
| .reward-value.dim { | |
| color: var(--text-dim); | |
| } | |
| .reward-divider { | |
| height: 1px; | |
| background: var(--border); | |
| margin: 6px 0; | |
| } | |
| /* ─── INFO BADGES ─── */ | |
| .info-badges { | |
| padding: 12px 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .info-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .info-key { | |
| font-family: var(--font-display); | |
| font-size: 10px; | |
| font-weight: 500; | |
| letter-spacing: 0.06em; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| } | |
| .info-val { | |
| font-family: var(--font-display); | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .info-val.bool-true { | |
| color: var(--progress); | |
| } | |
| .info-val.bool-false { | |
| color: #ef4444; | |
| } | |
| .info-val.dim { | |
| color: var(--text-dim); | |
| } | |
| /* ─── TARGET SELECTOR ─── */ | |
| .target-selector { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .target-selector-label { | |
| font-family: var(--font-display); | |
| font-size: 10px; | |
| font-weight: 500; | |
| letter-spacing: 0.10em; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| .target-select { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border-bright); | |
| color: var(--text-primary); | |
| font-family: var(--font-display); | |
| font-size: 11px; | |
| padding: 4px 8px; | |
| outline: none; | |
| cursor: pointer; | |
| min-width: 180px; | |
| } | |
| .target-select:focus { | |
| border-color: var(--valley); | |
| } | |
| optgroup { | |
| background: var(--surface); | |
| color: var(--text-dim); | |
| font-family: var(--font-display); | |
| font-size: 10px; | |
| } | |
| option { | |
| background: var(--surface-2); | |
| color: var(--text-primary); | |
| font-family: var(--font-display); | |
| } | |
| /* ─── PLAYER CONTROLS ─── */ | |
| .player-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| flex-shrink: 0; | |
| } | |
| .ctrl-btn { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border-bright); | |
| color: var(--text-primary); | |
| font-family: var(--font-display); | |
| font-size: 11px; | |
| font-weight: 500; | |
| padding: 4px 10px; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| line-height: 1.4; | |
| letter-spacing: 0.04em; | |
| transition: background 0.1s, border-color 0.1s; | |
| } | |
| .ctrl-btn:hover:not(:disabled) { | |
| background: var(--surface); | |
| border-color: var(--text-dim); | |
| } | |
| .ctrl-btn:disabled { | |
| opacity: 0.35; | |
| cursor: not-allowed; | |
| } | |
| .ctrl-btn.play { | |
| border-color: var(--valley); | |
| color: var(--valley); | |
| } | |
| .ctrl-btn.play:hover:not(:disabled) { | |
| background: rgba(56, 189, 248, 0.1); | |
| } | |
| .ctrl-step-display { | |
| font-family: var(--font-display); | |
| font-size: 11px; | |
| color: var(--text-dim); | |
| padding: 4px 8px; | |
| border: 1px solid var(--border); | |
| background: var(--bg); | |
| white-space: nowrap; | |
| min-width: 72px; | |
| text-align: center; | |
| } | |
| /* ─── LOADING / ERROR ─── */ | |
| .app-overlay { | |
| position: fixed; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg); | |
| z-index: 100; | |
| } | |
| .overlay-message { | |
| font-family: var(--font-display); | |
| font-size: 13px; | |
| letter-spacing: 0.1em; | |
| color: var(--text-dim); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .pulse-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--valley); | |
| animation: pulse 1.2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.2; transform: scale(0.8); } | |
| 50% { opacity: 1; transform: scale(1); } | |
| } | |
| /* ─── MISC ─── */ | |
| .episode-loading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 12px 16px; | |
| font-family: var(--font-display); | |
| font-size: 11px; | |
| color: var(--text-dim); | |
| letter-spacing: 0.08em; | |
| } | |