/* Hallmark · genre: editorial-utilitarian · macrostructure: shared shell + per-profile body · design-system: design.md · designed-as-app
 * profile: P1 · hero: shared · paper: #0f1215 · accent: #0b50b3
 * ink and muted computed from the brand hue, not the rotation
 */
*,*::before,*::after{box-sizing:border-box}
:root{--bg:#0f1215;--surf:#1b1f24;--acc:#0b50b3;--accl:#3684f3;--accd:#073980;--ink:#eef2f7;--muted:#9da5b3;
--r:14px;--gridmin:150px;--w:1180px;--gut:20px;
--line:rgba(255,255,255,.14)}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:'Noto Sans Thai',system-ui,sans-serif;line-height:1.75;
/* clip, not hidden: hidden makes body a scroll container, which puts any sticky descendant
   at its mercy - and two components on P1 are sticky. clip contains the overflow without
   creating the container. */
overflow-x:clip}
h1,h2,h3,h4{font-family:'Kanit',system-ui,sans-serif;font-weight:600;line-height:1.35;
margin:0 0 .6em}
h1{font-size:clamp(1.5rem,4.4vw,2.4rem)}
h2{font-size:clamp(1.2rem,3vw,1.65rem);margin-top:0}
h3{font-size:clamp(1.02rem,2.2vw,1.2rem)}
p,ul,ol,table{margin:0 0 1.1em}
a{color:var(--accl)}
/* 12.2.10 one width per section: text, tables and grids share --w */
.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
/* ---- age bar ---- */
.age{background:#000;color:#fff;font-size:.8rem;text-align:center;padding:.45rem 1rem}
/* ---- header ---- */
header{position:sticky;top:0;z-index:40;background:var(--surf);
border-bottom:1px solid rgba(255,255,255,.08)}
.hbar{display:flex;align-items:center;gap:1rem;min-height:60px}
.logo{font-family:'Kanit',sans-serif;font-weight:700;font-size:1.15rem;color:var(--accl);
text-decoration:none;white-space:nowrap}
/* header only: as a bare `nav` selector this also hit P1's footer columns, which are
   <nav class="gfcol">, and an auto inline-start margin makes a grid item shrink to content
   and sit flush-end instead of stretching - two footer columns 189px wide in a 335px
   single-column grid while their div siblings filled it. */
header nav{margin-inline-start:auto}
nav ul{list-style:none;display:flex;gap:.35rem;margin:0;padding:0;flex-wrap:wrap}
nav a{display:flex;align-items:center;min-height:44px;padding:0 .6rem;border-radius:var(--r);
color:var(--ink);text-decoration:none;font-size:.86rem}
nav a[aria-current=page]{background:var(--acc);color:var(--bg);font-weight:600}
.menu{display:none}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
padding:0 1.15rem;border-radius:var(--r);text-decoration:none;
font-family:'Kanit',system-ui,sans-serif;font-weight:600;font-size:15px;
border:1px solid transparent;white-space:nowrap;
transition:transform .12s ease,filter .12s ease}
.cta:hover{text-decoration:none;filter:brightness(1.09);transform:translateY(-1px)}
.cta-1{background:linear-gradient(170deg,var(--acc),var(--accd));color:#11151c}
.cta-2{border-color:var(--acc);color:var(--accl)}
/* hero pair, as the core builds render it: gradient primary + GHOST secondary. The secondary
   reads as a dark button on a dark page because it is translucent over the page, not because it
   is painted a fixed dark; painting it fixed breaks on a light-accent brand. */
.cta-main{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.03)}
.cta-lg{font-size:17px;padding:15px 30px;min-height:52px}
/* login sits beside register in the header as one unit, so the flex bar treats the pair as a
   single item and the hamburger keeps its place. Both go to the same tracker: the operator
   serves login and registration from one entry point. */
