:root{
  --ink:#0b0204;
  --ink2:#150408;
  --ox:#3a0508;
  --crim:#b3121b;
  --red:#e0342a;
  --amber:#f2a640;
  --gold:#d4a64a;
  --gold2:#f4d98f;
  --bone:#f1e7d5;
  --dim:rgba(241,231,213,.6);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --btn:clamp(54px,14.6vw,74px);
  --goldline:linear-gradient(180deg,#f6df9c,#d4a64a 42%,#8a6120 60%,#e8c473);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#050102;overflow:hidden}
body{
  color:var(--bone);font-family:var(--sans);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  touch-action:none;overscroll-behavior:none;
}
#app{position:fixed;inset:0;overflow:hidden}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
button{font-family:var(--sans);color:inherit;background:none;border:0;cursor:pointer;letter-spacing:.1em}
img{user-select:none;-webkit-user-drag:none}

/* atmosphere overlays */
#grade{position:absolute;inset:0;pointer-events:none;z-index:6;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(5,0,1,.42) 78%, rgba(3,0,0,.82) 100%),
    linear-gradient(180deg, rgba(6,1,3,.24), transparent 24%, transparent 74%, rgba(6,1,3,.4));
  mix-blend-mode:multiply;
}
#grade::after{content:"";position:absolute;inset:0;opacity:.10;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
#redpulse{position:absolute;inset:0;pointer-events:none;z-index:7;opacity:0;
  background:radial-gradient(90% 80% at 50% 50%, rgba(224,52,42,.0) 25%, rgba(179,18,27,.85) 100%);
  transition:opacity .18s ease-out;
}
#redpulse.on{opacity:1}
#slowvignette{position:absolute;inset:0;pointer-events:none;z-index:7;opacity:0;
  background:radial-gradient(100% 100% at 50% 50%, transparent 42%, rgba(58,5,8,.9) 100%);
  transition:opacity .25s}
#slowvignette.on{opacity:1}

/* HUD */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .4s}
body.playing #hud{opacity:1}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(13px + env(safe-area-inset-top)) 13px 0 13px}
.vitals{display:flex;align-items:flex-start;gap:8px}
.vial{position:relative;width:23px;height:74px;border:1.5px solid var(--gold);border-radius:12px 12px 11px 11px;
  background:rgba(10,2,4,.72);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 3px 14px rgba(0,0,0,.6),inset 0 0 8px rgba(0,0,0,.9)}
.vial-fill{position:absolute;left:2px;right:2px;bottom:2px;height:82%;border-radius:9px;
  background:linear-gradient(180deg,#e0342a,#b3121b 55%,#6b0710);
  box-shadow:0 0 12px rgba(224,52,42,.75),inset 0 0 6px rgba(255,140,110,.6);
  transition:height .28s cubic-bezier(.3,.9,.4,1)}
.vial-shine{position:absolute;left:4px;top:8px;bottom:10px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.04));opacity:.65}
.vial-cap{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:15px;height:6px;
  background:var(--goldline);border-radius:2px;box-shadow:0 0 8px rgba(212,166,74,.6)}
