/* ----------------------------------------------------------
 *  Roulette page styles
 *  This file only adds NEW rules — it leans entirely on the
 *  colour variables (--bg, --panel, --accent, etc.) already
 *  defined in style.css, so it automatically matches the rest
 *  of the site's look.
 * ---------------------------------------------------------- */

/* ---------- Wallet box ---------- */
.wallet-box {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid var(--bevel-mid);
}

.wallet-balance {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: "Silkscreen", system-ui, sans-serif;
}

.wallet-label {
    color: var(--muted);
    font-size: 0.85rem;
}

.wallet-amount {
    font-size: 2rem;
    color: var(--warn);
    text-shadow: 0 0 6px rgba(255, 204, 0, 0.5);
}

.wallet-unit {
    color: var(--muted);
    font-size: 0.85rem;
}

.wallet-claim {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}

#claimBtn {
    font-family: "Silkscreen", system-ui, sans-serif;
    padding: 0.5rem 0.9rem;
    background: linear-gradient(180deg, rgba(68,255,136,0.35), rgba(0,0,0,0.35));
    color: var(--text);
    border: 2px solid var(--accent);
    box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.16),
    inset -2px -2px 0 rgba(0,0,0,0.45);
    cursor: pointer;
    transition: transform 120ms ease, opacity 120ms ease;
}

#claimBtn:hover:not(:disabled) { transform: translateY(-1px); }

#claimBtn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--bevel-mid);
    background: rgba(0,0,0,0.35);
}

.small-note {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--link);
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
}

.link-btn:hover { color: var(--accent); }

/* ---------- Spin history sidebar ---------- */
.spin-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.spin-history li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(255,255,255,0.1);
    font-size: 0.95rem;
}

.spin-history__empty {
    color: var(--muted);
    font-style: italic;
    border: none !important;
    background: none !important;
}

.spin-history .pocket-swatch {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid var(--bevel-dark);
    flex-shrink: 0;
}

.spin-history .win  { color: var(--accent); }
.spin-history .lose { color: var(--hot); }

/* ---------- Layout: wheel + betting controls side by side ---------- */
.roulette-layout {
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 800px) {
    .roulette-layout { grid-template-columns: 1fr; }
}

/* ---------- The wheel ---------- */
.wheel-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.wheel-pointer {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 18px solid var(--warn);
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
    margin-bottom: -6px;
    z-index: 2;
}

.wheel-outer {
    position: relative;
    width: min(320px, 80vw);
    height: min(320px, 80vw);
    border-radius: 50%;
    border: 6px solid var(--bevel-mid);
    box-shadow:
    0 0 0 2px var(--bevel-dark),
    0 0 24px rgba(0,0,0,0.6),
    inset 0 0 0 3px rgba(255,255,255,0.08);
    background: var(--panel2);
}

.wheel-face {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    /* background (conic-gradient) is generated by roulette.js,
       since it depends on the wheel's pocket order */
    transition: transform 4.5s cubic-bezier(0.15, 0.85, 0.1, 1);
}

.wheel-face .pocket-label {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: "Silkscreen", system-ui, sans-serif;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.85);
    transform-origin: 0 0;
}

.wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--panel);
    border: 3px solid var(--bevel-mid);
    box-shadow: 0 0 0 2px var(--bevel-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Silkscreen", system-ui, sans-serif;
    font-size: 1.5rem;
    color: var(--text);
}

/* ---------- Betting controls ---------- */
.bet-group {
    border: 2px solid var(--bevel-mid);
    padding: 0.75rem;
    margin: 0 0 1rem;
}

.bet-group legend {
    font-family: "Silkscreen", system-ui, sans-serif;
    padding: 0 0.4rem;
    color: var(--muted);
}

.bet-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bet-type {
    font-family: "Silkscreen", system-ui, sans-serif;
    font-size: 0.85rem;
    padding: 0.5rem 0.4rem;
    background: rgba(0,0,0,0.35);
    color: var(--text);
    border: 2px solid var(--bevel-mid);
    box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.16),
    inset -2px -2px 0 rgba(0,0,0,0.45);
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease;
}

.bet-type:hover { border-color: var(--accent); transform: translateY(-1px); }

.bet-type[aria-pressed="true"] {
    border-color: var(--accent);
    box-shadow:
    0 0 0 2px var(--accent),
    inset 2px 2px 0 rgba(255,255,255,0.16);
}

