/* Twister Dice – fristående sida (flyttad från inline-stil i originalet). */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 1rem;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: center;
    color: #000;
    background: #fff;
    transition: background-color .3s, color .3s;
    cursor: pointer;
}

main { width: 100%; max-width: 48rem; }

h1 { font-size: 1.2rem; margin: 0 0 1rem; }

.body-part { font-size: 12vw; font-weight: bold; margin: 0 0 1rem; line-height: 1.1; }
.color-name { font-size: 8vw; margin: 0; min-height: 1.2em; }

.instruction { margin-top: 1.5rem; font-size: .95rem; }

.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    cursor: auto;
}

.autoplay, .voiceSelect { font-size: 1rem; }

input[type="number"], select {
    margin-left: .5rem;
    padding: .3em;
    font-size: 1rem;
    min-height: 44px;
}

input[type="number"] { width: 5rem; }
input[type="checkbox"] { width: 1.25rem; height: 1.25rem; vertical-align: middle; }

.roll {
    min-height: 44px;
    padding: .5rem 1.5rem;
    font: bold 1rem system-ui, sans-serif;
    color: #fff;
    background: #222;
    border: 2px solid #fff;
    border-radius: 6px;
    cursor: pointer;
}

.back { margin-top: 2rem; font-size: .95rem; }
.back a { color: inherit; font-weight: bold; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.shake { animation: shake .3s ease; }

@keyframes shake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(5px, 0); }
    50% { transform: translate(-5px, 0); }
    75% { transform: translate(5px, 0); }
    100% { transform: translate(0, 0); }
}

@media (min-width: 601px) {
    .body-part { font-size: 10vw; }
    .color-name { font-size: 6vw; }
}

@media (prefers-reduced-motion: reduce) {
    .shake { animation: none; }
    body { transition: none; }
}