/* ============================================================
   Impulse88 — "Stadium Night"
   Source of truth: Claude Design project "Impulse88 Desktop.dc.html"
                    and "Impulse88 Mobile.dc.html".

   Loaded AFTER site.css so it wins the cascade. It targets the
   markup classes this solution already ships (.blue-container,
   .menubar, .selectbar .bt, .menu-bar, .game-selection, .wallet,
   .category-picker, .amount-bt-container, .table-yellow, …) so
   the whole site reskins without per-view markup surgery.

   Desktop rules are the 1280px artboards; the @media (max-width:767px)
   blocks are the 390x844 artboards.

   Palette replaces the legacy gold-on-navy (#dcc639 / #ead832 on
   #001326 / #00457c). To keep the gold instead, override the
   --imp-* variables below — nothing else references raw hex.
   ============================================================ */

/* ============================================================
   0. First paint + cross-document view transitions
   ============================================================ */

/* Kills the white flash between pages. body carries the background further
   down, but body is only painted once this stylesheet has parsed — before
   that the browser paints html, which had no background set anywhere in the
   project (site.css:246 only sets font-size), so it fell back to white.
   Value is the same #0a0f14 as --imp-bg below; written literally because this
   rule has to hold even if the custom property block is ever moved.
   color-scheme tells the browser the UA surfaces — scrollbars, form controls,
   the canvas behind the page — are dark, which stops those flashing white too. */
html {
    background-color: #0a0f14;
    color-scheme: dark;
}

/* Cross-document view transitions.

   @view-transition has to sit at the top level of the stylesheet — inside a
   selector it is ignored. Inside a conditional group rule like @media it IS
   valid, which is exactly how the reduced-motion opt-out below works.

   The rules must also be present on BOTH the page being left and the page
   being entered, or nothing animates. That is why they live here: every
   front-end layout chains into _Layout.cshtml, which loads this file, so both
   ends of any navigation are covered. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

:root {
    --imp-bg: #0a0f14;
    --imp-bg-2: #0d151c;
    --imp-surface: #0f161d;
    --imp-surface-2: #12191f;
    --imp-surface-3: #14202a;
    --imp-line: #1c2731;
    --imp-line-2: #2c3a47;
    --imp-lime: #c8ff00;
    --imp-lime-hi: #d8ff3d;
    --imp-red: #e63946;
    /* Broadcast red, sampled from wwwroot/images/live.gif (pure #ff0000). Its own
       token because --imp-red above is the system's alert colour — it carries the
       caught state, error modals and rejected statuses, and those should stay the
       softer #e63946 rather than all shift to a saturated red. */
    --imp-live: #ff0000;
    --imp-amber: #e6a23a;
    --imp-text: #ffffff;
    --imp-text-2: #8ea3b5;
    --imp-text-3: #63788a;
    --imp-text-4: #4d6273;
    --imp-cut: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    --imp-sans: 'Archivo', system-ui, -apple-system, sans-serif;
    --imp-cond: 'Barlow Condensed', 'Archivo', sans-serif;
    /* transaction reference numbers only — a fixed advance keeps a column of
       IDs from wobbling under the proportional Archivo digits */
    --imp-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
}

/* ============================================================
   1. Type + ground
   ============================================================ */

body {
    background: var(--imp-bg) !important;
    color: var(--imp-text);
    font-family: var(--imp-sans);
}

h1, h2, h3, h4, .imp-h {
    font-family: var(--imp-sans);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--imp-text);
}

/* Bootstrap styles the .h1-.h6 CLASSES too, at font-weight 500, and a class
   beats the element selector above. A heading written as <h1 class="h2"> to
   keep an older size therefore came out light — the register and activation
   titles both did. Same treatment whichever way the heading is written. */
.h1, .h2, .h3, .h4 {
    font-family: var(--imp-sans);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--imp-text);
}

a { color: var(--imp-lime); }
a:hover { color: var(--imp-lime-hi); text-decoration: none; }

hr { border-color: var(--imp-line) !important; }

.imp-num { font-variant-numeric: tabular-nums; }

/* condensed uppercase micro-labels — the design's workhorse label style */
.imp-label,
.input-label,
.label-title,
.pop-header,
.blue-container-header,
.blue-container-label {
    font-family: var(--imp-cond);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--imp-text-3);
}

.pop-header {
    color: var(--imp-text) !important;
    font-family: var(--imp-sans);
    font-weight: 800;
    letter-spacing: -.03em;
    text-transform: none;
    font-size: 20px;
}

/* Help, Leaderboard and Special Reward used to be one <a class="pop-header">
   holding the arrow and the title text, which left those pages with no
   heading at all. The strip is now a div with the arrow link, an <h1> and the
   invisible spacer as its three flex items — the same three the old text
   node made — so the layout is unchanged. The h1 inherits the strip's font
   and drops the browser's default margin so the bar does not grow. */
.pop-header h1 { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; }
.pop-header a { color: inherit; }

.primary-text, .color-main, .main-color { color: var(--imp-lime) !important; }
.primary-bg, .color-main-bg { background-color: var(--imp-lime) !important; }
.text-black { color: var(--imp-bg) !important; }

/* kill the legacy artwork grounds */
.main-bg {
    background-image: none !important;
    background: radial-gradient(120% 60% at 50% 0%, #16232e, var(--imp-bg)) !important;
}

.background-grey, .background-black, .background-lightblue { background-color: var(--imp-surface) !important; }

/* ============================================================
   2. The shell — header, nav, wallet, footer, mobile tab bar
      Desktop = design screen 03. Mobile = design screen M3.
   ============================================================ */

html, body { height: 100%; }

.imp-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* survives mobile browser chrome */
    background: var(--imp-bg);
}

.imp-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--imp-surface);
    border-bottom: 2px solid var(--imp-line);
}

.imp-head-left { display: flex; align-items: stretch; min-width: 0; }

/* ---- brand mark: "Slipstream" (LOGO.md, design card 2a) -------------------
   A WebP image, not CSS — see Views/Shared/_Logo.cshtml. Rendered at 4x from
   the spec's measurements, so all this needs to do is size the box. The intrinsic
   width/height attributes on the img reserve the space; these rules only keep it
   from being stretched by inherited img rules elsewhere in the sheet. */

.imp-logo { display: block; flex: none; max-width: 100%; height: auto; }

/* full lockup — login, register, splash. align-self keeps it hard left in the
   auth columns, which are stretch-aligned flex containers. */
.imp-logo-full { align-self: flex-start; }

/* the header lockup is wrapped in a link; make it a flex item, not inline text,
   so it centres in .imp-head-left rather than sitting on a baseline */
.imp-logo-link { display: flex; align-items: center; flex: none; padding: 0 26px; text-decoration: none; }
.imp-logo-link:hover .imp-logo { opacity: .85; }

/* the header no longer gets its height from the old lozenge's padding */
.imp-head { min-height: 62px; }

.imp-nav { display: flex; align-items: center; gap: 22px; padding: 0 26px; overflow: hidden; }

.imp-nav a {
    font: 700 14px/1 var(--imp-cond);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--imp-text-3);
    white-space: nowrap;
}

.imp-nav a.on, .imp-nav a:hover { color: var(--imp-lime); }

.imp-head-right { display: flex; align-items: center; gap: 12px; padding: 0 22px; }

.imp-wallet { text-align: right; }
.imp-wallet-label { font: 600 11px/1 var(--imp-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--imp-text-3); }

.imp-wallet-amount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    font: 800 20px/1.2 var(--imp-sans);
    color: var(--imp-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.refresh { font-size: 13px; color: var(--imp-text-3); cursor: pointer; }
.refresh:hover { color: var(--imp-lime); }

.imp-head-plus { display: none; }

.imp-avatar {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 99px;
    border: 0;
    background: var(--imp-line);
    display: grid;
    place-items: center;
    font: 700 13px/1 var(--imp-cond);
    letter-spacing: .06em;
    color: var(--imp-text-2);
    cursor: pointer;
}

.imp-avatar:hover { background: var(--imp-line-2); color: var(--imp-lime); }
.imp-avatar::after { display: none; }

/* Live chat disc in the header (desktop only; the mobile tab bar has chat).
   44px lime circle, a slow pulse ring behind it, an unread badge on the
   corner. It is a link to /Home/LiveChat and sits in .imp-head-right's flex
   row, so it takes the row's 12px gap like everything else. Colours are the
   spec's own, kept local so they can be retuned in one place. The disc is a
   ::before so the ring (z-index -1 inside the isolated context) really is
   behind it rather than painted over its face. */
.imp-head-chat {
    --chat-lime: #c9f230;
    --chat-ink: #0c0d0f;
    --chat-off: #24282c;
    --chat-off-ink: #4b5257;
    --chat-badge: #ff3b4e;
    position: relative;
    isolation: isolate;
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--chat-ink);
    text-decoration: none;
    cursor: pointer;
    transition: filter 150ms ease;
}

.imp-head-chat::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--chat-lime);
}

.imp-head-chat:hover { filter: brightness(1.12); color: var(--chat-ink); }

.imp-head-chat-icon {
    position: relative;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.imp-head-chat-pulse {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--chat-lime);
    pointer-events: none;
    animation: imp-chat-pulse 2.6s ease-out infinite;
}

@keyframes imp-chat-pulse {
    0%, 100% { opacity: .35; transform: scale(1); }
    50%      { opacity: 0;   transform: scale(1.9); }
}

.imp-head-chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--chat-badge);
    color: #fff;
    font: 700 10px/17px var(--imp-mono);
    text-align: center;
    white-space: nowrap;
}

/* Offline: greyed, out of the tab order (script sets tabindex/aria-disabled),
   no pulse, no click. */
.imp-head-chat[data-online="false"] { color: var(--chat-off-ink); pointer-events: none; }
.imp-head-chat[data-online="false"]::before { background: var(--chat-off); }
.imp-head-chat[data-online="false"] .imp-head-chat-pulse { display: none; }

/* a permanent pulse is exactly what this setting is for */
@media (prefers-reduced-motion: reduce) {
    .imp-head-chat-pulse { animation: none; opacity: 0; }
}

.imp-menu {
    background: var(--imp-surface);
    border: 1px solid var(--imp-line-2);
    border-radius: 0;
    padding: 6px 0;
    min-width: 210px;
    /* Above the live-chat widget. Bootstrap gives a dropdown z-index 1000;
       the chat widget (cs-support/script.js) is position:fixed at 9999, with
       its launcher at 9998 and unread badge at 9999. On /Home/LiveChat the
       widget is fitted over the whole page region, so the account menu opened
       from the header dropped behind it and showed only its top edge. The
       header is not a stacking context (no z-index of its own), so this value
       competes directly with the widget's. */
    z-index: 10010;
}

/* The language options are onclick-only anchors with no href, and Bootstrap's
   `a:not([href]):not([tabindex]){color:inherit}` (specificity 0,3,1) outranks a
   plain `.imp-menu .dropdown-item` (0,2,0) — so they inherited a dim colour and
   were barely readable. Every rule below is duplicated with that selector to
   win, and the items sit at full --imp-text rather than the muted --imp-text-2. */
.imp-menu .dropdown-item,
.imp-menu a.dropdown-item:not([href]):not([tabindex]) {
    color: var(--imp-text);
    font: 400 14px/1 var(--imp-sans);
    padding: 11px 16px;
    cursor: pointer;
}

.imp-menu .dropdown-item:hover,
.imp-menu a.dropdown-item:not([href]):not([tabindex]):hover,
.imp-menu a.dropdown-item:not([href]):not([tabindex]):focus {
    background: var(--imp-surface-2);
    color: var(--imp-lime);
}

.imp-menu .dropdown-item.on,
.imp-menu a.dropdown-item.on:not([href]):not([tabindex]) { color: var(--imp-lime); }
.imp-menu .dropdown-divider { border-color: var(--imp-line); }
.imp-menu-head { padding: 9px 16px 5px; font: 700 10px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-text-4); }
.imp-menu-out { color: var(--imp-red) !important; }
.imp-menu-out:hover { color: var(--imp-red) !important; }

.imp-main { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.imp-main-inner { flex: 1; width: 100%; }

.imp-tabs { display: none; }

@media only screen and (max-width: 767px) {

    .imp-head { padding: 12px 18px; gap: 14px; }   /* air between the logo and the wallet when the logo has to shrink */
    .imp-head-left { align-items: center; }
    /* .imp-head-transfer needs the extra class: the ghost-button rule further
       down the file sets `display: inline-block` at the same specificity, and
       later wins — so this hide was being ignored and the button stayed
       visible on mobile alongside the mobile-only + button. */
    .imp-nav, .imp-head-deposit { display: none; }
    .imp-head-right .imp-head-transfer,
    .imp-head-right .imp-head-deposit { display: none; }

    /* header logo: its spec size while there is room, smaller when there is
       not. The wallet amount on the right grows with the balance (a five- or
       six-figure balance is wider than the space beside a 158px logo on a
       375px phone) and the logo used to be flex: none, so it simply ran on
       underneath the amount. Now the right side never shrinks and the logo
       link absorbs the shortfall: the img is max-width 100% / height auto
       (rule above), so it scales down with its ratio kept, to a 64px floor
       where the wordmark is still legible. .imp-head already supplies the
       18px side padding, so the link drops its own. */
    .imp-head-left { flex: 1 1 auto; min-width: 0; }
    .imp-head-right { flex: none; }
    .imp-logo-link { padding: 0; flex: 0 1 auto; min-width: 64px; }

    .imp-head-right { padding: 0; gap: 10px; }
    .imp-wallet-label { font-size: 9px; letter-spacing: .16em; }
    .imp-wallet-amount { font-size: 15px; gap: 6px; margin-top: 3px; }

    .imp-head-plus {
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        background: var(--imp-lime);
        color: var(--imp-bg);
        font: 800 20px/1 var(--imp-sans);
    }

    .imp-head-plus:hover { background: var(--imp-lime-hi); color: var(--imp-bg); }
    .imp-avatar { width: 34px; height: 34px; font-size: 12px; }
    .imp-head-chat { display: none; }   /* the tab bar carries live chat on mobile */

    /* Mobile bottom navigation — spec: MOBILE_NAV.md.
       The shell is a 100dvh flex column with .imp-main scrolling, so this bar is
       already pinned to the viewport bottom without position:fixed — and so it
       never overlaps the content it would otherwise sit on top of. */
    .imp-tabs {
        display: flex;
        flex: none;
        background: var(--imp-surface);
        border-top: 2px solid var(--imp-line);
    }

    .imp-tabs a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        /* The spec's flat 20px bottom is home-indicator clearance. Paying it on
           every device made the bar 75px tall, so it is conditional now: 8px
           base plus the real inset, which is 0 on Android and desktop and ~34px
           on an iPhone with an indicator — where that strip is unusable anyway,
           so the bar's own content stays the same height everywhere.
           2px sides are sized for BM's "KEJOHANAN"; do not widen the font. */
        padding: 9px 2px calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 3px solid transparent;
        /* --imp-text-3 (#63788a) measured 3.98:1 against the bar — under the
           4.5:1 AA minimum, on 9px condensed caps. --imp-text-2 gives 6.99:1.
           The icon inherits this via currentColor, so both brighten together. */
        color: var(--imp-text-2);
    }

    /* icon and label share the anchor's colour via currentColor */
    .imp-tabs a > span {
        font: 700 9px/1.1 var(--imp-cond);
        letter-spacing: .09em;
        text-transform: uppercase;
        text-align: center;
        color: inherit;
        /* a wrapped label would add a whole line to every tab and undo the
           height the bar just saved — BM's "Bantuan Talian" does exactly that
           on a 320px phone, so labels never wrap */
        white-space: nowrap;
    }

    .imp-tab-icon { width: 23px; height: 23px; display: block; flex: none; }

    .imp-tabs a.on { border-top-color: var(--imp-lime); color: var(--imp-lime); }
}

