/* =========================================================
   KUBERA JODI
   FINAL APPROVED DESKTOP UI
   ========================================================= */

:root {
    --bg: #020202;
    --bg-soft: #070707;
    --panel: #080808;
    --panel-2: #0d0d0d;

    --gold: #ffbd00;
    --gold-2: #ff9800;
    --gold-soft: #9f7000;
    --gold-dark: #5d4100;

    --text: #f5f5f5;
    --muted: #aaa69a;

    --green: #63ff00;
    --red: #ff2d19;
    --cyan: #00d7ff;

    --border: #a87800;
    --border-soft: #4f3900;

    --radius: 6px;

    --header-h: 84px;
    --top-row-h: 47px;
    --bottom-h: 68px;
    --notice-h: 60px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    background: #000;
    color: var(--text);

    font-family:
        "Arial Narrow",
        Arial,
        Helvetica,
        sans-serif;
}

body {
    overflow: hidden;
}

button,
input,
select {
    font-family: inherit;
}

button {
    outline: none;
}

svg {
    display: block;
}


/* =========================================================
   APP
   ========================================================= */

.kubera-app {
    width: 100vw;
    height: 100vh;

    min-width: 1180px;
    min-height: 680px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(255, 166, 0, 0.06),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #050505 0%,
            #010101 100%
        );

    display: grid;

    grid-template-rows:
        var(--header-h)
        var(--top-row-h)
        minmax(0, 1fr)
        var(--bottom-h)
        var(--notice-h);

    padding: 12px 13px 11px;

    gap: 7px;
}


/* =========================================================
   COMMON GOLD PANEL
   ========================================================= */

.ks-time-card,
.ks-vendor-card,
.ks-header-square-btn,
.ks-payment-card,
.ks-rate-card,
.ks-date-card,
.ks-range-tabs,
.ks-series-panel,
.ks-game-panel,
.ks-ticket-panel,
.ks-bottom-btn,
.ks-notice-bar {
    border: 1px solid var(--border);

    box-shadow:
        inset 0 0 0 1px rgba(255, 193, 0, 0.05),
        0 0 9px rgba(255, 174, 0, 0.11);
}


/* =========================================================
   HEADER
   ========================================================= */

.ks-header {
    min-width: 0;

    display: grid;

    grid-template-columns:
        130px
        122px
        minmax(310px, 1.35fr)
        minmax(275px, 1.10fr)
        61px
        61px
        119px
        61px
        61px;

    gap: 8px;

    align-items: stretch;
}


/* DRAW / COUNTDOWN */

.ks-time-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            #090909 0%,
            #020202 100%
        );

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ks-time-label {
    color: #e4e4e4;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    margin-bottom: 6px;
}

.ks-draw-time {
    color: var(--gold);

    font-size: 28px;
    font-weight: 800;

    line-height: 1;

    text-shadow:
        0 0 10px rgba(255, 190, 0, 0.55);
}

.ks-countdown-display {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #efefef;

    line-height: 1;
}

.ks-countdown-number {
    min-width: 32px;

    text-align: center;

    font-size: 22px;
    font-weight: 500;
}

.ks-countdown-colon {
    padding: 0 2px;

    font-size: 20px;
}

.ks-countdown-caption {
    width: 68px;

    display: flex;
    justify-content: space-between;

    margin-top: 5px;

    color: var(--gold);

    font-size: 9px;
}


/* BRAND */

