/*! Chie Games site · page sections (hero, spotlight, detail, genres, styleguide). Tokens + components only. */

/* ───── Home hero ───── */
.page-home .site-header.on-hero:not(.is-stuck){--bg:transparent}
.hero{position:relative;background:linear-gradient(180deg,var(--sky-400) 0%,var(--sky-300) 70%,var(--sky-200) 100%);margin-top:-72px;padding-top:calc(72px + var(--s-7));overflow:hidden;isolation:isolate}
.hero__sky{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.55) 0 2px,transparent 3px) 0 0/90px 90px,radial-gradient(circle at 60% 70%,rgba(255,255,255,.4) 0 1.5px,transparent 2.5px) 0 0/70px 70px}
.cloud{position:absolute;width:var(--w,180px);aspect-ratio:3/1;background:#fff;border-radius:999px;opacity:.85;animation:cg-drift var(--t,60s) linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:45%;aspect-ratio:1;left:14%;bottom:30%}
.cloud::after{width:34%;aspect-ratio:1;left:48%;bottom:38%}
.cloud.c1{top:16%;left:-10%;--w:200px;--t:80s}
.cloud.c2{top:52%;left:30%;--w:130px;--t:65s;opacity:.6;animation-delay:-30s}
.cloud.c3{top:8%;left:62%;--w:160px;--t:95s;opacity:.7;animation-delay:-50s}
@keyframes cg-drift{from{transform:translateX(-20vw)}to{transform:translateX(120vw)}}
.hero__in{display:grid;gap:var(--s-7);align-items:center;padding-bottom:var(--s-7)}
@media (min-width:1024px){.hero__in{grid-template-columns:1.05fr .95fr;min-height:520px}}
.hero__copy{display:flex;flex-direction:column;gap:var(--s-5);align-items:flex-start}
.pill-note{display:inline-flex;align-items:center;gap:var(--s-2);padding:6px 14px 5px;border:var(--bw-thin) solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-sm);font-weight:var(--fw-bold);box-shadow:var(--e-1);animation:cg-in var(--d-slow) var(--ease-pop) both}
.pill-note .ic{color:var(--accent-press)}
.hero__title{--sw:.075em;--sd:.09em;transform-origin:left center;animation:cg-title var(--d-hero) var(--ease-pop) both .05s}
.hero__title .hl{display:block}
@keyframes cg-title{from{opacity:0;transform:rotate(-8deg) scale(.85)}to{opacity:1;transform:rotate(-3deg)}}
.hero__lead{color:var(--ink-800);max-width:34ch;animation:cg-in var(--d-slow) var(--ease-out) both .15s}
.hero__cta{animation:cg-in var(--d-slow) var(--ease-out) both .25s}
.hero__art{position:relative;aspect-ratio:1.1;max-width:620px;width:100%;margin-inline:auto}
.hero__tile{position:absolute;width:62%;border:var(--bw) solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e-3);background:var(--g-deep);
  transform:rotate(var(--r)) translateY(0);transition:transform var(--d-base) var(--ease-pop),z-index 0s;animation:cg-pop var(--d-slow) var(--ease-pop) both;pointer-events:auto}
.hero__tile img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.hero__tile:hover{transform:rotate(0deg) scale(1.06);z-index:10}
.hero__tile.t1{left:0;top:4%;--r:-7deg;z-index:3;animation-delay:.1s}
.hero__tile.t2{right:0;top:0;--r:6deg;z-index:2;animation-delay:.18s}
.hero__tile.t3{left:19%;top:34%;--r:-2deg;z-index:5;width:66%;animation-delay:.26s}
.hero__tile.t4{left:2%;bottom:2%;--r:5deg;z-index:4;animation-delay:.34s}
.hero__tile.t5{right:-2%;bottom:6%;--r:-6deg;z-index:3;animation-delay:.42s}
@keyframes cg-pop{from{opacity:0;transform:rotate(var(--r)) translateY(40px) scale(.8)}to{opacity:1;transform:rotate(var(--r))}}
.hero__stats{position:relative;z-index:2;padding-bottom:var(--s-7)}
.hero__wave{display:block;width:100%;height:40px;margin-bottom:-1px}

