/* PlayinMatch99 — playinmatch-99.com.in — MARQUEE HALL
   shared shell only; page-unique rules inline <style> me. mq- prefix. */

:root{
  --bg:#0A0806; --bg2:#140F09; --band:#100B07; --card:#15100A;
  --accent:#E0B33C; --accent-d:#8C6A1E; --accent-l:#F5D98A;
  --ink:#241703;
  --wa:#25D366; --wa-ink:#04250F;
  --txt:#F3EADA; --txt-dim:#A9A093;
  --line:rgba(224,179,60,.22); --line-s:rgba(224,179,60,.10);
  --rad:4px;
  --hall:1180px;
  --hd:'Bodoni Moda',ui-serif,Georgia,'Times New Roman',serif;
  --bd:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---------- overflow guard (non-negotiable) ---------- */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
main{max-width:100%;overflow-x:clip}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--bd);font-size:16.5px;line-height:1.72;
  font-synthesis-weight:none;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-l)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--hd);font-weight:800;line-height:1.16;margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(1.85rem,4.6vw,3.05rem)}
h2{font-size:clamp(1.42rem,3.1vw,2.12rem)}
h3{font-size:clamp(1.13rem,2.1vw,1.42rem)}
h4{font-size:1.03rem;font-weight:700}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:.3em 0}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--ink);
  padding:10px 16px;font-weight:700}
.skip-link:focus{left:0}

/* ---------- hall band + ornate frame ---------- */
.hall{max-width:var(--hall);margin:0 auto;padding:0 18px}
.band{padding:46px 0;position:relative}
.band--alt{background:var(--band)}
.band--deep{background:linear-gradient(176deg,#0E0A06,#161007)}

.frame{position:relative;border:1px solid var(--line);padding:26px 20px;background:rgba(255,255,255,.012)}
.frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--line-s);pointer-events:none}
.frame>:last-child{margin-bottom:0}
@media(min-width:760px){.frame{padding:34px 34px}}

/* 62/38 asymmetric hall grid */
.split{display:grid;gap:26px}
@media(min-width:960px){.split{grid-template-columns:62fr 38fr;gap:34px;align-items:start}}
.plate{border:1px solid var(--line);background:var(--card);padding:18px 16px}
.plate h3{margin-top:0}
.plate>:last-child{margin-bottom:0}

/* ---------- marquee bulbs ---------- */
.bulbs{display:flex;gap:9px;justify-content:center;padding:12px 0 4px;list-style:none;margin:0}
.bulbs li{width:7px;height:7px;border-radius:50%;background:var(--accent-d);
  box-shadow:0 0 6px rgba(224,179,60,.5);animation:bulb 1.9s steps(1,end) infinite}
.bulbs li:nth-child(2){animation-delay:.19s}
.bulbs li:nth-child(3){animation-delay:.38s}
.bulbs li:nth-child(4){animation-delay:.57s}
.bulbs li:nth-child(5){animation-delay:.76s}
.bulbs li:nth-child(6){animation-delay:.95s}
.bulbs li:nth-child(7){animation-delay:1.14s}
@keyframes bulb{0%,55%{background:var(--accent-d);box-shadow:0 0 5px rgba(224,179,60,.35)}
  56%,99%{background:var(--accent-l);box-shadow:0 0 12px rgba(245,217,138,.9)}}

/* ---------- buttons: STADIUM ARCH ---------- */
.arch,a.arch{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--bd);font-weight:700;font-size:.97rem;letter-spacing:.02em;
  padding:13px 26px;border-radius:22px 22px 3px 3px;border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--accent-l),var(--accent))!important;
  color:var(--ink)!important;text-decoration:none;position:relative;overflow:hidden;
  box-shadow:0 6px 16px -8px rgba(224,179,60,.75)}
.arch::after{content:"";position:absolute;inset:4px;border:1px solid rgba(36,23,3,.34);
  border-radius:19px 19px 2px 2px;pointer-events:none}