.logo img{max-height:38px;width:auto;height:auto;display:block}
.ctacard{text-align:center;border-radius:calc(var(--r) + 8px);padding:2.4rem 1.4rem;
background:radial-gradient(120% 150% at 50% 0%,rgba(255,255,255,.06) 0%,transparent 66%),var(--surf);
border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.ctacard::before{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 140% at 50% 0%,var(--acc) 0%,transparent 62%);opacity:.20}
.ctacard>*{position:relative}
.ctacard h2{margin:0 0 .5em}
.ctacard h2 .hl{color:var(--accl)}
.ctacard p{margin:0 auto 1.4em;max-width:52ch;color:var(--muted)}
.ctacard .cta{border-radius:999px;box-shadow:0 0 26px -8px var(--acc)}
.anchgrid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.anch{background:var(--surf);border:1px solid rgba(255,255,255,.09);
border-radius:var(--r);padding:.9rem 1rem;border-inline-start:3px solid var(--acc)}
.anch:hover{border-color:var(--acc)}
.anch strong{display:block;font-family:'Kanit',system-ui,sans-serif;margin-bottom:.3rem}
.anch .more{display:inline-flex;align-items:center;min-height:44px;margin-top:.35rem;
color:var(--accl);text-decoration:none;font-size:.86rem}
.anch .more strong{font-weight:500}
.anch .more::after{content:'→';margin-inline-start:.35rem}
.anch .more:hover{text-decoration:underline}
.anch span{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem}
.promos{display:grid;gap:.7rem;margin-bottom:1.1em}
.promos img{width:100%;height:auto;border-radius:var(--r);display:block}
.hcta{display:flex;gap:.45rem;align-items:center;flex:0 0 auto}
.cta-main:hover{border-color:var(--acc)}
.hcta .cta{padding:0 .85rem;white-space:nowrap}
/* ---- hero: exactly two CTAs (12.2.1) ---- */
.hero{padding:2.6rem 0 2rem;text-align:center}
/* a spoke opens plainly: title, then one lede paragraph. No hero, no CTA pair, no marquee. */
.phead{padding:1.9rem 0 .5rem}
.phead h1{margin-bottom:.45em}
.phead .lede{margin:0}
.hero p{color:var(--muted);max-width:62ch;margin-inline:auto;}
.herocta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;
justify-content:center;}
/* ---- sections ---- */
section.blk{padding:1.9rem 0;border-top:1px solid rgba(255,255,255,.07)}
.card{background:var(--surf);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);
padding:1.05rem}
.grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(var(--gridmin),1fr))}
/* The showcase rows use FIXED column counts, not auto-fit. auto-fit sized cells to the viewport
   and left an orphan on its own line whenever the count did not divide: six studio marks rendered
   as five plus one, and six game tiles did the same. The roster is 6 and the tile slice is 6, so
   3 and 6 both divide cleanly at every breakpoint. */
