/* RIGHTS QUEST — 8-bit night-sky RPG. Pixel fonts, dialogue box, stage select. */
.px{--bg:#120B2E;--box:#0B1A5E;--line:#fff;--y:#FFD84A;--g:#5BEA8B;--r:#FF5B6E;--c:#59D6FF;background:#000;color:#fff;font-family:'VT323',monospace;font-size:24px;font-weight:400}
.px #app{background:var(--bg);image-rendering:pixelated}
.px #app:before{content:"";position:absolute;inset:0;background:radial-gradient(#fff 1px,transparent 1.5px) 0 0/58px 58px,radial-gradient(#9fd7ff 1px,transparent 1.5px) 23px 31px/83px 83px;opacity:.55;animation:tw 4s steps(2) infinite}
@keyframes tw{50%{opacity:.25}}
.px .screen{animation:none}
.ps{font-family:'Press Start 2P',monospace;line-height:1.5}
.px .ib{width:40px;height:40px;display:grid;place-items:center;background:var(--box);color:#fff;font-size:18px;box-shadow:0 0 0 3px #fff,5px 5px 0 3px #000}
.pbtn{font-family:'Press Start 2P',monospace;font-size:13px;line-height:1.4;padding:14px 16px;background:var(--y);color:#2A1B00;box-shadow:0 0 0 3px #000,0 0 0 6px #fff,6px 6px 0 6px #000;text-align:center}
.pbtn:active{transform:translate(4px,4px);box-shadow:0 0 0 3px #000,0 0 0 6px #fff,2px 2px 0 6px #000}
.pbtn.alt{background:var(--box);color:#fff}
.dlg{background:var(--box);box-shadow:0 0 0 4px #fff,0 0 0 8px #000,8px 8px 0 8px rgba(0,0,0,.6);padding:14px 16px;margin:8px 8px 10px;position:relative;z-index:2}
/* title / picker */
.pt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;position:relative;z-index:1}
.pt h1{font-family:'Press Start 2P';font-weight:400;font-size:28px;line-height:1.3;color:var(--y);text-shadow:4px 4px 0 #b3411f,8px 8px 0 #000}
.pt .sprites{font-size:56px;display:flex;gap:6px;align-items:flex-end}.pt .sprites span{animation:hop 1s steps(2) infinite}.pt .sprites span:nth-child(2){animation-delay:.25s}.pt .sprites span:nth-child(3){animation-delay:.5s}
@keyframes hop{50%{transform:translateY(-10px)}}
.pt p{margin:0;max-width:300px;font-size:25px;line-height:1.05}
.press{font-family:'Press Start 2P';font-size:12px;color:#fff;animation:bl 1s steps(2) infinite}@keyframes bl{50%{opacity:0}}
.stages{display:flex;flex-direction:column;gap:18px;width:100%;margin-top:6px}
.stage{display:flex;gap:14px;align-items:center;text-align:left;background:var(--box);padding:14px;box-shadow:0 0 0 3px #fff,0 0 0 6px #000,6px 6px 0 6px #000;width:calc(100% - 12px)}
.stage:active{transform:translate(3px,3px)}
.stage .lv{font-family:'Press Start 2P';font-size:10px;color:var(--c);display:block;margin-bottom:6px}.stage .em{font-size:44px}
.stage b{font-family:'Press Start 2P';font-weight:400;font-size:13px;line-height:1.4;display:block}.stage small{font-size:20px;color:#9fb0ff;display:block;margin-top:4px}
.stage .sc{margin-left:auto;font-family:'Press Start 2P';font-size:10px;color:var(--y);text-align:right}
/* play */
.top{display:flex;align-items:center;gap:12px;position:relative;z-index:3}
.hpw{flex:1;display:flex;flex-direction:column;gap:5px}.hpw small{font-family:'Press Start 2P';font-size:9px;color:var(--y)}
.seg{display:flex;gap:3px}.seg i{flex:1;height:14px;background:#2A2362;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}.seg i.on{background:var(--g)}.seg i.mid{background:var(--y)}.seg i.low{background:var(--r)}
.seg i.flash{animation:fb .4s steps(2) 2}@keyframes fb{50%{background:#fff}}
.scene{flex:1;min-height:0;position:relative;margin:14px 0 0;overflow:hidden;background:linear-gradient(#1E1A5E 0 55%,#3B2E8A 55% 70%,#25C26E 70% 71%,#1B7A47 71%);box-shadow:0 0 0 3px #fff,0 0 0 6px #000;z-index:1}
.scene:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.14) 3px 4px);pointer-events:none}
.hero,.prop{position:absolute;bottom:26%;line-height:1}
.hero{left:12%;font-size:62px;animation:hop 1.2s steps(2) infinite}
.prop{right:10%;font-size:84px;animation:hop 1.6s steps(2) infinite}
.hero.good{animation:jump .6s steps(4) 1}.hero.bad{animation:hurt .5s steps(2) 2;filter:drop-shadow(0 0 0 #f00)}
@keyframes jump{40%{transform:translateY(-40px)}}@keyframes hurt{50%{transform:translateX(-10px);filter:sepia(1) saturate(8) hue-rotate(-40deg)}}
.badge{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-family:'Press Start 2P';font-size:10px;background:#000;padding:8px 10px;color:var(--c);white-space:nowrap;box-shadow:0 0 0 2px var(--c)}
.timer{position:absolute;top:44px;left:10%;right:10%;height:12px;background:#000;box-shadow:0 0 0 2px #fff}.timer i{display:block;height:100%;width:100%;background:var(--r)}
.spark{position:absolute;font-size:22px;animation:sp .8s steps(6) both;pointer-events:none}
@keyframes sp{to{transform:translate(var(--dx),-70px);opacity:0}}
.px .flashfx{position:absolute;inset:0;z-index:8;pointer-events:none;animation:ff .4s steps(4) both}
.flashfx.bad{background:rgba(255,40,70,.35)}.flashfx.good{background:rgba(120,255,160,.25)}@keyframes ff{to{opacity:0}}
.nm{font-family:'Press Start 2P';font-size:10px;color:var(--y);margin-bottom:8px;display:block}
.txt{font-size:26px;line-height:1.02;min-height:78px;white-space:pre-wrap}
.cursor:after{content:"▼";font-size:16px;margin-left:6px;animation:bl .6s steps(2) infinite;color:var(--y)}
.chs{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.ch{display:flex;gap:8px;align-items:flex-start;text-align:left;padding:7px 8px;font-size:25px;line-height:1;color:#fff}
.ch:before{content:"▶";color:var(--y);font-size:15px;margin-top:5px;visibility:hidden}.ch:hover:before,.ch:active:before,.ch.sel:before{visibility:visible}
.ch:active{background:rgba(255,255,255,.18)}
.px .nextb{display:block;margin:10px auto 0}
.px.shake #app{animation:shk .3s steps(3)}@keyframes shk{33%{transform:translate(-5px,3px)}66%{transform:translate(5px,-3px)}}
.end{align-items:center;text-align:center;justify-content:center;gap:16px;position:relative;z-index:1}
.end h1{font-family:'Press Start 2P';font-weight:400;font-size:22px;line-height:1.4;color:var(--y);text-shadow:3px 3px 0 #000}
.end .big{font-family:'Press Start 2P';font-size:44px;color:#fff;text-shadow:4px 4px 0 #b3411f}
.end .stars{font-size:38px;letter-spacing:6px}
.end .acts{width:100%;display:flex;flex-direction:column;gap:20px;margin-top:8px;padding:0 6px}