:root {
    --primary-color: #00dbff;
    --primary-light: #1A3F72;
    --battle-bg: #001533;
    --battle-card: #1A3F72;
    --battle-accent: #00dbff;
}

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*,
::after,
::before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent
}

@-ms-viewport {
    width: device-width
}

nav {
    display: block
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    text-align: left;
    background-color: #001533 !important;
}

h3 {
    margin-top: 0;
    margin-bottom: .5rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

ul {
    margin-top: 0;
    margin-bottom: 1rem
}

a {
    color: #4dd4ff;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:hover {
    color: #5eebff;
    text-decoration: underline
}

a:not([href]):not([tabindex]) {
    text-decoration: none
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
    text-decoration: none
}

a:not([href]):not([tabindex]):focus {
    outline: 0
}

img {
    vertical-align: middle;
    border-style: none
}

button {
    border-radius: 0
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

button {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button {
    overflow: visible
}

button {
    text-transform: none
}

button,
html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
button::-moz-focus-inner {
    padding: 0;
    border-style: none
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

h3 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit
}

h3 {
    font-size: 1.75rem
}

.list-unstyled {
    padding-left: 0;
    list-style: none
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width:576px) {
    .container {
        max-width: 540px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px
    }
}

.w-60{
    width:60px !important
}
.w-20{
    width:20px !important
}
.w-30{
    width:30px !important
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.col-12,
.col-3,
.col-4,
.col-6 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

.col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

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

.btn:focus,
.btn:hover {
    text-decoration: none
}

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
}

.btn.disabled,
.btn:disabled {
    opacity: .65
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer
}

.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
    background-image: none
}

a.btn.disabled {
    pointer-events: none
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #0062cc;
    border-color: #005cbf
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5)
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b
}

.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .5)
}

.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1c7430
}

.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5)
}

.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #117a8b;
    border-color: #10707f
}

.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(23, 162, 184, .5)
}

.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active {
    color: #212529;
    background-color: #d39e00;
    border-color: #c69500
}

.btn-warning:not(:disabled):not(.disabled).active:focus,
.btn-warning:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .5)
}

.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #bd2130;
    border-color: #b21f2d
}

.btn-danger:not(:disabled):not(.disabled).active:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5)
}

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active {
    color: #212529;
    background-color: #dae0e5;
    border-color: #d3d9df
}

.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(248, 249, 250, .5)
}

.btn-dark:not(:disabled):not(.disabled).active,
.btn-dark:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #1d2124;
    border-color: #171a1d
}

.btn-dark:not(:disabled):not(.disabled).active:focus,
.btn-dark:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5)
}

.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d
}

.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .5)
}

.btn-outline-success:not(:disabled):not(.disabled).active,
.btn-outline-success:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745
}

.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.btn-outline-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5)
}

.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8
}

.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.btn-outline-info:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(23, 162, 184, .5)
}

.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-warning:not(:disabled):not(.disabled):active {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107
}

.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.btn-outline-warning:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .5)
}

.btn-outline-danger:not(:disabled):not(.disabled).active,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545
}

.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5)
}

.btn-outline-light:not(:disabled):not(.disabled).active,
.btn-outline-light:not(:disabled):not(.disabled):active {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa
}

.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.btn-outline-light:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(248, 249, 250, .5)
}

.btn-outline-dark:not(:disabled):not(.disabled).active,
.btn-outline-dark:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40
}

.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.btn-outline-dark:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
}

.navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .5rem 1rem
}

.navbar>.container-fluid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.navbar-toggler:not(:disabled):not(.disabled) {
    cursor: pointer
}

@media (max-width:991.98px) {
    .navbar-expand-lg>.container-fluid {
        padding-right: 0;
        padding-left: 0
    }
}

@media (min-width:992px) {
    .navbar-expand-lg {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .navbar-expand-lg>.container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }
}

.page-link:not(:disabled):not(.disabled) {
    cursor: pointer
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5
}

.close:focus,
.close:hover {
    color: #000;
    text-decoration: none;
    opacity: .75
}

.close:not(:disabled):not(.disabled) {
    cursor: pointer
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none
}

.modal {
    background: #000000ad;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 130px auto;
    pointer-events: none
}

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height:300px;
    overflow-y: scroll;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0;
    font-size: 14px;
}
.modal-body p,h1,h2,h3,h4,h5,h6 {
    color: #000 !important;
}
.modal-header p,h1,h2,h3,h4,h5,h6 {
    color: #fff !important;
}

.modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem
}

.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5
}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem
}

.modal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #e9ecef
}

@media (min-width:576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 200px auto;
    }
}

@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {}

@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {}

@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {}

@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {}

.d-inline-block {
    display: inline-block !important
}

@supports ((position:-webkit-sticky) or (position:sticky)) {}

.ml-auto {
    margin-left: auto !important
}

.text-center {
    text-align: center !important
}

@media print {

    *,
    ::after,
    ::before {
        text-shadow: none !important;
        box-shadow: none !important
    }

    a:not(.btn) {
        text-decoration: underline
    }

    img {
        page-break-inside: avoid
    }

    h3,
    p {
        orphans: 3;
        widows: 3
    }

    h3 {
        page-break-after: avoid
    }

    @page {
        size: a3
    }

    body {
        min-width: 992px !important
    }

    .container {
        min-width: 992px !important
    }

    .navbar {
        display: none
    }
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media screen and (prefers-reduced-motion:reduce) {
    .form-control {
        transition: none
    }
}

.form-control::-ms-expand {
    background-color: transparent;
    border: 0
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
}

.form-control::-webkit-input-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control::-moz-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control::-ms-input-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control:disabled {
    background-color: #e9ecef;
    opacity: 1
}

.form-group {
    margin-bottom: 1rem
}

@import "css";

body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #fff;
}
.text-white{
    color: #fff !important;
}
.card {
    /* background: white; */
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    box-shadow: 0px 0px 3px 0px #d8d8d8;
    font-size: 12px;
    line-height: 12px;
    margin: 5px 0px;
    padding: 25px;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 0px max(10px, env(safe-area-inset-right, 0px)) 0px max(10px, env(safe-area-inset-left, 0px));
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top, 0px);
    background: #1A3F72;
    border: none;
    border-bottom: 1px solid rgba(0, 200, 255, 0.25);
    border-radius: 0;
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.08);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

#swal2-title {
    font-size: 18px;
}

.swal2-popup {
    width: 18em;
}

.swal2-icon {
    margin: 0.5em auto .6em;
}

.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: initial;
    background-image: initial;
    background-color: #00dbff;
    color: #102B55;
    font-size: 0.8em;
}

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: -260px;
    height: 100vh;
    z-index: 999;
    background: #1A3F72;
    color: #fff;
    transition: all 0.3s;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
    border-right: 1px solid rgba(0, 200, 255, 0.2);
}

#sidebar.active {
    left: 0;
}

#dismiss {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: rgba(0, 200, 255, 0.12);
    color: #00dbff;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 8px;
    border: 1px solid rgba(0, 200, 255, 0.35);
}

#dismiss:hover {
    background: rgba(0, 200, 255, 0.22);
    color: #fff;
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    top: 0px;
}

.overlay.active {
    display: block;
    opacity: 1;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: linear-gradient(135deg, #001533 0%, #1A3F72 100%);
    border-bottom: 1px solid rgba(0, 200, 255, 0.2);
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 200, 255, 0.15);
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 0.9em;
    display: block;
}

#sidebar ul li a:hover {
    color: #00dbff;
    background: rgba(0, 200, 255, 0.08);
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #00dbff;
    background: rgba(0, 200, 255, 0.12);
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: rgba(0, 200, 255, 0.06);
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: rgba(0, 200, 255, 0.15);
    color: #00dbff;
    border: 1px solid rgba(0, 200, 255, 0.45);
}

a.article,
a.article:hover {
    background: #00dbff !important;
    color: #102B55 !important;
}

#content {
    width: 100%;
    padding: 0px;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}

.menu-btn {
    background: transparent;
    font-size: 25px;
    color: white;
    padding: 5px 0px;
}

.home-sl-box {
    background: #1A3F72;
    border: 1px solid rgba(0, 200, 255, 0.25);
    color: white !important;
    padding: 15px 10px;
    display: block;
    border-radius: 10px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 0 14px rgba(0, 200, 255, 0.12);
}

.home-sl2-box {
    background: var(--primary-light);
    color: white !important;
    padding: 5px 0px 5px 5px;
    display: block;
    border-radius: 20px;
    font-weight: 400;
    font-size: 12px;
    text-align: left;
}

.home-sl2-box i {
    background: #f3f3f3;
    padding: 5px;
    border-radius: 50px;
    color: #262626;
    margin-right: 5px;
}

.tb-10 {
    margin: 10px 0px;
}

.tbmar-10 {
    margin: 10px 0px;
}

.tbmar-20 {
    margin: 20px 0px;
}

.tbmar-40 {
    margin: 40px 0px;
}

.noticebr {
    position: relative;
    font-size: 14px;
    padding: 8px;
    border: 1px solid rgb(254,0,0);
    background: #000;
}
.ntbtitle {
    position:absolute;
    top:0;
    left:0;
    font-size: 12px; 
    color: white;
    background: rgb(254,0,0);
    padding: 8px; 
    font-size: 14px; 
    white-space: nowrap; 
    font-weight: bold;
    
}

.row.game-list-inner {
    background: rgb(54, 51, 51);
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    box-shadow: 0px 0px 3px 0px #d8d8d8;
    font-size: 12px;
    line-height: 12px;
    margin: 5px 0px;
}

.game-time {
    padding: 10px 0px;
    display: block;
}

.game-time i {
    color: rgb(4,6,55);
}



.game-play {
    padding: 10px 0px;
    display: block;
}

.game-play i {
    color: white;
}

.game-list-inner i {
    font-size: 22px;
}

.game-list-box {
    display: block;
    padding: 5px 0px;
}

.game-list-box .gameName {
    font-size: 16px;
    font-weight: 500;
    display: block;
    padding: 2px 0px;
}

