/* Hallmark · redesign · macrostructure: Catalogue Shelves (hub) + Long Document (article)
 * theme: candy-arcade (locked system, see site.css tokens) · genre: playful
 * nav/footer: shared site chrome (preserved) · enrichment: Tier-A CSS stickers/chips */

/* Anime Mochi - Guides section. Extends site.css (which supplies the shared
   .topnav / .page / .site-footer chrome AND the design tokens). These rules
   style the guides HUB (category shelves of cards) and the long-form ARTICLE
   extras (lead, byline, callouts, steps, play CTA, related). Loaded AFTER
   site.css. */

/* per-shelf accent hues come from the shared pastel set in site.css
   (--sun/--lav/--mint + their -ink pairs) */

/* ---- breadcrumbs (hub + article) ---- */
.crumbs { font-size: 0.875rem; color: var(--ink-soft); margin: 0 0 var(--space-4); }
.crumbs a { color: var(--teal-ink); text-decoration: none; font-weight: 700; }
.crumbs a:hover { text-decoration: underline; color: var(--ink); }
.crumbs span { margin: 0 7px; color: var(--edge-2); }

/* ============================== THE HUB ============================== */

.page.guides-hub { max-width: 1280px; }

/* ---- hero ---- */
.hub-hero { margin: 0 0 var(--space-6); }
.hub-hero h1 { margin-bottom: var(--space-4); }
.hub-hero .hl {
  /* highlighter swipe under the key words */
  background: linear-gradient(transparent 60%, color-mix(in oklch, var(--pink) 36%, transparent) 60%);
  border-radius: 4px; padding: 0 2px;
}
.hub-sub { max-width: 62ch; font-size: 1.125rem; color: var(--ink-soft); margin: 0; }

/* jump chips - one per shelf, coloured dot matches the shelf accent */
.shelf-chips { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: var(--space-5) 0 0; }
.shelf-chips a {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: 0.98rem;
  color: var(--ink); text-decoration: none;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 16px;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.shelf-chips a::before {
  content: ""; width: 11px; height: 11px; flex: none;
  border-radius: 4px; transform: rotate(45deg);
  background: var(--gc, var(--pink));
}
.shelf-chips a b { font-weight: 500; color: var(--ink-soft); font-size: 0.88rem; }
.shelf-chips a:hover, .shelf-chips a:focus-visible {
  transform: translateY(-2px); border-color: var(--gc-ink, var(--pink-ink));
  box-shadow: 0 3px 0 color-mix(in oklch, var(--gc-ink, var(--pink-ink)) 45%, transparent);
}

/* ---- shelves ---- */
.shelf { margin: var(--space-7) 0 0; scroll-margin-top: var(--space-6); }
.shelf-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.shelf-tag {
  display: inline-block; transform: rotate(-1.6deg);
  font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; letter-spacing: 0.005em;
  color: var(--ink); background: var(--gc, var(--pink));
  border: 2px solid var(--ink); border-radius: var(--radius-md);
  padding: 6px 18px; box-shadow: 0 3px 0 var(--gc-ink, var(--pink-ink));
}
.shelf-count { font-size: 0.92rem; font-weight: 700; color: var(--ink-soft); }

/* per-shelf accents */
.shelf-logic  { --gc: var(--lav);  --gc-ink: var(--lav-ink); }
.shelf-tiles  { --gc: var(--sun);  --gc-ink: var(--sun-ink); }
.shelf-arcade { --gc: var(--pink); --gc-ink: var(--pink-ink); }
.shelf-genres { --gc: var(--teal); --gc-ink: var(--teal-ink); }
.shelf-start  { --gc: var(--mint); --gc-ink: var(--mint-ink); }

/* ---- card grid ---- */
.guide-grid {
  list-style: none; padding: 0; margin: var(--space-5) 0 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  grid-auto-rows: 1fr; /* every row (and card) the same height */
}
.guide-card {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5); text-decoration: none; box-shadow: 0 3px 0 var(--line-soft);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.guide-card:hover, .guide-card:focus-visible {
  transform: translateY(-4px) rotate(-0.4deg);
  border-color: var(--gc-ink, var(--pink-ink));
  box-shadow: 0 6px 0 color-mix(in oklch, var(--gc, var(--pink)) 55%, transparent);
}
li:nth-child(even) > .guide-card:hover,
li:nth-child(even) > .guide-card:focus-visible { transform: translateY(-4px) rotate(0.4deg); }
.guide-card .kicker {
  align-self: flex-start;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gc-ink, var(--pink-ink));
  background: color-mix(in oklch, var(--gc, var(--pink)) 26%, var(--surface));
  border-radius: var(--radius-pill); padding: 4px 11px;
}
.guide-card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  margin: 2px 0 0; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em;
}
.guide-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 2px 0 0; line-height: 1.5; }
.guide-card .guide-date {
  margin-top: auto; padding-top: 10px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--ink-soft);
}