/* ───── Spotlight carousel ───── */
.spot{display:grid;background:var(--g-deep);color:var(--white);border:var(--bw) solid var(--border);border-radius:var(--r-xl);overflow:hidden;min-height:100%;position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--g-primary) 70%,transparent),transparent 60%)}
@media (min-width:1024px){.spot{grid-template-columns:1fr 1.15fr}}
.spot__copy{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6) var(--s-5);align-items:flex-start;justify-content:center}
@media (min-width:768px){.spot__copy{padding:var(--s-7)}}
.spot__title{--sw:.06em;--sd:.07em}
.spot__tag{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--g-pop)}
.spot__desc{color:rgba(255,255,255,.92);max-width:46ch}
.spot__feats{list-style:none;display:grid;gap:var(--s-2);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.spot__feats li{display:flex;gap:var(--s-2);align-items:center}
.spot__feats .ic{color:var(--g-pop);stroke-width:3}
.spot__media{position:relative;order:-1;display:grid;place-items:center;padding:var(--s-4) var(--s-4) 0}
@media (min-width:1024px){.spot__media{order:0;padding:var(--s-6) var(--s-6) var(--s-6) 0}}
.spot__media img{width:100%;aspect-ratio:1200/630;object-fit:cover;border:var(--bw) solid var(--border);border-radius:var(--r-lg);box-shadow:0 8px 0 var(--ink-950);transform:rotate(1.5deg)}
.carousel__track:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}

/* ───── Filter bar ───── */
.filterbar{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;margin-bottom:var(--s-2)}
.filterbar .chip-row{flex:1;min-width:0}
.sortby{display:flex;align-items:center;gap:var(--s-2)}
.sortby .select{min-height:44px;width:auto;padding-block:8px}
.filter-status{margin-bottom:var(--s-5)}

/* ───── Why / features ───── */
.why-grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

/* ───── How to play (dark band) ───── */
.how .sec-head .t-overline{color:var(--sun-400)}
.how .t-lead{color:var(--text-inverse-muted)}
.how-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.how-card{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:rgba(255,255,255,.06);border:var(--bw-thin) solid rgba(255,255,255,.14);color:var(--white);text-decoration:none;font-weight:var(--fw-medium);transition:background var(--d-base),transform var(--d-base) var(--ease-pop)}
.how-card:hover{background:rgba(255,255,255,.12);color:var(--white);transform:translateX(4px)}
.how-card img{width:56px;height:56px;border-radius:14px;flex:none;border:var(--bw-thin) solid rgba(255,255,255,.3);background:var(--g-deep)}
.how-card>span{flex:1;display:grid;gap:2px}
.how-card__line{display:flex;gap:6px;align-items:flex-start;font-size:var(--fs-sm);color:var(--text-inverse-muted)}
.how-card__line .ic{margin-top:2px;color:var(--g-pop)}
.how-card>.ic{color:var(--sun-400)}

/* ───── Quick picks ───── */
.picks{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.pick{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);border-radius:var(--r-lg);background:var(--bg-alt);border:var(--bw-thin) solid var(--border-soft)}
.pick .stack{margin-top:var(--s-2)}

/* ───── FAQ + partner ───── */
.faq-split{align-items:start}
.partner{display:flex;flex-direction:column;gap:var(--s-4);background:var(--sun-100);overflow:visible}
@media (min-width:1024px){.partner{position:sticky;top:96px;margin-top:calc(var(--fs-h2) + var(--s-8))}}
.checks{list-style:none;display:grid;gap:var(--s-2)}
.checks li{display:flex;gap:var(--s-2);align-items:flex-start;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.checks .ic{flex:none;color:var(--success);stroke-width:3.2;background:var(--ink-900);border-radius:50%;padding:3px;--ic:20px}

/* ───── Generic page head ───── */
.page-head{padding-block:var(--s-7) var(--s-5);background:linear-gradient(180deg,var(--bg-alt),var(--bg))}
.page-head .crumbs{margin-bottom:var(--s-4);color:var(--text-muted)}
.page-head .t-lead{margin-top:var(--s-3);max-width:60ch}
.genre-head{background:linear-gradient(180deg,var(--genre-soft),var(--bg))}

/* ───── Game detail ───── */
.g-hero{background:var(--g-deep);color:var(--white);padding-block:var(--s-6) var(--s-8);position:relative;isolation:isolate;overflow:hidden;border-bottom:var(--bw) solid var(--border)}
.g-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 90% at 90% 10%,color-mix(in srgb,var(--g-primary) 75%,transparent),transparent 65%),radial-gradient(circle at 10% 90%,color-mix(in srgb,var(--g-accent) 25%,transparent),transparent 40%)}
.g-hero .crumbs{color:rgba(255,255,255,.85);margin-bottom:var(--s-5)}
.g-hero .crumbs a{color:var(--white)}
.g-hero__grid{display:grid;gap:var(--s-7);align-items:center}
@media (min-width:1024px){.g-hero__grid{grid-template-columns:1fr 1.1fr}}
.g-hero__copy{display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start}
.g-hero__title{--sw:.07em;--sd:.08em;font-size:clamp(2.75rem,1.6rem + 5vw,5.5rem)}
.g-hero__tag{font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--g-pop)}
.g-hero__short{font-size:var(--fs-lead);color:rgba(255,255,255,.92);max-width:42ch}
.g-hero__media{position:relative;display:block;border:var(--bw) solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 10px 0 var(--ink-950);transform:rotate(1.5deg);transition:transform var(--d-base) var(--ease-pop)}
.g-hero__media:hover{transform:rotate(0) scale(1.02)}
.g-hero__media img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.g-hero__playover{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,14,31,.25);opacity:0;transition:opacity var(--d-base);color:var(--white)}
.g-hero__playover .ic{--ic:88px;fill:var(--g-pop);stroke:var(--ink-900);stroke-width:1.6;filter:drop-shadow(0 5px 0 var(--ink-900))}
.g-hero__media:hover .g-hero__playover,.g-hero__media:focus-visible .g-hero__playover{opacity:1}
.g-hero .tag{background:rgba(255,255,255,.92)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);margin:calc(var(--s-8)*-1) 0 0;position:relative;z-index:2}
@media (min-width:768px){.facts{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1280px){.facts{grid-template-columns:repeat(6,1fr)}}
.fact{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s-3);align-items:center;padding:var(--s-4);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-md);box-shadow:var(--e-2)}
.fact .ic{grid-row:span 2;color:var(--g-accent);--ic:28px}
.fact dt{font-size:var(--fs-xs);color:var(--text-muted);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em}
.fact dd{margin:0;font-weight:var(--fw-bold)}
.features-card{display:flex;flex-direction:column;gap:var(--s-4);background:color-mix(in srgb,var(--g-pop) 18%,var(--surface))}
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-7) var(--s-6);border-radius:var(--r-xl);border:var(--bw) solid var(--border);background:var(--g-deep);color:var(--white);box-shadow:var(--e-3)}
.cta-band .t-out{--sw:.06em;--sd:.07em;margin-bottom:var(--s-2)}

