/* IM Fell English SC (SIL Open Font License), latin subset, hosted here so the page makes no outside requests. */
@font-face { font-family:'IM Fell English SC'; font-style:normal; font-weight:400; font-display:swap; src:url(vendor/fonts/im-fell-english-sc.woff2) format('woff2'); }
:root {
  /* One dark look on purpose: a lamp-lit room at night. */
  --bg:#07080a; --panel:rgba(20,22,27,.92); --ink:#eceae4; --dim:#a8a59c; --accent:#e0b85a; --focus:#7fd0ff;
  --display:'IM Fell English SC', 'Iowan Old Style', Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--ink); font:16px/1.45 system-ui, sans-serif; }
[hidden] { display:none !important; }
#scene { position:fixed; inset:0; width:100%; height:100%; display:block; }
button, .button { font:inherit; color:inherit; background:#1a1d24; border:1px solid #3a3f4b; border-radius:6px; padding:.5rem 1rem; cursor:pointer; text-decoration:none; text-align:center; }
button:hover, .button:hover { border-color:var(--accent); }
button[aria-pressed="true"] { border-color:var(--accent); background:#3a3320; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
a { color:var(--accent); }
h1, h2 { font-family:var(--display); font-weight:400; letter-spacing:.03em; margin:0; text-wrap:balance; }
h1 { font-size:4rem; }
h2 { font-size:1.8rem; }
.dim { color:var(--dim); }

.overlay { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:safe center; gap:1rem; padding:16px; text-align:center; background:rgba(4,5,7,.72); backdrop-filter:blur(3px); z-index:5; overflow-y:auto; }
/* Content scrolls when the window is short, instead of squeezing blocks on top of each other. */
.overlay > * { flex-shrink:0; }
.pause-grid { display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:center; align-items:flex-start; }
#menu { background:radial-gradient(ellipse at 50% 40%, rgba(40,32,22,.55), rgba(4,5,7,.92)); }
.sub { margin:0; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; }
.stack { display:flex; flex-direction:column; gap:.6rem; min-width:14rem; }
.confirm { display:flex; flex-direction:column; gap:.5rem; align-items:center; background:var(--panel); border:1px solid var(--accent); border-radius:8px; padding:.8rem 1rem; }
.confirm p { margin:0; }
.controls { display:grid; grid-template-columns:auto auto; gap:.3rem 1.2rem; text-align:left; margin:0; }
.controls dt { color:var(--dim); }
.controls dd { margin:0; }

/* HUD */
#hud { position:fixed; inset:0; pointer-events:none; z-index:2; }
#reticle { position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:rgba(255,255,255,.75); box-shadow:0 0 0 1px rgba(0,0,0,.5); transition:all .12s; }
#reticle[data-icon="hand"], #reticle[data-icon="eye"], #reticle[data-icon="use"] { width:26px; height:26px; margin:-13px 0 0 -13px; background:none; border:2px solid var(--accent); box-shadow:0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.4); }
#reticle[data-icon="eye"] { border-radius:50% 0; transform:rotate(45deg); border-color:#cfd8e6; }
#reticle[data-icon="use"] { border-style:dashed; border-color:var(--focus); }
@media (prefers-reduced-motion: reduce) { #reticle { transition:none; } }
#target-label { position:absolute; left:50%; top:calc(50% + 28px); transform:translateX(-50%); text-align:center; background:rgba(0,0,0,.55); padding:.25rem .7rem; border-radius:6px; white-space:nowrap; }
#target-label b { display:block; font-weight:600; }
#target-label span { font-size:.8rem; color:var(--dim); }
#say { position:absolute; left:50%; bottom:5.5rem; transform:translateX(-50%); width:min(40rem, calc(100% - 32px)); margin:0; background:var(--panel); padding:.7rem 1rem; border-radius:8px; text-align:center; }
/* "Picked up: Key" for two seconds. Sits above the text box so both can show at once. */
#pickup { position:fixed; z-index:6; left:50%; top:1rem; transform:translateX(-50%); margin:0; padding:.5rem 1.1rem; border:1px solid var(--accent); border-radius:999px; background:var(--panel); color:var(--ink); font-weight:600; letter-spacing:.02em; text-align:center; max-width:calc(100% - 32px); animation:pickup-in .18s ease-out; }
#pickup b { color:var(--accent); font-weight:600; margin-right:.4rem; }
@keyframes pickup-in { from { opacity:0; transform:translate(-50%, -6px); } to { opacity:1; transform:translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { #pickup { animation:none; } }
.tip { display:block; margin-top:.3rem; color:var(--accent); font-size:.9rem; }
#hotbar { position:absolute; left:50%; bottom:1rem; transform:translateX(-50%); display:flex; gap:.4rem; list-style:none; margin:0; padding:0; max-width:calc(100% - 32px); flex-wrap:wrap; justify-content:center; }
#hotbar li { background:var(--panel); border:1px solid #3a3f4b; border-radius:6px; padding:.3rem .6rem; font-size:.85rem; }
#hotbar li.sel { border-color:var(--accent); background:#3a3320; }
#hotbar kbd { color:var(--accent); margin-right:.4rem; font:600 .75rem ui-monospace, monospace; }

/* Panels */
.panel .card { background:var(--panel); border:1px solid #3a3f4b; border-radius:10px; padding:1.2rem; width:min(34rem, 100%); max-height:calc(100% - 32px); overflow:auto; display:flex; flex-direction:column; gap:.8rem; text-align:left; }
.inspect-canvas { width:100%; aspect-ratio:4/3; max-width:100%; display:block; border-radius:8px; background:radial-gradient(circle at 50% 45%, #2b2620, #0d0e11); cursor:grab; touch-action:none; }
.inspect p { margin:.4rem 0 0; }
.hint-text { font-size:1.1rem; }
.entry { border-left:3px solid var(--accent); padding:.1rem .7rem; margin:.3rem 0; }
.entry b { display:block; }
/* Journal: clues grouped by the puzzle they are for */
.clue-group { border:1px solid #3a3f4b; border-radius:6px; padding:.5rem .8rem; margin:.6rem 0; }
.clue-group > .group-title, .clue-group > summary { display:block; color:var(--accent); font-size:.95rem; margin-bottom:.2rem; }
.clue-group > summary { cursor:pointer; margin-bottom:0; }
.clue-group > summary .group-title { display:inline; }
.clue-group.done { opacity:.7; }
.clue-group[open] > summary { margin-bottom:.3rem; }
.inv { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.inv li { display:flex; gap:.4rem; flex-wrap:wrap; }
.inv li button:first-child { flex:1; text-align:left; }
#fps { position:absolute; top:8px; right:12px; margin:0; font:12px ui-monospace, monospace; color:var(--dim); background:rgba(0,0,0,.5); padding:.15rem .4rem; border-radius:4px; }
.sens { display:flex; flex-direction:column; gap:.3rem; align-items:center; }
.sens input { width:14rem; accent-color:var(--accent); }
.settings { display:flex; flex-direction:column; gap:.7rem; align-items:center; background:var(--panel); border:1px solid #3a3f4b; border-radius:8px; padding:.9rem 1.1rem; }
.settings fieldset { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; text-align:left; }
.settings legend { color:var(--dim); margin-bottom:.3rem; }
.settings .dim { margin:0; font-size:.8rem; }
.settings input[type="checkbox"], .settings input[type="radio"] { accent-color:var(--accent); }

/* Talking to someone: a speech-bubble reticle */
#reticle[data-icon="talk"] { width:28px; height:22px; margin:-11px 0 0 -14px; background:none; border:2px solid #cfe3c8; border-radius:10px 10px 10px 2px; box-shadow:0 0 0 1px rgba(0,0,0,.4); }

/* Room-to-room fade */
#fade { position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .18s; z-index:4; }
#fade.on { opacity:1; }

/* Lock dials */
.dials { display:flex; gap:1rem; justify-content:center; margin:.4rem 0; }
.dial { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.4rem; border-radius:8px; border:1px solid transparent; }
.dial.cur { border-color:var(--accent); }
.dial-sym { font-size:1.6rem; }
.dial-value { touch-action:none; cursor:ns-resize; font:600 2.2rem/1 ui-monospace, monospace; min-width:2ch; text-align:center; font-variant-numeric:tabular-nums; }
.dial button { padding:.2rem .8rem; }
button.primary { border-color:var(--accent); background:#3a3320; }
.map { display:flex; flex-direction:column; gap:.4rem; }
.map button { text-align:left; }

/* End screen (shared with the 2D game) */
.end { justify-content:safe center; background:rgba(8,9,12,.9); }
.end h1 { font-size:3rem; }
.stats { border-collapse:collapse; font-size:.9rem; }
.stats th, .stats td { padding:.25rem .8rem; text-align:left; border-bottom:1px solid #2b2f3a; }
.stats th { color:var(--dim); font-weight:500; }
.feedback { display:flex; flex-direction:column; gap:.8rem; text-align:left; width:min(32rem, 100%); background:var(--panel); padding:1rem; border-radius:8px; }
.feedback h2 { font-size:1.3rem; }
.feedback fieldset { border:0; padding:0; margin:0; display:flex; gap:1rem; flex-wrap:wrap; }
.feedback legend { margin-bottom:.4rem; width:100%; }
.feedback textarea { display:block; width:100%; margin-top:.3rem; font:inherit; background:#0f1115; color:var(--ink); border:1px solid #3a3f4b; border-radius:6px; padding:.4rem; }
.end-actions { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.privacy { color:var(--dim); font-size:.85rem; max-width:34rem; }
.log-text { width:min(32rem, 100%); font:12px/1.4 ui-monospace, monospace; background:var(--panel); color:var(--ink); border:1px solid #3a3f4b; border-radius:6px; }

/* In the inventory, items that combine with the picked one */
.inv button.partner { border-color:var(--focus); box-shadow:0 0 0 1px var(--focus); }

/* Timer and controls legend */
#timer { position:absolute; top:10px; left:12px; margin:0; font:600 1.05rem ui-monospace, monospace; font-variant-numeric:tabular-nums; color:var(--ink); background:rgba(0,0,0,.55); padding:.2rem .6rem; border-radius:6px; }
#controls { position:absolute; top:46px; left:12px; width:min(17.5rem, calc(100vw - 24px)); max-height:calc(100% - 140px); overflow:hidden; background:rgba(8,9,12,.62); border-radius:8px; padding:.5rem .7rem; font-size:.78rem; line-height:1.35; }
#controls h2 { font:600 .7rem/1 system-ui, sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin:0 0 .4rem; }
#controls kbd { margin-left:.3rem; padding:0 .3rem; border:1px solid #3a3f4b; border-radius:3px; font:600 .7rem ui-monospace, monospace; color:var(--accent); }
#controls dl { display:grid; grid-template-columns:auto 1fr; gap:.12rem .7rem; margin:0; }
#controls dt { color:var(--dim); white-space:nowrap; }
#controls dd { margin:0; text-align:right; color:var(--ink); }
.end-time-label { display:block; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
#end-time { margin:0; text-align:center; }
#end-time strong { font:600 2.4rem/1.1 ui-monospace, monospace; font-variant-numeric:tabular-nums; }

/* Chapter list on the start screens */
.chapters { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; width:min(32rem, 100%); }
.chapter-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:var(--panel); border:1px solid #2b2f3a; border-radius:8px; padding:.7rem .9rem; text-align:left; }
.chapter-info { flex:1 1 12rem; min-width:0; }
.chapter-info h2 { font-family:var(--display); font-weight:400; font-size:1.4rem; margin:0; letter-spacing:.02em; }
.chapter-info .done { color:var(--accent); }
.chapter-blurb { margin:.1rem 0 0; color:var(--dim); font-size:.85rem; }
.chapter-buttons { display:flex; gap:.5rem; }

/* Shown when the browser has the mouse and a click will give it back */
#lock-hint { position:absolute; top:10px; left:50%; transform:translateX(-50%); margin:0; background:rgba(0,0,0,.7); border:1px solid var(--accent); padding:.35rem .9rem; border-radius:6px; pointer-events:none; }
.reading-text { font-size:1.15rem; line-height:1.5; margin:.2rem 0; }
.reading .dim { margin:.2rem 0 0; font-size:.85rem; }

/* Lock panel: what is written on the lock, and a label under each dial */
.plate { font-style:italic; color:var(--ink); margin:0 0 .6rem; padding:.5rem .7rem; background:rgba(184,146,62,.12); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; }
.dial-name { font-size:.7rem; color:var(--dim); max-width:5.5rem; text-align:center; line-height:1.15; }

/* Journal: open leads */
.leads-box { border:1px solid var(--accent); border-radius:6px; padding:.5rem .8rem; margin-bottom:.8rem; }
.leads { list-style:none; margin:.3rem 0 0; padding:0; }
.leads li { margin:.35rem 0; padding-left:.6rem; border-left:3px solid var(--accent); }
.leads li.waiting { opacity:.75; border-left-color:#6b7280; }
.leads small { display:block; }

/* Blurb shown while the controls list is closed */
#controls-hint { position:absolute; top:46px; left:12px; margin:0; padding:.25rem .6rem; font-size:.78rem; color:var(--dim); background:rgba(8,9,12,.55); border-radius:6px; pointer-events:none; }
#controls-hint kbd { padding:0 .3rem; border:1px solid #3a3f4b; border-radius:3px; font:600 .7rem ui-monospace, monospace; color:var(--accent); }

/* The countdown: red in the last minute, and a plus sign once time has run out. */
#timer.low { color:#ff8a7a; }
#timer.over { color:var(--dim); }

/* The IQ slider shown before a chapter starts. */
.iq-pick { width:min(30rem, 100%); display:flex; flex-direction:column; gap:.4rem; }
.iq-pick input[type="range"] { width:100%; accent-color:var(--accent); }
.iq-ticks { display:flex; justify-content:space-between; list-style:none; margin:0; padding:0; font-size:.85rem; color:var(--dim); }
.iq-ticks li.on { color:var(--accent); font-weight:600; }
#iq-readout { margin:0; font:1.3rem var(--display); }
.iq-buttons { display:flex; gap:.6rem; }

/* ---- Touch screens (html.touch, set by game.js): on-screen controls instead of mouse and keyboard ---- */
#stick, #touch-bar { display:none; }
html.touch { overscroll-behavior:none; }
html.touch body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
html.touch #scene { touch-action:none; }
html.touch #reticle, html.touch #target-label, html.touch #controls, html.touch #controls-hint, html.touch #lock-hint { display:none !important; }
html.touch button, html.touch input[type="range"] { touch-action:manipulation; }
html.touch #stick { display:block; position:absolute; left:calc(22px + env(safe-area-inset-left)); bottom:calc(16px + env(safe-area-inset-bottom)); width:132px; height:132px; border-radius:50%; background:rgba(20,22,27,.45); border:2px solid rgba(224,184,90,.5); pointer-events:auto; touch-action:none; }
.stick-knob { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:rgba(224,184,90,.75); pointer-events:none; }
html.touch #touch-bar { display:flex; position:absolute; top:calc(8px + env(safe-area-inset-top)); right:calc(8px + env(safe-area-inset-right)); gap:.35rem; pointer-events:auto; flex-wrap:wrap; justify-content:flex-end; max-width:70%; }
.tbtn { min-width:44px; min-height:44px; padding:.3rem .75rem; font-size:.85rem; background:var(--panel); }
.tbtn.on { border-color:var(--accent); background:#3a3320; }
html.touch #hotbar { pointer-events:auto; bottom:calc(10px + env(safe-area-inset-bottom)); max-width:calc(100% - 340px); }
/* Items are one row you swipe sideways, so more of them never push the text box out of sight. The edges fade to show there is more. */
html.touch #hotbar { flex-wrap:nowrap; justify-content:safe center; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; padding:2px 14px; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
html.touch #hotbar::-webkit-scrollbar { display:none; }
html.touch #hotbar li { flex:0 0 auto; scroll-snap-align:center; white-space:nowrap; }
html.touch #hotbar li { min-height:44px; display:flex; align-items:center; padding:.4rem .8rem; font-size:.9rem; touch-action:manipulation; }
html.touch #say { pointer-events:auto; bottom:calc(66px + env(safe-area-inset-bottom)); width:min(36rem, calc(100% - 340px)); font-size:.95rem; }
.tap-ring { position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; border:2px solid var(--accent); pointer-events:none; animation:tap-ring .4s ease-out forwards; }
@keyframes tap-ring { from { transform:scale(.4); opacity:1; } to { transform:scale(1.3); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .tap-ring { animation:none; opacity:.8; } }
html.touch .dial button, html.touch .inv button, html.touch .map button, html.touch #panel-close { min-height:44px; min-width:44px; }
html.touch .overlay h1 { font-size:2rem; }
/* The "Picked up" banner sits under the button bar so the two never cover each other. */
html.touch #pickup { top:calc(64px + env(safe-area-inset-top)); }
/* Held upright: buttons across the top in one row, the clock under them, the item bar and text box stacked above the stick. */
@media (orientation: portrait) {
  html.touch #touch-bar { left:calc(8px + env(safe-area-inset-left)); right:calc(8px + env(safe-area-inset-right)); max-width:none; flex-wrap:nowrap; }
  html.touch .tbtn { flex:1 1 0; min-width:0; padding:.3rem .2rem; font-size:.78rem; }
  html.touch #timer { top:calc(60px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)); }
  html.touch #pickup { top:calc(104px + env(safe-area-inset-top)); max-width:calc(100% - 24px); font-size:.9rem; padding:.4rem .9rem; }
  html.touch #hotbar { left:50%; max-width:calc(100% - 24px); bottom:calc(164px + env(safe-area-inset-bottom)); }
  html.touch #say { width:calc(100% - 24px); bottom:calc(222px + env(safe-area-inset-bottom)); max-height:28vh; overflow-y:auto; }
}

.sound-switch { color:var(--dim); cursor:pointer; }
.sound-switch input { accent-color:var(--accent); margin-right:.4rem; }

/* ---- The tutorial: welcome card, guided coach, reminders ---- */
#welcome { z-index: 8; }
.welcome-lead { max-width: 40rem; margin: 0; font-size: 1.05rem; line-height: 1.45; }
.welcome-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; width: min(52rem, 100%); }
.welcome-card { display: flex; gap: .7rem; text-align: left; background: var(--panel); border: 1px solid #3a3f4b; border-radius: 10px; padding: .7rem .9rem; align-items: flex-start; }
.welcome-card:last-child { grid-column: 1 / -1; }
.welcome-card b { color: var(--accent); font-size: 1.05rem; }
.welcome-card p { margin: .15rem 0 .4rem; line-height: 1.4; }
.welcome-icon { font-size: 1.8rem; line-height: 1; }
.welcome-keys { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
kbd { display: inline-block; min-width: 1.6em; text-align: center; padding: .1rem .5rem; border: 1px solid #5a606c; border-bottom-width: 3px; border-radius: 6px; background: #20242c; color: var(--ink); font: 700 .9rem ui-monospace, monospace; }
.welcome .iq-buttons { flex-wrap: wrap; justify-content: center; }
.welcome .iq-buttons button { font-size: 1.05rem; padding: .7rem 1.4rem; }
@media (max-width: 640px) { .welcome-cards { grid-template-columns: 1fr; } }

.coach { position: absolute; z-index: 3; top: 46px; right: 12px; width: min(23rem, 42vw); display: flex; flex-direction: column; gap: .4rem; text-align: left; background: rgba(14, 16, 21, .94); border: 2px solid var(--accent); border-radius: 12px; padding: .75rem .9rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); pointer-events: auto; }
.coach[hidden], .reminder[hidden] { display: none; }
.coach-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; color: var(--dim); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.coach-skip { padding: .15rem .6rem; font-size: .78rem; background: transparent; color: var(--dim); }
.coach-title { font-size: 1.15rem; color: var(--accent); }
.coach-text { margin: 0; font-size: 1.02rem; line-height: 1.4; }
.coach-keys { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; min-height: 0; }
.coach-keys:empty { display: none; }
.coach-extra { margin: 0; font-size: .95rem; color: #ffd98a; }
.coach-extra:empty { display: none; }
.coach-dots { display: flex; gap: .3rem; }
.coach-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: #3a3f4b; }
.coach-dots i.done { background: var(--accent); }
.coach-dots i.now { background: #fff; box-shadow: 0 0 0 3px rgba(224, 184, 90, .5); }
.coach.finish { border-color: #7fd49a; }
.coach.finish .coach-title { color: #7fd49a; }
.coach.level-1 .coach-keys kbd, .coach.level-2 .coach-keys kbd { animation: coach-pulse 1s ease-in-out infinite; }
.coach.level-2 { border-color: #ff9a5a; box-shadow: 0 0 0 4px rgba(255, 154, 90, .25), 0 6px 24px rgba(0, 0, 0, .5); }
@keyframes coach-pulse { 50% { transform: translateY(-3px); box-shadow: 0 0 12px rgba(224, 184, 90, .8); } }
.hand { font-size: 1.8rem; display: inline-block; }
.hand.drag { animation: hand-drag 1.6s ease-in-out infinite; }
.hand.stick { animation: hand-stick 1.6s ease-in-out infinite; }
.hand.tap { animation: hand-tap 1.1s ease-in-out infinite; }
.hand.hold { animation: hand-hold 1.6s ease-in-out infinite; }
@keyframes hand-drag { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(14px); } }
@keyframes hand-stick { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(-10px); } }
@keyframes hand-tap { 0%, 100% { transform: scale(1); } 50% { transform: scale(.8); } }
@keyframes hand-hold { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.85); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .hand, .coach kbd { animation: none !important; } }

.reminder { position: absolute; z-index: 3; top: 46px; right: 12px; width: min(23rem, 42vw); display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; background: rgba(14, 16, 21, .94); border: 2px solid var(--accent); border-radius: 12px; padding: .65rem .85rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); pointer-events: auto; line-height: 1.4; }
.reminder b { color: var(--accent); }
.reminder span { flex: 1 1 12rem; }

/* The "Press K" chip is bigger and pulses while a new player has not found the controls. */
#controls-hint.new { font-size: 1rem; padding: .4rem .8rem; border: 2px solid var(--accent); color: var(--ink); animation: unread-glow 1.4s ease-in-out infinite; }

html.touch .coach, html.touch .reminder { top: calc(56px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); right: auto; width: min(21rem, calc(100% - 360px)); padding: .55rem .75rem; gap: .3rem; }
html.touch .coach-text { font-size: .92rem; line-height: 1.3; }
html.touch .coach-title { font-size: 1.02rem; }
html.touch .coach-extra { font-size: .86rem; }
html.touch kbd { font-size: .8rem; padding: .05rem .4rem; }
@media (orientation: portrait) {
  html.touch .coach, html.touch .reminder { top: calc(100px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); width: auto; }
}

.start-here { display: inline-block; margin: .2rem 0; padding: .15rem .6rem; border-radius: 999px; background: var(--accent); color: #1a1405; font-size: .8rem; font-weight: 700; }
.chapter-row.start { border-color: var(--accent); }

.pickup-tip { display: block; margin-top: .25rem; font-size: .85rem; font-weight: 400; color: #ffd98a; }
.journal-chip { position: absolute; top: 12px; right: 12px; margin: 0; padding: .3rem .7rem; border: 1px solid #3a3f4b; border-radius: 6px; background: rgba(8, 9, 12, .65); font-size: .9rem; color: var(--dim); pointer-events: none; }
.journal-chip.unread { color: var(--ink); border: 2px solid var(--accent); animation: unread-glow 1.4s ease-in-out infinite; }
.tbtn.unread { border-color: var(--accent); background: #3a3320; animation: unread-glow 1.4s ease-in-out infinite; }
/* A glow, never movement: a button that moves is hard to tap (and to click in the browser checks). */
@keyframes unread-glow { 50% { box-shadow: 0 0 0 4px rgba(224, 184, 90, .55); } }
@media (prefers-reduced-motion: reduce) { .journal-chip.unread, .tbtn.unread { animation: none; } }
.welcome #welcome-skip { background: transparent; border-color: transparent; color: var(--dim); font-size: .9rem; text-decoration: underline; padding: .4rem .8rem; }
.welcome #welcome-go { font-size: 1.25rem; padding: .9rem 2rem; }

/* The "Picked up" banner (now taller, with a tip) floats over the picture and panels: it must never catch a tap or a swipe. */
#pickup { pointer-events: none; }

.pause-chapter { margin: 0; font-size: 1.15rem; color: var(--accent); letter-spacing: .04em; }
.end-top { margin: .4rem 0 .2rem; }
.end-top #btn-next { font-size: 1.15rem; padding: .8rem 1.6rem; }
.chapter-row.locked { opacity: .55; }

.ad-wait { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(8,10,14,.85); color: #e9e2cc; font-size: 1.1rem; text-align: center; padding: 1rem; }
.ad-wait[hidden] { display: none; }
.hints-left { font-weight: 600; }