@charset "UTF-8";
/* ============================================================
   ontariocaptaincooks.casino
   Design system — "Deep Current" (Kinetic Maximal)

   Carried over from the approved mockup, not rebuilt by eye:
   the token set, the bento hero, the card components, the
   isobath motif and the sounding marks all come straight from
   mockups/ontariocaptaincooks-casino/a-kinetic-deep-current.html
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Surfaces — the water column of Lake Ontario */
  --abyss:#05202B;
  --deep:#0A3243;
  --mid:#0F4459;
  --shelf:#155870;
  --line:#1E6C86;
  --line-2:#2A8AA6;
  --ui:#4E93AC;              /* interactive borders, WCAG 1.4.11 */

  /* Colour is a role, never decoration */
  --c-play:#2FD6C3;          /* games, primary action        */
  --c-play-d:#0E8C7E;        /* same role on light surfaces  */
  --c-rg:#FF7A45;            /* responsible gambling          */
  --c-rg-d:#C2451A;
  --c-reg:#F2C14E;           /* regulator, legal, verified    */
  --c-pay:#8FC0FF;           /* payments                      */

  /* Text */
  --sand:#F4EBD8;
  --sand-2:#D3C9B6;
  --dim:#A9BDC6;
  --white:#FFFFFF;
  --on-accent:#04222C;

  --g-current:linear-gradient(96deg,var(--c-play) 0%,#4FE0A8 42%,var(--c-reg) 100%);
  --g-tile:linear-gradient(160deg,rgba(47,214,195,.10),rgba(47,214,195,0) 60%);
  --g-rings:repeating-radial-gradient(circle at 88% 92%,transparent 0 15px,rgba(42,138,166,.34) 15px 16px);

  /* Type */
  --fd:"Sora","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --fb:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fm:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;

  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:1.375rem; --t-xl:1.75rem; --t-2xl:2.25rem; --t-3xl:3rem;

  /* 8px rhythm */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:56px; --s7:72px; --s8:96px;

  --r:14px; --r-sm:10px; --r-pill:999px;
  --sh:0 6px 22px rgba(2,16,22,.4);
  --sh-lift:0 14px 34px rgba(2,16,22,.5);

  --wrap:1240px;
  --header-h:76px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--abyss);color:var(--sand);
  font:400 var(--t-base)/1.65 var(--fb);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--fd);line-height:1.1;margin:0;letter-spacing:-.02em;color:var(--white);font-weight:700}
h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800}
h3{font-size:var(--t-lg)}
h4{font-size:var(--t-md)}
p{margin:0 0 var(--s2)}
a{color:var(--c-play);text-underline-offset:3px}
a:hover{color:var(--white)}
/* Email addresses and URLs run to 34 unbroken characters — wider than a 320px
   viewport can hold — and pushed the whole page sideways on /faq, /privacy and
   /how-it-works. Break them only where nothing else can, so ordinary prose
   still wraps on word boundaries. */
/* Only where an unbreakable token can actually overflow: links (email
   addresses, URLs) and the footer address block. Table cells are excluded —
   they scroll inside .tbl-wrap, and breaking there split "Mastercard". */
a,code,address{overflow-wrap:anywhere}
img,picture,svg{max-width:100%}
img{height:auto;display:block}
ul,ol{margin:0 0 var(--s2);padding-left:1.25em}
li{margin-bottom:.4em}
strong,b{color:var(--white);font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}
:focus-visible{outline:3px solid var(--c-play);outline-offset:2px;border-radius:4px}
::selection{background:var(--c-play);color:var(--on-accent)}

.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.ic{width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:-.22em}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Any class that sets `display` outranks the browser rule for [hidden] (0,1,0
   vs 0,0,1), so a hidden overlay keeps its layout box and swallows every click
   on the page while being invisible. Each overlay restates the rule for itself
   below; this is the backstop that makes forgetting it harmless. */
[hidden]{display:none !important}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--c-play);color:var(--on-accent);padding:12px 20px;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* SIGNATURE — sounding marks number every block, like a nautical chart */
.snd{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.16em;color:var(--c-play);display:block;margin-bottom:var(--s2);text-transform:uppercase}
.snd::before{content:"\25E6\00a0\00a0";opacity:.6}
.snd.rg{color:var(--c-rg)}
.snd.reg{color:var(--c-reg)}
.snd.pay{color:var(--c-pay)}

/* SIGNATURE — contour hairline divides sections */
.rule{height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 26px,transparent 26px 34px);margin-bottom:var(--s4);border:0}

/* ---------- 3. Isobath backdrop (site-wide signature) ---------- */
.soundings{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45}
.soundings svg{width:130%;height:130%;position:absolute;top:-15%;left:-15%}
.soundings path{fill:none;stroke:var(--line);stroke-width:1}
.soundings path:nth-child(odd){stroke:var(--line-2);opacity:.55}
.shell{position:relative;z-index:1}

/* ---------- 4. Compliance strip ---------- */
.strip{background:var(--c-rg);color:#2A0E04;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:41}
.strip .wrap{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 0;text-align:center}
.strip b{background:#2A0E04;color:var(--c-rg);border-radius:4px;padding:2px 8px}
.strip a{color:#2A0E04;text-decoration:underline;display:inline-block;padding-block:6px}
.strip a:hover{color:#000}

/* ---------- 5. Header — centred split ---------- */
/* Above the drawer (45): otherwise the open overlay covers the burger and
   the only way out is Escape or a nav link. */
.mast{position:sticky;top:0;z-index:46;backdrop-filter:blur(12px);background:rgba(5,32,43,.9);border-bottom:1px solid var(--line)}
.mast .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);padding:var(--s2) 0;transition:padding .3s}
.mast.small .wrap{padding:10px 0}
.nav{font-size:var(--t-sm);font-weight:600}
.nav ul{display:flex;gap:var(--s3);align-items:center;margin:0;padding:0;list-style:none}
.nav.r ul{justify-content:flex-end}
.nav li{margin:0}
.nav a{text-decoration:none;color:var(--sand-2);position:relative;transition:color .2s;white-space:nowrap}
/* Padding is scoped away from .btn: .nav a (0,1,1) outranks .btn-sm (0,1,0),
   so an unscoped rule here silently strips the pills back to bare text. */
.nav a:not(.btn){padding:6px 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--c-play);transition:right .28s}
.nav a:hover,.nav a:focus-visible{color:var(--white)}
.nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--white)}
/* the container rule above outranks .btn-p, so restate the component louder */
.mast .nav a.btn-p,.mast .nav a.btn-p:hover{color:var(--on-accent)}
.mast .nav a.btn-g,.mast .nav a.btn-g:hover{color:var(--sand)}

