/* --- Base --- */
* { box-sizing: border-box; }
:root {
    color-scheme: light dark;
    --bg-top: #f8fafc;
    --bg-bottom: #eef2f7;
    --card: #ffffff;
    --card-border: #d8dee8;
    --card-shadow: rgba(15, 23, 42, .1);
    --text: #111827;
    --muted: #5b6472;
    --control-bg: #ffffff;
    --control-border: #cbd5e1;
    --primary: #2563eb;
    --accent: #16a34a;
    --coinGlow: rgba(37,99,235,.22);
    --luckyGlow: rgba(14,165,233,.26);
    --coinText: #12305a;
    --coinBg: radial-gradient(120% 120% at 30% 25%, #ffffff 0%, #dbeafe 55%, #bfdbfe 100%);
    --luckyText: #064e7a;
    --luckyBg: radial-gradient(120% 120% at 30% 25%, #f0f9ff 0%, #bae6fd 55%, #7dd3fc 100%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-top: #0b0c10;
        --bg-bottom: #0e1116;
        --card: #14161a;
        --card-border: #1f232b;
        --card-shadow: rgba(0,0,0,.25);
        --text: #e8eaed;
        --muted: #a0a7b4;
        --control-bg: #0f1217;
        --control-border: #262a33;
        --primary: #3b82f6;
        --accent: #22c55e;
        --coinGlow: rgba(59,130,246,.4);
        --luckyGlow: rgba(14,165,233,.45);
        --coinText: #e6eefc;
        --coinBg: radial-gradient(120% 120% at 30% 25%, #273245 0%, #121820 55%, #0d131b 100%);
        --luckyText: #dff7ff;
        --luckyBg: radial-gradient(120% 120% at 30% 25%, #224a63 0%, #0f2633 55%, #0b1a24 100%);
    }
}
html, body { height: 100%; }
body {
    margin: 0;
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    color: var(--text);
    font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* --- Layout --- */
.wrapper { max-width: 820px; margin: 0 auto; padding: 16px; }
.header { display: flex; gap: 12px; align-items: center; }
.header .game-switch { margin-left: auto; }

.card {
    margin: 12px 0;
    padding: 12px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 20px var(--card-shadow);
}

/* --- Form controls --- */
select, input[type="number"] {
    background: var(--control-bg);
    color: var(--text);
    border: 1px solid var(--control-border);
    border-radius: 10px;
    padding: 8px 10px;
    outline: none;
}
select:focus, input[type="number"]:focus { border-color: var(--primary); }

.css3button {
    padding: 10px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: #fff;
    border: 0;
    box-shadow: 0 6px 16px rgba(37,99,235,.4), inset 0 1px 0 rgba(255,255,255,.1);
    cursor: pointer;
}
.css3button:hover { filter: brightness(1.05); }
.css3button:active { transform: translateY(1px); }

/* --- Number tokens --- */
.coin, .coinlucky {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    margin: 6px 6px 0 0;
    border-radius: 50%;
    font-weight: 700;
    letter-spacing: .2px;
    user-select: none;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.02) inset;
}
.coin {
    color: var(--coinText);
    background: var(--coinBg);
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
    box-shadow: 0 8px 20px var(--coinGlow), inset 0 0 0 1px rgba(255,255,255,.35);
}
.coinlucky {
    color: var(--luckyText);
    background: var(--luckyBg);
    box-shadow: 0 8px 22px var(--luckyGlow), inset 0 0 0 1px rgba(255,255,255,.35);
}

@media (prefers-color-scheme: dark) {
    .coin { text-shadow: 0 1px 0 rgba(0,0,0,.5); }
}

.btn-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px 0;   /* keeps it tight above the results */
}
.btn-row .css3button { margin: 0; }

.btn-secondary {
    background: linear-gradient(180deg, #475569, #334155);
    box-shadow: 0 6px 16px rgba(51,65,85,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-secondary:hover { filter: brightness(1.05); }

.notice-win {
    border-color: rgba(22,163,74,.45);
}

.latest-draw {
    border-color: rgba(37,99,235,.35);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.draw-meta {
    color: var(--muted);
}

.win-row + .win-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--card-border);
}

.small-coin {
    width: 34px;
    height: 34px;
    font-size: 13px;
    margin-top: 2px;
}

/* --- Helpers --- */
h1 { margin: 0; font-size: 22px; }
h2 { margin: 0 0 8px; font-size: 18px; }
p  { margin: .6em 0; color: var(--text); }
.small { opacity: .65; font-size: 12px; }
ul { margin: 8px 0; padding-left: 18px; }