:root{
  --night:#252039; --ink:#25213a; --ivory:#fffdf8; --gold:#f5dca1;
  --lavender:#9b8ce1; --mist:#e9e5ff; --glass:rgba(255,255,255,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#9bbdea}
body{font-family:"Noto Sans KR",system-ui,sans-serif;color:var(--ivory);-webkit-font-smoothing:antialiased}
button,a{font:inherit}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app,#intro,#world{position:fixed;inset:0}
#app{isolation:isolate;background:linear-gradient(#8a8bd8,#b5caf0 48%,#f4e9f9);overflow:hidden}

/* Hand-painted anime cloud film */
#intro{z-index:30;display:grid;place-items:center;cursor:pointer;overflow:hidden;background:#2c234d url("assets/intro-clouds-poster.jpg") center/cover no-repeat;transition:opacity .72s ease,visibility .72s}
#intro::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(20,15,48,.2),transparent 36%,rgba(31,22,59,.18)),radial-gradient(circle at 50% 49%,transparent 18%,rgba(18,13,43,.22) 112%);transition:opacity .8s ease}
#intro::after{content:"";position:absolute;inset:-10%;z-index:5;pointer-events:none;background:radial-gradient(circle at 50% 53%,#fffbe5 0 7%,rgba(255,225,174,.95) 19%,rgba(190,163,255,.48) 38%,rgba(255,255,255,0) 62%);opacity:0;transform:scale(.25);transition:opacity .75s ease,transform 1s cubic-bezier(.2,.7,.1,1)}
#intro.is-flaring::after{opacity:1;transform:scale(2.5)}
#intro.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.intro-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;object-fit:cover;object-position:center;transform:scale(1.012);filter:saturate(1.04) contrast(1.02);background:#2c234d url("assets/intro-clouds-poster.jpg") center/cover no-repeat}
#intro.is-opening,#intro.is-opening *{cursor:default}#intro.is-opening::before{opacity:.15}
#intro.video-failed .intro-video{display:none}
.intro-copy{position:relative;z-index:4;text-align:center;padding:24px;text-shadow:0 3px 24px rgba(35,20,71,.48)}
.intro-kicker{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:22px;opacity:0;animation:softReveal 1.4s .15s forwards}
.intro-copy h1{font-family:"Gowun Batang",serif;font-size:clamp(34px,5.2vw,72px);line-height:1.32;letter-spacing:-.055em;font-weight:700}
.intro-copy h1 span{display:block;opacity:0;filter:blur(14px);transform:translateY(12px);animation:wordReveal 2s .5s forwards}
.intro-copy h1 span+span{animation-delay:1.25s}
.enter{margin-top:34px;padding:12px 22px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(53,42,92,.2);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.25),0 12px 40px rgba(67,44,104,.15);backdrop-filter:blur(12px);cursor:pointer;opacity:0;animation:softReveal 1s 2.7s forwards;transition:background .2s,transform .2s}
.enter:hover,.enter:focus-visible{background:rgba(53,42,92,.38);transform:translateY(-2px);outline:2px solid #fff;outline-offset:4px}.enter-star{margin-right:8px;color:#fff1bd}
#intro.is-opening .intro-copy{opacity:0;filter:blur(5px);transform:scale(.98);transition:opacity .42s ease,filter .42s ease,transform .42s ease}
.journey-line{position:absolute;z-index:6;left:50%;top:50%;width:min(86vw,720px);margin:0;transform:translate(-50%,-50%);text-align:center;font-family:"Gowun Batang",serif;font-size:clamp(20px,2.45vw,34px);line-height:1.55;letter-spacing:.08em;color:#fff;text-shadow:0 3px 28px rgba(26,16,66,.72),0 0 12px rgba(255,239,201,.3);pointer-events:none}
.journey-line span{display:block;opacity:0;filter:blur(12px);transform:translateY(10px)}
#intro.is-opening .journey-line span{animation:journeyWord 2.9s .25s both}
#intro.is-opening .journey-line span+span{animation-delay:.9s}
#intro.is-flaring .journey-line{opacity:0!important;transition:opacity .28s ease}
@keyframes journeyWord{0%{opacity:0;filter:blur(12px);transform:translateY(10px);letter-spacing:.14em}18%,78%{opacity:1;filter:blur(0);transform:translateY(0);letter-spacing:.08em}100%{opacity:0;filter:blur(5px);transform:translateY(-5px);letter-spacing:.1em}}
@keyframes wordReveal{to{opacity:1;filter:blur(0);transform:none}}@keyframes softReveal{to{opacity:1}}

/* World */
#world{z-index:1;background:linear-gradient(#83bfea,#d4e9fb 70%,#fff5ef)}
#temple-canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1s ease}
#app.world-ready #temple-canvas{opacity:1}
.transition-light{position:fixed;inset:-8%;z-index:7;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(255,247,205,.9) 0 5%,rgba(255,205,143,.48) 15%,rgba(174,147,255,.42) 30%,rgba(119,97,203,.16) 48%,transparent 72%);mix-blend-mode:screen;filter:saturate(1.1);opacity:1;will-change:opacity}.transition-light.is-finished{visibility:hidden}
.world-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(80,76,160,.16),transparent 35%,rgba(255,229,246,.04)),radial-gradient(ellipse at center,transparent 42%,rgba(54,54,104,.24) 125%)}
.loading{position:absolute;inset:0;display:flex;gap:12px;align-items:center;justify-content:center;color:#3c4269;background:linear-gradient(#9ccaea,#e8eafb);transition:opacity .5s,visibility .5s}
#app.world-ready .loading{opacity:0;visibility:hidden}.loading-sigil{animation:spin 2.6s linear infinite;color:#7667c6}@keyframes spin{to{transform:rotate(360deg)}}

/* Controls */
.hud{position:fixed;inset:0;z-index:40;pointer-events:none;padding:max(22px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));display:flex;align-items:flex-start;justify-content:space-between;opacity:0;transition:opacity .5s}
#app.world-ready .hud{opacity:1}
/* replay(처음부터 보기)는 인트로가 끝난 뒤(큐브 화면)에만 표시 — 첫 화면엔 소리 컨트롤만 */
#replay{opacity:0;pointer-events:none;transition:opacity .4s}#app.sequence-done #replay{opacity:1;pointer-events:auto}.brand{display:flex;align-items:center;gap:10px;font-family:"Gowun Batang",serif;font-size:13px;letter-spacing:.18em;text-shadow:0 2px 12px rgba(40,46,80,.35)}.brand-mark{color:#fff1bb;font-size:18px}
.hud-actions{display:flex;gap:8px;pointer-events:auto}.glass-button,.skip{border:1px solid rgba(255,255,255,.42);color:#fff;background:rgba(40,47,87,.2);backdrop-filter:blur(10px);box-shadow:inset 0 1px rgba(255,255,255,.2);cursor:pointer;transition:.2s}
.glass-button{height:38px;padding:0 15px;border-radius:999px;font-size:12px;font-weight:700}.icon-button{width:38px;padding:0;font-size:17px}.glass-button:hover,.glass-button:focus-visible,.skip:hover,.skip:focus-visible{background:rgba(40,47,87,.42);outline:2px solid rgba(255,255,255,.8);outline-offset:3px}
.volume{display:flex;align-items:center;gap:7px;padding:0 13px 0 11px}.volume:hover,.volume:focus-within{background:rgba(40,47,87,.42)}.volume .icon-button{width:auto;min-width:18px;height:auto;background:none;border:0;box-shadow:none;color:#fff;cursor:pointer;font-size:16px;line-height:1}.volume .icon-button:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:3px;border-radius:6px}
.volume-slider{-webkit-appearance:none;appearance:none;width:74px;height:4px;border-radius:999px;background:rgba(255,255,255,.3);cursor:pointer;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(30,20,60,.55);cursor:pointer}.volume-slider::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(30,20,60,.55);cursor:pointer}.volume-slider:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:4px}
.skip{position:fixed;z-index:45;right:max(24px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));pointer-events:auto;border-radius:999px;padding:9px 16px;font-size:12px}.skip span{margin-left:6px}.sequence-done .skip{opacity:0;visibility:hidden}


