/* Tooltips: one bubble for every title in the game (Tooltip in heistle-tooltips.blade.php), in the
   dark steel of the notices, with a heading, an optional icon and a note. Themes set the steel;
   a tone (heat, warn, good) colours the edge and heading the same on every background. */
.tip{--tip-bg:#0d140c; --tip-line:#6b6242; --tip-ink:var(--amber2); --tip-arrow:50%;
  position:fixed; z-index:140; top:0; left:0; display:flex; align-items:center; gap:10px;
  width:max-content; max-width:min(264px,calc(100vw - 16px)); padding:9px 12px 10px;
  border:1px solid var(--tip-tone-line,var(--tip-line)); border-radius:11px; background:var(--tip-bg);
  box-shadow:0 12px 30px #000b, 0 2px 6px #0008, inset 0 1px 0 #ffffff0d;
  color:var(--ink); font:400 12px/1.45 var(--body); text-align:left; white-space:normal; pointer-events:none;
  opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .14s ease, transform .14s ease, visibility 0s linear .14s}
.tip.below{transform:translateY(-4px)}
.tip.show{opacity:1; visibility:visible; transform:none; transition:opacity .14s ease, transform .14s ease}
.tip::after{content:''; position:absolute; top:100%; left:var(--tip-arrow); width:9px; height:9px; margin:-5px 0 0 -5px;
  border:solid var(--tip-tone-line,var(--tip-line)); border-width:0 1px 1px 0; background:var(--tip-bg); transform:rotate(45deg)}
.tip.below::after{top:auto; bottom:100%; margin:0 0 -5px -5px; border-width:1px 0 0 1px}
.tip-icon{flex:none; align-self:flex-start; width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 3px 4px #0009)}
.tip-copy{display:flex; flex-direction:column; gap:2px; min-width:0}
.tip-title{font:700 12.5px/1.3 var(--body); letter-spacing:.2px; color:var(--tip-tone-ink,var(--tip-ink))}
.tip-title + .tip-text{color:var(--dim)}
.tip-note{margin-top:5px; padding-top:6px; border-top:1px solid #ffffff14;
  font:700 10px/1.4 var(--mono); letter-spacing:.3px; color:var(--tip-tone-ink,var(--tip-ink))}
.tip-copy > .tip-note:first-child{margin-top:0; padding-top:0; border-top:0}
.tip-heat{--tip-tone-line:#8a4a2c; --tip-tone-ink:#ffb085}
.tip-warn{--tip-tone-line:#8a6b34; --tip-tone-ink:#ffcf75}
.tip-good{--tip-tone-line:#3d7356; --tip-tone-ink:#7befb6}
body[data-background="gold"] .tip{--tip-bg:#120e06; --tip-line:#7d6431}
body[data-background="diamond"] .tip{--tip-bg:#0e1013; --tip-line:#4a515a; --tip-ink:#e6f4ff}
body[data-background="jackpot"] .tip{--tip-bg:#130a17; --tip-line:#5c3a6a; --tip-ink:#ffc4e8}
@media(prefers-reduced-motion:reduce){.tip,.tip.below,.tip.show{transform:none; transition:none}}

/* Item counts: a small minted pill beside the item, in the colours of the main buttons */
.qty{--qty-bg:linear-gradient(180deg,#ffe9aa,#f6b73c 60%,#db921b); --qty-ink:#302006; --qty-line:#d79b27;
  display:inline-flex; flex:none; align-items:center; justify-content:center; gap:1px;
  min-width:20px; height:16px; padding:0 5px; border:1px solid var(--qty-line); border-radius:999px; background:var(--qty-bg);
  color:var(--qty-ink); font:700 10px/1 var(--mono); letter-spacing:-.2px; white-space:nowrap; pointer-events:none;
  box-shadow:0 2px 5px #000b, inset 0 1px 0 #ffffffa6, inset 0 -1px 0 #0000002e}
.qty small{font-size:8px; font-weight:700; opacity:.7}
body[data-background="diamond"] .qty{--qty-bg:linear-gradient(180deg,#ffffff,#dfe5eb 46%,#a9b1ba); --qty-ink:#0c0f13; --qty-line:#c9d0d8}
body[data-background="jackpot"] .qty{--qty-bg:linear-gradient(180deg,#ffffff,#fad5ec 46%,#c59dc6); --qty-ink:#120817; --qty-line:#f2b4db}
/* on a phone all four tools and their counts still fit on one row of the safe */
@media(max-width:420px){.tool-belt{gap:5px}.tool-chip{padding:7px 9px; gap:5px}.tool-chip .qty{min-width:0; padding:0 4px}}