/* Shared palette and typography for the public website and Memory Match player. */
:root {
  --theme-font: "Segoe UI", Arial, sans-serif;
  --theme-purple: #5b35aa;
  --theme-purple-dark: #382366;
  --theme-purple-soft: #eee8f8;
  --theme-ink: #30234b;
  --theme-muted: #695b7c;
  --theme-line: #dcd3ea;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f8f6fc;
  --theme-shadow: 0 4px 0 #5b35aa, 0 8px 18px #38236612;
  --ink: var(--theme-ink);
  --muted: var(--theme-muted);
  --brand: var(--theme-purple);
  --line: var(--theme-line);
}
html, body { font-family: var(--theme-font); }
body { color: var(--theme-ink); font-size: 16px; line-height: 1.6; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { font-family: inherit; font-weight: 700; letter-spacing: -.02em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #9879ce; outline-offset: 3px; }
body:not(.play-layout) {
  --ink: var(--theme-ink); --muted: var(--theme-muted);
  --brand: var(--theme-purple); --line: var(--theme-line); --paper: #d8f3ef;
  background-color: var(--paper);
  background-image: linear-gradient(90deg,#ffffff38 1px,transparent 1px),linear-gradient(#ffffff38 1px,transparent 1px);
}
body:not(.play-layout) .site-header {
  background: var(--theme-purple); color: #fff;
  border-bottom: 2px solid var(--theme-purple-dark); box-shadow: 0 4px 12px #38236620;
}
body:not(.play-layout) .brand { font-size: 20px; font-weight: 700; text-shadow: none; }
body:not(.play-layout) .site-header nav { font-size: 14px; font-weight: 600; }
body:not(.play-layout) .site-header nav a { text-shadow: none; }
body:not(.play-layout) .site-header nav a:hover { transform: none; background: #ffffff1c; }
body:not(.play-layout) .site-header input { border: 1px solid var(--theme-line); box-shadow: none; color: var(--theme-ink); }
body:not(.play-layout) .site-header button { border: 1px solid var(--theme-line); background: var(--theme-purple-soft); color: var(--theme-purple); box-shadow: none; }
body:not(.play-layout) .memory-section-heading h2,
body:not(.play-layout) .section-title h2,
body:not(.play-layout) .intro h2,
body:not(.play-layout) .home-faq h2 {
  color: var(--theme-ink); font-size: 28px; line-height: 1.25; font-weight: 700;
  letter-spacing: -.02em; text-shadow: none;
}
body:not(.play-layout) .memory-section-heading { margin: 24px 0 20px; }
body:not(.play-layout) .memory-section-heading>span,
body:not(.play-layout) .section-title>span {
  color: var(--theme-muted); font-size: 13px; line-height: 1.5; font-weight: 500;
  text-transform: none; text-shadow: none;
}
body:not(.play-layout) .section-title>span { padding: 5px 10px; border: 1px solid var(--theme-line); border-radius: 8px; background: var(--theme-purple-soft); box-shadow: none; }
body:not(.play-layout) .memory-theme,
body:not(.play-layout) .hot-card,
body:not(.play-layout) .game-card { border: 2px solid #fff; border-radius: 16px; background: var(--theme-surface); box-shadow: var(--theme-shadow); }
body:not(.play-layout) .memory-theme:hover,
body:not(.play-layout) .hot-card:hover,
body:not(.play-layout) .game-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 #5b35aa,0 12px 22px #38236618; }
body:not(.play-layout) .memory-theme h3,
body:not(.play-layout) .hot-card b,
body:not(.play-layout) .game-card b { color: var(--theme-ink); font-size: 16px; line-height: 1.35; font-weight: 600; text-shadow: none; }
body:not(.play-layout) .memory-theme p,
body:not(.play-layout) .game-card small { color: var(--theme-muted); font-size: 12px; font-weight: 400; line-height: 1.5; text-transform: none; }
body:not(.play-layout) .memory-theme-play { color: var(--theme-purple); font-size: 13px; font-weight: 600; }
body:not(.play-layout) .memory-theme-play b { background: var(--theme-purple-soft); color: var(--theme-purple); }
body:not(.play-layout) .hot-card span { color: var(--theme-ink); }
body:not(.play-layout) .hot-card { grid-template-rows: auto 44px; }
body:not(.play-layout) .intro { background: var(--theme-surface-soft); border: 1px solid var(--theme-line); border-radius: 16px; box-shadow: var(--theme-shadow); padding: 24px; }
body:not(.play-layout) .intro h2 { margin: 0; }
body:not(.play-layout) .intro p,
body:not(.play-layout) .rich-content { color: var(--theme-muted); font-size: 15px; font-weight: 400; line-height: 1.75; }
body:not(.play-layout) .faq-list details { border: 1px solid var(--theme-line); background: var(--theme-surface); box-shadow: 0 3px 0 #5b35aa; }
body:not(.play-layout) .faq-list summary { color: var(--theme-ink); font-size: 16px; font-weight: 600; }
body:not(.play-layout) .faq-list details div { color: var(--theme-muted); font-size: 15px; }
body:not(.play-layout) footer { background: var(--theme-purple); color: #eee8f8; border-top: 2px solid var(--theme-purple-dark); box-shadow: none; font-size: 14px; }
body:not(.play-layout) footer nav a { color: #fff; font-weight: 600; }
body:not(.play-layout) .button { background: var(--theme-purple); }
.play-sidebar { background: var(--theme-surface-soft); color: var(--theme-ink); box-shadow: -1px 0 0 var(--theme-line); }
.play-nav { background: var(--theme-purple); color: #fff; font-size: 14px; font-weight: 600; padding: 12px 8px; }
.play-nav a:hover { color: #eee8f8; }
.play-search input, .play-search button { color: var(--theme-ink); }
.game-summary h2, .recommendations h2, .sidebar-about h2 { color: var(--theme-ink); font-size: 16px; font-weight: 600; }
.game-summary small, .sidebar-about div { color: var(--theme-muted); font-size: 13px; }
.sidebar-about { border-color: var(--theme-line); }
.recommend-grid a { border-color: var(--theme-line); box-shadow: 0 2px 4px #38236610; }
.sidebar-ad { color: var(--theme-muted); }
/* Keep the native player's dimensions while applying the same visual language. */
body.memory-game {
  --navy: var(--theme-purple-dark); --navy-2: var(--theme-purple);
  --blue: #7955ba; --sky: var(--theme-purple-soft); --cream: var(--theme-surface-soft);
  --text: var(--theme-ink); --muted: var(--theme-muted); --line: var(--theme-line);
  background: var(--theme-surface-soft); color: var(--theme-ink); line-height: 1.5;
}
.memory-game .eyebrow { color: var(--theme-purple); font-weight: 600; }
.memory-game .game-heading h2 { color: var(--theme-ink); font-weight: 700; }
.memory-game .score-strip strong, .memory-game .score-strip strong span { color: var(--theme-ink); }
.memory-game .card-front { border-color: var(--theme-line); }
.memory-game .card-back { box-shadow: 0 4px 10px #38236620; }
.memory-game .primary-action, .memory-game .primary-wide { background: var(--theme-purple); box-shadow: 0 3px 8px #38236620; }
.memory-game .game-actions button, .memory-game .small-action { font-weight: 600; }
.memory-game .toast { background: var(--theme-purple-dark); }
.memory-game .memory-card.matched .card-front { background: #edf9f4; border-color: #58b78d; }
.memory-game.high-contrast { --text: #211334; --muted: #49365e; --line: #8f79ab; color: #211334; }
@media(max-width:900px) {
  body:not(.play-layout) .memory-section-heading h2,
  body:not(.play-layout) .section-title h2,
  body:not(.play-layout) .intro h2,
  body:not(.play-layout) .home-faq h2 { font-size: 24px; }
  body:not(.play-layout) .intro { padding: 20px; }
  body:not(.play-layout) .intro h2 { margin-bottom: 12px; }
}