:root{
  --bg:#0a0d13; --panel:rgba(13,17,25,.92); --border:#242c3c; --tx:#e8ecf3; --tx2:#93a0b4;
  --accent:#ffb648; --accent2:#ffd27a; --ok:#5fd08a; --bad:#ff6a5a;
  --barh:60px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:"Segoe UI",Tahoma,sans-serif;color:var(--tx)}
#cv{display:block;position:fixed;top:0;left:0;width:100%;height:100%;touch-action:none;cursor:default}

/* ---------- HUD ---------- */
#hud{position:fixed;top:calc(10px + env(safe-area-inset-top));right:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;z-index:10;pointer-events:none}
.chip{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:6px 10px;font-size:12px;color:var(--tx2);backdrop-filter:blur(6px);pointer-events:auto}
.chip b{color:var(--tx);font-weight:700}
#chipCoins{color:var(--accent2);font-weight:700}
#chipEmpire b{color:var(--accent2)}
#hintbar{position:fixed;bottom:calc(var(--barh) + 18px + env(safe-area-inset-bottom));right:12px;left:12px;text-align:center;font-size:11px;color:var(--tx2);z-index:9;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* ---------- bottom bar ---------- */
#bar{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:12;overflow-x:auto;scrollbar-width:none;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:7px;backdrop-filter:blur(8px);max-width:96vw}
.btn{min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--border);border-radius:11px;background:#141a26;color:var(--tx);
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn:hover{background:#1b2231}
.btn:active{transform:translateY(1px)}
.btn.icon{min-width:44px;font-size:18px;padding:0 10px}
.btn.primary{background:#243049;border-color:#3a4a6b;color:var(--accent2)}
.btn.ok{background:#1e3a2b;border-color:#2f6a4a;color:#8ae8b4}
.btn.ok[disabled]{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--tx2)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- placement bar ---------- */
#placebar{position:fixed;bottom:calc(var(--barh) + 18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  display:none;gap:8px;align-items:center;z-index:13;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:8px;backdrop-filter:blur(8px);max-width:96vw}
#placebar.on{display:flex}
#placeHint{font-size:12px;color:var(--tx2);padding:0 6px;max-width:220px}
#placeHint.bad{color:var(--bad)}
#placeHint.good{color:var(--ok)}

/* ---------- work button ---------- */
#workbtn{position:fixed;bottom:calc(var(--barh) + 22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:12;display:none;
  padding:12px 22px;border-radius:14px;border:1px solid var(--accent);background:#1b2334;color:var(--accent2);font-family:inherit;font-size:14px;font-weight:700;
  box-shadow:0 6px 22px rgba(0,0,0,.5);cursor:pointer}
#workbtn.on{display:block}
#workbtn[disabled]{opacity:.5;border-color:var(--border);color:var(--tx2)}

/* ---------- tip / toast ---------- */
#tip{position:fixed;z-index:20;display:none;padding:6px 11px;background:rgba(9,12,18,.95);border:1px solid var(--border);border-radius:9px;font-size:12px;pointer-events:none;white-space:nowrap}
#toast{position:fixed;z-index:40;top:calc(58px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:none;max-width:88vw;
  padding:9px 16px;background:rgba(9,12,18,.95);border:1px solid var(--border);border-radius:11px;font-size:13px;line-height:1.7;text-align:center}
#toast b{color:var(--accent2)}
#toast code{background:#1a2130;border-radius:5px;padding:1px 6px;color:var(--accent2);font-family:Consolas,monospace;direction:ltr;display:inline-block}

/* ---------- sheets ---------- */
#sheetWrap{position:fixed;inset:0;z-index:30;display:none;background:rgba(0,0,0,.45)}
#sheetWrap.on{display:block}
#sheet{position:absolute;bottom:0;left:0;right:0;max-height:72vh;overflow:auto;background:#0d1119;border-top:1px solid var(--border);
  border-radius:18px 18px 0 0;padding:14px 14px calc(18px + env(safe-area-inset-bottom))}
