:root{
  /* Light theme — black / white / royal gold (hoàng kim) */
  --bg-0:#efe6cf;
  --ink:#241d10; --ink-dim:#6a5f47;
  --purple:#c9a227; --purple-glow:#8a6a1a;      /* repurposed as gold accents */
  --teal:#0f766e; --gold:#b8860b; --gold-2:#8a6a10; --gold-lt:#f2d885;
  --red:#dc2626; --blood:#b91c1c; --green:#059669;
  --rare:#0284c7; --epic:#7c3aed; --legend:#b45309; --myth:#be123c;
  --panel:rgba(255,251,242,.94); --border:rgba(176,138,42,.5);
  --shadow:0 14px 40px rgba(120,92,24,.22);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg-0);
  font-family:'Handjet','Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);user-select:none;
  font-weight:500;letter-spacing:.02em}
#game-root{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:#14122e;touch-action:none}   /* drags steer the floating joystick, never scroll / zoom the page */
.hidden{display:none !important}

/* ---------- Titles / fonts ---------- */
.game-title{font-family:'Handjet',monospace;font-weight:900;font-size:clamp(48px,10vw,110px);
  letter-spacing:.08em;background:linear-gradient(180deg,#5a430f,#b8860b 45%,#f0d372 62%,#9c7616);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.95)) drop-shadow(0 0 6px rgba(0,0,0,.85)) drop-shadow(0 3px 10px rgba(0,0,0,.7)) drop-shadow(0 3px 18px rgba(184,134,11,.45));line-height:1}
.game-subtitle{font-family:'Handjet',monospace;font-weight:700;letter-spacing:.4em;
  font-size:clamp(14px,3vw,26px);color:#ffe9a8;margin-top:6px;
  text-shadow:0 0 4px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.7)}
.game-tagline{color:#f4eeda;text-shadow:0 0 4px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.95);font-style:italic;margin:22px 0 30px;max-width:560px;font-size:15px}
.panel-title{font-family:'Handjet',monospace;font-weight:700;font-size:clamp(22px,4vw,34px);
  color:var(--gold-lt);text-shadow:0 2px 6px rgba(0,0,0,.6);margin-bottom:18px;text-align:center}

/* ---------- Overlays ---------- */
/* scrolls when its content is taller than the screen (phones: character select, codex...). The content is
   centred with margin:auto instead of align-items:center, which would push the top out of reach. */
.overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;
  padding:24px;animation:fadeIn .35s ease;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.overlay>:not(.menu-particles){margin:auto}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Tiên cảnh núi non: light sky + layered mountain silhouettes + sun (inline SVG) */
.menu-screen{
  background:
    radial-gradient(ellipse 95% 80% at 50% 42%,rgba(8,6,22,.32) 25%,rgba(6,5,18,.66) 80%),
    url("../assets/background/main_background.webp") center/cover no-repeat,
    #14122e;
}
.menu-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:560px;width:100%}
.menu-content.wide{max-width:940px}
.menu-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}

/* ---------- Buttons ---------- */
.menu-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:360px;margin-left:auto;margin-right:auto}
.btn{font-family:'Handjet','Be Vietnam Pro',sans-serif;font-weight:700;font-size:18px;letter-spacing:.03em;
  color:var(--ink);background:linear-gradient(180deg,#fffdf6,#efe4c9);
  border:1px solid var(--border);border-radius:12px;padding:14px 22px;cursor:pointer;
  transition:transform .12s,box-shadow .2s,background .2s;box-shadow:0 3px 10px rgba(120,92,24,.16)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(184,134,11,.38);
  background:linear-gradient(180deg,#fff,#f6eed6)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{background:linear-gradient(180deg,#f6da84,#c9a022);border-color:#b8860b;color:#3a2c08;
  text-shadow:0 1px 0 rgba(255,255,255,.4)}
.btn-primary:hover{box-shadow:0 8px 28px rgba(201,162,39,.6);background:linear-gradient(180deg,#fbe49a,#d6ab2b)}
.btn-danger{background:linear-gradient(180deg,#e0524f,#b91c1c);border-color:#b91c1c;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.btn-danger:hover{box-shadow:0 8px 24px rgba(220,38,38,.45)}
.icon-btn{width:40px;height:40px;border-radius:10px;background:var(--panel);border:1px solid var(--border);
  color:var(--gold-2);cursor:pointer;font-size:14px;font-weight:700}
.icon-btn:hover{background:rgba(201,162,39,.2)}

.menu-stats{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:26px;
  color:#efe7d0;font-size:13px;text-shadow:0 0 4px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.95)}
.menu-stats b{color:var(--gold-2)}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:20;pointer-events:none}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 14px;gap:12px}
.hud-left{flex:1;max-width:340px}
.realm-badge{display:flex;align-items:center;gap:8px;font-family:'Handjet',monospace;font-weight:700;
  color:var(--gold-lt);font-size:15px;margin-bottom:6px;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.lvl-tag{background:rgba(201,162,39,.22);border:1px solid var(--border);padding:1px 8px;border-radius:8px;
  font-size:12px;color:var(--ink)}
.bar-wrap{margin-bottom:5px}
.bar{position:relative;height:16px;border-radius:8px;overflow:hidden;background:rgba(40,30,8,.32);
  border:1px solid rgba(120,92,24,.35)}
.bar-fill{position:absolute;inset:0;width:100%;transform-origin:left;transition:width .2s ease}
.hp-bar .bar-fill{background:linear-gradient(90deg,#dc2626,#f87171);box-shadow:0 0 12px rgba(220,38,38,.5) inset}
.xp-bar{height:11px}
.xp-bar .bar-fill{background:linear-gradient(90deg,#c9a022,#f2d572);box-shadow:0 0 12px rgba(201,162,39,.55) inset}
.bar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.03em}
.hud-center{text-align:center}
.game-timer{font-family:'Handjet',monospace;font-weight:900;font-size:clamp(22px,4vw,34px);color:#fff3c4;
  text-shadow:0 2px 6px rgba(0,0,0,.65),0 0 16px rgba(201,162,39,.5)}
.kills-counter{color:#fca5a5;font-weight:700;font-size:14px;margin-top:2px;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.hud-right{display:flex;align-items:center;gap:10px;pointer-events:auto}
.currency-pill{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px;
  font-weight:700;color:var(--gold-2);font-size:14px}

.boss-bar{position:absolute;top:calc(70px + var(--ann-h,0px));left:50%;transform:translateX(-50%);width:min(560px,80%);text-align:center}
.boss-name{font-family:'Handjet',monospace;font-weight:700;color:var(--blood);font-size:15px;
  text-shadow:0 1px 2px rgba(255,255,255,.7);margin-bottom:4px;letter-spacing:.1em}
.boss-hp{height:14px;border:1px solid rgba(185,28,28,.6)}
.boss-hp .bar-fill{background:linear-gradient(90deg,#7f1d1d,#dc2626,#ef4444)}

.weapon-tray{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;
  padding:6px 10px;background:rgba(255,250,238,.7);border:1px solid var(--border);border-radius:14px;
  flex-wrap:wrap;justify-content:center;max-width:92%;box-shadow:0 4px 14px rgba(120,92,24,.18)}
.wpn-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:20px;position:relative;background:linear-gradient(180deg,#fffdf6,#efe3c8);border:1px solid var(--border)}
.wpn-icon .lv{position:absolute;bottom:-3px;right:-3px;background:var(--gold);color:#fff;font-size:9px;
  font-weight:900;border-radius:6px;padding:0 4px;line-height:14px}

/* ---------- Character select ---------- */
.char-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;width:100%;margin-bottom:20px}
.char-card{background:var(--panel);border:1.5px solid var(--border);border-radius:16px;padding:18px;cursor:pointer;
  transition:transform .15s,border-color .2s,box-shadow .2s;text-align:center;box-shadow:0 4px 14px rgba(120,92,24,.12)}
.char-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(184,134,11,.3)}
.char-card.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 12px 30px rgba(201,162,39,.35)}
.char-portrait{width:72px;height:72px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;
  justify-content:center;font-size:36px;box-shadow:0 0 20px rgba(184,134,11,.4)}
.char-name{font-family:'Handjet',monospace;font-weight:700;font-size:18px;color:var(--ink);margin-bottom:4px}
.char-title{color:var(--gold-2);font-size:12px;margin-bottom:10px}
.char-desc{color:var(--ink-dim);font-size:12px;line-height:1.5;margin-bottom:10px}
.char-passive{font-size:11px;color:var(--teal);border-top:1px solid var(--border);padding-top:8px}
.char-card.locked{opacity:.55;filter:grayscale(.5)}
.char-lock-req{color:var(--blood);font-size:11px;margin-top:6px}
/* Quay lại / Vào Thế Giới stay pinned to the bottom of the screen while the cards scroll */
#char-select .panel-actions{position:sticky;bottom:-24px;z-index:3;width:calc(100% + 32px);margin:0 -16px -24px;padding:12px 16px 20px;
  background:linear-gradient(to bottom,rgba(10,8,24,0),rgba(10,8,24,.88) 38%)}
@media (max-width:600px){
  .overlay{padding:16px 12px 24px}
  #char-select .char-grid{gap:10px;margin-bottom:8px}
  #char-select .char-card{padding:12px 12px 10px}
  #char-select .char-stage{width:128px;height:106px}
  #char-select .panel-actions .btn{flex:1;min-width:0}
}

/* ---------- Level up choices ---------- */
.choice-screen{background:rgba(245,240,225,.82);backdrop-filter:blur(3px)}
.choice-content{width:100%;max-width:900px;text-align:center}
.choice-header{margin-bottom:22px}
.choice-flash{font-family:'Handjet',monospace;font-weight:900;font-size:clamp(24px,5vw,40px);color:var(--gold-2);
  text-shadow:0 1px 2px rgba(255,255,255,.7),0 0 18px rgba(201,162,39,.4);animation:pulse 1.4s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.85}}
.choice-sub{color:var(--ink-dim);margin-top:6px}
.choice-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:16px}
.choice-card{background:linear-gradient(180deg,#fffdf7,#f3ead2);border:2px solid var(--border);
  border-radius:18px;padding:22px 18px;cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s;
  position:relative;overflow:hidden;animation:cardIn .35s ease backwards;box-shadow:0 6px 18px rgba(120,92,24,.14)}
.choice-card:nth-child(2){animation-delay:.08s}.choice-card:nth-child(3){animation-delay:.16s}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
.choice-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 36px rgba(120,92,24,.3)}
.choice-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--rc,rgba(201,162,39,.12)));opacity:.6}
.cc-icon{font-size:44px;margin-bottom:10px;position:relative}
.cc-name{font-family:'Handjet',monospace;font-weight:700;font-size:19px;margin-bottom:4px;position:relative;color:var(--ink)}
.cc-tag{font-size:11px;font-weight:700;letter-spacing:.1em;padding:2px 10px;border-radius:20px;display:inline-block;
  margin-bottom:10px;position:relative}
.cc-desc{color:var(--ink-dim);font-size:13px;line-height:1.5;position:relative}
.cc-level{position:absolute;top:10px;right:12px;font-size:11px;font-weight:900;color:var(--gold-2)}
.reroll-btn{margin-top:4px}

/* rarity colors on choice cards */
.rar-common{--rc:rgba(100,116,139,.12)}.rar-common .cc-tag{background:rgba(100,116,139,.18);color:#475569}
.rar-common{border-color:rgba(100,116,139,.4)}
.rar-rare{--rc:rgba(2,132,199,.14)}.rar-rare .cc-tag{background:rgba(2,132,199,.16);color:var(--rare)}
.rar-rare{border-color:rgba(2,132,199,.5)}
.rar-epic{--rc:rgba(124,58,237,.16)}.rar-epic .cc-tag{background:rgba(124,58,237,.16);color:var(--epic)}
.rar-epic{border-color:rgba(124,58,237,.55)}
.rar-legend{--rc:rgba(180,83,9,.18)}.rar-legend .cc-tag{background:rgba(180,83,9,.18);color:var(--legend)}
.rar-legend{border-color:rgba(180,83,9,.7);box-shadow:0 0 22px rgba(201,162,39,.3)}
.rar-myth{--rc:rgba(190,18,60,.18)}.rar-myth .cc-tag{background:rgba(190,18,60,.18);color:var(--myth)}
.rar-myth{border-color:rgba(190,18,60,.7);box-shadow:0 0 26px rgba(190,18,60,.3)}
.cc-new{position:absolute;top:10px;left:12px;font-size:10px;font-weight:900;color:var(--green);
  background:rgba(5,150,105,.14);padding:2px 7px;border-radius:8px}
.cc-max{position:absolute;top:10px;right:12px;font-size:10px;font-weight:900;color:var(--gold-2)}

/* ---------- Meta ---------- */
.daotam-balance{color:var(--ink);font-size:15px;margin-bottom:16px}
.daotam-balance b{color:var(--gold-2);font-size:20px}
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;width:100%;margin-bottom:18px}
.meta-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;text-align:left;
  box-shadow:0 4px 12px rgba(120,92,24,.1)}
.meta-card h4{font-size:14px;margin-bottom:4px;color:var(--gold-2)}
.meta-card p{font-size:12px;color:var(--ink-dim);margin-bottom:8px;line-height:1.4}
.meta-pips{display:flex;gap:3px;margin-bottom:10px}
.pip{width:14px;height:8px;border-radius:3px;background:rgba(120,92,24,.16)}
.pip.on{background:linear-gradient(90deg,var(--gold-lt),var(--gold));box-shadow:0 0 6px rgba(201,162,39,.5)}
.meta-buy{width:100%;font-size:12px;padding:8px}
.meta-buy:disabled{opacity:.45;cursor:not-allowed}

/* ---------- Codex ---------- */
.codex-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;width:100%;
  max-height:60vh;overflow-y:auto;padding-right:4px;margin-bottom:16px}
.codex-item{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:left;
  box-shadow:0 3px 10px rgba(120,92,24,.1)}
.codex-item .ci-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.codex-item .ci-icon{font-size:24px}
.codex-item .ci-name{font-weight:700;font-size:14px;color:var(--ink)}
.codex-item .ci-desc{font-size:12px;color:var(--ink-dim);line-height:1.5}

/* ---------- Settings / toggles ---------- */
.settings-list{width:100%;max-width:400px;margin-bottom:18px}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;
  border-bottom:1px solid rgba(120,92,24,.18)}
.toggle{background:rgba(120,92,24,.1);border:1px solid var(--border);color:var(--ink-dim);
  padding:6px 16px;border-radius:20px;font-weight:700;cursor:pointer;font-size:12px}
.toggle.on{background:linear-gradient(180deg,#10b981,#059669);color:#fff;border-color:var(--green)}
.panel-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* ---------- Pause / Game over ---------- */
#pause-screen,#gameover-screen{background:rgba(240,234,216,.88);backdrop-filter:blur(4px)}
.pause-content,.gameover-content{background:var(--panel);border:1px solid var(--border);border-radius:20px;
  padding:32px;text-align:center;max-width:480px;width:100%;box-shadow:var(--shadow)}
.pause-stats{color:var(--ink-dim);font-size:14px;margin-bottom:22px;line-height:1.8}
.pause-stats b{color:var(--ink)}
.go-title{font-family:'Handjet',monospace;font-weight:900;font-size:clamp(30px,6vw,48px);color:var(--blood);
  text-shadow:0 1px 2px rgba(255,255,255,.6);margin-bottom:18px}
.go-title.win{color:var(--gold-2);text-shadow:0 1px 2px rgba(255,255,255,.7),0 0 24px rgba(201,162,39,.4)}
.go-summary{color:var(--ink-dim);font-size:14px;line-height:1.9;margin-bottom:18px}
.go-summary b{color:var(--ink)}
.go-reward{background:rgba(201,162,39,.12);border:1px solid rgba(184,134,11,.45);border-radius:12px;
  padding:14px;margin-bottom:22px}
.reward-line{color:var(--gold-2);font-weight:700;font-size:18px}

/* ---------- Thông báo ghim (js/announce.js): under the world's top bar / on the main menu ---------- */
.ann-bar{position:absolute;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 24px));z-index:55;display:flex;align-items:flex-start;gap:8px;
  padding:7px 8px 7px 12px;border-radius:10px;border:1px solid;color:#fff;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:600;font-size:13.5px;
  line-height:1.4;letter-spacing:0;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer;user-select:text;animation:annIn .35s ease}
.ann-bar.in-world,.ann-chip.in-world{z-index:19}   /* under the HUD (its ☰ menu) and every dialog */
.ann-bar.in-world{width:min(560px,max(260px,calc(100% - 420px)))}   /* clear of the minimap (right) and the kill feed (left) */
.ann-bar.ann-info{background:linear-gradient(90deg,rgba(12,74,110,.94),rgba(14,116,144,.9));border-color:rgba(125,211,252,.7)}
.ann-bar.ann-gold{background:linear-gradient(90deg,rgba(66,44,6,.95),rgba(120,84,14,.92));border-color:#f2d885;color:#fde68a}
.ann-bar.ann-red{background:linear-gradient(90deg,rgba(127,29,29,.95),rgba(185,28,28,.92));border-color:#fca5a5;animation:annIn .35s ease,annPulse 2.4s ease-in-out infinite}
.ann-pin{flex:none}
.ann-text{flex:1;min-width:0;overflow-wrap:anywhere}
.ann-count{flex:none;font-size:11px;opacity:.8;align-self:center}
.ann-x{flex:none;background:rgba(0,0,0,.25);border:0;color:inherit;width:22px;height:22px;border-radius:6px;cursor:pointer;font-size:12px;line-height:22px}
.ann-x:hover{background:rgba(0,0,0,.45)}
.ann-chip{position:absolute;left:50%;transform:translateX(-50%);z-index:55;background:rgba(66,44,6,.92);border:1px solid #f2d885;color:#fde68a;border-radius:16px;
  padding:3px 10px;font-size:13px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.ann-chip b{margin-left:3px;font-size:11px}
.compact .ann-bar{font-size:12px;padding:5px 6px 5px 9px;width:calc(100% - 16px)}
.compact .ann-bar.in-world{left:8px;transform:none;width:calc(100% - 120px)}   /* where the boss bar goes: left of the minimap */
@keyframes annIn{from{opacity:0}to{opacity:1}}
@keyframes annPulse{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 2px rgba(252,165,165,.55),0 6px 18px rgba(0,0,0,.35)}}

/* ---------- Toast ---------- */
.toast-area{position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:100%}
.toast{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 20px;
  font-weight:700;font-size:14px;color:var(--ink);box-shadow:var(--shadow);
  animation:toastIn .3s ease,toastOut .3s ease 1.9s forwards;max-width:90%;text-align:center}
.toast.gold{border-color:var(--gold);color:var(--gold-2)}
.toast.epic{border-color:var(--epic);color:var(--epic)}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-12px) scale(.95)}}

