: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:70px;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}

/* ---------- 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 & Bang hội ---------- */
.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 / Bang Hội / Hảo Hữu ---------- */
.icon-btn.social-btn.active{background:linear-gradient(180deg,#f6da84,#c9a022);color:#3a2c08}
.killfeed{top:56px;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} }

/* ---------- 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}
.sh-max{font-size:13px;font-weight:700;color:#86efac}
@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}
.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:74px;left:8px;transform:none;width:calc(100% - 120px)}
.compact .boss-name{font-size:12px}
.compact .boss-hp{height:10px}
.compact .killfeed{top:106px;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}
/* 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:92px}
.compact .killfeed{top:124px}
/* 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{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}