/*
 * BoardGameDrop v2: "the board". Loaded last, over the shared Lofvi sheet.
 *
 * Three surfaces carry the whole site:
 * - the board: navy felt with a faint tile grid, where games are laid out
 *   (the home page opening, listing headers, the game photo field);
 * - the room: warm paper, the page itself;
 * - the tile: white, quarter-rounded cards for games and publishers; fog
 *   tiles for categories.
 * One coral tile tips out of the grid on the home board (the mark at table
 * size); elsewhere coral marks only a price that moved.
 * Titles are Archivo at 800, widened (font-stretch 112%, 118% on the home
 * board) with the kit's -0.01em tracking; text is Inter with the
 * single-storey a and tailed l (cv11, cv05) for a warmer, rounder voice;
 * the title's full stop is the coral tile.
 */

/* ── Type ─────────────────────────────────────────────────────────── */
:root {
  --board: #15203b;
  --board-cell: #1c2947;
  --board-line: rgb(255 255 255 / 6%);
  --board-text: #f6f4ef;
  --board-muted: #a9b1c4;
  --tile-shadow: 0 1px 0 rgb(21 32 59 / 4%), 0 10px 24px -14px rgb(21 32 59 / 28%);
}

body {
  font-feature-settings: "cv11", "cv05";
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: var(--display-stretch);
  letter-spacing: var(--tracking-display);
}

.card__name,
.facets__h,
.ftr__h,
.mega__h,
.tabs__heading,
.info-aside__contact .info-aside__contact-title,
.sgrid__h {
  letter-spacing: 0;
}

.card__name {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.eyebrow {
  letter-spacing: var(--tracking-caps);
}

/* Prices read as figures: heavy, tabular, tight. */
.card__price,
.pdp__lead-amount,
.offer__amount,
.pdp__price-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pdp__lead-amount {
  font-weight: 800;
}

/* The coral tile as a full stop. */
.tile-dot {
  display: inline-block;
  inline-size: 0.3em;
  block-size: 0.3em;
  margin-inline-start: 0.07em;
  border-radius: 25%;
  background: var(--coral);
  transform: rotate(var(--tilt)) translateY(-0.02em);
}

/* ── Logo ─────────────────────────────────────────────────────────── */
.wordmark,
.ftr__wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.brand-lockup {
  display: block;
  height: 30px;
  width: auto;
  color: var(--ink);
}

.brand-lockup__drop {
  fill: var(--coral);
}

.brand-lockup__drop-word {
  stroke: var(--coral);
}

.ftr__wordmark .brand-lockup {
  height: 26px;
}

@media (max-width: 768px) {
  .brand-lockup {
    height: 24px;
  }
}

/* ── Sample-data line ─────────────────────────────────────────────── */
.sample-data {
  border-bottom: 1px solid var(--line);
  background: var(--paper-card);
}

.sample-data__inner {
  display: block;
  padding-block: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.sample-data__label {
  margin-right: var(--space-2);
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

/* ── Controls ─────────────────────────────────────────────────────── */
.button,
.chip,
.facets__toggle,
.sort__select,
.hdr-search input,
.hdr-search,
.offer__cta {
  border-radius: var(--radius);
}

/* ── The board ────────────────────────────────────────────────────── */
.board {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 30%, rgb(255 255 255 / 5%), transparent 60%),
    linear-gradient(var(--board-line) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--board-line) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--board);
  color: var(--board-text);
}

.board a {
  color: inherit;
}

.board .eyebrow,
.board .crumbs,
.board .crumbs a {
  color: var(--board-muted);
}

.board .crumbs [aria-current] {
  color: var(--board-text);
}

.board h1,
.board h2 {
  color: var(--board-text);
}

/* Home opening */
.board--hero .board__inner {
  display: grid;
  gap: var(--space-10);
  padding-block: var(--space-12) var(--space-14);
}

@media (min-width: 1000px) {
  .board--hero .board__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: var(--space-16);
    align-items: center;
  }
}