.provrow{display:grid;gap:.7rem;grid-template-columns:repeat(3,1fr)}
/* the studio row slides too, on its own slower cadence so the two rows do not lock step */
.provslider{overflow:hidden;margin-bottom:1rem}
.provtrack{display:flex;gap:.7rem;width:max-content;animation:slideleft 56s linear infinite}
.provslider:hover .provtrack,.provslider:focus-within .provtrack{animation-play-state:paused}
.provtrack .prov{flex:0 0 150px}
@media(min-width:700px){.provtrack .prov{flex:0 0 178px}}
@media(prefers-reduced-motion:reduce){
  .provslider{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .provtrack{animation:none}
}
/* A slider, not a wrapping grid: six tiles wrapped to 5+1 on a desktop and the orphan looked
   broken. Scroll-snap keeps the cards aligned as the reader swipes, and it degrades to a plain
   overflow scroll where scroll-snap is unsupported. */
/* Auto-slides leftward. The tile set is duplicated in the markup and the track travels exactly
   -50%, so the loop closes on itself with no jump. Hover pauses it so a reader can actually look
   at a card, and prefers-reduced-motion turns it back into a plain scrollable row -- an animation
   a reader cannot stop is an accessibility problem, not a feature. */
.gameslider{overflow:hidden;padding-bottom:.6rem;margin-bottom:1.1em}
.gametrack{display:flex;gap:.85rem;width:max-content;animation:slideleft 42s linear infinite}
.gameslider:hover .gametrack,.gameslider:focus-within .gametrack{animation-play-state:paused}
.gametrack .tile{flex:0 0 168px}
@keyframes slideleft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:700px){.gametrack .tile{flex:0 0 196px}}
@media(prefers-reduced-motion:reduce){
  .gameslider{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gametrack{animation:none}
}
@media(min-width:700px){
  .provrow{grid-template-columns:repeat(6,1fr)}

}

/* A tile is its artwork. The art was rendered at its natural size inside an oversized card, so a
   240px poster floated in the middle of dead space with the caption stranded below it. The image
   now fills the tile width at the art's own 5:7 portrait ratio, and every tile is the same height. */
.tile{margin:0;background:var(--surf);border:1px solid rgba(255,255,255,.09);
border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.tile img{width:100%;height:auto;aspect-ratio:5/7;object-fit:cover;display:block}
.tile figcaption{padding:.55rem .6rem;font-size:.8rem;line-height:1.4;display:grid;gap:.1rem}
.tile .tstudio{color:var(--ink);font-weight:600}
.tile .tname{color:var(--accl)}
.tile .tcat{color:var(--muted);font-size:.74rem}
.grid img{max-width:100%;height:auto;display:block;margin-inline:auto}
/* 12.2a.4 the plate is chosen per FILE from its own pixels, never fixed. The card is also
   sized to a wordmark's aspect ratio: studio marks run about 3.4:1, so max-width keeps a wide
   one inside its cell instead of overflowing or being scaled to nothing. */
.prov{border-radius:var(--r);padding:.5rem .7rem;display:flex;align-items:center;
justify-content:center;aspect-ratio:16/7;border:1px solid rgba(255,255,255,.09)}
.prov img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.plate-light{background:#f4f6fa}
.plate-dark{background:#10151f}
.prov img{max-height:42px;max-width:100%;width:auto;height:auto;object-fit:contain}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:start;padding:.55rem .6rem;border-bottom:1px solid rgba(255,255,255,.09)}
th{color:var(--accl);font-family:'Kanit',sans-serif;font-weight:600}
.tw{overflow-x:auto}
details.faq{border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
padding:.7rem .9rem;margin-bottom:.55rem;background:var(--surf)}
details.faq summary{cursor:pointer;font-family:'Kanit',sans-serif;font-weight:600;
min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
list-style:none}
/* the open affordance. Without it the row gave the reader no sign it could be expanded, and the
   space on the right sat empty. A bare accent-coloured glyph, no circle and no plate: the ring
   drawn around it first read as a button chip rather than a marker. Open swaps the plus for a
   true minus sign (U+2212); rotating a plus 45 degrees yields an x, which reads "close".
   aria is untouched: <details>/<summary> already announces expanded/collapsed natively. */
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';flex:0 0 auto;width:30px;height:30px;
display:grid;place-items:center;color:var(--accl);
font-size:1.4rem;line-height:1;font-weight:400;opacity:.95}
details.faq[open] summary::after{content:'−'}
details.faq summary:hover::after{opacity:1}
.fseq{list-style:none;counter-reset:fs;margin:.15rem 0 .55rem;padding:0;display:grid;gap:.4rem}
.fseq li{counter-increment:fs;position:relative;padding-inline-start:2rem;margin:0}
.fseq li::before{content:counter(fs) '.';position:absolute;inset-inline-start:0;
font-family:'Kanit',system-ui,sans-serif;font-weight:700;color:var(--accl)}
ol.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:.6rem}
ol.steps li{counter-increment:s;position:relative;padding-inline-start:2.4rem;
background:var(--surf);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);
padding-block:.75rem;padding-inline-end:1rem}
ol.steps li::before{content:counter(s);position:absolute;inset-inline-start:.7rem;top:.7rem;
width:1.4rem;height:1.4rem;border-radius:50%;background:var(--acc);color:var(--bg);
display:grid;place-items:center;font-size:.8rem;font-weight:700;font-family:'Kanit',sans-serif}
.todo{color:#ffb4b4;background:rgba(255,0,0,.09);border:1px dashed #ff8080;
border-radius:6px;padding:.1rem .4rem;font-size:.84rem}
/* ---- footer ---- */
footer{background:var(--surf);border-top:1px solid rgba(255,255,255,.1);
padding:2rem 0 5.2rem;font-size:.87rem;color:var(--muted)}
footer h4{color:var(--ink);font-size:.95rem;margin-bottom:.5rem}
footer a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;
min-height:36px}
footer a:hover{color:var(--accl)}
.fgrid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* ---- floating stack: same diameter, hidden keeps its space (12.2.14) ---- */
.fab{position:fixed;right:14px;bottom:14px;z-index:50;display:flex;flex-direction:column;
gap:.6rem}
.fab a,.fab button{width:52px;height:52px;border-radius:50%;border:0;display:grid;
place-items:center;cursor:pointer;background:var(--surf);
border:1px solid var(--acc);color:var(--accl)}
.fab .reg{display:none;background:linear-gradient(135deg,var(--acc),var(--accd));color:#11151c;
position:relative}
.fab .reg::after{content:'';position:absolute;inset:-5px;border-radius:50%;
border:2px solid var(--acc);animation:pl 2.1s ease-out infinite}
@keyframes pl{0%{opacity:.75;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
/* Keep the fixed buttons off the footer's last block: that block is the 18+ responsible
   gambling paragraph, and it was rendering partly behind them on a phone. Sized for the
   tallest arrangement (two stacked 52px circles plus the offset). */
@media (max-width:760px){footer{padding-block-end:132px}}
#top{visibility:hidden}
#top.on{visibility:visible}
.fab .login{display:none;border:1px solid var(--acc);color:var(--accl);
background:var(--surf)}
@media (max-width:1000px){
  /* menu button below 1000px, inline row above (12.2.3) */
  .menu{display:block;margin-inline-start:auto}
  .menu>summary{list-style:none;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--acc);border-radius:var(--r);color:var(--accl);cursor:pointer}
  .menu>summary::-webkit-details-marker{display:none}
  nav.desk{display:none}
  /* full-width sheet under the header, not a floating card. No backdrop-filter on the
     header: a filtered ancestor becomes the containing block for fixed children and
     collapses this to the header height. */
  .sheet{position:fixed;left:0;right:0;top:var(--hh,104px);bottom:0;background:var(--bg);
  overflow-y:auto;padding:.6rem var(--gut) 2rem}
  .sheet ul{flex-direction:column;gap:.2rem}
  .sheet a{width:100%;min-height:50px;border-bottom:1px solid rgba(255,255,255,.07);
  border-radius:0}
  /* Both header CTAs go below this width; the floating stack carries the conversion instead.
     An earlier version kept LOGIN here, on the grounds that hiding both left a subpage with no
     affordance at all - but that was written before the stack gained its own register button.
     Every one of these points at the same tracked URL, so nothing is unreachable: the stack's
     register button is the same destination the header pair had. */
  .hdcta{display:none}
  .fab .reg{display:grid}
  /* 12.2.6 hero CTAs stack FULL WIDTH on a phone. Measured at 320-768 they were sitting
     side by side at 114px and 97px, which is the defect this rule names. */
  .herocta{flex-direction:column;align-items:stretch}
  .herocta .cta{width:100%}
  /* 12.2.4 44px minimum tap target up to 1000px, because tablets are touch devices. Only
     inline links inside running prose are exempt, so the logo and the footer links are not:
     measured at 32px and 36px respectively. */
  .logo{min-height:44px;display:inline-flex;align-items:center}
  footer a{min-height:44px}
}
/* 12.2.3: state the CLOSED state outright rather than relying on the UA rule, and scope the
   desktop reveal to the DESKTOP nav only. Targeting every .sheet made the mobile panel
   display:flex at >=1001px, hidden only because its parent .menu is display:none. That is the
   fragile chain the SOP names: a reveal that is not scoped forces the mobile menu open. */
details.menu:not([open]) .sheet{display:none}
@media (min-width:1001px){ nav.desk{position:static;display:flex} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* the showcase's provider wall: static grid, not a track. Lost when this block was rewritten. */
.provwall,.gamewall{display:grid;gap:.7rem;margin-bottom:1rem}
.provwall{grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr))}
.gamewall{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
/* ---- P1's footer ---- */
/* Asymmetric: the brand block takes the room a fourth link column would, which is what separates
   this from the shared four-equal-column grid. */
.gfoot{border-block-start:1px solid var(--line);background:var(--bg);padding:2rem 0 1.4rem;
margin-block-start:2rem}
.gfgrid{display:grid;gap:1.4rem 2.2rem;
grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));align-items:start}
@media (max-width:900px){ .gfgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .gfgrid{grid-template-columns:1fr} }
.gfname{margin:0 0 .5rem;font-family:'Kanit',system-ui,sans-serif;font-weight:700;
font-size:1.12rem;color:var(--accl)}
.gfabout{margin:0;color:var(--muted);font-size:.9rem;line-height:1.75}
.gfcol h4{margin:0 0 .6rem;font-family:'Kanit',system-ui,sans-serif;font-weight:700;
font-size:.95rem;color:var(--ink)}
.gfcol{display:flex;flex-direction:column;gap:.42rem}
.gfcol a{color:var(--muted);font-size:.9rem;text-decoration:none}
.gfcol a:hover,.gfcol a:focus-visible{color:var(--accl);text-decoration:underline}
/* the contact rows are icon-led, as on the reference; the icon is the only ornament */
.gfcon p{display:flex;align-items:flex-start;gap:.5rem;margin:0;color:var(--muted);
font-size:.88rem;line-height:1.5}
.gfcon svg{flex:0 0 auto;margin-block-start:.15rem;color:var(--accl)}
/* the bar the reference divides off below the columns */
.gfbot{margin-block-start:1.5rem;padding-block-start:1rem;border-block-start:1px solid var(--line)}
.gflegal{margin:0;color:var(--muted);font-size:.82rem;line-height:1.7}
.gcol{padding:1.1rem 0}
.gcol .wrap{border:1px solid var(--acc);border-radius:var(--r);background:var(--surf);
padding:.35rem 1.15rem}
section.grow{border-top:0;padding:1.05rem 0;position:relative}
section.grow + section.grow{border-top:1px solid var(--line)}
section.grow>h2{font-size:clamp(1.08rem,2.4vw,1.3rem);margin-block:0 .5rem;color:var(--accl);
text-wrap:balance}
section.grow>p{font-size:.95rem;margin-block:0 .55rem}
section.grow>:last-child{margin-bottom:0}
section.grow ul,section.grow ol{margin-block:.45rem 0;padding-inline-start:1.15rem}
section.grow li{margin-block:.3rem}
section.grow table{font-size:.88rem}
/* run-in label, as the reference uses inside its longer sections */
section.grow .ri{font-family:'Kanit',system-ui,sans-serif;font-weight:600;color:var(--ink)}
@media (max-width:600px){ .gcol .wrap,section.usp>.wrap{padding-inline:.85rem} }

