/* Ryuga Films player. Brand tokens from ryuga-web/web/brand.css: green #00DC64 is the only accent, Sora + Manrope. Dark stage for video. */
:root{--green:#00DC64;--green-d:#00B853;--ink:#fff;--mute:rgba(255,255,255,.72);--head:'Sora',system-ui,sans-serif;--body:'Manrope',system-ui,sans-serif;--r:14px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
#app{position:relative;height:100dvh;max-width:480px;margin:0 auto;overflow:hidden;background:#000}
.screen{position:absolute;inset:0;display:none}
.screen.on{display:block}
.logo{display:inline-flex;align-items:center;gap:8px;font:800 20px var(--head);letter-spacing:-.03em;color:#fff;text-decoration:none}
.logo b{color:var(--green)}
.logo img{width:28px;height:28px;border-radius:7px}
.films{font:600 13px var(--body);color:var(--mute);letter-spacing:.08em;text-transform:uppercase;margin-left:2px}
.top{position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 16px) 20px 0;z-index:2}
#title{background:radial-gradient(120% 70% at 70% 20%,rgba(220,30,60,.35),transparent 60%),radial-gradient(90% 60% at 10% 90%,rgba(0,220,100,.18),transparent 60%),#07070a}
.hero{position:absolute;left:0;right:0;bottom:0;padding:24px 22px calc(env(safe-area-inset-bottom) + 32px)}
.kicker{font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
h1{font:800 40px/1.05 var(--head);letter-spacing:-.03em;margin:10px 0 12px}
.logline{color:var(--mute);font-size:16px;line-height:1.5;margin-bottom:24px}
.hint{color:var(--mute);font-size:13px;margin-top:14px;text-align:center}
.btn{display:flex;width:100%;justify-content:center;align-items:center;min-height:52px;padding:14px 22px;border-radius:var(--r);background:var(--green);color:#03140a;font:700 17px var(--head);border:0;cursor:pointer}
.btn:active{background:var(--green-d)}
.stage{position:absolute;inset:0;background:#000}
.stage video,.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.stage .show{display:block}
.ph{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;padding:32px 28px;background:var(--ph-bg,#111)}
.ph.show{display:flex}
.ph-tag{align-self:flex-start;font:700 10px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.5);color:#fff;margin-bottom:14px}
.ph p{font:500 15px/1.55 var(--body);color:rgba(255,255,255,.8)}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,transparent 18%,transparent 55%,rgba(0,0,0,.85) 100%)}
.hud{position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 10px) 14px 0;z-index:3}
.bars{display:flex;gap:4px}
.bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.bars i span{display:block;height:100%;width:0;background:#fff}
.hud-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font:700 13px var(--head)}
.icon{background:rgba(0,0,0,.45);color:#fff;border:0;border-radius:999px;padding:6px 12px;font:600 12px var(--body);cursor:pointer}
.sub{position:absolute;left:18px;right:18px;bottom:calc(env(safe-area-inset-bottom) + 48px);z-index:3;text-align:center;opacity:0;transition:opacity .25s}
.sub.on{opacity:1}
.sub b{display:block;font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin-bottom:4px}
.sub span{font:600 19px/1.4 var(--head);text-shadow:0 2px 10px rgba(0,0,0,.9)}
.tap{position:absolute;inset:80px 0 0 0;background:transparent;border:0;z-index:2;cursor:pointer}
.choices{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:28px 18px calc(env(safe-area-inset-bottom) + 24px);background:linear-gradient(180deg,transparent,rgba(0,0,0,.92) 30%);display:none}
.choices.on{display:block;animation:up .35s ease-out}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.choose-q{font:800 22px var(--head);text-align:center;margin-bottom:16px}
.choice{display:block;width:100%;min-height:56px;margin-top:10px;padding:14px 18px;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font:700 16px var(--head);text-align:left;cursor:pointer;backdrop-filter:blur(8px)}
.choice:first-child{border-color:var(--green);background:rgba(0,220,100,.14)}
.choice:active{transform:scale(.98)}
.choice small{display:block;font:600 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.tbc{font:800 28px var(--head);text-align:center}
.path{color:var(--mute);text-align:center;font-size:13px;margin:8px 0 18px}