/* ======================================================================
   RESTORED ORIGINAL RULES - required by play.php / games.php
   ----------------------------------------------------------------------
   play.php loads casino.css (NOT casino-kt.css) for the game player, the
   guest login gate and the error state. Those ~90 rules were lost when this
   file was replaced with the .kt-* redesign below, which made the play page
   render unstyled: a full-height back chevron, the "Game ID" row, and the
   game iframe falling back to its default 300x150 at the bottom of a
   844px viewport. Appended verbatim so those pages are styled again.
   No selector below overlaps the .kt-* redesign, so nothing is overridden.
   ====================================================================== */
/* Casino / game pages — game sits inside normal site layout (sidebar + topbar) */
.page-game-play .main-content.game-play-page {
    padding: 16px 20px 20px !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

.game-play-page {
    padding: 16px 20px 20px !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

.game-player {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 14px;
}

/* Prevent global svg { width:100%; height:100% } from blowing up toolbar icons */
.game-player svg {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    flex-shrink: 0;
}

/* — Toolbar — */
.game-player__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.game-player__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e4e4e7;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.game-player__back svg {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.85;
}

.game-player__back:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.game-player__id {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.game-player__id-label {
    font-size: 13px;
    font-weight: 600;
    color: #71717a;
    white-space: nowrap;
    flex-shrink: 0;
}

.game-player__id-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 500;
    color: #d4d4d8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.game-player__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #a1a1aa;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.game-player__icon-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.game-player__icon-btn.is-copied {
    color: #4ade80;
}

.game-player__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.game-player__round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: #d4d4d8;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.game-player__round-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.game-player__icon-btn svg {
    width: 16px !important;
    height: 16px !important;
}

.game-player__round-btn svg {
    width: 18px !important;
    height: 18px !important;
}

/* — Game stage — */
.game-player__stage {
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - var(--topbar-height) - 120px);
    max-height: calc(100dvh - var(--topbar-height) - 120px);
    display: flex;
    background: #050608;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
}

.game-frame-wrap {
    flex: 1;
    min-height: 0;
    background: #000;
    position: relative;
    overflow: hidden;
}

.game-frame-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #050608;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.game-frame-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.game-frame-loader__spinner {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    animation: game-frame-spin 0.75s linear infinite;
}

.game-frame-loader__text {
    font-size: 14px;
    font-weight: 500;
    color: #71717a;
    margin: 0;
}

@keyframes game-frame-spin {
    to { transform: rotate(360deg); }
}

.game-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    position: relative;
    z-index: 1;
    background: #000;
}

.game-player__stage.is-fullscreen {
    max-height: none;
    border-radius: 0;
    border: none;
}

.page-game-play .main-content {
    padding-bottom: 20px !important;
}

.page-game-play .chat-fab {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.45);
}

.page-game-play .chat-fab svg {
    width: 22px !important;
    height: 22px !important;
}

@media (max-width: 768px) {
    .game-play-page {
        padding: 12px !important;
    }

    .game-player__toolbar {
        flex-wrap: wrap;
    }

    .game-player__id {
        order: 3;
        flex: 1 1 100%;
    }

    .game-player__actions {
        margin-left: 0;
    }
}

.game-error {
    text-align: center;
    padding: 80px 24px;
}

.game-error h1 {
    margin-bottom: 12px;
}

.game-error p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* Login gate (guests opening a game) */
.game-login-gate-page {
    min-height: calc(100vh - var(--topbar-height, 64px));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 48px;
}

.game-login-gate {
    width: min(520px, 100%);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.game-login-gate__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
}

.game-login-gate__back:hover {
    color: #fff;
}

.game-login-gate__back svg {
    width: 18px;
    height: 18px;
}

.game-login-gate__card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(163, 38, 255, 0.28);
    background: linear-gradient(165deg, rgba(28, 21, 48, 0.98) 0%, rgba(16, 12, 28, 0.98) 100%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.game-login-gate__thumb {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: rgba(0, 0, 0, 0.35);
}

.game-login-gate__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.game-login-gate__eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c4b5fd;
}

.game-login-gate__title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.game-login-gate__provider {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.game-login-gate__text {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.game-login-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.game-login-gate__btn {
    flex: 1 1 120px;
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.game-login-gate__btn--primary {
    background: linear-gradient(135deg, #a326ff 0%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
}

.game-login-gate__btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(163, 38, 255, 0.28);
    color: #fff;
}

@media (max-width: 560px) {
    .game-login-gate__card {
        grid-template-columns: 1fr;
    }

    .game-login-gate__thumb {
        max-height: 180px;
        aspect-ratio: 16 / 10;
    }
}

/* Games library */
.games-library {
    padding-top: 8px;
    padding-bottom: 32px;
}

.games-library__header {
    margin-bottom: 28px;
}

.games-library__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 8px;
}

.games-library__header h1 {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin: 0;
}

.games-library__count {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: #c084fc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.games-library__sub {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    max-width: 720px;
    margin: 0;
}

.provider-tabs-wrap {
    margin-bottom: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 95%, transparent);
}

.provider-tabs-wrap::-webkit-scrollbar {
    display: none;
}

.provider-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding-bottom: 4px;
    min-width: min-content;
}

