/* MAKE THE NUMBER GO UP v2, "BEDTIME IS A BUG" — Morrow's glass dashboard over Nao's lamplit room at night. The
   corporate layer is green numbers and white glass; the human layer is the room, its five places and her face. */
:root {
  --night: #0b1022; --glass: rgba(14,20,40,.82); --card: #ffffff; --ink: #111816; --dim: #8b95ad; --line: rgba(255,255,255,.12);
  --up: #19c27b; --up-hi: #3ee09a; --alarm: #ff5a5f; --gold: #f5b301; --warm: #2a1c14;
  --paper: #f4f6f4; --pdim: #5d6a66; --pline: #dde3e0;
  --sys: -apple-system, "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", "Noto Sans Thai", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--night); color: #eef1f8; font: 500 15px/1.45 var(--sys); overflow-x: hidden; }
html:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; } /* Korean breaks between words */
html:lang(ja) { line-break: strict; } /* Japanese: kinsoku, never 。 at a line start */
button { font: inherit; color: inherit; touch-action: manipulation; }
.screen { min-height: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch;
  padding: calc(14px + var(--safe-t)) 16px calc(18px + var(--safe-b)); }
.kicker { margin: 0; font: 700 10.5px var(--mono); letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
.mute { position: fixed; z-index: 40; top: calc(10px + var(--safe-t)); right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: #eef1f8; display: grid; place-items: center; padding: 0; }
.mute svg { width: 20px; height: 20px; }
.go { min-height: 56px; border: 0; border-radius: 14px; background: linear-gradient(180deg, var(--up-hi), var(--up)); color: #04140c; font: 900 18px var(--sys); box-shadow: 0 10px 26px rgba(25,194,123,.35); cursor: pointer; }
.go:active { transform: scale(.98); }
.ghost { min-height: 48px; border-radius: 14px; border: 1.5px solid var(--pline); background: var(--card); color: var(--ink); font-weight: 700; cursor: pointer; }
.fine { margin: 0; font-size: 12px; color: var(--dim); }

/* 1 · the offer letter */
.hook { gap: 12px; }
.hook h1 { margin: 0; padding-right: 44px; font: 900 clamp(28px, 8.6vw, 38px)/1.02 var(--sys); letter-spacing: -.02em; color: var(--up-hi); text-wrap: balance; }
:lang(ja) .hook h1, :lang(ko) .hook h1, :lang(th) .hook h1 { letter-spacing: 0; }
.hook-room { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 11; background: var(--night); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.hook-room > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; display: block; }
.hook-nao { position: absolute; left: 10px; bottom: 10px; width: 30%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.tag { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,.92); color: var(--ink); font: 800 11px var(--mono); letter-spacing: .08em; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.legend li { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.legend img { width: 38px; height: 38px; object-fit: contain; }
.legend i { width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: var(--c) transparent transparent; }
.legend span { font: 800 10px/1.15 var(--sys); text-align: center; color: #eef1f8; }
.welcome { margin: 0; display: grid; gap: 3px; font-size: 15px; }
.welcome b { font: 800 12px var(--mono); letter-spacing: .1em; color: var(--dim); }
.welcome strong { font-size: 17px; color: var(--up-hi); }
.welcome .warn { color: #ffb4b6; font-size: 14px; }
.friend { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(245,179,1,.14); border: 1px solid rgba(245,179,1,.5); font-weight: 700; }

/* 2 · the night */
.game { padding: 0; gap: 0; height: 100dvh; min-height: 0; overflow: hidden; user-select: none; -webkit-user-select: none; }
.dash { padding: calc(8px + var(--safe-t)) 16px 6px; background: linear-gradient(180deg, #070b18, rgba(7,11,24,.6)); }
.dash-top { display: flex; justify-content: space-between; gap: 8px; padding-right: 48px; font: 700 9.5px var(--mono); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.dash-top span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clock { flex: none; color: #eef1f8; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.num-row { display: flex; align-items: baseline; gap: 8px; min-height: 48px; }
.num { font: 900 clamp(38px, 12vw, 54px)/1 var(--sys); letter-spacing: -.03em; color: var(--up-hi); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(62,224,154,.35); }
.num.pop { animation: pop .35s ease-out; }
.num.drop { color: var(--alarm); animation: shake .35s; }
@keyframes pop { 30% { transform: scale(1.08); } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.combo { padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #1a1200; font: 900 11px var(--mono); letter-spacing: .06em; align-self: center; }
.gain { margin-left: auto; color: var(--up-hi); font: 800 13px var(--mono); font-variant-numeric: tabular-nums; }
.dash-sub { display: flex; align-items: center; gap: 8px; min-height: 20px; font: 700 9.5px var(--mono); letter-spacing: .14em; color: var(--dim); }
.rank { color: var(--gold); }
.stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.board { position: relative; height: 100%; max-width: 100%; aspect-ratio: 864 / 1184; overflow: hidden; }
.room { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cam { position: absolute; left: 3%; top: 2%; width: 30%; aspect-ratio: 1; border-radius: 12px; overflow: visible; z-index: 3; }
.cam img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 8px 20px rgba(0,0,0,.55); display: block; }
.live { position: absolute; left: 6px; top: 6px; display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; font: 800 8.5px var(--mono); letter-spacing: .1em; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--alarm); animation: live 1.2s infinite; }
@keyframes live { 50% { opacity: .2; } }
.cam-say { position: absolute; left: 0; top: calc(100% + 6px); width: 190%; margin: 0; padding: 7px 10px; border-radius: 4px 12px 12px 12px; background: #fff; color: var(--ink); font: 800 12.5px/1.3 var(--sys); box-shadow: 0 8px 20px rgba(0,0,0,.45); animation: sayIn .25s ease-out; }
@keyframes sayIn { from { transform: translateY(-6px); opacity: 0; } }

/* the escapes: a painted thing at its place, a closing ring in its colour, and what she is doing */
.escapes { position: absolute; inset: 0; z-index: 2; }
.esc { position: absolute; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; cursor: pointer; animation: escIn .35s cubic-bezier(.2,1.5,.4,1); }
.esc::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent) 0%, transparent 68%); animation: glow 1.1s ease-in-out infinite; }
.esc svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.esc .track { fill: rgba(7,11,24,.55); stroke: rgba(255,255,255,.18); stroke-width: 7; }
.esc .ring { fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px var(--c)); }
.esc img { position: relative; width: 70%; height: 70%; object-fit: contain; animation: bob 1.2s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.esc b { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; padding: 3px 8px; border-radius: 999px; background: var(--c); color: #0b1022; font: 900 10.5px/1.2 var(--sys); white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.esc-moon b { top: auto; bottom: 100%; margin: 0 0 4px; }
.esc.late .ring { animation: late .3s ease-in-out infinite alternate; }
.esc.hover { transform: translate(-50%, -50%) scale(1.18); }
.esc.hit { pointer-events: none; animation: suck .5s ease-in forwards; }
.esc.free { pointer-events: none; animation: free .65s ease-out forwards; }
.esc.free::before { background: radial-gradient(circle, rgba(255,236,170,.9), transparent 70%); }
@keyframes escIn { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
@keyframes glow { 50% { opacity: .55; } }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes late { to { stroke: #fff; } }
@keyframes suck { 40% { transform: translate(-50%, -50%) scale(1.25); } to { transform: translate(-50%, -50%) scale(0) rotate(160deg); opacity: 0; } }
@keyframes free { 30% { transform: translate(-50%, -50%) scale(1.35); } to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }

/* frog ads: painted stickers with a Sponsored line and a tiny close button */
.ads { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ad { position: absolute; width: 28%; padding: 6px 6px 8px; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 10px 24px rgba(0,0,0,.5); transform: rotate(var(--r, 0deg)); animation: adIn .38s cubic-bezier(.2,1.6,.4,1) both; pointer-events: auto; }
.ad img { display: block; width: 66%; margin: 0 auto -2px; }
.ad small { display: block; font: 700 8.5px var(--mono); letter-spacing: .08em; color: var(--pdim); text-transform: uppercase; }
.ad span { display: block; font: 900 11px/1.2 var(--sys); }
.ad .x { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #2b3245; box-shadow: 0 3px 8px rgba(0,0,0,.4); cursor: pointer; }
.ad .x::before, .ad .x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; background: #fff; transform: rotate(45deg); border-radius: 1px; }
.ad .x::after { transform: rotate(-45deg); }
@keyframes adIn { from { transform: translateY(-30px) scale(2) rotate(calc(var(--r, 0deg) - 18deg)); opacity: 0; } }
.banner { position: absolute; z-index: 6; left: 50%; top: 40%; transform: translateX(-50%); width: max-content; max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(7,11,24,.92); border: 1px solid var(--gold); color: var(--gold); font: 900 12.5px/1.3 var(--mono); letter-spacing: .06em; text-align: center; animation: sayIn .25s ease-out; }
.banner.bad { background: var(--alarm); border-color: #fff; color: #fff; font-size: 16px; }
.confetti { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }
.did { position: absolute; left: 12px; right: 12px; bottom: 8px; z-index: 6; margin: 0; padding: 7px 12px; border-radius: 10px; background: rgba(7,11,24,.86); color: #eef1f8; font: 700 12.5px/1.3 var(--sys); text-align: center; min-height: 0; }
.did:empty { display: none; }
.did.bad { background: rgba(245,179,1,.92); color: #1a1200; }

/* the hand: five lever cards in their colours */
.hand { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px 10px calc(10px + var(--safe-b)); background: linear-gradient(0deg, #070b18, rgba(7,11,24,.85)); }
.card { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px 7px; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); cursor: grab; touch-action: none; transition: transform .15s, box-shadow .15s; }
.card img { width: min(13vw, 54px); height: min(13vw, 54px); object-fit: contain; pointer-events: none; }
.card span { font: 900 10px/1.1 var(--sys); text-align: center; pointer-events: none; }
.card.sel { transform: translateY(-8px); box-shadow: 0 0 0 2px var(--c), 0 10px 22px rgba(0,0,0,.5); }
.card.hint { animation: hint .8s ease-in-out infinite; }
.card.lifted { opacity: .35; }
.card.nope { animation: nope .4s; border-color: var(--alarm); }
.card.dealt { animation: dealt .45s cubic-bezier(.2,1.5,.4,1) both; }
.card.ghost { position: fixed; z-index: 50; width: 74px; transform: translate(-50%, -60%) scale(1.15) rotate(-6deg); pointer-events: none; box-shadow: 0 16px 30px rgba(0,0,0,.6), 0 0 0 2px var(--c); background: #1a2140; }
body.aiming .esc .track { stroke: rgba(255,255,255,.75); stroke-dasharray: 4 6; }
@keyframes hint { 50% { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--c), 0 0 18px var(--c); } }
@keyframes nope { 20% { transform: translateX(-6px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(3deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes dealt { from { transform: translateY(40px) rotate(12deg); opacity: 0; } }

/* 3 · the reveal */
.reveal { justify-content: center; text-align: center; gap: 8px; position: relative; background: var(--paper); color: var(--ink); max-width: none; }
.reveal p { margin: 0; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.reveal p.on { opacity: 1; transform: none; }
.r-hit { font: 900 clamp(54px, 17vw, 88px)/1 var(--sys); letter-spacing: -.03em; color: #0c9f62; font-variant-numeric: tabular-nums; }
.r-board { font: 800 12px var(--mono); letter-spacing: .2em; color: #c9a227; }
.r-was { margin-top: 26px !important; font: 700 12px var(--mono); letter-spacing: .2em; color: var(--pdim); }
.r-unit { font: 900 clamp(24px, 7vw, 32px)/1.15 var(--sys); text-wrap: balance; }
.r-years { font-size: 16px; color: var(--pdim); }
.r-rev { margin-top: 18px !important; font: 900 clamp(30px, 9vw, 40px)/1 var(--sys); color: #e5484d; }
.r-line { margin-top: 18px !important; font-size: 17px; font-weight: 700; max-width: 22em; align-self: center; }
.reveal .confetti { position: absolute; }

/* 4 · the performance review */
.end { gap: 12px; background: var(--paper); color: var(--ink); max-width: none; }
.end > * { width: 100%; max-width: 448px; margin-left: auto; margin-right: auto; }
.end .kicker { color: var(--pdim); }
.end-room { margin: calc(-14px - var(--safe-t)) -16px 0; width: calc(100% + 32px); max-width: 480px; align-self: center; aspect-ratio: 1184 / 864; overflow: hidden; }
.end-room img { width: 100%; height: 100%; object-fit: cover; display: block; animation: heroIn 1.2s ease-out both; }
@keyframes heroIn { from { transform: scale(1.1); filter: brightness(.5); } }
.verdict { margin: 0; font: 900 clamp(30px, 9vw, 40px)/1.05 var(--sys); letter-spacing: -.02em; color: #0c9f62; text-wrap: balance; }
.verdict.fired { color: #e5484d; }
.verdict.probation { color: #c9a227; }
.end-sub { margin: 0; font-weight: 700; }
.review { background: var(--card); border: 1px solid var(--pline); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.review h3, .rc h3 { margin: 0; font: 800 11px var(--mono); letter-spacing: .16em; color: var(--pdim); }
.review ul { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; }
.interest { margin: 4px 0 0; font: 800 13px var(--mono); letter-spacing: .06em; color: #0c9f62; }
.cmp { margin: 0; font-weight: 700; color: #c9a227; }
.actions { display: grid; gap: 8px; }
.actions .go { color: #fff; background: linear-gradient(180deg, #19c27b, #0c9f62); }
.rc { display: grid; gap: 8px; padding-top: 6px; }
.rc > p { margin: 0; color: var(--pdim); }
.rc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rc li { background: var(--card); border: 1px solid var(--pline); border-left: 4px solid #e5484d; border-radius: 10px; padding: 10px 12px; }
.rc li b { display: block; font: 800 12px var(--mono); letter-spacing: .1em; }
.rc li p { margin: 4px 0; }
.rc li a { font-size: 12px; color: var(--pdim); }
.door { display: block; padding: 14px; border-radius: 14px; background: var(--warm); color: #f6e8d6; text-decoration: none; font-weight: 800; text-align: center; }
.end .fine { color: var(--pdim); }

/* v3 · the Neuro-Lab: the board's quota and her awareness, side by side */
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 4px; }
.meter span { display: flex; justify-content: space-between; gap: 6px; font: 800 9px/1.2 var(--mono); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.meter span b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter em { font-style: normal; color: #eef1f8; font-variant-numeric: tabular-nums; }
.meter i { display: block; height: 7px; margin-top: 3px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.meter s { display: block; height: 100%; width: 0; border-radius: 4px; text-decoration: none; transition: width .25s; }
.quota s { background: linear-gradient(90deg, #0c9f62, var(--up-hi)); }
.quota.met span b { color: var(--up-hi); }
.quota em { color: var(--alarm); }
.aware s { background: linear-gradient(90deg, #f5b301, #ff7a1a 60%, var(--alarm)); }
.aware.hot span b, .aware.hot em { color: var(--alarm); }
.aware.hot i { animation: hot .6s ease-in-out infinite alternate; }
@keyframes hot { to { box-shadow: 0 0 10px rgba(255,90,95,.7); } }
.cam.hot img { border-color: var(--alarm); box-shadow: 0 0 0 3px rgba(255,90,95,.45), 0 8px 20px rgba(0,0,0,.55); }
.owned { margin-left: auto; display: flex; gap: 4px; }
.owned img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.banner.warn { border-color: var(--alarm); color: #ffb4b6; }
.banner.gold { background: var(--gold); border-color: #fff; color: #1a1200; font-size: 16px; }
.card.wild[data-lever="notify"] { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(245,179,1,.5); }

/* Dr. Kevin's lab notes */
.note { position: absolute; z-index: 6; left: 3%; bottom: 13%; width: 70%; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.note img { flex: none; width: 26%; filter: drop-shadow(0 6px 12px rgba(0,0,0,.6)); }
.note p { margin: 0 0 12% 0; padding: 7px 10px; border-radius: 12px 12px 12px 3px; background: #fff; color: var(--ink); font: 700 11.5px/1.3 var(--sys); box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.note.in { animation: noteIn .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes noteIn { from { transform: translateY(16px); opacity: 0; } }

/* the board meeting, between shifts */
.mtg { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-rows: auto 1fr; background: rgba(7,11,24,.94); animation: sayIn .3s ease-out; }
.mtg img { width: 100%; max-height: 46vh; object-fit: cover; display: block; }
.mtg > div { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 18px 16px; text-align: center; }
.mtg-t { margin: 0; font: 800 12px var(--mono); letter-spacing: .18em; color: var(--dim); }
.mtg-v { margin: 0; padding: 10px 16px; border-radius: 10px; font: 900 clamp(22px, 7vw, 32px)/1.1 var(--sys); transform: rotate(-3deg); animation: stampIn .35s cubic-bezier(.5,0,.7,.4) both .2s; }
.mtg.pass .mtg-v { color: var(--up-hi); border: 3px solid var(--up-hi); }
.mtg.fail .mtg-v { color: var(--alarm); border: 3px solid var(--alarm); }
.mtg-n { margin: 0; font: 800 15px var(--mono); color: #eef1f8; font-variant-numeric: tabular-nums; }
@keyframes stampIn { from { transform: scale(2.4) rotate(-14deg); opacity: 0; } }

/* Dr. Kevin's experiments: pick one */
.rnd { position: fixed; inset: 0; z-index: 31; overflow-y: auto; padding: calc(16px + var(--safe-t)) 14px calc(16px + var(--safe-b)); background: linear-gradient(180deg, #f6f8fb, #e9eef6); color: var(--ink); animation: sayIn .3s ease-out; }
.rnd-head { display: flex; align-items: flex-end; gap: 10px; max-width: 460px; margin: 0 auto 10px; }
.rnd-head img { width: 30%; max-width: 130px; }
.rnd-t { margin: 0; font: 900 clamp(20px, 6vw, 26px)/1.1 var(--sys); color: #0b1022; }
.rnd-by { margin: 2px 0 0; font: 700 11px var(--mono); color: var(--pdim); }
.rnd-s { margin: 6px 0 0; font: 600 13px var(--sys); color: var(--pdim); }
.rnd-cards { display: grid; gap: 10px; max-width: 460px; margin: 0 auto; }
.perk { display: grid; grid-template-columns: 74px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #d6dde8; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(11,16,34,.08); color: var(--ink); text-align: left; cursor: pointer; animation: dealt .4s cubic-bezier(.2,1.5,.4,1) both; }
.perk:nth-child(2) { animation-delay: .07s; } .perk:nth-child(3) { animation-delay: .14s; }
.perk:active { transform: scale(.98); }
.perk img { grid-row: 1 / 4; width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.perk b { font: 900 16px/1.15 var(--sys); }
.perk span { font: 600 13px/1.3 var(--sys); color: #2b3245; }
.perk small { font: italic 500 10.5px/1.3 var(--sys); color: var(--pdim); }

/* Codex art (10-02): her nice moment fills the camera; the lab behind Dr. Kevin's experiments */
.cam { transition: width .35s cubic-bezier(.2,1.3,.4,1), left .35s, top .35s; }
.cam.moment { z-index: 7; left: 12%; top: 18%; width: 76%; }
.cam.moment img { border-color: #ffe8a3; box-shadow: 0 0 0 4px rgba(255,232,163,.45), 0 0 40px rgba(255,214,120,.55), 0 14px 30px rgba(0,0,0,.6); }
.cam.moment .live { opacity: 0; }
.rnd { background: linear-gradient(180deg, rgba(246,248,251,.55) 0%, rgba(246,248,251,.9) 34%, #eef2f8 60%), url(./art/lab.webp) top center / 100% auto no-repeat, #eef2f8; }
.hook-room > img:first-child { object-position: 50% 62%; }
@media (prefers-reduced-motion: reduce) { .esc, .esc img, .esc::before, .esc .ring, .card.hint, .ad, .num.pop, .num.drop, .end-room img, .live i, .note.in, .mtg, .mtg-v, .rnd, .perk, .aware.hot i { animation: none !important; } .cam { transition: none; } .reveal p { transition: none; } }