/* =========================================================================
   BETROUX — PUBLIC PAGES CSS
   File: /assets/css/pages.css
   Shared by every page in /pages/ (how-to-play, about, terms, privacy,
   sponsorship, spam) plus any future public info page.

   WHY THIS FILE REPLACES page.css
   The old page.css read var(--od-bg, ...), var(--od-text, ...) etc. — an
   --od-* token namespace that was never defined anywhere in the project
   (no :root block set it, and it doesn't match the --bt-* tokens the real
   shared header.php defines). Every color always fell back to its
   hardcoded fallback, so the page was permanently stuck in one dark
   palette and never responded to the site's light/dark toggle.

   This file reads the real var(--bt-*, fallback) tokens instead — the
   same ones header.php prints — so when a page includes header.php these
   colors come from there and follow the site's theme automatically. Each
   page can also render without header.php (see the is_file() fallback in
   every page's PHP), so a small local token block below supplies the same
   names with sane dark/light values for that case.

   STRUCTURE, ON PURPOSE, IS SIMPLE
   No hero illustration, no floating decoration, no shine-sweep animation.
   Every page is: a short intro (icon + heading + one paragraph + one or
   two buttons), a couple of plain highlight cards, a list of guide rows,
   and a closing note. That's it — easy to scan, easy to keep in sync
   across pages, and easy on light backgrounds too.
   ========================================================================= */

:root{
    --bt-bg:#07111F; --bt-surface:#0E1B2B; --bt-surface-2:#142438;
    --bt-line:rgba(145,160,181,.16); --bt-line-strong:rgba(145,160,181,.28);
    --bt-text:#F5F7FA; --bt-muted:#91A0B5; --bt-faint:#64748B;
    --bt-green:#20E39A; --bt-green-2:#38EFAC;
    --bt-green-ink:#20E39A; --bt-green-soft:rgba(32,227,154,.13); --bt-green-line:rgba(32,227,154,.30);
    --bt-gold:#F5B942; --bt-gold-soft:rgba(245,185,66,.10); --bt-gold-line:rgba(245,185,66,.26);
    --bt-on-green:#04211A;
    --bt-shadow:0 8px 22px rgba(0,0,0,.24); --bt-shadow-lg:0 16px 38px rgba(0,0,0,.30);
    --bt-r-sm:8px; --bt-r:12px; --bt-r-lg:18px; --bt-r-pill:999px;
    --bt-fast:140ms; --bt-med:220ms; --bt-ease:cubic-bezier(.2,.7,.2,1);
    --bt-bottom-nav:64px;
}
@media (prefers-color-scheme: light){
    :root:not([data-bt-theme="dark"]){
        --bt-bg:#F3F5F8; --bt-surface:#FFFFFF; --bt-surface-2:#F0F3F7;
        --bt-line:rgba(15,23,42,.10); --bt-line-strong:rgba(15,23,42,.18);
        --bt-text:#0F172A; --bt-muted:#5B6B84; --bt-faint:#8493A8;
        --bt-green:#12B878; --bt-green-2:#0EA56A;
        --bt-green-ink:#0E9C67; --bt-green-soft:rgba(18,184,120,.10); --bt-green-line:rgba(18,184,120,.22);
        --bt-gold:#C98A1E; --bt-gold-soft:rgba(201,138,30,.10); --bt-gold-line:rgba(201,138,30,.22);
        --bt-shadow:0 8px 22px rgba(15,23,42,.08); --bt-shadow-lg:0 16px 38px rgba(15,23,42,.10);
    }
}
:root[data-bt-theme="light"]{
    --bt-bg:#F3F5F8; --bt-surface:#FFFFFF; --bt-surface-2:#F0F3F7;
    --bt-line:rgba(15,23,42,.10); --bt-line-strong:rgba(15,23,42,.18);
    --bt-text:#0F172A; --bt-muted:#5B6B84; --bt-faint:#8493A8;
    --bt-green:#12B878; --bt-green-2:#0EA56A;
    --bt-green-ink:#0E9C67; --bt-green-soft:rgba(18,184,120,.10); --bt-green-line:rgba(18,184,120,.22);
    --bt-gold:#C98A1E; --bt-gold-soft:rgba(201,138,30,.10); --bt-gold-line:rgba(201,138,30,.22);
    --bt-shadow:0 8px 22px rgba(15,23,42,.08); --bt-shadow-lg:0 16px 38px rgba(15,23,42,.10);
}

*{ box-sizing:border-box; }
html{ min-height:100%; background:var(--bt-bg); }