.ks-brand {
    min-width: 0;

    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

.ks-brand-main {
    white-space: nowrap;

    display: flex;
    align-items: baseline;

    transform: translateY(-2px);
}

.ks-brand-kubera {
    color: #ffbd00;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(34px, 3.2vw, 50px);
    font-style: italic;
    font-weight: 700;

    letter-spacing: -2px;

    text-shadow:
        0 0 7px rgba(255, 183, 0, 0.45);
}

.ks-brand-sunset {
    margin-left: 9px;

    color: #ffbb00;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(19px, 1.9vw, 29px);

    letter-spacing: -1px;
}

.ks-brand-sun {
    width: 20px;
    height: 20px;

    margin-left: 2px;

    border-radius: 50%;

    display: inline-block;

    background:
        linear-gradient(
            180deg,
            #ff4800 0 48%,
            #ffb600 48% 100%
        );

    box-shadow:
        0 0 11px rgba(255, 91, 0, 0.65);
}

.ks-brand-subtitle {
    margin-top: -2px;

    color: #c3c3c3;

    font-size: 19px;
    font-weight: 500;

    letter-spacing: 0.3px;
}


/* VENDOR */

.ks-vendor-card {
    min-width: 0;

    border-radius: var(--radius);

    padding: 9px 13px;

    background:
        linear-gradient(
            180deg,
            #090909,
            #030303
        );

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ks-vendor-line,
.ks-wallet-line {
    display: flex;
    align-items: center;

    min-width: 0;
}

.ks-vendor-line {
    margin-bottom: 11px;
}

.ks-vendor-label,
.ks-wallet-label {
    color: var(--gold);

    font-size: 13px;
}

.ks-vendor-name {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    margin-left: 7px;

    color: var(--gold);

    font-size: 14px;
}

.ks-wallet-value {
    margin-left: 7px;

    color: var(--green);

    font-size: 16px;

    white-space: nowrap;
}

.ks-wallet-add {
    margin-left: auto;

    width: 53px;
    height: 28px;

    border: 1px solid #ff8521;
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #ff791d,
            #c94208
        );

    color: #fff;

    font-size: 13px;
    font-weight: 800;
}


/* HEADER ICON BUTTONS */

.ks-header-square-btn {
    padding: 0;

    border-radius: var(--radius);

    cursor: pointer;

    background:
        linear-gradient(
            180deg,
            #0a0a0a,
            #030303
        );

    display: flex;
    align-items: center;
    justify-content: center;
}

.ks-header-square-btn:hover {
    border-color: #ffca25;
}

.ks-speaker-icon {
    width: 35px;
    height: 35px;
}

.ks-speaker-icon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: #d4d4d4;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ks-menu-lines {
    width: 26px;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.ks-menu-lines span {
    width: 100%;
    height: 3px;

    border-radius: 2px;

    background: #d0d0d0;
}


/* PAYMENT */

.ks-payment-card {
    border-radius: var(--radius);

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.ks-payment-logo {
    color: #1945a5;

    display: flex;
    align-items: center;
}

.ks-payment-mark {
    margin-right: 3px;

    color: #1a66e8;

    font-size: 28px;
    font-weight: 900;

    transform: rotate(-17deg);
}

.ks-payment-logo strong {
    display: block;

    font-size: 16px;
    font-style: italic;
}

.ks-payment-logo small {
    display: block;

    margin-top: -2px;

    color: #333;

    font-size: 6px;
}


/* RATE CARDS */

.ks-rate-card {
    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            #090909,
            #020202
        );

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ks-rate-label {
    color: #d8d8d8;

    font-size: 12px;
    font-weight: 600;
}

.ks-rate-value {
    margin-top: 6px;

    color: #eee;

    font-size: 16px;
}


/* =========================================================
   CONTENT TOP
   DATE + RANGE TABS
   ========================================================= */

.ks-content-top {
    min-width: 0;

    display: grid;

    grid-template-columns:
        260px
        minmax(0, 1fr)
        251px;

    gap: 9px;
}

.ks-date-card {
    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            #090909,
            #040404
        );

    display: flex;
    align-items: center;

    padding: 0 18px;

    overflow: hidden;
}

.ks-calendar-icon {
    width: 19px;
    height: 19px;

    margin-right: 11px;
}

.ks-calendar-icon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: #d5d5d5;

    stroke-width: 1.5;
    stroke-linecap: round;
}

.ks-date-label {
    color: #cacaca;

    font-size: 13px;
}

.ks-date-card strong {
    margin-left: 4px;

    color: #d9d9d9;

    font-size: 13px;
    font-weight: 500;
}

.ks-current-clock {
    margin-left: 6px;

    color: #cfcfcf;

    font-size: 12px;
}


/* RANGE TABS */

.ks-range-tabs {
    min-width: 0;

    border-radius: var(--radius);

    padding: 4px 9px;

    background:
        linear-gradient(
            180deg,
            #080808,
            #030303
        );

    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));

    gap: 8px;
}

.ks-range-tab {
    min-width: 0;
    height: 37px;

    padding: 0 5px;

    border: 1px solid #775400;
    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            #101010,
            #050505
        );

    color: #d7d7d7;

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background 0.12s ease,
        color 0.12s ease,
        box-shadow 0.12s ease;
}