.arch::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .55s ease}
.arch:hover::before,.arch:focus-visible::before{left:120%}
.arch--wa{background:linear-gradient(180deg,#43e07f,var(--wa))!important;color:var(--wa-ink)!important}
.arch--ghost{background:transparent!important;color:var(--accent-l)!important;
  border:1px solid var(--line);box-shadow:none}
.arch--ghost::after{border-color:var(--line-s)}
.arch--lg{padding:16px 34px;font-size:1.04rem}
.arch--sm{padding:9px 17px;font-size:.87rem;border-radius:16px 16px 3px 3px}
.arch--sm::after{border-radius:13px 13px 2px 2px;inset:3px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:90;width:100%;max-width:100vw;
  background:rgba(10,8,6,.96);border-bottom:1px solid var(--line);
  backdrop-filter:saturate(150%) blur(7px)}
.hdr-in{max-width:var(--hall);margin:0 auto;padding:9px 18px;
  display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand img{height:40px;width:auto}
.hdr-sp{flex:1 1 auto}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:transparent;border:1px solid var(--line);color:var(--accent-l);border-radius:3px;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}
.hdr-cta{display:none}
@media(min-width:560px){.hdr-cta{display:inline-flex;gap:9px}}

#mnav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;
  background:#0C0906;border-bottom:1px solid var(--line);
  max-height:0;overflow:hidden;transition:max-height .34s ease}
#mnav.open{max-height:78vh;overflow-y:auto}
#mnav a{padding:12px 20px;color:var(--txt);text-decoration:none;font-size:.94rem;
  border-bottom:1px solid var(--line-s)}
#mnav a[aria-current="page"]{color:var(--accent);background:rgba(224,179,60,.07)}
#mnav .mnav-cta{display:flex;gap:9px;padding:14px 20px}
#mnav .mnav-cta .arch{flex:1}
/* MARQUEE HALL: nav stays a gold drop-panel at every width — at desktop it
   opens as a 3-column directory instead of a cramped horizontal bar */
@media(min-width:760px){
  #mnav.open{display:grid;grid-template-columns:repeat(3,1fr);max-height:70vh;
    padding:10px 14px 16px;column-gap:18px}
  #mnav a{border-bottom:1px solid var(--line-s)}
  #mnav .mnav-cta{grid-column:1/-1;justify-content:flex-start}
  #mnav .mnav-cta .arch{flex:0 0 auto;min-width:150px}
}
@media(min-width:560px){#mnav .mnav-cta{display:none}}

/* ---------- MODAL: login / signup / forgot ---------- */
.mq-modal{position:fixed;inset:0;z-index:150;display:none;padding:16px;
  align-items:center;justify-content:center}
.mq-modal.open{display:flex}
.mq-back{position:absolute;inset:0;background:rgba(4,3,2,.82);backdrop-filter:blur(3px)}
.mq-box{position:relative;width:100%;max-width:840px;max-height:92vh;overflow:auto;
  background:var(--bg2);border:1px solid var(--accent-d);
  box-shadow:0 30px 80px -30px #000;display:grid;grid-template-columns:1fr}
.mq-box::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-s);pointer-events:none;z-index:2}
@media(min-width:820px){.mq-box{grid-template-columns:40fr 60fr}}
.mq-aside{display:none;position:relative;background:
   radial-gradient(120% 90% at 30% 20%,rgba(224,179,60,.22),transparent 60%),#0B0805;
   padding:26px 22px;border-right:1px solid var(--line)}
@media(min-width:820px){.mq-aside{display:flex;flex-direction:column;justify-content:center;gap:14px}}
.mq-aside img{height:46px;width:auto}
.mq-aside p{color:var(--txt-dim);font-size:.9rem;margin:0}
.mq-aside .mq-pts{list-style:none;padding:0;margin:0;font-size:.88rem}
.mq-aside .mq-pts li{padding-left:18px;position:relative;margin:.42em 0;color:var(--txt)}
.mq-aside .mq-pts li::before{content:"◆";position:absolute;left:0;color:var(--accent);font-size:.68em;top:.35em}
.mq-main{padding:22px 20px 26px;position:relative}
@media(min-width:820px){.mq-main{padding:30px 30px 32px}}
.mq-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--txt);
  font-size:1.2rem;line-height:1;cursor:pointer;z-index:3}
