/* speedingfines.gg item tooltip: the classic in-game look (blue-black panel, thin silver border, Friz-like serif). */
:root {
  --sft-q0: #9d9d9d; --sft-q1: #ffffff; --sft-q2: #1eff00; --sft-q3: #0070dd; --sft-q4: #a335ee;
  --sft-q5: #ff8000; --sft-q6: #e6cc80; --sft-q7: #00ccff;
  --sft-green: #1eff00; --sft-gold: #ffd100; --sft-grey: #808080;
}

.sft-float {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  max-width: min(340px, calc(100vw - 16px));
}
.sft-float[hidden] { display: none; }

.sft {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  flex-direction: row-reverse; /* icon sits to the left of the panel, like the database sites */
  font-family: "Friz Quadrata TT", "Friz Quadrata", "FrizQuadrata", "Trebuchet MS", Georgia, serif;
  font-size: 13px;
  line-height: 1.3;
  color: #fff;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.sft-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  border: 1px solid #5c5c5c;
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, .6);
  background: #000;
}
.sft-body {
  min-width: 190px;
  max-width: 300px;
  padding: 7px 9px 8px;
  background: linear-gradient(180deg, rgba(10, 13, 34, .985), rgba(5, 7, 20, .985));
  border: 1px solid #b4b4b4;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9), inset 0 0 0 2px rgba(120, 120, 140, .35), 0 3px 12px rgba(0, 0, 0, .7);
  text-shadow: 1px 1px 0 #000;
}
.sft-line { margin: 0; overflow-wrap: anywhere; }
.sft-lr { display: flex; justify-content: space-between; gap: 18px; }
.sft-r { text-align: right; white-space: nowrap; }
.sft-name { font-size: 14.5px; line-height: 1.25; margin-bottom: 1px; }
.sft-ilvl { color: var(--sft-gold); }
.sft-green { color: var(--sft-green); }
.sft-grey, .sft-setitem { color: var(--sft-grey); }
.sft-setitem { padding-left: 10px; }
.sft-setitem.sft-have { color: #ffffa0; }
.sft-setname, .sft-flavor { color: var(--sft-gold); }
.sft-ench { color: var(--sft-green); }
.sft-note { color: #ff7a7a; font-style: italic; }
.sft-src { color: #7a86a8; font-size: 11px; margin-top: 4px; }
.sft-gap { height: 6px; }
.sft-nested { padding-top: 2px; }
.sft-nested .sft-src { display: none; }
.sft-money { margin-top: 1px; }
.sft-coin { display: inline-block; margin-left: 4px; padding-right: 13px; background: no-repeat right center / 11px 11px; }
.sft-g { background-image: radial-gradient(circle at 40% 40%, #ffe98a, #d4a017 60%, #6b4d05); }
.sft-s { background-image: radial-gradient(circle at 40% 40%, #ffffff, #a8a8b8 60%, #4a4a55); }
.sft-c { background-image: radial-gradient(circle at 40% 40%, #ffc49a, #b8642a 60%, #5a2a0a); }

.sft-q0 { color: var(--sft-q0); } .sft-q1 { color: var(--sft-q1); } .sft-q2 { color: var(--sft-q2); }
.sft-q3 { color: var(--sft-q3); } .sft-q4 { color: var(--sft-q4); } .sft-q5 { color: var(--sft-q5); }
.sft-q6 { color: var(--sft-q6); } .sft-q7 { color: var(--sft-q7); }
/* Blue item names are hard to read on the dark panel at small sizes; the game uses a lighter blue in text. */
.sft .sft-q3 { color: #2a8cff; }

/* Inline item links: [data-item][data-item-icon] gets a small icon with a quality-coloured border. */
[data-item] { cursor: help; }
a[data-item] { cursor: pointer; }
.sft-inline-icon {
  width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px;
  border-radius: 3px; border: 1px solid #444; background: #000;
}
.sft-inline-icon.sft-b2 { border-color: var(--sft-q2); } .sft-inline-icon.sft-b3 { border-color: var(--sft-q3); }
.sft-inline-icon.sft-b4 { border-color: var(--sft-q4); } .sft-inline-icon.sft-b5 { border-color: var(--sft-q5); }

@media (max-width: 480px) {
  .sft { font-size: 12.5px; }
  .sft-icon { width: 36px; height: 36px; }
  .sft-body { max-width: calc(100vw - 60px); }
}