/* StrangerChat landing pages: one flat page colour, same header as the homepage, light + dark.
   Loaded last on the search pages, Global chat and Scribble. */
:root{
  --page-bg:#E9EAFB; --card-bg:#fff; --card-shadow:rgba(45,30,110,0.30);
  --surface-shadow:rgba(20,10,60,0.06); --surface-shadow-strong:rgba(20,10,60,0.10);
}
html[data-theme="dark"]{
  --ink:#F1EFFB; --muted:#A6A2BE; --line:#2B2745; --lav:#241F3C;
  --page-bg:#100D1F; --card-bg:#17142A; --card-shadow:rgba(0,0,0,0.55);
  --surface-shadow:rgba(0,0,0,0.28); --surface-shadow-strong:rgba(0,0,0,0.4); --online-green:#22C55E;
}
html,body{overflow-x:hidden;max-width:100%}
body{
  margin:0;min-height:100vh;font-family:'Poppins',sans-serif;background:var(--page-bg);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;
  padding:14px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
  -webkit-font-smoothing:antialiased;transition:background-color .35s ease,color .35s ease;
}
.page-wrap{width:100%;max-width:680px;gap:14px}

/* header, same as the homepage */
.site-header{position:relative;padding:0}
.site-logo .hp-wordmark{font-weight:800;font-size:1.15rem;margin:0;color:var(--ink)}
.site-logo .hp-wordmark .s2{color:var(--violet)}
.site-header .head-right{gap:8px}
.site-header .online-pill{padding:5px 12px 6px}
.site-header .online-sub{display:none}
.sc-menu{display:none;flex-direction:column;gap:2px;background:var(--card-bg);border-radius:16px;box-shadow:0 12px 30px var(--surface-shadow-strong);padding:8px;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30}
.sc-menu.open{display:flex}
.sc-menu a{padding:10px 14px;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none}
.sc-menu a:hover{background:var(--lav);color:var(--violet)}

/* content sits straight on the page colour, no white box on a different background */
.content-card{background:transparent;box-shadow:none;border-radius:0;padding:6px 0 10px}
.content-card h1{font-size:1.7rem;line-height:1.25}
.content-card .lede{font-size:.97rem}
.article-body{color:var(--muted)}
.article-body strong{color:var(--ink)}
.breadcrumb-trail{color:var(--muted)}
.breadcrumb-trail a{color:var(--muted)}
.site-footer{border-top-color:var(--line)}

/* cards that stay cards: modes, play box, FAQ, related */
.sc-play-card{background:var(--card-bg);border:1.5px solid #C9B8FC;box-shadow:0 14px 30px -18px var(--card-shadow)}
html[data-theme="dark"] .sc-play-card{border-color:#3A3366}
.sc-gate-line b{color:var(--ink)}
.sc-g{background:var(--card-bg);color:var(--ink);border-color:var(--line)}
.sc-g.on{background:var(--lav);border-color:var(--violet);color:var(--violet)}
.sc-modal{background:var(--card-bg);color:var(--ink)}
.sc-modal input{background:var(--page-bg);color:var(--ink);border-color:var(--line)}
/* the 18+ line: plain wrapping text, the link stays inside the sentence */
.sc-age{display:block;text-align:left;line-height:1.5}
.sc-age input{vertical-align:-2px;margin:0 6px 0 0}
.related-card,.post-card{background:var(--card-bg)}

@media (min-width:700px){
  .page-wrap{gap:20px}
  .content-card h1{font-size:2.1rem}
}
@media (max-width:480px){.site-header .online-pill{display:none}}

.sc-gender-known{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--line);background:var(--card-bg);border-radius:14px;padding:11px 14px;margin-bottom:10px;font-size:.86rem;color:var(--ink)}
.sc-gender-known button{border:none;background:none;color:var(--violet);font:700 .78rem 'Poppins',sans-serif;text-decoration:underline;cursor:pointer}