.ks-range-tab:hover {
    color: #fff;
    border-color: #d59700;
}

.ks-range-tab.active {
    color: #090909;

    border-color: #ffd440;

    background:
        linear-gradient(
            180deg,
            #ffd75a,
            #ffa300
        );

    font-weight: 800;

    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.25),
        0 0 10px rgba(255, 181, 0, 0.55);
}


/* =========================================================
   MAIN
   ========================================================= */

.ks-main {
    min-height: 0;
    min-width: 0;

    display: grid;

    grid-template-columns:
        260px
        minmax(0, 1fr)
        251px;

    gap: 9px;
}


/* =========================================================
   LEFT SERIES
   ========================================================= */

.ks-series-panel {
    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: var(--radius);

    background: #050505;

    display: flex;
    flex-direction: column;
}

.ks-panel-heading {
    height: 40px;
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-bottom: 1px solid var(--border);

    color: var(--gold);

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 0.1px;
}

.ks-series-list {
    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-rows: repeat(10, minmax(0, 1fr));

    padding: 0 9px 8px;
}

.ks-series-row {
    min-height: 0;

    display: grid;

    grid-template-columns:
        49px
        1fr
        29px;

    gap: 8px;

    align-items: center;

    padding: 0 3px;

    border-bottom: 1px solid #503900;

    cursor: pointer;
}

.ks-series-row:last-child {
    border-bottom: 0;
}

.ks-series-row:hover {
    background: rgba(255, 180, 0, 0.035);
}

.ks-series-row.active {
    background:
        linear-gradient(
            90deg,
            rgba(255, 189, 0, 0.075),
            transparent
        );
}

.ks-result-badge {
    width: 37px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid currentColor;
    border-radius: 2px;

    font-size: 12px;
    font-weight: 700;

    background: rgba(0, 0, 0, 0.8);
}

.ks-series-row:nth-child(1) .ks-result-badge {
    color: #7fff00;
}

.ks-series-row:nth-child(2) .ks-result-badge {
    color: #00d4ff;
}

.ks-series-row:nth-child(3) .ks-result-badge {
    color: #ef00ff;
}

.ks-series-row:nth-child(4) .ks-result-badge {
    color: #ffd400;
}

.ks-series-row:nth-child(5) .ks-result-badge {
    color: #00e5ff;
}

.ks-series-row:nth-child(6) .ks-result-badge {
    color: #ffa000;
}

.ks-series-row:nth-child(7) .ks-result-badge {
    color: #ff00b7;
}

.ks-series-row:nth-child(8) .ks-result-badge {
    color: #6dff00;
}

.ks-series-row:nth-child(9) .ks-result-badge {
    color: #ff2727;
}

.ks-series-row:nth-child(10) .ks-result-badge {
    color: #00baff;
}

.ks-series-code {
    text-align: center;

    color: #e2e2e2;

    font-size: 19px;
    font-weight: 500;
}

.ks-series-row.active .ks-series-code {
    color: #fff;
}

.ks-series-checkbox {
    width: 18px;
    height: 18px;

    justify-self: center;

    border: 1px solid #797979;
    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            #111,
            #050505
        );
}


/* =========================================================
   CENTER GAME GRID
   ========================================================= */

.ks-game-panel {
    min-width: 0;
    min-height: 0;

    padding: 7px 10px 8px;

    border-radius: var(--radius);

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 179, 0, 0.025),
            transparent 55%
        ),
        #040404;
}

.ks-number-grid {
    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-rows: repeat(10, minmax(0, 1fr));

    gap: 5px 6px;
}

.ks-number-cell {
    min-width: 0;
    min-height: 0;

    position: relative;

    border: 1px solid #956a00;
    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            #0c0c0c,
            #030303
        );

    color: #dcdcdc;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: clamp(15px, 1.35vw, 21px);
    font-weight: 400;

    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.15);

    box-shadow:
        inset 0 0 4px rgba(255, 189, 0, 0.055);

    transition:
        color 0.08s linear,
        border-color 0.08s linear,
        background 0.08s linear,
        box-shadow 0.08s linear;
}

