.itemHoverTooltipLayer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 160;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 0.08s ease;
}

.itemTooltipLayer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 0.12s ease;
}

.itemHoverTooltipLayer.isVisible,
.itemTooltipLayer.isVisible {
  opacity: 1;
}

.gameTooltipWrap {
  display: block;
}

.gameTooltipWrap.hasSuit {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: start;
}

.gameSuitCards {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: flex-start;
}

.gameTooltipWrap.hasCompare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px));
  gap: 8px;
  align-items: start;
}

.gameTooltipWrap.hasCompare.hasSuit {
  grid-template-columns: minmax(0, 280px) auto minmax(0, 280px);
}

.gameTooltipCard {
  --tooltip-tier-glow: rgba(98, 150, 226, 0.18);
  --tooltip-tier-edge: rgba(238, 214, 117, 0.3);
  --tooltip-tier-core: rgba(255, 226, 149, 0.08);
  --tooltip-tier-name-glow: rgba(255, 245, 202, 0.16);
  --tooltip-tier-frame: rgba(230, 205, 126, 0.28);
  position: relative;
  width: min(280px, calc(100vw - 20px));
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #8f7d38;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(23, 41, 72, 0.96) 0%, rgba(11, 17, 29, 0.97) 20%, rgba(6, 6, 8, 0.98) 100%);
  box-shadow: inset 0 0 0 1px rgba(238, 223, 150, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 42px rgba(0, 0, 0, 0.5), 0 0 24px var(--tooltip-tier-glow);
  color: #f7eac8;
  overflow: hidden;
}

.gameTooltipCard::after {
  content: '';
  position: absolute;
  inset: -22% auto -18% -32%;
  width: 44%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 247, 209, 0.18), transparent);
  transform: skewX(-22deg);
}

.gameTooltipCard.isTierMagic {
  --tooltip-tier-glow: rgba(69, 127, 216, 0.12);
  --tooltip-tier-edge: rgba(106, 168, 255, 0.28);
  --tooltip-tier-core: rgba(89, 151, 255, 0.07);
  --tooltip-tier-name-glow: rgba(126, 189, 255, 0.18);
  --tooltip-tier-frame: rgba(110, 165, 243, 0.28);
}

.gameTooltipCard.isTierRare {
  --tooltip-tier-glow: rgba(35, 193, 162, 0.16);
  --tooltip-tier-edge: rgba(92, 226, 198, 0.34);
  --tooltip-tier-core: rgba(62, 214, 183, 0.1);
  --tooltip-tier-name-glow: rgba(120, 255, 228, 0.24);
  --tooltip-tier-frame: rgba(102, 224, 191, 0.34);
}

.gameTooltipCard.isTierEpic {
  --tooltip-tier-glow: rgba(168, 97, 255, 0.26);
  --tooltip-tier-edge: rgba(210, 141, 255, 0.48);
  --tooltip-tier-core: rgba(166, 111, 255, 0.18);
  --tooltip-tier-name-glow: rgba(224, 188, 255, 0.4);
  --tooltip-tier-frame: rgba(212, 143, 255, 0.42);
}

.gameTooltipCard.isTierLegend {
  --tooltip-tier-glow: rgba(255, 149, 61, 0.36);
  --tooltip-tier-edge: rgba(255, 204, 112, 0.62);
  --tooltip-tier-core: rgba(255, 173, 84, 0.24);
  --tooltip-tier-name-glow: rgba(255, 223, 171, 0.5);
  --tooltip-tier-frame: rgba(255, 197, 105, 0.56);
}

.gameTooltipCard.isTierLegend::after,
.gameTooltipCard.isTierMythic::after {
  opacity: 1;
  animation: tooltipLegendSweep 3.8s linear infinite;
}

.gameTooltipCard.isTierMythic {
  --tooltip-tier-glow: rgba(255, 82, 116, 0.44);
  --tooltip-tier-edge: rgba(255, 132, 170, 0.72);
  --tooltip-tier-core: rgba(255, 109, 162, 0.3);
  --tooltip-tier-name-glow: rgba(255, 197, 219, 0.56);
  --tooltip-tier-frame: rgba(255, 143, 184, 0.62);
}

