/* Home + About: a night-time crime scene you can play with.
   Cover photo behind rain and tape, torn paper strips, a print scanner, a torch, flip cards. */
:root {
  --marker: #e5b522;      /* evidence-marker yellow, used only for markers */
  --brand-red: #d72626;
  --f-brush: var(--f-display);
}

.brush { font-family: var(--f-brush); font-weight: 400; text-transform: uppercase; line-height: .98; letter-spacing: .01em; text-wrap: balance; margin: 0; }
.brush .r { color: var(--brand-red); display: block; }
img.brand-mark { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px #2b2424; }
img.seal { border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.6); }

/* ── cinematic cover ─────────────────────────────── */
.cine { position: relative; overflow: hidden; background: #050505; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 9; max-height: 760px; min-height: 440px; width: 100%; }
.cine-img { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: center 40%; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform .25s ease-out, filter 1.2s ease; filter: brightness(.92); }
.cine.crossed .cine-img { filter: brightness(1.05); }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cine-flash { position: absolute; inset: 0; background: radial-gradient(70% 60% at 60% 10%, rgba(220,230,255,.5), transparent 70%); opacity: 0; pointer-events: none; }
.cine-flash.on { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: .55; } 18% { opacity: .1; } 26% { opacity: .35; } 100% { opacity: 0; } }
.cine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,5,.15), transparent 30%, transparent 62%, rgba(14,12,12,.95)); }

/* Crime-scene barrier tape: glossy yellow polyethylene, heavy black condensed print,
   stretch creases, a slight sag and sway. Tears and drops when you cross it. */
.tape { position: absolute; left: -10%; width: 120%; height: clamp(38px, 4.6vw, 62px); z-index: 4; pointer-events: none; }
.tape-a { bottom: 21%; transform: rotate(-7deg); }
.tape-b { bottom: 12%; transform: rotate(4.5deg); }
.tape-sway { display: flex; height: 100%; filter: drop-shadow(0 14px 12px rgba(0,0,0,.55)) drop-shadow(0 2px 1px rgba(0,0,0,.4)); animation: sway 6s ease-in-out infinite; transform-origin: 50% -400%; }
.tape-b .tape-sway { animation-duration: 7.5s; animation-delay: -2s; }
@keyframes sway { 0%, 100% { transform: rotate(-.5deg) translateY(0); } 50% { transform: rotate(.5deg) translateY(4px); } }
.tape-half { position: relative; flex: 1 1 50%; overflow: hidden; display: flex; align-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,.12) 16%, transparent 34%, transparent 66%, rgba(0,0,0,.08) 82%, rgba(0,0,0,.28) 100%),
    repeating-linear-gradient(97deg, transparent 0 90px, rgba(0,0,0,.10) 104px, rgba(255,255,255,.22) 110px, transparent 126px, transparent 230px, rgba(0,0,0,.07) 246px, transparent 262px),
    linear-gradient(180deg, #ffe23a, #f6cf05 45%, #e7b900);
  transition: transform 1.2s cubic-bezier(.55,-0.35,.3,1), opacity .7s ease .6s; }