.mq-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin:0 0 18px}
.mq-tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--txt-dim);
  font-family:var(--bd);font-weight:700;font-size:.92rem;padding:10px 6px;cursor:pointer}
.mq-tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.mq-view{display:none}
.mq-view.on{display:block}
.mq-view h2{font-size:1.32rem;margin:0 0 4px}
.mq-lead{color:var(--txt-dim);font-size:.9rem;margin:0 0 16px}
.mq-fld{display:flex;align-items:center;gap:10px;width:100%;
  background:#0A0705;border:1px solid var(--line);color:var(--txt-dim);
  padding:13px 14px;margin:0 0 11px;text-decoration:none;font-size:.94rem}
.mq-fld:hover{border-color:var(--accent-d);color:var(--txt)}
.mq-fld i{font-style:normal;color:var(--accent);font-size:.9em}
.mq-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin:2px 0 16px;font-size:.85rem}
.mq-link{background:none;border:0;color:var(--accent-l);cursor:pointer;
  font-family:var(--bd);font-size:.85rem;text-decoration:underline;padding:0}
.mq-main .arch{width:100%}
.mq-alt{margin:15px 0 0;font-size:.85rem;color:var(--txt-dim);text-align:center}
body.mq-lock{overflow:hidden}

/* ---------- inline sign-in card (har page ka design page-inline CSS me) ---------- */
.cardttl{font-family:var(--hd);font-weight:800;font-size:1.18rem;margin:0 0 6px;color:var(--accent-l)}

/* ---------- paragraph presentations ---------- */
.inlay{border:1px solid var(--line);padding:20px 18px;position:relative;background:rgba(224,179,60,.028)}
.inlay::before{content:"";position:absolute;inset:4px;border:1px solid var(--line-s);pointer-events:none}
.inlay>:last-child{margin-bottom:0}
.dropcap::first-letter{font-family:var(--hd);font-weight:900;float:left;font-size:3.05em;
  line-height:.82;padding:.06em .12em 0 0;color:var(--accent)}
.velvet{background:linear-gradient(180deg,rgba(140,106,30,.20),rgba(140,106,30,.07));
  border-left:3px solid var(--accent);padding:16px 18px;margin:0 0 1.15em}
.velvet>:last-child{margin-bottom:0}
.twocol{column-gap:30px}
@media(min-width:840px){.twocol{column-count:2;column-rule:1px solid var(--line-s)}}
.roundels{list-style:none;padding:0;margin:0 0 1.15em;counter-reset:rr}
.roundels li{counter-increment:rr;position:relative;padding:12px 0 12px 54px;border-bottom:1px solid var(--line-s)}
.roundels li::before{content:counter(rr,decimal-leading-zero);position:absolute;left:0;top:11px;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--accent-d);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--hd);font-weight:700;font-size:.9rem}
.qbar{border-left:3px solid var(--accent-d);padding:4px 0 4px 18px;margin:0 0 1.15em;
  font-size:1.06rem;color:var(--txt)}

/* tables */
.tbl-wrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);
  -webkit-overflow-scrolling:touch;
  /* gold edge shadow appears only on the side that still has content to scroll */
  background:
    radial-gradient(farthest-side at 0 50%,rgba(224,179,60,.30),transparent) left/13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(224,179,60,.30),transparent) right/13px 100% no-repeat,
    linear-gradient(to right,var(--bg) 40%,rgba(10,8,6,0)) left/26px 100% no-repeat local,
    linear-gradient(to left,var(--bg) 40%,rgba(10,8,6,0)) right/26px 100% no-repeat local}
table{border-collapse:collapse;width:100%;min-width:430px;font-size:.92rem}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line-s)}
th{font-family:var(--hd);font-weight:700;color:var(--accent-l);background:rgba(224,179,60,.06)}
tbody tr:last-child td{border-bottom:0}


/* ---------- grid/flex children must be allowed to shrink ----------
   Default min-width:auto on a grid item stops .tbl-wrap from ever scrolling:
   the wrapper widens to the table's min-width and the page clips it instead. */
