/* components.css — page sections and UI components.
   Blocks between crit-start / crit-end are inlined as critical CSS on the two homepages. */

/*crit-start*/
.hero{position:relative;padding-block:var(--s-4) var(--s-10);overflow:hidden}
.hero__grid{display:grid;gap:var(--s-6);grid-template-areas:"copy" "media" "extras"}
.hero__copy{grid-area:copy;min-width:0}
.hero__media{grid-area:media;display:flex;justify-content:center}
.hero__extras{grid-area:extras;min-width:0}
.hero h1{font-size:clamp(1.75rem,1.2rem + 3.2vw,3.5rem);margin-bottom:var(--s-3)}
.hero__sub{color:var(--text-muted);font-size:var(--fs-base);margin-bottom:var(--s-4);max-width:60ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero__cta .btn--cta{flex:1 1 220px;font-size:var(--fs-md)}
.hero__cta .btn--ghost{flex:1 1 160px}
.phone{position:relative;width:min(72vw,280px);border-radius:34px;padding:10px;background:linear-gradient(145deg,#3b3f46,#0d0e10 40%,#2a2d33);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.6),0 0 80px rgba(227,0,27,.18)}
.phone__screen{border-radius:26px;overflow:hidden;background:#000;padding-top:28px}
.phone__screen img{width:100%;height:auto}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:0 0 var(--s-4)}
.chips li{margin:0;display:inline-flex;align-items:center;gap:var(--s-2);min-height:40px;padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border-strong);font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.chips b{color:var(--gold)}
.plaque{position:relative;display:flex;flex-direction:column;gap:2px;padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(245,206,107,.16),rgba(232,178,74,.06));border:1px solid rgba(245,206,107,.55);box-shadow:var(--sh-gold)}
.plaque__main{font-size:var(--fs-lg);font-weight:800;color:var(--gold);line-height:1.25}
.plaque__sub{font-size:var(--fs-sm);color:var(--text-muted)}
.badges{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);list-style:none;padding:0;margin:0}
.badges li{margin:0;display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);color:var(--text-muted);min-height:32px}
.badges .badge-18{width:32px;height:32px;font-size:.75rem}
.badges svg{width:20px;height:20px;color:var(--gold)}
@media (min-width:768px){
  .hero{padding-block:var(--s-10) var(--s-16)}
  .hero__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);grid-template-areas:"copy media" "extras media";column-gap:var(--s-10);align-items:start}
  .hero__media{align-self:center}
  .phone{width:300px}
}
/*crit-end*/
.phone::before{content:"";position:absolute;top:18px;left:50%;width:64px;height:6px;margin-left:-32px;border-radius:6px;background:#050505;z-index:2}

/* sections */
.section{padding-block:var(--s-10);content-visibility:auto;contain-intrinsic-size:auto 900px}
.section:nth-of-type(even){background:linear-gradient(180deg,rgba(42,10,16,.35),rgba(42,10,16,.1))}
.section>.container>h2,.prose h2{position:relative;padding-bottom:var(--s-3)}
.section>.container>h2::after,.prose h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--c-red-500),var(--c-chrome-200))}
.section>.container>p,.section>.container>ul,.section>.container>ol:not(.steps),.section>.container>h3{max-width:75ch}
.section h3{margin-top:var(--s-6)}
@media (min-width:768px){.section{padding-block:var(--s-16)}}

/* page header + prose */
.page-head{padding-block:var(--s-5) var(--s-6);border-bottom:1px solid var(--border)}
.page-head__grid{display:grid;gap:var(--s-6);align-items:center}
.page-head h1{font-size:var(--fs-2xl);margin-bottom:var(--s-3)}
.page-head__media{display:none}
.meta-line{font-size:var(--fs-sm);color:var(--text-faint);margin:0}
@media (min-width:900px){
  .page-head__grid--media{grid-template-columns:1fr 180px}
  .page-head__media{display:block}
  .page-head__media .phone{width:180px;border-radius:24px;padding:7px}
  .page-head__media .phone__screen{border-radius:18px;padding-top:18px}
  .page-head__media .phone::before{top:10px;width:40px;margin-left:-20px;height:5px}
}
.breadcrumb{font-size:var(--fs-sm);margin-bottom:var(--s-3)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0}
.breadcrumb li{margin:0;display:inline-flex;align-items:center;color:var(--text-faint)}
.breadcrumb li+li::before{content:"/";margin:0 var(--s-2);color:var(--text-faint)}
.breadcrumb a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;color:var(--text-muted)}
.page-body{padding-block:var(--s-8)}
.prose{max-width:780px;margin-inline:auto}
.prose--wide{max-width:none}
.prose>section{margin-top:var(--s-10)}
.prose>section:first-of-type{margin-top:var(--s-8)}
.prose h2{font-size:var(--fs-xl);margin-top:0}
.prose h3{font-size:var(--fs-md);margin-top:var(--s-6)}
.prose li::marker{color:var(--gold)}
.lead{font-size:var(--fs-md);color:var(--text);line-height:1.65}

