* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background: #1a2a1a;
  user-select: none;
}

#game { display: block; width: 100vw; height: 100vh; touch-action: none; }

.hidden { display: none !important; }

/* ---------- Top bar ---------- */
#topbar {
  position: fixed; top: 8px; left: 8px; right: 8px;
  display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none;
  z-index: 25;
}
.res {
  background: rgba(20, 26, 34, 0.88);
  border: 2px solid #3b4a5c;
  border-radius: 10px;
  padding: 6px 12px;
  color: #fff; font-weight: bold; font-size: 15px;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.res .cap { color: #8aa; font-weight: normal; font-size: 12px; }
.res.gold span:nth-child(2) { color: #ffd44d; }
.res.elixir span:nth-child(2) { color: #e07bff; }
.res.trophy span:nth-child(2) { color: #ffe28a; }
.res.army { margin-left: auto; }
.res { pointer-events: auto; }

/* ---------- Buttons ---------- */
.bigbtn {
  background: linear-gradient(#5aa8e0, #2f6fae);
  border: 2px solid #17415f;
  border-radius: 12px;
  color: #fff; font-weight: bold; font-size: 17px;
  padding: 12px 20px; cursor: pointer;
  box-shadow: 0 3px 0 #17415f, 0 5px 8px rgba(0,0,0,.4);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.bigbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #17415f; }
.bigbtn.attack { background: linear-gradient(#e0685a, #ae3a2f); border-color: #5f1d17; box-shadow: 0 3px 0 #5f1d17, 0 5px 8px rgba(0,0,0,.4); }
.bigbtn.danger { background: linear-gradient(#c25555, #8e2f2f); border-color: #4f1717; box-shadow: 0 3px 0 #4f1717; }

.bottombar {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 16;
}

/* ---------- Battle HUD ---------- */
#battlehud { position: fixed; inset: 0; pointer-events: none; }
#battletop {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  background: rgba(20,26,34,.88); border: 2px solid #3b4a5c; border-radius: 10px;
  padding: 6px 16px; color: #fff; font-weight: bold; font-size: 16px;
  display: flex; gap: 18px;
}
#battleStars { color: #ffd44d; }
#troopbar {
  position: absolute; bottom: 12px; left: 12px;
  display: flex; gap: 8px; pointer-events: auto;
}
.troopbtn {
  width: 66px; height: 66px; border-radius: 12px;
  background: rgba(20,26,34,.9); border: 2px solid #3b4a5c;
  color: #fff; font-size: 26px; cursor: pointer; position: relative;
}
.troopbtn.sel { border-color: #ffd44d; background: rgba(70,60,20,.95); }
.troopbtn .cnt {
  position: absolute; top: -6px; right: -6px;
  background: #d33; border-radius: 10px; font-size: 12px; font-weight: bold;
  padding: 1px 6px;
}
.troopbtn:disabled { opacity: .35; cursor: default; }
#btnEndBattle { position: absolute; bottom: 12px; right: 12px; pointer-events: auto; }

/* ---------- Modals ---------- */
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, 94vw); max-height: 82vh;
  background: #22303f; border: 3px solid #4a5f78; border-radius: 14px;
  color: #fff; z-index: 20;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.modalhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 2px solid #4a5f78;
}
.modalbody { padding: 14px 16px; overflow-y: auto; }
.modalbody h3 { margin: 12px 0 6px; color: #9fc0e0; font-size: 14px; }
.closebtn {
  background: #b33; border: 2px solid #711; border-radius: 8px;
  color: #fff; font-weight: bold; padding: 4px 10px; cursor: pointer;
}

.shopitem, .trainitem {
  display: flex; align-items: center; gap: 12px;
  background: #2b3c4f; border: 2px solid #405872; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.shopitem .ic, .trainitem .ic { font-size: 30px; width: 42px; text-align: center; }
.shopitem .info, .trainitem .info { flex: 1; }
.shopitem .nm, .trainitem .nm { font-weight: bold; }
.shopitem .ds, .trainitem .ds { font-size: 12px; color: #9ab; }
.buybtn {
  background: linear-gradient(#67c05e, #3c8a35); border: 2px solid #1f5219;
  border-radius: 8px; color: #fff; font-weight: bold; padding: 8px 14px; cursor: pointer;
  min-width: 96px;
}
.buybtn:disabled { filter: grayscale(1); opacity: .5; cursor: default; }

.queuerow { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.qitem {
  background: #2b3c4f; border: 1px solid #405872; border-radius: 8px;
  padding: 4px 8px; font-size: 14px; cursor: pointer;
}
.qitem.training { border-color: #ffd44d; }

/* ---------- Building panel ---------- */
#bpanel {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  background: rgba(20,26,34,.94); border: 2px solid #3b4a5c; border-radius: 12px;
  padding: 12px 16px; color: #fff; z-index: 15; min-width: 300px; text-align: center;
}
#bpTitle { font-weight: bold; font-size: 17px; margin-bottom: 4px; }
#bpStats { font-size: 13px; color: #9ab; margin-bottom: 10px; white-space: pre-line; }
#bpButtons { display: flex; gap: 8px; justify-content: center; }
#bpButtons button {
  background: linear-gradient(#5aa8e0, #2f6fae); border: 2px solid #17415f;
  border-radius: 8px; color: #fff; font-weight: bold; padding: 8px 12px; cursor: pointer;
}
#bpButtons button.sellb { background: linear-gradient(#c25555, #8e2f2f); border-color: #4f1717; }
#bpButtons button:disabled { filter: grayscale(1); opacity: .5; }

/* ---------- Placement ---------- */
#placebar {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 20px; z-index: 24;
}
.roundbtn {
  width: 58px; height: 58px; border-radius: 50%;
  font-size: 26px; font-weight: bold; color: #fff; cursor: pointer;
}
.roundbtn.ok { background: #3c8a35; border: 3px solid #1f5219; }
.roundbtn.no { background: #b33; border: 3px solid #711; }

/* ---------- Results ---------- */
.starsbig { font-size: 46px; text-align: center; color: #ffd44d; margin: 8px 0 14px; }
#resBody { text-align: center; font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
#results .bigbtn { display: block; margin: 0 auto; }

/* ---------- Toasts ---------- */
#toasts {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  z-index: 30; pointer-events: none; text-align: center;
}
.toast {
  background: rgba(20,26,34,.92); border: 2px solid #c66; border-radius: 10px;
  color: #ffd0d0; padding: 8px 18px; margin-top: 8px; font-weight: bold;
  animation: toastfade 2.2s forwards;
}
.toast.good { border-color: #6c6; color: #d6ffd0; }
@keyframes toastfade {
  0% { opacity: 0; transform: translateY(-8px); }
  12% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Top bar user buttons ---------- */
.topbtn {
  background: #2f6fed; color: #fff; border: none; border-radius: 8px;
  padding: 6px 12px; font-weight: 700; font-size: 13px; cursor: pointer; margin-left: 6px;
  pointer-events: auto;
}
.topbtn:hover { background: #2559c9; }

/* ---------- Auth modal ---------- */
.authtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.authtab {
  flex: 1; padding: 8px; border: none; background: #eef0f4; color: #555;
  border-radius: 8px; font-weight: 700; cursor: pointer;
}
.authtab.active { background: #2f6fed; color: #fff; }
.authinput {
  width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 10px;
  border: 2px solid #dfe2ea; border-radius: 8px; font-size: 14px;
}
.authinput:focus { outline: none; border-color: #2f6fed; }
.authmsg { color: #e23b3b; font-size: 13px; min-height: 18px; margin-bottom: 8px; }
.authbody { max-width: 320px; margin: 0 auto; }

/* Login/Register submit and back buttons on the same row */
.authrow { display: flex; gap: 10px; align-items: stretch; margin: 4px 0; }
.authrow .flexbtn { flex: 1 1 auto; }
.authrow .backbtn { width: auto; flex: 0 0 auto; white-space: nowrap; }
.authnote { margin-top: 12px; }

/* ---------- Leaderboard ---------- */
.boardtbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.boardtbl th, .boardtbl td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eee; }
.boardtbl th { color: #888; font-weight: 700; }
.boardtbl tr.me td { color: #e23b3b; font-weight: 800; }

/* ---------- Login gate (forced login overlay) ---------- */
#gate {
  position: fixed; inset: 0; background: rgba(8,12,18,.82);
  z-index: 18; display: none;
  align-items: center; justify-content: center; padding: 16px;
}
#gate.show { display: flex; }

/* ---------- Auth guest / bind area ---------- */
.authguest {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #4a5f78;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.authguest .hint { color: #9ab; font-size: 12px; text-align: center; line-height: 1.5; }
.btn-ghost {
  background: linear-gradient(#4a7a3a, #2f5524); border: 2px solid #2c5a1e; border-radius: 10px;
  color: #fff; font-weight: bold; font-size: 15px; padding: 10px 16px; cursor: pointer; width: 100%;
}
.btn-ghost:hover { filter: brightness(1.08); }

/* ---------- Save status ---------- */
#saveStatus {
  position: fixed; bottom: 8px; left: 8px; z-index: 25;
  color: #9ab; font-size: 12px; pointer-events: none; text-shadow: 0 1px 2px #000;
}

/* ---------- Login gate box ---------- */
.gatebox {
  width: min(420px, 92vw);
  background: linear-gradient(#27384b, #1b2735);
  border: 3px solid #4a5f78; border-radius: 16px;
  padding: 26px 22px; text-align: center; color: #fff;
  box-shadow: 0 12px 50px rgba(0,0,0,.6);
}
.gatebox h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: 1px; }
.gatebox .gatesub { color: #9ab; margin: 0 0 18px; font-size: 14px; }
.gatebtn { width: 100%; font-size: 17px; padding: 12px; margin-bottom: 4px; }
.authguest { margin-top: 14px; padding-top: 12px; border-top: 1px solid #4a5f78;
  display: flex; flex-direction: column; gap: 10px; align-items: center; }
.authguest .hint { color: #9ab; font-size: 12px; text-align: center; line-height: 1.5; }
/* ---------- VIP ---------- */
.topbtn.vip { background: linear-gradient(#f0c14b, #c9982f); border-color: #8a6a13; color: #1c1206; font-weight: bold; }
.vipplans { display: flex; gap: 12px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.vipplan {
  flex: 1; min-width: 120px; cursor: pointer;
  background: linear-gradient(#27384b, #1b2735); border: 2px solid #4a5f78;
  border-radius: 12px; padding: 16px 12px; text-align: center; color: #fff;
  transition: border-color .15s, transform .1s;
}
.vipplan:hover { border-color: #f0c14b; transform: translateY(-2px); }
.vipplan .vp-name { font-size: 16px; font-weight: bold; }
.vipplan .vp-price { font-size: 22px; font-weight: bold; color: #f0c14b; margin: 6px 0 2px; }
.vipplan .vp-sub { font-size: 12px; color: #9ab; }

/* VIP plan card enhancements: original price strikethrough / discount tag / recommended tier */
.vipplan { position: relative; padding-top: 22px; }
.vipplan.hot { border-color: #f0c14b; box-shadow: 0 0 18px rgba(240,193,75,.35); }
.vipplan .vp-days { display: block; font-size: 12px; color: #9ab; font-weight: normal; margin-top: 2px; }
.vipplan .vp-orig { font-size: 13px; color: #8aa; text-decoration: line-through; font-weight: normal; margin-left: 6px; }
.vipplan .vp-off {
  display: inline-block; margin-left: 8px; background: #e0483e; color: #fff;
  font-size: 11px; font-weight: bold; border-radius: 6px; padding: 2px 6px; vertical-align: middle;
}
.vipplan .vp-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(#f0c14b, #c9982f); color: #1c1206;
  font-size: 11px; font-weight: bold; border-radius: 20px; padding: 3px 12px;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* VIP benefits list */
.vip-benefits {
  background: #1f2d3d; border: 1px solid #405872; border-radius: 10px;
  padding: 12px 14px; margin: 10px 0 4px; text-align: left;
}
.vip-benefits .vb-title { font-size: 13px; color: #f0c14b; font-weight: bold; margin-bottom: 8px; }
.vip-benefits .vb-item { font-size: 13px; color: #cfe0f2; padding: 4px 0; line-height: 1.45; }
.vip-benefits .vb-item .vb-ic { margin-right: 8px; }
.vip-benefits .vb-item b { color: #ffe9a8; }

/* Payment modal */
.payinfo { text-align: center; margin: 6px 0 14px; }
.pay-plan {
  display: inline-block; background: #223247; border: 2px solid #405872; border-radius: 12px;
  padding: 14px 28px; text-align: center;
}
.pay-plan .pay-name { font-size: 15px; font-weight: bold; color: #ffe9a8; }
.pay-plan .pay-price { font-size: 28px; font-weight: bold; color: #f0c14b; margin-top: 6px; }
.pay-plan .vp-orig { font-size: 15px; color: #8aa; text-decoration: line-through; font-weight: normal; margin-left: 8px; }
.pay-plan .vp-off {
  display: inline-block; margin-left: 10px; background: #e0483e; color: #fff;
  font-size: 12px; font-weight: bold; border-radius: 6px; padding: 3px 8px; vertical-align: middle;
}
.pay-pending { text-align: center; font-size: 15px; color: #ffd76a; padding: 10px 0 4px; }
.vipbtn {
  background: linear-gradient(#f0c14b, #c9982f) !important; border: 2px solid #8a6a13 !important;
  color: #1c1206 !important;
}
#vipStatus { margin-bottom: 6px; }
/* ---------- Alliance ---------- */
.alliance-act { margin-bottom: 14px; padding: 12px; background: #1f2d3d; border: 2px solid #405872; border-radius: 10px; }
.alliance-act .authinput { margin: 8px 0; width: 100%; }
.alliance-act .bigbtn { width: 100%; }
.alliance-head { margin-bottom: 10px; }
.al-name { font-size: 20px; font-weight: bold; color: #f0c14b; margin-bottom: 2px; }
.ally-members { display: flex; flex-direction: column; gap: 6px; }
.ally-member { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #223247; border: 1px solid #405872; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.al-leader { color: #f0c14b; }
.al-kick { background: linear-gradient(#c25555, #8e2f2f); border: 1px solid #4f1717; color: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; font-weight: bold; }
.al-kick:hover { filter: brightness(1.1); }
.ally-row { padding: 8px 10px; margin-top: 6px; background: #223247; border: 1px solid #405872; border-radius: 8px; cursor: pointer; font-size: 13px; }
.ally-row:hover { border-color: #f0c14b; }
/* ---------- Spells ---------- */
#spellbar { display: flex; gap: 6px; justify-content: center; margin: 4px 0; }
.spellbtn {
  position: relative; min-width: 46px; padding: 6px 8px; font-size: 20px;
  background: linear-gradient(#7a4f8a, #4f2f5e); border: 2px solid #3a2146;
  border-radius: 10px; cursor: pointer; color: #fff;
}
.spellbtn .cnt { position: absolute; top: -7px; right: -7px; background: #222; border-radius: 8px; font-size: 11px; padding: 1px 5px; }
.spellbtn:disabled { filter: grayscale(1); opacity: .45; cursor: default; }
.spellbtn.sel { border-color: #f0c14b; }
/* ---------- Heroes ---------- */
#herobar { display: flex; gap: 6px; justify-content: center; margin: 4px 0; }
.herobtn, .heroskill {
  position: relative; min-width: 44px; padding: 6px 8px; font-size: 20px;
  background: linear-gradient(#c98a3a, #8a5a20); border: 2px solid #5e3a10;
  border-radius: 10px; cursor: pointer; color: #fff;
}
.heroskill { background: linear-gradient(#5aa8e0, #2f6fae); border-color: #17415f; }
.heroskill.cd { filter: grayscale(1); opacity: .5; }
.herobtn .cnt { position: absolute; top: -7px; right: -7px; background: #222; border-radius: 8px; font-size: 11px; padding: 1px 5px; }
.herobtn:disabled { filter: grayscale(1); opacity: .5; cursor: default; }
.herobtn.sel, .heroskill.sel { border-color: #f0c14b; }
.hero-card { background: #223247; border: 2px solid #405872; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.hc-top { display: flex; align-items: center; gap: 8px; }
.hc-icon { font-size: 26px; }
.hc-name { font-weight: bold; font-size: 15px; flex: 1; }
.hc-lvl { color: #f0c14b; font-weight: bold; }
.hc-stats { font-size: 12px; color: #9ab; margin: 6px 0; }
.hc-xpbar { height: 10px; background: #141a22; border-radius: 5px; overflow: hidden; }
.hc-xpfill { height: 100%; background: linear-gradient(#f0c14b, #c9982f); }
.hc-xp { font-size: 11px; color: #9ab; margin: 3px 0 6px; }
.hc-skill { font-size: 12px; color: #bcd; }
.al-rank { color: #f0c14b; font-weight: bold; min-width: 26px; }
.al-power { color: #7ee07e; }
.alliance-reports { margin-top: 14px; padding-top: 12px; border-top: 1px solid #405872; }
.al-rep-title { font-weight: bold; color: #9fc0e0; margin-bottom: 8px; }
.al-rep { font-size: 12px; color: #bcd; padding: 4px 0; border-bottom: 1px dashed #2c3d50; }
.hc-skins { display: flex; gap: 6px; margin: 8px 0; }
.hc-skin { font-size: 20px; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; background: #141a22; border: 2px solid #405872; }
.hc-skin.sel { border-color: #f0c14b; }
.hc-skin:disabled { filter: grayscale(1); opacity: .4; cursor: default; }
.al-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

/* ---------- Hero skill tree ---------- */
.ht-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.ht-respec {
  background: linear-gradient(#c25555, #8e2f2f); border: 2px solid #4f1717;
  color: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: bold; font-size: 12px;
}
.ht-branch { background: #1f2d3d; border: 2px solid #405872; border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.ht-branch-name { font-weight: bold; color: #f0c14b; margin-bottom: 8px; }
.ht-branch-name small { color: #9ab; font-weight: normal; }
.ht-node { display: flex; align-items: center; gap: 8px; background: #223247; border: 1px solid #405872; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.ht-node.owned { border-color: #7ee07e; }
.ht-node.locked { opacity: .55; }
.ht-node-ic { font-size: 20px; width: 28px; text-align: center; }
.ht-node-info { flex: 1; }
.ht-node-info b { font-size: 13px; }
.ht-node-info small { display: block; color: #9ab; font-size: 11px; }
.ht-node-rank { color: #9ab; font-size: 12px; min-width: 34px; text-align: right; }
.ht-learn {
  background: linear-gradient(#67c05e, #3c8a35); border: 2px solid #1f5219;
  color: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-weight: bold; min-width: 42px;
}
.ht-learn:disabled { filter: grayscale(1); opacity: .5; cursor: default; }
.hc-treebtn {
  width: 100%; margin-top: 8px;
  background: linear-gradient(#7a5a3a, #4f3a20); border: 2px solid #3a2a12;
  color: #fff; border-radius: 8px; padding: 8px; cursor: pointer; font-weight: bold;
}
.hc-treebtn:disabled { filter: grayscale(1); opacity: .5; cursor: default; }

/* ---------- Spell passives ---------- */
.sp-passives { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #2c3d50; }
.sp-p-title { font-size: 12px; color: #9fc0e0; margin-bottom: 6px; }
.sp-p-title small { color: #9ab; }
.sp-p-branches { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-p-btn { background: #141a22; border: 2px solid #405872; color: #bcd; border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; }
.sp-p-btn.owned { border-color: #7ee07e; color: #7ee07e; }
.sp-p-btn:disabled { filter: grayscale(1); opacity: .5; cursor: default; }

/* ---------- Alliance level & techs ---------- */
.al-level { background: #1f2d3d; border: 2px solid #405872; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.al-lv-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.al-lv-badge { font-size: 16px; font-weight: bold; color: #f0c14b; }
.al-xp { font-size: 12px; color: #9ab; }
.al-xpbar { height: 10px; background: #141a22; border-radius: 5px; overflow: hidden; margin-bottom: 6px; }
.al-xpfill { height: 100%; background: linear-gradient(#f0c14b, #c9982f); }
.al-xphint { font-size: 11px; color: #9ab; }
.al-techs { margin-top: 12px; }
.al-tech { display: flex; align-items: center; gap: 8px; background: #223247; border: 1px solid #405872; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.al-tech.owned { border-color: #7ee07e; }
.al-tech-ic { font-size: 20px; width: 28px; text-align: center; }
.al-tech-info { flex: 1; }
.al-tech-info b { font-size: 13px; }
.al-tech-info small { display: block; color: #9ab; font-size: 11px; }
.al-tech-rank { color: #9ab; font-size: 12px; min-width: 34px; text-align: right; }
.al-tech-btn {
  background: linear-gradient(#f0c14b, #c9982f); border: 2px solid #8a6a13;
  color: #1c1206; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-weight: bold; font-size: 12px;
}
.al-tech-btn:disabled { filter: grayscale(1); opacity: .5; cursor: default; }

/* ---------- Nickname bar (leaderboard) ---------- */
.nickbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #1f2d3d; border: 1px solid #405872; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px;
}
.nickbar .nicklabel { font-size: 13px; color: #9ab; flex: 1; }
.nickbar .nicklabel b { color: var(--gold, #f0c14b); }
.nickbar .authinput { flex: 1 1 100%; }
.nickbar .nickbtns { display: flex; gap: 6px; }
.nickbar #nickMsg { flex: 1 1 100%; color: #ff8a8a; font-size: 12px; margin: 0; }

/* ---------- Level-up banner ---------- */
#levelup {
  position: fixed; top: 20%; left: 50%; transform: translateX(-50%);
  z-index: 999; pointer-events: none; text-align: center;
  background: linear-gradient(180deg, #3d2f12, #241b09);
  border: 3px solid #f0c14b; border-radius: 16px; padding: 18px 32px;
  box-shadow: 0 0 40px rgba(240,193,75,.55), inset 0 0 24px rgba(240,193,75,.15);
  animation: levelpop .55s cubic-bezier(.2,1.4,.4,1);
}
#levelup .lu-title { font-size: 21px; font-weight: bold; color: #ffe9a8; letter-spacing: .5px; }
#levelup .lu-sub { font-size: 13px; color: #d9c37a; margin-top: 6px; }
@keyframes levelpop {
  0% { transform: translateX(-50%) scale(.3); opacity: 0; }
  60% { transform: translateX(-50%) scale(1.15); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); }
}

/* ---------- New player tutorial ---------- */
#tutorial { position: fixed; inset: 0; z-index: 990; pointer-events: none; }
#tutorial .tut-mask { position: absolute; inset: 0; background: rgba(6,10,16,.45); }
#tutorial .tut-hl {
  position: absolute; border: 3px solid #ffe066; border-radius: 10px;
  animation: tuthl 1.1s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes tuthl {
  from { box-shadow: 0 0 0 3px rgba(255,224,102,.2), 0 0 12px rgba(255,224,102,.35); }
  to   { box-shadow: 0 0 0 7px rgba(255,224,102,.4), 0 0 30px rgba(255,224,102,.7); }
}
#tutorial .tut-card {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
  width: min(430px, 92vw); pointer-events: auto;
  background: linear-gradient(180deg, #233a52, #16222f);
  border: 2px solid #ffe066; border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
#tutorial .tut-arrow { color: #ffe066; font-size: 24px; text-align: center; margin-bottom: 2px; }
#tutorial .tut-title { font-size: 17px; font-weight: bold; color: #ffe9a8; margin-bottom: 6px; }
#tutorial .tut-text { font-size: 13.5px; color: #cfe0f2; line-height: 1.55; }
#tutorial .tut-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
#tutorial .tut-skip {
  background: none; border: none; color: #8aa; font-size: 12px; cursor: pointer; padding: 6px 10px;
}
#tutorial .tut-skip:hover { color: #ff8a8a; }
#tutorial .tut-btn {
  background: linear-gradient(#f0c14b, #c9982f); border: 2px solid #8a6a13;
  color: #1c1206; border-radius: 8px; padding: 8px 24px; cursor: pointer; font-weight: bold; font-size: 14px;
}