/* The theme owns outer alignment; the widget owns its container-based layout. */
:where(.tagsmod-games-widget) {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}
.tagsmod-games-widget { padding-block: 24px; container: tagsmod-widget / inline-size; }
.zbui.tagsmod-games-widget__card {
  --widget-count-size: 48px;
  --wall-cover-width: 50px;
  --wall-gap: 5px;
  --wall-batch-limit: 4;
  --wall-rotate-x: 3deg;
  --wall-rotate-y: -4deg;
  --wall-rotate-z: -1.5deg;
  --wall-focus-opacity: .94;
  --wall-edge-opacity: .72;
  display: grid;
  grid-template-areas: "identity identity" "stats action" "gallery gallery";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 16px;
  padding: 20px;
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-xl);
  background: var(--zb-surface-raised);
  color: var(--zb-text);
  box-shadow: var(--zb-shadow-card), var(--zb-inset-highlight-faint);
}
.tagsmod-games-widget__identity { grid-area: identity; display: flex; align-items: center; gap: 14px; min-width: 0; }
[data-bs-theme="dark"] .zbui.tagsmod-games-widget__card {
  --wall-focus-opacity: .88;
  --wall-edge-opacity: .64;
}
.tagsmod-games-widget__symbol {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-lg);
  color: var(--zb-primary-soft-text);
  background: var(--zb-surface-sunken);
  box-shadow: var(--zb-inset-highlight);
}
.tagsmod-games-widget__icon { width: 24px; height: 24px; }
.tagsmod-games-widget__copy { min-width: 0; }
.tagsmod-games-widget__card .tagsmod-games-widget__title {
  margin: 0;
  color: var(--zb-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.tagsmod-games-widget__card .tagsmod-games-widget__description {
  margin: 8px 0 0;
  color: var(--zb-text-soft);
  font-size: 14px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.tagsmod-games-widget__card .tagsmod-games-widget__promotion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--zb-text-soft);
  font-size: 12px;
  line-height: 1.5;
}
.tagsmod-games-widget__badge {
  padding: 3px 8px;
  border-radius: var(--zb-radius-pill);
  color: var(--zb-primary-soft-text);
  background: var(--zb-primary-soft);
  font-weight: 600;
}
.tagsmod-games-widget__stats {
  grid-area: stats;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  color: var(--zb-text-soft);
  font-size: 14px;
  line-height: 1.5;
}
.tagsmod-games-widget__stats-label { white-space: nowrap; }
.tagsmod-games-widget__count {
  display: inline-grid;
  width: max-content;
  max-width: 100%;
  border-radius: var(--zb-radius-xs);
  color: var(--zb-primary-soft-text);
  font-size: var(--widget-count-size);
  /* Size against the statistics column, including without JavaScript. */
  font-size: min(var(--widget-count-size), calc(180cqi / var(--count-length, 5)));
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1.05;
  white-space: nowrap;
}
.tagsmod-games-widget__count-reserve,
.tagsmod-games-widget__count-digits { grid-area: 1 / 1; text-align: start; }
.tagsmod-games-widget__count-reserve { visibility: hidden; }
.tagsmod-games-widget__screen-reader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.tagsmod-games-widget__gallery { grid-area: gallery; position: relative; min-width: 0; }
.tagsmod-games-widget__stage {
  position: relative;
  width: 100%;
  height: 144px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 clamp(32px, 12%, 64px));
}
.tagsmod-games-widget__wall {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--wall-cover-width);
  grid-template-rows: repeat(2, calc(var(--wall-cover-width) * 1.5));
  gap: var(--wall-gap);
  width: max-content;
  transform: translate(-50%, -50%) perspective(1000px) rotateX(var(--wall-rotate-x)) rotateY(var(--wall-rotate-y)) rotateZ(var(--wall-rotate-z));
}
.tagsmod-games-widget__wall[data-slot-count="1"] { grid-template-rows: calc(var(--wall-cover-width) * 1.5); }
.tagsmod-games-widget__cover {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-md);
  background: var(--zb-surface-sunken);
  box-shadow: var(--zb-shadow-card);
  opacity: var(--wall-edge-opacity);
}
.tagsmod-games-widget__cover[data-focus="true"] { opacity: var(--wall-focus-opacity); }
.tagsmod-games-widget__cover img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tagsmod-games-widget__cover img[data-layer="incoming"] { z-index: 1; will-change: opacity, transform; }
.tagsmod-games-widget__card [hidden] { display: none !important; }
.tagsmod-games-widget__card .tagsmod-games-widget__motion {
  position: absolute;
  right: 0;
  bottom: -8px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--zb-border);
  border-radius: 50%;
  background: var(--zb-surface-raised);
  color: var(--zb-text-soft);
  box-shadow: var(--zb-shadow-card);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}
.tagsmod-games-widget__motion svg { grid-area: 1 / 1; width: 14px; height: 14px; }
.tagsmod-games-widget__motion .tagsmod-games-widget__play-icon,
.tagsmod-games-widget__motion[data-paused="true"] .tagsmod-games-widget__pause-icon { display: none; }
.tagsmod-games-widget__motion[data-paused="true"] .tagsmod-games-widget__play-icon { display: block; }
.tagsmod-games-widget__card .tagsmod-games-widget__action {
  grid-area: action;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--zb-radius-md);
  background: var(--zb-primary);
  color: var(--zb-on-primary);
  box-shadow: var(--zb-shadow-action);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}
