/* app.css — Grave Manners screens & components (v2: leather, brass, vellum, gilded frames, medallions) */
.screen { position: relative; min-height: 100vh; min-height: 100dvh; }
.page { max-width: 980px; margin: 0 auto; padding: 18px 16px calc(40px + var(--safe-b)); }

/* ---------- splash (cold open) ---------- */
#splash { position: fixed; inset: 0; z-index: 100; background: #050506; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity .6s ease; }
#splash.out { opacity: 0; pointer-events: none; }
.match { position: relative; width: 6px; height: 70px; }
.match .wick { position: absolute; left: 1px; bottom: 0; width: 4px; height: 54px; background: linear-gradient(180deg, #4a3520, #1c140a); border-radius: 2px; }
.match .flame { position: absolute; left: -9px; bottom: 50px; width: 24px; height: 40px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 75%, #fff8d8 0, #ffb347 35%, #ff6a1a 70%, transparent 74%); filter: blur(.4px); transform-origin: 50% 100%; animation: strike 1.2s ease-out both, flamewave .9s ease-in-out 1.2s infinite; box-shadow: 0 0 40px 14px rgba(255,160,60,.35); }
@keyframes strike { 0% { transform: scale(0) } 40% { transform: scale(.2) } 70% { transform: scale(1.3) } 100% { transform: scale(1) } }
.splash-mark { width: min(78vw, 520px); opacity: 0; animation: rise 1s ease 1.1s both; filter: drop-shadow(0 6px 24px rgba(0,0,0,.8)); }

/* ---------- atmosphere ---------- */
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); animation: kenburns 40s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.06) translate(0,0) } to { transform: scale(1.14) translate(-1.5%, -1%) } }
.fog { position: absolute; inset: -20% -10%; pointer-events: none; opacity: .5; background: radial-gradient(60% 40% at 20% 80%, rgba(180,200,220,.18), transparent 60%), radial-gradient(50% 35% at 80% 70%, rgba(180,200,220,.14), transparent 60%), radial-gradient(70% 30% at 50% 100%, rgba(200,210,225,.22), transparent 60%); animation: drift 18s ease-in-out infinite alternate; mix-blend-mode: screen; }
.fog-b { animation-duration: 27s; animation-direction: alternate-reverse; opacity: .3; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(10,10,12,.8) 100%), linear-gradient(180deg, rgba(10,10,12,.6), transparent 30%, transparent 55%, var(--ink) 100%); }
.flash { position: absolute; inset: 0; background: #dfeaff; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.flash.go { animation: lightning 1.2s ease-out both; }

/* ---------- HOME ---------- */
#screen-home { display: flex; flex-direction: column; overflow: hidden; }
.home-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: calc(12px + var(--safe-t)) 14px 0; }
.home-top-right { display: flex; gap: 10px; }
.home-body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 20px 18px calc(22px + var(--safe-b)); max-width: 560px; margin: 0 auto; width: 100%; }
.wordmark { width: min(88%, 520px); margin: 0 auto 4px; filter: drop-shadow(0 6px 20px rgba(0,0,0,.85)); animation: flicker 7s infinite; }
.wordmark img { width: 100%; height: auto; }
.tagline { font-size: clamp(19px, 4.8vw, 24px); color: var(--parchment-2); margin: 4px 0 18px; font-style: italic; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.today-card { width: 100%; padding: 20px 20px 18px; text-align: left; }
.seal { position: absolute; top: -14px; right: 16px; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d84a54, #8f1d24 60%, #5a0f14); box-shadow: 0 0 0 2px rgba(255,120,130,.25), inset 0 0 0 3px rgba(255,180,185,.25), inset 0 -4px 10px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffd8da; font-family: var(--font-display); transform: rotate(-8deg); }
.seal span { font-size: 9px; letter-spacing: .2em; line-height: 1; } .seal b { font-size: 20px; line-height: 1.05; font-weight: 900; }
.today-label { font-family: var(--font-display); font-size: 12px; color: var(--brass); letter-spacing: .24em; text-transform: uppercase; }
.today-title { font-family: var(--font-display); font-size: 25px; font-weight: 700; margin-top: 4px; line-height: 1.15; color: #fff2cf; }
.today-sub { font-size: 18px; color: var(--parchment-2); font-style: italic; margin-top: 2px; }
.today-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0 14px; color: var(--mute); font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.today-done { margin-top: 10px; text-align: center; color: var(--parchment-2); font-size: 17px; }
.today-done .cand { font-size: 26px; letter-spacing: 2px; }
.today-done a { color: var(--brass-2); }
.home-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 14px; }
.mini-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: var(--radius-s); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.35)), var(--leather) center/512px; box-shadow: inset 0 0 0 1px rgba(212,169,74,.55), inset 0 0 0 3px rgba(10,10,12,.9), inset 0 0 0 4px rgba(212,169,74,.25), 0 6px 16px rgba(0,0,0,.5); font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; min-height: 96px; color: var(--parchment); }
.mini-card .ic.big { color: var(--brass-2); }
.mini-card small { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--mute); }
.mini-card.locked::after { content: ''; position: absolute; top: 7px; right: 8px; width: 12px; height: 12px; background: var(--brass) ; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='1.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='1.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; }
.home-streak { margin-top: 14px; font-family: var(--font-display); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--parchment-2); display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: center; }
.home-streak b { color: var(--brass-2); font-weight: 900; }
.home-streak .ic { color: var(--brass); }
.home-foot { font-family: var(--font-display); color: var(--mute); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin: 14px 0 0; }

