:root {
    color-scheme: dark;
    --panel: rgba(20, 27, 48, .9);
    --text: #f7f9ff;
    --muted: #b9c3dc;
    --start: #18bd7e;
    --stop: #ff4964;
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
    color: var(--text);
    background: radial-gradient(circle at top, #293762, #0b1020 68%);
}

.roulette {
    width: min(920px, 100%);
    padding: clamp(20px, 4vw, 42px);
    text-align: center;
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .4);
}

h1 { margin: 0 0 24px; font-size: clamp(26px, 5vw, 44px); }

.display {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #060912;
    border: 5px solid rgba(255, 255, 255, .92);
    border-radius: 20px;
    box-shadow: 0 0 0 7px rgba(88, 129, 255, .3), 0 14px 36px rgba(0, 0, 0, .45);
}

.display img { width: 100%; height: 100%; display: block; object-fit: contain; }

.result-label {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    padding: 10px 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 800;
    background: rgba(8, 12, 24, .78);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.result-label.decided { color: #152219; background: rgba(255, 224, 99, .95); animation: pop .45s ease; }

.controls { display: flex; gap: 16px; justify-content: center; margin-top: 28px; }

.button {
    min-width: 150px;
    padding: 15px 26px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
    transition: transform .15s ease, opacity .15s ease;
}

.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button-start { background: var(--start); }
.button-stop { background: var(--stop); }
.status { min-height: 1.5em; margin: 18px 0 0; color: var(--muted); }
.empty { padding: 32px; line-height: 1.8; background: rgba(255, 255, 255, .07); border-radius: 16px; }
code { color: #ffe063; }

@keyframes pop { 50% { transform: scale(1.04); } }

@media (max-width: 520px) {
    body { padding: 12px; }
    .roulette { border-radius: 20px; }
    .controls { gap: 10px; }
    .button { min-width: 0; flex: 1; padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}