.logo{text-align:center;text-decoration:none;line-height:1;display:block}
.logo .l1{display:block;font-family:var(--fm);font-size:.62rem;letter-spacing:.42em;color:var(--c-play);text-transform:uppercase}
.logo .l2{display:block;font-family:var(--fd);font-size:1.44rem;font-weight:800;color:var(--white);margin-top:3px;white-space:nowrap;letter-spacing:-.01em}
.logo .l2 em{font-style:normal;background:var(--g-current);-webkit-background-clip:text;background-clip:text;color:transparent}

.burger{display:none;background:none;border:1px solid var(--ui);color:var(--sand);border-radius:var(--r-sm);width:46px;height:46px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger .ic{width:24px;height:24px}
/* Closed shows the menu glyph, open shows the cross — named after the glyph,
   not the action, so the pairing cannot be read backwards. */
.burger[aria-expanded="false"] .i-x{display:none}
.burger[aria-expanded="true"] .i-menu{display:none}

/* Mobile drawer.
   Presence is driven by the hidden attribute, never by a visibility
   transition: an animation that fails to run must still leave the menu
   usable, and animating visibility means a stalled transition hides it
   outright. The entrance is a keyframe animation over a state that is
   already visible, so suppressing motion costs nothing but the motion. */
.drawer{position:fixed;inset:0;z-index:45;background:rgba(5,32,43,.97);backdrop-filter:blur(6px);padding:calc(var(--header-h) + 24px) 0 var(--s5);overflow-y:auto}
.drawer[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  .drawer:not([hidden]){animation:drawerIn .26s ease}
}
@keyframes drawerIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.drawer ul{list-style:none;margin:0 0 var(--s3);padding:0}
.drawer li{margin:0;border-bottom:1px solid var(--line)}
.drawer a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 2px;text-decoration:none;color:var(--sand);font-family:var(--fd);font-size:1.2rem;font-weight:700}
.drawer a:hover,.drawer a[aria-current="page"]{color:var(--c-play)}
.drawer .acts{display:grid;gap:10px;margin-top:var(--s3)}
.drawer .acts .btn{justify-content:center}
/* .drawer a outranks .btn-p, so the button colour has to be restated —
   the same trap as .nav a in the masthead. */
.drawer .acts a.btn-p,.drawer .acts a.btn-p:hover{color:var(--on-accent)}
.drawer .acts a.btn-g,.drawer .acts a.btn-g:hover{color:var(--sand)}

/* ---------- 6. Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-sm);padding:13px 22px;font-weight:700;font-size:var(--t-base);text-decoration:none;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;font-family:var(--fb);line-height:1.2;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-p{background:var(--g-current);color:var(--on-accent);box-shadow:0 6px 22px rgba(47,214,195,.26)}
.btn-p::after{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg)}
.btn-g{border-color:var(--ui);color:var(--sand);background:rgba(255,255,255,.04)}
.btn-g:hover{border-color:var(--c-play);color:var(--white)}
.btn-rg{background:var(--c-rg);color:#2A0E04}
.btn-rg:hover{background:#FF9165}
/* Header pills were hugging their text — a compact button still needs room
   to read as a button rather than as a boxed label. */
.btn-sm{padding:11px 22px;font-size:var(--t-sm)}
.btn-block{width:100%;justify-content:center}
.btn .ar{transition:transform .25s}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- 7. Surfaces ---------- */
.tile{background:linear-gradient(160deg,var(--deep),var(--mid));border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);position:relative;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0;background:var(--g-tile);pointer-events:none}
.tile > *{position:relative}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.chips li{margin:0}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:.72rem;border:1px solid var(--ui);border-radius:var(--r-pill);padding:6px 12px;color:var(--sand);letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.chip.reg{border-color:var(--c-reg);color:var(--c-reg)}
.chip.rg{border-color:var(--c-rg);color:var(--c-rg)}
a.chip:hover{border-color:var(--c-play);color:var(--white)}

/* 19+ mark. The library only ships an 18+ badge, which is wrong for Ontario. */
.age-mark{display:inline-flex;align-items:center;justify-content:center;width:2.5em;height:2.5em;border-radius:50%;border:2px solid currentColor;font-family:var(--fd);font-weight:800;font-size:.8rem;letter-spacing:-.02em;flex:0 0 auto}

/* ---------- 8. Hero (bento collage) ---------- */
.hero{padding:var(--s5) 0 var(--s4);position:relative}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg picture,.hero-bg img{width:100%;height:100%;object-fit:cover}
/* Scrim is tuned so the chart art actually reads: the hero text all sits
   inside its own tiles, so the background does not need to carry contrast. */
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,32,43,.42),rgba(5,32,43,.78))}
.hero .wrap{position:relative;z-index:1}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.t-lead{grid-column:span 7;padding:var(--s4)}
.t-lead h1 .hot{background:var(--g-current);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-lead .lede{color:var(--sand-2);max-width:48ch;margin:var(--s2) 0 var(--s3);font-size:var(--t-md)}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.age-note{font-family:var(--fm);font-size:var(--t-xs);color:var(--dim);margin:var(--s3) 0 0;letter-spacing:.02em;max-width:54ch;line-height:1.7}

.t-cat{grid-column:span 5;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cat{background:linear-gradient(160deg,var(--deep),var(--mid));border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);text-decoration:none;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:140px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s;color:var(--sand)}
/* SIGNATURE — the isobath rings carry into every card, so open space
   reads as chart rather than as a hole */
.cat::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--g-rings);opacity:.6;transition:opacity .25s}
.cat:hover::before{opacity:.95}
.cat > *{position:relative;z-index:1}
.cat:hover{border-color:var(--c-play);transform:translateY(-3px)}
.cat .ic{width:30px;height:30px;color:var(--c-play)}
.cat b{display:block;font-family:var(--fd);font-size:var(--t-md);margin-top:14px;color:var(--white)}
.cat i{font-style:normal;font-family:var(--fm);font-size:.72rem;color:var(--dim);letter-spacing:.04em}
.cat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c-play);transform:scaleX(0);transform-origin:left;transition:transform .3s;z-index:2}
.cat:hover::after{transform:scaleX(1)}