.game-list-box .gameon {
    font-size: 12px;
    font-weight: 500;
    display: block;
    color: red;
    padding: 0px;
    margin: 0px;
}

.game-list-box .gameoff {
    font-size: 12px;
    font-weight: 500;
    display: block;
    color: #A30000;
    padding: 0px;
    margin: 0px;
}

.game-list-box .gameResult {
    font-size: 16px;
    font-weight: 600;
    display: block;
    color: var(--primary-light);
    padding: 2px 0px;
}

.home-sl-box span {
    font-size: 12px;
    font-weight: 300;
}

.sgameName {
    font-size: 16px;
    font-weight: 500;
    display: block;
    padding: 15px 0px;
}

.sgameResut {
    font-size: 16px;
    font-weight: 500;
    display: block;
    padding: 15px 0px;
}

.sgame-play {
    padding: 6px 0px;
    display: block;
    background: var(--primary-light);
    color: white;
    width: 50px;
    border-radius: 5px;
    font-size: 12px;
}

.sgame-play:hover,
.sgame-play:focus {
    color: white ! important;
}

.splaydiv {
    display: flex;
    align-items: center;
    justify-content: center;
}

.subheadingtext {
    line-height: 16px;
    font-size: 14px;
}

#scroll-container {
    overflow: hidden;
}

#scroll-text {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;
}

@-moz-keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
    }

    to {
        -moz-transform: translateX(-100%);
    }
}

@-webkit-keyframes my-animation {
    from {
        -webkit-transform: translateX(100%);
    }

    to {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.w-100{
    width: 100% !important;
    
}

.add-money {
    display: inline-block;
    text-decoration: none;
    background: linear-gradient(135deg, #4CAF50, #81C784); /* Green gradient */
    border-radius: 10px; /* Circular shape */
    padding: 15px 20px; /* Padding for the buttons */
    color: white; /* Text color */
    font-size: 16px; /* Font size */
    font-weight: bold;
    transition: background 0.3s ease; /* Smooth transition for hover effect */
}

.withdraw, .play-game {
    display: inline-block;
    text-decoration: none;
    background: linear-gradient(135deg, #F44336, #EF5350); /* Red gradient */
    border-radius: 10px; /* Circular shape */
    padding: 15px 20px; /* Padding for the buttons */
    color: white; /* Text color */
    font-size: 16px; /* Font size */
    font-weight: bold;
    transition: background 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effects */
.add-money:hover {
    background: linear-gradient(135deg, #45A049, #66BB6A); 
}

.withdraw:hover, .play-game:hover {
    background: linear-gradient(135deg, #E53935, #F44336); 
}
.mt-2{margin-top: 10px !important;}

#footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    background-color: #000 ;
    box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.12);
    min-height: 60px;
    height: calc(62px + (constant(safe-area-inset-bottom))*1.1);
    height: calc(62px + (env(safe-area-inset-bottom))*1.1);
    display: flex;
    text-align: center;
    border-top: 1px solid white ;
}

#footer-bar a {
    color: #fff;
    padding-top: 12px;
    position: relative;
    flex: 1 1 auto;
}

#footer-bar a i {
    font-size: 18px;
    position: relative;
    z-index: 2;
}

#footer-bar a span {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 10px;
    font-weight: 500;
    margin-top: -4px;
    opacity: .7;
    font-family: Roboto, sans-serif !important;
}

.sideMenu span {
    padding-left: 5px;
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    text-align: center;
    font-weight: 600;
    color: #fff;
}

.HomegameTimetable div {
    display: block;
    text-align: left;
    border-bottom: 1px solid #e2e2e2;
    padding: 5px;
}

.HomegameTimetable div:last-child {
    border-bottom: 0px;
}

.HomegameTimetable i {
    font-size: 24px;
    color: var(--primary-color);
    margin: 0px 5px;
    float: left;
}

.HomegameTimetable .timeR {
    float: right;
}

.btn-theme {
    color: #fff;
    background-color: var(--primary-light);
    border-color: #fff;
}

.btn-theme:hover {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-theme-o {
    color: var(--primary-color);
    background-color: #fff;
    border-color: var(--primary-color);
}

.btn-theme-o:hover {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.modal-header {
    background: var(--primary-light);
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 0 #fff;
    opacity: 1;
}

.sidebar-header .Uname {
    display: block;
    font-weight: 500;
}

.sidebar-header .Umobile {
    display: block;
    font-weight: 300;
    font-size: 12px;
}

.btn-white {
    color: #212529;
    background-color: #fff;
    border-color: #f8f9fa;
}

.btn-login {
    text-align: center;
    display: block;
    width: 100%;
}
.game-option img {
    filter: invert(100%);
}
.btn-outline {
    border: 1px solid var(--primary-light);
    color: var(--primary-color);
}

.gdash3 {
    font-size: 18px;
    color: var(--primary-light);
    margin-bottom: -2px;
}

.card-full-page {
    min-height: 82vh;
    background: #000;
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    box-shadow: 0px 0px 3px 0px #d8d8d8;
    font-size: 12px;
    line-height: 12px;
    margin-bottom:10px;
    padding: 10px;
}

.bidtypebox {
    display: block;
    border: 1px solid #DCDCDCB3;
    border-radius: 5px;
    height: auto;
    text-align: center;
    font-size: 12px;
    margin: 0px 5px;
}

.bidtypebox p {
    padding: 5px 0px;
    margin: 0px;
    font-weight: 500;
    line-height: 12px;
    font-size: 12px;
}

.bidtypebox img {
    height: 80px;
    padding: 5px 15px;
}

.bidoptions-list .col-4 {
    margin: 0px;
    padding: 0px;
}

.dateGameIDbox {
    text-align: center;
    margin: 0px;
    border: 1px solid beige;
    display: block;
    padding: 5px 5px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
}

.dateGameIDbox p {
    margin: 0px;
    font-weight: 400;
}

.bidamtbox {
    text-align: center;
    margin: 0px;
    border: 1px solid beige;
    display: block;
    padding: 5px 5px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
}

.bidamtbox p {
    margin: 0px;
    font-weight: 400;
}

.walletamt {
    font-weight: 500;
}

.bidinputdiv input {
    width: 100%;
    border: 1px solid #8080809e;
    border-radius: 5px;
    text-align: center;
    padding: 10px 5px;
    cursor: pointer;
}

.bidinputdiv lable {
    text-align: center;
    display: block;
    padding-bottom: 5px;
}

.bidinputdiv {
    margin: 5px 0px;
}

.subheading {
    font-size: 16px;
    text-align: center;
    color: #fff;
}

.bidoptions-list .col-3 {
    padding-right: 5px;
    padding-left: 5px;
}

.bidamtbox.active {
    border: 1px solid #fff;
    background: #fff;
    color: #000 !important;
}

.bidamtbox.active p {
    color: #000;
}

.btn-streched {
    width: 100%;
}

.mplist {
    display: block;
    padding: 15px 10px;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
}

.mplist i {
    font-size: 16px;
    padding-right: 10px;
}

.history-list-box {
    background: white;
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    box-shadow: 0px 0px 3px 0px #d8d8d8;
    font-size: 12px;
    line-height: 12px;
    margin: 5px 0px;
}

.history-list-box .fixed {
    position: relative;
    background: var(--primary-light);
    color: white;
    padding: 4px 5px;
    left: 15px;
    border-radius: 0px 0px 5px 5px;
    width: 150px;
    text-align: center;
    font-size: 12px;
}

.history-list-box .fixed-debit {
    position: relative;
    background: #e734a3;
    color: white;
    padding: 4px 5px;
    left: 15px;
    border-radius: 0px 0px 5px 5px;
    width: 150px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.history-list-box .fixed-credit {
    position: relative;
    background: #114e11;
    color: white;
    padding: 4px 5px;
    left: 15px;
    border-radius: 0px 0px 5px 5px;
    width: 150px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.history-list-box .bid-detail {
    padding: 10px 0px;
}

.gm-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

.row.bid-row {
    margin: 10px 0px;
}

.bid-pending {
    text-align: center;
    color: var(--primary-color);
    padding-bottom: 0px;
    margin-bottom: 5px;
}

.bid-time {
    text-align: center;
    color: var(--primary-dark);
    padding-bottom: 0px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 400;
}

.bid-row .dark {
    font-weight: 600;
    margin-bottom: 2px;
    display: block;
}

.bid-lose {
    text-align: center;
    color: red;
    padding-bottom: 0px;
    margin-bottom: 5px;
}

.bid-won {
    text-align: center;
    color: green;
    padding-bottom: 0px;
    margin-bottom: 5px;
}

.devider {
    margin: 15px 0px;
    border-bottom: 1px #d9d9d94d;
}

.game-rates p {
    text-align: left;
}

.game-rates span {
    float: right;
    font-weight: 500;
}

.row.game-list-inner .col-3 {
    margin: 0px;
    padding: 0px 5px;
}

.row.game-list-inner .col-6 {
    margin: 0px;
    padding: 0px 5px;
}

.notifications .t {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.notifications .d {
    font-size: 12px;
    margin-bottom: 6px;
}

.notifications .time {
    float: right;
    font-size: 12px;
    margin: 0;
}

/* Full-screen route preloader: see inc/_footer.php (#loading-bg) */

#loading-image {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -75px;
    z-index: 510;
}

.lds-ripple {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
}

.addFundamtbox {
    text-align: center;
    margin: 0px;
    border: 1px solid beige;
    display: block;
    padding: 5px 5px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
}

.addFundamtbox p {
    margin: 0px;
    font-weight: 400;
}


.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

.wts-flt-btn {
    position: fixed;
    right: 10px;
    bottom: 80px;
    display: block;
}

.wts-flt-btn a {
    font-size: 25px;
    background: green;
    color: white;
    padding: 8px 14px;
    border-radius: 44px;
}

.hometext p {
    padding-bottom: 10px;
    line-height: 14px !important;
    font-size: 10px !important;
    text-align: justify !important;
}

.hometext p {
    margin-bottom: 10px;
    padding-bottom: 10px !important;
}




/* grind battle */


/* =========================
   GRIND UI (NO CONFLICT CSS)
   Prefix: gb-
========================= */

:root {
  --gb-primary: #00dbff;
  --gb-dark: #001533;
  --gb-card: #1A3F72;
  --gb-light: #ffffff;
  --gb-muted: #8e9aaf;
  --gb-coin: #ffcc00;
  --gb-footer-offset: 64px;
}

/* Reset safe scope */
.gb-app * {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Keep icon fonts — .gb-app * would otherwise force Poppins and hide glyphs */
.gb-app i.las,
.gb-app i.la {
  font-family: "Line Awesome Free" !important;
  font-weight: 900;
  font-style: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-rendering: auto;
  line-height: 1;
}
.gb-app i.lab {
  font-family: "Line Awesome Brands" !important;
  font-weight: 400;
  font-style: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: 1;
}
.gb-app i.fa,
.gb-app i.fas,
.gb-app i.far,
.gb-app i.fal,
.gb-app i.fab {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
  font-style: normal;
  line-height: 1;
}
.gb-app i.fas,
.gb-app i.fa {
  font-weight: 900;
}
.gb-app i.far {
  font-weight: 400;
}
.gb-app i.fab {
  font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
  font-weight: 400;
}

/* Background */
.gb-app {
  background: var(--gb-dark);
  color: var(--gb-light);
  margin-bottom: var(--gb-footer-offset) !important;
  min-height: 100%;
}

/* HEADER */
.gb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background: #1A3F72;
  border-bottom: 1px solid rgba(0, 200, 255, 0.2);
}

.gb-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gb-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.gb-title {
  font-weight: 700;
  font-size: 18px;
}

.gb-subtitle {
  font-size: 12px;
  color: var(--gb-muted);
}

/* Icons */
.gb-header-icons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.gb-badge {
  background: #00dbff;
  color: #102B55;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 10px;
}

/* CARD GRID */
.gb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 15px;
}

/* GAME CARD */
.gb-card {
  background: var(--gb-card);
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  transition: 0.3s;
  border: 1px solid rgba(0, 200, 255, 0.25);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.12);
}

.gb-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
}

.gb-card-title {
  background: #1A3F72;
  color: #fff;
  padding: 7px 8px;
  font-weight: 600;
  font-size: 13px;
  border-top: 1px solid rgba(0, 200, 255, 0.2);
  text-align: center;
  line-height: 1.25;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* HOVER */
.gb-card:hover {
  transform: translateY(-4px);
}

/* SECTION TITLE */
.gb-section-title {
  padding: 0 15px;
  margin-top: 15px;
  font-weight: 600;
}

.gb-section-title-battles {
  color: #00dbff;
  text-shadow: 0 0 12px rgba(0, 200, 255, 0.35);
  text-align: left;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

/* Home — Esports block headings: left (client reference) */
.gb-esports-home .gb-section-title.gb-esports-section-first,
.gb-esports-home .gb-section-title.gb-esports-section-second {
  text-align: left;
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  padding-left: 15px;
  padding-right: 15px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 10px;
}

.gb-esports-home .gb-esports-section-first {
  margin-top: 10px;
}

.gb-esports-home .gb-esports-section-second {
  margin-top: 22px;
}

/* JOIN OUR COMMUNITY */
.gb-community-heading {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin: 18px 15px 12px;
  letter-spacing: 0.02em;
}

.gb-community {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 12px 20px;
  gap: 6px;
}

.gb-community-item {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 11px;
  min-width: 0;
}

.gb-community-item:hover,
.gb-community-item:focus {
  color: #00dbff;
  text-decoration: none;
}

.gb-community-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 22px;
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
}

.gb-community-yt {
  background: #ff0000;
}

.gb-community-ig {
  background: linear-gradient(35deg, #f58529, #dd2a7b, #8134af);
}

.gb-community-fb {
  background: #1877f2;
}

.gb-community-wa {
  background: #25d366;
}

.gb-community-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
}

/* MY MATCHES (home — Live / Next / History, reference icons) */
.gb-battles {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px 20px;
  gap: 10px;
}

.gb-battle-card {
  flex: 1;
  min-width: 0;
  background: #1A3F72;
  border: 1px solid rgba(0, 219, 255, 0.42);
  border-radius: 10px;
  padding: 12px 8px 12px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.12);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: visible;
}

.gb-battle-card:hover,
.gb-battle-card:focus {
  text-decoration: none;
  color: #ffffff;
  border-color: rgba(0, 219, 255, 0.75);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.28);
}

.gb-battle-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 50px;
  margin: 0 auto 8px;
  padding: 6px 4px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #00dbff;
  line-height: 0;
  overflow: visible;
}

.gb-battle-icon-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 6px rgba(0, 219, 255, 0.55));
}