.ks-number-cell:hover {
    color: #fff8c5;

    border-color: #ffc000;

    box-shadow:
        inset 0 0 8px rgba(255, 186, 0, 0.16),
        0 0 8px rgba(255, 180, 0, 0.12);
}

.ks-number-cell.selected {
    color: #ffd800;

    border-color: #ffbd00;

    font-weight: 700;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 197, 0, 0.13),
            rgba(40, 27, 0, 0.28) 55%,
            #030303 100%
        );

    box-shadow:
        inset 0 0 13px rgba(255, 187, 0, 0.21),
        0 0 11px rgba(255, 179, 0, 0.3);

    text-shadow:
        0 0 7px rgba(255, 202, 0, 0.85);
}

.ks-qty-badge {
    position: absolute;

    right: 3px;
    bottom: 2px;

    min-width: 18px;
    height: 15px;

    padding: 0 3px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 2px;

    background: #f7af00;

    color: #000;

    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   RIGHT SELECTED TICKETS
   ========================================================= */

.ks-ticket-panel {
    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: var(--radius);

    background: #040404;

    display: flex;
    flex-direction: column;
}

.ks-ticket-heading {
    min-height: 36px;
    height: 36px;
}

.ks-ticket-table-header {
    min-height: 31px;

    display: grid;

    grid-template-columns:
        0.85fr
        0.95fr
        0.58fr
        1.25fr
        0.72fr;

    align-items: center;

    padding: 0 6px;

    border-bottom: 1px solid #554000;

    color: #c9c9c9;

    font-size: 9px;

    text-align: center;
}

.ks-ticket-list {
    min-height: 0;
    flex: 1;

    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: #806000 #080808;
}

.ks-ticket-empty {
    height: 100%;

    min-height: 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #707070;

    font-size: 12px;
}

.ks-ticket-row {
    min-height: 31px;

    display: grid;

    grid-template-columns:
        0.85fr
        0.95fr
        0.58fr
        1.25fr
        0.72fr;

    align-items: center;

    padding: 0 6px;

    border-bottom: 1px solid #342600;

    color: #d8d8d8;

    font-size: 11px;

    text-align: center;
}

.ks-ticket-row:hover {
    background: rgba(255, 181, 0, 0.035);
}

.ks-ticket-delete {
    width: 20px;
    height: 20px;

    margin: 0 auto;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #ff3d2a;
    border-radius: 2px;

    background:
        linear-gradient(
            180deg,
            #b3170b,
            #690800
        );

    color: #fff;

    cursor: pointer;

    font-size: 11px;
}


/* SUMMARY */

.ks-ticket-summary {
    min-height: 59px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6px;

    padding: 6px 5px;

    border-top: 1px solid var(--border);
}

.ks-summary-box {
    border: 1px solid #806000;
    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            #0c0c0c,
            #030303
        );

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ks-summary-label {
    color: #c9c9c9;

    font-size: 9px;
}

.ks-summary-value {
    margin-top: 3px;

    color: var(--gold);

    font-size: 17px;
    font-weight: 700;
}

.ks-summary-amount {
    font-size: 17px;
}


/* RIGHT GRID ACTIONS */

.ks-right-actions-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px;

    padding: 0 5px 6px;
}

.ks-action-btn {
    min-height: 48px;

    padding: 0 7px;

    border: 1px solid #9c7000;
    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            #0c0c0c,
            #030303
        );

    color: #e5c95e;

    cursor: pointer;

    font-size: 11px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;
}

.ks-action-btn:hover {
    color: #ffe06c;
    border-color: #e7a700;
}

.ks-action-icon {
    color: #ffcb21;

    font-size: 17px;
}


/* WIDE RIGHT BUTTONS */

.ks-wide-btn {
    min-height: 46px;

    margin: 0 5px 7px;

    border-radius: 5px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    font-size: 13px;
    font-weight: 500;

    letter-spacing: 0.1px;
}

.ks-clear-btn {
    border: 1px solid #ff391e;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #9b150b,
            #500500
        );

    box-shadow:
        inset 0 0 11px rgba(255, 28, 0, 0.18),
        0 0 8px rgba(255, 35, 0, 0.16);
}

.ks-purchase-btn {
    border: 1px solid #72ba0a;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #315f0e,
            #0e2702
        );

    box-shadow:
        inset 0 0 10px rgba(124, 255, 0, 0.13),
        0 0 8px rgba(97, 255, 0, 0.12);
}

