/* World Meme War 3 — content pages + homepage SEO section.
   Separate from styles.css so the game's own stylesheet is never touched. */

/* Custom properties are deliberately NOT declared on :root.
   styles.css already defines --bg/--ink/--lime/--line/--display/--body for the
   game, and site.css loads after it — redefining them on :root would re-skin
   the running game. Everything here is namespaced --wmw-* instead. */
.content-page,
#home-content,
#home-footer,
.consent-bar {
  --wmw-bg: #101511;
  --wmw-panel: #192117;
  --wmw-ink: #e8efdf;
  --wmw-muted: #9ca991;
  --wmw-dim: #798e68;
  --wmw-line: #34452a;
  --wmw-lime: #c8f36b;
  --wmw-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --wmw-body: 'DM Sans', system-ui, -apple-system, sans-serif;
}

@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlow-condensed-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* ---------------------------------------------------------- content pages */
body.content-page {
  margin: 0;
  background: radial-gradient(ellipse at 20% 0%, #2e48261f, transparent 60%), var(--wmw-bg);
  color: var(--wmw-ink);
  font-family: var(--wmw-body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}
.content-page * { box-sizing: border-box; }
.content-page [hidden] { display: none !important; }
.content-page a { color: var(--wmw-lime); text-decoration: none; }
.content-page a:hover { text-decoration: underline; }
.content-page main { max-width: 820px; margin: 0 auto; padding: 36px 20px 72px; }

.content-page h1 {
  font-family: var(--wmw-display); font-weight: 800;
  font-size: clamp(32px, 6vw, 54px); line-height: 1.05;
  letter-spacing: -0.5px; margin: 0 0 20px;
}
.content-page h2 {
  font-family: var(--wmw-display); font-weight: 700;
  font-size: clamp(22px, 3.6vw, 31px); line-height: 1.2;
  margin: 44px 0 12px; color: var(--wmw-lime);
}
.content-page p { margin: 0 0 16px; }
.content-page .lede { font-size: 18px; color: #cfdcc0; }
.content-page ul { margin: 0 0 18px; padding-left: 22px; }
.content-page li { margin-bottom: 9px; }
.content-page kbd {
  font-family: var(--wmw-body); font-size: 12px;
  border: 1px solid #8da56d55; border-radius: 3px;
  padding: 1px 6px; color: #c3d8a6; background: #1b2517;
  white-space: nowrap;
}
.content-page .updated { font-size: 13px; color: var(--wmw-dim); margin-top: 32px; }
.inline-note {
  border-left: 3px solid var(--wmw-lime); background: #1a2416;
  padding: 12px 16px; font-size: 14px; color: #c3d3b1;
}

/* header */
.content-header {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto; padding: 16px 20px;
  border-bottom: 1px solid var(--wmw-line);
}
.content-brand {
  display: flex; align-items: center; gap: 2px;
  font-family: var(--wmw-display); font-weight: 800; font-size: 22px;
  color: var(--wmw-ink) !important; text-decoration: none !important;
}
.content-brand span {
  background: var(--wmw-lime); color: #172010; transform: skew(-8deg);
  padding: 2px 7px; border-radius: 3px; font-size: 17px;
}
.content-brand b { color: var(--wmw-lime); margin-left: 5px; }
.content-header nav { flex: 1; }
.content-header nav ul {
  display: flex; gap: 20px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.content-header nav a {
  font-size: 13px; letter-spacing: .4px; color: #b3c3a2 !important;
  text-transform: uppercase;
}
.content-header nav a:hover, .content-header nav a[aria-current] { color: var(--wmw-lime) !important; }
.content-play {
  background: var(--wmw-lime); color: #233313 !important;
  border-bottom: 3px solid #819f43; border-radius: 4px;
  padding: 9px 15px; font-size: 12px; font-weight: 700; letter-spacing: .8px;
  text-decoration: none !important; white-space: nowrap;
}

/* CTA */
.cta-row { margin: 32px 0; }
.cta {
  display: inline-block; background: var(--wmw-lime); color: #233313 !important;
  border-bottom: 3px solid #819f43; border-radius: 4px;
  padding: 13px 22px; font-family: var(--wmw-display); font-size: 19px;
  font-weight: 800; letter-spacing: .6px; text-decoration: none !important;
}
.cta:hover { background: #dcff92; }

/* stat bar */
.statbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 1px; background: var(--wmw-line); border: 1px solid var(--wmw-line);
  border-radius: 6px; overflow: hidden; margin: 26px 0;
}
.statbar > div { background: var(--wmw-panel); padding: 14px 16px; }
.statbar span {
  display: block; font-size: 10px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--wmw-dim); margin-bottom: 5px;
}
.statbar b {
  font-family: var(--wmw-display); font-size: 21px; font-weight: 700;
  line-height: 1.15; color: var(--accent, var(--wmw-lime));
}

/* tables */
.stat-table {
  width: 100%; border-collapse: collapse; margin: 18px 0 26px;
  font-size: 15px; background: var(--wmw-panel);
  border: 1px solid var(--wmw-line); border-radius: 6px;
}
.stat-table caption {
  text-align: left; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--wmw-dim); padding: 0 0 8px;
}
.stat-table th, .stat-table td {
  text-align: left; padding: 11px 15px;
  border-bottom: 1px solid #2a3622; vertical-align: top;
}
.stat-table thead th {
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--wmw-lime); background: #20291b;
}
.stat-table tbody th { font-weight: 400; color: #bccdab; width: 42%; }
.stat-table.wide tbody th { width: auto; }
.stat-table tr:last-child th, .stat-table tr:last-child td { border-bottom: 0; }

/* fighter cards + links */
.fighter-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin: 22px 0 30px;
}
.fighter-cards a {
  display: block; position: relative; overflow: hidden;
  border: 1px solid var(--wmw-line); border-left: 3px solid var(--accent, var(--wmw-lime));
  border-radius: 6px; background: var(--wmw-panel); padding: 17px 18px;
  color: var(--wmw-ink) !important; text-decoration: none !important;
  transition: transform .12s, border-color .12s;
}
.fighter-cards a:hover { transform: translateY(-2px); border-color: var(--accent, var(--wmw-lime)); }
.fighter-cards .num {
  position: absolute; right: 12px; top: 4px;
  font-family: var(--wmw-display); font-size: 46px; font-weight: 800;
  color: #ffffff0a; line-height: 1;
}
.fighter-cards b {
  display: block; font-family: var(--wmw-display); font-size: 24px;
  font-weight: 800; line-height: 1.1; color: var(--accent, var(--wmw-lime));
}
.fighter-cards em {
  display: block; font-style: normal; font-size: 10px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--wmw-dim); margin: 4px 0 9px;
}
.fighter-cards p { font-size: 13px; line-height: 1.6; color: #b6c6a5; margin: 0 0 10px; }
.fighter-cards .meta { font-size: 11px; letter-spacing: .6px; color: var(--wmw-muted); }

.fighter-links {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 9px; margin: 18px 0 26px;
}
.fighter-links a {
  border: 1px solid var(--wmw-line); border-radius: 5px; background: #1b2517;
  padding: 11px 13px; color: var(--wmw-ink) !important; text-decoration: none !important;
}
.fighter-links a:hover { border-color: var(--wmw-lime); }
.fighter-links b { display: block; font-family: var(--wmw-display); font-size: 17px; font-weight: 700; }
.fighter-links span { font-size: 10px; letter-spacing: .9px; text-transform: uppercase; color: var(--wmw-dim); }

/* FAQ */
.faq section { border-bottom: 1px solid #263120; padding-bottom: 6px; }
.faq h2 { font-size: clamp(18px, 2.8vw, 23px); margin: 30px 0 8px; }

.contact-big { font-family: var(--wmw-display); font-size: clamp(24px, 5vw, 38px); font-weight: 700; margin: 10px 0 30px; }

/* footer */
.content-footer {
  border-top: 1px solid var(--wmw-line);
  max-width: 1200px; margin: 0 auto; padding: 36px 20px 28px;
  font-size: 14px; color: var(--wmw-muted);
}
.footer-cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 32px; margin-bottom: 28px;
}
.content-footer strong {
  display: block; font-family: var(--wmw-display); font-size: 17px;
  font-weight: 700; color: var(--wmw-ink); margin-bottom: 11px; letter-spacing: .5px;
}
.content-footer p { font-size: 13px; line-height: 1.7; margin: 0 0 11px; }
.footer-disclaimer { color: var(--wmw-dim) !important; font-size: 12px !important; }
.content-footer ul { list-style: none; margin: 0; padding: 0; }
.content-footer li { margin-bottom: 7px; }
.content-footer a { color: #b3c3a2; text-decoration: none; }
.content-footer a:hover { color: var(--wmw-lime); text-decoration: underline; }
.footer-base {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid #243019; padding-top: 18px; font-size: 12px; color: var(--wmw-dim);
}

/* consent bar */
.consent-bar {
  position: fixed; inset: auto 0 0 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
  background: #16200fF7; border-top: 1px solid #5c7340;
  padding: 14px 20px; font-family: var(--wmw-body); font-size: 13px; color: #dbe8c9;
  backdrop-filter: blur(6px);
}
.consent-bar p { margin: 0; max-width: 680px; }
.consent-bar a { color: var(--wmw-lime); }
.consent-bar > div { display: flex; gap: 9px; }
.consent-btn {
  font-family: var(--wmw-body); font-size: 12px; font-weight: 700; letter-spacing: .5px;
  background: var(--wmw-lime); color: #233313; border: 0; border-radius: 4px;
  padding: 10px 17px; cursor: pointer; white-space: nowrap;
}
.consent-btn.ghost { background: transparent; border: 1px solid #7d9460; color: #cfdfba; }
.consent-btn:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------- homepage SEO block
   #home-content and #home-footer sit OUTSIDE .app-shell, as direct children of
   <body>. They must, because menu-layout.css locks the shell to one viewport:
     body[data-scene]{height:100dvh; overflow:hidden}
     body[data-scene="menu"] .app-shell{position:fixed; height:100dvh}
     #menu-screen>footer{display:none}
   Anything inside #menu-screen would be clipped or display:none -- hidden text.

   On the MENU scene we therefore release the body scroll lock and let the shell
   occupy the first screenful, with the content flowing beneath it.
   On the MATCH scene we restore the original lock exactly, so gameplay,
   fullscreen and the mobile rotate overlay behave as before.
   These selectors match menu-layout.css specificity and win by load order. */

body[data-scene="menu"] {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}
body[data-scene="menu"] .app-shell {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  /* Shrink the shell by the consent bar height so the bar never covers the
     Confirm / Next / FIGHT row. --wmw-consent-h is published by the consent
     script and falls back to 0px once the bar is dismissed. The shell grid uses
     minmax(0,1fr) rows, so the fighter cards simply get shorter. */
  height: calc(var(--game-height, 100dvh) - var(--wmw-consent-h, 0px));
}
/* Match scene: hide the marketing content and keep the original lock. */
body[data-scene="match"] #home-content,
body[data-scene="match"] #home-footer,
body[data-scene="match"] .consent-bar { display: none !important; }

#home-content {
  max-width: 1000px; margin: 0 auto; padding: 30px 20px 10px;
  font-family: var(--wmw-body); font-size: 15px; line-height: 1.75;
  color: var(--wmw-ink);
}
#home-content h2 {
  font-family: var(--wmw-display); font-weight: 700;
  font-size: clamp(21px, 3.4vw, 29px); line-height: 1.2;
  margin: 34px 0 11px; color: var(--wmw-lime); letter-spacing: normal;
}
#home-content h3 {
  font-family: var(--wmw-display); font-weight: 700; font-size: 19px;
  margin: 22px 0 7px; color: #dce9c8; letter-spacing: normal;
}
#home-content p { margin: 0 0 15px; font-size: 15px; }
#home-content a { color: var(--wmw-lime); text-decoration: none; }
#home-content a:hover { text-decoration: underline; }
#home-content ul { padding-left: 21px; margin: 0 0 16px; list-style: disc; }
#home-content li { margin-bottom: 8px; }
/* styles.css sets a tiny 8px kbd for the in-game key caps. Reset it here. */
#home-content kbd {
  font-family: var(--wmw-body); font-size: 12px; font-weight: 400;
  border: 1px solid #8da56d55; border-radius: 3px;
  min-width: 0; height: auto; display: inline;
  padding: 1px 6px; color: #c3d8a6; background: #1b2517;
}
#home-content .home-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin: 18px 0 8px;
}

