/* ============================================================
   PlayinMatch — playin-match.co.in
   Theme: FLOODLIT TURF · shared shell only.
   Page-unique CSS page ke apne <style> me, prefix flt- (rules/71).
   ============================================================ */

/* ---------- self-hosted fonts (rules/94, rules/124) ---------- */
@font-face{font-family:'BigShouldersDisplay';src:url('/fonts/bigshoulders-latin.woff2') format('woff2');
  font-weight:700 800;font-style:normal;font-display:optional;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'BigShouldersDisplay';src:url('/fonts/bigshoulders-latin-ext.woff2') format('woff2');
  font-weight:700 800;font-style:normal;font-display:optional;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'HankenGrotesk';src:url('/fonts/hanken-latin.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:optional;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'HankenGrotesk';src:url('/fonts/hanken-latin-ext.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:optional;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- tokens ---------- */
:root{
  --pitch:#0A1410; --pitch-2:#111F18; --pitch-3:#182C22; --pitch-4:#21382C;
  --lime:#C6F24E; --gold:#F7B733; --wa:#25D366;
  --beam:#FFF6DC; --ink:#DDE8E0; --ink-dim:#A9BCB0;
  --rule:#213A2D;
  --gut:clamp(16px,4vw,40px);
  --wrap:1180px;
  --head:'BigShouldersDisplay',Impact,'Arial Narrow Bold',sans-serif;
  /* body stack: Hanken me rupee glyph NAHI hai (rules/124) — fallback zaroori */
  --body:'HankenGrotesk','Noto Sans','Segoe UI',Roboto,Arial,sans-serif;
  color-scheme:dark;
}

/* ---------- reset + overflow firewall (rules/23, 24) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:clip;max-width:100%;margin:0;background:var(--pitch);color:var(--ink);
  font:400 clamp(16px,1.02vw,17.5px)/1.68 var(--body);letter-spacing:.005em}
:where(body *){min-width:0}
:where(p,li,dd,dt,td,th,h1,h2,h3,h4,summary,figcaption){overflow-wrap:break-word}
main{max-width:100%;overflow-x:clip;display:block}
img,svg,video{max-width:100%;height:auto}
a{color:var(--lime)}
a:not([class]){color:var(--lime);text-underline-offset:3px;text-decoration-thickness:1px}
a:not([class]):hover{color:var(--beam)}

h1,h2,h3,h4{font-family:var(--head);font-weight:800;line-height:1.04;
  letter-spacing:.012em;color:var(--beam);margin:0 0 .5em}
h1{font-size:clamp(2.3rem,6.2vw,4.1rem)}
h2{font-size:clamp(1.72rem,3.9vw,2.68rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.72rem)}
h4{font-size:clamp(1.1rem,2vw,1.32rem)}
p{margin:0 0 1.15em}

/* ---------- skip link (rules/118 — form yahin, page par inline style KABHI nahi) ---------- */
.skip,.skip-link{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  background:var(--gold);color:#0A1410;font-family:var(--head);font-size:1.05rem;
  padding:.7em 1.2em;z-index:200;text-decoration:none}
.skip:focus,.skip-link:focus{width:auto;height:auto;overflow:visible;
  clip:auto;clip-path:none;left:12px;top:12px}

/* ---------- focus + motion ---------- */
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:clamp(46px,7vw,86px)}
.eyebrow{font-family:var(--head);font-weight:700;font-size:.92rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime);margin:0 0 .6em}

/* ---------- header (rules/21) ---------- */
.hdr{width:100%;max-width:100vw;position:sticky;top:0;z-index:120;
  background:var(--pitch-2);border-bottom:1px solid var(--rule)}
.hdr-in{display:flex;align-items:center;gap:14px;min-height:64px}
.hdr-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.hdr-logo img{display:block;height:38px;width:auto}
.hdr-sp{flex:1 1 auto}
.nav-btn{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;background:var(--pitch-3);border:1px solid var(--rule);
  border-radius:4px;color:var(--beam);cursor:pointer}
