/* ============================================================
   yamgame.com
   Ground colour is ube - purple yam flesh - because the name is
   the only thing every game here has in common.
   ============================================================ */

:root {
  --grape:       #4C1D8F;
  --grape-deep:  #2E0F5E;
  --flesh:       #FFEFDC;
  --zest:        #FF8A3D;
  --mint:        #4BE5B0;

  --haze:        rgba(255, 239, 220, .62);
  --whisper:     rgba(255, 239, 220, .13);

  --shell:   min(100% - 3rem, 1360px);
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --text:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--grape);
  color: var(--flesh);
  font-family: var(--text);
  font-size: clamp(1rem, .96rem + .28vw, 1.1rem);
  line-height: 1.55;
  overflow-x: hidden;
  /* A soft bloom behind the hero so the flat purple has some depth. */
  background-image:
    radial-gradient(120% 70% at 50% -10%, #6C33C4 0%, rgba(108, 51, 196, 0) 62%),
    radial-gradient(90% 55% at 88% 8%, rgba(255, 138, 61, .22) 0%, rgba(255, 138, 61, 0) 60%);
  background-repeat: no-repeat;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--zest);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 50%; top: .6rem;
  transform: translate(-50%, -300%);
  background: var(--flesh); color: var(--grape-deep);
  padding: .65rem 1.1rem; border-radius: 999px;
  font-weight: 600; text-decoration: none; z-index: 99;
}
.skip:focus { transform: translate(-50%, 0); }

/* ---------- top bar ---------------------------------------- */

.topbar {
  width: var(--shell);
  margin: 0 auto;
  padding: 1.1rem 0 .4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar__mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  text-decoration: none;
}

.topbar__jump {
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--whisper);
  background: rgba(255, 239, 220, .06);
  transition: background .18s ease, border-color .18s ease;
}
.topbar__jump:hover {
  background: rgba(255, 239, 220, .13);
  border-color: rgba(255, 239, 220, .3);
}

/* ---------- the mark's grid cell ---------------------------- */

/* On mobile this is just the first item in the stack, so it needs
   its own bottom margin. On desktop it becomes one bento cell among
   the game cards (see the grid-template-areas below), where the
   grid's own gap already provides that spacing. */
.board-cell {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* The wordmark is a playing field, painted by a dot that rolls across
   one row at a time. app.js sets grid-template-columns and
   aspect-ratio inline once it knows its shape - the values below are
   only the fallback for the instant before that script runs. */
.board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(2px, .55vw, 5px);
  aspect-ratio: 15 / 11;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

/* Unlit cells stay almost invisible so the letters carry the mark; the
   board only shows itself in the dot's trail as it rolls past. */
.cell {
  border-radius: 22%;
  background: rgba(255, 239, 220, .04);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.cell.swept { background: rgba(255, 239, 220, .085); }
.cell.lit   { background: var(--flesh); }
.cell.lit.warm { background: var(--zest); }
.cell.head {
  background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35), 0 0 18px 4px rgba(255, 210, 120, .75);
  transform: scale(1.18);
  transition: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: var(--zest);
  color: #2A0F00;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: 0 10px 0 -2px rgba(0, 0, 0, .28);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 6px 0 -2px rgba(0, 0, 0, .28); }

.btn--quiet {
  background: transparent;
  color: var(--haze);
  font-family: var(--text);
  font-weight: 500;
  font-size: .98rem;
  box-shadow: none;
  padding: 0 .4rem;
  min-height: 2.6rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 239, 220, .3);
}
.btn--quiet:hover { color: var(--flesh); text-decoration-color: currentColor; }
.btn--quiet:active { transform: none; box-shadow: none; }

/* ---------- the shelf -------------------------------------- */

.shelf {
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) 0 clamp(3rem, 2rem + 5vw, 6rem);
  scroll-margin-top: 1rem;
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, .8rem + 1.2vw, 1.5rem);
}

/* ---------- a game ----------------------------------------- */

/* The art carries each card now - name, status and buttons are the
   caption underneath, not a competing block of copy beside a small
   icon. */
.game {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--tint);
  color: var(--ink);
  overflow: hidden;
}

.art {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  background: var(--flesh);
}
.art img {
  width: 58%;
  height: 58%;
  object-fit: contain;
  display: block;
}
/* Art that already has its own finished background (a brand mark,
   key art) fills the square edge to edge instead of sitting on the
   cream plate. */
.art--cover { background: none; }
.art--cover img { width: 100%; height: 100%; object-fit: cover; }
.art__letter {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.5rem, 3rem + 3vw, 5rem);
  line-height: 1;
  color: var(--tint);
}

.game__info {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.1rem, .9rem + 1.2vw, 1.5rem);
}

.game__head { min-width: 0; }

.game__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.game__sub {
  margin: .25rem 0 0;
  font-size: .9rem;
  color: var(--accent);
  font-weight: 600;
}

.game__actions {
  margin-top: .3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
}
.game .btn { background: var(--accent); color: #17100A; }
.game .btn--quiet { background: none; color: var(--ink); opacity: .75; }

/* The last tile is not a game - it says so by being an outline. */
.more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem);
  border-radius: 22px;
  border: 2px dashed rgba(255, 239, 220, .26);
}
.more h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.05rem + .8vw, 1.5rem);
  letter-spacing: -.02em;
}
.more__text { display: flex; flex-direction: column; gap: .6rem; }
.more p { margin: 0; color: var(--haze); max-width: 44ch; }

/* ---------- footer ----------------------------------------- */

.foot {
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0 clamp(2.5rem, 2rem + 3vw, 4rem);
  border-top: 1px solid var(--whisper);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  justify-content: space-between;
}
.foot__line { margin: 0; color: var(--haze); font-size: .95rem; max-width: 46ch; }
.foot__line a { color: var(--flesh); text-underline-offset: 3px; }

/* ---------- wider screens ---------------------------------- */

/* A bento grid: the mark sits in its own cell among the game cards
   instead of as a full-width banner above them. This layout is
   hand-tuned for the current four games, not data-driven - adding or
   removing a game means updating the areas below too. */
@media (min-width: 760px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "mp   mark mark gta"
      "mp   mark mark gta"
      "si   pg   pg   more";
  }

  .board-cell { grid-area: mark; padding-bottom: 0; }
  /* The mark is one cell among peers now, not a full-width banner -
     let it fill the cell instead of capping at the old hero width. */
  .board { max-width: 720px; }

  .grid li[data-game="maze-paint"]  { grid-area: mp; }
  .grid li[data-game="gta6codes"]   { grid-area: gta; }
  .grid li[data-game="sort-item"]   { grid-area: si; }
  .grid li[data-game="pixel-games"] { grid-area: pg; }
  .more { grid-area: more; }

  /* The two live games get the tall cells and keep their art square;
     the two coming-soon cards and the mark's cell are flatter, so
     their art fills whatever height that shape leaves instead of
     staying strictly square and leaving dead space. */
  .grid li[data-game="sort-item"] .art,
  .grid li[data-game="pixel-games"] .art {
    aspect-ratio: auto;
    flex: 1;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .cell.head { transform: none; box-shadow: none; }
}