/* ============================================================
   Borsig – Aktions-Karten auf der Startseite (öffentlich)
   Eingebunden in layouts/site.blade.php
   ============================================================ */
.offer-card { position: relative; }
.offer-card-img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: 10px; margin-bottom: 0.9rem;
}
.offer-badge {
    position: absolute; top: 1rem; right: 1rem;
    background: var(--brass); color: var(--espresso);
    font-weight: 700; font-size: 0.85rem;
    padding: 0.3rem 0.75rem; border-radius: 999px;
    box-shadow: var(--shadow);
}

/* ---------- Gewinne / Coupons (PWA-Stempelheft) ---------- */
.card-coupons { margin-top: 1.5rem; }
.card-coupons h2 { font-family: 'Fraunces', serif; margin-bottom: 0.75rem; }
.coupon-card {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    background: linear-gradient(135deg, #2A231C, #423423);
    color: #F3ECE0; border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 0.75rem;
    border: 1px solid rgba(201, 161, 74, .4);
}
.coupon-card-main { display: flex; flex-direction: column; }
.coupon-value { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 600; color: #E0C46A; line-height: 1; }
.coupon-title { font-size: 0.9rem; color: #D9CFBE; margin-top: 0.25rem; }
.coupon-card-code { text-align: right; display: flex; flex-direction: column; gap: 0.2rem; }
.coupon-code {
    font-family: monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em;
    background: rgba(255,255,255,.12); padding: 0.35rem 0.6rem; border-radius: 8px;
}
.coupon-valid { font-size: 0.72rem; color: #B7AC98; }

/* ---------- Spielbildschirm / Glücksrad ---------- */
.game-screen { padding: 1.5rem 0 3rem; }
.game-container { max-width: 480px; text-align: center; }
.game-head h1 { font-family: 'Fraunces', serif; margin: 0.2rem 0; }
.wheel-wrap { position: relative; width: min(86vw, 360px); margin: 1.5rem auto; }
.wheel-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 30px rgba(0,0,0,.25)); border-radius: 50%; }
.wheel-rotor { transform: rotate(0deg); }
.wheel-pointer {
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent;
    border-top: 26px solid var(--brass); z-index: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.wheel-spin { min-width: 200px; }
.btn-lg { padding: 0.9rem 2rem; font-size: 1.1rem; }
.btn-block { display: block; width: 100%; margin-top: 1rem; }

.game-result { margin-top: 1.5rem; }
.game-result-card {
    background: #fff; border: 1px solid #ECE4D6; border-radius: 18px; padding: 1.5rem;
    box-shadow: var(--shadow);
}
.game-result-card h2 { font-family: 'Fraunces', serif; margin: 0 0 0.5rem; }
.result-coupon {
    display: flex; flex-direction: column; gap: 0.3rem; margin: 1rem 0;
    background: #2A231C; color: #F3ECE0; border-radius: 14px; padding: 1rem;
}
.result-coupon-label { font-size: 0.78rem; color: #B7AC98; text-transform: uppercase; letter-spacing: 0.08em; }
.result-coupon-code { font-family: monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; color: #E0C46A; }
.result-coupon-hint { font-size: 0.8rem; color: #CFC4B2; }

/* ---------- Haar-Smash ---------- */
.smash-field {
    position: relative; height: 220px; margin: 1.2rem 0;
    background: linear-gradient(#EAF2F8, #D6E6F2); border-radius: 18px; overflow: hidden;
    box-shadow: inset 0 -10px 24px rgba(0,0,0,.06);
}
.smash-ground {
    position: absolute; left: 0; right: 0; bottom: 0; height: 42px;
    background: rgba(201,161,74,.22); border-top: 2px solid rgba(201,161,74,.45);
}
.smash-barber { position: absolute; left: 12px; bottom: 34px; font-size: 46px; }
.smash-comb {
    position: absolute; left: 46px; bottom: 60px; font-size: 34px;
    transform-origin: bottom left;
}
.smash-comb.is-swinging { animation: combSwing .4s ease; }
@keyframes combSwing { 0% { transform: rotate(0); } 40% { transform: rotate(-58deg); } 100% { transform: rotate(-12deg); } }
.hairball { position: absolute; left: 10%; bottom: 70px; font-size: 30px; }
.hairball.is-flying { animation: ballSpin 1.3s linear; }
@keyframes ballSpin { to { transform: rotate(900deg); } }
.power-bar {
    height: 16px; max-width: 320px; margin: 0 auto 1rem;
    background: #EDE6D8; border-radius: 999px; overflow: hidden;
}
.power-fill { height: 100%; width: 0; background: linear-gradient(90deg, #9BBF6A, #C9A14A, #B23B3B); transition: width .05s linear; }

/* ---------- Rabatt-Bingo ---------- */
.bingo-card {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
    max-width: 320px; margin: 1.4rem auto;
}
.bingo-cell {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; border-radius: 14px;
    background: #fff; border: 1px solid #ECE4D6; box-shadow: var(--shadow);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.bingo-cell.is-hit {
    background: linear-gradient(135deg, #C9A14A, #E0C46A); color: #2A231C;
    transform: scale(1.06); box-shadow: 0 8px 22px rgba(201,161,74,.45);
}
.bingo-cell.is-hit span { position: relative; }
.bingo-cell.is-hit::after {
    content: ''; position: absolute; inset: 0; border-radius: 14px;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.6);
}
.bingo-card.is-bingo .bingo-cell.is-hit { animation: bingoPulse .6s ease; }
@keyframes bingoPulse { 0%,100% { transform: scale(1.06); } 50% { transform: scale(1.16); } }

/* ---------- Gewinnspiel (PWA-Stempelheft) ---------- */
.card-raffle {
    margin-top: 1.5rem; padding: 1.25rem; border-radius: 16px;
    background: linear-gradient(135deg, #2A231C, #4A3A22); color: #F3ECE0;
    border: 1px solid rgba(201,161,74,.45); text-align: center;
}
.card-raffle h2 { font-family: 'Fraunces', serif; margin: .4rem 0 .25rem; color: #E0C46A; }
.raffle-flag {
    display: inline-block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    background: var(--brass); color: #2A231C; font-weight: 700; padding: .25rem .7rem; border-radius: 999px;
}
.raffle-prize { color: #D9CFBE; margin-bottom: 1rem; }
.raffle-prize strong { color: #F3ECE0; }
.raffle-in { color: #9BD8AE; font-weight: 600; margin: .5rem 0 0; }

/* ---------- In-App QR-Scanner ---------- */
.scan-cta { margin: 1rem 0 0.4rem; font-size: 1.05rem; }
.scan-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10, 8, 6, .96); color: #F3ECE0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
    padding: 1.5rem; padding-top: calc(1.5rem + env(safe-area-inset-top));
}
.scan-box {
    position: relative; width: min(82vw, 360px); aspect-ratio: 1;
    border-radius: 22px; overflow: hidden; background: #000;
}
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame {
    position: absolute; inset: 12%; border-radius: 18px;
    border: 3px solid rgba(201, 161, 74, .9); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
}
.scan-hint { margin: 0; text-align: center; max-width: 26ch; color: #D9CFBE; }

/* ---------- Spielshow-Fernbedienung (Handy) ---------- */
.controller-stage { text-align: center; margin: 2rem 0 1rem; }
.controller-tv-hint { font-size: 3.4rem; margin-bottom: 1rem; animation: ctrlBob 1.8s ease-in-out infinite; }
@keyframes ctrlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.controller-btn { min-width: 70%; font-size: 1.4rem; padding: 1.2rem 2rem; }

/* ---------- Barrierefreiheit: weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    .controller-tv-hint { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .smash-comb.is-swinging,
    .hairball.is-flying,
    .bingo-card.is-bingo .bingo-cell.is-hit { animation: none !important; }
    .bingo-cell { transition: background .2s ease !important; transform: none !important; }
}