.split>*,.two>*,.hall-grid>*,.next3>*,.gcards>*,.strip>*,.plate,.frame{min-width:0}
/* :where() = zero specificity, so any page's own min-width still wins.
   Covers page-specific grids (.gm-grid, .winmock, ...) that we cannot name here. */
:where(body *){min-width:0}
h1,h2,h3,h4,p,li,dt,dd,summary,figcaption,td,th{overflow-wrap:break-word}
.tbl-wrap{max-width:100%}
table{min-width:430px}
.seo-box .tbl-wrap,.plate .tbl-wrap{max-width:100%}

/* stat strip */
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-s);
  border:1px solid var(--line);margin:0 0 1.2em}
@media(min-width:720px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip div{background:var(--bg2);padding:15px 13px;text-align:center}
.strip b{display:block;font-family:var(--hd);font-size:1.42rem;color:var(--accent);line-height:1.2}
.strip span{font-size:.79rem;color:var(--txt-dim);letter-spacing:.03em}

/* ---------- images ---------- */
.shot{margin:26px auto;max-width:860px;width:100%}
.shot img{width:100%;height:auto;border:1px solid var(--line)}
.shot figcaption{margin-top:9px;font-size:.84rem;color:var(--txt-dim);text-align:center}
.shot--arch img{border-radius:120px 120px 3px 3px}
.shot--vig{max-width:none}
.shot--vig img{border-left:0;border-right:0}

/* game cards */
.gcards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 1.3em}
@media(min-width:660px){.gcards{grid-template-columns:repeat(4,1fr)}}
.gcard{border:1px solid var(--line);background:var(--card);overflow:hidden}
.gcard img{width:100%;height:auto}
.gcard b{display:block;font-family:var(--hd);font-size:.9rem;padding:9px 10px;color:var(--accent-l)}

/* ---------- FAQ: curtain rows ---------- */
.faq{border:1px solid var(--line);position:relative}
.faq details{border-bottom:1px solid var(--line-s)}
.faq details:nth-child(odd){background:rgba(140,106,30,.06)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:15px 48px 15px 18px;position:relative;
  font-family:var(--hd);font-weight:700;font-size:1.02rem;color:var(--txt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"◆";position:absolute;right:18px;top:50%;translate:0 -50%;
  color:var(--accent);font-size:.78rem;transition:rotate .3s ease,scale .3s ease}
.faq details[open] summary::after{rotate:45deg;scale:1.25}
.faq details[open] summary{color:var(--accent-l)}
.faq .ans{padding:0 18px 16px;color:var(--txt-dim);font-size:.95rem;
  animation:curtain .38s ease both}
.faq .ans>:last-child{margin-bottom:0}
@keyframes curtain{from{clip-path:inset(0 46% 0 46%);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}

/* ---------- where to next ---------- */
.next3{display:grid;gap:12px;margin:26px 0 0}
@media(min-width:760px){.next3{grid-template-columns:repeat(3,1fr)}}
.next3 a{display:block;border:1px solid var(--line);background:var(--card);padding:15px 16px;
  text-decoration:none;color:var(--txt);transition:border-color .25s,translate .25s}
.next3 a:hover{border-color:var(--accent-d);translate:0 -3px}
.next3 b{display:block;font-family:var(--hd);color:var(--accent-l);font-size:1.02rem;margin-bottom:3px}
.next3 span{font-size:.85rem;color:var(--txt-dim)}

/* ---------- seo box + chips ---------- */
.seo-box{border:1px solid var(--line);background:var(--bg2);padding:20px 18px;
  max-height:330px;overflow-y:auto;margin:34px 0 0;font-size:.93rem}
.seo-box h2{font-size:1.2rem}
.seo-box h3{font-size:1rem;color:var(--accent-l)}
.seo-box ul,.seo-box ol{padding-left:1.15em}
.seo-box dl{margin:0 0 1em}
.seo-box dt{font-weight:700;color:var(--accent-l);margin-top:.6em}
.seo-box dd{margin:0 0 .4em}
.seo-box .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.9rem}
.seo-box .kv b{color:var(--accent-l);font-weight:700}
.seo-box .qa p{margin:0 0 .75em}
.seo-box .two{display:grid;gap:8px 22px}
@media(min-width:700px){.seo-box .two{grid-template-columns:1fr 1fr}}

.also-search{margin:24px 0 0}
.also-search h2{font-size:1.1rem}
.also-search ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.also-search li{margin:0}
.also-search a{display:inline-block;min-height:44px;line-height:1.2;display:flex;align-items:center;
  border:1px solid var(--line);padding:9px 14px;font-size:.84rem;color:var(--txt-dim);
  text-decoration:none;background:rgba(255,255,255,.02)}
.also-search a:hover{border-color:var(--accent-d);color:var(--accent-l)}


/* key-value / qa / two-col blocks usable outside .seo-box too */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.9rem}
.kv b{color:var(--accent-l);font-weight:700}
.qa p{margin:0 0 .75em}
.two{display:grid;gap:8px 22px}
@media(min-width:700px){.two{grid-template-columns:1fr 1fr}}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.82rem;color:var(--txt-dim);padding:16px 0 0}
.crumb a{color:var(--txt-dim);text-decoration:none}
.crumb a:hover{color:var(--accent-l)}