body.odpg-body{
    margin:0;
    min-height:100vh;
    background:var(--bt-bg, #07111F);
    color:var(--bt-text, #F5F7FA);
    font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-bottom:calc(var(--bt-bottom-nav, 64px) + 24px);
}
body.odpg-body a{ color:inherit; text-decoration:none; }
body.odpg-body svg{ display:block; }
.odpg-line{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.odpg-fill{ fill:currentColor; }

.odpg-shell{
    width:100%;
    max-width:640px;
    margin:0 auto;
    padding:16px 16px 12px;
}

.odpg-card{
    border:1px solid var(--bt-line, rgba(145,160,181,.16));
    border-radius:var(--bt-r-lg, 18px);
    background:var(--bt-surface, #0E1B2B);
    box-shadow:var(--bt-shadow, 0 8px 22px rgba(0,0,0,.24));
}

/* ---- fallback header/nav, used only when layout/header.php or
   layout/bottom-nav.php are not present (standalone install) ---- */
.odpg-public-header{
    position:sticky; top:0; z-index:80;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    min-height:56px; padding:10px 14px;
    border-bottom:1px solid var(--bt-line, rgba(145,160,181,.16));
    background:var(--bt-surface, #0E1B2B);
}
.odpg-public-brand{ display:flex; align-items:center; gap:9px; min-width:0; }
.odpg-public-brand span{
    display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px;
    border-radius:10px; color:var(--bt-green, #20E39A); background:var(--bt-green-soft, rgba(32,227,154,.13));
}
.odpg-public-brand span svg{ width:19px; height:19px; }
.odpg-public-brand strong{ font-size:14px; font-weight:900; color:var(--bt-text, #F5F7FA); white-space:nowrap; }
.odpg-public-links{ display:flex; align-items:center; gap:7px; }
.odpg-public-links a{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:30px; padding:0 10px; border-radius:var(--bt-r-sm, 8px);
    background:var(--bt-surface-2, #142438); color:var(--bt-muted, #91A0B5);
    font-size:11px; font-weight:800;
}
.odpg-public-links a.is-green{ color:var(--bt-on-green, #04211A); background:linear-gradient(135deg, var(--bt-green, #20E39A), var(--bt-green-2, #38EFAC)); }

.odpg-public-bottom{
    position:fixed; left:50%; bottom:max(10px, env(safe-area-inset-bottom, 0px));
    z-index:90; transform:translateX(-50%);
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2px;
    width:calc(100% - 24px); max-width:420px; padding:6px;
    border-radius:16px; background:var(--bt-surface, #0E1B2B);
    border:1px solid var(--bt-line, rgba(145,160,181,.16));
    box-shadow:var(--bt-shadow-lg, 0 16px 38px rgba(0,0,0,.30));
}
.odpg-public-bottom a{
    display:grid; justify-items:center; gap:3px;
    min-height:44px; padding:6px 3px; border-radius:11px;
    color:var(--bt-muted, #91A0B5); font-size:10px; font-weight:800;
}
.odpg-public-bottom a.active{ color:var(--bt-green-ink, #20E39A); background:var(--bt-green-soft, rgba(32,227,154,.10)); }
.odpg-public-bottom span{ display:grid; place-items:center; width:19px; height:19px; }

/* ---- intro (replaces the old hero-with-orbs) ---- */
.odpg-intro{ padding:20px 18px; }
.odpg-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-bottom:12px;
    border-radius:var(--bt-r, 12px); color:var(--bt-green, #20E39A);
    background:var(--bt-green-soft, rgba(32,227,154,.13));
}
.odpg-badge svg{ width:24px; height:24px; }
.odpg-eyebrow{
    display:inline-block; margin-bottom:6px;
    color:var(--bt-green-ink, #20E39A); font-size:11px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
}
.odpg-intro h1{
    margin:0; color:var(--bt-text, #F5F7FA);
    font-size:clamp(22px, 5vw, 30px); line-height:1.15; font-weight:900; letter-spacing:-.4px;
}
.odpg-intro p{
    margin:10px 0 0; max-width:56ch; color:var(--bt-muted, #91A0B5);
    font-size:13.5px; line-height:1.6; font-weight:600;
}
.odpg-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.odpg-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:42px; padding:0 16px; border-radius:var(--bt-r, 12px);
    font-size:13px; font-weight:800;
    transition:transform var(--bt-fast, 140ms) var(--bt-ease, ease), filter var(--bt-fast, 140ms) var(--bt-ease, ease);
}
.odpg-btn:active{ transform:scale(.97); }
.odpg-btn svg{ width:17px; height:17px; }
.odpg-btn-main{
    color:var(--bt-on-green, #04211A);
    background:linear-gradient(135deg, var(--bt-green, #20E39A), var(--bt-green-2, #38EFAC));
}
.odpg-btn-main:hover{ filter:brightness(1.04); }
.odpg-btn-soft{ color:var(--bt-text, #F5F7FA); background:var(--bt-surface-2, #142438); border:1px solid var(--bt-line, rgba(145,160,181,.16)); }

/* ---- section heading ---- */
.odpg-section{ margin:20px 2px 10px; }
.odpg-section span{
    display:block; color:var(--bt-green-ink, #20E39A);
    font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.odpg-section h2{
    margin:4px 0 0; color:var(--bt-text, #F5F7FA);
    font-size:17px; font-weight:900; letter-spacing:-.2px;
}

/* ---- simple highlight grid ---- */
.odpg-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; }
.odpg-tile{ padding:13px; }
.odpg-tile i{
    display:grid; place-items:center; width:32px; height:32px; margin-bottom:8px;
    border-radius:var(--bt-r-sm, 8px); color:var(--bt-green, #20E39A); background:var(--bt-green-soft, rgba(32,227,154,.10));
}
.odpg-tile i svg{ width:18px; height:18px; }
.odpg-tile strong{ display:block; color:var(--bt-text, #F5F7FA); font-size:13px; font-weight:900; }
.odpg-tile p{ margin:5px 0 0; color:var(--bt-muted, #91A0B5); font-size:11.5px; line-height:1.4; font-weight:600; }

/* ---- guide list (main informational content) ---- */
.odpg-list{ display:grid; gap:9px; }
.odpg-row{ display:flex; align-items:flex-start; gap:12px; padding:14px; }
.odpg-row-icon{
    display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px;
    border-radius:var(--bt-r, 12px); color:var(--bt-green, #20E39A); background:var(--bt-green-soft, rgba(32,227,154,.10));
}
.odpg-row-icon svg{ width:21px; height:21px; }
.odpg-row h3{ margin:0; color:var(--bt-text, #F5F7FA); font-size:14px; font-weight:900; }
.odpg-row p{ margin:6px 0 0; color:var(--bt-muted, #91A0B5); font-size:12.5px; line-height:1.55; font-weight:600; }
.odpg-row strong{ color:var(--bt-green-ink, #20E39A); font-weight:800; }

/* ---- two-column panels (tips / responsible-play) ---- */
.odpg-cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; margin-top:9px; }
.odpg-panel{ padding:14px; }
.odpg-panel-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.odpg-panel-head span{
    display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px;
    border-radius:var(--bt-r-sm, 8px); color:var(--bt-green, #20E39A); background:var(--bt-green-soft, rgba(32,227,154,.10));
}
.odpg-panel-head span svg{ width:17px; height:17px; }
.odpg-panel-head h2{ margin:0; color:var(--bt-text, #F5F7FA); font-size:14px; font-weight:900; }
.odpg-panel p{ margin:0; color:var(--bt-muted, #91A0B5); font-size:12.5px; line-height:1.55; font-weight:600; }
.odpg-check{ display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.odpg-check li{
    position:relative; padding:7px 8px 7px 24px; border-radius:9px;
    background:var(--bt-surface-2, #142438); color:var(--bt-muted, #91A0B5);
    font-size:11.5px; line-height:1.4; font-weight:600;
}
.odpg-check li::before{
    content:""; position:absolute; left:10px; top:50%; width:6px; height:6px;
    border-radius:50%; background:var(--bt-green, #20E39A); transform:translateY(-50%);
}
.odpg-inline-link{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    padding:0 10px; min-height:32px; border-radius:var(--bt-r-sm, 8px);
    color:var(--bt-green-ink, #20E39A); background:var(--bt-green-soft, rgba(32,227,154,.08));
    font-size:12px; font-weight:800;
}
.odpg-inline-link svg{ width:14px; height:14px; }

/* ---- closing note / warning ---- */
.odpg-note{
    display:flex; align-items:flex-start; gap:10px; margin-top:9px; padding:13px;
}
.odpg-note span{
    display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px;
    border-radius:var(--bt-r-sm, 8px); color:var(--bt-gold, #F5B942); background:var(--bt-gold-soft, rgba(245,185,66,.10));
}
.odpg-note span svg{ width:17px; height:17px; }
.odpg-note p{ margin:0; color:var(--bt-muted, #91A0B5); font-size:12px; line-height:1.5; font-weight:600; }

/* ---- sponsorship team cards ---- */
.odpg-team{ padding:13px; }
.odpg-team-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; margin-bottom:9px; border-radius:var(--bt-r-sm, 8px);
    color:var(--bt-on-green, #04211A); background:linear-gradient(135deg, var(--bt-green, #20E39A), var(--bt-green-2, #38EFAC));
    font-size:12px; font-weight:900;
}
.odpg-team-meta{
    display:block; margin-bottom:4px; color:var(--bt-green-ink, #20E39A);
    font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}

@media (min-width: 640px){
    .odpg-shell{ padding-left:22px; padding-right:22px; }
}
@media (max-width: 520px){
    .odpg-grid, .odpg-cols{ grid-template-columns:1fr; }
    .odpg-public-links a:first-child{ display:none; }
}

@media (prefers-reduced-motion: reduce){
    .odpg-btn{ transition:none; }
}

/* =========================================================================
   SPAM / EMAIL-DELIVERY HELP PAGE (pages/spam.php)
   Same tokens and card language as the rest of the site; this page has no
   site header/bottom-nav (it's reached from the registration flow before
   a visitor has an account), just a simple top bar with a back link.
   ========================================================================= */
.odpg-spam-top{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-bottom:14px;
}
.odpg-spam-back{
    display:inline-flex; align-items:center; gap:7px;
    min-height:38px; padding:0 12px; border-radius:var(--bt-r-sm, 8px);
    color:var(--bt-text, #F5F7FA); background:var(--bt-surface-2, #142438);
    border:1px solid var(--bt-line, rgba(145,160,181,.16));
    font-size:12.5px; font-weight:800;
}
.odpg-spam-back svg{ width:16px; height:16px; }
.odpg-steps{ display:grid; gap:9px; margin:0; padding:0; list-style:none; counter-reset:odpg-step; }
.odpg-steps li{
    counter-increment:odpg-step;
    position:relative; padding:12px 12px 12px 44px; border-radius:var(--bt-r, 12px);
    background:var(--bt-surface-2, #142438); border:1px solid var(--bt-line, rgba(145,160,181,.16));
}
.odpg-steps li::before{
    content:counter(odpg-step);
    position:absolute; left:12px; top:12px;
    display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
    background:var(--bt-green-soft, rgba(32,227,154,.14)); color:var(--bt-green-ink, #20E39A);
    font-size:11px; font-weight:900;
}
.odpg-steps strong{ display:block; color:var(--bt-text, #F5F7FA); font-size:13px; font-weight:900; }
.odpg-steps p{ margin:4px 0 0; color:var(--bt-muted, #91A0B5); font-size:12px; line-height:1.5; font-weight:600; }

.odpg-guide-card{
    position:relative; margin-top:9px; border-radius:var(--bt-r-lg, 18px);
    overflow:hidden; background:#fff; border:1px solid var(--bt-line, rgba(145,160,181,.16));
}
.odpg-guide-btn{ display:block; width:100%; border:0; padding:0; margin:0; background:transparent; cursor:zoom-in; }
.odpg-guide-btn img{ display:block; width:100%; height:auto; }
.odpg-guide-tag{
    position:absolute; right:10px; bottom:10px;
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 10px; border-radius:var(--bt-r-pill, 999px);
    background:rgba(15,23,42,.82); color:#fff; font-size:11px; font-weight:800;
    pointer-events:none;
}
.odpg-guide-tag svg{ width:14px; height:14px; color:var(--bt-green, #20E39A); }

.odpg-modal{
    position:fixed; inset:0; z-index:1000; display:none;
    align-items:center; justify-content:center; padding:16px;
    background:rgba(5,9,8,.9);
}
.odpg-modal.show{ display:flex; }
.odpg-modal-inner{
    position:relative; width:min(96vw, 900px); max-height:92vh;
    border-radius:var(--bt-r-lg, 18px); overflow:auto; background:#fff;
}
.odpg-modal-inner img{ display:block; width:100%; height:auto; }
.odpg-modal-close{
    position:absolute; top:10px; right:10px; z-index:3;
    width:38px; height:38px; border:0; border-radius:var(--bt-r-sm, 8px);
    background:rgba(15,23,42,.82); color:#fff; display:grid; place-items:center; cursor:pointer;
}
.odpg-modal-close svg{ width:18px; height:18px; }
body.odpg-modal-open{ overflow:hidden; }