/* cpblmeme portal styles. Tokens come from design-system/cpblmeme-portal/MASTER.md; hex lives only in :root. */
/* Self-hosted subsets (OFL). Regenerate with `npm run fonts` after changing copy or adding a game card. */
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/NotoSansTC-subset.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/BarlowCondensed-700-subset.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/BarlowCondensed-800-subset.woff2") format("woff2");
}

:root {
  --bg: #FECBCA;
  --card: #FFF9EF;
  --ink: #073B4C;
  --ink-muted: #3E5560;
  --ink-muted-card: #52666C;
  --cta: #AB4848;
  --cta-shadow: #7E3232;
  --accent: #C83717;
  --cta-ink: #FFFFFF;
  --line: rgba(7, 59, 76, .45);
  --card-shadow: rgba(7, 59, 76, .12);

  --font: "Noto Sans TC", "PingFang TC", sans-serif;
  --font-num: "Barlow Condensed", "Arial Narrow", sans-serif;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px; /* MASTER allows 18-24px page/side padding; 20 keeps the approved gutter */
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;

  --r-card: 26px;
  --r-social: 20px;
  --r-cta: 18px;
  --r-pill: 999px;
  --pad-card: var(--s-4);
  --ease: 150ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; }

a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding:
    max(var(--s-6), env(safe-area-inset-top))
    max(var(--s-5), env(safe-area-inset-right))
    max(var(--s-8), env(safe-area-inset-bottom))
    max(var(--s-5), env(safe-area-inset-left));
}

.sprite { position: absolute; }
.ico { width: 22px; height: 22px; flex: none; }

/* hero */
.hero { text-align: center; }
.hero img { width: 150px; height: 150px; margin: 0 auto calc(var(--s-1) * -1); }
.hero h1 { font-size: 26px; font-weight: 900; line-height: 1.3; }
.hero p { margin-top: var(--s-1); color: var(--ink-muted); font-weight: 500; }

/* game card (repeatable component; first card is the primary one) */
.game {
  margin-top: var(--s-4);
  padding: var(--pad-card);
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: 0 2px 0 var(--card-shadow);
}
.pill {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border: 1.5px solid var(--accent);
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
}
.game h2 { margin-top: var(--s-2); font-size: 24px; font-weight: 900; line-height: 1.3; }
.game h2 .hl { color: var(--accent); }
.game p { margin-top: var(--s-2); color: var(--ink-muted-card); }
.game .players { margin-top: var(--s-1); font-weight: 500; }
.num {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}

/* primary CTA */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 56px;
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--cta);
  color: var(--cta-ink);
  border-radius: var(--r-cta);
  box-shadow: 0 4px 0 var(--cta-shadow);
  font-size: 18px;
  font-weight: 900;
  transition: transform var(--ease), box-shadow var(--ease);
}
.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cta-shadow); }
.cta-secondary {
  background: var(--card);
  color: var(--cta);
  border: 2px solid var(--cta);
  box-shadow: none;
}
.cta-secondary:active { box-shadow: none; }

/* social row */
.soc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.soc a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 84px;
  padding: var(--s-3) var(--s-2);
  background: var(--card);
  border-radius: var(--r-social);
  box-shadow: 0 2px 0 var(--card-shadow);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: transform var(--ease);
}
.soc a:active { transform: translateY(2px); }
.soc .ico { width: 26px; height: 26px; }

/* collaboration mail */
.mail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 56px;
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-cta);
  transition: transform var(--ease);
}
.mail:active { transform: translateY(2px); }
.mail b { font-weight: 700; margin-right: var(--s-2); }
.mail span { overflow-wrap: anywhere; }

.foot {
  margin-top: var(--s-6);
  color: var(--ink-muted);
  font-size: 14px;
  text-align: center;
}

/* 404 */
.notfound .cta { margin-top: 0; }

@media (min-width: 768px) {
  .wrap { padding-top: var(--s-12); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}