.anchgrid{display:block}
.anch{display:grid;grid-template-columns:minmax(8.5rem,14rem) 1fr;column-gap:1.5rem;
background:none;border:0;border-radius:0;padding:.75rem .9rem}
.anch:nth-child(odd){background:var(--surf)}
.anch:hover{border:0}
.anch:hover>strong{color:var(--accl)}
.anch>strong{grid-column:1;grid-row:1/span 2;margin:0;align-self:start}
.anch>span{grid-column:2;grid-row:1;margin:0}
.anch .more{grid-column:2;grid-row:2;margin-top:.2rem;min-height:32px}
@media (max-width:700px){
 .anch{grid-template-columns:1fr}
 .anch>strong{grid-row:1;margin-bottom:.3rem}
 .anch>span,.anch .more{grid-column:1}
}


/* spec table: the fact grid the reference leads with. Label column capped so the value keeps the
   width; below the breakpoint the row stacks, because two columns in 375px is neither. */
/* the two new sections themselves, so every class in the markup is defined */
.spec{padding-block:1.4rem}
/* THE GAME INDEX. Rows, not boxes: the boxed auto-fit grid is the shape P4 also uses, and a
   restyle would not change that. Each row is led by the game's own tile, which is an asset only
   this profile has. Hairlines instead of borders, so five entries read as one list rather than as
   five competing panels. */