.nav-btn span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.nav-btn span::before,.nav-btn span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:currentColor;pointer-events:none}
.nav-btn span::before{top:-6px}.nav-btn span::after{top:6px}

.nav{position:absolute;left:0;right:0;top:100%;width:100%;
  background:var(--pitch-2);border-bottom:1px solid var(--rule);
  display:none;padding:8px var(--gut) 18px}
.nav.open{display:block}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:block;min-height:44px;line-height:44px;padding:0 4px;
  font-family:var(--head);font-weight:700;font-size:1.15rem;letter-spacing:.03em;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.nav a:hover{color:var(--lime)}
.nav a[aria-current="page"]{color:var(--lime)}

@media (min-width:1000px){
  .nav-btn{display:none}
  .nav{position:static;display:block;background:none;border:0;padding:0;width:auto}
  .nav ul{display:flex;gap:6px;align-items:center}
  .nav a{border-bottom:0;font-size:1.02rem;padding:0 10px;line-height:44px}
}

/* ---------- CTA: notched tag (axis 2) ---------- */
.cta{display:inline-flex;align-items:center;gap:10px;position:relative;
  min-height:48px;padding:.72em 1.5em .72em 1.25em;
  font-family:var(--head);font-weight:800;font-size:1.1rem;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;
  background:var(--gold)!important;color:#0A1410!important;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--pitch);pointer-events:none}
.cta:hover{background:#FFC84F!important}
.cta-wa{background:var(--wa)!important;color:#07220F!important}
.cta-wa:hover{background:#3DE47A!important}
.cta-sm{min-height:44px;font-size:.98rem;padding:.55em 1.15em .55em 1em}

/* ---------- tables + scroll strips (rules/57, 79) ---------- */
.tbl-wrap{position:relative;overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:var(--pitch-4) var(--pitch-2);margin:0 0 1.4em}
.tbl-wrap>table{min-width:430px;width:100%;border-collapse:collapse}
.tbl-wrap::-webkit-scrollbar{height:8px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--pitch-4);border-radius:4px}
table th,table td{text-align:left;padding:.66em .85em;border-bottom:1px solid var(--rule);
  vertical-align:top;font-size:.97rem}
table th{background:var(--pitch-3);color:var(--beam);font-family:var(--head);
  font-weight:700;font-size:1.02rem;letter-spacing:.04em}

.strip{position:relative}
.strip-track{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:var(--pitch-4) var(--pitch-2);padding-bottom:10px}
.strip-track::-webkit-scrollbar{height:8px}
.strip-track::-webkit-scrollbar-thumb{background:var(--pitch-4);border-radius:4px}
.strip::after{content:"";position:absolute;right:0;top:0;bottom:10px;width:44px;
  background:linear-gradient(90deg,rgba(10,20,16,0),var(--pitch));pointer-events:none}

/* ---------- figures ---------- */
figure{margin:0 0 1.6em}
figure img{display:block;width:100%;border-radius:6px}
figcaption{margin-top:.6em;font-size:.9rem;color:var(--ink-dim)}

/* ---------- chips (also-search) ---------- */
.also-search{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.also-search li{background:var(--pitch-3);border:1px solid var(--rule);border-radius:3px;
  padding:.46em .82em;font-size:.9rem;color:var(--ink-dim)}

/* ---------- seo-box BASE only. Layout variant page ke inline <style> me
     `.seo-box.flt-<variant>` selector par (rules/74). ---------- */
.seo-box{background:var(--pitch-2);border:1px solid var(--rule);
  padding:clamp(20px,3.4vw,34px);margin:0 0 1.8em}
.seo-box h2{margin-top:0}

/* ---------- FAQ: scoreboard flip rows (axis 6) ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;gap:14px;cursor:pointer;
  min-height:56px;padding:.9em 0;list-style:none;
  font-family:var(--head);font-weight:700;font-size:1.2rem;color:var(--beam)}
.faq summary::-webkit-details-marker{display:none}
.faq .ball{flex:0 0 auto;font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.82rem;color:var(--ink-dim);letter-spacing:.06em;min-width:2.6em}
.faq .mk{flex:0 0 auto;margin-left:auto;width:26px;height:26px;position:relative;
  border:1px solid var(--rule);pointer-events:none}
.faq .mk::before,.faq .mk::after{content:"";position:absolute;background:var(--ink-dim);
  pointer-events:none}
.faq .mk::before{left:6px;right:6px;top:12px;height:2px}
.faq .mk::after{top:6px;bottom:6px;left:12px;width:2px}
.faq details[open] .mk::after{display:none}
.faq details[open] .mk::before{background:var(--lime)}
.faq details[open] summary{color:var(--lime)}
.faq .ans{padding:0 0 1.3em}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- next-over related rail (axis 7) ---------- */
.nextover{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:760px){.nextover{grid-template-columns:repeat(3,1fr)}}
.nextover a{display:block;background:var(--pitch-2);border:1px solid var(--rule);
  border-left:3px solid var(--lime);padding:16px 18px;text-decoration:none;color:var(--ink)}
.nextover a:hover{background:var(--pitch-3)}
.nextover strong{display:block;font-family:var(--head);font-weight:800;font-size:1.22rem;
  color:var(--beam);margin-bottom:.3em;letter-spacing:.02em}
.nextover span{font-size:.92rem;color:var(--ink-dim)}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.88rem;color:var(--ink-dim);padding-block:14px 0}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5em}
.crumb li+li::before{content:"/";margin-right:.5em;color:var(--rule)}

/* ---------- footer ---------- */
.ftr{background:var(--pitch-2);border-top:1px solid var(--rule);
  padding-block:clamp(38px,5vw,62px) 26px;margin-top:clamp(40px,6vw,80px)}
.ftr-cols{display:grid;gap:26px 22px;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.ftr-cols{grid-template-columns:repeat(4,1fr)}}
.ftr-cat{font-family:var(--head);font-weight:700;font-size:1.06rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lime);margin:0 0 .7em}
.ftr-cols ul{list-style:none;margin:0;padding:0}
.ftr-cols li{margin-bottom:.45em}
.ftr-cols a{color:var(--ink-dim);text-decoration:none;font-size:.95rem;
  display:inline-block;min-height:32px;line-height:32px}
.ftr-cols a:hover{color:var(--lime)}
.ftr-blurb{margin:30px 0 0;padding-top:24px;border-top:1px solid var(--rule);
  font-size:.93rem;color:var(--ink-dim);max-width:72ch}
.ftr-legal{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin-top:24px;padding-top:22px;border-top:1px solid var(--rule)}
/* QTech logo ka text BLACK hai — white plate zaroori (rules/66) */
.qtech{display:inline-flex;align-items:center;gap:12px;background:#FFFFFF;
  border-radius:8px;padding:10px 14px}
.qtech img{display:block;height:34px;width:auto}
.qtech-txt{font-size:.82rem;color:#0A1410;line-height:1.35;max-width:22ch}
.qtech-txt b{display:block;font-weight:600}
.ftr-social{display:flex;gap:12px;align-items:center}
.ftr-social a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--rule);border-radius:4px;color:var(--ink-dim)}
.ftr-social a:hover{color:var(--lime);border-color:var(--lime)}
.ftr-social svg{width:20px;height:20px;fill:currentColor;pointer-events:none}
.ftr-tp{font-size:.88rem;color:var(--ink-dim);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px}
.ftr-tp:hover{color:var(--lime)}
.ftr-fine{margin-top:22px;font-size:.85rem;color:var(--ink-dim)}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:140;
  width:60px;height:60px;border-radius:50%;background:var(--wa)!important;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.wa-float svg{width:34px;height:34px;fill:#FFFFFF;pointer-events:none}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wa);animation:wapulse 2.4s ease-out infinite;pointer-events:none}
@keyframes wapulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.7);opacity:0}}

/* ---------- utilities ---------- */
.lead{font-size:1.12rem;border-left:3px solid var(--lime);padding-left:18px;margin-bottom:1.3em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}