/* Dragonia Canada satellite - shared stylesheet.
   Palette taken from the official Dragonia CA site: plum #1E1822, coral #F86858, antique gold buttons, warm grey text. */
:root {
  --bg: #1e1822;
  --bg-deep: #17121b;
  --panel: #292230;
  --panel-2: #332a3b;
  --line: #4a3d52;
  --line-soft: #3a3042;
  --text: #ccc7cc;
  --text-dim: #9a919f;
  --white: #fff;
  --coral: #f86858;
  --coral-dark: #d9493a;
  --gold-1: #f9d77a;
  --gold-2: #e0a63a;
  --gold-3: #b9771d;
  --gold-text: #efccab;
  --green: #70b01f;
  --radius: 8px;
  --radius-lg: 14px;
  --maxw: 1180px;
  --font-display: "Oswald", "Bebas Neue", "Arial Narrow", "Roboto Condensed", Impact, "Haettenschweiler", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-text); text-decoration: underline; text-decoration-color: rgba(239, 204, 171, .4); text-underline-offset: 3px; }
a:hover { color: var(--gold-1); }

h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--white); line-height: 1.15; margin: 0 0 .6em; font-weight: 700; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); text-transform: uppercase; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); text-transform: uppercase; color: var(--gold-text); }
h4 { font-size: 1.15rem; color: var(--gold-text); }
h5 { font-size: 1rem; color: var(--text); letter-spacing: .04em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(30, 24, 34, .98); border-bottom: 2px solid var(--line); }
.site-header .container { max-width: none; padding: 0 22px 0 18px; }
.side-tile { padding-right: 40px; }
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 38px; width: auto; }
.header-cta { display: flex; gap: 10px; flex: none; margin-left: auto; }

/* ---------- left sidebar menu (as on the official site) ---------- */
:root { --side-w: 248px; --header-h: 68px; }
.main-nav { position: fixed; top: var(--header-h); left: 0; bottom: 0; width: var(--side-w); z-index: 40; overflow-y: auto; background: var(--bg-deep); border-right: 2px solid var(--line-soft); padding: 14px 12px 24px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.side-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.side-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 82px; padding: 8px 8px 8px 10px; border-radius: 8px; background: linear-gradient(160deg, #3a2f42, #2a2230); border: 2px solid var(--line); text-decoration: none; color: var(--white); font-family: var(--font-display); text-transform: uppercase; font-size: .78rem; line-height: 1.1; overflow: hidden; }
.side-tile img { position: absolute; right: -6px; top: -6px; width: 58px; height: 58px; object-fit: contain; }
.side-tile:hover { border-color: var(--gold-2); color: var(--gold-1); }
.side-group { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.side-group:first-of-type { border-top: 0; }
.side-title { margin: 6px 10px 4px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--coral); }
.main-nav .side-link { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 8px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; text-decoration: none; color: var(--text-dim); }
.main-nav .side-link:hover { color: var(--white); background: var(--panel); }
.main-nav .side-link[aria-current="page"] { color: var(--white); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--coral); }
.side-link .tag { margin-left: auto; font: 700 .68rem/1 var(--font-body); text-transform: none; background: #ffe600; color: #222; padding: 3px 7px; border-radius: 999px; }
.ni { flex: none; display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ni-gift { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E"); }
.ni-target { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z'/%3E%3C/svg%3E"); }
.ni-trophy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E"); }
.ni-diamond { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5L2 9l10 12L22 9l-3-6zM9.62 8l1.5-3h1.76l1.5 3H9.62zM11 10v6.68L5.44 10H11zm2 0h5.56L13 16.68V10zm6.26-2h-2.65l-1.5-3h2.65l1.5 3zM6.24 5h2.65l-1.5 3H4.74l1.5-3z'/%3E%3C/svg%3E"); }
.ni-dice { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7.5 18c-.83 0-1.5-.67-1.5-1.5S6.67 15 7.5 15s1.5.67 1.5 1.5S8.33 18 7.5 18zm0-9C6.67 9 6 8.33 6 7.5S6.67 6 7.5 6 9 6.67 9 7.5 8.33 9 7.5 9zm4.5 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm0-9c-.83 0-1.5-.67-1.5-1.5S15.67 6 16.5 6s1.5.67 1.5 1.5S17.33 9 16.5 9z'/%3E%3C/svg%3E"); }
.ni-tv { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 6h-7.59l3.29-3.29L16 2l-4 4-4-4-.71.71L10.59 6H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 14H3V8h18v12zM9 10v8l7-4z'/%3E%3C/svg%3E"); }
.ni-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); }
.ni-flag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z'/%3E%3C/svg%3E"); }
.ni-bolt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E"); }
.ni-pad { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.5-1.5S18.67 9 19.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); }
.ni-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); }
.ni-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E"); }
.ni-useradd { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); }
.ni-login { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z'/%3E%3C/svg%3E"); }
.ni-wallet { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); }
.ni-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E"); }

.ni-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E"); }
.ni-cookie { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.95 10.99c-1.79-.03-3.7-1.95-2.99-4.59-3.07.8-5.01-2.07-4.19-4.35C7.15.52 2 5.66 2 12c0 5.52 4.48 10 10 10 6.35 0 11.57-5.16 11.95-11.01zM8.5 15c-.83 0-1.5-.67-1.5-1.5S7.67 12 8.5 12s1.5.67 1.5 1.5S9.33 15 8.5 15zM10 9c-.83 0-1.5-.67-1.5-1.5S9.17 6 10 6s1.5.67 1.5 1.5S10.83 9 10 9zm5.5 8c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); }
.ni-doc { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); }
.section.showcase-first { padding: 22px 0; }
.section.showcase-slots { padding: 22px 0 6px; }
.section.showcase-row { padding: 14px 0 6px; }
.showcase-slots .showcase-head, .showcase-row .showcase-head { margin-bottom: 12px; }
.showcase-slots h2, .showcase-row h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