.vitals-side{display:flex;flex-direction:column;gap:5px;padding-top:2px}
.wanted{display:flex;gap:1px;height:11px}
.bat-ico{width:19px;height:12px;fill:rgba(58,5,8,.9);stroke:rgba(212,166,74,.55);stroke-width:.6px;transition:fill .2s,filter .2s}
.bat-ico.on{fill:#e0342a;stroke:#f4d98f;filter:drop-shadow(0 0 4px rgba(224,52,42,.9))}
.bat-meter{position:relative;width:60px;height:9px;border:1px solid rgba(212,166,74,.7);border-radius:2px;overflow:hidden;background:rgba(10,2,4,.7)}
.bat-meter-fill{position:absolute;inset:1px;width:100%;background:linear-gradient(90deg,#7a0a12,#e0342a);transform-origin:left;transition:transform .15s}
.bat-meter span{position:absolute;inset:0;display:grid;place-items:center;font-size:6px;letter-spacing:.24em;color:var(--gold2)}

.money{display:flex;align-items:center;gap:7px;padding:3px 4px 3px 2px}
.bill-ico{width:27px;height:27px;object-fit:contain;transform:rotate(-7deg);filter:drop-shadow(0 2px 5px rgba(0,0,0,.8))}
#cash{font-family:var(--serif);font-size:19px;letter-spacing:.06em;color:var(--gold2);
  text-shadow:0 0 14px rgba(212,166,74,.35),0 2px 3px #000;font-variant-numeric:tabular-nums}
.money.bump #cash{animation:cashbump .38s ease-out}
@keyframes cashbump{0%{transform:scale(1);color:#fff8dd}35%{transform:scale(1.14);color:#fff}100%{transform:scale(1)}}

.banner{position:absolute;top:82px;left:50%;width:min(94vw,580px);z-index:11;
  transform:translate(-50%,-160%);transition:transform .55s cubic-bezier(.2,.9,.25,1);
  background:linear-gradient(180deg,rgba(6,1,2,.95),rgba(16,3,6,.86));
  border-top:1px solid rgba(212,166,74,.85);border-bottom:1px solid rgba(212,166,74,.85);
  padding:7px 26px 9px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.banner.show{transform:translate(-50%,0)}
.banner::before,.banner::after{content:"";position:absolute;top:2px;bottom:2px;width:14px;border:1px solid rgba(212,166,74,.5)}
.banner::before{left:3px;border-right:0}.banner::after{right:3px;border-left:0}
.banner-edge{height:1px;margin:0 auto 5px;width:60%;background:linear-gradient(90deg,transparent,rgba(212,166,74,.75),transparent)}
.banner-edge:last-child{margin:6px auto 0}
.banner-kicker{font-size:7px;letter-spacing:.44em;color:rgba(212,166,74,.8)}
.banner-title{font-family:var(--serif);font-size:clamp(15px,4.6vw,22px);line-height:1.1;letter-spacing:.07em;color:var(--gold2);
  text-shadow:0 0 18px rgba(212,166,74,.25),0 2px 4px #000;margin-top:1px}
.banner-sub{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(241,231,213,.68);margin-top:2px}

.objective{position:absolute;top:172px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;
  padding:4px 11px 4px 8px;background:rgba(8,1,3,.7);border:1px solid rgba(212,166,74,.28);border-radius:2px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,231,213,.86);opacity:0;transition:opacity .3s;white-space:nowrap}
.objective.show{opacity:1}
.obj-diamond{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 8px rgba(212,166,74,.8);flex:none}

.lens{position:absolute;left:13px;bottom:146px;width:clamp(78px,23.5vw,112px);aspect-ratio:1;border-radius:50%;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.8))}
.lens-glass{position:absolute;inset:7px;border-radius:50%;overflow:hidden;background:#2a0508;
  box-shadow:inset 0 0 18px rgba(0,0,0,.9),inset 0 0 0 1px rgba(212,166,74,.25)}
#minimap{width:100%;height:100%;display:block;opacity:.94}
.lens-rim{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);
  box-shadow:inset 0 0 0 1px rgba(255,230,160,.35),inset 0 0 14px rgba(0,0,0,.7),0 0 0 1px #2a0a03}
.lens-rim::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#fff3cf 0deg 2.4deg,rgba(0,0,0,0) 2.4deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 0 47%,#000 48% 52%,transparent 53%);
  mask:radial-gradient(circle,transparent 0 47%,#000 48% 52%,transparent 53%);opacity:.9}
.lens-n{position:absolute;left:50%;top:-9px;transform:translateX(-50%);font-size:7px;letter-spacing:.1em;
  color:var(--gold2);background:#0b0204;padding:0 3px;border:1px solid rgba(212,166,74,.6);border-radius:2px}
.lens-bat{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:22px;height:14px;
  background:#0b0204;border:1px solid rgba(212,166,74,.6);border-radius:50%;display:grid;place-items:center}
.lens-bat svg{width:15px;fill:var(--gold)}

.prompt{position:absolute;left:50%;bottom:300px;transform:translate(-50%,8px);display:flex;align-items:center;gap:8px;
  padding:6px 12px 6px 6px;background:rgba(6,1,2,.88);border:1px solid rgba(212,166,74,.55);border-radius:3px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);opacity:0;transition:opacity .2s,transform .2s;pointer-events:auto}
.prompt.show{opacity:1;transform:translate(-50%,0)}
.prompt-key{width:21px;height:21px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:2px;
  font-size:10px;color:var(--gold2);background:rgba(212,166,74,.08);flex:none}
.prompt .hold{width:46px;height:3px;background:rgba(212,166,74,.2);overflow:hidden;border-radius:2px}
.prompt .hold i{display:block;height:100%;width:0;background:var(--gold2);box-shadow:0 0 8px var(--gold)}

.toasts{position:absolute;top:calc(36% + 30px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none}
.toast{background:rgba(8,1,3,.9);border-left:2px solid var(--gold);border-right:2px solid var(--gold);
  padding:4px 14px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);
  animation:toastIn .35s ease-out both;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.6)}
.toast.out{animation:toastOut .4s ease-in both}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px)}}

.district{position:absolute;top:27%;left:50%;transform:translate(-50%,6px);text-align:center;
  font-family:var(--serif);font-size:clamp(15px,4.6vw,26px);letter-spacing:.24em;color:rgba(212,166,74,.85);
  text-shadow:0 0 30px rgba(179,18,27,.8),0 3px 8px #000;opacity:0;transition:opacity .7s,transform .7s;pointer-events:none}
.district.show{opacity:1;transform:translate(-50%,0)}
.district small{display:block;font-family:var(--sans);font-size:8px;letter-spacing:.5em;color:rgba(241,231,213,.55);margin-top:6px}

.damage{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(80% 70% at 50% 50%,transparent 45%,rgba(179,18,27,.5) 100%)}
.damage.on{opacity:1}

.menu-btn{position:absolute;top:calc(9px + env(safe-area-inset-top));right:12px;width:30px;height:30px;pointer-events:auto;
  color:rgba(241,231,213,.7);display:none}
body.playing .menu-btn{display:block;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));right:50%;transform:translateX(50%);
  border:1px solid rgba(212,166,74,.3);border-radius:50%;background:rgba(6,1,2,.5)}
.menu-btn svg{width:16px;fill:none}

/* touch controls */
#touch{display:none}
body.touch #touch{display:block}
.stick{position:absolute;left:14px;bottom:calc(20px + env(safe-area-inset-bottom));width:clamp(104px,29vw,130px);aspect-ratio:1;pointer-events:auto}
.stick-base{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(20,4,8,.5),rgba(8,1,3,.72));
  border:1.5px solid rgba(212,166,74,.45);box-shadow:inset 0 0 26px rgba(0,0,0,.8),0 4px 18px rgba(0,0,0,.4)}