.gameTooltipCard.isTierCommon {
  --tooltip-tier-glow: rgba(69, 96, 140, 0.08);
  --tooltip-tier-edge: rgba(186, 168, 110, 0.26);
  --tooltip-tier-core: rgba(255, 226, 149, 0.04);
  --tooltip-tier-name-glow: rgba(255, 245, 202, 0.12);
  --tooltip-tier-frame: rgba(210, 188, 126, 0.24);
}

.gameTooltipBackdrop,
.gameTooltipBorder {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gameTooltipBackdrop {
  background: linear-gradient(180deg, rgba(61, 127, 217, 0.36) 0%, rgba(42, 85, 146, 0.22) 11%, transparent 28%), radial-gradient(circle at 50% 0%, rgba(86, 167, 255, 0.24), transparent 45%), radial-gradient(circle at 50% 14%, var(--tooltip-tier-core), transparent 52%), linear-gradient(180deg, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0.24) 100%);
}

.gameTooltipBorder {
  border: 1px solid var(--tooltip-tier-edge);
  box-shadow: inset 0 0 0 1px rgba(77, 59, 15, 0.92), inset 0 0 0 3px rgba(255, 224, 132, 0.08), inset 0 0 18px var(--tooltip-tier-glow);
}

.gameTooltipBody {
  position: relative;
  z-index: 1;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
}

.gameTooltipHeader {
  display: block;
}

.gameTooltipEyebrow {
  margin-bottom: 4px;
  color: #f0dc9a;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(240, 220, 154, 0.18);
}

.gameTooltipEyebrow.isCompare {
  color: #72ff84;
  text-shadow: 0 0 8px rgba(114, 255, 132, 0.2);
}

.gameTooltipName {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  text-align: left;
  text-shadow: 0 0 8px var(--tooltip-tier-name-glow), 0 1px 0 rgba(0, 0, 0, 0.72);
  word-break: break-word;
}

.gameTooltipCard.isTierCommon .gameTooltipName {
  font-size: 15px;
}

.gameTooltipCard.isTierMagic .gameTooltipName {
  text-shadow: 0 0 10px var(--tooltip-tier-name-glow), 0 1px 0 rgba(0, 0, 0, 0.72);
}

.gameTooltipCard.isTierRare .gameTooltipName {
  text-shadow: 0 0 12px var(--tooltip-tier-name-glow), 0 1px 0 rgba(0, 0, 0, 0.72);
}

.gameTooltipCard.isTierEpic .gameTooltipName {
  text-shadow: 0 0 14px var(--tooltip-tier-name-glow), 0 1px 0 rgba(0, 0, 0, 0.72);
}

.gameTooltipCard.isTierLegend .gameTooltipName,
.gameTooltipCard.isTierMythic .gameTooltipName {
  letter-spacing: 0.03em;
  animation: tooltipTitleBreath 2.9s ease-in-out infinite;
}

.gameTooltipCard.isTierMythic .gameTooltipName {
  animation-duration: 2.4s;
}

@keyframes tooltipTitleBreath {
  0%,
  100% {
    filter: brightness(1);
    text-shadow: 0 0 14px var(--tooltip-tier-name-glow), 0 1px 0 rgba(0, 0, 0, 0.72);
  }

  50% {
    filter: brightness(1.08);
    text-shadow: 0 0 18px var(--tooltip-tier-name-glow), 0 0 6px rgba(255, 242, 201, 0.2), 0 1px 0 rgba(0, 0, 0, 0.72);
  }
}

.gameTooltipPreview {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.gameTooltipIconFrame {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  padding: 2px;
  border: 1px solid var(--tooltip-tier-frame);
  background: linear-gradient(180deg, rgba(47, 68, 101, 0.58), rgba(16, 20, 28, 0.82));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 14px var(--tooltip-tier-glow);
}

.gameTooltipCard.isTierEpic .gameTooltipIconFrame,
.gameTooltipCard.isTierLegend .gameTooltipIconFrame,
.gameTooltipCard.isTierMythic .gameTooltipIconFrame {
  background: linear-gradient(180deg, rgba(77, 94, 138, 0.74), rgba(16, 20, 28, 0.84));
}

.gameTooltipIcon {
  width: 68px;
  height: 68px;
  border: 1px solid #8b7a45;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 16%), linear-gradient(135deg, #2f2a1a 0%, #17130c 54%, #090806 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(243, 224, 152, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.56);
}

.gameTooltipIcon::before,
.gameTooltipIcon::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.gameTooltipIcon::before {
  inset: 2px;
  border: 1px solid rgba(243, 224, 152, 0.1);
}

.gameTooltipIcon::after {
  inset: 0;
  background: linear-gradient(180deg, rgba(88, 148, 216, 0.18), transparent 24%), radial-gradient(circle at 50% 0%, rgba(99, 176, 255, 0.2), transparent 44%);
}

.gameTooltipIconImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
}