.tagsmod-games-widget__arrow { width: 18px; height: 18px; transition: transform 180ms cubic-bezier(.22, 1, .36, 1); }
.tagsmod-games-widget__action:focus-visible,
.tagsmod-games-widget__motion:focus-visible { outline: 2px solid var(--zb-primary-soft-text); outline-offset: 4px; }
.tagsmod-games-widget__card .tagsmod-games-widget__action:active { transform: scale(.98); }
.zbui.tagsmod-games-widget__card--no-gallery { grid-template-areas: "identity identity" "stats action"; }
.zbui.tagsmod-games-widget__card--no-stats { grid-template-areas: "identity" "gallery" "action"; grid-template-columns: minmax(0, 1fr); }
.zbui.tagsmod-games-widget__card--no-gallery.tagsmod-games-widget__card--no-stats { grid-template-areas: "identity" "action"; }

@media (hover: hover) and (pointer: fine) {
  .tagsmod-games-widget__card .tagsmod-games-widget__action:hover { color: var(--zb-on-primary); background: var(--zb-primary-hover); }
  .tagsmod-games-widget__action:hover .tagsmod-games-widget__arrow { transform: translateX(3px); }
  .tagsmod-games-widget__card .tagsmod-games-widget__motion:hover { color: var(--zb-text); background: var(--zb-surface-sunken); }
}
@container tagsmod-widget (min-width: 680px) {
  .zbui.tagsmod-games-widget__card {
    --widget-count-size: 56px;
    --wall-cover-width: 58px;
    --wall-gap: 6px;
    --wall-batch-limit: 6;
    --wall-rotate-x: 6deg;
    --wall-rotate-y: -8deg;
    --wall-rotate-z: -3deg;
    grid-template-areas: "identity identity gallery" "stats action gallery";
    grid-template-columns: 164px 124px minmax(0, 1fr);
    gap: 16px 20px;
    padding: 24px;
  }
  .tagsmod-games-widget__identity { gap: 14px; }
  .tagsmod-games-widget__symbol { flex-basis: 44px; width: 44px; height: 44px; }
  .tagsmod-games-widget__card .tagsmod-games-widget__title { font-size: 22px; }
  .tagsmod-games-widget__stage { height: 168px; }
  .tagsmod-games-widget__card .tagsmod-games-widget__action { padding-inline: 16px; }
  .zbui.tagsmod-games-widget__card.tagsmod-games-widget__card--no-gallery { grid-template-areas: "identity stats" "identity action"; grid-template-columns: minmax(0, 1fr) 180px; }
  .zbui.tagsmod-games-widget__card.tagsmod-games-widget__card--no-stats { grid-template-areas: "identity gallery" "action gallery"; grid-template-columns: 308px minmax(0, 1fr); }
  .tagsmod-games-widget__card--no-stats .tagsmod-games-widget__action { justify-self: start; }
  .zbui.tagsmod-games-widget__card--no-gallery.tagsmod-games-widget__card--no-stats { grid-template-areas: "identity action"; grid-template-columns: minmax(0, 1fr) auto; }
}
@container tagsmod-widget (min-width: 1040px) {
  .zbui.tagsmod-games-widget__card {
    --widget-count-size: 64px;
    --wall-cover-width: 64px;
    --wall-batch-limit: 8;
    grid-template-areas: "identity stats gallery" "identity action gallery";
    grid-template-columns: minmax(0, 1.45fr) 180px minmax(0, 1.55fr);
    column-gap: 24px;
  }
  .tagsmod-games-widget__identity { gap: 16px; }
  .tagsmod-games-widget__symbol { flex-basis: 48px; width: 48px; height: 48px; border-radius: var(--zb-radius-xl); }
  .tagsmod-games-widget__icon { width: 26px; height: 26px; }
  .tagsmod-games-widget__card .tagsmod-games-widget__title { font-size: 26px; }
  .tagsmod-games-widget__stats { align-self: end; }
  .tagsmod-games-widget__card .tagsmod-games-widget__action { align-self: start; }
  .tagsmod-games-widget__stage { height: 184px; }
  .tagsmod-games-widget__card--no-gallery.tagsmod-games-widget__card--no-stats .tagsmod-games-widget__action { align-self: center; }
}
@container tagsmod-widget (max-width: 359px) {
  .zbui.tagsmod-games-widget__card { gap: 16px 12px; padding: 16px; }
  .tagsmod-games-widget__identity { align-items: flex-start; gap: 12px; }
  .tagsmod-games-widget__symbol { flex-basis: 36px; width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .tagsmod-games-widget__card .tagsmod-games-widget__action,
  .tagsmod-games-widget__card .tagsmod-games-widget__motion,
  .tagsmod-games-widget__arrow { transition: none; }
  .tagsmod-games-widget__card .tagsmod-games-widget__action:active,
  .tagsmod-games-widget__action:hover .tagsmod-games-widget__arrow { transform: none; }
}