.gxidx{display:flex;flex-direction:column;border-block-start:1px solid var(--line)}
.gxrow{display:flex;align-items:center;gap:.85rem;padding:.7rem .2rem;min-height:64px;
border-block-end:1px solid var(--line);text-decoration:none;color:inherit}
.gxrow:hover{background:rgba(255,255,255,.03)}
.gxrow{cursor:default}
.gxrow>img,.gxph{flex:0 0 56px;width:56px;height:56px;border-radius:10px;object-fit:cover}
.gxph{display:grid;place-items:center;font-family:'Kanit',system-ui,sans-serif;font-weight:700;
font-size:1.3rem;color:var(--bg);background:linear-gradient(135deg,var(--acc),var(--accd))}
.gxtxt{flex:1 1 auto;min-width:0}
.gxa{display:inline-block;text-decoration:none}
.gxa strong,.gxn{font-family:'Kanit',system-ui,sans-serif;font-weight:700;font-size:.98rem;
line-height:1.3;color:var(--ink);margin:0}
.gxa:hover strong{color:var(--accl)}
.gxd{display:block;margin-block-start:.15rem;color:var(--muted);font-size:.86rem;line-height:1.45}
.gxgo{flex:0 0 auto;color:var(--accl);font-size:1.1rem;padding-inline:.2rem}
@media (max-width:520px){
 .gxrow>img,.gxph{flex-basis:44px;width:44px;height:44px}
 .gxd{display:none}
}
/* the per-game spec table: five things a player checks before opening a game, in the shape that
   is quickest to scan. Row headers stay in the accent so the eye can run down the left column. */
.gspec{width:100%;border-collapse:collapse;font-size:.92rem}
.gspec th,.gspec td{padding:.5rem .7rem;border-block-end:1px solid var(--line);
vertical-align:top;text-align:start}
.gspec th{width:36%;color:var(--accl);font-weight:600;white-space:nowrap}
.gspec tr:last-child th,.gspec tr:last-child td{border-block-end:0}
/* a provider with no logo in the library: same cell, same box, name set in the site's own type so
   the row keeps its rhythm instead of showing a gap where a slot should be */
.prov.provtext{display:grid;place-items:center}
.prov.provtext span{font-family:'Kanit',system-ui,sans-serif;font-weight:700;font-size:1.05rem;
letter-spacing:.01em;color:var(--ink);text-align:center}
/* Sub-headings introduced by the per-site outline schemes. Each keeps the visual weight the
   element it replaced had, so promoting a card title to a real heading changes the OUTLINE and
   not the look: an h3 here must not read as a second section heading. */
.uspc h3,.uspc h4{margin:0 0 .3rem;font-family:'Kanit',system-ui,sans-serif;font-weight:700;
font-size:1rem;line-height:1.35;color:var(--ink)}
.anch h3{margin:0;font-family:'Kanit',system-ui,sans-serif;font-weight:700;font-size:1rem;
line-height:1.35;color:var(--ink)}
.faq summary h3{display:inline;margin:0;font-family:'Kanit',system-ui,sans-serif;font-weight:600;
font-size:1rem;line-height:1.4;color:inherit}
/* the chapter heading that encloses other components */
.chap>.wrap>h2{margin:0}
.chap>section,.chap>div:not(.wrap){padding-block-start:.35rem}
.spectab caption{caption-side:top;text-align:start;font-family:'Kanit',system-ui,sans-serif;
font-weight:700;font-size:1.05rem;color:var(--accl);padding-block-end:.45rem}
/* P1's page head: a plain heading in the content column, not a hero band */
.ghead{padding-block:1.5rem 0}
.ghead h1{margin:0 0 .5rem;font-size:clamp(1.45rem,3.4vw,2.05rem);text-wrap:balance}
/* The intro paragraph is formatted as BODY COPY, not as a lede. It used to override three things
   at once - a muted colour, a 74ch measure and a zeroed margin - so it read dimmer, wrapped
   earlier and sat tighter than the prose in every section below it, which is the inconsistency
   reported. It now takes exactly what any other paragraph takes: the body colour, the shared
   paragraph margin, and the container's full measure. The .lede class stays on the element as a
   hook, deliberately with no divergent styling of its own. */
