:root{
    --deep:#070a09;
    --panel:#141C1D;
    --panel-line:#2A3B38;
    --ink:#EAF2EE;
    --ink-dim:#93A6A0;
    --ink-faint:#5C6E68;
    --gold:#E3B23C;
    --gold-dim:#8a6f2f;
    --danger:#e6534d;
    --good:#4ade80;
    --glass:rgba(20,28,29,.82);
    --sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --mono:'IBM Plex Mono', ui-monospace, monospace;
    --serif:'Fraunces', Georgia, serif;
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body{ height:100%; }
  body{
    margin:0; background:var(--deep); color:var(--ink);
    font-family:var(--sans); overflow:hidden;
    height:100dvh; user-select:none; -webkit-user-select:none;
    overscroll-behavior:none;
  }
  button{ font-family:inherit; }
  .screen{ position:fixed; inset:0; display:none; }
  .screen.active{ display:block; }

  /* ============ GAME CANVAS ============ */
  #game-wrap{ position:fixed; inset:0; }
  #game{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  /* ============ HUD ============ */
  #hud{ position:fixed; top:0; left:0; right:0; z-index:400;
        padding:calc(10px + env(safe-area-inset-top)) 12px 8px; pointer-events:none; }
  #hud-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .glass{ background:var(--glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
          border:1px solid var(--panel-line); border-radius:12px; }

  #provinceInfo{ padding:7px 12px; min-width:118px; }
  #provinceInfo .eyebrow{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
  #provinceInfo h2{ font-family:var(--serif); font-weight:600; font-size:15px; margin:1px 0 0; line-height:1.1; }
  #provinceInfo .biome{ font-family:var(--mono); font-size:8.5px; color:var(--gold-dim); margin-top:2px; letter-spacing:.04em; }

  #scoreBox{ padding:6px 14px; text-align:center; min-width:112px; }
  #scoreBox .sv{ font-family:var(--serif); font-weight:700; font-size:20px; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; }
  #scoreBox .sl{ font-family:var(--mono); font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
  #comboRow{ display:flex; align-items:center; gap:5px; margin-top:4px; height:9px; }
  #comboMult{ font-family:var(--mono); font-weight:700; font-size:9.5px; color:var(--gold); min-width:20px; opacity:0; transition:opacity .2s; }
  #comboMult.on{ opacity:1; }
  #comboBar{ flex:1; height:3px; border-radius:2px; background:#26332f; overflow:hidden; }
  #comboFill{ height:100%; width:0%; background:linear-gradient(90deg,var(--gold-dim),var(--gold)); transition:width .08s linear; }

  #hudRight{ display:flex; align-items:center; gap:6px; }
  #livesWrap{ display:flex; gap:4px; padding:8px 9px; }
  .life-icon{ width:15px; height:15px; transition:opacity .3s, transform .3s; }
  .life-icon.lost{ opacity:.14; transform:scale(.68) rotate(22deg); }
  .hud-btn{
    background:var(--glass); backdrop-filter:blur(8px); border:1px solid var(--panel-line);
    color:var(--ink); border-radius:12px; width:38px; height:38px; font-size:15px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; pointer-events:auto;
    transition:border-color .2s, color .2s;
  }
  .hud-btn:hover{ border-color:var(--gold); color:var(--gold); }
  .hud-btn.off{ color:var(--ink-faint); }

  #hudSub{ margin-top:7px; display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
  #progressDots{ display:flex; gap:4px; padding:8px 10px; align-items:center; }
  .pdot{ width:7px; height:7px; border-radius:50%; background:#33453f; transition:background .3s, transform .3s; }
  .pdot.passed{ background:var(--gold-dim); }
  .pdot.current{ background:var(--gold); transform:scale(1.45); box-shadow:0 0 8px rgba(227,178,60,.85); }

  #backpackStrip{ display:flex; gap:4px; overflow-x:auto; padding:7px 9px; pointer-events:auto;
                  max-width:min(92vw,520px); scrollbar-width:none; }
  #backpackStrip::-webkit-scrollbar{ display:none; }
  .bp-slot{ flex:0 0 auto; width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center;
            opacity:.26; filter:grayscale(1); transition:opacity .35s, filter .35s, transform .35s;
            background:rgba(255,255,255,.03); border:1px solid var(--panel-line); }
  .bp-slot.unlocked{ opacity:1; filter:none; }
  .bp-slot.pulse{ animation:bpPop .5s cubic-bezier(.34,1.56,.64,1); }
  .bp-slot svg{ width:15px; height:15px; }
  .bp-slot.unlocked svg{ filter:drop-shadow(0 0 6px var(--gglow)); }
  @keyframes bpPop{ 0%{transform:scale(.3) rotate(-20deg)} 60%{transform:scale(1.42)} 100%{transform:scale(1)} }

  #powerRow{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(96px + env(safe-area-inset-bottom));
             z-index:400; display:flex; gap:7px; pointer-events:none; }
  .pw-pill{ display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
            background:rgba(20,28,29,.9); border:1px solid var(--gold); font-family:var(--mono);
            font-size:10px; font-weight:600; color:var(--gold); letter-spacing:.05em;
            box-shadow:0 0 16px rgba(227,178,60,.28); animation:pwIn .3s cubic-bezier(.34,1.56,.64,1); }
  .pw-pill .bar{ width:34px; height:3px; border-radius:2px; background:rgba(227,178,60,.25); overflow:hidden; }
  .pw-pill .bar i{ display:block; height:100%; background:var(--gold); }
  @keyframes pwIn{ from{transform:translateY(10px) scale(.8); opacity:0} to{transform:none; opacity:1} }

  /* ============ TOAST (body-level: hiện được trên MỌI màn) ============ */
  #toast{
    position:fixed; top:24%; left:50%; transform:translate(-50%,-8px); z-index:2600;
    font-family:var(--serif); font-weight:600; font-style:italic; font-size:clamp(19px,4vw,29px);
    color:var(--gold); text-shadow:0 4px 22px rgba(0,0,0,.8); opacity:0; pointer-events:none;
    transition:opacity .35s, transform .35s; text-align:center; max-width:88vw;
  }
  #toast.show{ opacity:1; transform:translate(-50%,0); }
  #hit-flash{ position:fixed; inset:0; z-index:480; background:rgba(230,83,77,.3); opacity:0; pointer-events:none; transition:opacity .1s; }
  #hit-flash.show{ opacity:1; }

  /* ============ TOUCH ============ */
  #touch-controls{ position:fixed; left:0; right:0; bottom:0; z-index:400; display:flex; justify-content:center;
                   gap:12px; padding:14px 14px calc(14px + env(safe-area-inset-bottom)); pointer-events:none; }
  #touch-controls button{
    width:54px; height:54px; border-radius:50%; background:var(--glass); backdrop-filter:blur(8px);
    border:1px solid var(--panel-line); color:var(--ink); font-size:19px; display:flex; align-items:center;
    justify-content:center; cursor:pointer; touch-action:none; pointer-events:auto;
    transition:background .1s, color .1s, transform .1s;
  }
  #touch-controls button.hot{ background:var(--gold); color:#1a1305; border-color:var(--gold); transform:scale(.92); }
  body.desktop #touch-controls{ display:none; }

  /* ============ MINIMAP ============ */
  #minimap{
    position:fixed; top:50%; right:8px; transform:translateY(-50%); z-index:390;
    width:112px; background:var(--glass); backdrop-filter:blur(8px);
    border:1px solid var(--panel-line); border-radius:14px; padding:9px 6px 10px;
    display:flex; flex-direction:column; align-items:center; gap:3px; pointer-events:none;
  }
  #minimap .mm-label{ font-family:var(--mono); font-size:7.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
  #minimap svg{ width:100%; height:auto; overflow:visible; }
  .mm-dot{ transition:fill .3s; fill:#3a4c46; }
  .mm-dot.passed{ fill:var(--gold-dim); }
  .mm-dot.current{ fill:var(--gold); }
  .mm-dot-minor{ fill:#2f3f3a; }
  .mm-island-dot{ fill:#2E4A44; }
  #mmMarker{ filter:drop-shadow(0 0 5px rgba(227,178,60,.9)); }
  #minimap .mm-cur-name{ font-family:var(--serif); font-weight:600; font-size:10.5px; color:var(--gold); text-align:center; line-height:1.25; min-height:26px; margin-top:2px; }
  @media (max-width:760px){
    #minimap{ width:62px; padding:7px 4px 8px; right:5px; }
    #minimap .mm-cur-name{ font-size:7.5px; min-height:16px; }
    #minimap .mm-label{ font-size:6.5px; }
  }
  @media (max-height:520px){ #minimap{ display:none; } }

  /* ============ OVERLAYS ============ */
  .overlay{ position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center;
            padding:20px; opacity:0; pointer-events:none; background:rgba(4,7,6,.86);
            backdrop-filter:blur(3px); transition:opacity .4s; }
  .overlay.show{ opacity:1; pointer-events:auto; }
  .o-card{ max-width:500px; width:100%; background:var(--panel); border:1px solid var(--panel-line);
           border-radius:22px; padding:26px 22px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.65);
           max-height:88dvh; overflow-y:auto; }
  .o-card .eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px; }
  .o-card h1{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(21px,4vw,29px); margin:0 0 10px; line-height:1.25; }
  .o-card p{ color:var(--ink-dim); font-size:12.5px; line-height:1.6; margin:0 0 14px; }
  .o-card p.intro-text{ text-align:left; color:var(--ink-dim); font-size:12px; line-height:1.65; background:rgba(227,178,60,.06);
                         border:1px solid var(--panel-line); border-radius:10px; padding:11px 13px; margin:0 0 14px; }
  .steps{ display:flex; flex-direction:column; gap:5px; font-family:var(--mono); font-size:11.5px; color:var(--ink-dim); margin-bottom:16px; text-align:left; }
  .steps b{ color:var(--gold); }
  .controls-legend{ display:flex; justify-content:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
  .controls-legend div{ text-align:center; }
  .controls-legend kbd{ display:block; font-family:var(--mono); font-size:12px; background:#0c1412; border:1px solid var(--panel-line);
                        border-radius:8px; padding:6px 9px; margin-bottom:4px; color:var(--gold); }
  .controls-legend span{ font-size:9px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
  .o-stats{ display:flex; justify-content:center; gap:18px; margin-bottom:16px; flex-wrap:wrap; }
  .o-stats div{ text-align:center; }
  .o-stats b{ font-family:var(--serif); font-size:21px; display:block; color:var(--gold); font-variant-numeric:tabular-nums; }
  /* Chỉ nhắm span nhãn (con trực tiếp) — span nằm trong <b> là phần số, giữ nguyên cỡ chữ */
  .o-stats > div > span{ font-family:var(--mono); font-size:8.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
  .o-gemgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:7px; margin-bottom:16px; }
  .o-gemgrid .gslot{ display:flex; flex-direction:column; align-items:center; gap:4px; background:rgba(255,255,255,.02);
                     border:1px solid var(--panel-line); border-radius:10px; padding:8px 4px; opacity:.32; filter:grayscale(1); }
  .o-gemgrid .gslot.have{ opacity:1; filter:none; }
  .o-gemgrid .gslot svg{ width:19px; height:19px; }
  .o-gemgrid .gslot.have svg{ filter:drop-shadow(0 0 5px var(--gglow)); }
  .o-gemgrid .gslot .n{ font-size:8px; text-align:center; color:var(--ink-dim); line-height:1.2; }
  .o-btn{ font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
          color:#1a1305; background:var(--gold); border:none; border-radius:10px; padding:12px 22px; cursor:pointer;
          transition:filter .15s, transform .15s; }
  .o-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
  .o-btn.ghost{ background:transparent; border:1px solid var(--panel-line); color:var(--ink); }
  .o-btn.ghost:hover{ border-color:var(--gold); color:var(--gold); }
  #startBtn{ position:relative; animation:startPulse 2.2s ease-in-out infinite; }
  #startBtn:hover{ animation-play-state:paused; }
  #startBtn::after{ content:''; position:absolute; inset:0; border-radius:10px; background:var(--gold);
                     opacity:.55; z-index:-1; animation:startRing 2.2s ease-out infinite; }
  @keyframes startPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(227,178,60,.55); }
    50%{ box-shadow:0 0 0 9px rgba(227,178,60,0); } }
  @keyframes startRing{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.18); opacity:0; } }
  .btn-row{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
  .recbar{ display:flex; justify-content:center; gap:16px; margin-bottom:16px; font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); flex-wrap:wrap; }
  .recbar b{ color:var(--gold); font-size:12px; }
  .seedline{ font-family:var(--mono); font-size:9px; color:var(--ink-faint); margin-top:12px; letter-spacing:.06em; }
  .reset-link{ color:var(--ink-faint); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
  .reset-link:hover{ color:var(--gold); }

  .hero-dots{ display:flex; justify-content:center; gap:6px; margin:2px 0 16px; }
  .hero-dots span{ width:6px; height:6px; border-radius:50%; background:var(--panel-line); transition:all .25s ease; }
  .hero-dots span.active{ background:var(--gold); width:18px; border-radius:3px; }
  #heroStepIntro, #heroStepGuide{ animation:heroStepIn .32s ease; }
  @keyframes heroStepIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
  .newrec{ display:inline-block; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em;
           background:var(--gold); color:#1a1305; padding:3px 8px; border-radius:6px; margin-bottom:10px; }

  /* ---------------------------------------------------------------------------
     Hệ thống xếp hạng điểm (rank) — hiển thị ở màn hình chính & màn kết thúc
  --------------------------------------------------------------------------- */
  .rank-block{ margin:0 0 16px; padding:13px 15px; border-radius:14px; background:rgba(255,255,255,.03);
               border:1px solid var(--panel-line); text-align:left; }
  .rank-head{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
  .rank-badge{ position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px;
               border-radius:50%; font-size:19px; flex-shrink:0;
               background:radial-gradient(circle at 34% 30%, var(--rc,#94a3b8), rgba(0,0,0,.35));
               box-shadow:0 0 14px var(--rg,rgba(148,163,184,.5)), inset 0 0 7px rgba(255,255,255,.25); }
  .rank-info{ flex:1; min-width:0; }
  .rank-name{ font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
  .rank-sub{ font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); margin-top:2px; }
  .rank-sub b{ color:var(--gold); }
  .rank-track{ position:relative; height:7px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
  .rank-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:999px;
              background:linear-gradient(90deg, var(--rc,#fbbf24), var(--rc2,#f59e0b));
              transition:width 1s cubic-bezier(.2,.8,.3,1); box-shadow:0 0 9px var(--rg,rgba(251,191,36,.5)); }
  .rank-note{ margin-top:7px; font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); }
  .rank-note b{ color:var(--gold); }
  .rankup-banner{ display:none; align-items:center; gap:6px; margin-top:10px; padding:7px 10px; border-radius:8px;
                  background:linear-gradient(90deg, rgba(244,114,182,.2), rgba(251,191,36,.12));
                  border:1px solid rgba(251,191,36,.45); font-family:var(--mono); font-size:10px; font-weight:700;
                  color:#fde68a; letter-spacing:.05em; text-transform:uppercase; }
  .rank-block.ranked-up .rankup-banner{ display:flex; animation:rankupFlash 1.1s ease; }
  @keyframes rankupFlash{ 0%{transform:translateY(-6px); opacity:0} 30%{transform:translateY(0); opacity:1} 100%{opacity:1} }
  @keyframes rankBadgePop{ 0%{transform:scale(.3) rotate(-16deg); opacity:0} 60%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1) rotate(0); opacity:1} }
  @keyframes rankRingPulse{ 0%{box-shadow:0 0 0 0 var(--rg,rgba(251,191,36,.6)), inset 0 0 7px rgba(255,255,255,.25)}
    70%{box-shadow:0 0 0 20px rgba(251,191,36,0), inset 0 0 7px rgba(255,255,255,.25)}
    100%{box-shadow:0 0 0 0 rgba(251,191,36,0), inset 0 0 7px rgba(255,255,255,.25)} }
  .rank-block.pop .rank-badge{ animation:rankBadgePop .6s cubic-bezier(.2,.85,.35,1.3); }
  .rank-block.ranked-up .rank-badge{ animation:rankBadgePop .6s cubic-bezier(.2,.85,.35,1.3), rankRingPulse 1.3s ease-out .35s 2; }

  /* ============ TREASURE MAP SCREEN ============ */
  #screen-map{ background:#0b1329; color:#f8fafc; }
  #map{ width:100%; height:100dvh; background:#060c1a; }
  #mapFallback{ display:none; position:absolute; inset:0; overflow-y:auto; padding:96px 16px 40px; }
  #mapFallback.on{ display:block; }
  #mapFallback .fb-card{ max-width:660px; margin:0 auto 12px; background:rgba(15,23,42,.9); border:1px solid #334155; border-radius:14px; padding:14px 16px; }
  #mapFallback h3{ margin:0 0 8px; font-family:var(--serif); color:#fbbf24; font-size:16px; }

  /* Đẩy cụm nút zoom + "xem toàn bộ" xuống dưới thanh trên cùng để không bị nút "Quay lại" che */
  .leaflet-top.leaflet-left{ margin-top:calc(70px + env(safe-area-inset-top)) !important; margin-left:14px !important; }
  @media (max-width:640px){ .leaflet-top.leaflet-left{ margin-top:calc(124px + env(safe-area-inset-top)) !important; } }
  .leaflet-control-zoom{ border:none !important; }
  .leaflet-control-zoom a{ background:#1e293b !important; color:#38bdf8 !important; border-radius:8px !important; border:1px solid #334155 !important; }
  .leaflet-control-fitview{ display:flex !important; align-items:center; justify-content:center; width:30px; height:30px;
    margin-top:6px; background:#1e293b !important; color:#38bdf8 !important; border-radius:8px !important;
    border:1px solid #334155 !important; font-size:15px; line-height:1; text-decoration:none; cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,.35); transition:background .15s, color .15s; }
  .leaflet-control-fitview:hover{ background:#f59e0b !important; color:#0f172a !important; }

  #mapTopBar{ position:fixed; top:0; left:0; right:0; z-index:1200; display:flex; align-items:center;
              justify-content:space-between; gap:10px; padding:calc(12px + env(safe-area-inset-top)) 14px 12px; pointer-events:none; }
  #mapTopBar > *{ pointer-events:auto; }
  #backToRunBtn{ display:flex; align-items:center; gap:8px; background:rgba(15,23,42,.92); border:1px solid #f59e0b;
                 color:#fbbf24; font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.04em;
                 text-transform:uppercase; border-radius:12px; padding:10px 15px; cursor:pointer;
                 box-shadow:0 0 14px rgba(245,158,11,.25); transition:background .2s, transform .2s; }
  #backToRunBtn:hover{ background:#f59e0b; color:#0f172a; transform:translateY(-1px); }
  #mapBackpackBar{ background:rgba(15,23,42,.92); border:1px solid #334155; border-radius:12px; padding:8px 12px;
                   display:flex; align-items:center; gap:10px; backdrop-filter:blur(8px); }
  #mapBackpackBar .mb-stat{ text-align:center; }
  #mapBackpackBar .mb-stat b{ display:block; font-family:var(--serif); font-size:15px; color:#fbbf24; line-height:1; font-variant-numeric:tabular-nums; }
  #mapBackpackBar .mb-stat span{ font-family:var(--mono); font-size:7.5px; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; }
  #mapBackpackBar .mb-div{ width:1px; height:22px; background:#334155; }

  #mapHint{ position:fixed; bottom:calc(16px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:1100;
            background:rgba(15,23,42,.9); border:1px solid rgba(245,158,11,.35); border-radius:12px;
            padding:8px 15px; font-size:11px; color:#cbd5e1; text-align:center; max-width:88vw; pointer-events:none; }
  #mapHint b{ color:#fbbf24; }

  .treasure-pin-wrapper{ position:relative; height:40px; display:flex; align-items:center; justify-content:center;
                         pointer-events:none; transition:opacity .3s, filter .3s; }
  .treasure-pin-wrapper:hover{ z-index:9999 !important; }
  .treasure-pin-wrapper.pos-right{ flex-direction:row; }
  .treasure-pin-wrapper.pos-left{ flex-direction:row-reverse; }
  .treasure-pin-wrapper.dimmed{ opacity:.3; filter:grayscale(.78); }
  .treasure-pin-wrapper.glow-active{ opacity:1; filter:none; }
  .province-label-tag{ pointer-events:auto; background:rgba(15,23,42,.95); border:1px solid #f59e0b; border-radius:16px;
                       padding:3px 8px; font-size:10.5px; font-weight:700; color:#fbbf24; white-space:nowrap;
                       box-shadow:0 0 10px rgba(245,158,11,.3); backdrop-filter:blur(8px); transition:all .2s;
                       cursor:pointer; display:flex; align-items:center; gap:4px; z-index:10; }
  .glow-active .province-label-tag{ border-color:#4ade80; color:#bbf7d0; box-shadow:0 0 16px rgba(74,222,128,.55); }
  .province-label-tag .mine-badge{ background:#f59e0b; color:#0f172a; font-size:8.5px; padding:1px 5px; border-radius:8px; font-weight:800; }
  .glow-active .province-label-tag .mine-badge{ background:#4ade80; }
  .treasure-pin-wrapper:hover .province-label-tag{ transform:scale(1.09); background:#f59e0b; color:#0f172a; box-shadow:0 0 20px rgba(245,158,11,.9); }
  .connector-line-container{ position:relative; height:2px; background:rgba(245,158,11,.3); overflow:hidden; flex-shrink:0; }
  .glow-active .connector-line-container{ background:rgba(74,222,128,.35); }
  .connector-pulse{ position:absolute; top:0; width:12px; height:100%; background:linear-gradient(90deg,transparent,#fbbf24,transparent); box-shadow:0 0 6px #f59e0b; }
  .glow-active .connector-pulse{ background:linear-gradient(90deg,transparent,#4ade80,transparent); box-shadow:0 0 6px #22c55e; }
  .pos-right .connector-pulse{ animation:pulseMoveRight 1.5s infinite linear; }
  .pos-left .connector-pulse{ animation:pulseMoveLeft 1.5s infinite linear; }
  @keyframes pulseMoveRight{ 0%{left:-12px} 100%{left:100%} }
  @keyframes pulseMoveLeft{ 0%{right:-12px} 100%{right:100%} }
  .chest-center-wrapper{ position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex-shrink:0; }
  .pulse-ring-glow{ position:absolute; width:26px; height:26px; border-radius:50%; border:2px solid #f59e0b; animation:pulseRing 2s infinite ease-out; opacity:0; z-index:1; }
  .glow-active .pulse-ring-glow{ border-color:#4ade80; animation:pulseRing 1.2s infinite ease-out; }
  @keyframes pulseRing{ 0%{transform:scale(.3);opacity:1} 100%{transform:scale(2);opacity:0} }
  .chest-icon{ pointer-events:auto; font-size:19px; z-index:5; cursor:pointer; filter:drop-shadow(0 0 8px #f59e0b);
               animation:chestFloat 2.5s infinite ease-in-out; transition:transform .2s; }
  .glow-active .chest-icon{ filter:drop-shadow(0 0 12px #4ade80); }
  .treasure-pin-wrapper:hover .chest-icon{ transform:scale(1.2) rotate(-5deg); }
  @keyframes chestFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
  .island-label{ background:transparent !important; border:none !important; box-shadow:none !important;
                 font-weight:700; font-size:10.5px; color:#94a3b8; text-shadow:0 0 4px #0f172a; padding:0 0 0 4px !important; }

  /* Màn hẹp: thu nhỏ cụm hòm + nhãn tỉnh một chút để bản đồ ôm trọn cả nước
     vẫn đọc được đủ chữ, không đè lên nhau khi nhiều tỉnh đứng gần nhau. */
  @media (max-width:480px){
    .treasure-pin-wrapper{ transform:scale(.82); }
    .treasure-pin-wrapper.pos-right{ transform-origin:left center; }
    .treasure-pin-wrapper.pos-left{ transform-origin:right center; }
  }

  #modalBackdrop{ position:absolute; inset:0; z-index:1900; background:rgba(2,6,16,.5); opacity:0; pointer-events:none; transition:opacity .3s; }
  #modalBackdrop.on{ opacity:1; pointer-events:auto; }
  #province-modal{ position:absolute; bottom:calc(20px + env(safe-area-inset-bottom)); left:50%;
                   transform:translateX(-50%) translateY(130%); width:92%; max-width:660px; max-height:68dvh;
                   background:rgba(15,23,42,.96); backdrop-filter:blur(16px); border:1px solid rgba(245,158,11,.4);
                   border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.8), 0 0 30px rgba(245,158,11,.2); z-index:2000;
                   transition:transform .4s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; overflow:hidden; }
  #province-modal.active{ transform:translateX(-50%) translateY(0); }
  .modal-header{ background:linear-gradient(90deg,#1e293b,#0f172a); padding:14px 18px; border-bottom:1px solid #334155;
                 display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .modal-title{ font-size:16px; font-weight:700; color:#fbbf24; display:flex; align-items:center; gap:8px; }
  .modal-header-actions{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
  .modal-close{ background:rgba(255,255,255,.1); border:none; color:#94a3b8; font-size:18px; width:32px; height:32px;
                border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
  .modal-close:hover{ background:#ef4444; color:#fff; }

  /* Box gợi ý ngắn gọn: bấm hòm đang sáng để đổi vật phẩm */
  .mine-simple-hint{ margin:12px 18px 0; padding:10px 13px; text-align:center;
               background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.3); border-radius:14px;
               font-size:12.5px; line-height:1.5; color:#dbe5e0; flex-shrink:0; }
  .mine-simple-hint b{ color:#4ade80; }

  .modal-body{ padding:14px 18px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:11px; }
  .mine-item{ background:#1e293b; border-radius:10px; padding:13px 15px; border:1px solid #334155; transition:transform .2s, border-color .2s; }
  .mine-item.mi-have{ border-color:#4ade80; box-shadow:0 0 14px rgba(74,222,128,.18); }
  .mine-item:hover{ border-color:#f59e0b; transform:translateY(-2px); }
  .mine-item.mi-have:hover{ border-color:#4ade80; }
  .mine-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:8px; flex-wrap:wrap; }
  .mine-name{ font-weight:700; font-size:14px; color:#f1f5f9; }
  .mine-tag{ font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:6px; background:rgba(245,158,11,.15);
             color:#fbbf24; border:1px solid rgba(245,158,11,.3); display:inline-flex; align-items:center; gap:5px; }
  .mine-gem{ display:inline-flex; }
  .mine-gem svg{ width:13px; height:13px; display:block; }
  .mine-info{ font-size:12.5px; color:#cbd5e1; line-height:1.55; margin-bottom:10px; }
  .mine-exchange-row{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
  .mine-status{ font-family:var(--mono); font-size:10px; color:#64748b; text-transform:uppercase; letter-spacing:.04em; }
  .exchange-btn{ font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
                 color:#0f172a; background:#4ade80; border:none; border-radius:8px; padding:8px 13px; cursor:pointer; transition:filter .15s, transform .15s; }
  .exchange-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
  .exchange-btn.done{ background:#334155; color:#94a3b8; cursor:default; }
  .exchange-btn.done:hover{ filter:none; transform:none; }
  .mine-value{ max-height:0; opacity:0; overflow:hidden; margin-top:0;
               transition:max-height .4s ease, opacity .3s ease, margin-top .4s ease, padding-top .4s ease; }
  .mine-value.show{ max-height:340px; opacity:1; margin-top:10px; padding-top:10px; border-top:1px dashed #334155; }
  .mv-part + .mv-part{ margin-top:11px; }
  .mv-cat{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:12.5px; color:#fbbf24; margin-bottom:5px; }
  .mv-cat svg{ width:14px; height:14px; display:block; }
  .mv-use, .mv-price{ font-size:14.5px; color:#e2e8f0; line-height:1.55; }
  .mv-use + .mv-price{ margin-top:3px; }
  .mv-use b, .mv-price b{ color:#fff; font-weight:700; }

  /* ---------------------------------------------------------------------------
     Hộp quà mở ra khi đổi vật phẩm — hiệu ứng "wow"
  --------------------------------------------------------------------------- */
  #giftOverlay{ position:fixed; inset:0; z-index:3500; display:flex; align-items:center; justify-content:center;
                opacity:0; pointer-events:none; transition:opacity .28s ease; }
  #giftOverlay.on{ opacity:1; pointer-events:auto; }
  .gift-backdrop{ position:absolute; inset:0;
                  background:radial-gradient(circle at 50% 42%, rgba(30,41,59,.94), rgba(2,6,16,.97)); }
  .gift-stage{ position:relative; width:min(340px,88vw); max-height:88dvh; display:flex; flex-direction:column;
               align-items:center; justify-content:flex-start; padding-top:10px; overflow-y:auto; }
  .gift-close{ position:absolute; top:-6px; right:-6px; background:rgba(255,255,255,.1); border:none; color:#94a3b8;
               font-size:18px; width:34px; height:34px; border-radius:50%; cursor:pointer; z-index:8;
               display:flex; align-items:center; justify-content:center; transition:all .2s; }
  .gift-close:hover{ background:#ef4444; color:#fff; }
  .gift-caption{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
                 color:#fbbf24; opacity:0; margin-bottom:14px; transition:opacity .3s ease .1s; }
  #giftOverlay.on .gift-caption{ opacity:1; }

  .gift-box-wrap{ position:relative; width:170px; height:150px; flex-shrink:0; }
  .gift-glow{ position:absolute; left:50%; top:56%; width:14px; height:14px; border-radius:50%;
              background:radial-gradient(circle, rgba(253,224,71,.95), rgba(253,224,71,0) 68%);
              transform:translate(-50%,-50%) scale(0); opacity:0; z-index:1; pointer-events:none; }
  .gift-sparkles{ position:absolute; inset:0; z-index:4; pointer-events:none; }
  .gift-sparkles span{ position:absolute; left:50%; top:56%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
                        border-radius:50%; background:#fde047; box-shadow:0 0 6px #fde047; opacity:0; }
  .gift-box{ position:absolute; left:50%; bottom:6px; width:132px; height:104px; margin-left:-66px;
             transform-origin:50% 100%; cursor:pointer; }
  .gift-box.shaking{ animation:giftShake .5s ease-in-out; }
  .gift-box.opened{ cursor:default; }
  .gift-tap-hint{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:#fbbf24;
                   opacity:.85; margin-top:8px; text-align:center; animation:giftHintPulse 1.4s ease-in-out infinite; }
  .gift-tap-hint.hide{ display:none; }
  @keyframes giftHintPulse{ 0%,100%{opacity:.5} 50%{opacity:1} }
  .gift-body{ position:absolute; left:0; right:0; bottom:0; height:78px; border-radius:9px 9px 13px 13px;
              background:linear-gradient(160deg,#f59e0b,#b45309);
              box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 -8px 16px rgba(0,0,0,.28); z-index:2;
              transition:box-shadow .5s ease; }
  .gift-box.opened .gift-body{ box-shadow:0 14px 40px rgba(245,158,11,.4), inset 0 -8px 16px rgba(0,0,0,.28); }
  .gift-lid{ position:absolute; left:-7px; right:-7px; top:22px; height:30px; border-radius:8px;
             background:linear-gradient(160deg,#fbbf24,#d97706); box-shadow:0 8px 16px rgba(0,0,0,.45);
             transform-origin:50% 100%; z-index:3; }
  .gift-box.opened .gift-lid{ animation:giftLidPop .65s cubic-bezier(.2,.85,.35,1) forwards; }
  .gift-ribbon-v{ position:absolute; left:50%; top:0; bottom:0; width:15px; margin-left:-7.5px;
                  background:linear-gradient(160deg,#4ade80,#16a34a); z-index:3; }
  .gift-ribbon-h{ position:absolute; left:-7px; right:-7px; top:22px; height:15px;
                  background:linear-gradient(160deg,#4ade80,#16a34a); z-index:3; }
  .gift-bow{ position:absolute; left:50%; top:6px; width:34px; height:20px; margin-left:-17px; z-index:4; }
  .gift-bow::before, .gift-bow::after{ content:''; position:absolute; top:0; width:16px; height:16px;
              background:#22c55e; border-radius:60% 60% 60% 0%; box-shadow:0 2px 6px rgba(0,0,0,.3); }
  .gift-bow::before{ left:1px; transform:rotate(-35deg); }
  .gift-bow::after{ right:1px; transform:rotate(35deg) scaleX(-1); }
  .gift-box.opened .gift-bow{ animation:giftLidPop .65s cubic-bezier(.2,.85,.35,1) forwards; }

  .gift-reward{ margin-top:16px; width:100%; background:#0f172a; border:1px solid #f59e0b; border-radius:14px;
                padding:16px 18px 18px; box-shadow:0 16px 44px rgba(0,0,0,.55); transform:scale(.6) translateY(10px);
                opacity:0; }
  .gift-reward.show{ animation:giftRewardPop .55s cubic-bezier(.2,.8,.32,1.25) forwards; }
  .gift-reward-title{ font-size:14.5px; font-weight:800; color:#fbbf24; display:flex; align-items:center; gap:8px;
                       margin-bottom:11px; }
  .gift-reward-title svg{ width:18px; height:18px; display:block; }

  @keyframes giftShake{ 0%,100%{transform:rotate(0)} 15%{transform:rotate(-7deg)} 30%{transform:rotate(6deg)}
    45%{transform:rotate(-5deg)} 60%{transform:rotate(4deg)} 75%{transform:rotate(-2deg)} 90%{transform:rotate(1deg)} }
  @keyframes giftLidPop{ 0%{transform:translateY(0) rotate(0); opacity:1}
    100%{transform:translateY(-64px) translateX(28px) rotate(-45deg); opacity:0} }
  @keyframes giftGlowBurst{ 0%{transform:translate(-50%,-50%) scale(0); opacity:.95}
    55%{opacity:.65} 100%{transform:translate(-50%,-50%) scale(16); opacity:0} }
  @keyframes giftSparkleFly{ 0%{transform:translate(-50%,-50%) scale(0); opacity:1}
    100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity:0} }
  @keyframes giftRewardPop{ from{transform:scale(.6) translateY(10px); opacity:0} to{transform:scale(1) translateY(0); opacity:1} }

  #mapVeil{ position:fixed; inset:0; z-index:2500; background:var(--deep); display:flex; align-items:center;
            justify-content:center; flex-direction:column; gap:8px; opacity:0; pointer-events:none; transition:opacity .4s; }
  #mapVeil.show{ opacity:1; pointer-events:auto; }
  #mapVeil .eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
  #mapVeil h2{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(18px,4vw,26px); color:var(--gold); margin:0; }

  @media (max-width:640px){
    #mapTopBar{ flex-direction:column; align-items:stretch; }
    #mapBackpackBar{ justify-content:center; }
    #hudSub{ gap:6px; }
  }
  /* Điện thoại hẹp: co HUD lại để nút tạm dừng không bị đẩy ra ngoài màn hình */
  @media (max-width:430px){
    #hud{ padding-left:8px; padding-right:8px; }
    #hud-top{ gap:6px; }
    #provinceInfo{ min-width:0; padding:6px 9px; flex:1 1 auto; }
    #provinceInfo h2{ font-size:13px; }
    #scoreBox{ min-width:0; padding:5px 9px; }
    #scoreBox .sv{ font-size:17px; }
    #hudRight{ gap:4px; }
    #livesWrap{ padding:6px; gap:3px; }
    .life-icon{ width:12px; height:12px; }
    .hud-btn{ width:32px; height:32px; font-size:13px; border-radius:10px; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001s !important; transition-duration:.08s !important; }
  }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }