/* ===== Reset & Base ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #0f1117;
    --surface: #1a1d27;
    --surface-hover: #22263a;
    --border: #2a2e3e;
    --primary: #6c5ce7;
    --primary-hover: #7f70f0;
    /* Iris light enough to clear 4.5:1 as text on a card, and to read as a
       focus ring against both the card and the page ground. */
    --primary-text: #8f83f4;
    --success: #00b894;
    --danger: #e17055;
    /* Clay light enough to clear 4.5:1 on its own 15% tint. */
    --danger-text: #e8846b;
    --text: #e4e6eb;
    --text-muted: #8b8fa3;
    /* Muted text that has to sit on a colour tint rather than a neutral. */
    --text-on-tint: #a8acc0;
    --accent: #ffd32a;
    --radius: 12px;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-float: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
}

/* Every control gets the same focus treatment, in the colour the system says
   focus means. Without this only the inputs were styled and the other 14
   controls fell back to five different browser defaults. */
:focus-visible {
    outline: 2px solid var(--primary-text);
    outline-offset: 2px;
    border-radius: 4px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 200;
    background: var(--primary);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 0 0 8px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s;
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

/* ===== Header ===== */
header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.5rem;
    font-weight: 700;
    min-width: 0;
}

.wordmark-mark {
    flex: none;
    color: var(--primary);
}

.wordmark-text {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.player-name {
    color: var(--text-muted);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-balance {
    background: var(--primary);
    color: #fff;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1rem;
    min-width: 110px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex: none;
    transition: transform 0.2s, background-color 0.2s;
}

/* The pill used to perform the same congratulatory bounce on a loss. */
.player-balance.credited {
    transform: scale(1.1);
    background: var(--success);
}

.player-balance.debited {
    transform: scale(0.97);
}

/* ===== Main ===== */
main {
    max-width: 900px;
    width: 100%;
    margin: 2rem auto;
    padding: 0 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ===== Cards ===== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.card h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text);
}

/* ===== Bet Form ===== */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    min-width: 0;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.label-note {
    color: var(--text-muted);
    font-weight: 400;
}

.form-group input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

.form-group input:focus-visible {
    outline: 2px solid var(--primary-text);
    outline-offset: 2px;
}

.form-group input[aria-invalid="true"] {
    border-color: var(--danger);
}

.field-error {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--danger-text);
}

/* ===== Quick Stakes ===== */
.quick-stakes {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.stake-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--success);
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

.stake-btn:hover {
    border-color: var(--success);
    background: rgba(0, 184, 148, 0.1);
    transform: translateY(-1px);
}

/* ===== Quick Picks ===== */
.quick-picks {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.pick-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    min-width: 62px;
}

.pick-value {
    font-size: 0.9rem;
    font-weight: 600;
}

.pick-meta {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-on-tint);
    font-variant-numeric: tabular-nums;
}

.pick-btn:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
    transform: translateY(-1px);
}

.pick-btn[aria-pressed="true"] {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.2);
    color: #fff;
}

.pick-btn.best {
    border-color: var(--accent);
    background: rgba(255, 211, 42, 0.08);
}

.pick-btn.best:hover,
.pick-btn.best[aria-pressed="true"] {
    border-color: var(--accent);
    background: rgba(255, 211, 42, 0.2);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    width: 100%;
}

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

.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The odds legend reads before the control it informs, and no longer carries
   a solid-Iris chip that looked like a second submit button. */
.odds-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.odds-hint-label {
    font-weight: 600;
    color: var(--text);
}

.odds-band {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.odds-badge {
    display: inline-block;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ===== Dice Result ===== */
.result-card {
    text-align: center;
}

.dice-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin: 1rem 0 0;
    flex-wrap: wrap;
    transition: opacity 0.2s;
}

.dice-display.pending {
    opacity: 0.55;
}

.die {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.die.rolling {
    animation: roll 0.4s ease-in-out;
}

@keyframes roll {
    0%   { transform: rotateY(0deg) scale(1); }
    50%  { transform: rotateY(180deg) scale(0.8); }
    100% { transform: rotateY(360deg) scale(1); }
}

.operator {
    font-size: 1.3rem;
    color: var(--text-muted);
    font-weight: 600;
}

.product-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 84px;
}

.product {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* The other half of the comparison the card exists to make. */
.product-caption {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.product-caption.matched {
    color: var(--success);
    font-weight: 600;
}

.result-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.result-status {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0.3rem 1.2rem;
    border-radius: 20px;
}

.result-status.won {
    background: rgba(0, 184, 148, 0.15);
    color: var(--success);
    border: 1px solid var(--success);
}

.result-status.lost {
    background: rgba(225, 112, 85, 0.15);
    color: var(--danger-text);
    border: 1px solid var(--danger);
}

.result-winnings {
    font-size: 1rem;
    color: var(--success);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.result-resting {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ===== Tabs ===== */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.tab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.tab:hover {
    color: var(--text);
}

.tab[aria-selected="true"] {
    color: var(--primary-text);
    border-bottom-color: var(--primary);
}

.tab-content[hidden] {
    display: none;
}

/* ===== Tables ===== */
.table-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

thead th {
    text-align: left;
    padding: 0.6rem 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

tbody td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid rgba(42, 46, 62, 0.5);
    white-space: nowrap;
}

/* Money and counts line up on the decimal. */
.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

th.num {
    text-align: right;
}

.col-time {
    color: var(--text-muted);
}

tbody tr:hover {
    background: var(--surface-hover);
}

.empty-row {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem !important;
    font-style: italic;
    white-space: normal;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-won,
.badge-credit {
    background: rgba(0, 184, 148, 0.15);
    color: var(--success);
}

.badge-lost,
.badge-debit {
    background: rgba(225, 112, 85, 0.15);
    color: var(--danger-text);
}

/* ===== Footer ===== */
footer {
    text-align: center;
    padding: 1.5rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    color: var(--text-muted);
    font-size: 0.8rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

footer a {
    color: var(--primary-text);
}

/* ===== Toast ===== */
/* Reserved for server and network failures. Validation now answers at the
   field, so the toast is no longer the only channel for everything. */
.toast {
    position: fixed;
    bottom: max(2rem, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(30rem, calc(100vw - 2rem));
    background: var(--danger);
    color: #fff;
    padding: 0.8rem 0.8rem 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: var(--shadow-float);
    transition: transform 0.3s ease;
    z-index: 1000;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
}

.toast-dismiss {
    flex: none;
    background: none;
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.toast-dismiss:hover {
    opacity: 1;
}

/* ===== Coarse pointers ===== */
@media (pointer: coarse) {
    .stake-btn,
    .pick-btn,
    .tab {
        min-height: 44px;
    }

    .stake-btn {
        padding-inline: 1rem;
    }

    .toast-dismiss {
        width: 44px;
        height: 44px;
    }
}

/* ===== Compact ===== */
@media (max-width: 600px) {
    header {
        padding: 0.6rem 1rem;
    }

    .wordmark {
        font-size: 1.25rem;
    }

    .player-name {
        display: none;
    }

    main {
        margin: 1.25rem auto;
    }

    .card {
        padding: 1.25rem 1rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .form-group input,
    .btn {
        min-height: 48px;
    }

    .dice-display {
        gap: 0.4rem;
    }

    .die {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }

    .tab {
        flex: 1;
        padding-inline: 0.5rem;
    }

    /* Seven columns cannot survive 375px, so each row becomes a small record
       instead of overflowing the document. */
    .table-scroll table,
    .table-scroll tbody,
    .table-scroll tr,
    .table-scroll td {
        display: block;
        width: 100%;
    }

    .table-scroll thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .table-scroll tbody tr {
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.5rem 0.8rem;
        margin-bottom: 0.6rem;
    }

    .table-scroll tbody tr:hover {
        background: none;
    }

    .table-scroll tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.25rem 0;
        border: none;
        text-align: left;
        white-space: normal;
    }

    .table-scroll tbody td::before {
        content: attr(data-label);
        flex: none;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table-scroll tbody td.empty-row {
        display: block;
        text-align: center;
    }

    .table-scroll tbody td.empty-row::before {
        content: none;
    }
}

/* ===== Reduced motion ===== */
/* Movement goes, feedback stays: the dice still change, the balance still
   marks its direction with colour, the toast still arrives. */
@media (prefers-reduced-motion: reduce) {
    .die.rolling {
        animation: none;
    }

    .btn-primary:hover:not(:disabled),
    .stake-btn:hover,
    .pick-btn:hover {
        transform: none;
    }

    .player-balance.credited,
    .player-balance.debited {
        transform: none;
    }

    .toast {
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .toast.show {
        transform: translateX(-50%);
        opacity: 1;
    }

    .skip-link {
        transition: none;
    }
}