:root{
  --bg:#120e0b;--panel:#211914;--panel2:#2b2018;--paper:#f0e3c8;--text:#f6ecd9;
  --muted:#b9aa91;--gold:#c7a35f;--red:#a84637;--red2:#8f382c;--line:#ffffff18;
  --green:#a9c98f;--shadow:#0008;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:
  radial-gradient(circle at 50% -10%,#3a2819 0,#1d1510 28%,#120e0b 62%,#0c0907 100%);
  color:var(--text);font-family:Georgia,"Times New Roman",serif;
}
a{color:inherit}
button,input,textarea,select{font:inherit}
.shell{width:min(1160px,100%);margin:auto;padding:22px}
.topbar{
  position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px 0 22px;border-bottom:1px solid var(--line)
}
.brand{font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.brand small{display:block;color:var(--gold);font-size:.68rem;letter-spacing:.22em;margin-top:4px}
.nav{display:flex;gap:16px;flex-wrap:wrap;font-size:.9rem;color:#d9ccb7}
.nav a{text-decoration:none}.nav a:hover{color:#fff3dc}

.hero{padding:82px 0 56px;text-align:center}
.kicker{color:var(--gold);letter-spacing:.22em;text-transform:uppercase;font-size:.76rem}
h1{font-size:clamp(2.8rem,8vw,6.4rem);line-height:.92;margin:.18em 0 .2em}
.hero p{max-width:790px;margin:0 auto;color:#d8cbb6;font-size:1.18rem;line-height:1.65}
.hero strong{color:#fff3dc}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.hero-proof{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px;color:#cabba4;font-size:.82rem}
.hero-proof span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:#ffffff07}

.section{padding:24px 0 66px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:22px;margin:0 0 24px}
.section-head h2{font-size:clamp(2rem,5vw,3.3rem);margin:.12em 0 0}
.section-head p{max-width:560px;color:#c7b8a1;line-height:1.6;margin:0}
.section-rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.4;margin-bottom:24px}

.games{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.card{
  grid-column:span 6;background:linear-gradient(180deg,#281e17,#1b1410);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:0 18px 50px var(--shadow);display:flex;flex-direction:column;min-width:0
}
.card.compact{grid-column:span 6}
.poster{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#251a13}
.content{padding:22px;display:flex;flex-direction:column;gap:12px;height:100%}
.meta,.card-facts{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:.73rem;padding:7px 9px;border-radius:999px;border:1px solid #ffffff1f;color:#d9ccb7;background:#ffffff08}
.status{color:var(--green);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.status.soon{color:var(--gold)}
.card h3{margin:0;font-size:1.8rem}.card h2{margin:0;font-size:1.8rem}
.card p{margin:0;color:#c8baa4;line-height:1.58}
.card-price{font-size:1.5rem;color:#fff0cf;margin-top:2px}
.card-price small{font-size:.72rem;color:#aa9b86;text-transform:uppercase;letter-spacing:.08em}
.actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;padding-top:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;
  padding:12px 18px;background:linear-gradient(180deg,var(--red),var(--red2));color:var(--text);font-weight:700;
  border:1px solid #ffffff10;cursor:pointer;appearance:none;-webkit-appearance:none;
  box-shadow:0 8px 20px #0004;transition:.18s transform,.18s filter,.18s border-color
}
.btn:hover{filter:brightness(1.09);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.alt{background:#34261d;border-color:#ffffff22;color:#eadbc2;box-shadow:none}
.btn.disabled{background:#29211b;color:#8f8372;border-color:#ffffff10;pointer-events:none;box-shadow:none}
.buyform{margin:0;display:inline-flex}.buyform .btn{font-family:inherit;font-size:inherit}

.about{
  padding:32px;border:1px solid var(--line);border-radius:20px;background:#ffffff08;
  display:grid;grid-template-columns:1.05fr .95fr;gap:34px
}
.about h2{font-size:2.1rem;margin:.1em 0 .5em}.about p{color:#cdbfa9;line-height:1.68}
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.step{padding:17px;border-radius:14px;background:#0d0a08aa;border:1px solid #ffffff12;line-height:1.48}
.step b{color:var(--gold)}

.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.choice{
  min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;border-radius:18px;border:1px solid #ffffff16;background:
  radial-gradient(circle at 50% 0,#8d4b2b22,transparent 60%),#ffffff07;
  color:#f0dfc2;font-size:1.16rem;line-height:1.45
}
.choice em{font-style:normal;color:var(--gold)}

.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq details{background:#ffffff07;border:1px solid var(--line);border-radius:14px;padding:0 17px}
.faq summary{cursor:pointer;padding:17px 4px;font-weight:700;color:#f1e5d1}
.faq details p{padding:0 4px 17px;margin:0;color:#c9baa3;line-height:1.6}

.feedback-panel{
  display:grid;grid-template-columns:.82fr 1.18fr;gap:32px;padding:32px;border-radius:20px;
  border:1px solid #ffffff18;background:
  radial-gradient(circle at 0 0,#9b533522,transparent 45%),#ffffff08
}
.feedback-panel h2{font-size:2rem;margin:.12em 0 .45em}
.feedback-panel p{color:#c9baa3;line-height:1.62}
.feedback-form{display:grid;gap:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{
  width:100%;border:1px solid #ffffff1d;background:#0e0a08;color:var(--text);border-radius:12px;
  padding:13px 14px;outline:none
}
.field:focus{border-color:#c7a35f88;box-shadow:0 0 0 3px #c7a35f14}
textarea.field{min-height:132px;resize:vertical;line-height:1.5}
.form-label{font-size:.78rem;color:#c7b69e;letter-spacing:.04em}
.form-note{font-size:.78rem;color:#978a79;line-height:1.45}
.hp{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-message{min-height:22px;font-size:.88rem}
.form-message.ok{color:var(--green)}.form-message.err{color:#e0a493}

.footer{
  border-top:1px solid var(--line);padding:30px 0 38px;color:var(--muted);font-size:.85rem;
  display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap
}
.footer-links{display:flex;gap:13px;flex-wrap:wrap}.footer a{text-decoration:none}.footer a:hover{color:#fff3dc}
.footer-mark{color:#d9ccb7}.footer-mark small{display:block;margin-top:4px;color:#897d6d}

.detail{
  display:grid;grid-template-columns:minmax(280px,480px) 1fr;gap:42px;align-items:center;padding:54px 0 58px
}
.detail .poster{border-radius:20px;box-shadow:0 18px 60px #0008;border:1px solid var(--line)}
.detail h1{font-size:clamp(2.8rem,7vw,5.4rem)}
.detail .lead{font-size:1.08rem;color:#d2c4ae;line-height:1.65}
.factrow{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.price{font-size:2rem;color:#fff0cf;margin:18px 0 8px}
.note{font-size:.86rem;color:var(--muted);line-height:1.5}
.story,.detail-extra{
  max-width:820px;margin:0 auto 34px;padding:28px;border-radius:18px;background:#ffffff08;border:1px solid var(--line)
}
.story h2,.detail-extra h2{margin-top:0}.story p,.detail-extra p{color:#d0c1aa;line-height:1.7}
.detail-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.detail-mini div{padding:14px;border-radius:12px;background:#0e0a08aa;border:1px solid #ffffff10;text-align:center;color:#cdbfa9}
.detail-mini b{display:block;color:#f3e5cd;margin-bottom:4px}

@media(max-width:860px){
  .card,.card.compact{grid-column:span 6}
  .about,.detail,.feedback-panel{grid-template-columns:1fr}
  .detail{padding-top:34px}.detail .poster{max-width:560px;margin:auto}
  .choices{grid-template-columns:1fr}.faq{grid-template-columns:1fr}
}
@media(max-width:580px){
  .shell{padding:16px}.topbar{align-items:flex-start}.nav{justify-content:flex-end;gap:10px;font-size:.82rem}
  .hero{padding:52px 0 38px}.games{gap:16px}.card,.card.compact{grid-column:1/-1}
  .about,.feedback-panel{padding:20px}.steps,.form-row{grid-template-columns:1fr}.detail{gap:25px}
  .section-head{align-items:flex-start;flex-direction:column}.detail-mini{grid-template-columns:1fr}
}

.trust-line{margin-top:12px;color:#a99b87;font-size:.8rem;line-height:1.45}
.mobile-buybar{display:none}
.vote-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.vote-count{font-size:.8rem;color:#a99b87}.vote-done{color:var(--green)}
@media(max-width:860px){
 body.has-sticky-buy{padding-bottom:82px}
 .mobile-buybar{display:flex;position:fixed;z-index:50;left:0;right:0;bottom:0;padding:10px 14px;background:#120e0bf2;border-top:1px solid #ffffff1d;backdrop-filter:blur(10px);align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -10px 30px #0006}
 .mobile-buybar .mobile-price{font-size:1rem;line-height:1.1}.mobile-buybar .mobile-price small{display:block;color:#9f927f;font-size:.7rem;margin-top:3px}.mobile-buybar .btn{padding:11px 16px;white-space:nowrap}
}

/* Paris 1929 launch: spotlight card; the other four available games remain unchanged. */
.card.featured-paris{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.card.featured-paris .poster{height:100%;min-height:385px;aspect-ratio:auto}
.card.featured-paris .content{justify-content:center;padding:clamp(22px,3vw,38px)}
.card.featured-paris h3{font-size:clamp(1.8rem,3vw,2.5rem)}
.card.solo-coming{grid-column:4/span 6}
@media(max-width:860px){
  .card.featured-paris{display:flex;grid-column:1/-1}
  .card.featured-paris .poster{height:auto;min-height:0;aspect-ratio:4/3}
  .card.solo-coming{grid-column:1/-1}
}

/* Vespera 1897 at-home feature */
.card.featured-home{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.card.featured-home .poster{height:100%;min-height:385px;aspect-ratio:auto}
.card.featured-home .content{justify-content:center;padding:clamp(22px,3vw,38px)}
.card.featured-home h3{font-size:clamp(1.8rem,3vw,2.5rem)}
@media(max-width:860px){
  .card.featured-home{display:flex;grid-column:1/-1}
  .card.featured-home .poster{height:auto;min-height:0;aspect-ratio:4/3}
  .card.featured-home .content{height:auto}
  .card.featured-home .actions{margin-top:4px}
  .card.featured-home .home-purchase-note{margin-top:0}
}


/* Conversion-focused product details */
.value-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:-24px auto 34px;max-width:980px
}
.value-strip div{
  padding:13px 12px;border:1px solid #ffffff14;border-radius:12px;background:#ffffff07;
  text-align:center;color:#cdbfa9;font-size:.82rem;line-height:1.35
}
.value-strip b{display:block;color:#f4e7d0;margin-bottom:3px;font-size:.9rem}
.experience{max-width:980px;margin:0 auto 34px}
.experience-head{text-align:center;margin-bottom:18px}
.experience-head h2{margin:0 0 8px;font-size:clamp(1.8rem,4vw,2.6rem)}
.experience-head p{margin:0 auto;max-width:700px;color:#c7b8a1;line-height:1.6}
.experience-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.experience-shot{margin:0;border:1px solid #ffffff14;background:#0e0a08;border-radius:14px;overflow:hidden}
.experience-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.experience-shot figcaption{padding:11px 12px;color:#bfae95;font-size:.8rem;line-height:1.4}
.final-cta{
  max-width:820px;margin:0 auto 42px;padding:28px;border:1px solid #c7a35f38;border-radius:18px;
  background:radial-gradient(circle at 50% 0,#a8463720,transparent 60%),#ffffff08;text-align:center
}
.final-cta h2{margin:0 0 8px;font-size:clamp(1.8rem,4vw,2.5rem)}
.final-cta p{margin:0 auto 18px;max-width:650px;color:#cdbfa9;line-height:1.55}
.final-cta .actions{justify-content:center;margin-top:0}
.hero-promise{color:#d9cbb4;font-size:.92rem;line-height:1.5;margin:10px 0 0}
.hero-promise strong{color:#fff0cf}
.detail .actions{margin-top:8px}
@media(max-width:760px){
  .value-strip{grid-template-columns:repeat(2,1fr);margin-top:-12px}
  .experience-gallery{grid-template-columns:1fr}
  .experience-shot img{aspect-ratio:16/10}
}

/* Poster-as-details link: keeps cards cleaner while making the artwork the natural “view game” action. */
.poster-link{position:relative;display:block;overflow:hidden;border-radius:inherit;text-decoration:none;color:inherit}
.poster-link .poster{display:block;width:100%;transition:transform .22s ease,filter .22s ease}
.poster-link-label{position:absolute;left:14px;bottom:14px;padding:7px 10px;border:1px solid rgba(244,221,177,.55);border-radius:999px;background:rgba(18,14,11,.78);color:#f2ddb5;font-size:.72rem;font-weight:700;letter-spacing:.08em;opacity:.88;backdrop-filter:blur(4px)}
.poster-link:hover .poster,.poster-link:focus-visible .poster{transform:scale(1.018);filter:brightness(1.06)}
.poster-link:hover .poster-link-label,.poster-link:focus-visible .poster-link-label{background:rgba(160,64,45,.92);color:#fff}
.poster-link:focus-visible{outline:2px solid #d8ad61;outline-offset:3px}
@media (max-width:700px){.poster-link-label{font-size:.68rem;left:10px;bottom:10px;padding:6px 9px}}


/* v4 compact catalogue: reduce scroll and keep the purchase CTA close to the product copy. */
#play-now .games{gap:16px}
#play-now .card{grid-column:span 4;border-radius:16px}
#play-now .poster{aspect-ratio:16/9}
#play-now .content{padding:15px 16px 16px;gap:8px;height:auto}
#play-now .card h3{font-size:1.42rem;line-height:1.08}
#play-now .card p{font-size:.88rem;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#play-now .card-facts{gap:6px}
#play-now .tag{font-size:.66rem;padding:5px 7px}
#play-now .status{font-size:.67rem}
#play-now .card-price{font-size:1.28rem;margin-top:1px}
#play-now .trust-line{margin-top:0;font-size:.72rem;line-height:1.3}
#play-now .actions{margin-top:2px;padding-top:2px}
#play-now .btn{padding:9px 14px;font-size:.83rem}
#play-now .poster-link-label{left:10px;bottom:10px;padding:5px 8px;font-size:.64rem}

/* Coming-soon cards are compact horizontal previews on desktop. */
#coming-next .games{gap:16px}
#coming-next .card.compact{display:grid;grid-template-columns:minmax(170px,.9fr) minmax(0,1.35fr);grid-column:span 6;border-radius:16px}
#coming-next .card.compact>.poster{height:100%;min-height:210px;aspect-ratio:auto}
#coming-next .card.compact .content{padding:16px;gap:8px;height:auto;justify-content:center}
#coming-next .card.compact h3{font-size:1.45rem}
#coming-next .card.compact p{font-size:.86rem;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#coming-next .card.compact .tag{font-size:.65rem;padding:5px 7px}
#coming-next .card.compact .actions{margin-top:2px;padding-top:2px}
#coming-next .card.compact .btn{padding:9px 13px;font-size:.8rem}
#coming-next .vote-wrap{margin-top:2px}

@media(max-width:1080px){
  #play-now .card{grid-column:span 6}
}
@media(max-width:760px){
  #play-now .card{grid-column:1/-1}
  #play-now .poster{aspect-ratio:16/10}
  #play-now .content{padding:14px;gap:7px}
  #play-now .card p{-webkit-line-clamp:2}
  #play-now .actions{margin-top:1px}
  #coming-next .card.compact{display:flex;grid-column:1/-1}
  #coming-next .card.compact>.poster{height:auto;min-height:0;aspect-ratio:16/9}
  #coming-next .card.compact .content{padding:14px}
}

/* v5 FINAL COMPACT HOME — less scrolling, aligned artwork, mobile swipe catalogue */
.shell{padding:18px}
.topbar{padding:7px 0 15px}
.hero{padding:46px 0 30px}
.hero h1{font-size:clamp(2.35rem,6.2vw,4.85rem);line-height:.94;margin:.12em 0 .16em}
.hero p{max-width:735px;font-size:1rem;line-height:1.5}
.hero-actions{margin-top:18px;gap:9px}
.hero-proof{margin-top:15px;gap:7px;font-size:.73rem}
.hero-proof span{padding:6px 9px}
.section{padding:12px 0 34px}
.section-head{gap:16px;margin-bottom:12px}
.section-head h2{font-size:clamp(1.72rem,3.8vw,2.5rem);line-height:1;margin-top:.08em}
.section-head p{max-width:500px;font-size:.9rem;line-height:1.4}
.section-rule{margin-bottom:13px}

/* Featured at-home game: compact banner rather than a tall product page */
.card.featured-home{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);border-radius:16px}
.card.featured-home .poster-link{height:100%}
.card.featured-home .poster{height:100%;min-height:250px;aspect-ratio:auto;object-fit:cover;object-position:center}
.card.featured-home .content{padding:18px 20px;gap:7px;justify-content:center}
.card.featured-home h3{font-size:clamp(1.45rem,2.4vw,2rem)}
.card.featured-home p{font-size:.9rem;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card.featured-home .card-price{font-size:1.38rem}
.card.featured-home .trust-line{font-size:.72rem;margin-top:0}
.card.featured-home .actions{margin-top:2px;padding-top:0}
.card.featured-home .btn{padding:9px 14px;font-size:.82rem}

/* City catalogue */
#play-now .games{gap:14px}
#play-now .card{grid-column:span 4;border-radius:14px}
#play-now .poster-link{border-radius:0}
#play-now .poster{aspect-ratio:16/9;object-fit:cover;object-position:center}
#play-now .content{padding:11px 13px 13px;gap:5px;height:auto}
#play-now .status{font-size:.61rem}
#play-now .card h3{font-size:1.18rem;line-height:1.05}
#play-now .card-facts{gap:5px}
#play-now .tag{font-size:.61rem;padding:4px 6px}
#play-now .card p{font-size:.79rem;line-height:1.3;-webkit-line-clamp:2}
#play-now .card-price{font-size:1.06rem;margin-top:0}
#play-now .trust-line{display:none}
#play-now .actions{margin-top:0;padding-top:0}
#play-now .btn{padding:7px 11px;font-size:.73rem}
#play-now .poster-link-label{font-size:.59rem;padding:4px 7px;left:8px;bottom:8px}

/* Coming next */
#coming-next .games{gap:14px}
#coming-next .card.compact{grid-template-columns:minmax(160px,.9fr) minmax(0,1.25fr);border-radius:14px}
#coming-next .card.compact>.poster{height:100%;min-height:165px;aspect-ratio:auto;object-fit:cover;object-position:center}
#coming-next .card.compact .content{padding:12px 14px;gap:5px}
#coming-next .card.compact h3{font-size:1.18rem}
#coming-next .card.compact p{font-size:.78rem;line-height:1.3;-webkit-line-clamp:2}
#coming-next .card.compact .tag{font-size:.59rem;padding:4px 6px}
#coming-next .card.compact .btn{padding:7px 10px;font-size:.7rem}
#coming-next .vote-wrap,#coming-next .card.compact .actions{margin-top:0;padding-top:0}

/* Lower information blocks: keep useful information but make it glanceable. */
.about{padding:20px;grid-template-columns:260px 1fr;gap:18px}
.about h2{font-size:1.55rem;margin:.05em 0 .32em;line-height:1.05}
.about p{font-size:.86rem;line-height:1.42;margin:.35em 0}
.steps{grid-template-columns:repeat(4,1fr);gap:8px}
.step{padding:11px 10px;font-size:.76rem;line-height:1.32;border-radius:11px}
.choices{gap:9px;margin-top:12px}
.choice{min-height:82px;padding:13px;font-size:.9rem;line-height:1.3;border-radius:13px}
.faq{gap:8px}
.faq details{padding:0 11px;border-radius:11px}
.faq summary{padding:10px 2px;font-size:.86rem}
.faq details p{padding:0 2px 10px;font-size:.83rem;line-height:1.4}
.feedback-panel{padding:18px;gap:18px;border-radius:15px}
.feedback-panel h2{font-size:1.5rem;margin:.06em 0 .28em}
.feedback-panel p{font-size:.84rem;line-height:1.4;margin:.45em 0}
.feedback-form{gap:8px}
.field{padding:9px 11px;border-radius:9px;font-size:.86rem}
textarea.field{min-height:78px}
.form-label,.form-note{font-size:.69rem}
.footer{padding:20px 0 24px}

@media(max-width:1080px){
  #play-now .card{grid-column:span 6}
  .steps{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .shell{padding:13px}
  .topbar{padding-bottom:11px}
  .brand{font-size:.82rem}.brand small{font-size:.55rem}
  .nav{gap:8px;font-size:.72rem}
  .hero{padding:28px 0 22px}
  .hero h1{font-size:clamp(2.1rem,11vw,3.25rem)}
  .hero p{font-size:.89rem;line-height:1.42}
  .hero-actions{margin-top:14px}.hero-actions .btn{padding:9px 12px;font-size:.75rem}
  .hero-proof{display:none}
  .section{padding:8px 0 24px}
  .section-head{margin-bottom:10px;gap:7px}
  .section-head h2{font-size:1.72rem}
  .section-head p{font-size:.82rem;line-height:1.35}
  .section-rule{margin-bottom:10px}

  .card.featured-home{display:flex}
  .card.featured-home .poster{min-height:0;aspect-ratio:16/9;height:auto}
  .card.featured-home .content{padding:12px;gap:5px}
  .card.featured-home p{-webkit-line-clamp:2;font-size:.82rem}
  .card.featured-home .card-facts .tag:nth-child(4){display:none}
  .card.featured-home .trust-line{display:none}

  /* One compact swipe row instead of six tall stacked cards. */
  #play-now .games{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(235px,82vw);grid-template-columns:none;
    overflow-x:auto;gap:10px;padding:0 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  #play-now .card{grid-column:auto;scroll-snap-align:start}
  #play-now .poster{aspect-ratio:16/9}
  #play-now .content{padding:10px 11px 11px;gap:4px}
  #play-now .card h3{font-size:1.1rem}
  #play-now .card p{font-size:.76rem;-webkit-line-clamp:2}
  #play-now .card-price{font-size:1rem}
  #play-now .btn{width:100%;padding:7px 10px}

  #coming-next .games{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(270px,88vw);grid-template-columns:none;
    overflow-x:auto;gap:10px;padding:0 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  #coming-next .card.compact{display:grid;grid-template-columns:42% 58%;grid-column:auto;scroll-snap-align:start}
  #coming-next .card.compact>.poster{height:100%;min-height:150px;aspect-ratio:auto}
  #coming-next .card.compact .content{padding:10px;gap:4px}
  #coming-next .card.compact h3{font-size:1.05rem}
  #coming-next .card.compact p{font-size:.73rem}
  #coming-next .card.compact .card-facts{display:none}
  #coming-next .card.compact .btn{font-size:.66rem;padding:6px 8px}

  .about{padding:14px;grid-template-columns:1fr;gap:10px}
  .about h2{font-size:1.35rem}
  .about p{font-size:.8rem;margin:.25em 0}
  .steps{grid-template-columns:repeat(2,1fr);gap:6px}
  .step{padding:9px 8px;font-size:.69rem}
  .choices{display:grid;grid-auto-flow:column;grid-auto-columns:78vw;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .choice{scroll-snap-align:start;min-height:72px;font-size:.84rem}
  .faq{grid-template-columns:1fr;gap:6px}
  .feedback-panel{padding:14px;gap:10px}
  .feedback-panel h2{font-size:1.3rem}
  .feedback-panel p{font-size:.78rem}
  .footer{padding:16px 0 72px;font-size:.72rem}
}


/* Free-demo bridge: visible without adding much vertical scroll. */
.demo-nudge{
  display:flex;align-items:center;justify-content:space-between;gap:18px;margin:-8px 0 28px;padding:13px 16px;
  border:1px solid #c7a35f45;border-radius:14px;background:linear-gradient(90deg,#2b2018,#1a130f);
  text-decoration:none;color:#f4e7d0;box-shadow:0 10px 28px #0004;transition:.18s border-color,.18s transform,.18s filter
}
.demo-nudge:hover,.demo-nudge:focus-visible{border-color:#c7a35f99;filter:brightness(1.06);transform:translateY(-1px)}
.demo-nudge-copy{font-size:.94rem;line-height:1.35}.demo-nudge-copy b{color:#fff0cf}.demo-nudge-copy small{display:inline;color:#a99b87;margin-left:8px}
.demo-nudge strong{white-space:nowrap;color:#f0c77f;font-size:.82rem;letter-spacing:.06em}
.demo-inline{display:inline-block;margin:10px 0 2px;color:#d9b875;text-underline-offset:3px;font-size:.9rem}
.demo-inline:hover{color:#ffe3a7}
@media(max-width:650px){
  .demo-nudge{margin:-4px 0 20px;padding:11px 12px;gap:10px}
  .demo-nudge-copy{font-size:.86rem}.demo-nudge-copy small{display:block;margin:2px 0 0;font-size:.74rem}
  .demo-nudge strong{font-size:.72rem}
  .demo-inline{font-size:.84rem;margin-top:8px}
}

/* 2026-10-06 HUB HOTFIX
   Keeps the compact catalogue from the current master, but on phones shows
   two city cards per row instead of a long vertical stack or one-card swipe. */
@media(max-width:760px){
  #play-now .games{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:row;
    grid-auto-columns:auto;
    overflow:visible;
    gap:8px;
    padding:0;
    scroll-snap-type:none;
  }
  #play-now .card{
    grid-column:auto;
    min-width:0;
    scroll-snap-align:none;
    border-radius:12px;
  }
  #play-now .poster{
    aspect-ratio:4/3;
    object-fit:cover;
    object-position:center;
  }
  #play-now .poster-link-label{display:none}
  #play-now .content{
    padding:8px 8px 9px;
    gap:3px;
  }
  #play-now .status{
    font-size:.52rem;
    letter-spacing:.08em;
  }
  #play-now .card h3{
    font-size:.96rem;
    line-height:1.05;
  }
  #play-now .card-facts{
    gap:3px;
    flex-wrap:wrap;
  }
  #play-now .tag{
    font-size:.52rem;
    padding:3px 4px;
  }
  #play-now .tag:nth-child(n+3){display:none}
  #play-now .card p,
  #play-now .trust-line{display:none}
  #play-now .card-price{
    font-size:.9rem;
    margin-top:1px;
  }
  #play-now .actions{
    margin-top:2px;
    padding-top:0;
  }
  #play-now .buyform{width:100%}
  #play-now .btn{
    width:100%;
    padding:7px 5px;
    font-size:.62rem;
    white-space:nowrap;
  }

  #coming-next .games{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:row;
    grid-auto-columns:auto;
    overflow:visible;
    gap:8px;
    padding:0;
    scroll-snap-type:none;
  }
  #coming-next .card.compact{
    display:flex;
    grid-column:auto;
    min-width:0;
    scroll-snap-align:none;
    border-radius:12px;
  }
  #coming-next .card.compact>.poster{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:4/3;
    object-fit:cover;
  }
  #coming-next .card.compact .content{
    padding:8px;
    gap:3px;
  }
  #coming-next .card.compact h3{font-size:.96rem}
  #coming-next .card.compact p,
  #coming-next .card.compact .card-facts{display:none}
  #coming-next .card.compact .status{font-size:.52rem}
  #coming-next .card.compact .btn{
    width:100%;
    font-size:.59rem;
    padding:6px 5px;
    white-space:normal;
  }
  #coming-next .vote-wrap{margin-top:2px}
}

/* Very narrow phones: keep the two-column catalogue readable. */
@media(max-width:350px){
  #play-now .card h3,
  #coming-next .card.compact h3{font-size:.88rem}
  #play-now .tag{font-size:.48rem}
  #play-now .btn,
  #coming-next .card.compact .btn{font-size:.56rem}
}


/* 2026-10-06 PRODUCT PAGE EXPLANATION UPGRADE
   Added on top of the verified master + hub hotfix. Does not alter game files. */
.detail-promise{margin:4px 0 16px;color:#dfd0b8;font-size:.9rem;line-height:1.45}
.detail-promise b{color:#f4d89e}
.experience-explain,.practical-info{max-width:980px}
.experience-explain>.kicker,.practical-info>.kicker{text-align:center;margin-bottom:6px}
.experience-explain>h2,.practical-info>h2{text-align:center;margin:0 0 17px;font-size:clamp(1.7rem,4vw,2.35rem)}
.experience-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.experience-step{padding:15px 13px;border-radius:13px;background:#0e0a08aa;border:1px solid #ffffff12;color:#cdbfa9;font-size:.82rem;line-height:1.48}
.experience-step b{display:block;color:#f3e5cd;margin-bottom:6px;font-size:.9rem}
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.quick-item{padding:13px 14px;border-radius:12px;background:#0e0a08aa;border:1px solid #ffffff10;color:#cdbfa9;font-size:.84rem;line-height:1.45}
.quick-item b{display:block;color:#f3e5cd;margin-bottom:4px}
.fit-line{text-align:center;margin:16px auto 0!important;max-width:760px;font-size:.88rem}
@media(max-width:860px){.experience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){
  .detail-promise{font-size:.8rem;margin:2px 0 12px}
  .experience-explain,.practical-info{padding:17px 13px;margin-bottom:22px}
  .experience-explain>h2,.practical-info>h2{font-size:1.42rem;margin-bottom:12px}
  .experience-grid,.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .experience-step,.quick-item{padding:10px 9px;font-size:.72rem;line-height:1.38}
  .experience-step b,.quick-item b{font-size:.77rem;margin-bottom:3px}
  .fit-line{font-size:.76rem;margin-top:11px!important}
}


/* 2026-10-10 homepage conversion pass: compact flow + city-first hierarchy */
.section-tight{padding-bottom:40px}
.how-compact{
  display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,2.28fr);gap:18px;align-items:stretch;
  padding:18px;border:1px solid var(--line);border-radius:18px;background:#ffffff07
}
.how-callout{padding:4px 6px;align-self:center}
.how-callout h2{font-size:clamp(1.55rem,2.4vw,2.15rem);line-height:1.05;margin:.18em 0 .42em}
.how-callout p{margin:0;color:#cdbfa9;line-height:1.5;max-width:310px}
.steps.steps-four{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.steps-four .step{padding:14px 13px;display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:112px}
.steps-four .step b{line-height:1.2}
.steps-four .step span{color:#cbbda7;font-size:.9rem;line-height:1.35}
.home-strip{
  display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#241a14,#19120e);box-shadow:0 14px 36px #0005
}
.home-strip-media{display:block;border-radius:12px;overflow:hidden;min-width:0}
.home-strip-media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.home-strip-copy{min-width:0}
.home-strip-copy h2{font-size:clamp(1.45rem,2.4vw,2rem);margin:.12em 0 .32em;line-height:1.05}
.home-strip-copy p{margin:0 0 10px;color:#c8baa4;line-height:1.45}
.home-strip-buy{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;min-width:max-content;padding-right:6px}
.home-strip-buy .btn{padding:10px 15px;font-size:.84rem}
.home-strip-details{font-size:.78rem;color:#c7a35f;text-decoration:none}
.home-strip-details:hover{text-decoration:underline}
@media(max-width:860px){
  .how-compact{grid-template-columns:1fr;padding:16px}
  .how-callout{display:grid;grid-template-columns:1fr 1.35fr;gap:14px;align-items:end}
  .how-callout .kicker{grid-column:1/-1}
  .how-callout h2,.how-callout p{margin:0}
  .steps.steps-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps-four .step{min-height:92px}
  .home-strip{grid-template-columns:150px minmax(0,1fr)}
  .home-strip-buy{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;min-width:0;flex-wrap:wrap;padding:0}
}
@media(max-width:580px){
  .section-tight{padding-bottom:30px}
  .how-compact{padding:12px;gap:12px}
  .how-callout{display:block;padding:2px 3px}
  .how-callout h2{margin:.18em 0 .35em}.how-callout p{max-width:none}
  .steps.steps-four{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .steps-four .step{padding:11px 10px;min-height:88px;font-size:.86rem}
  .steps-four .step span{font-size:.78rem}
  .home-strip{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:11px}
  .home-strip-media img{aspect-ratio:1/1;height:100%;object-fit:cover}
  .home-strip-copy h2{font-size:1.25rem}.home-strip-copy p{font-size:.84rem;margin-bottom:7px}
  .home-strip-copy .tag{font-size:.66rem;padding:5px 7px}
  .home-strip-buy{grid-column:1/-1;justify-content:space-between;gap:8px}
  .home-strip-buy .card-price{font-size:1.25rem}
  .home-strip-buy .btn{padding:9px 12px;font-size:.78rem}
  .home-strip-details{display:none}
}