/* ============================================================
   WBET Originals — shared game shell (exact WBET values)
   ============================================================ */
@font-face {
    font-family: 'Roboto Mono';
    src: url('/fonts/roboto-mono.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-wbet.woff2') format('woff2');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}
.og-page {
    font-family: 'Inter', 'Exo 2', system-ui, sans-serif;
    background: var(--rb-bg, #090C1D);
    color: var(--rb-text, #fff);
    min-height: 100vh;
}

.og-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0;
}
@media (min-width: 640px) { .og-shell { padding: 8px; } }

.og-title {
    font-size: 19px;
    font-weight: 900;
    color: var(--rb-text, #fff);
    margin-bottom: 12px;
    padding-left: 4px;
}

.og-grid {
    display: grid;
    gap: 12px;
}
@media (min-width: 1024px) {
    .og-grid { grid-template-columns: 320px minmax(0, 1fr); }
}

/* ---- Controls (left) ---- */
.og-controls {
    order: 2;
    background: var(--rb-card-deep, #191939);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 1024px) { .og-controls { order: 1; } }

.og-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rb-text-faint, rgba(255,255,255,0.42));
    margin-bottom: 4px;
}

.og-balance-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.og-input-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.og-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border-radius: 8px;
    background: var(--rb-bg, #090C1D);
    border: none;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--rb-text, #fff);
    outline: none;
    font-family: inherit;
}
.og-input:focus {
    box-shadow: 0 0 0 2px rgba(245,202,85,0.3);
}

.og-mini-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--rb-bg, #090C1D);
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--rb-text-soft, rgba(255,255,255,0.62));
    cursor: pointer;
    transition: filter 0.15s;
    font-family: inherit;
}
.og-mini-btn:hover { filter: brightness(1.25); }