/* ============================== ARTICLES ============================= */

.guide .byline {
  font-size: 0.875rem; color: var(--ink-soft);
  margin: 0 0 var(--space-6); padding-bottom: var(--space-5);
  border-bottom: 2px dashed var(--line);
}
.guide .byline strong { color: var(--ink-body); }

.guide .lead { font-size: 1.22rem; color: var(--ink-body); line-height: 1.62; margin: 0 0 var(--space-5); }

/* candy-diamond section markers instead of ruled borders */
.guide h2 { display: flex; align-items: baseline; gap: 12px; }
.guide h2::before {
  content: ""; flex: none; align-self: center; width: 13px; height: 13px;
  border-radius: 4px; transform: rotate(45deg);
  background: var(--pink); box-shadow: 3px 3px 0 color-mix(in oklch, var(--teal) 70%, transparent);
}

.guide ul li::marker { color: var(--pink); }

/* numbered routines become candy step chips */
.guide ol { list-style: none; counter-reset: step; padding: 0; margin: var(--space-4) 0; display: grid; gap: 10px; }
.guide ol li {
  counter-increment: step; position: relative; margin: 0;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-md);
  padding: 11px 16px 11px 54px;
}
.guide ol li::before {
  content: counter(step); position: absolute; left: 13px; top: 11px;
  width: 27px; height: 27px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: var(--on-pink); background: var(--pink); border-radius: 50%;
  box-shadow: 0 2px 0 var(--pink-ink);
}

/* a soft highlighted aside with a "Tip" sticker */
.guide .callout {
  position: relative;
  background: color-mix(in oklch, var(--teal) 13%, var(--surface));
  border: 2px solid color-mix(in oklch, var(--teal-ink) 30%, var(--line));
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin: var(--space-6) 0 var(--space-5);
}
.guide .callout::before {
  content: "Tip"; position: absolute; top: -14px; left: 16px; transform: rotate(-2deg);
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-teal); background: var(--teal);
  padding: 4px 13px; border-radius: var(--radius-pill); box-shadow: 0 2px 0 var(--teal-ink);
}
.guide .callout p { margin: 0; }
.guide .callout strong { color: var(--ink); }

/* ---- in-article "play this game" CTA box ---- */
.guide-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--pink) 10%, var(--surface)),
    color-mix(in oklch, var(--teal) 14%, var(--surface)));
  border: 2px solid var(--ink); border-radius: var(--radius-lg);
  box-shadow: 0 4px 0 var(--edge-2);
  padding: var(--space-5); margin: var(--space-7) 0;
}
.guide-cta img {
  width: 88px; height: 88px; flex: none; display: block;
  border-radius: var(--radius-md); border: 2px solid var(--ink);
  transform: rotate(-3deg); box-shadow: 0 3px 0 var(--edge-2);
}
.guide-cta .cta-body { flex: 1 1 200px; min-width: 0; }
.guide-cta .cta-body b { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.guide-cta .cta-body span { font-size: 0.95rem; color: var(--ink-body); }
.guide-cta a.play {
  flex: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--on-pink); background: var(--pink); border: 2px solid var(--pink-ink);
  text-decoration: none; border-radius: var(--radius-pill); padding: 11px 24px;
  box-shadow: 0 4px 0 var(--pink-ink);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.guide-cta a.play:hover, .guide-cta a.play:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 0 var(--pink-ink); }
.guide-cta a.play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pink-ink); }
.guide-cta a.play svg { width: 16px; height: 16px; }

/* ---- related guides at the foot of an article ---- */
.guide-related { margin-top: var(--space-7); }
.guide-related h2 { font-size: 1.35rem; margin-top: 0; }
.guide-related ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}
.guide-related li { margin: 0; }
.guide-related a {
  display: flex; align-items: center; gap: 12px; height: 100%;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-md);
  padding: 13px 16px; color: var(--ink); font-weight: 700; font-size: 0.98rem;
  line-height: 1.35; text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.guide-related a::after {
  content: "\2192"; margin-left: auto; flex: none;
  color: var(--pink-ink); font-weight: 800;
  transition: transform var(--dur-1) var(--ease-out);
}
.guide-related a:hover, .guide-related a:focus-visible {
  transform: translateY(-2px); border-color: var(--pink);
  box-shadow: 0 3px 0 color-mix(in oklch, var(--pink) 45%, transparent);
  color: var(--ink);
}
.guide-related a:hover::after { transform: translateX(3px); }