*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:#563b25;font-family:Georgia,'Times New Roman',serif}body{min-height:100vh;background:#ead5aa;background-image:radial-gradient(circle at 18% 16%,#fff9e8aa 0 8%,transparent 32%),radial-gradient(circle at 82% 30%,#c59d5d22 0 2%,transparent 30%),radial-gradient(circle at 42% 78%,#fff4d477 0 3%,transparent 35%),linear-gradient(105deg,#e7cfa2,#f7e8c7 46%,#dfc18c);background-attachment:fixed}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:repeating-linear-gradient(8deg,transparent 0 7px,#8b64220b 8px 9px),repeating-linear-gradient(91deg,transparent 0 11px,#fff8e80c 12px 13px);mix-blend-mode:multiply}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid #805826;outline-offset:4px}main{min-height:100vh}.screen{display:none;min-height:100vh;padding:42px 3.5% 48px;text-align:center}.screen.active{display:block}.calligraphic{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:normal;font-size:clamp(42px,5vw,76px);letter-spacing:.015em;margin:5px 0 12px}.intro{font-size:clamp(22px,2vw,31px);margin:0 0 34px}.eyebrow{font:12px Arial,sans-serif;letter-spacing:.28em;margin:0 0 18px}h1{font-weight:normal;font-size:clamp(30px,3vw,52px);line-height:1.3;margin:14px auto 28px}#keyGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px;max-width:1680px;margin:auto}.key{position:relative;min-width:0;padding:20px 12px 22px;border:0;background:linear-gradient(#fff8e5dd,#f0dbb5cc);clip-path:polygon(3% 0,97% 0,100% 3%,100% 97%,97% 100%,3% 100%,0 97%,0 3%);box-shadow:inset 0 0 0 1px #b48b4c,inset 0 0 0 5px #f8e9c8,inset 0 0 0 6px #b48b4c,0 5px 14px #69471e20;transition:transform .18s,filter .18s}.key:before,.key:after{content:"❦";position:absolute;font-size:20px;color:#a57532;opacity:.7}.key:before{top:4px;left:8px}.key:after{bottom:4px;right:8px;transform:rotate(180deg)}.key:hover{transform:translateY(-3px);filter:brightness(1.04)}.key.selected{box-shadow:inset 0 0 0 2px #93621d,inset 0 0 0 7px #f8e9c8,inset 0 0 0 8px #93621d,0 0 22px #c7943c88}.key img{height:145px;width:100%;object-fit:contain}.key span{display:block;font-size:15px;line-height:1.45;padding-top:12px}
#doors{padding-top:28px}#doorGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:1740px;margin:12px auto 18px;align-items:end}.door{position:relative;min-width:0}.door img{width:100%;height:clamp(300px,31vw,520px);object-fit:contain;filter:drop-shadow(0 10px 8px #55341442)}.gem-glow{position:absolute;left:50%;top:51.5%;width:9%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.door.activated .gem-glow{animation:gemHint 3.6s ease-in-out infinite}.door.locked,.door.activated{opacity:1}#doorKeys{display:flex;gap:26px;justify-content:center;max-width:960px;margin:8px auto}.door-key{width:min(28%,250px);padding:12px;background:linear-gradient(#fff7e2dd,#ead1a6cc);border:1px solid #ae8143;border-radius:10px;box-shadow:0 4px 14px #63401822}.door-key img{height:120px;width:100%;object-fit:contain}.door-key span{display:block;font-size:14px;line-height:1.4;margin-top:7px}
#journey{max-width:1160px;margin:auto;padding-top:55px}#scene{font-size:clamp(27px,2.5vw,40px);text-align:left;max-width:980px;margin-bottom:28px}#choices{display:grid;gap:13px;max-width:980px;margin:auto}#choices button{text-align:left;padding:20px 22px;font-size:clamp(16px,1.3vw,20px);line-height:1.55;background:#fff9edcf;border:1px solid #ad7d39;border-radius:8px;transition:transform .15s,background .15s}#choices button:hover{transform:translateX(4px);background:#fff3d8}#choices strong{color:#9c6d27;padding-right:10px}.site-mark{font:12px Arial,sans-serif;letter-spacing:.12em;margin-top:16px;color:#795e40}
#keyRack{position:relative;width:min(94%,980px);height:190px;margin:25px auto 0;background:url('HR360_KEYRACK_MASTER.png') center/contain no-repeat}.rack-stone{position:absolute;right:8%;top:33%;width:10%;aspect-ratio:1;border-radius:50%;pointer-events:none}.rack-stone.flash{animation:stoneFlash 1.4s ease-out}.rack-hook{position:absolute;top:48%;width:12px;height:34px;border:3px solid #b8791f;border-top:0;border-radius:0 0 9px 9px;filter:drop-shadow(0 2px 2px #5a310d66);animation:hookIn .45s both}.rack-key{position:absolute;top:55%;width:54px;height:82px;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 3px 3px #4e2d1255);animation:keyDrop .75s both}
#result{position:fixed;inset:0;padding:0;z-index:50;background:#020817;color:white;overflow:hidden}#result.active{display:block}#aurora{position:absolute;inset:0;width:100vw;height:100vh;object-fit:cover;background:#020817}.result-reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5vh 5vw;background:linear-gradient(180deg,#02081708,#02081722 55%,#02081755);opacity:0;pointer-events:none;transition:opacity 1.8s ease}.result-reveal.visible{opacity:1;pointer-events:auto}#indices{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,3vw,48px);font-size:clamp(32px,5vw,68px);text-shadow:0 3px 18px #000;margin-bottom:24px}#indices span{opacity:0;transform:translateY(10px);animation:revealValue 1s forwards}#finalLine{font-size:clamp(20px,2.2vw,34px);text-shadow:0 2px 14px #000;margin:18px 0 30px;opacity:0;animation:revealValue 1.2s 3.1s forwards}#result button{padding:13px 22px;border:1px solid #e9eef5aa;border-radius:8px;background:#06182a99;color:white;backdrop-filter:blur(5px);font-size:17px}#keepsake{opacity:0;animation:revealValue 1.2s 4.1s forwards}#cardsEpilogue{margin-top:18px;padding:15px 20px;background:#06182a88;border-radius:12px;backdrop-filter:blur(6px)}#cardsEpilogue p{font-size:20px;margin:0 0 12px}#keyCards{display:flex;gap:12px;justify-content:center;margin-top:14px}#keyCards a{display:block}#keyCards img{height:min(34vh,310px);max-width:28vw;object-fit:contain;border-radius:8px;box-shadow:0 5px 20px #0008}
#rotateNotice{display:none}
@keyframes gemHint{0%,72%,100%{box-shadow:0 0 0 0 #fff7cf00}84%{box-shadow:0 0 15px 5px #fff0a0cc}90%{box-shadow:0 0 27px 10px #fff4bd99}}@keyframes stoneFlash{0%{box-shadow:0 0 0 #fff}35%{box-shadow:0 0 42px 18px #fff8d9}100%{box-shadow:0 0 0 #fff0}}@keyframes hookIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}@keyframes keyDrop{from{opacity:0;transform:translate(-50%,-24px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes revealValue{to{opacity:1;transform:none}}
@media(max-width:1000px){#keyGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.door img{height:34vw}#keyRack{height:155px}.rack-key{width:44px;height:68px}}
@media(max-width:700px) and (orientation:portrait){#rotateNotice{display:flex;position:fixed;inset:0;z-index:9999;background:#ead5aa;align-items:center;justify-content:center;text-align:center;padding:30px}#rotateNotice div{display:grid;gap:12px}#rotateNotice strong{font-size:30px;font-weight:normal}#rotateNotice span{font-size:18px}}
@media(max-height:600px) and (orientation:landscape){.screen{padding-top:18px}.calligraphic{font-size:40px}.intro{font-size:19px;margin-bottom:16px}#keyGrid{grid-template-columns:repeat(7,1fr);gap:8px}.key{padding:9px 6px}.key img{height:72px}.key span{font-size:10px}.door img{height:42vh}#doorKeys .door-key img{height:70px}#journey{padding-top:16px}#scene{font-size:24px;margin-bottom:12px}#choices{gap:7px}#choices button{padding:10px 14px;font-size:14px}#keyRack{height:100px;margin-top:8px}.site-mark{margin-top:5px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* FINAL 2026-10-18: artifact vitrine, no hooks */
.key:before,.key:after{display:none!important}
#keyRack{height:auto;min-height:250px;background:none!important;margin-top:26px}
.master-key{position:relative;width:min(78%,760px);height:112px;margin:0 auto 8px;background:url('HR360_KEYRACK_MASTER.png') center/contain no-repeat}
.master-key .rack-stone{right:7.5%;top:28%;width:9%}
.key-vitrine{width:min(96%,920px);min-height:118px;margin:0 auto;padding:18px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));align-items:center;justify-items:center;gap:12px 18px;border:7px ridge #a46a20;border-radius:12px;background:radial-gradient(ellipse at 50% 18%,#7d2635,#4b101c 70%,#2b0810);box-shadow:inset 0 0 0 3px #d4a75a,inset 0 8px 30px #18030999,0 8px 18px #5c371f44}
.vitrine-key{width:min(100%,92px);height:92px;object-fit:contain;filter:drop-shadow(0 4px 4px #170307aa);animation:keyDrop .65s both}
#resultActions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}#fragmentHint,#fragmentConfirm{font-size:20px;text-shadow:0 2px 12px #000}#fragmentConfirm button{margin:5px}.fragment-mode #indices,.fragment-mode #finalLine,.fragment-mode #resultActions,.fragment-mode #cardsEpilogue{opacity:0;pointer-events:none}.fragment-mode{background:transparent}.fragment-mode #fragmentHint,.fragment-mode #fragmentConfirm{opacity:1;pointer-events:auto}
#keyCards{max-width:94vw;max-height:42vh;overflow:auto;flex-wrap:wrap;padding:10px}#keyCards img{height:min(30vh,280px)}
@media(max-width:1000px){#keyRack{height:auto}.master-key{height:90px}.vitrine-key{height:70px}}

/* Numeric final results fit the original aurora screen. */
#indices{max-width:1100px;width:100%;gap:14px 30px;align-items:baseline}
#indices .generation-result{margin:0;white-space:nowrap}
#indices .game-result-note,#indices .review-status{flex-basis:100%;max-width:780px;margin:4px auto;font:16px/1.45 Georgia,serif}
.result-reveal{overflow-y:auto}
[hidden]{display:none!important}
@media(max-height:600px){#indices{font-size:32px;margin-bottom:8px}#indices .game-result-note{font-size:12px}#finalLine{margin:10px 0;font-size:20px}#cardsEpilogue{margin-top:8px;padding:8px 12px}.result-reveal{justify-content:flex-start;padding-top:20px}}

.trilogy-return{position:fixed;top:12px;left:16px;z-index:100;color:#e3cfa2;font:14px Georgia;text-decoration:none;padding:8px;background:#10131dcc;border-radius:3px}

/* Allow the video to receive a click while choosing a frame. */
.result-reveal.fragment-mode{pointer-events:none}.fragment-mode #fragmentConfirm,.fragment-mode #fragmentHint{pointer-events:auto}

/* Retain the original poster when playback is unavailable; offer a user gesture retry. */
.aurora-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.aurora-status{position:fixed;z-index:110;bottom:12px;left:50%;transform:translateX(-50%);max-width:94vw;width:max-content;padding:10px 14px;background:#071320ed;color:#fff;text-align:center;border:1px solid #e3cfa2;border-radius:8px;font:16px/1.4 Georgia,serif}
.aurora-status span{display:block;margin-bottom:6px}.aurora-status button{font-size:16px}

/* Keep the moving video separate from static controls; avoid per-frame backdrop blur. */
#result{isolation:isolate}
#aurora{transform:translateZ(0);backface-visibility:hidden}
#result button,#cardsEpilogue{backdrop-filter:none;-webkit-backdrop-filter:none}

/* Keep the adventure's expressive title, with calmer instructions and questions. */
h1{font-size:clamp(23px,1.9vw,26px)}
.calligraphic{font-size:clamp(26px,2.5vw,34px)}
.intro{font-size:clamp(18px,1.6vw,21px)}
#scene{font-size:clamp(21px,1.9vw,26px);line-height:1.5}
#finalLine{font-size:clamp(18px,1.7vw,23px)}
#rotateNotice strong{font-size:22px}

/* Keep the result readable beneath the return controls, even on short screens. */
.result-reveal {
  top: var(--navigator-return-height, 52px);
  justify-content: safe center;
}
.result-reveal > * { flex-shrink: 0; }
@media (max-height: 600px) {
  .result-reveal { justify-content: flex-start; }
}