iframe {
    border: 0;
    width: 100%;
}

.mb-30-none {
    margin-bottom: -30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.navbar-collapse {
    flex-grow: 0;
}


.scrollToTop {
    position: fixed;
    bottom: 0;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: #4E01CE;
    border-radius: 5px;
    color: #fff;
    line-height: 45px;
    font-size: 20px;
    text-align: center;
    z-index: 9;
    cursor: pointer;
    transition: all 1s;
    transform: translateY(100%);
}

.scrollToTop.active {
    bottom: 30px;
    transform: translateY(0%);
    color: #fff;
}

.scrollToTop:hover {
    color: #fff;
}

.preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 99999999;
    overflow: visible;
    background: #00003E url(../images/preloader.gif) no-repeat center center;
    background-size: 400px 400px;
    display: none;
}

/* modal */
.copyable {
    cursor: pointer;
}

.custom-toast-container {
    position: fixed;
    bottom: 15px;
    right: 15px;
}

/* qr code */
.qrcode-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 280px;
    width: 280px;
}
.qrcode-container-bg {
    opacity: 0;
    transition: .2s all ease-out;
    pointer-events: none;
}
.qrcode-container:hover .qrcode-container-bg {
    opacity: 1;
    transition: .2s all ease-out;
    pointer-events: auto;
}
.qrcode-container #spinnerQRCode {
    height: 128px;
    width: 128px;
}

.w-fit-content {
    width: fit-content;
}
.min-inline-size {
    min-inline-size: max-content;
}

#debugModeText {
    font-size: inherit;
    line-height: inherit;
}

.game-title {
    color: white;
}

.input-label {
    width: max-content;
}

.delete-error-btn {
    cursor: pointer;

    width: 42px;
    height: 42px;
}

.grid-row-gap-default {
    grid-row-gap: 15px;
}

/* game page wrapper is a single-column grid (.container.d-grid): pin the
   column to the container width, otherwise any over-wide content inflates
   the track and the whole page gets horizontal scroll */
.container.d-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* mobile version game url: /game?mobile_x?... */
.mobile-container {
    width: 100%;
    /* the page wrapper is a grid (.container.d-grid): without these caps an
       over-wide panel element inflates the grid track and the whole page */
    min-width: 0;
    max-width: 100%;
    display: flex;
    gap: 25px;
}

.panels-container {
    height: calc(100vh - 61px - 24px - 50px);
    overflow-y: auto;
    /* over-wide content (tables, long strings) scrolls inside the panel
       instead of stretching the page */
    overflow-x: auto;
    min-width: 0;
    width: 70%;
}

/* panel cards live in single-column grids (.d-grid): pin the column width,
   otherwise one unshrinkable child (e.g. a table) widens every card */
.panels-container .d-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* tables inside panels: make them shrinkable, long values wrap in place */
.panels-container table {
    table-layout: fixed;
    width: 100%;
    word-break: break-word;
}

/* allow form controls in the side panels to shrink below their intrinsic
   width, so flex rows fit narrow (mobile) screens instead of stretching
   the panel wider than the viewport */
.panels-container .form-control,
.panels-container .form-select,
.panels-container .input-group,
.panels-container .choices {
    min-width: 0;
}

/* table-like rows for WHEEL/ROULETTE restrictions (Type | Min | Max, Name | Value):
   shared grid columns keep the fields aligned across rows, odd rows get a
   slightly darker background */
.restrictions-table-row {
    display: grid;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
}

.restrictions-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.restrictions-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

div.restrictions-table-row:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.phone {
    display: flex;
    justify-content: center;

    width: 50%;
    position: relative;
    overflow: hidden;
}

/* landscape preview is wider than tall: widen the page's outer container (which is
   already centered by bootstrap's own auto margins) to reclaim the blue side margins,
   then let the phone frame grow into that extra space while the settings panel -
   pinned to its portrait width by JS - stays the same size. */
@media (min-width: 992px) {
    .container.is-landscape {
        /* cap the growth at 1600px, but always leave at least 40px of blue margin per side */
        max-width: min(1600px, calc(100vw - 80px));
    }

    .mobile-container.is-landscape .phone {
        flex-grow: 1;
    }

    .mobile-container.is-landscape .panels-container {
        flex-shrink: 0;
        flex-grow: 0;
    }
}


.game-desktop-iframe, .game-mobile-iframe {
    border: 3px solid lightslategrey;
    border-radius: 0.75rem;
}

.game-screen-wrapper {
    position: relative;
}

.history-wrapper {
    min-height: 30vh;
}