.tape-half::after { /* thin printed edge bands */ content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #111 0 2px, transparent 2px 5px, transparent calc(100% - 5px), #111 calc(100% - 5px) calc(100% - 3px), transparent calc(100% - 3px)); opacity: .85; }
.tape-half span { position: relative; flex: none; white-space: nowrap; font: 400 clamp(1.1rem, 2.3vw, 2rem)/1 "Anton", "Oswald", Impact, "Arial Narrow", sans-serif; letter-spacing: .05em; color: #0d0d0d; text-transform: uppercase; animation: tapeMove 40s linear infinite; padding-left: 1em; text-shadow: 0 0 .5px rgba(0,0,0,.6); }
.tape-b .tape-half span { animation-direction: reverse; animation-duration: 52s; }
.tape-half:first-child { clip-path: polygon(0 0, 100% 0, 98% 14%, 100% 27%, 97.5% 41%, 100% 55%, 97% 70%, 99.5% 84%, 97% 100%, 0 100%); }
.tape-half:last-child { clip-path: polygon(2.5% 0, 100% 0, 100% 100%, 3% 100%, 0 86%, 2.5% 72%, 0 57%, 3% 43%, .5% 29%, 3% 15%); margin-left: -2px; }
@keyframes tapeMove { to { transform: translateX(-50%); } }
.cine:hover .tape-a .tape-sway { animation-duration: 3s; }
.cine.crossed .tape-sway { animation: none; }
.cine.crossed .tape-a .tape-half:first-child { transform: translate(-60%, 160px) rotate(-22deg) skewX(8deg); opacity: 0; }
.cine.crossed .tape-a .tape-half:last-child { transform: translate(60%, 210px) rotate(18deg) skewX(-8deg); opacity: 0; }
.cine.crossed .tape-b .tape-half:first-child { transform: translate(-60%, 240px) rotate(14deg); opacity: 0; }
.cine.crossed .tape-b .tape-half:last-child { transform: translate(60%, 180px) rotate(-16deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .tape-sway, .tape-half span { animation: none; } }

.cine-ui { position: absolute; z-index: 6; left: 0; right: 0; bottom: clamp(18px, 4vw, 40px); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cine-ui p { margin: 0; font: 400 clamp(.85rem, 1.4vw, 1rem)/1.4 var(--f-type); color: var(--paper); text-shadow: 0 2px 10px #000; }
.cross { box-shadow: 0 10px 30px rgba(215,38,38,.35); }
.cross .arr { transform: rotate(90deg); }
@media (max-width: 640px) { .cine-ui p { display: none; } .cine-ui { justify-content: center; } }

/* ── evidence-marker section nav ─────────────────── */
.markers { position: fixed; z-index: 40; right: max(18px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 10px; }
@media (min-width: 1180px) { .markers { display: flex; } }
.markers a { position: relative; isolation: isolate; display: grid; place-items: end center; width: 30px; height: 26px; padding-bottom: 3px; text-decoration: none; color: #1a1412; font: 800 .8rem/1 var(--f-body); transition: transform .25s; }
.markers a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #4a4234; clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: background .25s; }
.markers a:hover, .markers a.on { transform: scale(1.18); }
.markers a:hover::before, .markers a.on::before { background: var(--marker); }
.markers a span { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 500 .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory); background: rgba(14,12,12,.92); border: 1px solid var(--line); padding: .45em .6em; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.markers a:hover span, .markers a:focus-visible span { opacity: 1; }

/* ── intro split ─────────────────────────────────── */
.intro { border-bottom: 1px solid var(--line); }
.intro .wrap { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; padding-block: 56px 64px; align-items: center; }
@media (min-width: 980px) { .intro .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-block: 72px; } }
.intro h1 { font-size: clamp(3rem, 8.4vw, 6.4rem); margin-top: 20px; }
.intro .hero-lede { margin-top: 24px; }
.welcome { position: relative; justify-self: center; width: min(100%, 440px); }
.welcome img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 8px solid #f2ede4; border-bottom-width: 36px; box-shadow: 0 30px 60px rgba(0,0,0,.6); transform: rotate(3deg); transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.welcome:hover img { transform: rotate(0) scale(1.02); }
.welcome figcaption { position: absolute; left: 22px; bottom: 6px; font: 500 1.35rem var(--f-hand); color: #1a1412; transform: rotate(3deg); transform-origin: left bottom; }
.welcome::before { content: ""; position: absolute; z-index: 2; top: -14px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9b9b, var(--brand-red) 55%, #4d070b); box-shadow: 0 5px 6px rgba(0,0,0,.5); }

/* ── what you'll find: torn strips ───────────────── */
.find { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; padding-bottom: 72px; align-items: start; }
@media (min-width: 980px) { .find { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.post-pin { position: relative; justify-self: center; width: min(100%, 420px); }
.post-pin img { width: 100%; box-shadow: 0 30px 60px rgba(0,0,0,.65); transform: rotate(-2.5deg); transition: transform .5s cubic-bezier(.3,1.4,.5,1); border-radius: 2px; }
.post-pin:hover img { transform: rotate(0) translateY(-6px); }
.strips { display: grid; gap: 16px; }
.strip-item { --tilt: -.6deg; background:
    radial-gradient(circle at 92% 30%, rgba(215,38,38,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 96% 60%, rgba(215,38,38,.25) 0 6px, transparent 7px),
    radial-gradient(circle at 88% 80%, rgba(215,38,38,.3) 0 2px, transparent 3px),
    linear-gradient(180deg, #ece6dc, #d9d1c3);
  color: #161210; transform: rotate(var(--tilt)); transition: transform .35s cubic-bezier(.3,1.5,.5,1);
  clip-path: polygon(0 6%, 4% 0, 12% 4%, 22% 0, 35% 5%, 48% 1%, 60% 4%, 73% 0, 86% 5%, 100% 1%, 99% 30%, 100% 62%, 98% 100%, 85% 95%, 70% 100%, 56% 96%, 42% 100%, 28% 95%, 14% 100%, 2% 96%, 1% 60%); }
.strip-item:nth-child(2) { --tilt: .8deg; } .strip-item:nth-child(3) { --tilt: -.3deg; } .strip-item:nth-child(4) { --tilt: .5deg; }
.strip-item:hover { transform: rotate(0) translateX(6px); }
.strip-item button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 20px 26px 20px 20px; }
.strip-item button:focus-visible { outline: 3px solid var(--brand-red); outline-offset: -6px; }
.strip-ico { width: 58px; height: 58px; border-radius: 50%; background: #111; border: 3px solid var(--brand-red); display: grid; place-items: center; color: #eee; }
.strip-ico svg { width: 26px; height: 26px; }
.strip-item b { font: 400 clamp(1.15rem, 2.4vw, 1.5rem)/1.15 var(--f-type); border-left: 3px solid var(--brand-red); padding-left: 16px; }
.strip-item .plus { font: 400 1.8rem/1 var(--f-body); color: var(--brand-red); transition: transform .3s; }
.strip-item.open .plus { transform: rotate(45deg); }
.strip-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.strip-item.open .strip-more { grid-template-rows: 1fr; }
.strip-more > div { overflow: hidden; }
.strip-more p { margin: 0; padding: 0 26px 6px 96px; font-size: .98rem; line-height: 1.6; color: #3a2f27; }
.strip-more a { display: inline-flex; gap: .4em; align-items: center; margin: 8px 26px 22px 96px; font-weight: 700; color: var(--brand-red); text-decoration: none; }
@media (max-width: 520px) { .strip-item button { grid-template-columns: 46px minmax(0,1fr) auto; gap: 12px; padding: 16px; } .strip-ico { width: 46px; height: 46px; } .strip-more p, .strip-more a { margin-left: 16px; padding-left: 0; padding-right: 16px; } .strip-more p { padding-left: 16px; } }

/* ── fingerprint scanner ─────────────────────────── */
.scan-sec { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(60% 80% at 75% 50%, rgba(215,38,38,.09), transparent 70%), var(--bg); }
.scan-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; padding-block: 72px; align-items: center; }
@media (min-width: 980px) { .scan-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; } }
.scan-grid h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 16px 0 16px; }
.scan-grid > div > p { color: var(--muted); max-width: 46ch; margin: 0; }
.scanner { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 0; border: 1px solid #3a2626; border-radius: 16px; background: linear-gradient(180deg, #161212, #0d0b0b); box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04); overflow: hidden; }
@media (min-width: 640px) { .scanner { grid-template-columns: 260px minmax(0,1fr); } }
.pad { position: relative; display: grid; place-items: center; padding: 28px; border-bottom: 1px solid #2b2020; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
@media (min-width: 640px) { .pad { border-bottom: 0; border-right: 1px solid #2b2020; } }
.pad:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -4px; }
.print { width: 190px; height: 230px; position: relative; border-radius: 46% 46% 44% 44%; background: radial-gradient(circle at 50% 45%, rgba(215,38,38,.12), transparent 70%); }
.print svg { width: 100%; height: 100%; overflow: visible; }
.print path { fill: none; stroke: #4a3a3a; stroke-width: 2.2; stroke-linecap: round; transition: stroke .25s; }
.print path.lit { stroke: var(--brand-red); filter: drop-shadow(0 0 4px rgba(215,38,38,.8)); }
.scan-line { position: absolute; left: -10%; right: -10%; height: 3px; top: 0; background: linear-gradient(90deg, transparent, #ff5a5a, transparent); box-shadow: 0 0 18px 4px rgba(255,60,60,.5); opacity: 0; }
.scanner.scanning .scan-line { opacity: 1; animation: sweep 1s ease-in-out infinite alternate; }
@keyframes sweep { from { top: 0; } to { top: calc(100% - 3px); } }
.pad-ring { position: absolute; inset: 14px; border-radius: 12px; border: 1px dashed #3a2a2a; pointer-events: none; }
.pad small { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font: 500 .66rem var(--f-mono); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.readout { padding: 24px; display: grid; gap: 14px; align-content: start; min-height: 290px; }
.readout .status { font: 500 .78rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; gap: .6em; align-items: center; }
.readout .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #555; }
.scanner.scanning .status::before { background: var(--marker); animation: blink .5s infinite; }
.scanner.matched .status { color: #7fe08a; }
.scanner.matched .status::before { background: #3fcf55; }
@keyframes blink { 50% { opacity: .2; } }
.meter { height: 6px; border-radius: 6px; background: #261c1c; overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, #8b1414, var(--brand-red)); transition: width .1s linear; }
.match { display: none; grid-template-columns: 88px minmax(0,1fr); gap: 16px; align-items: center; text-decoration: none; color: var(--ivory); padding: 12px; border: 1px solid #3a2626; border-radius: 10px; background: #120e0e; }
.scanner.matched .match { display: grid; animation: pop .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.match img { width: 88px; aspect-ratio: 4/5; object-fit: cover; object-position: top; border-radius: 4px; }
.match h3 { margin: 6px 0 4px; font: 700 1.05rem/1.25 var(--f-body); }
.match p { margin: 0; color: var(--muted); font-size: .9rem; }
.readout .idle-copy { color: var(--muted); font-size: .92rem; margin: 0; }
.scanner.matched .idle-copy { display: none; }
.rescan { justify-self: start; display: none; }
.scanner.matched .rescan { display: inline-flex; }

/* ── torch desk section ──────────────────────────── */
.desk-sec .torch-desk { border-radius: 12px; border-bottom: 1px solid var(--line); margin-bottom: 72px; height: clamp(420px, 46vw, 600px); }

/* ── follow (home) ───────────────────────────────── */
.follow { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; align-items: center; margin-bottom: 8px; }
@media (min-width: 980px) { .follow { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; } }
.follow h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 16px 0 14px; }
.follow p { color: var(--muted); margin: 0 0 28px; max-width: 56ch; }

/* ── about: spotlight hero, values, process, game, brand kit ── */
.about-hero .wrap { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; padding-block: 56px 64px; align-items: center; }
@media (min-width: 980px) { .about-hero .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); padding-block: 72px; } }
.about-hero h1 { font-size: clamp(3rem, 8vw, 6rem); margin: 20px 0 22px; }
.about-hero p { color: var(--muted); font-size: 1.12rem; max-width: 50ch; margin: 0 0 26px; }
.spot { position: relative; aspect-ratio: 1; width: min(100%, 520px); justify-self: center; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); touch-action: pan-y; }
.spot img { width: 100%; height: 100%; object-fit: cover; }
.spot .torch-dark { --tr: 170px; }

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; padding-bottom: 72px; }
.flip { perspective: 1200px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; min-height: 260px; }
.flip-in { position: relative; height: 100%; min-height: 260px; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.3,.4,1); }
.flip.on .flip-in { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; padding: 26px; display: grid; align-content: space-between; }
.flip-front { background: radial-gradient(circle at 85% 20%, rgba(215,38,38,.4) 0 5px, transparent 6px), radial-gradient(circle at 80% 30%, rgba(215,38,38,.25) 0 9px, transparent 10px), linear-gradient(180deg, #ece6dc, #d6cdbe); color: #141010; }
.flip-front strong { font: 400 clamp(2.4rem, 4vw, 3.2rem)/1 var(--f-brush); text-transform: uppercase; }
.flip-front strong i { color: var(--brand-red); font-style: normal; }
.flip-front small { font: 400 .78rem var(--f-type); letter-spacing: .1em; color: #5a4a3d; }
.flip-back { transform: rotateY(180deg); background: #120e0e; border: 1px solid #3a2626; }
.flip-back p { margin: 0; color: #ddd2bf; line-height: 1.65; font-size: 1rem; }
.flip-back .label { color: var(--brand-red); }

.process { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; padding-bottom: 72px; }
@media (min-width: 980px) { .process { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; } }
.proc-stage { display: none; }
@media (min-width: 980px) { .proc-stage { display: block; } }
.proc-sticky { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 110px); }
.proc-frame { position: relative; aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.proc-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.06); transition: opacity .6s, transform 1.2s ease; }
.proc-frame img.on { opacity: 1; transform: scale(1); }
.proc-marker { position: absolute; z-index: 2; left: 18px; bottom: 18px; width: 86px; height: 74px; background: var(--marker); clip-path: polygon(50% 0, 100% 100%, 0 100%); display: grid; place-items: end center; padding-bottom: 8px; font: 900 2rem/1 var(--f-body); color: #111; box-shadow: 0 8px 20px rgba(0,0,0,.5); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.proc-marker.bump { transform: scale(1.15) rotate(-4deg); }
.proc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.proc-step { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 26px 26px 26px 92px; background: var(--panel); transition: border-color .3s, background .3s, opacity .3s; }
@media (min-width: 980px) { .proc-step { min-height: 46vh; display: grid; align-content: center; opacity: .45; } .proc-step.on { opacity: 1; border-color: #5a2326; background: #171111; } }
.proc-step .mk { position: absolute; left: 22px; top: 24px; width: 46px; height: 40px; background: var(--marker); clip-path: polygon(50% 0, 100% 100%, 0 100%); display: grid; place-items: end center; padding-bottom: 4px; font: 900 1.05rem/1 var(--f-body); color: #111; }
.proc-step h3 { margin: 0 0 8px; font: 700 1.25rem/1.25 var(--f-body); }
.proc-step p { margin: 0; color: var(--muted); }
.proc-step img.mob { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; border-radius: 6px; margin-top: 16px; }
@media (min-width: 980px) { .proc-step img.mob { display: none; } }

.game-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.score-pill { font: 500 .82rem var(--f-mono); letter-spacing: .08em; padding: .7em 1em; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.score-pill b { color: var(--brand-red); }
.guess-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; padding-bottom: 28px; }
.guess { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); display: grid; }
.guess-img { position: relative; aspect-ratio: 4/5; background: #000; overflow: hidden; }
.guess-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transition: transform .5s, filter .5s; }
.guess:not(.done) .guess-img img { filter: saturate(.85); }
.guess-img .verdict-tag { position: absolute; left: 10px; top: 10px; font: 500 .66rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: .5em .65em; border-radius: 3px; background: rgba(0,0,0,.8); color: var(--paper); opacity: 0; transform: translateY(-6px); transition: .35s; }
.guess.done .verdict-tag { opacity: 1; transform: none; }
.guess .res { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; opacity: 0; transform: scale(.4); transition: .35s cubic-bezier(.3,1.6,.5,1); }
.guess.right .res { background: #2c7a3a; color: #fff; opacity: 1; transform: none; }
.guess.wrong .res { background: var(--brand-red); color: #fff; opacity: 1; transform: none; }
.guess-body { padding: 14px; display: grid; gap: 10px; }
.guess-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guess-btns button { font: 600 .82rem var(--f-body); padding: .75em .4em; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ivory); cursor: pointer; }
.guess-btns button:hover { border-color: #5a2326; }
.guess.done .guess-btns { display: none; }
.guess-note { margin: 0; font-size: .86rem; color: var(--muted); display: none; }
.guess.done .guess-note { display: block; }

.kit { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; padding-bottom: 72px; }
@media (min-width: 900px) { .kit { grid-template-columns: repeat(12, minmax(0,1fr)); } }
.kit-item { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; display: grid; cursor: zoom-in; padding: 0; text-align: left; color: inherit; font: inherit; transition: border-color .2s, transform .3s; }
.kit-item:hover { border-color: #5a2326; transform: translateY(-3px); }
.kit-item img { width: 100%; height: 100%; object-fit: cover; }
.kit-item .cap { position: absolute; left: 10px; bottom: 10px; font: 500 .66rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.8); color: var(--paper); padding: .45em .6em; border-radius: 3px; }
@media (min-width: 900px) {
  .k-cover { grid-column: span 8; aspect-ratio: 16/9; }
  .k-logos { grid-column: span 4; display: grid; grid-template-rows: 1fr 1fr; gap: 18px; cursor: default; border: 0; background: none; }
  .k-post { grid-column: span 3; aspect-ratio: 4/5; }
  .k-sq { grid-column: span 3; aspect-ratio: 4/5; }
  .k-palette { grid-column: span 12; }
}
.logo-tile { display: grid; place-items: center; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: radial-gradient(circle, #1d1717, #0e0c0c); cursor: zoom-in; color: inherit; font: inherit; }
.logo-tile img { width: min(150px, 60%); height: auto; border-radius: 50%; box-shadow: 0 14px 30px rgba(0,0,0,.6); transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.logo-tile:hover img { transform: rotate(-8deg) scale(1.05); }
.logo-tile span { font: 500 .66rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.swatch-btn { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); cursor: copy; padding: 0; text-align: left; color: inherit; font: inherit; }
.swatch-btn i { display: block; height: 84px; }
.swatch-btn span { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px; font-size: .9rem; }
.swatch-btn small { font: 500 .74rem var(--f-mono); color: var(--muted); }
.swatch-btn.copied small { color: #7fe08a; }

dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 92vh; }
dialog.lightbox::backdrop { background: rgba(5,4,4,.88); backdrop-filter: blur(4px); }
dialog.lightbox img { max-width: 100%; max-height: 84vh; width: auto; margin: auto; border-radius: 6px; }
dialog.lightbox .lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px 0; color: var(--ivory); font-size: .9rem; }

.game-out { margin: 0 0 14px; font: 500 1.6rem/1.2 var(--f-hand); color: var(--paper); }
.game-out b { color: var(--brand-red); }

@media (max-width: 700px) { .guess-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .guess-btns { grid-template-columns: 1fr; } }

/* ── home archive: three on the desk, the rest in a filing-cabinet drawer ── */
.grid.latest3 { margin-bottom: 0; }
@media (min-width: 900px) { .grid.latest3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.cabinet { margin: 28px 0 72px; perspective: 1400px; }
.drawer-front { all: unset; box-sizing: border-box; position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 20px clamp(18px, 4vw, 34px); cursor: pointer; border-radius: 6px;
  background: linear-gradient(180deg, #4a4d52, #34373b 48%, #2a2c30); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.4), 0 18px 34px rgba(0,0,0,.55); transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
@media (min-width: 700px) { .drawer-front { grid-template-columns: minmax(0,1fr) 180px minmax(0,1fr); } }
.drawer-front:hover { transform: translateY(-2px); }
.drawer-front:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 4px; }
.drawer-label { justify-self: start; background: #efe7d3; color: #1a1412; padding: 8px 14px; border: 2px solid #8b8f95; box-shadow: inset 0 0 0 2px #d6ccb4; transform: rotate(-.5deg); }
.drawer-label small { display: block; font: 400 .62rem var(--f-type); letter-spacing: .14em; text-transform: uppercase; color: #6a5a4a; }
.drawer-label b { display: block; font: 900 1.4rem/1 var(--f-display); text-transform: uppercase; margin: 3px 0; }
.drawer-label i { font: 500 1.05rem var(--f-hand); color: var(--brand-red); font-style: normal; }
.drawer-handle { display: none; height: 22px; border-radius: 12px; background: linear-gradient(180deg, #d9dbde, #8a8e94 55%, #5d6166); box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 1px 0 #fff; }
@media (min-width: 700px) { .drawer-handle { display: block; } }
.drawer-cta { justify-self: end; font: 600 .95rem var(--f-body); color: #f1ece2; display: inline-flex; gap: .5em; align-items: center; }
.drawer-cta::after { content: "\2193"; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-red); color: #fff; transition: transform .4s; }
.cabinet.open .drawer-cta::after { transform: rotate(180deg); }
.drawer-cta .close-t, .cabinet.open .drawer-cta .open-t { display: none; }
.cabinet.open .drawer-cta .close-t { display: inline; }
.drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.3,.9,.3,1); margin: 0 14px; }
.cabinet.open .drawer { grid-template-rows: 1fr; }
.drawer > .drawer-in { overflow: hidden; min-height: 0; padding: 0 clamp(12px, 3vw, 26px); background: linear-gradient(180deg, #1b1c1f, #141517); border: 1px solid #2c2e33; border-top: 0; border-radius: 0 0 8px 8px; box-shadow: inset 0 18px 30px rgba(0,0,0,.6); }
.cabinet.open .drawer-in { padding-block: 34px 26px; }
.drawer-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 30px 18px; }
.drawer-file { position: relative; display: block; text-decoration: none; color: #1a1412; transform: translateY(40px); opacity: 0; transition: transform .55s cubic-bezier(.3,1.4,.5,1), opacity .4s; transition-delay: calc(var(--i) * 70ms + .25s); }
.cabinet.open .drawer-file { transform: none; opacity: 1; }
.cabinet.open .drawer-file:hover { transform: translateY(-8px); transition-delay: 0s; }
.df-tab { position: absolute; top: -18px; left: calc(12px + (var(--i) % 3) * 60px); padding: 4px 12px 6px; background: var(--manila); border-radius: 6px 6px 0 0; font: 400 .7rem var(--f-type); letter-spacing: .1em; }
.df-body { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 14px; align-items: center; padding: 12px; background: var(--manila); border-radius: 2px 6px 6px 6px; box-shadow: 0 10px 20px rgba(0,0,0,.45); }
.df-body img { width: 64px; aspect-ratio: 4/5; object-fit: cover; object-position: top; box-shadow: 0 3px 6px rgba(0,0,0,.3); }
.df-body strong { display: block; font: 900 1.25rem/1.05 var(--f-display); text-transform: uppercase; }
.df-body em { display: block; font: 500 1.1rem/1.15 var(--f-hand); color: #4a3a2c; font-style: normal; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-file { transition: none; } }

/* ── custom cursors + magnifier lens ── */
html[data-cursor="glove"], html[data-cursor="glove"] *, html[data-cursor="bone"], html[data-cursor="bone"] *, html[data-cursor="lens"], html[data-cursor="lens"] * { cursor: none !important; }
html[data-cursor] input, html[data-cursor] textarea, html[data-cursor] [contenteditable] { cursor: text !important; }
.nz-cursor { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; width: 40px; height: 52px; margin: -1px 0 0 -16px; opacity: 0; transition: opacity .2s; will-change: transform; }
.nz-cursor.on { opacity: 1; }
.nz-cursor.hide, .nz-cursor.zooming { opacity: 0; }
.nz-cursor img { width: 100%; height: 100%; display: block; transform-origin: 40% 3%; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.nz-cursor.is-link img { transform: rotate(-12deg) scale(1.12); }
.nz-cursor.press img { transform: rotate(-12deg) scale(.92) translateY(2px); }
.nz-cursor.is-lens { width: 44px; height: 44px; margin: -16.5px 0 0 -16.5px; }
.nz-cursor.is-lens img { transform-origin: 38% 38%; }
.nz-cursor.is-lens.is-link img { transform: scale(1.18); }
.nz-ping { position: absolute; left: 13px; top: 2px; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 2px solid var(--brand-red, #d72626); opacity: 0; }
.nz-cursor.is-link:not(.is-lens) .nz-ping { animation: ping 1.2s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.nz-lens { position: fixed; left: 0; top: 0; z-index: 9999; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .18s;
  background-color: #000; background-repeat: no-repeat;
  /* glass edge darkening + brass bezel (bright bevel, dark groove, polished outer lip) */
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.85), inset 0 0 28px 6px rgba(5,10,18,.65), inset 14px 16px 34px rgba(255,255,255,.10),
    0 0 0 3px #3d2706, 0 0 0 5px #f1d388, 0 0 0 8px #a77a24, 0 0 0 10px #4a3208, 0 0 0 11px #e9c877,
    0 18px 44px rgba(0,0,0,.75); }
.nz-lens::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(70% 55% at 30% 24%, rgba(255,255,255,.26), rgba(255,255,255,.04) 45%, transparent 60%),
              radial-gradient(18% 10% at 72% 78%, rgba(255,255,255,.18), transparent 70%); }
.nz-lens::after { /* brass ferrule + lacquered rosewood handle */ content: ""; position: absolute; left: 100%; top: 100%; width: 92px; height: 20px; margin: -15px 0 0 -18px; border-radius: 3px 10px 10px 3px; transform: rotate(45deg); transform-origin: 0 50%;
  background:
    linear-gradient(90deg, transparent 0 16px, #2a0f08 16px 18px, transparent 18px),
    linear-gradient(180deg, #4a3208 0, #f6dc95 30%, #a77a24 60%, #3d2706 100%) 0 0 / 16px 100% no-repeat,
    linear-gradient(180deg, #120806 0, #5a3326 28%, #8a5a44 38%, #3a1d14 60%, #0d0504 100%);
  box-shadow: 0 10px 16px rgba(0,0,0,.6); }
.nz-lens.on { opacity: 1; }
.nz-picker { position: fixed; z-index: 75; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.nz-pick-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(21,18,18,.92); color: var(--ivory); font: 500 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.nz-pick-btn img { width: 22px; height: 26px; object-fit: contain; }
.nz-pick-btn:hover { border-color: #5a2326; }
.nz-pick-menu { position: absolute; left: 0; bottom: calc(100% + 10px); width: 230px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: #151212; box-shadow: 0 20px 40px rgba(0,0,0,.6); display: grid; gap: 2px; }
.nz-pick-menu[hidden] { display: none; }
.nz-pick-menu button { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ivory); font: 500 .9rem var(--f-body); text-align: left; }
.nz-pick-menu button:hover { background: var(--panel-2); }
.nz-pick-menu button[aria-checked="true"] { background: #2a1314; box-shadow: inset 0 0 0 1px #5a2326; }
.nz-pick-menu img, .nz-pick-menu svg { width: 28px; height: 32px; object-fit: contain; justify-self: center; }
.nz-pick-menu svg { width: 22px; height: 22px; }
@media (hover: none), (pointer: coarse) { .nz-picker, .nz-cursor, .nz-lens { display: none; } }

/* flip cards: the inner wrappers are spans, so make them real boxes */
.flip { display: block; width: 100%; }
.flip-in { display: block; }
.flip-face { display: grid; }
/* compact brand kit */
@media (min-width: 900px) { .kit.compact { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; } .kit.compact .k-cover { grid-column: auto; } .kit.compact .k-palette { grid-column: 1 / -1; } }
.kit.compact .logo-tile { height: 100%; }
.kit.compact .logo-tile img { width: min(190px, 70%); }