.ks-claim-btn {
    border: 1px solid #00bdd8;

    color: #66e8ff;

    background:
        linear-gradient(
            180deg,
            #05313b,
            #00181e
        );

    box-shadow:
        inset 0 0 10px rgba(0, 215, 255, 0.12),
        0 0 8px rgba(0, 213, 255, 0.08);
}

.ks-wide-btn:disabled {
    opacity: 0.82;
}

.ks-wide-icon,
.ks-cart-icon {
    font-size: 19px;
}

.ks-barcode-symbol {
    font-family: monospace;

    color: #00dcff;

    letter-spacing: -3px;

    font-size: 16px;
}

.ks-shortcut {
    color: #d5d5d5;
}


/* =========================================================
   BOTTOM ACTIONS
   ========================================================= */

.ks-bottom-actions {
    min-width: 0;

    display: grid;

    grid-template-columns:
        82px
        1.1fr
        1fr
        1.15fr
        1.25fr
        1.6fr;

    gap: 10px;
}

.ks-bottom-btn {
    min-width: 0;

    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            #0b0b0b,
            #030303
        );

    color: #ebd36d;

    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
}

.ks-bottom-btn:hover {
    border-color: #e7a500;
    color: #ffe57b;
}

.ks-settings-btn {
    font-size: 37px;
}

.ks-gear-symbol {
    color: #ffc826;

    text-shadow:
        0 0 6px rgba(255, 201, 0, 0.45);
}

.ks-bottom-icon {
    color: #ffca23;

    font-size: 22px;
}

.ks-bottom-clear {
    border-color: #ff3b22;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #9e160c,
            #520500
        );

    box-shadow:
        inset 0 0 13px rgba(255, 35, 0, 0.16);
}

.ks-bottom-clear .ks-bottom-icon {
    color: #fff;
}


/* =========================================================
   NOTICE
   ========================================================= */

.ks-notice-bar {
    min-width: 0;

    overflow: hidden;

    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            #090909,
            #030303
        );

    display: grid;

    grid-template-columns: 91px minmax(0, 1fr);

    align-items: center;

    padding: 7px 15px;
}

.ks-notice-label {
    width: 72px;
    height: 31px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #ffac00,
            #ff8d00
        );

    color: #070707;

    font-size: 13px;
    font-weight: 800;
}

