:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #243322; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
main { width: 100%; min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); text-align: center; }
header { align-self: end; padding: 20px 16px; }
h1 { transform: translateY(clamp(-2rem, -3vh, -.75rem)); margin: 0; font-size: 19px; font-weight: 600; color: #387f32; letter-spacing: .025em; }
.stage { display: grid; place-items: center; }
#disk { position: relative; width: min(92vw, calc(100svh - 220px), 650px); aspect-ratio: 1; border-radius: 50%; border: 1px solid #9da594; background: #f1f5e8; box-shadow: inset 0 0 8px #7a86765c, 0 2px 7px #26392724; container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#surface { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
#scratch-rim { position: absolute; inset: 0; border: 10px solid #81916a0a; border-radius: 50%; z-index: 2; pointer-events: none; }
#scratch-rim:focus-visible { outline: 2px solid #46752e; outline-offset: 3px; }
#disk.scratching { cursor: grabbing; box-shadow: inset 0 0 12px #687c575c, 0 2px 7px #26392724; }
#disk.scratching .word { cursor: grabbing; }
.artwork { position: absolute; inset: 0; background: url('assets/paperclips.png') center / cover; opacity: .1; pointer-events: none; }
.veil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#words { position: absolute; inset: 0; }
.word { position: absolute; left: 50%; top: 50%; padding: .15em .08em; margin: 0; border: 0; background: transparent; font: 400 2.5663319cqw/1 Arial, Helvetica, sans-serif; color: #18251a; white-space: nowrap; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; transform-origin: center; }
.word[data-place="rim"] { color: #578b3d; font-size: 1.72425cqw; }
.word:focus-visible { outline: 1px solid #387f32; border-radius: 3px; background: #fff9; }
.word:disabled { cursor: default; }
footer { align-self: start; padding: 12px 16px 20px; }
.controls { display: flex; align-items: center; justify-content: center; gap: 16px; }
.controls button { border: 0; min-height: 40px; padding: 8px 10px; font: inherit; font-size: 1.015625rem; background: none; color: #3c6933; cursor: pointer; border-radius: 4px; }
.controls button:hover:not(:disabled), .controls button:focus-visible { background: transparent; }
.controls button:disabled { opacity: .35; cursor: default; }
.separator { color: #9aab91; }
#hint { min-height: 2.5em; margin: 5px auto 0; max-width: 430px; font-size: 1.015625rem; line-height: 1.6; color: #65705e; }
#audio-status { margin: 0; font-size: .9375rem; color: #865230; }
@media(max-width: 500px) { #hint { max-width: 300px; } }
@media(max-height: 500px) and (min-width: 600px) {
  main { grid-template-rows: 1fr; grid-template-columns: 1fr auto 1fr; align-items: center; }
  header, footer { align-self: center; padding: 14px; }
  #disk { width: min(calc(100svh - 30px), 52vw); }
  .controls { flex-wrap: wrap; gap: 2px; }
  #hint { font-size: .9375rem; }
}

.center-video { position: absolute; inset: 18%; width: 64%; height: 64%; border: 2.6cqw solid #e8c400; border-radius: 50%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 1.5s ease; }
.center-video.is-visible { opacity: 1; }
.center-video[hidden] { display: none; }

/* Keep flashing until the first successful reconstruction interaction. */
@keyframes rim-ready-flash { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.reconstruction-wait #words { animation: rim-ready-flash 500ms steps(1, end) 13s infinite; }

#begin { position: absolute; inset: 0; width: 100%; border-radius: 50%; border: 0; background: #eef3e4ee; cursor: pointer; color: #34562b; font: 400 4.625cqw/1.4 Arial, sans-serif; z-index: 3; opacity: 1; transition: opacity 1.5s ease; }
#begin small { display: block; margin-top: 10px; font-size: 3cqw; color: #727f6c; }
#begin .credit { margin-top: 2cqw; font-size: 2.4cqw; transform: translateY(3cqw); }
#begin.is-leaving { opacity: 0; pointer-events: none; }
#begin[hidden] { display: none; }

/* Introduce the instructions only once the opening interaction guard clears. */
#hint { opacity: 0; visibility: hidden; }
#hint.is-ready { visibility: visible; opacity: 1; }
#hint.is-ready.is-first-reveal { animation: hint-fade-in .6s ease both, hint-flash .5s steps(1, end) .6s 4; }
@keyframes hint-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hint-flash { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }


/* Point out Play once when the start overlay has faded. */
#pause.opening-play { animation: opening-play-blink .5s steps(1, end) 4; }
@keyframes opening-play-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

#reset.awaiting-first-move { opacity: .35; }

/* Retain the larger poem on touch devices. */
@media (hover: none), (pointer: coarse) {
  #begin { font-size: 5.55cqw; }
  #begin small:not(.credit) { font-size: 4.752cqw; }
  #begin .credit { font-size: 3.456cqw; transform: translateY(4cqw); }
  .word { font-size: 2.9715422cqw; }
  .word[data-place="rim"] { font-size: 1.9965cqw; }
}

/* Keep laptop-height layouts steady as the instructions appear and disappear. */
@media (hover: hover) and (pointer: fine) and (min-width: 600px) and (min-height: 501px) and (max-height: 950px) {
  #hint { min-height: 3.2em; }
}