/* ───── Genres ───── */
.genre-grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.genre-card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);background:var(--genre-soft);border:var(--bw) solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e-2);color:var(--text);text-decoration:none;font-weight:var(--fw-medium);transition:transform var(--d-base) var(--ease-pop),box-shadow var(--d-base)}
.genre-card:hover{transform:translateY(-5px) rotate(.5deg);box-shadow:0 10px 0 var(--shadow-color);color:var(--text)}
.genre-card__name{font-weight:var(--fw-bold)}
.genre-card__thumbs{display:flex;margin-top:auto}
.genre-card__thumbs img{width:44px;height:44px;border-radius:12px;border:var(--bw-thin) solid var(--border);margin-right:-10px;background:var(--surface)}
.genre-card__count{display:inline-flex;align-items:center;gap:var(--s-2)}

/* ───── Info pages ───── */
.contact-cards{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.contact-cards .card{display:flex;flex-direction:column;gap:var(--s-2)}
.contact-cards .card p{margin:0}
.contact-form{--gap:var(--s-4)}
.prose code{background:var(--surface-sunk);padding:1px 6px;border-radius:6px;font-size:.9em}
.nf__face{width:120px;height:120px;animation:cg-float 3s var(--ease-in-out) infinite}
.nf .t-display{--sw:.06em;--sd:.07em}

/* ───── Game detail: story, journey, loop, tips ───── */
.g-hero__hook{font-size:var(--fs-lead);font-style:italic;color:var(--white);padding-left:var(--s-4);border-left:4px solid var(--g-pop);max-width:44ch}
.story{max-width:68ch}
.story h2{margin:var(--s-2) 0 var(--s-5)}
.story p{font-size:1.0625rem;line-height:1.75}
.story p:first-of-type::first-letter{float:left;font-size:4.2em;line-height:.85;font-weight:800;margin:.06em .12em 0 0;color:var(--g-accent);-webkit-text-stroke:2px var(--ink-900);text-shadow:0 4px 0 var(--ink-900)}
@media (min-width:1024px){.story-side{position:sticky;top:96px}}
.modes-card{display:flex;flex-direction:column;gap:var(--s-3)}
.g-dark{background:var(--g-deep);color:var(--white);position:relative;isolation:isolate;overflow:hidden}
.g-dark::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 80% at 0% 0%,color-mix(in srgb,var(--g-primary) 60%,transparent),transparent 60%)}
.g-dark .t-overline{color:var(--g-pop)}
.g-dark .t-lead{color:rgba(255,255,255,.85)}
.journey{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-4)}
.journey>li{flex:1 1 200px}
.zone{position:relative;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);border-radius:var(--r-lg);background:rgba(255,255,255,.07);border:var(--bw-thin) solid rgba(255,255,255,.18);transition:transform var(--d-base) var(--ease-pop),background var(--d-base)}
.zone:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}
.zone__num{font-size:var(--fs-h2);font-weight:800;line-height:1;color:var(--g-pop);-webkit-text-stroke:1.5px var(--ink-900);text-shadow:0 3px 0 var(--ink-900)}
.zone__meta{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.75)}
.zone__name{font-size:var(--fs-h4);font-weight:var(--fw-bold)}
.zone p{color:rgba(255,255,255,.88);font-size:var(--fs-sm)}
.zone__boss{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 12px 3px;border-radius:var(--r-pill);background:var(--g-pop);color:var(--ink-900);border:var(--bw-thin) solid var(--ink-900);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.loop{list-style:none;display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.loop__step{position:relative;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-6) var(--s-5) var(--s-5);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e-2)}
.loop__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--g-deep);color:var(--g-pop);border:var(--bw) solid var(--border);box-shadow:var(--e-1);margin-bottom:var(--s-2)}
.loop__icon .ic{--ic:28px}
.loop__n{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}
.tips{list-style:none;display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.tip{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4) var(--s-5);border-radius:var(--r-md);background:color-mix(in srgb,var(--g-pop) 16%,var(--surface));border:var(--bw-thin) solid var(--border)}
.tip .ic{flex:none;color:var(--ink-900);fill:var(--g-pop);margin-top:2px}
.tip p{margin:0;font-weight:var(--fw-medium)}