.ks-notice-track {
    min-width: 0;

    height: 100%;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.ks-notice-item {
    padding: 0 21px;

    white-space: nowrap;

    color: #d9d9d9;

    font-size: 16px;
}

.ks-notice-gold {
    color: #ffce16;
}

.ks-notice-separator {
    width: 2px;
    height: 26px;

    flex: 0 0 2px;

    background: #b37e00;
}


/* =========================================================
   LOADING
   ========================================================= */

.ks-loading-overlay {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(0, 0, 0, 0.95);
}

.ks-loading-overlay.hidden {
    display: none;
}

.ks-loading-card {
    width: 220px;

    padding: 26px 20px;

    border: 1px solid var(--gold-dark);
    border-radius: 8px;

    background: #080808;

    text-align: center;

    box-shadow:
        0 0 25px rgba(255, 180, 0, 0.14);
}

.ks-loading-card strong {
    display: block;

    margin-top: 15px;

    color: var(--gold);

    font-size: 17px;
}

.ks-loading-card span {
    display: block;

    margin-top: 6px;

    color: #999;

    font-size: 11px;
}

.ks-loader {
    width: 32px;
    height: 32px;

    margin: auto;

    border: 3px solid #312300;
    border-top-color: var(--gold);

    border-radius: 50%;

    animation: ksSpin 0.7s linear infinite;
}

@keyframes ksSpin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   TOAST
   ========================================================= */

.ks-toast {
    position: fixed;

    left: 50%;
    bottom: 85px;

    z-index: 6000;

    transform:
        translateX(-50%)
        translateY(20px);

    max-width: 420px;

    padding: 10px 18px;

    border: 1px solid #9c7000;
    border-radius: 5px;

    background: rgba(10, 10, 10, 0.97);

    color: #fff;

    font-size: 12px;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;

    box-shadow:
        0 0 15px rgba(255, 180, 0, 0.14);
}

.ks-toast.show {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   SCREEN FIT
   1366 x 768 / 1536 x 864 / 1920 x 1080
   ========================================================= */

@media (max-width: 1450px) {

    :root {
        --header-h: 76px;
        --top-row-h: 43px;
        --bottom-h: 62px;
        --notice-h: 54px;
    }

    .kubera-app {
        padding:
            8px
            10px
            8px;

        gap: 6px;
    }

    .ks-header {
        grid-template-columns:
            129px
            120px
            minmax(290px, 1.35fr)
            minmax(245px, 1fr)
            58px
            58px
            115px
            58px
            58px;

        gap: 7px;
    }

    .ks-brand-kubera {
        font-size: 40px;
    }

    .ks-brand-sunset {
        font-size: 23px;
    }

    .ks-brand-subtitle {
        font-size: 16px;
    }

    .ks-content-top,
    .ks-main {
        grid-template-columns:
            260px
            minmax(0, 1fr)
            251px;
    }

    .ks-number-grid {
        gap: 4px 5px;
    }

    .ks-number-cell {
        font-size: 18px;
    }

    .ks-series-code {
        font-size: 17px;
    }

    .ks-series-list {
        padding-left: 8px;
        padding-right: 8px;
    }

    .ks-wide-btn {
        min-height: 42px;
    }

    .ks-action-btn {
        min-height: 43px;
    }

    .ks-bottom-btn {
        font-size: 12px;
    }

    .ks-notice-item {
        font-size: 14px;
    }
}


/* =========================================================
   1366 x 768 TARGET TUNING
   ========================================================= */

@media
(max-width: 1380px)
and (max-height: 800px) {

    :root {
        --header-h: 73px;
        --top-row-h: 42px;
        --bottom-h: 60px;
        --notice-h: 49px;
    }

    .kubera-app {
        padding: 7px 9px;

        gap: 6px;
    }

    .ks-header {
        grid-template-columns:
            129px
            119px
            minmax(285px, 1.25fr)
            minmax(245px, 1fr)
            58px
            58px
            115px
            58px
            58px;
    }

    .ks-content-top,
    .ks-main {
        grid-template-columns:
            259px
            minmax(0, 1fr)
            250px;

        gap: 8px;
    }

    .ks-range-tabs {
        padding:
            3px
            8px;

        gap: 7px;
    }

    .ks-range-tab {
        height: 34px;

        font-size: 13px;
    }

    .ks-panel-heading {
        min-height: 34px;
        height: 34px;

        font-size: 14px;
    }

    .ks-series-list {
        padding-bottom: 5px;
    }

    .ks-result-badge {
        width: 36px;
        height: 22px;
    }

    .ks-game-panel {
        padding:
            6px
            9px;
    }

    .ks-number-grid {
        gap:
            4px
            5px;
    }

    .ks-number-cell {
        font-size: 17px;
    }

    .ks-ticket-table-header {
        min-height: 27px;
    }

    .ks-ticket-row {
        min-height: 27px;
    }

    .ks-ticket-summary {
        min-height: 54px;

        padding: 5px;
    }

    .ks-action-btn {
        min-height: 39px;
    }

    .ks-wide-btn {
        min-height: 40px;

        margin-bottom: 5px;
    }

    .ks-bottom-actions {
        gap: 9px;
    }

    .ks-notice-bar {
        padding:
            5px
            14px;
    }

    .ks-notice-label {
        height: 29px;
    }
}


/* =========================================================
   VERY WIDE / 1920
   ========================================================= */

@media (min-width: 1750px) {

    .kubera-app {
        padding:
            13px
            17px
            12px;

        gap: 8px;
    }

    .ks-header {
        grid-template-columns:
            150px
            128px
            minmax(430px, 1.45fr)
            minmax(330px, 1fr)
            68px
            68px
            132px
            68px
            68px;
    }

    .ks-content-top,
    .ks-main {
        grid-template-columns:
            300px
            minmax(0, 1fr)
            310px;
    }

    .ks-range-tab {
        font-size: 15px;
    }

    .ks-series-code {
        font-size: 21px;
    }

    .ks-number-cell {
        font-size: 22px;
    }

    .ks-ticket-row {
        font-size: 12px;
    }

    .ks-bottom-btn {
        font-size: 14px;
    }
}