/* callouts & boxes */
.callout,.takeaways,.disclaimer{padding:var(--s-4) var(--s-5);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border-strong);margin:var(--s-5) 0}
.callout>:last-child,.takeaways>:last-child,.disclaimer>:last-child{margin-bottom:0}
.callout--warn{border-color:rgba(251,191,36,.55);background:rgba(251,191,36,.07)}
.callout--warn::before{content:"⚠ ";color:var(--warning);font-weight:800}
.callout--gold{border-color:rgba(245,206,107,.55);background:rgba(245,206,107,.08)}
.takeaways{border-left:4px solid var(--c-red-500)}
.takeaways__title,.toc__title{font-weight:800;color:var(--heading);margin-bottom:var(--s-2);font-size:var(--fs-md)}
.takeaways ul{margin-bottom:0}
.disclaimer{font-size:var(--fs-sm);color:var(--text-muted)}
.disclaimer strong{color:var(--chrome)}
.note{font-size:var(--fs-sm);color:var(--text-faint)}

/* toc */
.toc{margin:var(--s-6) 0;padding:var(--s-4) var(--s-5);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.toc ol{margin:0;padding-left:1.25rem;columns:1}
.toc li+li{margin-top:0}
.toc a{display:inline-flex;align-items:center;min-height:48px;color:var(--text);text-decoration:none}
.toc a:hover{color:var(--gold);text-decoration:underline}
@media (min-width:768px){.toc ol{columns:2;column-gap:var(--s-8)}}

/* tables */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s-5) 0;border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--surface)}
.table-wrap table{margin:0}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
caption{caption-side:top;text-align:left;padding:var(--s-3) var(--s-4);font-weight:700;color:var(--chrome);border-bottom:1px solid var(--border)}
th,td{padding:var(--s-3) var(--s-4);text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
thead th{background:var(--surface-3);color:#fff;font-weight:700;white-space:nowrap}
tbody th{color:var(--text);font-weight:600}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td .gold,.gold{color:var(--gold);font-weight:700}
@media (max-width:599px){
  .table-wrap--stack{border:0;background:none;overflow:visible}
  .table-wrap--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .table-wrap--stack caption{padding-inline:0}
  .table-wrap--stack tr{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);margin-bottom:var(--s-3)}
  .table-wrap--stack th,.table-wrap--stack td{display:block;border:0}
  .table-wrap--stack tbody th{grid-column:1/-1;background:var(--surface-3);border-radius:var(--r-md) var(--r-md) 0 0}
  .table-wrap--stack td::before{content:attr(data-label);display:block;font-size:var(--fs-xs);color:var(--text-faint)}
}

/* steps & checklist */
.steps{list-style:none;counter-reset:step;padding:0;margin:var(--s-6) 0;display:grid;gap:var(--s-4)}
.steps>li{counter-increment:step;position:relative;margin:0;padding:var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 48px);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.steps>li::before{content:counter(step);position:absolute;left:var(--s-4);top:var(--s-4);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#D0001A;background-image:var(--grad-cta);color:#fff;font-weight:800}
.steps h3,.steps h4{font-size:var(--fs-md);margin:0 0 var(--s-2)}
.steps p:last-child{margin-bottom:0}
@media (min-width:900px){.section .steps{grid-template-columns:repeat(2,1fr)}}
.checklist{list-style:none;padding:0}
.checklist li{position:relative;padding-left:2rem}
.checklist li::before{content:"";position:absolute;left:0;top:.3em;width:1.15rem;height:1.15rem;border-radius:50%;background:rgba(74,222,128,.15);border:2px solid var(--success)}
.checklist li::after{content:"";position:absolute;left:.4rem;top:.52em;width:.35rem;height:.6rem;border:solid var(--success);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* cards */
.cards,.cat-cards,.post-grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));list-style:none;padding:0;margin:var(--s-6) 0}
.card,.cat-card,.post-card{position:relative;padding:var(--s-5);border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--sh-1)}
.card h3,.cat-card h3,.post-card h3,.post-card h2{font-size:var(--fs-md);margin:0 0 var(--s-2)}
.card p:last-child,.cat-card p:last-child{margin-bottom:0}
.card::before{content:"";position:absolute;top:0;left:var(--s-5);width:40px;height:3px;border-radius:0 0 3px 3px;background:var(--c-red-500)}
.cat-card{display:block;color:var(--text);text-decoration:none;transition:border-color var(--t-base)}
.cat-card:hover{color:var(--text);border-color:rgba(245,206,107,.6)}
.cat-card h3{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2)}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:1.75rem;padding:0 var(--s-2);border-radius:var(--r-pill);background:rgba(245,206,107,.14);color:var(--gold);font-size:var(--fs-sm);font-weight:800}
.post-grid li{margin:0}
.post-card{height:100%;display:flex;flex-direction:column;gap:var(--s-2)}
.post-card a.post-card__link{color:var(--heading);text-decoration:none}
.post-card a.post-card__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.post-card:hover{border-color:rgba(245,206,107,.6)}
.post-card p{color:var(--text-muted);font-size:var(--fs-sm);margin:0}
.post-card__tag{font-size:var(--fs-xs);font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.06em}
:lang(hi) .post-card__tag{text-transform:none;letter-spacing:0}
.post-card__meta{margin-top:auto;padding-top:var(--s-2);font-size:var(--fs-xs);color:var(--text-faint)}
.related{margin-top:var(--s-12)}