/* 320px phones give each tab only 60px of content width, which the longest BM
   label overruns even with nowrap. Drop a point rather than let it clip. */
@media only screen and (max-width: 359px) {
    .imp-tabs a > span { font-size: 8px; letter-spacing: .03em; }
}

/* ============================================================
   4. Live ticker (design: red LIVE flag + marquee)
   ============================================================ */

.marquee {
    background: var(--imp-surface-2) !important;
    border-bottom: 1px solid var(--imp-line);
    border-top: 1px solid var(--imp-line);
    color: var(--imp-text-2) !important;
    font-family: var(--imp-cond);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    position: relative;
    padding-left: 84px;
    white-space: nowrap;
    overflow: hidden;
}

.marquee > span { display: inline-block; }

.marquee::before {
    content: "\25CF  LIVE";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--imp-red);
    color: #fff;
    font: 700 13px/1 var(--imp-cond);
    letter-spacing: .16em;
    z-index: 2;
}

.marquee img { display: none; }

.imp-ticker { display: flex; align-items: center; background: var(--imp-surface-2); border-bottom: 1px solid var(--imp-line); overflow: hidden; }
.imp-ticker-flag { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--imp-live); color: #fff; font: 700 13px/1 var(--imp-cond); letter-spacing: .16em; }
/* The dot broadcasts, matching wwwroot/images/live.gif — that gif is a white dot
   with signal arcs radiating from it across 3 frames. Rebuilt in CSS rather than
   dropped in as the gif: this keeps the flag's --imp-red theming, its @Localizer
   label (the gif has "LIVE" baked in, so it could never translate) and the
   design's square corners, and it stays sharp at any DPI.
   Two rings, offset by half the cycle, give the gif's one-arc-then-two read.
   The gif loops in 0.3s, which is frantic for something on screen permanently —
   1.8s keeps the same idea without pulling the eye off the page. */
.imp-ticker-flag i {
    position: relative;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: #fff;
}

.imp-ticker-flag i::before,
.imp-ticker-flag i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 99px;
    border: 1.5px solid #fff;
    animation: imp-live-pulse 1.8s ease-out infinite;
}

.imp-ticker-flag i::after { animation-delay: .9s; }

@keyframes imp-live-pulse {
    0%   { transform: scale(1); opacity: .85; }
    70%  { opacity: 0; }
    100% { transform: scale(3.4); opacity: 0; }
}

/* a permanent pulse is exactly what this setting is for */
@media (prefers-reduced-motion: reduce) {
    .imp-ticker-flag i::before,
    .imp-ticker-flag i::after { animation: none; opacity: 0; }
}
.imp-ticker-track { flex: 1; overflow: hidden; white-space: nowrap; }
.imp-ticker-track > span { display: inline-block; padding-left: 14px; color: var(--imp-text-2); font: 600 14px/1.6 var(--imp-cond); letter-spacing: .1em; animation: imp-tick 28s linear infinite; }

@keyframes imp-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   5. Surfaces + panels
   ============================================================ */

.blue-container,
.white-rounded-container,
.imp-panel {
    background: var(--imp-surface) !important;
    border: 1px solid var(--imp-line);
    border-radius: 0 !important;
    color: var(--imp-text);
}

.white-rounded-container-header {
    background: var(--imp-surface-2) !important;
    color: var(--imp-text-3) !important;
    border-radius: 0 !important;
}

.imp-panel-hero,
.imp-note {
    background: linear-gradient(100deg, var(--imp-surface-3), var(--imp-bg-2));
    border: 0;
    border-left: 4px solid var(--imp-lime);
    padding: 16px 20px;
}

.imp-note.alert-accent { border-left-color: var(--imp-red); }
.imp-note-title { font: 700 11px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-lime); }
.imp-note.alert-accent .imp-note-title { color: var(--imp-red); }
.imp-note-body { font: 400 12px/1.6 var(--imp-sans); color: var(--imp-text-2); margin-top: 8px; }

.imp-section-step {
    font: 700 12px/1 var(--imp-cond);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--imp-lime);
}

/* modals */
.modal-content {
    background: var(--imp-surface) !important;
    border: 1px solid var(--imp-line-2) !important;
    border-radius: 0 !important;
    color: var(--imp-text);
}

.modal-header { background: var(--imp-surface-2); border-bottom: 1px solid var(--imp-line); }
.modal-title { font-family: var(--imp-sans); font-weight: 800; letter-spacing: -.02em; color: var(--imp-text); }
.modal-header .close { color: var(--imp-text-2); text-shadow: none; opacity: 1; }

/* ============================================================
   6. Buttons
   ============================================================ */

.btn-primary,
.btn-primary:active,
.btn-yellow,
.datatables-bt,
.imp-btn {
    background: var(--imp-lime) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--imp-bg) !important;
    font-family: var(--imp-cond);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 15px 26px;
    clip-path: var(--imp-cut);
    cursor: pointer;
}

.btn-primary:hover, .btn-yellow:hover, .imp-btn:hover { background: var(--imp-lime-hi) !important; }

.btn-primary:disabled,
.imp-btn:disabled {
    background: var(--imp-line-2) !important;
    color: var(--imp-text-3) !important;
    cursor: not-allowed;
}

.btn-black, .btn-grey, .btn-white, .imp-btn-ghost {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--imp-line-2) !important;
    border-radius: 0 !important;
    color: var(--imp-text-2) !important;
    font-family: var(--imp-cond);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 13px 20px;
    clip-path: none;
    /* inline-flex, not inline-block, so the label centres itself in whatever
       height the button ends up with. These sit next to .btn-primary in flex
       rows, where align-items:stretch makes both boxes the taller one's height
       — 54px beside JOIN NOW. Under inline-block the 21px line box stayed at
       the top of the 28px content area and the label rode 2px high while its
       neighbour's sat dead centre. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.btn-black:hover, .btn-grey:hover, .btn-white:hover, .imp-btn-ghost:hover {
    border-color: var(--imp-lime) !important;
    color: var(--imp-lime) !important;
    background: transparent !important;
}

.btn-red { background: var(--imp-red) !important; border: 0 !important; border-radius: 0 !important; color: #fff !important; }

.nav-bt {
    background: var(--imp-surface-2) !important;
    border: 1px solid var(--imp-line) !important;
    border-radius: 0 !important;
    color: var(--imp-text-2) !important;
    font-family: var(--imp-cond);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.nav-bt.selected, .nav-bt:hover {
    background: var(--imp-lime) !important;
    border-color: var(--imp-lime) !important;
    color: var(--imp-bg) !important;
}

/* ============================================================
   7. Wallet nav — .selectbar round gold medallions become the
      flat tab strip from the design (Profile · Deposit · … )
   ============================================================ */

.selectbar {
    background: var(--imp-surface);
    border-bottom: 2px solid var(--imp-line);
    padding: 0 !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.selectbar::-webkit-scrollbar { display: none; }
.selectbar > div { padding: 0 !important; flex: none; }

.selectbar .bt {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    border-left: 0;
    padding: 12px 20px;
    color: var(--imp-text-3) !important;
    white-space: nowrap;
}

.selectbar .bt > .wallet-frame,
.selectbar .bt > .position-absolute img { display: none !important; }

/* the markup duplicates the label in an opacity:0 sizing spacer */
.selectbar .bt > div[style*="opacity:0"] { display: none !important; }
.selectbar .bt > .position-absolute { position: static !important; }

.selectbar .bt > .position-absolute > div {
    margin-top: 0 !important;
    font-family: var(--imp-cond);
    font-weight: 700;
    font-size: 13px !important;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.selectbar .bt:hover { border-color: var(--imp-lime); color: var(--imp-lime) !important; }

.selectbar .bt.selected {
    background: var(--imp-lime) !important;
    border-color: var(--imp-lime);
    color: var(--imp-bg) !important;
}

/* the legacy .selected rules swap in gold artwork — neutralise them */
.selectbar .bt.selected .wallet-frame,
.selectbar .bt.selected img { display: none !important; }

/* .menubar list variant, used by some wallet sub-pages */
.menubar { background: var(--imp-surface); border-bottom: 2px solid var(--imp-line); }
.menubar ul { margin: 0; padding: 0; display: inline-flex; }
.menubar ul li { list-style: none; background: transparent; width: auto; }

.menubar ul li a {
    display: block;
    padding: 12px 20px;
    font-family: var(--imp-cond);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--imp-text-3);
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    border-left: 0;
}

.menubar li.selected, .menubar li:hover { background: transparent; }

.menubar li.selected a,
.menubar li a:hover {
    background: var(--imp-lime);
    border-color: var(--imp-lime);
    color: var(--imp-bg) !important;
}

/* ============================================================
   8. Forms
   ============================================================ */

.form-control,
.form-control:focus,
select.form-control,
textarea.form-control {
    background: var(--imp-surface-2) !important;
    border: 1px solid var(--imp-line-2) !important;
    border-radius: 0 !important;
    color: var(--imp-text) !important;
    box-shadow: none !important;
    padding: 14px 16px;
    height: auto;
    font-family: var(--imp-sans);

    /* A select and a text input do NOT come out the same height on their own:
       Bootstrap's line-height:1.5 applies to the input (24px content) but Chrome
       keeps `normal` on a select and ignores any line-height you give it, so the
       select lands ~5px shorter. Pin a floor instead — 1.5em of content plus the
       28px vertical padding and 2px of border this rule itself sets. In `em` so
       it tracks the font size rather than hardcoding 54px. */
    min-height: calc(1.5em + 30px);
}

.form-control:focus { border-color: var(--imp-lime) !important; }
.form-control::placeholder { color: var(--imp-text-4); }

.input-label { font-size: 11px; }
.label-hint { color: var(--imp-text-4); font-size: 11px; }

/* .input-group-addon is a Bootstrap 3 class; Bootstrap 4 expects
   .input-group-prepend > .input-group-text and gives the bare span no layout at
   all, so the "+60" sat as a small unaligned box instead of filling the field's
   height. Size it here rather than rewriting the markup, which several views
   share. min-height matches the .form-control floor set in section 7. */
.input-group-addon,
.input-group-text {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0 16px;
    min-height: calc(1.5em + 30px);
    background: var(--imp-surface-2) !important;
    border: 1px solid var(--imp-line-2) !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    color: var(--imp-text-3) !important;
    font-family: var(--imp-cond);
    font-weight: 700;
    letter-spacing: .16em;
    white-space: nowrap;
}

/* the field beside it keeps its own left edge from doubling up */
.input-group > .form-control { flex: 1 1 auto; min-width: 0; }

.select-border { border: 1px solid var(--imp-line-2) !important; border-radius: 0 !important; }
.select-border.selected, .select-border:hover { border-color: var(--imp-lime) !important; }

/* quick-amount chips — Deposit / Withdrawal / Transfer */
.amount-bt-container div {
    background: var(--imp-surface-2) !important;
    border: 1px solid var(--imp-line-2) !important;
    border-radius: 0 !important;
    color: var(--imp-text-2) !important;
    font-family: var(--imp-cond);
    font-weight: 700;
    letter-spacing: .1em;
    padding: 13px 5px !important;
}

.amount-bt-container div:hover,
.amount-bt-container div.selected {
    border-color: var(--imp-lime) !important;
    color: var(--imp-lime) !important;
    background: var(--imp-surface-2) !important;
}

/* payment PIN boxes */
.imp-pin { display: flex; gap: 10px; }

.imp-pin input,
.imp-pin > div {
    flex: 1;
    max-width: 56px;
    height: 64px;
    text-align: center;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line-2);
    font: 800 26px/1 var(--imp-sans);
    color: var(--imp-text);
}

.imp-pin > div { display: grid; place-items: center; }

/* An <input> does not lay its value out as a grid item, so `place-items: center`
   never centred the bullet — it sat bottom-left in the cell. Centre it the way
   an input actually responds to: text-align across, and a line-height equal to
   the inner height down. */
.imp-pin input {
    display: block;
    padding: 0;
    line-height: 62px;      /* 64px cell less its 1px top and bottom borders */
}

.imp-pin input:focus { border-color: var(--imp-lime); outline: 0; }

/* These cells are type=password, so Chrome offers to autofill them and paints
   its own near-white background — which is why one cell showed light while the
   rest stayed dark. `background` cannot override it; an inset shadow is the only
   way to repaint, and text-fill-color keeps the bullet visible. The long
   transition stops the flash Chrome plays on fill. */
.imp-pin input:-webkit-autofill,
.imp-pin input:-webkit-autofill:hover,
.imp-pin input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--imp-surface-2) inset;
    box-shadow: 0 0 0 1000px var(--imp-surface-2) inset;
    -webkit-text-fill-color: var(--imp-text);
    caret-color: var(--imp-text);
    transition: background-color 9999s ease-in-out 0s;
}

/* progress meters (turnover check, VIP progress) */
.imp-progress { height: 8px; background: var(--imp-surface-2); }
.imp-progress > span { display: block; height: 8px; background: var(--imp-lime); }

/* ============================================================
   9. Provider tiles + wallet cards + category picker
   ============================================================ */

.game-selection,
.game-selection2,
.payment-selection,
.mobile-game-selection,
.imp-tile {
    background: var(--imp-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--imp-line) !important;
    border-radius: 0 !important;
    transition: transform .12s ease, border-color .12s ease;
}

.game-selection:hover,
.game-selection2:hover,
.payment-selection:hover,
.imp-tile:hover { border-color: var(--imp-lime) !important; transform: translateY(-3px); }

.game-selection.selected,
.game-selection2.selected,
.payment-selection.selected,
.mobile-game-selection.selected,
.imp-tile.selected {
    background: var(--imp-surface-2) !important;
    border-color: var(--imp-lime) !important;
}