.usp{padding-block:1.4rem}
.spectab{width:100%;border-collapse:collapse;font-size:.94rem}
.spectab th,.spectab td{border:1px solid var(--line);padding:.6rem .8rem;text-align:start;
vertical-align:top}
.spectab th{width:30%;background:var(--surf);font-weight:600;color:var(--ink)}
.spectab td{color:var(--muted)}
@media (max-width:640px){
 .spectab th,.spectab td{display:block;width:auto;border-block-end:0}
 .spectab tr{display:block;border:1px solid var(--line);border-radius:var(--r);
 margin-block-end:.5rem;overflow:hidden}
 .spectab td{border:0;padding-block-start:.2rem}
}
/* ONE container holding five numbered entries, not five cards. A card grid of five reflows 3 + 2
   and leaves a ragged last row; a single box reads as one list and cannot go ragged. The number
   stays as the ornament, and the heading names the subject rather than asserting a conclusion. */
/* The frame is on the WRAP, matching .gcol .wrap exactly, so both boxes on the page share one
   left edge. Putting it on an inner div instead offsets it by a gutter. */
section.usp>.wrap{border:1px solid var(--acc);border-radius:var(--r);background:var(--surf);
padding:.35rem 1.15rem}
.uspbox{counter-reset:up}
/* no inline padding, for the same reason section.grow has none: the wrap already pads */
.uspc{counter-increment:up;position:relative;padding:.85rem 0 .85rem 1.95rem;
border-block-start:1px solid var(--line)}
.uspc:first-child{border-block-start:0}
.uspc::before{content:counter(up);position:absolute;inset-inline-start:0;inset-block-start:.8rem;
font-family:'Kanit',system-ui,sans-serif;font-weight:700;color:var(--accl);font-size:1.05rem}
.uspc strong{display:block;font-family:'Kanit',system-ui,sans-serif;margin-block-end:.3rem}
.uspc p{margin:0;color:var(--muted);font-size:.92rem}
/* P1's own header: centred logo over ONE control. The game rail below it is the navigation, so
   the header is identity plus a single decision. */
/* hero banner: scales by width, never cropped. A max-height with object-fit:cover cut the Thai
   headline off the top of one of them - the art carries copy, so it has to arrive whole. */
.bnr{padding-block:.9rem 0}
.bnr img{display:block;width:100%;height:auto;
border-radius:var(--r);border:1px solid rgba(255,255,255,.09)}
/* The shared stylesheet makes every header sticky at top:0. On P1 the RAIL is the thing worth
   keeping on screen - a centred logo and one button are not - and two elements stuck to the same
   offset means the rail slides up over the header. So here the header scrolls away and the rail
   takes over the top edge, which also separates P1 from the other three profiles: they keep a
   sticky header with the nav inside it. Element+class beats the bare element selector. */
header.hstack{position:static}
/* ONE row: identity left, the single action right. Stacked and centred, these two items cost
   ~147px and pushed the banner and H1 off the fold; side by side they cost ~63px. Wrapping is
   allowed rather than forced, so a long contextual label like "เล่น Pharaoh's Fortune Realm" drops
   to its own line on a narrow phone instead of squeezing the logo. */
.hstack{padding-block:.55rem;border-block-end:1px solid var(--acc)}
.hstack .wrap{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:.5rem .9rem}
.hstack .logo{flex:0 0 auto}
.hstack .logo img{max-height:44px;width:auto}
/* natural width, not 74vw: a full-bleed pill was as loud as the H1 below it. Declared once - this
   used to be overridden by a leftover two-pill rule further down. */
.hstackcta{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-end;flex:0 1 auto;
min-width:0}
.hstackcta .cta{justify-content:center;text-align:center;padding-inline:1rem;font-size:.9rem}
/* LINE keeps LINE's own green. In a site accent it stops reading as a LINE control, which is the
   only reason the button is worth having; the other two take the site's palette via .cta-1/.cta-2 */