/* ---------- CASE ---------- */
.case-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-t)) 12px 10px; background: linear-gradient(180deg, rgba(10,10,12,.97), rgba(10,10,12,.9)), var(--leather) center/512px; box-shadow: 0 1px 0 rgba(212,169,74,.55), 0 2px 0 rgba(10,10,12,1), 0 3px 0 rgba(212,169,74,.25), 0 10px 24px rgba(0,0,0,.5); }
.case-title { flex: 1; min-width: 0; }
.case-title-main { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--brass-2); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-title-sub { font-size: 15px; color: var(--mute); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-hud { display: flex; align-items: center; gap: 12px; }
.hud-candles { display: flex; align-items: center; gap: 2px; color: var(--brass-2); }
.hud-candles .ic { width: 22px; height: 22px; } .hud-candles .ic.off { opacity: .35; }
.hud-candles .n { font-family: var(--font-display); font-size: 16px; font-weight: 900; margin-left: 4px; color: var(--brass-2); }
.hud-candles .fl { animation: flamewave 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.hud-strikes { display: flex; gap: 2px; color: var(--brass-2); }
.hud-strikes .ic { width: 22px; height: 22px; } .hud-strikes .ic.off { opacity: .22; filter: grayscale(1); }

.scene { position: relative; height: min(46vh, 420px); overflow: hidden; background: var(--ink-2); box-shadow: inset 0 -1px 0 rgba(212,169,74,.4); }
.scene-img { position: absolute; inset: 0; background-size: cover; background-position: center 40%; transform: scale(1.04); animation: kenburns 50s ease-in-out infinite alternate; }
.scene-caption { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; flex-direction: column; text-shadow: 0 2px 8px rgba(0,0,0,.95); }
.scene-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: #fff3d0; letter-spacing: .1em; }
.scene-tag { font-size: 16px; color: var(--parchment-2); font-style: italic; }
@media (min-width: 900px) { .scene { height: min(52vh, 520px); } .scene-img { background-position: center 45%; } }

.case-body { max-width: 980px; margin: 0 auto; padding: 16px 14px calc(40px + var(--safe-b)); display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.section-head h2 { font-family: var(--font-display); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.section-hint { font-size: 15px; color: var(--mute); text-align: right; font-style: italic; }

/* ghost */
.ghost-row { display: flex; gap: 14px; align-items: flex-start; }
.ghost-portrait { flex: 0 0 82px; width: 82px; height: 106px; border-radius: 50% / 42%; background-size: cover; background-position: center 18%; filter: grayscale(1) brightness(1.35) contrast(.85); opacity: .8; box-shadow: 0 0 0 2px rgba(127,216,255,.4), 0 0 0 5px rgba(10,10,12,.9), 0 0 0 6px rgba(127,216,255,.25), 0 0 30px rgba(127,216,255,.35); animation: float 5s ease-in-out infinite; position: relative; }
.ghost-portrait::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(127,216,255,.25), rgba(127,216,255,.05) 60%, rgba(10,10,12,.95)); mix-blend-mode: screen; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
.bubble { flex: 1; position: relative; background: linear-gradient(180deg, rgba(22,26,36,.96), rgba(12,14,20,.98)); border-radius: 10px; padding: 12px 15px 13px; box-shadow: inset 0 0 0 1px rgba(127,216,255,.35), inset 0 0 0 3px rgba(10,10,12,.9), inset 0 0 0 4px rgba(127,216,255,.15), var(--shadow); }
.bubble::before { content: ''; position: absolute; left: -9px; top: 26px; border: 8px solid transparent; border-right-color: rgba(127,216,255,.4); border-left: 0; }
.bubble-name { font-family: var(--font-display); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--spirit); font-weight: 700; }
.bubble-text { font-size: 19px; line-height: 1.4; margin-top: 4px; color: var(--parchment); }
.bubble-fact { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: .04em; color: var(--spirit-2); display: flex; align-items: center; gap: .4em; }

/* objects: brass evidence tags */
.objects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
@media (min-width: 720px) { .objects { grid-template-columns: repeat(8, 1fr); } .objects.seven { grid-template-columns: repeat(7, 1fr); } }
.obj { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 104px; padding: 8px 4px 8px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.35)), var(--leather) center/512px; box-shadow: inset 0 0 0 1px rgba(212,169,74,.6), inset 0 0 0 3px rgba(10,10,12,.9), inset 0 0 0 4px rgba(212,169,74,.28), 0 6px 14px rgba(0,0,0,.55); color: var(--parchment-2); transition: transform .12s ease, filter .2s ease; }
.obj:hover { filter: brightness(1.15); }
.obj:active { transform: scale(.96); }
.obj .oi { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(212,169,74,.4), 0 3px 8px rgba(0,0,0,.6); }
.obj .oi img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.obj .ol { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; line-height: 1.15; text-align: center; color: var(--parchment); padding: 0 2px; }
.obj .oc { position: absolute; top: 6px; right: 7px; width: 15px; height: 15px; color: var(--brass); opacity: .95; }
.obj .of { position: absolute; bottom: 4px; right: 6px; font-family: var(--font-display); font-size: 9px; color: var(--moss); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.obj.done { filter: none; }
.obj.done .oi { opacity: .4; }
.obj.done .ol { color: var(--mute); }
.obj.done::after { content: ''; position: absolute; left: 7px; top: 6px; width: 14px; height: 14px; background: var(--moss); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.obj.pulse { animation: pulse-ring 1.4s ease-out infinite; }
@media (min-width: 720px) { .obj .oi { width: 64px; height: 64px; } }

/* notebook: vellum */
.notebook { padding: 14px 16px 14px; }
.notebook-head { font-family: var(--font-display); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: #6b5220; font-weight: 700; }
.notebook-empty { font-style: italic; color: #7a6a4c; margin-top: 6px; font-size: 17px; }
.notebook-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.note { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px dashed rgba(90,70,30,.35); }
.note:first-child { border-top: 0; }
.note .ni { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 2px rgba(90,66,16,.4), 0 2px 5px rgba(0,0,0,.4); }
.note .ni img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.note .nf { font-style: italic; font-size: 17.5px; color: #4a3d28; line-height: 1.35; }
.note .nt { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: .03em; color: #1f1608; margin-top: 3px; display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.note .nt .ic { color: var(--brass-3); }
.note .nt.neg { color: #7b1b22; }
.note.latest { background: rgba(212,169,74,.22); margin: 0 -8px; padding: 9px 8px; border-radius: 6px; }
.note-actions { grid-column: 2; display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* coach */
.coach { background: linear-gradient(180deg, rgba(127,216,255,.14), rgba(127,216,255,.06)); border-radius: 8px; padding: 10px 14px; font-size: 17px; color: var(--spirit-2); display: flex; gap: 12px; align-items: center; box-shadow: inset 0 0 0 1px rgba(127,216,255,.45); }
.coach .ic { width: 26px; height: 26px; color: var(--spirit); }

/* suspects: gilded frames */
.suspects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
@media (min-width: 560px) { .suspects { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .suspects { grid-template-columns: repeat(6, 1fr); gap: 12px 10px; } .suspects.eight { grid-template-columns: repeat(4, 1fr); } }
.sus { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; color: var(--parchment); transition: transform .15s ease; }
.sus:active { transform: scale(.98); }
.frame { position: relative; width: 100%; aspect-ratio: 720 / 964; }
.frame .opening { position: absolute; left: var(--fl); right: var(--fr); top: var(--ft); bottom: var(--fb); background: #0a0a0c; perspective: 700px; }
.frame .flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4,.1,.2,1); }
.frame .face { position: absolute; inset: 0; backface-visibility: hidden; background-size: cover; background-position: center 15%; }
.frame .face.back { transform: rotateY(180deg); background-image: var(--canvas-back); background-position: center; }
.frame .gild { position: absolute; inset: 0; background: var(--frame) center/100% 100% no-repeat; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.sus.out .frame .flip { transform: rotateY(180deg); }
.sus.out .sn, .sus.out .sr, .sus.out .chips { opacity: .45; filter: grayscale(.6); }
.sus .sn { margin: 4px 6% 0; padding: 5px 6px 4px; background: linear-gradient(180deg, rgba(255,240,190,.5), rgba(255,255,255,0) 45%, rgba(0,0,0,.2)), var(--brass-tx) center/512px; color: #2a1c05; text-align: center; border-radius: 3px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 1px 0 rgba(255,245,210,.8), inset 0 -1px 0 rgba(90,66,16,.7), 0 0 0 1px #5a4210, 0 2px 4px rgba(0,0,0,.6); }
.sus .sr { text-align: center; font-size: 13px; color: var(--mute); margin-top: 3px; font-style: italic; }
.sus .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; justify-content: center; }
.sus .chip { font-size: 13px; padding: 2px 7px 2px 5px; }
.btn .ic { width: 1.3em; height: 1.3em; }
.sus .xbtn, .sus .hbtn { position: absolute; z-index: 3; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--parchment); background: radial-gradient(circle at 50% 35%, rgba(40,42,52,.95), rgba(10,10,12,.9)); box-shadow: inset 0 0 0 1px rgba(212,169,74,.6), 0 3px 8px rgba(0,0,0,.6); }
.sus .xbtn { top: 6%; right: 8%; } .sus .hbtn { top: 6%; left: 8%; color: var(--spirit); }
.sus .xbtn .ic, .sus .hbtn .ic { width: 18px; height: 18px; }
.sus .hbtn.on { background: radial-gradient(circle at 50% 35%, rgba(127,216,255,.55), rgba(20,40,60,.9)); box-shadow: 0 0 16px rgba(127,216,255,.7), inset 0 0 0 1px rgba(198,240,255,.8); color: #fff; }
.sus.hunched .frame .gild { filter: drop-shadow(0 0 12px rgba(127,216,255,.6)); }
.sus.killer-reveal .frame .gild { animation: glow 2s ease-in-out infinite; }
.sus.killer-reveal .stamp { display: flex; }
.sus .stamp { display: none; position: absolute; left: 0; right: 0; top: 0; height: 62%; align-items: center; justify-content: center; pointer-events: none; z-index: 3; }
.sus .stamp span { display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d84a54, #8f1d24 60%, #5a0f14); color: #ffd8da; font-family: var(--font-display); font-weight: 900; font-size: 12px; letter-spacing: .1em; transform: rotate(-12deg); box-shadow: inset 0 0 0 3px rgba(255,180,185,.3), inset 0 -4px 10px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.7); animation: stamp .35s ease-out both; }
@keyframes stamp { 0% { transform: rotate(-14deg) scale(1.8); opacity: 0 } 60% { transform: rotate(-12deg) scale(.96); opacity: 1 } 100% { transform: rotate(-12deg) scale(1) } }
.sus.shake { animation: shake .5s ease both; }

.case-actions { display: flex; gap: 10px; margin-top: 4px; }
.case-actions .btn { flex: 1; }
.case-foot { text-align: center; color: var(--mute); font-size: 15px; font-style: italic; }

/* ---------- SHEET ---------- */
.sheet, .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal { align-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4,4,6,.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.sheet-card { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.3)), var(--leather) center/512px; border-radius: 18px 18px 0 0; padding: 14px 18px calc(18px + var(--safe-b)); box-shadow: inset 0 1px 0 rgba(212,169,74,.7), inset 0 3px 0 rgba(10,10,12,.9), inset 0 4px 0 rgba(212,169,74,.35), 0 -10px 40px rgba(0,0,0,.7); animation: rise .28s ease both; }
@media (min-width: 700px) { .sheet { align-items: center; padding: 16px; } .sheet-card { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(212,169,74,.7), inset 0 0 0 4px rgba(10,10,12,.95), inset 0 0 0 5px rgba(212,169,74,.4), var(--shadow); padding-bottom: 18px; } }
.sheet-grab { width: 44px; height: 4px; border-radius: 3px; background: rgba(212,169,74,.4); margin: 0 auto 12px; }
.sd { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: start; }
.sd .frame { width: 128px; }
.sd .sdn { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: #fff3d0; line-height: 1.15; }
.sd .sdr { color: var(--brass); font-family: var(--font-display); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; margin-top: 3px; }
.sd .sdb { font-style: italic; font-size: 18px; color: var(--parchment-2); margin-top: 8px; line-height: 1.35; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.fact { background: rgba(0,0,0,.35); border-radius: 6px; padding: 8px 10px; box-shadow: inset 0 0 0 1px rgba(212,169,74,.25); }
.fact .fl { font-family: var(--font-display); font-size: 10.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .14em; display: flex; align-items: center; gap: .4em; }
.fact .fv { font-size: 18px; font-weight: 600; margin-top: 2px; color: var(--parchment); }
.fact.hit { box-shadow: inset 0 0 0 1px var(--blood-2); background: rgba(143,29,36,.25); }
.fact.hit .fv { color: #ffd0d3; text-decoration: line-through; }
.fact.ok { box-shadow: inset 0 0 0 1px var(--moss); background: rgba(76,175,125,.14); }
.statement { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(127,216,255,.08); box-shadow: inset 0 0 0 1px rgba(127,216,255,.4); font-size: 18px; font-style: italic; }
.statement .sl { font-family: var(--font-display); font-style: normal; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--spirit); margin-bottom: 4px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-actions .btn { flex: 1; }

/* ---------- MODAL ---------- */
.modal-card { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; padding: 24px 20px calc(20px + var(--safe-b)); }
.modal-card h2 { font-family: var(--font-deco); font-size: 22px; font-weight: 700; color: #fff3d0; letter-spacing: .06em; text-align: center; }
.modal-card h2.big { font-size: clamp(26px, 7vw, 34px); font-weight: 900; }
.modal-card h2.gold-text { color: transparent; }
.modal-card p { margin: 10px 0 0; font-size: 18px; color: var(--parchment-2); }
.modal-card .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; color: var(--brass-2); background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(212,169,74,.4); display: flex; align-items: center; justify-content: center; z-index: 2; }
.modal-close .ic { width: 18px; height: 18px; }
.howto { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.howto .step { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.howto .step .si { width: 40px; height: 40px; color: var(--brass-2); }
.howto .step b { display: block; font-family: var(--font-display); font-size: 15px; color: #fff3d0; letter-spacing: .04em; }
.howto .step span { font-size: 17px; color: var(--parchment-2); }
.result-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.result-hero .frame { width: 150px; }
.result-hero .frame.escaped .face.front { filter: grayscale(1) brightness(.7); }
.result-name { font-family: var(--font-display); font-size: 16px; color: #fff3d0; }
.result-name span { color: var(--mute); font-family: var(--font-body); font-style: italic; font-size: 16px; }
.result-quote { font-style: italic; font-size: 19px; color: var(--parchment); }
.result-cands { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 4px; color: var(--brass-2); }
.result-cands .ic { width: 30px; height: 30px; }
.result-cands .ic.x { color: var(--blood-3); } .result-cands .ic.w { color: var(--moss); } .result-cands .ic.l { color: var(--mute); } .result-cands .ic.h { color: var(--spirit); } .result-cands .ic.g { color: var(--parchment-2); }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; width: 100%; }
.result-stats div { background: rgba(0,0,0,.35); border-radius: 6px; padding: 8px; text-align: center; box-shadow: inset 0 0 0 1px rgba(212,169,74,.25); }
.result-stats b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--brass-2); font-weight: 900; }
.result-stats span { font-family: var(--font-display); font-size: 10.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .14em; }
.result-line { font-family: var(--font-display); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--parchment-2); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.result-line b { color: var(--brass-2); }
.countdown { text-align: center; color: var(--mute); font-size: 16px; margin-top: 4px; }
.countdown b { color: var(--parchment); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.debrief { margin-top: 10px; font-size: 15.5px; color: var(--mute); font-style: italic; }
.debrief b { color: var(--parchment-2); font-style: normal; }
.teaser { text-align: center; color: var(--parchment-2); font-style: italic; font-size: 17px; margin-top: 2px; }

/* ---------- ARCHIVE ---------- */
.archive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .archive-grid { grid-template-columns: repeat(4, 1fr); } }
.file { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16/11; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(212,169,74,.5), var(--shadow); text-align: left; color: var(--parchment); }
.file .fo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.1), rgba(10,10,12,.9)); }
.file .ft { position: absolute; left: 10px; right: 10px; bottom: 8px; }
.file .ft b { display: block; font-family: var(--font-display); font-size: 13px; color: #fff3d0; letter-spacing: .06em; }
.file .ft span { font-size: 13.5px; color: var(--mute); font-style: italic; }
.file .fs { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(10,10,12,.7); color: var(--brass-2); }
.file .fs .ic { width: 16px; height: 16px; } .file .fs.won { color: var(--moss); } .file .fs.lost { color: var(--mute); }
.file.locked { filter: grayscale(.6) brightness(.7); }
.upsell { margin-top: 16px; padding: 18px; text-align: center; }
.upsell h3 { font-family: var(--font-display); font-size: 18px; color: #fff3d0; letter-spacing: .06em; }
.upsell p { color: var(--parchment-2); font-size: 17px; margin: 6px 0 12px; }

/* ---------- STATS ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-row div { background: rgba(0,0,0,.35); border-radius: 6px; padding: 10px 6px; text-align: center; box-shadow: inset 0 0 0 1px rgba(212,169,74,.3); }
.stat-row b { display: block; font-family: var(--font-display); font-size: 26px; color: var(--brass-2); font-weight: 900; }
.stat-row span { font-family: var(--font-display); font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; }
.dist { margin-top: 18px; }
.dist h3 { font-family: var(--font-display); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; }
.bar { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; margin: 5px 0; }
.bar .bl { text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--parchment-2); font-size: 14px; }
.bar .bf { height: 26px; background: linear-gradient(180deg, rgba(255,240,190,.4), rgba(0,0,0,.2)), var(--brass-tx) center/512px; border-radius: 3px; min-width: 26px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-family: var(--font-display); font-weight: 900; color: #2a1c05; font-size: 13px; box-shadow: 0 0 0 1px #5a4210; }
.bar.me .bf { background: linear-gradient(90deg, #2a7f5a, var(--moss)); color: #fff; box-shadow: 0 0 0 1px #1d5a3f; }
.rank-list { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.rank { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 6px; background: rgba(0,0,0,.3); font-family: var(--font-display); font-size: 13px; letter-spacing: .06em; color: var(--mute); }
.rank.cur { background: rgba(212,169,74,.18); color: #fff3d0; box-shadow: inset 0 0 0 1px rgba(212,169,74,.5); }

/* ---------- PASS ---------- */
.pass-hero { text-align: center; padding: 6px 0 14px; }
.pass-hero .ic { width: 52px; height: 52px; color: var(--brass-2); }
.pass-hero h2 { font-family: var(--font-deco); font-size: 26px; color: #fff3d0; margin-top: 6px; }
.pass-hero p { color: var(--parchment-2); font-size: 18px; margin: 8px 0 0; }
.perks { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.perk { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 12px; background: rgba(0,0,0,.3); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(212,169,74,.25); color: var(--parchment); }
.perk .pi { width: 30px; height: 30px; color: var(--brass-2); }
.perk b { display: block; font-family: var(--font-display); font-size: 14px; color: #fff3d0; letter-spacing: .03em; }
.perk span { font-size: 16px; color: var(--mute); }
.perk.on .pi { color: var(--moss); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan { position: relative; padding: 14px 12px; border-radius: 8px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px rgba(212,169,74,.3); text-align: center; color: var(--parchment); }
.plan.best { box-shadow: inset 0 0 0 2px var(--brass); background: rgba(212,169,74,.12); }
.plan .pp { font-family: var(--font-display); font-size: 24px; font-weight: 900; color: #fff3d0; }
.plan .pn { font-size: 15px; color: var(--mute); }
.plan .pb { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); }
.preview-note { margin-top: 12px; text-align: center; color: var(--mute); font-size: 14.5px; font-style: italic; }

/* ---------- TOAST ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); background: var(--vellum) center/512px; color: var(--ink-on-vellum); padding: 12px 20px; border-radius: 6px; font-weight: 600; font-size: 17px; box-shadow: 0 0 0 1px rgba(90,66,16,.6), var(--shadow); z-index: 60; animation: rise .25s ease both; max-width: 92vw; text-align: center; }
.share-box { margin-top: 12px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(212,169,74,.3); border-radius: 6px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14.5px; white-space: pre-wrap; color: var(--parchment); text-align: left; }

/* ---------- mobile refinements ---------- */
@media (max-width: 480px) {
  .case-top { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .case-title-main { font-size: 12.5px; letter-spacing: .08em; white-space: normal; line-height: 1.2; }
  .case-title-sub { display: none; }
  .case-hud { gap: 8px; }
  .hud-candles .ic, .hud-strikes .ic { width: 19px; height: 19px; }
  .icon-btn { width: 48px; height: 48px; }
  .scene { height: min(44vh, 380px); }
  .bubble-text { font-size: 18px; }
  .obj { min-height: 96px; }
  .obj .oi { width: 50px; height: 50px; }
  .obj .ol { font-size: 12.5px; }
  .sus .sn { font-size: 11px; }
  .sus .chip { font-size: 12px; }
  .wordmark { width: 92%; }
  .home-row { gap: 8px; }
  .mini-card { font-size: 11.5px; padding: 10px 4px 8px; }
  .mini-card small { font-size: 12px; }
}
.modal-card::before, .modal-card::after, .sheet-card::before, .sheet-card::after { display: none; }
.result-hero h2.big { margin-top: 6px; }