/* Placement and colour are separate concerns. They used to share a class,
   so borrowing .t-rg elsewhere for its tint dragged grid-column:span 4 along
   and blew a one-column grid out to twelve tracks. */
.t-reg{grid-column:span 5}
.t-rg{grid-column:span 4}
.t-rg,.tint-rg{border-color:var(--c-rg)}
.t-rg::before,.tint-rg::before{background:linear-gradient(160deg,rgba(255,122,69,.15),transparent 62%)}
.t-num{grid-column:span 3;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.t-num .big{font-family:var(--fd);font-size:2.9rem;font-weight:800;color:var(--white);line-height:1}
.t-num .lab{font-family:var(--fm);font-size:.72rem;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-top:8px}
.t-num .note{font-family:var(--fm);font-size:.66rem;color:var(--dim);opacity:.85;margin-top:10px;letter-spacing:.05em}
.helpline{font-family:var(--fm);font-size:var(--t-base);color:var(--c-rg);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.helpline:hover{color:var(--c-rg);text-decoration:underline}
.t-rg small,.tint-rg small,.hl-note{display:block;color:var(--dim);font-size:var(--t-xs);margin-top:8px;line-height:1.6}

/* ---------- 9. Page header (inner pages) ---------- */
.phead{position:relative;padding:var(--s6) 0 var(--s5);overflow:hidden;border-bottom:1px solid var(--line)}
/* The page header already carries generous space; stacking a full section
   pad straight after it leaves a dead band. */
.phead + .sec{padding-top:var(--s5)}
.phead-bg{position:absolute;inset:0;z-index:0}
.phead-bg picture,.phead-bg img{width:100%;height:100%;object-fit:cover}
/* Left-weighted scrim: the heading sits on the left, so the art can stay
   legible on the right instead of being flattened everywhere. */
.phead-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(5,32,43,.92) 0%,rgba(5,32,43,.82) 42%,rgba(5,32,43,.42) 100%),
  linear-gradient(180deg,rgba(5,32,43,.25),rgba(5,32,43,.7))}
.phead .wrap{position:relative;z-index:1}
.phead .lede{color:var(--sand-2);max-width:62ch;font-size:var(--t-md);margin-top:var(--s2)}
.crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 var(--s2);font-family:var(--fm);font-size:var(--t-xs);color:var(--dim)}
.crumbs li{margin:0;display:flex;align-items:center;gap:8px}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--c-play)}
.crumbs li+li::before{content:"/";opacity:.5}

/* ---------- 10. Sections ---------- */
.sec{padding:var(--s7) 0;position:relative}
.sec.tint{background:linear-gradient(180deg,rgba(10,50,67,.55),transparent)}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.sec-h p{color:var(--sand-2);margin:var(--s1) 0 0;max-width:58ch}
.grid{display:grid;gap:14px}
/* Grid and flex children default to min-width:auto, so a wide child — a table
   inside its own scroll container, a long unbroken string — widens the track
   instead of scrolling, and the whole page picks up a horizontal scrollbar. */
.grid > *,.split > *,.bento > *,.foot-top > *,.foot-legal > *{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:center}
.split.rev > .art{order:2}
.art{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.art img{width:100%;height:auto}

.step{background:rgba(15,68,89,.55);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);position:relative;overflow:hidden}
.step .n{font-family:var(--fm);font-size:var(--t-xs);color:var(--c-play);letter-spacing:.16em}
.step h3{font-size:var(--t-md);margin:12px 0 8px}
.step p{font-size:var(--t-sm);color:var(--sand-2);margin:0}
.step::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c-play);transform:scaleX(0);transform-origin:left;transition:transform .55s}
.step.in::after{transform:scaleX(1)}
.step.rg-step .n{color:var(--c-rg)}
.step.rg-step::after{background:var(--c-rg)}

.feat{display:flex;gap:var(--s2);align-items:flex-start;background:rgba(15,68,89,.4);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.feat .ic{width:26px;height:26px;color:var(--c-play);margin-top:2px}
.feat.reg .ic{color:var(--c-reg)}
.feat.rg .ic{color:var(--c-rg)}
/* Heading level follows the document outline; size is pinned here so
   promoting an h3 to an h2 for the outline changes nothing visually. */
.feat h2,.feat h3{font-size:var(--t-base);margin-bottom:6px}
.feat p{font-size:var(--t-sm);color:var(--sand-2);margin:0}

/* ---------- 11. Game catalogue ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s4);padding:0;list-style:none}
.tabs li{margin:0}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ui);border-radius:var(--r-pill);text-decoration:none;color:var(--sand);font-size:var(--t-sm);font-weight:600;transition:background .2s,border-color .2s,color .2s}
.tabs a:hover{border-color:var(--c-play);color:var(--white)}
.tabs a[aria-current="true"],.tabs a.on{background:var(--c-play);border-color:var(--c-play);color:var(--on-accent)}
.tabs .cnt{font-family:var(--fm);font-size:.7rem;opacity:.75}

.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:18px;padding:0;list-style:none;margin:0}
.games li{margin:0}
/* The artwork used to run edge to edge, which left the thumbnail welded to the
   card border and the title welded to the thumbnail. The card carries its own
   inset now and the picture gets a radius of its own, so the tile reads as a
   framed cover rather than one solid block. */
.game{display:block;text-decoration:none;color:var(--sand);border:1px solid var(--line);border-radius:var(--r);background:var(--deep);position:relative;padding:10px;transition:border-color .25s,transform .25s,box-shadow .25s}
.game:hover{border-color:var(--c-play);transform:translateY(-4px);box-shadow:var(--sh-lift)}
.game picture{display:block;aspect-ratio:1;background:var(--mid);border-radius:calc(var(--r) - 7px);overflow:hidden}
.game img{width:100%;height:100%;object-fit:cover}
.game .meta{padding:12px 4px 4px}
/* Two lines rather than one: the title is the only thing identifying a game,
   and a single ellipsed line turned 4 of every 10 names into a guess. The
   clamp keeps every card the same height, so the grid rows still line up. */
.game .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:var(--fd);font-size:.92rem;font-weight:700;color:var(--white);line-height:1.28;overflow:hidden;min-height:2.56em}
.game .pv{display:block;font-family:var(--fm);font-size:.68rem;color:var(--dim);margin-top:7px;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The badge is its own component, not a descendant of .game: scoping the look
   to the card meant the same markup on the game page rendered as bare text
   lying on top of the artwork. Only the placing belongs to the context. */
.tagline{position:absolute;top:18px;left:18px;z-index:1;background:rgba(5,32,43,.86);border:1px solid var(--c-reg);color:var(--c-reg);font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-pill)}
.games-empty{padding:var(--s5);text-align:center;color:var(--dim);border:1px dashed var(--ui);border-radius:var(--r)}