.gb-battle-svg {
  width: 46px;
  height: 46px !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  overflow: visible !important;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(0, 219, 255, 0.6));
}

.gb-battle-svg--live {
  width: 52px;
  height: 38px !important;
}

.gb-battle-svg--next {
  width: 40px;
  height: 40px !important;
}

.gb-battle-svg--history {
  width: 42px;
  height: 42px !important;
}

.gb-battle-icon-wrap--live,
.gb-battle-icon-wrap--next,
.gb-battle-icon-wrap--history {
  color: #00dbff;
}

.gb-battle-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* legacy contest row (if used elsewhere) */
.gb-contest {
  display: flex;
  justify-content: space-around;
  padding: 15px;
}

.gb-contest-box {
  background: #1A3F72;
  color: #fff;
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  width: 30%;
  border: 1px solid rgba(0, 200, 255, 0.35);
}

.gb-contest-box i {
  color: #00dbff;
  font-size: 22px;
  margin-bottom: 5px;
}

/* BOTTOM NAV — flat dock (reference: HOME active cyan, no item boxes) */
.gb-footer {
  position: fixed;
  z-index: 10050;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 4px;
  background:
    linear-gradient(180deg, #011a3a 0%, #001533 55%, #000d22 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.4);
}

.gb-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 200, 255, 0.28) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.gb-foot-item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 96px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 6px 5px;
  border-radius: 12px;
  text-decoration: none;
  color: #aeb8c8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
  border: none;
  background: transparent;
  box-shadow: none;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.1s ease;
}

.gb-foot-item:hover {
  color: #d5dce8;
  background: rgba(255, 255, 255, 0.04);
}

.gb-foot-item:active {
  transform: scale(0.97);
}

.gb-foot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  font-size: 26px;
  line-height: 1;
  overflow: visible;
  color: inherit;
  transition: color 0.18s ease, filter 0.18s ease;
}

.gb-foot-icon i.las,
.gb-foot-icon i.la {
  font-size: 1em;
  line-height: 1;
  display: block;
  overflow: visible;
}

.gb-foot-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  color: inherit;
  opacity: 0.95;
  white-space: nowrap;
}

.gb-foot-item.active {
  color: #00dbff;
  border: none;
  background: rgba(0, 180, 230, 0.14);
  box-shadow: none;
}

.gb-foot-item.active .gb-foot-icon {
  color: #00dbff;
  filter: none;
}

.gb-foot-item.active .gb-foot-label {
  color: #00dbff;
  opacity: 1;
}

/* legacy: any old footer link class without .gb-foot-item */
.gb-footer a:not(.gb-foot-item) {
  color: #7a8da3;
  text-align: center;
  font-size: 12px;
  text-decoration: none;
  line-height: 1.25;
}

.gb-footer a:not(.gb-foot-item).active {
  color: #00dbff;
}

/* FLOAT PROFILE BUTTON */
.gb-float {
  position: fixed;
  right: 15px;
  bottom: calc(var(--gb-footer-offset) + 14px);
  background: #00dbff;
  color: #102B55;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.55);
}

/* RESPONSIVE */
@media(max-width:768px){
  .gb-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

/* LEFT GROUP FIX */
.gb-left-group {
  display: flex;
  align-items: center;
  gap: 8px; /* VERY SMALL GAP */
}

/* MENU BUTTON */
.gb-menu-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  padding: 0;
  margin: 0;
}

/* LOGO */
.gb-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* TEXT */
.gb-text {
  line-height: 1.1;
}

.gb-title {
  font-size: 16px;
  font-weight: 700;
}

.gb-subtitle {
  font-size: 11px;
  color: #aaa;
}

/* REMOVE EXTRA SPACE */
.gbb-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}
/* ===== NOTICE BAR (battle theme) ===== */
.gb-notice-bar {
  display: flex;
  align-items: center;
  background: #1A3F72;
  border: 1px solid rgba(0, 200, 255, 0.45);
  margin: 10px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.18);
}

.gb-notice-bar--battle .gb-notice-label {
  background: rgba(0, 200, 255, 0.15);
  color: #00dbff;
  font-weight: 700;
  padding: 10px 12px;
  font-size: 14px;
  flex: 0 0 auto;
  border-right: 1px solid rgba(0, 200, 255, 0.25);
}

.gb-notice-text-static {
  flex: 1;
  padding: 10px 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}