/* styles.css has a global footer{display:flex;font-size:7px;letter-spacing:1px}
   for the in-game footer. Undo all of it for our real footer. */
#home-footer {
  display: block; justify-content: initial;
  max-width: 1200px; margin: 0 auto; padding: 30px 20px 26px;
  border-top: 1px solid var(--wmw-line); font-family: var(--wmw-body);
  font-size: 13px; letter-spacing: normal; color: var(--wmw-muted);
}
#home-footer .footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 28px; }
#home-footer strong {
  display: block; font-family: var(--wmw-display); font-size: 17px;
  font-weight: 700; color: var(--wmw-ink); margin-bottom: 11px; letter-spacing: .5px;
}
#home-footer p { font-size: 13px; line-height: 1.7; margin: 0 0 11px; letter-spacing: normal; }
#home-footer ul { list-style: none; margin: 0; padding: 0; }
#home-footer li { margin-bottom: 7px; }
#home-footer a { color: #b3c3a2; text-decoration: none; letter-spacing: normal; }
#home-footer a:hover { color: var(--wmw-lime); text-decoration: underline; }
#home-footer b { color: inherit; margin-left: 0; }
#home-footer .footer-base {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid #243019; padding-top: 18px; font-size: 12px; color: var(--wmw-dim);
}

