/* NaSha Bollywood Night: the NaSha Design System "Paper & Ink" colourway, dressed for a filmi night.
   Paper, ink and brass carry the reading; marigold, rani pink, peacock and vermilion carry the fun.
   Motion lives in motion.js (classes only); everything rests for prefers-reduced-motion. */
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-latin-600-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Karla"; src: url(/fonts/karla-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Karla"; src: url(/fonts/karla-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #FBF6EC; --stone: #F3EBDB; --stone-deep: #E7DAC2; --ink: #2A1F17; --ink-soft: #5A4938; --faint: #6D5B4C;
  --brass: #A97C34; --brass-text: #7D5705; --rose: #B96F6A; --blush: #E3A9A4; --peach: #EFBE93; --sage: #78876A; --sage-text: #55663F;
  --marigold: #E9A21C; --rani: #C2185B; --peacock: #0E7C7B; --vermilion: #C8341E; --gold: linear-gradient(100deg, #8A5A12 0%, #E9A21C 28%, #FFE29A 45%, #C88A1E 62%, #8A5A12 100%);
  --display: "Fraunces", Georgia, "Iowan Old Style", serif; --body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
  --spring: cubic-bezier(.3, 1.5, .5, 1); --out: cubic-bezier(.2, .85, .25, 1);
  color: var(--ink); background: var(--stone); font: 16px/1.55 var(--body); font-synthesis: none; color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; position: relative; }

/* a slow sunburst behind everything, like the title card of an old film */
body::before { content: ""; position: fixed; left: 50%; top: 38%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; z-index: -2; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(233, 162, 28, .10) 0deg 6deg, transparent 6deg 15deg); animation: rays 140s linear infinite; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60vmax 40vmax at 50% 30%, rgba(251, 246, 236, .2), var(--stone) 75%); }
@keyframes rays { to { transform: rotate(1turn); } }

/* ---------- header: a marigold toran over a cinema marquee ---------- */
header { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 30px 5vw 14px;
  background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--stone-deep); }
header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none; transform-origin: top center; animation: toran 5s ease-in-out infinite;
  background: radial-gradient(circle at 12px 7px, var(--marigold) 0 6px, transparent 6.5px) 0 0 / 24px 22px repeat-x,
              linear-gradient(135deg, transparent 50%, var(--rani) 50%) 12px 10px / 12px 12px repeat-x,
              linear-gradient(225deg, transparent 50%, var(--peacock) 50%) 0 10px / 12px 12px repeat-x;
  -webkit-mask: linear-gradient(#000 0 0); filter: drop-shadow(0 2px 1px rgba(42, 31, 23, .15)); }
header::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--brass); }
@keyframes toran { 0%, 100% { transform: rotate(-.25deg) translateY(0); } 50% { transform: rotate(.25deg) translateY(1px); } }
header a { color: var(--ink); text-decoration: none; font: italic 600 34px/1 var(--display); letter-spacing: -.02em; display: inline-flex; flex-direction: column; }
header a span { font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .28em; color: var(--brass-text); margin-top: 8px; padding-bottom: 8px;
  background: radial-gradient(circle, var(--marigold) 0 2px, transparent 2.5px) 0 100% / 12px 6px repeat-x; animation: bulbs 1.2s steps(2) infinite; }