.imp-tile-tag {
    position: absolute;
    top: 0; left: 0;
    padding: 5px 9px;
    background: var(--imp-lime);
    color: var(--imp-bg);
    font: 700 10px/1 var(--imp-cond);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.imp-tile-tag.live { background: var(--imp-red); color: #fff; }

.wallet, .wallet-frame-panel {
    background: var(--imp-surface-2) !important;
    border: 1px solid var(--imp-line) !important;
    border-radius: 0 !important;
    color: var(--imp-text) !important;
}

.wallet.selected {
    background: var(--imp-surface-2) !important;
    border-color: var(--imp-lime) !important;
    color: var(--imp-text) !important;
    box-shadow: inset 4px 0 0 var(--imp-lime);
}

.category-picker-container {
    background: var(--imp-surface-2) !important;
    border: 1px solid var(--imp-line);
    border-radius: 0 !important;
}

.category-picker {
    color: var(--imp-text-2) !important;
    font-family: var(--imp-cond);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.category-picker:hover { color: var(--imp-lime) !important; }

.category-picker.selected {
    background: var(--imp-lime) !important;
    background-image: none !important;
    border-radius: 0 !important;
    color: var(--imp-bg) !important;
}

.category-picker img { filter: grayscale(1) brightness(1.6); opacity: .65; }
.category-picker.selected img { filter: none; opacity: 1; }

/* ============================================================
   10. Tables — History, VIP, Commission, DataTables
   ============================================================ */

.imp-table,
.table-yellow,
.transaction-type-table,
table.dataTable,
.history-table {
    width: 100%;
    color: var(--imp-text);
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

.imp-table thead th,
.table-yellow thead th,
.transaction-type-table thead th,
table.dataTable thead th {
    background: var(--imp-surface-2) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--imp-line) !important;
    color: var(--imp-text-3) !important;
    font-family: var(--imp-cond);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 14px 16px;
    white-space: nowrap;
}

.imp-table tbody td,
.table-yellow tbody td,
.transaction-type-table tbody td,
table.dataTable tbody td {
    background: var(--imp-surface-2);
    border: 0 !important;
    border-bottom: 1px solid var(--imp-line) !important;
    color: var(--imp-text) !important;
    padding: 14px 16px;
    font-size: 14px;
}

.imp-table tbody tr:hover td,
.table-yellow tbody tr:hover td,
table.dataTable tbody tr:hover td { background: #16212b; }

.history-table td { background: transparent !important; border: 0 !important; }

.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter { color: var(--imp-text-3) !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid var(--imp-line-2) !important;
    border-radius: 0 !important;
    color: var(--imp-text-2) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--imp-lime) !important;
    border-color: var(--imp-lime) !important;
    color: var(--imp-bg) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover a { color: var(--imp-bg) !important; }

/* Transaction status — DepositStatusEnum: Pending / Completed / Rejected / Revoke.
   A chip, not bare text: on the history row it sits under the amount in the
   right column, and a filled block is what separates it from the figure above
   it. Colours are HISTORY.md's — "A on B" is text A on background B, so
   Rejected is the one light chip on the page and reads as the loudest. */
.imp-status {
    display: inline-block;
    padding: 6px 11px;
    font-family: var(--imp-cond);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.imp-status-completed, .imp-status-paid, .imp-status-credited { background: var(--imp-bg); color: var(--imp-lime) !important; }
.imp-status-pending { background: var(--imp-bg); color: var(--imp-amber) !important; }
.imp-status-rejected { background: #fff; color: var(--imp-red) !important; }
.imp-status-revoke { background: var(--imp-text-2); color: var(--imp-line) !important; }

.imp-amount-in { color: var(--imp-lime); font-weight: 800; }
.imp-amount-out { color: var(--imp-text); font-weight: 800; }

/* ============================================================
   11. VIP (design screen 09 / M9)
   ============================================================ */

.imp-vip-head { display: flex; gap: 20px; align-items: flex-start; }
.imp-vip-badge { flex: none; width: 150px; }
.imp-vip-badge img { width: 100%; }
.imp-vip-kicker { font: 700 12px/1 var(--imp-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--imp-lime); }
.imp-vip-tier { font: 800 38px/1 var(--imp-sans); letter-spacing: -.03em; color: var(--imp-text); margin-top: 10px; text-transform: uppercase; }
.imp-vip-progress-meta { display: flex; justify-content: space-between; margin-top: 9px; font: 700 11px/1 var(--imp-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--imp-text-4); }
.imp-vip-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.imp-vip-stat { padding: 16px; background: var(--imp-surface-2); border: 1px solid var(--imp-line); }
.imp-vip-stat-label { font: 700 11px/1.3 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-vip-stat-value { font: 800 20px/1 var(--imp-sans); color: var(--imp-text); margin-top: 10px; }
.imp-vip-stat-value.gain { color: var(--imp-lime); }

/* The member's OWN tier. Distinct from .selected below — this one never moves. */
.imp-vip-row-current td { background: var(--imp-surface-3) !important; }
.imp-vip-row-current .imp-vip-name { color: var(--imp-lime) !important; }
.imp-vip-name { font-family: var(--imp-cond); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* The tier's PackageImage beside its name, in the comparison table and the
   mobile cards — the same medal the header shows for the member's own tier,
   at row size. Fixed box so a missing or oddly-sized image cannot change the
   row height; object-fit keeps the medal's proportions inside it. */
.imp-vip-name-cell { display: inline-flex; align-items: center; gap: 12px; }
.imp-vip-row-badge { flex: none; width: 40px; height: 40px; object-fit: contain; display: block; }

/* Which of the two layouts is showing. The site-wide .is-mobile/.is-desktop
   pair cannot do this job: .is-desktop is declared nowhere in the project, so
   it hid nothing and a phone rendered the seven-column table AND the tier
   cards, stacked. These are scoped to VIP and both halves actually exist. */
.imp-vip-mobile { display: none; }

@media only screen and (max-width: 767px) {
    .imp-vip-desktop { display: none; }
    .imp-vip-mobile { display: block; }
}

/* A tier is pickable: clicking it swaps the REBATE BY GAME table below. */
.imp-vip-pick { cursor: pointer; }
.imp-vip-pick:focus-visible { outline: 2px solid var(--imp-lime); outline-offset: -2px; }

tr.imp-vip-pick:hover td { background: var(--imp-surface-3); }

/* Two different questions, two different signals, deliberately never the same
   one: a FILL plus a lime tier name means "this tier is yours" and never moves;
   a lime EDGE means "this is the tier the table below is showing" and follows
   the taps. If selected also went lime-on-name the member would lose track of
   which tier they are actually on the moment they browsed another. */
tr.imp-vip-pick.selected td { box-shadow: inset 0 -2px 0 var(--imp-lime); }

.imp-vip-card.imp-vip-pick { transition: border-color .12s ease; }
.imp-vip-card.imp-vip-pick:hover { border-color: var(--imp-line-2); }
.imp-vip-card.imp-vip-pick.selected { border-color: var(--imp-lime); }

/* Heading strip over the rebate table, naming the tier being shown. */
.imp-vip-rebate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }

.imp-vip-rebate-tier {
    font: 700 13px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-lime);
}

/* mobile tier cards */
.imp-vip-cards { display: flex; flex-direction: column; gap: 8px; }
.imp-vip-card { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; background: var(--imp-surface-2); border: 1px solid var(--imp-line); }
/* The member's own tier: a fill and a lime name. NOT a lime border — that is
   reserved for the selected tier, so the two states stay tellable apart when
   both land on the same card. The tier name colour was an inline style on the
   markup before; it belongs here. */
.imp-vip-card.current { background: var(--imp-surface-3); }
.imp-vip-card.current .imp-vip-name { color: var(--imp-lime); }
.imp-vip-card-sub { font: 400 11px/1 var(--imp-sans); color: var(--imp-text-4); margin-top: 6px; }
.imp-vip-card-main { font: 700 13px/1 var(--imp-sans); color: var(--imp-text); }
.imp-vip-card-meta { font: 400 11px/1 var(--imp-sans); color: var(--imp-text-3); margin-top: 6px; }

/* ============================================================
   12. Feature cards (Instant Rebate / Progressive Pool / Steal)
   ============================================================ */

.imp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.imp-feature { padding: 22px 24px; background: var(--imp-surface); border-top: 4px solid var(--imp-lime); }
.imp-feature.alert-accent { border-top-color: var(--imp-red); }
.imp-feature-tag { font: 700 11px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-lime); }
.imp-feature.alert-accent .imp-feature-tag,
.imp-feature.alert-accent .imp-feature-meta { color: var(--imp-red); }
.imp-feature-title { font: 800 22px/1.15 var(--imp-sans); letter-spacing: -.02em; color: var(--imp-text); margin: 10px 0 0; }
.imp-feature-body { font: 400 13px/1.7 var(--imp-sans); color: var(--imp-text-2); margin-top: 10px; }
.imp-feature-meta { font: 700 12px/1 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--imp-lime); margin-top: 14px; }
.imp-feature-short { display: none; }

/* ============================================================
   13. Mobile — the 390x844 artboards
   ============================================================ */

@media only screen and (max-width: 767px) {

    .pop-header { font-size: 18px; }

    /* feature cards collapse to one-line rows (design M3) */
    .imp-features { grid-template-columns: 1fr; gap: 6px; }

    .imp-feature {
        padding: 8px 12px;
        border-top: 0;
        border-left: 3px solid var(--imp-lime);
        display: flex;
        flex-direction: column;
    }

    .imp-feature.alert-accent { border-left-color: var(--imp-red); }
    .imp-feature-title, .imp-feature-body { display: none; }
    .imp-feature-tag { font-size: 11px; letter-spacing: .16em; order: 1; }
    .imp-feature-meta { font-size: 10px; letter-spacing: .13em; margin-top: 0; order: 2; align-self: flex-end; margin-top: -13px; }
    .imp-feature-short { display: block; font: 400 11px/1.35 var(--imp-sans); color: var(--imp-text-2); margin-top: 5px; order: 3; }

    /* wallet tabs shrink to a scrolling text row (design M4) */
    .selectbar .bt { padding: 10px 14px; }
    .selectbar .bt > .position-absolute > div { font-size: 12px !important; }

    /* provider grid: 3 up */
    .category-picker { padding: 10px 8px; }

    /* VIP */
    .imp-vip-head { gap: 14px; align-items: center; }
    .imp-vip-badge { width: 84px; }
    .imp-vip-tier { font-size: 28px; }
    .imp-vip-stats { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
    .imp-vip-stat { padding: 13px; }
    .imp-vip-stat-value { font-size: 18px; }
    .imp-vip-progress-meta { flex-direction: column; gap: 4px; }

    /* tables become readable at 390px */
    .imp-table thead th, .table-yellow thead th, table.dataTable thead th { padding: 10px 8px; font-size: 10px; letter-spacing: .12em; }
    .imp-table tbody td, .table-yellow tbody td, table.dataTable tbody td { padding: 10px 8px; font-size: 12px; }

    /* Compact controls on a phone. The desktop sizes (54px inputs, 54px
       buttons, 40px tabs) were a lot of thumb-height on a 390px screen — the
       Register form barely fit three fields in a viewport. Everything here
       lands at 44px, the standard touch target, or a little under for the
       secondary controls. Font stays 16px on the inputs so iOS does not zoom
       the page when a field is focused. */
    /* :active is listed too: the desktop rule in section 6 is written as
       ".btn-primary, .btn-primary:active, …", and a pseudo-class outranks a
       bare class, so while the button was held down the 54px desktop size
       came back and the button visibly jumped under the thumb. */
    .btn-primary, .btn-primary:active, .btn-yellow, .btn-yellow:active, .imp-btn, .imp-btn:active { font-size: 14px; padding: 11px 18px; }
    .btn-black, .btn-grey, .btn-white, .imp-btn-ghost { font-size: 14px; padding: 9px 14px; }

    .form-control, .form-control:focus, select.form-control, textarea.form-control {
        padding: 9px 14px;
        min-height: calc(1.5em + 20px);   /* 44px at 16px */
    }
    .input-group-addon, .input-group-text { padding: 0 12px; min-height: calc(1.5em + 20px); }

    .marquee { padding-left: 66px; font-size: 12px !important; }
    .marquee::before { font-size: 11px; padding: 0 10px; }
}

/* ============================================================
   14. Angular clip helper + hero blocks reused across screens
   ============================================================ */

.imp-cut { clip-path: var(--imp-cut); }


.imp-hero-kicker { font: 700 13px/1 var(--imp-cond); letter-spacing: .26em; text-transform: uppercase; color: var(--imp-lime); }
/* margin-bottom:0 for the same reason as .imp-page-title — this is the <h1> on
   the lobby and the login, and the default h1 bottom margin would open a gap
   under the headline that was never in the design. */
.imp-hero-title { font: 800 50px/1.04 var(--imp-sans); letter-spacing: -.035em; color: var(--imp-text); margin-top: 16px; margin-bottom: 0; max-width: 440px; }
.imp-hero-copy { font: 400 15px/1.7 var(--imp-sans); color: var(--imp-text-2); margin-top: 16px; max-width: 420px; }

/* The lobby slogan, demoted from <h1> so the heading can carry the
   keyword instead. Sized to what the h1 used to be, so the hero looks
   unchanged: the tag moved, the rendering did not. */
.imp-hero-tagline { font: 800 34px/1.1 var(--imp-sans); letter-spacing: -.03em; color: var(--imp-text); margin: 10px 0 0; max-width: 640px; }

@media only screen and (max-width: 767px) {
    /* full lockup scaled ~0.7 for the 390px auth screens — the spec sizes the
       full lockup for desktop only, and 40px overruns a phone hero. The art is
       4x, so scaling down costs nothing in sharpness. */
    .imp-logo-full { width: 203px; height: auto; }

    .imp-hero-title { font-size: 31px; line-height: 1.08; margin-top: 12px; }
    .imp-hero-copy { font-size: 13px; line-height: 1.6; margin-top: 11px; }
    .imp-hero-tagline { font-size: 24px; line-height: 1.12; }
}

/* ============================================================
   15. Auth — Login (design 01 / M1) and Register (design 02 / M2)
   ============================================================ */

.imp-auth { display: flex; min-height: 640px; background: var(--imp-bg); }

.imp-auth-hero {
    flex: 1;
    background: linear-gradient(140deg, #101a22, var(--imp-bg));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    padding: 38px 40px;
}

.imp-auth-form {
    flex: none;
    width: 500px;
    background: var(--imp-surface);
    border-left: 2px solid var(--imp-line);
    padding: 44px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* left rail of numbered steps on Register */
.imp-auth-rail {
    flex: none;
    width: 300px;
    background: var(--imp-surface);
    border-right: 2px solid var(--imp-line);
    padding: 36px 28px;
}

.imp-auth-body { flex: 1; padding: 40px 50px; }

.imp-auth-stat { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: var(--imp-surface-2); border-left: 4px solid var(--imp-lime); }
.imp-auth-stat-label { font: 700 11px/1 var(--imp-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-auth-stat-value { font: 800 30px/1 var(--imp-sans); color: var(--imp-lime); margin-top: 8px; font-variant-numeric: tabular-nums; }

.imp-auth-facts { display: flex; gap: 34px; }
.imp-auth-fact-value { font: 800 24px/1 var(--imp-sans); color: var(--imp-text); }
.imp-auth-fact-label { font: 700 11px/1 var(--imp-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--imp-text-4); margin-top: 6px; }

.imp-auth-tabs { display: flex; }

.imp-auth-tabs a {
    flex: 1;
    text-align: center;
    padding: 12px 22px;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    border-left: 0;
    font: 700 14px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-text-3);
}

.imp-auth-tabs a.active { background: var(--imp-lime); border-color: var(--imp-lime); color: var(--imp-bg); }
.imp-auth-tabs a:hover { color: var(--imp-lime); }
.imp-auth-tabs a.active:hover { color: var(--imp-bg); }

.imp-auth-rule { display: flex; align-items: center; gap: 14px; margin-top: 26px; font: 700 11px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-text-4); }

/* The social divider follows the submit button directly, so it needs more air
   above it than the dividers separating sections further down.
   A modifier class, not :first-of-type — that pseudo-class counts sibling
   ELEMENTS, not elements carrying this class, so it matched nothing here. */
.imp-auth-rule-social { margin-top: 44px; }
.imp-auth-rule::before, .imp-auth-rule::after { content: ""; flex: 1; height: 1px; background: var(--imp-line); }

.imp-auth-help { display: flex; gap: 10px; margin-top: 18px; }

.imp-auth-help a {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    border: 1px solid var(--imp-line-2);
    font: 700 13px/1 var(--imp-cond);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--imp-text-2);
}

.imp-auth-help a:hover { border-color: var(--imp-lime); color: var(--imp-lime); }

.imp-auth-fine { margin-top: 26px; font: 400 12px/1.6 var(--imp-sans); color: var(--imp-text-4); }

.imp-steps { display: flex; flex-direction: column; gap: 22px; margin-top: 40px; }
.imp-step { display: flex; gap: 14px; align-items: flex-start; }
.imp-step-n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--imp-lime); color: var(--imp-bg); font: 800 14px/1 var(--imp-sans); }
.imp-step-title { font: 700 14px/1 var(--imp-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--imp-text); }
.imp-step-desc { font: 400 12px/1.5 var(--imp-sans); color: var(--imp-text-4); margin-top: 5px; }
.imp-step.muted .imp-step-n { background: var(--imp-line); color: var(--imp-text-3); }
.imp-step.muted .imp-step-title { color: var(--imp-text-3); }

.imp-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; margin-top: 28px; }
.imp-field-grid .input-label { display: block; }

@media only screen and (max-width: 767px) {
    .imp-auth { flex-direction: column; min-height: 0; }

    .imp-auth-hero { padding: 26px 20px; gap: 18px; }
    /* 36px tabs; the base rule sits below the general mobile block, so the
       override has to live here, after it. */
    .imp-auth-tabs a { padding: 10px 16px; }
    .imp-auth-hero .imp-auth-facts, .imp-auth-hero .imp-auth-stat { display: none; }
    /* Login only (Register/Activation use the rail, not the hero): with the
       hero stacked under the header, its logo and kicker repeated the brand
       twice in the first 200px. Hidden on phones at the owner's request,
       19 Sept 2026; desktop keeps them. */
    .imp-auth-hero > .imp-logo, .imp-auth-hero .imp-hero-kicker { display: none; }

    .imp-auth-form {
        width: auto;
        border-left: 0;
        border-top: 2px solid var(--imp-line);
        padding: 20px;
    }

    .imp-auth-rail {
        width: auto;
        border-right: 0;
        border-bottom: 2px solid var(--imp-line);
        padding: 14px 20px;
    }

    .imp-auth-rail .imp-logo { display: none; }
    .imp-steps { flex-direction: row; gap: 10px; margin-top: 0; }
    .imp-step { flex: 1; align-items: center; gap: 9px; }
    .imp-step-n { width: 24px; height: 24px; font-size: 12px; }
    .imp-step-title { font-size: 11px; line-height: 1.2; letter-spacing: .1em; }
    .imp-step-desc { display: none; }

    .imp-auth-body { padding: 16px 20px; }
    .imp-field-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
}

/* ============================================================
   16. Wallet screens — header strip, two-column body, rail
       Design screens 04–08 / M4–M8
   ============================================================ */

.imp-wallet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 26px;
    background: var(--imp-surface);
    border-bottom: 2px solid var(--imp-line);
}

.imp-wallet-head-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
/* margin:0 is load-bearing. These page titles are <h1> for SEO — a page has to
   declare what it is about — and the browser's default h1 margin (0.67em top
   AND bottom) would otherwise push the whole header strip apart. Zeroing it
   here means the tag can change without the design moving a pixel. */
.imp-page-title { flex: none; margin: 0; font: 800 20px/1 var(--imp-sans); letter-spacing: -.03em; color: var(--imp-text); }
.imp-wallet-head-right { flex: none; text-align: right; }

/* The h1 added to _LayoutFAQ. Those pages had no heading at all, so this is the
   one place a title appears where none did before — it needs its own padding
   because the layout puts RenderBody straight against the panel edge. */
.imp-faq-title { padding: 18px 18px 0; }

.imp-wnav { display: flex; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.imp-wnav::-webkit-scrollbar { display: none; }

.imp-wnav a {
    flex: none;
    padding: 10px 18px;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    border-left: 0;
    font: 700 13px/1 var(--imp-cond);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--imp-text-3);
    white-space: nowrap;
}

.imp-wnav a:first-child { border-left: 1px solid var(--imp-line); }
.imp-wnav a:hover { color: var(--imp-lime); }
.imp-wnav a.on { background: var(--imp-lime); border-color: var(--imp-lime); color: var(--imp-bg); }

/* two-column body: form on the left, summary rail on the right */
.imp-cols { display: flex; gap: 24px; padding: 26px; align-items: flex-start; }
.imp-col-main { flex: 1; min-width: 0; }
.imp-col-rail { flex: none; width: 330px; }

/* Two columns need about 1200px, not 768px.

   The rail is a FIXED 330px, so every pixel the viewport loses comes out of
   the main column alone. Work out where it stops fitting: the four-up stat
   grid in .imp-vip-head needs ~150px a card before the labels wrap, so
   4*150 + 3*12 = 636px, plus the 150px badge and its 20px gap = 806px of main.
   Add the rail's 330px, the 24px gap and 52px of padding and you need ~1212px.

   Below that the layout does not degrade gracefully, it collapses: measured on
   an iPad at 917px the main column was 511px, the stat cards 101-134px wide
   and 132px tall from wrapped labels, and the seven-column tier table scrolled
   inside its own container. A full-width stacked column beats a cramped
   two-up, so stack early and let the rail sit underneath. */
@media only screen and (max-width: 1199px) {
    .imp-cols { flex-direction: column; align-items: stretch; }
    .imp-col-rail { width: auto; }
}

.imp-rail {
    background: var(--imp-surface);
    border-top: 4px solid var(--imp-lime);
    padding: 22px;
}

.imp-rail.muted { border-top-color: var(--imp-line); }
.imp-rail-title { font: 700 12px/1 var(--imp-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-rail-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.imp-rail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.imp-rail-row span:first-child { font: 400 13px/1.4 var(--imp-sans); color: var(--imp-text-2); }
.imp-rail-row span:last-child { font: 700 14px/1.2 var(--imp-sans); color: var(--imp-text); text-align: right; }
.imp-rail-row.gain span:last-child { color: var(--imp-lime); }
.imp-rail-sep { height: 1px; background: var(--imp-line); }

.imp-rail-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.imp-rail-total-label { font: 700 13px/1 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-rail-total-value { font: 800 26px/1 var(--imp-sans); color: var(--imp-text); font-variant-numeric: tabular-nums; }

/* big amount field with a currency gutter — design 04/05/06 */
.imp-amount { display: flex; align-items: center; background: var(--imp-surface-2); border: 1px solid var(--imp-line-2); }
.imp-amount-cur { padding: 0 18px; font: 700 15px/1 var(--imp-cond); letter-spacing: .16em; color: var(--imp-text-3); }

.imp-amount input {
    flex: 1;
    min-width: 0;
    padding: 19px 0;
    background: transparent !important;
    border: 0 !important;
    color: var(--imp-text) !important;
    font: 800 32px/1 var(--imp-sans);
    font-variant-numeric: tabular-nums;
    outline: 0;
}

/* The placeholder is the same figure the member is about to type, so it has to
   match the value exactly and differ only in colour. It used to be set to
   `400 15px` against a `800 32px` value, which read as a different field and —
   because the shorthand also reset line-height to 15px — sat the "0.00" high and
   off the value's baseline. No font declaration here: it inherits the input's. */
.imp-amount input::placeholder { color: var(--imp-text-4); }
.imp-amount input::-webkit-outer-spin-button,
.imp-amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.imp-amount input[type=number] { -moz-appearance: textfield; }
.imp-amount-note { padding: 0 18px; font: 400 12px/1.5 var(--imp-sans); color: var(--imp-text-4); text-align: right; white-space: nowrap; }

.imp-amount-side {
    padding: 16px 18px;
    font: 700 13px/1 var(--imp-cond);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--imp-lime);
    cursor: pointer;
    white-space: nowrap;
}

/* quick amount chips */
.imp-chips { display: flex; gap: 10px; margin-top: 12px; }

.imp-chips > div {
    flex: 1;
    text-align: center;
    padding: 13px 0;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line-2);
    font: 700 14px/1 var(--imp-cond);
    letter-spacing: .1em;
    color: var(--imp-text-2);
    cursor: pointer;
}

.imp-chips > div:hover, .imp-chips > div.selected { border-color: var(--imp-lime); color: var(--imp-lime); }

/* The deposit turnover rule, above Confirm on each channel panel (Deposit).
   Set like a note body, because that is what it is; the live figure on the
   second line is the one thing the member has to take away, so it alone is
   in the text colour and bold, tabular so it does not jitter as they type. */
.imp-turnover { margin-top: 18px; font: 400 12px/1.6 var(--imp-sans); color: var(--imp-text-2); }
.imp-turnover-figure { margin-top: 4px; color: var(--imp-text); }
.imp-turnover-figure b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Bonus picker (Deposit, under the amount) — the same tile the gateway and
   bank pickers use, one per row, with the radio hidden and the lime border
   doing the "selected" work. Filled from /Game/GetPromotionList and hidden
   with the [hidden] attribute when the member has nothing to pick. */
.imp-bonus-options { display: flex; flex-direction: column; gap: 10px; }
.imp-bonus-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 14px 16px; background: var(--imp-surface-2); border: 1px solid var(--imp-line); cursor: pointer; transition: border-color .12s ease; }
.imp-bonus-option:hover, .imp-bonus-option.selected { border-color: var(--imp-lime); }
.imp-bonus-option input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.imp-bonus-name { font: 700 14px/1.2 var(--imp-sans); color: var(--imp-text); }
.imp-bonus-option.selected .imp-bonus-name { color: var(--imp-lime); }
.imp-bonus-detail { font: 400 12px/1.5 var(--imp-sans); color: var(--imp-text-2); }
.imp-bonus-preview { margin-top: 8px; font: 400 12px/1.6 var(--imp-sans); color: var(--imp-text-2); }
.imp-bonus-preview b { color: var(--imp-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.imp-bonus-rules { margin-top: 10px; padding: 10px 14px; border-left: 3px solid var(--imp-lime); background: rgba(200, 255, 0, .08); font: 600 12px/1.6 var(--imp-sans); color: var(--imp-text); }

/* The USDT figure under the amount box on the USDT panel (Deposit), set like
   the turnover figure: the value is the thing, bold and tabular so it does not
   jitter as they type; the rate it came from is the small print after it. */
.imp-usdt { margin-top: 10px; font: 400 12px/1.6 var(--imp-sans); color: var(--imp-text-2); }
.imp-usdt b { color: var(--imp-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.imp-usdt-rate { color: var(--imp-text-4); }

/* channel / provider pick grids */
.imp-grid { display: grid; gap: 12px; margin-top: 14px; }
.imp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.imp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.imp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.imp-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.imp-pick {
    padding: 16px;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    cursor: pointer;
    transition: border-color .12s ease;
}

.imp-pick:hover { border-color: var(--imp-lime); }
.imp-pick.selected { border-color: var(--imp-lime); }
.imp-pick img { max-width: 100%; max-height: 34px; object-fit: contain; }
.imp-pick-name { font: 700 14px/1.2 var(--imp-sans); color: var(--imp-text); margin-top: 8px; }

/* Bank picker (Deposit, step 2) — a horizontal lockup rather than the stacked
   one the gateway and e-wallet tiles use: round mark on the left, bank name
   beside it. The round mark is the one place this design allows a radius; the
   logos are dark-on-white bitmaps, so the disc supplies the white and `contain`
   plus padding keeps the mark clear of the edge instead of cropping it. */
.imp-pick.deposit-bank { display: flex; align-items: center; gap: 14px; }

.imp-pick.deposit-bank img {
    flex: none;
    width: 46px;
    height: 46px;
    max-width: none;
    max-height: none;
    padding: 5px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
}

.imp-pick.deposit-bank .imp-pick-name { min-width: 0; margin-top: 0; }
.imp-pick-note { font: 400 11px/1.4 var(--imp-sans); color: var(--imp-text-3); margin-top: 6px; }
/* A USDT-TRC20 wallet address on a Withdrawal account tile: 34 characters
   with no natural break, wider than a half-width tile on a phone, so it may
   break anywhere; tabular so the characters line up when it wraps. */
.imp-pick-note-wallet { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.imp-pick-meta { font: 700 10px/1 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--imp-lime); margin-top: 10px; }

/* Delete control on a saved bank card. Quiet by default so it never competes
   with the account it sits next to, and only commits to red on hover — the
   same ghost square the modal close button uses. */
.imp-pick-remove {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--imp-line-2);
    color: var(--imp-text-3);
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}

.imp-pick-remove:hover {
    color: var(--imp-red);
    border-color: var(--imp-red);
    background: rgba(230, 57, 70, .08);
}

/* the card's own :hover rule brightens its border; keep the delete control
   readable at that point without making it shout */
.imp-pick:hover .imp-pick-remove { color: var(--imp-text-2); }
.imp-pick:hover .imp-pick-remove:hover { color: var(--imp-red); }

/* compact 16:9 provider tile used by Transfer / Rebate targets */
.imp-target {
    aspect-ratio: 16 / 9;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 6px;
    cursor: pointer;
}

.imp-target span { font: 700 11px/1.3 var(--imp-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--imp-text-2); }
.imp-target img { max-width: 86%; max-height: 70%; object-fit: contain; }
.imp-target:hover { border-color: var(--imp-lime); }
.imp-target.selected { border-color: var(--imp-lime); }
.imp-target.selected span { color: var(--imp-lime); }

/* wallet balance cards (Transfer "from") */
.imp-purse { padding: 16px; background: var(--imp-surface-2); border: 1px solid var(--imp-line); cursor: pointer; }
.imp-purse:hover { border-color: var(--imp-lime); }
.imp-purse.selected { border-color: var(--imp-lime); }
.imp-purse-name { font: 700 12px/1 var(--imp-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-purse-amount { font: 800 20px/1 var(--imp-sans); color: var(--imp-text); margin-top: 9px; font-variant-numeric: tabular-nums; }

/* stat tiles (Withdrawal limits, VIP) */
.imp-stat { padding: 16px; background: var(--imp-surface-2); border: 1px solid var(--imp-line); }
.imp-stat-label { font: 700 11px/1.3 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-stat-value { font: 800 22px/1 var(--imp-sans); color: var(--imp-text); margin-top: 10px; font-variant-numeric: tabular-nums; }
.imp-stat-value.gain { color: var(--imp-lime); }
.imp-stat-value.warn { color: var(--imp-red); }

/* file input */
.imp-file { display: block; padding: 16px; background: var(--imp-surface-2); border: 1px dashed var(--imp-line-2); color: var(--imp-text-2); cursor: pointer; }
.imp-file:hover { border-color: var(--imp-lime); }
.imp-file input[type=file] { color: var(--imp-text-2); width: 100%; }

@media only screen and (max-width: 767px) {

    .imp-wallet-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 18px; }
    .imp-wallet-head-left { flex-direction: column; align-items: stretch; gap: 10px; }
    .imp-wallet-head-right { text-align: left; }
    .imp-page-title { font-size: 18px; }

    .imp-wnav { margin: 0 -18px; padding: 0 18px; }
    .imp-wnav a { padding: 9px 14px; font-size: 12px; }

    /* align-items MUST be reset here. The desktop rule sets flex-start, which
       on a row axis only controls vertical alignment — harmless. Once this
       becomes a column, align-items governs WIDTH, and flex-start collapses
       both children to their content: .imp-col-main measured 189px inside a
       645px container, leaving the rest of the row empty. .imp-col-main's
       flex:1 cannot save it, because flex grows the MAIN axis, which is now
       height. This was previously worked around with align-self:stretch on
       .imp-col-rail alone, which is why only the main column showed the gap. */
    .imp-cols { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 18px; }
    .imp-col-rail { width: auto; }

    .imp-amount input { font-size: 26px; padding: 16px 0; }
    .imp-amount-note { display: none; }

    .imp-chips { gap: 8px; }
    .imp-chips > div { padding: 12px 0; font-size: 12px; }

    .imp-grid-4, .imp-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* the deposit method picker: four channels sit 2 x 2 on a phone rather
       than three and an orphan */
    .imp-methods.imp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .imp-grid { gap: 9px; }

    .imp-stat-value { font-size: 18px; }
    .imp-rail-total-value { font-size: 22px; }
}

.imp-copy {
    display: flex;
    align-items: center;
    padding: 0 18px;
    background: var(--imp-red) !important;
    border: 1px solid var(--imp-red) !important;
    border-left: 0 !important;
    color: #fff !important;
    font-family: var(--imp-cond);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}

/* ============================================================
   17. History — the transaction row (design 07 / M7)
       Spec: design_handoff_impulse88_stadium/HISTORY.md

   The old view drew a nested <table class="history-table"> per
   transaction: six label/value pairs stacked, nothing aligned down
   the page, empty fields still printing their label. That is gone.
   One transaction is now ONE flex row — rail, body, right column —
   and the 3px left border in the row's edge colour is the point of
   the whole redesign: a page is scannable without reading a chip.

   Three contrast deviations from the spec, all in the direction this
   stylesheet has already taken elsewhere (measured on #12191f):
     * meta date       #63788a -> #8ea3b5   3.87:1 -> 6.80:1
     * reference       #4d6273 -> #63788a   2.80:1 -> 3.87:1
     * inactive tab    #63788a -> #8ea3b5   matches the earlier fix
   #4d6273 at 2.8:1 is unreadable rather than quiet. For the same
   reason the debit rail glyph is #63788a, not the #2c3a47 edge
   colour — at 1.5:1 that icon simply was not there.
   ============================================================ */

/* ---- tabs: underlined row, active gets the fill ---- */
.imp-htabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--imp-line);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.imp-htabs::-webkit-scrollbar { display: none; }

.imp-htabs a {
    flex: none;
    padding: 13px 22px;
    border-bottom: 3px solid transparent;
    font: 700 13px/1 var(--imp-cond);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--imp-text-2);
    cursor: pointer;
    white-space: nowrap;
}

.imp-htabs a:hover { color: var(--imp-lime); }

.imp-htabs a.on {
    background: var(--imp-surface-2);
    border-bottom-color: var(--imp-lime);
    color: var(--imp-text);
}

/* ---- filter bar ---- */
.imp-filter {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    background: var(--imp-surface);
    border: 1px solid var(--imp-line);
    padding: 16px 18px;
}

/* Definite widths on the controls rather than .form-control's width:100%.
   In a flex row a percentage width resolves against a container that is
   itself sized from its content, and the two date inputs end up fighting
   over the result. */
.imp-filter-field { flex: 0 1 auto; }

/* site.css carries `.input-label ~ input, … ~ select, … ~ div { margin-bottom:
   12px }` and `.input-label { margin-bottom: 4px !important }`. Both bite here:
   the 12px hangs off the bottom of the field's box, and align-items:flex-end
   then lines that box up with SEARCH — leaving the inputs floating 12px above
   the buttons. Zero them so the controls, not their margins, are what aligns. */
.imp-filter-field .input-label { margin-bottom: 0 !important; }
.imp-filter-field .imp-filter-dates { margin-bottom: 0; }

.imp-filter-field > select.form-control {
    width: auto;
    min-width: 160px;
    margin-top: 8px;
    margin-bottom: 0;
    background: var(--imp-surface-2) !important;
    border-color: var(--imp-line-2) !important;
}

.imp-filter-dates { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.imp-filter-dates .form-control {
    flex: 0 1 132px;
    width: 132px;
    min-width: 104px;
    background: var(--imp-surface-2) !important;
    border-color: var(--imp-line-2) !important;
}

.imp-filter-dates span {
    flex: none;
    font: 700 10px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-text-3);
}

.imp-filter-actions { display: flex; align-items: stretch; gap: 10px; flex: none; }

/* Same floor .form-control uses in section 8, but in rem rather than em:
   these buttons are 13px, the inputs 16px, so `1.5em + 30px` would resolve
   8px shorter here and the bar would read as two rows. 1.5rem + 30px = 54px
   for both, so the whole row is one band. */
.imp-filter-actions .btn-primary,
.imp-filter-actions .imp-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(1.5rem + 30px);
    font-size: 13px !important;
}

.imp-filter-actions .btn-primary { padding: 0 24px !important; }
.imp-filter-actions .imp-btn-ghost { padding: 0 20px !important; }

/* quick ranges, pushed to the far right — purely client-side, they set
   the two date inputs and re-run the same search the button runs */
.imp-quick { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

.imp-quick a {
    padding: 9px 12px;
    border: 1px solid var(--imp-line-2);
    font: 700 10px/1 var(--imp-cond);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--imp-text-2);
    cursor: pointer;
    white-space: nowrap;
}

.imp-quick a:hover { border-color: var(--imp-lime); color: var(--imp-lime); text-decoration: none; }

/* the FILTER button only exists below 768px */
.imp-filter-toggle { display: none; }

/* ---- result summary ---- */
.imp-hsum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0 10px;
    font: 700 11px/1.4 var(--imp-cond);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--imp-text-2);
}

.imp-hsum b { color: var(--imp-text); font-weight: 700; }
.imp-hsum:empty { display: none; }

/* One quiet line under a list for a fact about the data itself — the bet
   history's "kept for 3 days". Set like the summary's label text, but
   dimmer: it is a footnote, not a result. */
.imp-hnote {
    margin: 14px 0 0;
    font: 400 12px/1.5 var(--imp-sans);
    color: var(--imp-text-3);
}

/* ---- the list: one DataTables column, one flex row per record ----
   The <thead> is present only because DataTables requires one header
   cell per column; it carries no meaning here, so it is hidden. */
table.imp-hlist { width: 100%; background: transparent; }
table.imp-hlist thead { display: none; }
table.imp-hlist,
table.imp-hlist tbody,
table.imp-hlist tbody tr { display: block; }

table.dataTable.imp-hlist tbody td,
table.imp-hlist tbody td {
    display: block;
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 8px 0 !important;
}

table.dataTable.imp-hlist tbody tr:hover td { background: transparent !important; }

/* ---- the row ---- */
.imp-hrow {
    display: flex;
    align-items: stretch;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    border-left: 3px solid var(--imp-line-2);
}

.imp-hrow:hover {
    background: #16212b;
    border-top-color: var(--imp-line-2);
    border-right-color: var(--imp-line-2);
    border-bottom-color: var(--imp-line-2);
}

.imp-hrow-rail {
    flex: none;
    width: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--imp-line);
    color: var(--imp-text-3);
}

.imp-hrow-rail svg { width: 20px; height: 20px; display: block; fill: currentColor; }

.imp-hrow-body { flex: 1; min-width: 0; padding: 14px 18px; }

.imp-hrow-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.imp-hrow-title {
    font: 700 15px/1.3 var(--imp-sans);
    letter-spacing: -.01em;
    color: var(--imp-text);
    overflow-wrap: anywhere;
}

.imp-htag {
    flex: none;
    padding: 4px 8px;
    background: var(--imp-text-2);
    color: var(--imp-line);
    font: 700 9px/1 var(--imp-cond);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.imp-htag-pool { background: var(--imp-bg); color: var(--imp-lime); }

.imp-hrow-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.imp-hrow-date { font: 400 12px/1 var(--imp-sans); color: var(--imp-text-2); }
.imp-hrow-div { flex: none; width: 1px; height: 11px; background: var(--imp-line-2); }
.imp-hrow-ref { font: 400 12px/1 var(--imp-mono); color: var(--imp-text-3); }

.imp-hrow-remark {
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid var(--imp-line-2);
    font: 400 12px/1.5 var(--imp-sans);
    color: var(--imp-text-2);
    overflow-wrap: anywhere;
}

/* the fixed min-width is what lines every amount up down the page */
.imp-hrow-right {
    flex: none;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
}

.imp-hrow-amount {
    font: 800 19px/1 var(--imp-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--imp-text);
}

/* The USDT side of a USDT deposit or a wallet withdrawal, directly under the
   currency amount. Quieter than the amount — it is the same money, read the
   other way — and pulled up against it so the two read as one figure. */
.imp-hrow-sub {
    margin-top: -4px;
    font: 600 12px/1.2 var(--imp-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--imp-text-3);
}

.imp-hchip-receipt {
    padding: 6px 11px;
    border: 1px solid var(--imp-line-2);
    font: 700 10px/1 var(--imp-cond);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--imp-text-2);
}

.imp-hchip-receipt:hover { border-color: var(--imp-lime); color: var(--imp-lime); text-decoration: none; }

/* ---- tone: edge, glyph and amount move together ---- */
.imp-tone-credit { border-left-color: var(--imp-lime); }
.imp-tone-debit { border-left-color: var(--imp-line-2); }
.imp-tone-pending { border-left-color: var(--imp-amber); }
.imp-tone-void { border-left-color: var(--imp-red); }

.imp-tone-credit .imp-hrow-rail,
.imp-tone-credit .imp-hrow-amount { color: var(--imp-lime); }
.imp-tone-debit .imp-hrow-rail { color: var(--imp-text-3); }
.imp-tone-debit .imp-hrow-amount { color: var(--imp-text); }
.imp-tone-pending .imp-hrow-rail { color: var(--imp-amber); }
.imp-tone-pending .imp-hrow-amount { color: var(--imp-text); }
.imp-tone-void .imp-hrow-rail { color: var(--imp-red); }
.imp-tone-void .imp-hrow-amount { color: var(--imp-text-2); }

/* A lost bet on the bet history. Void dims the amount because a rejected
   deposit is money that never moved; a loss is money that did, so the figure
   stays as loud as a win, just red. */
.imp-tone-loss { border-left-color: var(--imp-red); }
.imp-tone-loss .imp-hrow-rail,
.imp-tone-loss .imp-hrow-amount { color: var(--imp-red); }

/* ---- empty states ---- */
.imp-hempty {
    background: var(--imp-surface-2);
    border: 1px dashed var(--imp-line-2);
    padding: 34px 22px;
    text-align: center;
}

.imp-hempty-title { font: 700 15px/1.3 var(--imp-sans); color: var(--imp-text); }
.imp-hempty-line { margin-top: 6px; font: 400 12px/1.5 var(--imp-sans); color: var(--imp-text-2); }
.imp-hempty-btn { display: inline-block; margin-top: 16px; padding: 12px 22px !important; font-size: 13px !important; }

/* ---- DataTables chrome ----
   DataTables gives the wrapper Bootstrap's .form-inline, which is
   display:flex — so the table and the bottom bar become flex items.
   Put it back to a block; nothing here wants that layout. */
.imp-hpanel .dataTables_wrapper { display: block; }

/* The dom string puts the length menu and the pagination block inside
   one .text-left wrapper, so that wrapper is the row: length left,
   info + pager right.

   `> div` is load-bearing, not tidiness. DataTables also stamps a
   column's className onto every <td> in that column, so a bare
   `.text-left` here matched the CELLS as well and made each one a flex
   container — which turned every .imp-hrow into a flex ITEM and left it
   shrink-wrapped to its own content instead of filling the row. The
   className is gone from the view now; this stays scoped so it cannot
   happen again. */
.imp-hpanel .dataTables_wrapper > div.text-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.imp-hpanel .datatables-bottom-bar-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
}