/* Studio list — names, generated from the catalogue. It replaced a wall of
   logos: eighteen of the twenty-seven brands shown had no game on the site,
   Evolution supplied the whole live shelf and was missing, and a brand mark
   reads as a partnership badge, which /about promises the site does not carry.
   Names set in the mono face keep the block deliberate rather than plain. */
.studios{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:8px;padding:0;list-style:none;margin:0}
.studios li{margin:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(15,68,89,.35);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.04em;color:var(--sand-2)}
.studios li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--c-play);opacity:.7}

/* ---------- 12. Payments ---------- */
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:0;list-style:none;margin:0}
.pay-grid li{margin:0}
/* Named .pay-chip, not .pay: a bare role word doubles as an eyebrow modifier
   (.snd.rg, .snd.reg, .snd.pay), and the component silently won that clash —
   a caption inside a dialogue came out as a white payment card. */
.pay-chip{display:flex;align-items:center;justify-content:center;height:66px;background:var(--white);border-radius:var(--r-sm);padding:12px 16px;border:1px solid rgba(255,255,255,.14)}
.pay-chip img{max-height:30px;width:auto}
.pay-chip.pay-sq img{max-height:40px}
/* Interac has no asset in the library — drawn as a typographic badge */
.pay-cap{font-family:var(--fm);font-size:var(--t-xs);color:var(--dim);text-align:center;margin-top:8px;letter-spacing:.04em}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:var(--t-sm);vertical-align:top}
th{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--c-play);background:rgba(15,68,89,.5);font-weight:600}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(15,68,89,.28)}
td strong{color:var(--white)}

/* ---------- 13. Accordion / FAQ ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:rgba(10,50,67,.5)}
.acc + .acc{margin-top:10px}
.acc summary{list-style:none;cursor:pointer;padding:18px var(--s3);display:flex;align-items:center;justify-content:space-between;gap:var(--s2);font-family:var(--fd);font-weight:700;color:var(--white);font-size:var(--t-base)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--c-play)}
.acc summary .ic{color:var(--c-play);transition:transform .25s}
.acc[open] summary .ic{transform:rotate(180deg)}
.acc .body{padding:0 var(--s3) var(--s3);color:var(--sand-2);font-size:var(--t-sm)}
.acc .body > :last-child{margin-bottom:0}

/* ---------- 14. Prose (legal pages) ---------- */
.prose{max-width:78ch}
.prose h2{margin:var(--s6) 0 var(--s2);font-size:clamp(1.35rem,2.6vw,1.9rem)}
.prose h3{margin:var(--s4) 0 var(--s1);font-size:var(--t-md);color:var(--c-play)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--sand-2)}
.prose li::marker{color:var(--c-play)}
.prose .upd{font-family:var(--fm);font-size:var(--t-xs);color:var(--dim);letter-spacing:.05em}
.toc{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);background:rgba(10,50,67,.5);margin-bottom:var(--s5)}
.toc h2{margin:0 0 var(--s2);font-size:var(--t-md)}
.toc ol{columns:2;column-gap:var(--s4);margin:0;padding-left:1.2em;font-size:var(--t-sm)}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

.callout{border:1px solid var(--line);border-left:4px solid var(--c-play);border-radius:var(--r-sm);padding:var(--s3);background:rgba(15,68,89,.42);margin:var(--s3) 0}
.callout.rg{border-left-color:var(--c-rg)}
.callout.reg{border-left-color:var(--c-reg)}
.callout > :last-child{margin-bottom:0}
.callout h2,.callout h3{font-size:var(--t-lg);margin-bottom:8px}

/* ---------- 15. Forms ---------- */
.form{max-width:520px}
.fld{margin-bottom:var(--s3)}
.fld label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--white);margin-bottom:7px}
.fld .hint{display:block;font-size:var(--t-xs);color:var(--dim);margin-top:6px;line-height:1.6}
.fld input[type=text],.fld input[type=email],.fld input[type=password],.fld input[type=date],.fld input[type=tel],.fld input[type=number],.fld select{
  width:100%;padding:13px 14px;background:rgba(5,32,43,.7);border:1px solid var(--ui);border-radius:var(--r-sm);
  color:var(--sand);font:400 var(--t-base)/1.4 var(--fb);transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--c-play);box-shadow:0 0 0 3px rgba(47,214,195,.22)}
.fld input::placeholder{color:#7C949E}
.fld input[aria-invalid="true"]{border-color:var(--c-rg)}
.err{display:block;font-size:var(--t-xs);color:var(--c-rg);margin-top:6px;font-weight:600}
.err:empty{display:none}
/* Target size. WCAG 2.2 SC 2.5.8 asks 24x24; the project target is 44x44,
   so controls that sat below it get padding rather than a bigger glyph. */
.pw-toggle{min-width:44px;min-height:44px;padding:0;justify-content:center;margin-left:8px}
.pw-toggle .ic{width:20px;height:20px}
/* Footer and drawer links were 17px tall — inside SC 2.5.8 by the spacing
   exception, but well under the 44px the project asks for. */
.foot li{margin-bottom:0}
.foot li a{display:inline-flex;align-items:center;min-height:44px;padding-block:4px}
.crumbs a{display:inline-flex;align-items:center;min-height:32px}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:var(--s2);font-size:var(--t-sm);color:var(--sand-2)}
.check input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--c-play)}
.check label{font-weight:400;color:var(--sand-2);margin:0}
.steps-bar{display:flex;gap:8px;margin-bottom:var(--s4);padding:0;list-style:none;font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase}
.steps-bar li{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--dim);text-align:center;background:rgba(5,32,43,.5)}
.steps-bar li[aria-current="step"]{border-color:var(--c-play);color:var(--c-play)}
.steps-bar li.done{border-color:var(--c-play);color:var(--sand);background:rgba(47,214,195,.12)}
.fstep[hidden]{display:none}
.ok-panel{text-align:center;padding:var(--s5) var(--s3);border:1px solid var(--c-play);border-radius:var(--r);background:rgba(47,214,195,.08)}
.ok-panel .ic{width:56px;height:56px;color:var(--c-play);margin-bottom:var(--s2)}

