/* ---------- the "better piece" card (2026-10-18, js/bettergear.js): a MIR4 / Lordnine-style notice at the bottom right, over the
   gold and the loot list (js/hudlayout.js sets its right / bottom and lifts the list over it). Obsidian glass with a thin gold
   edge, the piece in its grade's MIR4 plate (assets/ui_slot_mir4), CP gain in green, one gold "สวมใส่" button. Sized in HUD
   units (--u on #ui); never wider than the screen less its gutters (phones). ---------- */
#bettergear {
  --bgc: #ccc;
  position: absolute; z-index: 6; right: calc(12px * var(--u)); bottom: calc(120px * var(--u));
  width: min(calc(252px * var(--u)), calc(100vw - 24px)); box-sizing: border-box;
  padding: calc(8px * var(--u)) calc(10px * var(--u)) calc(10px * var(--u));
  border-radius: calc(10px * var(--u));
  background: linear-gradient(180deg, rgba(30, 34, 52, 0.96), rgba(14, 16, 26, 0.96));
  border: 1px solid rgba(214, 178, 96, 0.75);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 236, 180, 0.12), 0 calc(6px * var(--u)) calc(18px * var(--u)) rgba(0, 0, 0, 0.45);
  color: #f3ead2; font: 600 calc(12px * var(--u)) Mali, Fredoka, sans-serif;
}
#bettergear::before {   /* the grade's colour along the left edge */
  content: ''; position: absolute; left: 0; top: calc(10px * var(--u)); bottom: calc(10px * var(--u)); width: calc(3px * var(--u));
  border-radius: 0 3px 3px 0; background: var(--bgc);
}
#bettergear.in { animation: bgIn 0.32s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes bgIn { from { opacity: 0; transform: translateX(calc(40px * var(--u))) scale(0.96); } }
#bettergear .bg-x {
  position: absolute; top: calc(4px * var(--u)); right: calc(4px * var(--u)); width: calc(24px * var(--u)); height: calc(24px * var(--u));
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: #c9bfa6; font: 700 calc(13px * var(--u)) sans-serif;
}
#bettergear .bg-x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
#bettergear .bg-h {
  display: flex; align-items: baseline; gap: calc(6px * var(--u)); padding-right: calc(24px * var(--u)); margin-bottom: calc(6px * var(--u));
  color: #ffd977; font-weight: 800; font-size: calc(12.5px * var(--u)); letter-spacing: 0.02em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
#bettergear .bg-h small { color: #b9ae94; font-weight: 600; font-size: calc(11px * var(--u)); }
#bettergear .bg-h em {
  margin-left: auto; font-style: normal; padding: 0 calc(6px * var(--u)); border-radius: 999px; background: rgba(255, 217, 119, 0.16);
  color: #ffd977; font-size: calc(10.5px * var(--u));
}
#bettergear .bg-row { display: flex; align-items: center; gap: calc(9px * var(--u)); }
#bettergear .bg-ic {
  position: relative; flex: none; width: calc(56px * var(--u)); height: calc(56px * var(--u)); padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 9%; background: url(../assets/ui_slot_mir4/slot_g0.png) center / 100% 100% no-repeat;
}
#bettergear .bg-ic.g1 { background-image: url(../assets/ui_slot_mir4/slot_g1.png); }
#bettergear .bg-ic.g2 { background-image: url(../assets/ui_slot_mir4/slot_g2.png); }
#bettergear .bg-ic.g3 { background-image: url(../assets/ui_slot_mir4/slot_g3.png); }
#bettergear .bg-ic.g4 { background-image: url(../assets/ui_slot_mir4/slot_g4.png); }
#bettergear .bg-ic.g5 { background-image: url(../assets/ui_slot_mir4/slot_g5.png); }
#bettergear .bg-ic:hover { filter: brightness(1.12); }
#bettergear .bg-ic img { width: 78%; height: 78%; object-fit: contain; }
#bettergear .bg-ic b {
  position: absolute; top: 4%; right: 8%; color: #fff3c2; font: 800 calc(11px * var(--u)) Fredoka, sans-serif; text-shadow: 0 1px 0 #000, 0 0 1px #000;
}
#bettergear .bg-s {
  position: absolute; left: 7%; bottom: 4%; font: 800 calc(10px * var(--u)) Fredoka, serif; font-style: normal; color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 1px #000;
}
#bettergear .bg-q {
  position: absolute; right: 6%; bottom: 4%; width: calc(16px * var(--u)); height: calc(16px * var(--u)); display: grid; place-items: center;
  border-radius: 50%; background: #2a2235; box-shadow: 0 0 0 1px #ffd977; color: #ffd977; font: 800 calc(11px * var(--u)) Fredoka, sans-serif; font-style: normal;
}
#bettergear .bg-tx { min-width: 0; display: flex; flex-direction: column; gap: calc(1px * var(--u)); }
#bettergear .bg-n {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left; max-width: 100%;
  color: var(--bgc); font: 800 calc(13px * var(--u)) Mali, Fredoka, sans-serif; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#bettergear .bg-n:hover { text-decoration: underline; }
#bettergear .bg-tx small { color: #b9ae94; font-size: calc(10.5px * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bettergear .bg-cp { color: #d8cfb6; font-size: calc(12px * var(--u)); white-space: nowrap; }
#bettergear .bg-cp b { color: #6fe58a; font: 800 calc(14px * var(--u)) Fredoka, sans-serif; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85); }
#bettergear .bg-go {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; margin-top: calc(8px * var(--u));
  min-height: calc(32px * var(--u)); padding: calc(4px * var(--u)) calc(8px * var(--u)); border-radius: calc(7px * var(--u));
  background: linear-gradient(180deg, #f2d27a, #c69a3c); border: 1px solid #fff0b8; box-shadow: 0 0 0 1px rgba(60, 40, 10, 0.8), inset 0 -2px 0 rgba(120, 80, 20, 0.35);
  color: #2b1d08; font: 800 calc(13.5px * var(--u)) Mali, Fredoka, sans-serif; text-shadow: none; cursor: pointer;
}
#bettergear .bg-go:hover { filter: brightness(1.08); }
#bettergear .bg-go:active { transform: translateY(1px); }
#bettergear .bg-go small { font-weight: 700; font-size: calc(10.5px * var(--u)); color: #4a3412; }
/* not enough gold / หินดำ to appraise it yet: a plain button that opens the piece */
#bettergear .bg-go.short { background: linear-gradient(180deg, #4a4458, #322d3e); border-color: rgba(214, 178, 96, 0.55); color: #f3ead2; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
#bettergear .bg-go.short small { color: #ff9b8a; }
/* phones: the HUD unit gets small there - keep the card readable and its button a thumb's size */
@media (max-width: 720px) {
  #bettergear { width: min(252px, calc(100vw - 24px)); padding: 8px 10px 10px; font-size: 12px; }
  #bettergear .bg-ic { width: 52px; height: 52px; }
  #bettergear .bg-n { font-size: 13px; }
  #bettergear .bg-h { font-size: 12.5px; }
  #bettergear .bg-h small, #bettergear .bg-tx small, #bettergear .bg-go small { font-size: 10.5px; }
  #bettergear .bg-cp { font-size: 12px; }
  #bettergear .bg-cp b { font-size: 14px; }
  #bettergear .bg-go { min-height: 40px; font-size: 14px; }
  #bettergear .bg-x { width: 30px; height: 30px; font-size: 14px; }
}