.stick-base::after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(212,166,74,.18)}
.stick-knob{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(70,12,18,.9),rgba(12,2,5,.92));
  border:1.5px solid rgba(212,166,74,.8);box-shadow:0 4px 12px rgba(0,0,0,.7),inset 0 0 12px rgba(0,0,0,.7);
  transition:box-shadow .2s}
.stick.active .stick-knob{box-shadow:0 0 18px rgba(212,166,74,.45),inset 0 0 12px rgba(0,0,0,.7)}
.stick-arrow{position:absolute;width:0;height:0;border:4px solid transparent;opacity:.4}
.stick-arrow.up{left:50%;top:5px;transform:translateX(-50%);border-bottom-color:var(--gold)}
.stick-arrow.down{left:50%;bottom:5px;transform:translateX(-50%);border-top-color:var(--gold)}
.stick-arrow.left{left:5px;top:50%;transform:translateY(-50%);border-right-color:var(--gold)}
.stick-arrow.right{right:5px;top:50%;transform:translateY(-50%);border-left-color:var(--gold)}

.pad{position:absolute;right:10px;bottom:calc(14px + env(safe-area-inset-bottom));width:clamp(196px,54vw,248px);aspect-ratio:1;pointer-events:none}
.btn{position:absolute;width:var(--btn);aspect-ratio:1;border-radius:50%;pointer-events:auto;
  border:1.5px solid rgba(212,166,74,.75);background:rgba(8,1,3,.55);
  color:var(--gold2);display:grid;place-items:center;
  box-shadow:inset 0 0 18px rgba(0,0,0,.7),0 3px 12px rgba(0,0,0,.5);
  transition:transform .08s,background .12s,color .12s;backdrop-filter:blur(2px)}