/* ---------- 16. Age gate ---------- */
.gate{position:fixed;inset:0;z-index:90;background:rgba(3,18,25,.96);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:var(--s3)}
.gate[hidden]{display:none}
.gate .box{max-width:560px;width:100%;background:linear-gradient(160deg,var(--deep),var(--mid));border:1px solid var(--line);border-radius:var(--r);padding:var(--s5) var(--s4);text-align:center;box-shadow:var(--sh-lift)}
.gate .age-mark{color:var(--c-rg);font-size:1.1rem;margin-bottom:var(--s3)}
.gate h2{font-size:clamp(1.3rem,3vw,1.8rem);margin-bottom:var(--s2)}
.gate p{color:var(--sand-2);font-size:var(--t-sm)}
.gate .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}
.gate .acts .btn{min-width:170px;justify-content:center}
.gate .fine{font-family:var(--fm);font-size:var(--t-xs);color:var(--dim);margin:var(--s3) 0 0;line-height:1.7}

/* ---------- 17. Cookie banner ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(5,32,43,.98);border-top:1px solid var(--line);box-shadow:0 -10px 40px rgba(0,0,0,.45);padding:var(--s3) 0}
.cookie[hidden]{display:none}
.cookie .wrap{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center}
.cookie h2{font-size:var(--t-md);margin-bottom:6px}
.cookie p{font-size:var(--t-sm);color:var(--sand-2);margin:0;max-width:70ch}
.cookie .acts{display:flex;gap:10px;flex-wrap:wrap}
.cookie-prefs{margin-top:var(--s3);border-top:1px solid var(--line);padding-top:var(--s3);grid-column:1/-1}
.cookie-prefs[hidden]{display:none}
.cookie-prefs .row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.cookie-prefs .row:last-child{border-bottom:0}
.cookie-prefs .row input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--c-play)}
.cookie-prefs .row b{display:block;font-size:var(--t-sm)}
.cookie-prefs .row span{display:block;font-size:var(--t-xs);color:var(--dim);line-height:1.6}
.cookie-prefs .row input:disabled{opacity:.6}

/* ---------- 18. Footer ---------- */
.foot{border-top:1px solid var(--line);background:rgba(4,26,35,.9);padding:var(--s7) 0 var(--s4);position:relative;z-index:1}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s5);padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.foot h3{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--c-play);font-weight:600;margin-bottom:var(--s2)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot a{color:var(--sand-2);text-decoration:none;font-size:var(--t-sm)}
.foot a:hover{color:var(--c-play)}
.foot .about p{font-size:var(--t-sm);color:var(--sand-2);max-width:46ch}
/* Wide band for legal data — a narrow fourth column would overflow */
.foot-legal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.foot-legal .blk h4{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:10px}
.foot-legal address{font-style:normal;font-size:var(--t-sm);color:var(--sand-2);line-height:1.8}
.foot-legal address a{display:inline-block;padding-block:5px}
.foot-rg{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.foot-rg .age-mark{color:var(--c-rg);font-size:.95rem}
.foot-rg .txt{flex:1;min-width:260px}
.foot-rg .txt p{font-size:var(--t-sm);color:var(--sand-2);margin:0 0 8px}
.foot-note{padding-top:var(--s4);font-family:var(--fm);font-size:var(--t-xs);line-height:2;color:var(--dim)}
/* The brief prescribes this line verbatim as "19+ | Ontario only | Play
   Responsibly" — rendered case is left alone so a visual audit matches it
   character for character. */
.foot-note .b{color:var(--c-rg);font-weight:700;letter-spacing:.06em}
/* Regulator and help-line marks. Deliberately quiet: they identify a body the
   text already names, so they sit at the weight of a caption rather than
   competing with the brand or reading as an award badge. */
.trust-mark{display:inline-block;height:auto;max-width:100%;opacity:.9}
.foot-reg{padding-top:var(--s3)}
.trust-mark.block{display:block;margin:0 0 var(--s2)}
.trust-mark.cx{display:block;margin:0 0 8px}
.blk .trust-mark{margin-top:2px}


/* ---------- 19. Scroll to top ---------- */
.totop{position:fixed;right:20px;bottom:20px;z-index:60;width:48px;height:48px;border-radius:50%;border:1px solid var(--ui);background:rgba(5,32,43,.92);color:var(--sand);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,border-color .2s,transform .2s}
.totop.on{opacity:1;visibility:visible}
.totop:hover{border-color:var(--c-play);color:var(--c-play);transform:translateY(-3px)}

/* ---------- 20. Reveal (JS-gated) ---------- */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i,0)*70ms)}

/* ---------- 21. Motion ---------- */
@media(prefers-reduced-motion:no-preference){
  .soundings svg{animation:drift 46s ease-in-out infinite alternate}
  .btn-p:hover::after{animation:sheen .8s}
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.06)}}
@keyframes sheen{to{left:150%}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .rv{opacity:1 !important;transform:none !important}
  .step::after{transform:scaleX(1)}
}

