/* ZGame This or That v2 — landing + play UI enhancements */
:root{--tot-purple:#6d28d9;--tot-purple-2:#8b5cf6;--tot-pink:#ec4899;--tot-orange:#f97316;--tot-ink:#17152b;--tot-muted:#6c6678;--tot-line:#ece5ef;--tot-soft:#f8f5ff;--tot-card:#fff;--tot-green:#16a34a}
body{background:radial-gradient(circle at 10% 0%,rgba(124,58,237,.08),transparent 28%),radial-gradient(circle at 90% 10%,rgba(236,72,153,.07),transparent 25%),#fffaf7!important}
.hero{position:relative;overflow:hidden;padding:76px 20px 74px!important;background:linear-gradient(135deg,#5420b7 0%,#7c3aed 32%,#e83e8c 72%,#ff7a35 100%)!important}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}.hero:before{width:360px;height:360px;left:-140px;top:-190px;background:rgba(255,255,255,.12)}.hero:after{width:420px;height:420px;right:-190px;bottom:-260px;background:rgba(255,255,255,.10)}
.hero-inner{position:relative;z-index:1;width:min(980px,94%);margin:auto;text-align:center}.hero .eyebrow{box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}.hero h1{letter-spacing:-.035em;text-wrap:balance}.hero p{font-size:clamp(.98rem,2vw,1.08rem);text-wrap:balance}.hero-badges{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:22px}.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);font-size:.78rem;font-weight:800;color:#fff;backdrop-filter:blur(8px)}
.main{position:relative;z-index:2;margin-top:-34px!important}.panel,.side-card,.content-card{border-color:rgba(106,78,128,.14)!important;box-shadow:0 18px 55px rgba(67,40,82,.10)!important}.panel{background:linear-gradient(180deg,#fff,#fffdfd)!important}.panel-head h2{letter-spacing:-.02em}.count-pill{border:1px solid #e2d5ff;background:#f7f2ff!important}.label{color:#393248}.title-input,.choice-input{border-color:#e8e0ec!important;background:#fff!important}.title-input:hover,.choice-input:hover{border-color:#d7cae0!important}.pair{background:linear-gradient(135deg,#fff,#fdfaff)!important;border-color:#ebe2f0!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.pair:hover{transform:translateY(-1px);border-color:#d8c6e7!important;box-shadow:0 10px 24px rgba(83,48,101,.06)}.pair-number i{color:#8b5cf6}.remove{transition:.18s}.remove:hover{background:#ffe2e8;transform:scale(1.04)}.btn:focus-visible,.choice:focus-visible,.remove:focus-visible,.title-input:focus-visible,.choice-input:focus-visible{outline:3px solid rgba(124,58,237,.24);outline-offset:2px}
.quick-ideas{margin:0 0 22px;padding:16px;border:1px dashed #d8cae6;border-radius:16px;background:#fbf8ff}.quick-ideas-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:.8rem;font-weight:900;color:#50475e}.preset-row{display:flex;gap:8px;flex-wrap:wrap}.preset-btn{border:1px solid #e2d7ec;background:#fff;color:#655873;border-radius:999px;padding:8px 11px;font:inherit;font-size:.75rem;font-weight:800;cursor:pointer;transition:.18s}.preset-btn:hover{border-color:#8b5cf6;color:#6d28d9;transform:translateY(-1px)}
.btn-save{background:linear-gradient(135deg,#6d28d9,#ec4899)!important}.btn-add{border:1px solid #ded0ef}.side-card{background:rgba(255,255,255,.96)!important}.side-card h3{display:flex;align-items:center;gap:8px}.side-card h3 i{color:#7c3aed}.privacy h3 i{color:#0f9f69}.step span{box-shadow:inset 0 0 0 1px #e4d8f4}.login-card{padding:40px 30px!important}.login-icon{box-shadow:0 14px 30px rgba(124,58,237,.12)}
.seo-wrap{width:min(1120px,94%);margin:0 auto 74px}.seo-intro{background:#fff;border:1px solid rgba(106,78,128,.14);border-radius:26px;padding:34px;box-shadow:0 16px 50px rgba(67,40,82,.08)}.seo-kicker{display:inline-flex;align-items:center;gap:7px;color:#6d28d9;background:#f5efff;border-radius:999px;padding:7px 11px;font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.seo-intro h2{font-size:clamp(1.55rem,3vw,2.25rem);margin:14px 0 12px;letter-spacing:-.03em}.seo-intro>p{max-width:900px;color:#625d70;line-height:1.85;margin:0}.seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.seo-card{background:#fff;border:1px solid rgba(106,78,128,.13);border-radius:20px;padding:22px;box-shadow:0 10px 30px rgba(67,40,82,.05)}.seo-card-icon{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#f4edff;color:#6d28d9;margin-bottom:13px}.seo-card h3{margin:0 0 8px;font-size:1.02rem}.seo-card p,.seo-card li{color:#6b6577;line-height:1.72;font-size:.88rem}.seo-card ul{margin:8px 0 0;padding-left:18px}.ideas-section,.faq-section{margin-top:18px;background:#fff;border:1px solid rgba(106,78,128,.13);border-radius:22px;padding:28px;box-shadow:0 10px 30px rgba(67,40,82,.05)}.ideas-section h2,.faq-section h2{margin:0 0 8px;font-size:1.35rem}.ideas-section>p,.faq-section>p{margin:0 0 18px;color:#6b6577;line-height:1.7}.idea-pills{display:flex;flex-wrap:wrap;gap:9px}.idea-pill{padding:9px 12px;border-radius:999px;background:#faf7ff;border:1px solid #eadff3;color:#554b62;font-size:.8rem;font-weight:700}.faq-list{display:grid;gap:10px}.faq-item{border:1px solid #eee7f1;border-radius:15px;background:#fff}.faq-item summary{cursor:pointer;padding:15px 17px;font-weight:850;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:15px}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-size:1.2rem;color:#7c3aed}.faq-item[open] summary:after{content:"−"}.faq-item p{margin:0;padding:0 17px 16px;color:#6b6577;line-height:1.7;font-size:.88rem}
/* shared play page */
.wrap{position:relative}.game-card{border-color:rgba(106,78,128,.16)!important;box-shadow:0 22px 70px rgba(63,38,78,.13)!important}.game-card .head{position:relative;overflow:hidden;background:linear-gradient(135deg,#5420b7 0%,#7c3aed 38%,#e83e8c 76%,#ff7a35 100%)!important}.game-card .head:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-120px;top:-150px;background:rgba(255,255,255,.1)}.game-card .head>*{position:relative;z-index:1}.game-card .head .icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 30px rgba(39,17,80,.18)}.play-hints{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:15px}.play-hint{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:.7rem;font-weight:800}.game-card .body{background:linear-gradient(180deg,#fff,#fffdff)}.intro-badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;padding:7px 10px;border-radius:999px;background:#f4edff;color:#6d28d9;font-size:.72rem;font-weight:900}.choice{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#fcfbff)!important}.choice:before{position:absolute;top:11px;left:12px;padding:4px 7px;border-radius:999px;background:#f2ecfb;color:#6d28d9;font-size:.62rem;font-weight:900;letter-spacing:.06em}.choice.a:before{content:"OPTION A"}.choice.b:before{content:"OPTION B"}.choice.a:hover{border-color:#22c55e!important}.choice.b:hover{border-color:#ec4899!important}.choice.a.selected,.choice.b.selected{transform:translateY(-2px);box-shadow:0 12px 28px rgba(40,28,55,.10)}.question-number{letter-spacing:-.02em}.progress-meta{margin-top:2px}.track{height:10px!important}.bar{box-shadow:0 0 12px rgba(124,58,237,.28)}.secondary:disabled{opacity:.45;cursor:not-allowed}.result-icon{box-shadow:0 13px 28px rgba(20,184,166,.2)}
@media(max-width:900px){.seo-grid{grid-template-columns:1fr 1fr}.hero{padding-bottom:62px!important}}
@media(max-width:620px){.hero{padding:50px 14px 46px!important}.hero h1{font-size:2rem!important}.hero-badges{gap:7px;margin-top:17px}.hero-badge{font-size:.7rem;padding:8px 10px}.main{padding:0 10px!important}.panel{padding:19px 14px!important}.pair{padding:14px!important}.quick-ideas{padding:14px}.preset-row{display:grid;grid-template-columns:1fr 1fr}.preset-btn{border-radius:12px}.seo-wrap{width:100%;padding:0 10px;margin-bottom:50px}.seo-intro,.ideas-section,.faq-section{padding:22px 17px;border-radius:20px}.seo-grid{grid-template-columns:1fr;gap:12px}.seo-card{padding:18px}.game-card .head{padding:28px 17px!important}.game-card .body{padding:20px 14px!important}.choice{min-height:118px!important;padding:38px 14px 20px!important}.choice:before{top:9px;left:10px}.nav{grid-template-columns:1fr 1.25fr!important}.btn{min-height:46px}.summary-item{grid-template-columns:1fr!important;text-align:center}.summary-item .sep{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* ZGame This-or-That layout v3 — 90vw game card, 80vw content, compact hero */
@media(min-width:901px){
  .hero{padding:32px 20px 30px!important}
  .hero-inner{width:min(1040px,92%)}
  .hero h1{font-size:clamp(1.8rem,3.2vw,2.7rem)!important;margin:9px auto 7px!important}
  .hero p{font-size:.9rem!important;line-height:1.55!important}
  .hero-badges{margin-top:11px;gap:6px}
  .hero-badge{padding:6px 9px;font-size:.68rem}
  .main{width:min(90vw,1600px)!important;max-width:none!important;margin:-7px auto 22px!important;grid-template-columns:1fr!important;gap:15px!important}
  .side{position:static!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:15px!important}
  .side-card{height:100%}
  .seo-wrap{width:min(80vw,1400px)!important;max-width:none!important;margin:0 auto 62px!important}
}
@media(max-width:900px){
  .hero{padding:27px 15px 25px!important}
  .hero h1{font-size:clamp(1.75rem,7vw,2.3rem)!important;margin:8px auto 6px!important}
  .hero p{font-size:.86rem!important;line-height:1.55!important}
  .hero-badges{margin-top:10px}
  .main{width:calc(100% - 20px)!important;margin:10px auto 20px!important;padding:0!important;grid-template-columns:1fr!important}
  .side{order:initial!important;grid-template-columns:1fr 1fr!important}
  .seo-wrap{width:calc(100% - 20px)!important;padding:0!important}
}
@media(max-width:620px){
  .hero{padding:21px 12px 20px!important}
  .hero h1{font-size:1.72rem!important}
  .hero-badges{gap:5px}
  .hero-badge{padding:6px 8px;font-size:.66rem}
  .side{grid-template-columns:1fr!important}
}


/* Stage v4 alignment overrides */
.main.zg-game-stage{margin:-7px auto 24px!important}
.wrap.zg-game-stage{margin:22px auto 45px!important}
.main.zg-game-stage .panel,.wrap.zg-game-stage .game-card{max-width:100%!important}
@media(max-width:620px){.main.zg-game-stage,.wrap.zg-game-stage{margin:10px auto 32px!important;padding:8px!important}.wrap.zg-game-stage .game-card{border-radius:20px!important;border-left:1px solid #ece4df!important;border-right:1px solid #ece4df!important}}