/* ============================================================================ TRYVA · NOIR ATELIER A unifying cinematic design layer. Loaded last, on top of styles.css and responsive.css. It does not restructure the app — it consolidates the three conflicting :root token blocks into one authoritative noir system and applies filmic texture, typographic rhythm, and disciplined motion across every view. Direction: cold-steel Korean/HK noir (신세계·올드보이·무간도) — deep blue-black night, a single warm sodium-amber as the one light in the dark, hairline architecture, and grain that makes the screen feel shot rather than rendered. Boldness is spent in one place: the amber. Everything else stays quiet. ============================================================================ */ /* ---- 1. AUTHORITATIVE TOKENS ------------------------------------------------- Re-declares the shared token names one final time so the cascade resolves to a single coherent palette regardless of which earlier :root won. Values are tuned colder and deeper than the originals, and the generic violet accent is demoted in favour of a filmic amber key light with a steel-blue counter. */ :root { color-scheme: dark; /* ground — a night that has blue in it, not just grey */ --bg: #06080f; --ink-0: #04060c; --ink-1: #080b15; --ink-2: #0e1220; --surface: #0b0f1a; --surface-2: #111725; --surface-3: #182031; /* hairline architecture */ --line: rgba(150, 166, 200, 0.16); --line-soft: rgba(198, 214, 255, 0.075); --hairline: rgba(214, 226, 255, 0.10); /* type on night */ --text: #eef1f8; --soft: #c3cad9; --muted: #8b93a6; --faint: #5f6678; /* THE light in the dark — sodium/amber key. spend boldness here. */ --amber: #e7a34b; --amber-bright: #f4b968; --amber-deep: #b9772c; --amber-glow: rgba(231, 163, 75, 0.30); /* steel-blue counter light, used sparingly for cold accents */ --steel: #5c86c8; --steel-bright: #7ba6e6; /* the violet the app was built on — kept alive but pushed toward a colder indigo so legacy components stop reading as generic-SaaS purple */ --accent: #7d6bf0; --accent-2: #5c86c8; --accent-blue: #5c86c8; --violet-1: #8b7bf2; --violet-2: #6b52d8; --violet-3: #2f2456; --warm: var(--amber); --rose: #ec5f7f; --danger: #ec5f6b; --success: #63b98a; /* glass */ --glass: rgba(11, 15, 26, 0.74); --glass-strong: rgba(9, 12, 22, 0.92); /* depth — noir shadows are long and soft, never crisp */ --shadow: 0 30px 90px rgba(0, 0, 0, 0.55); --shadow-tight: 0 8px 28px rgba(0, 0, 0, 0.42); --shadow-amber: 0 10px 40px -12px rgba(231, 163, 75, 0.28); /* the halo — a soft amber bloom that bleeds into the background instead of a hard outline. layered: hairline edge + near glow + far halo. */ --glow-amber: 0 0 0 1px rgba(231, 163, 75, 0.42), 0 0 18px rgba(231, 163, 75, 0.24), 0 0 46px rgba(231, 163, 75, 0.12); --glow-amber-soft: 0 0 0 1px rgba(231, 163, 75, 0.30), 0 0 22px rgba(231, 163, 75, 0.16); /* motion — cinematic ease, nothing bouncy */ --ease-film: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 0.18s; --dur-2: 0.34s; --dur-3: 0.6s; /* typography roles (families already loaded in ) */ --font-display: "Playfair Display", "Noto Serif KR", Georgia, serif; --font-serif-kr: "Noto Serif KR", "Nanum Myeongjo", serif; --font-body: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, "Menlo", monospace; } /* ---- 2. GROUND & ATMOSPHERE -------------------------------------------------- The whole app sits under a fixed cinematic wash: a cold vignette pulling the corners into shadow, a faint amber bloom off-centre like a distant streetlight, and a film-grain layer. All three are pointer-transparent and sit behind content, so nothing about interaction changes. */ html, body { background-color: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The legacy stylesheet already paints a separate full-screen vignette. Keep Noir Atelier as the only atmospheric layer so dark scenes do not get double-shaded. */ html::after { display: none !important; } body::before { /* light + vignette — painted, doesn't intercept clicks */ content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 78% -8%, rgba(231, 163, 75, 0.10), transparent 46%), radial-gradient(120% 80% at 12% 108%, rgba(92, 134, 200, 0.09), transparent 50%), radial-gradient(150% 130% at 50% 42%, transparent 52%, rgba(2, 4, 9, 0.55) 100%); mix-blend-mode: screen; } body::after { /* film grain — subtle, animated so it shimmers like real emulsion */ content: ""; position: fixed; inset: -60px; z-index: 1; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat; animation: grain-drift 0.5s steps(3) infinite; will-change: transform; } @keyframes grain-drift { 0% { transform: translate(0, 0); } 33% { transform: translate(-6px, 4px); } 66% { transform: translate(4px, -5px); } 100% { transform: translate(-3px, 3px); } } /* keep real UI above the atmosphere */ #app, .app-shell, .workspace, .sidebar, .topbar, header, main, .modal, .toast, .stage-fullscreen, .view { position: relative; z-index: 2; } /* ---- 3. TYPOGRAPHY ----------------------------------------------------------- Display face for identity and headings gets real presence; body stays Pretendard for Korean legibility. A quiet type scale with generous tracking on the small caps-y labels that noir loves. */ .brand-name, .tryva-brand-name { font-family: var(--font-display) !important; letter-spacing: 0.16em !important; font-weight: 600 !important; } h1, h2, .page-head h1, .page-head h2, .detail-name, .tile-title, .section-title, .catalog-title { font-family: var(--font-display); letter-spacing: 0.005em; } .detail-name, .page-head h1 { font-weight: 600; letter-spacing: 0.01em; } /* eyebrows / labels / tags — the small structural type. tracked out, uppercase feel via letter-spacing, muted until they matter. */ .tile-tags, .eyebrow, .page-head .subtitle, .detail-stats .stat-label, .chat-header .role, .catalog-card .meta, .cw-step-index { font-family: var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72em; color: var(--muted); } /* the dialogue/quote surfaces read as script — serif KR is the right voice */ .detail-quote-card, .vn-line, .message-body, .chat-bubble .text, blockquote, .quote { font-family: var(--font-serif-kr); line-height: 1.72; letter-spacing: 0.005em; } /* body copy breathes a touch more */ body, .tile-body, .detail-copy, p { line-height: 1.62; } /* ---- 4. THE AMBER — spend boldness once ------------------------------------ Primary actions, selection, focus, active nav all resolve to the one warm key light. This is the single memorable colour; everything else is night. */ .primary-button, .btn-primary, button.primary, .cta-primary { background: linear-gradient(135deg, var(--amber-bright), var(--amber-deep)) !important; color: #1a1206 !important; font-weight: 700 !important; letter-spacing: 0.02em; border: 0 !important; box-shadow: var(--shadow-amber); transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-film), filter var(--dur-1) var(--ease-out); } .primary-button:hover, .btn-primary:hover, button.primary:hover, .cta-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 46px -10px var(--amber-glow), 0 0 30px -6px rgba(231,163,75,.3); filter: brightness(1.05); } .primary-button:active, .btn-primary:active { transform: translateY(0); filter: brightness(0.97); } .primary-button:disabled { background: var(--surface-3) !important; color: var(--faint) !important; box-shadow: none; filter: none; } /* selection ring — amber, not violet */ .character-tile.selected, .catalog-card.selected, .vn-character.selected { border-color: transparent !important; box-shadow: var(--glow-amber), var(--shadow-tight) !important; } /* hearts / favourites glow amber-warm when active */ .tile-heart.active, .tile-heart[data-active="true"], .fav.active, .tile-heart.is-wishlisted, .catalog-card-heart.is-wishlisted { color: var(--amber-bright) !important; filter: drop-shadow(0 0 6px var(--amber-glow)) drop-shadow(0 0 14px rgba(231,163,75,.35)); } /* ---- 5. SURFACES & HAIRLINES ------------------------------------------------- Cards get the filmic treatment: near-black glass, a single hairline, a soft long shadow, and a top-edge sheen that reads like light catching an edge. */ .character-tile, .catalog-card, .detail-quote-card, .library-card, .panel, .card, .modal, .sheet, .cw-step, .recent-card, .story-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%), var(--surface-2); border: 1px solid var(--line-soft); box-shadow: var(--shadow-tight); transition: border-color var(--dur-2) var(--ease-film), transform var(--dur-2) var(--ease-film), box-shadow var(--dur-2) var(--ease-film); } .character-tile:hover, .catalog-card:hover, .library-card:hover, .recent-card:hover, .story-card:hover { border-color: var(--hairline); transform: translateY(-3px); box-shadow: var(--shadow); } /* art wells — colder base so amber and skin tones pop against them */ .tile-art, .detail-art, .catalog-card-art { background: linear-gradient(150deg, rgba(123, 166, 230, 0.10), transparent 46%), linear-gradient(0deg, rgba(4, 6, 12, 0.6), transparent 60%), var(--ink-2) !important; } /* the halation edge — a hairline of light along the top of framed art, the detail that makes a still feel lit */ .tile-art::after, .detail-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -40px 60px -40px rgba(4, 6, 12, 0.9); } .tile-art, .detail-art { position: relative; } /* ---- 6. NAV / RAIL / CHROME -------------------------------------------------- Sidebar and top chrome become deep glass with a right hairline, so the app frame recedes and the content stage carries the light. */ .sidebar, .rail, nav.side, .app-sidebar { background: linear-gradient(180deg, var(--ink-1), var(--ink-0)) !important; border-right: 1px solid var(--line-soft) !important; backdrop-filter: blur(14px) saturate(1.1); } .topbar, header.app-header, .chat-header { background: var(--glass) !important; border-bottom: 1px solid var(--line-soft) !important; backdrop-filter: blur(16px) saturate(1.15); } /* active nav item — amber left-marker, the one warm cue in the rail */ .nav-item.active, .side-nav a.active, [data-view].active, .rail-item.active { color: var(--text) !important; position: relative; } .nav-item.active::before, .side-nav a.active::before, .rail-item.active::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--amber-bright), var(--amber-deep)); box-shadow: 0 0 10px var(--amber-glow); } /* ---- 7. INPUTS --------------------------------------------------------------- Quiet until focused, then a thin amber ring — the interface acknowledging you with the same light it uses everywhere else. */ input, textarea, select, .input, .field { background: var(--ink-1) !important; border: 1px solid var(--line) !important; color: var(--text) !important; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, textarea:focus, select:focus, .input:focus, .field:focus-within { border-color: var(--amber) !important; box-shadow: 0 0 0 3px rgba(231, 163, 75, 0.14) !important; outline: none !important; } /* ---- 8. CHAT / VN STAGE ------------------------------------------------------ Target the runtime's real dialogue DOM. The incoming background transition owns .vn-stage::after, so atmosphere belongs on the existing haze layer. */ .chat-bubble, .message-row .bubble, .vn-dialogue-box { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 44%), linear-gradient(112deg, rgba(8, 11, 20, 0.95), rgba(18, 15, 31, 0.90)) !important; border: 1px solid var(--line-soft) !important; box-shadow: 0 26px 68px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255,255,255,0.025) !important; } /* narration / 진행 — quieter and typographically distinct, without changing the stable runtime geometry. */ .message-narration, .vn-narration, .bubble.narration, [data-role="narration"], .vn-dialogue-box.is-narration { color: var(--soft) !important; font-style: normal; letter-spacing: 0.01em; background: linear-gradient(90deg, rgba(92, 134, 200, 0.08), transparent 36%), linear-gradient(112deg, rgba(7, 10, 18, 0.96), rgba(14, 17, 27, 0.92)) !important; border-color: rgba(150, 166, 200, 0.14) !important; } .vn-dialogue-box.is-narration .vn-presentation-text { font-family: var(--font-serif-kr) !important; color: var(--soft) !important; line-height: 1.78 !important; } .stage-fullscreen, .vn-stage { position: relative; } .chat-view .vn-scene-haze, body.stage-fullscreen .vn-scene-haze { background: linear-gradient(90deg, rgba(3, 5, 10, 0.82), transparent 25%, transparent 75%, rgba(3, 5, 10, 0.82)), linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.48)), radial-gradient(125% 115% at 50% 38%, transparent 54%, rgba(2, 4, 9, 0.42) 100%), radial-gradient(ellipse at 50% 100%, rgba(124, 77, 255, 0.14), transparent 34%) !important; } /* the visible runtime name plate is the active speaker plate */ .speaker-name.active, .vn-speaker.active, .vn-dialogue-box:not(.is-player) .vn-dialogue-name { color: #fff6e8 !important; border-color: rgba(231, 163, 75, 0.38) !important; background: linear-gradient(135deg, rgba(126, 78, 26, 0.96), rgba(69, 47, 27, 0.96)) !important; text-shadow: 0 0 10px var(--amber-glow), 0 0 22px rgba(231,163,75,.22); box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 0 20px rgba(231,163,75,.12) !important; } /* ---- 9. SCROLLBARS & DETAILS -------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: #26314a; background-clip: padding-box; } ::selection { background: rgba(231, 163, 75, 0.28); color: #fff; } hr, .divider { border: 0; border-top: 1px solid var(--line-soft); } /* dividers with a centred amber tick — used sparingly by the app already */ .section-divider::before, .ornament-divider::before { color: var(--amber); } /* ---- 10. MOTION: STABLE VIEW CONTENT ----------------------------------------- Page and card entrance opacity/translate animations are intentionally absent. A card-containing view is painted once at its final geometry; hover and local interaction motion below remain unchanged. */ /* hover micro-interaction on interactive art: a slow filmic zoom */ .tile-art img, .catalog-card-art img { transition: transform var(--dur-3) var(--ease-film), filter var(--dur-3) var(--ease-film); } .character-tile:hover .tile-art img, .catalog-card:hover .catalog-card-art img { transform: scale(1.04); filter: contrast(1.04) saturate(1.05); } /* ---- 11. QUALITY FLOOR ------------------------------------------------------- Visible keyboard focus, reduced-motion respected, mobile grain lightened for battery/perf. Announced by nothing — just correct. */ /* mouse clicks leave no ring; keyboard focus gets an amber bloom, not a hard outline — the same halo language used for selection. */ :focus:not(:focus-visible) { outline: none !important; } :focus-visible { outline: none !important; border-radius: 6px; box-shadow: var(--glow-amber-soft) !important; } @media (max-width: 840px) { body::after { opacity: 0.035; animation-duration: 0.7s; } .character-tile:hover, .catalog-card:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { body::after { animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.08s !important; } .tile-art img { transition: none; } } /* ============================================================================ 12. SELECTION TRAY — the casting bar The party-assembly dock, reframed as a "casting strip": deep glass with a thin amber top-edge that reads as a marquee light, each chosen character a film-still chip with its portrait, Play as the one warm call to action. CSS only — markup and JS untouched. ============================================================================ */ .selection-tray { border: 1px solid var(--line-soft) !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(231, 163, 75, 0.05), transparent 22%), var(--glass-strong) !important; box-shadow: 0 -6px 40px -20px var(--amber-glow), var(--shadow) !important; backdrop-filter: blur(26px) saturate(1.2) !important; overflow: hidden; } /* the marquee light — a hairline of amber along the top edge */ .selection-tray::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--amber) 20%, var(--amber-bright) 50%, var(--amber) 80%, transparent); opacity: 0.7; } /* label — an eyebrow: tracked-out caption, not a heavy heading */ .selection-tray p, .selection-tray strong { font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 0.72rem !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--muted) !important; } /* each chosen character — a film-still chip */ .selected-pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-film); animation: noir-rise var(--dur-2) var(--ease-film) both; } .selected-pill:hover { border-color: transparent; transform: translateY(-2px); box-shadow: var(--glow-amber-soft); } /* portrait inside the chip — a small framed still */ .selected-pill .selected-pill-media, .selected-pill img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hairline); box-shadow: 0 0 0 2px rgba(4, 6, 12, 0.6); flex: none; } /* the × — quiet until hovered, then danger tone */ .selected-pill span:last-child { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; border-radius: 50%; color: var(--faint); font-size: 15px; line-height: 1; transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); } .selected-pill:hover span:last-child { color: var(--rose); background: rgba(236, 95, 127, 0.12); } /* empty slot — a dashed ring inviting a pick */ .empty-slot, .detail-empty-slot { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px dashed var(--line) !important; color: var(--faint) !important; font-size: 20px; transition: border-color var(--dur-2) var(--ease-film), color var(--dur-2) var(--ease-film); } .selection-tray:hover .empty-slot, .detail-selection-strip:hover .detail-empty-slot { border-color: var(--amber) !important; color: var(--amber) !important; } /* Play — the one warm call to action */ .selection-tray .primary-button, .selection-tray #startBtn { align-self: center; border-radius: 12px !important; font-family: var(--font-body) !important; font-weight: 800 !important; letter-spacing: 0.02em; } .selection-tray .primary-button:not(:disabled) { background: linear-gradient(135deg, var(--amber-bright), var(--amber-deep)) !important; color: #1a1206 !important; box-shadow: var(--shadow-amber) !important; } /* collapsed dock keeps the amber edge as a hint it's there */ .selection-tray-collapsed .selection-tray, .selection-tray.collapsed { box-shadow: 0 -4px 24px -16px var(--amber-glow), var(--shadow-tight) !important; } /* collapse toggle — a quiet round control */ .selection-tray-toggle { border: 1px solid var(--line) !important; background: var(--surface-2) !important; color: var(--muted) !important; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); } .selection-tray-toggle:hover { color: var(--amber) !important; border-color: var(--amber) !important; } /* ============================================================================ 14. ONE CONTINUOUS SURFACE — rail + stage share a single backdrop The whole shell sits on one atmospheric wash painted at the app-shell level. The rail and the content stage are transparent and borderless, so there is no seam between them and no view reads as flat black. The home-only sidebar treatment is neutralised, so the rail looks identical on every view. Purple-toned to sit with the app's restored violet identity. CSS only. ============================================================================ */ .app-shell { background: radial-gradient(125% 85% at 84% -8%, rgba(139, 109, 255, 0.11), transparent 46%), radial-gradient(120% 95% at 4% 106%, rgba(106, 63, 214, 0.09), transparent 52%), linear-gradient(180deg, #0c0a16 0%, #08070f 100%) !important; } /* rail dissolves into the backdrop — no fill, no seam, same on every view */ .nav-shell, body.play-active .nav-shell { background: transparent !important; border-right: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } /* stage + list/grid views transparent so the one backdrop shows through them (immersive detail/chat views keep their own full-bleed surface) */ .workspace, .play-view, .all-characters-view, .library-view, .story-view, .recent-conversations-view, .creator-profile-view, #playView, #allCharactersView, #libraryView, #storyView, #recentConversationsView, #creatorProfileView { background: transparent !important; } /* the home header strip stops painting a solid band over the shared backdrop */ body.play-active #playView .tryva-home-header { background: transparent !important; } /* ============================================================================ 15. SELECTION TRAY — glow border, not a hairline The casting bar's edge becomes a soft bloom instead of a hard line, matching the amber marquee already along its top edge. ============================================================================ */ #globalSelectionTray.selection-tray, .selection-tray { border-color: transparent !important; box-shadow: 0 0 0 1px rgba(231, 163, 75, 0.26), 0 -8px 46px -14px rgba(231, 163, 75, 0.30), 0 0 66px -20px rgba(231, 163, 75, 0.34), var(--shadow) !important; } /* ============================================================================ 16. SELECTED CHARACTER CARD — halo, not a hard border The real selected ring is drawn by ID-scoped rules (#characterGrid / #newCharacterRail / #libraryGrid ...) whose specificity beats a plain .character-tile.selected, which is why the glow never showed. We re-assert the exact same selectors here (loaded last, so they win) and swap the hard violet border + inset ring for a soft violet halo that bleeds into the background. Purple-toned to match the app's identity. CSS only. ============================================================================ */ .character-tile.selected, .play-view .character-tile.selected, #characterGrid .character-tile.selected, #newCharacterRail .character-tile.selected, .play-view #characterGrid .character-tile.selected, .play-view #newCharacterRail .character-tile.selected, .creator-profile-character-grid .character-tile.selected, body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile.selected, body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile.selected, .catalog-card.selected, body.all-characters-active .catalog-card.selected, body.library-active #libraryGrid .catalog-card.selected, body.creator-profile-active #creatorProfileCharacterGrid .catalog-card.selected { border-color: transparent !important; box-shadow: 0 0 0 1px rgba(139, 100, 255, 0.30), 0 0 22px rgba(139, 92, 255, 0.42), 0 0 58px rgba(124, 77, 255, 0.26), 0 16px 46px -12px rgba(60, 28, 130, 0.42) !important; } /* ---- 17. RESPONSIVE TYPE INTEGRITY ------------------------------------------ Korean names stay intact. The line may wrap before the name, never through it. */ .tryva-welcome-copy h1 { word-break: keep-all !important; overflow-wrap: normal !important; text-wrap: balance; } #playWelcomeName { display: inline-block; white-space: nowrap; } @media (max-width: 1100px) { .tryva-welcome-copy h1 { font-size: clamp(27px, 3.25vw, 34px) !important; line-height: 1.18 !important; } } @media (max-width: 600px) { .tryva-welcome-copy h1 { font-size: clamp(23px, 6.4vw, 28px) !important; line-height: 1.2 !important; text-wrap: pretty; } /* Preserve the grain texture on mobile without continuously repainting a full-viewport fixed layer. */ body::after { animation: none !important; will-change: auto; opacity: 0.03; } } /* ============================================================================ 18. QUIET LUXURY PASS One violet accent, low-contrast edges, flat dark surfaces, and a single soft shadow language. Decorative gold, stacked glows, grain, and theatrical hover motion are intentionally removed. The result should feel composed rather than decorated. ============================================================================ */ :root { --line: rgba(187, 169, 226, 0.14); --line-soft: rgba(210, 197, 238, 0.085); --hairline: rgba(218, 207, 242, 0.11); /* Keep legacy variable names compatible, but resolve them to one violet key. */ --amber: #9280d8; --amber-bright: #9f8ce2; --amber-deep: #7562bd; --amber-glow: rgba(145, 116, 216, 0.16); --accent: #9280d8; --accent-2: #7967c5; --violet-1: #a18ee5; --violet-2: #7a67c7; --shadow: 0 22px 54px rgba(0, 0, 0, 0.42); --shadow-tight: 0 10px 28px rgba(0, 0, 0, 0.30); --shadow-amber: 0 10px 26px rgba(64, 45, 119, 0.24); --glow-amber: 0 0 0 1px rgba(158, 136, 222, 0.20), 0 0 16px rgba(137, 105, 210, 0.10); --glow-amber-soft: 0 0 0 1px rgba(158, 136, 222, 0.18), 0 0 12px rgba(137, 105, 210, 0.08); } /* Quiet background atmosphere. No animated grain or stacked film effects. */ body::before { background: radial-gradient(110% 78% at 82% -10%, rgba(135, 102, 211, 0.09), transparent 48%), radial-gradient(95% 75% at 5% 105%, rgba(89, 62, 150, 0.07), transparent 52%) !important; mix-blend-mode: normal !important; } body::after { display: none !important; animation: none !important; } /* Primary actions: solid violet, one shadow, no metallic gradient. */ .primary-button, .btn-primary, button.primary, .cta-primary, .settings-primary-button, .detail-start-button, .modal-start-button { background: #8976d2 !important; color: #ffffff !important; border: 1px solid rgba(202, 187, 239, 0.12) !important; box-shadow: 0 8px 22px rgba(55, 38, 105, 0.24) !important; text-shadow: none !important; filter: none !important; transform: none !important; } .primary-button:hover, .btn-primary:hover, button.primary:hover, .cta-primary:hover, .settings-primary-button:hover, .detail-start-button:hover, .modal-start-button:hover { background: #9380dc !important; border-color: rgba(218, 205, 245, 0.18) !important; box-shadow: 0 10px 26px rgba(55, 38, 105, 0.28) !important; filter: none !important; transform: none !important; } .primary-button:active, .btn-primary:active, .settings-primary-button:active, .detail-start-button:active { background: #806dc8 !important; transform: none !important; } .primary-button:disabled, .btn-primary:disabled, .settings-primary-button:disabled, .detail-start-button:disabled { background: rgba(72, 67, 91, 0.72) !important; color: rgba(229, 225, 238, 0.42) !important; border-color: rgba(220, 211, 239, 0.06) !important; box-shadow: none !important; } /* Secondary controls share the same restrained material. */ .secondary-button, .ghost-button, .round-button, .tool-button, .detail-preview-button, .section-more-button, .tryva-home-card-arrow, .selection-tray-toggle, .explore-filter-btn, .explore-sort-btn, .chat-reset-button, .account-modal-close { background: rgba(24, 21, 38, 0.78) !important; color: var(--soft) !important; border: 1px solid var(--line-soft) !important; box-shadow: none !important; filter: none !important; } .secondary-button:hover, .ghost-button:hover, .round-button:hover, .tool-button:hover, .detail-preview-button:hover, .section-more-button:hover, .tryva-home-card-arrow:hover, .selection-tray-toggle:hover, .explore-filter-btn:hover, .explore-sort-btn:hover, .chat-reset-button:hover, .account-modal-close:hover { background: rgba(31, 27, 48, 0.92) !important; color: var(--text) !important; border-color: rgba(169, 145, 224, 0.22) !important; box-shadow: none !important; transform: none !important; } .tryva-home-card-arrow:hover { transform: translateY(-50%) !important; } /* Flat surfaces with one border and one depth shadow. */ .character-tile, .catalog-card, .detail-quote-card, .library-card, .panel, .card, .modal, .sheet, .cw-step, .recent-card, .story-card, .pro-upsell-card, .account-card, .settings-section, .story-setting-section, .cw-writing-card, .cw-image-card, .admin-feature-card, .admin-status-card, .route-preset-card, .route-selected-panel, .insight-panel { background: rgba(18, 16, 30, 0.86) !important; border: 1px solid var(--line-soft) !important; box-shadow: var(--shadow-tight) !important; } .character-tile:hover, .catalog-card:hover, .library-card:hover, .recent-card:hover, .story-card:hover, .route-preset-card:hover { background: rgba(21, 18, 35, 0.92) !important; border-color: rgba(174, 152, 224, 0.18) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34) !important; transform: translateY(-1px) !important; } /* Artwork remains the focus; remove decorative colour washes and zoom. */ .tile-art, .detail-art, .catalog-card-art { background: #0d0b16 !important; } .tile-art::after, .detail-art::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 -26px 40px -34px rgba(0, 0, 0, 0.78) !important; } .character-tile:hover .tile-art img, .catalog-card:hover .catalog-card-art img { transform: none !important; filter: none !important; } /* Navigation uses a quiet tinted fill instead of a glowing marquee marker. */ .nav-item.active, .side-nav a.active, [data-view].active, .rail-item.active { background: rgba(137, 112, 204, 0.10) !important; color: #f1edf9 !important; box-shadow: none !important; } .nav-item.active::before, .side-nav a.active::before, .rail-item.active::before { width: 2px !important; background: #9480d8 !important; box-shadow: none !important; opacity: 0.72; } /* Inputs acknowledge focus without looking neon. */ input, textarea, select, .input, .field { background: rgba(12, 11, 21, 0.76) !important; border-color: var(--line) !important; box-shadow: none !important; } input:focus, textarea:focus, select:focus, .input:focus, .field:focus-within { border-color: rgba(158, 134, 218, 0.46) !important; box-shadow: 0 0 0 3px rgba(137, 105, 210, 0.10) !important; } /* Dialogue surfaces are matte and readable, not theatrical glass cards. */ .chat-bubble, .message-row .bubble, .vn-dialogue-box { background: rgba(10, 9, 18, 0.88) !important; border: 1px solid rgba(211, 201, 233, 0.10) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38) !important; } .message-narration, .vn-narration, .bubble.narration, [data-role="narration"], .vn-dialogue-box.is-narration { background: rgba(10, 10, 18, 0.84) !important; border-color: rgba(184, 173, 208, 0.10) !important; } .speaker-name.active, .vn-speaker.active, .vn-dialogue-box:not(.is-player) .vn-dialogue-name { color: #f4f0fb !important; border-color: rgba(163, 139, 220, 0.20) !important; background: rgba(50, 40, 76, 0.92) !important; text-shadow: none !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important; } /* Active favourites and selection use the same single violet cue. */ .tile-heart.active, .tile-heart[data-active="true"], .fav.active, .tile-heart.is-wishlisted, .catalog-card-heart.is-wishlisted { color: #bca7ee !important; filter: none !important; text-shadow: none !important; } /* Focus follows the material edge instead of blooming. */ :focus-visible { outline: none !important; box-shadow: 0 0 0 1px rgba(171, 148, 225, 0.28), 0 0 0 4px rgba(137, 105, 210, 0.08) !important; } ::selection { background: rgba(145, 116, 216, 0.26) !important; color: #fff !important; } /* Remove the decorative contact-sheet reveal and repeated hover motion. */ .character-grid > *, .all-character-grid > *, .library-grid > *, .catalog-grid > * { animation: none !important; } /* Selection tray: one faint violet edge, one soft bloom, one depth shadow. */ #globalSelectionTray.selection-tray, .selection-tray { border: 1px solid rgba(167, 145, 222, 0.18) !important; border-radius: 14px !important; background: rgba(15, 13, 26, 0.92) !important; box-shadow: 0 0 18px rgba(132, 100, 203, 0.10), 0 16px 38px rgba(0, 0, 0, 0.34) !important; backdrop-filter: blur(18px) saturate(1.04) !important; } .selection-tray::before { display: none !important; content: none !important; } .selected-pill { border-radius: 10px !important; border: 1px solid rgba(205, 193, 232, 0.11) !important; background: rgba(25, 22, 39, 0.92) !important; box-shadow: none !important; animation: none !important; } .selected-pill:hover { border-color: rgba(170, 147, 224, 0.22) !important; background: rgba(30, 26, 47, 0.96) !important; box-shadow: none !important; transform: none !important; } .selected-pill .selected-pill-media, .selected-pill img { border-color: rgba(220, 211, 239, 0.12) !important; box-shadow: none !important; } .empty-slot, .detail-empty-slot { border-style: solid !important; border-color: rgba(196, 181, 228, 0.14) !important; color: rgba(216, 207, 235, 0.42) !important; } .selection-tray:hover .empty-slot, .detail-selection-strip:hover .detail-empty-slot { border-color: rgba(169, 145, 224, 0.24) !important; color: rgba(225, 216, 242, 0.68) !important; } .selection-tray .primary-button:not(:disabled), .selection-tray #startBtn:not(:disabled) { background: #8976d2 !important; color: #fff !important; box-shadow: 0 8px 22px rgba(55, 38, 105, 0.24) !important; } .selection-tray-collapsed .selection-tray, .selection-tray.collapsed { box-shadow: 0 0 12px rgba(132, 100, 203, 0.08), 0 10px 24px rgba(0, 0, 0, 0.28) !important; } /* Selected cards: no hard ring, no multi-layer halo. */ .character-tile.selected, .play-view .character-tile.selected, #characterGrid .character-tile.selected, #newCharacterRail .character-tile.selected, .play-view #characterGrid .character-tile.selected, .play-view #newCharacterRail .character-tile.selected, .creator-profile-character-grid .character-tile.selected, body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile.selected, body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile.selected, .catalog-card.selected, body.all-characters-active .catalog-card.selected, body.library-active #libraryGrid .catalog-card.selected, body.creator-profile-active #creatorProfileCharacterGrid .catalog-card.selected, .vn-character.selected { border-color: rgba(165, 141, 221, 0.26) !important; box-shadow: 0 0 16px rgba(137, 105, 210, 0.11), 0 12px 30px rgba(0, 0, 0, 0.32) !important; } /* Quiet chips/badges. Special meaning comes from copy, not chrome. */ .detail-badge, .tryva-story-showcase-tags > *, .tile-tags > *, .story-selected-chip-list > *, .explore-facet-chips > * { background: rgba(30, 26, 46, 0.76) !important; border-color: rgba(197, 183, 228, 0.11) !important; color: var(--soft) !important; box-shadow: none !important; } @media (max-width: 840px) { .character-tile:hover, .catalog-card:hover, .library-card:hover, .recent-card:hover, .story-card:hover { transform: none !important; } } /* Preview is the game scene itself, without application navigation or tools. */ body.sprite-preview-frame .nav-shell, body.sprite-preview-frame .mobile-nav-toggle, body.sprite-preview-frame .mobile-nav-backdrop, body.sprite-preview-frame .insight-panel, body.sprite-preview-frame .chat-header, body.sprite-preview-frame .fullscreen-header-reveal-zone, body.sprite-preview-frame .chat-secondary-actions, body.sprite-preview-frame .user-form, body.sprite-preview-frame .stage-reading-controls, body.sprite-preview-frame .stage-fullscreen-exit, body.sprite-preview-frame .room-id-badge, body.sprite-preview-frame .selection-tray { display: none !important; } body.sprite-preview-frame .app-shell, body.sprite-preview-frame .workspace, body.sprite-preview-frame .chat-view, body.sprite-preview-frame .chat-panel, body.sprite-preview-frame .vn-stage-shell, body.sprite-preview-frame .vn-stage { box-sizing: border-box !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; min-height: 100vh !important; margin: 0 !important; padding: 0 !important; } body.sprite-preview-frame .app-shell, body.sprite-preview-frame .chat-view { display: block !important; grid-template-columns: none !important; } body.sprite-preview-frame .chat-panel { position: fixed !important; inset: 0 !important; } /* ============================================================================ 19. HIGH-SPECIFICITY RUNTIME ALIGNMENT The legacy runtime has late ID-scoped !important rules. Re-assert the quiet system with the same selectors so the actual rendered UI matches the design, not merely the generic class examples. ============================================================================ */ :root { --tryva-bg: #0b0912; --tryva-sidebar: #100d18; --tryva-surface: #151220; --tryva-surface-2: #181522; --tryva-surface-3: #1b1726; --tryva-line: rgba(205, 192, 232, 0.08); --tryva-line-soft: rgba(205, 192, 232, 0.06); --tryva-line-strong: rgba(205, 192, 232, 0.13); --tryva-accent: #8f7bd6; --tryva-accent-2: #7562bd; --tryva-accent-soft: #c0aceb; --tryva-gradient: #8976d2; } /* Runtime-global selection tray. */ body.play-active #globalSelectionTray.selection-tray, body.library-active #globalSelectionTray.selection-tray, body.all-characters-active #globalSelectionTray.selection-tray, body.detail-active #globalSelectionTray.selection-tray, body.play-active > #globalSelectionTray.selection-tray, body.library-active > #globalSelectionTray.selection-tray, body.all-characters-active > #globalSelectionTray.selection-tray, body.detail-active > #globalSelectionTray.selection-tray { border: 1px solid rgba(167, 145, 222, 0.15) !important; border-radius: 14px !important; background: rgba(15, 13, 26, 0.94) !important; box-shadow: 0 0 18px rgba(132, 100, 203, 0.085), 0 16px 38px rgba(0, 0, 0, 0.34) !important; backdrop-filter: blur(18px) saturate(1.03) !important; } /* The bar is self-explanatory. Do not waste width on a caption. */ #globalSelectionTray > div > p, .selection-tray > div > p { display: none !important; } #globalSelectionTray .primary-button, #globalSelectionTray #startBtn, .selection-tray .primary-button, .selection-tray #startBtn { background: #8976d2 !important; color: #fff !important; border: 1px solid rgba(211, 198, 239, 0.12) !important; border-radius: 12px !important; box-shadow: 0 8px 22px rgba(55, 38, 105, 0.23) !important; filter: none !important; } #globalSelectionTray .primary-button:hover:not(:disabled), #globalSelectionTray #startBtn:hover:not(:disabled) { background: #9380dc !important; box-shadow: 0 10px 25px rgba(55, 38, 105, 0.27) !important; transform: none !important; } #globalSelectionTray .empty-slot, .selection-tray .empty-slot { border: 1px solid rgba(196, 181, 228, 0.14) !important; background: rgba(255, 255, 255, 0.018) !important; color: rgba(216, 207, 235, 0.46) !important; box-shadow: none !important; } /* Real Play cards keep their useful width reveal, but not the lift or neon ring. */ body.play-active #playView #characterGrid .character-tile, .play-view #characterGrid .character-tile { background: #0f0d18 !important; border-color: rgba(205, 192, 232, 0.08) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30) !important; } body.play-active #playView #characterGrid .character-tile:hover, body.play-active #playView #characterGrid .character-tile.selected, .play-view #characterGrid .character-tile:hover, .play-view #characterGrid .character-tile.selected { transform: none !important; border-color: rgba(165, 141, 221, 0.24) !important; box-shadow: 0 0 15px rgba(137, 105, 210, 0.10), 0 12px 30px rgba(0, 0, 0, 0.32) !important; } /* Library and explore use the same restrained edge. */ body.library-active .library-view .character-tile, body.all-characters-active .all-character-grid .catalog-card, body.all-characters-active .all-character-grid .catalog-character-tile { background-color: #11101a !important; border-color: rgba(205, 192, 232, 0.08) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28) !important; } body.library-active .library-view .character-tile:hover, body.library-active .library-view .character-tile.selected, body.all-characters-active .all-character-grid .catalog-card:hover, body.all-characters-active .all-character-grid .catalog-card.selected, body.all-characters-active .all-character-grid .catalog-character-tile:hover, body.all-characters-active .all-character-grid .catalog-character-tile.selected { transform: none !important; border-color: rgba(165, 141, 221, 0.22) !important; box-shadow: 0 0 14px rgba(137, 105, 210, 0.09), 0 11px 28px rgba(0, 0, 0, 0.30) !important; } /* Flatten remaining gradient-driven runtime actions through exact classes. */ .pro-upsell-btn, .tryva-create-button, .add-card-button, .all-character-toolbar button.active, .library-toolbar button.active, .user-form > button:last-child, .detail-actions .primary-button, body.detail-active .character-detail-view .detail-start-button, .cw-footer .primary-button, body.create-active .cw-step.active > span { background: #8976d2 !important; color: #fff !important; box-shadow: none !important; text-shadow: none !important; } /* Preserve a little hierarchy without decorative shine. */ .pro-upsell-icon { color: #a995e2 !important; } .tile-badge, .catalog-card-badge { background: rgba(137, 105, 210, 0.20) !important; color: #c9b8ee !important; box-shadow: none !important; } @media (max-width: 900px) { body.play-active #globalSelectionTray.selection-tray, body.library-active #globalSelectionTray.selection-tray, body.all-characters-active #globalSelectionTray.selection-tray, body.detail-active #globalSelectionTray.selection-tray, body.play-active > #globalSelectionTray.selection-tray, body.library-active > #globalSelectionTray.selection-tray, body.all-characters-active > #globalSelectionTray.selection-tray, body.detail-active > #globalSelectionTray.selection-tray { box-shadow: 0 0 14px rgba(132, 100, 203, 0.07), 0 12px 30px rgba(0, 0, 0, 0.32) !important; } } /* Final Play-card position lock: selection changes width/edge only, never lifts. */ html body.play-active #playView.play-view #characterGrid.character-grid > .character-tile:hover, html body.play-active #playView.play-view #characterGrid.character-grid > .character-tile.selected { transform: none !important; } /* ============================================================================ DESIGN FIX 4 — selection tray toggle is part of the tray, not a floating pill ============================================================================ */ #globalSelectionTray.selection-tray > .selection-tray-toggle, .selection-tray > .selection-tray-toggle { left: 50% !important; top: -25px !important; width: 54px !important; height: 26px !important; min-width: 54px !important; padding: 0 !important; transform: translateX(-50%) !important; border: 1px solid rgba(167, 145, 222, 0.15) !important; border-bottom: 0 !important; border-radius: 9px 9px 0 0 !important; background: rgba(15, 13, 26, 0.94) !important; color: rgba(220, 211, 239, 0.58) !important; box-shadow: none !important; filter: none !important; z-index: 3 !important; transition: color 150ms ease, border-color 150ms ease !important; } #globalSelectionTray.selection-tray > .selection-tray-toggle:hover, #globalSelectionTray.selection-tray > .selection-tray-toggle:focus-visible, #globalSelectionTray.selection-tray > .selection-tray-toggle:active, .selection-tray > .selection-tray-toggle:hover, .selection-tray > .selection-tray-toggle:focus-visible, .selection-tray > .selection-tray-toggle:active { left: 50% !important; top: -25px !important; transform: translateX(-50%) !important; border-color: rgba(177, 154, 229, 0.22) !important; border-bottom: 0 !important; background: rgba(15, 13, 26, 0.94) !important; color: rgba(235, 228, 248, 0.82) !important; box-shadow: none !important; filter: none !important; } body.selection-tray-collapsed > #globalSelectionTray.selection-tray > .selection-tray-toggle, body.detail-active:not(.selection-tray-has-selection) > #globalSelectionTray.selection-tray > .selection-tray-toggle { top: -25px !important; transform: translateX(-50%) !important; } #globalSelectionTray .selection-tray-toggle span, .selection-tray .selection-tray-toggle span { line-height: 1 !important; transform-origin: 50% 50% !important; } @media (max-width: 600px) { #globalSelectionTray.selection-tray > .selection-tray-toggle, .selection-tray > .selection-tray-toggle { top: -24px !important; width: 50px !important; min-width: 50px !important; height: 25px !important; border-radius: 8px 8px 0 0 !important; } #globalSelectionTray.selection-tray > .selection-tray-toggle:hover, #globalSelectionTray.selection-tray > .selection-tray-toggle:focus-visible, #globalSelectionTray.selection-tray > .selection-tray-toggle:active, .selection-tray > .selection-tray-toggle:hover, .selection-tray > .selection-tray-toggle:focus-visible, .selection-tray > .selection-tray-toggle:active, body.selection-tray-collapsed > #globalSelectionTray.selection-tray > .selection-tray-toggle, body.detail-active:not(.selection-tray-has-selection) > #globalSelectionTray.selection-tray > .selection-tray-toggle { top: -24px !important; transform: translateX(-50%) !important; } } /* Mobile button defaults enforce a 42px minimum; the attached tray tab is the exception. */ #globalSelectionTray.selection-tray > .selection-tray-toggle, .selection-tray > .selection-tray-toggle { min-height: 26px !important; max-height: 26px !important; } @media (max-width: 600px) { #globalSelectionTray.selection-tray > .selection-tray-toggle, .selection-tray > .selection-tray-toggle { min-height: 25px !important; max-height: 25px !important; } } /* V5.34.72.46: creator profile wide shell without moving its established content. The profile hero uses the same outer width as the existing character section, while compensating with horizontal padding so avatar/copy/stat coordinates stay exactly where they were at the former 1180px cap. Scroll remains functional; only the right-hand scrollbar chrome is hidden on the profile route. */ body.creator-profile-active .workspace, body.creator-profile-active #creatorProfileView, body.creator-profile-active .creator-profile-view { scrollbar-width: none !important; -ms-overflow-style: none !important; } body.creator-profile-active .workspace::-webkit-scrollbar, body.creator-profile-active #creatorProfileView::-webkit-scrollbar, body.creator-profile-active .creator-profile-view::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } @media (min-width: 1200px) { body.creator-profile-active #creatorProfileView > .creator-profile-hero { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: max(38px, calc((100% - 1104px) / 2)) !important; padding-right: max(38px, calc((100% - 1104px) / 2)) !important; } } /* V5.34.72.47: let the creator-profile scroll surface use the full workspace width. The established header/content coordinates stay fixed through the existing centered inner rules and compensated hero padding; only the outer scroll surface and the already-fluid hero/character section gain the previously unused side space. */ @media (min-width: 1200px) { body.creator-profile-active #creatorProfileView.creator-profile-view { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } } /* V5.34.72.48: one public character-card copy and hover contract everywhere. Home, Explore, Library and Creator Profile now share the exact same text stack and the same description-panel reveal. Context-specific legacy grid gaps and instant display toggles are overridden here because this stylesheet loads last. */ html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy { position: absolute !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 9 !important; display: block !important; width: auto !important; gap: 0 !important; padding: var(--tryva-card-copy-padding, 15px) !important; opacity: 1 !important; pointer-events: none !important; transition: opacity 160ms ease !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-status-badge, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-status-badge, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-status-badge, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-status-badge { min-height: var(--tryva-card-status-min-height, 17px) !important; margin: var(--tryva-card-status-margin, 0 0 7px) !important; padding: var(--tryva-card-status-padding, 3px 6px) !important; font-size: var(--tryva-card-status-size, 9px) !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy h3, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy h3, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy h3, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy h3 { margin: 0 !important; overflow: hidden !important; color: #fff !important; font-size: var(--tryva-card-name-size, 26px) !important; font-weight: var(--tryva-card-name-weight, 840) !important; line-height: var(--tryva-card-name-line-height, 1) !important; letter-spacing: var(--tryva-card-name-letter-spacing, -.035em) !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy > p, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy > p, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy > p, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy > p { margin: var(--tryva-card-meta-margin, 6px 0 9px) !important; overflow: hidden !important; color: rgba(241,236,248,.78) !important; font-size: var(--tryva-card-meta-size, 12.5px) !important; font-weight: 620 !important; line-height: var(--tryva-card-meta-line-height, 1.35) !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-tags, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-tags, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-tags, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-tags { display: flex !important; flex-wrap: wrap !important; gap: var(--tryva-card-tag-gap, 6px) !important; margin: 0 !important; overflow: visible !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-tags span, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-tags span, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-tags span, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-tags span { flex: 0 0 auto !important; min-height: var(--tryva-card-tag-min-height, 20px) !important; padding: var(--tryva-card-tag-padding, 3px 7px) !important; border-radius: 7px !important; font-size: var(--tryva-card-tag-size, 9.5px) !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy .creator-byline, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy .creator-byline, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy .creator-byline, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-copy .creator-byline { display: none !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-hover, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-hover, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-hover, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-hover { position: absolute !important; right: 10px !important; bottom: 10px !important; left: 10px !important; z-index: 9 !important; display: grid !important; gap: 11px !important; padding: 13px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 15px !important; background: linear-gradient(180deg,rgba(14,14,24,.76),rgba(9,10,17,.96)) !important; box-shadow: 0 14px 28px rgba(0,0,0,.30) !important; opacity: 0 !important; visibility: visible !important; pointer-events: none !important; transform: translateY(8px) !important; backdrop-filter: blur(14px) !important; transition: opacity 160ms ease, transform 160ms ease !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract:is(:hover, :focus-visible, .selected, .is-touch-expanded) .catalog-card-copy, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract:is(:hover, :focus-visible, .selected, .is-touch-expanded) .catalog-card-copy, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract:is(:hover, :focus-visible, .selected, .is-touch-expanded) .catalog-card-copy, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract:is(:hover, :focus-visible, .selected, .is-touch-expanded) .catalog-card-copy { opacity: 0 !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract:is(:hover, :focus-visible, .selected, .is-touch-expanded) .catalog-card-hover, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract:is(:hover, :focus-visible, .selected, .is-touch-expanded) .catalog-card-hover, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract:is(:hover, :focus-visible, .selected, .is-touch-expanded) .catalog-card-hover, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract:is(:hover, :focus-visible, .selected, .is-touch-expanded) .catalog-card-hover { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-hover > p, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-hover > p, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-hover > p, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-hover > p { display: -webkit-box !important; margin: 0 !important; overflow: hidden !important; color: rgba(240,235,248,.88) !important; font-size: 12px !important; line-height: 1.5 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-hover > div, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-hover > div, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-hover > div, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-hover > div { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract :is(.catalog-card-detail, .catalog-card-add), html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract :is(.catalog-card-detail, .catalog-card-add), html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract :is(.catalog-card-detail, .catalog-card-add), html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract :is(.catalog-card-detail, .catalog-card-add) { min-height: 38px !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 11px !important; color: rgba(250,247,255,.94) !important; font-size: 12px !important; font-weight: 760 !important; cursor: pointer !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-detail, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-detail, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-detail, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-detail { flex: 1 !important; padding: 0 14px !important; background: rgba(255,255,255,.06) !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-add, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-add, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-add, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-add { flex: 0 0 38px !important; width: 38px !important; padding: 0 !important; background: linear-gradient(135deg,rgba(139,76,244,.92),rgba(105,52,209,.92)) !important; font-size: 20px !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-add.selected, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-add.selected, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-add.selected, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-add.selected { background: rgba(77,42,139,.90) !important; } @media (max-width: 900px) { html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-tags, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-tags, html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract .catalog-card-tags, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract .catalog-card-tags { display: none !important; } } @media (prefers-reduced-motion: reduce) { html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract :is(.catalog-card-copy, .catalog-card-hover), html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract :is(.catalog-card-copy, .catalog-card-hover), html body.library-active #libraryGrid > .catalog-card.tryva-public-card-contract :is(.catalog-card-copy, .catalog-card-hover), html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract :is(.catalog-card-copy, .catalog-card-hover) { transition-duration: 0.01ms !important; } } /* v5.34.72.50 · minimal dark vertical carousel controls shared by character, story and world rails. */ html body.play-active #playView .tryva-home-card-arrow { top: 50% !important; width: 36px !important; height: 68px !important; min-width: 36px !important; min-height: 68px !important; place-items: center !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, .075) !important; border-radius: 7px !important; background: #121018 !important; color: rgba(239, 236, 246, .82) !important; font-size: 0 !important; line-height: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateY(-50%) !important; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease !important; } html body.play-active #playView .tryva-home-card-arrow-left { left: 8px !important; } html body.play-active #playView .tryva-home-card-arrow-right { right: 8px !important; } html body.play-active #playView .tryva-home-card-arrow .tryva-home-card-arrow-icon { width: 18px !important; height: 18px !important; display: block !important; overflow: visible !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.85 !important; stroke-linecap: round !important; stroke-linejoin: round !important; transform: none !important; pointer-events: none !important; } html body.play-active #playView .tryva-home-card-arrow:hover { background: #1a1721 !important; border-color: rgba(255, 255, 255, .13) !important; color: rgba(255, 255, 255, .96) !important; box-shadow: none !important; transform: translateY(-50%) !important; } html body.play-active #playView .tryva-home-card-arrow:active { background: #0d0c12 !important; transform: translateY(-50%) !important; } html body.play-active #playView .tryva-home-card-arrow:focus-visible { outline: 1px solid rgba(196, 177, 232, .72) !important; outline-offset: 2px !important; } html body.play-active #playView .tryva-home-card-arrow:disabled { opacity: 0 !important; pointer-events: none !important; } @media (prefers-reduced-motion: reduce) { html body.play-active #playView .tryva-home-card-arrow { transition-duration: .01ms !important; } } /* ============================================================================ v5.34.72.151 · SOLID GROUND + SHARED PUBLIC CARD CONTRACT Home keeps the quiet solid ground. Desktop character geometry/copy and scenario/world geometry now use the same tokens across Home, Explore, Library and Story. Media crop behavior and touch layouts remain unchanged. ============================================================================ */ body.play-active, body.play-active .app-shell, body.play-active .workspace, body.play-active #playView, body.play-active #playView .tryva-home-header, body.play-active .nav-shell { background: #0c0c11 !important; background-image: none !important; } /* ============================================================================ v5.34.72.153 · CARD SINGLE SOURCE Every surface consumes the same character/story aspect and internal card contract. Responsive layouts may change only card scale and column count. Loading reuses the real card frames, so content arrival cannot change shape. ============================================================================ */ :root { --tryva-catalog-ground: #0c0c11; --tryva-card-w: 218px; --tryva-card-h: 302px; --tryva-card-radius: 14px; --tryva-card-aspect-ratio: 218 / 302; --tryva-editor-card-w: var(--tryva-card-w); --tryva-editor-card-h: var(--tryva-card-h); --tryva-editor-card-radius: var(--tryva-card-radius); --tryva-editor-copy-bottom: 0px; --tryva-editor-copy-padding: var(--tryva-card-copy-padding); --tryva-editor-badge-margin: var(--tryva-card-status-margin); --tryva-editor-badge-padding: var(--tryva-card-status-padding); --tryva-editor-badge-min-height: var(--tryva-card-status-min-height); --tryva-editor-badge-font-size: var(--tryva-card-status-size); --tryva-editor-name-font-size: var(--tryva-card-name-size); --tryva-editor-name-font-weight: var(--tryva-card-name-weight); --tryva-editor-name-line-height: var(--tryva-card-name-line-height); --tryva-editor-name-letter-spacing: var(--tryva-card-name-letter-spacing); --tryva-editor-meta-margin: var(--tryva-card-meta-margin); --tryva-editor-meta-font-size: var(--tryva-card-meta-size); --tryva-editor-meta-line-height: var(--tryva-card-meta-line-height); --tryva-story-card-width: 378px; --tryva-story-card-height: 302px; --tryva-story-card-radius: 14px; --tryva-story-card-aspect-ratio: 378 / 302; } html, body.route-booting, .route-boot-screen { background: var(--tryva-catalog-ground) !important; background-image: none !important; } .route-boot-screen::before, .route-boot-screen::after { display: none !important; content: none !important; } /* Character public surfaces: one shape. Width may be fluid; height is always derived from the canonical aspect instead of being independently fixed. */ html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract, html body.library-active #libraryGrid.tryva-character-explore-grid > .catalog-card.tryva-public-card-contract, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract, .tryva-card-preview-context > .catalog-card.tryva-public-card-contract { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: var(--tryva-card-aspect-ratio) !important; border-radius: var(--tryva-card-radius) !important; } /* Character creation and quick edit host the same catalog card at its logical size. Narrow screens uniformly scale the complete card. */ body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport, .card-image-editor-modal:not(.story-asset-card-image-editor) .tryva-shared-card-editor-viewport, body.create-active #profileCropFrame.cw-create-crop-frame.profile, .card-image-editor-modal:not(.story-asset-card-image-editor) #cropDragFrame { width: min(var(--tryva-card-w), 86vw) !important; min-width: 0 !important; max-width: var(--tryva-card-w) !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: var(--tryva-card-aspect-ratio) !important; border-radius: var(--tryva-card-radius) !important; } /* Scenario/world public surfaces and both editors share the Home-approved 378x302 shape. Old 444x302 and mobile-only 444x320 shapes are retired. */ .tryva-unified-story-card, html body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card, html body.all-characters-active #allCharactersView #exploreStoryGrid > .tryva-unified-story-card, html body.library-active #libraryView > #libraryGrid.library-grid.tryva-story-home-grid > .tryva-unified-story-card, html body.story-active #storyView #storyScenarioGrid > .tryva-unified-story-card { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: var(--tryva-story-card-aspect-ratio) !important; border-radius: var(--tryva-story-card-radius) !important; } .story-creator-card-editor-viewport, .story-creator-card-editor-viewport:hover, .story-creator-card-editor-viewport:focus, .story-creator-card-editor-viewport:focus-within, .card-image-editor-modal.story-asset-card-image-editor .tryva-shared-card-editor-viewport, .card-image-editor-modal.story-asset-card-image-editor #cropDragFrame { width: min(var(--tryva-story-card-width), 86vw) !important; min-width: 0 !important; max-width: var(--tryva-story-card-width) !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: var(--tryva-story-card-aspect-ratio) !important; border-radius: var(--tryva-story-card-radius) !important; } /* Real-card skeletons. Only media/text paint changes while loading; the card element, aspect, copy anchoring and responsive grid are the final ones. */ .tryva-card-loading-status { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } .tryva-card-skeleton { pointer-events: none !important; user-select: none !important; cursor: default !important; } .tryva-card-skeleton-media, .tryva-card-skeleton-line { position: relative; display: block !important; overflow: hidden !important; border: 0 !important; background: #17171d !important; color: transparent !important; } .tryva-card-skeleton-media::after, .tryva-card-skeleton-line::after { position: absolute; inset: 0; content: ""; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.045) 48%, transparent 66%); transform: translateX(-100%); animation: tryvaCardSkeletonSweep 1.25s ease-in-out infinite; } .catalog-card.tryva-card-skeleton .tryva-card-skeleton-media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .catalog-card.tryva-card-skeleton .catalog-card-copy { opacity: 1 !important; } .tryva-card-skeleton-badge { width: 52px !important; height: 17px !important; border-radius: 6px !important; } .tryva-card-skeleton-title { width: 68% !important; height: 21px !important; border-radius: 6px !important; } .tryva-card-skeleton-meta { width: 84% !important; height: 12px !important; border-radius: 5px !important; } .tryva-card-skeleton-tag { width: 54px !important; height: 20px !important; border-radius: 7px !important; } .tryva-card-skeleton-tag.is-short { width: 42px !important; } .tryva-unified-story-card.tryva-card-skeleton .tryva-card-skeleton-media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .tryva-unified-story-card.tryva-card-skeleton .tryva-unified-story-card-copy h3, .tryva-unified-story-card.tryva-card-skeleton .tryva-unified-story-card-copy p { margin: 0 !important; } .tryva-unified-story-card.tryva-card-skeleton .tryva-card-skeleton-title { width: min(220px, 72%) !important; } .tryva-unified-story-card.tryva-card-skeleton .tryva-card-skeleton-meta { width: min(280px, 92%) !important; } .tryva-card-skeleton-action { width: 44px !important; min-width: 44px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 10px !important; } @keyframes tryvaCardSkeletonSweep { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .tryva-card-skeleton-media::after, .tryva-card-skeleton-line::after { animation: none !important; } } body.play-active::before, body.play-active::after { display: none !important; content: none !important; } /* ============================================================================ v5.34.72.154 · FINAL MEDIA COMMIT + FIRST-PAINT GROUND Quick-edit persistence is handled in JavaScript. This final cascade guard makes every non-chat route share one solid ground, preserves normalized crop transforms on the rendered cards, and gives loading cards their real width. ============================================================================ */ html, body:not(.chat-active), body:not(.chat-active) .app-shell, body:not(.chat-active) .workspace, body:not(.chat-active) .nav-shell, body:not(.chat-active) > .app-shell > .workspace > .view:not(.chat-view) { background: var(--tryva-catalog-ground, #0c0c11) !important; background-image: none !important; } body:not(.chat-active)::before, body:not(.chat-active)::after { display: none !important; content: none !important; } html body.play-active #featuredCharacterHero.tryva-featured-hero { background: #15151b !important; background-image: none !important; } /* The public scenario/world renderer now carries tryva-cover-media. Keep the saved normalized transform authoritative even on hover; card lift still provides hover feedback without changing the creator's crop. */ html body .tryva-unified-story-card > .tryva-unified-story-card-cover.tryva-cover-media, html body .tryva-unified-story-card:hover > .tryva-unified-story-card-cover.tryva-cover-media, html body .tryva-unified-story-card:focus-visible > .tryva-unified-story-card-cover.tryva-cover-media { position: absolute !important; inset: auto !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; width: var(--tryva-cover-width, 100%) !important; height: var(--tryva-cover-height, 100%) !important; max-width: none !important; max-height: none !important; object-fit: fill !important; object-position: center !important; transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important; transform-origin: center center !important; } /* Character creation, quick edit and every public catalogue surface consume the same computed cover variables. This guard prevents route-specific legacy object-position/scale rules from replacing the saved placement. */ html body .character-tile .tile-art > .tryva-card-cover-media, html body .catalog-card .catalog-card-media > .tryva-card-cover-media { position: absolute !important; inset: auto !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; width: var(--tryva-card-cover-width, 100%) !important; height: var(--tryva-card-cover-height, 100%) !important; max-width: none !important; max-height: none !important; object-fit: fill !important; object-position: center !important; transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important; transform-origin: center center !important; } /* Absolutely-positioned skeleton children have no intrinsic flex width. Give the placeholder the exact same page slot as the real card so it cannot collapse into the vertical lines seen during refresh. */ html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-card-skeleton { background: #15151b !important; } @media (min-width: 1700px) { } @media (max-width: 900px) { } @media (min-width: 1700px) { body.play-active #playView { --tryva-card-h: 302px; --tryva-card-radius: 14px; --tryva-card-copy-padding: 12px; --tryva-card-name-size: 21px; --tryva-card-meta-margin: 5px 0 7px; --tryva-card-meta-size: 11.5px; --tryva-card-tag-gap: 5px; } body.play-active #playView .character-section, body.play-active #playView .play-rail-row, body.play-active #playView .play-rail-row-single, body.play-active #playView .play-rail-row-single .mini-rail-block, body.play-active #playView .tryva-home-card-carousel { width: calc(100% - 38px) !important; max-width: calc(100% - 38px) !important; margin-inline: auto !important; } body.play-active #playView .tryva-home-card-carousel > .home-catalog-rail { padding: 8px 0 26px !important; } body.play-active #playView .home-catalog-rail > .catalog-card { border-radius: 14px !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy { padding: 12px !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-status-badge { min-height: 17px !important; margin-bottom: 6px !important; padding: 3px 6px !important; font-size: 9px !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy h3 { font-size: 21px !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy > p { margin: 5px 0 7px !important; font-size: 11.5px !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-tags { gap: 5px !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-tags span { min-height: 20px !important; padding: 3px 7px !important; font-size: 9.5px !important; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract > .tryva-original-mark { width: min(132px, calc(100% - 8px)) !important; } body.play-active #playView .tryva-home-card-carousel > .tryva-story-showcase > .tryva-unified-story-card { border-radius: 14px !important; } body.play-active #playView .tryva-story-showcase-card { padding: 0 !important; } } /* v5.34.72.153 final cascade guard: this must remain after every historical wide-screen override. Geometry has one owner from this point forward. */ :root { --tryva-card-w: 218px; --tryva-card-h: 302px; --tryva-card-radius: 14px; --tryva-card-aspect-ratio: 218 / 302; --tryva-story-card-width: 378px; --tryva-story-card-height: 302px; --tryva-story-card-radius: 14px; --tryva-story-card-aspect-ratio: 378 / 302; } html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract, html body.all-characters-active #allCharacterGrid > .catalog-card.tryva-public-card-contract, html body.library-active #libraryGrid.tryva-character-explore-grid > .catalog-card.tryva-public-card-contract, html body.creator-profile-active #creatorProfileCharacterGrid > .catalog-card.tryva-public-card-contract, .tryva-card-preview-context > .catalog-card.tryva-public-card-contract { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: var(--tryva-card-aspect-ratio) !important; } body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport, .card-image-editor-modal:not(.story-asset-card-image-editor) .tryva-shared-card-editor-viewport, body.create-active #profileCropFrame.cw-create-crop-frame.profile, .card-image-editor-modal:not(.story-asset-card-image-editor) #cropDragFrame { width: min(var(--tryva-card-w), 86vw) !important; min-width: 0 !important; max-width: var(--tryva-card-w) !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: var(--tryva-card-aspect-ratio) !important; } .tryva-unified-story-card, html body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card, html body.all-characters-active #allCharactersView #exploreStoryGrid > .tryva-unified-story-card, html body.library-active #libraryView > #libraryGrid.library-grid.tryva-story-home-grid > .tryva-unified-story-card, html body.story-active #storyView #storyScenarioGrid > .tryva-unified-story-card { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: var(--tryva-story-card-aspect-ratio) !important; } /* v5.34.72.156 catalogue size parity Home, Explore, Library and creator profiles now consume one physical card width as well as one shape. Earlier contracts shared only aspect-ratio while Home stayed 232px, Explore stayed 218px and Library stretched to its grid. */ :root { --tryva-card-w: 232px; --tryva-home-card-w: var(--tryva-card-w); --tryva-card-h: 321.17px; --tryva-card-aspect-ratio: 218 / 302; --tryva-story-card-width: 378px; --tryva-story-card-height: 302px; --tryva-story-card-aspect-ratio: 378 / 302; } @media (max-width: 680px) { } .story-creator-card-editor-viewport, .story-creator-card-editor-viewport:hover, .story-creator-card-editor-viewport:focus, .story-creator-card-editor-viewport:focus-within, .card-image-editor-modal.story-asset-card-image-editor .tryva-shared-card-editor-viewport, .card-image-editor-modal.story-asset-card-image-editor #cropDragFrame { width: min(var(--tryva-story-card-width), 86vw) !important; min-width: 0 !important; max-width: var(--tryva-story-card-width) !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: var(--tryva-story-card-aspect-ratio) !important; } /* v5.34.72.158 home crop authority and catalogue spacing Home has a legacy high-specificity transform:none rule. The saved normalized crop variables already reach the card, so make those variables authoritative on the Home story rails without changing the working Explore/Library path. */ html body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card > .tryva-unified-story-card-cover.tryva-cover-media, html body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card:hover > .tryva-unified-story-card-cover.tryva-cover-media, html body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card:focus-visible > .tryva-unified-story-card-cover.tryva-cover-media { position: absolute !important; inset: auto !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; width: var(--tryva-cover-width, 100%) !important; height: var(--tryva-cover-height, 100%) !important; max-width: none !important; max-height: none !important; object-fit: fill !important; object-position: center !important; transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important; transform-origin: center center !important; } /* Home's measured catalogue gap is 12px. Keep card dimensions untouched and use the same spacing for every Explore, Library and creator-profile grid. */ :root { --tryva-catalogue-gap: 12px; } /* v5.34.72.159 home card-grid authority Card dimensions were already shared in v156, but the catalogue containers still won with older 1fr columns and 18px gaps. These exact route selectors make Home's physical card tracks and 12px spacing authoritative everywhere. */