/* mini-games.css - additions only; uses the tokens from /style.css */
.mg { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 8px 20px 40px; font-family: var(--font-mono); color: var(--text); }
.mg h1 { margin: 18px 0 6px; font: 700 clamp(20px, 4vw, 32px)/1.2 var(--font-head); letter-spacing: .06em; }
.mg .sub { margin: 0 0 22px; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mg-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; text-decoration: none; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
  transition: border-color .3s, box-shadow .3s, transform .15s; }
.mg-card.play:hover, .mg-card.play:focus-visible { border-color: var(--burnt); box-shadow: 0 0 22px rgba(196,104,58,.2); outline: none; }
.mg-card.soon { opacity: .5; cursor: default; }
.mg-card h2 { margin: 0; font: 700 14px var(--font-head); letter-spacing: .08em; }
.mg-card p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.mg-tag { font-size: 10px; letter-spacing: .14em; color: var(--gold); }
.mg-card.soon .mg-tag { color: var(--muted); }
.mg-card .rec { font-size: 11px; color: var(--burnt); }
.game-wrap { position: relative; margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: var(--bg-soft); box-shadow: 0 0 28px rgba(154,43,47,.15); touch-action: none; -webkit-user-select: none; user-select: none; }
.game-wrap canvas { display: block; width: 100%; height: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.mg.runner, .mg.flappy { max-width: 1600px; padding-inline: 12px; }
.game-wrap { margin-inline: auto; }
.hint { margin-top: 12px; font-size: 11px; color: var(--muted); letter-spacing: .08em; text-align: center; }
.back { display: inline-block; margin-top: 14px; font-size: 12px; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--burnt); }

/* ---- hub entrance (plays once on load) ---- */
@keyframes mgRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mgLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mg:not(.runner):not(.flappy) h1 { animation: mgRise .55s cubic-bezier(.22,.8,.3,1) backwards; }
.mg:not(.runner):not(.flappy) h1::after { content: ""; display: block; height: 1px; width: min(220px, 60%); margin-top: 10px;
  background: linear-gradient(90deg, var(--burnt), transparent); transform-origin: left; animation: mgLine .8s .25s cubic-bezier(.22,.8,.3,1) backwards; }
.mg:not(.runner):not(.flappy) .sub { animation: mgRise .5s .12s cubic-bezier(.22,.8,.3,1) backwards; }
.mg-grid .mg-card { animation: mgRise .5s cubic-bezier(.22,.8,.3,1) backwards; animation-delay: .55s; }
.mg-grid .mg-card:nth-child(1) { animation-delay: .25s; }
.mg-grid .mg-card:nth-child(2) { animation-delay: .35s; }
.mg-grid .mg-card:nth-child(3) { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .mg h1, .mg h1::after, .mg .sub, .mg-grid .mg-card { animation: none; }
}

/* ---- game pages: breadcrumb links + tighter top so the whole page fits the viewport ---- */
.crumb a { transition: color .3s ease; }
.crumb a:hover, .crumb a:focus-visible { color: var(--burnt); outline: none; }
.game-page { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
.game-page .inner { flex: none; padding-bottom: 0; }
.game-page .inner-top { margin-bottom: clamp(6px, 1.5vh, 16px); }
.game-page .mg { flex: 1 1 0; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 12px; }
.game-page .game-wrap { flex: none; max-width: 100%; }
.game-page .hint { margin-top: 8px; }
.game-page .back { margin-top: 6px; }
@media (max-height: 520px) { .game-page .inner { padding-top: 6px; } .game-page .inner-top { margin-bottom: 0; } .game-page .inner-top .logo-link { min-height: 32px; } }


/* ---- tails + casteroids (same sizing as the other game pages; extra hub card delays) ---- */
.mg.tails, .mg.casteroids, .mg.cat-strike { max-width: 1600px; padding-inline: 12px; }
.mg-grid .mg-card:nth-child(4) { animation-delay: .55s; }
.mg-grid .mg-card:nth-child(5) { animation-delay: .65s; }
.mg-grid .mg-card:nth-child(6) { animation-delay: .75s; }