/* screenshots */
.shot{margin:var(--s-6) auto;max-width:240px;text-align:center}
.shot .phone{width:100%;border-radius:26px;padding:7px;background:linear-gradient(145deg,#e9ebef,#9aa0a8 45%,#dfe2e6);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.shot .phone::before{top:10px;width:40px;margin-left:-20px;height:5px;background:#1a1a1a}
.shot .phone__screen{border-radius:20px;padding-top:18px}
.shot figcaption{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--text-muted);line-height:1.45}
.shots{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4) var(--s-5);margin:var(--s-6) 0}
.shots .shot{margin:0;flex:0 1 200px;max-width:200px}
@media (max-width:479px){.shots .shot{flex-basis:calc(50% - var(--s-3))}}

/* horizontal scrollers */
.scroller{position:relative;margin:var(--s-6) calc(var(--gutter) * -1) 0}
.scroller__track{display:flex;gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:var(--s-2) var(--gutter) var(--s-4);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent;overscroll-behavior-x:contain}
.scroller__track>*{scroll-snap-align:start;flex-shrink:0}
.scroller__track .shot{margin:0;width:clamp(170px,46vw,220px);max-width:none}
.scroller__nav{display:none;gap:var(--s-2);justify-content:flex-end;padding-inline:var(--gutter)}
.js .scroller__nav{display:flex}
.scroller__btn{width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-strong);color:#fff;cursor:pointer}
.scroller__btn svg{width:22px;height:22px}
.scroller__btn:disabled{opacity:.4;cursor:default}
@media (min-width:1180px){.scroller{margin-inline:0}.scroller__track{padding-inline:0}}

/* game tiles */
.game-row-block+.game-row-block{margin-top:var(--s-8)}
.game-row-block h3{margin:0 0 var(--s-2);font-size:var(--fs-md)}
.tile-row{display:flex;gap:var(--s-3);list-style:none;margin:0;padding:var(--s-2) var(--gutter) var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent;min-height:calc(var(--tile-w) * 1.232 + 48px)}
.tile-scroll{margin:var(--s-4) calc(var(--gutter) * -1)}
.tile-row li{margin:0;flex:0 0 var(--tile-w);scroll-snap-align:start}
.tile{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none;transition:transform var(--t-base) var(--ease),border-color var(--t-base)}
.tile:hover{color:#fff;border-color:rgba(245,206,107,.6);transform:translateY(-2px)}
.tile img{width:100%;height:auto;aspect-ratio:211/260;object-fit:cover;background:var(--surface-2)}
.tile__name{display:block;padding:var(--s-2);font-size:var(--fs-xs);font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-actions{margin-top:var(--s-6)}
.noscript-list{columns:2;column-gap:var(--s-6);font-size:var(--fs-sm)}
@media (min-width:768px){.noscript-list{columns:4}}
@media (min-width:1180px){.tile-scroll{margin-inline:0}.tile-row{padding-inline:0}}

/* library */
.lib{margin-top:var(--s-6)}
.lib__controls{display:grid;gap:var(--s-4);margin-bottom:var(--s-4)}
.lib__filters{display:flex;gap:var(--s-2);overflow-x:auto;padding-bottom:var(--s-2);scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.lib__filters::-webkit-scrollbar{display:none}
.filter{flex-shrink:0;min-height:var(--tap);padding:0 var(--s-4);border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);font-weight:600;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap}
.filter[aria-pressed="true"]{background-color:#D0001A;background-image:var(--grad-cta);border-color:rgba(255,120,130,.5);color:#fff}
.filter .count{margin-left:var(--s-2);height:1.5rem;min-width:2rem;background:rgba(0,0,0,.25);color:inherit}
.search{position:relative}
.search input{width:100%;min-height:var(--tap);padding:0 var(--s-4) 0 2.75rem;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border-strong);color:var(--text);font-size:1rem}
.search input::placeholder{color:var(--text-faint)}
.search svg{position:absolute;left:var(--s-3);top:50%;width:20px;height:20px;margin-top:-10px;color:var(--text-faint);pointer-events:none}
.lib__status{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--s-3)}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--s-3);list-style:none;padding:0;margin:0}
.lib-grid li{margin:0}
.js .lib-grid:empty{min-height:1400px}
.lib__empty{padding:var(--s-6);text-align:center;border:1px dashed var(--border-strong);border-radius:var(--r-md)}
@media (min-width:600px){.lib-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s-4)}.lib__controls{grid-template-columns:1fr}}
@media (min-width:1024px){.lib__filters{margin-inline:0;padding-inline:0;flex-wrap:wrap}}