@media (max-width: 760px) {
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
  .content-header { gap: 12px; }
  .content-header nav ul { gap: 14px; }
  .content-page main { padding: 26px 16px 56px; }
  #home-content { padding-left: 16px; padding-right: 16px; }
  .stat-table { font-size: 14px; }
  .stat-table th, .stat-table td { padding: 9px 11px; }
}

@media (max-width: 760px) {
  #home-footer .footer-cols { grid-template-columns: 1fr; gap: 24px; }
}

/* The consent bar must stay compact on phones: it reduces the playable shell
   height, and a tall bar squeezes the fighter grid. */
@media (max-width: 760px) {
  .consent-bar {
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    font-size: 11.5px;
    line-height: 1.45;
  }
  .consent-bar p { flex: 1 1 100%; }
  .consent-bar > div { width: 100%; justify-content: flex-end; }
  .consent-btn { padding: 8px 14px; font-size: 11.5px; }
}

/* ========================================================================
   BRAND MARK + GAME UI POLISH
   Cosmetic only. Deliberately no layout properties here (no position, no
   height, no display, no grid changes) — menu-layout.css fits the 9-card grid
   into one viewport and changing layout from this file breaks that.
   Colours, borders, shadows, radii and type only.
   ======================================================================== */

/* ---- the Versus Plate mark replaces the old lime box ---- */
.brand-icon--mark {
  background: none !important;
  transform: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: 46px !important;
  display: block !important;
  padding: 0 !important;
  /* warm glow to match the crimson plate */
  filter: drop-shadow(0 2px 7px #d93a2840);
}
.brand-icon--mark svg { height: 100%; width: auto; display: block; }
/* The menu/match header row is 52px tall (menu-layout.css), so 44px fits with
   a little breathing room. Content pages have a taller header, so 46px there. */
body[data-scene="menu"] .brand-icon--mark,
body[data-scene="match"] .brand-icon--mark { height: 44px !important; }
@media (max-width: 760px) {
  .brand-icon--mark,
  body[data-scene="menu"] .brand-icon--mark,
  body[data-scene="match"] .brand-icon--mark { height: 36px !important; }
}

/* ---- fighter cards: deeper frame, clearer selected state ---- */
#menu-screen .fighter-card {
  border-color: #3f5132;
  background: linear-gradient(180deg, #212c1c, #1a2416);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
#menu-screen .fighter-card:not(:disabled):hover {
  border-color: #9dc06d;
  box-shadow: 0 0 0 1px #9dc06d40, 0 10px 26px #0005;
}
#menu-screen .fighter-card.selected {
  box-shadow: inset 0 0 0 2px var(--lime), 0 0 26px #c8f36b26, 0 10px 30px #0006;
}
#menu-screen .fighter-card-copy strong { letter-spacing: .4px; }
#menu-screen .fighter-card .card-number { color: #a2c17b1f; }

