/* Gear, 14 October 2026 (js/oct14_gear.js, js/gear.js icon()). */

/* Shiny gear: a band of light sweeps across the picture every few seconds, with the shiny pets' sparkles (css/style.css .spark)
   twinkling on it, and a soft gold glow round it. Only transform and opacity move, so the phone's graphics chip does the work
   and nothing on the page is laid out or redrawn again. */
.itemico.shiny { box-shadow: 0 0 0 1px rgba(255, 246, 176, .55), 0 0 9px rgba(255, 226, 110, .5); }
.itemico .gshine { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 6px; overflow: hidden; pointer-events: none;
  box-shadow: inset 0 0 7px rgba(255, 240, 160, .5); }
.itemico .gshine::before { content: ''; position: absolute; top: -25%; bottom: -25%; left: 0; width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 250, 215, .8) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-170%) skewX(-18deg); animation: gshine 2.8s ease-in-out infinite; }
@keyframes gshine { 0%, 40% { transform: translateX(-170%) skewX(-18deg); } 80%, 100% { transform: translateX(340%) skewX(-18deg); } }
.itemico.shiny .spark { z-index: 1; }
.itemico.xl.shiny .spark { font-size: 16px; } .itemico.xl.shiny .spark.s3 { font-size: 12px; }
.sli .itemico.shiny .spark, .brow .itemico.shiny .spark { font-size: 7px; } .sli .itemico.shiny .spark.s3 { display: none; }
@media (prefers-reduced-motion: reduce) {
  .itemico .gshine::before { animation: none; transform: translateX(80%) skewX(-18deg); opacity: .45; }
  .itemico.shiny .spark { animation: none; opacity: .9; transform: none; }
}

/* Above your level: the level it can be worn from, in amber, bottom right. */
.itemico .gup { position: absolute; right: 2px; bottom: 1px; font: normal 400 11px/1 var(--pixel); color: #ffb347; pointer-events: none;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.itemico .gup::before { content: '\25B2'; font-size: 7px; vertical-align: 2px; margin-right: 1px; }
.itemico.xl .gup { font-size: 17px; right: 5px; bottom: 4px; } .itemico.xl .gup::before { font-size: 10px; }
.sli .itemico .gup, .brow .itemico .gup { display: none; }

/* Set pieces: a small green diamond, bottom right. */
.itemico .gsetb { position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; background: #63d36f; transform: rotate(45deg); box-shadow: 0 0 0 1px #10200f; pointer-events: none; }
.itemico.xl .gsetb { width: 10px; height: 10px; right: 8px; bottom: 8px; }
.sli .itemico .gsetb { width: 4px; height: 4px; right: 2px; bottom: 2px; }

/* Words on the gear sheet and in loot pop-ups. */
.gupl { color: #ffb347; }
.gshl { color: #fff1a8; }
p.gupl, p.gshl, p.gfxgone { margin: 6px 0; font-size: 13px; }
.setpips { display: block; margin: 3px 0 2px; line-height: 0; }
.setpips i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: #3b3529; border: 1px solid #5b4a3a; margin-right: 3px; }
.setpips i.on { background: #63d36f; border-color: #8fe08a; }
.setfx { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.setfx.on { color: #8fe08a; }
.setrow .setfx { margin-top: 3px; }
.gshtoast { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.gshtoast .itemico { width: 36px; height: 36px; } .gshtoast .itemico img { width: 26px; height: 26px; }
.setbox small { display: block; }
.rates td small { color: var(--muted); }
/* Drop rates > Gear: these tables fit the phone, so they don't need the usual sideways scroll. */
.rates-wrap table.rates.gnarrow { min-width: 0; }
table.rates.gnarrow td:first-child { width: 42%; }
table.rates.gsets td + td, table.rates.gsets th + th { text-align: left; }