/* ---- Rune stash (modelled on the D2R stash Runes tab) --------------------- */

.stash {
  --cell: min(54px, calc((100vw - 32px - 40px - 8 * var(--gap)) / 9));
  --gap: 5px;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.2 .9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --blotch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .45 -.2'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
  width: fit-content;
  margin: 0 auto;
  padding: 16px;
  background: var(--blotch), var(--noise), #4a4a4a;
  border: 2px solid #1b1b1b;
  box-shadow:
    inset 0 0 0 1px #7a7a7a,
    inset 0 0 18px rgba(0, 0, 0, .6),
    0 10px 40px rgba(0, 0, 0, .8);
  border-radius: 2px;
}

.stash-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, var(--cell));
  grid-auto-rows: var(--cell);
  gap: var(--gap);
}

/* Rune slots */
.rune {
  position: relative;
  z-index: 2;
  appearance: none;
  padding: 0;
  margin: 0;
  width: var(--cell);
  height: var(--cell);
  background: #121212;
  border: 1px solid #5f5543;
  box-shadow: 0 0 0 1px #151515, inset 0 0 0 1px #000, inset 0 0 10px #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rune svg { display: block; width: 100%; height: 100%; }

.rune:hover { border-color: #9a8a66; }
.rune:focus-visible { outline: 2px solid #d9c38a; outline-offset: 1px; }

.st { stroke: #1a1a1a; stroke-width: .8; }
.st-lit, .lit .st-dim { display: none; }
.lit .st-lit { display: inline; }
.st-tex { opacity: .35; }
.gl { fill: #232323; }
.gl-hi { fill: rgba(255, 255, 255, .05); }

.lit .st { stroke: #4f4d49; }
.lit .st-tex { opacity: .28; }
.lit .gl { fill: #1b1915; }
.lit .gl-hi { fill: rgba(255, 255, 255, .42); }

.rune:hover .st { filter: brightness(1.12); }

/* In-game style item tooltip for runes */
.rune-tip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 16px));
  padding: 8px 14px 10px;
  background: rgba(0, 0, 0, .88);
  text-align: center;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.3;
  color: var(--white);
}
.rune-tip .n { color: var(--orange); }
.rune-tip .sub { margin-bottom: 10px; }
.rune-tip .req { margin-top: 10px; }

.stash-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 6px;
}

.stash-hint {
  margin: 0 auto 20px;
  max-width: 600px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 620px) {
  .stash { --gap: 3px; --cell: calc((100vw - 32px - 20px - 8 * var(--gap)) / 9); padding: 8px; }
}