.gb-notice-text-stack.gb-notice-text-static {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.gb-notice-heading {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
}

.gb-notice-sub {
  font-size: 12px;
  font-weight: 400;
  color: rgba(226, 232, 240, 0.88);
  line-height: 1.35;
}

/* LEFT LABEL (legacy marquee layout) */
.gb-notice-label {
  background: rgba(0, 200, 255, 0.15);
  color: #00dbff;
  font-weight: 700;
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 0.5px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* MARQUEE WRAPPER */
.gb-notice-marquee {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* SCROLL TEXT */
.gb-notice-text {
  display: inline-block;
  white-space: nowrap;
  color: #00dbff;
  font-size: 13px;
  animation: gb-scroll 12s linear infinite;
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.45);
  will-change: transform;
}

/* ANIMATION */
@keyframes gb-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (max-width: 480px) {
  .gb-notice-bar {
    margin: 8px;
  }

  .gb-notice-label {
    padding: 8px 10px;
    font-size: 11px;
    letter-spacing: 0.5px;
  }

  .gb-notice-text {
    font-size: 12px;
  }
}

/* OPTIONAL GLOW LINE */
.gb-notice-bar::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, transparent, #00dbff, transparent);
  animation: gb-glow 2s infinite linear;
  opacity: 0.65;
}

/* Room credentials (joined players only) */
.gb-room-box {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 200, 255, 0.4);
  background: rgba(3, 15, 42, 0.92);
  padding: 12px 12px 10px;
}
.gb-room-box--muted {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.85);
}
.gb-room-title {
  color: #00dbff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.gb-room-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #fff;
  margin-bottom: 8px;
}
.gb-room-line:last-child {
  margin-bottom: 0;
}
.gb-room-label {
  flex-shrink: 0;
  color: #fff;
  font-weight: 600;
}
.gb-room-value-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.gb-room-value {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  word-break: break-all;
  text-align: right;
}
.gb-room-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 200, 255, 0.65);
  background: transparent;
  color: #00dbff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gb-room-copy i {
  font-family: "Line Awesome Free" !important;
  font-weight: 900 !important;
  font-size: 13px;
  line-height: 1;
}
.gb-room-copy:hover,
.gb-room-copy:focus {
  background: rgba(0, 200, 255, 0.12);
  outline: none;
}
.gb-room-copy.is-copied {
  border-color: #34d399;
  color: #34d399;
}
.gb-room-wait {
  font-size: 12px;
  color: #cbd5e1;
}

@keyframes gb-glow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.gb-account {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

.gb-account-item {
  text-align: center;
  width: 25%;
  font-size: 12px;
}

.gb-circle {
  width: 65px;
  height: 65px;
  background: rgba(0, 200, 255, 0.15);
  border: 1px solid rgba(0, 200, 255, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-bottom: 6px;
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.25);
}

.gb-circle i {
  color: #00dbff;
  font-size: 20px;
}
/* RIGHT HEADER WRAP */
.gb-header-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ICON WRAP (IMPORTANT FOR BADGE POSITION) — header bell yellow */
.gb-icon-wrap {
  position: relative;
  color: #ffcc00;
  font-size: 18px;
}

.gb-icon-wrap .fa-bell {
  color: #ffcc00;
}

/* NOTIFICATION BADGE FIX */
.gb-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #ff3b3b;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
  line-height: 1.2;
}

/* Sidebar menu unread notification count */
.gb-sidebar-notif-count {
  display: inline-block;
  background: #00dbff;
  color: #102B55;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  min-width: 18px;
  text-align: center;
}

/* WALLET DESIGN — gold coin accent (HUD reference) */
.gb-wallet {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 204, 0, 0.12);
  color: #ffcc00;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 204, 0, 0.45);
}

/* COIN IMAGE */
.gb-wallet img {
  width: 18px;
  height: 18px;
}

/* =========================
   MATCHES PAGE (PHOTO-LIKE UI)
========================= */
.gb-game-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.gb-matches {
  padding-bottom: 12px;
}

.gb-matches-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  background: #1A3F72;
  color: #fff;
  border-bottom: 1px solid rgba(0, 200, 255, 0.2);
}

.gb-matches-back,
.gb-matches-back:hover,
.gb-matches-back:focus {
  color: #fff;
  text-decoration: none;
  width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gb-matches-title {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.gb-matches-spacer {
  width: 40px;
  height: 36px;
}

.gb-matches-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: linear-gradient(180deg, #0B1F3F 0%, #1A3F72 100%);
  padding-top: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.25);
}

.gb-tab {
  text-align: center;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 0;
  text-decoration: none;
}

.gb-tab:hover,
.gb-tab:focus {
  color: #fff;
  text-decoration: none;
}

.gb-tab.active {
  color: #fff;
}

.gb-tab-underline {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 33.333%;
  left: 0;
  background: #00dbff;
  opacity: 1;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.8);
  transform: translateX(0%);
  transition: transform 200ms ease;
}

.gb-matches-tabs .gb-tab:nth-child(1).active ~ .gb-tab-underline { transform: translateX(0%); }
.gb-matches-tabs .gb-tab:nth-child(2).active ~ .gb-tab-underline { transform: translateX(100%); }
.gb-matches-tabs .gb-tab:nth-child(3).active ~ .gb-tab-underline { transform: translateX(200%); }

.gb-matches-list {
  padding: 12px;
}

.gb-empty {
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
}
.gb-empty-title { font-weight: 700; }
.gb-empty-sub { color: rgba(255,255,255,0.65); font-size: 13px; margin-top: 4px; }

.gb-match-card {
  background: #1A3F72;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 200, 255, 0.25);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 200, 255, 0.08);
  margin-bottom: 14px;
}

.gb-match-banner {
  position: relative;
  background: #111;
}

.gb-match-banner-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.gb-match-banner-link {
  display: block;
  line-height: 0;
}

.gb-match-banner-link:hover .gb-match-banner-img,
.gb-match-banner-link:focus .gb-match-banner-img {
  opacity: 0.9;
}

/* Full game detail (image + description + button) */
.gb-game-detail-page {
  padding-bottom: calc(var(--gb-footer-offset) + 16px);
}

.gb-game-detail-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 14px 24px;
}

.gb-game-detail-back {
  display: inline-block;
  color: #00dbff;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 14px;
}

.gb-game-detail-back:hover {
  text-decoration: underline;
}

.gb-game-detail-banner {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.gb-game-detail-banner img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  display: block;
}

/* Game detail — DESCRIPTION / JOINED MEMBERS: same tab UI as matches (LIVE / NEXT / HISTORY) */
.gb-matches-tabs.gb-detail-tabs {
  grid-template-columns: 1fr 1fr;
}

.gb-matches-tabs.gb-detail-tabs .gb-tab-underline {
  width: 50%;
}

.gb-matches-tabs.gb-detail-tabs .gb-tab:nth-child(1).active ~ .gb-tab-underline {
  transform: translateX(0%);
}

.gb-matches-tabs.gb-detail-tabs .gb-tab:nth-child(2).active ~ .gb-tab-underline {
  transform: translateX(100%);
}

.gb-matches-tabs.gb-detail-tabs button.gb-tab {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gb-detail-panels {
  background: #1A3F72;
  border: 1px solid rgba(0, 200, 255, 0.25);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 14px 14px 18px;
  margin-bottom: 16px;
  min-height: 100px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 200, 255, 0.08);
}

.gb-detail-panel {
  display: none;
}

.gb-detail-panel--active {
  display: block;
}

.gb-detail-joined-teams {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gb-detail-joined-team {
  border: 1px solid rgba(0, 200, 255, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(0, 20, 40, 0.35);
}

.gb-detail-joined-team-name {
  font-weight: 800;
  font-size: 15px;
  color: #00dbff;
  margin-bottom: 8px;
}

.gb-detail-joined-team--scrim .gb-detail-joined-team-name {
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.22);
  color: #4dd4ff;
  text-align: left;
}

.gb-detail-joined-players {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gb-detail-joined-players li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gb-detail-joined-players li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gb-detail-joined-players--scrim li {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 0 7px 14px;
  position: relative;
  border-bottom: none;
  text-align: left;
}

.gb-detail-joined-players--scrim li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00dbff;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.55);
}

.gb-detail-scrim-ign-label {
  font-weight: 700;
  font-size: 14px;
  color: #00dbff;
}

.gb-detail-scrim-ign-name {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  word-break: break-word;
}

.gb-detail-member-account {
  display: inline;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.gb-detail-member-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gb-detail-mem;
}

.gb-detail-member-row {
  counter-increment: gb-detail-mem;
  padding: 12px 4px 12px 40px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.15);
  position: relative;
}

.gb-detail-member-row:last-child {
  border-bottom: none;
}

.gb-detail-member-row::before {
  content: counter(gb-detail-mem) ".";
  position: absolute;
  left: 6px;
  top: 12px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  min-width: 1.5em;
}

.gb-detail-member-ign {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
  word-break: break-word;
}

.gb-game-detail-title {
  color: #fff;
  font-size: 1.35rem;
  margin: 0 0 8px;
  font-weight: 700;
}

.gb-game-detail-time {
  color: #bdbdbd;
  font-size: 13px;
  margin-bottom: 12px;
}

.gb-game-detail-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 20px;
  padding: 10px 12px;
  background: #1A3F72;
  border-radius: 10px;
  border: 1px solid rgba(0, 200, 255, 0.2);
}

.gb-game-detail-desc-heading {
  color: #00dbff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.gb-game-detail-line {
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 10px;
}

.gb-desc-block-title {
  color: #00dbff;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

.gb-desc-block--prize {
  margin-bottom: 4px;
}

.gb-desc-block--after-prize {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 200, 255, 0.18);
}

.gb-game-detail-empty {
  color: #888;
  font-size: 14px;
}

.gb-game-detail-actions {
  margin-top: 24px;
}

.gb-game-detail-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: default;
  font-size: 15px;
  box-sizing: border-box;
}

.gb-game-detail-btn-primary {
  background: linear-gradient(45deg, #0084ff, #00f2ff);
  color: #102B55;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.35);
}

.gb-game-detail-btn-muted {
  background: #444;
  color: #aaa;
}

.gb-match-rules {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0,0,0,0.55);
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 55%;
}

.gb-match-rules ul {
  margin: 0;
  padding-left: 16px;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
}

.gb-match-body {
  padding: 12px 12px 10px;
  color: #e8f4ff;
}