.bet-type.red   { color: #ff8fa3; }
.bet-type.black { color: #cfd8ff; }

.straight-number-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.straight-number-row input {
    width: 5rem;
}

.payout-note {
    margin: 0.6rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.chip {
    font-family: "Silkscreen", system-ui, sans-serif;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: 2px dashed var(--bevel-light);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25), rgba(0,0,0,0.35));
    color: var(--text);
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease;
}

.chip:hover { transform: translateY(-2px); border-color: var(--accent); }
.chip--max { border-style: solid; color: var(--warn); }

.wager-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.wager-row input { width: 6rem; }

#spinBtn {
    font-family: "Silkscreen", system-ui, sans-serif;
    font-size: 1.05rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(180deg, rgba(0,162,255,0.35), rgba(255,77,109,0.25));
    color: var(--text);
    border: 2px solid var(--bevel-mid);
    box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.16),
    inset -2px -2px 0 rgba(0,0,0,0.45);
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease;
}

#spinBtn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
#spinBtn:disabled { opacity: 0.5; cursor: not-allowed; }

.reset-note { margin-top: 1rem; }


/* =====================================================================
   Floating roulette window (index.html only)
   ---------------------------------------------------------------------
   This is the little draggable panel that embeds roulette-widget.html
   in an iframe, the same way .radio-window embeds the Spotify player.
   It reuses .radio-titlebar / .radio-body for the shared chrome (drag
   cursor, colours, padding) and only adds what's different here.
   ===================================================================== */

.roulette-window {
    position: fixed;
    top: 1rem;
    right: 1rem;

    width: 360px;
    height: 560px;

    background: var(--panel);
    border: 3px solid var(--bevel-mid);
    box-shadow:
    0 0 0 2px var(--bevel-dark),
    inset 2px 2px 0 rgba(255,255,255,0.16),
    inset -2px -2px 0 rgba(0,0,0,0.45);

    z-index: var(--z-floating);
    display: flex;
    flex-direction: column;
}

.roulette-titlebar {
    /* different accent gradient so it doesn't look identical to the
       radio player at a glance */
    background: linear-gradient(90deg, rgba(255,204,0,0.35), rgba(255,77,109,0.25));
}

.roulette-titlebar-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.roulette-popout {
    text-decoration: none;
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1;
}

.roulette-popout:hover { color: var(--accent); }

.roulette-minimize {
    font-family: "Silkscreen", system-ui, sans-serif;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1;
    background: rgba(0,0,0,0.35);
    color: var(--text);
    border: 2px solid var(--bevel-mid);
    cursor: pointer;
}

.roulette-minimize:hover { border-color: var(--accent); }

.roulette-body {
    flex: 1;
    min-height: 0; /* lets the iframe shrink correctly inside a flex column */
}

.roulette-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Minimized state: collapse everything except the titlebar. Applied
   by script.js toggling `.is-minimized` on the whole `.roulette-window`. */
.roulette-window.is-minimized {
    height: auto;
}

.roulette-window.is-minimized .roulette-body {
    display: none;
}

/* Same minimized behaviour, now also for the music player window.
   Added as its own rule rather than editing the block above, so the
   roulette-specific rule stays exactly as it was. */
.radio-window.is-minimized {
    height: auto;
}

.radio-window.is-minimized .radio-body {
    display: none;
}

/* Floating windows get cramped fast — hide the roulette widget below
   tablet width and point people at the full /roulette.html page
   (linked from the site nav) instead of fighting for space with the
   music player and the skeleton gif. */
@media (max-width: 900px) {
    .roulette-window { display: none; }
}


/* =====================================================================
   Widget mode (roulette-widget.html only)
   ---------------------------------------------------------------------
   The widget reuses every ID and class from the main roulette page —
   that's what lets it share roulette.js unchanged. This block only
   scales things down to fit a ~340px-wide iframe instead of a full
   page column.
   ===================================================================== */

body.page-roulette-widget {
    background: var(--panel2);
    padding: 0.6rem;
}

body.page-roulette-widget .widget-popout {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    text-align: right;
}

body.page-roulette-widget .wallet-box {
    padding: 0.5rem 0.6rem;
    gap: 0.6rem;
}

body.page-roulette-widget .wallet-amount { font-size: 1.4rem; }

body.page-roulette-widget .wheel-outer {
    width: 170px;
    height: 170px;
}

body.page-roulette-widget .wheel-face .pocket-label {
    display: none;
}

body.page-roulette-widget .bet-type-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.35rem;
}

body.page-roulette-widget .bet-type {
    font-size: 0.7rem;
    padding: 0.4rem 0.3rem;
}

body.page-roulette-widget .chip {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.85rem;
}

body.page-roulette-widget .spin-history {
    max-height: 110px;
    overflow-y: auto;
}