/* One fixed photographic table and one independent live chime layer. */
#chimes .frame{width:max(100vw,177.78svh);height:max(56.25vw,100svh);transform:translate(-50%,-50%)}
#chimes-close-anchor{left:42%;top:13%;width:25%;height:49%}
#room-chimes{left:84.5%;top:42%;width:6%;height:14%}
#fire-chimes{left:96%;top:53%;width:6%;height:13%}
#matchbox-anchor{position:absolute;left:28.4%;top:54.8%;width:11%;height:9%}
#loose-match-anchor{position:absolute;left:38.5%;top:60%;width:5.6%;height:3.8%}
#match-interaction{position:absolute;inset:0;z-index:6;pointer-events:none}
#match-interaction[hidden]{display:none}
#match-interaction button{pointer-events:auto}
#matchbox-hit,#match-pickup{position:absolute;background:none;border:0;padding:0;min-height:30px;cursor:pointer;z-index:2}
#matchbox-hit:hover,#match-pickup:hover{filter:drop-shadow(0 0 8px #eac487)}
#match-drawer{position:absolute;border:1px solid #a38357;background:repeating-linear-gradient(0deg,#b52720 0 2px,#ceaa70 2px 5px);box-shadow:inset 0 0 0 3px #ddc8a1;transform-origin:left center;transform:translateX(0) skewY(7deg);opacity:0;transition:transform .5s ease,opacity .35s;z-index:1}
#match-interaction.box-open #match-drawer{opacity:1;transform:translateX(28%) skewY(7deg)}
/* A small clean wood patch conceals the loose match once it has been picked up. */
#match-cover{position:absolute;background-image:url(assets/chimes-table.png);background-repeat:no-repeat;opacity:0;transition:opacity .15s;pointer-events:none}
#match-interaction.has-match #match-cover{opacity:1}
#held-match{position:absolute;display:none;width:66px;height:5px;transform:rotate(30deg);transform-origin:0 50%;pointer-events:none;filter:drop-shadow(2px 3px 2px #28140e55);z-index:5}
#held-match i{position:absolute;inset:0;background:linear-gradient(#f3d7a3,#b98345);border-radius:2px}
#held-match i:before{content:'';position:absolute;left:-3px;top:-1px;width:9px;height:7px;border-radius:50%;background:#a53523}
#match-interaction.has-match #held-match{display:block}
#held-match b{display:none;position:absolute;left:-6px;bottom:1px;width:12px;height:26px;transform:rotate(-30deg);transform-origin:50% 100%;border-radius:60% 40% 50% 50%;background:radial-gradient(ellipse at 50% 80%,#e6edff 0 8%,#fff1b5 15%,#ffb540 48%,#e8661000 77%);filter:drop-shadow(0 0 6px #ffc56d);animation:match-flame .45s ease-in-out infinite alternate}
#held-match.lit b{display:block}
#held-match.flare b{animation:match-flare .3s ease-out}
#held-match.spent i:before{background:#2c211a}
#held-match em{display:none;position:absolute;left:-5px;bottom:4px;width:9px;height:35px;border-left:2px solid #ded6c080;border-radius:50%;transform:rotate(-30deg)}
#held-match.smoking em{display:block;animation:match-smoke 1s ease-out forwards}
@keyframes match-flame{to{transform:rotate(-26deg) scale(.88,1.1)}}
@keyframes match-flare{from{transform:rotate(-30deg) scale(1.8);opacity:1}to{transform:rotate(-30deg) scale(1);opacity:1}}
@keyframes match-smoke{to{transform:translate(-5px,-32px) rotate(-45deg) scale(2);opacity:0}}
#wick-targets button{position:absolute;min-width:32px;min-height:32px;width:32px;height:32px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;padding:0}
#wick-targets button:hover,#wick-targets button:focus-visible{box-shadow:0 0 10px #ffcf7f60}
#wick-targets button.warming{box-shadow:0 0 13px #ffcf7f90;background:#ffcf7f10}
#match-actions{position:absolute;bottom:125px;left:50%;transform:translateX(-50%);text-align:center;min-width:270px;color:#f1e0c1;text-shadow:0 2px 5px #211409}
#match-actions p{margin:0 0 8px;font:italic 14px Georgia}
#match-actions button{background:#20150f66;border:1px solid #d2b78a44;border-radius:3px;padding:8px 12px;margin:0 5px;font-size:12px}
#chimes-controls{bottom:58px}#chimes-controls p{display:none}
body[data-view=chimes] .timeline{display:none}
@media(max-width:650px){#chimes .frame{width:150vw;height:84.375vw;top:42%;transform:translate(-52%,-50%)}#chimes-controls{bottom:75px;z-index:8}#match-actions{bottom:155px}#chimes-close-anchor{left:42%;top:13%;width:25%;height:49%}}
@media(prefers-reduced-motion:reduce){#held-match b,#held-match em{animation:none}#match-drawer{transition:none}}
#match-pickup{touch-action:none}
#chimes-close-anchor:after{content:'';position:absolute;left:30%;bottom:1%;width:40%;height:2%;background:#24170c;border-radius:50%;filter:blur(3px);opacity:.2}
/* Questions pause the match ritual, with one shared beat for audio and movement. */
#candle-quiz{height:auto;width:min(460px,calc(100vw - 32px));max-height:85svh;overflow:auto;border:1px solid #c7ab7955;border-radius:8px;padding:30px;background:#f1e7d4;color:#392a1c;box-shadow:0 16px 70px #0007}
#candle-quiz::backdrop{background:#160e085e;backdrop-filter:blur(4px)}
#quiz-close{position:absolute;top:8px;right:12px;border:0;background:none;color:#6b513a;font:24px Georgia;padding:4px 8px;height:auto}
#quiz-heading{font:11px Arial;letter-spacing:.1em;color:#816448;height:auto;margin:0 0 16px}
#quiz-question{font:normal 23px/1.4 Georgia;height:auto;margin:0 0 22px}
#quiz-answers{height:auto;display:grid;gap:10px;background:transparent}
#quiz-answers button{height:auto;text-align:left;display:flex;align-items:center;gap:15px;padding:13px 15px;border:1px solid #aa8c6866;border-radius:4px;background:#fff9eb;color:#392a1c;font:15px/1.4 Georgia}
#quiz-answers button b{font:12px Arial;color:#956b3b;height:auto;background:transparent}#quiz-answers button span{height:auto;background:transparent}
#quiz-answers button:hover{background:#e5d4b6}#quiz-answers button:disabled{cursor:wait;opacity:.75}
#quiz-feedback{font:italic 13px/1.5 Georgia;color:#79573b;height:auto;min-height:20px;margin:18px 0 0;background:transparent}
#match-interaction.quiz-open #held-match{visibility:hidden}
body[data-view=chimes] #chimes{touch-action:none}
/* Enter promptly; only departure uses the twenty-second fade. */
#chimes.active{transition:opacity 1.5s ease}

/* Keep the photographic tabletop intact; no rectangular patch over the loose match. */
#match-cover,#match-drawer{display:none!important}
body[data-view=chimes] #chimes-controls,body[data-view=chimes] main>footer,body[data-view=chimes] #playback{display:none}
#room-carousel{filter:brightness(.9) saturate(.78) contrast(.88) blur(.25px);transition:opacity .7s,filter 1s}
body[data-view=chimes] #room-carousel{filter:none}
#candle-quiz{padding:42px 34px 28px;border:1px solid #bb985e;border-radius:4px;background:radial-gradient(ellipse at 50% 0,#fff9e9,transparent 65%),repeating-linear-gradient(93deg,#9d804903 0 1px,transparent 1px 4px),#eee2c9;box-shadow:inset 0 0 0 5px #eee2c9,inset 0 0 0 6px #b99a634d,0 22px 75px #100d0b88}
#candle-quiz::before{content:'✧';display:block;text-align:center;color:#a27c39;font:32px Georgia;line-height:1;margin:0 0 19px}
#candle-quiz[open]{animation:candle-question-in 1s ease both}#candle-quiz[open]::backdrop{animation:candle-backdrop-in 1s ease both;backdrop-filter:blur(1px);background:#140e0838}
#quiz-heading{text-align:center;font-size:10px;letter-spacing:.21em;color:#7d6844}#quiz-question{text-align:center;font-size:24px;line-height:1.45;text-wrap:balance}
#quiz-answers button{background:#fff9ec80;border-color:#a88c5655;box-shadow:0 2px 4px #80663c09;border-radius:3px}
#quiz-answers button b{display:grid;place-items:center;flex:none;width:27px;height:27px;border:1px solid #b79a6555;border-radius:50%;color:#796036}
#quiz-answers button:hover{background:#e3d4b8;border-color:#957843}#quiz-feedback{text-align:center}
@keyframes candle-question-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes candle-backdrop-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#candle-quiz[open]{animation-name:candle-backdrop-in}#room-carousel{transition:none}}

/* Visual placement and click targets are independent. */
#room-chimes-model-anchor{position:absolute;left:84.5%;top:42%;width:6%;height:14%;pointer-events:none}
#room-chimes{top:46%;height:12%;z-index:3}
#room-record{left:79%;top:59%;width:21%;height:16%}
/* The main-room chimes are a discoverable Easter egg. */
#room-chimes span{display:none}