.gb-match-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.gb-match-logo {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: rgba(0, 200, 255, 0.08);
  border: 1px solid rgba(0, 200, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.gb-match-logo-inner {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #00dbff;
  color: #102B55;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.gb-match-logo-img {
  width: 40px;
  height: 40px;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.gb-match-logo-img.gb-match-logo-img--app {
  object-fit: contain;
  background: rgba(0, 200, 255, 0.06);
}

.gb-match-meta {
  min-width: 0;
}

.gb-match-title {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gb-match-time {
  margin-top: 3px;
  color: #9eb6d4;
  font-size: 12px;
}

.gb-match-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 0 8px;
  border-top: 1px solid rgba(0, 200, 255, 0.15);
  border-bottom: 1px solid rgba(0, 200, 255, 0.15);
}

.gb-stat-label {
  font-size: 11px;
  color: #9eb6d4;
  text-align: center;
}

.gb-stat-value {
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.gb-coin {
  color: #ffb300;
}

.gb-match-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: end;
  padding-top: 10px;
}

.gb-info-label {
  font-size: 11px;
  color: #9eb6d4;
  text-align: center;
}

.gb-info-value {
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  margin-top: 6px;
}

/* Match card — View Rules / Joined Member / Prize poll (photo layout) */
.gb-match-quick-links {
  display: flex;
  align-items: stretch;
  margin-top: 10px;
  border: 1px solid rgba(0, 219, 255, 0.55);
  border-radius: 3px;
  background: rgba(0, 28, 58, 0.55);
  overflow: hidden;
}

.gb-match-quick-link {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 4px 10px;
  text-decoration: none;
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.38);
  transition: background 0.15s ease;
}

.gb-match-quick-link:last-child {
  border-right: none;
}

.gb-match-quick-link:hover,
.gb-match-quick-link:focus {
  text-decoration: none;
  color: #ffffff;
  background: rgba(0, 200, 255, 0.12);
}

.gb-match-quick-link-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #ffffff;
}

.gb-match-quick-link-ico svg {
  width: 22px;
  height: 22px;
  display: block;
}

.gb-match-quick-link-txt {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0.01em;
}

.gb-match-join-block {
  margin-top: 10px;
}

.gb-match-join-primary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: none;
  border-radius: 3px;
  background: #00dbff;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.03em;
  box-shadow: 0 0 14px rgba(0, 219, 255, 0.35);
}

.gb-match-join-primary:hover,
.gb-match-join-primary:focus {
  text-decoration: none;
  color: #ffffff;
  background: #33e4ff;
}

.gb-match-join-primary--muted {
  background: #3a4a5c;
  color: #b8c8dc;
  box-shadow: none;
  cursor: default;
}

.gb-join-wrap {
  display: flex;
  justify-content: flex-end;
}

.gb-match-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.gb-view-rules-btn {
  display: block;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #e8f4ff;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  text-align: center;
  line-height: 1;
}

.gb-view-rules-btn:hover,
.gb-view-rules-btn:focus {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.gb-join-btn {
  border: 2px solid #00dbff;
  color: #00dbff;
  background: rgba(0, 200, 255, 0.08);
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.2);
}

.gb-join-btn:hover,
.gb-join-btn:focus {
  text-decoration: none;
  background: rgba(0, 200, 255, 0.18);
  color: #5eebff;
}

.gb-join-btn-muted {
  border-color: rgba(255, 255, 255, 0.25);
  color: #9eb6d4;
  background: transparent;
  box-shadow: none;
}

.gb-match-footer {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 200, 255, 0.15);
}

.gb-spots {
  font-size: 11px;
  color: #9eb6d4;
}

.gb-progress {
  width: 100%;
  height: 4px;
  background: rgba(0, 200, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.gb-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #0084ff, #00f2ff);
  width: 0%;
}

.gb-capacity {
  font-size: 11px;
  color: #9eb6d4;
  font-weight: 700;
}

@media (max-width: 420px) {
  .gb-match-banner-img {
    height: 170px;
  }
  .gb-match-rules {
    top: 12px;
    right: 12px;
    max-width: 62%;
  }
  .gb-match-info-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .gb-match-quick-link-txt {
    font-size: 10px;
  }
  .gb-match-join-primary {
    font-size: 14px;
    padding: 12px 14px;
  }
  .gb-join-wrap {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 6px;
  }
  .gb-join-btn {
    width: 100%;
    text-align: center;
  }
}

.gb-game-detail-prize-panel {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 219, 255, 0.4);
  border-radius: 6px;
  background: rgba(0, 28, 58, 0.45);
  scroll-margin-top: 72px;
}

.gb-game-detail-prize-title {
  font-size: 13px;
  font-weight: 800;
  color: #e8f4ff;
  margin-bottom: 10px;
  text-transform: capitalize;
}

.gb-game-detail-prize-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.gb-game-detail-prize-label {
  display: block;
  font-size: 11px;
  color: #9eb6d4;
  margin-bottom: 4px;
}

.gb-game-detail-prize-value {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}

.gb-game-detail-prize-value .fa-coins {
  color: #ffb300;
  margin-right: 4px;
}

/* =========================
   WALLET PAGE (PHOTO-LIKE UI)
========================= */
.gb-wallet-page {
  padding-bottom: calc(var(--gb-footer-offset) + 12px);
}

