/* ======================================================================== MapleStack Detective — public challenge UI styles Coexists with marketing.css (which now wraps every detective page). Case-file aesthetic: manila paper, red wax seals, polaroid photos, a typewriter accent on evidence labels — all tasteful, not costumey. ======================================================================== */ :root { --msd-ink: #1a1410; --msd-paper: #f7f1e6; --msd-paper-2:#ece3d2; --msd-line: rgba(26,20,16,.10); --msd-line-2: rgba(26,20,16,.20); --msd-mute: #6b5f54; --msd-red: #c0162a; --msd-red-d: #8b0f1f; /* Cinematic palette + type scale for the new poster experience */ --msd-night: #0a0808; --msd-night-2: #161210; --msd-night-3: #221b16; --msd-amber: #d9a352; --msd-blood: #8a0d22; --msd-fog: rgba(231,205,158,.06); --msd-poster-w: 1480px; --msd-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --msd-poster: 'Bebas Neue', 'Anton', 'Oswald', Impact, sans-serif; --msd-mono: 'Special Elite', 'Courier New', monospace; --msd-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; } /* ── Detective body — every page is one cinematic scene ──────────────── Body itself becomes the world. A fixed bg image (per-page via --page-bg CSS var) carries the scene. All content sections sit on top as artifacts: polaroids pinned to the wall, papers laid on the desk, evidence taped to the board. Sections do NOT get opaque box backgrounds anymore — they let the world show through. */ body.ms-detective { overflow-x: hidden; /* kills the 100vw scrollbar bug */ background-color: #0a0808; color: #f5ecd6; position: relative; min-height: 100vh; } body.ms-detective::before { content: ''; position: fixed; inset: 0; z-index: -2; /* Default = dedicated AI-generated noir detective universe; case detail pages override via inline `--page-bg` on to swap in the case's own hero image. */ background-image: var(--page-bg, url('/wp-content/plugins/maplestack-provisioner/assets/hero/detective-universe.webp')); background-size: cover; background-position: center; background-attachment: fixed; filter: saturate(.78) brightness(.72) contrast(1.08); transform-origin: 50% 50%; /* Living drift — the "video without a video" trick. Wider transform range so motion is actually visible, and 28s round trip so the eye registers it but it never distracts from reading. */ animation: msdWorldDrift 26s ease-in-out infinite alternate; will-change: transform; } @keyframes msdWorldDrift { 0% { transform: scale(1.06) translate(-2.5%, -1.5%); } 100% { transform: scale(1.14) translate(2.5%, 1.5%); } } @media (prefers-reduced-motion: reduce) { body.ms-detective::before { animation: none; transform: scale(1.04); } } body.ms-detective::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,0,0,.55) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 50% 100%, rgba(0,0,0,.65) 0%, transparent 60%), linear-gradient(180deg, rgba(10,8,8,.30) 0%, rgba(10,8,8,.55) 50%, rgba(10,8,8,.75) 100%); } /* Subtle film grain across the whole scene */ body.ms-detective .msd-main::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .08; mix-blend-mode: overlay; background-image: radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px; } .ms-detective .msd-main { max-width: none; margin: 0; padding: 0 0 96px; /* sections handle their own horizontal padding */ position: relative; z-index: 0; } /* Cinematic full-bleed escape — breaks out of any centered container. Now uses 100% (which respects parent width) instead of 100vw (which adds scrollbar width) to avoid horizontal scroll. */ .msd-fullbleed { position: relative; width: 100%; max-width: 100%; } /* ── List page hero — text floats over the world ──────────────────── */ .msd-hero { padding: 160px 32px 96px; /* big top pad clears the fixed navbar */ text-align: center; position: relative; overflow: visible; } .msd-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; } .msd-hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 28px; font-family: var(--msd-mono); font-size: 13px; letter-spacing: .38em; text-transform: uppercase; color: var(--msd-amber); text-shadow: 0 2px 12px rgba(0,0,0,.8); } .msd-hero-eyebrow::before, .msd-hero-eyebrow::after { content: ''; width: 48px; height: 1px; background: rgba(217,163,82,.6); } .msd-hero h1 { font-family: var(--msd-display); font-weight: 600; font-size: clamp(54px, 8.4vw, 124px); line-height: .96; letter-spacing: -.02em; margin: 0 0 28px; color: #fbf5e6; text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 28px rgba(0,0,0,.7), 0 0 80px rgba(0,0,0,.5); } .msd-hero h1 em { font-style: italic; color: var(--msd-amber); font-weight: 500; } .msd-hero-sub { max-width: 760px; margin: 0 auto 36px; color: rgba(245,236,214,.95); font-size: 19px; line-height: 1.7; text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 20px rgba(0,0,0,.6); font-family: var(--msd-display); } .msd-hero-stats { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; padding: 16px 12px; border-radius: 4px; background: rgba(10,8,8,.7); border: 1px solid rgba(217,163,82,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 40px rgba(0,0,0,.5); } .msd-hero-stats span { display: inline-flex; align-items: center; gap: 10px; padding: 4px 26px; font-family: var(--msd-mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,236,214,.92); border-right: 1px solid rgba(217,163,82,.22); } .msd-hero-stats span:last-child { border-right: none; } .msd-hero-stats strong { color: var(--msd-amber); font-weight: 400; font-family: var(--msd-poster); font-size: 22px; letter-spacing: .04em; } /* ── Poster grid — Netflix-style movie cards ───────────────────────── */ .msd-grid-section { max-width: 1600px; margin: 0 auto; padding: 0 32px 40px; } .msd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; } .msd-empty { grid-column: 1 / -1; text-align: center; color: rgba(245,236,214,.7); font-style: italic; padding: 80px 0; font-family: var(--msd-display); } .msd-card { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px; text-decoration: none; color: #fbf5e6; background: #0a0808; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 50px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.45); transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s, filter .5s; isolation: isolate; } .msd-card-poster { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-color: #1a1410; transition: transform .9s cubic-bezier(.22,1,.36,1), filter .5s; filter: saturate(.92) brightness(.88); } .msd-card-gradient { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.10) 20%, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.92) 100%); pointer-events: none; } /* Card meta — anchored to fixed corners so they NEVER reflow with variable title lengths. Status top-right, episode top-left, difficulty bottom-right, title block bottom-left. */ .msd-card-meta-top { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; /* badges remain clickable via parent */ } .msd-card-meta-bottom { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding-right: 76px; /* clear space for the bottom-right difficulty pin */ } .msd-card-episode { font-family: var(--msd-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--msd-amber); background: rgba(10,8,8,.78); padding: 6px 12px; border-radius: 2px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-left: 2px solid var(--msd-amber); box-shadow: 0 4px 14px rgba(0,0,0,.5); } .msd-card h3 { margin: 0; font-family: var(--msd-display); font-weight: 700; font-size: clamp(24px, 1.7vw, 32px); line-height: 1.04; color: #fbf5e6; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0,0,0,.85); } .msd-card .msd-tagline { margin: 0; font-family: var(--msd-display); font-style: italic; font-size: 16px; line-height: 1.4; color: rgba(245,236,214,.86); text-shadow: 0 2px 10px rgba(0,0,0,.8); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .35s ease-out .1s; } .msd-card .msd-when { margin: 4px 0 0; font-family: var(--msd-mono); font-size: 12px; letter-spacing: .08em; color: var(--msd-amber); text-shadow: 0 2px 10px rgba(0,0,0,.85); } .msd-card .msd-when--live { color: #ff8a8a; font-weight: 700; } .msd-card:hover { transform: translateY(-8px) scale(1.014); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 36px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(217,163,82,.45), 0 0 70px rgba(217,163,82,.22); } .msd-card:hover .msd-card-poster { transform: scale(1.06); filter: saturate(1) brightness(1); } .msd-card:hover .msd-tagline { max-height: 80px; opacity: 1; } .msd-card:focus-visible { outline: 2px solid var(--msd-amber); outline-offset: 4px; } /* Status + difficulty — slim cinematic title-card style, no longer pill-shaped */ .msd-status, .msd-difficulty { display: inline-block; padding: 6px 12px; border-radius: 2px; font-family: var(--msd-mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .msd-status { background: rgba(251,245,230,.94); color: var(--msd-ink); border-left: 2px solid var(--msd-red); } .msd-status--open { background: var(--msd-red); color: #fff; border-left: 2px solid #fff; box-shadow: 0 0 18px rgba(192,22,42,.85); position: relative; isolation: isolate; } /* Pulse via pseudo opacity — composite-only, GPU-friendly */ .msd-status--open::before { content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; background: rgba(192,22,42,.55); filter: blur(10px); opacity: .4; animation: msdPulse 2.6s ease-in-out infinite; pointer-events: none; } .msd-status--closed { background: rgba(40,30,24,.92); color: rgba(255,255,255,.85); border-left-color: rgba(255,255,255,.4); } .msd-status--judged { background: rgba(91,45,214,.95); color: #fff; border-left-color: rgba(255,255,255,.6); } .msd-status--scheduled, .msd-status--approved { background: rgba(10,8,8,.78); color: rgba(245,236,214,.95); border-left-color: var(--msd-amber); } /* Difficulty — pinned to bottom-right of card, decoupled from title flow */ .msd-card .msd-difficulty { position: absolute; bottom: 18px; right: 18px; z-index: 2; background: rgba(10,8,8,.78); color: rgba(245,236,214,.95); border-left: 2px solid var(--msd-amber); box-shadow: 0 4px 14px rgba(0,0,0,.5); } @keyframes msdPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* ── Detail page hero — title floats over the per-case world bg ───── Since body.ms-detective already paints the case hero as a fixed bg, the hero section itself is just typography over a soft bottom-fade. Keeps the same "you walked into the scene" feel without doubling the image. */ .msd-case-hero { min-height: clamp(460px, 78vh, 760px); position: relative; display: flex; align-items: flex-end; margin-bottom: 24px; } .msd-case-hero-bg { display: none; } /* page bg already paints the scene */ .msd-case-hero-grad { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,0,0,.55) 0%, transparent 60%), linear-gradient(180deg, rgba(10,8,8,.10) 0%, rgba(10,8,8,0) 35%, rgba(10,8,8,.60) 75%, rgba(10,8,8,.92) 100%); } .msd-case-hero-content { position: relative; z-index: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 150px clamp(28px, 4vw, 64px) 64px; color: #fbf5e6; } .msd-case-hero-content h1 { font-family: var(--msd-display); font-weight: 700; color: #fbf5e6; font-size: clamp(54px, 8vw, 124px); line-height: .96; letter-spacing: -.02em; margin: 22px 0 18px; max-width: 18ch; text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 6px 36px rgba(0,0,0,.7), 0 0 80px rgba(0,0,0,.5); } .msd-case-tagline { font-family: var(--msd-display); font-style: italic; color: rgba(251,245,230,.95); font-size: clamp(20px, 1.8vw, 28px); margin: 0 0 32px; max-width: 56ch; line-height: 1.4; text-shadow: 0 2px 14px rgba(0,0,0,.85); } .msd-case-meta { display: flex; gap: 36px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid rgba(217,163,82,.35); max-width: 820px; } .msd-case-meta-item { display: flex; flex-direction: column; gap: 6px; font-family: var(--msd-body); color: #fbf5e6; font-size: 16px; text-shadow: 0 2px 10px rgba(0,0,0,.7); } .msd-meta-label { font-family: var(--msd-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--msd-amber); } .msd-case-badges { display: flex; gap: 10px; flex-wrap: wrap; } .msd-episode-badge, .msd-anchor-badge { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 2px; font-family: var(--msd-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; background: rgba(10,8,8,.78); color: #fbf5e6; border-left: 2px solid var(--msd-amber); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0,0,0,.45); } .msd-anchor-badge { background: var(--msd-amber); color: #1a1410; font-weight: 700; border-left-color: #fbf5e6; } /* Wide content lane — sections inside the case page */ .msd-case-content { max-width: 1600px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 64px); } /* Content sections — no opaque box, headings live on the world */ .msd-block { margin: 72px 0; } .msd-block h2 { font-family: var(--msd-display); font-size: clamp(34px, 3.8vw, 56px); font-weight: 700; margin: 0 0 28px; color: #fbf5e6; letter-spacing: -.015em; position: relative; padding-left: 22px; text-shadow: 0 2px 14px rgba(0,0,0,.85); } .msd-block h2::before { content: ''; position: absolute; left: 0; top: 8%; width: 5px; height: 84%; background: linear-gradient(180deg, var(--msd-red) 0%, var(--msd-amber) 100%); border-radius: 2px; box-shadow: 0 0 14px rgba(192,22,42,.55); } /* "The case" — prose as a folded paper file laid on the desk */ .msd-block--case { background: linear-gradient(180deg, #fbf5e6 0%, #f0e4c8 100%); border-radius: 3px; padding: 48px clamp(28px, 4vw, 64px) 44px; position: relative; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 30px 70px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35); transform: rotate(-.15deg); } .msd-block--case::before { /* Paper-clip in the top-left, just a hint */ content: ''; position: absolute; top: -14px; left: 64px; width: 60px; height: 22px; background: linear-gradient(180deg, #c9ad7a 0%, #a08550 100%); border-radius: 4px 4px 0 0; box-shadow: 0 2px 6px rgba(0,0,0,.35); transform: rotate(-3deg); } .msd-block--case h2 { color: var(--msd-ink); text-shadow: none; } .msd-block--case h2::before { background: linear-gradient(180deg, var(--msd-red) 0%, var(--msd-blood) 100%); box-shadow: none; } .msd-prose { max-width: 76ch; margin: 0 auto; } .msd-prose p { margin: 0 0 18px; font-family: var(--msd-display); font-weight: 400; font-size: 18.5px; line-height: 1.78; color: #2b231c; } .msd-prose strong { color: var(--msd-ink); font-weight: 700; } .msd-block--case .msd-prose p:first-of-type::first-letter { font-family: var(--msd-display); font-weight: 700; font-size: 4.6em; float: left; line-height: .82; padding: 6px 14px 0 0; color: var(--msd-red); } /* ── Persons of interest — polaroids pinned directly to the world ─── */ .msd-block--persons { padding: 24px 0 12px; /* no opaque box — page bg shows through */ background: none; border-radius: 0; } .msd-block--persons h2 { color: #fbf5e6; } .msd-block--persons h2::before { background: linear-gradient(180deg, var(--msd-amber) 0%, var(--msd-red) 100%); box-shadow: 0 0 14px rgba(217,163,82,.55); } .msd-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; margin-top: 14px; } .msd-person { display: flex; flex-direction: column; background: #fbf5e6; border-radius: 4px; padding: 14px 14px 18px; position: relative; color: var(--msd-ink); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.30); transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s; } .msd-person:nth-child(3n+1) { transform: rotate(-1.6deg); } .msd-person:nth-child(3n+2) { transform: rotate(0.9deg); } .msd-person:nth-child(3n+3) { transform: rotate(-0.4deg); } .msd-person--tilt { /* legacy class, harmless */ } .msd-person:hover { transform: translateY(-6px) rotate(0); box-shadow: 0 22px 50px rgba(0,0,0,.65), 0 0 0 1px rgba(217,163,82,.35), 0 0 30px rgba(217,163,82,.20); z-index: 2; } .msd-person-photo { width: 100%; aspect-ratio: 1 / 1; margin-bottom: 14px; background: #2a1f17; overflow: hidden; position: relative; } .msd-person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); } .msd-person-photo--blank { display: flex; align-items: center; justify-content: center; background: #2a1f17; color: var(--msd-amber); font-family: var(--msd-display); font-size: 48px; font-weight: 700; } .msd-person-photo--blank span:first-child { display: block; } .msd-photo-tape { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 64px; height: 18px; background: rgba(220,200,150,.72); border-left: 1px dashed rgba(180,150,90,.5); border-right: 1px dashed rgba(180,150,90,.5); z-index: 3; } .msd-person--tilt .msd-person-photo { transform: none; } .msd-person-body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; } .msd-person-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .msd-person-head strong { font-family: var(--msd-display); font-weight: 700; font-size: 20px; color: var(--msd-ink); letter-spacing: -.005em; } .msd-role { font-family: var(--msd-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--msd-red); font-style: normal; } .msd-person p { margin: 4px 0 0; font-family: var(--msd-display); font-size: 14.5px; line-height: 1.55; color: #3a2f25; } /* ── Evidence board — paper notes laid directly on the scene ──────── */ .msd-block--evidence { padding: 24px 0 12px; background: none; border-radius: 0; } .msd-block--evidence h2 { color: #fbf5e6; } .msd-block--evidence h2::before { background: linear-gradient(180deg, var(--msd-red) 0%, var(--msd-blood) 100%); box-shadow: 0 0 14px rgba(192,22,42,.55); } .msd-block--evidence > p, .msd-block--evidence .msd-evidence-intro { color: rgba(251,245,230,.85); font-family: var(--msd-mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 28px; text-shadow: 0 2px 10px rgba(0,0,0,.85); } .msd-clues { list-style: none; counter-reset: clue; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .msd-clues > li { counter-increment: clue; position: relative; background: linear-gradient(180deg, #fbf5e6 0%, #f0e4c8 100%); color: var(--msd-ink); padding: 26px 24px 22px; border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 30px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.3); transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s; } .msd-clues > li:nth-child(4n+1) { transform: rotate(-.5deg); } .msd-clues > li:nth-child(4n+2) { transform: rotate(.4deg); } .msd-clues > li:nth-child(4n+3) { transform: rotate(-.2deg); } .msd-clues > li:nth-child(4n+4) { transform: rotate(.7deg); } .msd-clues > li:hover { transform: translateY(-4px) rotate(0); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 22px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(217,163,82,.40); z-index: 1; } .msd-clues > li::before { content: counter(clue, decimal-leading-zero); position: absolute; top: -14px; left: 18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--msd-red); color: #fbf5e6; font-family: var(--msd-poster); font-size: 18px; letter-spacing: .04em; border-radius: 50%; box-shadow: 0 4px 12px rgba(192,22,42,.55); z-index: 2; } .msd-clues > li::after { /* Evidence tag in corner */ content: 'EVIDENCE'; position: absolute; top: 14px; right: 18px; font-family: var(--msd-mono); font-size: 9.5px; letter-spacing: .22em; color: rgba(192,22,42,.55); } .msd-clue-label { font-family: var(--msd-poster); font-weight: 400; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; color: var(--msd-red); margin: 4px 0 10px; padding-right: 80px; line-height: 1.1; } .msd-clues .msd-prose p { font-family: var(--msd-mono); font-size: 14px; line-height: 1.7; color: #2b231c; } /* ── CTA at bottom of detail ─────────────────────────────────────────── */ .msd-cta { text-align: center; padding: 36px 24px; background: linear-gradient(135deg, #fffaf0 0%, #fdf4f5 100%); border: 1px solid var(--msd-line); border-radius: 14px; } .msd-cta-sub { margin: 14px 0 0; color: var(--msd-mute); font-size: 14px; } .msd-btn { display: inline-block; padding: 14px 30px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; background: #fff; color: var(--msd-ink); border: 1.5px solid var(--msd-line-2); cursor: pointer; transition: transform .2s, box-shadow .25s, background .2s, border-color .2s; font-family: inherit; } .msd-btn:hover { transform: translateY(-2px); border-color: var(--msd-red); color: var(--msd-red); } .msd-btn--primary { background: var(--msd-red); color: #fff; border-color: var(--msd-red); box-shadow: 0 4px 14px rgba(192,22,42,.22); } .msd-btn--primary:hover { background: var(--msd-red-d); color: #fff; border-color: var(--msd-red-d); box-shadow: 0 10px 28px rgba(192,22,42,.32); } .msd-btn--ghost { background: transparent; color: var(--msd-mute); cursor: default; } .msd-btn--ghost:hover { transform: none; color: var(--msd-mute); border-color: var(--msd-line-2); } .msd-inline-form { display: inline-block; } /* ── Play page (essay submission) ────────────────────────────────────── */ .msd-play { max-width: 820px; margin: 0 auto; } .msd-play h1 { font-size: clamp(32px, 4.5vw, 48px); margin: 12px 0 8px; font-family: 'Playfair Display', serif; } .msd-play-sub { color: var(--msd-mute); font-size: 16px; margin: 0 0 26px; } .msd-back a { color: var(--msd-mute); text-decoration: none; font-size: 14px; } .msd-back a:hover { color: var(--msd-red); } .msd-banner { background: #fff8e1; border: 1px solid #f3d77a; border-radius: 10px; padding: 14px 18px; margin: 0 0 22px; font-size: 14.5px; } .msd-banner--info { background: #eef4ff; border-color: #b9cdf3; } .msd-banner--err { background: #fbe9e9; border-color: #f3b9b9; color: #8b0f1f; } .msd-countdown { font-family: 'Special Elite', 'Courier New', monospace; font-size: 22px; font-weight: 700; color: var(--msd-red); margin: 0 0 22px; padding: 14px 18px; background: #fffaf0; border: 1px dashed rgba(192,22,42,.4); border-radius: 8px; text-align: center; letter-spacing: .04em; } .msd-countdown--done { color: var(--msd-mute); border-color: var(--msd-line); } .msd-essay-form textarea { width: 100%; min-height: 320px; padding: 20px 22px; border: 1.5px solid var(--msd-line-2); border-radius: 8px; font-family: 'Special Elite', 'Courier New', monospace; font-size: 16px; line-height: 1.75; background: #fffaf0; color: var(--msd-ink); resize: vertical; box-shadow: inset 0 1px 2px rgba(0,0,0,.02); box-sizing: border-box; } .msd-essay-form textarea:focus { border-color: var(--msd-red); outline: none; box-shadow: 0 0 0 4px rgba(192,22,42,.10); background: #fff; } .msd-essay-meta { text-align: right; color: var(--msd-mute); font-size: 12.5px; margin: 8px 0 18px; } /* ── Results / leaderboard ──────────────────────────────────────────── */ .msd-results { max-width: 720px; margin: 0 auto; } .msd-leaderboard { list-style: none; padding: 0; margin: 20px 0; } .msd-leaderboard li { display: flex; align-items: center; gap: 18px; padding: 14px 20px; background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 10px; margin-bottom: 8px; } .msd-leaderboard li.msd-me { border-color: var(--msd-red); background: #fff8f8; } .msd-rank { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--msd-red); min-width: 50px; } .msd-who { flex: 1; font-weight: 600; } .msd-score { font-variant-numeric: tabular-nums; color: var(--msd-mute); font-size: 14.5px; font-family: 'Special Elite', 'Courier New', monospace; } /* ── Wallet ─────────────────────────────────────────────────────────── */ .msd-wallet { max-width: 760px; margin: 0 auto; } .msd-wallet-balance { background: linear-gradient(135deg, var(--msd-red) 0%, var(--msd-red-d) 100%); color: #fff; border-radius: 14px; padding: 32px 36px; margin: 24px 0 36px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 16px 40px rgba(192,22,42,.25); } .msd-wallet-amount { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; } .msd-wallet-label { font-size: 14px; opacity: .88; margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; } .msd-credit-table { width: 100%; border-collapse: collapse; background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 8px; overflow: hidden; } .msd-credit-table th, .msd-credit-table td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--msd-line); } .msd-credit-table th { background: var(--msd-paper-2); color: var(--msd-mute); text-transform: uppercase; font-size: 12px; letter-spacing: .05em; } .msd-credit-table tr:last-child td { border-bottom: none; } .msd-credit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 16px 0; } .msd-credit-card { background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 12px; padding: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .msd-credit-amount { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: var(--msd-red); line-height: 1; } .msd-credit-meta { color: var(--msd-mute); font-size: 13px; margin: 6px 0 16px; } .msd-credit-actions { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--msd-line); padding-top: 14px; } .msd-credit-action summary { cursor: pointer; padding: 8px 10px; background: var(--msd-paper-2); border-radius: 8px; font-weight: 600; font-size: 14px; -webkit-user-select: none; user-select: none; list-style: none; } .msd-credit-action summary::-webkit-details-marker { display: none; } .msd-credit-action[open] summary { background: rgba(192,22,42,.08); color: var(--msd-red); } .msd-credit-form { padding: 14px 6px 4px; display: flex; flex-direction: column; gap: 10px; } .msd-credit-form label { font-size: 13px; color: var(--msd-mute); display: flex; flex-direction: column; gap: 6px; } .msd-credit-form input[type="text"], .msd-credit-form select { padding: 10px 12px; border: 1.5px solid var(--msd-line-2); border-radius: 8px; font-family: inherit; font-size: 14px; background: #fff; color: var(--msd-ink); } .msd-credit-form input[type="text"]:focus, .msd-credit-form select:focus { border-color: var(--msd-red); outline: none; box-shadow: 0 0 0 3px rgba(192,22,42,.10); } .msd-credit-form .msd-btn { padding: 10px 18px; font-size: 14px; } /* ── Legal pages ────────────────────────────────────────────────────── */ .msd-legal { max-width: 760px; margin: 0 auto; } .msd-legal h1 { font-size: clamp(32px, 4.5vw, 48px); margin: 12px 0 14px; font-family: 'Playfair Display', serif; } .msd-legal h2 { font-size: 22px; margin: 36px 0 12px; font-family: 'Playfair Display', serif; } .msd-legal h2::after { content: ''; display: block; width: 44px; height: 3px; background: var(--msd-red); border-radius: 3px; margin-top: 8px; } .msd-legal p, .msd-legal li { font-size: 15.5px; line-height: 1.75; color: #2b231c; margin: 0 0 12px; } .msd-legal ul { padding-left: 22px; } .msd-legal a { color: var(--msd-red); } /* ── Season / episode badges ────────────────────────────────────────── */ .msd-card-episode { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--msd-mute); margin-bottom: 6px; } .msd-case-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .msd-episode-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.30); } .msd-anchor-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: rgba(201,169,92,.92); color: #2a1f10; font-weight: 700; } /* ── Wordle-style share card (results page) ────────────────────────── */ .msd-share-card { background: linear-gradient(180deg, #fffaf0 0%, #fdf1d8 100%); border: 1px solid var(--msd-line); border-left: 4px solid var(--msd-red); border-radius: 12px; padding: 22px 26px; margin: 18px 0 28px; box-shadow: 0 6px 18px rgba(0,0,0,.08); } .msd-share-card-title { font-family: 'Special Elite', 'Courier New', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--msd-red); margin-bottom: 10px; } .msd-share-card-body { margin: 0 0 14px; padding: 14px 16px; background: #fff; border: 1px dashed rgba(0,0,0,.18); border-radius: 8px; font-family: 'Special Elite', 'Courier New', monospace; font-size: 14px; line-height: 1.7; color: var(--msd-ink); white-space: pre-wrap; word-break: break-word; } .msd-share-card-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .msd-share-feedback { color: var(--msd-mute); font-size: 13px; } /* ── You-as-Witness cameo card on case detail ───────────────────────── */ .msd-cameo-card { display: flex; gap: 18px; background: linear-gradient(180deg, #fffaf0 0%, #f5ecd6 100%); border: 1px solid var(--msd-line); border-left: 3px solid var(--msd-red); border-radius: 8px; padding: 18px 20px; position: relative; box-shadow: 0 6px 18px rgba(0,0,0,.06); } .msd-cameo-card::before { content: '🍁'; position: absolute; top: -10px; left: -8px; width: 26px; height: 26px; line-height: 26px; text-align: center; font-size: 13px; background: var(--msd-red); color: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(192,22,42,.40); transform: rotate(-8deg); } .msd-cameo-photo { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); } .msd-cameo-photo--blank { display: flex; align-items: center; justify-content: center; background: #ece3d2; color: var(--msd-mute); font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; } .msd-cameo-body { flex: 1; } .msd-cameo-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .msd-cameo-meta strong { font-size: 16px; color: var(--msd-ink); } .msd-cameo-meta span { font-size: 13px; color: var(--msd-mute); font-style: italic; font-family: 'Special Elite', monospace; } .msd-cameo-quote { margin: 0; padding: 10px 14px; background: #fff; border-left: 2px solid var(--msd-line-2); font-size: 15px; line-height: 1.7; color: #2b231c; font-style: italic; } .msd-cameo-foot { margin: 8px 0 0; font-size: 12px; color: var(--msd-mute); font-family: 'Special Elite', monospace; letter-spacing: .04em; } /* ── My detective page ──────────────────────────────────────────────── */ .msd-persona { max-width: 920px; margin: 0 auto; } .msd-persona h1 { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4.5vw, 48px); margin: 12px 0 8px; } .msd-persona-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin: 24px 0 36px; } .msd-persona-card { background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 12px; padding: 22px; box-shadow: 0 4px 14px rgba(0,0,0,.06); } .msd-persona-card form { display: flex; flex-direction: column; gap: 14px; } .msd-persona-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--msd-mute); font-weight: 600; } .msd-persona-card input[type="text"], .msd-persona-card textarea { padding: 12px 14px; border: 1.5px solid var(--msd-line-2); border-radius: 8px; font-family: inherit; font-size: 14.5px; background: #fff; color: var(--msd-ink); } .msd-persona-card input[type="text"]:focus, .msd-persona-card textarea:focus { border-color: var(--msd-red); outline: none; box-shadow: 0 0 0 3px rgba(192,22,42,.10); } .msd-persona-card--portrait { display: flex; flex-direction: column; align-items: center; text-align: center; } .msd-persona-portrait { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 10px 28px rgba(0,0,0,.15); } .msd-persona-portrait--blank { display: flex; align-items: center; justify-content: center; background: #ece3d2; color: var(--msd-mute); font-family: 'Special Elite', monospace; font-size: 13px; } .msd-appearances { list-style: none; padding: 0; margin: 12px 0; } .msd-appearances li { background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 8px; padding: 16px 20px; margin-bottom: 10px; } .msd-appearances a { color: var(--msd-red); text-decoration: none; font-weight: 600; } .msd-appearances blockquote { margin: 8px 0; padding: 8px 12px; background: #fff; border-left: 2px solid var(--msd-line-2); font-style: italic; color: #2b231c; font-size: 14.5px; } .msd-appearances small { color: var(--msd-mute); font-size: 12px; font-family: 'Special Elite', monospace; } /* ── AI suspect interrogation ───────────────────────────────────────── */ .msd-interrogate-hub { max-width: 920px; margin: 0 auto; } .msd-interrogate-hub h1 { font-family: 'Playfair Display', serif; font-size: clamp(30px, 4vw, 44px); margin: 14px 0 8px; } .msd-suspect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 18px; } .msd-suspect-card { display: flex; align-items: center; gap: 14px; background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: inherit; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s; box-shadow: 0 2px 10px rgba(0,0,0,.05); } .msd-suspect-card:hover { transform: translateY(-2px); border-color: rgba(192,22,42,.30); box-shadow: 0 14px 30px rgba(0,0,0,.10); } .msd-suspect-photo { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .msd-suspect-photo--blank { display: flex; align-items: center; justify-content: center; background: #ece3d2; color: var(--msd-mute); font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; } .msd-suspect-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .msd-suspect-body strong { font-size: 16px; color: var(--msd-ink); } .msd-suspect-body .msd-role { font-size: 13px; color: var(--msd-mute); font-style: italic; } .msd-turn-counter { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11.5px; letter-spacing: .04em; color: var(--msd-red); margin-top: 4px; } .msd-interrogate-chat { max-width: 760px; margin: 0 auto; } .msd-chat-header { display: flex; gap: 16px; align-items: center; padding: 18px 20px; margin: 12px 0 20px; background: linear-gradient(135deg, #1a1410 0%, #2a1f17 100%); color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.20); } .msd-chat-header h1 { color: #fff; font-family: 'Playfair Display', serif; font-size: 26px; margin: 0; } .msd-chat-header .msd-role { color: rgba(255,255,255,.78); font-size: 13px; margin: 4px 0 2px; font-style: italic; } .msd-chat-header .msd-turn-counter { color: #c9a95c; } .msd-chat-portrait { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.30); } .msd-chat-stream { background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 12px; padding: 18px; min-height: 240px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 1px 2px rgba(0,0,0,.03); } .msd-chat-empty { color: var(--msd-mute); font-style: italic; text-align: center; padding: 60px 12px; font-family: 'Special Elite', monospace; } .msd-msg { max-width: 86%; } .msd-msg-who { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--msd-mute); margin-bottom: 4px; font-family: 'Special Elite', monospace; } .msd-msg p { margin: 0; padding: 12px 16px; border-radius: 12px; line-height: 1.55; font-size: 15px; } .msd-msg--user { align-self: flex-end; text-align: right; } .msd-msg--user .msd-msg-who { color: var(--msd-red); } .msd-msg--user p { background: var(--msd-red); color: #fff; border-bottom-right-radius: 4px; } .msd-msg--assistant { align-self: flex-start; } .msd-msg--assistant p { background: #fff; color: var(--msd-ink); border: 1px solid var(--msd-line); border-bottom-left-radius: 4px; } .msd-chat-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; } .msd-chat-form textarea { flex: 1; padding: 12px 14px; border: 1.5px solid var(--msd-line-2); border-radius: 10px; font-family: inherit; font-size: 15px; line-height: 1.5; background: #fff; resize: vertical; min-height: 56px; } .msd-chat-form textarea:focus { border-color: var(--msd-red); outline: none; box-shadow: 0 0 0 3px rgba(192,22,42,.10); } .msd-chat-form button { flex: 0 0 auto; padding: 14px 22px; } .msd-chat-form button:disabled { opacity: .55; cursor: not-allowed; } @media (max-width: 640px) { .msd-chat-header { flex-direction: column; text-align: center; } .msd-chat-portrait { align-self: center; } .msd-msg { max-width: 100%; } } /* ── 3-column interrogation shell (freelancer.com-style) ──────────── */ .msd-chat-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; gap: 18px; max-width: 1280px; margin: 0 auto; min-height: 70vh; } .msd-chat-side { background: rgba(20, 15, 12, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px; align-self: start; position: sticky; top: 20px; } .msd-chat-side-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); color: #f4ead2; } .msd-chat-back { color: rgba(255,255,255,.55); text-decoration: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,.04); } .msd-chat-back:hover { background: rgba(255,255,255,.08); color: #fff; } .msd-chat-suspects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .msd-chat-suspect { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: rgba(255,255,255,.72); transition: background .15s, color .15s; } .msd-chat-suspect:hover { background: rgba(255,255,255,.05); color: #fff; } .msd-chat-suspect.is-active { background: rgba(201, 169, 92, .14); color: #fff; box-shadow: inset 3px 0 0 #c9a95c; } .msd-chat-suspect-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,.12); } .msd-chat-suspect-img--ph { background: rgba(201,169,92,.25); color: #c9a95c; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Playfair Display', serif; font-size: 15px; } .msd-chat-suspect-text { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .msd-chat-suspect-text strong { font-size: 13px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msd-chat-suspect-role { font-size: 11px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msd-chat-suspect-pill { flex-shrink: 0; background: rgba(0,0,0,.35); color: #c9a95c; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .msd-chat-center { display: flex; flex-direction: column; background: rgba(20, 15, 12, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; overflow: hidden; min-height: 70vh; } .msd-chat-stream-head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.08); } .msd-chat-stream-head h2 { margin: 0; color: #f4ead2; font-family: 'Playfair Display', serif; font-size: 20px; } .msd-chat-stream-head .msd-turn-counter { color: #c9a95c; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .msd-chat-shell .msd-chat-stream { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; } .msd-chat-shell .msd-chat-form { border-top: 1px solid rgba(255,255,255,.08); padding: 12px 14px; display: flex; gap: 10px; background: rgba(0,0,0,.25); } .msd-chat-shell .msd-chat-form textarea { flex: 1; resize: none; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.10); border-radius: 8px; color: #f4ead2; padding: 10px 14px; font-family: inherit; font-size: 14px; line-height: 1.45; } .msd-chat-side--right { text-align: left; } .msd-chat-profile-portrait { width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: rgba(0,0,0,.3); } .msd-chat-profile-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .msd-chat-side--right h3 { margin: 4px 0 2px; color: #f4ead2; font-family: 'Playfair Display', serif; font-size: 20px; } .msd-chat-profile-role { color: rgba(255,255,255,.65); font-size: 12.5px; font-style: italic; margin: 0 0 12px; } .msd-chat-profile-meta { color: rgba(255,255,255,.78); font-size: 12px; margin: 4px 0; } .msd-chat-profile-meta strong { color: #c9a95c; margin-right: 4px; } .msd-chat-profile-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); } .msd-chat-profile-h { display:block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: #c9a95c; margin-bottom: 6px; font-weight: 700; } .msd-chat-profile-block p { color: rgba(255,255,255,.85); font-size: 12.5px; line-height: 1.55; margin: 0; } /* Mobile: stack side panels above + below chat */ @media (max-width: 980px) { .msd-chat-shell { grid-template-columns: 1fr; } .msd-chat-side { position: static; } .msd-chat-side--right { order: 3; } .msd-chat-suspects { flex-direction: row; flex-wrap: wrap; } .msd-chat-suspects li { flex: 1 1 calc(50% - 4px); min-width: 0; } } /* ── Evidence vault — frontend gallery ────────────────────────────── */ .msd-evidence-vault { max-width: 1100px; margin: 40px auto; padding: 0 14px; } .msd-section-h { font-family: 'Playfair Display', serif; font-size: 28px; color: #f4ead2; margin: 0 0 8px; } .msd-section-sub { color: rgba(255,255,255,.6); font-size: 14px; margin: 0 0 24px; } .msd-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .msd-evidence-card { background: rgba(20, 15, 12, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: transform .25s, border-color .25s; } .msd-evidence-card:hover { transform: translateY(-2px); border-color: rgba(201,169,92,.4); } .msd-evidence-head { display: flex; align-items: center; gap: 10px; } .msd-evidence-ico { font-size: 22px; } .msd-evidence-head h3 { margin: 0; color: #f4ead2; font-family: 'Playfair Display', serif; font-size: 16px; flex: 1; } .msd-evidence-type { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #c9a95c; background: rgba(201,169,92,.15); padding: 2px 7px; border-radius: 999px; } .msd-evidence-caption { color: rgba(255,255,255,.78); font-size: 13px; font-style: italic; margin: 0; } .msd-evidence-image img { width: 100%; height: auto; border-radius: 8px; display: block; } .msd-evidence-body { color: rgba(255,255,255,.85); font-size: 13.5px; line-height: 1.55; max-height: 260px; overflow: auto; } .msd-evidence-body p { margin: 0 0 8px; } /* ── Maple Hour — broadcast list + watch page ──────────────────────── */ .msd-mh-list, .msd-mh-watch { max-width: 1080px; margin: 0 auto; } .msd-mh-header { text-align: center; margin-bottom: 30px; padding: 16px 0; } .msd-mh-header h1 { font-family: 'Playfair Display', serif; font-size: clamp(36px, 5vw, 52px); margin: 12px 0 14px; } .msd-mh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } .msd-mh-card { display: flex; flex-direction: column; background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; box-shadow: 0 4px 14px rgba(0,0,0,.06); } .msd-mh-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0,0,0,.12); } .msd-mh-cover { position: relative; height: 170px; background-size: cover; background-position: center; background-color: #2a2018; display: flex; align-items: center; justify-content: center; } .msd-mh-cover::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 100%); } .msd-mh-play { position: relative; z-index: 1; width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 50%; background: rgba(201,169,92,.95); color: #1a1410; font-size: 22px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.40); } .msd-mh-body { padding: 16px 18px 18px; } .msd-mh-body h3 { font-family: 'Playfair Display', serif; margin: 4px 0 6px; } /* Watch page */ .msd-mh-stage { position: relative; overflow: hidden; border-radius: 14px; background-size: cover; background-position: center; background-color: #1a1410; margin: 16px 0 28px; box-shadow: 0 20px 50px rgba(0,0,0,.30); } .msd-mh-stage::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.85) 100%); } .msd-mh-stage-inner { position: relative; z-index: 1; color: #fff; padding: 40px 32px 28px; } .msd-mh-meta { font-family: 'Special Elite', monospace; color: #c9a95c; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin: 0 0 12px; } .msd-mh-stage-inner h1 { color: #fff; font-family: 'Playfair Display', serif; font-size: clamp(30px, 4vw, 46px); margin: 0 0 8px; } .msd-mh-tagline { color: rgba(255,255,255,.85); font-size: 17px; font-style: italic; margin: 0 0 20px; } .msd-mh-audio { width: 100%; max-width: 720px; display: block; margin: 14px 0 18px; filter: invert(.92) hue-rotate(180deg); /* dark theme controls */ } .msd-mh-actions { display: flex; flex-wrap: wrap; gap: 10px; } .msd-mh-slides { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; } .msd-mh-slide { display: flex; gap: 18px; background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 10px; padding: 18px 22px; box-shadow: 0 4px 14px rgba(0,0,0,.05); } .msd-mh-slide--cold_open { background: linear-gradient(135deg, #1a1410 0%, #2a1f17 100%); color: #fff; } .msd-mh-slide--cold_open h3 { color: #fff; } .msd-mh-slide--cold_open p { color: rgba(255,255,255,.86); } .msd-mh-slide--close { background: linear-gradient(135deg, var(--msd-red) 0%, var(--msd-red-d) 100%); color: #fff; } .msd-mh-slide--close h3, .msd-mh-slide--close p { color: #fff; } .msd-mh-slide-no { flex: 0 0 48px; height: 48px; line-height: 48px; text-align: center; font-family: 'Special Elite', monospace; font-size: 18px; font-weight: 700; color: var(--msd-red); background: #fff; border: 1.5px solid var(--msd-line-2); border-radius: 8px; } .msd-mh-slide--cold_open .msd-mh-slide-no { color: #c9a95c; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); } .msd-mh-slide--close .msd-mh-slide-no { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.40); } .msd-mh-slide-body { flex: 1; min-width: 0; } .msd-mh-slide-body h3 { font-family: 'Playfair Display', serif; margin: 0 0 8px; font-size: 20px; } .msd-mh-slide-body p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #2b231c; } .msd-mh-slide-cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 8px 0 12px; } .msd-mh-slide-person { text-align: center; } .msd-mh-slide-person img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); display: block; margin: 0 auto 8px; } .msd-mh-slide-person strong { display: block; font-size: 14px; } .msd-mh-slide-person span { font-size: 12px; color: var(--msd-mute); font-style: italic; } .msd-mh-footer { text-align: center; padding: 30px 20px; background: linear-gradient(135deg, #fff 0%, #fdf4f5 100%); border: 1px solid var(--msd-line); border-radius: 12px; margin-top: 28px; } .msd-mh-footer p { margin: 0 0 16px; color: var(--msd-mute); font-style: italic; } @media (max-width: 640px) { .msd-mh-stage-inner { padding: 28px 20px 22px; } .msd-mh-slide { flex-direction: column; gap: 8px; } .msd-mh-slide-no { align-self: flex-start; } } /* ── Daily Mini ─────────────────────────────────────────────────────── */ .msd-daily { max-width: 860px; margin: 0 auto; } .msd-daily-header { text-align: center; margin-bottom: 24px; padding: 14px 0; } .msd-daily-header h1 { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4.5vw, 46px); margin: 12px 0 8px; } .msd-daily-setting { color: var(--msd-mute); font-style: italic; margin: 0 0 14px; } .msd-streak { display: inline-block; margin: 8px 0 0; font-family: 'Special Elite', monospace; color: var(--msd-red); background: rgba(192,22,42,.08); padding: 8px 16px; border-radius: 99px; font-size: 14px; } .msd-streak .msd-flame { margin-right: 6px; } .msd-streak strong { font-size: 17px; font-weight: 700; } .msd-daily-body { margin: 24px 0; } .msd-daily-background { background: #fffaf0; border: 1px solid var(--msd-line); border-left: 3px solid var(--msd-red); border-radius: 10px; padding: 18px 22px; margin-bottom: 22px; } .msd-daily-background p { margin: 0; font-size: 15.5px; line-height: 1.7; color: #2b231c; } .msd-daily-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .msd-daily-grid h3 { font-family: 'Playfair Display', serif; font-size: 18px; margin: 0 0 12px; color: var(--msd-ink); } .msd-daily-suspect, .msd-daily-clues li { background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; } .msd-daily-suspect strong { display: block; font-size: 15px; } .msd-daily-suspect p { margin: 6px 0 0; font-size: 14px; color: var(--msd-mute); font-style: italic; } .msd-daily-clues ol { list-style: none; counter-reset: dc; padding: 0; margin: 0; } .msd-daily-clues li { counter-increment: dc; font-size: 14.5px; line-height: 1.55; position: relative; padding-left: 38px; } .msd-daily-clues li::before { content: counter(dc); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; line-height: 22px; text-align: center; background: var(--msd-red); color: #fff; border-radius: 50%; font-family: 'Special Elite', monospace; font-size: 12px; font-weight: 700; } .msd-daily-form { background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 12px; padding: 22px 24px; margin: 22px 0; } .msd-daily-form h2 { font-family: 'Playfair Display', serif; margin: 0 0 14px; font-size: 22px; } .msd-suspect-radio-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .msd-suspect-radio { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 16px; background: #fff; border: 1.5px solid var(--msd-line-2); border-radius: 8px; transition: border-color .2s, background .2s; } .msd-suspect-radio:hover { border-color: var(--msd-red); } .msd-suspect-radio input[type="radio"] { margin: 0; flex: 0 0 auto; } .msd-suspect-radio:has(input:checked) { border-color: var(--msd-red); background: #fff8f8; } .msd-suspect-radio-body { flex: 1; } .msd-suspect-radio-body strong { display: block; font-size: 15px; } .msd-suspect-radio-body span { font-size: 13px; color: var(--msd-mute); font-style: italic; } .msd-reveal { background: linear-gradient(135deg, #fff 0%, #fdf4f5 100%); border: 1px solid var(--msd-line); border-radius: 10px; padding: 18px 22px; margin: 18px 0; } .msd-reveal h3 { font-family: 'Playfair Display', serif; margin: 0 0 8px; color: var(--msd-red); } .msd-reveal p { margin: 0; font-size: 15px; line-height: 1.7; } .msd-daily-history { margin: 32px 0 8px; } .msd-daily-history h2 { font-family: 'Playfair Display', serif; font-size: 22px; margin: 0 0 12px; } .msd-daily-history ul { list-style: none; padding: 0; margin: 0; } .msd-daily-history li { display: flex; gap: 14px; align-items: center; padding: 10px 14px; background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 8px; margin-bottom: 6px; } .msd-daily-mark { font-size: 18px; } .msd-daily-date { font-family: 'Special Elite', monospace; font-size: 13px; color: var(--msd-mute); min-width: 100px; } .msd-daily-title { flex: 1; font-weight: 600; font-size: 14.5px; } @media (max-width: 640px) { .msd-daily-grid { grid-template-columns: 1fr; } .msd-daily-history li { flex-wrap: wrap; } } /* ── Detective rank + badges ────────────────────────────────────────── */ .msd-rank-card { background: linear-gradient(135deg, var(--rank-color, var(--msd-red)) 0%, rgba(0,0,0,.85) 100%); color: #fff; border-radius: 14px; padding: 22px 26px; margin: 20px 0 28px; box-shadow: 0 12px 30px rgba(0,0,0,.20); } .msd-rank-head { display: flex; gap: 18px; align-items: center; } .msd-rank-icon { font-size: 44px; line-height: 1; flex: 0 0 auto; background: rgba(255,255,255,.15); border-radius: 50%; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; } .msd-rank-name { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: #fff; } .msd-rank-xp { margin-top: 4px; font-family: 'Special Elite', monospace; font-size: 13px; color: rgba(255,255,255,.85); letter-spacing: .02em; } .msd-rank-bar { margin-top: 16px; height: 10px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden; } .msd-rank-bar span { display: block; height: 100%; background: linear-gradient(90deg, #c9a95c 0%, #fff 100%); border-radius: 99px; transition: width .5s ease-out; } .msd-badges-section { margin: 18px 0 32px; } .msd-badges-section h2 { font-family: 'Playfair Display', serif; font-size: 22px; margin: 0 0 14px; } .msd-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .msd-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: #fffaf0; border: 1px solid var(--msd-line); border-radius: 12px; padding: 18px 14px; box-shadow: 0 4px 14px rgba(0,0,0,.06); } .msd-badge-icon { font-size: 36px; line-height: 1; } .msd-badge strong { font-size: 13.5px; } .msd-badge small { font-family: 'Special Elite', monospace; font-size: 11px; color: var(--msd-mute); } /* ── Season finale — Justice vs Crime ──────────────────────────────── */ .msd-finale { margin: 24px 0 32px; padding: 28px; background: linear-gradient(135deg, #1a1410 0%, #2a1f17 100%); color: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.30); } .msd-finale-head { text-align: center; margin-bottom: 22px; } .msd-finale-head h2 { font-family: 'Playfair Display', serif; color: #fff; font-size: 30px; margin: 6px 0 8px; } .msd-finale-sub { color: rgba(255,255,255,.82); font-size: 15px; max-width: 600px; margin: 0 auto; } .msd-verdict-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; } .msd-verdict-card { display: block; cursor: pointer; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.12); border-radius: 12px; padding: 22px; text-align: left; transition: border-color .2s, background .2s, transform .2s; } .msd-verdict-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.10); } .msd-verdict-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .msd-verdict-card:has(input:checked) { border-color: #c9a95c; background: rgba(201,169,92,.14); } .msd-verdict-card--justice { } .msd-verdict-card--crime { } .msd-verdict-icon { font-size: 30px; line-height: 1; margin-bottom: 8px; } .msd-verdict-card strong { display: block; font-family: 'Playfair Display', serif; font-size: 22px; color: #fff; margin-bottom: 6px; } .msd-verdict-tagline { color: #c9a95c; font-style: italic; margin: 0 0 12px; font-size: 14px; } .msd-verdict-arg { color: rgba(255,255,255,.88); font-size: 13.5px; line-height: 1.65; margin: 0; } .msd-finale-rationale-label { display: block; margin: 18px 0 10px; color: rgba(255,255,255,.82); font-size: 13px; } .msd-finale-rationale-label input { width: 100%; padding: 12px 14px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff; font-size: 14.5px; margin-top: 6px; } .msd-finale-rationale-label input:focus { outline: none; border-color: #c9a95c; background: rgba(255,255,255,.10); } .msd-finale-form button { margin-top: 12px; } .msd-finale-recorded { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 16px 20px; margin: 14px 0; } .msd-finale-recorded p { margin: 0 0 8px; color: #fff; font-size: 15px; } .msd-finale-recorded em { color: #c9a95c; } .msd-finale-rationale { margin: 8px 0; padding: 10px 14px; background: rgba(0,0,0,.30); border-left: 2px solid #c9a95c; color: rgba(255,255,255,.90); font-style: italic; } .msd-finale-s2 { color: rgba(255,255,255,.78); font-size: 13.5px; } .msd-finale-tally { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); } .msd-finale-tally h3 { color: #c9a95c; font-family: 'Playfair Display', serif; font-size: 16px; margin: 0 0 10px; text-align: center; } .msd-tally-bar { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.10); box-shadow: inset 0 1px 4px rgba(0,0,0,.30); } .msd-tally-justice { background: linear-gradient(90deg, #5b8def 0%, #3878b6 100%); transition: width .6s ease-out; } .msd-tally-crime { background: linear-gradient(90deg, var(--msd-red) 0%, var(--msd-red-d) 100%); transition: width .6s ease-out; } .msd-tally-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: rgba(255,255,255,.82); font-family: 'Special Elite', monospace; font-size: 13px; } .msd-tally-meta strong { color: #fff; } @media (max-width: 640px) { .msd-verdict-cards { grid-template-columns: 1fr; } } /* ── Maple Hour event banner (countdown / live / on-demand) ────────── */ .msd-mh-event { margin: 20px 0; padding: 22px 26px; background: linear-gradient(135deg, #1a1410 0%, #2a1f17 100%); color: #fff; border-radius: 14px; display: grid; gap: 12px; align-items: center; grid-template-columns: auto 1fr auto; box-shadow: 0 12px 30px rgba(0,0,0,.25); } .msd-mh-event--live { background: linear-gradient(135deg, var(--msd-red) 0%, var(--msd-red-d) 100%); position: relative; box-shadow: 0 12px 30px rgba(192,22,42,.30); } .msd-mh-event--live::before { content: ''; position: absolute; inset: -2px; border-radius: 16px; box-shadow: 0 12px 50px rgba(192,22,42,.55); opacity: 0; pointer-events: none; animation: msdLivePulse 2s ease-in-out infinite; } @keyframes msdLivePulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .msd-mh-event--done { background: linear-gradient(135deg, #2c3144 0%, #1a2238 100%); } .msd-mh-event-tag { font-family: 'Special Elite', monospace; letter-spacing: .12em; font-size: 11px; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.18); color: #fff; white-space: nowrap; } .msd-mh-event strong { color: #fff; font-size: 16px; line-height: 1.4; } .msd-mh-countdown { grid-column: 1 / -1; font-family: 'Special Elite', monospace; font-size: 32px; font-weight: 700; color: #c9a95c; text-align: center; letter-spacing: .05em; padding: 14px 0; background: rgba(0,0,0,.25); border-radius: 8px; } .msd-mh-event--live .msd-mh-countdown { color: #fff; } .msd-mh-event-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; } .msd-mh-event .msd-btn { padding: 12px 22px; font-size: 14px; } .msd-mh-event--compact { grid-template-columns: auto 1fr; padding: 14px 18px; } .msd-mh-event--compact .msd-mh-countdown, .msd-mh-event--compact .msd-mh-event-actions { grid-column: 1 / -1; } @media (max-width: 640px) { .msd-mh-event { grid-template-columns: 1fr; text-align: center; } .msd-mh-event-tag { justify-self: center; } .msd-mh-countdown { font-size: 24px; } } /* ── Tablet (medium) ────────────────────────────────────────────────── */ @media (max-width: 900px) { .ms-detective .msd-main { padding: 0 0 60px; } .msd-hero { padding: 120px 22px 64px; } .msd-hero h1 { font-size: clamp(48px, 9vw, 80px); } .msd-case-hero { min-height: clamp(420px, 70vh, 600px); } .msd-case-hero-content { padding: 130px 26px 52px; } .msd-case-hero-content h1 { font-size: clamp(46px, 8vw, 80px); } .msd-grid-section { padding: 0 22px 36px; } .msd-grid { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .msd-people { gap: 24px; } .msd-clues { gap: 18px; grid-template-columns: 1fr; } .msd-case-content { padding: 0 22px; } .msd-block { margin: 56px 0; } .msd-block--case { padding: 36px clamp(22px, 4vw, 48px); } .msd-persona-grid { grid-template-columns: 1fr; } .msd-cameo-card { flex-direction: column; } .msd-cameo-photo { align-self: center; } } /* ── Mobile ─────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* Disable fixed-bg on iOS (iOS doesn't honor fixed reliably — falls back to scroll-with-content which makes it jitter). Use plain background. */ body.ms-detective::before { background-attachment: scroll; } .ms-detective .msd-main { padding: 0 0 60px; } .msd-hero { padding: 110px 18px 48px; } .msd-hero-eyebrow { font-size: 11px; letter-spacing: .28em; } .msd-hero-eyebrow::before, .msd-hero-eyebrow::after { width: 22px; } .msd-hero h1 { font-size: clamp(40px, 11vw, 64px); margin-bottom: 20px; } .msd-hero-sub { font-size: 16px; margin-bottom: 24px; } .msd-hero-stats { padding: 12px 4px; flex-direction: column; gap: 6px; } .msd-hero-stats span { border-right: none; padding: 4px 16px; width: 100%; justify-content: center; font-size: 12px; } .msd-hero-stats strong { font-size: 18px; } .msd-grid-section { padding: 0 14px 36px; } .msd-grid { gap: 14px; grid-template-columns: repeat(2, 1fr); } .msd-card h3 { font-size: 19px; } .msd-card .msd-tagline { font-size: 13.5px; } .msd-card-meta-bottom { left: 12px; right: 12px; bottom: 12px; padding-right: 64px; } .msd-card-meta-top { top: 10px; left: 10px; right: 10px; } .msd-card-episode { font-size: 10.5px; padding: 4px 8px; } .msd-status, .msd-difficulty { font-size: 10px; padding: 4px 8px; letter-spacing: .12em; } .msd-card .msd-difficulty { bottom: 12px; right: 12px; } .msd-case-hero { min-height: clamp(380px, 62vh, 540px); } .msd-case-hero-content { padding: 100px 18px 40px; } .msd-case-hero-content h1 { font-size: clamp(38px, 11vw, 60px); margin: 14px 0 12px; } .msd-case-tagline { font-size: 17px; margin-bottom: 22px; } .msd-case-meta { gap: 20px; padding-top: 18px; } .msd-case-meta-item { font-size: 14px; } .msd-episode-badge, .msd-anchor-badge { font-size: 11px; padding: 5px 10px; } .msd-case-content { padding: 0 14px; } .msd-block { margin: 40px 0; } .msd-block h2 { font-size: 28px; padding-left: 16px; } .msd-block h2::before { width: 4px; } .msd-block--case { padding: 28px 18px 24px; } .msd-block--case::before { display: none; } .msd-prose p { font-size: 16.5px; line-height: 1.72; } .msd-block--case .msd-prose p:first-of-type::first-letter { font-size: 3.6em; padding: 4px 10px 0 0; } .msd-people { grid-template-columns: 1fr; gap: 32px; } .msd-person { padding: 12px 12px 16px; } .msd-clues { grid-template-columns: 1fr; gap: 22px; } .msd-clues > li { padding: 22px 18px 18px; } .msd-clue-label { font-size: 17px; padding-right: 70px; } .msd-cta { padding: 26px 18px; } .msd-btn { padding: 12px 22px; font-size: 14px; width: 100%; max-width: 320px; } .msd-inline-form, .msd-inline-form button { width: 100%; max-width: 320px; } .msd-essay-form textarea { min-height: 280px; padding: 16px 18px; font-size: 15px; } .msd-countdown { font-size: 18px; padding: 12px 14px; } .msd-share-card { padding: 18px 18px; margin: 14px 0 22px; } .msd-share-card-body { font-size: 13px; padding: 12px 14px; } .msd-leaderboard li { gap: 12px; padding: 12px 16px; } .msd-rank { font-size: 18px; min-width: 40px; } .msd-who { font-size: 14px; } .msd-score { font-size: 13px; } .msd-wallet-amount { font-size: 40px; } .msd-credit-card { padding: 18px; } .msd-credit-amount { font-size: 30px; } } @media (prefers-reduced-motion: reduce) { .msd-card, .msd-btn, .msd-person, .msd-clues > li, .msd-card-poster { transition: none; } .msd-card:hover, .msd-btn:hover, .msd-person:hover, .msd-clues > li:hover { transform: none; } .msd-card:hover .msd-card-poster { transform: none; } .msd-status--open::before, .msd-case-hero-bg { animation: none; } } /* ════════════════════════════════════════════════════════════════════ v5.45 — REFINEMENT PASS User feedback: too sparse, too many fonts, amber-heavy, navbar overlap, polaroid kitsch inconsistent with the rest. Apply a cool editorial detective aesthetic. Single display serif + single sans. Tighter spacing throughout. Steel + iron + accent red palette. ════════════════════════════════════════════════════════════════════ */ /* ── 1. Navbar overlap fix ──────────────────────────────────────── */ body.ms-detective { padding-top: 112px !important; } body.ms-detective .msd-main, body.ms-detective main { scroll-padding-top: 120px; } /* ── 2. Typography lockdown ─────────────────────────────────────── */ body.ms-detective h1, body.ms-detective h2, body.ms-detective h3, body.ms-detective .msd-page-title, body.ms-detective .msd-section-h, body.ms-detective .msd-case-hero-content h1, body.ms-detective .msd-stat, body.ms-detective .msd-evidence-head h3, body.ms-detective .msd-chat-stream-head h2, body.ms-detective .msd-chat-side--right h3 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600; letter-spacing: -.005em; } body.ms-detective, body.ms-detective p, body.ms-detective .msd-btn, body.ms-detective .msd-meta-label, body.ms-detective .msd-clue-num, body.ms-detective .msd-stat-l, body.ms-detective .msd-tagline, body.ms-detective .msd-case-tagline, body.ms-detective .msd-evidence-type, body.ms-detective .msd-chat-suspect-role, body.ms-detective .msd-chat-profile-h { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; } /* ── 3. Color refinement ────────────────────────────────────────── */ body.ms-detective { --msd-amber: #b89b6e; --msd-amber-2: #c9b48a; --msd-steel: #97a3b0; --msd-iron: #4a525c; } /* Cards: translucent dark surface, sharper edges */ body.ms-detective .msd-card, body.ms-detective .msd-person, body.ms-detective .msd-clue, body.ms-detective .msd-stat-card { background: rgba(18, 14, 12, .62); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); border: 1px solid rgba(255, 255, 255, .07); border-radius: 6px; box-shadow: none; color: rgba(245, 236, 214, .92); } /* ── 4. Spacing compression ─────────────────────────────────────── */ body.ms-detective .msd-main { padding: 0 18px 60px; } body.ms-detective .msd-section-h { font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 6px; } body.ms-detective .msd-section-sub { margin: 0 0 18px; font-size: 13px; } body.ms-detective .msd-case-hero-content h1 { font-size: clamp(40px, 5vw, 68px); margin: 14px 0 10px; line-height: 1; } body.ms-detective .msd-case-tagline { font-size: 15.5px; margin: 6px 0 14px; max-width: 56ch; } body.ms-detective .msd-case-meta { gap: 22px; padding: 16px 0; } body.ms-detective .msd-meta-label { font-size: 10.5px; letter-spacing: .08em; } body.ms-detective .msd-card { padding: 18px 22px; } body.ms-detective .msd-card + .msd-card { margin-top: 16px; } /* ── 5. Persons of interest — strip polaroid kitsch ─────────────── */ body.ms-detective .msd-person { background: rgba(18, 14, 12, .68) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .06) !important; border-radius: 8px !important; padding: 0 !important; transform: none !important; box-shadow: 0 4px 24px rgba(0,0,0,.35); overflow: hidden; } body.ms-detective .msd-person::before, body.ms-detective .msd-person::after { display: none !important; } body.ms-detective .msd-person img { width: 100%; height: 280px; object-fit: cover; border-radius: 0 !important; margin: 0 !important; display: block; filter: saturate(.88) contrast(1.05); } body.ms-detective .msd-person h3 { margin: 16px 18px 4px; font-size: 19px; font-family: 'Cormorant Garamond', Georgia, serif !important; color: #f5ecd6; letter-spacing: 0; } body.ms-detective .msd-person .msd-role { margin: 0 18px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--msd-amber); font-weight: 600; } body.ms-detective .msd-person p { margin: 0 18px 18px; font-size: 13px; line-height: 1.55; color: rgba(245, 236, 214, .75); font-style: normal; } /* ── 6. Evidence cards ──────────────────────────────────────────── */ body.ms-detective .msd-clue { background: rgba(18, 14, 12, .65) !important; border: 1px solid rgba(255, 255, 255, .07) !important; border-radius: 6px !important; padding: 18px 20px !important; transform: none !important; } body.ms-detective .msd-clue::before, body.ms-detective .msd-clue::after { display: none !important; } body.ms-detective .msd-clue-num { background: var(--msd-red); color: #fff; width: 26px; height: 26px; font-size: 11px; border-radius: 50%; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif !important; display: inline-flex; align-items: center; justify-content: center; } body.ms-detective .msd-clue-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--msd-amber); margin-bottom: 8px; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700; } body.ms-detective .msd-clue h3 { font-size: 15px; margin: 0 0 10px; color: #f5ecd6; font-family: 'Cormorant Garamond', Georgia, serif !important; letter-spacing: 0; } body.ms-detective .msd-clue p { font-size: 13px; line-height: 1.6; color: rgba(245, 236, 214, .82); margin: 0; } /* ── 7. CTA strip ───────────────────────────────────────────────── */ body.ms-detective .msd-case-cta { background: rgba(15, 12, 10, .80) !important; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; padding: 26px 28px !important; margin-top: 36px; } /* ── 8. Case-list grid ──────────────────────────────────────────── */ body.ms-detective .msd-poster-grid .msd-case-poster { background: rgba(15, 12, 10, .55) !important; border: 1px solid rgba(255, 255, 255, .07) !important; border-radius: 6px !important; } body.ms-detective .msd-case-poster:hover { border-color: rgba(184, 155, 110, .5) !important; transform: translateY(-2px); } /* ── 9. Chat shell refinement ───────────────────────────────────── */ body.ms-detective .msd-chat-shell { padding-top: 12px; } body.ms-detective .msd-chat-side, body.ms-detective .msd-chat-center { background: rgba(15, 12, 10, .72); border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; } body.ms-detective .msd-chat-side-head strong { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--msd-amber); } body.ms-detective .msd-chat-stream-head h2 { font-size: 18px; letter-spacing: 0; } body.ms-detective .msd-chat-stream { padding: 18px; } body.ms-detective .msd-msg { max-width: 88%; } body.ms-detective .msd-msg p { font-size: 14px; line-height: 1.55; } body.ms-detective .msd-msg--user { background: var(--msd-red); color: #fff; border-radius: 14px 14px 4px 14px; padding: 10px 14px; align-self: flex-end; } body.ms-detective .msd-msg--user .msd-msg-who { display: none; } body.ms-detective .msd-msg--assistant { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 14px 14px 14px 4px; padding: 12px 16px; } body.ms-detective .msd-msg-who { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--msd-amber); margin-bottom: 4px; font-weight: 700; } /* ── 10. Case-detail hero — tighten ─────────────────────────────── */ body.ms-detective .msd-case-hero-content { padding: 60px 0 30px; } body.ms-detective .msd-case-badges { gap: 8px; } body.ms-detective .msd-status, body.ms-detective .msd-episode-badge { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 10.5px; letter-spacing: .12em; padding: 4px 10px; border-radius: 999px; } /* ── 11. Drop-cap on case body ──────────────────────────────────── */ body.ms-detective .msd-case-section--story p:first-of-type::first-letter, body.ms-detective .msd-case-section p:first-child::first-letter { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 4.5em; line-height: .9; float: left; margin: .04em .1em 0 0; color: var(--msd-amber); font-weight: 600; } /* ── 12. Calmer background during interrogation ─────────────────── */ body.ms-detective.msd-interrogating::before { animation: none; transform: scale(1.04); } /* ── 13. Mobile ─────────────────────────────────────────────────── */ @media (max-width: 720px) { body.ms-detective { padding-top: 96px !important; } body.ms-detective .msd-person img { height: 200px; } body.ms-detective .msd-case-meta { flex-wrap: wrap; gap: 14px; } } /* ============================================================ * v5.48 — DETECTIVE FRONTEND RE-DESIGN (override pass) * * Replaces the cream-paper / brass / polaroid styling with a clean * dark "operations room" look: * - charcoal base + steel cards + a single incandescent accent * - typography reduced to: Cormorant (display) + Inter (UI) + Special Elite (labels only) * - explicit stages on the case detail page: Operations Room (3 stations) * -> Case board (dossier) -> Vault. No tilted polaroids, no paper. * ============================================================ */ body.ms-detective { --msd-lamp: #f5c878; --msd-lamp-dim: rgba(245,200,120,.55); --msd-steel: #1c1f24; --msd-steel-2: #25292f; --msd-edge: rgba(245,200,120,.10); --msd-edge-2: rgba(245,200,120,.22); --msd-bone: #e8e6e1; --msd-bone-2: #a8a8a4; --msd-display: "Cormorant Garamond", Georgia, serif; --msd-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --msd-mono: "Special Elite", "Courier New", monospace; font-family: var(--msd-body); color: var(--msd-bone); } body.ms-detective::before { background: rgba(8,8,10,.78) !important; } /* Kill polaroid + paper textures everywhere */ body.ms-detective .msd-block--case::before, body.ms-detective .msd-block--persons::before, body.ms-detective .msd-block--evidence::before { content: none !important; } body.ms-detective .msd-block--case, body.ms-detective .msd-block--persons, body.ms-detective .msd-block--evidence { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; } body.ms-detective .msd-photo-tape { display: none !important; } body.ms-detective .msd-person:nth-child(n) { transform: none !important; } body.ms-detective .msd-clues > li:nth-child(n) { transform: none !important; } /* Headings: lock typography */ body.ms-detective h1, body.ms-detective h2, body.ms-detective h3 { font-family: var(--msd-display); font-weight: 600; color: var(--msd-bone); letter-spacing: -.005em; } /* Drop the brass underline on body-card h2 */ body.ms-detective .msd-block--case h2::before, body.ms-detective .msd-block--persons h2::before, body.ms-detective .msd-block--evidence h2::before { content: none !important; } /* HERO refinements */ body.ms-detective .msd-case-hero { min-height: 62vh; } body.ms-detective .msd-case-hero-grad { background: linear-gradient(180deg, rgba(8,8,10,.50) 0%, rgba(8,8,10,.92) 100%); } body.ms-detective .msd-case-hero h1 { font-family: var(--msd-display); font-weight: 600; font-style: normal; color: var(--msd-bone); letter-spacing: -.01em; } body.ms-detective .msd-case-tagline { color: var(--msd-bone-2); font-style: italic; font-family: var(--msd-display); font-weight: 400; } body.ms-detective .msd-meta-label, body.ms-detective .msd-case-meta-item span:first-child { font-family: var(--msd-body); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--msd-lamp); } body.ms-detective .msd-case-meta-item span:last-child { font-family: var(--msd-body); color: var(--msd-bone); font-weight: 500; } /* Operations Room */ .msd-ops { max-width: 1180px; margin: 48px auto 28px; padding: 0 28px; } .msd-ops-head { margin-bottom: 22px; } .msd-ops-eyebrow { display: inline-block; font-family: var(--msd-body); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--msd-lamp); padding: 4px 0 4px 14px; position: relative; margin-bottom: 8px; } .msd-ops-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--msd-lamp); box-shadow: 0 0 12px rgba(245,200,120,.55); transform: translateY(-50%); } .msd-ops-head h2 { font-family: var(--msd-display); font-size: clamp(26px, 3.6vw, 38px); margin: 0 0 8px; color: var(--msd-bone); font-weight: 600; } .msd-ops-head p { color: var(--msd-bone-2); font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 720px; } .msd-ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .msd-station { position: relative; display: flex; flex-direction: column; min-height: 200px; padding: 22px 22px 18px; background: linear-gradient(180deg, var(--msd-steel) 0%, var(--msd-steel-2) 100%); border: 1px solid var(--msd-edge); border-radius: 14px; text-decoration: none; color: var(--msd-bone); transition: transform .18s ease, border-color .18s ease, box-shadow .2s ease; overflow: hidden; } .msd-station::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--msd-lamp); opacity: .35; transition: opacity .18s ease; } .msd-station:hover { transform: translateY(-2px); border-color: var(--msd-edge-2); box-shadow: 0 14px 34px rgba(0,0,0,.36); } .msd-station:hover::before { opacity: 1; } .msd-station.is-locked { opacity: .45; cursor: not-allowed; pointer-events: none; } .msd-station-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(245,200,120,.08); color: var(--msd-lamp); margin-bottom: 14px; } .msd-station-body { display: flex; flex-direction: column; gap: 4px; flex: 1; } .msd-station-title { font-family: var(--msd-display); font-size: 22px; font-weight: 600; color: var(--msd-bone); line-height: 1.15; } .msd-station-sub { font-family: var(--msd-body); font-size: 13px; color: var(--msd-bone-2); line-height: 1.5; } .msd-station-meta { font-family: var(--msd-mono); font-size: 11px; color: var(--msd-bone-2); letter-spacing: .04em; margin-top: 6px; } .msd-station-cta { margin-top: 14px; font-family: var(--msd-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--msd-lamp); align-self: flex-start; } .msd-station-cta--primary { color: #fff; background: var(--msd-red); padding: 7px 12px; border-radius: 999px; } .msd-station--accuse { border-color: rgba(192,22,42,.40); } .msd-station--accuse::before { background: var(--msd-red); opacity: 1; } .msd-station--accuse .msd-station-icon { background: rgba(192,22,42,.10); color: var(--msd-red); } .msd-ops-hour { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 18px; background: rgba(245,200,120,.04); border: 1px solid var(--msd-edge); border-radius: 12px; color: var(--msd-bone); text-decoration: none; font-size: 14px; transition: background .15s ease; } .msd-ops-hour:hover { background: rgba(245,200,120,.08); } .msd-ops-hour-ic { font-size: 22px; } .msd-ops-hour strong { font-family: var(--msd-display); font-weight: 600; } /* Case board (dossier) */ .msd-board { max-width: 1180px; margin: 44px auto 36px; padding: 0 28px; } .msd-board-head { margin-bottom: 18px; } .msd-board-head h2 { font-family: var(--msd-display); font-size: clamp(28px, 4vw, 44px); margin: 0; color: var(--msd-bone); } .msd-board-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .msd-board-card { background: linear-gradient(180deg, var(--msd-steel) 0%, var(--msd-steel-2) 100%); border: 1px solid var(--msd-edge); border-radius: 14px; padding: 26px 28px; } .msd-board-card-head { margin-bottom: 16px; } .msd-board-card-eyebrow { font-family: var(--msd-body); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--msd-lamp); } .msd-prose--clean, .msd-prose--clean p { color: var(--msd-bone); font-family: var(--msd-body); font-size: 15.5px; line-height: 1.72; margin: 0 0 14px; } .msd-prose--clean p::first-letter { font-size: inherit !important; float: none !important; color: inherit !important; font-family: inherit !important; padding: 0 !important; margin: 0 !important; } .msd-prose--clean p:last-child { margin-bottom: 0; } /* Dossiers */ .msd-dossiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .msd-dossier { display: flex; flex-direction: column; background: rgba(8,8,10,.36); border: 1px solid var(--msd-edge); border-radius: 12px; overflow: hidden; transition: border-color .15s ease, transform .15s ease; } .msd-dossier:hover { border-color: var(--msd-edge-2); transform: translateY(-2px); } .msd-dossier-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-bottom: 1px solid var(--msd-edge); filter: saturate(.92) contrast(1.02); } .msd-dossier-photo--blank { display: flex; align-items: center; justify-content: center; font-family: var(--msd-display); font-size: 56px; color: var(--msd-bone-2); background: rgba(245,200,120,.04); } .msd-dossier-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; } .msd-dossier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .msd-dossier-head strong { font-family: var(--msd-display); font-size: 18px; font-weight: 600; color: var(--msd-bone); } .msd-dossier-role { font-family: var(--msd-body); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--msd-lamp); } .msd-dossier p { font-family: var(--msd-body); font-size: 13.5px; line-height: 1.55; color: var(--msd-bone-2); margin: 0; } .msd-dossier-cta { margin-top: 8px; align-self: flex-start; font-family: var(--msd-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--msd-lamp); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; } .msd-dossier-cta:hover { color: #fff; border-bottom-color: var(--msd-lamp); } /* Witness */ .msd-witness { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; } .msd-witness-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--msd-edge); } .msd-witness-photo--blank { display: flex; align-items: center; justify-content: center; background: rgba(245,200,120,.06); color: var(--msd-bone-2); font-family: var(--msd-display); font-size: 36px; } .msd-witness-body strong { font-family: var(--msd-display); font-size: 19px; color: var(--msd-bone); } .msd-witness-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .msd-witness-meta span { font-family: var(--msd-mono); font-size: 11px; color: var(--msd-bone-2); } .msd-witness blockquote { margin: 0; padding: 10px 14px; border-left: 2px solid var(--msd-lamp); color: var(--msd-bone); font-family: var(--msd-display); font-style: italic; font-size: 16.5px; line-height: 1.55; } .msd-witness-foot { color: var(--msd-bone-2); font-size: 12px; margin: 8px 0 0; } /* Evidence list on the board */ .msd-board-clues { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .msd-board-clues > li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 16px; background: rgba(8,8,10,.32); border: 1px solid var(--msd-edge); border-radius: 10px; transition: border-color .15s ease; } .msd-board-clues > li:hover { border-color: var(--msd-edge-2); } .msd-board-clue-num { font-family: var(--msd-mono); font-size: 16px; color: var(--msd-lamp); display: flex; align-items: center; justify-content: center; background: rgba(245,200,120,.06); border-radius: 6px; line-height: 1; } .msd-board-clue-label { display: block; font-family: var(--msd-body); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--msd-lamp); margin-bottom: 4px; } .msd-board-clue-body .msd-prose--clean, .msd-board-clue-body .msd-prose--clean p { font-size: 14.5px; color: var(--msd-bone); margin: 0; line-height: 1.6; } /* Vault placeholder for non-enrolled */ .msd-vault-anchor { max-width: 1180px; margin: 26px auto; padding: 0 28px; } .msd-vault-locked { background: linear-gradient(180deg, var(--msd-steel) 0%, var(--msd-steel-2) 100%); border: 1px dashed var(--msd-edge-2); border-radius: 14px; padding: 30px 28px; text-align: center; color: var(--msd-bone-2); } .msd-vault-locked h3 { font-family: var(--msd-display); color: var(--msd-bone); margin: 6px 0; font-weight: 600; } /* Final CTA strip */ body.ms-detective .msd-cta { max-width: 1180px; margin: 12px auto 60px; padding: 26px 28px; background: linear-gradient(180deg, var(--msd-steel) 0%, var(--msd-steel-2) 100%); border: 1px solid var(--msd-edge); border-radius: 14px; text-align: center; } body.ms-detective .msd-btn--primary { background: var(--msd-red); color: #fff; border: 0; font-family: var(--msd-body); font-weight: 700; letter-spacing: .04em; padding: 13px 22px; border-radius: 999px; box-shadow: 0 8px 22px rgba(192,22,42,.28); } body.ms-detective .msd-btn--primary:hover { background: var(--msd-red-d); } body.ms-detective .msd-btn--ghost { background: transparent; border: 1px solid var(--msd-edge-2); color: var(--msd-bone-2); padding: 11px 20px; border-radius: 999px; font-family: var(--msd-body); } /* Evidence vault gallery */ .msd-evidence-vault { background: transparent !important; padding: 0 !important; border: 0 !important; } .msd-evidence-vault h2, .msd-evidence-vault h3 { font-family: var(--msd-display); color: var(--msd-bone); } .msd-evidence-vault .msd-evidence-grid > * { background: linear-gradient(180deg, var(--msd-steel) 0%, var(--msd-steel-2) 100%) !important; border: 1px solid var(--msd-edge) !important; color: var(--msd-bone) !important; } /* Mobile */ @media (max-width: 720px) { .msd-ops, .msd-board, .msd-vault-anchor, body.ms-detective .msd-cta { padding-left: 16px; padding-right: 16px; } .msd-board-card { padding: 20px 16px; } .msd-station { min-height: 180px; padding: 18px 18px 14px; } .msd-station-title { font-size: 20px; } .msd-witness { grid-template-columns: 64px 1fr; } .msd-witness-photo { width: 64px; height: 64px; } .msd-board-clues > li { grid-template-columns: 36px 1fr; padding: 12px; } } /* ============================================================ * v5.49 — Rooms as separate pages, full width, door hover * * Each room (lobby / interrogation / board / vault / courtroom) * is now its own page, reachable from a sticky room-nav strip. * The lobby holds the four station "doors" — hovering a door * shifts it forward, brightens the edge light, and slides the * CTA caption in. * ============================================================ */ /* Full-width container — replace the 1180px cap from v5.48 */ .msd-ops, .msd-board, .msd-vault-anchor, .msd-play, .msd-results, body.ms-detective .msd-cta { max-width: min(1480px, 96vw) !important; } /* ── Room navigation strip (sticky under the marketing navbar) ── */ .msd-room-nav { position: sticky; top: 96px; z-index: 80; margin: 0 auto 8px; padding: 0 24px; max-width: min(1480px, 96vw); } .msd-room-nav-inner { display: flex; align-items: center; gap: 18px; padding: 10px 16px; background: rgba(20,18,16,.78); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border: 1px solid var(--msd-edge); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.30); } .msd-room-nav-title { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--msd-bone); font-family: var(--msd-display); font-size: 16px; font-weight: 600; padding-right: 16px; border-right: 1px solid var(--msd-edge); flex-shrink: 0; max-width: 38ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .msd-room-nav-back { font-size: 14px; color: var(--msd-lamp); } .msd-room-nav-case { font-style: italic; font-weight: 500; } .msd-room-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; } .msd-room-nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-family: var(--msd-body); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--msd-bone-2); text-decoration: none; transition: background .14s ease, color .14s ease; } .msd-room-nav-link:hover { color: var(--msd-bone); background: rgba(245,200,120,.08); } .msd-room-nav-link.is-active { color: #0a0808; background: var(--msd-lamp); box-shadow: 0 0 12px rgba(245,200,120,.35); } .msd-room-nav-ic { font-size: 14px; line-height: 1; } /* ── Room page chrome (shared by board / vault / courtroom) ── */ .msd-room-page { max-width: min(1480px, 96vw); margin: 18px auto 60px; padding: 0 24px; } .msd-room-head { margin-bottom: 24px; } .msd-room-head h1 { font-family: var(--msd-display); font-size: clamp(30px, 4vw, 46px); font-weight: 600; color: var(--msd-bone); margin: 4px 0 6px; line-height: 1.1; } .msd-room-sub { color: var(--msd-bone-2); font-size: 15px; line-height: 1.65; margin: 0; max-width: 760px; } .msd-room-empty { color: var(--msd-bone-2); padding: 40px 0; text-align: center; } /* ── Operations Room (lobby) — bigger doors, hover open hint ── */ .msd-ops { padding: 0 24px; margin-top: 28px; } .msd-ops-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 18px; } .msd-station { min-height: 240px; padding: 26px 24px 22px; } .msd-station::after { /* "door is opening" inner light bar — slides in on hover */ content: ""; position: absolute; right: 22px; top: 50%; width: 0; height: 1px; background: var(--msd-lamp); box-shadow: 0 0 14px rgba(245,200,120,.6); transform: translateY(-50%); transition: width .25s ease; opacity: 0; } .msd-station:hover::after { width: 36px; opacity: 1; } .msd-station:hover { transform: translateY(-3px); } .msd-station-cta { transition: color .15s ease, padding-right .2s ease; } .msd-station:hover .msd-station-cta { padding-right: 4px; } /* Door light streak — left-edge accent gets thicker + animated on hover */ .msd-station::before { transition: opacity .18s ease, width .25s ease; } .msd-station:hover::before { opacity: 1; width: 5px; } /* ── Mobile / responsive ───────────────────────────────────── */ @media (max-width: 980px) { .msd-room-nav { top: 80px; padding: 0 14px; } .msd-room-nav-inner { padding: 8px 12px; gap: 10px; border-radius: 14px; } .msd-room-nav-title { font-size: 14px; max-width: 24ch; padding-right: 10px; } .msd-room-nav-link { font-size: 11.5px; padding: 6px 10px; } } @media (max-width: 720px) { .msd-room-nav { position: relative; top: auto; } .msd-room-nav-inner { flex-direction: column; align-items: stretch; border-radius: 12px; } .msd-room-nav-title { border-right: 0; border-bottom: 1px solid var(--msd-edge); padding: 6px 0 10px; max-width: 100%; } .msd-room-nav-list { justify-content: center; padding-top: 6px; } .msd-ops, .msd-room-page { padding: 0 14px; } .msd-station { min-height: 200px; } } /* ============================================================ * v5.50 — Door illustrations + room interior backgrounds + map index * ============================================================ */ /* Doors: each lobby station gets a top illustration that hints at the room behind it. Hover lets the door "open" — slight zoom + the inner warm-light glow brightens. */ .msd-station { padding-top: 0; overflow: hidden; } .msd-station-door { position: relative; display: block; width: calc(100% + 48px); margin: -22px -22px 16px -22px; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom: 1px solid var(--msd-edge); transition: filter .25s ease, transform .35s ease; } .msd-station-door::after { /* a warm vignette + slot of light along the bottom */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,.0) 55%, rgba(8,8,10,.55) 100%), radial-gradient(120% 60% at 50% 100%, rgba(245,200,120,.18) 0%, rgba(245,200,120,0) 60%); transition: background .25s ease; } .msd-station:hover .msd-station-door { filter: brightness(1.10) saturate(1.05); transform: scale(1.02); } .msd-station:hover .msd-station-door::after { background: linear-gradient(180deg, rgba(8,8,10,.0) 45%, rgba(8,8,10,.45) 100%), radial-gradient(120% 70% at 50% 100%, rgba(245,200,120,.32) 0%, rgba(245,200,120,0) 65%); } .msd-station--interrogate .msd-station-door { background-image: url('rooms/door-interrogation.png'); } .msd-station--board .msd-station-door { background-image: url('rooms/door-board.png'); } .msd-station--vault .msd-station-door { background-image: url('rooms/door-vault.png'); } .msd-station--accuse .msd-station-door { background-image: url('rooms/door-courtroom.png'); } /* The icon badge sits on top of the door illustration as a small chip */ .msd-station-icon { position: relative; margin-top: -28px; margin-bottom: 12px; background: rgba(20,18,16,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--msd-edge-2); z-index: 2; } /* ── Room interior — header band uses the matching bg-*.png ─────── */ .msd-room-page .msd-room-head { position: relative; margin: 0 -24px 24px; padding: 80px 28px 60px; overflow: hidden; border-bottom: 1px solid var(--msd-edge); } .msd-room-page .msd-room-head::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; z-index: 0; } .msd-room-page .msd-room-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.92) 100%); z-index: 1; } .msd-room-page .msd-room-head > * { position: relative; z-index: 2; } body.ms-detective .msd-board.msd-room-page .msd-room-head::before { background-image: url('rooms/bg-board.png'); } body.ms-detective .msd-vault.msd-room-page .msd-room-head::before { background-image: url('rooms/bg-vault.png'); } body.ms-detective .msd-play.msd-room-page .msd-room-head::before { background-image: url('rooms/bg-courtroom.png'); } /* Interrogation chat shell already has its own atmosphere; skip there. */ /* ── /challenges/ index — map background + cleaner card grid ───── */ body.ms-detective .msd-cases-hero { position: relative; overflow: hidden; background: #0a0808; } body.ms-detective .msd-cases-hero::before { content: ""; position: absolute; inset: 0; background: url('rooms/case-map.png') center / cover no-repeat; opacity: .42; filter: saturate(.90) contrast(1.05); } body.ms-detective .msd-cases-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 30%, rgba(8,8,10,.15) 0%, rgba(8,8,10,.62) 60%, rgba(8,8,10,.90) 100%), linear-gradient(180deg, rgba(8,8,10,.30) 0%, rgba(8,8,10,.95) 100%); } body.ms-detective .msd-cases-hero > * { position: relative; z-index: 2; } /* Grid: smaller, more orderly cards on top of the dark map */ body.ms-detective .msd-case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 16px !important; max-width: min(1480px, 96vw); margin: 0 auto; padding: 0 24px 60px; } body.ms-detective .msd-case-tile { background: rgba(20,18,16,.74) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--msd-edge) !important; border-radius: 12px !important; transition: transform .18s ease, border-color .18s ease, box-shadow .2s ease !important; } body.ms-detective .msd-case-tile:hover { transform: translateY(-3px) !important; border-color: var(--msd-edge-2) !important; box-shadow: 0 16px 36px rgba(0,0,0,.46) !important; } @media (max-width: 720px) { .msd-station-door { aspect-ratio: 16 / 9; } .msd-room-page .msd-room-head { padding: 60px 16px 40px; } } /* ============================================================ * v5.51 — Detective cursor + light/dark balance start * * The detective context gets a small loupe (magnifying-glass) * cursor over interactive areas so the user feels like they're * actually inspecting something. The hot-spot sits at the lens * center (13,13). * ============================================================ */ body.ms-detective { cursor: url('cursor-loupe.svg?v=573') 13 13, default; } body.ms-detective a, body.ms-detective button, body.ms-detective [role="button"], body.ms-detective .msd-station, body.ms-detective .msd-case-tile, body.ms-detective .msd-room-nav-link, body.ms-detective .msd-dossier-cta { cursor: url('cursor-loupe.svg?v=573') 13 13, pointer; } body.ms-detective input, body.ms-detective textarea { cursor: text; } /* Light/dark balance — softer dim instead of flat black. Truth is light; darkness is the silence around it. The dark should breathe, not drown. */ body.ms-detective::before { background: rgba(12,10,12,.72) !important; } .msd-room-empty { max-width: 520px; margin: 80px auto; text-align: center; color: var(--msd-bone-2); font-family: var(--msd-display); font-style: italic; font-size: 18px; padding: 32px; border: 1px dashed var(--msd-edge); border-radius: 14px; background: rgba(245,200,120,.03); } /* ============================================================ * v5.52 — Case index = one detective wall board with pin photos * * Replaces the old grid of case cards. The whole index is a single * hand-painted city map; live cases appear as small pinned polaroid * photographs scattered around it. Hover lifts the pin and slides * a small caption out from under the photo. * * Light + dark balance: the map itself is warm cream + amber gaslight, * the surrounding gutter is deep but not black. Truth in the light, * silence in the dark. * ============================================================ */ .msd-board-page { max-width: min(1480px, 96vw); margin: 26px auto 60px; padding: 0 24px; } .msd-board-page-head { margin-bottom: 16px; text-align: center; } .msd-board-page-head h1 { font-family: var(--msd-display); font-size: clamp(28px, 4vw, 44px); font-weight: 600; color: var(--msd-bone); margin: 6px 0 6px; letter-spacing: -.005em; } .msd-board-page-sub { color: var(--msd-bone-2); font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 660px; } .msd-board-page-foot { text-align: center; color: var(--msd-bone-2); font-family: var(--msd-mono); font-size: 12px; letter-spacing: .05em; margin: 22px 0 0; opacity: .8; } .msd-board-stage { position: relative; width: 100%; aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-color: #1a1410; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(245,200,120,.12); } /* Soft vignette so pins feel raised against the parchment */ .msd-board-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%); pointer-events: none; } /* A pin = brass tack + small polaroid photo + caption that slides out */ .msd-pin { position: absolute; width: 132px; transform: translate(-50%, -50%) rotate(var(--pin-rot, 0deg)); transform-origin: center top; text-decoration: none; color: var(--msd-ink); z-index: 2; transition: transform .25s ease, z-index 0s; } .msd-pin:hover { transform: translate(-50%, -50%) rotate(0deg) scale(1.18); z-index: 10; } .msd-pin-tack { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffdd99 0%, #b87f1f 65%, #5d3c0a 100%); box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 -1px 1px rgba(0,0,0,.30); z-index: 3; } .msd-pin-photo { display: block; width: 100%; aspect-ratio: 4 / 5; background: #2a201a center / cover no-repeat; border: 6px solid #f6efdb; border-bottom-width: 22px; box-shadow: 0 8px 18px rgba(0,0,0,.45); transition: filter .2s ease; } .msd-pin:hover .msd-pin-photo { filter: brightness(1.07) saturate(1.05); } .msd-pin-caption { display: block; background: #f6efdb; color: #1a1410; padding: 8px 10px 10px; font-family: var(--msd-body); font-size: 11.5px; line-height: 1.35; max-height: 0; overflow: hidden; margin-top: -16px; border: 6px solid #f6efdb; border-top: 0; border-bottom-width: 6px; box-shadow: 0 8px 18px rgba(0,0,0,.45); transition: max-height .25s ease, padding .25s ease; } .msd-pin-caption strong { display: block; font-family: var(--msd-display); font-size: 15px; font-weight: 600; margin-bottom: 3px; } .msd-pin-caption em { display: block; font-style: italic; color: #5a4c3e; font-family: var(--msd-display); font-size: 12.5px; line-height: 1.4; margin-bottom: 5px; } .msd-pin-meta { display: block; font-family: var(--msd-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8b6f4a; } .msd-pin:hover .msd-pin-caption { max-height: 240px; padding: 10px 10px 12px; } /* Mobile: stack pins as a simple list so they're tappable, no overlap */ @media (max-width: 720px) { .msd-board-stage { aspect-ratio: auto; min-height: 240px; padding: 18px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .msd-pin { position: static; transform: rotate(var(--pin-rot, 0deg)); width: 44%; } .msd-pin:hover { transform: rotate(0deg) scale(1.04); } .msd-pin-caption { max-height: 240px; padding: 10px 10px 12px; } } /* ============================================================ * v5.53 — Bigger city map, smaller pins, one-screen fit * * The board now scales to the viewport so the whole wall sits in * one screen (no scroll). Pins are small, like the blank index * cards already pinned in the painting, so they belong to the * board instead of fighting it. Hover lifts the photo and surfaces * a compact tooltip beneath. * ============================================================ */ .msd-board-page { max-width: min(1480px, 96vw); margin: 14px auto 20px; padding: 0 24px; } .msd-board-page-head { margin-bottom: 10px; text-align: center; } .msd-board-page-head h1 { font-size: clamp(22px, 2.6vw, 30px); margin: 4px 0 0; } .msd-board-page-head .msd-ops-eyebrow { margin-bottom: 4px; } /* Stage: keep the painting's 3:2 ratio but cap height to the viewport so the whole board lives in one screen. Width follows naturally. */ .msd-board-stage { position: relative; width: 100%; max-height: calc(100vh - 220px); aspect-ratio: 3 / 2; margin: 0 auto; background-size: cover; background-position: center; background-color: #1a1410; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(245,200,120,.10); } /* Width-cap fallback: if viewport is wider than the aspect ratio allows, shrink the stage so it never overflows the viewport height. */ @supports (aspect-ratio: 3/2) { .msd-board-stage { width: min(100%, calc((100vh - 220px) * 1.5)); } } .msd-board-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.42) 100%); pointer-events: none; } /* Small pin: brass tack + tiny polaroid + handwritten title underneath. Matches the visual language of the blank index cards already painted into the board, so case pins feel like they belong to the wall. */ .msd-pin { position: absolute; width: 7.4%; /* scales with the board */ min-width: 56px; max-width: 96px; transform: translate(-50%, -50%) rotate(var(--pin-rot, 0deg)); transform-origin: center top; text-decoration: none; color: #1a1410; z-index: 2; transition: transform .25s ease, z-index 0s; } .msd-pin:hover { z-index: 20; transform: translate(-50%, -50%) rotate(0deg) scale(1.32); } .msd-pin-tack { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffdd99 0%, #b87f1f 65%, #5d3c0a 100%); box-shadow: 0 2px 3px rgba(0,0,0,.55), inset 0 -1px 1px rgba(0,0,0,.30); z-index: 3; } .msd-pin-photo { display: block; width: 100%; aspect-ratio: 4 / 5; background: #2a201a center / cover no-repeat; border: 4px solid #f6efdb; border-bottom-width: 12px; box-shadow: 0 5px 11px rgba(0,0,0,.50); filter: saturate(.95) brightness(.95); transition: filter .2s ease; } .msd-pin-photo--blank { background: linear-gradient(135deg, #2a201a 0%, #1a1410 100%); } .msd-pin:hover .msd-pin-photo { filter: saturate(1.08) brightness(1.08); } .msd-pin-title { display: block; margin-top: -10px; text-align: center; font-family: var(--msd-mono); font-size: 9px; letter-spacing: .02em; color: #1a1410; background: #f6efdb; border: 4px solid #f6efdb; border-top: 0; padding: 0 4px 4px; box-shadow: 0 5px 11px rgba(0,0,0,.40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tooltip — appears below the pin on hover. Compact, single card. */ .msd-pin-tooltip { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) rotate(calc(-1 * var(--pin-rot, 0deg))); width: 230px; background: #f6efdb; color: #1a1410; border-radius: 6px; padding: 10px 12px 11px; font-family: var(--msd-body); font-size: 12px; line-height: 1.4; box-shadow: 0 12px 28px rgba(0,0,0,.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 30; } .msd-pin:hover .msd-pin-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) rotate(calc(-1 * var(--pin-rot, 0deg))) translateY(2px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s; } .msd-pin-tooltip strong { display: block; font-family: var(--msd-display); font-size: 15px; font-weight: 600; margin-bottom: 4px; } .msd-pin-tooltip em { display: block; font-style: italic; color: #5a4c3e; font-family: var(--msd-display); font-size: 12.5px; line-height: 1.45; margin-bottom: 6px; } .msd-pin-tooltip .msd-pin-meta { display: block; font-family: var(--msd-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #8b6f4a; } /* Mobile: drop absolute positioning, keep the wall as a backdrop and let pins flow as a compact grid. */ @media (max-width: 720px) { .msd-board-stage { aspect-ratio: auto; min-height: 320px; padding: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; max-height: none; } .msd-pin { position: static; width: 100%; max-width: 160px; transform: rotate(var(--pin-rot, 0deg)); justify-self: center; } .msd-pin:hover { transform: rotate(0deg) scale(1.06); } .msd-pin-tooltip { display: none; } } /* ============================================================ * v5.54 — Top-down map, full-bleed, title-in-board, smart tooltips * * The board now consumes the whole viewport below the navbar. The * old outer "Pick a case off the wall." header lives inside the * board as a small overlay label, the way a case-board would carry * its own file label. Tooltips snap toward the inside of the board * (right side for left-edge pins, left for right-edge, above for * bottom-edge) so they never spill off-screen. * ============================================================ */ .msd-board-page--fullbleed { max-width: none; margin: 0; padding: 12px 16px 16px; } .msd-board-page--fullbleed .msd-board-stage { width: 100%; height: calc(100vh - 130px); /* navbar + breathing room */ max-height: none; aspect-ratio: auto; /* override v5.53 ratio cap */ background-size: cover; background-position: center; border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(245,200,120,.10); } /* Title overlay — small, top-left, inside the board */ .msd-board-title-overlay { position: absolute; top: 22px; left: 28px; z-index: 4; pointer-events: none; } .msd-board-title-eyebrow { display: block; font-family: var(--msd-body); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #f5c878; text-shadow: 0 1px 3px rgba(0,0,0,.85); margin-bottom: 4px; } .msd-board-title-h { font-family: var(--msd-display); font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: #f6efdb; margin: 0; letter-spacing: -.005em; text-shadow: 0 2px 6px rgba(0,0,0,.85); line-height: 1.15; } /* Smart tooltip placement. Direction classes are emitted by PHP based on pin position. */ .msd-pin-tooltip { /* baseline reset; the position classes below override */ top: calc(100% + 12px); left: 50%; transform: translateX(-50%) rotate(calc(-1 * var(--pin-rot, 0deg))); } /* Horizontal */ .msd-pin--tip-right .msd-pin-tooltip { left: calc(100% + 14px); top: 50%; transform: translateY(-50%) rotate(calc(-1 * var(--pin-rot, 0deg))); } .msd-pin--tip-left .msd-pin-tooltip { left: auto; right: calc(100% + 14px); top: 50%; transform: translateY(-50%) rotate(calc(-1 * var(--pin-rot, 0deg))); } /* Vertical */ .msd-pin--tip-above.msd-pin--tip-center .msd-pin-tooltip { top: auto; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) rotate(calc(-1 * var(--pin-rot, 0deg))); } /* Hover transforms preserve placement direction */ .msd-pin--tip-right:hover .msd-pin-tooltip { transform: translateY(-50%) rotate(calc(-1 * var(--pin-rot, 0deg))) translateX(2px); } .msd-pin--tip-left:hover .msd-pin-tooltip { transform: translateY(-50%) rotate(calc(-1 * var(--pin-rot, 0deg))) translateX(-2px); } .msd-pin--tip-above.msd-pin--tip-center:hover .msd-pin-tooltip { transform: translateX(-50%) rotate(calc(-1 * var(--pin-rot, 0deg))) translateY(-2px); } /* Pin sizing slightly smaller so the bigger map breathes */ .msd-board-page--fullbleed .msd-pin { width: 5.6%; min-width: 50px; max-width: 86px; } /* Mobile: stack inside a scrollable list */ @media (max-width: 720px) { .msd-board-page--fullbleed { padding: 8px 10px 16px; } .msd-board-page--fullbleed .msd-board-stage { height: auto; min-height: 60vh; } .msd-board-title-overlay { top: 10px; left: 14px; } .msd-board-title-h { font-size: 17px; } } /* ============================================================ * v5.59 — The city map hanging on the sealed detective-room wall * * Entering /challenges/ should feel like standing in a sealed * detective's office: a dark wood-panelled wall (room-wall.png) * fills the whole viewport — behind the navbar too, so there is * no black gap — and the aged city map hangs on it as a physical * sheet under a warm lamp. .msd-board-stage IS the map sheet, so * pin % coordinates map 1:1 onto the map image. * ============================================================ */ body.ms-board-index { padding-top: 0 !important; overflow: hidden; } body.ms-board-index .msd-main { padding: 0; } /* The sealed room wall — fixed, fills the ENTIRE viewport (the navbar floats over it, so the old black gap is gone). */ body.ms-board-index .msd-board-page--fullbleed { position: fixed; inset: 0; padding: 84px 24px 28px; /* map centres in the space below the navbar */ z-index: 5; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #100b07 url('/wp-content/plugins/maplestack-provisioner/assets/rooms/room-wall.png') center center / cover no-repeat; } /* warm lamp pool — the hung map is the lit focal point */ body.ms-board-index .msd-board-page--fullbleed::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 58% 64% at 50% 52%, rgba(232,180,100,.17), transparent 72%); pointer-events: none; } /* The aged map sheet, hanging on the wall */ body.ms-board-index .msd-board-stage { position: relative; flex: none; aspect-ratio: 1536 / 1024; height: 90%; max-width: 100%; width: auto; background-size: cover; /* sheet is 3:2, map is 3:2 → exact */ background-position: center center; background-repeat: no-repeat; background-color: #d8cba8; border-radius: 2px; /* hangs on the wall — shadow drops down and out */ box-shadow: 0 4px 8px rgba(0,0,0,.5), 0 22px 44px rgba(0,0,0,.66), 0 52px 96px rgba(0,0,0,.5), inset 0 0 0 1px rgba(70,52,28,.42); } @media (max-width: 720px) { body.ms-board-index .msd-board-page--fullbleed { padding: 76px 10px 16px; } body.ms-board-index .msd-board-stage { height: auto; width: 96%; } } /* ============================================================ * v5.68 — The case lobby: user-made wall + four user-made doors * * lobby-wall.png — the opulent hall with four black frame * openings (measured by tools/measure_frames.py). lobby-door-1..4 * .png — the four door leaves sliced from the user's strip by * tools/slice_doors.py. Each leaf drops into its measured * opening; on hover it swings inward on its right hinge, * revealing the corridor behind (door-interior.png). * ============================================================ */ body.ms-lobby { padding-top: 0 !important; overflow: hidden; } body.ms-lobby .msd-main { padding: 0; } .msd-lobby { position: fixed; inset: 0; z-index: 5; overflow: hidden; background: #090605; } /* The wall — sized to COVER the viewport at its exact ratio, so the measured opening percentages map 1:1 onto its children. */ .msd-lobby-stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100vw, 177.7vh); aspect-ratio: 1672 / 941; background: url('/wp-content/plugins/maplestack-provisioner/assets/rooms/lobby-wall.png') center center / 100% 100% no-repeat; } .msd-lobby-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 72% 38% at 50% 7%, rgba(0,0,0,.6), transparent 62%); } /* ── Case-title placard ── */ .msd-lobby-sign { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); z-index: 4; width: min(86%, 600px); text-align: center; padding: 15px 34px 17px; border-radius: 9px; background: linear-gradient(180deg, rgba(26,19,13,.93), rgba(15,11,7,.88)); border: 1px solid rgba(245,200,120,.26); box-shadow: 0 14px 36px rgba(0,0,0,.66), inset 0 1px 0 rgba(245,200,120,.12); } .msd-lobby-sign-eyebrow { display: block; font-family: var(--msd-body); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #f5c878; margin-bottom: 6px; } .msd-lobby-sign-title { font-family: var(--msd-display); font-size: clamp(26px, 3.6vw, 46px); font-weight: 600; line-height: 1.06; color: #f6efdb; margin: 0; letter-spacing: -.005em; } .msd-lobby-sign-tag { font-family: var(--msd-display); font-style: italic; font-size: clamp(13px, 1.3vw, 17px); color: #c6b896; margin: 8px 0 0; } /* ── The four doors — each fitted into a measured wall opening. left/top/width/height set inline (per-door, from measurement). ── */ .msd-door { position: absolute; z-index: 3; text-decoration: none; perspective: 1100px; } /* the corridor revealed behind the door leaf — pushed deep in 3D so swinging the door open shows a real recess, not a flat layer */ .msd-door-recess { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; transform: translateZ(-46px); background: url('/wp-content/plugins/maplestack-provisioner/assets/rooms/door-interior.png') center center / cover no-repeat; box-shadow: inset 0 0 40px 14px rgba(0,0,0,.92); } .msd-door-recess-cue { font-family: var(--msd-display); font-size: clamp(11px, 1vw, 15px); font-weight: 600; letter-spacing: .08em; color: #f5c878; opacity: 0; transition: opacity .4s ease .25s; text-shadow: 0 2px 12px rgba(0,0,0,.95); white-space: nowrap; } a.msd-door:hover .msd-door-recess-cue { opacity: 1; } /* the door leaf — the sliced door image, set INTO the opening (an inset shadow reads as the frame's shadow, never protruding). Right hinge; swings INWARD on hover. A warm filter harmonises the walnut with the wall. */ .msd-door-leaf { position: absolute; inset: 0; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; transform-origin: right center; transform: rotateY(0deg); transition: transform .8s cubic-bezier(.4,.62,.2,1); filter: brightness(1.05) saturate(1.06); box-shadow: inset 0 0 24px 5px rgba(0,0,0,.62); } a.msd-door:hover .msd-door-leaf { transform: rotateY(-64deg); } /* nameplate — English room name on the black banner above the door */ .msd-door-plate { position: absolute; left: 50%; top: -48%; transform: translate(-50%, -50%); width: 240%; text-align: center; pointer-events: none; z-index: 4; } .msd-door-plate-name { font-family: var(--msd-display); font-size: clamp(10px, .92vw, 15px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #e8c074; text-shadow: 0 1px 4px rgba(0,0,0,.95); } .msd-door-plate-desc { display: none; } /* locked door — does not open, dimmed */ .msd-door.is-locked { cursor: default; } .msd-door.is-locked .msd-door-leaf { filter: grayscale(.5) brightness(.55); } .msd-door.is-locked .msd-door-plate-name { color: #8a7448; } /* ── Centred gate card — when the case can't be entered yet ── */ .msd-lobby-gate { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8,6,4,.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .msd-gate-card { width: min(94%, 412px); text-align: center; padding: 36px 34px 30px; border-radius: 11px; background: linear-gradient(180deg, #221a13, #14100b); border: 1px solid rgba(245,200,120,.28); box-shadow: 0 32px 74px rgba(0,0,0,.72); } .msd-gate-eyebrow { display: block; font-family: var(--msd-body); font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #d98a4e; margin-bottom: 13px; } .msd-gate-title { font-family: var(--msd-display); font-size: 27px; font-weight: 600; color: #f6efdb; margin: 0 0 10px; } .msd-gate-text { font-family: var(--msd-body); font-size: 14px; line-height: 1.62; color: #b6ab95; margin: 0 0 22px; } .msd-gate-form { margin: 0; } .msd-gate-btn { display: inline-block; font-family: var(--msd-body); font-size: 14px; font-weight: 700; color: #1a1206; background: linear-gradient(180deg, #f5c878, #d9a352); border: none; padding: 13px 32px; border-radius: 7px; cursor: pointer; text-decoration: none; box-shadow: 0 8px 22px rgba(217,163,82,.36); transition: transform .2s ease, box-shadow .2s ease; } .msd-gate-btn:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(217,163,82,.5); } .msd-gate-fine { font-family: var(--msd-body); font-size: 11.5px; color: #897f6f; margin: 14px 0 0; } @media (max-width: 860px) { .msd-lobby-sign { top: 60px; padding: 12px 18px 14px; } .msd-door-plate { padding: 6px 6px 7px; } .msd-door-plate-desc { display: none; } } /* ============================================================ * v5.69 — Case-room polish * · interrogation: viewport-tall shell, clean composer, * present-an-exhibit picker, fuller right-hand dossier * · case board: each card reads as one comfortable section * · courtroom: banner + accusation box fit one screen * ============================================================ */ /* ── Interrogation shell: fill the viewport, scroll inside ───── */ body.ms-detective .msd-chat-shell { height: calc(100dvh - 200px); min-height: 480px; align-items: stretch; } body.ms-detective .msd-chat-side, body.ms-detective .msd-chat-center { height: 100%; min-height: 0; } body.ms-detective .msd-chat-side { position: static; display: flex; flex-direction: column; overflow: hidden; } .msd-chat-side--left .msd-chat-suspects { overflow-y: auto; min-height: 0; flex: 1; padding-right: 2px; } body.ms-detective .msd-chat-stream-head { flex: 0 0 auto; } .msd-chat-shell .msd-chat-stream { flex: 1 1 auto; } /* ── Composer — evidence bar + auto-sizing input + hint ──────── */ .msd-chat-composer { flex: 0 0 auto; position: relative; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.30); padding: 12px 14px 10px; } body.ms-detective .msd-chat-composer .msd-chat-form { border-top: 0; background: none; padding: 0; margin: 0; gap: 10px; } .msd-chat-shell .msd-chat-composer .msd-chat-form textarea { min-height: 42px; } .msd-chat-hint { margin: 8px 2px 0; font-size: 11px; color: rgba(255,255,255,.40); } .msd-evidence-bar { position: relative; margin-bottom: 9px; } .msd-evidence-trigger { display: inline-flex; align-items: center; gap: 6px; background: rgba(245,200,120,.10); border: 1px solid rgba(245,200,120,.28); color: #e8c98a; font-size: 12px; font-weight: 600; letter-spacing: .015em; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .msd-evidence-trigger:hover:not(:disabled) { background: rgba(245,200,120,.18); border-color: rgba(245,200,120,.5); } .msd-evidence-trigger:disabled { opacity: .4; cursor: not-allowed; } .msd-evidence-pop { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(360px, 78vw); background: #17120d; border: 1px solid rgba(245,200,120,.24); border-radius: 12px; box-shadow: 0 -14px 44px rgba(0,0,0,.6); padding: 10px; z-index: 40; max-height: 300px; overflow-y: auto; } .msd-evidence-pop[hidden] { display: none; } .msd-evidence-pop-h { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #c9a95c; padding: 3px 6px 9px; } .msd-evidence-pop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .msd-evidence-pick { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; text-align: left; cursor: pointer; padding: 9px 10px; border-radius: 8px; color: #efe6d2; font-family: inherit; font-size: 12.5px; line-height: 1.4; transition: background .12s ease; } .msd-evidence-pick:hover { background: rgba(245,200,120,.13); } .msd-evidence-pick-ic { font-size: 16px; flex: 0 0 auto; } /* ── Chat messages: presented-exhibit + typing states ───────── */ .msd-msg--exhibit { max-width: 92%; } body.ms-detective .msd-msg--exhibit { background: rgba(201,169,92,.18); border-radius: 14px 14px 4px 14px; padding: 10px 14px; align-self: flex-end; } .msd-msg--exhibit p { background: #efe3c4; color: #3a2f1c; border: 1px solid rgba(160,120,50,.45); font-style: italic; border-bottom-right-radius: 4px; } .msd-msg--typing p { opacity: .5; } /* ── Right-hand dossier panel — full bio, internal scroll ────── */ body.ms-detective .msd-chat-side--right { padding: 0; } .msd-chat-profile-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; } .msd-chat-profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 2px; } .msd-chat-stat { background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 9px 8px; text-align: center; } .msd-chat-stat-n { display: block; font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: #f4ead2; font-variant-numeric: tabular-nums; } .msd-chat-stat-l { display: block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.5); margin-top: 3px; } /* ── Evidence document cards — markdown bits ─────────────────── */ .msd-evidence-body blockquote { margin: 9px 0; padding: 5px 13px; border-left: 2px solid rgba(245,200,120,.45); color: #ecdfc2; font-style: italic; } .msd-evidence-body hr { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 11px 0; } .msd-evidence-body strong { color: #f4ead2; } /* ── Case board — each card is one comfortable section ───────── */ body.ms-detective .msd-board-grid { gap: 30px; } body.ms-detective .msd-board-card { min-height: 74vh; padding: 44px 38px; display: flex; flex-direction: column; justify-content: center; scroll-margin-top: 150px; } body.ms-detective .msd-board-card-head { flex: 0 0 auto; } /* ── Courtroom — banner + accusation box in one screen ───────── */ body.ms-detective .msd-play.msd-room-page .msd-room-head { padding: 54px 28px 42px; } body.ms-detective .msd-play .msd-essay-form textarea { min-height: 0; height: clamp(240px, 40vh, 430px); } /* ── Mobile: release the fixed heights, let the page flow ────── */ @media (max-width: 980px) { body.ms-detective .msd-chat-shell { height: auto; min-height: 0; } body.ms-detective .msd-chat-side, body.ms-detective .msd-chat-center { height: auto; } body.ms-detective .msd-chat-side { overflow: visible; } .msd-chat-side--left .msd-chat-suspects { overflow: visible; } .msd-chat-profile-scroll { overflow: visible; } body.ms-detective .msd-board-card { min-height: 0; padding: 30px 20px; } .msd-evidence-pop { width: min(320px, 84vw); } } /* ============================================================ * v5.70 — Case-room polish, round 2 * · reusable clean custom scrollbars * · interrogation dossier: fixed head, scroll only the bio * · case board: the storyline, one viewport, own scroll * · evidence vault + courtroom: clean scroll, clean type * ============================================================ */ /* ── Reusable custom scrollbars ──────────────────────────────── */ .msd-scroll { scrollbar-width: thin; scrollbar-color: rgba(245,200,120,.42) transparent; } .msd-scroll::-webkit-scrollbar { width: 7px; height: 7px; } .msd-scroll::-webkit-scrollbar-track { background: transparent; margin: 4px 0; } .msd-scroll::-webkit-scrollbar-thumb { background: rgba(245,200,120,.32); border-radius: 4px; } .msd-scroll::-webkit-scrollbar-thumb:hover { background: rgba(245,200,120,.58); } .msd-scroll--ink { scrollbar-width: thin; scrollbar-color: rgba(70,52,28,.45) transparent; } .msd-scroll--ink::-webkit-scrollbar { width: 9px; } .msd-scroll--ink::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } .msd-scroll--ink::-webkit-scrollbar-thumb { background: rgba(70,52,28,.30); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } .msd-scroll--ink::-webkit-scrollbar-thumb:hover { background: rgba(70,52,28,.5); background-clip: padding-box; } /* ── Interrogation dossier — fixed head, scroll only the bio ──── */ body.ms-detective .msd-chat-side--right { padding: 14px; display: flex; flex-direction: column; overflow: hidden; } .msd-chat-profile-fixed { flex: 0 0 auto; } .msd-chat-side--right .msd-chat-profile-portrait { aspect-ratio: 4 / 3; margin-bottom: 11px; } .msd-chat-profile-dossier { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); } .msd-chat-profile-dossier .msd-chat-profile-h { flex: 0 0 auto; margin-bottom: 8px; } .msd-chat-profile-bio { flex: 1; min-height: 0; overflow-y: auto; padding-right: 9px; } .msd-chat-profile-bio p { color: rgba(255,255,255,.84); font-size: 12.5px; line-height: 1.64; margin: 0 0 10px; } .msd-chat-profile-bio p:last-child { margin-bottom: 0; } .msd-chat-profile-traits { font-style: italic; color: rgba(255,255,255,.66) !important; } /* ── Case board — the storyline as one scrollable section ─────── */ body.ms-detective .msd-board-card--brief { height: 78vh; min-height: 440px; justify-content: flex-start; padding: 36px 14px 32px 40px; } .msd-board-story { flex: 1; min-height: 0; overflow-y: auto; padding-right: 22px; } .msd-board-story .msd-prose--clean, .msd-board-story .msd-prose--clean p { font-size: 16px; line-height: 1.78; } .msd-board-story .msd-prose--clean p { margin: 0 0 16px; } .msd-board-story .msd-prose--clean strong { color: var(--msd-bone); } /* ── Evidence vault — readable bodies, clean scroll ───────────── */ .msd-evidence-body { max-height: 320px; font-size: 13px; line-height: 1.62; padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgba(245,200,120,.42) transparent; } .msd-evidence-body::-webkit-scrollbar { width: 7px; } .msd-evidence-body::-webkit-scrollbar-track { background: transparent; margin: 4px 0; } .msd-evidence-body::-webkit-scrollbar-thumb { background: rgba(245,200,120,.32); border-radius: 4px; } .msd-evidence-body::-webkit-scrollbar-thumb:hover { background: rgba(245,200,120,.58); } .msd-evidence-card { padding: 16px 16px 18px; } .msd-evidence-head h3 { font-size: 15px; line-height: 1.32; } .msd-evidence-caption { margin-bottom: 4px; } /* ── Courtroom — exactly one viewport, internal scroll ───────── */ body.ms-detective .msd-play.msd-room-page { height: calc(100dvh - 170px); min-height: 520px; margin: 14px auto 18px; display: flex; flex-direction: column; } body.ms-detective .msd-play .msd-room-head { flex: 0 0 auto; } body.ms-detective .msd-play .msd-banner, body.ms-detective .msd-play .msd-countdown { flex: 0 0 auto; } body.ms-detective .msd-play .msd-essay-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; } body.ms-detective .msd-play .msd-essay-form textarea { flex: 1; min-height: 130px; height: auto; resize: none; font-family: var(--msd-body), 'Plus Jakarta Sans', sans-serif; font-size: 15.5px; line-height: 1.7; } .msd-essay-evidence { flex: 0 0 auto; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 12px; } .msd-essay-evidence-h { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--msd-lamp, #f5c878); margin-bottom: 8px; } .msd-essay-evidence-chips { display: flex; flex-wrap: wrap; gap: 6px; } .msd-evidence-chip { background: rgba(245,200,120,.10); border: 1px solid rgba(245,200,120,.26); color: #e8c98a; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: background .14s ease, border-color .14s ease; } .msd-evidence-chip:hover { background: rgba(245,200,120,.2); border-color: rgba(245,200,120,.5); } .msd-essay-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } body.ms-detective .msd-essay-meta { margin: 0; } /* ── Cleaner type + placeholders in the input areas ──────────── */ body.ms-detective .msd-chat-empty { font-family: var(--msd-body), 'Plus Jakarta Sans', sans-serif; font-size: 14px; } .msd-essay-form textarea::placeholder { color: rgba(60,50,35,.42); font-style: normal; opacity: 1; } .msd-chat-shell .msd-chat-form textarea::placeholder { color: rgba(255,255,255,.36); font-style: normal; opacity: 1; } @media (max-width: 980px) { body.ms-detective .msd-board-card--brief { height: auto; min-height: 0; } .msd-board-story { overflow: visible; padding-right: 0; } body.ms-detective .msd-play.msd-room-page { height: auto; } body.ms-detective .msd-play .msd-essay-form textarea { min-height: 300px; } body.ms-detective .msd-chat-side--right { overflow: visible; } .msd-chat-profile-bio { overflow: visible; } } /* ============================================================ * v5.71 — Immersive case rooms * Every in-case page is now a full-screen scene: no marketing * navbar/footer, a room background filling the viewport, an * animated exit hatch, and content composed inside — no page * scroll, only clean internal scrolls. * ============================================================ */ /* ── Exit hatch — replaces the navbar on every case page ─────── */ .msd-exit { position: fixed; top: 16px; right: 18px; z-index: 120; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 12px; background: rgba(20,15,12,.84); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border: 1px solid rgba(245,200,120,.34); border-radius: 999px; color: #f0e2c4; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 22px rgba(0,0,0,.5); transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .msd-exit:hover { background: rgba(150,32,32,.92); border-color: rgba(245,200,120,.62); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.6); } .msd-exit-ic { font-size: 12px; line-height: 1; transition: transform .3s cubic-bezier(.22,1,.36,1); } .msd-exit:hover .msd-exit-ic { transform: rotate(90deg); } /* ── Chromeless: kill page scroll on every case page ─────────── */ body.msd-chromeless { overflow: hidden; } /* ── The four rooms — full-screen scene + flex column main ───── */ body.ms-room::before { content: ""; position: fixed; inset: 0; background: var(--page-bg, #0a0807) center center / cover no-repeat; z-index: -2; } body.ms-room::after { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(8,7,6,.62) 0%, rgba(8,7,6,.30) 30%, rgba(8,7,6,.55) 70%, rgba(8,7,6,.86) 100%); z-index: -1; } body.ms-room .msd-main { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body.ms-room .msd-room-nav { position: static; top: auto; flex: 0 0 auto; margin: 0; padding: 14px 150px 0 20px; } body.ms-room .msd-room-nav-inner { max-width: none; } body.ms-room .msd-room-page { flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 14px 22px 20px; display: flex; flex-direction: column; overflow: hidden; } /* Compact in-room header — the page background carries the mood, so the old image-banner header is dropped. */ body.ms-room .msd-room-page .msd-room-head { flex: 0 0 auto; margin: 2px auto 12px; padding: 0; border: 0; max-width: 1200px; width: 100%; text-align: center; } body.ms-room .msd-room-page .msd-room-head::before, body.ms-room .msd-room-page .msd-room-head::after { display: none; } body.ms-room .msd-room-head h1 { font-size: clamp(24px, 3vw, 36px); margin: 2px 0 4px; } body.ms-room .msd-room-sub { margin: 0 auto; font-size: 13.5px; } /* ── Case board — one floating storyline panel ───────────────── */ body.ms-room--board .msd-board { align-items: center; justify-content: center; } .msd-board-story-panel { width: min(880px, 100%); height: 100%; display: flex; flex-direction: column; background: rgba(18,14,11,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(245,200,120,.20); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.62); padding: 24px 14px 26px 34px; } .msd-board-panel-head { flex: 0 0 auto; padding-right: 20px; margin-bottom: 12px; } .msd-board-panel-head h1 { font-family: var(--msd-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; color: var(--msd-bone); margin: 4px 0 0; line-height: 1.12; } body.ms-room .msd-board-story { flex: 1; min-height: 0; overflow-y: auto; padding-right: 20px; } /* ── Evidence vault — fits one screen, grid scrolls inside ────── */ body.ms-room--vault .msd-evidence-vault { flex: 1; min-height: 0; overflow-y: auto; max-width: 1180px; width: 100%; margin: 0 auto; padding: 4px 10px 4px 0; } body.ms-room--vault .msd-evidence-grid { grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); } body.ms-room--vault .msd-room-empty { margin: auto; } /* ── Courtroom — accusation form fills the room, no page scroll ─ */ body.ms-room--courtroom .msd-play.msd-room-page { height: auto; min-height: 0; margin: 0; max-width: 900px; } body.ms-room--courtroom .msd-essay-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; } body.ms-room--courtroom .msd-essay-form textarea { flex: 1; min-height: 110px; height: auto; } /* ── Interrogation — chat shell fills the room ───────────────── */ body.ms-room--interrogate .msd-chat-shell { flex: 1; min-height: 0; height: auto; width: 100%; max-width: 1280px; margin: 12px auto 0; padding: 0 20px 16px; } body.ms-room--interrogate .msd-main { overflow: hidden; } /* Custom scrollbar inside the chat transcript */ .msd-chat-stream { scrollbar-width: thin; scrollbar-color: rgba(120,90,50,.5) transparent; } .msd-chat-stream::-webkit-scrollbar { width: 8px; } .msd-chat-stream::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } .msd-chat-stream::-webkit-scrollbar-thumb { background: rgba(120,90,50,.34); border-radius: 4px; } .msd-chat-stream::-webkit-scrollbar-thumb:hover { background: rgba(120,90,50,.6); } /* ── Suspect "typing…" indicator — animated dots ─────────────── */ .msd-typing-dots { display: inline-flex; gap: 5px; align-items: center; padding: 2px 0; } .msd-typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; animation: msd-typing 1.25s infinite ease-in-out; } .msd-typing-dots span:nth-child(2) { animation-delay: .16s; } .msd-typing-dots span:nth-child(3) { animation-delay: .32s; } @keyframes msd-typing { 0%, 65%, 100% { opacity: .25; transform: translateY(0); } 32% { opacity: .95; transform: translateY(-4px); } } /* ── Evidence attachment — clean preview above the composer ───── */ .msd-evidence-attached { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; padding: 8px 10px; background: rgba(245,200,120,.12); border: 1px solid rgba(245,200,120,.36); border-radius: 10px; } .msd-evidence-attached[hidden] { display: none; } .msd-evidence-attached-thumb { width: 50px; height: 38px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; font-size: 19px; } .msd-evidence-attached-text { flex: 1; min-width: 0; } .msd-evidence-attached-text strong { display: block; font-size: 12px; color: #f2e7cd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msd-evidence-attached-text span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(245,200,120,.78); } .msd-evidence-attached-remove { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.3); color: rgba(255,255,255,.7); cursor: pointer; font-size: 13px; line-height: 1; transition: background .15s ease, color .15s ease; } .msd-evidence-attached-remove:hover { background: rgba(150,32,32,.7); color: #fff; } /* Thumbnails inside the exhibit picker */ .msd-evidence-pick-thumb { width: 40px; height: 30px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; font-size: 15px; } /* ── Maple City map on the /challenges/ index ────────────────── */ body.ms-detective .msd-cases-hero::before { background-image: url('rooms/city-map.webp') !important; } /* ── Mobile — let the immersive rooms breathe / scroll ───────── */ @media (max-width: 900px) { body.msd-chromeless { overflow: auto; } body.ms-room .msd-main { height: auto; min-height: 100dvh; } body.ms-room .msd-room-nav { padding: 56px 14px 0; } body.ms-room .msd-room-page { overflow: visible; padding: 12px 14px 24px; } body.ms-room--board .msd-board-story-panel { height: auto; min-height: 60vh; } body.ms-room--interrogate .msd-chat-shell { padding: 12px 12px 20px; } .msd-exit { top: 12px; right: 12px; } } /* ============================================================ * v5.72 — FIX: room backgrounds rendered solid black. * The v5.71 `body.ms-room::before` shorthand resolved to a flat * colour and also masked the shared drift layer. Paint the room * scene directly on with explicit per-room images, and * carry the readability scrim on .msd-main itself — no * pseudo-elements, no CSS-var, no negative z-index. * ============================================================ */ body.ms-room::before, body.ms-room::after { display: none !important; } body.ms-room { background-color: #0a0807; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } body.ms-room--board { background-image: url('rooms/room-board.webp'); } body.ms-room--interrogate { background-image: url('rooms/room-interrogation.webp'); } body.ms-room--vault { background-image: url('rooms/room-vault.webp'); } body.ms-room--courtroom { background-image: url('rooms/room-courtroom.webp'); } /* Readability scrim sits on .msd-main (which covers the viewport), so the room image shows through, dimmed, behind the content. */ body.ms-room .msd-main { background: linear-gradient(180deg, rgba(10,8,7,.60) 0%, rgba(10,8,7,.30) 32%, rgba(10,8,7,.58) 70%, rgba(10,8,7,.90) 100%); } /* Courtroom accusation box must flex to fill the room — beat the v5.70 fixed-height rule (equal specificity, so order decides). */ body.ms-room--courtroom .msd-play .msd-essay-form textarea { flex: 1; min-height: 110px; height: auto; resize: none; } /* ============================================================ * v5.73 — Room layout, owned end to end * Symmetric & centred; content sits INSIDE the room with a * margin all round; soft vignette so the room reads; nothing * cut off; clean scrollbars only. * ============================================================ */ /* The viewport stage — kill the inherited marketing padding. */ body.ms-room .msd-main { height: 100dvh; max-height: 100dvh; overflow: hidden; display: flex; flex-direction: column; padding: 0 !important; margin: 0; /* Soft vignette — room clearly visible at centre, framed darker at the edges so the nav + panels stay legible. */ background: radial-gradient(ellipse 132% 116% at 50% 42%, rgba(8,7,6,.10) 0%, rgba(8,7,6,.38) 56%, rgba(8,7,6,.78) 100%); } body.ms-room--courtroom .msd-main { /* the courtroom is the bright room — lift the scrim further */ background: radial-gradient(ellipse 134% 118% at 50% 42%, rgba(8,7,6,.04) 0%, rgba(8,7,6,.26) 58%, rgba(8,7,6,.66) 100%); } /* Top nav — symmetric, centred, clear of the exit hatch. */ body.ms-room .msd-room-nav { flex: 0 0 auto; position: static; top: auto; width: 100%; margin: 0; padding: 15px 16px 0; } body.ms-room .msd-room-nav-inner { max-width: min(1080px, calc(100vw - 320px)); margin: 0 auto; } /* Content stage — fills the rest, centres ONE panel, breathing room on every side so nothing ever touches an edge. */ body.ms-room .msd-room-page { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; margin: 0; padding: 20px 34px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } /* Shared panel skin — a warm object resting in the room. */ .msd-board-story-panel, body.ms-room--vault .msd-evidence-vault, body.ms-room--interrogate .msd-chat-shell { border-radius: 16px; box-shadow: 0 26px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(245,200,120,.16); } /* ── Case board ──────────────────────────────────────────────── */ body.ms-room--board .msd-room-page { padding: 20px 34px 30px; } .msd-board-story-panel { width: min(760px, 100%); height: 100%; max-height: 100%; margin: 0; background: rgba(20,15,11,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(245,200,120,.20); padding: 26px 12px 26px 32px; } /* ── Evidence vault ──────────────────────────────────────────── */ body.ms-room--vault .msd-room-page { padding: 16px 30px 26px; } body.ms-room--vault .msd-room-head { margin: 0 auto 10px; } body.ms-room--vault .msd-evidence-vault { width: min(1140px, 100%); max-height: 100%; margin: 0; padding: 18px 12px 18px 20px; background: rgba(16,12,9,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(245,200,120,.16); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(245,200,120,.42) transparent; } body.ms-room--vault .msd-evidence-vault::-webkit-scrollbar { width: 8px; } body.ms-room--vault .msd-evidence-vault::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } body.ms-room--vault .msd-evidence-vault::-webkit-scrollbar-thumb { background: rgba(245,200,120,.34); border-radius: 4px; } body.ms-room--vault .msd-evidence-vault::-webkit-scrollbar-thumb:hover { background: rgba(245,200,120,.6); } body.ms-room--vault .msd-evidence-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } body.ms-room--vault .msd-evidence-card { padding: 13px 13px 15px; } body.ms-room--vault .msd-evidence-image img { max-height: 150px; object-fit: cover; } body.ms-room--vault .msd-evidence-body { max-height: 150px; } /* ── Interrogation ───────────────────────────────────────────── */ body.ms-room--interrogate .msd-room-page, body.ms-room--interrogate .msd-main > .msd-chat-shell { /* shell is a direct child */ } body.ms-room--interrogate .msd-chat-shell { flex: 1 1 auto; min-height: 0; height: auto; width: min(1240px, 100%); max-width: 1240px; margin: 16px auto 22px; padding: 16px; background: rgba(16,12,9,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(245,200,120,.14); } /* ── Courtroom ───────────────────────────────────────────────── */ body.ms-room--courtroom .msd-play.msd-room-page { flex-direction: column; align-items: stretch; justify-content: flex-start; width: min(860px, 100%); max-width: 860px; margin: 0 auto; padding: 14px 0 22px; height: auto; } body.ms-room--courtroom .msd-room-head { flex: 0 0 auto; margin: 0 0 12px; } body.ms-room--courtroom .msd-essay-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; } body.ms-room--courtroom .msd-play .msd-essay-form textarea { flex: 1 1 auto; min-height: 90px; height: auto; resize: none; } body.ms-room--courtroom .msd-essay-evidence, body.ms-room--courtroom .msd-essay-foot { flex: 0 0 auto; } @media (max-width: 1100px) { body.ms-room .msd-room-nav-inner { max-width: calc(100vw - 130px); } } @media (max-width: 900px) { body.ms-room .msd-main { height: auto; max-height: none; overflow: visible; } body.ms-room .msd-room-page { padding: 14px 14px 26px; } body.ms-room .msd-room-nav-inner { max-width: none; } .msd-board-story-panel, body.ms-room--vault .msd-evidence-vault { height: auto; max-height: none; } body.ms-room--courtroom .msd-play .msd-essay-form textarea { min-height: 300px; } } /* ============================================================ * v5.74 — FIX the drop + daytime parchment rooms * · root cause of the down-shift / bottom cut-off: the body * kept `padding-top:96px` (a spacer for the removed fixed * header). Killed for chromeless pages. * · nav was `max-width:1480px; margin:0` → left-aligned. Now * full width so the inner bar truly centres. * · rooms are daytime + bright; content panels become warm * parchment "documents" so they belong to the room. * ============================================================ */ /* ── The actual layout bug ───────────────────────────────────── */ body.ms-detective.msd-chromeless { padding-top: 0 !important; } body.ms-room .msd-room-nav { max-width: none; width: 100%; } body.ms-room .msd-room-nav-inner { max-width: min(1180px, calc(100vw - 300px)); margin: 0 auto; } /* ── Parchment palette — shared "document" surface ───────────── */ .msd-board-story-panel, body.ms-room--interrogate .msd-chat-shell { background: rgba(245,238,221,.95) !important; border: 1px solid rgba(122,94,54,.40) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 24px 60px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.04); } /* ── Case board — parchment briefing sheet ───────────────────── */ .msd-board-panel-head .msd-board-card-eyebrow { color: #a06a22; } .msd-board-panel-head h1 { color: #241b0e; } .msd-board-story .msd-prose--clean, .msd-board-story .msd-prose--clean p { color: #3c3022; } .msd-board-story .msd-prose--clean strong { color: #20180c; } .msd-board-story { scrollbar-color: rgba(122,94,54,.5) transparent; } .msd-board-story::-webkit-scrollbar { width: 8px; } .msd-board-story::-webkit-scrollbar-track { background: transparent; margin: 4px 0; } .msd-board-story::-webkit-scrollbar-thumb { background: rgba(122,94,54,.34); border-radius: 4px; } .msd-board-story::-webkit-scrollbar-thumb:hover { background: rgba(122,94,54,.6); } /* ── Evidence vault — documents laid out in the room ─────────── */ body.ms-room--vault .msd-evidence-vault { background: transparent !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; scrollbar-color: rgba(245,200,120,.5) transparent; } /* Must out-rank the legacy `.msd-evidence-vault .msd-evidence-grid > *` !important steel skin (specificity 0,2,0) — hence the body prefix. */ body.ms-room--vault .msd-evidence-card, body.ms-room--vault .msd-evidence-grid > .msd-evidence-card { background: rgba(249,243,229,.98) !important; border: 1px solid rgba(122,94,54,.42) !important; color: #3c3022 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.ms-room--vault .msd-evidence-card .msd-evidence-head h3 { color: #241b0e !important; } body.ms-room--vault .msd-evidence-card .msd-evidence-type { background: rgba(122,94,54,.16) !important; color: #8a6326 !important; } body.ms-room--vault .msd-evidence-card .msd-evidence-caption { color: #6f5c3e !important; } body.ms-room--vault .msd-evidence-card .msd-evidence-body { color: #3c3022 !important; } body.ms-room--vault .msd-evidence-card .msd-evidence-body p { color: #3c3022 !important; } body.ms-room--vault .msd-evidence-card .msd-evidence-body strong { color: #20180c !important; } body.ms-room--vault .msd-evidence-card .msd-evidence-body blockquote { color: #5a4528 !important; border-left-color: rgba(122,94,54,.5); } body.ms-room--vault .msd-evidence-card .msd-evidence-body hr { border-top-color: rgba(122,94,54,.3); } body.ms-room--vault .msd-evidence-card .msd-evidence-body { scrollbar-color: rgba(122,94,54,.5) transparent; } body.ms-room--vault .msd-evidence-card .msd-evidence-body::-webkit-scrollbar-thumb { background: rgba(122,94,54,.4); } body.ms-room--vault .msd-evidence-card .msd-evidence-body::-webkit-scrollbar-thumb:hover { background: rgba(122,94,54,.65); } /* ── Interrogation — parchment shell, ink text ───────────────── */ body.ms-room--interrogate .msd-chat-side, body.ms-room--interrogate .msd-chat-center { background: rgba(0,0,0,.035) !important; border-color: rgba(122,94,54,.20) !important; } .msd-chat-side-head { border-bottom-color: rgba(122,94,54,.22); } body.ms-detective .msd-chat-side-head strong { color: #a06a22 !important; } .msd-chat-back { background: rgba(122,94,54,.10); color: #6f5c3e; } .msd-chat-back:hover { background: rgba(122,94,54,.20); color: #20180c; } .msd-chat-suspect { color: #4a3d28; } .msd-chat-suspect:hover { background: rgba(160,106,34,.10); color: #20180c; } .msd-chat-suspect.is-active { background: rgba(160,106,34,.16); color: #20180c; box-shadow: inset 3px 0 0 #a06a22; } .msd-chat-suspect-text strong { color: #241b0e; } .msd-chat-suspect-role { color: #6f5c3e; } .msd-chat-suspect-pill { background: rgba(122,94,54,.16); color: #8a6326; } .msd-chat-stream-head { border-bottom-color: rgba(122,94,54,.22); } body.ms-detective .msd-chat-stream-head h2 { color: #241b0e; } .msd-chat-stream-head .msd-turn-counter { color: #a06a22; } .msd-chat-stream { background: #fbf4e2 !important; } .msd-chat-empty { color: #8a7656 !important; } .msd-chat-composer { background: rgba(0,0,0,.04); border-top-color: rgba(122,94,54,.22); } .msd-chat-hint { color: #8a7656; } .msd-chat-shell .msd-chat-form textarea { background: #fffdf6 !important; border: 1px solid rgba(122,94,54,.34) !important; color: #2e2416 !important; } .msd-chat-shell .msd-chat-form textarea::placeholder { color: rgba(80,64,40,.5); } /* dossier */ .msd-chat-side--right h3 { color: #241b0e; } .msd-chat-profile-role { color: #6f5c3e; } .msd-chat-profile-dossier { border-top-color: rgba(122,94,54,.22); } .msd-chat-profile-h { color: #a06a22; } .msd-chat-profile-bio p { color: #3c3022 !important; } .msd-chat-profile-traits { color: #6f5c3e !important; } .msd-chat-stat { background: rgba(122,94,54,.10); border-color: rgba(122,94,54,.20); } .msd-chat-stat-n { color: #241b0e; } .msd-chat-stat-l { color: #8a7656; } .msd-chat-profile-bio { scrollbar-color: rgba(122,94,54,.5) transparent; } .msd-chat-profile-bio::-webkit-scrollbar-thumb { background: rgba(122,94,54,.34); } /* evidence picker / attachment — warm light */ .msd-evidence-trigger { background: rgba(160,106,34,.12); border-color: rgba(122,94,54,.4); color: #8a5e1e; } .msd-evidence-trigger:hover:not(:disabled) { background: rgba(160,106,34,.22); } .msd-evidence-pop { background: #f3ead2; border-color: rgba(122,94,54,.4); } .msd-evidence-pop-h { color: #a06a22; } .msd-evidence-pick { color: #3c3022; } .msd-evidence-pick:hover { background: rgba(160,106,34,.13); } .msd-evidence-attached { background: rgba(160,106,34,.13); border-color: rgba(122,94,54,.42); } .msd-evidence-attached-text strong { color: #241b0e; } .msd-evidence-attached-text span { color: #8a5e1e; } .msd-typing-dots span { background: #6f5c3e; } /* keep the chat bubbles legible on the warm transcript */ body.ms-detective .msd-msg--assistant { background: rgba(255,255,255,.66); border-color: rgba(122,94,54,.26); } body.ms-detective .msd-msg--assistant p { color: #2e2416; } body.ms-detective .msd-msg-who { color: #a06a22; } /* ── Courtroom — warm chips on the bright room ───────────────── */ .msd-essay-evidence { background: rgba(245,238,221,.92); border-color: rgba(122,94,54,.34); } .msd-essay-evidence-h { color: #a06a22; } .msd-evidence-chip { background: rgba(248,242,227,.95); border-color: rgba(122,94,54,.4); color: #5a4528; } .msd-evidence-chip:hover { background: #fffdf6; border-color: rgba(122,94,54,.7); }