.imp-hpanel .dataTables_length label {
    margin: 0;
    font: 700 11px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-text-2) !important;
}

.imp-hpanel .dataTables_length select {
    margin: 0 8px;
    padding: 6px 10px;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line-2);
    border-radius: 0;
    color: var(--imp-text);
}

.imp-hpanel .dataTables_info {
    padding: 0;
    font: 700 11px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-text-2) !important;
}

.imp-hpanel .dataTables_paginate .paginate_button {
    min-width: 34px;
    height: 34px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: 1px solid var(--imp-line-2) !important;
    border-radius: 0 !important;
    color: var(--imp-text-2) !important;
    font: 700 11px/1 var(--imp-cond);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.imp-hpanel .dataTables_paginate .paginate_button.current,
.imp-hpanel .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: var(--imp-lime) !important;
    border-color: var(--imp-lime) !important;
    color: var(--imp-bg) !important;
}

.imp-hpanel .dataTables_paginate .paginate_button.disabled { opacity: .4; cursor: default; }

/* the shared .datatables-bt is a full lime button elsewhere; inside the
   pager it is only the word on the square, so strip it back */
.imp-hpanel .dataTables_paginate .datatables-bt {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit;
    letter-spacing: inherit;
    clip-path: none;
}

.imp-hpanel .dataTables_empty { color: var(--imp-text-2) !important; }