.gb-wallet-hero {
  background: linear-gradient(180deg, #0B1F3F, #1A3F72);
  padding: 22px 12px 18px;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid rgba(0, 200, 255, 0.2);
}

.gb-wallet-coin {
  width: 74px;
  height: 74px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd36a, #ffb300);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.gb-wallet-coin-inner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(0,0,0,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 26px;
  color: rgba(0,0,0,0.75);
  border: 2px solid rgba(0,0,0,0.15);
}

.gb-wallet-balance {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.gb-wallet-mini {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px;
  margin-top: -16px;
}

.gb-wallet-mini-card {
  background: #1A3F72;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  border: 1px solid rgba(0, 200, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.gb-wallet-mini-amt {
  font-weight: 900;
  color: #e8f4ff;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.gb-wallet-mini-amt i {
  color: #00dbff;
}

.gb-wallet-mini-label {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #9eb6d4;
}

.gb-wallet-sheet {
  background: #001533;
  border-radius: 22px 22px 0 0;
  padding: 16px 14px 20px;
  margin-top: 6px;
  min-height: 55vh;
  border-top: 1px solid rgba(0, 200, 255, 0.2);
}

.gb-wallet-sheet-title {
  font-weight: 800;
  color: #00dbff;
  margin-bottom: 12px;
}

.gb-wallet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.gb-wallet-action {
  background: #1A3F72;
  border: 1px solid rgba(0, 200, 255, 0.25);
  border-radius: 14px;
  padding: 16px 6px;
  text-align: center;
  text-decoration: none;
  color: #e8f4ff;
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.1);
}

.gb-wallet-action:hover,
.gb-wallet-action:focus {
  text-decoration: none;
  transform: translateY(-1px);
  transition: transform 150ms ease;
}

.gb-wallet-action-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: rgba(0, 200, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00dbff;
  font-size: 24px;
}

.gb-wallet-action-label {
  font-size: 13px;
  font-weight: 700;
  color: #9eb6d4;
}

.gb-statement {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.gb-statement-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

.gb-statement-date {
  font-weight: 800;
  font-size: 13px;
}

.gb-statement-id {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}

.gb-statement-amt {
  font-weight: 900;
  white-space: nowrap;
}

/* =========================
   MATCH SLOT PAGE (reference / photo-style light UI)
========================= */
.gb-slot-page {
  padding-bottom: calc(var(--gb-footer-offset) + 24px);
}

.gb-slot-photo {
  background: #d8d8d8;
  min-height: 100vh;
  padding-bottom: calc(var(--gb-footer-offset) + 20px);
}

.gb-app.gb-slot-photo {
  background: #d8d8d8 !important;
  color: #1a1a1a;
}

/* Solo = purple header + 4-col grid (reference screenshot) */
.gb-app.gb-slot-photo.gb-slot-photo--solo {
  background: #e8e8e8 !important;
  color: #111;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-header {
  background: #7c3aed;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  color: #fff;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-back,
.gb-slot-photo.gb-slot-photo--solo .gb-slot-back:hover,
.gb-slot-photo.gb-slot-photo--solo .gb-slot-back:focus {
  color: #fff;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-title {
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-alert {
  margin: 10px 12px 0;
  border-radius: 4px;
}

.gb-slot-solo-panel {
  padding: 16px 12px 28px;
  background: #e8e8e8;
}

.gb-slot-solo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}

/* One cell = one seat; pair keeps number glued to its box */
.gb-slot-solo-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 2px 0;
}

.gb-slot-solo-pair {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: auto;
  max-width: 100%;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-solo-grid .gb-slot-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.gb-slot-solo-num {
  font-weight: 800;
  font-size: 14px;
  color: #111;
  line-height: 1;
  flex: 0 0 auto;
  min-width: 1.1em;
  text-align: right;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-solo-grid .gb-slot-box {
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: 22px;
  border-radius: 2px;
  border: 2px solid #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex: 0 0 22px;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0 !important;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-solo-grid .gb-slot-box:hover,
.gb-slot-photo.gb-slot-photo--solo .gb-slot-solo-grid .gb-slot-box:focus {
  background: #fafafa;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-radio:focus + .gb-slot-box {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.5);
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-radio:checked + .gb-slot-box {
  background: #111;
  border-color: #111;
}

/* Solo: others’ reserved seats = grey + ✓; yours = dark + cyan ring (must stay visible vs empty white cell) */
.gb-slot-photo.gb-slot-photo--solo .gb-slot-solo-grid .gb-slot-box--taken:not(.gb-slot-box--mine) {
  margin: 0;
  background: #4b5563;
  border-color: #374151;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-solo-grid .gb-slot-box--taken.gb-slot-box--mine {
  margin: 0;
  background: #111;
  border-color: #111;
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.55);
}

.gb-slot-photo .gb-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  background: #ffffff;
  border-bottom: 1px solid #c4c4c4;
  color: #1a1a1a;
  position: sticky;
  top: 0;
  z-index: 10;
}

.gb-slot-photo .gb-slot-back,
.gb-slot-photo .gb-slot-back:hover,
.gb-slot-photo .gb-slot-back:focus {
  color: #222;
  text-decoration: none;
  width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gb-slot-photo .gb-slot-title {
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  color: #111;
}

.gb-slot-spacer {
  width: 40px;
  height: 36px;
}

.gb-slot-photo .gb-slot-alert {
  margin: 10px 12px 0;
  padding: 10px 12px;
  background: #ffebee;
  border: 1px solid #e57373;
  border-radius: 4px;
  color: #b71c1c;
  font-size: 13px;
  line-height: 1.4;
}

/* Light strip under title (matches in-app screenshot) */
.gb-slot-hint-strip {
  background: #ececec;
  border-bottom: 1px solid #c8c8c8;
  padding: 10px 14px;
}

.gb-slot-hint-strip-text {
  display: block;
  font-size: 12px;
  color: #666;
  line-height: 1.35;
}

.gb-slot-hint-strip-legend {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #777;
  line-height: 1.35;
}

.gb-slot-hint-strip--solo .gb-slot-hint-strip-legend {
  margin-top: 0;
}

.gb-slot-form {
  margin: 0;
}

.gb-slot-sheet {
  margin: 0 0 2px;
  background: #ffffff;
  border-top: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.gb-slot-sheet--flush {
  margin-top: 0;
  border-top: none;
}

.gb-slot-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.gb-slot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #111;
  background: #fff;
}

.gb-slot-table thead th {
  background: #5d6d7e;
  color: #fff;
  font-weight: 800;
  text-align: center;
  padding: 12px 8px;
  border: 1px solid #4a5866;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.gb-slot-th-team {
  width: 20%;
  min-width: 52px;
}

.gb-slot-table tbody td {
  border: 1px solid #d0d0d0;
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
  background: #fff;
}

.gb-slot-td-team {
  font-weight: 800;
  color: #111;
  background: #fafafa;
}

.gb-slot-td-pick {
  position: relative;
}

.gb-slot-na {
  display: inline-block;
  min-height: 28px;
}

.gb-slot-empty {
  margin: 20px 16px;
  padding: 20px 14px;
  text-align: center;
  color: #555;
  font-size: 14px;
  border: 1px dashed #aaa;
  border-radius: 2px;
  background: #fafafa;
}

.gb-slot-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gb-slot-photo .gb-slot-td-pick .gb-slot-box {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  border-radius: 2px;
  border: 2px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
}

.gb-slot-photo .gb-slot-box:hover,
.gb-slot-photo .gb-slot-box:focus {
  background: #f8f8f8;
}

.gb-slot-radio:focus + .gb-slot-box {
  outline: 2px solid #4aa3c5;
  outline-offset: 2px;
}

/* Selected = solid black + white tick (WhatsApp reference) */
.gb-slot-radio:checked + .gb-slot-box {
  background: #111;
  border-color: #111;
}

/*
 * Reserved seats (duo/squad table): base rule `.gb-slot-photo .gb-slot-td-pick .gb-slot-box`
 * sets background:#fff with HIGHER specificity than `.gb-slot-box--taken` alone, so reserved
 * cells stayed white and the white ✓ was invisible. Override like solo grid — must beat 3-class chain + hover.
 */
.gb-slot-photo .gb-slot-td-pick .gb-slot-box.gb-slot-box--taken:not(.gb-slot-box--mine) {
  cursor: default;
  pointer-events: none;
  user-select: none;
  margin: 0 auto;
  background: #4b5563;
  border-color: #374151;
}

.gb-slot-photo .gb-slot-td-pick .gb-slot-box.gb-slot-box--taken.gb-slot-box--mine {
  margin: 0 auto;
  background: #111;
  border-color: #111;
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.55);
}

.gb-slot-photo .gb-slot-td-pick .gb-slot-box.gb-slot-box--taken:not(.gb-slot-box--mine):hover,
.gb-slot-photo .gb-slot-td-pick .gb-slot-box.gb-slot-box--taken:not(.gb-slot-box--mine):focus {
  background: #4b5563;
  border-color: #374151;
}

.gb-slot-photo .gb-slot-td-pick .gb-slot-box.gb-slot-box--taken.gb-slot-box--mine:hover,
.gb-slot-photo .gb-slot-td-pick .gb-slot-box.gb-slot-box--taken.gb-slot-box--mine:focus {
  background: #111;
  border-color: #111;
}

/* Your temporary hold (payment step) — still pickable; ring shows you’re finishing this row */
.gb-slot-photo .gb-slot-td-pick label.gb-slot-box.gb-slot-box--my-hold,
.gb-slot-photo label.gb-slot-box.gb-slot-box--my-hold {
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.45);
  border-color: rgba(0, 200, 255, 0.65);
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-solo-grid label.gb-slot-box.gb-slot-box--my-hold {
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.45);
  border-color: rgba(0, 200, 255, 0.65);
}

/* Fallback / non-table contexts */
.gb-slot-box--taken {
  cursor: default;
  pointer-events: none;
  user-select: none;
  margin: 0 auto;
  background: #4b5563;
  border-color: #374151;
}

/* Text ✓ (not Font Awesome) so global `i`/icon CSS cannot hide reserved seats */
.gb-slot-reserved-mark {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Segoe UI Symbol", sans-serif;
}

.gb-slot-box--mine {
  background: #111 !important;
  border-color: #111 !important;
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.55);
}

/* Hide tick until user selects a free seat (do not apply to reserved cells) */
.gb-slot-box:not(.gb-slot-box--taken) i,
label.gb-slot-box--check:not(.gb-slot-box--taken) i {
  display: none;
  font-size: 12px;
  color: #fff;
}

.gb-slot-radio:checked + .gb-slot-box:not(.gb-slot-box--taken) i,
.gb-slot-team-check:checked + .gb-slot-box--check:not(.gb-slot-box--taken) i {
  display: inline-block;
}

.gb-slot-team-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.gb-slot-team-check:checked + .gb-slot-box--check:not(.gb-slot-box--taken) {
  background: #111;
  border-color: #111;
}

/* Cap reached / other row locked — free seats no longer clickable */
.gb-slot-team-check:disabled:not([data-reserved="1"]) + .gb-slot-box--check:not(.gb-slot-box--taken) {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background: #f3f3f3;
  border-color: #ddd;
}

/* Reserved seats: checked + disabled look (already taken) */
.gb-slot-team-check[data-reserved="1"]:checked:disabled + .gb-slot-box--check.gb-slot-box--taken {
  cursor: not-allowed;
  pointer-events: none;
}

.gb-slot-footer {
  padding: 14px 16px 18px;
  background: #fff;
  border-top: 1px solid #ccc;
  margin-bottom: 90px;
}

.gb-slot-next {
  width: 100%;
  background: #4aa3c5;
  border: none;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  cursor: pointer;
}

.gb-slot-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-footer {
  background: #e8e8e8;
  border-top: none;
  padding-top: 8px;
  padding-bottom: 22px;
}

.gb-slot-photo.gb-slot-photo--solo .gb-slot-next {
  background: #4a8fd4;
  border-radius: 4px;
}

@media (max-width: 360px) {
  .gb-slot-table thead th,
  .gb-slot-table tbody td {
    padding: 10px 4px;
  }

  .gb-slot-solo-grid {
    column-gap: 6px;
    row-gap: 10px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* =========================
   JOIN / PAY (after slot NEXT)
========================= */
.gb-join-pay-page {
  min-height: 100vh;
  background: #001533;
  padding-bottom: 88px;
}

.gb-app.gb-join-pay-page {
  background: #001533 !important;
  margin-bottom: 0 !important;
}

.gb-join-wallet-hero {
  background: linear-gradient(180deg, #0B1F3F, #1A3F72);
  padding: 22px 14px 20px;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid rgba(0, 200, 255, 0.2);
}

.gb-join-balance {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  margin-top: 4px;
}

.gb-join-mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
  padding: 0 4px;
}

.gb-join-mini-card {
  background: #1A3F72;
  border-radius: 12px;
  padding: 12px 8px;
  border: 1px solid rgba(0, 200, 255, 0.2);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.1);
}

.gb-join-mini-amt {
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #e8f4ff;
}

.gb-join-mini-amt .fa-coins {
  color: #00dbff;
}

.gb-join-mini-num {
  color: #00dbff;
  font-weight: 900;
}

.gb-join-mini-label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #9eb6d4;
}

.gb-join-body {
  padding: 16px 14px 12px;
}

.gb-join-details-card {
  background: linear-gradient(180deg, #1A3F72, #0B1F3F);
  border-radius: 16px;
  padding: 18px 14px 20px;
  color: #fff;
  border: 1px solid rgba(0, 200, 255, 0.3);
  box-shadow: 0 0 24px rgba(0, 200, 255, 0.15);
}

.gb-join-details-title {
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
}

.gb-join-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  text-align: center;
  font-size: 13px;
}

.gb-join-detail-label {
  opacity: 0.85;
  font-weight: 600;
  margin-bottom: 6px;
}

.gb-join-detail-value {
  font-weight: 800;
}

.gb-join-detail-col--full {
  grid-column: 1 / -1;
}

.gb-join-scrim-player-row {
  margin-top: 14px;
  text-align: left;
}

.gb-join-scrim-player-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 6px;
}

.gb-join-player-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gb-join-edit {
  color: #fff;
  opacity: 0.95;
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
}

.gb-join-edit:hover,
.gb-join-edit:focus {
  color: #00dbff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.35);
}

/* Paid Scrim — after-style team field + cyan user/pencil icons */
.gb-join-scrim-form .gb-join-team-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 200, 255, 0.45);
  background: rgba(0, 15, 40, 0.45);
  text-align: left;
}

.gb-join-scrim-form .gb-join-team-field-text {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  word-break: break-word;
}

.gb-join-scrim-form .gb-join-edit--cyan,
.gb-join-scrim-form .gb-join-edit--cyan:hover,
.gb-join-scrim-form .gb-join-edit--cyan:focus {
  color: #00dbff;
  flex-shrink: 0;
  opacity: 1;
  padding: 4px;
  box-shadow: none;
}

.gb-join-scrim-form .gb-join-edit--cyan:hover,
.gb-join-scrim-form .gb-join-edit--cyan:focus {
  filter: brightness(1.15);
}

.gb-join-scrim-form .gb-join-ign-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 12px 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 200, 255, 0.45);
  background: rgba(0, 15, 40, 0.45);
}

.gb-join-scrim-form .gb-join-ign-ico {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #00dbff;
  color: #001533;
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.35);
}

.gb-join-scrim-form .gb-join-ign-ico i {
  display: block;
  line-height: 1;
  font-size: 15px;
  width: auto;
  height: auto;
  text-align: center;
  color: inherit;
}

