*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#182033;background:#f7f9fc;line-height:1.65}.wrap{width:min(1120px,92%);margin:auto}.siteHeader{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid #e8ebf2}.nav{height:72px;display:flex;align-items:center;gap:28px}.brand{font-size:24px;font-weight:900;color:#151b2e;text-decoration:none;white-space:nowrap}.nav nav{display:flex;gap:22px;align-items:center;margin-left:auto}.nav nav a,.links a{color:#566074;text-decoration:none;font-weight:650;font-size:14px}.nav nav a:hover,.links a:hover{color:#111827}.navBtn,.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:12px;font-weight:800}.navBtn{padding:10px 16px;background:#6c4df6;color:#fff;box-shadow:0 8px 20px rgba(108,77,246,.22)}.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center;padding:86px 0 70px}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:900;color:#6c4df6}.hero h1{font-size:clamp(44px,6vw,72px);line-height:1.02;margin:14px 0 22px;letter-spacing:-.045em}.hero h1 span{color:#6c4df6}.hero p{font-size:18px;color:#5c6679;max-width:650px}.actions{display:flex;gap:12px;margin:30px 0 18px}.btn{padding:13px 20px}.primary{background:#6c4df6;color:white;box-shadow:0 10px 25px rgba(108,77,246,.24)}.secondary{background:white;color:#263047;border:1px solid #dfe4ed}.trust{display:flex;gap:18px;flex-wrap:wrap;color:#647087;font-size:13px}.heroCard{background:#171d30;border-radius:26px;padding:18px;box-shadow:0 30px 70px rgba(31,39,67,.2);transform:rotate(1deg)}.miniTop,.miniPlayers{display:flex;justify-content:space-between;color:#e7ebf8;font-weight:800;font-size:13px;padding:4px 5px 14px}.drawArea{height:320px;border-radius:18px;background:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.scribble{font-size:110px}.guess{background:#eef1f8;border-radius:12px;padding:8px 12px;color:#45516a;font-size:14px}.guess.good{background:#e9f8ef;color:#227346}.miniPlayers{padding:14px 5px 2px;gap:8px}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:25px 0 90px}.features>div,.grid>div,.contactCard{background:white;border:1px solid #e7ebf2;border-radius:18px;padding:24px;box-shadow:0 8px 30px rgba(30,41,65,.04)}.features span{font-size:28px}.features h2{font-size:18px;margin:10px 0 4px}.features p,.grid p{margin:0;color:#687389;font-size:14px}.content{padding:35px 0 95px}.content h2{font-size:38px;line-height:1.15;margin:10px 0}.content>div>p{max-width:780px;color:#626d80}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}.cta{background:#171d30;color:white;text-align:center;padding:70px 0}.cta h2{font-size:40px;margin:0 0 8px}.cta p{color:#b8bfd0}.article{max-width:820px;padding:75px 0 100px}.article h1{font-size:48px;line-height:1.1;letter-spacing:-.035em;margin:10px 0 18px}.article h2{margin-top:38px;font-size:25px}.article p,.article li{color:#5f6a7f}.article li{margin:8px 0}.contactCard{margin:30px 0}.note{font-size:14px;padding:14px;background:#f4f6fb;border-radius:10px}footer{background:#111726;color:#c6ccda;padding:34px 0}.foot{display:flex;justify-content:space-between;gap:30px}.foot b{color:white}.foot p{margin:5px 0;color:#8f98aa;font-size:13px}.links{display:flex;gap:18px;flex-wrap:wrap}.links a{color:#aeb6c6}.copyright{border-top:1px solid #283043;margin-top:25px;padding-top:18px;color:#7f899d;font-size:12px}@media(max-width:800px){.nav{height:auto;padding:14px 0;flex-wrap:wrap;gap:12px}.nav nav{order:3;width:100%;overflow:auto;justify-content:flex-start;margin:0;padding-bottom:2px}.navBtn{margin-left:auto}.hero{grid-template-columns:1fr;gap:35px;padding:55px 0}.features{grid-template-columns:1fr 1fr;padding-bottom:55px}.heroCard{transform:none}.article h1{font-size:38px}.foot{flex-direction:column}.grid{grid-template-columns:1fr}}@media(max-width:520px){.features{grid-template-columns:1fr}.actions{flex-direction:column}.btn{width:100%}.hero h1{font-size:45px}.drawArea{height:250px}.scribble{font-size:80px}}