/* content sits to the right of the fixed sidebar */
body > main, body > .site-footer { margin-left: var(--side-w); }
.nav-toggle { display: none; background: var(--panel); border: 2px solid var(--line); color: var(--white); width: 44px; height: 44px; border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; margin-left: auto; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; content: ""; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 1.05rem; line-height: 1; padding: 14px 26px; border-radius: 6px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.btn--gold { background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%); color: #3a2208; border-color: #f4cf7a; box-shadow: 0 3px 0 #7a4a0e, 0 8px 18px rgba(224, 166, 58, .25); }
.btn--gold:hover { color: #3a2208; }
.btn--outline { background: linear-gradient(180deg, #3a2f42, #2a2230); color: var(--gold-text); border-color: #6b5a74; box-shadow: 0 2px 0 #14101a; }
.btn--outline:hover { color: var(--white); }
.btn--sm { padding: 10px 18px; font-size: .95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.2em; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 40px 0 32px; background: transparent; }
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 span { color: var(--coral); }
.hero p { font-size: 1.1rem; max-width: 60ch; }
.hero__media img { width: 100%; max-height: 460px; object-fit: contain; filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .55)); }
.badge { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--gold-1); background: rgba(224, 166, 58, .12); border: 1px solid rgba(224, 166, 58, .5); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }

/* ---------- sections / blocks ---------- */
main { display: block; }
.section { padding: 44px 0; }
.section--alt { background: transparent; }
.block { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
.block > *, .hero__inner > *, .pros-cons > *, .footer-grid > * { min-width: 0; }
.block__body, .subsection, .card { overflow-wrap: break-word; }
.block--reverse .block__media { order: -1; }
.block--wide { grid-template-columns: 1fr; }
.block__media img { width: 100%; border-radius: var(--radius-lg); border: 2px solid var(--line); box-shadow: 0 14px 30px rgba(0, 0, 0, .4); background: var(--panel); }
.block__media img.no-frame { border: 0; box-shadow: none; background: none; border-radius: 0; }
.subsection { margin-top: 34px; padding: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.subsection > h3, .subsection .block__body > h3 { margin-top: 0; }
.subsection + .subsection { margin-top: 20px; }
.prose { max-width: 860px; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: .97rem; }
th, td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
thead th { background: var(--panel-2); color: var(--gold-text); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { color: var(--white); font-weight: 600; width: 34%; background: rgba(255, 255, 255, .02); }
tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }

/* ---------- pros / cons ---------- */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.pros, .cons { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; }
.pros { border-top: 4px solid var(--green); }
.cons { border-top: 4px solid var(--coral); }
.pros h3, .cons h3 { margin-top: 0; }
.pros ul, .cons ul { list-style: none; padding: 0; margin: 0; }
.pros li, .cons li { position: relative; padding-left: 28px; }
.pros li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.cons li::before { content: "!"; position: absolute; left: 4px; color: var(--coral); font-weight: 700; }

/* ---------- how-to steps ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.2em 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 16px 70px; margin: 0; }
.steps li::before { content: counter(step); position: absolute; left: 16px; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); color: #3a2208; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.steps strong { color: var(--white); display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; }
.step-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 22px; align-items: start; }
.step-shots figure { margin: 0; text-align: center; }
.step-shots img { border-radius: 22px; border: 5px solid #0e0b12; box-shadow: 0 0 0 2px var(--line), 0 12px 24px rgba(0, 0, 0, .45); margin: 0 auto; max-height: 420px; width: auto; }
.step-shots figcaption { font-size: .85rem; color: var(--text-dim); margin-top: 8px; }

/* ---------- screenshots gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 22px; }
.gallery img { border-radius: var(--radius); border: 2px solid var(--line); background: var(--panel); width: 100%; }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: .85rem; color: var(--text-dim); margin-top: 6px; }

/* ---------- misc components ---------- */
.callout { background: linear-gradient(90deg, rgba(248, 104, 88, .14), rgba(224, 166, 58, .08)); border: 1px solid rgba(248, 104, 88, .5); border-left: 5px solid var(--coral); border-radius: var(--radius); padding: 18px 22px; margin: 1.4em 0; }
.callout p:last-child { margin-bottom: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; margin: 1.4em 0 .4em; }
.cards:has(> .card:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; margin-bottom: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.card h3, .card h4 { margin: 0 0 10px; }
.card > p { margin: 0 0 12px; }
.card > ul { margin: 0 0 16px; }
.card .btn-row { margin-top: auto; padding-top: 4px; }
/* ALIGNMENT RULE: titles/captions in a row share one height; 1-line and 2-line titles are centred horizontally and vertically */
.card > h3, .card > h4, .pros > h3, .cons > h3 { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.4em; }
.game-grid .game-card { display: flex; flex-direction: column; }
.game-grid .game-card span, .sport-grid .sport-card span, .step-shots figcaption { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.6em; }
.game-grid .game-card span { margin-top: 8px; }
.sport-grid .sport-card span { min-height: 3.1em; padding: 6px 6px; line-height: 1.15; }
.step-shots figure { display: flex; flex-direction: column; justify-content: flex-start; }
/* h3 / text / list / button sit on shared lines across a row of cards */
@supports (grid-template-rows: subgrid) {
  .cards > .card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
  .cards > .card .btn-row { margin-top: 0; align-self: end; }
}
@media (max-width: 900px) { .cards:has(> .card:nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards:has(> .card:nth-child(6):last-child) { grid-template-columns: 1fr; } }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 20px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; color: var(--white); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--gold-1); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 20px 16px; }
.breadcrumbs { font-size: .88rem; color: var(--text-dim); margin-bottom: 14px; }
.breadcrumbs a { color: var(--text-dim); }
.toc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 22px; margin: 0 0 28px; }
.toc ol { margin: 0; columns: 2; column-gap: 30px; }
.legal-meta { color: var(--text-dim); font-size: .9rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-deep); border-top: 2px solid var(--line); padding: 44px 0 26px; margin-top: 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.footer-grid h2 { font-size: 1.05rem; color: var(--gold-text); margin-bottom: .8em; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .5em; }
.footer-grid a { color: var(--text-dim); text-decoration: none; font-size: .95rem; }
.footer-grid a:hover { color: var(--white); }
.footer-brand img { height: 34px; width: auto; margin-bottom: 14px; }
.footer-brand p { font-size: .9rem; color: var(--text-dim); }
.footer-legal { border-top: 1px solid var(--line-soft); margin-top: 30px; padding-top: 20px; font-size: .85rem; color: var(--text-dim); }
.age-badge { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--coral); color: var(--coral); font-family: var(--font-display); font-weight: 700; margin-right: 10px; vertical-align: middle; }

/* ---------- cookie banner ---------- */
.cookie-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; width: min(640px, calc(100% - 24px)); background: #2a2230; border: 2px solid var(--line); border-radius: 10px; padding: 12px 16px; display: flex; gap: 14px; align-items: center; font-size: .88rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.cookie-bar[hidden] { display: none; }

/* ---------- showcase: banners, bonus cards, slots, jackpot, sports ---------- */
.showcase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.showcase-head h2 { margin: 0; }
.showcase-head a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--gold-1); text-decoration: none; white-space: nowrap; }
.banner-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 2px solid var(--line); background: var(--panel); }
.banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.banner-track::-webkit-scrollbar { display: none; }
.banner-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1200 / 337; min-height: 190px; }
.banner-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 14, 26, .78) 0%, rgba(20, 14, 26, .35) 45%, transparent 70%); }
.banner-slide__body { position: absolute; z-index: 2; left: 6%; top: 50%; transform: translateY(-50%); max-width: 44%; text-align: center; }
.banner-slide__body .badge { margin-bottom: 8px; }
.banner-slide__title { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.15rem, 2.6vw, 2.2rem); line-height: 1.1; color: var(--white); text-shadow: 0 2px 8px rgba(0, 0, 0, .7); margin-bottom: 12px; }
.banner-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 8px; border: 2px solid #6b5a74; background: rgba(30, 24, 34, .85); color: var(--white); font-size: 1.3rem; cursor: pointer; }
.banner-arrow:hover { border-color: var(--gold-2); color: var(--gold-1); }
.banner-arrow--prev { left: 10px; }
.banner-arrow--next { right: 10px; }
.banner-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 8px; }
.banner-dots button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 2px solid var(--gold-text); background: transparent; cursor: pointer; }
.banner-dots button.is-active { background: var(--gold-1); border-color: var(--gold-1); }
.bonus-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 18px; }
.bonus-card { display: flex; flex-direction: column; gap: 6px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.bonus-card .ni { width: 30px; height: 30px; color: var(--gold-1); }
.bonus-card h3 { margin: 4px 0 0; font-size: 1.15rem; }
.bonus-card p { margin: 0; font-size: .92rem; flex: 1; }
.bonus-card .btn { margin-top: 10px; align-self: flex-start; }
.game-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.game-card { display: block; text-decoration: none; color: var(--text); }
.game-card img { width: 100%; aspect-ratio: 226 / 338; object-fit: cover; border-radius: 10px; border: 2px solid #5d4d68; box-shadow: 0 8px 16px rgba(0, 0, 0, .45); transition: transform .18s, border-color .18s; background: var(--panel); }
.game-card:hover img { transform: translateY(-4px); border-color: var(--gold-2); }
.game-card span { display: block; margin-top: 8px; font-size: .82rem; line-height: 1.25; color: var(--text-dim); text-align: center; }
.jackpot { display: flex; flex-direction: column; gap: 14px; }
.jackpot__panel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 16px 22px; border-radius: 12px; border: 2px solid var(--gold-3); background: radial-gradient(circle at 50% 0%, rgba(248, 104, 88, .35), transparent 60%), linear-gradient(180deg, #2c2035, #1a1320); }
.jackpot__panel h3 { margin: 0; font-size: 1.6rem; color: var(--gold-1); }
.jackpot__panel p { margin: 0; font-size: .92rem; flex: 1 1 260px; }
.jackpot__tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.jackpot__tiers span { font: 700 .72rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--gold-3); color: var(--gold-text); }
.sport-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.sport-card span { font-size: .85rem; padding: 9px 4px; }
.sport-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 193 / 292; border-radius: 12px; border: 3px solid #766a82; background: radial-gradient(circle at 50% 28%, #4b3a3a 0%, #1d171f 70%); overflow: hidden; text-decoration: none; transition: transform .18s, border-color .18s; }
.sport-card:hover { transform: translateY(-4px); border-color: var(--gold-2); }
.sport-card img { position: absolute; left: 6%; right: 6%; top: 4%; width: 88%; height: 76%; object-fit: contain; object-position: center bottom; }
.sport-card span { position: relative; padding: 10px 6px; text-align: center; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: .92rem; color: var(--white); background: linear-gradient(180deg, rgba(60, 50, 70, .2), #2b2333); border-top: 2px solid #766a82; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  body > main, body > .site-footer { margin-left: 0; }
  .nav-toggle { display: inline-flex; order: -1; margin-left: 0; }
  .main-nav { width: min(300px, 86vw); transform: translateX(-105%); transition: transform .25s ease; box-shadow: none; }
  .main-nav.is-open { transform: translateX(0); box-shadow: 8px 0 30px rgba(0, 0, 0, .55); }
  .site-header__inner { gap: 12px; }
  .hero__inner, .block { grid-template-columns: 1fr; gap: 26px; }
  .block--reverse .block__media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jackpot .game-grid, .sport-grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; }
  .jackpot .game-card, .sport-card { flex: 0 0 132px; scroll-snap-align: start; }
  .banner-slide__body { max-width: 62%; left: 5%; }
  .banner-slide { aspect-ratio: 16 / 7; }
}
@media (max-width: 640px) {
  .banner-slide { aspect-ratio: 4 / 3; }
  .banner-slide > img { object-position: 70% center; }
  .banner-slide__body { max-width: 78%; }
  .banner-arrow { display: none; }
  .game-grid { gap: 10px; }
  .jackpot .game-card, .sport-card { flex-basis: 112px; }
  .site-header__inner { gap: 10px; }
  .header-cta .btn { padding: 9px 12px; font-size: .85rem; }
  .header-cta .btn--outline { display: none; }
  .brand img { height: 28px; }
  .nav-toggle { flex: none; width: 42px; height: 42px; }
  .header-cta { margin-left: auto; }
  .nav-toggle { margin-left: 0; }
  .section { padding: 32px 0; }
  .hero { padding: 36px 0 28px; }
  .pros-cons { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .steps li { padding-left: 62px; }
  .subsection { padding: 18px; }
  .btn { white-space: normal; text-align: center; }
  .cookie-bar { flex-direction: column; align-items: stretch; }
}