/* ───── Home: flagship (Rush Rider) ───── */
.flagship{background:var(--g-deep);color:var(--white);position:relative;isolation:isolate;overflow:hidden;border-block:var(--bw) solid var(--border)}
.flagship::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 70% at 85% 20%,color-mix(in srgb,var(--g-accent) 38%,transparent),transparent 60%),radial-gradient(50% 60% at 10% 90%,color-mix(in srgb,var(--g-pop) 22%,transparent),transparent 60%),
  repeating-linear-gradient(90deg,transparent 0 79px,rgba(62,240,255,.06) 79px 80px),var(--g-deep)}
.flagship__in{display:grid;gap:var(--s-7);align-items:center}
@media (min-width:1024px){.flagship__in{grid-template-columns:1fr 1.1fr}}
.flagship__copy{display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start}
.flagship .t-overline{display:inline-flex;gap:6px;align-items:center;color:var(--g-pop)}
.flagship__title{--sw:.07em;--sd:.08em;font-size:clamp(3rem,1.8rem + 5vw,6rem);color:var(--g-pop);transform:rotate(-2deg);transform-origin:left center}
.flagship__hook{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--g-accent);text-shadow:0 0 18px color-mix(in srgb,var(--g-accent) 60%,transparent)}
.flagship__story{color:rgba(255,255,255,.9);max-width:52ch}
.flagship__route{--gap:6px;align-items:center;color:rgba(255,255,255,.6)}
.route-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 12px 3px;border-radius:var(--r-pill);border:var(--bw-thin) solid rgba(62,240,255,.5);color:var(--white);font-size:var(--fs-sm);font-weight:var(--fw-bold);background:rgba(62,240,255,.08)}
.route-chip .ic{color:var(--g-pop)}
.flagship__media{position:relative}
@media (min-width:768px){.flagship__media{padding-bottom:var(--s-7)}}
.flagship__cover{display:block;border:var(--bw) solid var(--border);border-radius:var(--r-xl);overflow:hidden;transform:rotate(2deg);box-shadow:0 10px 0 var(--ink-950),0 0 60px color-mix(in srgb,var(--g-accent) 45%,transparent);transition:transform var(--d-base) var(--ease-pop)}
.flagship__cover:hover{transform:rotate(0) scale(1.02)}
.flagship__cover img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.board{position:relative;margin:calc(var(--s-5)*-1) 0 0 var(--s-4);width:min(300px,86%);padding:var(--s-4);border-radius:var(--r-lg);background:var(--surface);color:var(--text);border:var(--bw) solid var(--border);box-shadow:var(--e-3);transform:rotate(-2.5deg)}
@media (min-width:768px){.board{position:absolute;margin:0;left:var(--s-4);bottom:0}}
@media (min-width:1024px){.board{left:-28px}}
.board__title{display:flex;gap:6px;align-items:center;font-weight:var(--fw-bold);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s-2)}
.board__title .ic{color:var(--accent-press)}
.board ol{list-style:none;display:grid;gap:4px}
.board li{display:grid;grid-template-columns:24px 1fr auto;gap:var(--s-2);align-items:center;font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.board li strong{font-variant-numeric:tabular-nums}
.board__pos{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sun-300);border:var(--bw-thin) solid var(--border);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.board li.you{margin-top:4px;padding-top:6px;border-top:2px dashed var(--border-soft)}
.board li.you .board__pos{background:var(--g-accent);color:var(--white)}
.board li.you strong{color:var(--danger-text)}