/* faq accordion */
.faq{display:grid;gap:var(--s-3);margin-top:var(--s-6)}
.faq__item{border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.faq__q{margin:0;font-size:var(--fs-base)}
.faq__btn{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);width:100%;min-height:56px;padding:var(--s-3) var(--s-5);background:transparent;border:0;border-radius:var(--r-md);text-align:left;color:var(--heading);font-weight:700;font-size:var(--fs-base);line-height:1.4;cursor:pointer}
.faq__icon{position:relative;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--surface-3)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--gold);transition:transform var(--t-base)}
.faq__icon::after{transform:rotate(90deg)}
.faq__btn[aria-expanded="true"] .faq__icon::after{transform:rotate(0)}
.faq__a{padding:0 var(--s-5) var(--s-4);color:var(--text-muted)}
.faq__a p{margin:0}
.no-js .faq__icon{display:none}
.js .faq__a.is-closed{display:none}

/* keyword chips */
.kw-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:var(--s-5) 0 0}
.kw-chips li{margin:0}
.kw-chips a{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--s-4);border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border-strong);color:var(--text);text-decoration:none;font-size:var(--fs-sm)}
.kw-chips a:hover{border-color:var(--gold);color:var(--gold)}

/* support card, cta boxes */
.support-card{display:grid;gap:var(--s-4);padding:var(--s-6);border-radius:var(--r-xl);background:linear-gradient(135deg,rgba(19,111,159,.22),rgba(42,10,16,.6));border:1px solid rgba(34,158,217,.35)}
.cta-box{margin:var(--s-8) 0;padding:var(--s-5);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(227,0,27,.18),rgba(42,10,16,.7));border:1px solid rgba(255,90,100,.35);display:grid;gap:var(--s-3)}
.cta-box__title{font-size:var(--fs-lg);font-weight:800;color:var(--heading);margin:0}
.cta-box p{margin:0;color:var(--text-muted)}
.cta-box__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.cta-box__actions .btn{flex:1 1 200px}
.cta-box .note{font-size:var(--fs-xs)}
.final-cta{padding-block:var(--s-10);content-visibility:auto;contain-intrinsic-size:auto 420px}
.final-cta__box{position:relative;overflow:hidden;text-align:center;padding:var(--s-8) var(--s-5);border-radius:var(--r-xl);background:radial-gradient(120% 120% at 50% 0%,#5a0f1c 0%,#1E0A0F 70%);border:1px solid rgba(255,90,100,.35)}
.final-cta__box h2{font-size:var(--fs-2xl)}
.final-cta__box p{max-width:56ch;margin-inline:auto;color:var(--text-muted)}
.final-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin:var(--s-5) 0 var(--s-4)}
.final-cta__actions .btn{flex:0 1 260px}
.final-cta__box .note{margin:0}

/* misc */
.center{text-align:center}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:var(--s-5) 0}
.page-404{text-align:center;padding-block:var(--s-16)}
.page-404 .big{font-size:clamp(4rem,3rem + 6vw,8rem);font-weight:900;line-height:1;margin-bottom:var(--s-4)}
.no-js .lib__controls,.no-js .lib__status{display:none}