/* Shared control panel for Diam Originals (Mines, Coin Flip), matching the
   Blackjack sidebar in resources/views/blackjack.blade.php: same panel,
   amount field, action buttons and Play button. Game scripts drive these
   through their existing ids/classes and disable()/undisable(), which set a
   [disabled] attribute - so every "off" state below keys off [disabled]. */

.oc {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    background: #393c42;
    border-radius: 8px;
    box-sizing: border-box;
}
.oc__block { display: flex; flex-direction: column; gap: 14px; }
/* Let wide content (e.g. the Mines multiplier strip) scroll inside the
   panel instead of stretching it past the screen edge on phones. */
.oc > * { min-width: 0; max-width: 100%; }
.oc__label {
    display: block;
    color: #b1bad3;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px 2px;
    cursor: default;
}
.oc__block > .oc__label { margin-bottom: -8px; }

/* Amount field with attached 1/2 and 2x */
.oc__amount {
    display: flex;
    align-items: stretch;
    height: 44px;
    background: #171b23;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25), inset 0 1px 2px rgba(0,0,0,0.2);
    transition: border-color .15s ease, opacity .15s ease;
}
.oc__amount:hover { border-color: rgba(255,255,255,0.35); }
.oc__amount:has(input[disabled]) { opacity: .5; pointer-events: none; }
.oc__input {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 8px 0 0 8px;
    padding: 0 10px;
}
.oc__input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    padding: 0;
    cursor: text;
}
.oc__coin { display: block; width: 18px; height: 18px; margin-left: 8px; flex: none; }
.oc__mod {
    position: relative;
    flex: 0 0 48px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.oc__mod:hover { background: rgba(255,255,255,0.08); }
.oc__mod + .oc__mod::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: rgba(255,255,255,0.15);
}
.oc__frac { display: inline-flex; align-items: center; font-size: 15px; letter-spacing: -.04em; cursor: inherit; }
.oc__frac sup, .oc__frac sub { font-size: 10px; line-height: 1; cursor: inherit; }
.oc__frac sup { transform: translateY(-3px); }
.oc__frac sub { transform: translateY(3px); }

/* Two-column action grid + grey action buttons */
.oc__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 8px;
}
.oc__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 10px;
    background: #35373d;
    border: 0;
    border-radius: 8px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.12);
    transition: background-color .15s ease, opacity .15s ease;
    cursor: pointer;
    user-select: none;
}
.oc__btn *, .oc__play * { cursor: inherit; color: inherit; }
.oc__btn:hover { background: #5a5d66; }
.oc__btn[disabled] { opacity: .5; cursor: not-allowed; background: #35373d; }

/* Primary blue button (Play / Cash Out / Start Game) */
.oc__play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: #1475e1;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.12);
    transition: background-color .15s ease, opacity .15s ease;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}
.oc__play:hover { background: #1c83f5; }
.oc__play[disabled] { opacity: .5; cursor: not-allowed; background: #1475e1; }

/* Small selectable chips (e.g. Mines bomb count / level) */
.oc__row { display: flex; align-items: stretch; gap: 8px; }
.oc__field {
    flex: 0 0 56px;
    width: 56px !important;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
    background: #171b23 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 0 !important;
}
.oc__field[disabled] { opacity: .5; }
.oc__chips { flex: 1; display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.oc__chips a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    background: #35373d !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.12) !important;
    transition: background-color .15s ease, opacity .15s ease;
}
.oc__chips a::before, .oc__chips a::after { display: none !important; }
.oc__chips a:hover { background: #5a5d66 !important; }
.oc__chips a.mines__bomb--active { background: #1475e1 !important; }
.oc__chips a[disabled] { opacity: .5; cursor: not-allowed; }