:root{
  --ink:#0d0f10; --panel:#15181a; --panel2:#1d2124;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --text:#EDE7DC; --dim:#9AA0A2; --dim2:#6f7679;
  --amber:#E8B33A; --orange:#F2701E; --red:#C0392B; --green:#7FA05A; --steel:#9AA0A2;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--ink)}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text); user-select:none;-webkit-user-select:none; overscroll-behavior:none;
  font-size:15px; line-height:1.45;
}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;z-index:0}
.hidden{display:none !important}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ---------- title ---------- */
.screen{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 8%, #23282b 0%, #14171a 45%, #0a0c0d 100%);}
.loader-inner{max-width:440px;text-align:center;animation:fadeUp .5s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stamp{font:600 10px/1 ui-monospace,monospace;letter-spacing:.26em;color:var(--amber);opacity:.85;margin-bottom:14px}
.screen h1{font-size:clamp(34px,10vw,54px);letter-spacing:.06em;line-height:.95;font-weight:800;color:#F1EADD}
.sub-h{font-size:clamp(20px,6.5vw,30px);letter-spacing:.36em;font-weight:800;color:var(--orange);margin-top:6px}
.sub{margin:14px auto 22px;color:var(--dim);max-width:330px;font-size:14px}
.tiny{font-size:11px;color:var(--dim2);margin-top:14px;line-height:1.5}
.tiny.dim{opacity:.75;margin-top:8px}
.btn{border-radius:12px;padding:13px 22px;font-weight:700;font-size:15px;letter-spacing:.04em;
  background:var(--panel2);border:1px solid var(--line2);color:var(--text);
  transition:transform .12s ease, background .15s ease, border-color .15s ease}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,#F0812F,#D95B12);border-color:#FFA45E;color:#1a1004;box-shadow:0 6px 0 #7d3208, 0 12px 26px rgba(0,0,0,.45)}
.btn.primary:active{box-shadow:0 2px 0 #7d3208;transform:translateY(3px) scale(.99)}
.btn.big{font-size:17px;padding:16px 34px;letter-spacing:.1em;margin-top:4px}
.btn.wide{width:100%}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.42;cursor:default;transform:none}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:70;pointer-events:none}
#intro .bar{position:absolute;left:0;right:0;height:11vh;background:#050607;animation:barIn .5s ease-out both}
#intro .bar.top{top:0}
#intro .bar.bottom{bottom:0;display:flex;align-items:center;justify-content:center}
@keyframes barIn{from{height:50vh}to{height:11vh}}
.intro-card{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;
  font-size:clamp(46px,15vw,120px);letter-spacing:.06em;color:#F4EDE0;
  text-shadow:0 6px 0 rgba(0,0,0,.55), 0 22px 50px rgba(0,0,0,.7);opacity:0}
.intro-card.show{animation:stampIn .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes stampIn{0%{opacity:0;transform:scale(1.7) rotate(-5deg)}60%{opacity:1;transform:scale(.94) rotate(1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.skip{position:absolute;right:14px;bottom:14px;pointer-events:auto;z-index:5;
  font-size:12px;letter-spacing:.14em;font-weight:700;color:#cfc7b8;padding:12px 16px;border-radius:10px;
  background:rgba(20,22,24,.7);border:1px solid rgba(255,255,255,.16)}
.fade{position:fixed;inset:0;z-index:80;background:#000;opacity:0;pointer-events:none;transition:opacity .7s ease}
.fade.on{opacity:1}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none}
#hud button{pointer-events:auto}
.hud-top{position:absolute;top:0;left:0;right:0;padding:8px 10px 0;display:flex;flex-direction:column;gap:6px}
.hud-row1{display:flex;align-items:center;gap:8px}
.rank-chip{display:flex;align-items:center;gap:4px;background:rgba(16,18,20,.86);border:1px solid var(--line2);
  border-radius:9px;padding:6px 9px;font:800 10px/1 ui-monospace,monospace;letter-spacing:.1em;color:var(--amber);
  white-space:nowrap;backdrop-filter:blur(8px)}
.rank-chip i{font-size:7px;color:#8d9498;font-style:normal}
.respect-meter{flex:1;min-width:0;background:rgba(16,18,20,.86);border:1px solid var(--line);border-radius:9px;
  padding:5px 9px 7px;backdrop-filter:blur(8px)}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;font:700 9px/1 ui-monospace,monospace;
  letter-spacing:.16em;color:var(--dim)}
.meter-head b{font-size:12px;color:var(--text);letter-spacing:0}
.meter{height:6px;border-radius:4px;background:rgba(255,255,255,.10);overflow:hidden;margin-top:4px}
.meter i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#C98A2A,#F3C757);transition:width .35s ease}
.cash-chip{display:flex;align-items:center;gap:5px;background:rgba(16,18,20,.86);border:1px solid var(--line2);
  border-radius:9px;padding:7px 10px;backdrop-filter:blur(8px)}
.cash-chip .coin{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;
  background:linear-gradient(180deg,#F5D06A,#C08B1E);color:#4a3006;font:800 10px/1 ui-monospace,monospace}
.cash-chip b{font:800 13px/1 ui-monospace,monospace;color:#F5D06A}
.icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(16,18,20,.86);border:1px solid var(--line2);color:var(--text);backdrop-filter:blur(8px)}
.icon-btn:active{background:rgba(60,64,68,.9)}
.hud-row2{display:flex;align-items:center;gap:8px;font:700 9px/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--dim)}
.sentence{display:flex;align-items:center;gap:5px;background:rgba(16,18,20,.8);border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;white-space:nowrap}
.sentence b{font:800 11px/1 ui-monospace,monospace;color:#E7B75E;letter-spacing:0}
.stat{display:flex;align-items:center;gap:5px;background:rgba(16,18,20,.8);border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;flex:1;min-width:0}
.mini{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;min-width:24px}
.mini i{display:block;height:100%;width:100%;border-radius:3px;transition:width .3s ease}
.mini i.hp{background:linear-gradient(90deg,#9c3a2c,#e05a3c)}
.mini i.sta{background:linear-gradient(90deg,#2f7a6b,#4fc2a5)}

.objective{position:absolute;top:86px;left:10px;width:178px;background:rgba(14,16,18,.82);
  border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:8px 10px;
  backdrop-filter:blur(8px)}
.obj-h{font:800 8px/1 ui-monospace,monospace;letter-spacing:.2em;color:var(--amber);margin-bottom:4px}
#objText{font-size:11.5px;line-height:1.32;color:#E4DFD4;font-weight:600}
.obj-d{font:700 9px/1 ui-monospace,monospace;color:var(--dim);margin-top:5px;letter-spacing:.05em}

.mm-wrap{position:absolute;top:86px;right:10px;width:104px}
#minimap{width:104px;height:104px;display:block;border-radius:10px;border:1px solid var(--line2);
  background:#101314;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.zone-lbl{margin-top:5px;text-align:center;font:800 8px/1 ui-monospace,monospace;letter-spacing:.14em;
  color:#cfc7b8;background:rgba(14,16,18,.8);border:1px solid var(--line);border-radius:6px;padding:4px 3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.prompt{position:absolute;left:50%;transform:translateX(-50%);bottom:126px;display:flex;align-items:center;gap:8px;
  background:rgba(12,14,16,.9);border:1px solid rgba(232,179,58,.5);border-radius:999px;padding:7px 14px 7px 7px;
  backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.5);animation:promptIn .18s ease-out}
@keyframes promptIn{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%)}}
.prompt b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--amber);
  color:#221700;font:800 11px/1 ui-monospace,monospace}
.prompt span{font-size:12.5px;font-weight:700;color:#F0E9DC;white-space:nowrap}

.carry-chip{position:absolute;left:50%;transform:translateX(-50%);top:150px;display:flex;flex-direction:column;
  align-items:center;gap:5px;background:rgba(30,12,10,.9);border:1px solid rgba(192,57,43,.7);border-radius:9px;
  padding:7px 12px;font:800 9px/1 ui-monospace,monospace;letter-spacing:.14em;color:#F0A090}
.carry-chip .dot{display:none}
.susp{width:110px;height:5px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.susp i{display:block;height:100%;background:linear-gradient(90deg,#E8B33A,#C0392B);transition:width .12s linear}

.toast-wrap{position:absolute;left:50%;transform:translateX(-50%);top:38%;display:flex;flex-direction:column;
  align-items:center;gap:6px;width:min(86vw,340px);pointer-events:none}
.toast{background:rgba(12,14,16,.94);border:1px solid var(--line2);border-left:3px solid var(--amber);
  border-radius:9px;padding:9px 13px;font-size:12.5px;font-weight:600;color:#F0E9DC;width:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.5);animation:toastIn .22s ease-out}
.toast.good{border-left-color:var(--green)}
.toast.bad{border-left-color:var(--red)}
.toast.cash{border-left-color:var(--amber)}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- controls dock ---------- */
.dock{position:absolute;left:0;right:0;bottom:0;height:190px;pointer-events:none}
.joy{position:absolute;left:14px;bottom:14px;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.07), rgba(10,12,13,.55));
  border:1.5px solid rgba(255,255,255,.16);pointer-events:auto;touch-action:none;
  display:grid;place-items:center;backdrop-filter:blur(4px)}
.joy-ring{position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(255,255,255,.13)}
.joy-knob{width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #FBF0DA, #C9BFA9 60%, #8d8577);
  box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 -2px 6px rgba(0,0,0,.28);
  transition:transform .06s linear}
.joy-hint{position:absolute;bottom:6px;font:800 7px/1 ui-monospace,monospace;letter-spacing:.2em;color:rgba(255,255,255,.3)}
.actions{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.mini-row{display:flex;gap:9px}
.act{display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(46,52,56,.92),rgba(20,24,26,.94));color:#E6E0D3;pointer-events:auto;
  box-shadow:0 6px 16px rgba(0,0,0,.45);transition:transform .1s ease, background .15s ease}
.act:active{transform:scale(.93);background:linear-gradient(180deg,rgba(80,88,92,.95),rgba(38,44,46,.96))}
.act.small{width:50px;height:50px}
.act.big{width:82px;height:82px;color:#241700;
  background:linear-gradient(180deg,#F5C458,#D9932A);border-color:#FFDE9A;
  box-shadow:0 6px 0 #8a5c14, 0 12px 24px rgba(0,0,0,.45)}
.act.big:active{transform:translateY(3px) scale(.98);box-shadow:0 2px 0 #8a5c14}
.act.lock{opacity:.55}
.act.lock.hot{opacity:1;color:#F0A090;border-color:rgba(192,57,43,.6)}

/* ---------- panel / sheet ---------- */
.panel{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(5,6,7,.66);backdrop-filter:blur(3px);pointer-events:auto}
@media(min-width:720px){.panel{align-items:center;padding:22px}}
.sheet{width:100%;max-width:540px;max-height:88vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#1c2023,#131618);border:1px solid var(--line2);border-radius:18px 18px 0 0;
  box-shadow:0 -24px 70px rgba(0,0,0,.7);animation:sheetIn .2s ease-out}
@media(min-width:720px){.sheet{border-radius:16px;max-height:84vh}}
@keyframes sheetIn{from{transform:translateY(22px);opacity:.5}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.sheet-head h2{font:800 14px/1.2 ui-monospace,monospace;letter-spacing:.16em;color:var(--amber)}
.x{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#cfc7b8;
  background:rgba(255,255,255,.06);border:1px solid var(--line)}
.x:active{background:rgba(255,255,255,.14)}
.sheet-body{padding:14px 16px 26px;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* dialogue */
.dlg-top{display:flex;gap:11px;align-items:center;margin-bottom:12px}
.dlg-av{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;
  font:800 17px/1 ui-monospace,monospace;color:#1a1004;background:linear-gradient(180deg,#F5C458,#D9932A)}
.dlg-name{font-weight:800;font-size:14px}
.dlg-role{font:700 9px/1 ui-monospace,monospace;letter-spacing:.16em;color:var(--dim);margin-top:4px;text-transform:uppercase}
.dlg-line{font-size:13.5px;color:#DED8CB;line-height:1.55;background:rgba(255,255,255,.04);
  border-left:2px solid rgba(232,179,58,.55);border-radius:0 9px 9px 0;padding:10px 12px;margin-bottom:13px}
.opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 12px;border-radius:11px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);margin-bottom:8px;transition:background .14s ease,transform .1s ease}
.opt:active{transform:scale(.985);background:rgba(255,255,255,.1)}
.opt .oi{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:rgba(232,179,58,.14);color:var(--amber);font:800 12px/1 ui-monospace,monospace}
.opt .ot{flex:1;min-width:0}
.opt .on{font-weight:700;font-size:13px;display:block}
.opt .os{font-size:11px;color:var(--dim);margin-top:2px;display:block}
.opt .oc{font:800 11px/1 ui-monospace,monospace;color:#F5D06A;white-space:nowrap}
.opt:disabled{opacity:.45}

/* generic rows */
.row{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:9px}
.row .ri{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(232,179,58,.12);color:var(--amber);font:800 14px/1 ui-monospace,monospace}
.row .rt{flex:1;min-width:0}
.row .rn{font-weight:700;font-size:13px}
.row .rs{font-size:11px;color:var(--dim);margin-top:2px;line-height:1.35}
.row .rb{flex:none}
.buy{border-radius:9px;padding:8px 12px;font:800 11px/1 ui-monospace,monospace;letter-spacing:.04em;
  background:linear-gradient(180deg,#F0C25C,#D08F22);color:#241700;border:1px solid #FBDD9B;white-space:nowrap}
.buy:active{transform:scale(.96)}
.buy:disabled{background:rgba(255,255,255,.08);color:var(--dim);border-color:var(--line)}
.buy.owned{background:rgba(127,160,90,.18);color:#A9C983;border-color:rgba(127,160,90,.4)}
.owned-tag{font:800 10px/1 ui-monospace,monospace;color:#A9C983;letter-spacing:.1em}

.banner{border-radius:10px;padding:9px 11px;font-size:11.5px;line-height:1.45;margin-bottom:13px;
  background:rgba(192,57,43,.12);border:1px solid rgba(192,57,43,.35);color:#EFB3A6}
.banner.info{background:rgba(232,179,58,.1);border-color:rgba(232,179,58,.3);color:#EBD49A}
.sec-h{font:800 9px/1 ui-monospace,monospace;letter-spacing:.2em;color:var(--dim);margin:16px 0 9px}
.sec-h:first-child{margin-top:0}
.kv{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
.kv b{color:#F0E9DC}
.small-note{font-size:11px;color:var(--dim2);line-height:1.5;margin-top:10px}
.help-list{font-size:12.5px;line-height:1.6;color:#DED8CB;padding-left:2px}
.help-list li{list-style:none;padding:6px 0 6px 22px;position:relative;border-bottom:1px dashed rgba(255,255,255,.06)}
.help-list li:before{content:"›";position:absolute;left:6px;color:var(--amber);font-weight:800}

/* minigames */
.mg-hint{font-size:12.5px;color:var(--dim);margin-bottom:14px;line-height:1.5}
.mg-track{position:relative;height:46px;border-radius:11px;background:rgba(255,255,255,.06);
  border:1px solid var(--line2);overflow:hidden;margin-bottom:16px}
.mg-zone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,rgba(127,160,90,.55),rgba(127,160,90,.3));
  border-left:2px solid #A9C983;border-right:2px solid #A9C983}
.mg-needle{position:absolute;top:-4px;bottom:-4px;width:5px;border-radius:3px;background:#F2701E;
  box-shadow:0 0 14px rgba(242,112,30,.9);transform:translateX(-50%)}
.mg-foot{display:flex;justify-content:space-between;font:800 11px/1 ui-monospace,monospace;
  letter-spacing:.1em;color:var(--dim);margin-top:12px}
.mg-foot b{color:var(--amber)}
.mg-books{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.book{height:56px;border-radius:10px;border:2px solid rgba(255,255,255,.16);display:grid;place-items:center;
  font:800 16px/1 ui-monospace,monospace;color:rgba(0,0,0,.5);transition:transform .1s ease, box-shadow .18s ease}
.book:active{transform:scale(.95)}
.book.lit{box-shadow:0 0 0 3px #fff, 0 0 24px currentColor;transform:scale(1.05)}
.book.wrong{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.mg-power{height:26px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid var(--line2);
  overflow:hidden;margin-bottom:14px}
.mg-power i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#C98A2A,#F5D06A);
  transition:width .07s linear}
.lift-btn{width:100%;height:120px;border-radius:16px;font:900 20px/1 ui-monospace,monospace;letter-spacing:.2em;
  color:#241700;background:linear-gradient(180deg,#F5C458,#D9932A);border:2px solid #FFDE9A;
  box-shadow:0 8px 0 #8a5c14;transition:transform .05s linear,box-shadow .05s linear}
.lift-btn:active{transform:translateY(6px);box-shadow:0 2px 0 #8a5c14}

/* npc tags */
#tags{position:fixed;inset:0;z-index:15;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;white-space:nowrap;font:800 10px/1 ui-monospace,monospace;
  letter-spacing:.06em;color:#EDE7DC;background:rgba(10,12,13,.72);border:1px solid rgba(255,255,255,.14);
  border-radius:6px;padding:4px 7px;will-change:transform}
.tag.quest{color:#241700;background:rgba(232,179,58,.92);border-color:#FFDE9A}

@media (max-height:520px){
  .objective{top:74px;width:150px}
  .mm-wrap{top:74px;width:88px}
  #minimap{width:88px;height:88px}
  .dock{height:130px}
  .joy{width:96px;height:96px}
  .joy-knob{width:44px;height:44px}
  .act.big{width:66px;height:66px}
  .act.small{width:44px;height:44px}
  .prompt{bottom:104px}
}
@media (min-width:820px){
  .objective{width:236px;top:92px;left:16px}
  #objText{font-size:13px}
  .mm-wrap{width:150px;right:16px;top:92px}
  #minimap{width:150px;height:150px}
  .hud-top{padding:12px 16px 0}
  .joy{left:22px;bottom:22px}
  .actions{right:22px;bottom:22px}
  .prompt{bottom:150px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}