/* Shared layout styles for the CouchPad landing pages (EN root + /de/).
   Design tokens (--bg, --chrome, --action, --radius-*, …) come from theme.css,
   which every page links before this file.
   Page anatomy: chrome header stripe + wave → centered hero → featured game
   card → "Scan to play" paper card → games shelf → wave + chrome footer stripe.
   The waves are inline SVGs in the HTML (aria-hidden); this file only sizes
   and colors them. */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh; /* fallback for browsers without dvh (Safari < 15.4) */
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
h1, h2, h3, .cta, .brand { font-family: var(--font-display); }
/* Coral text marks: large/bold text only (3.4:1 on the light bg). */
h1 mark, h2 mark { background: none; color: var(--action); }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* ---- Chrome stripes and waves ---- */
.headstripe, .footstripe { background: var(--chrome); color: #fff; }
/* Focus rings on the dark stripes need a light outline to be visible. */
.headstripe :focus-visible, .footstripe :focus-visible { outline-color: #fff; }
.wave { display: block; width: 100%; height: 42px; color: var(--chrome); }
.wave--flip { transform: scaleY(-1); }
.wave--foot { margin-top: clamp(2.5rem, 6vh, 4rem); margin-bottom: -1px; }

.topbar {
  display: flex;
  align-items: baseline; /* shared text baseline; box-centering reads misaligned */
  justify-content: space-between;
  padding: 1.1rem 0;
}
/* The landing brand is wordmark-only; room.html still pairs it with the
   viewfinder icon, which the svg rule below sizes. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.4rem;
  font-weight: 800;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.brand:active { opacity: 0.6; }
.brand svg { width: 1.7em; height: 1.7em; display: block; flex: none; }
/* Default to token colors: room.html reuses this topbar/footer on the plain
   page background. The chrome stripes override to white below. */
.topbar__mail {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}
.topbar__mail:hover { color: var(--on-surface); }
.topbar__mail:active { color: var(--on-surface); opacity: 0.6; }
.headstripe .topbar__mail { color: rgba(255, 255, 255, 0.85); }
.headstripe .topbar__mail:hover,
.headstripe .topbar__mail:active { color: #fff; }
.topbar__side { display: flex; align-items: center; gap: 0.9rem; }

/* Shows the scheme it switches TO: moon in light mode, sun in dark. The
   visibility rules mirror theme.css's forced/system split — keep in sync. */
.theme-toggle {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.theme-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

/* ---- Hero: pitch + featured game ---- */
.hero { text-align: center; padding-top: 0.5rem; }
.hero h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin: 0 auto 0.6rem;
}
/* Keep the compound noun on one line so the headline breaks before it. */
.hero h1 mark { white-space: nowrap; }
.hero__sub {
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--on-surface-variant);
  max-width: 52ch;
  margin: 0 auto 2.1rem;
}

.feature {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: clamp(340px, 52vh, 520px);
  display: flex;
  align-items: flex-end;
  box-shadow: 0 24px 50px rgba(38, 36, 44, 0.22);
}
/* top/right/bottom/left instead of `inset` so Safari < 14.5 keeps the hero. */
.feature__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
/* Darkening hugs the bottom edge where the copy sits; the art stays clear
   toward the top. */
.feature__veil {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(8deg,
    rgba(20, 19, 24, 0.88) 10%, rgba(20, 19, 24, 0.5) 40%,
    rgba(20, 19, 24, 0) 68%);
}
@media (max-width: 720px) {
  .feature__bg { object-position: 58% center; }
  .feature__veil {
    background: linear-gradient(0deg,
      rgba(20, 19, 24, 0.86) 0%, rgba(20, 19, 24, 0.75) 46%,
      rgba(20, 19, 24, 0.44) 72%, rgba(20, 19, 24, 0.12) 100%);
  }
}
.feature__inner {
  position: relative;
  width: 100%;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  text-align: left;
}
.feature h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 800;
  line-height: 1.02;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.feature p { font-weight: 700; color: rgba(255, 255, 255, 0.9); }
.feature__sub { opacity: 0.75; font-size: 0.9em; }

/* Status pill on artwork. No landing markup uses it anymore, but room.html's
   join-state badge builds on this shape (room.css adds the color variants). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 0.8em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.badge::before {
  content: "";
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--accent-hexstacker);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 800;
  font-size: 1.2rem;
  background: var(--action);
  color: #fff;
  padding: 0.55em 1.6em;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(240, 74, 80, 0.22);
  transition: box-shadow var(--transition-fast);
}
/* Optically center the label: trim the line box down to the glyph's
   cap/baseline so vertical centering follows the visible text rather than the
   font's (device-dependent) ascender/descender reserve, which otherwise makes
   the label sit slightly high — noticeably so on some fallback fonts.
   Progressive enhancement: ignored where unsupported, leaving prior rendering. */
.cta__label {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
/* Empty alt text keeps the decorative arrow out of the accessible name
   ("Play now", not "Play now →"). Same progressive-enhancement pattern as
   .cta__label: browsers without the alt syntax keep the plain declaration. */
.cta::after { content: "→"; content: "→" / ""; }
.cta:hover { box-shadow: 0 8px 20px rgba(240, 74, 80, 0.3); }
.cta:active { box-shadow: 0 4px 10px rgba(240, 74, 80, 0.2); }
.cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- Scan to play: paper card with the pairing visual ---- */
.how {
  margin-top: 3rem;
  background: var(--surface-low);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: row-reverse; /* art markup first, rendered right */
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  text-align: left;
}
.how__art { flex: none; color: var(--on-surface); }
.how__art svg { display: block; width: clamp(160px, 27vw, 200px); }
.how__copy h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 0.3rem; }
.how__copy p { font-size: 1rem; font-weight: 600; color: var(--on-surface-variant); max-width: 46ch; }
.how__copy .lead { color: var(--on-surface); font-weight: 800; }
.howfacts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  margin-top: 0.9rem;
}
.howfacts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 800;
  font-size: 0.88rem;
}
.howfacts li::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--confetti-coral);
}
.howfacts li:nth-child(2)::before { background: var(--confetti-amber); }
.howfacts li:nth-child(3)::before { background: var(--confetti-teal); }
.howfacts li:nth-child(4)::before { background: var(--confetti-violet); }
@media (max-width: 560px) {
  .how { flex-direction: column; text-align: center; }
  .how__copy p { margin: 0 auto; }
  .howfacts { justify-content: center; }
}

