html,body{margin:0;height:100%;background:#050505;overflow:hidden;font-family:'IBM Plex Mono',monospace;-webkit-font-smoothing:antialiased}
#viewport{position:fixed;inset:0;background:#050505}
#stage{width:1180px;height:760px;position:absolute;left:50%;top:50%;overflow:hidden;background:#050505}

/* ── motion ───────────────────────────────────────────────────── */
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.045);opacity:1}}
@keyframes coreGlow{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes drift{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(0)}}
@keyframes blink4{0%,93.5%{opacity:0}94.5%,97.5%{opacity:1}98.5%,100%{opacity:0}}
@keyframes blink4inv{0%,93.5%{opacity:1}94.5%,97.5%{opacity:0}98.5%,100%{opacity:1}}
@keyframes handWave{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(3.2deg)}}
@keyframes beadLight{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}60%{opacity:.5;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:.38;transform:translate(-50%,-50%) scale(1)}}
@keyframes charRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ringGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,45,22,.75)) drop-shadow(0 0 18px rgba(255,45,22,.4))}50%{filter:drop-shadow(0 0 14px rgba(255,45,22,.95)) drop-shadow(0 0 42px rgba(255,45,22,.6))}}
@keyframes twinkle{0%,100%{opacity:.08;transform:scale(.6) rotate(0deg)}50%{opacity:.95;transform:scale(1.2) rotate(18deg)}}
@keyframes swirlFlowL{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}30%{transform:translate(34px,-44px) rotate(3deg) scale(1.04)}65%{transform:translate(-26px,-14px) rotate(-2.4deg) scale(1.01)}}
@keyframes swirlFlowR{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}35%{transform:translate(-40px,-36px) rotate(-3.2deg) scale(1.05)}70%{transform:translate(22px,-10px) rotate(2deg) scale(1.01)}}
@keyframes dotPulse{0%,80%,100%{opacity:.15}40%{opacity:.9}}
@keyframes trailFade{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(40deg)}}
@keyframes burst{0%{opacity:.9;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
@keyframes starAway{0%{opacity:.9;transform:translate(-50%,-50%) translateY(0) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translateY(var(--fly,-340px)) scale(.5) rotate(50deg)}}
@keyframes skipPulse{0%,100%{opacity:.4}50%{opacity:.8}}

/* ── boot ─────────────────────────────────────────────────────── */
#boot{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#050505;transition:opacity 1s ease}
#boot.gone{opacity:0;pointer-events:none}
#bootTitle{font:400 12px 'IBM Plex Mono',monospace;letter-spacing:.55em;color:rgba(230,200,119,.7);text-indent:.55em}
#bootLine{width:220px;height:1px;background:rgba(232,226,214,.12);position:relative}
#bootLine>i{position:absolute;left:0;top:0;bottom:0;width:0%;background:#ff3b26;transition:width .3s ease}
#bootPct{font:400 9px 'IBM Plex Mono',monospace;letter-spacing:.3em;color:rgba(232,226,214,.35)}

/* ── stage layers ─────────────────────────────────────────────── */
.cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
#camFg{filter:saturate(.55) contrast(1.08) brightness(.92)}
#veil{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 42%, #0d0a0a 0%, #060505 60%, #050505 100%);transition:opacity .3s linear}
#veil.slow{transition:opacity 4s ease}
#field{position:absolute;inset:0;overflow:hidden}
#field.frozen #figure,#field.frozen #figure *,#field.frozen #swl,#field.frozen #swr,#field.frozen #ring,#field.frozen #ring>img,#field.frozen #bgc>img{animation-play-state:paused!important}
#swirlWrap{position:absolute;inset:0;transition:opacity .3s linear,filter 2.5s ease}
#swirlWrap.drained{filter:saturate(0) brightness(.7)}
.slam{position:absolute;inset:0;transition:transform .75s cubic-bezier(.16,1.3,.3,1),opacity .45s ease}
.slam.off-l{transform:translateX(-460px);opacity:0}
.slam.off-r{transform:translateX(460px);opacity:0}
#swl,#swr{position:absolute}
#swl{transform-origin:20% 80%;animation:swirlFlowL 26s ease-in-out infinite}
#swr{transform-origin:80% 80%;animation:swirlFlowR 31s ease-in-out infinite 4s}
#swl>img,#swr>img{display:block;width:100%;pointer-events:none}
#swl>img{-webkit-mask-image:linear-gradient(270deg,transparent,black 90px);mask-image:linear-gradient(270deg,transparent,black 90px)}
#swr>img{-webkit-mask-image:linear-gradient(90deg,transparent,black 110px);mask-image:linear-gradient(90deg,transparent,black 110px)}
.tw{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.tw>span{display:inline-block;line-height:1;color:#e8c832;text-shadow:0 0 8px rgba(232,200,50,.9),0 0 22px rgba(232,200,50,.45);animation:twinkle var(--dur) ease-in-out infinite var(--delay)}
#camMask{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.6s linear;
  -webkit-mask-image:url('../layers/body.png'),url('../layers/face-open.png'),url('../layers/hand-right.png'),url('../layers/ring.png'),url('../layers/cloud-eye.png');
  mask-image:url('../layers/body.png'),url('../layers/face-open.png'),url('../layers/hand-right.png'),url('../layers/ring.png'),url('../layers/cloud-eye.png');
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#camMask .tintA{position:absolute;inset:0;background:radial-gradient(ellipse 62% 55% at 50% 38%, rgba(168,40,26,.08) 0%, rgba(120,26,16,.32) 62%, rgba(20,6,4,.72) 100%);mix-blend-mode:multiply}
#camMask .tintB{position:absolute;inset:0;background:linear-gradient(180deg, rgba(232,200,50,.10) 0%, rgba(255,45,22,.06) 45%, rgba(0,0,0,.25) 100%)}
#bgc{position:absolute;z-index:3;transition:opacity .3s linear,filter .5s ease}
#bgc>img{display:block;width:100%;animation:drift 17s ease-in-out infinite;pointer-events:none}
#ringWrap{position:absolute;inset:0;pointer-events:none;transition:opacity .3s linear,filter 2s ease}
#ringWrap.locked{filter:brightness(1.35)}
#ring{position:absolute;animation:coreGlow 8s ease-in-out infinite}
#ring>img{display:block;width:100%;animation:ringGlow 6s ease-in-out infinite;pointer-events:none}
#ringBurst{position:absolute;border-radius:50%;border:2px solid rgba(255,59,38,.9);opacity:0;pointer-events:none}
#ringBurst.go{animation:burst .6s ease-out}
#figureIn{position:absolute;inset:0;transition:transform .85s cubic-bezier(.2,1.25,.35,1),opacity .5s ease,filter .85s ease}
#figureIn.off{transform:scale(1.16);opacity:0;filter:blur(10px)}
#figure{position:absolute;inset:0;pointer-events:none;animation:breathe 8s ease-in-out infinite}
#bodyGroup,#headGroup{position:absolute;inset:0;pointer-events:none;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
#bodyGroup{z-index:1}#headGroup{z-index:2}
#bodyImg,#rhandImg,#lhandImg{position:absolute;transition:opacity .3s linear}
#rhandImg{transform-origin:52% 94%;animation:handWave 9s ease-in-out infinite}
#lhandImg{display:none}
#field .ash{-webkit-mask-image:linear-gradient(0deg,transparent 42%,black 58%);mask-image:linear-gradient(0deg,transparent 42%,black 58%);-webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-position:50% 0%;mask-position:50% 0%;transition:opacity .3s linear,-webkit-mask-position 4.5s ease-in,mask-position 4.5s ease-in}
#field .ash.gone{-webkit-mask-position:50% 100%;mask-position:50% 100%}
#face{position:absolute;transition:opacity .3s linear}
#face.slowfade{transition:opacity 2.2s ease}
#face>img{display:block;width:100%;pointer-events:none;transition:opacity .6s ease}
#faceClosed{position:absolute;left:0;top:0;width:100%;opacity:0}
#face.live #faceOpen{animation:blink4inv 9s steps(1) infinite}
#face.live #faceClosed{animation:blink4 9s steps(1) infinite}
#face.shut #faceOpen{opacity:0!important;animation:none}
#face.shut #faceClosed{opacity:1!important;animation:none}
#face.flash #faceOpen{opacity:0!important}
#face.flash #faceClosed{opacity:1!important}

/* ── oracle / chat ────────────────────────────────────────────── */
#oracle{position:absolute;inset:0;z-index:4;pointer-events:none}
#prayerLine{position:absolute;left:50%;bottom:118px;transform:translate(-50%,0);transition:opacity 1.6s ease,transform 1.8s ease;display:flex;gap:3px;max-width:560px;flex-wrap:wrap;justify-content:center}
#prayerLine span{font:400 14px 'Noto Serif SC',serif;color:rgba(240,230,207,.55);text-shadow:0 0 12px rgba(232,200,50,.25);animation:charRise .3s ease both}
.bead{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,237,176,.85) 0%,rgba(232,200,50,.5) 40%,rgba(232,200,50,0) 70%);opacity:0}
#reply{position:absolute;right:110px;top:110px;writing-mode:vertical-rl;font:400 21px/2 'Noto Serif SC',serif;color:#f0e6cf;text-shadow:0 2px 18px rgba(0,0,0,.85);letter-spacing:.14em;transition:opacity 1.6s ease;max-height:520px}
#reply span{opacity:0}
#replyEn{position:absolute;left:50%;top:150px;transform:translateX(-50%);max-width:560px;text-align:center;font:italic 500 21px/1.55 'Cormorant Garamond',serif;color:#efe8d8;text-shadow:0 2px 18px rgba(0,0,0,.85);transition:opacity 1.6s ease;opacity:0}
#typing{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;font:400 9px 'IBM Plex Mono',monospace;letter-spacing:.26em;color:rgba(232,226,214,.45);opacity:0;transition:opacity .5s ease}
#typing.show{opacity:1}
#typing i{width:3px;height:3px;border-radius:50%;background:rgba(230,200,119,.8);animation:dotPulse 1.3s ease-in-out infinite;font-style:normal}
#typing i:nth-child(2){animation-delay:.2s}
#typing i:nth-child(3){animation-delay:.4s}
#typing.stall i{animation-play-state:paused;opacity:.15}
#mirrorNote{position:absolute;left:50%;top:47%;transform:translateX(-50%);font:400 10px 'IBM Plex Mono',monospace;letter-spacing:.24em;color:rgba(232,226,214,.4);opacity:0;transition:opacity 2s ease}
#mirrorNote.show{opacity:1}

/* ── summon overlays ──────────────────────────────────────────── */
#comet{position:absolute;z-index:24;width:7px;height:7px;border-radius:50%;background:#ff5a41;box-shadow:0 0 14px 5px rgba(255,59,38,.8),0 0 40px 12px rgba(255,59,38,.35);pointer-events:none;display:none}
#comet.gold{background:#ffe9a8;box-shadow:0 0 16px 6px rgba(232,200,50,.9),0 0 46px 14px rgba(232,200,50,.4)}
.trail{position:absolute;z-index:23;pointer-events:none;color:#e8c832;text-shadow:0 0 10px rgba(232,200,50,.9);animation:trailFade .9s ease-out both;transform:translate(-50%,-50%)}
#flash{position:absolute;inset:0;z-index:25;background:radial-gradient(ellipse at 50% 42%, #fff7e0 0%, #f0e0b0 45%, rgba(240,224,176,0) 100%);opacity:0;pointer-events:none;transition:opacity .65s ease-out}
#flash.hit{transition:none;opacity:1}
#titleCard{position:absolute;inset:0;z-index:22;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none;opacity:0;transform:scale(.94);transition:opacity .6s ease,transform .7s cubic-bezier(.2,1.3,.4,1)}
#titleCard.show{opacity:1;transform:scale(1)}
#tcName{font:600 54px 'Cormorant Garamond',serif;letter-spacing:.42em;text-indent:.42em;color:#e6c877;text-shadow:0 0 30px rgba(201,164,74,.35)}
#tcSub{font:400 10px 'IBM Plex Mono',monospace;letter-spacing:.34em;color:rgba(230,200,119,.6)}
#tcRule{width:280px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,164,74,.6),transparent)}
#tcVo{min-height:56px;max-width:600px;text-align:center;font:italic 500 19px/1.6 'Cormorant Garamond',serif;color:#f0e6cf;padding-top:6px}
#tcVo.zh{font:400 17px/1.9 'Noto Serif SC',serif;letter-spacing:.1em}

/* ── HUD ──────────────────────────────────────────────────────── */
#hud{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;z-index:8;opacity:0;transition:opacity 1.2s ease}
#hud.show{opacity:1}
#hudTop{display:flex;justify-content:space-between;align-items:flex-end;padding:20px 30px 12px;margin:0 22px;border-bottom:1px solid rgba(201,164,74,.28)}
#hudTitle{font:600 19px 'Cormorant Garamond',serif;letter-spacing:.4em;color:#e6c877}
#hudSub{font:400 8.5px 'IBM Plex Mono',monospace;letter-spacing:.3em;color:rgba(230,200,119,.55);margin-top:3px}
#hudDiv{display:flex;align-items:baseline;gap:8px}
#hudDiv>span:first-child{font:400 8.5px 'IBM Plex Mono',monospace;letter-spacing:.24em;color:rgba(230,200,119,.5)}
#divPct{font:600 17px 'Cormorant Garamond',serif;color:#e6c877}
#camBtn{position:absolute;left:26px;bottom:88px;pointer-events:auto;padding:8px 13px;border-radius:9px;background:rgba(8,7,5,.55);border:1px solid rgba(201,164,74,.4);color:rgba(224,200,126,.8);font:500 9px 'IBM Plex Mono',monospace;letter-spacing:.2em;cursor:pointer;backdrop-filter:blur(4px)}
#unveilBtn{position:absolute;right:26px;bottom:88px;pointer-events:auto;padding:8px 13px;border-radius:9px;background:rgba(168,40,26,.8);border:1px solid rgba(212,69,47,.8);color:#f5e9dc;font:500 9px 'IBM Plex Mono',monospace;letter-spacing:.2em;box-shadow:0 0 14px rgba(255,45,22,.25);cursor:pointer}
#unveilBtn.hidden{display:none}
#muteBtn{position:absolute;right:30px;top:64px;pointer-events:auto;background:none;border:none;color:rgba(230,200,119,.5);font:400 12px 'IBM Plex Mono',monospace;cursor:pointer;letter-spacing:.1em}
#skipBtn{position:absolute;right:30px;top:20px;z-index:28;pointer-events:auto;background:none;border:none;color:rgba(232,226,214,.5);font:400 9px 'IBM Plex Mono',monospace;letter-spacing:.3em;cursor:pointer;display:none;animation:skipPulse 2.4s ease-in-out infinite}
#skipBtn.show{display:block}
#aboutLink{position:absolute;left:30px;top:22px;z-index:28;font:400 9px 'IBM Plex Mono',monospace;letter-spacing:.3em;color:rgba(232,226,214,.35);text-decoration:none}
#aboutLink:hover{color:#c9a44a}
#camErr{position:absolute;left:0;right:0;bottom:64px;text-align:center;font:400 9px 'IBM Plex Mono',monospace;color:rgba(255,59,38,.8);display:none;z-index:9}

/* ── chat bar ─────────────────────────────────────────────────── */
#chatBar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:560px;z-index:26;display:flex;align-items:center;gap:12px;padding:11px 11px 11px 18px;border-radius:12px;background:rgba(8,7,5,.62);border:1px solid rgba(201,164,74,.45);backdrop-filter:blur(6px);opacity:0;transition:opacity 1s ease,border-color .4s ease}
#chatBar.show{opacity:1}
#chatBar.lock{pointer-events:none;opacity:.35}
#chatInput{flex:1;background:none;border:none;outline:none;font:italic 400 16px 'Cormorant Garamond',serif;color:#f0e6cf;caret-color:#ff3b26;min-width:0}
#chatInput::placeholder{color:rgba(240,230,207,.4)}
#sendBtn{width:30px;height:30px;flex:none;border-radius:8px;background:rgba(255,45,22,.14);border:1px solid #ff3b26;display:grid;place-items:center;color:#ff3b26;font-size:11px;cursor:pointer}
#keepsakeBtn{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);z-index:26;padding:10px 18px;border-radius:9px;background:rgba(8,7,5,.6);border:1px solid rgba(201,164,74,.55);color:#e0c87e;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.22em;cursor:pointer;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity 1.5s ease}
#keepsakeBtn.show{opacity:1;pointer-events:auto}

/* ── adjust panel ─────────────────────────────────────────────── */
#adjPanel{position:absolute;left:24px;top:76px;z-index:9;display:none;flex-direction:column;gap:8px;padding:12px 14px;border-radius:8px;background:rgba(10,8,5,.78);border:1px solid rgba(201,164,74,.35);backdrop-filter:blur(4px)}
#adjPanel.avail{display:flex}
@media(hover:none){#adjPanel.avail{display:none}}
#adjToggle{padding:7px 12px;border-radius:6px;background:transparent;border:1px solid rgba(201,164,74,.7);color:#e8c832;font:600 9.5px 'IBM Plex Mono',monospace;letter-spacing:.18em;cursor:pointer}
#adjToggle.on{background:#e8c832;color:#111}
#adjBody{display:none;flex-direction:column;gap:7px;width:196px}
#adjBody.show{display:flex}
#adjBody .hint{font:400 9.5px/1.8 'Noto Serif SC',serif;color:rgba(230,200,119,.75)}
.slrow{display:flex;align-items:center;gap:8px}
.slrow>label{font:400 9px 'IBM Plex Mono',monospace;width:36px}
.slrow>input{flex:1}
.slrow>output{font:400 9px 'IBM Plex Mono',monospace;color:rgba(232,226,214,.7)}
#adjCoords{font:400 9px/1.8 'IBM Plex Mono',monospace;color:rgba(232,226,214,.55)}
#adjReset{padding:6px 10px;border-radius:6px;background:transparent;border:1px solid rgba(255,59,38,.6);color:#ff3b26;font:600 9px 'IBM Plex Mono',monospace;letter-spacing:.16em;cursor:pointer}