/* ---------- footer ---------- */
.ftr{background:#070504;border-top:1px solid var(--line);margin-top:44px;padding:36px 0 26px}
.ftr-top{display:grid;gap:26px}
@media(min-width:880px){.ftr-top{grid-template-columns:1.5fr 1fr 1fr}}
.ftr img.flogo{height:44px;width:auto;margin-bottom:12px}
.ftr p{font-size:.9rem;color:var(--txt-dim)}
.ftr h3{font-size:.95rem;color:var(--accent-l)}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin:.32em 0}
.ftr a:not([class]){color:var(--txt-dim);text-decoration:none;font-size:.88rem}
.ftr a:not([class]):hover{color:var(--accent-l)}
.socs{display:flex;gap:12px;margin:14px 0 0;flex-wrap:wrap;align-items:center}
.socs a{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--accent-l);transition:translate .2s,border-color .2s}
.socs a:hover{translate:0 -2px;border-color:var(--accent)}
.socs svg{width:17px;height:17px;fill:currentColor}
.tpilot{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  padding:7px 12px;color:var(--txt-dim);text-decoration:none;font-size:.82rem;margin-top:12px}
.tpilot svg{width:15px;height:15px;fill:#00B67A}
.ftr-bot{border-top:1px solid var(--line-s);margin-top:26px;padding-top:18px;
  font-size:.8rem;color:var(--txt-dim);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.age{border:1px solid var(--line);padding:2px 8px;color:var(--accent);font-weight:700}

/* ---------- WhatsApp float ---------- */
.wafloat{position:fixed;right:16px;bottom:16px;z-index:120;width:60px;height:60px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.6);animation:wapulse 2.3s ease-out infinite}
.wafloat svg{width:32px;height:32px;fill:#fff}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 0 0 17px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- ANIMATION: gold sheen + curtain reveal + frame draw ---------- */
.rv{opacity:0;clip-path:inset(0 46% 0 46%);
  transition:opacity .55s ease,clip-path .75s cubic-bezier(.22,.7,.3,1)}
.rv.in{opacity:1;clip-path:inset(0 0 0 0)}
.rvu{opacity:0;translate:0 18px;transition:opacity .5s ease,translate .55s ease}
.rvu.in{opacity:1;translate:0 0}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}

.sheen{background:linear-gradient(100deg,var(--accent) 0%,var(--accent-l) 42%,var(--accent) 62%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position 1.1s ease}
h2:hover>.sheen,.sheen:hover{background-position:0 0}

.fdraw{position:absolute;inset:0;pointer-events:none}
.fdraw rect{fill:none;stroke:var(--accent-d);stroke-width:1;
  stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.5s ease .1s}
.in .fdraw rect,.fdraw.in rect{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  .rv,.rvu{opacity:1!important;clip-path:none!important;translate:none!important;transition:none!important}
  .bulbs li{animation:none;background:var(--accent-d)}
  .wafloat{animation:none}
  .arch::before{display:none}
  .faq .ans{animation:none}
  .fdraw rect{stroke-dashoffset:0;transition:none}
  *{scroll-behavior:auto!important}
}