.opening-scene{position:absolute;inset:0;z-index:65;pointer-events:none;color:#eee9dc}
.opening-scene.prologue-return:after{content:'';position:absolute;inset:0;z-index:101;background:#000;pointer-events:none;animation:prologue-return 1s ease-out both}
@keyframes prologue-return{from{opacity:1}to{opacity:0}}
.opening-fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.opening-help{display:none;position:absolute;top:45%;left:50%;transform:translateX(-50%);margin:0;padding:7px 12px;background:#111a18ce;color:#eee9dc;font-size:16px}
.opening-scene:not([data-stage="combat"]) .opening-help{display:none}
.opening-scene[data-stage="retry"] .opening-help{display:block;top:45%}
.opening-wake{display:none;position:absolute;left:50%;bottom:max(130px,env(safe-area-inset-bottom));transform:translateX(-50%)}
.opening-finish{pointer-events:auto;min-width:140px;min-height:44px;padding:10px 24px;background:#201d17f2;border:1px solid #a99b7f;color:#f3eee2;font-size:15px;touch-action:manipulation}
.opening-scene[data-stage="bed"] .opening-wake{display:block}
.opening-active:not(.opening-combat) #touch-controls{visibility:hidden;pointer-events:none}
.opening-active #quick-edit{visibility:hidden;pointer-events:none}
.opening-guide{position:absolute;z-index:2;top:102px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:8px 24px 8px 12px;max-width:calc(100% - 32px);background:linear-gradient(90deg,#111512ed,#111512db 85%,#11151200);text-shadow:0 2px 2px #000}
.opening-keycaps{display:flex;gap:6px;flex:none}
.opening-keycaps kbd{display:grid;place-items:center;width:72px;height:72px;padding:0 0 6px;border:0;border-radius:0;background:transparent url('/public/assets/tutorial-keycap-v1.png') center/contain no-repeat;color:#2b251d;font:700 24px/1 sans-serif;text-shadow:0 1px #fff7;box-shadow:none}
.opening-instruction strong{display:block;font-size:22px;font-weight:650;color:#fff4d7}
.opening-instruction p{margin:5px 0 0;font-size:14px;line-height:1.5;white-space:nowrap}
.opening-pause-label{display:none;color:#c7c1b2;margin:0 0 6px;font-size:12px}
.opening-scene[data-paused="true"] .opening-pause-label{display:block}
.opening-scene[data-paused="true"] .opening-guide{top:34%;background:#161913f5;border-left:3px solid #e9c87e;padding:16px 24px}
.opening-control-focus{position:absolute;border:2px solid #ffdf96;border-radius:12px;pointer-events:none;filter:drop-shadow(0 0 4px #efc67880)}
.opening-scene[data-paused="true"] .opening-control-focus{box-shadow:0 0 0 300vmax #050807b8;filter:none}
.guide-arrow{position:absolute;width:62px;height:72px;transform:translate(-50%,-50%) rotate(var(--arrow-angle,0deg));pointer-events:none;filter:drop-shadow(0 3px 2px #000b)}
.guide-arrow:before{content:'';display:block;width:100%;height:100%;background:url('/public/assets/guide-arrow-v1.png') center/contain no-repeat;animation:guide-nudge 1.2s ease-in-out infinite}
.opening-scene:not([data-stage="combat"]) .opening-guide{display:none}
.opening-control-focus[hidden],.guide-arrow[hidden]{display:none}
@keyframes guide-nudge{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.guide-arrow:before{animation:none}}