.board__stats {
  margin: 0 0 var(--space-3);
  color: var(--board-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.board__title {
  font-stretch: var(--display-stretch-hero);
  max-width: 13ch;
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem);
  line-height: 0.98;
}

.picker {
  margin-top: var(--space-8);
}

.picker + .picker {
  margin-top: var(--space-6);
}

.picker__q {
  margin: 0 0 var(--space-3);
  color: var(--board-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

.picker__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A game tile you can press: paper face, navy edge below. */
.pick {
  display: grid;
  place-content: center;
  min-inline-size: 96px;
  block-size: 84px;
  padding: 0 var(--space-4);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 5px 0 #0a1124, 0 10px 20px -8px rgb(0 0 0 / 50%);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.board .pick {
  color: var(--ink);
}

.pick__big {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.pick__small {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
}

.pick:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 7px 0 #0a1124, 0 14px 24px -8px rgb(0 0 0 / 55%);
}

.pick:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #0a1124, 0 4px 10px -6px rgb(0 0 0 / 50%);
}

.pick:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.board__search {
  display: flex;
  align-items: center;
  max-inline-size: 30rem;
  margin-top: var(--space-8);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 12px;
  background: rgb(255 255 255 / 7%);
}

.board__search input {
  flex: 1;
  min-inline-size: 0;
  block-size: 52px;
  padding: 0 var(--space-4);
  border: 0;
  background: transparent;
  color: var(--board-text);
  font-size: var(--text-ui);
}

.board__search input::placeholder {
  color: var(--board-muted);
}

.board__search input:focus {
  outline: none;
}

.board__search:focus-within {
  border-color: var(--board-text);
}

.board__search button {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border: 0;
  background: transparent;
  color: var(--board-text);
  cursor: pointer;
}

/* The games on the board: a 3 x 3 grid; the last cell is the coral tile,
   tipped and dropped out of line. */
.board__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.board__cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--board-cell);
}

.board__game {
  display: block;
  block-size: 100%;
  border-radius: inherit;
}

.board__game .frame {
  --frame-pad: 0%;
  block-size: 100%;
  background: transparent;
}

/* The box art leaves room around the box: lift it to fill the cell. */
.board__game .frame img,
a:hover > .board__game .frame img {
  transform: scale(1.16);
  transition: transform var(--dur) var(--ease-out);
}

.board__game:hover .frame img {
  transform: translateY(-4px) scale(1.2);
}

.board__cell--drop {
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--board-cell);
}

.board__tile {
  inline-size: 50%;
  aspect-ratio: 1;
  border-radius: 25%;
  background: var(--coral);
  box-shadow: 0 18px 30px -10px rgb(0 0 0 / 60%);
  transform: translate(10%, 22%) rotate(var(--tilt));
}

@media (prefers-reduced-motion: no-preference) {
  .board__tile {
    animation: tile-drop 900ms var(--ease-out) 250ms both;
  }

  @keyframes tile-drop {
    from {
      transform: translate(0, -8%) rotate(0deg);
    }
  }
}

@media (max-width: 999px) {
  .board__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .board__cell:nth-child(n + 8) {
    display: none;
  }
}

@media (max-width: 560px) {
  .board--hero .board__inner {
    padding-block: var(--space-8) var(--space-10);
  }

  .pick {
    min-inline-size: 72px;
    block-size: 72px;
    padding: 0 var(--space-3);
  }

  .pick__big {
    font-size: 1.5rem;
  }

  .picker__tiles {
    gap: var(--space-2);
  }

  .board__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .board__cell:nth-child(n + 7) {
    display: none;
  }
}

/* ── Home: the other choices, as a slim strip ─────────────────────── */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-10);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.strip__group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
}

.strip__h {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.strip__list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.strip__chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-card);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.strip__chip:hover {
  border-color: var(--ink);
}

@media (max-width: 768px) {
  .strip__group {
    flex-direction: column;
    align-items: flex-start;
    inline-size: 100%;
  }

  .strip__list {
    inline-size: 100%;
  }
}

/* ── Home: game types as a tile board ─────────────────────────────── */
.types {
  padding-top: var(--space-12);
}