.gb-join-scrim-form .gb-join-ign-input {
  flex: 1;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
}

.gb-join-scrim-form .gb-join-ign-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.gb-join-paste-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.gb-join-paste-field .gb-join-modal-input {
  flex: 1;
  min-width: 0;
}

.gb-join-paste-btn {
  flex-shrink: 0;
  border: 1px solid rgba(0, 200, 255, 0.55);
  background: rgba(0, 200, 255, 0.14);
  color: #7cefff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.gb-join-paste-btn:hover,
.gb-join-paste-btn:focus {
  background: rgba(0, 200, 255, 0.28);
  outline: none;
}

.gb-join-scrim-form .gb-join-ign-wrap .gb-join-paste-btn {
  margin-left: 2px;
}

.gb-join-scrim-form .gb-join-detail-col--full .gb-join-detail-label {
  text-align: left;
}

.gb-join-scrim-form .gb-join-detail-col--full .gb-join-detail-value {
  text-align: left;
}

.gb-join-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 5, 26, 0.82);
  backdrop-filter: blur(4px);
}

.gb-join-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10051;
  width: calc(100% - 32px);
  max-width: 400px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 200, 255, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 28px rgba(0, 200, 255, 0.12);
}

.gb-join-modal-head {
  background: linear-gradient(90deg, #0084ff, #00f2ff);
  color: #102B55;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  padding: 14px 16px;
  letter-spacing: 0.02em;
}

.gb-join-modal-body {
  background: #1A3F72;
  padding: 18px 16px 14px;
  color: #e8f4ff;
}

.gb-join-modal-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.9;
  text-align: left;
}

.gb-join-modal-input {
  width: 100%;
  box-sizing: border-box;
}

.gb-team-modal-inline-err {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #f87171 !important;
}

.gb-team-modal-inline-err[hidden] {
  display: none !important;
}

.gb-join-modal-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #9eb6d4;
  text-align: left;
}

.gb-join-modal-foot {
  display: flex;
  gap: 10px;
  padding: 12px 12px 14px;
  background: #0B1F3F;
  border-top: 1px solid rgba(0, 200, 255, 0.2);
}

.gb-join-modal-btn {
  flex: 1;
  margin: 0;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.2;
}

.gb-join-detail-col--full {
  grid-column: 1 / -1;
  text-align: left;
}

.gb-join-player-input {
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
}

.gb-join-optional {
  font-weight: 400;
  opacity: 0.75;
  font-size: 11px;
}

.gb-join-fee-block {
  margin-top: 22px;
  text-align: center;
  color: #e8f4ff;
  font-size: 14px;
}

.gb-join-fee-line {
  margin-bottom: 8px;
}

.gb-join-total-line {
  font-weight: 900;
  margin-bottom: 10px;
}

.gb-join-coin-ico {
  color: #ffb300;
  margin: 0 2px;
}

.gb-join-error {
  color: #d32f2f;
  font-weight: 700;
  font-size: 14px;
}

.gb-join-footer-btns {
  display: flex;
  gap: 12px;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  background: #1A3F72;
  border-top: 1px solid rgba(0, 200, 255, 0.2);
  margin: 18px 0 calc(var(--gb-footer-offset) + 12px); /* keep above fixed footer bar */
}

.gb-join-btn-cancel {
  flex: 1;
  text-align: center;
  padding: 14px 12px;
  background: #9e9e9e;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.gb-join-btn-cancel:hover,
.gb-join-btn-cancel:focus {
  color: #fff;
  text-decoration: none;
}

.gb-join-btn-add {
  flex: 1;
  text-align: center;
  padding: 14px 12px;
  background: linear-gradient(45deg, #0084ff, #00f2ff);
  color: #102B55;
  font-weight: 900;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.gb-join-btn-add:hover,
.gb-join-btn-add:focus {
  color: #fff;
  text-decoration: none;
}

.gb-join-btn-primary {
  flex: 1;
  padding: 14px 12px;
  background: linear-gradient(45deg, #0084ff, #00f2ff);
  color: #102B55;
  font-weight: 900;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.35);
}

@media (max-width: 360px) {
  .gb-join-details-grid {
    font-size: 12px;
  }
}

/* =========================
   TOP PLAYERS / LEADERBOARD
========================= */
.gb-top-players-page {
  min-height: 100%;
}

.gb-app.gb-top-players-page {
  background: #001533 !important;
  margin-bottom: var(--gb-footer-offset) !important;
}

.gb-top-hero {
  position: relative;
  background: linear-gradient(165deg, #071530 0%, #000814 55%, #001533 100%);
  padding: clamp(18px, 5vw, 28px) 16px 22px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 200, 255, 0.18);
  overflow: hidden;
}

.gb-top-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 55% at 50% -25%,
    rgba(0, 200, 255, 0.14),
    transparent 58%
  );
  pointer-events: none;
}

.gb-top-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 26rem;
  margin: 0 auto;
}

.gb-top-hero-icon {
  margin-bottom: 12px;
}

.gb-top-trophy-ring {
  display: inline-flex;
  width: clamp(64px, 18vw, 76px);
  height: clamp(64px, 18vw, 76px);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(0, 200, 255, 0.18), rgba(0, 70, 110, 0.4));
  border: 2px solid rgba(0, 200, 255, 0.38);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.gb-top-trophy-ring .fa-trophy {
  font-size: clamp(24px, 7vw, 30px);
  color: #00dbff;
  filter: drop-shadow(0 0 14px rgba(0, 200, 255, 0.45));
}

.gb-top-title {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 4.8vw, 1.7rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
}

.gb-top-sub {
  margin: 0;
  font-size: clamp(12px, 3.2vw, 14px);
  line-height: 1.5;
  font-weight: 500;
  color: rgba(158, 182, 212, 0.96);
}

.gb-top-main {
  padding: 18px max(14px, env(safe-area-inset-right)) 24px max(14px, env(safe-area-inset-left));
  max-width: 520px;
  margin: 0 auto;
}

.gb-top-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gb-top-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  padding: 14px 13px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(5, 16, 48, 0.96), rgba(0, 8, 28, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.38);
}

.gb-top-row--1 {
  border-color: rgba(234, 179, 8, 0.42);
  background: linear-gradient(180deg, rgba(55, 45, 12, 0.45), rgba(5, 14, 42, 0.98));
  box-shadow:
    0 0 0 1px rgba(234, 179, 8, 0.1),
    0 10px 30px rgba(0, 0, 0, 0.42);
}

.gb-top-row--2 {
  border-color: rgba(148, 163, 184, 0.32);
  background: linear-gradient(180deg, rgba(35, 42, 54, 0.55), rgba(5, 14, 42, 0.98));
}

.gb-top-row--3 {
  border-color: rgba(217, 119, 6, 0.38);
  background: linear-gradient(180deg, rgba(55, 38, 14, 0.42), rgba(5, 14, 42, 0.98));
}

.gb-top-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.gb-top-row--1 .gb-top-rank {
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.42);
  background: rgba(234, 179, 8, 0.14);
}

.gb-top-row--2 .gb-top-rank {
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.12);
}

.gb-top-row--3 .gb-top-rank {
  color: #fdba74;
  border-color: rgba(217, 119, 6, 0.38);
  background: rgba(217, 119, 6, 0.12);
}

.gb-top-player {
  min-width: 0;
}

.gb-top-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: #f1f5f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gb-top-score {
  text-align: right;
  min-width: 0;
}

.gb-top-coins {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-weight: 900;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #00dbff;
  text-shadow: 0 0 16px rgba(0, 200, 255, 0.22);
}

.gb-top-coins .fa-coins {
  font-size: 13px;
  opacity: 0.95;
}

.gb-top-score-label {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.92);
}

.gb-top-empty {
  text-align: center;
  padding: 40px 22px;
  border-radius: 16px;
  border: 1px dashed rgba(100, 116, 139, 0.45);
  background: rgba(5, 16, 48, 0.55);
  color: #94a3b8;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 380px) {
  .gb-top-row {
    padding: 12px 10px;
    gap: 8px 10px;
    border-radius: 14px;
  }

  .gb-top-rank {
    min-width: 34px;
    height: 34px;
    font-size: 13px;
    border-radius: 10px;
  }

  .gb-top-name {
    font-size: 14px;
  }

  .gb-top-coins {
    font-size: 14px;
    gap: 4px;
  }

  .gb-top-coins .fa-coins {
    font-size: 12px;
  }
}

@media (min-width: 480px) {
  .gb-top-main {
    padding-top: 22px;
  }
}

/* =========================
   THANK YOU / SUCCESS
========================= */
.gb-thank-page {
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
}

.gb-app.gb-thank-page {
  background: #001533 !important;
  margin-bottom: var(--gb-footer-offset) !important;
}

.gb-thank-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 8vw, 48px) max(16px, env(safe-area-inset-right)) clamp(28px, 10vw, 56px)
    max(16px, env(safe-area-inset-left));
}