/* ---- Segmented ---- */
.og-seg {
    display: flex;
    gap: 4px;
    background: var(--rb-bg, #090C1D);
    border-radius: 8px;
    padding: 4px;
    margin-top: 4px;
}
.og-seg-btn {
    flex: 1;
    height: 36px;
    border-radius: 6px;
    border: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    background: transparent;
    color: var(--rb-text-faint, rgba(255,255,255,0.42));
    font-family: inherit;
}
.og-seg-btn:hover { color: var(--rb-text, #fff); }
.og-seg-btn.active {
    background: var(--rb-card-deep, #191939);
    color: var(--rb-text, #fff);
}

/* ---- Stats ---- */
.og-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.og-stat {
    border-radius: 8px;
    background: var(--rb-bg, #090C1D);
    padding: 8px;
}
.og-stat-wide { grid-column: 1 / -1; }
.og-stat-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rb-text-faint, rgba(255,255,255,0.42));
    margin-bottom: 2px;
}
.og-stat-val {
    display: block;
    font-size: 13px;
    font-weight: 900;
    color: var(--rb-text, #fff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- Roll / action button ---- */
.og-roll-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.15s;
    font-family: inherit;
    background: var(--rb-gold-gradient, linear-gradient(180deg, #f5d56b 0%, #d9a22a 100%));
    color: var(--rb-gold-deep, #392607);
}
.og-roll-btn:hover { filter: brightness(1.1); }
.og-roll-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.og-result-line {
    text-align: center;
    font-size: 13px;
    font-weight: 900;
}

/* ---- Board (right) ---- */
.og-board {
    order: 1;
    background: var(--rb-card-sunken, #12142E);
    border-radius: 14px;
    padding: 12px;
    min-width: 0;
}
@media (min-width: 640px) { .og-board { padding: 16px; } }
@media (min-width: 1024px) { .og-board { order: 2; } }

.og-board-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: min(60vh, 440px);
    border-radius: 10px;
    background: #0a0620;
}

.og-board-inner.mines-game-root {
    height: min(70vh, 545px) !important;
}

.og-board-bg {
    position: absolute;
    inset: 0;
    background-image: url('/img/wbet/board-bg.svg');
    background-size: cover;
    background-position: center;
}

.og-board-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6,10,18,0.62);
}

.og-board-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 56%, var(--rb-gold-glow, rgba(1,224,163,0.14)) 0%, transparent 55%);
    pointer-events: none;
}

.og-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ---- Twin buttons (keno quick/clear) ---- */
.og-twin {
    display: flex;
    gap: 8px;
}
.og-twin .og-mini-btn {
    flex: 1;
}

/* ---- Paytable box (keno) ---- */
.og-paybox {
    border-radius: 8px;
    background: var(--rb-bg, #090C1D);
    padding: 8px;
    max-height: 132px;
    overflow-y: auto;
}
.og-pay-head {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rb-text-faint, rgba(255,255,255,0.42));
}
.og-pay-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}
.og-pay-name {
    color: var(--rb-text-faint, rgba(255,255,255,0.42));
}
.og-pay-mult {
    color: var(--rb-text, #fff);
}

/* ---- Color grid (roulette) ---- */
.og-color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.og-color-btn {
    position: relative;
    height: 64px;
    border: none;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0.45;
    font-family: inherit;
}
.og-color-btn:hover { opacity: 0.8; }
.og-color-btn.active {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    outline: 2px solid var(--rb-gold, #f5d56b);
    outline-offset: 2px;
}
.og-color-mult {
    display: block;
    font-size: 10px;
    font-weight: 700;
    opacity: 0.8;
}
.og-color-red { background: #bf1235; color: #ffffff; }
.og-color-green { background: #00e07c; color: #042a1b; }
.og-color-black { background: #191939; color: #eef4fb; }

/* ---- Hilo (WBET-style buttons) ---- */
.og-page.hl-page .og-roll-btn {
    background: linear-gradient(420deg, rgb(0, 255, 142) 0%, rgb(1, 224, 163) 49%, rgb(0, 170, 109) 49%, rgb(0, 170, 109) 100%);
    color: rgb(4, 36, 27);
    box-shadow: rgb(58, 109, 95) 0 -3px 0 0 inset, rgb(47, 255, 186) 0 2px 0 0 inset;
    font-weight: 800;
}
.og-page.hl-page .og-roll-btn:hover { filter: brightness(1.08); }

.og-page.hl-page .og-mini-btn {
    width: auto;
    min-width: 34px;
    padding: 0 12px;
    background: rgb(9, 12, 29);
    color: rgba(191, 191, 191, 0.82);
    font-size: 12px;
    font-weight: 700;
}

.og-page.hl-page .og-input {
    background: rgb(9, 12, 29);
}

.og-page.hl-page .og-ghost-btn {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    border: none;
    background: rgb(9, 12, 29);
    color: rgba(191, 191, 191, 0.82);
    font-size: 12px;
    font-weight: 700;
}
.og-page.hl-page .og-ghost-btn:hover { filter: brightness(1.3); }
.og-page.hl-page #hiloHigherBtn { color: rgb(0, 245, 164); }
.og-page.hl-page #hiloLowerBtn { color: rgb(46, 232, 255); }

/* ---- Twist (WBET-style buttons) ---- */
.og-page.tw-page #twistStartBtn,
.og-page.tw-page #twistCashoutBtn {
    height: 48px;
    border-radius: 10px;
    box-shadow: rgb(58, 109, 95) 0 -3px 0 0 inset, rgb(47, 255, 186) 0 2px 0 0 inset;
    font-weight: 900;
}
.og-page.tw-page #twistStartBtn {
    background: linear-gradient(420deg, rgb(0, 255, 142) 0%, rgb(1, 224, 163) 49%, rgb(0, 170, 109) 49%, rgb(0, 170, 109) 100%);
    color: rgb(4, 36, 27);
}
.og-page.tw-page #twistCashoutBtn {
    background: rgb(1, 224, 163);
    color: rgb(4, 36, 27);
}
.og-page.tw-page #twistStartBtn:hover,
.og-page.tw-page #twistCashoutBtn:hover { filter: brightness(1.05); }

/* ---- Blackjack (WBET-style buttons) ---- */
.og-page.bj-page .og-roll-btn {
    background: linear-gradient(420deg, rgb(0, 255, 142) 0%, rgb(1, 224, 163) 49%, rgb(0, 170, 109) 49%, rgb(0, 170, 109) 100%);
    color: rgb(4, 36, 27);
    box-shadow: rgb(58, 109, 95) 0 -3px 0 0 inset, rgb(47, 255, 186) 0 2px 0 0 inset;
    font-weight: 700;
}
.og-page.bj-page .og-roll-btn:hover { filter: brightness(1.08); }
.og-page.bj-page .og-mini-btn {
    width: auto;
    min-width: 34px;
    padding: 0 12px;
    background: rgb(9, 12, 29);
    color: rgba(191, 191, 191, 0.82);
    font-size: 12px;
    font-weight: 600;
}
.og-page.bj-page .og-input {
    background: rgb(9, 12, 29);
}
.og-page.bj-page .og-twin { margin-top: 12px; }
.og-page.bj-page #bjNewBtn { background: rgb(1, 224, 163); color: rgb(4, 36, 27); }

/* ---- Fairness ---- */
.og-ghost-btn {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--rb-text-faint, rgba(255,255,255,0.18));
    background: transparent;
    color: var(--rb-text-soft, rgba(255,255,255,0.62));
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.og-ghost-btn:hover { filter: brightness(1.5); }
.og-ghost-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.og-fairness {
    margin-top: 12px;
    border-radius: 14px;
    background: var(--rb-card-deep, #191939);
    overflow: hidden;
}
.og-fair-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--rb-text, #fff);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.og-fair-btn svg { color: var(--rb-gold, #f5ca55); }

/* ---- Guest overlay ---- */
.og-guest-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5,8,13,0.74);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.og-guest-box {
    text-align: center;
    color: var(--rb-text-soft, rgba(255,255,255,0.62));
    font-size: 15px;
    font-weight: 600;
    background: var(--rb-card, #191939);
    border: 1px solid var(--rb-border-strong, rgba(255,255,255,0.08));
    border-radius: 14px;
    padding: 28px 36px;
}
.og-guest-box .btn {
    margin-top: 12px;
    display: inline-block;
    padding: 10px 24px;
    background: var(--rb-gold-gradient, linear-gradient(180deg, #f5d56b 0%, #d9a22a 100%));
    color: var(--rb-gold-deep, #392607);
    border-radius: 10px;
    font-weight: 900;
    font-size: 14px;
    text-decoration: none;
}

/* ---- Simple result display (used by non-canvas games) ---- */
.og-result-big {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}
.og-result-num {
    font-size: 56px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.og-result-num.win { color: var(--rb-green, #20d06b); }
.og-result-num.lose { color: var(--rb-red, #ff3d5f); }