/* Koharu appears for explanations, then clears the stage for touch interaction. */
.kh-guide{position:absolute;inset:0;z-index:80;overflow:hidden;isolation:isolate;color:#f5efdf;pointer-events:auto}
.kh-guide[hidden]{display:none!important}
.kh-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0a1426f7 0%,#0a1426df 41%,#0a14263b 86%);backdrop-filter:blur(3px)}
.kh-context{position:absolute;left:5.5%;right:5.5%;top:5.5%;display:flex;gap:15px;align-items:center;z-index:3;pointer-events:none}
.kh-context-star{font-size:37px;color:#e4c487;font-weight:400;line-height:1}
.kh-context>div{display:flex;flex-direction:column;gap:7px}
.kh-context span:not(.kh-context-star){font-size:11px;letter-spacing:.18em;color:#d4bd95;font-weight:500}
.kh-context strong{font-size:20px;font-weight:500;letter-spacing:.06em;color:#f5eddc}
.kh-character-wrap{position:absolute;right:-1%;top:13%;bottom:4.5%;width:52%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;z-index:1}
.kh-character{position:relative;height:100%;aspect-ratio:2/3;max-width:100%;transform-origin:50% 92%;filter:drop-shadow(0 12px 20px #050b1866)}
.kh-character.is-breathing{animation:kh-breathe 5.2s ease-in-out infinite}
.kh-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.kh-mouth,.kh-blink{opacity:0;pointer-events:none}.kh-layer.is-active{opacity:1}
.kh-character-floor{position:absolute;left:15%;right:15%;height:5%;bottom:-1%;border-radius:50%;background:#03091260;filter:blur(12px)}
.kh-pose{position:absolute;inset:0;width:100%;height:100%;opacity:0;display:block;pointer-events:none}
.kh-character.is-bowing{animation:none;will-change:transform}.kh-character.is-bowing .kh-mouth{opacity:0!important}
.kh-character.is-mesh .kh-layer{opacity:0!important}.kh-character.is-mesh .kh-pose{opacity:1}
.kh-dialogue{position:absolute;z-index:2;left:5.5%;top:29%;width:48%;padding:29px 31px 20px;background:linear-gradient(120deg,#faf2e2f7,#ebdcc3f7);border:1px solid #fff6e4;border-radius:18px;box-shadow:0 20px 60px #02081170;color:#243247;outline:none}
.kh-dialogue:after{content:"";position:absolute;right:-13px;top:46px;width:24px;height:24px;transform:rotate(45deg);background:#f3e8d4;border-top:1px solid #fff6e4;border-right:1px solid #fff6e4;border-radius:0 4px 0 0;z-index:-1}
.kh-name-row{display:flex;align-items:center;gap:11px}.kh-name-badge{font-size:12px;letter-spacing:.1em;color:#776047;border-right:1px solid #bca98e;padding-right:11px}
.kh-name-row>strong{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;font-size:27px;font-weight:600;letter-spacing:.1em;color:#26354a}
.kh-text{font-size:22px;line-height:1.8;letter-spacing:.035em;min-height:144px;margin:18px 0 19px;white-space:pre-line;overflow-wrap:anywhere;font-weight:500}
.kh-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:16px;border-top:1px solid #b39c7280}
.kh-page{font-size:12px;letter-spacing:.15em;color:#77694f;white-space:nowrap}
.kh-next{display:flex;align-items:center;justify-content:center;gap:25px;min-height:48px;padding:11px 19px;border:1px solid #293a4e;border-radius:9px;background:#29394e;color:#fff4dd;font-size:17px;font-weight:600;cursor:pointer;touch-action:manipulation}
.kh-next:hover{background:#40546c}.kh-next:active{transform:translateY(1px)}
.kh-subcontrols{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:12px}
.kh-close,.kh-motion{font:inherit;font-size:12px;min-height:40px;padding:7px 8px;border:0;background:transparent;color:#5d655f;border-radius:7px;cursor:pointer;touch-action:manipulation}
.kh-close{padding-left:0;text-decoration:underline;text-underline-offset:4px}.kh-motion{background:#2135480b;padding:7px 12px}
.kh-close:hover,.kh-motion:hover{color:#213548;background:#21354812}
.kh-guide button:focus-visible{outline:3px solid #52719a;outline-offset:4px}
.kh-speaking{display:flex;gap:3px;height:19px;align-items:center;margin-left:auto;opacity:0}.kh-speaking.is-active{opacity:1}
.kh-speaking i{display:block;width:3px;height:5px;border-radius:2px;background:#aa8851;animation:kh-wave .55s ease-in-out infinite alternate}.kh-speaking i:nth-child(2){animation-delay:-.18s}.kh-speaking i:nth-child(3){animation-delay:-.32s}
.kh-no-motion .kh-character,.kh-no-motion .kh-speaking i{animation:none!important}
@keyframes kh-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.004)}}
@keyframes kh-wave{to{height:17px}}
.op-app.is-portrait .kh-shade{background:linear-gradient(0deg,#0a1426f2 0%,#0a1426bd 47%,#0a14264d 100%)}
.op-app.is-portrait .kh-context{top:4.5%;left:6%;right:6%}.op-app.is-portrait .kh-context strong{font-size:22px}
.op-app.is-portrait .kh-character-wrap{top:9%;bottom:34%;right:1%;width:68%}
.op-app.is-portrait .kh-dialogue{left:6%;right:6%;width:auto;top:auto;bottom:6%;padding:25px 31px 18px}
.op-app.is-portrait .kh-dialogue:after{right:22%;top:-13px;transform:rotate(-45deg);background:#f4e9d6}
.op-app.is-portrait .kh-text{font-size:24px;line-height:1.75;min-height:125px;margin:17px 0 18px}
.op-app.is-portrait .kh-next{min-height:50px;font-size:18px}
.op-app.is-portrait .kh-name-row>strong{font-size:30px}
/* Loading and public signage get a nonblocking greeting, never a tap-to-dismiss gate. */
.kh-guide.is-passive{pointer-events:none;z-index:8}
.kh-guide.is-passive .kh-shade,.kh-guide.is-passive .kh-context,.kh-guide.is-passive .kh-footer,.kh-guide.is-passive .kh-subcontrols,.kh-guide.is-passive .kh-speaking{display:none}
.kh-guide.is-passive .kh-character-wrap{top:auto;right:1%;bottom:7%;width:24%;height:35%}
.kh-guide.is-passive .kh-dialogue{top:auto;left:auto;right:23%;bottom:9%;width:40%;padding:15px 20px;border-radius:14px;box-shadow:0 10px 30px #02081145}
.kh-guide.is-passive .kh-dialogue:after{top:27px;right:-10px;width:18px;height:18px}
.kh-guide.is-passive .kh-name-row{gap:8px}.kh-guide.is-passive .kh-name-badge{font-size:10px;padding-right:8px}.kh-guide.is-passive .kh-name-row>strong{font-size:20px}
.kh-guide.is-passive .kh-text{font-size:16px;line-height:1.6;min-height:0;margin:8px 0 0;letter-spacing:.02em}
.op-app.is-portrait .kh-guide.is-passive .kh-character-wrap{width:29%;height:31%;bottom:7%;right:0}
.op-app.is-portrait .kh-guide.is-passive .kh-dialogue{width:57%;left:6%;right:auto;bottom:10%;padding:15px 18px}
.op-app.is-portrait .kh-guide.is-passive .kh-dialogue:after{right:-10px;top:28px;transform:rotate(45deg)}
.op-app.is-portrait .kh-guide.is-passive .kh-text{font-size:18px;min-height:0;line-height:1.6;margin:8px 0 0}
@media(prefers-reduced-motion:reduce){.kh-character,.kh-speaking i{animation:none!important}}
/* A reserved side column for passive guidance; never cover the core content. */
.op-app.is-landscape .kh-guide.is-passive .kh-character-wrap{right:2%;bottom:12%;height:44%;width:35%}
.op-app.is-landscape .kh-guide.is-passive .kh-dialogue{left:auto;right:4%;bottom:60%;width:33%;padding:15px 18px}
.op-app.is-landscape .kh-guide.is-passive .kh-dialogue:after{top:auto;right:36%;bottom:-10px;transform:rotate(135deg)}
.op-app.is-portrait .kh-guide.is-passive .kh-character-wrap{right:1%;bottom:12%;height:24%;width:29%}
.op-app.is-portrait .kh-guide.is-passive .kh-dialogue{left:6%;right:auto;bottom:15%;width:57%}
