:root {
  --bg: #0b0b0c;
  --ink: #8d8d92;
  --body-hi: #f6f6f4;
  --body-lo: #d9d9d6;
  --body-edge: #bdbdba;
  --wheel: #f2f2f0;
  --wheel-edge: #cfcfcc;
  --wheel-ink: #a8a8ad;
  --center: #e9e9e7;
  --bezel: #1a1a1c;
  --lcd: #fbfbfb;
  --lcd-ink: #111;
  --lcd-dim: #9a9a9a;
  --sel-hi: #5aa4ef;
  --sel-lo: #1d5fb8;
  --bar-hi: #f4f4f4;
  --bar-lo: #c9cdd2;
}
.black {
  --body-hi: #2b2b2e;
  --body-lo: #141416;
  --body-edge: #050506;
  --wheel: #232326;
  --wheel-edge: #0e0e10;
  --wheel-ink: #8a8a90;
  --center: #2c2c30;
  --sel-hi: #ff4a4a;
  --sel-lo: #a10f1d;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 12px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: lowercase;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* film grain + scanlines */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 5; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(4) infinite;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 6;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-6%, 4%); }
  50% { transform: translate(5%, -7%); } 75% { transform: translate(-3%, -2%); }
}

.corner { position: fixed; z-index: 7; letter-spacing: .08em; font-size: 11px; }
.tl { top: 16px; left: 16px; color: #d7d7da; }
.tr { top: 16px; right: 16px; font-variant-numeric: tabular-nums; }
.bl { bottom: 16px; left: 16px; }
.br { bottom: 16px; right: 16px; }

#stage {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tip { margin: 14px 0 0; letter-spacing: .1em; opacity: .7; transition: opacity 1s; }
.tip.gone { opacity: 0; }

/* ---------- device ---------- */
.ipod {
  width: 340px; height: 570px; flex: none;
  border-radius: 38px;
  background: linear-gradient(160deg, var(--body-hi), var(--body-lo));
  box-shadow:
    inset 0 0 0 2px var(--body-edge),
    inset 0 2px 1px rgba(255,255,255,.6),
    0 30px 80px rgba(0,0,0,.65), 0 0 120px rgba(255,255,255,.04);
  position: relative; z-index: 2; /* above the ghostface peek, so it peeks out from behind */
  transform-origin: center center;
}
.bezel {
  position: absolute; top: 24px; left: 22px; width: 296px; height: 226px;
  background: var(--bezel); border-radius: 8px; padding: 3px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.4);
}
.screen {
  width: 290px; height: 220px; overflow: hidden; position: relative;
  background: var(--lcd); color: var(--lcd-ink); border-radius: 4px;
}
.screen::after { /* lcd glass */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%);
}
.bar {
  height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px;
  background: linear-gradient(var(--bar-hi), var(--bar-lo));
  border-bottom: 1px solid #8f959c; font-weight: 700; font-size: 12px;
}
.bar-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 200px; }
.bar-i { display: flex; gap: 6px; align-items: center; font-size: 10px; }
.batt { width: 22px; height: 10px; border: 1px solid #444; border-radius: 2px; position: relative; padding: 1px; }
.batt::after { content: ""; position: absolute; right: -3px; top: 2px; width: 2px; height: 4px; background: #444; }
.batt i { display: block; height: 100%; width: 80%; background: linear-gradient(#9be27d, #3fa31c); }
.body { height: 200px; position: relative; overflow: hidden; }
.body.in { animation: slide-in .18s ease-out; }
.body.out { animation: slide-out .18s ease-out; }
@keyframes slide-in { from { transform: translateX(40%); opacity: .2; } }
@keyframes slide-out { from { transform: translateX(-40%); opacity: .2; } }

/* menus */
.menu { list-style: none; margin: 0; padding: 0; }
.menu li {
  height: 25px; padding: 0 22px 0 8px; display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.menu li span { overflow: hidden; text-overflow: ellipsis; }
.menu li em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--lcd-dim); margin-left: 8px; }
.menu li.dim span { color: var(--lcd-dim); }
.menu li.sel { background: linear-gradient(var(--sel-hi), var(--sel-lo)); color: #fff; }
.menu li.sel span, .menu li.sel em { color: #fff; }
.menu.scroll li { padding-right: 18px; }
.sbar { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 6px; border: 1px solid #aaa; border-radius: 3px; }
.sbar i { position: absolute; left: 0; right: 0; background: #666; border-radius: 2px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sel-lo); animation: blink 1s steps(2) infinite; }
.sel .dot { background: #fff; }
@keyframes blink { 50% { opacity: 0; } }

/* generic panels */
.pane { padding: 10px 12px; height: 100%; display: flex; flex-direction: column; }
.hint { color: #555; font-size: 11.5px; white-space: pre-line; }
.foot { margin-top: auto; font-size: 10.5px; color: var(--lcd-dim); text-align: center; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; }
.big { font-size: 26px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.center-t { text-align: center; }
.grow { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.shake { animation: shake .35s; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

/* puzzles */
.cipher { font-size: 19px; font-weight: 700; white-space: pre-line; text-align: center; line-height: 1.5; }
.notches { display: flex; gap: 3px; justify-content: center; }
.notches i { width: 4px; height: 4px; border-radius: 50%; background: #ccc; }
.notches i.on { background: #111; }
.lamp { width: 54px; height: 54px; border-radius: 50%; background: #e3e3e3; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); transition: background .03s; }
.lamp.on { background: #fff6b0; box-shadow: 0 0 22px 8px #ffe86a, inset 0 0 6px #fff; }
.trace { min-height: 18px; font-size: 16px; letter-spacing: .1em; }
.dial-n { font-size: 46px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.picks { font-size: 15px; letter-spacing: .12em; }
.keys { display: grid; grid-template-columns: repeat(3, 52px); gap: 3px; justify-content: center; margin-top: 4px; }
.keys b { height: 22px; border: 1px solid #bbb; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; }
.keys b small { font-size: 8px; font-weight: 500; color: #888; }
.keys b.lit { background: #111; color: #fff; border-color: #111; }
.bits { font-size: 15px; line-height: 1.25; letter-spacing: .14em; text-align: center; }
.simon { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 26px); gap: 2px; justify-content: center; }
.simon b { display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 11px; color: #777; }
.simon b.lit { background: var(--sel-lo); color: #fff; }
.prog { display: flex; gap: 4px; justify-content: center; }
.prog i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #999; }
.prog i.on { background: #111; border-color: #111; }
.lyrics { font-size: 12.5px; line-height: 1.55; overflow: hidden; }
.slots { display: flex; gap: 5px; justify-content: center; }
.slots b { width: 26px; height: 32px; border-bottom: 2px solid #111; font-size: 22px; display: flex; align-items: flex-end; justify-content: center; }
.slots b.empty { color: #ccc; border-color: #ccc; }

/* answer entry */
.typed { font-size: 20px; font-weight: 700; min-height: 30px; border-bottom: 1px solid #ddd; word-break: break-all; }
.typed i { display: inline-block; width: 2px; height: 20px; background: #111; vertical-align: -3px; animation: blink 1s steps(2) infinite; }
.strip { display: flex; justify-content: center; gap: 2px; margin-top: 12px; }
.strip b { width: 22px; text-align: center; font-size: 15px; color: #aaa; }
.strip b.cur { color: #fff; background: linear-gradient(var(--sel-hi), var(--sel-lo)); border-radius: 3px; font-size: 18px; }
.msg { min-height: 16px; text-align: center; font-size: 11px; margin-top: 8px; color: #555; }

/* now playing */
.np { display: flex; gap: 10px; padding: 12px 10px 0; }
.art {
  width: 92px; height: 92px; flex: none; border-radius: 2px; overflow: hidden; position: relative;
  background: #0d0d0d; color: #eee; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  -webkit-box-reflect: below 1px linear-gradient(transparent 60%, rgba(255,255,255,.25));
}
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art .gen { position: absolute; inset: 0; padding: 6px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(circle at 70% 30%, #3a3a3a, #0d0d0d 70%); }
.art .gen b { font-size: 40px; line-height: 1; letter-spacing: -.04em; }
.art .gen small { font-size: 8px; letter-spacing: .15em; color: #aaa; }
.meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.meta .nn { font-size: 10.5px; color: #777; }
.meta .tt { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta .aa, .meta .ee { font-size: 12px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-bar { margin: 18px 12px 0; }
.track-bar .rail { height: 9px; border: 1px solid #888; background: linear-gradient(#fff, #ddd); position: relative; }
.track-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(var(--sel-hi), var(--sel-lo)); }
.track-bar .times { display: flex; justify-content: space-between; font-size: 10.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.track-bar.vol .rail { height: 7px; border-radius: 4px; }

/* reveal */
.reveal { font-size: 24px; font-weight: 800; text-align: center; letter-spacing: .02em; word-break: break-word; }
.unlocked { font-size: 10px; letter-spacing: .4em; color: #777; }
.glitch { animation: glitch .25s steps(2) 6; }
@keyframes glitch { 50% { transform: translateX(2px) skewX(8deg); filter: invert(1); } }

/* wheel */
.wheel {
  position: absolute; left: 50%; top: 300px; width: 230px; height: 230px; margin-left: -115px;
  border-radius: 50%; background: var(--wheel); touch-action: none; cursor: grab;
  box-shadow: inset 0 0 0 1px var(--wheel-edge), inset 0 -3px 6px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.5);
}
.wheel:active { cursor: grabbing; }
.wb {
  position: absolute; color: var(--wheel-ink); font-weight: 700; font-size: 13px; letter-spacing: .04em;
  pointer-events: none; transition: color .1s, transform .1s;
}
.wb.lit { color: var(--sel-lo); transform: scale(1.15); }
#b-menu { top: 15px; left: 50%; transform: translateX(-50%); }
#b-menu.lit { transform: translateX(-50%) scale(1.15); }
#b-next { right: 16px; top: 50%; transform: translateY(-50%); font-size: 10px; letter-spacing: -2px; }
#b-next.lit { transform: translateY(-50%) scale(1.15); }
#b-prev { left: 16px; top: 50%; transform: translateY(-50%); font-size: 10px; letter-spacing: -2px; }
#b-prev.lit { transform: translateY(-50%) scale(1.15); }
#b-play { bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: -1px; }
#b-play.lit { transform: translateX(-50%) scale(1.15); }
.center {
  position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px;
  border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(160deg, var(--body-hi), var(--center));
  box-shadow: 0 0 0 1px var(--wheel-edge), 0 1px 2px rgba(0,0,0,.15);
}
.center:active, .center.lit { filter: brightness(.93); }
.center:focus-visible { outline: 2px solid var(--sel-hi); outline-offset: 2px; }

.type { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; font-size: 16px; }

@media (max-width: 520px) {
  .corner { font-size: 10px; }
  .tip { font-size: 11px; }
}

/* ---------- movie themes (puzzle screens) ---------- */
.screen[data-theme="ring"] .body { background: #cfd4cb; color: #1b2119; }
.screen[data-theme="ring"] .body::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(transparent, rgba(255,255,255,.55) 50%, transparent) 0 -40px / 100% 40px no-repeat,
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px);
  animation: tracking 3.5s linear infinite;
}
@keyframes tracking { to { background-position: 0 240px, 0 0; } }
.screen[data-theme="ring"] .hint { color: #3e4a3a; }

.screen[data-theme="saw"] .body { background: #0c100b; color: #c9dcb5; }
.screen[data-theme="saw"] .hint { color: #7d9a70; }
.screen[data-theme="saw"] .cipher { color: #e3ffc4; text-shadow: 0 0 6px rgba(160,255,120,.45); }

.screen[data-theme="fd"] .body { background: #e5edf3; color: #0d2a40; }
.screen[data-theme="fd"] .hint { color: #46637b; }

.screen[data-theme="jb"] .body { background: #170609; color: #ffd8df; }
.screen[data-theme="jb"] .hint { color: #ff7a8e; }
.screen[data-theme="jb"] .cipher, .screen[data-theme="jb"] .lyrics { text-shadow: 0 0 8px rgba(255,40,80,.5); }

.screen[data-theme="dark"] .body { background: #000; color: #ddd; }

/* dark themes: swap the light-screen greys */
:is(.screen[data-theme="saw"], .screen[data-theme="jb"], .screen[data-theme="dark"]) :is(.foot, .msg) { color: #888; }
:is(.screen[data-theme="saw"], .screen[data-theme="jb"]) :is(.notches i.on, .prog i.on, .typed i) { background: currentColor; border-color: currentColor; }
:is(.screen[data-theme="saw"], .screen[data-theme="jb"]) :is(.notches i, .prog i) { background: #333; border-color: #555; }
:is(.screen[data-theme="saw"], .screen[data-theme="jb"]) .typed { border-color: #333; }
:is(.screen[data-theme="saw"], .screen[data-theme="jb"]) .keys b { border-color: #444; }
.screen[data-theme="saw"] .simon b.lit { background: #9b0f12; }
.screen[data-theme="jb"] .simon b.lit, .screen[data-theme="jb"] .strip b.cur { background: #b3122e; }
.screen[data-theme="saw"] .strip b.cur { background: #2f5a22; }

/* ---------- screen effects ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.screen.fx-static .fx {
  background: #777 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .9; animation: snow .12s steps(3) infinite;
}
.screen.fx-static .fx::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26px; top: -26px;
  background: linear-gradient(transparent, rgba(255,255,255,.8), transparent);
  animation: roll .5s linear infinite;
}
@keyframes snow { 33% { background-position: 37px 61px; } 66% { background-position: -53px 17px; } }
@keyframes roll { to { top: 100%; } }

.screen.fx-tear .body { animation: tear .32s steps(1) infinite; }
@keyframes tear {
  0% { clip-path: inset(0 0 55% 0); transform: translateX(-9px); filter: hue-rotate(90deg); }
  25% { clip-path: inset(35% 0 25% 0); transform: translateX(11px) skewX(-6deg); }
  50% { clip-path: inset(8% 0 70% 0); transform: translateX(-5px) skewX(12deg); filter: invert(1); }
  75% { clip-path: inset(68% 0 0 0); transform: translateX(7px); }
}
.screen.fx-flicker { animation: flicker 1.1s steps(1) infinite; }
@keyframes flicker {
  0% { filter: brightness(1); } 8% { filter: brightness(.15); } 14% { filter: brightness(1); }
  30% { filter: brightness(.45); } 34% { filter: brightness(1); } 61% { filter: brightness(.05); }
  66% { filter: brightness(.9); } 80% { filter: brightness(.3); } 86% { filter: brightness(1); }
}
.screen.fx-red .fx { background: rgba(210,0,0,.9); mix-blend-mode: multiply; }
/* face colors: the jumpscare is black features on a white flash, the page peek and 3am are white on black */
.ghost * { fill: currentColor !important; }
.screen.fx-ghost .fx { background: #f2f2f0; color: #050505; display: flex; align-items: center; justify-content: center; mix-blend-mode: normal; }
.fx .ghost { height: 92%; animation: lunge .42s ease-out forwards, jitter .06s steps(2) infinite; }
@keyframes lunge { from { transform: scale(.6); } to { transform: scale(1.25); } }
@keyframes jitter { 50% { translate: 2px -1px; } }

/* ghostface peeking in from the side of the page */
.peek { position: fixed; top: 22%; width: 150px; z-index: 1; pointer-events: none; color: #ecebe6; transition: transform 1s cubic-bezier(.3,.7,.3,1); filter: drop-shadow(0 0 14px rgba(255,255,255,.25)); }
.peek .ghost { width: 100%; display: block; }
.peek.left { left: 0; transform: translateX(-105%) rotate(18deg); }
.peek.right { right: 0; transform: translateX(105%) rotate(-18deg); }
.peek.left.show { transform: translateX(20%) rotate(14deg); }
.peek.right.show { transform: translateX(-20%) rotate(-14deg); }
.peek:not(.left):not(.right) { display: none; }

/* hidden screens */
.tape { height: 100%; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #eee; }
.ringimg svg { width: 130px; height: 130px; display: block; animation: breathe 3s ease-in-out infinite; }
.tape-t { font-size: 13px; letter-spacing: .5em; margin-top: 4px; opacity: .8; }
.ghost-screen { height: 100%; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ghost-screen .ghost { height: 150px; color: #e8e8e4; animation: breathe 3s ease-in-out infinite; }
.ghost-t { color: #c4001a; letter-spacing: .4em; font-weight: 700; font-size: 12px; }
@keyframes breathe { 50% { transform: scale(1.04); opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
  .screen.fx-flicker, .screen.fx-tear .body, .fx .ghost, .ringimg svg, .ghost-screen .ghost { animation: none; }
}