/* ---- buttons: crisper bevel, a little more presence ---- */
.lime-button {
  background: linear-gradient(180deg, #d4fb79, #bce862);
  box-shadow: 0 1px 0 #e9ffb0 inset, 0 6px 16px #c8f36b1f;
}
.lime-button:not(:disabled):hover { background: linear-gradient(180deg, #e2ff92, #cbf571); }
.fight-button {
  letter-spacing: 1.2px;
  box-shadow: 0 1px 0 #e9ffb0 inset, 0 8px 26px #c8f36b33;
}
.outline-button, .small-button { transition: border-color .14s, background .14s; }
.outline-button:hover, .small-button:hover { border-color: #9dc06d; }

/* ---- VS screen: more of an arcade title moment ---- */
.versus-mark {
  color: var(--lime);
  text-shadow: 0 0 22px #c8f36b4d, 0 3px 0 #2c3a21;
}
.versus-preview strong { letter-spacing: .5px; }

/* ---- difficulty cards ---- */
.difficulty-card { transition: border-color .14s, background .14s, box-shadow .14s; }
.difficulty-card:hover { border-color: #7d9a58; }
.difficulty-card.selected { box-shadow: inset 0 -2px 0 var(--lime), 0 0 20px #c8f36b14; }

/* ---- setup panel frame ---- */
#menu-screen .setup-panel {
  border-color: #46573a;
  box-shadow: 0 18px 60px #0005, 0 0 0 1px #0003;
}
#menu-screen .setup-steps .active { background: #c8f36b0f; }

/* ---- health + power bars read a touch sharper ---- */
.health-track { border-color: #9cb07c80; }
.power-meter.charged > div { box-shadow: 0 0 14px #c8f36baa; }