.provider-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.provider-tab:hover {
    color: #fff;
    border-color: rgba(163, 38, 255, 0.4);
    background: var(--bg-card-hover);
}

.provider-tab.active {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.22), rgba(124, 58, 237, 0.1));
    border-color: rgba(168, 85, 247, 0.55);
    color: #fff;
    box-shadow: 0 4px 18px rgba(124, 58, 237, 0.22);
}

.provider-tab__count {
    font-size: 11px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.provider-tab.active .provider-tab__count {
    background: rgba(255, 255, 255, 0.16);
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 168px));
    gap: 18px;
    justify-content: start;
}

.games-grid__card {
    display: block;
    width: 100%;
    max-width: 168px;
}

.games-grid .game-tile {
    width: 100%;
    max-width: 168px;
}

.games-grid .game-tile--slot,
.games-grid .game-tile--original,
.games-grid .game-tile--live,
.games-grid .game-tile--mini {
    width: 100%;
    max-width: 168px;
}

.games-grid .game-tile__cover {
    width: 100%;
    max-width: 168px;
    height: auto;
    aspect-ratio: 3 / 4;
}

.games-grid .game-tile:hover .game-tile__cover {
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.25);
}

.games-library__empty {
    text-align: center;
    padding: 64px 24px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.games-library__empty p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 15px;
}

.game-tile__provider-tag {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.provider-logo--pragmatic { color: #fbbf24; }
.provider-logo--hacksaw { color: #f87171; }
.provider-logo--originals { color: #a855f7; }

/* Phones — 3 game tiles per row (all providers: BGaming, slots, originals, etc.) */
@media (max-width: 768px) {
    .games-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .games-grid > .games-grid__card,
    .games-grid > .game-tile {
        min-width: 0;
    }

    .games-grid__card,
    .games-grid .game-tile,
    .games-grid .game-tile--slot,
    .games-grid .game-tile--original,
    .games-grid .game-tile--live,
    .games-grid .game-tile--mini {
        width: 100%;
        max-width: none;
    }

    .games-grid .game-tile__cover {
        width: 100%;
        max-width: none;
        min-width: 0;
        height: auto;
        aspect-ratio: 3 / 4;
    }

    .games-grid .game-tile__img {
        width: 100%;
        height: 100%;
        min-width: 0;
        max-width: 100%;
        object-fit: cover;
    }

    .games-grid .game-tile__caption {
        padding: 8px 6px 10px;
    }

    .games-grid .game-tile__title {
        font-size: 9px;
        line-height: 1.2;
    }

    .games-grid .game-tile__provider-name {
        font-size: 7px;
        margin-top: 2px;
    }

    .games-grid .game-tile__play-icon {
        width: 36px;
        height: 36px;
    }

    .games-grid .game-tile__play-icon svg {
        width: 14px;
        height: 14px;
    }
}

/* ======================================================================
   IMMERSIVE FULL-SCREEN GAME VIEW  (logged-in, body.page-game-play)
   ----------------------------------------------------------------------
   The game used to sit inside the normal site chrome: a fixed header
   (64px), the category nav (53px), the bottom tab bar (72px) and the
   balance pill all overlaid it, so the launcher only got ~666px of an
   844px viewport and its top strip was unreachable. Let the game own the
   whole viewport instead and float the controls over it.

   The site chrome is hidden rather than removed, so leaving the page
   restores it. Scoped to .page-game-play so the guest login gate
   (.page-game-login-gate) keeps its header and back link.
   ====================================================================== */

body.page-game-play {
  overflow: hidden;
  background: #050608;
}

/* Site chrome that used to sit on top of the launcher. */
body.page-game-play header.hdr-main-content-bc,
body.page-game-play header.topbar,
body.page-game-play nav#mainNav,
body.page-game-play nav#ktBottomNav,
body.page-game-play .hdr-user-bc {
  display: none !important;
}

/* The player owns the viewport. 100dvh, not 100vh, so mobile browser
   chrome collapsing does not clip the bottom of the game. */
body.page-game-play .game-player {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  gap: 0;
}

body.page-game-play .game-player__stage {
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  margin: 0;
}

body.page-game-play .game-frame-wrap,
body.page-game-play .game-frame {
  width: 100%;
  height: 100%;
}

/* Controls float over the game. The bar itself is click-through so taps
   meant for the launcher still reach it; only the buttons catch the tap. */
body.page-game-play .game-player__toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  flex-wrap: nowrap;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 26px;
  background: linear-gradient(180deg, rgba(5, 6, 8, 0.82) 0%, rgba(5, 6, 8, 0.45) 55%, rgba(5, 6, 8, 0) 100%);
  pointer-events: none;
}

body.page-game-play .game-player__toolbar > * {
  pointer-events: auto;
}

/* The "Game ID" row was the debug-looking block in the middle of the
   screen. It has no place once the game is full screen. */
body.page-game-play .game-player__id {
  display: none;
}

body.page-game-play .game-player__actions {
  margin-left: auto;
}

/* Safe-area padding so the bottom tab bar never sat over the game. */
body.page-game-play .game-frame-wrap {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}