:root{--yn-ink:#243153;--yn-yes:#4e9b6f;--yn-no:#cf664f;--yn-gold:#f0c45d}
body{background:#dff4ff}.stage{background:radial-gradient(circle at 50% 20%,#fff7d4 0 12%,transparent 12.5%),linear-gradient(#cfeeff 0 62%,#bfe0a1 62%)}
.yn-intro,.yn-play{display:flex;flex-direction:column;align-items:center}.yn-intro{justify-content:center;padding:14px}
#scene-intro .yn-panel{position:relative;inset:auto;right:auto;bottom:auto;transform:none;width:min(650px,96%);max-height:calc(100dvh - 86px);overflow:auto;padding:clamp(22px,4vw,38px);border:3px solid #fff;border-radius:28px;background:rgba(255,253,247,.97);box-shadow:0 18px 55px rgba(44,83,96,.2)}
.yn-mark{font-size:clamp(3rem,10vw,5.4rem);line-height:1}.yn-panel h1{font-size:clamp(2rem,7vw,3.4rem);margin:8px 0 2px}.yn-panel .tagline{font-size:1.15rem}
.yn-adult-box{display:grid;gap:9px;text-align:left;margin:18px 0;padding:16px;border:2px solid #d6dfb0;border-radius:19px;background:#f7f8e8}.yn-adult-box>b{color:#667634}.yn-adult-box>span{font-weight:800}.yn-adult-box p{margin:0;color:#53605c;font-size:.9rem}.yn-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.yn-mode{min-height:64px;padding:9px;border:2px solid #c7cfb1;border-radius:15px;background:#fff;color:var(--yn-ink);font-weight:900;font-size:1rem}.yn-mode[aria-pressed="true"]{border-color:#6e9f72;background:#edf8ef;box-shadow:0 0 0 3px rgba(78,155,111,.16)}
.yn-play{padding:12px;gap:11px}.yn-prompt{width:min(820px,100%);min-height:68px;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 14px;border:2px solid rgba(42,77,94,.14);border-radius:20px;background:#fff;text-align:center;box-shadow:0 7px 22px rgba(49,82,93,.12)}.yn-prompt b{font-size:clamp(1.1rem,3vw,1.45rem)}.yn-prompt .text-btn{min-width:48px;min-height:48px}
.yn-door{position:relative;width:min(580px,90%);height:clamp(200px,35vh,300px);display:grid;place-items:center;border:14px solid #b66f43;border-bottom-width:20px;border-radius:32px 32px 10px 10px;background:linear-gradient(135deg,#ffdf79,#f3a55a);box-shadow:inset 0 0 0 6px rgba(255,255,255,.35),0 12px 0 #8d4d31,0 18px 35px rgba(54,70,72,.18);overflow:hidden}.yn-door:before{content:'★';position:absolute;right:20px;font-size:2rem;color:#9a5b34}.yn-picture{font-size:clamp(5rem,18vw,9rem);filter:drop-shadow(0 7px 2px rgba(80,57,34,.15));transition:.3s ease}.yn-door.opening .yn-picture{animation:yn-pop .7s ease}.yn-effect{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:rgba(255,253,244,.95);font-size:clamp(1.12rem,3.5vw,1.5rem);font-weight:900;text-align:center;opacity:0;pointer-events:none;transition:.2s}.yn-effect.show{opacity:1}.yn-effect span{display:block;font-size:clamp(4rem,14vw,7rem);margin-bottom:7px}
.yn-answers{width:min(620px,100%);display:grid;grid-template-columns:1fr 1fr;gap:16px}.yn-answer{min-height:130px;display:flex;align-items:center;justify-content:center;gap:15px;border:4px solid transparent;border-radius:26px;background:#fff;color:var(--yn-ink);box-shadow:0 9px 0 #a7b7bd,0 14px 25px rgba(38,67,75,.13);font-size:clamp(1.4rem,5vw,2rem);font-weight:900;transition:.12s;touch-action:manipulation}.yn-answer span{font-size:clamp(3rem,9vw,5rem)}.yn-answer.yes{border-color:#79b48d}.yn-answer.no{border-color:#df8d79}.yn-answer:active{transform:translateY(5px);box-shadow:0 4px 0 #9bacb2}.yn-answer.retry{animation:yn-wiggle .45s;background:#fff0ed}.yn-answer.valid{background:#eef9f1}
.yn-rail{display:flex;gap:9px}.yn-step{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;border:2px solid rgba(54,84,75,.18);background:rgba(255,255,255,.75);font-size:1.55rem;filter:grayscale(.8);opacity:.65}.yn-step.done{filter:none;opacity:1;background:#fff2b7;border-color:#d9ad42}.yn-step.now{filter:none;opacity:1;outline:3px solid rgba(207,102,79,.28)}
@keyframes yn-pop{50%{transform:scale(1.22) rotate(4deg)}}@keyframes yn-wiggle{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media(max-width:540px){.yn-play{padding:8px;gap:8px}.yn-prompt{min-height:62px;display:grid;grid-template-columns:1fr 48px;text-align:left;border-radius:16px}.yn-prompt .text-btn{font-size:0;width:48px;padding:0}.yn-prompt .text-btn:before{content:'🔊';font-size:1.2rem}.yn-door{height:190px;border-width:10px;border-bottom-width:15px}.yn-answers{gap:10px}.yn-answer{min-height:118px;border-radius:20px;gap:7px}.yn-answer span{font-size:3rem}.yn-step{width:42px;height:42px;font-size:1.3rem}}
@media(max-height:690px) and (min-width:650px){.yn-door{height:160px}.yn-answer{min-height:94px}.yn-play{gap:6px}}@media(prefers-reduced-motion:reduce){.yn-door.opening .yn-picture,.yn-answer.retry{animation:none}.yn-effect,.yn-picture{transition:none}}