@keyframes bulbs { to { background-position: 6px 100%; } }
.hdr-r { display: flex; align-items: center; gap: 10px; }
.petal-btn { margin: 0; min-height: 36px; padding: 6px 14px; font: 500 12px var(--mono); letter-spacing: .08em; color: var(--ink); background: var(--paper); border: 1.5px solid var(--marigold); border-radius: 999px; }
.petal-btn b { font-weight: 500; color: var(--faint); } .petal-btn span { color: var(--rani); font-weight: 500; }
.petal-btn[data-level="none"] { border-color: var(--stone-deep); } .petal-btn[data-level="none"] span { color: var(--faint); }
.petal-btn[data-level="max"] { background: linear-gradient(135deg, #FCE7B0, var(--paper)); }
.petal-btn.bump { animation: bump .45s var(--spring); } @keyframes bump { 40% { transform: scale(1.12) rotate(-3deg); } }
.badge { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 8px 16px 8px 22px; position: relative;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
.badge::before { content: "✦ "; color: var(--marigold); }

/* ---------- page ---------- */
main { max-width: 1120px; margin: auto; padding: 36px 22px 60px; position: relative; }
h1 { font: 600 clamp(38px, 6.4vw, 72px)/1.02 var(--display); letter-spacing: -.025em; margin: 0 0 20px; }
h1:not(.code) { background: var(--gold); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s ease-in-out infinite;
  filter: drop-shadow(1px 2px 0 rgba(125, 87, 5, .18)); padding-bottom: .08em; }
@keyframes foil { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
h2 { font: 600 28px/1.15 var(--display); letter-spacing: -.01em; margin: 0 0 12px; }
h3 { font: 600 19px var(--display); margin-top: 0; }
.muted { color: var(--faint); font-size: 14px; line-height: 1.5; }
main > .muted:first-child { font: 500 12px var(--mono); letter-spacing: .24em; color: var(--rani); margin: 0 0 10px; }
.intro { max-width: 660px; font-size: 19px; line-height: 1.6; color: var(--ink-soft); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
a { color: var(--rose); }

/* ---------- panels: paper cards with a jewel stripe ---------- */
.panel { position: relative; background: var(--paper); border: 1px solid var(--stone-deep); border-radius: 20px; padding: 26px 26px 24px; margin: 22px 0;
  box-shadow: 7px 7px 0 var(--stone-deep), 0 18px 40px -28px rgba(42, 31, 23, .35); transition: transform .4s var(--out), box-shadow .4s; }
.panel::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--marigold) 0 25%, var(--rani) 25% 50%, var(--peacock) 50% 75%, var(--vermilion) 75%); }
@media (hover: hover) { .grid > .panel:hover { transform: translateY(-4px) rotate(-.3deg); box-shadow: 10px 12px 0 var(--peach), 0 24px 44px -26px rgba(42, 31, 23, .4); } .grid > .panel:nth-child(2):hover { transform: translateY(-4px) rotate(.3deg); } }

/* ---------- forms ---------- */
label { display: block; margin: 14px 0; font-weight: 700; font-size: 14px; color: var(--ink-soft); }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1.5px solid var(--stone-deep); border-radius: 12px; font: 16px var(--body); background: #fffdf8; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--spring); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rani); box-shadow: 0 0 0 4px rgba(194, 24, 91, .14); }
input[name="code"] { font: 500 26px var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.row > label { flex: 1; }
details { margin: 18px 0; } summary { cursor: pointer; font-weight: 700; color: var(--brass-text); }
.checks { display: flex; gap: 8px; flex-wrap: wrap; }
.checks label { margin: 0; font-size: 13px; font-weight: 400; padding: 6px 12px; border: 1px solid var(--stone-deep); border-radius: 999px; background: var(--stone); cursor: pointer; transition: background .2s, transform .2s var(--spring); }
.checks label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: scale(1.04); }
.checks input { display: inline; width: auto; margin: 0 4px 0 0; accent-color: var(--rani); }

/* ---------- buttons: the NaSha ink pill with a marigold shadow ---------- */
button, .button { display: inline-block; font: 700 14px var(--body); letter-spacing: .04em; color: var(--paper); background: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 12px 22px; min-height: 46px;
  margin: 5px 6px 5px 0; cursor: pointer; text-decoration: none; transition: transform .2s var(--spring), box-shadow .2s, background .2s; }
button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--marigold); }
button:active:not(:disabled) { transform: translateY(1px) scale(.96); box-shadow: 1px 1px 0 var(--marigold); }
button:disabled { opacity: .5; cursor: default; }
.secondary { background: transparent; color: var(--ink); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--peacock); outline-offset: 3px; }
form > button:not(.secondary) { background: linear-gradient(135deg, var(--rani), #8E1446); border-color: #8E1446; font-size: 15px; padding: 14px 28px; }
form > button:not(.secondary):hover:not(:disabled) { box-shadow: 4px 4px 0 var(--marigold), 0 0 24px -4px rgba(194, 24, 91, .6); }

/* ---------- the room code: a cinema ticket ---------- */
.code { display: inline-block; font: 500 clamp(30px, 5vw, 46px)/1 var(--mono); letter-spacing: .22em; color: var(--paper); background: var(--vermilion); padding: 16px 26px 16px 32px; margin: 4px 0 6px;
  border-radius: 8px; position: relative; box-shadow: 5px 5px 0 var(--ink);
  -webkit-mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
.code .ch { display: inline-block; }

/* ---------- the question: a frame of film ---------- */
.panel:has(.question) { padding-left: 46px; padding-right: 46px; }
.panel:has(.question)::after { content: ""; position: absolute; inset: 14px 12px; pointer-events: none; border-radius: 6px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 10px, transparent 10px 22px) left / 14px 100% no-repeat, repeating-linear-gradient(to bottom, var(--ink) 0 10px, transparent 10px 22px) right / 14px 100% no-repeat;
  -webkit-mask: linear-gradient(90deg, #000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px)); opacity: .12; }
.question { font: 600 clamp(24px, 3.2vw, 38px)/1.25 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; margin: 6px 0 18px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.options button { --c: var(--marigold); display: flex; align-items: center; gap: 14px; text-align: left; color: var(--ink); background: color-mix(in srgb, var(--c) 12%, var(--paper));
  border: 2px solid color-mix(in srgb, var(--c) 45%, var(--stone-deep)); border-radius: 16px; padding: 16px 18px; min-height: 74px; font: 600 17px/1.3 var(--body); letter-spacing: 0; margin: 0; }
.options button:nth-child(2) { --c: var(--rani); } .options button:nth-child(3) { --c: var(--peacock); } .options button:nth-child(4) { --c: var(--vermilion); }
.options button:hover:not(:disabled) { box-shadow: 5px 5px 0 var(--c); background: color-mix(in srgb, var(--c) 20%, var(--paper)); }
.options .letter { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 18px var(--display); color: var(--paper); background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.options button:disabled { opacity: 1; }
.options button:disabled:not(.chosen):not(.correct) { filter: saturate(.85); }
.options .wrong, .options:has(.correct) button:not(.correct):not(.chosen) { filter: saturate(.5); opacity: .75; }
.options .chosen { border-color: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--c), 0 10px 26px -12px var(--c); transform: scale(1.02); }
.options .correct { --c: var(--sage); background: #E4EFD9; border-color: var(--sage-text); }
.options .correct::after { content: "✓"; margin-left: auto; font: 600 26px var(--display); color: var(--sage-text); }
.options .wrong { --c: var(--vermilion); background: #F7E0DD; }

/* ---------- countdown ring ---------- */
.timer { --p: 1; position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font: 500 18px var(--mono); color: var(--ink);
  background: radial-gradient(circle closest-side, var(--paper) 78%, transparent 80%), conic-gradient(var(--ring, var(--peacock)) calc(var(--p) * 1turn), var(--stone-deep) 0); transition: transform .3s var(--spring); }
.timer.low { --ring: var(--vermilion); color: var(--vermilion); animation: beat .5s ease-in-out infinite alternate; }
.timer.done { width: auto; height: auto; padding: 6px 14px; border-radius: 999px; background: var(--sage); color: var(--paper); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
@keyframes beat { to { transform: scale(1.1); } }

/* ---------- leaderboard ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
th { text-align: left; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding: 4px 12px; }
td { background: var(--stone); padding: 12px; overflow-wrap: anywhere; } td:first-child { border-radius: 12px 0 0 12px; font: 600 22px var(--display); color: var(--brass-text); width: 64px; } td:last-child { border-radius: 0 12px 12px 0; }
td:nth-child(3) { font: 500 20px var(--mono); }
tr.first td { background: linear-gradient(90deg, #FCE7B0, var(--paper)); } tr.first td:first-child::after { content: " 👑"; font-size: 18px; }
tr.up td { animation: rowup 1.4s var(--out); }
@keyframes rowup { 0%, 30% { background: #FCE7B0; } }
.controls { min-width: 210px; } .controls button { padding: 6px 12px; min-height: 38px; font-size: 12px; }
small { color: var(--faint); }

/* ---------- toast ---------- */
#message { position: sticky; bottom: 16px; z-index: 20; max-width: 640px; margin: 10px auto; padding: 14px 22px; background: var(--ink); color: var(--paper); border-radius: 16px;
  box-shadow: 5px 5px 0 var(--marigold); animation: toast .5s var(--spring); }
#message:empty { display: none; }
@keyframes toast { from { transform: translateY(24px) scale(.94); opacity: 0; } }
footer { text-align: center; padding: 30px; color: var(--faint); font-size: 13px; }

/* ---------- motion hooks (motion.js adds these classes) ---------- */
.enter > * { animation: rise .6s var(--spring) backwards; } .enter > *:nth-child(2) { animation-delay: .07s; } .enter > *:nth-child(3) { animation-delay: .14s; } .enter > *:nth-child(4) { animation-delay: .21s; } .enter > *:nth-child(n+5) { animation-delay: .28s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.985); } }
h1 .w { display: inline-block; animation: wave .8s var(--spring) backwards; animation-delay: calc(var(--k) * 45ms); }
@keyframes wave { from { opacity: 0; transform: translateY(.5em) rotate(-4deg); } }
.code .ch { animation: flip .6s var(--spring) backwards; animation-delay: calc(var(--k) * 70ms + .1s); transform-origin: 50% 50%; }
@keyframes flip { from { transform: rotateX(90deg); opacity: 0; } }
/* clapperboard: a new question snaps in */
.clap { animation: clapin .55s var(--out); }
.clap::before { animation: clapbar .55s var(--out); }
@keyframes clapin { 0% { transform: scale(.97); } 40% { transform: scale(1.01) rotate(-.4deg); } }
@keyframes clapbar { 0% { height: 34px; background: repeating-linear-gradient(-45deg, var(--ink) 0 14px, var(--paper) 14px 28px); left: 0; right: 0; top: 0; border-radius: 20px 20px 0 0; transform-origin: 0 100%; transform: rotate(-12deg); }
  45% { transform: rotate(0); height: 34px; } 100% { height: 4px; } }
.options.deal button { animation: deal .5s var(--spring) backwards; } .options.deal button:nth-child(2) { animation-delay: .06s; } .options.deal button:nth-child(3) { animation-delay: .12s; } .options.deal button:nth-child(4) { animation-delay: .18s; }
@keyframes deal { from { opacity: 0; transform: translateY(16px) rotate(-2deg) scale(.95); } }
.options .pop { animation: pop .5s var(--spring); } @keyframes pop { 40% { transform: scale(1.08); } }
.shake { animation: shake .45s; } @keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.stamp { position: absolute; right: 22px; top: 18px; z-index: 3; font: italic 600 30px var(--display); padding: 4px 16px; border: 3px solid currentColor; border-radius: 10px; transform: rotate(-8deg); pointer-events: none; animation: stamp .5s var(--spring); background: var(--paper); }
.stamp.yes { color: var(--sage-text); } .stamp.no { color: var(--vermilion); }
@keyframes stamp { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } }
/* petals and leaves (motion.js moves them; grab one and throw it) */
html.petal-near, html.petal-near body { cursor: grab; } html.petal-grab, html.petal-grab * { cursor: grabbing !important; user-select: none; }
html.petal-grab { touch-action: none; }
.petal { position: fixed; left: 0; top: 0; z-index: 30; width: 20px; height: 20px; border-radius: 70% 0; pointer-events: none; will-change: transform;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .45), transparent 55%), var(--c, var(--marigold)); box-shadow: 1px 2px 3px rgba(42, 31, 23, .18); transition: opacity 1s; }
.petal.leaf { width: 22px; height: 22px; border-radius: 0 80%; background: linear-gradient(135deg, transparent 47%, rgba(255, 255, 255, .55) 48% 52%, transparent 53%), linear-gradient(135deg, #8DB255, #4E7A2E); }
.petal.held { cursor: grabbing; filter: drop-shadow(0 6px 6px rgba(42, 31, 23, .3)); }
.petal.fade { opacity: 0; }
.spot { animation: spot 2.6s ease-in-out infinite; } @keyframes spot { 50% { box-shadow: 7px 7px 0 var(--stone-deep), 0 0 0 6px rgba(233, 162, 28, .25), 0 0 40px rgba(233, 162, 28, .35); } }

@media (max-width: 650px) {
  .grid, .options { grid-template-columns: 1fr; } main { padding: 24px 14px 50px; } .panel { padding: 22px 18px 18px; }
  .panel:has(.question) { padding-left: 32px; padding-right: 32px; } .panel:has(.question)::after { inset: 12px 6px; }
  th, td { font-size: 13px; } td:first-child { width: 44px; font-size: 18px; } .controls { min-width: 0; } .controls button { display: block; }
  header { padding: 28px 16px 12px; } header a { font-size: 28px; } .badge { padding: 6px 12px 6px 18px; font-size: 10px; }
  .petal-btn b { display: none; } .petal-btn { padding: 6px 11px; } .hdr-r { gap: 6px; }
  .petal-btn, .badge, header a span { white-space: nowrap; } header a span { letter-spacing: .16em; } .badge { letter-spacing: .1em; } .stamp { font-size: 22px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  h1:not(.code) { background-position: 50% 0; } .petal, .petal-btn { display: none; }
}
@media print { header, footer, #message, button, .controls { display: none; } .panel { box-shadow: none; } main { padding: 0; } body::before, body::after { display: none; } }

/* ---------- From the archive: a slow film strip of public-domain posters ---------- */
#archive { max-width: 1120px; margin: 0 auto 30px; padding: 0 22px; }
body[data-phase="question"] #archive, body[data-phase="reveal"] #archive { display: none; }
.arch-h { font: 500 12px var(--mono); letter-spacing: .24em; color: var(--rani); margin: 0 0 10px; } .arch-h span { color: var(--faint); letter-spacing: .08em; }
.reel { overflow: hidden; border-radius: 14px; background: var(--ink); padding: 22px 0; position: relative; box-shadow: 7px 7px 0 var(--stone-deep);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reel::before, .reel::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--paper) 0 12px, transparent 12px 26px); opacity: .85; }
.reel::before { top: 6px; } .reel::after { bottom: 6px; }
.track { display: flex; gap: 14px; width: max-content; animation: reel 70s linear infinite; }
.track .dup { display: contents; }
.reel:hover .track, .reel:focus-within .track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-50%); } }
.frame { flex: none; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--paper); padding: 0 2px; transition: transform .3s var(--spring); }
.frame img { height: 200px; width: auto; border-radius: 4px; filter: sepia(.25) saturate(.9); transition: filter .3s; box-shadow: 0 0 0 2px #1a120c; }
.frame:hover, .frame:focus-visible { transform: translateY(-4px) rotate(-1deg); } .frame:hover img { filter: none; }
.frame b { font: 600 15px var(--display); margin-top: 6px; } .frame span { font: 500 10px var(--mono); letter-spacing: .1em; color: var(--peach); max-width: 220px; }
@media (max-width: 650px) { #archive { padding: 0 14px; } .frame img { height: 150px; } }
@media (prefers-reduced-motion: reduce) { .reel { overflow-x: auto; } .track { animation: none; } }