.imp-hpanel .dataTables_processing {
    background: var(--imp-surface-2) !important;
    border: 1px solid var(--imp-line) !important;
    color: var(--imp-text-2) !important;
}

@media only screen and (max-width: 767px) {
    .imp-htabs a { padding: 12px 16px; }

    /* filters collapse behind the FILTER button */
    .imp-filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 14px;
        padding: 12px 18px !important;
    }

    .imp-filter { display: none; margin-top: 10px; gap: 10px; }
    .imp-filter.open { display: flex; }
    .imp-filter-field { flex: 1 1 100%; }
    .imp-filter-actions { flex: 1 1 100%; }
    .imp-filter-actions .btn-primary, .imp-filter-actions .imp-btn-ghost { flex: 1; }
    .imp-quick { flex: 1 1 100%; margin-left: 0; }
    .imp-quick a { flex: 1; text-align: center; }

    .imp-hsum { font-size: 10px; letter-spacing: .14em; }

    /* title level with the amount, date level with the status chip */
    .imp-hrow { align-items: flex-start; }
    .imp-hrow-rail { display: none; }
    .imp-hrow-body { padding: 12px 0 12px 14px; }
    .imp-hrow-title { font-size: 14px; }
    .imp-hrow-div, .imp-hrow-ref { display: none; }
    .imp-hrow-right { min-width: 0; justify-content: flex-start; gap: 6px; padding: 12px 14px; }
    .imp-hrow-amount { font-size: 16px; }

    .imp-hpanel .dataTables_wrapper > div.text-left { justify-content: center; }
}

