/* Hallmark · genre: editorial-utilitarian · macrostructure: shared shell + per-profile body · design-system: design.md · designed-as-app
 * profile: P4 · hero: centred fold, one CTA · paper: #15130f · accent: #c19337
 * ink and muted computed from the brand hue, not the rotation
 */
*,*::before,*::after{box-sizing:border-box}
:root{--bg:#15130f;--surf:#24211b;--acc:#c19337;--accl:#c19337;--accd:#8a6927;--ink:#f4f1ec;--muted:#aca495;
--r:8px;--gridmin:186px;--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 */
.hold{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
/* ---- age bar ---- */
.agenote{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)}
.headbar{display:flex;align-items:center;gap:1rem;min-height:60px}
.sitelogo{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}
.navbar{display:none}
.hit{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}
.hit:hover{text-decoration:none;filter:brightness(1.09);transform:translateY(-1px)}
.hit1{background:linear-gradient(170deg,var(--acc),var(--accd));color:#11151c}
.hit2{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. */
.hitkey{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.03)}
.hitwide{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. */
.sitelogo img{max-height:38px;width:auto;height:auto;display:block}
.joinbox{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}
.joinbox::before{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 140% at 50% 0%,var(--acc) 0%,transparent 62%);opacity:.20}
.joinbox>*{position:relative}
.joinbox h2{margin:0 0 .5em}
.joinbox h2 .stress{color:var(--accl)}
.joinbox p{margin:0 auto 1.4em;max-width:52ch;color:var(--muted)}
.joinbox .hit{border-radius:999px;box-shadow:0 0 26px -8px var(--acc)}
.pickgrid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pickunit{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)}
.pickunit:hover{border-color:var(--acc)}
.pickunit strong{display:block;font-family:'Kanit',system-ui,sans-serif;margin-bottom:.3rem}
.pickunit .moreline{display:inline-flex;align-items:center;min-height:44px;margin-top:.35rem;
color:var(--accl);text-decoration:none;font-size:.86rem}
.pickunit .moreline strong{font-weight:500}
.pickunit .moreline::after{content:'→';margin-inline-start:.35rem}
.pickunit .moreline:hover{text-decoration:underline}
.pickunit span{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem}
.promoset{display:grid;gap:.7rem;margin-bottom:1.1em}
.promoset img{width:100%;height:auto;border-radius:var(--r);display:block}
.headhit{display:flex;gap:.45rem;align-items:center;flex:0 0 auto}
.hitkey:hover{border-color:var(--acc)}
.headhit .hit{padding:0 .85rem;white-space:nowrap}
/* ---- hero: exactly two CTAs (12.2.1) ---- */
.topunit{padding:2.6rem 0 2rem;text-align:center}
/* a spoke opens plainly: title, then one lede paragraph. No hero, no CTA pair, no marquee. */
.pgtop{padding:1.9rem 0 .5rem}
.pgtop h1{margin-bottom:.45em}
.pgtop .opener{margin:0}
.topunit p{color:var(--muted);max-width:62ch;margin-inline:auto;}
.topunithit{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;
justify-content:center;}
/* ---- sections ---- */
section.chunk{padding:1.9rem 0;border-top:1px solid rgba(255,255,255,.07)}
.box{background:var(--surf);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);
padding:1.05rem}
.gridwrap{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. */
.brandrow{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 */
.brandstrip{overflow:hidden;margin-bottom:1rem}
.brandline{display:flex;gap:.7rem;width:max-content;animation:slideleft 56s linear infinite}
.brandstrip:hover .brandline,.brandstrip:focus-within .brandline{animation-play-state:paused}
.brandline .brandcell{flex:0 0 150px}
@media(min-width:700px){.brandline .brandcell{flex:0 0 178px}}
@media(prefers-reduced-motion:reduce){
  .brandstrip{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .brandline{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. */
.gamescroll{overflow:hidden;padding-bottom:.6rem;margin-bottom:1.1em}
.gameline{display:flex;gap:.85rem;width:max-content;animation:slideleft 42s linear infinite}
.gamescroll:hover .gameline,.gamescroll:focus-within .gameline{animation-play-state:paused}
.gameline .boxtile{flex:0 0 168px}
@keyframes slideleft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:700px){.gameline .boxtile{flex:0 0 196px}}
@media(prefers-reduced-motion:reduce){
  .gamescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gameline{animation:none}
}
@media(min-width:700px){
  .brandrow{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. */
.boxtile{margin:0;background:var(--surf);border:1px solid rgba(255,255,255,.09);
border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.boxtile img{width:100%;height:auto;aspect-ratio:5/7;object-fit:cover;display:block}
.boxtile figcaption{padding:.55rem .6rem;font-size:.8rem;line-height:1.4;display:grid;gap:.1rem}
.boxtile .boxdev{color:var(--ink);font-weight:600}
.boxtile .boxname{color:var(--accl)}
.boxtile .boxcat{color:var(--muted);font-size:.74rem}
.gridwrap 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. */
.brandcell{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)}
.brandcell img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.plaque-light{background:#f4f6fa}
.plaque-dark{background:#10151f}
.brandcell 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}
.boxwrap{overflow-x:auto}
details.qgroup{border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
padding:.7rem .9rem;margin-bottom:.55rem;background:var(--surf)}
details.qgroup 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.qgroup summary::-webkit-details-marker{display:none}
details.qgroup 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.qgroup[open] summary::after{content:'−'}
details.qgroup 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.flowlist{counter-reset:s;list-style:none;padding:0;display:grid;gap:.6rem}
ol.flowlist 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.flowlist 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}
.todoflag{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)}
.footgrid{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) ---- */
.floatbtn{position:fixed;right:14px;bottom:14px;z-index:50;display:flex;flex-direction:column;
gap:.6rem}
.floatbtn a,.floatbtn 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)}
.floatbtn .regbtn{display:none;background:linear-gradient(135deg,var(--acc),var(--accd));color:#11151c;
position:relative}
.floatbtn .regbtn::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.isopen{visibility:visible}
.floatbtn .loginbtn{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) */
  .navbar{display:block;margin-inline-start:auto}
  .navbar>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}
  .navbar>summary::-webkit-details-marker{display:none}
  nav.deskonly{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. */
  .tray{position:fixed;left:0;right:0;top:var(--hh,104px);bottom:0;background:var(--bg);
  overflow-y:auto;padding:.6rem var(--gut) 2rem}
  .tray ul{flex-direction:column;gap:.2rem}
  .tray 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. */
  .tophit{display:none}
  .floatbtn .regbtn{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. */
  .topunithit{flex-direction:column;align-items:stretch}
  .topunithit .hit{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. */
  .sitelogo{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 .tray made the mobile panel
   display:flex at >=1001px, hidden only because its parent .navbar is display:none. That is the
   fragile chain the SOP names: a reveal that is not scoped forces the mobile menu open. */
details.navbar:not([open]) .tray{display:none}
@media (min-width:1001px){ nav.deskonly{position:static;display:flex} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- P4's footer, on the client's reference structure ----
   Brand block with a channel chip row, link columns beside it, a hairline, then copyright and the
   legal links on opposite ends of the bottom bar. P1's footer makes contact a column and puts
   nothing but the legal paragraph in its bottom bar; keeping the two apart is the point. */
.footshell{border-block-start:1px solid var(--line);margin-block-start:2rem;padding-block:2rem 1.4rem}
.gridfoot{display:grid;gap:1.6rem 2.4rem;
grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);align-items:start}
.brandbox{min-width:0}
.footname{margin:0 0 .5rem;font-family:'Kanit',system-ui,sans-serif;font-weight:700;
font-size:1.05rem;letter-spacing:.02em;color:var(--ink)}
.footdesc{margin:0;color:var(--muted);font-size:.9rem;line-height:1.75}
/* the reference's icon row. Chips rather than bare glyphs: at two channels a pair of loose icons
   reads as a row that failed to load, where a labelled chip reads as a deliberate list. */
.chanrow{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.chanchip{display:inline-flex;align-items:center;gap:.4rem;min-height:34px;
padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;
color:var(--muted);font-size:.82rem;line-height:1.2}
.chanchip svg{flex:0 0 auto;color:var(--accl)}
.linkcol{display:flex;flex-direction:column;gap:.42rem;min-width:0}
.linkcol h4{margin:0 0 .55rem;font-family:'Kanit',system-ui,sans-serif;font-weight:600;
font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accl)}
.linkcol a{color:var(--muted);font-size:.9rem;text-decoration:none;min-height:26px;
display:flex;align-items:center}
.linkcol a:hover,.linkcol a:focus-visible{color:var(--accl);text-decoration:underline}
.helpline{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
/* the hairline and the bottom bar */
.footbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:.6rem 1.4rem;margin-block-start:1.8rem;padding-block-start:1.1rem;
border-block-start:1px solid var(--line)}
.footcopy{margin:0;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.footlinks{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.footlinks a{color:var(--muted);font-size:.85rem;text-decoration:underline;
text-decoration-color:var(--line);text-underline-offset:3px;
min-height:34px;display:flex;align-items:center}
.footlinks a:hover,.footlinks a:focus-visible{color:var(--accl);text-decoration-color:var(--acc)}
.footmicro{margin:1rem 0 0;color:var(--muted);font-size:.8rem;line-height:1.7;opacity:.85}
@media (max-width:900px){
 .gridfoot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .brandbox{grid-column:1 / -1}
}
@media (max-width:760px){
 /* clear the fixed buttons. The element-level footer rule beside .floatbtn loses to .footshell's own
    padding-block, so the clearance has to be stated here. */
 .footshell{padding-block:2rem 132px}
}
@media (max-width:560px){
 .gridfoot{grid-template-columns:1fr}
 .footbar{flex-direction:column;align-items:flex-start}
 .footmicro{font-size:.85rem}
}

/* Group 4 runs up to 7 rail items (WIN999: home, casino, fish, live casino, sport, promo, app).
   Tighter than the shared rail so seven fit on one line at the 1180px measure; the 44px tap floor
   is untouched because only the inline padding moves. */
/* Both classes, because the desktop rail rules sit in a min-width media query emitted AFTER
   DL_CSS: at equal specificity the shared rule would win on order. nav.deskonly.tray outranks it. */
nav.deskonly.tray>ul{gap:2px}
nav.deskonly.tray a{padding:0 11px;gap:6px}
@media (max-width:1100px){nav.deskonly.tray a{padding:0 9px;gap:5px}}

/* Emoji standing in for a harvested menu icon. Sized and spaced to occupy the same slot the <img>
   does on 365KUB, so the rail keeps one rhythm across the profile. */
.navemo{font-size:1.05em;line-height:1;flex:0 0 auto;display:inline-block;
filter:saturate(.85)}

/* ---- 365KUB's vertical directory: image cards over the same written content ----
   Client-directed shape, one site at a time. The card keeps the h3, the paragraph and the woven
   anchor, so nothing that was written is lost and the spoke is still linked exactly once.
   2:1 because all three harvested banners sit between 1.99 and 2.09 - the crop loses under 5%. */
.cardrow{display:grid;gap:.9rem;
grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr))}
.artcard{display:flex;flex-direction:column;min-width:0;background:var(--surf);
border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.artcard .shot{aspect-ratio:2/1;display:block;overflow:hidden;background:var(--bg)}
.artcard .shot img{width:100%;height:100%;object-fit:cover;display:block}
/* casino and slots: the operator publishes a provider strip there, not a banner */
.artcard .shot.plateset{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
/* the plates are 3:4 portrait in a square half-cell, so cover would crop ~12% off each edge and
   can clip the logo. contain shows the whole plate, and its own dark ground matches --bg so
   there is no visible letterbox. */
.artcard .shot.plateset img{background:var(--bg);object-fit:contain;padding:.45rem}
/* No harvested art for this vertical: the card draws the category instead. Three of the five
   generalist brands publish nothing but a logo, so this is their normal state, not an error state.
   Glyph and field are both built from the brand's own accent, so the tile differs per site without
   any asset - and, unlike a photograph, depicts a category rather than claiming to show a room.
   The per-domain field pattern is appended after this block by noart_css(). */
.artcard .shot.noart{display:grid;place-items:center;align-content:center;gap:.45rem;
padding:.9rem;text-align:center;
background:linear-gradient(155deg,color-mix(in srgb,var(--acc) 12%,var(--surf)),var(--bg))}
.artcard .shot.noart svg{width:46px;height:46px;color:var(--acc);opacity:.92}
.artcard .shot.noart b{font-family:'Kanit',system-ui,sans-serif;font-weight:600;
font-size:clamp(1rem,3.4vw,1.2rem);color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.artcard .shot.noart em{font-style:normal;font-weight:600;font-size:.66rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--accl)}
@media (prefers-reduced-motion:no-preference){
 .artcard .shot.noart svg{transition:transform .25s ease}
 .artcard:hover .shot.noart svg{transform:scale(1.06)}
}
.artcard .cap{padding:.9rem 1rem 1.05rem;flex:1 1 auto;min-width:0}
.artcard .cap h3{margin:0 0 .35rem;font-family:'Kanit',system-ui,sans-serif;font-weight:600;
font-size:.99rem;color:var(--ink);line-height:1.5;overflow-wrap:anywhere}
.artcard .cap p{margin:0;font-size:.89rem;color:var(--muted)}
.artcard .cap p a{color:var(--accl);text-decoration:none;
border-block-end:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.artcard .cap p a:hover,.artcard .cap p a:focus-visible{border-block-end-color:var(--acc)}
.artcard:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}

/* ---- P4's vertical directory: written content ----
   An h3 and a paragraph per vertical, with the internal link carried by varied anchor text inside
   the prose. No card, no lattice, no row list - and body copy is the one directory shape none of
   the other three profiles uses (group 1 numbered rows, groups 2 and 3 the accent-rail card).
   The anchor is underlined rather than coloured alone, so it does not rely on hue to read as a
   link. */
.catflow{display:block}
.catflow h3{margin:1.4rem 0 .35rem;font-family:'Kanit',system-ui,sans-serif;
font-size:1.02rem;font-weight:600;color:var(--ink)}
.catflow h3:first-child{margin-top:.35rem}
.catflow p{margin:0;max-width:74ch;color:var(--muted)}
.catflow p a{color:var(--accl);text-decoration:none;
border-block-end:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.catflow p a strong{font-weight:600}
.catflow p a:hover,.catflow p a:focus-visible{border-block-end-color:var(--acc)}

/* ---- P4's centred hero ---- */
/* Client-directed shape. Brand paper, brand accent, nothing invented; the single control carries
   the group's anchor term. */
section.topunit.herocentre{text-align:center;padding-block:clamp(2.6rem,6vw,4.6rem)}
section.topunit.herocentre>.hold{display:block}
section.topunit.herocentre h1{font-weight:700;font-size:clamp(1.85rem,5.4vw,3.4rem);line-height:1.16;
letter-spacing:-.02em;max-width:20ch;margin-inline:auto;color:var(--ink);text-wrap:balance;
overflow-wrap:anywhere}
section.topunit.herocentre .opener{color:var(--muted);margin:1.15rem auto 0;max-width:56ch;
font-size:clamp(.95rem,1.6vw,1.06rem)}
.cta-go{display:inline-flex;align-items:center;gap:.85rem;margin-top:1.7rem;min-height:52px;
padding:0 .5rem 0 1.5rem;border-radius:999px;white-space:nowrap}
.cta-go .gobox{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
background:color-mix(in srgb,var(--bg) 18%,transparent);flex:0 0 auto}
.cta-go .gobox svg{width:17px;height:17px}
.cta-go:hover .gobox{background:color-mix(in srgb,var(--bg) 30%,transparent)}
/* provenance strip */
.seal{margin:1.9rem auto 0;padding-block-start:1.25rem;max-width:760px;
border-block-start:1px solid var(--line)}
.sealwho{margin:0;font-size:.82rem;color:var(--muted)}
.sealwho b{color:var(--ink);font-weight:600;font-family:'Kanit',system-ui,sans-serif}
.seals{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;
justify-content:center;gap:.5rem 1.4rem}
.seals li{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--muted)}
.seals svg{width:15px;height:15px;flex:0 0 auto;color:var(--accl);opacity:.85}

/* P4's hero: banner-led and ranged left, not centred text. The centred shell it replaces was
   shared furniture; this shape is the one the brand's own homepage uses. */
section.topunit.herowide{text-align:start}
section.topunit.herowide>.hold{display:grid;gap:1.1rem}
.heroart{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
.herotext{max-width:62ch}
section.topunit.herowide h1{text-align:start}
section.topunit.herowide p{margin-inline:0;text-align:start}
section.topunit.herowide .topunithit{justify-content:flex-start}

/* harvested category art: the only art the operator publishes for sport and lottery */
.cband{margin:.9rem 0 0;padding:0}
.cband img{width:100%;height:auto;display:block;border:1px solid var(--line);
border-radius:var(--r)}

/* ---- P4: the brand's own menu, as a centred pill rail ---- */
/* Centred because the subpage menu was asked to align centre, and a rail because the source uses
   one. Foundation 10 applied literally: 44px minimum tap target up to 1000px, and the rail
   scrolls inside its own box so the page body never scrolls sideways at 320. */
nav.deskonly{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
nav.deskonly>ul{display:flex;justify-content:center;gap:4px;margin:0;padding:6px;list-style:none;
background:var(--bg);border:1px solid var(--line);border-radius:999px;max-width:100%;
overflow-x:auto;scrollbar-width:none;
/* A rail must never wrap: the bare ul rule above sets flex-wrap:wrap and this never reset it, so
   WIN999's 7 items broke to a second line and the pill grew a second row. overflow-x already
   handles the narrow case by scrolling, which keeps the pill one line high. */
flex-wrap:nowrap}
nav.deskonly>ul::-webkit-scrollbar{display:none}
nav.deskonly li{flex:0 0 auto}
nav.deskonly a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
padding:0 16px;border-radius:999px;color:var(--muted);text-decoration:none;
font-family:'Kanit',system-ui,sans-serif;font-weight:500;font-size:.9rem;white-space:nowrap}
nav.deskonly a img{width:18px;height:18px;object-fit:contain;flex:0 0 auto;opacity:.7}
nav.deskonly a:hover,nav.deskonly a:focus-visible{color:var(--ink)}
nav.deskonly a[aria-current]{background:var(--surf);color:var(--ink)}
nav.deskonly a[aria-current] img{opacity:1}
/* the burger sheet carries the same items stacked, tap targets kept at 44px */
nav.tray a{display:flex;align-items:center;gap:10px;min-height:44px}
nav.tray a img{width:18px;height:18px;object-fit:contain;flex:0 0 auto}
/* the studio strips, one per category, labelled the way the source labels them */
.striplabel{margin:.9rem 0 .5rem;font-family:'Kanit',system-ui,sans-serif;font-weight:600;
font-size:.95rem;color:var(--accl)}
.striplabel:first-child{margin-top:0}
@media (max-width:1000px){ nav.deskonly{display:none} }
/* the static studio wall: a strip meant to be read cannot move under the reader, and the
   source's own strip is static. This is where the 125win auto-scrolling track goes. */
/* The harvested plates are 300x399 - 3:4 portrait artwork, not flat logos. The bare .brandcell rule
   belongs to the horizontal strip and sets aspect-ratio:16/7; this wall never reset it, so a cell
   rendered ~52px tall around an image allowed 84px, and the art hung out of its own frame. The wall
   now matches the asset: the plate IS the tile, edge to edge, so there is no inner rectangle to
   mismatch and at 3:4 nothing is cropped. */
.brandwall{display:grid;gap:.6rem;margin-bottom:1.1rem;
grid-template-columns:repeat(auto-fit,minmax(min(100%,144px),1fr))}
.brandwall .brandcell{aspect-ratio:3/4;min-height:0;padding:0;overflow:hidden;display:block;
background:var(--surf);border:1px solid var(--line);border-radius:var(--r)}
.brandwall .brandcell img{width:100%;height:100%;max-height:none;object-fit:cover;display:block}

.appdl .dlcard{background:var(--surf);border:1px solid rgba(255,255,255,.09);
border-radius:var(--r);padding:1.15rem 1.25rem;display:flex;gap:1.4rem;align-items:center}
.appdl h2{margin:0 0 .4rem}
.appdl p{margin:0 0 .8rem;color:var(--muted);font-size:.95rem;max-width:62ch}
.dlmain{flex:1 1 auto;min-width:0}
.dlbtns{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.dlos{display:inline-flex;align-items:center;padding:.32rem 1rem;border-radius:999px;
background:var(--bg);border:1px solid var(--accd);color:var(--ink);
font-family:'Kanit',system-ui,sans-serif;font-weight:600;font-size:.92rem}
.dlgo{margin-inline-start:.2rem}
.dlqr{flex:0 0 auto;text-align:center}
.dlqr img{display:block;width:164px;height:164px;border-radius:6px;background:#fff;padding:6px}
.dlcap{display:block;margin-top:.4rem;color:var(--muted);font-size:.85rem}
/* GCLUB - QR on the right inside a device frame, as in the reference */
.dl-a .dlqr{padding:.7rem .55rem 1.1rem;border:2px solid var(--accd);border-radius:22px;
background:var(--bg)}
.dl-a .dlqr::after{content:"";display:block;width:34px;height:4px;margin:.6rem auto 0;
border-radius:2px;background:var(--accd)}
/* WIN999 - QR leads on the left, copy and buttons to its right */
.dl-b .dlcard{flex-direction:row-reverse}
.dl-b .dlqr img{width:140px;height:140px}
/* SBFPLAY99 - one centred band: heading, buttons, then the QR beneath */
.dl-c .dlcard{flex-direction:column;text-align:center;gap:.9rem}
.dl-c .dlbtns{justify-content:center}
.dl-c p{margin-inline:auto}
@media (max-width:720px){
 .appdl .dlcard,.dl-b .dlcard{flex-direction:column;text-align:center}
 .appdl .dlbtns{justify-content:center}
 .appdl p{margin-inline:auto}
}
/* the /promotion/ subpage banner sits in a card (P4 only; promo_banner runs on 365KUB and VF38).
   .bnr's own rules are P1-scoped, so the card is defined outright here - width:100% is what keeps
   the 1440px image inside the content column instead of overflowing to the right. */
.bnr{padding-block:1rem 0}
.promoframe{margin:0;background:var(--surf);border:1px solid var(--line);
border-radius:calc(var(--r) * 1.5);padding:.5rem;overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.32)}
.promoframe img{display:block;width:100%;height:auto;border-radius:var(--r)}

/* P4 comparative table: floating rows. Spacing on the block axis, so there is no grid - each data
   row is a surface band of its own, carrying a 3px accent rail on its leading edge and rounded
   ends, which is the framed-chunk shape the rest of this profile is built from. The head keeps no
   band and no rule: it is a set of micro-labels sitting above the stack. */
table.boxtab{border-collapse:separate;border-spacing:0 6px}
table.boxtab thead th{background:none;border:0;color:var(--muted);
padding:0 .82rem .28rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
table.boxtab td{background:var(--surf);border:0;padding:.72rem .82rem;vertical-align:middle}
table.boxtab td:first-child{border-inline-start:3px solid var(--accl);
border-start-start-radius:var(--r);border-end-start-radius:var(--r);
font-family:'Kanit',sans-serif;font-weight:600;color:var(--ink)}
table.boxtab td:last-child{border-start-end-radius:var(--r);border-end-end-radius:var(--r)}
table.boxtab td+td{font-variant-numeric:tabular-nums;color:var(--muted)}
.artcard .shot.noart{background-image:radial-gradient(color-mix(in srgb,var(--acc) 17%,transparent) 1px,transparent 1.5px),linear-gradient(155deg,color-mix(in srgb,var(--acc) 12%,var(--surf)),var(--bg));background-size:9px 9px,auto}