/* Hold Frame (web). A port of the native SwiftUI app: values below mirror HoldFrameApp.swift, Puzzles.swift,
   CluePaper.swift, Atmosphere.swift and SettingsView.swift. The app is dark only, like the native app. */
:root {
  color-scheme: dark;
  --paper: #e8e5d6;        /* Color(0.91, 0.90, 0.84) */
  --signal: #d4ed8c;       /* Color(0.83, 0.93, 0.55), the app tint */
  --brass: #dbb86e;        /* DoorwayMark */
  --hub: #090b0b;          /* hub background (0.035, 0.045, 0.043) */
  --sheet: #0e1110;        /* notebook, clue reader, evidence (0.055, 0.065, 0.06) */
  --store: #0b0b0b;        /* store sheet (white 0.045) */
  --clue: #f0e6cc;         /* clue paper (0.94, 0.90, 0.80) */
  --clue-fold: #c4b89c;    /* folded corner (0.77, 0.72, 0.61) */
  --ink: #2b2620;          /* clue ink (0.17, 0.15, 0.12) */
  --secondary: rgba(235, 235, 245, .6);
  --grouped: #000;         /* iOS dark grouped background */
  --cell: #1c1c1e;
  --sep: rgba(84, 84, 88, .6);
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--hub); }
body { color: var(--paper); font: 17px/1.29 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
noscript { display: block; padding: 40px 24px; font-family: var(--serif); }

/* ---------- FrameButton ---------- */
.fb {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 8px 0;
  font-size: 17px; font-weight: 500; color: var(--paper); background: rgba(0, 0, 0, .9);
  box-shadow: inset 0 0 0 1px rgba(232, 229, 214, .35); text-align: center;
}
.fb.primary { color: #000; background: var(--signal); box-shadow: none; }
.fb:active:not(:disabled) { opacity: .7; }
.fb:disabled { opacity: .45; }
.fb.row { justify-content: space-between; padding: 8px 14px; text-align: left; }
.fb.row span { flex: 1; }

/* ---------- Hub ---------- */
.hub { max-width: 560px; margin: 0 auto; padding: calc(10px + var(--top)) 24px calc(var(--bottom)); }
.hub > * + * { margin-top: 26px; }
.hub-head { display: flex; align-items: center; justify-content: space-between; }
.hub-brand { display: flex; align-items: center; gap: 9px; font: 600 14px var(--mono); letter-spacing: 3px; }
.hub-brand svg { width: 18px; height: 23px; }
.hub-set { width: 44px; height: 44px; display: grid; place-items: center; color: var(--paper); font-size: 19px; margin-right: -10px; }
.hub-hero h1 { margin: 0; font: 400 46px/1.02 var(--serif); letter-spacing: -.2px; }
.hub-hero p { margin: 9px 0 0; font-size: 15px; color: rgba(232, 229, 214, .58); }
.feature { position: relative; display: block; width: 100%; height: 380px; overflow: hidden; text-align: left; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.feature .img, .row-ep .img, .store-cover { background: linear-gradient(#333, #000) center / cover no-repeat; }
.feature .img { position: absolute; inset: 0; }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .95)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.feature-body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 22px; }
.feature-top { display: flex; justify-content: space-between; font: 11px var(--mono); letter-spacing: 1px; }
.feature-body h2 { margin: auto 0 0; font: 400 38px/1.1 var(--serif); }
.feature-body .sub { margin-top: 12px; font-size: 15px; color: rgba(232, 229, 214, .75); }
.feature-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; color: var(--signal); }
.feature-cta b { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.feature-cta small { font: 10px var(--mono); }
.hub-sec { display: flex; justify-content: space-between; font: 10px var(--mono); color: rgba(232, 229, 214, .5); }
.hub-sec span:first-child { letter-spacing: 2px; }
.rows > * + * { margin-top: 26px; }
.row-ep { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; }
.row-ep .img { width: 86px; height: 104px; flex: none; }
.row-ep .txt { flex: 1; min-width: 0; }
.row-ep h3 { margin: 0; font: 400 21px/1.2 var(--serif); }
.row-ep small { display: block; margin-top: 8px; font: 9px var(--mono); color: rgba(232, 229, 214, .55); }
.row-ep .state { color: var(--signal); font-size: 12px; }
.hub-foot { padding: 20px 0; text-align: center; font: 9px var(--mono); letter-spacing: 2px; color: rgba(232, 229, 214, .3); }
.hub-foot a { display: inline-block; margin-top: 18px; color: rgba(232, 229, 214, .45); text-decoration: none; letter-spacing: 1px; padding: 10px; }

/* ---------- Opening brand ---------- */
.splash { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #000; transition: opacity .3s ease-out; }
.splash.out { opacity: 0; pointer-events: none; }
.splash-in { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; }
.splash img { width: 160px; height: 160px; border-radius: 30px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 255, 255, .12); }
.splash b { font: 400 20px var(--mono); letter-spacing: 5px; }
.splash small { display: block; margin-top: 12px; font-size: 12px; color: var(--secondary); text-align: center; }

/* ---------- Player (full-screen cover) ---------- */
.player { position: fixed; inset: 0; z-index: 20; background: #000; overflow: hidden; transform: translateY(100%); transition: transform .42s cubic-bezier(.2, .9, .25, 1); }
.player.in { transform: none; }
.stage { position: absolute; inset: 0; transform: scale(1.08); will-change: transform; }
.scene { position: absolute; inset: 0; background: linear-gradient(#333, #000) center / cover no-repeat; transform-origin: center; }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.stage video.ready { opacity: 1; }
.atmo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.atmo canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.grain { position: absolute; inset: -96px; opacity: .09; mix-blend-mode: overlay; background-repeat: repeat; }
.flicker { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .45s ease-in-out; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent 50%, rgba(0, 0, 0, .92)); }
.ui { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: max(var(--top), 6px) 24px calc(12px + var(--bottom)); max-width: 640px; margin: 0 auto; }
.ui.blocked > :not(.ph) { pointer-events: none; }
@media (max-width: 389px) { .ui { padding-left: 16px; padding-right: 16px; } }
.ph { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; background: rgba(0, 0, 0, .6); border-radius: 12px; flex: none; }
.ph button { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.ph .t { flex: 1; text-align: center; font: 10px var(--mono); letter-spacing: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mid { flex: 1; min-height: 8px; position: relative; display: flex; flex-direction: column; }
.bottom { flex: none; display: flex; flex-direction: column; gap: 12px; }
.intro { max-height: 72vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.intro small { font: 12px var(--mono); letter-spacing: 3px; color: var(--signal); }
.intro h1 { margin: 0; font: 400 58px/1.05 var(--serif); }
.intro p { margin: 0; color: rgba(232, 229, 214, .85); white-space: pre-line; }
@media (max-height: 699px) { .intro h1 { font-size: 40px; } }
.take { text-align: center; font: 11px var(--mono); letter-spacing: 3px; padding-bottom: 20px; }
.prose { background: rgba(0, 0, 0, .84); border-radius: 8px; overflow-y: auto; overscroll-behavior: contain; flex: 0 1 auto; min-height: 0; }
.prose-in { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.prose small { font: 10px var(--mono); letter-spacing: 2px; color: var(--signal); }
.prose p { margin: 0; font: 400 22px/1.27 var(--serif); white-space: pre-line; }
.prose.end p { font-size: 28px; line-height: 1.21; }
.prose .etitle { font: 12px var(--mono); color: rgba(232, 229, 214, .7); }
.panel { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.panel > .fb { flex: none; }
.paused { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); max-width: 420px; margin: 0 auto; padding: 24px; border-radius: 12px; background: rgba(0, 0, 0, .94); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.paused h2 { margin: 0; font: 400 22px var(--serif); }
.paused p { margin: 0; }

/* ---------- Clue paper ---------- */
.clue { position: relative; padding: 18px 21px 18px 18px; color: var(--ink); text-align: left; width: 100%; display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3)); }
.clue::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--clue);
  background-image: linear-gradient(to right, transparent 8px, rgba(165, 42, 42, .1) 8px, rgba(165, 42, 42, .1) 9px, transparent 9px),
    repeating-linear-gradient(to bottom, transparent 0 8px, rgba(165, 42, 42, .12) 8px 8.6px, transparent 8.6px 19px);
  background-size: 100% 100%, 2px 100%; background-position: 0 0, 6px 0; background-repeat: no-repeat;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.clue::after { content: ""; position: absolute; right: 0; top: 0; width: 18px; height: 18px; background: var(--clue-fold); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.clue-h { display: flex; align-items: baseline; gap: 8px; font: 600 12px var(--mono); color: rgba(43, 38, 32, .75); }
.clue-h span { flex: 1; display: flex; gap: 6px; align-items: center; }
.clue hr { border: 0; height: 1px; background: rgba(43, 38, 32, .22); margin: 12px 0; }
.clue p { margin: 0; font: 17px/1.6 var(--serif); white-space: pre-line; }
.clue .tap { display: block; margin-top: 12px; font-size: 12px; color: rgba(43, 38, 32, .75); }

/* ---------- Puzzle ---------- */
.puzzle { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
.puzzle.done { pointer-events: none; }
.pz-tag { font: 12px var(--mono); padding: 8px; background: rgba(0, 0, 0, .85); }
.pz-tag.cmp { letter-spacing: 2px; background: rgba(0, 0, 0, .8); }
.pz-area { position: relative; flex: 1; width: 100%; min-height: 160px; touch-action: none; transition: transform .15s cubic-bezier(.3, 1.6, .5, 1); }
.target {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(0, 0, 0, .8); border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(232, 229, 214, .35); color: var(--paper); text-align: center; padding: 4px;
}
.target.hl { color: var(--signal); }
.target .icon { font-size: 22px; }
.target b { font: 600 11px var(--mono); }
.target i { font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .8); }
.target:disabled { opacity: 1; }
.item { position: absolute; left: 50%; top: 83%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; color: #000; background: var(--paper); transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0)) rotate(-4deg); touch-action: none; cursor: grab; }
.item.sel { background: var(--signal); }
.item.spring { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.item .icon { font-size: 22px; }
.item b { font: 400 11px var(--mono); }
.pz-cap { font-size: 12px; padding: 4px; background: rgba(0, 0, 0, .7); text-align: center; }
.pz-swap { font: 12px var(--mono); padding: 12px; border-radius: 999px; background: rgba(0, 0, 0, .85); }
.pz-hint { font-size: 12px; padding: 8px; border-radius: 8px; background: rgba(0, 0, 0, .9); text-align: center; }

/* ---------- Sheets (iOS page sheet) ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; }
.sheet-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .35s; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--top) + 10px); max-width: 640px; margin: 0 auto;
  border-radius: 10px 10px 0 0; overflow: hidden; display: flex; flex-direction: column; background: var(--sheet);
  transform: translateY(100%); transition: transform .4s cubic-bezier(.2, .9, .25, 1);
}
.sheet-wrap.in .sheet-dim { opacity: 1; }
.sheet-wrap.in .sheet { transform: translateY(0); }
.sheet.drag { transition: none; }
.sheet-nav { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 16px; touch-action: none; }
.sheet-nav::before { content: ""; position: absolute; top: 5px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(235, 235, 245, .3); }
.sheet-nav h2 { margin: 0; font-size: 17px; font-weight: 600; }
.sheet-nav.large { justify-content: flex-start; height: auto; padding: 52px 20px 8px; }
.sheet-nav.large h2 { font-size: 34px; font-weight: 700; }
.sheet-done { position: absolute; right: 16px; top: 13px; color: var(--signal); font-weight: 600; padding: 4px 0; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--bottom); -webkit-overflow-scrolling: touch; }
.pad { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.sheet .lede { margin: 0; font: 400 20px/1.25 var(--serif); color: rgba(255, 255, 255, .9); white-space: pre-line; }
.sheet .cap { font: 12px var(--mono); color: rgba(232, 229, 214, .7); }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 20px; gap: 8px; color: var(--secondary); }
.empty .icon { font-size: 48px; margin-bottom: 8px; }
.empty b { font-size: 22px; font-weight: 700; color: var(--paper); }
.empty span { font-size: 15px; }
.feedback { color: var(--signal); }
.note-sm { font-size: 16px; }

/* Store sheet */
.store .pad { padding: 24px; gap: 22px; }
.store-cover { height: 270px; margin: -24px -24px 0; }
.store h3 { margin: 0; font: 400 34px/1.15 var(--serif); }
.store .sub { color: var(--secondary); margin: 0; }
.store .kicker { font: 12px var(--mono); letter-spacing: 2px; color: var(--signal); }
.store .foot { font-size: 13px; color: var(--secondary); margin: 0; }
.store .msg { font-size: 13px; color: var(--secondary); margin: 0; }
.linkbtn { color: var(--signal); font-size: 17px; text-align: left; align-self: flex-start; padding: 4px 0; }
.linkbtn:disabled { opacity: .45; }

/* Settings (inset grouped form) */
.form { background: var(--grouped); }
.form .sheet-body { padding: 0 20px calc(30px + var(--bottom)); }
.fsec { margin-top: 26px; }
.fsec h4 { margin: 0 0 7px 16px; font-size: 13px; font-weight: 400; color: rgba(235, 235, 245, .6); text-transform: uppercase; letter-spacing: -.08px; }
.fgroup { background: var(--cell); border-radius: 10px; overflow: hidden; }
.frow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 11px 16px; width: 100%; text-align: left; position: relative; }
.frow + .frow::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--sep); }
.frow.btn { color: var(--signal); }
.frow.btn:disabled { opacity: .45; }
.frow p { margin: 0; }
.frow .fn { font-size: 13px; color: var(--secondary); }
.fcol { flex-direction: column; align-items: flex-start; gap: 6px; }
.switch { position: relative; width: 51px; height: 31px; flex: none; border-radius: 16px; background: rgba(120, 120, 128, .32); transition: background .2s; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--signal); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* Confirmation dialog (action sheet) */
.cd-wrap { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 8px calc(8px + var(--bottom)); }
.cd-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .3s; }
.cd { position: relative; max-width: 420px; width: 100%; margin: 0 auto; transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .9, .25, 1); }
.cd-wrap.in .cd-dim { opacity: 1; }
.cd-wrap.in .cd { transform: none; }
.cd-g { background: rgba(37, 37, 37, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 14px; overflow: hidden; }
.cd-g p { margin: 0; padding: 14px 16px; font-size: 13px; color: rgba(235, 235, 245, .6); text-align: center; border-bottom: .5px solid var(--sep); }
.cd-g button { display: block; width: 100%; height: 57px; font-size: 20px; color: var(--signal); }
.cd-g button.destr { color: #ff453a; }
.cd-cancel { margin-top: 8px; }
.cd-cancel button { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .stage { transform: none !important; }
  .player, .sheet, .cd, .splash, .item.spring, .pz-area { transition: none !important; }
}