.btn svg{width:52%;height:52%;fill:none;stroke:currentColor}
.btn:active,.btn.down{transform:scale(.93);background:rgba(212,166,74,.9);color:#1a0507}
.btn-shoot{right:2%;bottom:3%;width:clamp(64px,18vw,88px);background:rgba(58,5,8,.5);border-color:rgba(224,52,42,.8);color:#ffd9b0}
.btn-shoot:active,.btn-shoot.down{background:rgba(224,52,42,.9);color:#1a0507}
.btn-punch{right:38%;bottom:1%}
.btn-jump{right:9%;bottom:40%;width:calc(var(--btn)*.9)}
.btn-dive{right:38%;bottom:31%;width:calc(var(--btn)*.84)}
.btn-interact{right:0;bottom:64%;width:calc(var(--btn)*.78);display:none;border-color:var(--gold2);color:#fff6dd;box-shadow:0 0 16px rgba(212,166,74,.35)}
.btn-interact.show{display:grid}
.btn.skill{position:relative;width:calc(var(--btn)*.76)}
.btn .cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.78) var(--p,0turn),transparent 0);pointer-events:none}
.skillbar{position:absolute;right:12px;bottom:calc(228px + env(safe-area-inset-bottom));display:none;gap:8px;pointer-events:auto}
body.touch.pack .skillbar{display:flex}
.skillbar .btn{position:relative;width:calc(var(--btn)*.72)}
.btn-beast.on{background:rgba(224,52,42,.85);color:#150203;box-shadow:0 0 18px rgba(224,52,42,.6)}


.desk-hints{position:absolute;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:none;align-items:center;gap:12px;font-size:8px;letter-spacing:.14em;color:rgba(241,231,213,.42);text-transform:uppercase;white-space:nowrap}
body.desk.playing .desk-hints{display:flex}
.desk-hints b{color:rgba(212,166,74,.85);font-weight:600;margin-right:3px}
body.touch .desk-hints{display:none!important}

/* screens */
.screen{position:absolute;inset:0;z-index:40}
#title{display:flex;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}
#title.hide{opacity:0;visibility:hidden;pointer-events:none}
.title-art-wrap{position:absolute;inset:0;overflow:hidden;background:#0a0103}
.title-art{width:100%;height:100%;object-fit:cover;object-position:center 22%;transform:scale(1.03);animation:drift 28s ease-in-out infinite alternate}
.title-art.wide{display:none}
@keyframes drift{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(0,-1.6%,0)}}
.title-shade{position:absolute;inset:0;
  background:
   linear-gradient(180deg,rgba(4,0,1,.82) 0%,rgba(4,0,1,.34) 26%,rgba(6,1,2,.05) 48%,rgba(6,1,2,.55) 78%,rgba(4,0,1,.95) 100%),
   radial-gradient(80% 60% at 50% 45%,transparent 30%,rgba(30,3,6,.5) 100%)}
.title-inner{position:relative;z-index:2;text-align:center;padding:5vh 18px 18px;display:flex;flex-direction:column;align-items:center;width:100%;height:100%}
.wordmark{width:min(84vw,620px);height:auto;filter:drop-shadow(0 0 26px rgba(212,166,74,.28)) drop-shadow(0 6px 18px rgba(0,0,0,.9))}
.title-sub{font-family:var(--serif);font-size:clamp(11px,2.6vw,15px);letter-spacing:.62em;color:rgba(212,166,74,.9);
  margin-top:10px;text-indent:.62em;text-shadow:0 0 18px rgba(179,18,27,.7)}
.title-line{width:min(54vw,300px);height:1px;margin:12px 0 0;background:linear-gradient(90deg,transparent,rgba(212,166,74,.9),transparent)}
.start-btn{position:relative;padding:12px 24px;min-width:210px;font-family:var(--serif);font-size:clamp(12px,3.2vw,15px);
  letter-spacing:.3em;text-indent:.3em;color:var(--gold2);text-transform:uppercase;
  background:linear-gradient(180deg,rgba(28,5,8,.92),rgba(8,1,2,.92));
  border:1px solid rgba(212,166,74,.85);box-shadow:0 0 0 1px rgba(0,0,0,.8),inset 0 0 20px rgba(212,166,74,.08),0 8px 26px rgba(0,0,0,.55);
  transition:color .2s,background .25s,box-shadow .25s;animation:pulseGold 2.6s ease-in-out infinite}
.start-btn:hover{background:linear-gradient(180deg,rgba(212,166,74,.95),rgba(160,116,44,.95));color:#1a0507}
@keyframes pulseGold{0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 16px rgba(212,166,74,.12),0 8px 26px rgba(0,0,0,.55)}50%{box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 30px rgba(212,166,74,.35),0 8px 26px rgba(0,0,0,.55)}}
.title-inner .start-btn{margin-top:auto}
.title-row{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.ghost-btn{padding:8px 13px;border:1px solid rgba(212,166,74,.45);border-radius:2px;background:rgba(6,1,2,.68);
  color:rgba(241,231,213,.82);font-size:9px;letter-spacing:.2em;display:inline-flex;align-items:center;gap:7px;
  transition:border-color .2s,color .2s,background .2s}
.ghost-btn:hover{border-color:var(--gold);color:var(--gold2);background:rgba(20,3,7,.85)}
.lockdot{width:7px;height:7px;border-radius:50%;background:#7c1018;box-shadow:0 0 8px rgba(224,52,42,.8);border:1px solid rgba(244,217,143,.6)}
.lockdot.open{background:#8fbf7a;box-shadow:0 0 8px rgba(143,191,122,.7)}
.title-note{margin:12px 0 30px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(241,231,213,.46)}
.title-foot{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:space-between;padding:0 16px;align-items:center}
.tiny{font-size:8px;letter-spacing:.18em;color:rgba(241,231,213,.44);padding:6px}
.version{font-size:8px;letter-spacing:.18em;color:rgba(241,231,213,.28)}

.overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(3,0,1,.72);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(3px)}
.overlay.show{opacity:1;visibility:visible}
#loading{z-index:70;background:#070102;flex-direction:column}
#loading .load-inner{width:min(72vw,340px);text-align:center}
.load-title{font-family:var(--serif);letter-spacing:.42em;font-size:15px;color:var(--gold2);text-indent:.42em}
.load-bar{height:2px;background:rgba(212,166,74,.16);margin:16px 0 10px;overflow:hidden}
.load-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6b0710,var(--red),var(--gold2));transition:width .4s;box-shadow:0 0 12px rgba(224,52,42,.6)}
.load-sub{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:rgba(241,231,213,.4)}

.panel{position:relative;width:min(94vw,760px);max-height:88vh;overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(12,2,5,.98),rgba(6,1,2,.99));
  border:1px solid rgba(212,166,74,.55);box-shadow:0 0 0 4px rgba(6,1,2,.9),0 0 0 5px rgba(212,166,74,.14),0 30px 80px rgba(0,0,0,.8);
  padding:18px 18px 20px}
.panel::before,.panel::after{content:"";position:absolute;width:18px;height:18px;border:1px solid rgba(212,166,74,.75);pointer-events:none}
.panel::before{left:5px;top:5px;border-right:0;border-bottom:0}
.panel::after{right:5px;bottom:5px;border-left:0;border-top:0;transform:rotate(180deg)}
.panel-head{position:relative;text-align:center;margin-bottom:12px}
.panel-kicker{font-size:7px;letter-spacing:.5em;color:rgba(212,166,74,.7);text-transform:uppercase}
.panel h2{font-family:var(--serif);font-weight:400;font-size:clamp(17px,4.8vw,25px);letter-spacing:.12em;margin:4px 0 0;color:var(--gold2);text-transform:uppercase}
.close-btn{position:absolute;right:-4px;top:-6px;font-size:24px;line-height:1;color:rgba(241,231,213,.5);padding:4px 8px}
.close-btn:hover{color:var(--gold2)}
.tabs{display:flex;gap:2px;border-bottom:1px solid rgba(212,166,74,.22);margin-bottom:14px;overflow:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 10px;font-size:8px;letter-spacing:.2em;color:rgba(241,231,213,.45);border-bottom:1px solid transparent;white-space:nowrap}
.tab.active{color:var(--gold2);border-bottom-color:var(--gold)}
.pane{display:none}
.pane.active{display:block;animation:paneIn .25s ease-out}
@keyframes paneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pane-note{font-size:8.5px;letter-spacing:.1em;color:rgba(241,231,213,.42);margin:12px 0 0;line-height:1.6}

.mission-list{display:flex;flex-direction:column;gap:7px}
.mission-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(212,166,74,.18);
  background:linear-gradient(90deg,rgba(20,3,7,.6),rgba(8,1,2,.3));transition:border-color .2s}
