:root { color-scheme: dark; background: #100e0b; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { overflow: hidden; }
.key-hover-cursor { position: fixed; top: 0; left: 0; width: 80px; height: 80px; pointer-events: none; z-index: 100; filter: brightness(1.18) drop-shadow(0 0 3px #ffd578) drop-shadow(0 0 7px rgb(255 181 58 / .65)); }
.key-hover-cursor[hidden] { display: none; }
@media (any-hover: hover) and (any-pointer: fine) {
  html, body, main, main * { cursor: url("mystery-circles-cursor.png") 18 18, auto; }
  html.key-hovering main, html.key-hovering main * { cursor: none; }
}
main { position: relative; display: grid; place-items: center; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
/* Keep all five rings visible and round, including on unusually wide screens. */
.composition { position: relative; width: min(100vw, calc(100vh * 1672 / 941)); width: min(100vw, calc(100dvh * 1672 / 941)); aspect-ratio: 1672 / 941; }
picture, .artwork { display: block; width: 100%; height: 100%; }
.background { position: absolute; inset: 0; pointer-events: none; }
.background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.artwork { filter: drop-shadow(0 3px 5px rgb(0 0 0 / .65)); }
.slot { position: absolute; left: var(--x); top: 47.5%; width: 10.3%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; }
.slot[hidden] { display: none; }
.slot[data-slot="1"] { --x: 10.11%; }
.slot[data-slot="2"] { --x: 29.25%; }
.slot[data-slot="3"] { --x: 49.94%; width: 15.4%; }
.slot[data-slot="4"] { --x: 70.69%; }
.slot[data-slot="5"] { --x: 89.95%; }
.slot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.slot { padding: 0; border: 0; background: transparent; -webkit-tap-highlight-color: transparent; }
.slot:not(.slot--unlocked) { background: radial-gradient(circle, #000 55%, transparent 56%); }
.slot:focus-visible { outline: 2px solid #ffe1a1; outline-offset: 5px; }
@font-face { font-family: 'Mystery Handwriting'; src: url('mystery-hint-handwriting.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
.hint-paper { aspect-ratio: 1943 / 832; position: fixed; z-index: 5; width: min(440px, calc(100vw - 24px)); min-height: 170px; padding: 40px 35px 30px; display: grid; place-items: center; color: #382616; background: url('mystery-hint-paper.png') center / cover no-repeat; filter: drop-shadow(0 9px 14px rgb(0 0 0 / .45)); font: 26px/1.15 'Mystery Handwriting', cursive; text-align: center; overflow-wrap: anywhere; }
.hint-paper[hidden] { display: none; }
.hint-paper, .unlock-riddle { white-space: pre-line; }
.unlock-paper { height: fit-content; min-height: min(460px, calc(100dvh - 24px)); color-scheme: light; border: 0; width: min(900px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 70px 55px 58px; color: #382616; background: url('mystery-hint-paper.png') center / cover no-repeat; overflow-y: auto; font: 16px/1.45 'Segoe UI', Arial, sans-serif; }
.unlock-paper::backdrop { background: rgb(0 0 0 / .58); }
.unlock-form { max-width: 650px; margin: 0 auto; display: grid; gap: 14px; text-align: center; }
.unlock-form h2 { margin: 0 0 8px; font: inherit; font-size: 22px; font-weight: 600; }
.unlock-form label { font-size: 16px; }
.unlock-riddle { margin: 0 0 6px; font: 26px/1.15 'Mystery Handwriting', cursive; }
.unlock-form input { width: 100%; min-width: 0; padding: 10px; color: #382616; background: rgb(255 255 255 / .35); border: 0; border-bottom: 1px solid #806345; border-radius: 0; text-align: center; font: 18px/1.4 'Segoe UI', Arial, sans-serif; }
.paper-submit { justify-self: center; padding: 9px 28px; border: 1px solid #806345; border-radius: 4px; color: #382616; background: #e5d2ac; font: inherit; }
.paper-submit:disabled { opacity: .6; }
.paper-close { position: absolute; right: 34px; top: 55px; width: 36px; height: 36px; border: 0; background: transparent; color: #382616; font: 30px Arial, sans-serif; }
.unlock-paper :focus-visible { outline: 2px solid #735225; outline-offset: 3px; }
.unlock-paper [hidden] { display: none; }
.unlock-message { margin: 0; min-height: 24px; font-size: 15px; }
.slot--unlocked { overflow: visible; }
.slot--unlocked img { filter: drop-shadow(0 3px 5px #000); }
.circle-fireflies { position: absolute; left: 70.69%; top: 47.5%; width: 10.3%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.circle-fireflies::before { content: ''; position: absolute; inset: -9%; border-radius: 50%; box-shadow: 0 0 18px 5px rgb(235 172 55 / .16), inset 0 0 16px rgb(255 195 83 / .12); }
.circle-fireflies span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe7a0; box-shadow: 0 0 6px 3px rgb(255 198 71 / .7), 0 0 15px 5px rgb(255 172 38 / .24); animation: firefly-drift 7s ease-in-out infinite; }
.circle-fireflies span:nth-child(1) { left: 7%; top: -13%; animation-delay: -1s; }
.circle-fireflies span:nth-child(2) { left: 75%; top: -10%; animation-delay: -4s; animation-duration: 9s; }
.circle-fireflies span:nth-child(3) { left: 110%; top: 37%; animation-delay: -2s; animation-duration: 8s; }
.circle-fireflies span:nth-child(4) { left: 81%; top: 109%; animation-delay: -6s; }
.circle-fireflies span:nth-child(5) { left: 16%; top: 109%; animation-delay: -3s; animation-duration: 10s; }
.circle-fireflies span:nth-child(6) { left: -15%; top: 52%; animation-delay: -5s; animation-duration: 9s; }
@keyframes firefly-drift {
  0%, 100% { transform: translate(-4px, 3px); opacity: .2; }
  30% { transform: translate(5px, -7px); opacity: .95; }
  65% { transform: translate(-6px, -2px); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) { .circle-fireflies span { animation: none; opacity: .65; } }
@media (max-width: 480px) { .unlock-paper { padding: 70px 28px 58px; } .unlock-form h2 { font-size: 20px; } }
@media (max-width: 480px) { .hint-paper { font-size: 23px; min-height: 145px; padding: 34px 25px 25px; } }
@media (orientation: portrait) {
  .circle-fireflies { left: 49.9%; top: 70.04%; width: 18%; }
  .composition { width: min(100vw, calc(100vh * 941 / 1672)); width: min(100vw, calc(100dvh * 941 / 1672)); aspect-ratio: 941 / 1672; }
  .slot { left: 49.9%; top: var(--y); width: 18%; }
  .slot[data-slot="1"] { --y: 13.64%; }
  .slot[data-slot="2"] { --y: 29.87%; }
  .slot[data-slot="3"] { --y: 50.12%; width: 31.5%; }
  .slot[data-slot="4"] { --y: 70.04%; }
  .slot[data-slot="5"] { --y: 86.24%; }
}



.unlock-paper[open] { display: grid; align-items: center; }

.unlock-fireflies { position: absolute; inset: 0; pointer-events: none; z-index: 10; overflow: visible; }
.unlock-fireflies i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff3bd; box-shadow: 0 0 5px 2px #ffd56d, 0 0 14px 5px rgb(255 183 50 / .5); opacity: 0; }

.hint-paper.riddle-two-lines { width: min(520px, calc(100vw - 24px)); }
.riddle-two-lines { white-space: pre; overflow-wrap: normal; font-size: min(26px, calc(5vw - 2px)); }

:root { --notice-space: 140px; }
main { padding-bottom: var(--notice-space); }
.composition { width: min(100vw, calc((100dvh - var(--notice-space)) * 1672 / 941)); }
.event-notice { position: fixed; z-index: 3; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(960px, calc(100% - 24px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 26px; border-radius: 14px; background: linear-gradient(90deg, #48090855, #48090811), url('nancy-event-bg.webp') center / cover, #740d0a; color: #f7e4b4; box-shadow: 0 8px 28px #0008; font-family: 'Segoe UI', Arial, sans-serif; }
.event-notice::before { content: ''; position: absolute; inset: 7px; border: 1px solid #e6c36b; border-radius: 9px; pointer-events: none; }
.event-notice h2 { margin: 0; font-size: 18px; line-height: 1.25; }
.event-notice p { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: #f4ddb0; }
.event-notice a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 16px; min-height: 44px; border: 1px solid #ffdf77; border-radius: 9px; background: linear-gradient(110deg, #f6d78b, #e7b963, #ffeaa0); color: #4b2a12; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.event-notice a:hover { filter: brightness(1.1); box-shadow: 0 0 15px #ffda6f55; }
.event-notice a:focus-visible { outline: 2px solid #fff3c6; outline-offset: 3px; }
@media (orientation: portrait) { .composition { width: min(100vw, calc((100dvh - var(--notice-space)) * 941 / 1672)); } }
@media (max-width: 620px) {
  :root { --notice-space: 190px; }
  .event-notice { grid-template-columns: 1fr; gap: 10px; padding: 16px 19px; text-align: center; }
  .event-notice h2 { font-size: 15px; }
  .event-notice p { font-size: 11px; margin-top: 4px; }
  .event-notice a { justify-self: center; padding: 10px 16px; font-size: 12px; }
}
/* Let the parchment grow with the form instead of constraining it to the image ratio. */
.unlock-paper { scrollbar-width: none; }
.unlock-paper::-webkit-scrollbar { display: none; }
@media (max-height: 560px) {
  .unlock-paper { padding-top: 42px; padding-bottom: 36px; }
  .unlock-form { gap: 7px; }
  .unlock-form h2 { font-size: 18px; margin-bottom: 2px; }
  .paper-close { top: 28px; }
}
/* Extend only the texture; keep the existing content and button coordinates. */
.event-notice { isolation: isolate; background: none; border-radius: 0; box-shadow: none; }
.event-notice::before { inset: 0 auto calc(-1 * max(12px, env(safe-area-inset-bottom))) 50%; width: 100vw; transform: translateX(-50%); z-index: -1; border: 0; border-top: 1px solid #ad853a; border-radius: 0; background: linear-gradient(90deg, #48090855, #48090811), url('nancy-event-bg.webp') center / cover, #740d0a; box-shadow: 0 -5px 24px #0005; }
/* Keep the complete paper and its controls aligned inside transparent margins. */
.unlock-paper,.unlock-paper:has(.mystery-music-toggle) {background-size:100% 100%;padding:110px 55px 76px;min-height:500px;}
.unlock-paper .paper-close {top:64px;right:40px;}
.unlock-paper .mystery-music-toggle {top:68px;left:40px;}
@media(max-width:480px){
 .unlock-paper,.unlock-paper:has(.mystery-music-toggle){padding:105px 28px 70px;min-height:470px;}
 .unlock-paper .paper-close{right:20px;top:58px;}
 .unlock-paper .mystery-music-toggle{left:22px;top:62px;}
}
@media(max-height:560px){
 .unlock-paper,.unlock-paper:has(.mystery-music-toggle){min-height:0;padding-top:85px;padding-bottom:55px;}
 .unlock-paper .paper-close{top:42px;}
 .unlock-paper .mystery-music-toggle{top:46px;}
}