/* ---------- 22. Breakpoints ---------- */
@media(max-width:1080px){
  .t-lead,.t-cat{grid-column:span 12}
  .t-reg{grid-column:span 7}
  .t-rg{grid-column:span 5}
  .t-num{grid-column:span 12;flex-direction:row;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
  .g4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:var(--s4)}
  .split.rev > .art{order:0}
  .foot-top{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .foot-top .about{grid-column:1/-1}
}
@media(max-width:860px){
  /* Both navs are hidden at this width, so the three-track grid collapses onto
     the two survivors and the burger lands beside the logo instead of opposite
     it. A flex row pins them to the two edges whatever is hidden. */
  .mast .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
  .nav{display:none}
  .burger{display:inline-flex}
  .logo{text-align:left}
  .g3{grid-template-columns:1fr}
  .cookie .wrap{grid-template-columns:1fr}
  .cookie .acts{width:100%}
  .cookie .acts .btn{flex:1;justify-content:center}
}
@media(max-width:640px){
  :root{--s7:56px;--s6:40px}
  .wrap{width:min(var(--wrap),100% - 28px)}
  .t-reg,.t-rg{grid-column:span 12}
  .t-lead{padding:var(--s3)}
  .g2,.g4{grid-template-columns:1fr}
  /* auto-fill drops to a single column below ~370px, which turns each tile into
     a 277px square and one game per screenful. Two columns is the floor. */
  .games{grid-template-columns:repeat(2,1fr);gap:14px}
  .toc ol{columns:1}
  .foot-top{grid-template-columns:1fr}
  .steps-bar{flex-direction:column}
  .gate .acts .btn{width:100%}
  .totop{right:14px;bottom:14px}
}

/* ============================================================
   23. Logo — the emblem, its intro and its hover
   The mark carries no lettering: the site is identified by its
   domain and by the operator's legal name, never by a trade
   name. What is left is the sounding assembly from the approved
   artwork — the current arc sweeps in, the compass rose lands
   on it. Intro runs once per page load, ~0.9s.

   Everything below is opt-in: the animation classes are added
   by JS only after it initialises, so with JS disabled or
   broken the emblem renders complete and static.
   ============================================================ */
.logo{display:block;text-decoration:none;line-height:0}
.logo .occ{display:block;width:96px;height:auto}
.mast .logo{justify-self:center}

/* One shared origin for every part, so the assembly scales as a unit instead
   of each path pivoting about its own centre. The pixel values are viewBox
   coordinates — the rose centre in the artwork's own system, unchanged by the
   crop build/emblem.js applies. */
.occ .occ-mark,.occ .occ-arc{transform-box:view-box;transform-origin:608px 350px}

@media(prefers-reduced-motion:no-preference){

  /* Phase 1 — the current arrives, 0→620ms */
  .occ--intro .occ-arc{animation:occ-sweep-in 620ms cubic-bezier(.22,.8,.25,1) both}
  /* Phase 2 — the sounding lands on it, 260→810ms */
  .occ--intro .occ-mark{animation:occ-mark 550ms cubic-bezier(.22,.8,.25,1) 260ms both}

  /* Idle — a slow drift in the current line only. Deliberately below the
     threshold where anyone notices the logo is still moving. */
  .occ--idle .occ-arc{animation:occ-drift 9s ease-in-out infinite}

  /* Hover — one sweep, then a single pulse. Never the full intro.
     Desktop pointers only. */
  @media(hover:hover) and (pointer:fine){
    .occ--sweep .occ-arc{animation:occ-sweep-in 520ms cubic-bezier(.22,.8,.25,1) both}
    .occ--sweep .occ-mark{animation:occ-pulse 220ms ease-out 220ms both}
  }
}

/* Travel is in viewBox units: the crop is ~206 wide, so 26 is an eighth of the
   mark — a current entering frame, not a slide across the header. */
@keyframes occ-sweep-in{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes occ-mark{
  0%{opacity:0;transform:scale(.85)}
  46%{opacity:1;transform:scale(1)}
  72%{transform:scale(1.06)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes occ-pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes occ-drift{0%,100%{opacity:.88}50%{opacity:1}}

/* Reduced motion: the sequence is switched off outright, not sped up.
   The mark is simply present in its final state. */
@media(prefers-reduced-motion:reduce){
  .occ--intro,.occ--intro *,.occ--idle *,.occ--sweep *{animation:none !important}
}

/* Footer emblem: static by design — no intro, no idle. */
.foot-logo{display:block;width:104px;max-width:60%;height:auto;margin:0 0 var(--s1)}

@media(max-width:860px){
  .logo .occ{width:84px}
}
@media(max-width:400px){
  .logo .occ{width:76px}
}

/* ============================================================
   24. Account
   ============================================================ */
/* Snapshot row. Declared here rather than inline: an inline grid-template
   outranks every media query, which is exactly how these three cards stayed
   in three columns at 375px and wrapped one character per line. */
.acc-snapshot{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media(max-width:1080px){.acc-snapshot{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.acc-snapshot{grid-template-columns:1fr}}
.acc-figure{font-family:var(--fd);font-size:2.6rem;font-weight:800;color:var(--white);line-height:1;margin:0}
.acc-sub{font-family:var(--fm);font-size:var(--t-xs);color:var(--dim);letter-spacing:.04em;line-height:1.7;margin:6px 0 0}
.acc-list{list-style:none;margin:0 0 var(--s2);padding:0;font-size:var(--t-sm)}
.acc-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);margin:0}
.acc-list li:last-child{border-bottom:0}
.acc-list span{color:var(--dim)}
.acc-list b{color:var(--white);text-align:right}
.acc-tool{display:flex;flex-direction:column}
.acc-tool h3{font-size:var(--t-md);margin:0 0 6px}
.acc-tool .fld{margin-top:var(--s2);margin-bottom:0}
.acc-tool .btn{align-self:flex-start;margin-top:var(--s3)}
/* Confirmation after a control is changed — announced, not just shown. */
.acc-ok{margin:var(--s2) 0 0;padding:10px 12px;border-radius:var(--r-sm);background:rgba(47,214,195,.12);border:1px solid var(--c-play);color:var(--sand);font-size:var(--t-sm)}
.acc-ok[hidden]{display:none}
@media(max-width:640px){
  .acc-figure{font-size:2.1rem}
  .acc-list li{flex-direction:column;gap:2px}
  .acc-list b{text-align:left}
}

/* ============================================================
   25. Registration — four steps
   ============================================================ */
.reg-layout{display:grid;grid-template-columns:230px 1fr;gap:var(--s6);align-items:start}
.reg-aside{position:sticky;top:calc(var(--header-h) + 20px)}
.reg-steps{list-style:none;margin:0 0 var(--s4);padding:0;counter-reset:none}
.reg-steps li{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 6px;border-radius:var(--r-sm);
  border:1px solid transparent;color:var(--dim);font-size:var(--t-sm);font-weight:600;transition:color .2s,background .2s,border-color .2s}
.reg-steps .n{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;opacity:.75}
.reg-steps li[aria-current="step"]{background:rgba(47,214,195,.10);border-color:var(--c-play);color:var(--white)}
.reg-steps li[aria-current="step"] .n{color:var(--c-play);opacity:1}
.reg-steps li.done{color:var(--sand-2)}
.reg-steps li.done .n{color:var(--c-play);opacity:1}
.reg-aside-note{border-top:1px solid var(--line);padding-top:var(--s3);font-size:var(--t-sm);color:var(--sand-2)}
.reg-aside-note .age-mark{color:var(--c-rg);font-size:.8rem;margin-bottom:var(--s2)}

.reg-form{max-width:none}
.reg-form .fstep{border:0;padding:0;margin:0;min-width:0}
.reg-count{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.2em;color:var(--c-play);margin:0 0 6px}
.reg-form h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:8px}
.reg-intro{color:var(--sand-2);font-size:var(--t-sm);max-width:60ch;margin-bottom:var(--s4)}
.req{color:var(--c-rg)}

.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.fld-row .fld{margin-bottom:var(--s3)}
.fld-dob{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:10px}
.dob-set{border:0;padding:0;margin:0 0 var(--s3);min-width:0}
.dob-set legend{padding:0;font-size:var(--t-sm);font-weight:600;color:var(--white);margin-bottom:7px}

/* Country code sits beside the field rather than inside it, so the input keeps
   its own focus ring and the prefix is never mistaken for typed text. */
.tel-group{display:flex;gap:8px}
.tel-prefix{display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--ui);border-radius:var(--r-sm);
  background:rgba(5,32,43,.7);color:var(--sand-2);font-family:var(--fm);font-size:var(--t-sm);flex:0 0 auto}
.tel-group input{flex:1;min-width:0}

.pw-group{display:flex;gap:8px;align-items:stretch}
.pw-group input{flex:1;min-width:0}
.pw-group .pw-toggle{flex:0 0 auto}

.reg-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4);
  border-top:1px solid var(--line);padding-top:var(--s3)}