.gameTooltipPreviewMeta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  color: #f2ead3;
  font-size: 12px;
  line-height: 1.2;
  padding-top: 2px;
  align-content: center;
  justify-content: center;
}

.gameTooltipPreviewLine {
  display: block;
  color: #d1d9eb;
  text-align: left;
  min-height: 16px;
}

.gameTooltipPreviewLine span {
  color: #9fa8c1;
}

.gameTooltipPreviewLine strong {
  color: #f0e5c0;
  font-weight: 700;
}

.gameTooltipTitle {
  margin-top: 8px;
  color: #77b8ff;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(56, 135, 255, 0.2);
}

.gameTooltipTitleDesc {
  color: #f2d46d;
  text-shadow: 0 0 8px rgba(255, 210, 92, 0.16);
}

.gameTooltipSection {
  display: grid;
  gap: 3px;
  margin-top: 5px;
}

.gameTooltipDescBlock {
  margin-top: auto;
}

.gameTooltipStat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.38);
  padding: 1px 0;
  min-height: 16px;
}

.gameTooltipStatValue {
  display: block;
  color: #e7edf9;
  word-break: break-word;
  text-align: left;
  line-height: 1.3;
}

.gameTooltipDivider {
  height: 1px;
  margin-top: 8px;
  background: linear-gradient(90deg, transparent, rgba(255, 221, 122, 0.56), transparent);
}

.gameTooltipTextSection {
  gap: 2px;
}

.gameTooltipTextRow {
  display: block;
  color: #d8dfef;
  font-size: 12px;
  line-height: 1.4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
  min-height: 1.4em;
}

.gameTooltipTextRow.isBlank {
  min-height: 0.9em;
}

.gameTooltipTextRow.isHeading {
  margin-top: 2px;
}

.gameTooltipTextValue {
  color: #cdd6ea;
  word-break: break-word;
  text-align: left;
  white-space: pre-wrap;
}

.gameTooltipTextRow.isHeading .gameTooltipTextValue {
  color: #36e8ff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
}

.gameSuitCard {
  position: relative;
  width: 224px;
  flex: 0 0 224px;
  padding: 10px 12px 12px;
  border: 1px solid #8f7d38;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(12, 17, 28, 0.98), rgba(6, 8, 12, 0.98));
  box-shadow: inset 0 0 0 1px rgba(238, 223, 150, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.gameSuitHeader {
  color: #efe467;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  word-break: break-word;
}

.gameSuitSection {
  margin-top: 10px;
  display: grid;
  gap: 4px;
}

.gameSuitParts {
  color: #ff4b34;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.gameSuitPart {
  word-break: break-word;
}

.gameSuitDivider {
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(255, 195, 79, 0.9), rgba(255, 195, 79, 0.35), transparent);
}

.gameSuitEffects {
  color: #d7e0ef;
  font-size: 12px;
  line-height: 1.45;
}

.gameSuitEffect {
  min-height: 1.45em;
}

.gameSuitEffect.isBlank {
  min-height: 0.9em;
}

.gameSuitEffectValue {
  display: block;
  text-align: left;
  word-break: break-word;
  white-space: pre-wrap;
}

.gameSuitEffect.isHeading .gameSuitEffectValue {
  color: #36e8ff;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(54, 232, 255, 0.22);
}

@keyframes tooltipLegendSweep {
  from {
    transform: translate3d(-36%, 0, 0) skewX(-22deg);
  }

  to {
    transform: translate3d(320%, 0, 0) skewX(-22deg);
  }
}