/* ============================================================
   18. Lobby — banners, jackpot, live feed, categories, providers
       Design screen 03 / M3
   ============================================================ */

.imp-banners { border-bottom: 1px solid var(--imp-line); }
.imp-banners img { width: 100%; display: block; }
.imp-banners .slick-dots { bottom: 8px; }

.imp-lobby-block { padding: 22px 22px 0; }
.imp-lobby-block:last-child { padding-bottom: 26px; }

.imp-lobby-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }

.imp-jackpot {
    background: linear-gradient(100deg, var(--imp-surface-3), var(--imp-bg-2));
    border-left: 4px solid var(--imp-lime);
    padding: 22px 24px;
    cursor: pointer;
}

.imp-jackpot:hover { background: linear-gradient(100deg, #17242f, #0f1820); }
.imp-jackpot-amount { font: 800 40px/1 var(--imp-sans); letter-spacing: -.03em; color: var(--imp-lime); margin-top: 12px; }

.imp-live { padding: 18px 20px; }
.imp-live-head { display: flex; align-items: center; justify-content: space-between; }
.imp-live-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.imp-live-title { font: 700 11px/1 var(--imp-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-live-table { width: 100%; margin-top: 8px; }
.imp-live-table td { padding: 5px 0; font-size: 13px; color: var(--imp-text-2); border: 0; background: transparent; }
.imp-live-table td:last-child { text-align: right; }

.imp-cats { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 14px; -ms-overflow-style: none; scrollbar-width: none; }
.imp-cats::-webkit-scrollbar { display: none; }

.imp-cat {
    flex: none;
    padding: 10px 16px;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    font: 700 13px/1 var(--imp-cond);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--imp-text-2);
    cursor: pointer;
    white-space: nowrap;
}

.imp-cat:hover { border-color: var(--imp-lime); color: var(--imp-lime); }
.imp-cat.selected { background: var(--imp-lime); border-color: var(--imp-lime); color: var(--imp-bg); }

.imp-providers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }

/* Wide screens fit eight columns. 1251px, not 1250px, so "more than 1250"
   is literally what happens: at exactly 1250 this does not apply and the grid
   stays 6 up.

   THE TIPS CAROUSEL MUST BE TOLD THE SAME COUNT. Its live layout is slick's,
   not this grid's — see the responsive block in Views/Home/Index.cshtml, where
   the matching cutover is `breakpoint: 1251`. The rule below only governs the
   pre-init/no-JS fallback. If the two disagree the tip cards stop lining up
   with the provider tiles underneath them. */
@media only screen and (min-width: 1251px) {
    .imp-providers { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .imp-tips-rail:not(.slick-initialized) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ---- game card marquee effect --------------------------------------------
   Spec: design_handoff_impulse88_stadium/GAME_CARD_MARQUEE.md.
   An EFFECT on the existing card, not a new layout — the art area and the foot
   lockup are untouched. Three layers sit behind the card's content so it reads
   as a lit display panel rather than a flat tile:
     1. tinted panel — the card's own background, below
     2. light sweep  — ::after, animated
   (the spec's diagonal-texture ::before layer was dropped)
   --imp-accent / --imp-accent-tint are set per card in Views/Home/Index.cshtml
   from the provider table in LOBBY_ADDITIONS.md.
   ------------------------------------------------------------------------- */

.imp-provider {
    position: relative;
    /* clips the sweep at the card edge — without it the band escapes the tile */
    overflow: hidden;
    background:
        radial-gradient(120% 100% at 50% 24%, var(--imp-accent-tint, #2c3a472e), transparent 68%),
        linear-gradient(#16212b, #0d151c);
    border: 1px solid var(--imp-line);
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}

/* The diagonal-texture layer (::before) was removed; the tinted panel now sits
   directly under the sweep. */

/* light sweep. The skew is load-bearing: an unskewed band reads as a
   scanline, the tilt reads as light falling across a surface. */
.imp-provider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    animation: imp-card-shine 3.6s ease-in-out infinite;
}

@keyframes imp-card-shine {
    0%   { transform: translateX(-120%) skewX(-18deg); }
    100% { transform: translateX(320%) skewX(-18deg); }
}

/* The sweep is absolutely positioned, so by default it would paint ABOVE the
   card's non-positioned children. Lift the art and the foot into their own
   stacking level to put the effect back underneath, as the spec's layer order
   requires. */
.imp-provider-art,
.imp-provider-rule,
.imp-provider-foot { position: relative; z-index: 1; }

/* a permanently sweeping grid is exactly what this setting is for */
@media (prefers-reduced-motion: reduce) {
    .imp-provider::after { animation: none; opacity: 0; }
}

/* Phones. Every provider tile ran the light sweep forever — twenty-odd
   compositor layers animating at once, which is what made the lobby stutter
   on an old phone — and the header chat pulse and the LIVE dot ticked along
   with them. None of these is a hover effect, so on a touch device they are
   simply off; a mouse-driven screen keeps them. (hover: none) is how a phone
   identifies itself, old or new. */
@media (hover: none) {
    .imp-provider::after { animation: none; opacity: 0; }
    .imp-head-chat-pulse { animation: none; opacity: 0; }
    .imp-ticker-flag i::after { animation: none; opacity: 0; }
}

/* a provider under maintenance should not look lit */
.imp-provider.down::after { animation: none; opacity: 0; }

.imp-provider:hover { border-color: var(--imp-lime); transform: translateY(-3px); }
.imp-provider.down { cursor: default; opacity: .55; }
.imp-provider.down:hover { border-color: var(--imp-line); transform: none; }

/* The box has the artwork's own proportions. Every provider image in the
   database is uploaded at 378 x 440, so a square box had to give somewhere:
   cover cropped 14% off the top and bottom (Joker's wordmark went with it),
   contain showed the striped ground as bars down both sides. At 378 / 440
   the image fills the box edge to edge with nothing cut and nothing showing
   through. Upload provider art at that size; anything else is cropped to
   fit rather than letterboxed. */
.imp-provider-art { position: relative; aspect-ratio: 378 / 440; overflow: hidden; background: repeating-linear-gradient(115deg, #1b2833 0 10px, #16212b 10px 20px); }
.imp-provider-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imp-provider.down .imp-provider-art img { filter: grayscale(100%); }

/* The rule between the art and the foot, in the card's category accent —
   the same bar the game tips carry. It sits ABOVE the foot rather than
   inside it so it spans the full card width, edge to edge, instead of
   being inset by the foot's 11px padding. z-index above, or the
   ::after marquee sweep paints over it.

   margin-top matches the foot's padding-top, so the rule sits centred in
   its own band rather than butting against the bottom of the artwork. */
.imp-provider-rule {
    height: 2px;
    margin-top: 10px;
    background: var(--imp-accent, var(--imp-line-2));
}

.imp-provider-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 11px 12px; }
.imp-provider-cat { font: 600 11px/1.2 var(--imp-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--imp-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-provider-status { flex: none; font: 700 11px/1 var(--imp-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--imp-lime); }
.imp-provider-status.down { color: var(--imp-red); }

@media only screen and (max-width: 767px) {
    .imp-lobby-block { padding: 14px 16px 0; }
    .imp-lobby-block:last-child { padding-bottom: 20px; }
    .imp-lobby-split { grid-template-columns: 1fr; gap: 10px; }

    .imp-jackpot { padding: 16px 18px; }
    .imp-jackpot-amount { font-size: 28px; margin-top: 9px; }

    .imp-live-cols { gap: 12px; }
    .imp-live-table td { font-size: 12px; }

    .imp-cats { gap: 8px; padding-bottom: 12px; }
    .imp-cat { padding: 11px 14px; font-size: 12px; }

    .imp-providers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .imp-provider-rule { margin-top: 8px; }
    .imp-provider-foot { padding: 8px 9px 10px; }
    .imp-provider-cat { font-size: 10px; }
    .imp-provider-status { font-size: 9px; }
}

/* ticker item separators (design 03) */
.imp-ticker-track > span b { color: var(--imp-lime); font-weight: 700; margin: 0 6px 0 22px; }
.imp-ticker-track > span { padding-right: 22px; }

/* ============================================================
   19. Focus rings

   Clicking a button should not leave an outline behind — but a
   keyboard user still needs to see where they are. :focus-visible
   separates the two: browsers only match it for keyboard/AT focus,
   never for a mouse click.
   ============================================================ */

button:focus,
.btn:focus,
.btn:active:focus,
.btn:not(:disabled):not(.disabled):active:focus,
a:focus,
select:focus,
input:focus,
textarea:focus,
[tabindex]:focus {
    outline: none;
    box-shadow: none !important;   /* also kills Bootstrap's .btn:focus glow */
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--imp-lime);
    outline-offset: 2px;
}

/* ============================================================
   20. Game tips row + site footer (design screen 03, below the
       provider grid). Both bind real data — see Views/Home/Index.cshtml
       and Views/Shared/_Footer.cshtml.
   ============================================================ */

/* The tips row lives INSIDE the category-filter .imp-lobby-block, so it must
   not carry a lobby block of its own — nesting one inside another applied the
   22px inset twice and pushed the row further in than the provider grid above
   it. It takes its horizontal padding from the parent block and only needs the
   vertical rhythm back. */
.imp-tips { margin-top: 22px; }

.imp-tips-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
}

/* These two are <h2>. The font shorthand already pins size and weight, so the
   only thing the tag brings that has to go is the browser default margin. */
.imp-tips-title { font: 700 12px/1 var(--imp-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--imp-lime); margin: 0; }

/* Section head for the provider grid. Same type as the tips title, sitting
   directly above the category filter, so the two section labels on this page
   match instead of one being lime and the other absent. */
.imp-sec-head { padding-bottom: 14px; }
.imp-sec-title { font: 700 12px/1 var(--imp-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--imp-lime); margin: 0; }

/* A slick carousel: 8 across above 1250, 6 below it, 3 on mobile, advancing a
   whole page every 4s (initialised in Views/Home/Index.cshtml).

   The gutter is built from slide padding rather than a gap, because slick lays
   its slides out with floats and gap does nothing to them. The rail pulls back
   by half a gutter on each side so the outer edges of the first and last cards
   still land exactly on the .imp-providers grid above. That holds for ANY
   column count n, which is why adding the 8-up breakpoint needed no change
   here:
       provider tile = (W - (n-1)*14) / n
       tip card      = (W + 14) / n - 2*7  =  (W - 14(n-1)) / n
   Change the gutter and both numbers have to move together. */
.imp-tips-rail { margin: 0 -7px; }
.imp-tip-slide { padding: 0 7px; }

/* Before slick initialises — and if its JS never arrives — the same six-column
   grid as the provider tiles, clipped to the first row. Without this the raw
   markup dumps every tip down the page in a single column. */
.imp-tips-rail:not(.slick-initialized) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: hidden;
    max-height: 340px;
}

.imp-tip {
    display: flex;
    flex-direction: column;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    cursor: pointer;
    transition: border-color .12s ease, transform .12s ease;
}

.imp-tip:hover { border-color: var(--imp-lime); transform: translateY(-3px); }

.imp-tip-art { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--imp-surface-3); }
.imp-tip-art > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Top-left tag naming the game the tip is about. It carried the category
   before; the provider logo and the shade that sat under both are gone.
   max-width keeps a long provider name from running the width of the card. */
.imp-tip-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 5px 9px;
    background: var(--imp-lime);
    font: 700 10px/1 var(--imp-cond);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--imp-bg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.imp-tip-body { padding: 11px 12px 12px; display: flex; flex-direction: column; flex: 1; }

/* Always exactly two lines tall, whether the title wraps or not. Without the
   floor, a one-line title lifted that card's RTP row and rule a line above its
   neighbours' and the row stopped reading as a row. */
.imp-tip-name {
    font: 700 13px/1.2 var(--imp-sans);
    letter-spacing: -.01em;
    color: var(--imp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 31.2px; /* 13px * 1.2 * 2 lines */
}

.imp-tip-rtp { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 9px; }
.imp-tip-rtp > span { font: 700 9px/1 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-tip-rtp > b { font: 800 14px/1 var(--imp-sans); color: var(--imp-lime); }

/* The provider's accent, set per card as --imp-tip-accent in
   Views/Home/Index.cshtml. It was a flat grey at .55 opacity, which lost
   the one thing the design uses this bar for — telling six cards apart at
   a glance. Full strength now; the fallback keeps the old grey if a card
   ever renders without the variable. */
.imp-tip-rule {
    height: 2px;
    margin-top: 10px;
    background: var(--imp-tip-accent, var(--imp-line-2));
}

/* ============================================================
   Pool history — Views/Home/PoolHistory.cshtml, its own page.
   The page shell (.imp-wallet-head, .imp-cols) and the table body
   (.imp-table, section 10) are all shared; only the member column
   and the "this is you" row need anything of their own.
   ============================================================ */

/* A four-character fragment needs to read as a deliberate stub, not as a
   truncated name — the condensed face and the tracking do that. */
.imp-poolhist-name {
    font-family: var(--imp-cond);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* This member's own grabs, on the same treatment .imp-vip-row-current uses for
   the member's current tier: lifted ground plus the accent on the name. */
.imp-poolhist-me td { background: var(--imp-surface-3) !important; }
.imp-poolhist-me .imp-poolhist-name { color: var(--imp-lime) !important; }

.imp-poolhist-empty {
    padding: 18px 20px;
    background: var(--imp-surface);
    border-left: 4px solid var(--imp-line);
    font: 400 13px/1.6 var(--imp-sans);
    color: var(--imp-text-3);
}

@media only screen and (max-width: 767px) {
    .imp-poolhist-empty { padding: 14px 16px; font-size: 12px; }
}

/* ---- footer ---- */

/* margin-top is the gap between the end of a page and the footer's hairline.
   Nothing was setting one, so a page that fills the viewport — the T&C and the
   FAQ both do — ran its last line straight into the rule, and the copyright
   read as one more paragraph of the page.

   It belongs on the footer rather than on each page's last block because every
   page needs it and only one of them was paying it (.imp-lobby-block:last-child
   pads the lobby). Putting it here means a new page gets the spacing for free.

   Safe on short pages: .imp-main is a flex column with .imp-main-inner on
   flex:1, so the inner simply absorbs 32px less free space and the footer stays
   pinned to the bottom rather than being pushed past it. Flex items do not
   collapse margins either, so this is always the full 32px. */
.imp-footer {
    flex: none;
    margin-top: 32px;
    background: var(--imp-bg);
    border-top: 1px solid var(--imp-line);
}

.imp-footer-cols { display: flex; flex-wrap: wrap; gap: 52px; padding: 44px 22px 40px; }
.imp-footer-head { font: 700 12px/1 var(--imp-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--imp-text); }

/* Brand art straight onto the dark ground — no light plate. These are the real
   gateway marks from wwwroot/images/payment, most of which carry their own
   coloured tile, so a plate behind them only boxed them in. */
.imp-footer-pays { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.imp-footer-pays > img { height: 34px; width: auto; max-width: 76px; object-fit: contain; display: block; }

.imp-footer-socials { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.imp-footer-socials > a { display: block; line-height: 0; }
.imp-footer-socials img { width: 34px; height: 34px; object-fit: contain; display: block; transition: transform .12s ease; }
.imp-footer-socials > a:hover img { transform: translateY(-2px); }

/* copyright left, clock right — TERMS/PRIVACY/FAQ removed at the owner's request */

/* ---- footer trust band ------------------------------------------------
   Certification, security, responsible-gaming and licence marks, carried
   over from EasyWin.Main's footer. Below the link columns rather than
   beside them: a reader looks at these once, when deciding whether to
   sign up, not to navigate. Grouped under their own labels so a
   regulator's mark is never mistaken for a payment logo. */
.imp-footer-trust {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--imp-line);
    padding: 6px 22px 10px;
}

.imp-footer-trust-group { flex: 1 1 210px; min-width: 0; padding: 18px 26px 18px 0; }

.imp-footer-trust-head {
    font: 700 10px/1 var(--imp-cond);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--imp-text-3);
}

.imp-footer-trust-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 13px; }

/* height, not max-height: the source art has no common baseline, so a
   shared height is what makes a row of mixed logos sit level.

   Deliberately SMALLER than the 34px payment icons above. These are
   certification wordmarks, not brands a member is looking for — matching the
   payment row made them shout, so they stay at 26px. */
.imp-footer-trust-logos > img {
    height: 26px;
    width: auto;
    max-width: 104px;
    object-fit: contain;
    display: block;
}
.imp-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--imp-line);
    font: 400 12px/1.5 var(--imp-sans);
    color: var(--imp-text-4);
}

.imp-footer-time {
    font: 700 12px/1 var(--imp-cond);
    letter-spacing: .16em;
    color: var(--imp-text-3);
    white-space: nowrap;
}
@media only screen and (max-width: 767px) {
    .imp-footer { margin-top: 22px; }
    .imp-footer-cols { gap: 28px; padding: 32px 18px 30px; }
    .imp-footer-col { width: 100%; }
    .imp-footer-pays > img { height: 30px; max-width: 66px; }
    .imp-footer-trust { padding: 4px 18px 8px; }
    .imp-footer-trust-group { flex: 1 1 100%; padding: 15px 0; }
    .imp-footer-trust-logos { gap: 12px; margin-top: 11px; }
    .imp-footer-trust-logos > img { height: 23px; max-width: 92px; }
    /* the two halves will not sit side by side on a phone */
    .imp-footer-bar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 18px 18px; }
    .imp-tips { margin-top: 14px; }
    /* 3 up, on .imp-providers' 10px mobile gutter — slick is told the same
       count in Index.cshtml's responsive block, and both have to agree */
    .imp-tips-rail { margin: 0 -5px; }
    .imp-tip-slide { padding: 0 5px; }
    .imp-tips-rail:not(.slick-initialized) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 240px; }
}

/* ============================================================
   21. Profile (Views/Account/Setting.cshtml) — the wallet family's
       first tab. Reuses .imp-grid / .imp-stat / .imp-note; only the
       identity header and the security rows are its own.
   ============================================================ */

.imp-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: linear-gradient(100deg, var(--imp-surface-3), var(--imp-bg-2));
    border-left: 4px solid var(--imp-lime);
}

.imp-profile-avatar { width: 54px; height: 54px; font-size: 20px; flex: none; }
.imp-profile-name { font: 800 22px/1.1 var(--imp-sans); letter-spacing: -.025em; color: var(--imp-text); }

.imp-profile-tier {
    font: 700 11px/1 var(--imp-cond);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--imp-lime);
    margin-top: 8px;
}

.imp-profile-actions { display: flex; flex-direction: column; gap: 10px; }

.imp-profile-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    color: var(--imp-text);
}

.imp-profile-action:hover { border-color: var(--imp-lime); color: var(--imp-text); }
.imp-profile-action > i { color: var(--imp-text-3); font-size: 12px; }
.imp-profile-action:hover > i { color: var(--imp-lime); }

.imp-profile-action-title { font: 700 14px/1.2 var(--imp-sans); letter-spacing: -.01em; }

/* a payment PIN that was never set blocks withdrawal, so say so here */
.imp-profile-action-flag {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 8px;
    background: var(--imp-red);
    font: 700 9px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    vertical-align: middle;
}

@media only screen and (max-width: 767px) {
    .imp-profile-head { padding: 16px 18px; gap: 13px; }
    .imp-profile-avatar { width: 46px; height: 46px; font-size: 17px; }
    .imp-profile-name { font-size: 19px; }
}

/* ============================================================
   22. Instant rebate bar — design screen 03, the strip under the
       progressive pool panel. Same hero gradient + 4px lime rule
       the pool panel and the profile header use.
   ============================================================ */

.imp-rebatebar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 24px;
    background: linear-gradient(100deg, var(--imp-surface-3), var(--imp-bg-2));
    border-left: 4px solid var(--imp-lime);
}