/* ---- More games shelf ---- */
.section { padding: 2.5rem 0 0; }
.section h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 1.3rem; }
.shelf {
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.tile {
  display: flex;
  flex-direction: column;
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(38, 36, 44, 0.12);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.tile:hover { transform: translateY(-5px) rotate(-0.4deg); box-shadow: 0 16px 32px rgba(38, 36, 44, 0.18); }
.tile__poster { position: relative; aspect-ratio: 16 / 9; background: var(--surface-container); }
.tile__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile--soon .tile__poster img { filter: saturate(0.85) brightness(0.9); opacity: 0.9; }
/* Chrome ribbon pinned to the poster's left edge (clipped flush by the tile). */
.tile__status {
  position: absolute;
  top: 0.8rem; left: -0.4rem;
  background: var(--chrome);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.2em 1em 0.2em 1.1em;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.tile__body { padding: 0.95rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: 0.15rem; }
.tile__body h3 { font-size: 1.25rem; font-weight: 800; }
.tile__body p { font-size: 0.92rem; font-weight: 600; color: var(--on-surface-variant); }

.apps-note {
  margin-top: 1.8rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  max-width: 62ch;
}
.apps-note strong { color: var(--on-surface); }

/* ---- Footer stripe ---- */
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 1.6rem 0 2.2rem;
  color: var(--on-surface-variant);
}
.footstripe .footer-row { color: rgba(255, 255, 255, 0.9); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-links a {
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}
.footer-links a:hover { color: var(--on-surface); text-decoration: underline; }
.footer-links a:active { color: var(--on-surface); opacity: 0.6; }
.footstripe .footer-links a:hover,
.footstripe .footer-links a:active { color: #fff; }

/* ---- Language-suggestion banner (offers the other language) ---- */
.langbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.25rem 0 0.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-low);
  font-size: 0.9rem;
  color: var(--on-surface-variant);
}
.langbar[hidden] { display: none; }
.langbar__accept {
  color: var(--on-surface);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}
.langbar__accept:active { opacity: 0.6; }
.langbar__dismiss {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--on-surface-variant);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast);
}
.langbar__dismiss:hover { color: var(--on-surface); }