.reg-alt{margin:0;font-size:var(--t-sm);color:var(--sand-2)}
.reg-foot .btn:only-child{margin-left:auto}

@media(max-width:960px){
  .reg-layout{grid-template-columns:1fr;gap:var(--s4)}
  .reg-aside{position:static}
  /* A horizontal list of four labelled steps cannot fit a phone without being
     clipped, and a clipped label reads as breakage rather than as a scroller.
     The list becomes a four-segment progress track instead; the wording stays
     in the DOM for screen readers, and the form heading already carries the
     visible "01 / 04". */
  .reg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:var(--s4)}
  .reg-steps li{display:block;margin:0;padding:0;height:5px;border-radius:99px;
    background:var(--ui);border:0;font-size:0;overflow:hidden;color:transparent}
  .reg-steps li[aria-current="step"]{background:var(--c-play);border-color:transparent}
  .reg-steps li.done{background:rgba(47,214,195,.45)}
  .reg-steps li .n,.reg-steps li span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* The 19+ / ConnexOntario note is not dropped, only de-duplicated: the
     compliance strip sits above every page, step 04 repeats it in full, and the
     footer carries it again. Repeating it a fourth time above the first field
     would push the form itself below the fold on a phone. */
  .reg-aside-note{display:none}
}
@media(max-width:640px){
  .fld-row{grid-template-columns:1fr}
  .reg-foot{flex-direction:column-reverse;align-items:stretch}
  .reg-foot .btn{justify-content:center}
}

/* ============================================================
   26. Game page and the deposit dialogue
   ============================================================ */
.game-view{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:var(--s5);align-items:start}
/* A grid track is min-content wide by default, so a long word or a wide pair of
   facts below pushes the whole column past the wrapper instead of wrapping. */
.game-view > *{min-width:0}
.game-stage{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--deep)}
.game-stage picture{display:block;aspect-ratio:1;border-radius:calc(var(--r) - 7px);overflow:hidden;background:var(--mid)}
.game-stage img{width:100%;height:100%;object-fit:cover}
.game-stage .tagline{top:20px;left:20px}

.game-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2) var(--s4);margin:0 0 var(--s4)}
.game-facts div{border-top:1px solid var(--line);padding-top:10px}
.game-facts dt{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0}
.game-facts dd{margin:4px 0 0;font-weight:600;color:var(--white)}

.game-play{width:100%;justify-content:center}
.game-note{color:var(--sand-2);font-size:var(--t-sm);margin:var(--s3) 0 0}
/* The RG line is a fixture of the page, not a warning that fires on error, so it
   carries the responsible-gambling role colour at caption weight.

   These icon-plus-text rows are flex, which means EVERY element child becomes its
   own flex item — an inline <a> in the copy splits the sentence into fragments on
   one nowrap line and pushes the page into horizontal scroll. Keep the copy in a
   single <span> so the row is always exactly two items: icon and text. */
.game-rg{display:flex;gap:10px;align-items:flex-start;margin:var(--s4) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--line);color:var(--sand-2);font-size:var(--t-sm)}
.game-rg svg{flex:0 0 auto;width:18px;height:18px;color:var(--c-rg);margin-top:2px}

