#cinematic{position:absolute;inset:0;z-index:30;display:grid;place-items:center;pointer-events:auto;background:#070b08cc;backdrop-filter:brightness(.64);touch-action:manipulation}
#cinematic[hidden]{display:none}
#cinematic::before,#cinematic::after{content:"";position:absolute;left:0;right:0;height:clamp(20px,7vh,64px);background:#060a07;border-bottom:1px solid #85724c55}
#cinematic::before{top:0}#cinematic::after{bottom:0;border-top:1px solid #85724c55;border-bottom:0}
.cinematic-card{position:relative;width:min(480px,90vw);text-align:center;padding:16px 24px;color:#ecdbb5;animation:reveal-oath .26s steps(6,end) both}
.cinematic-rule{width:90px;height:2px;background:#ba9b62;margin:0 auto 14px;box-shadow:0 4px #ba9b6222}
.cinematic-subtitle{letter-spacing:.22em;font-size:12px;color:#d6b776;margin:0 0 10px}
.cinematic-card canvas{display:block;width:144px;height:144px;object-fit:contain;margin:0 auto;image-rendering:pixelated;filter:drop-shadow(0 9px 0 #03050366);animation:oath-arrival .45s steps(8,end) both}
.cinematic-card h2{font-size:clamp(23px,5vw,34px);letter-spacing:.05em;line-height:1.3;margin:15px 0 9px;text-shadow:0 3px #050805}
.cinematic-detail{font-size:13px;color:#bfc7ae;line-height:1.65;min-height:22px;margin:0 0 15px;word-break:keep-all}
.cinematic-skip{min-height:48px;min-width:140px;border-color:#8d835755;background:#111b10}
.cinematic-progress{margin:20px auto 0;width:100px;height:2px;background:#b8a46b22}.cinematic-progress i{display:block;height:100%;width:0;background:#baa471}
.cinematic-victory .cinematic-rule{background:#b9d98c}.cinematic-forge .cinematic-rule{background:#e7a567}
.cinematic.still *{animation:none}
@keyframes reveal-oath{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes oath-arrival{from{opacity:.25;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-height:500px){#cinematic::before,#cinematic::after{height:14px}.cinematic-card{padding:6px 20px;max-height:94dvh}.cinematic-rule{margin-bottom:7px}.cinematic-card canvas{width:86px;height:86px}.cinematic-card h2{margin:5px 0;font-size:23px}.cinematic-subtitle,.cinematic-detail{margin-bottom:6px}.cinematic-progress{margin-top:7px}}
@media(prefers-reduced-motion:reduce){.cinematic-card,.cinematic-card canvas{animation:none}}
#cinematic.cinematic-entry{background:rgba(0,0,0,var(--entry-veil,1));backdrop-filter:none}
#cinematic.cinematic-entry::before,#cinematic.cinematic-entry::after{display:none}
.cinematic-entry-title{width:min(620px,88vw);text-align:center;color:#e5dcc5;opacity:var(--entry-caption,0);pointer-events:none}
.cinematic-entry-title p{font-size:14px;letter-spacing:.16em;color:#b9a77f;margin:0 0 18px}
.cinematic-entry-title h2{font-family:Georgia,'Noto Serif KR',serif;font-size:clamp(26px,6vw,45px);font-weight:400;letter-spacing:.06em;line-height:1.5;margin:0;word-break:keep-all}
.cinematic-entry-title>span{display:block;width:min(240px,60vw);height:1px;margin:24px auto;background:linear-gradient(90deg,transparent,#b19a66,transparent)}