.game-image {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.aviator-icon-wrap {
    width: 200px;
    height: 200px;
    overflow: hidden;
    padding: 0.25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.aviator-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 48%;
    display: block;
}

.aviator-start-card {
    width: 100%;
    max-width: 26rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.aviator-icon-wrap--hero {
    width: 200px;
    height: 200px;
}

@media (min-width: 400px) {
    .aviator-start-card {
        max-width: 30rem;
    }

    .aviator-icon-wrap--hero {
        width: 220px;
        height: 220px;
    }
}

@media (min-width: 576px) {
    .aviator-start-card {
        max-width: 36rem;
    }

    .aviator-icon-wrap--hero {
        width: 240px;
        height: 240px;
    }
}

@media (min-width: 992px) {
    .aviator-start-card {
        max-width: 50rem;
    }

    .aviator-icon-wrap--hero {
        width: 260px;
        height: 260px;
    }
}

.aviator-start-card .aviator-icon-wrap {
    margin-left: auto;
    margin-right: auto;
}

/* games toolbar (search / type filter / favorites toggle) */
.games-toolbar__field {
    width: 280px;
    max-width: 100%;
    flex-wrap: nowrap;
}

.games-toolbar__field .input-group-text {
    background-color: #f8f9fa;
    color: #6c757d;
}

.favorites-filter-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #fff;
    color: #6c757d;
    font-size: 18px;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.favorites-filter-btn:hover:not(:disabled) {
    color: #f5b301;
    border-color: #f5b301;
}

.favorites-filter-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(245, 179, 1, .35);
}

.favorites-filter-btn.is-active {
    color: #f5b301;
    border-color: #f5b301;
    background-color: #fff8e1;
}

.favorites-filter-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* favorite star on each game card */
.game-card-wrap {
    position: relative;
}

.game-favorite-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .9);
    color: #6c757d;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease-in-out, visibility .15s ease-in-out, color .15s ease-in-out, background-color .15s ease-in-out, transform .15s ease-in-out;
    z-index: 2;
}

.game-card-wrap:hover .game-favorite-btn,
.game-card-wrap:focus-within .game-favorite-btn,
.game-favorite-btn.is-favorite {
    opacity: 1;
    visibility: visible;
}

.game-favorite-btn:hover {
    color: #f5b301;
    background-color: #fff;
    transform: scale(1.08);
}

.game-favorite-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(245, 179, 1, .35);
}

.game-favorite-btn.is-favorite {
    color: #f5b301;
}

/* choices customization */
.client-url-form {
    position: relative;
    z-index: 20;
}

.client-url-form-group {
    z-index: 20;
    flex-wrap: nowrap;
}

/* Protocol WL select — make Choices group headers stand out from options */
.protocol-wl-select .choices__list--dropdown .choices__group,
.protocol-wl-select .choices__list[aria-expanded] .choices__group {
    background-color: rgba(0, 0, 0, 0.04);
    color: #495057;
    font-weight: 600;
    border-bottom: 1px solid #dee2e69c;
}

/* Shared width so the Orientation (Portrait/Landscape) and Ratio controls line up evenly. */
.mobile-preview-group {
    width: 8.5rem;
    justify-content: flex-start;
    box-sizing: border-box;
}

.mobile-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 8.5rem);
    align-items: end;
    gap: 0.25rem 1rem;
}

.mobile-ratio-select {
    position: relative;
    /* Must stay above .client-url-form (z-index: 20) so its dropdown list
       doesn't fall behind the Client Build field below it. */
    z-index: 21;
    width: 100%;
    min-width: 6rem;
}

.mobile-ratio-select.mobile-ratio-select .choices__inner {
    min-height: 1.5rem;
    padding: 0 4px;
    display: flex;
    align-items: center;
}

.mobile-ratio-select .choices__list--single {
    padding: 0 16px 0 4px;
}

.mobile-ratio-select .choices__item {
    white-space: nowrap;
    word-break: keep-all;
}

.mobile-ratio-select .choices__list--dropdown .choices__item--selectable {
    padding-right: 10px;
}

.mobile-ratio-select .choices__list--single .choices__item strong {
    font-weight: normal;
}

.tournament-url-form {
    position: relative;
    z-index: 19;
}

.tournament-url-form-group {
    z-index: 19;
    flex-wrap: nowrap;
}

.nanoplayer-url-form, .runner-url-form  {
    position: relative;
    z-index: 18;
}

.nanoplayer-url-form-group, .runner-url-form-group {
    z-index: 18;
    flex-wrap: nowrap;
}

.live-runner-url-form {
    position: relative;
    z-index: 17;
}

.live-runner-url-form-group {
    z-index: 17;
    flex-wrap: nowrap;
}


.choices__button__custom {
    background-size: 30px;
}


@media (max-width: 1199px) {
    .cmn-btn {
        padding: 12px 20px;
    }
}

@media (max-width: 991px) {
    /* hard stop for horizontal page scroll on narrow screens: anything wider
       than the viewport (tooltips, poppers, stray content) gets clipped
       instead of stretching the page */
    body {
        overflow-x: hidden;
    }

    .section-header {
        margin-bottom: 30px;
    }

    /* mobile version game url: /game?mobile_x?... */
    .mobile-container {
        flex-direction: column;
    }

    .panels-container {
        overflow-y: auto;
        height: auto;
        width: auto;
    }

    .phone {
        margin: 0 auto;
        width: auto;
    }
}

@media (max-width: 767px) {
    .section-header {
        margin-top: -12px;
        margin-bottom: 30px;
    }

    .cmn-btn {
        padding: 10px 15px;
    }

    .game-favorite-btn {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 575px) {
    /* restrictions table rows are too cramped on narrow screens: stack the
       fields of each row in a column (zebra still separates the rows) */
    .restrictions-cols-2,
    .restrictions-cols-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .game-image {
        width: 275px;
        height: 275px;
    }

    .aviator-icon-wrap:not(.aviator-icon-wrap--hero) {
        width: 275px;
        height: 275px;
    }
}