/* ==========================================================================
   Yasumi Studio — shared stylesheet
   Design tokens ported from packages/puzzle_ui in ../puzzle_platform.
   See /DESIGN_NOTES.md at the repo root for full source mapping.
   ========================================================================== */

/* ---- Fonts (self-hosted Nunito, matches packages/puzzle_ui/assets/fonts) ---- */
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  /* Brand / semantic (packages/puzzle_ui/lib/src/theme/app_colors.dart) */
  --color-primary: #F2561D;
  --color-primary-light: #FF6D38;
  --color-success: #60BF6E;
  --color-error: #E53935;
  --color-coin: #F4C542;
  --color-crystal: #8B5CF6;
  --color-inner-shadow: #F23004;

  /* Light scheme (app_colors_scheme.dart -> AppColorsScheme.light) */
  --color-bg: #F8F0E1;
  --color-surface: #FFFDF9;
  --color-text-primary: #260101;
  --color-text-secondary: rgba(89, 44, 35, 0.7);
  --color-border: rgba(89, 44, 35, 0.18);
  --color-primary-tint: #FFE5DC;
  --color-inner-shadow-secondary: #F1E4D3;
  --color-button-text-on-primary: #FFFFFF;

  /* Typography (app_text_styles.dart, ported 1:1 in px; hero/h2 are web-only extrapolations) */
  --font-family-base: 'Nunito', system-ui, -apple-system, sans-serif;
  --text-hero: clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-h2: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
  --text-title: 1.25rem;      /* 20px */
  --text-subtitle: 1rem;      /* 16px */
  --text-body: 0.875rem;      /* 14px */
  --text-label: 0.75rem;      /* 12px */
  --text-action: 0.875rem;    /* 14px */
  --text-action-lg: 1rem;     /* 16px */
  --text-micro: 0.625rem;     /* 10px */

  /* Radius (packages/puzzle_ui/lib/src/widgets/*.dart) */
  --radius-cta: 16px;
  --radius-alert: 12px;
  --radius-compact: 8px;
  --radius-card: 16px;
  --radius-modal: 28px;

  /* Spacing (web-side 4px scale, compatible with observed ad-hoc values) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --container-max: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark scheme (app_colors_scheme.dart -> AppColorsScheme.dark) */
    --color-bg: #110F0E;
    --color-surface: #2A2420;
    --color-text-primary: #EDE8E3;
    --color-text-secondary: #8A7E76;
    --color-border: #38322E;
    --color-primary-tint: rgba(242, 86, 29, 0.12);
    --color-inner-shadow-secondary: #38322E;
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

@media (min-width: 640px) {
  .container { padding: 0 var(--space-6); }
}

/* ---- Header ---- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-text-primary);
}
.brand img {
  height: 32px;
  width: auto;
}
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .brand .logo-light { display: none; }
  .brand .logo-dark { display: block; }
}
.site-nav ul {
  display: flex;
  gap: var(--space-6);
}
.site-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-primary);
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-top: var(--space-8);
  padding: var(--space-6) 0;
  font-size: var(--text-label);
  color: var(--color-text-secondary);
}
.site-footer .footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
}
.site-footer h3 {
  font-size: var(--text-body);
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.site-footer address {
  font-style: normal;
  line-height: 1.8;
}
.site-footer .legal-links {
  display: flex;
  gap: var(--space-4);
}
.site-footer .legal-links a {
  text-decoration: underline;
}
.site-footer .placeholder {
  background: var(--color-primary-tint);
  color: var(--color-primary);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 700;
}
.site-footer .copyright {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-base);
  font-weight: 800;
  font-size: var(--text-action-lg);
  letter-spacing: 0.1px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  height: 60px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-cta);
}
.btn-primary {
  color: var(--color-button-text-on-primary);
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
  box-shadow: inset 0 -4px 0 var(--color-inner-shadow);
}
.btn-primary:active { box-shadow: inset 0 -1px 0 var(--color-inner-shadow); transform: translateY(2px); }
.btn-secondary {
  color: var(--color-text-primary);
  background: var(--color-surface);
  box-shadow: inset 0 -4px 0 var(--color-inner-shadow-secondary);
  border: 1px solid var(--color-border);
}
.btn-secondary:active { box-shadow: inset 0 -1px 0 var(--color-inner-shadow-secondary); transform: translateY(2px); }

/* ---- Hero ---- */
.hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
  text-align: center;
}
.hero h1 {
  font-size: var(--text-hero);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.hero .tagline {
  margin: var(--space-4) auto 0;
  max-width: 640px;
  font-size: var(--text-subtitle);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.hero .philosophy {
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-weight: 700;
}

/* ---- Section ---- */
.section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.section h1,
.section h2 {
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: -0.3px;
  text-align: center;
  margin-bottom: var(--space-6);
}
.section .lede {
  max-width: 640px;
  margin: calc(var(--space-3) * -1) auto var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
}

/* ---- Games grid ---- */
.games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .games-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .games-grid { grid-template-columns: repeat(3, 1fr); }
}

.game-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 -4px 0 var(--color-inner-shadow-secondary);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (prefers-color-scheme: dark) {
  .game-card {
    background: var(--color-inner-shadow-secondary);
    box-shadow: inset 0 -4px 0 var(--color-surface);
  }
}
.game-card .icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-compact);
}
.game-card h3 {
  font-size: var(--text-title);
  font-weight: 700;
}
.game-card p {
  color: var(--color-text-secondary);
  flex-grow: 1;
}
.game-card .modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.game-card .modes span {
  font-size: var(--text-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-compact);
}

