/* Technology information popover: in-game composition and responsive sizing. */
.info-popover {
  width: min(26rem, calc(100vw - 1rem));
  max-height: min(34rem, calc(100dvh - 1rem));
  overflow: hidden;
  color: #e8f4f7;
  background: rgba(4, 17, 24, .97);
  border: 1px solid rgba(181, 205, 213, .6);
  border-top: 1px solid rgba(181, 205, 213, .72);
  clip-path: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 18px 45px rgba(0, 0, 0, .42);
  opacity: 0;
  pointer-events: none;
  transform: translateY(.6rem) scale(.96);
  transform-origin: top left;
  transition:
    opacity 160ms cubic-bezier(.16, 1, .3, 1),
    transform 160ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 160ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s 160ms;
  will-change: opacity, transform, box-shadow;
}

.info-popover.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  box-shadow: 7px 9px 0 rgba(0, 0, 0, .36), 0 22px 55px rgba(0, 0, 0, .48);
  transition:
    opacity 180ms cubic-bezier(.16, 1, .3, 1),
    transform 180ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 180ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s 0s;
}

.info-popover.is-closing {
  opacity: 0;
  pointer-events: none;
  transform: translateY(.35rem) scale(.985);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 12px 30px rgba(0, 0, 0, .35);
  transition:
    opacity 120ms cubic-bezier(.4, 0, .2, 1),
    transform 120ms cubic-bezier(.4, 0, .2, 1),
    box-shadow 120ms cubic-bezier(.4, 0, .2, 1);
}

.info-popover > header {
  position: relative;
  min-height: 4.15rem;
  padding: .55rem .7rem .5rem;
  background: rgba(7, 27, 35, .96);
  border-bottom: 3px solid rgba(213, 227, 231, .72);
}

.info-popover > header::before {
  position: absolute;
  inset: 0;
  background: url("../../../Image/Background/technology-info-header-bg.png") top left / auto repeat;
  opacity: .18;
  content: "";
  pointer-events: none;
}

.info-popover > header > div,
.info-popover > header > button {
  position: relative;
  z-index: 1;
}

.info-popover > header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.info-popover > header h2 {
  order: 1;
  max-width: 21.5rem;
  color: #f3fbfd;
  font-size: clamp(1.08rem, 1.25vw, 1.5rem);
  font-weight: 520;
  line-height: 1.06;
}

.info-popover > header p {
  order: 2;
  margin: .35rem 0 0;
  color: #c9dee3;
  font-size: clamp(.72rem, .82vw, .9rem);
  font-weight: 480;
  letter-spacing: .01em;
  text-transform: none;
}

.info-popover:not(.is-pinned) > header .icon-close {
  display: none;
}

.info-popover-content {
  max-height: min(29.5rem, calc(100dvh - 5rem));
  padding: 0;
  overflow-y: auto;
}

.info-game-preview {
  position: relative;
  width: 100%;
  min-height: 11.5rem;
  display: grid;
  place-items: center start;
  background:
    url("../../../Image/Background/technology-info-bg.png") center / cover no-repeat,
    #3e4a52;
  border-bottom: 1px solid rgba(190, 208, 215, .28);
}

.info-game-preview > img {
  width: 7.25rem;
  height: 7.25rem;
  margin-left: 2.15rem;
  object-fit: contain;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .45));
}

.info-game-stats {
  position: absolute;
  top: .72rem;
  right: .72rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
  min-width: 12.5rem;
}

.info-game-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .42rem .55rem .38rem;
  color: #c8dde2;
}

.info-game-stat span {
  padding: 0 0 0 .25rem;
  font-size: .76rem;
  line-height: 1.05;
}

.info-game-stat-value {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.info-game-stat strong {
  padding: 0;
  color: #f4fdff;
  font-size: 1.6rem;
  font-weight: 420;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.info-game-stat-value img {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

.info-game-description {
  margin: 0;
  padding: .72rem .85rem .65rem;
  color: #d7e8eb;
  background: rgba(2, 10, 15, .88);
  border-bottom: 1px solid rgba(196, 216, 221, .34);
  font-size: clamp(.82rem, .9vw, .98rem);
  line-height: 1.28;
}

.info-game-materials {
  padding: .48rem .5rem .55rem;
  margin: 0;
  display: grid;
  gap: 2px;
  background: rgba(2, 12, 18, .98);
  list-style: none;
}

.info-game-materials li {
  position: relative;
  min-height: 2.3rem;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  padding: .18rem .55rem;
  align-items: center;
  gap: .45rem;
  color: #e8e4e8;
  background:
    linear-gradient(rgba(230, 240, 244, .75), rgba(230, 240, 244, .75)),
    linear-gradient(rgba(230, 240, 244, .75), rgba(230, 240, 244, .75)),
    linear-gradient(rgba(230, 240, 244, .75), rgba(230, 240, 244, .75)),
    linear-gradient(rgba(230, 240, 244, .75), rgba(230, 240, 244, .75)),
    linear-gradient(90deg, rgba(45, 55, 62, .72) 0 76%, rgba(30, 38, 44, .9) 76%);
  background-position:
    -.1rem -.1rem,
    calc(100% + .1rem) -.1rem,
    -.1rem calc(100% + .1rem),
    calc(100% + .1rem) calc(100% + .1rem),
    0 0;
  background-size: .22rem .22rem, .22rem .22rem, .22rem .22rem, .22rem .22rem, 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(165, 178, 188, .35);
}

.info-game-materials img {
  width: 1.8rem;
  height: 1.8rem;
  object-fit: contain;
}

.info-game-materials span {
  font-size: .8rem;
}

.info-game-materials strong {
  min-width: 3.4rem;
  color: #d8e4e8;
  font-size: .9rem;
  font-weight: 520;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .info-popover { transition-duration: 1ms; }
}