#sheet h3{font-size:14px;color:var(--accent2);margin-bottom:10px}
.srow{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:#121826;margin-bottom:8px;cursor:pointer}
.srow:hover{background:#182034}
.srow[disabled]{opacity:.45;cursor:not-allowed}
.srow .em{width:30px;height:30px;border-radius:8px;background:#1b2334;display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.srow .t{flex:1;min-width:0}
.srow .t b{display:block;font-size:13px}
.srow .t span{font-size:11px;color:var(--tx2)}
.srow .st{font-size:11px;color:var(--tx2);flex:0 0 auto}
.srow .st.done{color:var(--ok)}
.prow{display:flex;justify-content:space-between;gap:12px;padding:9px 4px;border-bottom:1px dashed #1d2534;font-size:13px}
.prow i{font-style:normal;color:var(--accent2)}
.prow span{color:var(--tx2)}

/* ---------- dialog ---------- */
#dlgWrap{position:fixed;inset:0;z-index:35;display:none;background:rgba(0,0,0,.5);align-items:center;justify-content:center;padding:18px}
#dlgWrap.on{display:flex}
#dlg{background:#0f141e;border:1px solid var(--border);border-radius:16px;padding:18px;max-width:400px;width:100%}
#dlg h4{color:var(--accent2);font-size:15px;margin-bottom:8px}
#dlg p{font-size:13px;color:var(--tx2);line-height:1.9;margin-bottom:14px}
#dlg .brow{display:flex;gap:8px}
#dlg .brow .btn{flex:1}

/* ---------- login ---------- */
#login{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(1200px 700px at 50% 20%, #101a2c 0%, var(--bg) 60%);padding:16px}
.lbox{width:100%;max-width:380px;text-align:center}
#logo{color:#55668a;font-size:13px;line-height:1.15;direction:ltr;font-family:Consolas,monospace;margin-bottom:6px;white-space:pre}
.lbox h1{font-size:20px;color:var(--tx);margin-bottom:2px}
.lbox .sub{color:var(--tx2);font-size:12px;margin-bottom:18px}
.lfields{display:flex;flex-direction:column;gap:8px;text-align:right}
.lfields label{font-size:12px;color:var(--tx2)}
.lfields input{height:46px;border-radius:11px;border:1px solid var(--border);background:#0f141e;color:var(--tx);
  font-family:inherit;font-size:15px;padding:0 13px;outline:none;text-align:center;letter-spacing:1px}
.lfields input:focus{border-color:var(--accent)}
#loginMsg{margin-top:10px;font-size:12.5px;color:var(--bad);min-height:18px;line-height:1.8}
#loginMsg.ok{color:var(--ok)}
#loginMsg a{color:var(--accent2)}
.tiny{font-size:11px;color:var(--tx2);margin-top:14px}
#bGuest{margin-top:10px}

/* ---------- loading ---------- */
#loading{position:fixed;inset:0;z-index:55;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg)}
#loading.on{display:flex}
.lspin{width:34px;height:34px;border-radius:50%;border:3px solid #243049;border-top-color:var(--accent);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loadMsg{font-size:13px;color:var(--tx2)}

/* ---------- global map ---------- */
#gmap{position:fixed;inset:0;z-index:45;display:none;background:#070a10}
#gmap.on{display:block}
#gcv{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none}
#gtabs{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;display:flex;gap:6px;z-index:2;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:6px}
.btn.tab{background:transparent;border-color:transparent;min-height:38px}
.btn.tab.active{background:#1b2334;border-color:var(--accent);color:var(--accent2)}
#ginfo{position:absolute;bottom:calc(92px + env(safe-area-inset-bottom));right:12px;left:12px;text-align:center;font-size:12px;color:var(--tx2);z-index:2;text-shadow:0 1px 3px #000}
#ginfo b{color:var(--accent2)}
#gbuy{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:2}
#gclose{position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px;z-index:2}

#errbox{position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;z-index:60;max-width:70vw;display:none;
  background:rgba(70,14,14,.95);border:1px solid #7c2b2b;border-radius:10px;padding:8px 12px;font-size:12px;color:#ffd9d4}

/* ---------- mobile tighten ---------- */
@media (max-width:520px){
  #bar{padding:6px;gap:5px}
  .btn{font-size:12px;padding:0 10px}
  #hintbar{display:none}
  #placeHint{max-width:130px}
  #chipMe{display:none}
}

/* ---------- home button + sheet extras ---------- */
#homebtn{position:fixed;bottom:calc(var(--barh) + 22px + env(safe-area-inset-bottom));left:14px;z-index:12;display:none;
  padding:12px 18px;border-radius:14px;border:1px solid var(--border);background:#1b2334;color:var(--tx);font-family:inherit;font-size:14px;font-weight:700;
  box-shadow:0 6px 22px rgba(0,0,0,.5);cursor:pointer}
#homebtn.on{display:block}
.sx{position:absolute;top:10px;left:14px;width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:#1b2334;color:var(--tx);font-size:15px;cursor:pointer;z-index:2}
.btn.mini{min-height:32px;min-width:auto;padding:0 10px;border-radius:9px;font-size:12px}
.hunger{display:flex;align-items:center;gap:8px;margin:4px 0 12px;font-size:13px}
.hunger span{color:var(--tx2)}
.hunger b{color:var(--accent2);font-size:12px}
.hbar{flex:1;height:10px;background:#1a2130;border-radius:6px;overflow:hidden}
.hbar i{display:block;height:100%;background:linear-gradient(90deg,#5fd08a,#ffd27a)}
.hrow{cursor:default;gap:7px;flex-wrap:wrap}

#bar::-webkit-scrollbar{display:none}
#bar>button{flex:0 0 auto}
.chrow{display:flex;gap:8px;margin:6px 0 10px}
.chrow input{flex:1;min-width:0;background:#141a26;border:1px solid var(--border);border-radius:10px;color:var(--tx);font-family:inherit;font-size:14px;padding:10px 12px;outline:none}
.chrow input:focus{border-color:var(--accent)}
.chqs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip2{background:#1b2334;border:1px solid var(--border);border-radius:9px;color:var(--tx);font-family:inherit;font-size:13px;padding:7px 10px;cursor:pointer}
.chip2:active{transform:scale(.96)}
.chip2.emoj{font-size:18px;padding:5px 9px}

/* ---------- character skin picker ---------- */
.skinttl{margin:12px 0 6px;font-size:13px;color:var(--tx2)}
.skinrow{display:flex;gap:10px;margin-bottom:10px}
.skincard{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;background:#141a26;border:1.5px solid var(--border);border-radius:12px;color:var(--tx);font-family:inherit;font-size:13px;cursor:pointer}
.skincard.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,210,122,.25)}
.skincard i{display:block;width:42px;height:60px}
.skincard i canvas{display:block;image-rendering:pixelated;width:42px;height:60px}

/* ---------- travel button ---------- */
#bTravel{position:fixed;bottom:calc(var(--barh) + 22px + env(safe-area-inset-bottom));right:14px;z-index:12;display:none;
  padding:12px 18px;border-radius:14px;border:1px solid var(--border);background:#1b2334;color:var(--tx);font-family:inherit;font-size:14px;font-weight:700;
  box-shadow:0 6px 22px rgba(0,0,0,.5);cursor:pointer}
#bTravel.on{display:block}

/* ---------- shop button ---------- */
#bShop{position:fixed;bottom:calc(var(--barh) + 22px + env(safe-area-inset-bottom));left:14px;z-index:12;display:none;
  padding:12px 18px;border-radius:14px;border:1px solid var(--border);background:#1b2334;color:var(--tx);font-family:inherit;font-size:14px;font-weight:700;
  box-shadow:0 6px 22px rgba(0,0,0,.5);cursor:pointer}
#bShop.on{display:block}