/* Top Grass Trading Cards and the illustrated layer (prototype, features.cards / features.anime).
   Foundations first: a small set of pairings and roles proven by the direction board, built on the existing palette
   in css/style.css. Game palettes stay locked; nothing here touches the canvas. */

/* The --tg-* foundation tokens (surfaces, type roles, spacing, radius, focus, motion) live in css/style.css :root, so the
   game pages share them without loading this file. */

/* ---------- the card ---------- */
.tgc-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  container-type: inline-size;
  border-radius: var(--tg-radius);
  overflow: hidden;
  background: var(--tg-surface-night);
  color: var(--tg-on-night);
  font-family: var(--tg-font-ui);
  isolation: isolate;
}
.tgc-card__art { position: absolute; inset: 0; z-index: -1; }
/* Frames live on ::before: container units on the card's own box would resolve against an outer container. */
.tgc-card::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; }
.tgc-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgc-card .tgc-card__top { position: absolute; top: 4.5cqi; left: 4.5cqi; right: 4.5cqi; }
.tgc-card .tgc-card__name { margin: 0; font: 800 9cqi/1.08 var(--tg-font-ui); letter-spacing: .01em; }
.tgc-card .tgc-card__time { display: none; margin: 1.2cqi 0 0; font: max(9px, 2.8cqi)/1.4 var(--tg-font-tag); text-transform: uppercase; }
.tgc-card .tgc-card__bottom { position: absolute; left: 4.5cqi; right: 4.5cqi; bottom: 4.5cqi; padding: 3.6cqi 4cqi; }
.tgc-card .tgc-card__flavor { display: none; margin: 0 0 2.6cqi; font: 600 4.4cqi/1.35 var(--tg-font-ui); }
.tgc-card .tgc-card__meta { display: flex; align-items: center; gap: 2cqi; margin: 0; font: max(9px, 4.4cqi)/1 var(--tg-font-tag); text-transform: uppercase; }
.tgc-card .tgc-card__meta .tgc-card__set { display: none; }
.tgc-card :is(.tgc-card__name, .tgc-card__time, .tgc-card__flavor, .tgc-card__meta, .tgc-card__product, .tgc-card__collection) { color: inherit; }
/* Small cards (binder, thumbnails): name and number only. Full text from 260 px wide. */
@container (min-width: 260px) {
  .tgc-card .tgc-card__name { font-size: 7.4cqi; }
  .tgc-card .tgc-card__time, .tgc-card .tgc-card__flavor { display: block; }
  .tgc-card .tgc-card__meta { font-size: max(9px, 2.8cqi); }
}
/* The set name needs the room: from 320 px wide. The number never wraps. */
@container (min-width: 320px) {
  .tgc-card .tgc-card__meta .tgc-card__set { display: inline; }
}
.tgc-card .tgc-card__meta .tgc-card__num { margin-left: auto; white-space: nowrap; }
.tgc-mark { width: 1.3em; height: 1.3em; flex: none; }

