/* assets/mobile-tweaks.css — SR-3D mobile-first overrides. SR-3D-MOBILE-TWEAKS:v1
 * Loaded after the JS-injected HUD CSS, so targeted rules use !important to win
 * the cascade. Fixes narrow-screen HUD overflow (audit P0/P1) + relays out the
 * touch controls for thumb reach. Primary target: Klever mobile webview ~360-414px. */

/* ── Klever Signet NFT badge (one-of-one ring) ───────────────────────────── */
.sr3d-inv-cell, .sr3d-inv-slot { position: relative; }
.sr3d-inv-nft { position: absolute; top: 2px; left: 2px; z-index: 4; pointer-events: none;
  font: 800 7.5px system-ui; color: #14081f; letter-spacing: .02em;
  background: linear-gradient(90deg, #fbbf24, #a566ff); padding: 1px 4px; border-radius: 5px;
  box-shadow: 0 0 8px rgba(165,102,255,.6); }

/* ── Inventory gear item art (curated icons fill the cell/slot) ───────────── */
.sr3d-inv-cell-ic, .sr3d-inv-slot-ic { display: flex; align-items: center; justify-content: center; }
.sr3d-inv-art { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Attack-button SVG icon (replaces the ⚔ emoji) ───────────────────────── */
.sr3d-actbtn .glyph { display: flex; align-items: center; justify-content: center; }
.sr3d-actbtn.attack .glyph { color: #ffe6a8; }            /* sword tint (currentColor) */
.sr3d-actbtn .glyph svg { width: 58%; height: 58%; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }

/* ── Touch-control relayout (coarse pointers / phones) ───────────────────── */
@media (pointer: coarse), (max-width: 600px) {
  /* Bigger, thumb-friendly attack button lifted clear of the home indicator. */
  .sr3d-actbtn.attack { width: 78px !important; height: 78px !important; }
  .sr3d-actcluster { bottom: max(34px, calc(env(safe-area-inset-bottom) + 14px)) !important;
    right: max(16px, env(safe-area-inset-right)) !important; }
  .sr3d-act-hint { font-size: 11px !important; opacity: .85; }
  /* AUTO button: lift above the enlarged attack cluster so they don't overlap. */
  #sr3d-auto-btn { bottom: 122px !important; right: 20px !important; }
}

/* ── Narrow-screen HUD compaction (audit P0/P1) ──────────────────────────── */
@media (max-width: 480px) {
  /* Quest tracker was 220px (61% of a 360px screen) → compact + smaller type. */
  .srhud-quest { max-width: 138px !important; right: 8px !important; font-size: 11px !important; }
  .srhud-quest * { font-size: 11px !important; line-height: 1.25 !important; }

  /* Level / HP pill + bar shrink so combat canvas isn't crowded. */
  .srhud-lvl { min-width: 0 !important; }
  .sr3d-hp-track { width: 96px !important; }
  .sr3d-hp-num { min-width: 0 !important; }

  /* Aegis set-bonus 13-dot row (≈117px) → wrap into a tidy 7-col grid. */
  .sr3d-aegis-dots { display: grid !important; grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important; width: max-content !important; }

  /* Inventory tooltip fixed 230px → never overflow the viewport. */
  .sr3d-inv-tooltip { width: min(230px, 80vw) !important; }

  /* FPS counter: keep clear of the wallet pill + notch. */
  .sr3d-fps { margin-top: max(44px, calc(env(safe-area-inset-top) + 50px)) !important; }
}