.types__board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .types__board {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 172px;
  }

  .types__cell--lead {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.type-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  block-size: 100%;
  min-block-size: 150px;
  padding: var(--space-5);
  overflow: hidden;
  border-radius: 14px;
  background: var(--tile);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.type-tile:hover {
  background: var(--tile-hover);
}

.type-tile__art {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  inline-size: 40%;
  max-inline-size: 104px;
  height: auto;
}

.types__cell--lead .type-tile__art {
  inline-size: 50%;
  max-inline-size: 240px;
}

.type-tile__name {
  position: relative;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.types__cell--lead .type-tile__name {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
}

.type-tile__count {
  position: relative;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ── Tiles: game and publisher cards ──────────────────────────────── */
.card {
  padding: var(--space-2) var(--space-2) var(--space-4);
  border-radius: 14px;
  background: var(--paper-card);
  box-shadow: var(--tile-shadow);
}

.card .frame {
  --frame-pad: 3%;
  border-radius: 10px;
}

.card__body,
.card__price {
  padding-inline: var(--space-2);
}

.frame {
  border-radius: var(--radius-lg);
}

.frame img {
  mix-blend-mode: normal;
}

.open__figure .frame,
.tile__type {
  background: var(--paper-card);
}

.tile__type {
  box-shadow: var(--tile-shadow);
}

.tile__type span {
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* ── Listing and publisher headers on the board ───────────────────── */
.board--head .ph {
  padding-block: var(--space-8) var(--space-10);
}

.board--head .ph__meta,
.board--head .ph__lede,
.board--head .brand-hero__facts {
  color: var(--board-muted);
}

.board--head .ph__lede {
  color: #d5d9e3;
}

.board--head .jump a {
  border-color: rgb(255 255 255 / 25%);
  color: var(--board-text);
}

.board--head .jump a:hover {
  border-color: var(--board-text);
}

.board--head .brand-mosaic .frame {
  background: var(--board-cell);
}

/* ── Game page: the box on the board ──────────────────────────────── */
.pdp .gallery__frame,
.pdp .gallery__main > .frame {
  background:
    radial-gradient(90% 70% at 50% 35%, rgb(255 255 255 / 7%), transparent 70%),
    linear-gradient(var(--board-line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--board-line) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--board);
  border-radius: 14px;
}

.pdp .gallery__thumb {
  background: var(--board);
  border-radius: 8px;
}

.gallery__main {
  position: relative;
}

.gallery__main > .bgd-deal--corner {
  z-index: 2;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
}

@media (max-width: 768px) {
  .gallery__main > .bgd-deal--lg {
    --deal-size: 64px;
    font-size: 20px;
  }
}

.pdp__lead-drop {
  margin-top: var(--space-2);
}

.choice__help {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

/* Edition chips are small tiles, the chosen one navy. */
.opt--chip {
  min-inline-size: 52px;
  border-radius: 10px;
  font-weight: 700;
}

/* Offer rows: the "checked" line gives way (wraps) so every shop button
   keeps the same place, right-aligned, in every row. */
.offer__foot {
  flex-wrap: nowrap;
}

@media (max-width: 560px) {
  .offer__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
}

.offer__checked {
  flex: 1 1 auto;
  min-width: 0;
}

.offer__cta {
  flex: none;
  background: var(--paper-card);
}

.shops-slot {
  border-radius: 14px;
}

/* ── Quiet lines stay in the text weight (and in Inter) ─────────────── */
.brand-tile__name,
.info-aside__contact .info-aside__contact-title,
.pdp__designer,
.pdp__description,
.mega__brandlist a,
.mnav__link,
.empty-state__title,
.letter-group__name,
.dz-head__lede,
.dz-card__name,
.acct-item__name,
.acct-confirm__product {
  font-family: var(--font-body);
  font-style: normal;
  font-stretch: 100%;
  letter-spacing: 0;
}

.pdp__designer {
  font-size: var(--text-ui);
}

.dz-head__lede {
  font-weight: var(--fw-regular);
  font-size: var(--text-lead);
}

/* ── How it works: numbers on small navy tiles ────────────────────── */
.how li::before {
  border: 0;
  border-radius: var(--tile-radius);
  background: var(--ink);
  color: var(--paper-card);
  font-weight: 800;
}

/* Section heads: the "all …" link sits on the title's baseline. */
.block__head {
  align-items: baseline;
}

/* Type tiles on phones: the lead tile takes the full row; long compound
   names (Strategiespellen) hyphenate instead of breaking mid-letter. */
.type-tile__name {
  overflow-wrap: normal;
  hyphens: auto;
}

@media (max-width: 899px) {
  .types__cell--lead {
    grid-column: span 2;
  }

  .type-tile {
    min-block-size: 132px;
    padding: var(--space-4);
  }

  .type-tile__name {
    font-size: 1.0625rem;
  }

  .types__cell--lead .type-tile__name {
    font-size: 1.5rem;
  }

  .type-tile__art {
    inline-size: 34%;
    max-inline-size: 72px;
  }

  .types__cell--lead .type-tile__art {
    max-inline-size: 110px;
  }
}

.board--head .brand-mosaic .frame {
  --frame-pad: 2%;
}

/* ── Footer: the page ends on the board ───────────────────────────── */
.ftr {
  --paper-soft: var(--board);
  --text: var(--board-text);
  --text-body: #d5d9e3;
  --text-muted: var(--board-muted);
  --ink: var(--board-text);
  --line: rgb(255 255 255 / 12%);
  background:
    linear-gradient(var(--board-line) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--board-line) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--board);
}

main:has(> .band:last-child) + .ftr {
  border-top: 0;
}

.cat-index {
  padding-top: var(--space-10);
}

/* Phones already have the search field in the header. */
@media (max-width: 700px) {
  .board__search {
    display: none;
  }
}

/* The filter panel is a white sheet over the room, so it reads apart
   from the game tiles under it. */
@media (min-width: 1024px) {
  .facets__body {
    background: var(--paper-card);
    box-shadow: var(--shadow-raised);
  }
}