. Cover every shape. */ body[data-world="burgundy"] .scrap-layer, body[data-world="burgundy"] .scrap-inline, body[data-world="burgundy"] .scrap, body[data-world="burgundy"] .decor, body[data-world="burgundy"] .deck-decor, body[data-world="burgundy"] .qss-decor, body[data-world="burgundy"] .floating-stickers, body[data-world="burgundy"] .sticker-deck, body[data-world="burgundy"] [class*="sticker-"], body[data-world="burgundy"] [data-decor] { display: none !important; } /* Story-card covers — QSS uses /decor/dragon-fierce.jpg etc. for the * thumbnail. Under Burgundy these are wrong (Kevin / Benny / school). * Hide the cover image, replace with a Burgundy painterly tile via * background-image. The decorFor() rotation that picks DECOR images is * QSS-only; cleaner to override on the CSS layer than rewire the JS. * * Hide the embedded QSS image, then paint a Burgundy background based on * card position (cheap pseudo-randomness). */ body[data-world="burgundy"] .story-card .cover img, body[data-world="burgundy"] .story-card .cover.deco img { display: none !important; } body[data-world="burgundy"] .story-card .cover, body[data-world="burgundy"] .story-card .cover.deco { background-color: var(--paper-deep); background-size: cover; background-position: center; padding: 0; border: 1px solid rgba(232, 162, 72, 0.18); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5); } /* Rotate through six Burgundy painterly thumbnails by card position */ body[data-world="burgundy"] .story-card:nth-of-type(6n+1) .cover { background-image: url('/queen-scarlet-school/worlds/burgundy/palace-exterior.jpg'); } body[data-world="burgundy"] .story-card:nth-of-type(6n+2) .cover { background-image: url('/queen-scarlet-school/worlds/burgundy/mining-rico.jpg'); } body[data-world="burgundy"] .story-card:nth-of-type(6n+3) .cover { background-image: url('/queen-scarlet-school/worlds/burgundy/peasant-miners.jpg'); } body[data-world="burgundy"] .story-card:nth-of-type(6n+4) .cover { background-image: url('/queen-scarlet-school/worlds/burgundy/msdos-terminal-closeup.jpg'); } body[data-world="burgundy"] .story-card:nth-of-type(6n+5) .cover { background-image: url('/queen-scarlet-school/worlds/burgundy/throne-room-siege.jpg'); } body[data-world="burgundy"] .story-card:nth-of-type(6n+6) .cover { background-image: url('/queen-scarlet-school/worlds/burgundy/smuggler-ship.jpg'); } /* Wordy SVG vanishes — RICO_MK1 takes its place via worlds.js injection */ body[data-world="burgundy"] .dragon > svg { display: none !important; } /* RICO_MK1 SVG sizing — matches the dragon container scales */ body[data-world="burgundy"] .rico-mk1 { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 14px rgba(91, 214, 138, 0.18)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); } body[data-world="burgundy"] .dragon.sm .rico-mk1 { width: 36px; height: 36px; } body[data-world="burgundy"] .dragon.md .rico-mk1 { width: 56px; height: 56px; } body[data-world="burgundy"] .dragon.lg .rico-mk1 { width: 88px; height: 88px; transform: none; } body[data-world="burgundy"] .dragon.xl .rico-mk1 { width: 120px; height: 120px; transform: none; } body[data-world="burgundy"] .dragon:hover { transform: none; } /* ─── Library page intro (Burgundy-flavored) ─────────────────────────── */ body[data-world="burgundy"] .page-intro { background: rgba(15, 30, 38, 0.78); border: 1px solid rgba(232, 162, 72, 0.22); border-radius: 6px; padding: 22px 26px; backdrop-filter: blur(8px) saturate(1.05); box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.06), 0 8px 24px rgba(0, 0, 0, 0.55); } body[data-world="burgundy"] .page-intro h1 { color: var(--ink-bright); } body[data-world="burgundy"] .page-intro .sub { color: var(--ink-soft); } body[data-world="burgundy"] .lib-count { background: rgba(232, 162, 72, 0.16); border: 1px solid rgba(232, 162, 72, 0.45); color: var(--ink-bright); box-shadow: none; } body[data-world="burgundy"] .banner { background: linear-gradient(180deg, rgba(184, 68, 58, 0.32), rgba(122, 42, 35, 0.42)); border: 1px solid rgba(184, 68, 58, 0.55); color: var(--ink-bright); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); } body[data-world="burgundy"] .banner code { background: rgba(8, 18, 24, 0.82); border: 1px solid rgba(184, 68, 58, 0.32); color: var(--sky); } /* App shell — Burgundy app needs a transparent app container so the * background painting reads through. */ body[data-world="burgundy"] .app, body[data-world="burgundy"] main.page { background: transparent; } /* ─── Burgundy chat composer — minimal enterprise treatment ───────────── * * The composer becomes a single utility row inside a dark phosphor panel: * mic | textarea | send. No sticker buttons. No rounded pills. No mode * toggle visible (the toggle still exists in QSS; under Burgundy it * collapses out of view because Henry just types and sends). * * Send button reads as a flat amber-rimmed lever, not a red sticker. * Mic button reads as a square machined button with a faint phosphor * glow when active. Composer-modes hidden — Burgundy doesn't expose the * ask/verbatim toggle (the underlying mode still works; default = ask). * ──────────────────────────────────────────────────────────────────── */ body[data-world="burgundy"] .composer, body[data-world="burgundy"] .chat-composer { padding: 10px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } /* Hide the QSS toggle pills + the helper buttons we removed from the * composer — Burgundy chat is just type-and-send. */ body[data-world="burgundy"] .composer-modes, body[data-world="burgundy"] .composer .stuck-btn, body[data-world="burgundy"] .composer .touch-base-btn, body[data-world="burgundy"] .composer .story-report-btn, body[data-world="burgundy"] .chat-composer .composer-modes, body[data-world="burgundy"] .chat-composer .stuck-btn, body[data-world="burgundy"] .chat-composer .touch-base-btn, body[data-world="burgundy"] .chat-composer .story-report-btn, body[data-world="burgundy"] #btn-stuck, body[data-world="burgundy"] #btn-story-report { display: none !important; } /* Textarea — expand to fill the row, terminal-style */ body[data-world="burgundy"] .composer textarea, body[data-world="burgundy"] .chat-composer textarea, body[data-world="burgundy"] #kid-input { flex: 1 1 auto; min-height: 38px; padding: 8px 10px; background: transparent; border: 1px solid rgba(91, 214, 138, 0.18); border-radius: 2px; color: #D4F5DE; font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace); font-size: 14px; line-height: 1.45; resize: none; box-shadow: inset 0 0 12px rgba(0,0,0,0.45); } body[data-world="burgundy"] .composer textarea:focus, body[data-world="burgundy"] .chat-composer textarea:focus, body[data-world="burgundy"] #kid-input:focus { border-color: rgba(91, 214, 138, 0.55); box-shadow: inset 0 0 12px rgba(0,0,0,0.45), 0 0 0 1px rgba(232, 162, 72, 0.32); } /* Mic — square brushed-metal button instead of QSS round red */ body[data-world="burgundy"] .mic-btn, body[data-world="burgundy"] #btn-mic { width: 44px; height: 44px; border-radius: 4px; background: linear-gradient(180deg, #294050 0%, #1A2D38 100%); border: 1px solid rgba(232, 217, 184, 0.20); color: var(--ink-bright); box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.10), 0 2px 6px rgba(0, 0, 0, 0.45); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 140ms ease; flex-shrink: 0; } body[data-world="burgundy"] .mic-btn:hover, body[data-world="burgundy"] #btn-mic:hover { border-color: rgba(232, 162, 72, 0.55); box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.15), 0 0 0 1px rgba(232, 162, 72, 0.22); } body[data-world="burgundy"] .mic-btn.listening, body[data-world="burgundy"] #btn-mic.listening { border-color: rgba(91, 214, 138, 0.75); box-shadow: 0 0 0 1px rgba(91, 214, 138, 0.45), 0 0 18px rgba(91, 214, 138, 0.32); } body[data-world="burgundy"] .mic-label, body[data-world="burgundy"] #mic-label { display: none; /* hide the playful "talk!" label under Burgundy */ } /* Send button — flat amber-rimmed lever */ body[data-world="burgundy"] #btn-ask, body[data-world="burgundy"] .composer .btn.primary, body[data-world="burgundy"] .chat-composer .btn.primary { background: linear-gradient(180deg, #B07628 0%, #7A4A18 100%); color: #FFF5DC; border: 1px solid #C68930; border-radius: 4px; padding: 9px 18px; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,0.45); box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.45); flex-shrink: 0; transform: none; } body[data-world="burgundy"] #btn-ask:hover { background: linear-gradient(180deg, #D67A3E 0%, #8A4A18 100%); box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.40), 0 4px 14px rgba(214, 122, 62, 0.32); } body[data-world="burgundy"] #btn-ask .arrow { display: none; /* arrow glyph is QSS-style; under Burgundy the label alone is enough */ } /* ─── Burgundy welcome hero — terminal init feel ──────────────────────── */ body[data-world="burgundy"] .welcome-hero { background: transparent; padding: 24px 20px; border: 0; box-shadow: none; text-align: left; } body[data-world="burgundy"] .welcome-hero::before { content: 'RICO_MK1 // SESSION INIT'; display: block; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.28em; color: var(--sky); text-transform: uppercase; margin-bottom: 14px; opacity: 0.75; text-shadow: 0 0 8px rgba(91, 214, 138, 0.32); } body[data-world="burgundy"] .wh-title { font-family: var(--display, 'Sailing Club', serif); color: var(--ink-bright); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; letter-spacing: 0; text-shadow: 0 2px 6px rgba(0,0,0,0.5); } body[data-world="burgundy"] .wh-name { color: var(--yolk); text-shadow: 0 0 14px rgba(232, 162, 72, 0.38); } body[data-world="burgundy"] .wh-cta { background: linear-gradient(180deg, #C24A40 0%, #7A2A23 100%); border: 1px solid #5C1F18; color: #FAF1DA; font-family: var(--mono, ui-monospace, monospace); font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; padding: 12px 22px; border-radius: 4px; text-shadow: 0 1px 0 rgba(0,0,0,0.5); box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.18), 0 3px 12px rgba(122, 42, 35, 0.45), 0 0 18px rgba(184, 68, 58, 0.25); margin-top: 20px; } body[data-world="burgundy"] .wh-cta:hover { background: linear-gradient(180deg, #D55449 0%, #8A2F26 100%); transform: translateY(-1px); } /* ─── Burgundy story-pane toolbar — heavy machined controls ───────────── */ body[data-world="burgundy"] .pane-ctrl-btn { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 12px; background: linear-gradient(180deg, #294050 0%, #1A2D38 100%); border: 1px solid rgba(232, 217, 184, 0.18); border-radius: 4px; color: var(--ink-bright); box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.10), 0 2px 6px rgba(0, 0, 0, 0.45); transform: none; } body[data-world="burgundy"] .pane-ctrl-btn:hover { background: linear-gradient(180deg, #324A5C 0%, #213846 100%); border-color: rgba(232, 162, 72, 0.45); transform: none; } body[data-world="burgundy"] .pane-ctrl-btn.pane-ctrl-primary { background: linear-gradient(180deg, #C24A40 0%, #7A2A23 100%); color: var(--ink-bright); border-color: #5C1F18; box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.18), 0 3px 10px rgba(122, 42, 35, 0.45), 0 0 16px rgba(184, 68, 58, 0.22); } body[data-world="burgundy"] .pane-ctrl-btn.pane-ctrl-primary:hover { background: linear-gradient(180deg, #D55449 0%, #8A2F26 100%); box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.22), 0 4px 14px rgba(184, 68, 58, 0.32); } body[data-world="burgundy"] .font-size-ctrl { background: linear-gradient(180deg, #294050 0%, #1A2D38 100%); border: 1px solid rgba(232, 217, 184, 0.18); border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } body[data-world="burgundy"] .font-size-ctrl button { color: var(--ink-bright); background: transparent; border: 0; } body[data-world="burgundy"] .font-size-ctrl button.active { background: rgba(232, 162, 72, 0.18); color: var(--yolk); } /* ─── Universal: hide the floating mic-label "talk!" too aggressive? ─── * Keep mic-label visible in QSS, hidden in Burgundy (already above). */ /* ═══════════════════════════════════════════════════════════════════════ * BURGUNDY V2 — Painterly Dev Terminal (Designer v2 spec, diff over v1) * * Source: queen-scarlet-school/burgundy-design-v2.md * * Key stance: the composer is NOT a CRT screen. CRT lives only inside * RICO's face and the corner fragments + scanline grain on the canvas. * The composer is clean machined chrome with one amber caret. * ═══════════════════════════════════════════════════════════════════════ */ /* ─── A. Dual-light rim mixin ─────────────────────────────────────────── */ body[data-world="burgundy"] .machined, body[data-world="burgundy"] .btn, body[data-world="burgundy"] .composer, body[data-world="burgundy"] .story-block, body[data-world="burgundy"] .story-card, body[data-world="burgundy"] .ccard, body[data-world="burgundy"] .pane-ctrl-btn, body[data-world="burgundy"] .mic-btn, body[data-world="burgundy"] #btn-ask, body[data-world="burgundy"] .welcome-hero .wh-cta { box-shadow: inset 1px 1px 0 rgba(232, 162, 72, 0.18), inset 2px 2px 0 rgba(232, 162, 72, 0.06), inset -1px -1px 0 rgba(0, 0, 0, 0.55), inset -2px -2px 0 rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.45); border: 1px solid rgba(232, 217, 184, 0.14); } body[data-world="burgundy"] .machined:hover, body[data-world="burgundy"] .btn:hover, body[data-world="burgundy"] .pane-ctrl-btn:hover { border-color: rgba(232, 162, 72, 0.40); box-shadow: inset 1px 1px 0 rgba(232, 162, 72, 0.28), inset 2px 2px 0 rgba(232, 162, 72, 0.10), inset -1px -1px 0 rgba(0, 0, 0, 0.55), inset -2px -2px 0 rgba(0, 0, 0, 0.28), 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 18px rgba(232, 162, 72, 0.14); } body[data-world="burgundy"] .machined:active, body[data-world="burgundy"] .btn:active, body[data-world="burgundy"] .pane-ctrl-btn:active { box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.55), inset -1px -1px 0 rgba(232, 162, 72, 0.10), 0 1px 2px rgba(0, 0, 0, 0.35); transform: translateY(1px); } /* ─── B. Chat composer — single-row machined panel ────────────────────── */ body[data-world="burgundy"] .composer, body[data-world="burgundy"] .composer.with-mic, body[data-world="burgundy"] .chat-composer { transform: none !important; border-radius: 4px !important; box-shadow: none; } body[data-world="burgundy"] .composer textarea, body[data-world="burgundy"] .composer textarea:focus, body[data-world="burgundy"] .chat-composer textarea, body[data-world="burgundy"] .chat-composer textarea:focus, body[data-world="burgundy"] #kid-input { transform: none !important; box-shadow: none !important; border-radius: 2px !important; } body[data-world="burgundy"] .composer-modes .mode-btn, body[data-world="burgundy"] #btn-mic, body[data-world="burgundy"] .mic-btn, body[data-world="burgundy"] #btn-ask { transform: none !important; border-radius: 3px !important; box-shadow: none; } body[data-world="burgundy"] .composer.with-mic { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: 1fr auto; column-gap: 0; row-gap: 0; align-items: stretch; padding: 0; background: linear-gradient(180deg, rgba(15, 30, 38, 0.78) 0%, rgba(8, 18, 24, 0.86) 100%); border: 1px solid rgba(232, 217, 184, 0.14); border-radius: 4px; backdrop-filter: blur(10px) saturate(1.08); position: relative; } body[data-world="burgundy"] .composer.with-mic::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(232, 162, 72, 0.10) 25%, rgba(232, 162, 72, 0.32) 50%, rgba(232, 162, 72, 0.10) 75%, transparent 100%); pointer-events: none; } body[data-world="burgundy"] .composer.with-mic textarea, body[data-world="burgundy"] .composer.with-mic #kid-input { grid-column: 2; grid-row: 1; margin: 0; padding: 12px 14px; background: transparent; border: none; border-left: 1px solid rgba(232, 217, 184, 0.10); border-right: 1px solid rgba(232, 217, 184, 0.10); color: var(--ink-bright); font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace); font-size: 14px; line-height: 1.5; letter-spacing: 0.005em; caret-color: var(--yolk); text-shadow: none; resize: none; min-height: 56px; } body[data-world="burgundy"] .composer.with-mic textarea::placeholder, body[data-world="burgundy"] .composer.with-mic #kid-input::placeholder { color: rgba(232, 217, 184, 0.36); font-style: normal; } body[data-world="burgundy"] .composer.with-mic:focus-within::after { background: linear-gradient(90deg, transparent 0%, rgba(232, 162, 72, 0.22) 20%, rgba(232, 162, 72, 0.55) 50%, rgba(232, 162, 72, 0.22) 80%, transparent 100%); box-shadow: 0 0 12px rgba(232, 162, 72, 0.25); } /* B.2 Mic button */ body[data-world="burgundy"] .composer.with-mic .mic-btn, body[data-world="burgundy"] #btn-mic { grid-column: 1; grid-row: 1; width: 44px; height: 100%; min-height: 56px; margin: 0; padding: 0; background: linear-gradient(155deg, rgba(36, 56, 68, 0.92) 0%, rgba(20, 36, 46, 0.96) 60%, rgba(8, 18, 24, 0.98) 100%); border: none; border-right: 1px solid rgba(232, 217, 184, 0.08); border-radius: 4px 0 0 4px; display: flex; align-items: center; justify-content: center; transition: background 140ms ease-out; } body[data-world="burgundy"] .mic-btn:hover { background: linear-gradient(155deg, rgba(48, 68, 80, 0.94) 0%, rgba(28, 44, 54, 0.96) 60%, rgba(12, 22, 28, 0.98) 100%); transform: none !important; } body[data-world="burgundy"] .mic-btn svg { width: 22px; height: 22px; } body[data-world="burgundy"] .mic-btn.listening { background: linear-gradient(155deg, rgba(48, 68, 80, 0.94) 0%, rgba(28, 44, 54, 0.96) 100%); animation: none; } body[data-world="burgundy"] .mic-btn.listening svg { filter: drop-shadow(0 0 6px rgba(232, 69, 69, 0.65)) drop-shadow(0 0 14px rgba(232, 69, 69, 0.32)); animation: bg-led-pulse 1.1s ease-in-out infinite; } @keyframes bg-led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } body[data-world="burgundy"] .mic-btn .mic-label, body[data-world="burgundy"] .mic-btn .listening-pip { display: none !important; } /* B.3 Send button — heavy machined sienna lever */ body[data-world="burgundy"] .composer.with-mic #btn-ask, body[data-world="burgundy"] #btn-ask { grid-column: 3; grid-row: 1; align-self: stretch; margin: 0; padding: 0 22px; min-height: 56px; border: none; border-left: 1px solid rgba(232, 217, 184, 0.08); border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #B8443A 0%, #9A382F 45%, #6E2820 100%); color: #F4E6C4; font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace); font-size: 12px; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); cursor: pointer; position: relative; transition: filter 140ms ease-out, background 140ms ease-out; box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.22), inset 1px 1px 0 rgba(244, 196, 142, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.55), inset -1px -1px 0 rgba(0, 0, 0, 0.32), 0 0 18px rgba(184, 68, 58, 0.22) !important; } body[data-world="burgundy"] #btn-ask:hover { background: linear-gradient(180deg, #C84A3F 0%, #A93C32 45%, #7A2A23 100%); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.28), inset 1px 1px 0 rgba(244, 196, 142, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.55), inset -1px -1px 0 rgba(0, 0, 0, 0.32), 0 0 28px rgba(184, 68, 58, 0.32) !important; } body[data-world="burgundy"] #btn-ask:active { background: linear-gradient(180deg, #8A3329 0%, #6E2820 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(232, 162, 72, 0.18) !important; transform: translateY(1px); } body[data-world="burgundy"] #btn-ask .arrow { display: none; } /* B.4 Mode pills → terminal tabs (v2 brings them back as visible tabs) */ body[data-world="burgundy"] .composer-modes { display: flex !important; grid-column: 1 / -1; grid-row: 2; align-items: stretch; gap: 0; padding: 0; margin: 0; background: rgba(8, 18, 24, 0.55); border: none; border-top: 1px solid rgba(232, 217, 184, 0.10); border-radius: 0 0 4px 4px; } body[data-world="burgundy"] .composer-modes .mode-btn { flex: 0 0 auto; padding: 8px 16px; background: transparent !important; border: none !important; border-right: 1px solid rgba(232, 217, 184, 0.06) !important; border-radius: 0 !important; color: rgba(232, 217, 184, 0.55); font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; position: relative; transition: color 120ms ease-out; box-shadow: none !important; } body[data-world="burgundy"] .composer-modes .mode-btn:last-child { border-right: none !important; } body[data-world="burgundy"] .composer-modes .mode-btn:hover:not(.active) { color: var(--ink); background: rgba(232, 162, 72, 0.04) !important; } body[data-world="burgundy"] .composer-modes .mode-btn.active { color: var(--ink-bright); background: transparent !important; } body[data-world="burgundy"] .composer-modes .mode-btn.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--yolk); box-shadow: 0 0 10px rgba(232, 162, 72, 0.55); } body[data-world="burgundy"] .composer-modes .mode-btn.active::before { content: '> '; color: var(--yolk); margin-right: 4px; opacity: 0.85; } /* ─── C. Story blocks — worn-page treatment ──────────────────────────── */ body[data-world="burgundy"] .story-block, body[data-world="burgundy"] .story-block:nth-child(odd), body[data-world="burgundy"] .story-block:nth-child(even) { transform: none !important; box-shadow: none !important; border-radius: 4px !important; } body[data-world="burgundy"] .story-block:hover { transform: none !important; } body[data-world="burgundy"] .story-block:nth-child(4n+1) .b-num, body[data-world="burgundy"] .story-block:nth-child(4n+2) .b-num, body[data-world="burgundy"] .story-block:nth-child(4n+3) .b-num, body[data-world="burgundy"] .story-block:nth-child(4n+4) .b-num { background: none !important; } body[data-world="burgundy"] .story-block { background: radial-gradient(ellipse at 30% 20%, rgba(232, 217, 184, 0.04) 0%, transparent 60%), linear-gradient(155deg, rgba(58, 50, 38, 0.88) 0%, rgba(40, 34, 26, 0.92) 50%, rgba(26, 22, 18, 0.96) 100%); border: 1px solid rgba(232, 217, 184, 0.14); padding: 14px 16px 14px 64px; position: relative; transition: border-color 160ms ease-out, box-shadow 160ms ease-out; } body[data-world="burgundy"] .story-block::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.20) 100%), linear-gradient(90deg, transparent 80%, rgba(0,0,0,0.18) 100%); mix-blend-mode: multiply; opacity: 0.85; } body[data-world="burgundy"] .story-block:hover { border-color: rgba(232, 162, 72, 0.42); box-shadow: inset 1px 1px 0 rgba(232, 162, 72, 0.28), inset 2px 2px 0 rgba(232, 162, 72, 0.10), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 36px rgba(232, 162, 72, 0.10); } /* C.2 Bronze medallion */ body[data-world="burgundy"] .story-block .b-num { position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #D89A4A 0%, #A86E26 35%, #5C3712 100%) !important; color: #1A0F0C !important; font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace); font-size: 13px; font-weight: 800; letter-spacing: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #2E1A08; box-shadow: inset 0 1px 1px rgba(255, 220, 160, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(232, 217, 184, 0.10); text-shadow: 0 1px 0 rgba(255, 220, 160, 0.32); } /* C.3 Block typography */ body[data-world="burgundy"] .story-block .b-summary { font-family: 'Cambo', var(--serif), Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.45; color: var(--ink-bright); letter-spacing: 0; } body[data-world="burgundy"] .story-block .b-summary:hover { color: #FFF6E0; } body[data-world="burgundy"] .story-block .b-text { font-family: 'Cambo', var(--serif), Georgia, serif; font-style: normal; font-size: 16px; line-height: 1.7; color: var(--ink); } body[data-world="burgundy"] .story-block .b-summary .chev { color: var(--yolk); opacity: 0.55; } body[data-world="burgundy"] .story-block.expanded .b-summary .chev { opacity: 0.85; } /* C.4 Karaoke / playing / editing */ body[data-world="burgundy"] .story-block.karaoke { background: linear-gradient(155deg, rgba(72, 60, 42, 0.92) 0%, rgba(50, 42, 30, 0.95) 100%); border-color: rgba(232, 162, 72, 0.55); box-shadow: inset 1px 1px 0 rgba(232, 162, 72, 0.38), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 6px 28px rgba(0, 0, 0, 0.55), 0 0 32px rgba(232, 162, 72, 0.22); } body[data-world="burgundy"] .story-block.karaoke .b-num { background: radial-gradient(circle at 35% 30%, #F4C66A 0%, #C8852E 35%, #6E430E 100%) !important; } body[data-world="burgundy"] .story-block .b-text .b-word.active { background: rgba(232, 162, 72, 0.28); color: #FFF6E0; text-shadow: 0 0 10px rgba(232, 162, 72, 0.45); } body[data-world="burgundy"] .story-block.editing .b-text { background: rgba(8, 24, 16, 0.55); border: 1px dashed rgba(91, 214, 138, 0.55); color: #D4F5DE; font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace); font-size: 14px; caret-color: var(--sky); } /* ─── D. Pane-control toolbar ─────────────────────────────────────────── */ body[data-world="burgundy"] .pane-ctrl-btn { padding: 7px 13px; font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: linear-gradient(180deg, rgba(36, 56, 68, 0.88) 0%, rgba(20, 36, 46, 0.94) 100%); border: 1px solid rgba(232, 217, 184, 0.14); border-radius: 3px !important; transform: none !important; transition: border-color 140ms ease-out, color 140ms ease-out; } body[data-world="burgundy"] .pane-ctrl-btn:hover { background: linear-gradient(180deg, rgba(48, 68, 80, 0.92) 0%, rgba(28, 44, 54, 0.96) 100%); border-color: rgba(232, 162, 72, 0.32); color: var(--ink-bright); transform: none !important; } body[data-world="burgundy"] .pane-ctrl-btn.ghost { background: rgba(15, 30, 38, 0.45); border-style: dashed; border-color: rgba(232, 217, 184, 0.18); box-shadow: none !important; } body[data-world="burgundy"] .pane-ctrl-btn.playing { background: linear-gradient(180deg, rgba(72, 60, 42, 0.95) 0%, rgba(50, 42, 30, 0.98) 100%); border-color: rgba(232, 162, 72, 0.65); color: #FFF6E0; animation: bg-pane-playing 1.4s ease-in-out infinite; } @keyframes bg-pane-playing { 0%, 100% { box-shadow: inset 1px 1px 0 rgba(232, 162, 72, 0.38), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 16px rgba(232, 162, 72, 0.22); } 50% { box-shadow: inset 1px 1px 0 rgba(232, 162, 72, 0.55), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 28px rgba(232, 162, 72, 0.42); } } body[data-world="burgundy"] .pane-ctrl-btn.pane-ctrl-primary { padding: 8px 18px; font-size: 12px; color: #FFF6E0; background: linear-gradient(180deg, #2C4858 0%, #1F3644 50%, #102230 100%); border-color: rgba(232, 162, 72, 0.32); position: relative; box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.18), inset 1px 1px 0 rgba(232, 162, 72, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.50), 0 0 20px rgba(232, 162, 72, 0.12) !important; } body[data-world="burgundy"] .pane-ctrl-btn.pane-ctrl-primary::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 1.5px; background: var(--yolk); box-shadow: 0 0 10px rgba(232, 162, 72, 0.55); pointer-events: none; } body[data-world="burgundy"] .pane-ctrl-btn.pane-ctrl-primary:hover { background: linear-gradient(180deg, #355368 0%, #284052 50%, #142A38 100%); border-color: rgba(232, 162, 72, 0.55); box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.24), inset 1px 1px 0 rgba(232, 162, 72, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 32px rgba(232, 162, 72, 0.22) !important; } /* ─── E. Welcome hero — boots like a terminal ─────────────────────────── */ body[data-world="burgundy"] .welcome-hero { background: transparent !important; border: none !important; box-shadow: none !important; padding: 36px 0 28px; position: relative; text-align: left; } body[data-world="burgundy"] .welcome-hero::before { content: 'RICO_MK1 // INIT —'; display: block; font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--yolk); text-shadow: 0 0 10px rgba(232, 162, 72, 0.35); margin-bottom: 14px; opacity: 0.95; } body[data-world="burgundy"] .welcome-hero .wh-title { font-family: 'Cambo', var(--serif), Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; letter-spacing: 0; color: var(--ink-bright); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65); margin: 0 0 22px 0; transform: none !important; } body[data-world="burgundy"] .welcome-hero .wh-title .wh-name { color: #FFF6E0 !important; font-style: italic; font-weight: 600; background: none !important; padding: 0 !important; border: none !important; box-shadow: none !important; transform: none !important; position: relative; display: inline-block; text-decoration: none; border-bottom: 2px solid var(--yolk); padding-bottom: 1px !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), 0 0 18px rgba(232, 162, 72, 0.22); } body[data-world="burgundy"] .welcome-hero .wh-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: linear-gradient(180deg, #2C4858 0%, #1F3644 50%, #102230 100%); color: #FFF6E0; border: 1px solid rgba(232, 162, 72, 0.32); border-radius: 3px; font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace); font-size: 12px; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); position: relative; transform: none !important; transition: border-color 140ms ease-out, filter 140ms ease-out; } body[data-world="burgundy"] .welcome-hero .wh-cta::before { content: '> '; color: var(--yolk); font-weight: 700; opacity: 0.95; } body[data-world="burgundy"] .welcome-hero .wh-cta:hover { border-color: rgba(232, 162, 72, 0.65); filter: brightness(1.10); box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.22), inset 1px 1px 0 rgba(232, 162, 72, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 26px rgba(232, 162, 72, 0.25) !important; transform: none !important; } body[data-world="burgundy"] .welcome-hero .wh-cta:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(232, 162, 72, 0.18) !important; transform: translateY(1px) !important; } /* ─── F. Pattern interrupt — RICO eye on the active block ─────────────── */ body[data-world="burgundy"] .story-block.playing .b-num { background: #0A1A10 !important; border: 1px solid #2E1A08; color: transparent !important; position: absolute; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75), inset 0 0 12px rgba(91, 214, 138, 0.32), 0 0 18px rgba(91, 214, 138, 0.28), 0 0 0 2px rgba(232, 217, 184, 0.10); overflow: hidden; } body[data-world="burgundy"] .story-block.playing .b-num::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: var(--sky); border-radius: 1px; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(91, 214, 138, 0.85), 0 0 14px rgba(91, 214, 138, 0.45); animation: bg-rico-eye-blink 4.5s ease-in-out infinite; } body[data-world="burgundy"] .story-block.playing .b-num::before { content: ''; position: absolute; inset: 1px; border-radius: 50%; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0.25) 1px, transparent 1px, transparent 3px ); pointer-events: none; } @keyframes bg-rico-eye-blink { 0%, 55%, 65%, 100% { height: 8px; opacity: 1; } 60% { height: 1px; opacity: 0.7; } } /* The chrome is the workshop. The story is the cloak. RICO is the eye. One lamp, one machine, one voice — and Henry's words across all of it. */ /* ═══════════════════════════════════════════════════════════════════════ * BURGUNDY V2.1 — chrome that v2 missed * * Phase tabs, the cast pill, save-pill, story title input, "+ Add my own * block" — all of these were still wearing QSS sticker chrome under * Burgundy because they have their own classes (not .btn). Sweep them. * ═══════════════════════════════════════════════════════════════════════ */ /* Phase tabs (Write with Wordy / Storyboard / Freestyle) */ body[data-world="burgundy"] .tab { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); background: linear-gradient(180deg, rgba(36, 56, 68, 0.88) 0%, rgba(20, 36, 46, 0.94) 100%); border: 1px solid rgba(232, 217, 184, 0.14); border-radius: 3px !important; box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.10), 0 2px 6px rgba(0, 0, 0, 0.45); padding: 8px 16px 14px 16px; transform: none !important; position: relative; } body[data-world="burgundy"] .tab:hover { background: linear-gradient(180deg, rgba(48, 68, 80, 0.92) 0%, rgba(28, 44, 54, 0.96) 100%); border-color: rgba(232, 162, 72, 0.32); color: var(--ink-bright); transform: none !important; box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.15), 0 3px 12px rgba(0, 0, 0, 0.55), 0 0 18px rgba(232, 162, 72, 0.14); } body[data-world="burgundy"] .tab.active { background: linear-gradient(180deg, #C24A40 0%, #9A382F 45%, #6E2820 100%) !important; color: #FFF6E0; border-color: #5C1F18; transform: none !important; box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 3px 10px rgba(122, 42, 35, 0.45), 0 0 18px rgba(184, 68, 58, 0.28); } body[data-world="burgundy"] .tab .step-num { background: rgba(8, 18, 24, 0.65) !important; border: 1px solid rgba(232, 217, 184, 0.22) !important; color: var(--ink-bright); width: 22px; height: 22px; font-family: var(--mono, monospace); font-size: 11px; } body[data-world="burgundy"] .tab.active .step-num { background: rgba(8, 18, 24, 0.72) !important; border-color: rgba(232, 162, 72, 0.55) !important; color: var(--yolk); } body[data-world="burgundy"] .tab .count-pill { background: rgba(91, 214, 138, 0.18) !important; border: 1px solid rgba(91, 214, 138, 0.45) !important; color: var(--sky); font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.12em; transform: none !important; box-shadow: none !important; padding: 1px 8px; } /* Save / status pill ("local only", "saving", etc.) */ body[data-world="burgundy"] .save-pill { background: rgba(8, 18, 24, 0.65) !important; border: 1px solid rgba(232, 217, 184, 0.18) !important; color: var(--ink-soft) !important; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; padding: 5px 11px; border-radius: 3px !important; box-shadow: none !important; animation: none !important; } body[data-world="burgundy"] .save-pill[data-state="saving"], body[data-world="burgundy"] .save-pill[data-state="dirty"] { background: rgba(232, 162, 72, 0.12) !important; border-color: rgba(232, 162, 72, 0.45) !important; color: var(--yolk) !important; } body[data-world="burgundy"] .save-pill[data-state="conflict"], body[data-world="burgundy"] .save-pill[data-state="error"] { background: rgba(184, 68, 58, 0.18) !important; border-color: rgba(184, 68, 58, 0.55) !important; color: #E8C0B5 !important; } /* "the cast" button in topbar (.btn-cast with the deck SVG) */ body[data-world="burgundy"] .btn-cast { background: linear-gradient(180deg, rgba(36, 56, 68, 0.88) 0%, rgba(20, 36, 46, 0.94) 100%) !important; border: 1px solid rgba(232, 217, 184, 0.18) !important; border-radius: 3px !important; color: var(--ink-bright); font-family: var(--mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 13px; box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.10), 0 2px 6px rgba(0, 0, 0, 0.45) !important; transform: none !important; } body[data-world="burgundy"] .btn-cast:hover { border-color: rgba(232, 162, 72, 0.45) !important; transform: none !important; } body[data-world="burgundy"] .btn-cast:active { transform: translateY(1px) !important; } /* The cast-deck SVG cards inside the cast button — recolor to bronze/teal */ body[data-world="burgundy"] .btn-cast .cast-deck span:nth-child(1) { background: #B8443A !important; } body[data-world="burgundy"] .btn-cast .cast-deck span:nth-child(2) { background: #3B5A6E !important; } body[data-world="burgundy"] .btn-cast .cast-deck span:nth-child(3) { background: #D89A4A !important; } body[data-world="burgundy"] .btn-cast .cast-count { background: rgba(91, 214, 138, 0.18) !important; border: 1px solid rgba(91, 214, 138, 0.55) !important; color: var(--sky); } /* Story title input (the "story-mpj1xkvk" header — currently green CRT, * which v2 says should ONLY live on RICO's face + corner fragments). * Burgundy treats it as a dark machined input. */ body[data-world="burgundy"] .story-title-input { background: rgba(8, 18, 24, 0.55) !important; border: 1px solid rgba(232, 217, 184, 0.18) !important; border-radius: 3px !important; color: var(--ink-bright) !important; font-family: var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; text-shadow: none !important; box-shadow: inset 0 1px 4px rgba(0,0,0,0.45) !important; } body[data-world="burgundy"] .story-title-input:hover, body[data-world="burgundy"] .story-title-input:focus { border-color: rgba(232, 162, 72, 0.55) !important; background: rgba(8, 18, 24, 0.65) !important; } body[data-world="burgundy"] .story-title-input::after { content: '' !important; } /* "+ Add my own block" composer button — was QSS red sticker plus. * Now a dashed machined panel with a small amber + icon. */ body[data-world="burgundy"] .own-block-add-btn { background: rgba(15, 30, 38, 0.45) !important; border: 1.5px dashed rgba(232, 162, 72, 0.42) !important; border-radius: 4px !important; color: var(--ink) !important; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 14px 18px; box-shadow: none !important; transform: none !important; } body[data-world="burgundy"] .own-block-add-btn:hover { background: rgba(232, 162, 72, 0.06) !important; border-color: rgba(232, 162, 72, 0.65) !important; color: var(--ink-bright) !important; transform: none !important; } body[data-world="burgundy"] .own-block-add-btn .plus { background: rgba(232, 162, 72, 0.18) !important; color: var(--yolk) !important; border: 1px solid rgba(232, 162, 72, 0.55) !important; box-shadow: none !important; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; } /* Egg chip ("0 found") */ body[data-world="burgundy"] .egg-chip { background: rgba(8, 18, 24, 0.55) !important; border: 1px solid rgba(232, 217, 184, 0.14) !important; color: var(--ink-soft) !important; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px !important; box-shadow: none !important; } /* Cast page detail-back / detail-delete + grid empty state copy */ body[data-world="burgundy"] .detail-back, body[data-world="burgundy"] .detail-delete { background: rgba(36, 56, 68, 0.88); border: 1px solid rgba(232, 217, 184, 0.18); border-radius: 3px; color: var(--ink-bright); font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 13px; box-shadow: 0 2px 6px rgba(0,0,0,0.45); transform: none !important; } /* Cast page save-all button — was sticker red */ body[data-world="burgundy"] .btn-save { background: linear-gradient(180deg, #B8443A 0%, #6E2820 100%) !important; border: 1px solid #5C1F18 !important; color: #F4E6C4 !important; font-family: var(--mono, monospace); font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; border-radius: 3px !important; padding: 8px 16px !important; transform: none !important; box-shadow: inset 0 1px 0 rgba(244, 230, 196, 0.22), 0 0 18px rgba(184, 68, 58, 0.22) !important; } /* ═══════════════════════════════════════════════════════════════════════ * UNIVERSE PAGE — stay cosmic even when a world is active * * The universe planet-picker page (/universe/) is OUTSIDE any specific * world. It must stay neutral cosmic regardless of which world's data * is stored in localStorage. Without this override, body[data-world= * "burgundy"].page-universe inherits the Burgundy palace-exterior hero * and leaks it behind the planets. Same for any future world. * ═══════════════════════════════════════════════════════════════════════ */ body.page-universe[data-world] { /* Reset to the universe page's own cosmic look — no world hero, no * scrim, no per-world tokens leaking through. The universe page has * its own background gradient + starfield canvas. */ background-image: none !important; background-color: transparent !important; } /* Kill the film-grain overlay only on the universe page */ body.page-universe[data-world="burgundy"]::before { display: none !important; } /* Hide Burgundy CRT corner fragments + motto on the universe page — * those are world-specific chrome, not universe chrome. */ body.page-universe .burgundy-decor, body.page-universe .burgundy-motto { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * STORY PANEL — READ MODE * * The base karaoke transport bar is a loud red rubber-stamp tilted * -0.3deg with hard ink-bright shadows — fine for the kid-tool QSS world, * but it fights the burgundy underworld aesthetic. Same with the yolk * pill word-highlight: it stamps each word like a button. * * Burgundy book-mode is a quiet "engineer reads his notebook" view — * candlelight on parchment, amber underline ticking through the words, * slim transport that sits politely above the page instead of dominating * it. This whole block is scoped to data-world="burgundy". * ═══════════════════════════════════════════════════════════════════════ */ /* ─── Sticky transport bar — slim, translucent, amber-lit ─────────────── */ body[data-world="burgundy"] .karaoke-bar { background: linear-gradient(180deg, rgba(20, 16, 12, 0.86) 0%, rgba(12, 9, 6, 0.94) 100%); color: #F4E9C8; border: 1px solid rgba(232, 162, 72, 0.30); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(232, 162, 72, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 8px 26px rgba(0, 0, 0, 0.45), 0 0 22px rgba(232, 162, 72, 0.10); padding: 7px 12px; gap: 12px; margin: 8px 6px 14px; transform: none !important; font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace); font-weight: 500; letter-spacing: 0.04em; backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); } body[data-world="burgundy"] .karaoke-bar.is-paused { background: linear-gradient(180deg, rgba(40, 30, 18, 0.88) 0%, rgba(26, 18, 8, 0.94) 100%); border-color: rgba(232, 162, 72, 0.46); color: #F4E9C8; } body[data-world="burgundy"] .karaoke-bar .kb-now { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 233, 200, 0.72); } /* Play / Stop — calm translucent buttons, no rubber-stamp shadow */ body[data-world="burgundy"] .karaoke-bar .kb-btn { width: 30px; height: 30px; background: rgba(232, 162, 72, 0.10); color: #F4E9C8; border: 1px solid rgba(232, 162, 72, 0.42); box-shadow: none; font-size: 12px; border-radius: 50%; transition: background 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out, transform 80ms ease-out; } body[data-world="burgundy"] .karaoke-bar .kb-btn:hover { background: rgba(232, 162, 72, 0.22); border-color: rgba(232, 162, 72, 0.70); transform: none; box-shadow: 0 0 12px rgba(232, 162, 72, 0.32); } body[data-world="burgundy"] .karaoke-bar .kb-btn:active { transform: scale(0.94); box-shadow: none; } body[data-world="burgundy"] .karaoke-bar .kb-btn.kb-big { width: 34px; height: 34px; background: rgba(232, 162, 72, 0.18); color: #FFF6E0; font-size: 13px; } body[data-world="burgundy"] .karaoke-bar .kb-btn.kb-big:hover { background: rgba(232, 162, 72, 0.32); } /* Speed selector — slim mono chips */ body[data-world="burgundy"] .karaoke-bar .kb-speed { gap: 0; padding: 2px; background: rgba(0, 0, 0, 0.34); border: 1px solid rgba(232, 162, 72, 0.24); border-radius: 3px; } body[data-world="burgundy"] .karaoke-bar .kb-speed button { font-family: var(--mono, ui-monospace, monospace); font-weight: 500; font-size: 10.5px; letter-spacing: 0.12em; color: rgba(244, 233, 200, 0.55); padding: 3px 8px; border-radius: 2px; transition: background 140ms ease-out, color 140ms ease-out; } body[data-world="burgundy"] .karaoke-bar .kb-speed button:hover { color: rgba(244, 233, 200, 0.85); } body[data-world="burgundy"] .karaoke-bar .kb-speed button.active { background: rgba(232, 162, 72, 0.22); color: #FFF6E0; box-shadow: inset 0 0 0 1px rgba(232, 162, 72, 0.50); } /* Progress bar — slim amber gradient that actually shows progress */ body[data-world="burgundy"] .karaoke-bar .kb-progress { flex: 1 1 auto; min-width: 80px; height: 2px; background: rgba(232, 162, 72, 0.14); border: none; border-radius: 999px; } body[data-world="burgundy"] .karaoke-bar .kb-progress .kb-fill { background: linear-gradient(90deg, rgba(232, 162, 72, 0.6) 0%, rgba(244, 198, 106, 1.0) 100%); box-shadow: 0 0 8px rgba(232, 162, 72, 0.45); } /* ─── Word highlight — soft amber underline, no pill-button stamp ──── */ body[data-world="burgundy"] .b-karaoke { font-family: 'Cambo', 'Crimson Pro', Georgia, serif; font-size: var(--story-font-size, 18.5px); line-height: 1.78; color: #F2E7CD; letter-spacing: 0.005em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.32); } body[data-world="burgundy"] .b-karaoke .ks-word { padding: 0; margin: 0; border-radius: 0; transition: color 140ms ease-out, box-shadow 140ms ease-out, text-shadow 140ms ease-out; } body[data-world="burgundy"] .b-karaoke .ks-word.ks-active { background: transparent; color: #FFF6E0; box-shadow: inset 0 -2px 0 rgba(244, 198, 106, 0.78); text-shadow: 0 0 10px rgba(232, 162, 72, 0.45); transform: none; } body[data-world="burgundy"] .b-karaoke .ks-word.ks-past { color: rgba(244, 233, 200, 0.45); text-shadow: none; } /* Karaoke pause hint — calmer */ body[data-world="burgundy"] .b-karaoke-hint { background: rgba(232, 162, 72, 0.10); border: 1px dashed rgba(232, 162, 72, 0.42); color: rgba(244, 233, 200, 0.72); font-family: var(--mono, ui-monospace, monospace); letter-spacing: 0.18em; } /* ─── BOOK VIEW — restrained chapter typography ───────────────────────── */ body[data-world="burgundy"] .story-book { max-width: 64ch; padding: 40px 44px 90px; font-family: 'Cambo', 'Crimson Pro', Georgia, serif; font-size: var(--story-font-size, 18.5px); line-height: 1.82; color: #F2E7CD; letter-spacing: 0.005em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.32); } body[data-world="burgundy"] .story-book .book-paragraph { margin: 0 0 1.05em 0; text-indent: 1.8em; color: #F2E7CD; } body[data-world="burgundy"] .story-book .book-paragraph:first-child::first-letter { color: rgba(244, 198, 106, 0.96); font-family: 'Cambo', Georgia, serif; font-weight: 500; font-size: 3.4em; line-height: 0.88; padding: 0.06em 0.14em 0 0; text-shadow: 0 0 18px rgba(232, 162, 72, 0.38); } body[data-world="burgundy"] .story-book .book-scene-break { font-family: var(--mono, ui-monospace, monospace); font-weight: 400; font-size: 0.7em; letter-spacing: 0.6em; color: rgba(244, 198, 106, 0.42); margin: 1.8em 0 1.6em; text-shadow: 0 0 12px rgba(232, 162, 72, 0.22); display: flex; align-items: center; justify-content: center; gap: 14px; } body[data-world="burgundy"] .story-book .book-scene-break::before, body[data-world="burgundy"] .story-book .book-scene-break::after { content: ''; width: 36px; height: 1px; background: rgba(244, 198, 106, 0.32); }