.mission-row:hover{border-color:rgba(212,166,74,.45)}
.mission-row .mark{width:22px;height:22px;flex:none;display:grid;place-items:center;border:1px solid rgba(212,166,74,.5);transform:rotate(45deg)}
.mission-row .mark i{width:7px;height:7px;background:var(--gold);box-shadow:0 0 8px rgba(212,166,74,.6)}
.mission-row.done .mark i{background:#8fbf7a;box-shadow:0 0 8px rgba(143,191,122,.6)}
.mission-row .mtext{flex:1;min-width:0}
.mission-row .mtext b{display:block;font-family:var(--serif);font-weight:400;font-size:12px;letter-spacing:.08em;color:var(--bone)}
.mission-row .mtext span{display:block;font-size:8px;letter-spacing:.12em;color:rgba(241,231,213,.42);margin-top:2px}
.mission-row .mtag{font-size:7px;letter-spacing:.16em;color:rgba(212,166,74,.8);text-transform:uppercase}
.trackbtn{font-size:8px;letter-spacing:.14em;border:1px solid rgba(212,166,74,.4);padding:5px 8px;color:var(--gold2)}
.trackbtn:hover{background:rgba(212,166,74,.15)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-card{position:relative;border:1px solid rgba(212,166,74,.28);background:rgba(10,2,4,.6);overflow:hidden}
.form-card img{width:100%;height:190px;object-fit:cover;object-position:center 18%;display:block;filter:saturate(.95)}
.form-card .fc-body{padding:9px 10px 11px;background:linear-gradient(180deg,rgba(8,1,2,.2),rgba(8,1,2,.9))}
.form-card b{font-family:var(--serif);font-weight:400;font-size:12px;letter-spacing:.1em;display:block;color:var(--gold2)}
.form-card span{display:block;font-size:8px;letter-spacing:.1em;color:rgba(241,231,213,.5);margin-top:3px;line-height:1.5}
.form-card .fl{position:absolute;top:8px;right:8px;font-size:7px;letter-spacing:.14em;padding:3px 6px;background:rgba(6,1,2,.85);border:1px solid rgba(212,166,74,.4);color:var(--gold2)}
.form-card .fl.locked{border-color:rgba(224,52,42,.6);color:#ff9d8e}
.form-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,166,74,.3),0 0 22px rgba(212,166,74,.12)}
.form-card button{width:100%;padding:8px;border-top:1px solid rgba(212,166,74,.25);font-size:8px;letter-spacing:.18em;color:var(--gold2)}
.form-card button:hover{background:rgba(212,166,74,.12)}
.form-card.locked img{filter:grayscale(.7) brightness(.7) sepia(.2)}
.form-card.locked::after{content:"LOCKED";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-6deg);
  font-family:var(--serif);font-size:15px;letter-spacing:.2em;color:rgba(255,180,160,.85);border:2px solid rgba(224,52,42,.7);padding:4px 10px;background:rgba(10,1,3,.55)}

