.drama{max-width:420px;margin:0 auto}.drama-stage{aspect-ratio:9/16;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#1d1714;border-radius:20px;max-height:calc(100dvh - 120px);margin:0 auto;position:relative;overflow:hidden}.drama-stage:focus-visible{outline-offset:3px;outline:3px solid #ffad20}.drama-shot{animation:.5s both drama-fade;position:absolute;inset:0}.drama-shot img{object-fit:cover;transform-origin:50%;width:100%;height:100%;display:block}.drama-move-zoom-in img{animation:9s ease-out both drama-zoom-in}.drama-move-zoom-out img{animation:9s ease-out both drama-zoom-out}.drama-move-pan-left img{animation:9s ease-in-out both drama-pan-left}.drama-move-pan-right img{animation:9s ease-in-out both drama-pan-right}.drama-placeholder{text-align:center;color:#fff7ee;background:linear-gradient(160deg,#3a2f29,#7a5c48 60%,#c99a6a);align-content:center;gap:10px;padding:28px;display:grid;position:absolute;inset:0}.drama-placeholder small{letter-spacing:.06em;opacity:.8;font-size:11px}.drama-placeholder p{margin:0;font-size:16px;line-height:1.7}.drama-product{color:#3b2f27;background:#fffdf8e6;border-radius:12px;gap:2px;padding:8px 12px;animation:.6s .4s both drama-pop;display:grid;position:absolute;top:62px;left:14px;box-shadow:0 6px 18px #0003}.drama-product strong{font-size:13px}.drama-product span{color:#6b5a4b;font-size:11px}.drama-top{letter-spacing:.04em;background:linear-gradient(#0008,#0000);justify-content:space-between;gap:8px;padding:14px 16px 28px;font-size:12px;display:flex;position:absolute;inset:0 0 auto}.drama-top strong{font-weight:600}.drama-subtitle{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#120d0bcc;border-radius:14px;padding:14px 16px 12px;animation:.35s both drama-rise;position:absolute;bottom:18px;left:12px;right:12px}.drama-subtitle p{margin:0;font-size:16px;line-height:1.7}.drama-subtitle .is-narration{color:#f1e6d8;font-style:italic}.drama-speaker{color:#2a1c12;background:#f3a85a;border-radius:999px;margin-bottom:4px;padding:2px 10px;font-size:12px;font-weight:700;display:inline-block}.drama-speaker.is-you{background:#8fc7e8}.drama-next{text-align:right;opacity:.7;margin-top:6px;font-size:11px;display:block}.drama-choices{gap:10px;animation:.35s both drama-rise;display:grid;position:absolute;bottom:18px;left:12px;right:12px}.drama-choices p{text-align:center;text-shadow:0 1px 6px #000;margin:0;font-weight:700}.drama-choices button{color:#2d241e;background:#fffdf8;border:0;border-radius:14px;min-height:52px;padding:10px 14px;font-size:15px;font-weight:600;box-shadow:0 8px 20px #0005}:is(.drama-choices button:focus-visible,.drama-ending button:focus-visible){outline-offset:2px;outline:3px solid #ffad20}.drama-ending{cursor:default;background:linear-gradient(#0000,#140e0cf2 22%);gap:8px;padding:22px 18px 18px;animation:.5s both drama-rise;display:grid;position:absolute;inset:auto 0 0}.drama-ending small{opacity:.75}.drama-ending h2{color:#fff;margin:0;font-size:24px}.drama-ending p{margin:0;line-height:1.7}.drama-cta{color:#2a1c12;background:#f3a85a;border:0;border-radius:999px;min-height:48px;font-weight:700}.drama-cta:disabled{opacity:.75;cursor:not-allowed}.drama-note{opacity:.75;font-size:11px}.drama-collected{flex-wrap:wrap;gap:6px;display:flex}.drama-collected span{opacity:.6;border:1px solid #fff5;border-radius:999px;padding:3px 10px;font-size:12px}.drama-collected .got{opacity:1;background:#fff2;border-color:#fff}.drama-actions{gap:8px;display:flex}.drama-actions button{color:#fff;background:0 0;border:1px solid #fff8;border-radius:999px;flex:1;min-height:42px;font-weight:600}.drama-credit{text-align:center;color:#8a7b6c;margin:8px 0 0;font-size:11px}@keyframes drama-fade{0%{opacity:0}to{opacity:1}}@keyframes drama-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes drama-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}@keyframes drama-zoom-in{0%{transform:scale(1)}to{transform:scale(1.1)}}@keyframes drama-zoom-out{0%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes drama-pan-left{0%{transform:scale(1.12)translate(4%)}to{transform:scale(1.12)translate(-4%)}}@keyframes drama-pan-right{0%{transform:scale(1.12)translate(-4%)}to{transform:scale(1.12)translate(4%)}}@media (prefers-reduced-motion:reduce){.drama-shot,.drama-shot img,.drama-subtitle,.drama-choices,.drama-ending,.drama-product{animation:none!important}}.drama-actor{pointer-events:none;position:absolute;inset:0}.drama-actor .drama-actor-off{display:none}.drama-top .drama-voice{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background:#00000040;border:1px solid #ffffff80;border-radius:999px;min-height:32px;margin-left:auto;padding:0 12px;font-size:12px;font-weight:700}.drama-top .drama-voice.is-on{color:#211337;background:#fff;border-color:#fff}
