/* Glücksrad für Männer – das Rad steht, der Pfeil dreht */

.wheel-page { max-width: 820px; margin-inline: auto; margin-top: calc(clamp(28px, 5vw, 56px) * -0.5); }

.wheel-intro { text-align: center; margin-bottom: clamp(22px, 3vw, 30px); }
.wheel-intro__kicker {
    display: inline-block;
    margin: 0 0 12px;
    padding: 5px 14px 6px;
    background: var(--tape);
    font-weight: 800;
    letter-spacing: .02em;
    transform: rotate(-2deg);
    box-shadow: 0 4px 10px -6px rgba(29,36,48,.4);
}
.wheel-intro h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.wheel-intro p:last-child { margin: 8px auto 0; max-width: 52ch; color: var(--ink-soft); font-size: 1.08rem; }

/* Tafel mit dem Rad */
.wheel-board {
    position: relative;
    padding: clamp(24px, 3.5vw, 34px) clamp(14px, 4vw, 44px) clamp(18px, 3vw, 26px);
    background: var(--paper);
    border-radius: 6px;
    box-shadow: var(--shadow-lift);
    transform: rotate(.5deg);
}
.wheel-board__magnet { --size: 36px; top: -15px; left: calc(50% - 18px); }

.wheel {
    position: relative;
    /* höchstens 500px, auf flachen Bildschirmen so klein, dass der Knopf ohne Scrollen sichtbar ist */
    width: min(100%, clamp(300px, calc(100vh - 430px), 500px));
    aspect-ratio: 1;
    margin: 0 auto;
}
.wheel__disc { display: block; width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(29,36,48,.22)); }
.wheel__label {
    font-family: var(--font-display);
    font-size: 19px;
    fill: var(--ink);
    letter-spacing: .01em;
}
.wheel__label--beer { font-size: 32px; }
.wheel__wedge { transition: fill .3s; }
.wheel.is-landed .wheel__wedge--beer { animation: beer-glow .9s ease-in-out 3; }
@keyframes beer-glow {
    0%, 100% { fill: #f5b700; }
    50% { fill: #ffe26b; }
}

.wheel__pointer {
    position: absolute;
    inset: 0;
    transform: rotate(var(--turn, 35deg));
    pointer-events: none;
}
.wheel__pointer svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 6px rgba(29,36,48,.35)); }
.wheel__pointer.is-spinning { transition: transform var(--dur, 4.2s) cubic-bezier(.12, .62, .1, 1); }
.wheel__pointer.is-nudging { transition: transform .7s cubic-bezier(.5, 0, .3, 1.4); }

.wheel-controls { display: grid; justify-items: center; gap: 8px; margin-top: clamp(16px, 2.4vw, 22px); }
.wheel-controls__btn { font-size: 1.15rem; padding-inline: 30px; }
.wheel-controls__btn:disabled { opacity: .6; cursor: wait; transform: none; }
.wheel-controls__stats { margin: 0; color: var(--ink-faint); font-size: .92rem; }

/* Ergebnis */
.wheel-result {
    --tilt: -.8deg;
    width: min(600px, 100%);
    margin: 38px auto 0;
    padding: clamp(28px, 5vw, 40px);
    text-align: center;
    background: #fff6d6;
}
.wheel-result[hidden] { display: none; }
.wheel-result .tape { top: -13px; left: calc(50% - 46px); transform: rotate(-3deg); }
.wheel-result__kicker { margin: 0 0 4px !important; font-weight: 700; }
.wheel-result h2 { font-size: clamp(2.4rem, 7vw, 3.6rem); color: var(--sun-dark); }
.wheel-result p { margin: 8px 0 20px; }
.wheel-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wheel-result__share { margin: 22px 0 10px !important; font-size: .92rem; color: var(--ink-faint); }

/* Entschuldigung für die Frau */
.apology {
    margin: 22px 0 0;
    padding: 20px 20px 18px;
    background: var(--paper);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--line);
    transform: rotate(.6deg);
}
.apology__head { margin: 0 0 10px !important; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.apology__text {
    margin: 0 0 16px;
    padding: 0 0 0 14px;
    border-left: 4px solid var(--magenta);
    text-align: left;
    font-style: italic;
    line-height: 1.55;
    color: var(--ink);
}
.apology__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (prefers-reduced-motion: no-preference) {
    .wheel-result.is-new { animation: stick .6s var(--ease-out) both; }
}

@media (max-width: 520px) {
    .wheel-board { transform: none; }
    .wheel__label { font-size: 21px; }
    .wheel__label--beer { font-size: 34px; }
}