.cta.ctaline{background:#06c755;border-color:#06c755;color:#fff}
.cta.ctaline .lnmark{flex:0 0 auto}
@media (max-width:560px){
 .hstack .wrap{justify-content:center}
 .hstack .logo img{max-height:38px}
 /* three buttons cannot each be full width on a phone: they share the row and wrap as needed */
 .hstackcta{flex:1 1 100%;justify-content:center}
 .hstackcta .cta{flex:1 1 auto;min-width:0;padding-inline:.7rem;font-size:.84rem}
}
/* THE POPULAR-SLOTS ROW. Scrolls right-to-left on its own, on a track duplicated in the markup so
   the loop has no seam: translating exactly -50% lands copy two where copy one began. Three things
   the reference does not do, because content that moves on its own is otherwise an accessibility
   problem - it pauses on hover, it pauses on keyboard focus (focus-within, so tabbing into it stops
   the motion), and under prefers-reduced-motion it does not animate at all and becomes an ordinary
   horizontal scroller the reader drives. */
.hothead{display:flex;align-items:center;gap:.4rem;margin-block-end:.7rem}
.hothead .flame{flex:0 0 auto;color:var(--accl)}
/* the same size as every other h2. It was 1.02rem and uppercased, which read as a label rather
   than as the section heading it is. The flame and the accent still mark it as the rail's. */
.hothead h2{margin:0;color:var(--accl);font-size:clamp(1.2rem,3vw,1.65rem);line-height:1.35}
.hotmore{margin-inline-start:auto;color:var(--accl);text-decoration:underline;font-size:.84rem;
white-space:nowrap}
.hotrow{overflow:hidden}
/* TOUCH. The marquee's pause is :hover/:focus-within, which a phone never fires, and the track sits
   in overflow:hidden - so below this width the rail becomes what .grail already is on this profile:
   animation off, swipeable, snapping. The duplicate half goes with the animation that needed it. */
@media (max-width:900px){
 .hotrow{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
 scroll-snap-type:x proximity;scrollbar-width:none}
 .hotrow::-webkit-scrollbar{display:none}
 .hottrack{animation:none}
 .hottrack>.hotc{scroll-snap-align:start}
 .hotdup{display:none}
}
.hottrack{display:flex;gap:.6rem;width:max-content;animation:hotslide 38s linear infinite}
@keyframes hotslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hotrow:hover .hottrack,.hotrow:focus-within .hottrack{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
 .hottrack{animation:none;width:auto}
 .hotrow{overflow-x:auto;scrollbar-width:thin}
}
.hotc{flex:0 0 10.5rem;margin:0;background:var(--surf);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden}
.hotc img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
/* two of the five sites have no game art at all, so a card without an image gets a typographic
   tile in the site's own accent rather than a broken image box */
.hotc .hotph{display:grid;place-items:center;aspect-ratio:16/10;font-family:'Kanit',system-ui,
sans-serif;font-weight:700;font-size:1.9rem;color:var(--bg);
background:linear-gradient(135deg,var(--acc),var(--accd))}
.hotc figcaption{padding:.5rem .6rem .6rem}
.hotc .hname{display:block;color:var(--ink);font-weight:600;font-size:.86rem;line-height:1.3}
.hotc .hcat{display:block;margin-block-start:.15rem;color:var(--muted);font-size:.76rem}
/* THE GAME RAIL. P1's navigation, and deliberately not the shape the other three profiles use:
   they put a <ul> of sections in the header and collapse it into a hamburger below 1000px. Here
   the pages ARE the games, so the names stay visible at every width and the rail scrolls sideways
   instead of hiding. Sticky rather than fixed, so it leads the page and then follows it down. */
.grail{position:sticky;top:0;z-index:41;display:flex;overflow-x:auto;scrollbar-width:none;
background:var(--surf);border-block-end:1px solid var(--acc);
padding-inline:.2rem;-webkit-overflow-scrolling:touch}
.grail::-webkit-scrollbar{display:none}
/* Centred, but NOT with justify-content:center. In a scrolling flex container that pushes the
   leading items past the scroll origin once the row overflows, and on a phone nine game names
   always overflow - the first tabs become unreachable. Auto margins on the end items resolve to
   zero when there is no free space, so the row centres when it fits and behaves exactly like
   flex-start when it does not. */
.grail a:first-child{margin-inline-start:auto}
.grail a:last-child{margin-inline-end:auto}
/* the shared `nav a` rule also matches these anchors and brings a border-radius with it, which
   rounds one corner of a full-height tab. A tab marked by an underline wants square edges. */
.grail a{flex:0 0 auto;padding:.6rem .85rem;font-size:.84rem;line-height:1.25;border-radius:0;
color:var(--muted);text-decoration:none;white-space:nowrap;
border-block-end:2px solid transparent}
.grail a:hover{color:var(--ink)}
/* the current page is MARKED, not merely coloured, so it survives a palette change */
/* The shared sheet gives nav a[aria-current=page] a FILLED accent pill with dark text. This rail
   marks the current page with an underline instead, so the inherited background has to be cleared
   explicitly - overriding only `color` left accent text on an accent background, i.e. invisible. */
.grail a[aria-current="page"]{background:none;color:var(--accl);
border-block-end-color:var(--acc);font-weight:600}
/* P1 only: a disclaimer, not a headline. It keeps the top-of-page position that makes it
   defensible - and 12.3.5 keeps it out of body copy - and loses the bold-white weight that made it
   the loudest element above the brand. The other three profiles keep the shared styling. */
.age{color:rgba(255,255,255,.72);font-size:.72rem;letter-spacing:.01em;padding:.3rem 1rem}
/* ---- P1 mobile corrections, from measured layout at 320/375/414/768 ----
   Tap targets: .hotmore measured 73x24 and .gxa 103x28, both acting as navigation on a phone.
   Text floor: .age is the 18+ responsible-gambling line at 11.5px, .hcat 12.2, .gflegal 13.1.
   .cta is deliberately left at .84rem - a 560px rule sets that so three buttons share one row. */
@media (max-width:900px){
 .hotmore{min-height:44px;display:inline-flex;align-items:center;font-size:.9rem}
 .gxa{min-height:44px;display:flex;align-items:center}
 .age{font-size:.875rem;padding-block:.45rem;line-height:1.45}
 .hotc .hname{font-size:.875rem}
 .hotc .hcat{font-size:.875rem}
 .gxd{font-size:.875rem}
 .gflegal{font-size:.875rem}
}

/* ---- P1's own menu and floating pair ----
   The burger takes the rail's place below 820px, because on this profile the rail IS the
   navigation; the other three profiles put theirs in the header. It shows the word เมนู next to
   the glyph, opens a TWO-COLUMN grid of games rather than a single-column list of pills, and adds
   the three info pages the rail deliberately omits. */
.gmenu{display:none}
@media (max-width:820px){
 nav.grail{display:none}
 .gmenu{display:block;position:sticky;top:0;z-index:41;background:var(--surf);
 border-block-end:1px solid rgba(255,255,255,.09)}
 /* row-reverse: glyph at the far right, label inboard - a right-hand burger */
 .gmenu>summary{list-style:none;min-height:50px;display:flex;align-items:center;gap:.55rem;
 flex-direction:row-reverse;justify-content:flex-start;
 padding-inline:var(--gut);color:var(--accl);cursor:pointer;
 font-family:'Kanit',system-ui,sans-serif;font-weight:600;font-size:.95rem}
 .gmenu>summary::-webkit-details-marker{display:none}
 .gmenu[open]>summary{border-block-end:1px solid rgba(255,255,255,.09)}
 .gpanel{padding:.75rem var(--gut) 1rem}
 .gpgames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
 .gpgames a{display:flex;align-items:center;min-height:48px;padding:.5rem .7rem;
 border:1px solid rgba(255,255,255,.11);border-radius:var(--r);color:var(--ink);
 text-decoration:none;font-size:.875rem;line-height:1.3;overflow-wrap:anywhere}
 .gpgames a[aria-current]{border-color:var(--acc);color:var(--accl)}
 .gpinfo{display:flex;flex-wrap:wrap;gap:0 1.2rem;margin-block-start:.8rem;
 padding-block-start:.6rem;border-block-start:1px solid rgba(255,255,255,.09)}
 .gpinfo a{min-height:44px;display:flex;align-items:center;color:var(--muted);
 font-size:.875rem;text-decoration:none}
 .gpinfo a[aria-current]{color:var(--accl)}
}
/* One pill with two segments, not two stacked circles. The pulsing ring is dropped: it is drawn
   for a circle, and on a pill segment it reads as a rendering fault. */
.fab{flex-direction:row;gap:0;border:1px solid var(--acc);border-radius:999px;
background:var(--surf);overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.fab a,.fab button{width:54px;height:46px;border-radius:0;border:0;background:transparent}
.fab #top{display:none;visibility:visible}
.fab #top.on{display:grid}
.fab .reg{display:grid;background:linear-gradient(135deg,var(--acc),var(--accd));color:#15140f}
.fab .reg::after{display:none}
.fab #top.on+.reg{border-inline-start:1px solid var(--acc)}


/* clear the fixed buttons: .gfoot sets padding with the shorthand, so the element-level rule
   beside .fab cannot reach it and the compliance paragraph rendered behind the buttons */
@media (max-width:760px){
 .gfoot{padding-block-end:132px}
}

/* P1 comparative table: hairline ledger. No vertical rules - the columns are held by alignment,
   not by boxes - and the head is separated by a single accent rule rather than a filled band. */
table.cmp{border-collapse:collapse}
table.cmp thead th{border-block-end:2px solid var(--accl);border-inline:0;
font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;padding:.3rem .6rem .45rem}
table.cmp td{border-inline:0;border-block-end:1px solid rgba(255,255,255,.07);
padding:.72rem .6rem}
table.cmp tbody tr:last-child td{border-block-end:0}
table.cmp td:first-child{font-family:'Kanit',sans-serif;font-weight:600;color:var(--ink)}
table.cmp td+td{font-variant-numeric:tabular-nums;color:var(--muted)}