.gb-thank-card {
  width: 100%;
  max-width: 420px;
  padding: clamp(26px, 7vw, 38px) clamp(20px, 6vw, 32px) clamp(28px, 7vw, 40px);
  text-align: center;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(12, 24, 52, 0.98), rgba(2, 8, 26, 0.99));
  border: 1px solid rgba(0, 200, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 200, 255, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gb-thank-visual {
  margin: 0 auto 18px;
  width: min(132px, 38vw);
  height: min(132px, 38vw);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(0, 200, 255, 0.12), rgba(0, 40, 70, 0.45));
  border: 2px solid rgba(0, 200, 255, 0.28);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.gb-thank-visual img {
  width: 72%;
  height: auto;
  max-height: 78%;
  object-fit: contain;
  display: block;
}

.gb-thank-title {
  margin: 0 0 12px;
  font-size: clamp(1.55rem, 5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 0 28px rgba(0, 200, 255, 0.18);
}

.gb-thank-lead {
  margin: 0 0 10px;
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 600;
  line-height: 1.45;
  color: rgba(200, 216, 238, 0.96);
}

.gb-thank-hint {
  margin: 0 0 26px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.92);
}

.gb-thank-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  padding: 15px 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: #000814;
  background: linear-gradient(180deg, #00f2ff 0%, #00dbff 45%, #0084ff 100%);
  border: 1px solid rgba(0, 200, 255, 0.55);
  box-shadow:
    0 4px 22px rgba(0, 200, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.gb-thank-btn:hover,
.gb-thank-btn:focus {
  color: #000814;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    0 8px 28px rgba(0, 200, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.gb-thank-btn:active {
  transform: translateY(0);
}

.gb-thank-btn .fa-home {
  font-size: 17px;
}

@media (max-width: 360px) {
  .gb-thank-card {
    border-radius: 18px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* =========================
   ABOUT & FAQ (PROFILE LINKS)
========================= */
.gb-about-page,
.gb-faq-page {
  padding-bottom: calc(var(--gb-footer-offset) + 16px);
}

.gb-app.gb-about-page,
.gb-app.gb-faq-page {
  background: #001533 !important;
}

.gb-about-inner,
.gb-faq-inner {
  padding: 16px 12px 24px;
}

.gb-about-hero {
  padding: 8px 0 4px;
}

.gb-about-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00dbff;
  margin-bottom: 10px;
}

.gb-about-headline {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}

.gb-about-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
}

.gb-about-card {
  margin-top: 18px;
  text-align: left;
}

.gb-about-h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.gb-about-content {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
}

.gb-about-content p {
  margin: 0 0 12px;
  color: rgba(255,255,255,0.85);
}

.gb-about-content p:last-child {
  margin-bottom: 0;
}

.gb-about-cta {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.gb-about-cta-btn {
  display: block;
  text-align: center;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(45deg, #0084ff, #00f2ff);
  color: #102B55 !important;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.35);
}

.gb-about-cta-link {
  text-align: center;
  font-size: 14px;
  color: #00dbff !important;
  text-decoration: none;
  font-weight: 600;
}

.gb-faq-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
}

.gb-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gb-faq-item {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 200, 255, 0.2);
  background: #1A3F72;
}

.gb-faq-item summary {
  list-style: none;
}

.gb-faq-item summary::-webkit-details-marker {
  display: none;
}

.gb-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

.gb-faq-q-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(0, 200, 255, 0.15);
  color: #00dbff;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gb-faq-q-text {
  flex: 1;
  min-width: 0;
}

.gb-faq-chevron {
  flex: 0 0 auto;
  margin-top: 2px;
  color: rgba(255,255,255,0.45);
  transition: transform 0.2s ease;
}

.gb-faq-item[open] .gb-faq-chevron {
  transform: rotate(180deg);
}

.gb-faq-a {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
}

.gb-faq-a-inner {
  padding: 14px 16px 16px 48px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
}

.gb-faq-a-inner p {
  margin: 0 0 10px;
  color: rgba(255,255,255,0.78);
}

.gb-faq-a-inner p:last-child {
  margin-bottom: 0;
}

.gb-faq-empty {
  margin-top: 8px;
}

.gb-faq-empty-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
}

.gb-faq-empty code {
  font-size: 12px;
  color: #00dbff;
}


body {
    background: #001533;
    font-family: Arial, sans-serif;
}

/* Container */
.gb-container {
    max-width: 400px;
    margin: auto;
}

.gb-avatar {
    width: 90px;
    height: 90px;
    background: #ffc107;
    border-radius: 50%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card (forms in .gb-container only — avoids breaking game grid cards) */
.gb-container .gb-card {
    background: #1A3F72;
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid rgba(0, 200, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.08);
}

/* Titles inside form container */
.gb-container .gb-title {
    color: #fff;
    text-align: center;
}

/* Inputs */
.gb-input {
    width: 100%;
    background: transparent;
    border: 1px solid #555;
    border-radius: 10px;
    color: #fff;
    padding: 12px;
    margin-bottom: 15px;
}

.gb-input::placeholder {
    color: #aaa;
}

/* Native <select> lists often use a light panel; keep option text readable */
.gb-app select.gb-input {
    color-scheme: dark;
    background-color: #1A3F72;
}

.gb-app select.gb-input option {
    background-color: #1A3F72;
    color: #fff;
}

/* SweetAlert v1 + v2: body text color is white; modal background is white — force readable titles */
.sweet-alert h2 {
    color: #575757 !important;
}

.sweet-alert p {
    color: #797979 !important;
}

#swal2-title,
.swal2-html-container {
    color: #545454 !important;
}

/* SweetAlert2 above join modals / overlays */
body .swal2-container {
    z-index: 200050;
}

/* Row */
.gb-row {
    display: flex;
    gap: 10px;
}

/* Button */
.gb-btn {
    width: 100%;
    background: linear-gradient(45deg, #0084ff, #00f2ff);
    border: none;
    padding: 14px;
    color: #102B55;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(0, 200, 255, 0.35);
}

/* Links */
.gb-link {
    text-align: center;
    margin-top: 15px;
}

.gb-link a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

/* ---------- Public match result (match-result / Esports Buddy) ---------- */

/* ===== Global mobile-fit safety layer =====
   Helps pages scale cleanly across 320px+ screens without layout break. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

.gb-app,
.gb-app * {
  box-sizing: border-box;
}

.gb-app {
  width: 100%;
  max-width: 100vw;
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}

.gb-app .container,
.gb-app .container-fluid {
  width: 100%;
  max-width: 100%;
}

.gb-app .row {
  margin-left: 0;
  margin-right: 0;
}

.gb-app .card,
.gb-app .gb-card,
.gb-app .menu-card,
.gb-app .main-card {
  width: 100%;
  max-width: 100%;
}

.gb-app .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gb-app input,
.gb-app select,
.gb-app textarea,
.gb-app button {
  max-width: 100%;
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  .container,
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .gb-app .menu {
    padding: 8px;
  }

  .gb-app .menu-card {
    padding: 12px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }

  .gb-app {
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
  }

  .gb-app .stats {
    margin-left: 8px;
    margin-right: 8px;
    padding: 14px 8px;
  }

  .gb-app .profile-section h4 {
    font-size: 17px;
  }
}
.gb-match-result-page {
    padding: 12px 12px 100px;
    max-width: 720px;
    margin: 0 auto;
}

.gb-mr-back {
    display: inline-block;
    margin: 4px 0 18px;
    font-size: 14px;
    font-weight: 600;
    color: #5eb8ff;
    text-decoration: none;
}

.gb-mr-back:hover,
.gb-mr-back:focus {
    color: var(--gb-primary);
    text-decoration: none;
}

.gb-mr-head {
    margin-bottom: 14px;
}

.gb-mr-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gb-light);
    line-height: 1.35;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.gb-mr-badge-tour {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    background: #0d6efd;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.gb-mr-badge-scrim {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    background: #6f42c1;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.gb-mr-special {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: linear-gradient(160deg, rgba(38, 40, 48, 0.98) 0%, rgba(28, 32, 42, 0.99) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.25);
}

.gb-mr-special-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8b923;
    margin-bottom: 8px;
}

.gb-mr-special-body {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 224, 190, 0.92);
    white-space: pre-wrap;
    word-break: break-word;
}

.gb-mr-results-card {
    background: #1A3F72;
    border-radius: 12px;
    border: 1px solid rgba(0, 200, 255, 0.28);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 200, 255, 0.08);
    padding: 14px 12px 16px;
    overflow-x: auto;
}

.gb-mr-results-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 12px;
}

.gb-mr-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.gb-mr-table th {
    text-align: left;
    padding: 10px 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gb-mr-table td {
    padding: 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    vertical-align: top;
}

/* Space between Position and Team Name / Player IGN (client #22) */
.gb-mr-table th:nth-child(1),
.gb-mr-table td:nth-child(1) {
    padding-right: 18px;
}

.gb-mr-table th:nth-child(2),
.gb-mr-table td:nth-child(2) {
    padding-left: 16px;
}

.gb-mr-table tbody tr:last-child td {
    border-bottom: none;
}

.gb-mr-table strong {
    color: #fff;
    font-weight: 700;
}

/* Paid Scrim match result — after reference */
.gb-mr-table--scrim th:nth-child(1),
.gb-mr-table--scrim td:nth-child(1) {
    width: 22%;
    padding-right: 20px;
}

.gb-mr-table--scrim th:nth-child(2),
.gb-mr-table--scrim td:nth-child(2) {
    width: 36%;
    padding-left: 18px;
}

.gb-mr-table--scrim th:nth-child(3),
.gb-mr-table--scrim td:nth-child(3),
.gb-mr-table--scrim th:nth-child(4),
.gb-mr-table--scrim td:nth-child(4) {
    width: 22%;
    text-align: center;
}

.gb-mr-table--scrim .gb-mr-pos {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    vertical-align: middle;
    line-height: 1.2;
}

.gb-mr-team-cell {
    min-width: 0;
    text-align: left !important;
}

.gb-mr-team-name {
    font-weight: 800;
    font-size: 14px;
    color: #00dbff;
    margin: 0 0 8px;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.gb-mr-team-players {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gb-mr-team-players li {
    position: relative;
    padding: 3px 0 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

.gb-mr-team-players li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
}

.gb-mr-points {
    font-weight: 800;
    font-size: 16px;
    color: #fff !important;
    vertical-align: middle !important;
}

.gb-mr-coin {
    color: #fff !important;
    font-weight: 800;
    font-size: 16px;
    white-space: nowrap;
    vertical-align: middle !important;
}

.gb-mr-coin-ico {
    color: #ffcc00 !important;
    font-family: "Line Awesome Free" !important;
    font-weight: 900 !important;
    margin-right: 6px;
    font-size: 1.05em;
    vertical-align: -1px;
}

.gb-mr-sub {
    display: block;
    font-size: 12px;
    color: rgba(158, 182, 212, 0.78);
    margin-top: 4px;
    font-weight: 400;
}

.gb-mr-empty {
    color: rgba(158, 182, 212, 0.9);
    font-size: 14px;
    padding: 22px 14px;
    text-align: center;
    background: rgba(5, 16, 48, 0.65);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}