/* Direction A, "Garden Clubhouse": a cream paper frame and warm brown text, like a printed photo card. */
.tgc-card--a::before { box-shadow: inset 0 0 0 2.4cqi var(--paper), inset 0 0 0 2.9cqi #8a5a33; }
.tgc-card--a .tgc-card__name { display: inline-block; padding: 1.4cqi 3cqi; color: #4a2c16; background: var(--paper); border-radius: 2cqi; }
.tgc-card--a .tgc-card__time { color: #4a2c16; }
.tgc-card--a .tgc-card__time span { background: var(--paper); padding: .6cqi 1.4cqi; border-radius: 1cqi; }
.tgc-card--a .tgc-card__bottom { background: var(--paper); color: #4a2c16; border-radius: 3cqi; box-shadow: 0 0 0 .5cqi #8a5a33; }

/* Direction B, "Pocket Arcade Manga": heavy ink outline, flat accent label, halftone drop shadow. */
.tgc-card--b::before { box-shadow: inset 0 0 0 1.6cqi var(--ink), inset 0 0 0 2.8cqi var(--accent, var(--gold)), inset 0 0 0 3.6cqi var(--ink); }
.tgc-card--b .tgc-card__top { top: 6cqi; left: 6cqi; right: 6cqi; }
.tgc-card--b .tgc-card__name { display: inline-block; padding: 1.6cqi 3.2cqi; color: var(--ink); background: var(--accent, var(--gold)); border: .9cqi solid var(--ink); box-shadow: 1.4cqi 1.4cqi 0 var(--ink); }
.tgc-card--b .tgc-card__time { color: var(--ink); }
.tgc-card--b .tgc-card__time span { background: #fff; padding: .6cqi 1.4cqi; border: .5cqi solid var(--ink); }
.tgc-card--b .tgc-card__bottom { left: 6cqi; right: 6cqi; bottom: 6cqi; background: #fff; color: var(--ink); border: .9cqi solid var(--ink);
  box-shadow: 1.6cqi 1.6cqi 0 0 var(--ink); }

/* An honest placeholder while a card's art is still being made. */
.tgc-card--pending { background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent, var(--gold)) 50%, #fff), var(--accent, var(--gold)) 72%); color: var(--ink); }
.tgc-card--pending::before { box-shadow: inset 0 0 0 1.6cqi var(--ink); }
.tgc-card--pending .tgc-card__big { position: absolute; top: 6cqi; left: 7cqi; font: 18cqi/1 var(--tg-font-tag); opacity: .22; }
.tgc-card--pending .tgc-card__pending { position: absolute; left: 7cqi; right: 7cqi; bottom: 8cqi; }
.tgc-card--pending .tgc-card__pending b { display: block; font: 800 max(13px, 9cqi)/1.1 var(--tg-font-ui); }
.tgc-card--pending .tgc-card__pending span { display: block; margin-top: 3cqi; font: max(9px, 4cqi)/1.5 var(--tg-font-tag); text-transform: uppercase; }

/* The shared back. */
.tgc-card--back { display: grid; place-items: center; text-align: center; background: linear-gradient(160deg, #2d0f82, #1d1424 72%); color: var(--cream); }
.tgc-card--back::before {
  background: radial-gradient(circle, rgba(159, 208, 112, .2) 0 1.1cqi, transparent 1.3cqi) 0 0 / 8cqi 8cqi;
  box-shadow: inset 0 0 0 2.4cqi #1d1424, inset 0 0 0 2.9cqi var(--hoodie-3);
  z-index: 0;
}
.tgc-card--back > div { position: relative; z-index: 1; padding: 0 9cqi; }
.tgc-card--back .tgc-mark { width: 26cqi; height: 26cqi; }
.tgc-card .tgc-card__product { margin: 5cqi 0 0; font: max(9px, 3.4cqi)/1.6 var(--tg-font-tag); letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.tgc-card .tgc-card__collection { margin: 1.6cqi 0 0; font: 700 max(13px, 6.4cqi)/1.2 var(--tg-font-ui); }

/* Optional finish: a restrained sheen, only on hover/focus and only when motion is welcome. Static cards stay complete. */
@media (prefers-reduced-motion: no-preference) {
  .tgc-card--finish::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 48%, transparent 60%) 140% 0 / 250% 100% no-repeat;
    transition: background-position 900ms var(--tg-ease); }
  .tgc-card--finish:hover::after, :is(:hover, :focus-within) > .tgc-card--finish::after { background-position: -40% 0; }
}

/* ---------- flip: the first face turns to the second (a reveal goes back to front; the inspector front to back).
   Skippable; reduced motion swaps with a short fade. ---------- */
.tgc-flip { position: relative; perspective: 1400px; }
.tgc-flip__inner { position: relative; display: grid; transform-style: preserve-3d; transition: transform var(--tg-reveal) var(--tg-ease); }
.tgc-flip__inner > * { grid-area: 1 / 1; backface-visibility: hidden; }
.tgc-flip__second { transform: rotateY(180deg); }
.tgc-flip.is-revealed .tgc-flip__inner { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .tgc-flip__inner { transform: none !important; transition: none; }
  .tgc-flip__second { transform: none; opacity: 0; transition: opacity 120ms linear; }
  .tgc-flip.is-revealed .tgc-flip__second { opacity: 1; }
  .tgc-flip.is-revealed .tgc-flip__first { opacity: 0; }
}
.tgc-flip.is-reduced .tgc-flip__inner { transform: none !important; transition: none; }
.tgc-flip.is-reduced .tgc-flip__second { transform: none; opacity: 0; transition: opacity 120ms linear; }
.tgc-flip.is-reduced.is-revealed .tgc-flip__second { opacity: 1; }
.tgc-flip.is-reduced.is-revealed .tgc-flip__first { opacity: 0; }
.tgc-flip.is-instant :is(.tgc-flip__inner, .tgc-flip__first, .tgc-flip__second) { transition: none !important; }   /* "Skip the reveal" */

/* ---------- speech bubble (dialogue) ---------- */
.tg-bubble { position: relative; max-width: 22em; margin: 0; padding: 14px 18px; font: 700 18px/1.35 var(--tg-font-ui); color: var(--ink); background: #fff; }
.tg-bubble--a { border-radius: 22px; border: 2px solid #8a5a33; color: #4a2c16; }
.tg-bubble--a::after { content: ''; position: absolute; left: 28px; bottom: -12px; width: 20px; height: 20px; background: #fff;
  border-right: 2px solid #8a5a33; border-bottom: 2px solid #8a5a33; transform: rotate(45deg); }
.tg-bubble--b { border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); border-radius: 4px; }
.tg-bubble--b::after { content: ''; position: absolute; left: 30px; bottom: -22px; border: 11px solid transparent; border-top: 14px solid var(--ink); }

/* focus */
.tgc-hit { all: unset; display: block; cursor: pointer; border-radius: var(--tg-radius); }
.tgc-hit:focus-visible { box-shadow: var(--tg-focus); }

/* ---------- the /cards/ prototype page ---------- */
.cards-page main, .cards-dialog { -webkit-font-smoothing: antialiased; }
.cards-intro { padding: 80px 16px 48px; }
.cards-intro .section__head { margin-bottom: 28px; }
.cards-note { max-width: 760px; margin: 0 auto; padding: 16px 20px; color: var(--tg-on-paper); background: var(--tg-surface-paper); box-shadow: var(--border); font: 17px/1.5 var(--tg-font-ui); }
.cards-note p { margin: 0; }
.cards-note .cards-note__tag { display: inline-block; margin: 0 0 8px; padding: 6px 8px; font: 10px/1 var(--tg-font-tag); color: var(--ink); background: var(--red); }
.cards-section { padding: 56px 16px; font: 17px/1.5 var(--tg-font-ui); }
.cards-section:not(.cards-section--night) + .cards-section { padding-top: 0; }   /* stacked panels share one gap */
.cards-section--night { background: var(--tg-surface-night); color: var(--tg-on-night); }
.cards-panel { padding: 24px; color: var(--tg-on-paper); background: var(--tg-surface-paper); box-shadow: var(--border); }
.cards-kicker { margin: 0 0 8px; font: 10px/1.6 var(--tg-font-tag); letter-spacing: .04em; color: var(--gold); }
.cards-kicker--ink { color: var(--hoodie); }
.cards-h2 { margin: 0 0 8px; font: 800 clamp(26px, 3.4vw, 36px)/1.15 var(--tg-font-ui); }
.cards-h2:focus { outline: none; }   /* a programmatic focus target, not a control */
.cards-h3 { margin: 0 0 8px; font: 800 20px/1.2 var(--tg-font-ui); }
.cards-lede { max-width: 60ch; margin: 0 0 6px; font: 500 19px/1.5 var(--tg-font-ui); }
.cards-fine { max-width: 70ch; margin: 0 0 20px; font: 15px/1.5 var(--tg-font-ui); color: var(--tg-on-night-muted); }
.cards-fine--ink { color: #4a3d52; }
.cards-status { margin: 0 0 16px; font: 15px/1.5 var(--tg-font-ui); color: var(--tg-on-night-muted); }
@media (max-width: 600px) { .cards-status { min-height: 4.5em; } } /* reserve the three-line ready/failure label */

/* browse */
.cards-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cards-grid[hidden] { display: none; }
.cards-tile { margin: 0; }
.cards-tile__card { position: relative; border-radius: var(--tg-radius); }
.cards-tile__hit { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.cards-tile__hit:focus-visible { outline: none; box-shadow: var(--tg-focus); }
.cards-tile__status:empty { display: none; }
.cards-tile__status { margin: 12px 0 0; font: 10px/1.6 var(--tg-font-tag); text-transform: uppercase; color: var(--tg-on-night-muted); }
.cards-skeleton { aspect-ratio: 5 / 7; border-radius: var(--tg-radius); background: #2c2235; }
.cards-error { max-width: 560px; padding: 20px 24px; color: var(--tg-on-paper); background: var(--tg-surface-paper); border-radius: 12px; }
.cards-error h3 { margin: 0 0 6px; font: 800 22px/1.2 var(--tg-font-ui); }
.cards-error p { margin: 0 0 16px; }
@media (prefers-reduced-motion: no-preference) {
  .cards-tile__card { transition: transform var(--tg-quick) var(--tg-ease); }
  .cards-tile__card:is(:hover, :focus-within) { transform: translateY(-4px); }
  .cards-skeleton { animation: cards-pulse 1.4s ease-in-out infinite alternate; }
  @keyframes cards-pulse { to { background: #3a2e45; } }
}

/* the accessible card inspector */
.cards-dialog { width: min(920px, 100% - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  color: var(--tg-on-paper); background: var(--tg-surface-paper); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 10px 10px 0 rgba(29, 20, 36, .5); font: 17px/1.5 var(--tg-font-ui); }
.cards-dialog::backdrop { background: rgba(29, 20, 36, .72); }
.cards-dialog__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; background: var(--tg-surface-paper); border-bottom: 2px solid #e2d8bf; }
.cards-dialog__crumb { margin: 0; font: 10px/1.6 var(--tg-font-tag); text-transform: uppercase; color: #5b4d63; }
.cards-close { flex: none; width: 44px; height: 44px; padding: 0; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font: 700 26px/1 var(--tg-font-ui); color: var(--ink); cursor: pointer; }
/* Text-style buttons ("Show the back"). Restored: the base style was lost when the old prototype CSS was removed. */
.cards-link-btn { margin: 0; padding: 10px 2px; border: 0; background: none; font: 600 16px/1.2 var(--tg-font-ui); color: var(--hoodie); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 4px; }
:is(.cards-close, .cards-link-btn, .cards-more summary):focus-visible { outline: none; box-shadow: var(--tg-focus); }
.cards-dialog .px-btn:focus-visible { outline-color: var(--hoodie); }   /* the site's gold dashed ring disappears on paper */
.cards-view[hidden] { display: none; }
.cards-detail { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; padding: 24px; }

.cards-detail__card { display: grid; gap: 10px; justify-items: center; align-content: start; }
.cards-detail__card .tgc-flip { width: 100%; }
@media (min-width: 721px) { .cards-detail__card { position: sticky; top: 76px; align-self: start; } }   /* the card stays in view while the details scroll */
.cards-dialog__title { margin: 0 0 12px; font: 800 clamp(24px, 3vw, 32px)/1.15 var(--tg-font-ui); }
.cards-dialog__title:focus { outline: none; }
.cards-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 14px; }
.cards-facts dt { font: 10px/2.2 var(--tg-font-tag); text-transform: uppercase; color: #5b4d63; }
.cards-facts dd { margin: 0; }
.cards-quote { margin: 14px 0; padding: 8px 14px; border-left: 4px solid var(--hoodie-3); font: italic 600 18px/1.4 var(--tg-font-ui); }
.cards-more { margin: 8px 0; }
.cards-more summary { padding: 6px 0; font-weight: 700; color: var(--hoodie); cursor: pointer; border-radius: 4px; }
.cards-more p { margin: 6px 0 0; }
.cards-share { display: grid; grid-template-columns: 96px minmax(0, 1fr); margin: 8px 0; overflow: hidden; background: #fff; border: 1px solid #c9bd9f; border-radius: 10px; }
.cards-share__img { display: grid; place-items: center; aspect-ratio: 1; background: var(--accent, var(--gold)); }
.cards-share__img img { width: 100%; height: 100%; object-fit: cover; }
.cards-share__img span { font: 22px/1 var(--tg-font-tag); color: var(--ink); }
.cards-share__text { display: grid; align-content: center; gap: 2px; padding: 8px 12px; font-size: 14px; line-height: 1.35; }
.cards-share__text b { font-size: 15px; }
.cards-share__text span { color: #4a3d52; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cards-share__text small { color: #5b4d63; font-size: 13px; }
.cards-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

@media (max-width: 860px) {
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 720px) {
  .cards-detail { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
  .cards-detail__card { width: min(280px, 100%); margin: 0 auto; }
  .cards-panel { padding: 18px 16px; }
  .cards-section { padding: 32px 16px; }
}

/* ---------- the illustrated homepage layer (features.anime, js/anime-home.js) ---------- */
.anime-arrival { position: relative; justify-self: center; width: min(520px, 100%); }
.anime-arrival__frame { display: block; overflow: hidden; background: var(--paper); border: 4px solid var(--ink); border-radius: 20px; box-shadow: 12px 12px 0 var(--hoodie-2); transform: rotate(-1.5deg); }
.anime-arrival__frame:focus { outline: none; }
.anime-arrival__frame:focus-visible { box-shadow: 12px 12px 0 var(--hoodie-2), var(--tg-focus); }
.anime-arrival__frame img { display: block; width: 100%; height: auto; }
.anime-hello { position: absolute; z-index: 2; top: -30px; left: -40px; width: min(300px, 78%); }
.anime-hello .tg-bubble { padding-right: 46px; font-size: 17px; }
.anime-hello__close { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; padding: 0; color: var(--ink); background: #fff;
  border: 2px solid var(--ink); border-radius: 8px; font: 700 20px/1 var(--tg-font-ui); cursor: pointer; }
.anime-hello__close:focus-visible { outline: none; box-shadow: var(--tg-focus); }
@media (prefers-reduced-motion: no-preference) {
  .anime-hello { animation: anime-hello 360ms var(--tg-ease) 400ms both; }
  @keyframes anime-hello { from { opacity: 0; transform: translateY(8px); } }
}

.anime-section { padding: 64px 16px; font: 17px/1.5 var(--tg-font-ui); -webkit-font-smoothing: antialiased; }
.anime-section p { max-width: 60ch; margin: 0 0 16px; }
.js-episode-left { white-space: nowrap; }
.anime-kicker { margin: 0 0 8px; font: 10px/1.6 var(--tg-font-tag); letter-spacing: .04em; color: var(--hoodie); }
.anime-section .anime-kicker { margin-bottom: 8px; }
.anime-h2 { margin: 0 0 8px; font: 800 clamp(26px, 3.4vw, 36px)/1.15 var(--tg-font-ui); }
.anime-episode__panel, .anime-corner__panel, .anime-community__panel { max-width: 900px; margin: 0 auto; }
.anime-episode__panel { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; padding: 24px 28px;
  color: var(--ink); background: #fff; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 10px 10px 0 var(--hoodie-2); }
.anime-episode__art { width: 100%; height: auto; background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; }
.anime-corner__panel { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; padding: 36px 32px;
  color: var(--tg-on-night); background: var(--tg-surface-night); border-radius: 18px; box-shadow: var(--border); }
.anime-corner .anime-kicker { color: var(--gold); }
.anime-corner__cards { position: relative; width: min(220px, 70%); margin: 8px auto; }
.anime-corner__cards > div[aria-hidden] { position: absolute; inset: 0; transform: rotate(9deg) translate(16%, 3%); }
.anime-corner__cards > .tgc-card { transform: rotate(-4deg); }
.anime-community__panel { padding: 28px 32px; color: var(--tg-on-paper); background: var(--tg-surface-paper); box-shadow: var(--border); }
.anime-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 22px; padding: 0; list-style: none; }
.anime-section .anime-return { max-width: none; margin: 0; padding: 12px 16px; background: #fff; border: 2px dashed var(--grass-4); border-radius: 12px; }

@media (max-width: 920px) {
  .anime-arrival { width: min(440px, 92%); margin-top: 40px; }
  .anime-hello { left: -10px; top: -44px; }
}
@media (max-width: 720px) {
  .anime-section { padding: 40px 16px; }
  .anime-episode__panel, .anime-corner__panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .anime-episode__art { width: min(200px, 70%); margin: 0 auto; }
  .anime-community__panel { padding: 22px 18px; }
}

/* ---------- the gallery's dawn-to-twilight story rail ---------- */
.cards-rail-wrap { margin: 4px 0 22px; }
.cards-rail__title { margin: 0 0 10px; font: 10px/1.6 var(--tg-font-tag); letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.cards-rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.cards-rail::before { content: ''; position: absolute; left: 8%; right: 8%; top: 13px; height: 4px; background: var(--tg-on-night-muted); border-radius: 2px; }
.cards-rail li { position: relative; margin: 0; }
.cards-rail__stop { display: grid; justify-items: center; gap: 4px; padding: 0 2px 6px; color: var(--tg-on-night); text-decoration: none; text-align: center; border-radius: 10px; }
.cards-rail__dot { width: 26px; height: 26px; background: var(--accent, var(--gold)); border: 4px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 3px var(--tg-on-night-muted); }
.cards-rail__num { font: 10px/1.4 var(--tg-font-tag); }
.cards-rail__time { font: 600 14px/1.25 var(--tg-font-ui); }
.cards-rail__stop:hover .cards-rail__time { text-decoration: underline; text-underline-offset: 3px; }
.cards-rail__stop:focus-visible { outline: none; box-shadow: var(--tg-focus); }
@media (max-width: 520px) { .cards-rail__time { font-size: 12px; } .cards-rail__dot { width: 22px; height: 22px; } .cards-rail::before { top: 11px; } }