/* ==========================================================================
   Try it / Coba sendiri (option B): shared styles for the hub and the five
   game pages. Same system as field.css: cool paper, ink, ONE cobalt accent,
   sharp shapes, pill buttons only, hairlines over cards. Tag stamps (.stamp)
   live in field.css. Game styles: plan.css, sort.css, sea.css, quiz.css, mix.css.
   ========================================================================== */

main [hidden] { display: none !important; }
button.link-u { border: 0; background: none; padding-inline: 0; cursor: pointer; }
.link-u--on-cobalt { color: var(--on-cobalt); }
.link-u--on-cobalt::after { background: var(--on-cobalt); }
@media (hover: hover) { .link-u.link-u--on-cobalt:hover { color: var(--on-cobalt); } }
.btn--ghost-on-cobalt { color: var(--on-cobalt); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.btn--ghost-on-cobalt::before { background: rgba(255, 255, 255, .14); }

/* ---------- Notes and source links ---------- */
.play-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 64ch;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.play-note i { flex: none; margin-top: 3px; font-size: 16px; color: var(--cobalt-deep); }
.play-note strong { font-weight: 600; color: var(--ink); }
.src-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 14px/1.3 var(--sans);
  color: var(--cobalt-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) { .src-link:hover { color: var(--ink); } }
.game__noscript { padding: 20px; background: var(--paper-2); color: var(--ink); }
.closing__lede { max-width: 52ch; margin: -8px 0 clamp(32px, 5vh, 52px); font-size: 19px; line-height: 1.55; color: var(--ink-2); }

/* ===========================================================================
   HUB: five game cards in an asymmetric grid
   =========================================================================== */
.games { padding-bottom: clamp(48px, 8vh, 96px); }
.games__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--gutter);
}
.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  transition: box-shadow .25s ease, transform .2s var(--ease-out);
}
.gcard__media { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 16 / 10; }
.gcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.gcard__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 26px); }
.gcard__title { font: 400 clamp(1.5rem, 2.3vw, 2.2rem)/1.08 var(--serif); letter-spacing: -.016em; text-wrap: balance; }
.gcard__link { color: inherit; text-decoration: none; }
.gcard__link::after { content: ""; position: absolute; inset: 0; }
.gcard__blurb { max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.gcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; font: 500 14px/1.2 var(--sans); color: var(--ink-2); }
.gcard__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cobalt-deep); }
.gcard__go i { transition: transform .4s var(--ease-out); }
.gcard:has(.gcard__link:focus-visible) { outline: 2px solid var(--cobalt-deep); outline-offset: 3px; }
.gcard__link:focus-visible { outline: none; }
.gcard:active { transform: scale(.992); }
@media (hover: hover) and (pointer: fine) {
  .gcard:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .gcard:hover .gcard__media img { transform: scale(1.04); }
  .gcard:hover .gcard__go i { transform: translateX(4px); }
}
/* Layout: plan tall on the left, sort + sea stacked on the right, quiz + mix below. */
.gcard--plan { grid-column: 1 / span 7; grid-row: span 2; }
.gcard--plan .gcard__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 320px; }
.gcard--plan .gcard__body { flex: 0 0 auto; }
.gcard--plan .gcard__title { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.gcard--sort, .gcard--sea { grid-column: 8 / span 5; flex-direction: row; }
.gcard--sort .gcard__media, .gcard--sea .gcard__media { flex: 0 0 44%; aspect-ratio: auto; }
.gcard--quiz { grid-column: 1 / span 5; }
.gcard--mix { grid-column: 6 / span 7; }
.gcard--quiz .gcard__media, .gcard--mix .gcard__media { aspect-ratio: 16 / 7; }

/* ===========================================================================
   GAME PAGES: compact hero, game area, more games
   =========================================================================== */
.game-hero { padding-bottom: clamp(28px, 4vh, 44px); }
.game-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(18px, 3vh, 28px);
  font: 600 15px/1.2 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
}
.game-back i { transition: transform .4s var(--ease-out); }
@media (hover: hover) { .game-back:hover { color: var(--cobalt-deep); } .game-back:hover i { transform: translateX(-3px); } }
.game-hero__title { max-width: 18em; }
.game-hero__lede { max-width: 56ch; margin-top: 16px; font-size: 19px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.game { padding-bottom: clamp(56px, 9vh, 112px); }
.game--sea .game__pad { padding-block: clamp(48px, 8vh, 96px); }
.game--sea :focus-visible { outline-color: var(--on-cobalt); }

.more { padding-block: clamp(40px, 6vh, 72px); border-top: 1px solid var(--rule); }
.more__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); margin-top: 14px; }
.more__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name icon" "blurb icon";
  align-items: center;
  column-gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.more__name { grid-area: name; font: 400 1.45rem/1.15 var(--serif); letter-spacing: -.01em; }
.more__blurb { grid-area: blurb; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.more__link i { grid-area: icon; font-size: 20px; color: var(--cobalt-deep); transition: transform .4s var(--ease-out); }
@media (hover: hover) { .more__link:hover .more__name { color: var(--cobalt-deep); } .more__link:hover i { transform: translateX(4px); } }

/* ---------- Meter: value against a target on a hairline ---------- */
.meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 600 14px/1.2 var(--sans); }
.meter__val { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.meter__val b { font: 400 1.65rem/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.meter__tg { font-weight: 500; font-size: 13.5px; color: var(--ink-2); }
.meter__track { position: relative; height: 16px; margin-top: 6px; }
.meter__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule-strong); }
.meter__fill { position: absolute; left: 0; right: 0; top: calc(50% - 2px); height: 4px; background: var(--cobalt); transform-origin: left center; transform: scaleX(0); transition: transform .5s var(--ease-out); }
.meter__mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }
.meter.is-met .meter__val b { color: var(--cobalt-deep); }

/* ---------- Share row ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.share__more { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-left: 8px; }
.share__status { flex-basis: 100%; min-height: 1.5em; font-size: 14.5px; color: var(--ink-2); }
.game--sea .share__status { color: rgba(255, 255, 255, .92); }
.game__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }

/* ---------- Celebration burst (fixed, decorative) ---------- */
.confetti { position: fixed; z-index: 46; width: 0; height: 0; pointer-events: none; }
.confetti__p { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; }
.confetti__p--m { background: var(--cobalt); }
.confetti__p--a { box-shadow: inset 0 0 0 2px var(--cobalt); background: var(--paper); }
.confetti__p--c { background: linear-gradient(90deg, var(--cobalt) 50%, var(--paper) 50%); box-shadow: inset 0 0 0 2px var(--cobalt); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .gcard--plan { grid-column: 1 / -1; grid-row: auto; }
  .gcard--plan .gcard__media { min-height: 0; aspect-ratio: 16 / 8; }
  .gcard--sort, .gcard--sea, .gcard--quiz, .gcard--mix { grid-column: span 6; flex-direction: column; }
  .gcard--sort .gcard__media, .gcard--sea .gcard__media, .gcard--quiz .gcard__media, .gcard--mix .gcard__media { flex: none; aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .gcard--sort, .gcard--sea, .gcard--quiz, .gcard--mix { grid-column: 1 / -1; }
  .gcard--plan .gcard__media { aspect-ratio: 16 / 10; }
  .game-hero__lede { font-size: 17px; }
  .more__list { grid-template-columns: minmax(0, 1fr); }
  .closing__lede { font-size: 17px; }
}