/* ---------- Mobile controls ---------- */
#mobile-controls{position:absolute;inset:0;z-index:25;pointer-events:none}
/* floating joystick: hidden until a finger presses + drags on the game; placed under it by js/input.js (left / top) */
.joystick{position:absolute;left:0;top:0;width:120px;height:120px;border-radius:50%;display:none;
  background:rgba(201,162,39,.14);border:2px solid rgba(184,134,11,.5);pointer-events:none;
  box-shadow:0 0 0 4px rgba(10,8,26,.18),inset 0 0 22px rgba(242,213,114,.12)}
.joystick.on{display:block;animation:joyIn .12s ease-out}
@keyframes joyIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.joystick-knob{position:absolute;top:50%;left:50%;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-lt),var(--gold));transform:translate(-50%,-50%);
  box-shadow:0 0 18px rgba(201,162,39,.6)}

/* menu floating spec (gold linh khí motes) */
.spec{position:absolute;border-radius:50%;background:var(--gold-lt);pointer-events:none;
  animation:floatUp linear infinite}
@keyframes floatUp{from{transform:translateY(0);opacity:0}10%{opacity:.8}90%{opacity:.6}
  to{transform:translateY(-100vh);opacity:0}}

@media (max-width:600px){
  .hud-left{max-width:200px}
  .game-timer{font-size:22px}
  .choice-cards{grid-template-columns:1fr}
  .menu-stats{font-size:11px;gap:12px}
}