.imp-rebatebar-figure { flex: none; }
.imp-rebatebar-label { font: 700 11px/1 var(--imp-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--imp-lime); }
.imp-rebatebar-amount { font: 800 34px/1 var(--imp-sans); letter-spacing: -.03em; color: var(--imp-text); margin-top: 9px; }

.imp-rebatebar-note { flex: 1; font: 400 13px/1.6 var(--imp-sans); color: var(--imp-text-2); max-width: 430px; }

/* The bar's call to action. It is the ghost-button treatment from section 6
   (.btn-black) rather than a lime status chip: this one is pressable and jumps
   to the provider grid, so the quiet bordered box is doing real work — the
   lime is already spent on the label and the rule down the left edge, and a
   second lime element here would compete with the figure the bar exists to
   show. */
.imp-rebatebar-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 17px 24px;
    background: transparent;
    border: 1px solid var(--imp-line-2);
    border-radius: 0;
    color: var(--imp-text-2);
    font: 700 13px/1 var(--imp-cond);
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}

.imp-rebatebar-cta:hover { border-color: var(--imp-lime); color: var(--imp-lime); }
.imp-rebatebar-cta svg { flex: none; }

/* The form is only a wrapper for the POST; the button is still the flex item
   the bar lays out, so it must not introduce a box of its own. */
.imp-rebatebar-form { flex: none; display: contents; }

/* When there IS something to claim, the CTA stops being a quiet ghost box and
   becomes the lime button — that is the whole point of the bar in that state,
   and the ghost treatment reads as "informational" next to a live balance. */
.imp-rebatebar-cta.claim {
    background: var(--imp-lime);
    border-color: var(--imp-lime);
    color: var(--imp-bg);
}

.imp-rebatebar-cta.claim:hover { background: var(--imp-lime-hi); border-color: var(--imp-lime-hi); color: var(--imp-bg); }

@media only screen and (max-width: 767px) {
    .imp-rebatebar { flex-wrap: wrap; gap: 14px; padding: 16px 18px; }
    .imp-rebatebar-amount { font-size: 27px; }
    .imp-rebatebar-note { flex: 1 1 100%; max-width: none; font-size: 12px; }
    /* the bar wraps at this width, so the CTA takes the full row rather than
       sitting as a stub next to the note */
    .imp-rebatebar-cta { flex: 1 1 100%; justify-content: center; padding: 15px 18px; font-size: 12px; }
}


/* ============================================================
   24. Social sign-in (Google + Telegram) — Views/Account/Login.cshtml
       and Register.cshtml.
   ============================================================ */

.imp-social { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }

/* Both vendors render their own control and neither can be restyled from here —
   Google injects a button, Telegram an iframe. So the square is ours and the
   vendor control is stretched over it at zero opacity: the member sees our
   button, the click lands on theirs. */
.imp-social-btn {
    position: relative;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line-2);
    color: var(--imp-text-2);
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}

.imp-social-btn:hover { border-color: var(--imp-lime); color: var(--imp-lime); }
.imp-social-btn > svg { width: 22px; height: 22px; display: block; }
/* Telegram's mark takes the square's colour and follows the hover; Google's
   is the brand's own four colours and must not. */
.imp-social-btn > svg[viewBox="0 0 48 48"] { width: 21px; height: 21px; }

/* Google's widget gets the same treatment as Telegram's: invisible, over the
   square, still the click target. It used to show through, because Google's
   terms ask for their button to be visible — but it cannot be kept dark.
   data-theme="filled_black" is advisory, a signed-in browser gets the light
   button back, and once GSI upgrades to its cross-origin iframe no stylesheet
   of ours reaches inside it at all. The result was a white tile in the middle
   of a dark page. The square below carries Google's own four-colour G so the
   member still sees, and clicks, a Google button. */
/* The invisible layer is the click target, so Google’s control has to fill the
   square: its own button is 40px inside our 52px and would leave a dead ring
   around the edge of something that plainly looks like a button. Stretching
   every element in there has no visual cost — the whole layer is opacity 0. */
.imp-social-embed .g_id_signin,
.imp-social-embed .g_id_signin * {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Telegram's iframe: invisible, but still the click target */
.imp-social-embed {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden;
}

.imp-social-embed iframe { width: 100% !important; height: 100% !important; border: 0; }

@media only screen and (max-width: 767px) {
    .imp-social-btn { width: 48px; height: 48px; }
}

/* linked accounts, on the profile page */
.imp-linked { display: flex; flex-direction: column; gap: 10px; }

.imp-linked-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
}

.imp-linked-id { min-width: 0; }
.imp-linked-provider { font: 700 11px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-text-3); }

.imp-linked-value {
    font: 700 14px/1.3 var(--imp-sans);
    color: var(--imp-text);
    margin-top: 7px;
    word-break: break-all;
}

.imp-linked-value.none { color: var(--imp-text-4); font-weight: 400; }

.imp-linked-action { flex: none; display: flex; align-items: center; margin: 0; }

.imp-linked-unlink {
    background: transparent;
    border: 1px solid var(--imp-line-2);
    border-radius: 0;
    padding: 11px 15px;
    font: 700 11px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-text-2);
    cursor: pointer;
}

.imp-linked-unlink:hover { border-color: var(--imp-red); color: var(--imp-red); }

@media only screen and (max-width: 767px) {
    .imp-linked-row { padding: 12px 14px; gap: 12px; }
    .imp-linked-value { font-size: 13px; }
}

/* ============================================================
   25. Change login password (Views/Account/ChangePassword.cshtml)

   The last page still on the legacy gold theme — a setting-bg.webp
   banner, a #efdb35 rule and a gold gradient button. It is a Profile
   sub-page, so it borrows the wallet family's shell and adds only what
   a password form needs: a reveal control per field and a live rule
   list. Both rules shown are the ones AccountServices actually
   enforces; the page invents no others.
   ============================================================ */

/* back to the parent page — quieter than a button, louder than a link */
.imp-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 11px/1 var(--imp-cond);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--imp-text-2);
}

.imp-back:hover { color: var(--imp-lime); text-decoration: none; }
.imp-back i { font-size: 10px; }

/* field + reveal control. The input keeps its own border and the button
   sits inside it, so the control reads as one field rather than a field
   with something bolted on.

   76px is the reserve for SHOW/HIDE at 10px condensed (the button
   measures 67px) — if those two strings are ever translated to
   something longer, raise it to match, because the button is absolutely
   positioned and will otherwise sit over the end of what is typed. */
.imp-pw { position: relative; display: block; }
.imp-pw .form-control { padding-right: 76px; }

.imp-pw-eye {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    padding: 0 14px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--imp-line-2);
    font: 700 10px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--imp-text-3);
    cursor: pointer;
}

.imp-pw-eye:hover { color: var(--imp-lime); }
.imp-pw-eye.on { color: var(--imp-lime); }

/* live rule list */
.imp-pw-rules { display: flex; flex-direction: column; gap: 8px; }

.imp-pw-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 12px/1.4 var(--imp-sans);
    color: var(--imp-text-3);
}

/* an empty square that fills in when the rule passes — the shape carries
   the state as well as the colour, so it still reads without colour */
.imp-pw-tick {
    flex: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--imp-line-2);
    position: relative;
}

.imp-pw-rule.ok { color: var(--imp-text-2); }
.imp-pw-rule.ok .imp-pw-tick { border-color: var(--imp-lime); background: var(--imp-lime); }

.imp-pw-rule.ok .imp-pw-tick::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--imp-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.imp-pw-rule.bad { color: var(--imp-red); }
.imp-pw-rule.bad .imp-pw-tick { border-color: var(--imp-red); }