.emailLink{color:#6c4df6;font-weight:800;text-decoration:none}.emailLink:hover{text-decoration:underline}


/* V26.1 — Voice Chat Highlight */
.voiceHighlight{
  margin-top:28px;
  margin-bottom:28px;
  padding:26px 30px;
  display:flex;
  align-items:center;
  gap:22px;
  border:1px solid #d9d0ff;
  border-radius:22px;
  background:linear-gradient(135deg,#f7f3ff,#eef8ff);
  box-shadow:0 12px 30px rgba(60,40,120,.08);
}
.voiceIcon{
  width:72px;
  height:72px;
  flex:0 0 72px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#fff;
  border:1px solid #ddd3ff;
  font-size:36px;
}
.voiceBadge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#6f42d8;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
.voiceCopy h2{margin:8px 0 6px;font-size:28px}
.voiceCopy h2 span{color:#6f42d8}
.voiceCopy p{margin:0;max-width:850px;line-height:1.55;color:#4b5563}
.voicePoints{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:15px;
}
.voicePoints span{
  padding:8px 11px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e4e7ee;
  font-size:13px;
  font-weight:700;
}
@media (max-width:700px){
  .voiceHighlight{padding:20px;gap:15px;align-items:flex-start}
  .voiceIcon{width:58px;height:58px;flex-basis:58px;font-size:28px;border-radius:16px}
  .voiceCopy h2{font-size:23px}
  .voicePoints{gap:7px}
  .voicePoints span{font-size:12px;padding:7px 9px}
}


/* V27.1 — Production Home Refresh */
.voiceMini{
  position:absolute;
  bottom:18px;
  left:18px;
  right:18px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(23,29,48,.94);
  color:#fff;
  font-size:12px;
  box-shadow:0 8px 22px rgba(20,25,45,.18);
}
.voiceMini strong{letter-spacing:.04em}
.voiceMini span{margin-left:auto;color:#8ff0b2;font-weight:800}
.featureVoice{border-color:#d9d0ff!important;background:linear-gradient(145deg,#fff,#f8f5ff)!important}
.featureVoice h2{color:#5d3ed2}
@media(max-width:520px){
  .voiceMini{left:12px;right:12px;bottom:12px;padding:9px 10px;font-size:11px}
  .voiceMini span{display:none}
}

/* V27.8 — REAL native mobile scrolling.
   Home page intentionally uses the browser document as the only scroll surface.
   No nested scroll container, no fixed viewport, no overflow lock. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
}
@media (max-width: 800px) {
  body {
    min-height: 100vh;
  }
  .siteHeader {
    position: sticky;
    top: 0;
  }
}


/* V27.9 — Mobile Safari scroll safety */
html, body {
  width: 100%;
  min-height: 100%;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
}
body {
  position: relative !important;
  touch-action: pan-y !important;
}
main, footer, .wrap, .hero, .features, .content, .voiceHighlight, .cta {
  overflow: visible !important;
}
@media (max-width: 800px) {
  html { overflow-y: scroll !important; }
  body { overflow-y: visible !important; }
  .siteHeader { position: sticky !important; }
}

/* V28.2 — Android Chrome lobby scroll compatibility
   Keep the public home/lobby page as a normal document. */
@media (max-width: 800px) {
  html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: auto !important;
    overscroll-behavior-y: auto !important;
  }
  body {
    position: static !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  main {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .siteHeader {
    position: sticky !important;
    top: 0 !important;
  }
}