/* ---------- Dialogue ---------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:var(--s3)}
.modal[hidden]{display:none}
.modal-back{position:absolute;inset:0;background:rgba(2,15,21,.78);backdrop-filter:blur(4px)}
.modal-box{position:relative;width:min(560px,100%);max-height:calc(100vh - 2 * var(--s3));overflow-y:auto;
  background:linear-gradient(160deg,var(--deep),var(--abyss));border:1px solid var(--line-2);
  border-radius:var(--r);padding:var(--s5);box-shadow:var(--sh-lift)}
.modal-x{position:absolute;top:12px;right:12px;width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;background:none;border:1px solid var(--ui);border-radius:var(--r-sm);color:var(--sand);cursor:pointer}
.modal-x:hover{border-color:var(--c-play);color:var(--white)}
.modal-box h2{font-size:clamp(1.4rem,3vw,1.85rem);margin:6px 0 var(--s3)}
.modal-lede{color:var(--sand-2);margin:0 0 var(--s3)}
.modal-lede strong{color:var(--white)}
.modal-list{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:10px}
.modal-list li{display:flex;gap:10px;align-items:flex-start;color:var(--sand-2);font-size:var(--t-sm)}
.modal-list svg{flex:0 0 auto;width:18px;height:18px;color:var(--c-play);margin-top:2px}
.modal-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.modal-dismiss{background:none;border:0;padding:12px 6px;color:var(--sand-2);font:inherit;font-size:var(--t-sm);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.modal-dismiss:hover{color:var(--white)}
.modal-rg{display:flex;gap:10px;align-items:flex-start;margin:var(--s4) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--line);color:var(--dim);font-size:var(--t-xs)}
.modal-rg svg{flex:0 0 auto;width:16px;height:16px;color:var(--c-rg);margin-top:1px}

/* The entrance is decoration, never the thing that makes the box visible.
   `animation: ... both` held the box at the from-frame until a frame arrived,
   so a throttled or backgrounded tab showed a dimmed page and no dialogue at
   all. Without a fill mode the resting state is simply "visible", and the
   motion only plays when the browser is actually painting. It animates transform
   alone for the same reason: Chrome holds the first keyframe while an animation
   is pending a start time, so an opacity fade can leave the dialogue invisible
   behind its own backdrop if that frame is late. A stalled slide is a dialogue
   sitting 10px low; a stalled fade is no dialogue at all. */
@media(prefers-reduced-motion:no-preference){
  .modal:not([hidden]) .modal-box{animation:modal-in .28s ease}
}
@keyframes modal-in{from{transform:translateY(10px)}to{transform:none}}

@media(max-width:860px){
  .game-view{grid-template-columns:1fr;gap:var(--s4)}
  .game-stage{max-width:420px}
}
@media(max-width:640px){
  .modal-box{padding:var(--s4)}
  .modal-acts .btn{flex:1 1 100%;justify-content:center}
  /* Two tracked labels plus their values do not fit a 292px wrapper; the pair
     stretched the grid and put the page into horizontal scroll at 320. */
  .game-facts{grid-template-columns:1fr}
}

/* ---------- Ontario body badges (footer) ----------
   iGaming Ontario and BetGuard replace the AGCO crest: a regulator's coat of
   arms in a trust strip reads as approval it does not give, while these two are
   bodies a player can actually act through. Both marks are dark ink drawn for
   white stock, so each sits on a white plate — the same treatment the payment
   marks get on /payments. .tbadge-mark is the typographic fallback for a body
   whose artwork has not been supplied. */
.foot-reg{display:flex;flex-wrap:wrap;gap:12px;padding-top:var(--s3)}
.tbadge{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(15,68,89,.35);
  text-decoration:none;transition:border-color .2s,background .2s}
.tbadge:hover{border-color:var(--c-play);background:rgba(15,68,89,.6)}
.tbadge-plate{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:40px;padding:0 12px;border-radius:6px;background:#fff}
.tbadge-plate img{display:block;max-width:100%}
.tbadge-mark{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-width:40px;height:26px;padding:0 8px;border-radius:4px;background:var(--c-play);
  color:var(--on-accent);font-family:var(--fm);font-weight:700;font-size:.7rem;letter-spacing:.06em}
.tbadge-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tbadge-txt b{color:var(--white);font-size:var(--t-sm);font-weight:600}
.tbadge-txt i{color:var(--dim);font-size:var(--t-xs);font-style:normal;line-height:1.35}

/* ---------- Item 15: tap targets under 768px ----------
   Sixteen of the thirty-nine links and buttons in the header and the footer
   were shorter than 40px on one axis. The rule sets a floor rather than a size,
   so nothing that is already large changes; inline-flex is what makes
   min-height apply to an inline element at all. */
@media(max-width:768px){
  header a,
  footer a,
  .strip a,
  .cl label,
  .cookie-prefs label,
  .cookie .btn{min-height:44px;display:inline-flex;align-items:center}
  /* Labels wrap two lines of copy, so they align to the top rather than
     centring a paragraph against its checkbox. */
  .cookie-prefs label{align-items:flex-start}
  /* A link set in the middle of a sentence keeps display:inline — boxing one
     to 44px pushes the word onto its own line and tears the sentence in half.
     Vertical padding on an inline element does not change the line box but
     does enlarge the hit area, which is the part that actually matters, so
     these reach the same 44px without touching the typography. */
  footer p a:not(.helpline):not(.btn){min-height:0;display:inline;padding-block:12px}
  /* The strip sets its number in the small mono face, so it needs more padding
     than footer prose to clear 44px. */
  .strip span a{min-height:0;display:inline;padding-block:15px}
}

/* ---------- 21. Server-side feedback ---------- */
/* Every form on the site now posts to the server and can come back with a
   sentence attached, whether or not JavaScript ran. One component renders it,
   so the message a fetch shows and the message a reload shows look identical. */
.notice{margin:0 0 var(--s3);padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--c-play);border-left-width:4px;background:rgba(47,214,195,.12);
  color:var(--sand);font-size:var(--t-sm);line-height:1.5}
.notice.bad{border-color:var(--c-rg);background:rgba(255,122,69,.13)}
.notice[hidden]{display:none}
.notice a{color:inherit}

/* A form wrapping a single button — sign out, launch a game — must not become
   a box in a row of buttons. display:contents hands the button straight to the
   parent's flex or grid layout, so it sits exactly where a link would. */
.inline-form{display:contents}

/* The cashier and the verification uploader share the tool-card shape already
   used by the limit forms, so nothing new is invented for them. */
.acc-figure-sub{font-size:var(--t-sm);color:var(--dim);margin:0}
.file-field input[type=file]{width:100%;font:inherit;color:var(--sand-2);font-size:var(--t-sm)}
.file-field input[type=file]::file-selector-button{font:inherit;font-size:var(--t-sm);
  margin-right:10px;padding:8px 12px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--ui);background:transparent;color:var(--sand)}
.file-field input[type=file]::file-selector-button:hover{border-color:var(--c-play);color:var(--white)}