*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;font-family:Verdana,Geneva,sans-serif;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
html,body{width:100%;height:100%;background:var(--c0);overflow:hidden;touch-action:manipulation;overscroll-behavior:none}
:root{
  --c0:#1b1b1b;--c1:#222;--c2:#1b1b1b;--c3:#242424;--c4:#2e2e2e;
  --c5:#3a3a3a;--c6:#767676;--c7:#fff;--c8:#aaa;--c9:#fff;
  --green:#4a8a4a;--red:#994040;--amber:#a07828;--blue:#3a6080;
  --nav:46px;--quest:58px;
  --syslog-bg:#ffffff;--syslog-border:#ccc;--syslog-thumb:#ccc;
  --quest-bg:#1e1e1e;
  --log-info:#444;--log-warn:#bf2626;--log-danger:#aa6622;--log-gain:#226622;--log-mail:#224488;
}
/* ── FOREST THEME ── */
html.theme-forest{
  --c0:#9dc54d;--c1:#bdd887;--c2:#9dc54d;--c3:#9dc54d;--c4:#ddebc1;
  --c5:#f2f7e8;--c6:#f2f7e8;--c7:#f2f7e8;--c8:#0d3f0d;--c9:#009c00;
  --green:#357035;--amber:#8a6800;
  --syslog-bg:#e8f5e8;--syslog-border:#7BBF7B;--syslog-thumb:#7BBF7B;
  --quest-bg:#005000;
  --log-info:#2e6e2e;--log-gain:#1a5a1a;
}
html.theme-forest .coin.g{background:#ffd700;color:#da9100}
/* Forest + Breeze share the same silver coin style */
html.theme-forest .coin.s,
html.theme-breeze .coin.s{background:#a8a8a8;color:#777}
/* ── BREEZE THEME ── */
html.theme-breeze{
  --c0:#40c2ff;--c1:#74d2ff;--c2:#40c2ff;--c3:#40c2ff;--c4:#c5ecfd;
  --c5:#f1fbff;--c6:#ffffff;--c7:#f1fbff;--c8:#ffffff;--c9:#f1fbff;
  --green:#008866;--red:#cc4444;--blue:#0077aa;
  --syslog-bg:#eafaff;--syslog-border:#66CCEE;--syslog-thumb:#66CCEE;
  --quest-bg:#0096dd;
  --log-info:#006680;--log-gain:#006644;--log-mail:#005588;
}
/* Light-theme nav fixes — inactive icons need to show on dark --c0 bar */
html.theme-forest .nav-btn{color:#156A15}
html.theme-forest .nav-btn.active{color:#ffffff}
html.theme-breeze .nav-btn{color:#0085c4}
html.theme-breeze .nav-btn.active{color:#ffffff}
#shell{
  position:relative;width:100%;max-width:430px;
  height:100vh;height:100dvh;
  margin:0 auto;background:var(--c1);overflow:hidden;
  display:flex;flex-direction:column;
}  
/* TOP BAR */
#topBar{
  flex-shrink:0;
  height:calc(52px + env(safe-area-inset-top,0px));
  background:var(--c0);
  border-bottom:1px solid var(--c4);
  display:flex;align-items:center;
  padding:env(safe-area-inset-top,0px) 10px 0;
  gap:6px;z-index:50;
}
.tb-name{font-size:13px;font-weight:bold;color:var(--c9);white-space:nowrap;letter-spacing:.2px}
.tb-spacer{flex:1}
.tb-st{display:flex;align-items:center;gap:3px}
.tb-st .lbl{font-size:10px;color:var(--c7);text-transform:uppercase;letter-spacing:.3px}
.tb-st .val{font-size:13px;font-weight:bold;color:var(--c9)}
.coin{
  width:12px;height:12px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:bold;flex-shrink:0;
}
.coin.g{background:#ffd700;color:#da9100}
.coin.s{background:#c0c0c0;color:#f8f8ff}
/* EXP bar */
.tb-name-wrap{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.exp-row{display:flex;align-items:center;gap:5px}
.exp-lbl{font-size:9px;color:var(--c7);text-transform:uppercase;letter-spacing:.3px}
.exp-bar-w{width:64px;height:4px;background:var(--c4);border-radius:2px;overflow:hidden}
.exp-bar{height:100%;border-radius:2px;background:#4a8a4a;transition:width .4s ease}
/* label colors — !important needed to beat .tb-st .lbl specificity */
.lbl-stamina{color:#d4b800 !important}
.lbl-hp{color:#cc4444 !important}
.regen-timer{font-size:9px;color:var(--c9);min-height:12px;height:12px;line-height:12px;letter-spacing:.2px;white-space:nowrap}
/* SYSTEM LOG — white sharp rectangle */
#sysLog{
  max-height:72px;overflow-y:auto;
  background:var(--syslog-bg);
  border-bottom:1px solid var(--syslog-border);
  padding:6px 11px;
  display:flex;flex-direction:column;gap:1px;
}
#sysLog::-webkit-scrollbar{width:2px}
#sysLog::-webkit-scrollbar-thumb{background:var(--syslog-thumb)}
.log-entry{
  font-size:12px;line-height:1.5;
  padding:1px 0;
}
.log-entry.info{color:var(--log-info)}
.log-entry.warn{color:var(--log-warn)}
.log-entry.danger{color:var(--log-danger)}
.log-entry.gain{color:var(--log-gain)}
.log-entry.mail{color:var(--log-mail)}
/* CONTENT */
#content{flex:1;overflow:hidden;position:relative}
/* SCREENS */
.screen{
  position:absolute;inset:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;display:none;padding:12px;
}
.screen.active{display:block}
.screen::-webkit-scrollbar{width:2px}
.screen::-webkit-scrollbar-thumb{background:var(--c5)}
/* BOTTOM */
#bottom{flex-shrink:0;background:var(--c0);border-top:1px solid var(--c4)}
#questBar{
  position:relative;
  padding:9px 14px 8px;
  background:var(--quest-bg);
  border-bottom:1px solid var(--c4);
  border-top:1px solid var(--c4);
}
.q-rew{font-size:12px;font-weight:bold;color:var(--c9);margin-bottom:3px}
.q-desc{font-size:12px;color:var(--c7)}
/* Nav */
#nav{height:var(--nav);display:flex;align-items:stretch;border-top:1px solid var(--c3)}
@media all and (display-mode:standalone){
  #nav{height:calc(var(--nav) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;border:none;background:transparent;color:var(--c6);transition:color .15s;
}
.nav-btn.active{color:var(--c9)}
.nav-btn svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-btn .nl{font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-weight:bold}
/* ── MORE / SETTINGS ── */
.set-group{margin-bottom:18px}
.set-group-title{font-size:12px;color:var(--c6);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;padding:0 2px}
.set-row{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--c2);border:1px solid var(--c4);border-radius:9px;
  padding:14px;margin-bottom:6px;cursor:pointer;transition:border-color .12s;
}
.set-row:active{border-color:var(--c8)}
.set-lbl{font-size:14px;color:var(--c9)}
.set-dot{
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--c6);background:transparent;
  transition:background .15s,border-color .15s;flex-shrink:0;
}
.set-dot.on{background:var(--green);border-color:var(--green)}
/* ── HOME ── */
.eq-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.eq-slot{
  background:var(--c2);border:1px solid var(--c5);border-radius:8px;
  padding:10px 4px 8px;display:flex;flex-direction:column;
  align-items:center;gap:4px;cursor:pointer;transition:border-color .15s;
  aspect-ratio:1;justify-content:center;
}
.eq-slot:active{border-color:var(--c8)}
.eq-ico{width:44px;height:44px;object-fit:contain}
.eq-ph{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--c5);font-size:22px}
.eq-name{font-size:11px;color:var(--c9);text-align:center;font-weight:bold;line-height:1.2;min-height:22px}
.eq-lbl{font-size:10px;color:var(--c7);text-transform:uppercase;letter-spacing:.3px}
.fp-wrap{width:100%;height:4px;background:var(--c5);border-radius:2px;overflow:hidden}
.fp-bar{height:100%;border-radius:2px;background:var(--green);transition:width 1s linear}
.fp-bar.ready{background:var(--c9);animation:blink 1.2s infinite}
.fp-bar.losing{background:var(--red)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.act-btn{
  width:100%;background:var(--c2);border:1px solid var(--c4);border-radius:10px;
  display:flex;align-items:center;gap:14px;padding:15px 16px;
  cursor:pointer;margin-bottom:9px;transition:background .1s,border-color .1s;
}
.act-btn:active{background:var(--c3);border-color:var(--c7)}
.act-btn.locked{opacity:.28;cursor:not-allowed}
.act-btn.away{background:#af000c;border-color:#800000}
.act-ico{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.act-title{font-size:16px;font-weight:bold;color:var(--c9)}
.act-sub{font-size:12px;color:var(--c7);margin-top:3px}
.act-lk{font-size:11px;color:var(--c6);margin-left:auto}
/* ── TRAVEL ── */
.sc-title{font-size:18px;font-weight:bold;color:var(--c9);text-align:center;padding:4px 0 14px;letter-spacing:.4px}
.city-row{
  background:var(--c2);border:1px solid var(--c4);border-radius:9px;
  padding:15px 14px;margin-bottom:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;transition:border-color .12s;
}
.city-row:active{border-color:var(--c8)}
.city-row.locked{opacity:.28;cursor:not-allowed}
.city-row.here{border-color:var(--green);cursor:default}
.city-nm{font-size:17px;font-weight:bold;color:var(--c9)}
.city-tm{font-size:12px;color:var(--c7);margin-top:3px}
.cbadge{font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:4px}
.cbadge.here{background:var(--green);color:#fff;text-transform:none}
.cbadge.locked{background:var(--c3);color:var(--c6)}
.cbadge.going{background:var(--c3);color:#b3015b}
/* Mini route progress bar on destination city-row */
.city-row.going-row{border-color:var(--green);cursor:default}
.city-progress{width:100%;margin-top:8px}
.city-prog-route{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--c7);margin-bottom:4px}
.city-prog-route .cp-from{color:#b3015b;font-weight:bold}
.city-prog-route .cp-arrow{color:var(--c6);font-size:9px;display:inline-flex;gap:1px}
.cp-arrow-dot{display:inline-block;animation:arrowPulse 1.2s infinite;opacity:.2;color:#b3015b;font-size:12px;font-weight:bold}
.cp-arrow-dot:nth-child(1){animation-delay:0s}
.cp-arrow-dot:nth-child(2){animation-delay:.25s}
.cp-arrow-dot:nth-child(3){animation-delay:.5s}
@keyframes arrowPulse{0%,100%{opacity:.15}40%{opacity:1}}
.city-prog-route .cp-to{color:#b3015b;font-weight:bold}
.city-prog-bw{width:100%;height:5px;background:var(--c4);border-radius:3px;overflow:hidden;margin-bottom:4px}
.city-prog-bar{height:100%;border-radius:3px;background:#4a8a4a;transition:width 1s linear}
.city-prog-eta{font-size:10px;color:var(--c7);text-align:right}
/* ── TOWN ── */
.back-row{
  display:flex;align-items:center;gap:5px;font-size:13px;color:var(--c7);
  cursor:pointer;margin-bottom:9px;padding:3px 0;
}
.back-row svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.town-banner{
  width:100%;height:160px;border-radius:9px;overflow:hidden;
  background:var(--c2);position:relative;margin-bottom:12px;display:flex;align-items:flex-end;
}
.town-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.town-banner-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--c5);font-size:13px;text-transform:uppercase;letter-spacing:.6px;
}
.town-banner-lbl{
  position:relative;z-index:2;width:100%;
  background:linear-gradient(transparent,rgba(0,0,0,.88));
  padding:20px 14px 10px;font-size:22px;font-weight:bold;color:#fff;letter-spacing:1.2px;
}
.shop-row{
  background:var(--c2);border:1px solid var(--c4);border-radius:9px;
  padding:13px 14px;margin-bottom:8px;
  display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .12s;
}
.shop-row:active{border-color:var(--c8)}
.shop-row.out{opacity:.32;cursor:not-allowed}
.sico{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.sinfo{flex:1}
.sname{font-size:15px;font-weight:bold;color:var(--c9)}
.sstock{font-size:12px;color:var(--c7);margin-top:3px}
.sqty{font-weight:bold;color:var(--c9)}
.sprice{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:bold;color:var(--c9)}
/* Town action buttons — visually distinct from shop rows */
.town-action-wrap{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.town-act-btn{
  width:100%;min-height:52px;height:52px;border:none;border-radius:10px;cursor:pointer;
  font-size:15px;font-weight:bold;letter-spacing:.5px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:opacity .12s;
}
.town-act-btn:active{opacity:.75}
.town-act-btn.sell{background:#ffffff;color:#000000}
.town-act-btn.back{background:#3a3a3a;color:#ffffff;border:1px solid #555;border-radius:10px}
/* ── BAG ── */
.bag-cap{font-size:12px;color:var(--c7)}
.bag-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.bc{
  background:var(--c3);border:1px solid var(--c6);border-radius:8px;
  padding:10px 4px;display:flex;flex-direction:column;
  align-items:center;gap:4px;min-height:82px;position:relative;
}
.bc.empty{background:#222;border:1px solid #333}
.bc-ico{width:36px;height:36px;object-fit:contain}
.bc-name{font-size:11px;color:var(--c8);text-align:center}
.bc.empty .bc-name{color:#aaa}
.bc.consumable{border-color:var(--green);cursor:pointer}
.bc.consumable:active{background:var(--c4);border-color:var(--c8)}
.bc-cnt{position:absolute;top:4px;right:6px;font-size:11px;font-weight:bold;color:var(--c9)}
/* ── MODAL ── */
#mOverlay{
  position:fixed;inset:0;background:rgba(0,0,0,.9);
  z-index:200;display:none;align-items:flex-end;justify-content:center;
}
#mOverlay.on{display:flex}
#mOverlay.full-panel{
  align-items:stretch;
  top:calc(52px + env(safe-area-inset-top,0px));
  bottom:var(--bottom-h,180px);
  left:0;right:0;
  background:rgba(0,0,0,1);
}
#mOverlay.full-panel .m-sheet{
  border-radius:0;max-height:none;height:100%;
  display:flex;flex-direction:column;overflow-y:auto;
}
/* When a card/screen is open, lock ONLY nav buttons (gray+disabled), keep sysLog & quest fully readable */
#bottom.locked{pointer-events:none}
#bottom.locked #nav .nav-btn{color:#555;pointer-events:none}
#bottom.locked #nav .nav-btn.active{color:#555}
#bottom.locked #sysLog{opacity:1}
#bottom.locked #questBar{opacity:1}
.m-sheet{
  width:100%;max-width:430px;background:var(--c2);
  border-top:1px solid var(--c5);border-radius:14px 14px 0 0;
  padding:16px 16px 32px;max-height:88vh;overflow-y:auto;
}
.m-handle{width:36px;height:4px;background:var(--c5);border-radius:2px;margin:0 auto 16px}
.m-title{font-size:18px;font-weight:bold;color:var(--c9);text-align:center;margin-bottom:4px}
.m-sub{font-size:13px;color:var(--c7);text-align:center;margin-bottom:16px}
.m-info{background:var(--c1);border-radius:7px;padding:11px 13px;margin-bottom:16px}
.m-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px solid var(--c4)}
.m-row:last-child{border-bottom:none}
.m-row .ml{color:var(--c7)}
.m-row .mv{font-weight:bold;color:var(--c9)}
.np-disp{
  background:var(--c1);border:1px solid var(--c4);border-radius:7px;
  padding:13px;margin-bottom:11px;
}
.np-qty{font-size:42px;font-weight:bold;text-align:center;color:var(--c9);letter-spacing:2px;line-height:1}
.np-tot{text-align:center;font-size:13px;color:var(--c7);margin-top:5px}
.np-tot strong{color:var(--c9);font-size:15px}
.np-tot img,.sell-sel-p img,.enc-rd img,.m-sub img,.mv img{vertical-align:middle}
.np-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}
.nb{
  height:56px;background:var(--c3);border:1px solid var(--c5);border-radius:7px;
  font-size:22px;font-weight:bold;color:var(--c9);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .08s;
}
.nb:active{background:var(--c4)}
.nb.sp{font-size:12px;color:var(--c7)}
.nb.dl{color:var(--red)}
.sell-sel{
  display:flex;align-items:center;gap:11px;padding:11px 12px;
  background:var(--c3);border:1px solid var(--c5);border-radius:7px;
  margin-bottom:8px;cursor:pointer;transition:border-color .12s;
}
.sell-sel.on{border-color:var(--c9)}
.sell-sel-p{font-size:13px;color:var(--c9);font-weight:bold;margin-left:auto}
.btn-p{
  width:100%;min-height:52px;height:52px;border:none;border-radius:10px;cursor:pointer;
  font-size:15px;font-weight:bold;color:#fff;letter-spacing:.3px;
  background:var(--c5);transition:background .1s;margin-bottom:9px;
}
.btn-p:active{background:var(--c6)}
.btn-p:disabled{opacity:.28;cursor:not-allowed}
.btn-p.gr{background:#1e4a1e}.btn-p.gr:active{background:#285828}
.btn-p.bl{background:#1a3448}.btn-p.bl:active{background:#224460}
.btn-p.rd{background:#481a1a}.btn-p.rd:active{background:#602020}
.btn-p.pl{background:#1e3a14}.btn-p.pl:active{background:#284e1a}
.btn-cancel{
  width:100%;min-height:52px;height:52px;background:#ffffff;
  border:none;border-radius:10px;
  font-size:14px;font-weight:bold;color:#000000;cursor:pointer;
}
.btn-cancel:active{opacity:.75}
.harv-box{text-align:center;padding:8px 0 12px}
.harv-ico{width:58px;height:58px;object-fit:contain;margin-bottom:11px}
.harv-n{font-size:26px;font-weight:bold;color:var(--c9)}
.harv-s{font-size:13px;color:var(--c7);margin-top:4px}
.harv-w{font-size:13px;color:var(--red);margin-top:8px}
.enc-center{text-align:center;padding:6px 0 10px}
.enc-ico{width:100%;max-width:280px;height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 14px;display:block;border-radius:12px}
.enc-title{font-size:18px;font-weight:bold;color:var(--c9);margin-bottom:6px}
.enc-desc{font-size:14px;color:var(--c7);line-height:1.6;margin-bottom:15px}
.enc-res{border-radius:7px;padding:12px;margin-bottom:14px;display:none;background:var(--c1)}
.enc-res.win{border:1px solid var(--green)}
.enc-res.lose{border:1px solid var(--red)}
.enc-rt{font-size:15px;font-weight:bold;margin-bottom:4px}
.enc-res.win .enc-rt{color:var(--green)}
.enc-res.lose .enc-rt{color:var(--red)}
.enc-rd{font-size:13px;color:var(--c7)}
/* ── BATTLE SYSTEM ── */
#bottom.encounter-active #nav,#bottom.encounter-active #questBar{display:none}
#mOverlay.encounter-overlay{background:rgba(0,0,0,1)}
#mOverlay.encounter-overlay .m-sheet{background:var(--c0);padding-top:10px}

.battle-arena{display:flex;flex-direction:column;align-items:center;width:100%;padding:0 8px}

/* Combatant panels */
.combatant{width:100%;display:flex;flex-direction:column;align-items:center;position:relative}
.combatant-label{font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;color:var(--c7);margin-bottom:4px}
.combatant-name{font-size:16px;font-weight:bold;color:var(--c9);margin-bottom:4px;text-align:center}
.combatant-stats{font-size:11px;color:var(--c7);display:flex;gap:10px;margin-bottom:6px}
.combatant-stats b{color:var(--c9)}

/* HP Bar */
.hp-bar-wrap{width:100%;max-width:280px;height:14px;background:#1a1a1a;border-radius:7px;overflow:hidden;position:relative;border:1px solid #333}
.hp-bar-fill{height:100%;border-radius:6px;transition:width .5s ease-out;position:relative}
.hp-bar-fill.enemy{background:linear-gradient(180deg,#cc4444,#881818)}
.hp-bar-fill.player{background:linear-gradient(180deg,#44aa44,#1a661a)}
.hp-bar-fill.low{background:linear-gradient(180deg,#cc8800,#885500) !important}
.hp-bar-fill.critical{background:linear-gradient(180deg,#cc2222,#661111) !important;animation:hpPulse .6s infinite}
@keyframes hpPulse{0%,100%{opacity:1}50%{opacity:.6}}
.hp-bar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:bold;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);z-index:2}
.hp-fire{position:absolute;left:4px;top:-2px;font-size:10px;line-height:1;z-index:3}

/* Enemy image */
.battle-enemy-img{width:100%;max-width:220px;aspect-ratio: 1;object-fit:cover;object-position: top;border-radius:12px;border:2px solid #333;margin:10px 0}

/* VS divider */
.battle-vs{font-size:14px;font-weight:bold;color:var(--c6);letter-spacing:3px;margin:6px 0;text-align:center}

/* Slash screen tear effect */
.slash-overlay{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:0}
.slash-overlay.active{animation:slashFlash .35s ease-out forwards}
@keyframes slashFlash{
  0%{opacity:1}
  15%{opacity:1}
  100%{opacity:0}
}
.slash-line{position:absolute;top:0;left:0;width:150%;height:4px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.9) 30%,rgba(255,200,200,1) 50%,rgba(255,255,255,.9) 70%,transparent 100%);transform-origin:center center;filter:blur(1px)}
.slash-line.s1{top:35%;left:-20%;transform:rotate(-25deg);animation:slashSwipe .3s ease-out forwards}
.slash-line.s2{top:45%;left:-20%;transform:rotate(-22deg);animation:slashSwipe .3s .04s ease-out forwards;opacity:.5;height:2px}
@keyframes slashSwipe{
  0%{transform:rotate(-25deg) translateX(-100%)}
  100%{transform:rotate(-25deg) translateX(80%)}
}
.slash-tear{position:absolute;inset:0;background:linear-gradient(180deg,transparent 33%,rgba(255,255,255,.08) 33.5%,rgba(255,255,255,.08) 34.5%,transparent 35%);animation:tearShift .15s ease-out forwards}
@keyframes tearShift{
  0%{transform:translateX(-8px)}
  50%{transform:translateX(5px)}
  100%{transform:translateX(0)}
}

/* Blood spray particles */
.blood-container{position:fixed;inset:0;z-index:998;pointer-events:none;overflow:hidden}
.blood-particle{position:absolute;border-radius:50%;background:radial-gradient(circle,#cc2222,#880000);opacity:.9}
@keyframes bloodBurst{
  0%{transform:translate(0,0) scale(1);opacity:.9}
  60%{opacity:.7}
  100%{transform:translate(var(--bx),var(--by)) scale(0.2);opacity:0}
}
.blood-particle.active{animation:bloodBurst .6s ease-out forwards}

/* Damage number popup */
.dmg-popup{position:absolute;font-size:22px;font-weight:bold;color:#ff4444;text-shadow:0 0 6px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,.6);z-index:1000;pointer-events:none;animation:dmgFloat .9s ease-out forwards}
.dmg-popup.player-dmg{color:#ff6644}
.dmg-popup.enemy-dmg{color:#44ff44}
@keyframes dmgFloat{
  0%{transform:translateY(0) scale(1.3);opacity:1}
  60%{opacity:1}
  100%{transform:translateY(-40px) scale(.7);opacity:0}
}

/* Battle log */
.battle-log{width:100%;max-width:300px;margin:10px auto 0;height:78px;overflow-y:auto;background:#0a0a0a;border:1px solid #222;border-radius:6px;padding:6px 10px;visibility:hidden}
.battle-log::-webkit-scrollbar{width:2px}
.battle-log::-webkit-scrollbar-thumb{background:#333}
.blog-entry{font-size:11px;line-height:1.5;color:var(--c7)}
.blog-entry.atk-enemy{color:#cc6666}
.blog-entry.atk-player{color:#66cc66}
.blog-entry.result{color:#d4b800;font-weight:bold}

/* Battle button states */
.battle-btn-row{width:100%;max-width:300px;margin:12px auto 0}

/* ── RECIPE ROWS ── */
.recipe-row{
  display:flex;align-items:center;gap:4px;
  background:var(--c2);border:1px solid var(--c4);border-radius:10px;
  padding:8px 10px;margin-bottom:7px;cursor:pointer;
  transition:border-color .12s;position:relative;
  min-height:60px;
}
.recipe-row:active{border-color:var(--c8)}
.recipe-row.locked{cursor:default;opacity:.7}
.recipe-row.locked:active{border-color:var(--c4)}
.recipe-row.revealed{border-color:#4a6a3a}
.recipe-row.active-row{border-color:#4a8a4a}
.recipe-slot{
  display:flex;align-items:center;justify-content:center;position:relative;
  width:42px;height:42px;flex-shrink:0;
}
.recipe-slot img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}
.recipe-slot .rs-qty{
  position:absolute;bottom:-2px;left:-2px;
  background:rgba(0,0,0,.82);color:var(--c9);font-size:10px;font-weight:bold;
  padding:1px 4px;border-radius:4px;line-height:1.2;min-width:16px;text-align:center;
}
.recipe-q{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:bold;color:var(--c5);
  background:var(--c3);border-radius:8px;border:1px solid var(--c5);
}
.recipe-op{font-size:14px;font-weight:bold;color:var(--c6);flex-shrink:0;padding:0 1px}
.recipe-lock{
  font-size:10px;font-weight:bold;color:var(--c6);text-transform:uppercase;
  letter-spacing:.4px;margin-left:auto;flex-shrink:0;
}
.recipe-status{
  font-size:10px;font-weight:bold;text-transform:uppercase;
  letter-spacing:.4px;margin-left:auto;flex-shrink:0;
}
/* ── PORTRAIT GUARD (global) ── */
#portraitGuard{display:none;position:fixed;inset:0;z-index:9999;
  background:#111;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;text-align:center;padding:20px;color:#aaa}
@media(orientation:landscape){#portraitGuard{display:flex}}
.pg-icon{font-size:52px;animation:pgWobble 1.6s ease-in-out infinite}
@keyframes pgWobble{0%,100%{transform:rotate(0)}50%{transform:rotate(15deg)}}
.pg-text{font-size:12px;letter-spacing:4px;text-transform:uppercase}

/* ── HUNTING ── */
#screen-hunting{
  padding:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  background:#111;
}
#screen-hunting.active{display:flex}
#bottom.hunting-active #huntCtrl{display:flex}
#bottom.hunting-active #questBar,#bottom.hunting-active #nav{display:none}
.hunt-board-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  width:100%;max-width:430px;margin:0 auto;padding:8px;overflow:hidden;
}
.hunt-grid{display:grid;gap:2px}
/* Hunting cells */
.hcell{
  position:relative;background:#182230;border:1px solid #2a3d52;
  border-radius:2px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;transition:background .12s,transform .1s;
}
.hcell::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 55%);pointer-events:none}
.hcell:active:not(.rev):not(.htrap){transform:scale(.87);background:#1e2e3e}
.hcell.htrap{background:transparent;border-color:rgba(200,146,26,.55)}
.hcell.htrap::before{display:none}
.hcell.rev{background:#080f18;border-color:rgba(20,40,60,.65);cursor:default}
.hcell.rev::before{display:none}
.hcell.rev.hmonster{background:rgba(70,8,8,.7);border-color:rgba(150,25,25,.55);animation:hmRev .32s ease forwards}
@keyframes hmRev{0%{transform:scale(1.18);opacity:.3}100%{transform:scale(1);opacity:1}}
.hcell.rev:not(.hmonster){animation:hcOpen .18s ease-out}
@keyframes hcOpen{0%{transform:scale(.82);opacity:.5}100%{transform:scale(1);opacity:1}}
.hci{width:72%;height:72%;display:flex;align-items:center;justify-content:center}
.hci img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}
.hcn{font-family:monospace;font-weight:700;line-height:1}
.hn1{color:#5ab4ff}.hn2{color:#58e870}.hn3{color:#ff5858}.hn4{color:#c07cff}
.hn5{color:#ffb040}.hn6{color:#38d0d0}.hn7{color:#ff8ab4}.hn8{color:#fff}
.hunt-grid.trap-mode .hcell:not(.rev){cursor:crosshair}

/* Hunting control bar */
.hunt-ctrl{
  width:100%;max-width:430px;margin:0 auto;padding:8px 10px;flex-shrink:0;
  display:none;align-items:center;justify-content:space-between;gap:6px;
  border-top:1px solid #2a3d52;background:rgba(4,7,12,.95);
}
.hunt-btn-left{
  display:flex;align-items:center;justify-content:center;
  height:36px;padding:0 10px;flex-shrink:0;min-width:80px;
  background:rgba(40,10,10,.9);border:1px solid rgba(200,50,50,.3);border-radius:8px;
  cursor:pointer;transition:all .18s;font-size:10px;letter-spacing:2px;
  color:rgba(200,80,80,.8);text-transform:uppercase;font-weight:bold;
  font-family:Verdana,Geneva,sans-serif;
}
.hunt-btn-left:active{filter:brightness(.75)}
.hunt-btn-left.claim{
  background:rgba(10,40,20,.9);border-color:rgba(56,216,112,.4);
  color:rgba(56,216,112,.9);
}
.hunt-btn-left.exit-btn{
  background:rgba(20,15,5,.9);border-color:rgba(200,146,26,.3);
  color:rgba(200,146,26,.8);
}
.hunt-loot-slots{display:flex;align-items:center;gap:3px;flex-shrink:0}
.hunt-loot-slot{
  width:32px;height:32px;
  background:rgba(12,18,28,.9);border:1px solid rgba(50,70,90,.5);
  border-radius:2px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;transition:border-color .2s;
}
.hunt-loot-slot.filled{border-color:rgba(180,180,180,.35)}
.hunt-loot-slot img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.hunt-loot-slot.pop{animation:hlPop .38s cubic-bezier(.2,1.6,.4,1)}
@keyframes hlPop{0%{transform:scale(0);opacity:.4}65%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
.hunt-trap-btn{
  display:flex;align-items:center;gap:5px;
  height:36px;padding:0 10px;flex-shrink:0;min-width:90px;
  background:rgba(18,28,40,.9);border:1px solid rgba(200,146,26,.22);border-radius:8px;
  cursor:pointer;transition:all .18s;position:relative;overflow:hidden;
}
.hunt-trap-btn::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(200,146,26,.06) 0%,transparent 55%);pointer-events:none}
.hunt-trap-btn.on{background:rgba(200,146,26,.14);border-color:#f0b028}
.hunt-trap-btn:active{filter:brightness(.8)}
.hunt-trap-ico{width:18px;height:18px;object-fit:contain;image-rendering:pixelated;flex-shrink:0;z-index:1}
.hunt-trap-count{font-family:monospace;font-size:10px;color:#4a5a6a;transition:color .18s;z-index:1}
.hunt-trap-btn.on .hunt-trap-count{color:#c8921a}
.hunt-trap-dot{width:6px;height:6px;border-radius:50%;background:#4a5a6a;
  flex-shrink:0;transition:background .18s,box-shadow .18s;z-index:1}
.hunt-trap-btn.on .hunt-trap-dot{background:#f0b028;box-shadow:0 0 5px rgba(240,176,40,.55)}

/* Hunting damage flash */
#huntDmgFlash{position:fixed;inset:0;pointer-events:none;z-index:190;opacity:0;
  background:radial-gradient(ellipse at center,transparent 15%,rgba(180,15,15,.65) 100%)}
#huntDmgFlash.on{animation:hFlashFade .55s ease forwards}
@keyframes hFlashFade{0%{opacity:1}25%{opacity:.82}100%{opacity:0}}

/* Hunting give-up confirm overlay */
#huntGiveUpOverlay{position:fixed;inset:0;z-index:195;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.88);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s}
#huntGiveUpOverlay.on{opacity:1;pointer-events:all}
.hunt-gu-card{background:#0d1420;border:1px solid rgba(200,50,50,.35);padding:28px 24px;
  width:min(320px,calc(100vw - 32px));
  display:flex;flex-direction:column;align-items:center;gap:14px;border-radius:10px;position:relative}
.hunt-gu-title{font-size:16px;font-weight:bold;color:#ff4a4a;text-align:center;letter-spacing:2px}
.hunt-gu-body{font-size:12px;color:#b0a080;text-align:center;line-height:2;letter-spacing:.4px;width:100%}
.hunt-gu-btns{display:flex;gap:8px;width:100%}
.hunt-gu-btns button{flex:1;height:44px;border:none;border-radius:8px;cursor:pointer;
  font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase}
.hunt-gu-yes{background:linear-gradient(135deg,#d03030,#a01818);color:#fff}
.hunt-gu-yes:active{filter:brightness(.8)}
.hunt-gu-no{background:transparent;color:#4a5a6a;border:1px solid rgba(80,100,120,.3)!important}
.hunt-gu-no:active{background:rgba(80,100,120,.1)}

/* Hunting result overlay */
#huntResultOverlay{position:fixed;inset:0;z-index:195;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.82);backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity .3s}
#huntResultOverlay.on{opacity:1;pointer-events:all}
.hunt-res-card{background:#0d1420;border:1px solid rgba(200,146,26,.3);padding:26px 22px;
  width:min(340px,calc(100vw - 32px));
  display:flex;flex-direction:column;align-items:center;gap:14px;border-radius:10px;
  position:relative;animation:hCardIn .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes hCardIn{0%{transform:scale(.85) translateY(12px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
.hunt-res-ico{font-size:46px;line-height:1}
.hunt-res-title{font-size:20px;font-weight:bold;text-align:center;letter-spacing:2px}
.hunt-res-title.win{color:#f0b028}
.hunt-res-title.lose{color:#ff4a4a}
.hunt-res-rule{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(200,146,26,.3),transparent)}
.hunt-res-body{font-size:12px;color:#b0a080;text-align:center;line-height:2.1;letter-spacing:.4px;width:100%}
.hunt-res-body .hi{color:#f0b028}
.hunt-res-body .dmg{color:#ff4a4a}
.hunt-res-btns{display:flex;gap:8px;width:100%}
.hunt-res-btns button{flex:1;height:44px;border:none;border-radius:8px;cursor:pointer;
  font-size:12px;font-weight:bold;letter-spacing:2px;text-transform:uppercase}
.hunt-res-exit{background:rgba(20,15,5,.9);border:1px solid rgba(200,146,26,.3)!important;color:rgba(200,146,26,.8)}
.hunt-res-exit:active{filter:brightness(.8)}

/* ── Reusable utility classes — reduce repeated inline styles ── */
.modal-ico{width:64px;height:64px;object-fit:contain;margin-bottom:10px}
.modal-ico-sm{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.modal-ico-md{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
.modal-ico-lg{width:52px;height:52px;object-fit:contain;image-rendering:pixelated}
.ico-px{image-rendering:pixelated;vertical-align:middle}
.ico-14{width:14px;height:14px;image-rendering:pixelated}
.ico-24{width:24px;height:24px;image-rendering:pixelated;vertical-align:middle}
/* DEV */
#devBtn{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:150;
  background:rgba(140,25,25,.92);color:#fff;border-radius:5px;
  padding:4px 10px;font-size:10px;font-weight:bold;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);letter-spacing:.3px;
}
#devBtn.on{background:rgba(25,120,25,.92)}
/* ── RANKING / LEADERBOARD ── */
.lb-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px;min-height:30px}
.lb-count{font-size:11px;color:var(--c7);letter-spacing:.3px}
.lb-refresh{
  display:flex;align-items:center;gap:5px;
  background:var(--c2);border:1px solid var(--c4);border-radius:7px;
  padding:6px 11px;cursor:pointer;color:var(--c9);
  font-size:11px;font-weight:bold;letter-spacing:.3px;
  font-family:Verdana,Geneva,sans-serif;
  transition:border-color .12s;
}
.lb-refresh:active{border-color:var(--c8)}
.lb-refresh svg{stroke:currentColor;flex-shrink:0}
.lb-empty,.lb-loading,.lb-error{
  text-align:center;padding:40px 20px;font-size:13px;color:var(--c7);line-height:1.6;
}
.lb-error{color:var(--red)}

.lb-row{
  background:var(--c2);border:1px solid var(--c4);border-radius:9px;
  padding:10px 12px;margin-bottom:7px;
  display:flex;flex-direction:column;gap:8px;
}
.lb-row.me{border-color:var(--green);background:var(--c3)}
.lb-row.r1{border-color:#ffd700}
.lb-row.r2{border-color:#c0c0c0}
.lb-row.r3{border-color:#cd7f32}

.lb-top{display:flex;align-items:center;gap:9px}
.lb-rank{
  font-size:13px;font-weight:bold;color:var(--c9);
  min-width:32px;text-align:center;flex-shrink:0;letter-spacing:.2px;
}
.lb-row.r1 .lb-rank{color:#ffd700}
.lb-row.r2 .lb-rank{color:#c0c0c0}
.lb-row.r3 .lb-rank{color:#cd7f32}

.lb-name{
  flex:1;min-width:0;
  font-size:14px;font-weight:bold;color:var(--c9);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb-lv{
  font-size:12px;font-weight:bold;color:var(--c7);
  flex-shrink:0;letter-spacing:.3px;
}

.lb-bot{display:flex;align-items:center;gap:8px}
.lb-gear{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lb-gear img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated}
.lb-no-mount{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  color:var(--c5);font-size:12px;border:1px dashed var(--c5);border-radius:4px;
}
.lb-coins{
  display:flex;align-items:center;gap:10px;
  margin-left:auto;flex-shrink:0;
  font-size:12px;font-weight:bold;color:var(--c9);
}
.lb-coin{display:flex;align-items:center;gap:3px}
.lb-coin img{width:14px;height:14px;image-rendering:pixelated;flex-shrink:0}