/* Temple-specific preview typography */
.selector-heading h2,.preview-copy h3{font-family:"Gowun Batang",serif}

.fallback{position:fixed;inset:0;z-index:50;padding:12vh 8vw;background:linear-gradient(#a9a1de,#dcecf8);color:var(--ink);overflow:auto;text-align:center}.fallback nav{width:min(600px,100%);margin:28px auto;display:grid;gap:10px}.fallback a,.fallback span{display:block;padding:16px;border-radius:14px;background:rgba(255,255,255,.72);color:var(--ink);text-decoration:none}.noscript{padding:30px;color:#222;background:#fff}.is-fallback #world,.is-fallback #intro,.is-fallback .hud,.is-fallback .selector{display:none}

@media(max-width:760px){
  .brand{font-size:10px}.glass-button{padding:0 11px}.hud-actions .glass-button:first-child{font-size:0}.hud-actions .glass-button:first-child::after{content:"↻";font-size:18px}
}

/* 전체 살짝 어둡게(base-dim) + 큐브 호버 스포트라이트(spotlight) */
#base-dim{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(135% 130% at 50% 42%, rgba(24,16,52,.10), rgba(17,11,38,.32) 100%)}
#spotlight{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .42s ease;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%), rgba(10,7,30,0) 0, rgba(10,7,30,0) 105px, rgba(11,7,30,.44) 300px, rgba(11,7,30,.5) 100%)}