@media only screen and (max-width: 767px) {
    .imp-pw-eye { padding: 0 12px; }
    .imp-pw .form-control { padding-right: 66px; }
}

/* ============================================================
   26. Slot game picker (Views/Game/SlotGame.cshtml)
       Spec: design_handoff_impulse88_stadium/SLOT_PICKER.md

   The page had no chrome of its own: a bare search box, a gold
   gradient category grid and a stretched 8-across thumbnail wall
   with the game names commented out. Six columns at 1280 gives a
   tile wide enough to carry a name; eight gave 145px.
   ============================================================ */

.imp-slot { padding-bottom: 30px; }

/* ---- provider header ---- */
.imp-slot-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 26px;
    background: linear-gradient(100deg, var(--imp-surface-3), var(--imp-bg-2));
    border-bottom: 1px solid var(--imp-line);
    border-left: 4px solid var(--imp-lime);
}

.imp-slot-back {
    flex: none;
    font: 700 13px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-text-2);
    white-space: nowrap;
}

.imp-slot-back:hover { color: var(--imp-lime); text-decoration: none; }

.imp-slot-rule { flex: none; width: 1px; height: 34px; background: var(--imp-line-2); }
.imp-slot-rule-sm { flex: none; width: 1px; height: 10px; background: var(--imp-line-2); }

.imp-slot-plate {
    flex: none;
    width: 86px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imp-slot-plate img { max-width: 100%; max-height: 100%; object-fit: contain; }

.imp-slot-id { flex: 1; min-width: 0; }

.imp-slot-provider {
    font: 800 22px/1.1 var(--imp-sans);
    letter-spacing: -.025em;
    color: var(--imp-text);
    overflow-wrap: anywhere;
}

.imp-slot-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font: 700 10px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-text-3);
}

.imp-slot-online { display: flex; align-items: center; gap: 6px; }

.imp-slot-online i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--imp-lime);
}

/* ---- search + sort ---- */
.imp-slot-tools { display: flex; align-items: center; gap: 14px; padding: 18px 26px 0; flex-wrap: wrap; }

.imp-slot-search { position: relative; flex: 1; min-width: 220px; }

.imp-slot-search svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    fill: var(--imp-text-3);
    pointer-events: none;
}

.imp-slot-search .form-control {
    padding: 13px 15px 13px 41px !important;
    background: var(--imp-surface-2) !important;
    border: 1px solid var(--imp-line-2) !important;
    font: 400 14px/1.4 var(--imp-sans);
}

.imp-slot-search .form-control::placeholder { color: var(--imp-text-4); }

/* ---- category chips ----
   A scrolling row rather than a fixed grid, and no gold gradient: the
   old .selected was linear-gradient(#ffe588, #ffda54), left over from
   the pre-Impulse88 theme. */
.imp-slot-chips {
    display: flex;
    gap: 8px;
    padding: 14px 26px 0;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.imp-slot-chips::-webkit-scrollbar { display: none; }

/* NOT text-transform: uppercase. AllGameList.GameType is stored mixed
   case — "ECasino", "POP Jackpot Slots", "Progressive Slot Machines" —
   and uppercasing it showed a label that is not what is in the column.
   The condensed face and the tracking carry the design; the string
   itself is verbatim.

   The selector carries .slot_game_category on purpose. Bootstrap ships
   `a:not([href]):not([tabindex]) { color: inherit }` at (0,2,1), and
   these chips are onclick-only anchors with no href — so a plain
   `.imp-slot-chips a` at (0,1,1) LOSES and the colour silently fell
   through to body white. Two classes ties Bootstrap and wins on order.
   White is then set deliberately here, which is what the page has been
   showing all along; the design's #8ea3b5 would read as a dimming. */
.imp-slot-chips a.slot_game_category {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    font: 700 12px/1 var(--imp-cond);
    letter-spacing: .13em;
    color: var(--imp-text);
    cursor: pointer;
    white-space: nowrap;
}

.imp-slot-chips a span { font: 700 10px/1 var(--imp-sans); letter-spacing: 0; color: var(--imp-text-4); }

/* Hover goes to the black ground, not just a lime border — a border-only
   change was too quiet to read as "this is what you are about to pick".
   Black rather than lime keeps it distinct from .selected, which is the
   lime fill below. */
.imp-slot-chips a.slot_game_category:hover {
    background: var(--imp-bg);
    border-color: var(--imp-lime);
    color: var(--imp-lime);
    text-decoration: none;
}

.imp-slot-chips a.slot_game_category:hover span { color: var(--imp-text-3); }

/* The :hover above is (0,3,1), so the selected chip has to restate
   itself at that weight or hovering the one you already picked would
   flip it to the black hover state. */
.imp-slot-chips a.slot_game_category.selected,
.imp-slot-chips a.slot_game_category.selected:hover {
    background: var(--imp-lime);
    border-color: var(--imp-lime);
    color: var(--imp-bg);
}

.imp-slot-chips a.slot_game_category.selected span,
.imp-slot-chips a.slot_game_category.selected:hover span { color: rgba(10, 15, 20, .55); }

/* ---- result line ---- */
.imp-slot-result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 26px 0;
    font: 700 11px/1.4 var(--imp-cond);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--imp-text-3);
}

.imp-slot-result b { color: var(--imp-text-2); font-weight: 700; }

/* ---- grid ----
   Eight across at the owner's request. The spec called for six because
   eight leaves ~141px per tile at 1280 and the game name gets tight;
   the tile body below is sized down to suit rather than letting every
   name ellipsis on the first line. */
.imp-slot-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 26px 30px;
}

.imp-slot-grid.is-empty { padding-bottom: 0; }
.imp-slot-cell { display: block; min-width: 0; }

.imp-slot-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--imp-surface);
    border: 1px solid var(--imp-line);
    overflow: hidden;
    transition: border-color .12s ease, transform .12s ease;
}

.imp-slot-tile:hover { border-color: var(--imp-lime); transform: translateY(-3px); text-decoration: none; }

/* The art keeps the thumbnail's own proportions. Providers do not ship one
   shape: Joker, JILI, Playtech, Playstar, Turbo and Aviatrix are squares,
   InOut is 3:4 portrait, Evo888 mixes squares with landscape covers. The
   earlier fixed 3/4 box with object-fit: cover cut a quarter off every
   square and most of a landscape cover, so the game art no longer matched
   what the provider drew. Rows still line up: the grid stretches each cell
   to the tallest tile in its row and the tile body absorbs the difference,
   so the name/foot row sits at one height across the row.
   min-height keeps a lazy-loading cell from collapsing to nothing before
   its image arrives. */
.imp-slot-art { position: relative; background: var(--imp-bg-2); min-height: 48px; }

.imp-slot-art img {
    display: block;
    width: 100%;
    height: auto;
}

.imp-slot-jackpot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 7px 9px;
    background: linear-gradient(transparent, rgba(10, 15, 20, .94) 42%);
}

.imp-slot-jackpot span {
    display: block;
    font: 700 8px/1 var(--imp-cond);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--imp-lime);
}

.imp-slot-jackpot b {
    display: block;
    margin-top: 3px;
    font: 800 13px/1 var(--imp-sans);
    font-variant-numeric: tabular-nums;
    color: var(--imp-text);
}

.imp-slot-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 9px 9px 10px;
}

/* Clamped to two lines: slot titles run long and a third line would push
   the foot row out of alignment across the row of tiles. */
.imp-slot-name {
    font: 700 11px/1.35 var(--imp-sans);
    letter-spacing: -.01em;
    color: var(--imp-text);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.imp-slot-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    font: 700 9px/1 var(--imp-cond);
    letter-spacing: .14em;
    color: var(--imp-text-3);
}

/* the GameType, verbatim — see the note on .imp-slot-chips a. Some are
   long ("Progressive Slot Machines"), so it truncates rather than
   wrapping and pushing PLAY out of the tile. */
.imp-slot-foot > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imp-slot-play { flex: none; color: var(--imp-lime); text-transform: uppercase; white-space: nowrap; }

/* ---- empty state ---- */
.imp-slot-empty {
    margin: 0 26px 30px;
    padding: 32px 20px;
    background: var(--imp-surface-2);
    border: 1px dashed var(--imp-line-2);
    text-align: center;
}

.imp-slot-empty-title { font: 700 15px/1.3 var(--imp-sans); color: var(--imp-text); overflow-wrap: anywhere; }
.imp-slot-empty-body { margin-top: 6px; font: 400 12px/1.5 var(--imp-sans); color: var(--imp-text-2); }

.imp-slot-empty-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.imp-slot-empty-actions .btn-primary { padding: 12px 22px !important; font-size: 13px !important; }
.imp-slot-empty-actions .imp-btn-ghost { padding: 12px 20px !important; font-size: 13px; }

/* 8 is the full-desktop count; stepping straight from 8 to 4 would halve
   the tile at one breakpoint, so 6 sits in between. */
@media only screen and (max-width: 1279px) {
    .imp-slot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media only screen and (max-width: 1023px) {
    .imp-slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media only screen and (max-width: 767px) {
    .imp-slot-head { gap: 12px; padding: 13px 16px; flex-wrap: wrap; }
    .imp-slot-back { font-size: 0; }
    .imp-slot-back span { font-size: 15px; }
    .imp-slot-rule { display: none; }
    .imp-slot-plate { width: 52px; height: 28px; }
    .imp-slot-provider { font-size: 14px; }
    .imp-slot-sub { margin-top: 3px; font-size: 9px; gap: 8px; }

    .imp-slot-tools { padding: 14px 16px 0; }
    .imp-slot-search { flex: 1 1 100%; }

    .imp-slot-chips { padding: 12px 16px 0; }
    .imp-slot-result { padding: 16px 16px 0; font-size: 10px; letter-spacing: .14em; }

    .imp-slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 10px 16px 24px; }
    .imp-slot-name { font-size: 10px; }
    .imp-slot-body { padding: 9px 9px 10px; }
    .imp-slot-foot { font-size: 8px; margin-top: 6px; }

    /* just the figure — the label costs a line the tile does not have */
    .imp-slot-jackpot { padding: 6px 7px; }
    .imp-slot-jackpot span { display: none; }
    .imp-slot-jackpot b { margin-top: 0; font-size: 11px; color: var(--imp-lime); }

    .imp-slot-empty { margin: 0 16px 24px; }
}


/* ============================================================
   27. FAQ — Views/Home/FAQ.cshtml

   A reading page, so it is set as one: a single measure, generous
   leading, and nothing that moves. No accordion — every answer is
   short enough that hiding it behind a click would cost a tap and
   save nothing, and a visitor scanning for one line can find it
   faster in a flat list than in eighteen closed drawers.
   ============================================================ */

/* The reading measure lives HERE, on the container, not on each paragraph.
   It used to be the other way round — li and lead were capped at 66ch while
   this box ran the full 1360px — so the text sat in a narrow column with
   ~870px of empty page beside it and read as a wrapping bug rather than as
   a set measure. Capping the container instead centres the whole page and
   lets the headings, rules and list numbers share the same edge. */
.imp-faq {
    background: linear-gradient(180deg, var(--imp-surface), var(--imp-bg-2));
    padding: 34px 28px 40px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.imp-faq-h1 {
    font: 800 30px/1.1 var(--imp-sans);
    letter-spacing: -.02em;
    color: var(--imp-text);
    margin: 0 0 12px;
}

.imp-faq-lead {
    font: 400 14px/1.7 var(--imp-sans);
    color: var(--imp-text-2);
    margin: 0 0 8px;
}

/* The lime hairline is the only accent on the page and it marks the
   group boundary, which is the one thing a reader scanning for a
   section actually needs to see. */
.imp-faq-group {
    border-top: 1px solid var(--imp-line);
    margin-top: 30px;
    padding-top: 24px;
}

.imp-faq-group > h2 {
    font: 700 12px/1 var(--imp-cond);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--imp-lime);
    margin: 0 0 20px;
}

.imp-faq-item { margin-bottom: 22px; }
.imp-faq-item:last-child { margin-bottom: 0; }

.imp-faq-item > h3 {
    font: 700 15px/1.35 var(--imp-sans);
    letter-spacing: -.01em;
    color: var(--imp-text);
    margin: 0 0 6px;
}

.imp-faq-item > p {
    font: 400 14px/1.75 var(--imp-sans);
    color: var(--imp-text-2);
    margin: 0;
}

@media only screen and (max-width: 767px) {
    .imp-faq { padding: 24px 18px 30px; }
    .imp-faq-h1 { font-size: 24px; }
    /* No max-width resets needed any more: the only cap is the container's
       640px, and every phone is narrower than that. */
}

/* ---- numbered legal clauses — Views/Home/TNC.cshtml ----

   The T&C reuses .imp-faq above, because a terms page and an FAQ page are the
   same problem: one column of prose somebody has to get through. The only
   thing it needs that the FAQ does not is a numbered clause, and clause
   numbers have to survive being referred to ("under clause 3") — so they are
   a real <ol> with a counter, not text typed into the sentence, which is what
   the page did before.

   The number sits in its own gutter rather than inline, so every clause starts
   on the same left edge and the column of lime numerals doubles as the scan
   line down the page. Body type matches .imp-faq-item > p exactly; a clause
   and an answer should not read as two different kinds of text. */
.imp-legal-list {
    list-style: none;
    counter-reset: imp-legal;
    margin: 0;
    padding: 0;
}

.imp-legal-list > li {
    counter-increment: imp-legal;
    position: relative;
    padding-left: 32px;
    margin-bottom: 20px;
    font: 400 14px/1.75 var(--imp-sans);
    color: var(--imp-text-2);
}

.imp-legal-list > li:last-child { margin-bottom: 0; }

/* Right-aligned in the gutter so 1 and 10 stay on one edge. line-height
   matches the first line of the clause it labels, so they sit level. */
.imp-legal-list > li::before {
    content: counter(imp-legal);
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    text-align: right;
    font: 700 14px/1.65 var(--imp-cond);
    color: var(--imp-lime);
}

@media only screen and (max-width: 767px) {
    .imp-legal-list > li { padding-left: 26px; margin-bottom: 18px; max-width: none; }
    .imp-legal-list > li::before { width: 16px; }
}

/* Footer text links — the Help column. The other two footer columns hold
   images, so there was no link treatment in this section at all. */
/* margin-top matches .imp-footer-pays and .imp-footer-socials: all three sit
   under an .imp-footer-head and must clear it by the same amount. This rule
   lives ~880 lines from its two siblings, which is how it ended up the only
   one without the gap — FAQ was butting straight against the HELP heading. */
.imp-footer-links { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; margin-top: 14px; }

.imp-footer-links a,
.imp-footer-links a:not([href]):not([tabindex]) {
    font: 400 13px/1 var(--imp-sans);
    color: var(--imp-text-2);
    text-decoration: none;
    transition: color .12s ease;
}

.imp-footer-links a:hover { color: var(--imp-lime); }