/* ---------- Pixel icons (HackerNoon Pixel Icon Library) ---------- */
.hn{display:inline-block;line-height:1}
.hn:before{vertical-align:middle}
/* buttons & titles */
.btn .hn{font-size:1.05em;margin-right:4px;color:inherit}
.panel-title .hn{font-size:.85em;margin:0 6px;color:var(--gold-2)}
.choice-flash .hn{font-size:.8em;margin:0 8px;color:var(--gold-2)}
.reroll-btn .hn{margin-right:5px}
/* HUD */
.currency-pill .hn{color:var(--gold-2);font-size:15px;margin-right:3px}
.kills-counter .hn{color:var(--blood);font-size:14px;margin-right:3px}
.icon-btn .hn{font-size:15px}
/* weapon tray */
.wpn-icon .hn{font-size:22px;color:#4a3a12;text-shadow:0 1px 2px rgba(255,255,255,.6)}
/* level-up choice cards — icon color by rarity */
.cc-icon{line-height:1}
.cc-icon .hn{font-size:42px;color:#5a4a1a;text-shadow:0 1px 6px rgba(255,255,255,.4)}
.rar-rare .cc-icon .hn{color:var(--rare)}
.rar-epic .cc-icon .hn{color:var(--epic)}
.rar-legend .cc-icon .hn{color:var(--legend);text-shadow:0 0 14px rgba(180,83,9,.35)}
.rar-myth .cc-icon .hn{color:var(--myth);text-shadow:0 0 14px rgba(190,18,60,.35)}
/* character portrait */
.char-portrait .hn{font-size:34px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35)}
/* codex + meta */
.ci-icon .hn{font-size:22px;color:var(--gold-2)}
.meta-card h4 .hn{font-size:.9em;margin-right:5px;color:var(--gold-2)}

/* ---------- Auth (login / register) ---------- */
.auth-box{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:20px;margin-top:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.auth-tabs{display:flex;gap:8px;margin-bottom:4px}
.auth-tab{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border);cursor:pointer;
  font-family:'Handjet',sans-serif;font-weight:700;font-size:16px;color:var(--ink-dim);
  background:rgba(120,92,24,.08)}
.auth-tab.active{background:linear-gradient(180deg,#f6da84,#c9a022);color:#3a2c08;border-color:#b8860b}
.auth-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:#fffdf6;color:var(--ink);font-family:'Be Vietnam Pro',sans-serif;font-size:15px;outline:none}
.auth-input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,162,39,.25)}
.auth-msg{min-height:18px;font-size:13px;color:var(--red);font-weight:600;text-align:center}
.auth-msg.ok{color:var(--green)}
/* per-field validation (typed live): red / green border + a message right under the field */
.auth-field{display:flex;flex-direction:column;gap:4px;text-align:left}
.auth-input.invalid{border-color:#dc2626;box-shadow:0 0 0 2px rgba(220,38,38,.18)}
.auth-input.valid{border-color:#16a34a;box-shadow:0 0 0 2px rgba(22,163,74,.16)}
.field-msg{min-height:16px;font-size:12.5px;font-weight:600;line-height:1.3;padding:0 4px;color:#b91c1c}
.field-msg.ok{color:#15803d}
.field-msg.info{color:#8a6d1c}
.auth-note{margin-top:16px;color:#e9e0c9;font-size:12px;text-shadow:0 0 4px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.95)}
.menu-userbar{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:8px;
  color:#efe7d0;font-size:13px;text-shadow:0 0 4px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.95)}
.menu-userbar b{color:var(--gold-lt)}
.mini-btn{background:rgba(0,0,0,.35);border:1px solid var(--border);color:#f4eeda;border-radius:8px;
  padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Handjet',sans-serif}
.mini-btn:hover{background:rgba(185,28,28,.55);border-color:#ef4444}

/* ---------- World (PvP) HUD ---------- */
#world-hud{position:absolute;inset:0;z-index:20;pointer-events:none;font-family:'Handjet',monospace}
.world-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;gap:12px}
.world-me{color:var(--gold-lt);font-weight:700;font-size:15px;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.world-mid{color:#fff3c4;font-weight:700;font-size:14px;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.world-mid b{color:var(--gold-lt)}
.world-top .icon-btn{pointer-events:auto}
/* minimap (top-right, under the ✕ button); the leaderboard sits right below it */
.minimap{position:absolute;top:52px;right:12px;width:180px;height:180px;display:block;
  pointer-events:auto;cursor:crosshair;touch-action:none;
  background:rgba(10,8,26,.62);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
.world-board{position:absolute;top:242px;right:12px;width:180px;background:rgba(10,8,26,.55);
  border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:12px;color:#efe7d0}
@media (max-width:600px){
  .minimap{width:130px;height:130px}
  .world-board{top:192px;width:130px;font-size:11px}
  #world-hud .world-hpwrap{left:14px;transform:none;width:calc(100% - 178px);bottom:60px}  /* clear of the skill buttons */
}
.wb-row{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.wb-row.me{color:var(--gold-lt);font-weight:700}
.world-hpwrap{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);width:min(360px,70%)}
.killfeed{position:absolute;left:14px;bottom:80px;display:flex;flex-direction:column;gap:4px}
.kf{background:rgba(10,8,26,.55);border:1px solid var(--border);border-radius:8px;padding:4px 10px;
  font-size:12px;color:#fca5a5;animation:toastIn .25s ease}
.world-status{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  background:rgba(10,8,26,.7);border:1px solid var(--border);border-radius:12px;padding:12px 22px;
  color:var(--gold-lt);font-weight:700;font-size:16px;text-align:center}

/* ---------- World hint + move marker ---------- */
.world-hint{position:absolute;left:0;right:0;bottom:14px;text-align:center;pointer-events:none;
  color:#f4eeda;font-size:12px;text-shadow:0 0 4px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.95)}

/* ---------- Hảo hữu & Tông môn ---------- */
.world-top-btns{display:flex;gap:8px;pointer-events:auto}
.social-btn{position:relative}
.badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#dc2626;color:#fff;font-size:11px;font-weight:900;line-height:18px;text-align:center;box-shadow:0 0 0 2px rgba(10,8,26,.8)}
.social-panel{position:absolute;top:60px;right:204px;width:320px;max-height:calc(100% - 180px);display:flex;flex-direction:column;
  pointer-events:auto;background:rgba(14,11,32,.94);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);color:#efe7d0;font-family:'Handjet','Be Vietnam Pro',sans-serif;z-index:30;
  animation:fadeIn .2s ease}
.sp-head{display:flex;align-items:center;gap:8px;padding:10px 10px 8px;border-bottom:1px solid rgba(242,213,114,.18)}
.sp-tabs{display:flex;gap:6px;flex:1}
.sp-tab{flex:1;padding:7px 6px;border-radius:9px;border:1px solid rgba(242,213,114,.25);background:rgba(255,255,255,.04);
  color:#cbbf9d;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
.sp-tab.active{background:linear-gradient(180deg,#f6da84,#c9a022);color:#3a2c08;border-color:#b8860b}
.sp-x{width:30px;height:30px;border-radius:8px;border:1px solid rgba(242,213,114,.25);background:transparent;color:#efe7d0;cursor:pointer}
.sp-body{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px}
.sp-row{display:flex;gap:6px}
.sp-input{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid rgba(242,213,114,.3);background:rgba(0,0,0,.35);
  color:#fff;font-family:'Be Vietnam Pro',sans-serif;font-size:13px;outline:none;user-select:text}
.sp-input:focus{border-color:#f2d572}
.sp-sec{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.06em;color:#f2d572;text-transform:uppercase}
.sp-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04);font-size:14px}
.sp-item.dim{opacity:.6}
.sp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-tag{font-size:11px;color:#b9ad8a}
.sp-tag.gold{color:#f2d572}
.sp-dot{width:8px;height:8px;border-radius:50%;background:#57534e;flex:none}
.sp-dot.on{background:#22c55e;box-shadow:0 0 6px #22c55e}
.sp-btn{padding:5px 9px;border-radius:7px;border:1px solid rgba(242,213,114,.3);background:rgba(255,255,255,.06);color:#efe7d0;
  font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.sp-btn:hover{background:rgba(242,213,114,.18)}
.sp-btn.gold{background:linear-gradient(180deg,#f6da84,#c9a022);color:#3a2c08;border-color:#b8860b}
.sp-btn.ok{background:rgba(34,197,94,.2);border-color:#22c55e;color:#bbf7d0}
.sp-btn.x{padding:5px 8px;color:#fca5a5;border-color:rgba(239,68,68,.4)}
.sp-btn.danger{background:linear-gradient(180deg,#e0524f,#b91c1c);border-color:#b91c1c;color:#fff}
.sp-btn.wide{width:100%;margin-top:10px;padding:9px}
.sp-empty{font-size:13px;color:#8f8568;padding:4px 2px}
.sp-hint{font-size:12px;color:#7dd3fc;padding:2px}
.sp-myid{display:flex;align-items:center;gap:8px;font-size:13px;color:#cbbf9d;padding:2px 2px 6px}
.sp-myid b{color:#fde68a;font-size:15px;letter-spacing:.5px;user-select:text}
.sp-guild{padding:8px 10px;border-radius:10px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.3)}
.sp-gname{font-size:18px;font-weight:900;color:#7dd3fc}
@media (max-width:600px){
  .social-panel{left:10px;right:10px;top:56px;width:auto;max-height:calc(100% - 200px)}
}

/* ---------- Chat: Thế Giới / Tông Môn / Hảo Hữu ---------- */
.icon-btn.social-btn.active{background:linear-gradient(180deg,#f6da84,#c9a022);color:#3a2c08}
.killfeed{top:calc(56px + var(--ann-h,0px));bottom:auto}                    /* chat box owns the bottom-left corner */
.chat-box{position:absolute;left:14px;bottom:110px;width:372px;height:240px;display:flex;flex-direction:column;
  pointer-events:auto;background:rgba(14,11,32,.82);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);color:#efe7d0;z-index:25;overflow:hidden}
.ch-head{display:flex;gap:4px;padding:6px 6px 0;border-bottom:1px solid rgba(242,213,114,.18)}
.ch-tab{position:relative;flex:1 1 auto;padding:5px 3px 6px;border:none;border-radius:8px 8px 0 0;background:transparent;
  color:#b9ad8a;font-family:'Handjet',sans-serif;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.ch-tab:hover{color:#efe7d0}
.ch-tab.active{background:rgba(242,213,114,.16);color:#f2d572;box-shadow:inset 0 -2px 0 #f2d572}
.ch-dot{position:absolute;top:4px;right:6px;width:7px;height:7px;border-radius:50%;background:#38bdf8;box-shadow:0 0 6px #38bdf8}
.ch-badge{position:absolute;top:0;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#dc2626;
  color:#fff;font-size:10px;line-height:16px;font-weight:900}
.ch-min{width:28px;border:none;background:transparent;color:#b9ad8a;font-size:18px;font-weight:900;cursor:pointer}
.ch-min:hover{color:#fff}
.ch-pmbar{display:flex;align-items:center;gap:6px;padding:6px 8px 0;font-size:13px;color:#86efac}
.ch-select{flex:1;min-width:0;padding:4px 6px;border-radius:7px;border:1px solid rgba(34,197,94,.4);background:rgba(0,0,0,.4);
  color:#efe7d0;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;outline:none}
.ch-log{flex:1;overflow-y:auto;padding:6px 10px;font-family:'Be Vietnam Pro',sans-serif;font-size:12.5px;line-height:1.45;
  user-select:text;overscroll-behavior:contain}
.ch-line{word-wrap:break-word;overflow-wrap:anywhere;padding:1px 0;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.ch-time{color:#6f6752;font-size:10.5px}
.ch-n{font-weight:700;color:#e8ecff;cursor:pointer}
.ch-n:hover{text-decoration:underline}
.ch-n.me{color:#f2d572}
.ch-n.guild{color:#7dd3fc}
.ch-n.friend{color:#86efac}
.ch-empty{color:#8f8568;font-size:12px;padding:8px 2px;font-style:italic}
.ch-row{display:flex;gap:6px;padding:6px;border-top:1px solid rgba(242,213,114,.14)}
.ch-input{flex:1;min-width:0;padding:7px 10px;border-radius:8px;border:1px solid rgba(242,213,114,.3);background:rgba(0,0,0,.4);
  color:#fff;font-family:'Be Vietnam Pro',sans-serif;font-size:13px;outline:none;user-select:text}
.ch-input:focus{border-color:#f2d572;background:rgba(0,0,0,.55)}
.ch-send{padding:0 12px;border-radius:8px;border:1px solid #b8860b;background:linear-gradient(180deg,#f6da84,#c9a022);
  color:#3a2c08;font-family:'Handjet',sans-serif;font-weight:900;font-size:15px;cursor:pointer}
@media (max-width:600px){
  .chat-box{left:10px;right:10px;top:56px;bottom:auto;width:auto;height:min(46vh,340px)}
  .ch-input{font-size:16px}                          /* >=16px: iOS won't zoom the page on focus */
}
@media (max-width:600px){                          /* 3 buttons in the world top bar: keep it on one line */
  .world-top{padding:10px;gap:6px}
  .world-top .icon-btn{width:36px;height:36px}
  .world-me,.world-mid{font-size:13px;white-space:nowrap}
  .world-top-btns{gap:6px}
}

/* ---------- World: nút chiêu thức (skill pad, bottom-right) ---------- */
.skill-pad{position:absolute;right:26px;bottom:36px;width:96px;height:96px;pointer-events:none}
.sk-btn{position:absolute;width:54px;height:54px;border-radius:50%;pointer-events:auto;cursor:pointer;padding:0;
  border:2px solid #b8860b;background:radial-gradient(circle at 50% 35%,#fff6d8,#e7c766 60%,#b8912a);color:#3a2c08;
  box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 -3px 8px rgba(0,0,0,.2);font-family:'Handjet',sans-serif;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible;
  -webkit-user-select:none;user-select:none;touch-action:none;transition:transform .08s,box-shadow .15s}
.sk-btn.main{right:0;bottom:0;width:96px;height:96px;border-width:3px;
  background:radial-gradient(circle at 50% 35%,#f6da84,#c9a022);box-shadow:0 6px 20px rgba(201,162,39,.5),inset 0 -4px 10px rgba(0,0,0,.2)}
.sk-ic{font-size:21px;line-height:1;position:relative;z-index:1}
.sk-btn.main .sk-ic{font-size:30px}
.sk-name{position:relative;z-index:1;font-size:12px;font-weight:900;line-height:1;margin-top:4px;max-width:88px;text-align:center}
.sk-lv{position:absolute;z-index:3;top:-3px;left:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#3a2c08;
  color:#f2d572;font-size:11px;font-weight:900;line-height:18px;border:1px solid #b8860b}
.sk-key{position:absolute;z-index:3;bottom:-4px;right:-2px;min-width:16px;height:16px;border-radius:4px;background:rgba(10,8,26,.85);
  color:#efe7d0;font-size:10px;font-weight:700;line-height:16px;border:1px solid rgba(242,213,114,.5)}
/* cooldown sweep: --p = % of the cooldown left */
.sk-cd{position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;
  background:conic-gradient(rgba(10,8,26,.72) calc(var(--p,0) * 1%),transparent 0)}
.sk-t{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;
  color:#fff;font-size:20px;font-weight:900;text-shadow:0 1px 3px #000,0 0 6px #000}
.sk-btn.main .sk-t{font-size:28px}
.sk-btn.cooling .sk-ic,.sk-btn.cooling .sk-name{opacity:.55}
.sk-btn.held,.sk-btn:active{transform:scale(.92)}
.sk-btn.active{box-shadow:0 0 0 3px rgba(196,181,253,.9),0 0 22px rgba(167,139,250,.9)}
.sk-btn.deny{animation:skDeny .25s}
@keyframes skDeny{25%{translate:-4px 0}75%{translate:4px 0}}
@media (max-width:600px){
  .skill-pad{right:14px;bottom:24px;width:78px;height:78px}
  .sk-btn{width:44px;height:44px;border-width:1.5px}
  .sk-btn.main{width:78px;height:78px}
  .sk-ic{font-size:17px}
  .sk-btn.main .sk-ic{font-size:24px}
  .sk-name{font-size:9px;margin-top:2px;max-width:66px}
  .sk-t{font-size:15px}
  .sk-btn.main .sk-t{font-size:22px}
  .sk-lv{min-width:15px;height:15px;line-height:15px;font-size:9px;top:-4px;left:-4px}
  .sk-key{display:none}                             /* no keyboard on phones */
}

/* character portrait = the character's own animated sprite */
.char-portrait .char-sprite{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;transform:scale(1.35) translateY(4%)}

/* ---------- auto attack toggle (next to the skill pad) ---------- */
.auto-btn{position:absolute;right:134px;bottom:12px;width:44px;height:44px;border-radius:50%;pointer-events:auto;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0;
  border:2px solid rgba(184,134,11,.6);background:rgba(14,11,32,.72);color:#b9ad8a;
  font-family:'Handjet',sans-serif;font-weight:900;font-size:11px;letter-spacing:.04em;line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.4);-webkit-user-select:none;user-select:none;touch-action:none;transition:transform .08s}
.auto-btn .hn{font-size:16px;margin-bottom:1px}
.auto-btn:active{transform:scale(.92)}
.auto-btn.on{background:radial-gradient(circle at 50% 35%,#f6da84,#c9a022);color:#3a2c08;border-color:#b8860b;
  box-shadow:0 0 0 3px rgba(253,224,71,.35),0 0 18px rgba(253,224,71,.6)}
.auto-btn.on .hn{animation:autoSpin 1.6s linear infinite}
@keyframes autoSpin{to{transform:rotate(360deg)}}
@media (max-width:600px){ .auto-btn{right:100px;bottom:6px;width:40px;height:40px} }
/* Tọa Trấn: left of AUTO (further left when the Cực Cảnh button is out) */
.garrison-btn{position:absolute;right:186px;bottom:12px;width:44px;height:44px;border-radius:50%;pointer-events:auto;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;
  border:2px solid rgba(56,189,248,.55);background:rgba(14,11,32,.72);color:#9cc9dd;
  font-family:'Handjet',sans-serif;font-weight:900;font-size:8px;letter-spacing:.02em;line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.4);-webkit-user-select:none;user-select:none;touch-action:none;transition:transform .08s}
.garrison-btn .gz-ic{font-size:18px;line-height:1}
.garrison-btn:active{transform:scale(.92)}
.garrison-btn.on{background:radial-gradient(circle at 50% 35%,#bae6fd,#0ea5e9);color:#062437;border-color:#0369a1;
  box-shadow:0 0 0 3px rgba(125,211,252,.35),0 0 18px rgba(56,189,248,.7)}
.garrison-btn.on .gz-ic{animation:autoSpin 3s linear infinite}
#w-cuc:not(.hidden) ~ .garrison-btn{right:262px}
@media (max-width:600px){ .garrison-btn{right:146px;bottom:6px;width:40px;height:40px} #w-cuc:not(.hidden) ~ .garrison-btn{right:222px} }

/* ---------- character select: progress + công pháp ---------- */
.char-prog{margin-top:10px;border-top:1px solid var(--border);padding-top:9px;text-align:left}
.cp-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-dim);margin-bottom:4px}
.cp-row b{color:var(--gold-2);font-size:14px}
.cp-step{font-size:11px;color:var(--ink-dim);margin:-2px 0 5px;letter-spacing:.3px}
.char-prog .xp-bar{height:12px;margin:4px 0 6px}
.char-prog .xp-bar .bar-text{font-size:9px}
.cp-stats{font-size:11px;color:var(--ink-dim);margin-bottom:6px}
.cp-stats b{color:var(--ink)}
.cp-title{font-size:11px;font-weight:700;color:var(--gold-2);margin:6px 0 4px}
.cp-skills{display:flex;flex-wrap:wrap;gap:4px}
.cp-skill{display:inline-flex;align-items:center;gap:3px;padding:2px 6px 2px 4px;border-radius:7px;font-size:11px;
  background:rgba(201,162,39,.14);border:1px solid rgba(184,134,11,.4);color:var(--ink);white-space:nowrap}
.cp-skill .hn{font-size:12px;color:var(--gold-2)}
.cp-skill b{color:#8a6a10;font-size:10px}
.cp-skill.locked{opacity:.45;background:transparent;border-style:dashed}

/* character select: animated hero stage (pixel hero + công pháp effects) */
.char-stage{display:block;margin:-4px auto 8px;width:160px;height:132px;image-rendering:pixelated;border-radius:14px;
  background:radial-gradient(ellipse 70% 60% at 50% 78%,#2e2548 0%,#17122a 70%,#100c1d 100%);
  border:1px solid rgba(184,134,11,.45);box-shadow:inset 0 0 18px rgba(0,0,0,.55),0 4px 12px rgba(40,30,8,.18)}
.char-card.selected .char-stage{border-color:var(--gold);box-shadow:inset 0 0 18px rgba(0,0,0,.5),0 0 14px rgba(201,162,39,.45)}

/* ---------- Tinh Đồ (planets) ---------- */
.w-planet{color:#ef4444}
.planet-panel{right:auto;left:50%;transform:translateX(-50%);width:440px}
.pp-title{flex:1;font-size:17px;font-weight:900;letter-spacing:.08em;color:#f2d572}
.pp-item{display:flex;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(242,213,114,.14);
  border-left:3px solid var(--pc)}
.pp-item.cur{background:rgba(242,213,114,.08);border-color:rgba(242,213,114,.4);border-left-color:var(--pc)}
.pp-item.locked{opacity:.55}
.pp-orb{width:44px;height:44px;flex:none;image-rendering:pixelated;filter:drop-shadow(0 0 6px var(--pc))}
.pp-info{flex:1;min-width:0}
.pp-name{font-size:18px;font-weight:900;color:var(--pc);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.pp-where{font-size:12px;color:#b9ad8a;margin-top:-2px}
.pp-desc{font-family:'Be Vietnam Pro',sans-serif;font-size:12px;color:#e7dfc6;margin:4px 0;line-height:1.35}
.pp-meta{font-size:12px;color:#cbbf9d}
.pp-meta.boss{color:#fca5a5}
.pp-act{margin-top:6px;display:flex;justify-content:flex-end}
.pp-here{font-size:13px;font-weight:700;color:#86efac}
.pp-lock{font-size:13px;font-weight:700;color:#fca5a5}
@media (max-width:600px){ .planet-panel{left:10px;right:10px;transform:none;width:auto} }

/* ---------- Đạo hiệu (character name) ---------- */
.name-modal{z-index:60;background:rgba(6,5,18,.72);backdrop-filter:blur(3px)}
.name-box{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 22px 18px;
  background:linear-gradient(180deg,rgba(28,22,52,.97),rgba(14,11,32,.97));border:1px solid var(--border);border-radius:16px;
  box-shadow:0 16px 48px rgba(0,0,0,.6)}
.name-box .panel-title{margin-bottom:0}
.name-stage{display:block;border-radius:12px;background:radial-gradient(circle at 50% 70%,rgba(80,60,140,.35),rgba(10,8,26,.9))}
.name-hint{font-size:13px;color:#cbbf9d;text-align:center;margin:0}
.name-hint b{color:var(--gold-lt)}
.name-row{display:flex;gap:8px;width:100%}
.name-row .auth-input{flex:1;font-size:17px;text-align:center}
.name-dice{padding:0 14px;font-size:20px}
.name-err{min-height:18px;font-size:13px;color:#fca5a5;text-align:center}

/* ---------- Công Pháp (codex): one tab per character ---------- */
.codex-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%;margin-bottom:14px}
.codex-tab{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;cursor:pointer;
  background:var(--panel);border:1.5px solid var(--border);color:var(--ink);font-family:'Handjet',monospace;font-weight:700;font-size:16px}
.codex-tab .hn{color:var(--cc)}
.codex-tab b{font-size:13px;color:var(--ink-dim);font-weight:700}
.codex-tab:hover{border-color:var(--cc)}
.codex-tab.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);background:linear-gradient(180deg,#fff8e1,#f3e2ad)}
@media (max-width:600px){ .codex-tab{flex:1 1 calc(50% - 8px);justify-content:center;font-size:15px;padding:7px 8px} }

/* ---------- linh thạch in the world HUD ---------- */
.w-stones{margin-left:10px;color:#fde047;font-size:14px;white-space:nowrap}
.w-stones .hn{font-size:13px}
@media (max-width:600px){ .w-stones{margin-left:6px;font-size:12px} }

/* ---------- Cửa Hàng (system shop) ---------- */
.shop-panel{width:500px;max-height:min(78vh,640px);display:flex;flex-direction:column}
.shop-panel .sp-body{flex:1;min-height:0}
.shop-bal{margin-right:10px;padding:3px 10px;border-radius:999px;background:rgba(253,224,71,.12);border:1px solid rgba(253,224,71,.4);
  color:#fde047;font-weight:900;font-size:15px;white-space:nowrap}
.shop-note{padding:6px 12px 2px;font-family:'Be Vietnam Pro',sans-serif;font-size:11.5px;color:#b9ad8a}
.shop-note b{color:#f2d572}
.sh-item{display:flex;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid rgba(242,213,114,.14);border-left:3px solid var(--rc,#e7dfc6)}
.sh-item.owned{background:rgba(242,213,114,.06)}
.sh-item.r-common{--rc:#e7dfc6}.sh-item.r-rare{--rc:#7dd3fc}.sh-item.r-epic{--rc:#c4b5fd}.sh-item.r-legend{--rc:#fbbf24}.sh-item.r-myth{--rc:#fb7185}
.sh-ic{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:9px;
  background:rgba(0,0,0,.35);color:var(--rc);font-size:18px}
.sh-info{flex:1;min-width:0}
.sh-name{font-size:17px;font-weight:900;color:var(--rc);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.sh-lv{font-size:12px;font-weight:700;color:#86efac;margin-left:4px}
.sh-item:not(.owned) .sh-lv{color:#8f8568}
.sh-rar{font-size:11.5px;color:var(--rc);opacity:.85;margin-top:-2px}
.sh-desc{font-family:'Be Vietnam Pro',sans-serif;font-size:12px;color:#e7dfc6;margin:4px 0;line-height:1.35}
.sh-next{font-size:12.5px;color:#fde68a}
.sh-src{font-size:11.5px;color:#b9ad8a;margin-top:2px}
.sh-act{margin-top:6px;display:flex;justify-content:flex-end}
.sh-buy{font-size:14px;font-weight:900}
.sh-buy:disabled{opacity:.5;cursor:not-allowed}
/* tiên ngọc (assets/ui/tienngoc.png, tools/pixel/icons/tienngoc.js): the icon, the HUD / shop balance, the pay button */
.ic-ngoc{width:16px;height:16px;image-rendering:pixelated;vertical-align:-3px;display:inline-block}
.ic-ngoc.lg{width:32px;height:32px;vertical-align:middle}
.w-ngoc{margin-left:8px;color:#8ff0c8;font-size:14px;white-space:nowrap}
@media (max-width:600px){ .w-ngoc{margin-left:6px;font-size:12px} .w-ngoc .ic-ngoc{width:13px;height:13px} }
.shop-bal.ngoc{background:rgba(86,199,157,.12);border-color:rgba(86,199,157,.45);color:#8ff0c8}
.sh-act{gap:6px;flex-wrap:wrap;align-items:center}
.sh-for{font-size:12px;color:#cbd5c0;margin-right:auto}
.sp-btn.ngoc{border-color:rgba(86,199,157,.5);color:#bff5de}
.sp-btn.ngoc.ok{background:linear-gradient(180deg,#a6eed2,#2f9c76);color:#0b2a21;border-color:#1f7a5b}
.ngoc-note{display:flex;gap:10px;align-items:center;margin:0 0 10px;text-align:left}
.sh-max{font-size:13px;font-weight:700;color:#86efac}
/* ---------- Trọng Bảo (shop tab) · túi đồ · Người Canh Thú (js/bag.js, js/keeper.js) ---------- */
.bag-ic{width:32px;height:32px;image-rendering:pixelated;display:block}
.bag-ic.sm{width:18px;height:18px;display:inline-block;vertical-align:-4px}
.sh-ic.bao-big{width:56px;height:56px;background:radial-gradient(circle,rgba(251,191,36,.25),rgba(0,0,0,.35))}
.sh-ic.bao-big .bag-ic{width:44px;height:44px}
.bao-costs{font-family:'Be Vietnam Pro',sans-serif;font-size:11.5px;color:#cbd5c0;margin:4px 0 2px;line-height:1.45}
.bao-costs b{color:#fde68a}
.bao-act{flex-direction:column;align-items:stretch}
.bao-qty{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.bao-qty input{width:70px;padding:5px 6px;border-radius:8px;border:1px solid rgba(242,213,114,.4);background:rgba(0,0,0,.35);color:#fde68a;
  font:900 16px 'Handjet',monospace;text-align:center}
.bao-qty .sp-btn{min-width:32px;padding:5px 8px}
.bao-pick{font-size:12px}
.bao-need{font-size:12px;color:#fca5a5;text-align:right}
.bao-pay{display:flex;flex-direction:column;gap:4px}
.bag-panel{width:400px}
.bag-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bag-slot{position:relative;aspect-ratio:1;border-radius:10px;border:2px solid rgba(242,213,114,.3);background:rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.bag-slot.empty{border-style:dashed;border-color:rgba(242,213,114,.12);cursor:default}
.bag-slot.sel{border-color:#fde047;box-shadow:0 0 0 2px rgba(253,224,71,.35),0 0 14px rgba(253,224,71,.35)}
.bag-slot .bag-ic{width:70%;height:70%}
.bag-n{position:absolute;right:3px;bottom:1px;font:900 13px 'Handjet',monospace;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000}
.bag-info{margin-top:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(242,213,114,.14)}
.bag-info-head{display:flex;gap:10px;align-items:center}
.bag-info-head b{font-size:17px;color:#fde68a}
.bag-have{font-size:12.5px;color:#86efac}
.bag-desc{font-family:'Be Vietnam Pro',sans-serif;font-size:12px;color:#e7dfc6;margin:6px 0;line-height:1.4}
.bag-none{font-family:'Be Vietnam Pro',sans-serif;font-size:12.5px;color:#cbd5c0}
.bag-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:6px}
.keeper-panel{width:540px}
.kp-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:#e7dfc6}
.kp-note #kp-buy{margin-left:auto;padding:4px 10px;font-size:13px}
.kp-say{flex-basis:100%;font-style:italic;color:#b9ad8a;font-size:11.5px}
.kp-go{font-size:14px;font-weight:900}
.kp-go:disabled{opacity:.5;cursor:not-allowed}
.kp-rate{font-size:12.5px;font-weight:900;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.35)}
.kp-rate.hi{color:#86efac}.kp-rate.mid{color:#fde047}.kp-rate.lo{color:#fca5a5}
.kp-need{font-size:12px;color:#fca5a5;flex-basis:100%;text-align:right}
@media (max-width:600px){ .bag-panel,.keeper-panel{left:10px;right:10px;transform:none;width:auto;top:56px;max-height:calc(100vh - 150px)} }
@media (max-width:600px){ .shop-panel{left:10px;right:10px;transform:none;width:auto;top:56px;max-height:calc(100vh - 150px)} }
/* phones: 5 buttons in the world top bar — texts stack in a left column, buttons stay on the right */
@media (max-width:600px){
  .world-top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;row-gap:2px;align-items:start}
  .world-me{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;white-space:normal}
  .world-mid{grid-column:1;grid-row:2;white-space:normal;line-height:1.2}
  .world-top-btns{grid-column:2;grid-row:1 / span 2}
  .w-stones{margin-left:0}
}

/* ---------- khóa tài khoản (login screen) ---------- */
.auth-blocked{margin:2px 0 10px;padding:10px 12px;border-radius:10px;background:rgba(220,38,38,.1);border:1.5px solid rgba(185,28,28,.55);text-align:left}
.auth-blocked .ab-title{font-weight:900;font-size:17px;color:#b91c1c;display:flex;align-items:center;gap:6px}
.auth-blocked .ab-reason{font-family:'Be Vietnam Pro',sans-serif;font-size:13px;color:#7f1d1d;margin-top:3px;line-height:1.4;
  overflow-wrap:anywhere;white-space:pre-line}

/* ---------- Bán linh thạch + tài khoản ngân hàng (js/wallet.js) ---------- */
/* pixel frame: square corners, a hard gold border and a dark + pale-gold outer ring */
.px-panel{background:linear-gradient(180deg,rgba(28,22,52,.97),rgba(14,11,32,.97));border:2px solid #b8860b;border-radius:3px;
  box-shadow:0 0 0 2px #120e26,0 0 0 4px rgba(242,216,133,.4),0 16px 40px rgba(0,0,0,.55);
  padding:18px;color:#efe7d0;text-align:left;font-family:'Handjet','Be Vietnam Pro',sans-serif}
.px-panel .field-msg{color:#fca5a5;font-size:14px}.px-panel .field-msg.ok{color:#86efac}.px-panel .field-msg.info{color:#fde68a}
.px-panel .auth-input{user-select:text;border-radius:3px;border-width:2px}
.px-label{font-size:17px;font-weight:700;color:var(--gold-lt);letter-spacing:.03em}
.px-sub{font-family:'Be Vietnam Pro',sans-serif;font-size:12.5px;color:#cbbf9d;line-height:1.45}
.px-note{font-family:'Be Vietnam Pro',sans-serif;font-size:12px;color:#b9ad8a;line-height:1.5;margin:0}
.px-note b{color:#fca5a5}
.px-note.warn{padding:8px 10px;border:1px dashed rgba(252,165,165,.5);background:rgba(185,28,28,.12);border-radius:3px}
.px-select{cursor:pointer}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.px-btn-sm{padding:8px 14px;font-size:15px;border-radius:3px;white-space:nowrap}
.px-tabs{display:flex;gap:8px;justify-content:center;width:100%;max-width:460px;margin-bottom:14px}
.px-tab{flex:1;padding:9px 10px;border-radius:3px;border:2px solid rgba(242,213,114,.35);background:rgba(14,11,32,.8);color:#cbbf9d;
  font-family:'Handjet',monospace;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.px-tab .hn{margin-right:4px}
.px-tab.active{background:linear-gradient(180deg,#f6da84,#c9a022);color:#3a2c08;border-color:#b8860b}
.px-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:19px;font-weight:700;color:var(--gold-lt);
  padding-bottom:10px;margin-bottom:10px;border-bottom:2px dashed rgba(242,213,114,.25)}
.px-head b{font-size:14px;color:#cbbf9d}
.px-head .hn{margin-right:4px}

/* settings: bank form */
.bank-form{width:100%;max-width:460px;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.bank-saved{font-family:'Be Vietnam Pro',sans-serif;font-size:12.5px;color:#86efac;padding:8px 10px;border:1px solid rgba(134,239,172,.35);
  background:rgba(5,150,105,.12);border-radius:3px;line-height:1.45}
.bank-saved b{color:#d1fae5}
#settings-game{background:rgba(14,11,32,.72);border:2px solid rgba(242,213,114,.35);border-radius:3px;padding:0 14px;color:#efe7d0;font-size:17px}
#settings-game .setting-row:last-child{border-bottom:0}
#settings-game .setting-row{border-bottom-color:rgba(242,213,114,.18)}

/* sell page */
.sell-grid{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:20px;width:100%;align-items:start;margin-bottom:16px}
.sell-form{display:flex;flex-direction:column;gap:12px}
.sell-stats{display:grid;grid-template-columns:1fr;gap:6px}
.sell-stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(242,213,114,.2);border-radius:3px}
.sell-stat span{font-size:15px;color:#cbbf9d}
.sell-stat b{font-size:18px;color:#fde047;text-align:right}
.sell-row{display:flex;gap:8px}
.sell-row .auth-input{flex:1;min-width:0;font-size:20px;font-weight:700;font-family:'Handjet',monospace;letter-spacing:.05em}
.sell-get{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px;border:2px solid #b8860b;border-radius:3px;
  background:linear-gradient(180deg,rgba(242,216,133,.14),rgba(184,134,11,.08))}
.sell-get span{font-size:16px;color:#f2d885}
.sell-get b{font-size:28px;color:#86efac;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.sell-bank{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(242,213,114,.3);border-radius:3px;background:rgba(255,255,255,.04)}
.sell-bank>.hn{font-size:22px;color:var(--gold-lt)}
.sell-bank>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sell-bank span{font-size:13px;color:#b9ad8a}
.sell-bank b{font-size:16px;color:#efe7d0;overflow-wrap:anywhere}
.sell-bank em{font-style:normal;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;color:#cbbf9d;overflow-wrap:anywhere}
.sell-bank.missing{border-color:rgba(252,165,165,.55);background:rgba(185,28,28,.12)}
.sell-bank.missing b{color:#fca5a5}
.sell-history{min-width:0}
.tx-list{display:flex;flex-direction:column;gap:8px;transition:opacity .15s}
.tx-list.loading{opacity:.5}
.tx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:9px 11px;border-radius:3px;
  background:rgba(255,255,255,.04);border:1px solid rgba(242,213,114,.18);border-left:4px solid var(--sc)}
.tx-row.s-pending{--sc:#f59e0b}.tx-row.s-approved{--sc:#10b981}.tx-row.s-rejected{--sc:#ef4444}
.tx-main{font-size:17px;color:#efe7d0}
.tx-main b{color:#fde047}
.tx-main .tx-money{color:#86efac}
.tx-arrow{color:#8f8568}
.tx-status{align-self:start;padding:2px 9px;border-radius:2px;font-size:14px;font-weight:700;color:#1a1430;background:var(--sc);
  box-shadow:0 0 0 2px rgba(0,0,0,.35);white-space:nowrap}
.tx-sub{grid-column:1/-1;font-family:'Be Vietnam Pro',sans-serif;font-size:11.5px;color:#b9ad8a}
.tx-reason{grid-column:1/-1;font-family:'Be Vietnam Pro',sans-serif;font-size:12.5px;color:#fca5a5;overflow-wrap:anywhere}
.tx-done{grid-column:1/-1;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;color:#86efac}
.tx-empty{padding:26px 10px;text-align:center;color:#8f8568;font-size:17px}
.px-pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.px-page{min-width:36px;height:34px;border-radius:3px;border:2px solid rgba(242,213,114,.4);background:rgba(255,255,255,.05);color:var(--gold-lt);
  font-family:'Handjet',monospace;font-size:20px;font-weight:700;cursor:pointer}
.px-page:hover:not(:disabled){background:rgba(242,213,114,.18)}
.px-page:disabled{opacity:.35;cursor:default}
.px-page-no{padding:0 8px;font-size:17px;color:#efe7d0}
.confirm-box{width:min(440px,100%);display:flex;flex-direction:column;gap:10px}
.confirm-box .panel-title{margin-bottom:4px}
.confirm-body{display:flex;flex-direction:column;gap:6px}
.cf-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px dashed rgba(242,213,114,.2);font-size:16px}
.cf-line span{color:#cbbf9d}
.cf-line b{color:#efe7d0;text-align:right;overflow-wrap:anywhere}
.cf-line.big b{font-size:26px;color:#86efac}
@media (max-width:760px){
  .sell-grid{grid-template-columns:1fr}
  .px-tab{font-size:15px;padding:8px 6px}
}

/* ---------- Nạp linh thạch (js/topup.js) ---------- */
.topup-input{font-size:20px;font-weight:700;font-family:'Handjet',monospace;letter-spacing:.05em}
.topup-picks{display:flex;gap:6px;flex-wrap:wrap}
/* cổng nạp / rút: ngân hàng or USDT, and the USDT network */
.pay-methods{display:flex;gap:6px}
.pay-method{flex:1;padding:8px 6px;border-radius:3px;border:2px solid rgba(242,213,114,.3);background:rgba(255,255,255,.04);color:#cbbf9d;
  font-family:'Handjet',monospace;font-size:17px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.pay-method.on{border-color:#b8860b;background:rgba(242,213,114,.18);color:#fde047;box-shadow:inset 0 0 0 1px rgba(253,224,71,.35)}
.pay-nets{display:flex;gap:6px;flex-wrap:wrap}
.pay-net{flex:1;min-width:86px;padding:6px 8px;border-radius:3px;border:2px solid rgba(38,161,123,.35);background:rgba(38,161,123,.06);color:#a7f3d0;
  font-family:'Handjet',monospace;font-size:16px;font-weight:700;cursor:pointer}
.pay-net.on{border-color:#26a17b;background:rgba(38,161,123,.25);color:#ecfdf5}
.usdt-ic{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;border-radius:50%;background:#26a17b;color:#fff;font-size:.85em;font-weight:900;line-height:1}
.sell-get.usdt b{color:#6ee7b7}
.pay-rows .addr b{font-family:monospace;font-size:13px;overflow-wrap:anywhere;word-break:break-all}
.px-note.danger{border-color:rgba(252,165,165,.55);background:rgba(185,28,28,.14);color:#fecaca}
.tx-link{color:#6ee7b7;text-decoration:underline}
.px-pick{flex:1;min-width:64px;padding:5px 8px;border-radius:3px;border:2px solid rgba(242,213,114,.35);background:rgba(255,255,255,.05);
  color:#fde047;font-family:'Handjet',monospace;font-size:16px;font-weight:700;cursor:pointer}
.px-pick:hover{background:rgba(242,213,114,.18);border-color:#b8860b}
.topup-pay{display:flex;flex-direction:column;gap:10px}
.qr-box{align-self:center;background:#fff;padding:8px;border:2px solid #b8860b;border-radius:3px;box-shadow:0 0 0 2px #120e26,0 0 0 4px rgba(242,216,133,.4);
  width:min(280px,100%);min-height:120px;display:flex;align-items:center;justify-content:center}
.qr-box img{display:block;width:100%;height:auto;color:#6a5f47;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;text-align:center}
.pay-rows{display:flex;flex-direction:column;gap:4px}
.pay-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;
  background:rgba(255,255,255,.04);border:1px solid rgba(242,213,114,.16)}
.pay-row span{font-size:15px;color:#cbbf9d}
.pay-row b{font-size:17px;color:#efe7d0;overflow-wrap:anywhere;font-family:'Be Vietnam Pro',sans-serif;font-size:14px}
.pay-row.big b{font-family:'Handjet',monospace;font-size:24px;color:#86efac}
.pay-row.code{border-color:#b8860b;background:rgba(242,216,133,.12)}
.pay-row.code b{font-family:'Handjet',monospace;font-size:24px;letter-spacing:.12em;color:#fde047}
.px-copy{padding:3px 10px;border-radius:3px;border:2px solid rgba(242,213,114,.45);background:rgba(14,11,32,.8);color:var(--gold-lt);
  font-family:'Handjet',monospace;font-size:15px;font-weight:700;cursor:pointer}
.px-copy:hover{background:rgba(242,213,114,.2)}
.pay-wait{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px dashed rgba(242,213,114,.4);border-radius:3px}
.pay-wait-line{display:flex;align-items:center;gap:8px;font-size:16px;color:#fde68a}
.px-spin{width:14px;height:14px;flex:none;background:#fde047;box-shadow:0 0 0 2px #120e26;animation:pxSpin 1s steps(4) infinite}
@keyframes pxSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.pay-bar{height:8px;background:rgba(255,255,255,.06);border:1px solid rgba(242,213,114,.3);border-radius:2px;overflow:hidden}
.pay-bar-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,#fde047 0 6px,#c9a022 6px 12px)}
.topup-done{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.done-mark{width:72px;height:72px;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:900;color:#052e16;
  background:#34d399;border:3px solid #065f46;box-shadow:0 0 0 3px #120e26,0 0 22px rgba(52,211,153,.55)}
.done-title{font-size:28px;font-weight:900;color:#86efac;letter-spacing:.06em}
.done-gain{font-size:34px;font-weight:900;color:#fde047;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.tx-row.t-pending{--sc:#f59e0b}.tx-row.t-paid{--sc:#10b981}.tx-row.t-cancelled{--sc:#8f8568}
@media (max-width:760px){ .pay-row{grid-template-columns:92px minmax(0,1fr) auto} }

/* ---------- Giới thiệu bạn bè (js/affiliate.js) ---------- */
.sell-row .aff-link{font-family:'Be Vietnam Pro',sans-serif;font-size:13px;font-weight:600;letter-spacing:0;color:#fde68a;cursor:text}
.aff-code{margin-top:6px;font-size:15px;color:#b9ad8a}
.aff-code b{font-size:20px;letter-spacing:.14em;color:#fde047}
.aff-rule{display:flex;align-items:center;gap:10px;padding:10px 12px;border:2px solid #b8860b;border-radius:3px;
  background:linear-gradient(180deg,rgba(242,216,133,.14),rgba(184,134,11,.08))}
.aff-rule>.hn{font-size:24px;color:var(--gold-lt)}
.aff-rule>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;gap:2px}
.aff-rule span{font-size:13px;color:#b9ad8a}
.aff-rule b{font-size:19px;color:#86efac;overflow-wrap:anywhere}
.aff-rule em{font-style:normal;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;color:#cbbf9d}
.aff-rule.off{opacity:.55}
.aff-row{--sc:#b8860b}
.aff-row .tx-main .hn{color:#b9ad8a;font-size:15px}
.aff-name{letter-spacing:.06em}
.aff-gain{align-self:start;font-size:18px;font-weight:700;color:#86efac;white-space:nowrap}
.aff-gain small{font-size:13px;color:#b9ad8a;font-weight:400}
.aff-gain.zero{color:#8f8568}
.auth-ref-note{font-family:'Be Vietnam Pro',sans-serif;font-size:12.5px;color:#065f46;text-align:left;padding:7px 10px;border-radius:8px;
  background:rgba(16,185,129,.12);border:1px solid rgba(5,150,105,.4)}

/* ---------- Đăng ký: email code step ---------- */
.auth-verify-note{font-family:'Be Vietnam Pro',sans-serif;font-size:12px;color:#8a6d1c;text-align:left;padding:0 4px}
#auth-form{display:flex;flex-direction:column;gap:12px}
.auth-code-step{display:flex;flex-direction:column;gap:8px;text-align:left}
.acs-title{font-size:20px;font-weight:900;color:var(--gold-2)}
.acs-sub{font-family:'Be Vietnam Pro',sans-serif;font-size:13px;color:var(--ink-dim);line-height:1.45}
.acs-sub b{color:var(--ink);overflow-wrap:anywhere}
.auth-code-input{text-align:center;font-family:'Handjet',monospace;font-size:30px;font-weight:700;letter-spacing:.5em;padding:8px 0 8px .5em}
.acs-actions{display:flex;justify-content:space-between;gap:8px}
.mini-link{background:none;border:0;padding:4px 2px;color:var(--gold-2);font-family:'Handjet',sans-serif;font-size:16px;font-weight:700;cursor:pointer}
.mini-link:hover:not(:disabled){text-decoration:underline}
.mini-link:disabled{color:var(--ink-dim);cursor:default}

/* ---------- chat: Hỗ trợ tab + messages from the admins ---------- */
.ch-tab-support .hn{color:#fca5a5}
.ch-tab-support.active{background:rgba(252,165,165,.14);color:#fecaca;box-shadow:inset 0 -2px 0 #f87171}
.ch-n.admin{color:#fca5a5;cursor:default}
.ch-n.admin:hover{text-decoration:none}
.ch-staff{display:inline-block;margin-right:3px;padding:0 4px;border-radius:3px;background:#dc2626;color:#fff;font-size:9.5px;font-weight:900;
  letter-spacing:.04em;vertical-align:1px;text-shadow:none}
.ch-line.from-admin{background:rgba(220,38,38,.12);border-left:2px solid #f87171;padding-left:5px;margin:1px 0}
.ch-hint{color:#cbbf9d;font-size:11.5px;padding:4px 2px 6px;border-bottom:1px dashed rgba(242,213,114,.2);margin-bottom:4px}
@media (max-width:600px){ .ch-tab{font-size:13px} }

/* Cửa Hàng: công pháp the admin switched off */
.sh-item.off{opacity:.55}
.sh-off{font-size:13px;font-weight:700;color:#fca5a5}

/* ---------- Phones (body.compact — short side < 600px, set by js/game.js; the world is zoomed out 2x) ----------
   top: buttons, then HP / tu vi on the left of a small minimap; bottom: room for the left thumb (the joystick floats
   wherever the finger presses), skills in 2 small rows
   in the middle (js/skills.js layoutCompact), a smaller attack button right with AUTO above it */
.compact .world-top{padding:6px 8px;gap:4px}
.compact .world-top .icon-btn{width:30px;height:30px;border-radius:8px;font-size:12px}
.compact .world-top .icon-btn .hn{font-size:13px}
.compact .world-top .badge{top:-5px;right:-5px;min-width:15px;height:15px;line-height:15px;font-size:9px;padding:0 3px}
.compact .world-me,.compact .world-mid{font-size:12px}
.compact .world-top-btns{gap:4px}
.compact .minimap{top:42px;right:8px;width:96px;height:96px;border-radius:8px}
.compact .world-board{top:144px;right:8px;width:96px;font-size:10px;padding:4px 6px;max-height:84px;overflow:hidden}
.compact #world-hud .world-hpwrap{top:42px;bottom:auto;left:8px;transform:none;width:calc(100% - 120px)}
.compact .world-hpwrap .bar{height:12px;border-radius:6px}
.compact .world-hpwrap .xp-bar{height:9px;margin-top:3px}
.compact .world-hpwrap .bar-text{font-size:10px}
.compact .boss-bar{top:calc(74px + var(--ann-h,0px));left:8px;transform:none;width:calc(100% - 120px)}
.compact .boss-name{font-size:12px}
.compact .boss-hp{height:10px}
.compact .killfeed{top:calc(106px + var(--ann-h,0px));bottom:auto;left:8px}
.compact .kf{font-size:10px;padding:2px 7px}
.compact .world-hint{display:none}
.compact .world-status{font-size:13px;padding:8px 14px}
.compact .joystick{width:96px;height:96px}
.compact .joystick-knob{width:40px;height:40px}
.compact .skill-pad{left:0;right:0;bottom:0;width:auto;height:100px}
.compact .sk-btn{border-width:1.5px}
.compact .sk-btn:not(.main) .sk-ic{font-size:14px}
.compact .sk-btn:not(.main) .sk-lv{min-width:13px;height:13px;line-height:13px;font-size:8px;top:-4px;left:-4px}
.compact .sk-btn:not(.main) .sk-t{font-size:12px}
.compact .sk-btn.main{right:10px;bottom:12px;width:62px;height:62px;border-width:2px}
.compact .sk-btn.main .sk-ic{font-size:22px}
.compact .sk-btn.main .sk-name{display:none}
.compact .sk-btn.main .sk-t{font-size:18px}
.compact .sk-btn.main .sk-lv{top:-3px;left:-3px}
.compact .auto-btn{right:22px;bottom:82px;width:38px;height:38px;font-size:9px}
.compact .auto-btn .hn{font-size:13px}
.compact .garrison-btn{right:22px;bottom:126px;width:38px;height:38px;font-size:7px}
.compact .garrison-btn .gz-ic{font-size:15px}
/* phones: the chat box sits in the middle of what can be seen and stays there (position fixed). --vv-mid / --vv-h come
   from the visual viewport (js/chat.js fitViewport): when the keyboard opens it shrinks and moves up with the visible
   area, so the messages and the input stay on screen together */
.compact .chat-box{position:fixed;left:50%;right:auto;top:var(--vv-mid,50%);bottom:auto;transform:translate(-50%,-50%);
  width:min(420px,calc(100% - 20px));height:min(340px,calc(var(--vv-h,100vh) - 24px),62vh);z-index:40}
.compact .social-panel{top:70px;max-height:calc(100% - 190px)}

/* ---------- Động phủ (js/cave.js) + nút Về động phủ + tọa độ ---------- */
/* in the cave: no map, board, boss, skills; the HUD says where you are instead of how many are around */
#world-hud.in-cave #w-minimap,#world-hud.in-cave #world-board,#world-hud.in-cave #w-boss,#world-hud.in-cave #w-killfeed,
#world-hud.in-cave .world-hint,#world-hud.in-cave #w-skills,#world-hud.in-cave #w-auto,#world-hud.in-cave #w-home,
#world-hud.in-cave .w-countwrap{display:none!important}
.home-btn{display:flex;align-items:center;justify-content:center;gap:5px}
.home-btn .home-lbl{display:none;font-size:15px;font-weight:900;white-space:nowrap}
/* khí huyết low: red, blinking, with its label (phones: icon only) */
.home-btn.low{width:auto;padding:0 12px;color:#fff;border-color:#fca5a5;background:linear-gradient(180deg,#ef4444,#991b1b);animation:homeBlink 1s ease-in-out infinite}
.home-btn.low .home-lbl{display:inline}
@keyframes homeBlink{0%,100%{box-shadow:0 0 6px rgba(220,38,38,.55)}50%{box-shadow:0 0 0 4px rgba(248,113,113,.4),0 0 20px rgba(248,113,113,.95);filter:brightness(1.3)}}
.compact .home-btn.low{padding:0;width:30px}
.compact .home-btn.low .home-lbl{display:none}
/* boons from the cave (Tĩnh Tâm / Linh Trà), above the HP bar (phones: below it) */
.w-boons{position:absolute;left:0;right:0;bottom:100%;margin-bottom:5px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;pointer-events:none}
.w-boons:empty{display:none}
.boon{padding:2px 9px;border-radius:10px;font-size:14px;font-weight:700;background:rgba(10,8,26,.78);border:1px solid;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.6)}
.boon.calm{color:#c4b5fd;border-color:rgba(167,139,250,.65)}
.boon.tea{color:#86efac;border-color:rgba(74,222,128,.65)}
.compact .w-boons{bottom:auto;top:100%;margin:3px 0 0;justify-content:flex-start}
.compact .boon{font-size:11px;padding:1px 6px}
.compact .boss-bar{top:calc(92px + var(--ann-h,0px))}
.compact .killfeed{top:calc(124px + var(--ann-h,0px))}
/* what the furniture nearby does / what I'm doing */
.cave-ui{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;width:min(560px,92%)}
.cave-status{padding:6px 14px;border-radius:10px;background:rgba(10,8,26,.8);border:1px solid var(--border);color:#fde68a;font-size:17px;
  font-weight:700;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.cave-act{pointer-events:auto;cursor:pointer;padding:10px 22px;border-radius:12px;border:2px solid #b8860b;background:linear-gradient(180deg,#f6da84,#c9a022);
  color:#3a2c08;font-family:'Handjet',monospace;font-size:20px;font-weight:900;box-shadow:0 0 0 2px rgba(10,8,26,.8),0 6px 18px rgba(0,0,0,.45);
  animation:toastIn .25s ease;max-width:100%}
.cave-act:hover:not(:disabled){filter:brightness(1.08)}
.cave-act:active:not(:disabled){transform:scale(.97)}
.cave-act:disabled{filter:grayscale(.7);opacity:.8;cursor:default}
.compact .cave-ui{bottom:118px}
.compact .cave-status{font-size:14px;padding:5px 10px}
.compact .cave-act{font-size:16px;padding:8px 14px}
/* tọa độ in the chat + the 📍 button; where a hảo hữu is */
.ch-loc{padding:0 8px;border-radius:8px;border:1px solid rgba(242,213,114,.4);background:rgba(0,0,0,.35);font-size:15px;cursor:pointer;line-height:1}
.ch-loc:hover{background:rgba(242,213,114,.15)}
.ch-coord{display:inline;padding:0 5px;margin:0 1px;border-radius:5px;border:1px solid rgba(74,222,128,.5);background:rgba(22,163,74,.18);
  color:#86efac;font:inherit;font-weight:700;cursor:pointer}
.ch-coord:hover{background:rgba(22,163,74,.32)}
.sp-where{margin-left:6px;font-size:12px;font-weight:400;color:#a5b4fc}
/* Tinh Đồ: the way home */
.pp-home-ic{display:flex;align-items:center;justify-content:center;font-size:26px;color:#fde047}
.pp-home-note{padding:8px 10px;margin-bottom:8px;border-radius:10px;border:1px dashed rgba(253,224,71,.45);background:rgba(253,224,71,.08);
  color:#fde68a;font-size:15px;font-weight:700}

/* ---------- Cực Cảnh (admin-given): a red button beside AUTO; fires while held ---------- */
.cuc-btn{position:absolute;right:190px;bottom:14px;width:64px;height:64px;border-radius:50%;pointer-events:auto;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:2px solid #7f1d1d;
  background:radial-gradient(circle at 50% 35%,#fca5a5,#dc2626 55%,#7f1d1d);color:#fff;font-family:'Handjet',monospace;
  box-shadow:0 0 0 2px rgba(20,0,0,.6),0 0 18px rgba(239,68,68,.75);animation:cucPulse 1.6s ease-in-out infinite;touch-action:none;user-select:none}
.cuc-btn .cuc-ic{font-size:24px;line-height:1;text-shadow:0 0 6px #fff}
.cuc-btn .cuc-lbl{font-size:10px;font-weight:900;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.cuc-btn.held,.cuc-btn:active{transform:scale(.92);box-shadow:0 0 0 3px #fecaca,0 0 30px rgba(239,68,68,1)}
@keyframes cucPulse{0%,100%{box-shadow:0 0 0 2px rgba(20,0,0,.6),0 0 12px rgba(239,68,68,.55)}50%{box-shadow:0 0 0 2px rgba(20,0,0,.6),0 0 26px rgba(248,113,113,.95)}}
#world-hud.in-cave #w-cuc,#world-hud.in-cave #w-garrison{display:none!important}
.compact .cuc-btn{right:14px;bottom:128px;width:52px;height:52px}
.compact .cuc-btn .cuc-ic{font-size:19px}
.compact .cuc-btn .cuc-lbl{font-size:8px}

/* ---------- Cài về máy (PWA popup, js/pwa.js) ---------- */
.pwa-panel{width:min(400px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pwa-ic{width:84px;height:84px;image-rendering:pixelated;filter:drop-shadow(0 6px 14px rgba(220,38,38,.35))}
.pwa-title{font-size:24px;font-weight:900;letter-spacing:.06em;color:var(--gold-lt);text-shadow:0 2px 0 rgba(0,0,0,.5)}
.pwa-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%;text-align:left}
.pwa-list li{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(242,213,114,.2);border-radius:3px;
  background:rgba(255,255,255,.04);font-family:'Be Vietnam Pro',sans-serif;font-size:13px;color:#efe7d0}
.pwa-list .hn{color:var(--gold-lt);font-size:15px;width:18px;text-align:center}
.pwa-panel .panel-actions{width:100%;margin-top:4px}
.pwa-note{font-family:'Be Vietnam Pro',sans-serif;font-size:11px;color:#8f8568}

/* ============ chọn máy chủ (js/servers.js) ============ */
.srv-panel{width:min(460px,100%);display:flex;flex-direction:column;gap:10px}
.srv-panel .panel-title{margin-bottom:0}
.srv-hint{margin:0;font-size:13px;color:#cbbf9d;text-align:center;line-height:1.45}
.srv-hint b{color:var(--gold-lt)}
.srv-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
.srv-item{--lv:#4ade80;display:grid;grid-template-columns:14px 1fr auto;grid-template-areas:"dot name load" "bar bar lv";align-items:center;gap:4px 10px;
  padding:10px 12px;border:2px solid rgba(184,134,11,.45);border-radius:3px;background:rgba(10,8,26,.7);color:#f1e7cf;cursor:pointer;text-align:left;font:inherit}
.srv-item:hover:not([disabled]){border-color:var(--lv);background:rgba(30,24,60,.9)}
.srv-item.best{border-color:var(--lv)}
.srv-item[disabled]{opacity:.5;cursor:not-allowed}
.srv-item.lv-yellow{--lv:#facc15}.srv-item.lv-red{--lv:#f87171}.srv-item.lv-full{--lv:#ef4444}.srv-item.lv-off{--lv:#6b7280}
.srv-dot{grid-area:dot;width:12px;height:12px;border-radius:50%;background:var(--lv);box-shadow:0 0 8px var(--lv)}
.srv-name{grid-area:name;font-weight:700;font-size:15px}
.srv-name small{font-weight:400;font-size:11px;color:#a8a29e;margin-left:4px}
.srv-load{grid-area:load;font-size:13px;color:#cbbf9d;font-variant-numeric:tabular-nums}
.srv-bar{grid-area:bar;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.srv-bar i{display:block;height:100%;background:var(--lv)}
.srv-lv{grid-area:lv;font-size:12px;color:var(--lv);white-space:nowrap}
.srv-item.best .srv-lv::after{content:" · gợi ý";color:#a8a29e}
.char-srv{margin-top:4px;font-size:11px;color:#a8a29e;display:flex;align-items:center;justify-content:center;gap:5px}
.char-srv i{width:8px;height:8px;border-radius:50%;background:#4ade80;display:inline-block}
.char-srv.lv-yellow i{background:#facc15}.char-srv.lv-red i,.char-srv.lv-full i{background:#f87171}.char-srv.lv-off i{background:#6b7280}

/* ============ Hồng Điệp: hướng dẫn (js/guide.js) ============ */
.guide-panel{width:min(560px,100%);max-height:min(88vh,720px);display:flex;flex-direction:column;gap:10px}
.guide-head{display:flex;align-items:center;gap:12px}
.guide-face{width:64px;height:64px;flex:none;image-rendering:pixelated;border:2px solid #b8860b;border-radius:3px;
  background:radial-gradient(circle at 50% 40%,rgba(244,114,182,.35),rgba(20,18,46,.9))}
.guide-name{font-family:'Handjet',sans-serif;font-weight:900;font-size:24px;color:#f9a8d4;letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.guide-role{font-size:13px;color:#cbbf9d}
.guide-tabs{display:flex;flex-wrap:wrap;gap:6px}
.guide-tab{display:flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid rgba(242,213,114,.35);border-radius:3px;
  background:rgba(255,255,255,.04);color:#cbbf9d;font-family:'Handjet',sans-serif;font-weight:700;font-size:15px;cursor:pointer}
.guide-tab:hover{color:#fff}
.guide-tab.active{background:linear-gradient(180deg,#f6da84,#c9a022);color:#3a2c08;border-color:#b8860b}
.guide-body{flex:1;min-height:0;overflow-y:auto;padding:4px 6px 4px 2px;font-family:'Be Vietnam Pro',sans-serif;font-size:14px;
  line-height:1.6;color:#efe7d0;text-align:left;overscroll-behavior:contain;user-select:text}
.guide-body p{margin:0 0 8px}
.guide-body ul{margin:0 0 8px;padding-left:20px}
.guide-body li{margin:2px 0}
.guide-body b{color:#fde68a}
.guide-panel .panel-actions{margin-top:0}

/* ---------- Cửa Hàng: tab Linh thú (js/mounts.js) ---------- */
.sh-tabs{display:flex;gap:6px;margin-bottom:8px;position:sticky;top:0;z-index:2;background:inherit;padding-bottom:4px}
.sh-tabs .sp-tab{flex:1}
.mt-item{align-items:flex-start}
.mt-pic{width:120px;height:96px;flex:none;image-rendering:pixelated;border-radius:10px;
  background:radial-gradient(ellipse at 50% 80%,rgba(125,211,252,.18),rgba(10,8,26,.55));border:1px solid rgba(242,213,114,.18)}
.mt-sk{font-size:12px;line-height:1.35;margin-top:4px;padding:4px 6px;border-radius:7px;background:rgba(255,255,255,.05)}
.mt-sk b{color:#fde68a}
.mt-sk.locked{opacity:.5}
.mt-tiers{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0 2px}
.mt-tier{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#94a3b8;border:1px solid rgba(148,163,184,.35);background:rgba(15,23,42,.5)}
.mt-tier.past{color:#0f172a;background:var(--tc);border-color:var(--tc);opacity:.6}
.mt-tier.on{color:#0f172a;background:var(--tc);border-color:#fff;box-shadow:0 0 8px var(--tc);opacity:1}
.mt-tiername{font-size:12px;font-weight:700;margin-left:4px}
.mt-tiername small{font-weight:400;color:#94a3b8;margin-left:2px}
.mt-cd{float:right;font-size:11px;color:#93c5fd}
.mt-sklv{font-size:11px;color:#fca5a5}
.mt-item .sh-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#w-ride.active{background:linear-gradient(180deg,#f6da84,#c9a022);color:#3a2c08}
@media (max-width:600px){ .mt-pic{width:84px;height:68px} }

/* ---------- nhiệm vụ tân thủ (js/quest.js) ---------- */
.quest-track{position:absolute;left:14px;top:150px;width:250px;padding:9px 11px;border-radius:10px;pointer-events:auto;z-index:6;
  background:rgba(10,20,16,.82);border:1px solid rgba(52,211,153,.45);box-shadow:0 6px 18px rgba(0,0,0,.35);font-family:'Be Vietnam Pro',sans-serif;color:#e7f5ee}
.quest-track .qt-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#6ee7b7;font-weight:700;letter-spacing:.3px}
.quest-track .qt-head em{font-style:normal;color:#a7f3d0;opacity:.8}
.quest-track .qt-goal{margin-top:5px;font-size:13.5px;font-weight:700;line-height:1.35}
.quest-track .qt-bar{margin-top:6px;height:7px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.quest-track .qt-bar i{display:block;height:100%;background:linear-gradient(90deg,#10b981,#6ee7b7);transition:width .3s}
.quest-track .qt-bar.boss i{background:linear-gradient(90deg,#b91c1c,#f87171)}
.quest-track .qt-num{font-size:11.5px;text-align:right;color:#a7f3d0;margin-top:2px}
.quest-track .qt-rw{margin-top:4px;font-size:11.5px;color:#fde68a}
.quest-track .qt-ward{margin-top:3px;font-size:11px;color:#a7f3d0;opacity:.85}
.quest-track .qt-act{display:flex;gap:6px;align-items:center;margin-top:7px}
.quest-track .qt-btn{flex:1;padding:5px 8px;border-radius:7px;border:1px solid #10b981;background:linear-gradient(180deg,#34d399,#059669);color:#022c22;font-weight:800;font-size:12px;cursor:pointer}
.quest-track .qt-link{margin-left:auto;background:none;border:0;color:#6ee7b7;font-size:11.5px;text-decoration:underline;cursor:pointer}
#world-hud.in-cave .quest-track{top:64px}
@media (max-width:600px){ .quest-track{top:auto;bottom:150px;left:8px;width:200px;padding:7px 9px} .quest-track .qt-goal{font-size:12.5px} .quest-track .qt-ward{display:none} }
.quest-intro{display:flex;align-items:center;justify-content:center;z-index:60;background:rgba(3,8,6,.72)}
.quest-intro.hidden{display:none}
.qi-box{width:min(620px,94vw);max-height:88vh;display:flex;flex-direction:column;border-radius:14px;background:#0f1a15;border:1px solid rgba(52,211,153,.5);box-shadow:0 20px 50px rgba(0,0,0,.55)}
.qi-title{padding:14px 18px 8px;font-family:'Handjet',monospace;font-weight:900;font-size:28px;letter-spacing:2px;color:#6ee7b7;text-align:center}
.qi-body{padding:0 18px;overflow:auto;font-family:'Be Vietnam Pro',sans-serif;font-size:14px;line-height:1.55;color:#e7f5ee}
.qi-body b{color:#fde68a}
.qi-body h4{margin:12px 0 4px;color:#6ee7b7;font-size:14px}
.qi-body ul{margin:0;padding-left:18px}
.qi-ward{margin:8px 0;padding:8px 10px;border-radius:8px;background:rgba(16,185,129,.12);border:1px solid rgba(52,211,153,.35);font-size:13px}
.qi-list{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
.qi-list th,.qi-list td{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.qi-list th{color:#a7f3d0;font-weight:700}
.qi-list tr.cur td{color:#fde68a;font-weight:700}
.qi-list tr.done td{opacity:.5;text-decoration:line-through}
.qi-act{display:flex;gap:10px;justify-content:flex-end;padding:12px 18px 16px}
/* tông môn: chức vị tags and the tông chủ's menu (js/social.js) */
.sp-tag.role.elder{color:#d8b4fe;border-color:rgba(168,85,247,.55);background:rgba(88,28,135,.35)}
.sp-tag.role.law{color:#fca5a5;border-color:rgba(239,68,68,.55);background:rgba(127,29,29,.35)}
.sp-rolemenu{display:flex;flex-wrap:wrap;gap:5px;padding:6px 8px 8px 22px;margin-top:-2px;border-left:2px solid rgba(242,213,114,.35)}
.sp-rolemenu .sp-btn{font-size:12px}

/* ---------- Trang bị (js/gearui.js) ---------- */
.gear-hud-ic{font-size:17px;line-height:1}
.gear-panel{width:470px;background:rgba(14,11,32,.985)}
.gear-panel .sp-body>*{flex-shrink:0}      /* the body scrolls; the bag grid never gets squeezed */
.gr-ic{width:32px;height:32px;image-rendering:pixelated;display:block}
.gr-ic.sm{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:2px}
.gr-ic.big{width:48px;height:48px;flex:none;border-radius:10px;background:rgba(0,0,0,.35);border:2px solid var(--tc,#a8a29e);box-shadow:0 0 12px color-mix(in srgb,var(--tc,#a8a29e) 45%,transparent)}
.gr-top{display:flex;gap:10px;align-items:stretch}
.gr-slots{display:flex;gap:6px}
.gr-slot{width:70px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 3px;border-radius:10px;cursor:pointer;
  border:2px solid var(--tc,rgba(242,213,114,.25));background:rgba(0,0,0,.35);color:#efe7d0}
.gr-slot .gr-ic{width:36px;height:36px}
.gr-slot.sel{box-shadow:0 0 0 2px rgba(253,224,71,.5),0 0 14px rgba(253,224,71,.35)}
.gr-slot.off{filter:grayscale(.8);opacity:.7}
.gr-ph{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font:700 10px 'Be Vietnam Pro',sans-serif;color:#8a8170;border:1px dashed rgba(242,213,114,.25);border-radius:8px;text-align:center;line-height:1.1}
.gr-sl{font:700 10.5px 'Be Vietnam Pro',sans-serif;line-height:1.15;text-align:center;color:#d6ccb0;max-width:64px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gr-stats{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px 8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(242,213,114,.12)}
.gr-st{display:flex;justify-content:space-between;gap:6px;font:12px 'Be Vietnam Pro',sans-serif;color:#8a8170}
.gr-st.on{color:#e7dfc6}
.gr-st.on b{color:#86efac}
.gr-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.gr-tab{padding:3px 8px;border-radius:999px;border:1px solid rgba(242,213,114,.25);background:rgba(255,255,255,.04);color:#cfc5a8;font:700 11.5px 'Be Vietnam Pro',sans-serif;cursor:pointer}
.gr-tab.on{background:linear-gradient(180deg,#f6da84,#c9a022);color:#3a2c08;border-color:#b8860b}
.gr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:212px;overflow-y:auto;padding:2px}
.gr-cell{position:relative;aspect-ratio:1;border-radius:10px;border:2px solid color-mix(in srgb,var(--tc,#a8a29e) 70%,transparent);cursor:pointer;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tc,#a8a29e) 22%,transparent),rgba(0,0,0,.4) 70%);display:flex;align-items:center;justify-content:center;padding:0}
.gr-cell .gr-ic{width:72%;height:72%}
.gr-cell.empty{border:2px dashed rgba(242,213,114,.1);background:rgba(0,0,0,.2);cursor:default}
.gr-cell.sel{box-shadow:0 0 0 2px #fde047,0 0 14px rgba(253,224,71,.4)}
.gr-n{position:absolute;right:3px;bottom:1px;font:900 13px 'Handjet',monospace;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000}
.gr-info{margin-top:4px;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--tc,#f2d572) 35%,transparent)}
.gr-none{font:12.5px 'Be Vietnam Pro',sans-serif;color:#cbd5c0;line-height:1.45}
.gr-ih{display:flex;gap:10px;align-items:center}
.gr-name{font-size:16px;text-shadow:0 1px 0 #000}
.gr-tier{font:700 12px 'Be Vietnam Pro',sans-serif;margin-top:2px}
.gr-lines{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.gr-lines span{padding:2px 8px;border-radius:999px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.35);color:#bbf7d0;font:700 12px 'Be Vietnam Pro',sans-serif}
.gr-req{margin-top:6px;font:700 12px 'Be Vietnam Pro',sans-serif;color:#86efac}
.gr-req.bad{color:#fca5a5}
.gr-desc{font:italic 12px 'Be Vietnam Pro',sans-serif;color:#d6ccb0;margin:6px 0;line-height:1.45}
.gr-forge{margin-top:8px;padding:8px;border-radius:10px;background:rgba(251,146,60,.08);border:1px solid rgba(251,146,60,.3)}
.gr-forge.brew{background:rgba(52,211,153,.07);border-color:rgba(52,211,153,.3)}
.gr-fl{font:12.5px 'Be Vietnam Pro',sans-serif;color:#efe7d0;line-height:1.5}
.gr-fl .gr-name{font-size:12.5px}
.gr-rate{display:inline-block;margin-left:4px;padding:0 6px;border-radius:6px;background:rgba(0,0,0,.35);color:#fde68a;font-weight:800}
.gr-fsub{font:11.5px 'Be Vietnam Pro',sans-serif;color:#a8a08a;margin-top:2px}
.gr-facts{display:flex;gap:6px;justify-content:flex-end;margin-top:6px}
.sp-btn:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:600px){
  .gear-panel{left:10px;right:10px;transform:none;width:auto;top:56px;max-height:calc(100vh - 150px)}
  .gr-top{flex-direction:column}
  .gr-slots{justify-content:space-between}
  .gr-slot{flex:1;width:auto}
}
/* đan dược quick button: left of Tọa Trấn; the dark wedge = time until the next pill */
.pill-btn{position:absolute;right:238px;bottom:12px;width:44px;height:44px;border-radius:50%;pointer-events:auto;cursor:pointer;padding:0;
  border:2px solid rgba(52,211,153,.6);background:rgba(14,11,32,.72);box-shadow:0 3px 10px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;touch-action:none;transition:transform .08s;--cd:0}
.pill-btn img{width:30px;height:30px;image-rendering:pixelated}
.pill-btn:active{transform:scale(.92)}
.pill-btn::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.65) calc(var(--cd) * 360deg),transparent 0);pointer-events:none}
.pill-n{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#065f46;border:1px solid #34d399;
  color:#fff;font:900 11px/16px 'Handjet',monospace;text-align:center;z-index:1}
#w-cuc:not(.hidden) ~ .pill-btn{right:314px}
@media (max-width:600px){ .pill-btn{right:192px;bottom:6px;width:40px;height:40px} #w-cuc:not(.hidden) ~ .pill-btn{right:268px} }
.compact .pill-btn{right:22px;bottom:170px;width:38px;height:38px}
.compact .pill-btn img{width:26px;height:26px}
/* đồ giám: every item, by phẩm (js/gearui.js) */
.gr-grid.codex{display:block;max-height:300px}
.gr-cx-h{font:800 13px 'Be Vietnam Pro',sans-serif;margin:8px 2px 4px;text-shadow:0 1px 0 #000}
.gr-cx-h span{font-weight:600;font-size:11.5px;color:#a8a08a}
.gr-cx-row{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.gr-cell.dim{filter:grayscale(.85) brightness(.55);border-style:dashed}
.gr-cell.dim.sel{filter:grayscale(.3) brightness(.85)}
/* Vạn Hồn Phiên (js/gearui.js, js/honphien.js) */
.hon-box{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:linear-gradient(180deg,rgba(30,16,48,.8),rgba(10,8,18,.8));border:1px solid rgba(167,139,250,.3)}
.hon-box.on{border-color:rgba(239,68,68,.55);box-shadow:0 0 14px rgba(239,68,68,.25) inset}
.hon-box.none{opacity:.9}
.hon-ic{width:52px;height:52px;border-radius:10px;image-rendering:pixelated;flex:none;border:1px solid rgba(255,255,255,.12)}
.hon-ic.big{width:64px;height:64px}
.hon-mid{flex:1;min-width:0}
.hon-box b{font:800 13.5px 'Be Vietnam Pro',sans-serif;color:#e9d5ff}
.hon-sub{font:11.5px 'Be Vietnam Pro',sans-serif;color:#b8aecb;margin-top:2px}
.hon-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);margin-top:5px;overflow:hidden}
.hon-bar i{display:block;height:100%;background:linear-gradient(90deg,#7c3aed,#ef4444,#fbbf24)}
.hon-lvs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin:8px 0}
.hon-lv{display:flex;gap:6px;align-items:center;padding:3px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid rgba(167,139,250,.15)}
.hon-lv img{width:30px;height:30px;border-radius:6px;image-rendering:pixelated}
.hon-lv b{display:block;font:800 11.5px 'Be Vietnam Pro',sans-serif;color:#ddd6fe}
.hon-lv span{display:block;font:11px 'Be Vietnam Pro',sans-serif;color:#a8a08a}
.hon-lv.cur{border-color:#f87171;box-shadow:0 0 10px rgba(248,113,113,.3)}
.hon-lv.done{opacity:.6}
.hon-own{font:800 13px 'Be Vietnam Pro',sans-serif;color:#86efac}
@media (max-width:600px){ .hon-lvs{grid-template-columns:1fr 1fr} .hon-lv img{width:24px;height:24px} }
/* Cài đặt → Phím tắt (js/keys.js) */
.kb-list{max-width:560px;max-height:min(56vh,520px);overflow-y:auto;padding:8px 10px;border-radius:12px;background:rgba(14,11,32,.88);border:1px solid rgba(242,213,114,.2);text-align:left}
.kb-note{font:12.5px 'Be Vietnam Pro',sans-serif;color:#cbd5c0;line-height:1.45;margin-bottom:6px}
.kb-group{font:800 13px 'Be Vietnam Pro',sans-serif;color:#f2d572;margin:12px 0 4px;letter-spacing:.02em}
.kb-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.035);margin-bottom:3px}
.kb-row.changed{background:rgba(242,213,114,.09);box-shadow:inset 3px 0 0 #f2d572}
.kb-name{flex:1;min-width:0;text-align:left;font:13px 'Be Vietnam Pro',sans-serif;color:#efe7d0}
.kb-keys{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.kb-key{min-width:34px;padding:3px 8px;border-radius:6px;border:1px solid rgba(242,213,114,.45);border-bottom-width:3px;background:#1d1830;color:#fde68a;
  font:800 13px 'Handjet',monospace;cursor:pointer;text-align:center}
.kb-key:hover{border-color:#ef4444;color:#fca5a5;text-decoration:line-through}
.kb-key.cap{border-color:#38bdf8;color:#7dd3fc;animation:kbBlink 1s ease-in-out infinite;cursor:default;text-decoration:none}
@keyframes kbBlink{50%{opacity:.45}}
.kb-add,.kb-undo{width:28px;height:28px;border-radius:6px;border:1px dashed rgba(242,213,114,.4);background:transparent;color:#f2d572;font-size:15px;cursor:pointer}
.kb-undo{border-style:solid;color:#a8a08a}
.kb-resetall{width:100%;margin-top:10px}
/* Bảo Hộ Đan (js/bag.js) */
.boon.baoho{color:#6ee7b7;border-color:rgba(16,185,129,.7)}
.baoho-on{color:#6ee7b7}
/* ☰ (index.html #w-more): on phones the less-used top-bar buttons fold into a menu with names, so the left column
   (cảnh giới, linh thạch, tiên ngọc, hành tinh) keeps its room; on a big screen the menu is just part of the row */
.more-btn{display:none}
.w-more-menu{display:contents}
.more-lbl{display:none}
.compact .world-top-btns{position:relative}
.compact .more-btn{display:inline-flex;align-items:center;justify-content:center;position:relative}
.compact .more-btn .more-ic{font-size:16px;line-height:1}
.compact .more-btn.active{background:rgba(242,213,114,.25);border-color:#f2d572}
.compact .w-more-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:45;flex-direction:column;gap:4px;padding:6px;min-width:200px;
  border-radius:12px;background:rgba(14,11,32,.97);border:1px solid var(--border);box-shadow:0 10px 26px rgba(0,0,0,.55);pointer-events:auto}
.compact .w-more-menu.open{display:flex}
.compact .world-top .w-more-menu .icon-btn{position:relative;width:100%;height:38px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 12px;font-size:14px}
.compact .w-more-menu .icon-btn .hn{font-size:15px;width:18px;text-align:center}
.compact .w-more-menu .more-lbl{display:inline;font:700 13px 'Be Vietnam Pro',sans-serif;color:#efe7d0}
.compact .world-top .w-more-menu .badge{position:static;margin-left:auto}
/* the left column on phones: one line for cảnh giới + linh thạch + tiên ngọc, one for the hành tinh, never under the HP bar */
.compact .world-me{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;line-height:1.25}
.compact .world-me #w-realm{overflow:hidden;text-overflow:ellipsis;min-width:0}
.compact .world-me{column-gap:4px}
.compact .world-me > .hn-crown{display:none}                 /* the room goes to the cảnh giới name */
.compact .world-mid{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.compact .world-top .w-more-menu .icon-btn{background:rgba(255,255,255,.05);border:1px solid rgba(242,213,114,.28);color:#f2d572;white-space:nowrap}
.compact .world-top .w-more-menu .icon-btn:active,.compact .world-top .w-more-menu .icon-btn.active{background:rgba(242,213,114,.2)}
.compact .w-more-menu{min-width:220px}
.compact .w-more-menu .more-lbl{color:#f3ead2}
.world-top .icon-btn .ic-ngoc{width:18px;height:18px;vertical-align:middle}
/* nạp tiên ngọc opened in the world (js/topup.js show(true)): a dialog over the game instead of the menu page */
#topup-screen.in-game{background:rgba(6,5,18,.84);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:55}
#topup-screen.in-game .menu-particles{display:none}
.topup-x{display:none}
#topup-screen.in-game .topup-x{display:flex;align-items:center;justify-content:center;position:fixed;top:10px;right:12px;z-index:5;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(242,213,114,.5);background:rgba(14,11,32,.92);color:#f2d572;font-size:18px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5)}
/* combo ưu đãi (js/combo.js): the glowing button next to Chat and its panel */
.combo-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;width:auto!important;padding:0 10px;
  background:linear-gradient(180deg,#fde68a,#f59e0b 55%,#b45309)!important;border:1px solid #fbbf24!important;color:#3b1d02!important}
.combo-btn .combo-ic{font-size:17px;line-height:1}
.combo-btn .combo-lbl{font:900 13px 'Be Vietnam Pro',sans-serif;letter-spacing:.02em}
.combo-btn.glow{animation:comboGlow 1.6s ease-in-out infinite}
.combo-btn.glow .combo-ic{animation:comboWiggle 2.4s ease-in-out infinite}
@keyframes comboGlow{0%,100%{box-shadow:0 0 6px rgba(251,191,36,.55),0 0 0 0 rgba(251,191,36,.5)}50%{box-shadow:0 0 16px rgba(251,191,36,.95),0 0 0 4px rgba(251,191,36,.18)}}
@keyframes comboWiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}95%{transform:rotate(-6deg)}}
/* phones: Ưu đãi / Hoang Thần / VIP are icon-only squares like Chat — with their labels the buttons took the whole
   top bar and squeezed cảnh giới / linh thạch / tiên ngọc to nothing */
.compact .world-top .combo-btn{padding:0;width:30px!important}
.compact .combo-btn .combo-lbl{display:none}
.combo-btn .combo-ic img{width:20px;height:20px;image-rendering:pixelated;display:block}
.compact .combo-btn .combo-ic img{width:18px;height:18px}
.combo-panel{width:470px;background:rgba(14,11,32,.985)}
/* ---- VIP (js/vipui.js) ---- */
.vip-btn{border-color:rgba(250,204,21,.6)!important;color:#fde68a!important}
.vip-btn.glow{animation:comboGlow 1.6s ease-in-out infinite}
.vip-panel{width:480px;background:rgba(14,11,32,.985);border-color:rgba(250,204,21,.45)}
.vip-panel .sp-body>*{flex-shrink:0}
.vip-head{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;background:radial-gradient(circle at 0 0,rgba(250,204,21,.18),rgba(255,255,255,.03) 70%);border:1px solid rgba(250,204,21,.3)}
.vip-big{width:116px;image-rendering:auto}
.vip-none{font-weight:900;color:#94a3b8;width:96px;text-align:center}
.vip-hmain{flex:1;min-width:0;font:13px 'Be Vietnam Pro',sans-serif;color:#e7dfc6}
.vip-hmain b{color:#fde68a}
.vip-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0 3px}
.vip-bar i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#fde047)}
.vip-sub{font:12px 'Be Vietnam Pro',sans-serif;color:#a8a08a}
.vip-perks{display:flex;flex-wrap:wrap;gap:2px 10px;font:12px 'Be Vietnam Pro',sans-serif;color:#86efac;margin-top:3px}
.vip-daily{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;background:rgba(250,204,21,.08);border:1px solid rgba(250,204,21,.3);font:13px 'Be Vietnam Pro',sans-serif;color:#efe7d0}
.vip-done{font:12px 'Be Vietnam Pro',sans-serif;color:#86efac;white-space:nowrap}
.vip-acts{display:flex;justify-content:flex-end}
.vip-sec{margin-top:6px;font-size:13px;font-weight:700;letter-spacing:.04em;color:#fde68a}
.vip-lv{display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);opacity:.75}
.vip-lv.on{opacity:1}
.vip-lv.cur{border-color:#facc15;background:rgba(250,204,21,.08)}
.vip-ic{width:70px;flex:0 0 70px}
.vip-lmain{flex:1;min-width:0}
.vip-lh{font:700 13px 'Be Vietnam Pro',sans-serif;color:#efe7d0}
.vip-lact{flex:0 0 auto}
.vip-note{font:12px 'Be Vietnam Pro',sans-serif;color:#8f8568;margin-top:6px}
.vip-price{font:12px 'Be Vietnam Pro',sans-serif;color:#cbbf9d;text-align:right}
.vip-was{color:#8f8568}
.vip-now{color:#fde68a}
.vip-off{color:#86efac;font-weight:700}
@media (max-width:520px){ .vip-panel{width:calc(100% - 16px)} }
/* ---- Tiên Bảo (js/tienbao.js, js/gearui.js cường hóa) ---- */
.shop-panel .sp-body>.tb-head,.shop-panel .sp-body>.tb-sec,.shop-panel .sp-body>.tb-enh,.shop-panel .sp-body>.tb-item{flex-shrink:0}   /* in the scrolling column: never squashed */
.shop-panel .sh-tabs{background:rgba(14,11,32,.98);top:-10px;margin:-10px -10px 8px;padding:10px 10px 6px}                  /* sticky tabs: opaque over what scrolls under */
.tb-head{font:12px 'Be Vietnam Pro',sans-serif;color:#d8b4fe;padding:6px 8px;border-radius:8px;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3);margin-bottom:6px}
.tb-sec{margin:10px 0 4px;font-size:13px;font-weight:700;letter-spacing:.04em;color:#e9d5ff}
.tb-item{border-color:color-mix(in srgb,var(--tc,#a855f7) 45%,transparent)}
.tb-ic .gr-ic.big{width:44px;height:44px}
.tb-stats{display:flex;flex-wrap:wrap;gap:3px 10px;font:12px 'Be Vietnam Pro',sans-serif;color:#86efac;margin:2px 0}
.tb-bad{color:#fca5a5}
.tb-enh{display:grid;gap:1px;margin:4px 0 8px;font:12px 'Be Vietnam Pro',sans-serif;border-radius:8px;overflow:hidden;border:1px solid rgba(168,85,247,.3)}
.tb-enh-r{display:grid;grid-template-columns:44px 40px 1fr 1fr 64px;gap:4px;padding:3px 8px;background:rgba(255,255,255,.03);color:#e7dfc6}
.tb-enh-h{background:rgba(168,85,247,.18);color:#e9d5ff;font-weight:700}
.gr-slot{position:relative}
/* five slots (Tiên Bảo): the slots on one row, the stats under them in two columns */
.gr-top{flex-direction:column}
.gr-slots{justify-content:space-between}
.gr-slot{flex:1;width:auto;min-width:0}
.gr-sl{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gr-stats{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.gr-en{position:absolute;top:2px;right:3px;font:900 11px 'Be Vietnam Pro',sans-serif;color:#fde68a;text-shadow:0 0 3px #000,0 0 6px #b45309}
.gr-tb{position:absolute;top:1px;left:3px;font-size:10px}
.gr-forge.enh{border-color:rgba(168,85,247,.45);background:rgba(168,85,247,.08)}
.gr-enlv{color:#fde68a}
.gr-bad{color:#fca5a5}
.gr-prot{display:flex;align-items:center;gap:6px;font:12px 'Be Vietnam Pro',sans-serif;color:#e7dfc6;margin:4px 0;cursor:pointer}
/* ---- sự kiện Cổ Thần Chi Địa (js/cothanui.js) ---- */
.ct-btn{border-color:rgba(45,212,191,.55)!important;color:#99f6e4!important}
.ct-btn.glow{animation:ctGlow 1.4s ease-in-out infinite}
@keyframes ctGlow{0%,100%{box-shadow:0 0 0 rgba(45,212,191,0)}50%{box-shadow:0 0 14px rgba(45,212,191,.85)}}
.ct-panel{width:480px;background:rgba(12,10,22,.985);border-color:rgba(45,212,191,.4)}
.ct-panel .sp-body>*{flex-shrink:0}
.ct-tabs{padding:8px 10px 0;flex:0 0 auto}
.ct-tab{font-size:13px}
.ct-ic{width:20px;height:20px;image-rendering:pixelated;vertical-align:middle}
.ct-ic.big{width:36px;height:36px;flex:0 0 36px;padding:3px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid var(--rc,#475569)}
.ct-intro{font:13px/1.5 'Be Vietnam Pro',sans-serif;color:#e7dfc6}
.ct-intro p{margin:0 0 6px}
.ct-closed{padding:6px 8px;margin-bottom:6px;border-radius:8px;background:rgba(239,68,68,.15);color:#fca5a5;font-weight:700;text-align:center}
.ct-fee{padding:6px 8px;margin-top:4px;border-radius:8px;background:rgba(45,212,191,.08);border:1px solid rgba(45,212,191,.2)}
.ct-fee b{color:#fde68a}
.ct-levels{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ct-lv{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.ct-lv[data-ctlv]{cursor:pointer}
.ct-lv[data-ctlv]:hover{border-color:rgba(45,212,191,.5)}
.ct-lv.sel{border-color:#2dd4bf;background:rgba(45,212,191,.12)}
.ct-lv.locked{opacity:.6}
.ct-lv-img{width:64px;height:64px;image-rendering:pixelated;flex:0 0 64px;object-fit:contain}
.ct-lv-main{flex:1;min-width:0}
.ct-lv-name{font-weight:700;color:#fde68a;font-size:15px}
.ct-pick{font-size:12px;color:#5eead4}
.ct-lv-req{font:12px 'Be Vietnam Pro',sans-serif;color:#a5b4fc}
.ct-lv-req.no{color:#fca5a5}
.ct-lv-drops{display:flex;gap:3px;align-items:center;margin-top:3px;color:#fde68a}
.ct-sec{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:#5eead4;text-transform:uppercase}
.ct-row{display:flex;gap:6px;align-items:center;margin-top:4px}
.ct-row .sh-buy,.ct-row .ct-go{flex:1}
.ct-go{padding:9px 12px;font-size:15px;font-weight:900;cursor:pointer}
.ct-go:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.ct-hint{font:12px 'Be Vietnam Pro',sans-serif;color:#8f8568}
.ct-low{color:#fca5a5!important}
.ct-pending{opacity:.7}
.ct-shop{display:flex;gap:8px;align-items:center;padding:8px;border-radius:10px;background:rgba(255,255,255,.04)}
.ct-shop-main{flex:1;min-width:0}
.ct-shop-name{font-weight:700;color:#efe7d0}
.ct-shop-desc{font:12px 'Be Vietnam Pro',sans-serif;color:#a8a08a}
.ct-shop-buy{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.ct-shop-buy .sp-btn{min-width:70px}
.ct-bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.ct-bag-it{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);text-align:center}
.ct-bag-it b{color:#fde68a}
.ct-bag-it span{font:11px 'Be Vietnam Pro',sans-serif;color:#cbbf9d}
/* one slim line under the boss bar, so it never hides the Giao Long */
.ct-hud{position:absolute;top:calc(100px + var(--ann-h,0px));left:50%;transform:translateX(-50%);z-index:25;pointer-events:auto;display:flex;flex-direction:row;align-items:center;gap:10px;
  padding:3px 4px 3px 10px;border-radius:10px;background:rgba(12,10,22,.78);border:1px solid rgba(45,212,191,.4);color:#efe7d0;font:12px 'Be Vietnam Pro',sans-serif;max-width:calc(100% - 24px);white-space:nowrap}
.ct-hud-info b{color:#5eead4}
.ct-time{font-weight:700;color:#fde68a}
.ct-time.low{color:#f87171;animation:comboGlow 1s infinite}
.ct-guards{font-weight:700;color:#fca5a5}
.ct-guards.awake{color:#5eead4;animation:comboGlow 1.2s infinite}
.ct-hud-mem{display:flex;gap:2px 8px;font-size:12px;min-width:0;overflow:hidden}
.ct-mem{color:#86efac}
.ct-mem.dead{color:#fca5a5}
.ct-mem.away{color:#94a3b8}
.ct-hud-btns{display:flex;gap:6px}
.ct-revive,.ct-exit{padding:4px 10px;border-radius:8px;font:700 12px 'Be Vietnam Pro',sans-serif;cursor:pointer;border:1px solid}
.ct-revive{background:linear-gradient(180deg,#fde68a,#d97706);color:#3a2c08;border-color:#b45309;animation:comboGlow 1.2s infinite}
.ct-revive .ic-ngoc{width:14px;height:14px;vertical-align:-2px}
.ct-exit{background:rgba(255,255,255,.06);color:#e7dfc6;border-color:rgba(255,255,255,.2)}
.ct-invite{position:absolute;top:120px;left:50%;transform:translateX(-50%);z-index:40;pointer-events:auto;width:320px;max-width:calc(100% - 24px);padding:12px;border-radius:12px;
  background:rgba(12,10,22,.96);border:1px solid #2dd4bf;color:#efe7d0;font:14px 'Be Vietnam Pro',sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.6);animation:fadeIn .2s ease}
.ct-invite .ct-row .sp-btn{flex:1}
.ct-reward{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:45;pointer-events:auto;width:400px;max-width:calc(100% - 24px);padding:16px;border-radius:14px;
  background:radial-gradient(circle at 50% 0,#12403c,#0c0a16 62%);border:1px solid #2dd4bf;color:#efe7d0;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.7);animation:fadeIn .25s ease}
.ct-reward>.sp-btn{margin-top:10px;width:100%}
.ct-rw-title{font:900 20px 'Be Vietnam Pro',sans-serif;color:#fde68a;letter-spacing:.03em}
.ct-rw-sub{font-size:13px;color:#5eead4;margin-bottom:8px}
.ct-rw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
.ct-rw-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--rc);font:12px 'Be Vietnam Pro',sans-serif}
.ct-rw-item b{color:#fde68a;font-size:14px}
.ct-rw-foot{display:flex;justify-content:center;gap:14px;margin-top:8px;font-weight:700;color:#fde68a}
.ct-rw-note{margin-top:6px;font-size:12px;color:#a8a08a}
.compact .ct-hud{top:calc(116px + var(--ann-h,0px));left:8px;transform:none;font-size:11px;gap:6px}
.compact .ct-mem-n{display:none}                                /* phones: one dot per member (name on hover / in the panel) */
@media (max-width:520px){ .ct-panel{width:calc(100% - 16px)} }
.combo-panel .sp-body>*{flex-shrink:0}
@media (max-width:600px){ .combo-panel{left:10px;right:10px;transform:none;width:auto;top:56px;max-height:calc(100vh - 150px)} }
.cb-card{position:relative;padding:12px;border-radius:14px;background:linear-gradient(180deg,rgba(120,53,15,.35),rgba(20,14,36,.85));border:1px solid rgba(251,191,36,.45);margin-bottom:8px}
.cb-card.done{opacity:.6;border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.03)}
.cb-tag{position:absolute;top:-8px;right:12px;padding:2px 10px;border-radius:999px;background:linear-gradient(180deg,#ef4444,#b91c1c);color:#fff;font:900 11px 'Be Vietnam Pro',sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.cb-name{font:900 16px 'Be Vietnam Pro',sans-serif;color:#fde68a;text-shadow:0 1px 0 #000}
.cb-desc{font:12.5px 'Be Vietnam Pro',sans-serif;color:#e7dfc6;margin-top:3px;line-height:1.4}
.cb-items{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin:8px 0}
.cb-item{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:8px;background:rgba(0,0,0,.3);min-width:0}
.cb-ic{width:26px;height:26px;image-rendering:pixelated;flex:none;border-radius:6px;text-align:center}
.cb-in{flex:1;min-width:0;font:700 12px 'Be Vietnam Pro',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-n{font:900 13px 'Handjet',monospace;color:#fff}
.cb-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.cb-price{font:13px 'Be Vietnam Pro',sans-serif;color:#e7dfc6}
.cb-price b{font-size:17px;color:#fde68a}
.cb-once{font:11.5px 'Be Vietnam Pro',sans-serif;color:#a8a08a}
.cb-act{margin-top:8px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cb-done{font:900 14px 'Be Vietnam Pro',sans-serif;color:#86efac}
@media (max-width:380px){ .cb-items{grid-template-columns:1fr} }

/* ---------- hộp xác nhận / thông báo của game (js/dialog.js), thay confirm() / alert() của trình duyệt ---------- */
.tn-dialog{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(ellipse at center,rgba(20,14,40,.55),rgba(4,3,12,.78));backdrop-filter:blur(3px);
  animation:fadeIn .18s ease}
.tn-dialog-box{width:min(440px,100%);max-height:calc(100% - 16px);overflow-y:auto;display:flex;flex-direction:column;
  align-items:stretch;gap:10px;padding:22px 22px 18px;position:relative;animation:tnDialogIn .22s cubic-bezier(.2,1.3,.4,1)}
.tn-dialog-box::before{content:'';position:absolute;left:14px;right:14px;top:6px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,216,133,.55),transparent)}
@keyframes tnDialogIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.tn-dialog-icon{font-size:30px;line-height:1;text-align:center;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.tn-dialog-icon:empty{display:none}
.tn-dialog-title{margin:0;font-size:clamp(22px,5vw,28px);letter-spacing:.04em}
.tn-dialog-msg{font:400 15px/1.55 'Be Vietnam Pro',system-ui,sans-serif;color:#efe7d0;text-align:center;
  white-space:pre-line;overflow-wrap:anywhere;user-select:text}
.tn-dialog-msg p{margin:0}
.tn-dialog-msg p+p{margin-top:10px}
.tn-dialog-actions{margin-top:8px}
.tn-dialog-actions .btn{min-width:120px;padding:10px 20px;border-radius:6px}
.tn-dialog-actions .btn:focus-visible{outline:2px solid #fde68a;outline-offset:2px}
@media (max-width:420px){ .tn-dialog-actions{flex-direction:column-reverse} .tn-dialog-actions .btn{width:100%} }