.pack-card{border:1px solid rgba(212,166,74,.4);padding:12px;background:
  radial-gradient(120% 140% at 50% 0%,rgba(58,5,8,.55),rgba(8,1,2,.6));margin-bottom:12px;position:relative;overflow:hidden}
.pack-card h3{font-family:var(--serif);font-weight:400;margin:0;font-size:15px;letter-spacing:.12em;color:var(--gold2)}
.pack-card .pk-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.pack-card p{margin:4px 0 0;font-size:8px;letter-spacing:.1em;color:rgba(241,231,213,.5);line-height:1.6}
.pk-price{font-family:var(--serif);font-size:19px;color:var(--gold2)}
.pk-state{font-size:7px;letter-spacing:.16em;border:1px solid rgba(212,166,74,.5);padding:3px 6px;color:var(--gold2)}
.pk-state.owned{border-color:rgba(143,191,122,.5);color:#a9d694}
.skill-list{display:flex;flex-direction:column;gap:6px}
.skill-row{display:flex;gap:9px;align-items:center;padding:8px;border:1px solid rgba(212,166,74,.14);background:rgba(12,2,4,.5)}
.skill-row .si{width:28px;height:28px;flex:none;border:1px solid rgba(212,166,74,.4);border-radius:50%;display:grid;place-items:center;color:var(--gold2)}
.skill-row .si svg{width:18px;fill:none;stroke:currentColor}
.skill-row b{display:block;font-size:9px;letter-spacing:.16em;color:var(--bone)}
.skill-row span{display:block;font-size:8px;letter-spacing:.08em;color:rgba(241,231,213,.42);margin-top:2px}
.skill-row .lk{margin-left:auto;font-size:7px;letter-spacing:.14em;color:#ff9d8e}

.opt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid rgba(212,166,74,.14)}
.opt-row b{display:block;font-size:9px;letter-spacing:.16em;color:var(--bone);font-weight:600}
.opt-row small{display:block;font-size:8px;color:rgba(241,231,213,.4);letter-spacing:.08em;margin-top:2px}
.toggle{min-width:56px;padding:6px;border:1px solid rgba(212,166,74,.45);font-size:8px;letter-spacing:.16em;color:rgba(241,231,213,.5)}
.toggle.on{border-color:rgba(212,166,74,.85);color:var(--gold2);background:rgba(212,166,74,.1)}
.options-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* pack modal */
.pack-panel{width:min(94vw,620px)}
.pack-hero{padding:6px 2px 2px}
.pack-price{text-align:center;margin:2px 0 14px}
.pack-price span{font-family:var(--serif);font-size:34px;color:var(--gold2);text-shadow:0 0 26px rgba(212,166,74,.4)}
.pack-price small{display:block;font-size:7px;letter-spacing:.3em;color:rgba(241,231,213,.42);margin-top:2px}
.pack-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pack-items li{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:baseline;border-bottom:1px solid rgba(212,166,74,.12);padding-bottom:8px}
.pack-items b{font-family:var(--serif);font-weight:400;font-size:11px;letter-spacing:.14em;color:var(--gold)}
.pack-items span{font-size:8.5px;letter-spacing:.08em;color:rgba(241,231,213,.55);line-height:1.5}
.pack-foot{text-align:center;margin-top:16px}
.pack-foot .start-btn{width:100%;animation:none}
.micro{font-size:7.5px;letter-spacing:.1em;color:rgba(241,231,213,.35);margin:10px 0 0;line-height:1.6}

/* how to play */
.how-panel{width:min(94vw,680px)}
.how-body{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.how-col.wide{grid-column:1/-1;border-top:1px solid rgba(212,166,74,.2);padding-top:10px}
.how-col h3{font-size:8px;letter-spacing:.3em;color:var(--gold);margin:0 0 8px}
.how-col p{font-size:9px;line-height:2;color:rgba(241,231,213,.55);margin:0;letter-spacing:.04em}
.how-col b{color:rgba(212,166,74,.9);font-weight:600}
.how-foot{margin-top:16px;text-align:center}
.how-foot .start-btn{animation:none}

/* completion */
#complete{z-index:45;flex-direction:column}
.complete-inner{position:relative;z-index:2;text-align:center}
.stamp{font-family:var(--serif);font-size:clamp(26px,9vw,58px);letter-spacing:.14em;color:var(--gold);
  border:3px double rgba(212,166,74,.85);padding:6px 18px;transform:rotate(-7deg);display:inline-block;
  box-shadow:0 0 40px rgba(212,166,74,.22),inset 0 0 24px rgba(212,166,74,.1);text-shadow:0 2px 0 rgba(0,0,0,.6);
  animation:stampIn .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stampIn{from{transform:rotate(-7deg) scale(2.4);opacity:0}to{transform:rotate(-7deg) scale(1);opacity:1}}
.complete-title{font-family:var(--serif);letter-spacing:.3em;font-size:clamp(11px,3vw,15px);color:var(--bone);margin:22px 0 8px;text-indent:.3em}
.complete-money{display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--serif);font-size:clamp(20px,6vw,30px);color:var(--gold2)}
.complete-money img{width:34px;transform:rotate(-7deg)}
.complete-sub{font-size:9px;letter-spacing:.16em;color:rgba(241,231,213,.5);margin:8px 0 22px;text-transform:uppercase}
#complete .start-btn{animation:none}
.bill-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bill-rain img{position:absolute;top:-12%;width:52px;opacity:.9;animation:fall linear infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
@keyframes fall{0%{transform:translateY(-10vh) rotate(0) translateX(0)}50%{transform:translateY(50vh) rotate(200deg) translateX(30px)}100%{transform:translateY(115vh) rotate(400deg) translateX(-20px)}}

#dead{z-index:45;background:radial-gradient(70% 60% at 50% 50%,rgba(58,5,8,.6),rgba(3,0,1,.95))}
.dead-inner{text-align:center}
.dead-title{font-family:var(--serif);font-size:clamp(18px,6vw,34px);letter-spacing:.2em;color:#e0342a;text-shadow:0 0 30px rgba(224,52,42,.6)}
.dead-sub{font-size:9px;letter-spacing:.16em;color:rgba(241,231,213,.5);margin:10px 0 24px;text-transform:uppercase}

.toast-big{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.9);z-index:44;
  font-family:var(--serif);font-size:clamp(22px,7vw,42px);letter-spacing:.16em;color:var(--gold2);
  text-shadow:0 0 40px rgba(179,18,27,.9),0 4px 10px #000;opacity:0;pointer-events:none;text-align:center;transition:opacity .3s,transform .3s}
.toast-big.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* responsive */
@media (orientation:portrait){
  .title-art.wide{display:none}
  .title-art.tall{display:block}
}
@media (orientation:landscape){
  .title-art.tall{display:none}
  .title-art.wide{display:block}
  .title-inner{padding-top:3vh}
  .wordmark{width:min(62vw,560px);margin-top:0}
  .title-line{margin:7px 0 11px}
  .title-note{margin-top:10px}
  .lens{bottom:112px;width:clamp(70px,11vw,96px)}
}
@media (max-width:420px){
  .banner{top:72px}
  .objective{top:158px}
  .money #cash{font-size:17px}
  .bill-ico{width:24px;height:24px}
  .vial{height:66px;width:21px}
  .prompt{bottom:300px}
  .form-card img{height:150px}
  .pack-items li{grid-template-columns:88px 1fr}
  .how-body{grid-template-columns:1fr}
}
@media (max-height:560px){
  .banner{top:52px;padding:4px 20px 6px}
  .objective{top:126px}
  .lens{bottom:8px;left:calc(50% - 40px);width:80px;display:none}
  .prompt{bottom:250px}
  .title-inner{padding-top:2vh}
  .wordmark{width:min(56vw,460px)}
  .title-sub{font-size:10px}
  .start-btn{padding:9px 18px;min-width:170px}
  .title-row{margin-top:10px}
  .vial{height:58px}
  .hud-top{padding-top:6px}
  .skillbar{bottom:calc(196px + env(safe-area-inset-bottom))}
}
@media (min-width:900px){
  .hud-top{padding-left:20px;padding-right:20px;padding-top:14px}
  .vial{width:28px;height:92px}
  .bat-ico{width:19px;height:11px}
  #cash{font-size:22px}
  .lens{width:126px;bottom:24px;left:20px}
  .banner{top:96px}
  .objective{top:192px}
  .prompt{bottom:36px}
  .pad,.stick{display:none}
  .menu-btn{bottom:18px;right:20px;transform:none}
  .desk-hints{font-size:9px;gap:16px}
  body.desk.playing .desk-hints{display:flex}
}
@media (min-width:900px) and (pointer:coarse){
  .pad,.stick{display:block}
}

body.touch .prompt{bottom:calc(300px + env(safe-area-inset-bottom))}
body.touch .lens{bottom:calc(146px + env(safe-area-inset-bottom))}