@font-face {
  font-family: 'FakePearl-SemiBold';
  src: url('/assets/fonts/FakePearl-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root {
  /* Moodboard: white shop chrome, bright yellow banner, blue brand accents. */
  --paper: #fff;
  --yellow: #ffe32a;
  --ink: #151515;
  --blue: #315b82;
  --muted: #626262;
  --rule: #ededed;
  --art-size: 440px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; background: var(--paper); color: var(--ink); font-family: 'FakePearl-SemiBold', sans-serif; font-weight: 600; font-synthesis: none; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.skip-link { position: absolute; top: 8px; left: 8px; transform: translateY(-150%); z-index: 2; background: var(--paper); padding: 12px; }
.skip-link:focus { transform: none; }
.site-header { display: flex; justify-content: center; align-items: center; min-height: 140px; padding: 36px 24px; }
.brand { margin: 0; }
.brand-type { display: block; color: var(--blue); font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.6px; text-align: center; }
#brand-image { display: block; width: min(300px, 78vw); height: auto; object-fit: contain; }
main { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hero { width: 100%; display: flex; justify-content: center; align-items: center; background: var(--yellow); padding: 40px 28px; min-height: 480px; flex: 1; }
.character-frame { width: min(100%, var(--art-size)); aspect-ratio: 1; position: relative; }
.art-placeholder { height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 30px; color: var(--blue); border: 1px dashed currentColor; }
.placeholder-label { font-size: 12px; letter-spacing: .16em; font-weight: 600; }
.placeholder-mark { font-size: clamp(100px, 24vw, 160px); line-height: 1; }
.placeholder-caption { font-size: 14px; font-weight: 600; letter-spacing: .1em; }
.character { display: block; width: 100%; height: 100%; object-fit: contain; }
.links { list-style: none; margin: 0; padding: 44px 24px 52px; display: grid; gap: 16px; width: min(100%, 400px); }
.game-link { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 60px; padding: 15px 24px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 21px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; text-decoration: none; transition: background .16s, color .16s; }
.link-arrow { font-family: inherit; font-size: 22px; line-height: 1; }
@media (hover: hover) { .game-link:hover { background: var(--blue); border-color: var(--blue); } }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px max(24px, calc((100vw - 1200px) / 2)); border-top: 1px solid var(--rule); }
.socials { display: flex; gap: 8px; }
.social { display: inline-flex; width: 44px; height: 44px; justify-content: center; align-items: center; }
a.social { border-radius: 50%; }
a.social:hover { background: var(--yellow); }
small { color: var(--muted); font-size: 14px; letter-spacing: .035em; }
.hero-content { width: min(100%, var(--art-size)); }
@media (max-width: 480px) {
  .site-header { min-height: 108px; padding: 28px 24px; }
  .brand-type { font-size: 28px; }
  .hero { min-height: 360px; padding: 28px; }
  .links { padding: 32px 28px 40px; }
  .game-link { font-size: 18px; gap: 16px; }
  .site-footer { padding: 20px 20px 24px; gap: 12px; }
  small { font-size: 12px; }
}
@media (max-width: 320px) { .site-footer { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }