:root {
  --bg: #0c0b0a;
  --ink: #ece6dc;
  --dim: #8d867b;
  --faint: #3a3631;
  --line: #24211e;
  --field: #161412;
  --hit: #9fd69b;
  --miss: #e2735f;
  --accent: #f1d9a8;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 50; opacity: .07;
  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 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- header ---------- */
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px clamp(16px, 4vw, 48px); position: relative; z-index: 3;
}
.mark { font: italic 400 28px/1 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.modes { display: flex; gap: 22px; }
.modes button { color: var(--dim); font-size: 14px; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s; }
.modes button:hover { color: var(--ink); }
.modes button.on { color: var(--ink); border-color: var(--ink); }
.modes span { color: var(--dim); }
.tools { justify-self: end; display: flex; gap: 6px; }
.tools button { width: 36px; height: 36px; display: grid; place-items: center; color: var(--dim); border-radius: 50%; transition: color .2s, background .2s; }
.tools button:hover { color: var(--ink); background: var(--field); }

/* ---------- the barcode ---------- */
.screen { padding: clamp(8px, 3vh, 36px) 0 0; }
.strip-wrap { position: relative; margin: 0 clamp(16px, 4vw, 48px); }
.glow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: blur(60px) saturate(1.5); opacity: .55; transform: scale(1.04, 1.25);
  pointer-events: none; z-index: 0;
}
.strip { position: relative; z-index: 1; height: clamp(220px, 46vh, 540px); touch-action: pan-y; cursor: crosshair; }
#bars { display: block; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; transition: opacity .9s ease; }
#bars.in { opacity: 1; }
.scrub {
  position: absolute; top: -10px; bottom: -10px; width: 1px; background: rgba(255, 255, 255, .85);
  pointer-events: none; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .4);
}
.scrub span {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.caption { margin: 22px clamp(16px, 4vw, 48px) 0; color: var(--dim); font-size: 13px; text-align: center; }

/* ---------- play area ---------- */
.play { width: min(620px, calc(100% - 32px)); margin: clamp(20px, 4vh, 44px) auto 80px; position: relative; z-index: 2; }

.credits { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 2px; text-align: center; }
.credits li { display: grid; gap: 0; animation: credit .9s cubic-bezier(.2, .7, .2, 1) both; padding: 6px 0; }
.credits .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.credits .v { font: 400 30px/1.15 var(--serif); color: var(--ink); }
.credits .v.blanks { letter-spacing: .12em; }
@keyframes credit { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }

.guesses { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.guesses li {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
  background: var(--field); color: var(--dim); font-size: 14px; animation: credit .5s ease both;
}
.guesses li::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; background: no-repeat center/contain; }
.guesses li.miss::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='%23e2735f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.guesses li.skipped::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7h8' stroke='%238d867b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.guesses li.hit { color: var(--ink); }
.guesses li.hit::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%239fd69b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.guesses li.miss span { text-decoration: line-through; text-decoration-color: rgba(226, 115, 95, .5); }

.ask { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.field { position: relative; }
#guess {
  width: 100%; height: 52px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--field); color: var(--ink); font: 400 17px var(--sans); outline: none; transition: border-color .2s;
}
#guess::placeholder { color: #6a645b; }
#guess:focus { border-color: #57514a; }
.suggest {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: #1b1916; border: 1px solid var(--line); border-radius: 12px; max-height: 280px; overflow: auto;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .5); z-index: 10;
}
.suggest li { padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--dim); }
.suggest li b { color: var(--ink); font-weight: 500; }
.suggest li[aria-selected="true"], .suggest li:hover { background: #2a2722; color: var(--ink); }
.suggest li.tried { opacity: .35; pointer-events: none; }
.actions { display: flex; gap: 8px; }
.go {
  height: 52px; padding: 0 22px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 500;
  transition: transform .15s, opacity .2s;
}
.go:active { transform: scale(.97); }
.go:disabled { opacity: .35; cursor: default; }
.skip { height: 52px; padding: 0 16px; border-radius: 12px; color: var(--dim); border: 1px solid var(--line); transition: color .2s, border-color .2s; }
.skip:hover { color: var(--ink); border-color: #4a453f; }
.dots { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.dots i { width: 28px; height: 3px; border-radius: 2px; background: var(--faint); transition: background .3s; }
.dots i.miss { background: var(--miss); }
.dots i.hit { background: var(--hit); }
.dots i.skip { background: #5c5750; }
.dots i.now { background: var(--dim); }

/* ---------- reveal ---------- */
.reveal { text-align: center; animation: credit 1s ease both; }
.verdict { color: var(--dim); margin: 6px 0 4px; font-size: 14px; }
.film { font: 400 clamp(40px, 7vw, 64px)/1.02 var(--serif); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.byline { color: var(--dim); margin: 10px 0 26px; }
.trailer {
  cursor: pointer;
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #000; isolation: isolate;
}
.trailer img { width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: opacity .3s, transform .6s; }
.trailer:hover img { opacity: .8; transform: scale(1.02); }
.trailer .play-ico {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(236, 230, 220, .92); color: var(--bg); padding-left: 3px;
}
.trailer::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); pointer-events: none; }
.trailer:has(iframe)::after { display: none; }
.trailer-label { position: absolute; z-index: 1; left: 0; right: 0; bottom: 16px; font-size: 13px; color: #fff; text-shadow: 0 1px 8px #000; }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.after { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 22px; }
.countdown { width: 100%; color: var(--dim); font-size: 13px; margin: 8px 0 0; font-variant-numeric: tabular-nums; }

/* ---------- dialogs ---------- */
dialog {
  border: 1px solid var(--line); border-radius: 18px; background: #141210; color: var(--ink);
  width: min(460px, calc(100% - 32px)); padding: 28px;
}
dialog::backdrop { background: rgba(5, 4, 3, .7); backdrop-filter: blur(4px); }
dialog h2 { font: italic 400 34px/1 var(--serif); margin: 0 0 16px; }
dialog p { color: #c9c2b6; margin: 0 0 12px; }
dialog .fine { color: var(--dim); font-size: 13px; }
dialog form { margin-top: 20px; }
dialog .go { width: 100%; }
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin-bottom: 20px; }
.statrow b { display: block; font: 400 36px/1 var(--serif); }
.statrow span { font-size: 12px; color: var(--dim); }
.hist { display: grid; gap: 5px; }
.hist div { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: center; font-size: 12px; color: var(--dim); }
.hist i { display: block; height: 18px; border-radius: 4px; background: var(--faint); min-width: 18px; text-align: right; padding: 0 6px; font-style: normal; color: var(--ink); line-height: 18px; }
.hist i.cur { background: var(--hit); color: var(--bg); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px;
}

@media (max-width: 640px) {
  .top { grid-template-columns: 1fr auto; row-gap: 10px; }
  .modes { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .mark { font-size: 26px; }
  .strip { height: 36vh; }
  .caption { font-size: 12px; }
  .credits .v { font-size: 26px; }
  .ask { grid-template-columns: 1fr; }
  .actions .go { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .credits li, .guesses li, .reveal { animation: none; }
}