.game-card.coming-soon {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-secondary);
  border-style: dashed;
  box-shadow: none;
  min-height: 260px;
  opacity: 0.75;
}
.game-card.coming-soon .badge {
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-1) var(--space-4);
}

.appstore-badge {
  display: inline-block;
  margin-top: var(--space-2);
}
.appstore-badge img { height: 44px; width: auto; }

/* ---- About ---- */
.about p {
  max-width: 720px;
  margin: 0 auto var(--space-3);
  text-align: center;
  color: var(--color-text-secondary);
}
.about p:last-child { margin-bottom: 0; }

/* ---- Support page ---- */
.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.contact-card .email {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: 800;
  font-size: var(--text-subtitle);
  color: var(--color-primary);
  text-decoration: none;
}

.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-alert);
  padding: var(--space-4);
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-subtitle);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  float: right;
  font-weight: 800;
  color: var(--color-primary);
}
.faq details[open] summary::after { content: '\2212'; }
.faq p {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
}

/* ---- Legal pages (privacy / terms) ---- */
.legal {
  max-width: 760px;
  margin: 0 auto;
}
.legal h1 { font-size: var(--text-h2); font-weight: 800; margin-bottom: var(--space-2); }
.legal .updated { color: var(--color-text-secondary); margin-bottom: var(--space-6); }
.legal h2 {
  font-size: var(--text-title);
  font-weight: 700;
  margin: var(--space-6) 0 var(--space-3);
  text-align: left;
}
.legal h3 {
  font-size: var(--text-subtitle);
  font-weight: 700;
  margin: var(--space-4) 0 var(--space-2);
}
.legal p, .legal li { color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.legal ul { list-style: disc; padding-left: var(--space-5); }
.legal li { margin-bottom: var(--space-2); }
.legal a { color: var(--color-primary); text-decoration: underline; }
.legal .placeholder {
  background: var(--color-primary-tint);
  color: var(--color-primary);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 700;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: var(--text-body);
}
.legal th, .legal td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  vertical-align: top;
}
.legal th { background: var(--color-surface); font-weight: 700; }

.legal .meta-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 -4px 0 var(--color-inner-shadow-secondary);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.legal .meta-item { flex: 1; min-width: 220px; }
.legal .meta-item .label {
  font-size: var(--text-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}
.legal .meta-item .value { font-size: var(--text-body); color: var(--color-text-primary); }
.legal .meta-item address { font-style: normal; line-height: 1.6; }

.legal .doc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 -4px 0 var(--color-inner-shadow-secondary);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
@media (prefers-color-scheme: dark) {
  .legal .meta-box,
  .legal .doc-card {
    background: var(--color-inner-shadow-secondary);
    box-shadow: inset 0 -4px 0 var(--color-surface);
  }
}
.legal .doc-card h2 {
  margin-top: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.legal .doc-card:last-child { margin-bottom: 0; }

.legal .third-party {
  background: var(--color-bg);
  border-radius: var(--radius-compact);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.legal .third-party:last-child { margin-bottom: 0; }
.legal .third-party h3 { margin-top: 0; margin-bottom: var(--space-1); }
.legal .third-party p { margin-bottom: var(--space-1); }
.legal .third-party p:last-child { margin-bottom: 0; }

/* ---- Mobile: left-align copy instead of centering ---- */
@media (max-width: 639px) {
  .hero,
  .section h1,
  .section h2,
  .section .lede,
  .about p,
  .contact-card {
    text-align: left;
  }
  .game-card.coming-soon {
    align-items: flex-start;
    text-align: left;
  }
  .legal .meta-box,
  .legal .doc-card {
    padding: var(--space-4);
  }
}