/* =========================================================
   LG — Spin the Wheel (G3)
   Tablet / phone portrait, responsive.
   Theme taken directly from the client poster (Artboard 10):
     backdrop  #FFF6EF centre -> #F9E5D8 edges (light peach)
     LG red    #A50034  (light #C4003F, dark #7C002D)
     grey      #6F6F6F  — the poster's "Wheel" wordmark / pointer
     Abans     #7D1774
   Logo lock-up follows the poster: LG top-left, Abans top-right,
   Spin the Wheel logo art in the centre. No "Living Just Right"
   line and no CSS "SPIN THE WHEEL" text — the logo carries it.
   Wheel face, rim, pointer, hub and result ticket are built in CSS.
   ========================================================= */

:root {
    --lg-red:     #A50034;
    --lg-red-lt:  #C4003F;
    --lg-red-dk:  #7C002D;
    --grey:       #6F6F6F;
    --abans:      #7D1774;
    --bg-centre:  #FFF6EF;
    --bg-edge:    #F9E5D8;
    --ink:        #2A2A2A;

    /* Type matched to the LG logotype, which is a Helvetica-derived neo-
       grotesque — flat terminals, squared-off, tight apertures. LG's own
       corporate face (LG Smart) is proprietary and not installed here, so
       we use Arial: metric-compatible with Helvetica and present on every
       Windows / Android kiosk, unlike Segoe UI (humanist, wrong feel).
       Display text uses Arial Black to match the logo's heavy weight.
       To swap in the licensed LG Smart later, add an @font-face and put
       its family first in these two lists — nothing else needs touching. */
    --font-ui:      Arial, Helvetica, 'Helvetica Neue', sans-serif;
    --font-display: 'Arial Black', 'Arial Bold', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    height: 100%;
    background: var(--bg-centre);
    font-family: var(--font-ui);
    color: var(--ink);
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

button { font-family: inherit; cursor: pointer; }

/* ---------- Device frame: the poster's peach backdrop ---------- */
.device-frame {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;               /* respect dynamic browser chrome */
    background:
        radial-gradient(120% 85% at 50% 42%, #FFF6EF 0%, #FDEFE6 45%, var(--bg-edge) 100%);
    overflow: hidden;
}

/* ====================== Background FX ======================
   Same markup as the reference build, recoloured for the light
   backdrop — warm red/purple motes instead of peach-on-black. */
.bg-fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* The floating bubble/mote layer was removed at the client's request.
   What remains is the breathing highlight and the diagonal sheen — both
   static-feeling washes, no drifting particles. */

/* gentle breathing highlight behind the action area */
.bg-glow {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 110vmin;
    height: 110vmin;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
                rgba(255, 255, 255, 0.85) 0%,
                rgba(255, 246, 239, 0.42) 42%,
                rgba(255, 246, 239, 0) 70%);
    animation: glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse {
    0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

/* faint diagonal sheen sweeping across every few seconds */
.bg-sheen {
    position: absolute;
    top: -20%;
    left: 0;
    width: 38%;
    height: 140%;
    background: linear-gradient(105deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.22) 45%,
                rgba(255, 255, 255, 0.42) 50%,
                rgba(255, 255, 255, 0.22) 55%,
                rgba(255, 255, 255, 0) 100%);
    transform: translateX(-130%) skewX(-12deg);
    animation: sheen-sweep 9s ease-in-out infinite;
}
@keyframes sheen-sweep {
    0%       { transform: translateX(-160%) skewX(-12deg); }
    55%, 100%{ transform: translateX(360%)  skewX(-12deg); }
}

.screen {
    position: absolute;
    inset: 0;
    background: transparent;       /* let the backdrop + FX show through */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 11vh;             /* clears the topbar lock-up */
    z-index: 1;
}

/* ---------- Poster lock-up: LG left, Abans right ----------
   Lives outside the ng-switch, so it renders on every screen
   including the wheel. Both logos are transparent PNGs whose
   artwork is dark, so they need no chip on the light backdrop. */
.topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.4vh 5vw 0;
    pointer-events: none;
    z-index: 3;
}
.topbar img {
    display: block;
    width: auto;
}
.logo-lg {
    height: 5.2vh;
    min-height: 34px;
    max-height: 62px;
}
.logo-abans {
    height: 4.2vh;
    min-height: 26px;
    max-height: 50px;
}

/* ---------- Spin the Wheel logo art (replaces the old CSS text) ---------- */
.spin-mark {
    display: block;
    height: auto;
    flex-shrink: 0;
}
.spin-mark-lg { width: min(74vw, 560px); }
.spin-mark-sm { width: min(46vw, 300px); margin-bottom: 1.4vh; }

/* ====================== SCREEN 0 : START ====================== */
.screen-start {
    justify-content: center;
}
.screen-start .play-btn {
    width: 46vw;
    max-width: 330px;
    height: 8.5vh;
    min-height: 62px;
    max-height: 100px;
    margin-top: 8vh;
    font-size: clamp(26px, 6vw, 44px);
}

/* ====================== Shared LG-red action button ====================== */
.play-btn,
.submit-btn,
.spin-btn {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 18px;
    background: linear-gradient(160deg, var(--lg-red-lt) 0%, var(--lg-red) 48%, var(--lg-red-dk) 100%);
    box-shadow: 0 8px 22px rgba(165, 0, 52, 0.32),
                0 2px 4px rgba(0, 0, 0, 0.10),
                inset 0 2px 5px rgba(255, 255, 255, 0.26);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform .1s;
}
.play-btn::before,
.submit-btn::before,
.spin-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: shimmer 3s infinite;
}
@keyframes shimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}
.play-btn:active:not(:disabled),
.submit-btn:active:not(:disabled),
.spin-btn:active:not(:disabled) { transform: scale(0.95); }
.submit-btn:disabled,
.spin-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ====================== SCREEN 1 : REGISTRATION ====================== */
.screen-reg {
    justify-content: flex-start;
    padding-bottom: 2vh;
}
.screen-reg .spin-mark { margin-bottom: 4vh; }

.screen-reg .reg-form {
    width: 80vw;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.field {
    width: 100%;
    margin-bottom: 3vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* clean white input with an LG-red focus ring */
.field input {
    width: 100%;
    height: 6vh;
    min-height: 50px;
    max-height: 80px;
    border: 2px solid #EBD3C6;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(165, 0, 52, 0.07),
                inset 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 0 30px;
    font-size: clamp(20px, 4.2vw, 30px);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink);
    outline: none;
    text-align: center;
    transition: border-color .25s, box-shadow .25s;
}
.field input:focus {
    border-color: var(--lg-red);
    box-shadow: 0 0 0 4px rgba(165, 0, 52, 0.12),
                inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.field label {
    margin-top: 1vh;
    font-family: var(--font-display);
    font-size: clamp(17px, 2.8vw, 28px);
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--lg-red);
    text-align: center;
}

.submit-btn {
    width: 50vw;
    max-width: 300px;
    height: 7.5vh;
    min-height: 56px;
    max-height: 90px;
    margin: 1.5vh auto 0;
    font-size: clamp(22px, 4.5vw, 34px);
    flex-shrink: 0;
}

/* "This number has already been used" notice, above SUBMIT. */
.reg-error {
    width: 100%;
    margin: -1vh 0 2.4vh;
    padding: 1.6vh 4vw;
    background: #FDECEF;
    border: 2px solid var(--lg-red);
    border-radius: 14px;
    color: var(--lg-red);
    font-size: clamp(13px, 2.4vw, 19px);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    flex-shrink: 0;
}

/* Terms & Conditions link — start screen and above the consent tick.
   Deliberately understated so it never competes with PLAY / SUBMIT. */
.terms-link {
    display: block;
    margin: 3vh auto 0;
    padding: .6vh 3vw;
    font-size: clamp(12px, 2vw, 16px);
    font-weight: 700;
    color: var(--lg-red);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 40px;
    flex-shrink: 0;
}
.terms-link:active { color: var(--lg-red-dk); }

.screen-reg .terms-link { margin-top: 2.6vh; }

.consent {
    margin: 1.4vh auto 0;
    width: 70vw;
    max-width: 560px;
    display: flex;
    align-items: flex-start;
    font-size: clamp(11px, 1.8vw, 15px);
    line-height: 1.35;
    color: var(--grey);
    gap: 8px;
}
.consent input[type="checkbox"] {
    width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0;
    accent-color: var(--lg-red);
}

/* ====================== SCREEN 2 : WHEEL ====================== */
.screen-wheel {
    justify-content: flex-start;
}

.wheel-wrap {
    --wheel: min(92vw, 46vh);      /* rim diameter — everything scales off this */
    position: relative;
    width: var(--wheel);
    height: var(--wheel);
    flex-shrink: 0;                /* never let the flex column squash it oval */
    margin-top: 2vh;
    filter: drop-shadow(0 1vh 2.4vh rgba(124, 0, 45, 0.20))
            drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

.wheel {
    position: absolute;
    inset: 0;
    transition: transform 5s cubic-bezier(0.17, 0.67, 0.21, 1);
    transform-origin: 50% 50%;
}

/* Face: 8 alternating slices, LG red / white — the poster's wheel icon.
   conic-gradient starts at 12 o'clock and runs clockwise, so
   slice k spans 45k -> 45(k+1) — exactly the wedge geometry. */
.wheel-base {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--lg-red) 0deg    36deg,
        #FFFFFF       36deg   72deg,
        var(--lg-red) 72deg   108deg,
        #FFFFFF       108deg  144deg,
        var(--lg-red) 144deg  180deg,
        #FFFFFF       180deg  216deg,
        var(--lg-red) 216deg  252deg,
        #FFFFFF       252deg  288deg,
        var(--lg-red) 288deg  324deg,
        #FFFFFF       324deg  360deg
    );
    box-shadow: inset 0 0 calc(var(--wheel) * 0.07) rgba(124, 0, 45, 0.18);
}

/* hairline slice boundaries + a soft top sheen */
.wheel-spokes {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            rgba(124, 0, 45, 0.30) 0deg 0.4deg,
            rgba(124, 0, 45, 0)    0.4deg 36deg),
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

/* ---------- Static rim + top pointer + hub above the spinning face ---------- */
.wheel-rim {
    --rim-w: calc(var(--wheel) * 0.045);
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
}

/* The crimson ring lives on a pseudo-element so the mask that hollows
   out its centre cannot clip the pointer, bulbs or hub. The centre MUST
   stay fully transparent or it hides the spinning wheel face. */
.wheel-rim::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--lg-red) 0%, var(--lg-red-dk) 45%, #5E0021 100%);
    /* closest-side is essential: the default farthest-corner makes 100% the
       half-diagonal (0.707w), which shrinks the hole and fattens the ring. */
    -webkit-mask: radial-gradient(circle closest-side at 50% 50%,
                  transparent calc(100% - var(--rim-w)),
                  #000 calc(100% - var(--rim-w) + 1px));
            mask: radial-gradient(circle closest-side at 50% 50%,
                  transparent calc(100% - var(--rim-w)),
                  #000 calc(100% - var(--rim-w) + 1px));
}

/* Flat ring for engines without mask support — never a filled disc. */
@supports not ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
    .wheel-rim::before { display: none; }
    .wheel-rim {
        border: var(--rim-w) solid var(--lg-red-dk);
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35),
                    0 0 0 2px rgba(94, 0, 33, 0.9);
    }
}

/* bulb lights around the rim */
.rim-lights { position: absolute; inset: 0; }
.rim-lights i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--wheel) * 0.022);
    height: calc(var(--wheel) * 0.022);
    margin: calc(var(--wheel) * -0.011) 0 0 calc(var(--wheel) * -0.011);
    border-radius: 50%;
    background: #FFF6EF;
    box-shadow: 0 0 calc(var(--wheel) * 0.02) rgba(255, 246, 239, 0.95);
    transform: rotate(var(--a)) translateY(calc(var(--wheel) * -0.478));
    animation: bulb 1.4s ease-in-out infinite;
}
.rim-lights i:nth-child(odd) { animation-delay: .7s; }
@keyframes bulb {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* top pointer aiming down into the wheel — grey, as on the poster */
.wheel-pointer {
    position: absolute;
    left: 50%;
    top: calc(var(--wheel) * -0.045);
    width: calc(var(--wheel) * 0.10);
    height: calc(var(--wheel) * 0.14);
    transform: translateX(-50%);
    background: linear-gradient(180deg, #9A9A9A 0%, var(--grey) 45%, #565656 100%);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.28));
    z-index: 7;
}

/* centre hub — red disc with a darker ring, as on the poster */
.wheel-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--wheel) * 0.16);
    height: calc(var(--wheel) * 0.16);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, var(--lg-red-lt) 0%, var(--lg-red) 55%, var(--lg-red-dk) 100%);
    border: calc(var(--wheel) * 0.012) solid var(--lg-red-dk);
    box-shadow: 0 0 calc(var(--wheel) * 0.03) rgba(0, 0, 0, 0.25),
                inset 0 2px 6px rgba(255, 255, 255, 0.30);
    z-index: 6;
}

/* Wedge overlay — anchored at centre, rotated, content offset outward */
.wedge {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

/* Wedges are text only — the client dropped the product photos.
   Two short lines sit at 64% of the radius on the wedge centreline, so
   each label reads upright when its wedge lands under the top pointer. */
.wedge .wg-text {
    position: absolute;
    width: calc(var(--wheel) * 0.24);
    left: calc(var(--wheel) * -0.12);
    top: calc(-1 * (var(--wheel) / 2) * 0.77);
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-weight: 900;
    /* A 36° wedge is 22% narrower than the old 45° one, and Arial Black is
       wide. Gift names are single words now, so they sit on one line, but
       the longest (NOTEBOOK / UMBRELLA / STICKERS, 8 chars) still binds:
       0.032 at radius 0.77 clears both slice boundaries. Raising either
       number, or adding a longer gift name, overflows into the next slice. */
    font-size: calc(var(--wheel) * 0.032);
    line-height: 1.12;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
}
/* Even wedges sit on a red slice, odd wedges on a white one. */
.wedge.on-red   .wg-text { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30); }
.wedge.on-light .wg-text { color: var(--lg-red); }
/* The two TRY AGAIN wedges carry the sad-face emoji instead of text.
   Centre sits at 0.345 * wheel from the hub, where the wedge boundary is
   0.345 * sin(18deg) = 0.107 * wheel away; a 0.065 chip radius therefore
   keeps ~0.042 * wheel of slice on each side, and clears the rim too.
   The art is a full-colour emoji, so it reads on red and white alike. */
.wedge .sad-face {
    position: absolute;
    width: calc(var(--wheel) * 0.13);
    height: calc(var(--wheel) * 0.13);
    left: calc(var(--wheel) * -0.065);
    top: calc(-1 * (var(--wheel) / 2) * 0.69);
    transform: translateY(-50%);
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.30));
}

.spin-btn {
    width: 40vw;
    max-width: 280px;
    height: 7.5vh;
    min-height: 56px;
    max-height: 90px;
    margin-top: 3vh;
    font-size: clamp(22px, 4.5vw, 34px);
    flex-shrink: 0;
    z-index: 1;
}

/* ====================== SCREENS 3 & 4 : RESULT ======================
   White card holding an LG-red ticket with serrated edges. */
.screen-result {
    justify-content: flex-start;
}

.result-frame {
    margin-top: 2.5vh;
    width: min(74vw, 520px);
    padding: 7% 8%;
    background: #fff;
    border: 1px solid rgba(165, 0, 52, 0.10);
    border-radius: 10px;
    box-shadow: 0 1.5vh 4vh rgba(124, 0, 45, 0.16),
                0 2px 6px rgba(0, 0, 0, 0.06);
    display: flex;
    /* Column, so the gift ID stacks under the ticket. As a row it became a
       second flex item beside it and squeezed the ID onto three lines. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.result-ticket {
    position: relative;
    width: 100%;
    background: linear-gradient(160deg, var(--lg-red-lt) 0%, var(--lg-red) 60%, var(--lg-red-dk) 100%);
    padding: 9% 6% 8%;
    text-align: center;
    filter: drop-shadow(0 0.8vh 1.6vh rgba(124, 0, 45, 0.30));
}
/* serrated ticket teeth on top and bottom edges */
.result-ticket::before,
.result-ticket::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 12px;
    background-image:
        linear-gradient(-45deg, transparent 70%, #A50034 71%),
        linear-gradient(45deg, transparent 70%, #A50034 71%);
    background-size: 16px 12px;
    background-repeat: repeat-x;
}
.result-ticket::before {
    top: -11px;
    background-position: 8px 0, 0 0;
}
.result-ticket::after {
    bottom: -11px;
    transform: scaleY(-1);
    background-position: 8px 0, 0 0;
}

/* "You Won!" / "Oops...!" headline — LG-logotype grotesque, not the
   serif the reference build used, which clashed with the LG identity. */
.win-oops {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(34px, 8.6vw, 66px);
    line-height: 1.05;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    margin-bottom: 7%;
}

/* Sad face on the losing ticket — replaces the old "Try Again" band.
   Sized off the ticket so it scales with the frame at every viewport. */
.sad-shot {
    display: block;
    width: 46%;
    max-width: 180px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28));
}

/* white band carrying the prize name */
.result-band {
    background: #fff;
    color: var(--lg-red);
    font-family: var(--font-display);
    font-size: clamp(16px, 3.9vw, 28px);
    font-weight: 900;
    text-transform: uppercase;
    padding: 4% 3%;
    letter-spacing: 1px;
    line-height: 1.25;
}

/* ── Gift ID (shared event gift ledger) ────────────────────────
   A compact strip under the ticket. Label and code share one line so
   the code never wraps, and the whole block stays visually secondary
   to the prize name on the ticket above it. */
.gift-id-box {
    display: block;
    width: 100%;
    margin-top: 3.5%;
    background: #fff;
    border: 1.5px dashed rgba(165, 0, 52, .45);
    border-radius: 8px;
    padding: 2.4% 3%;
    text-align: center;
    animation: giftIdIn .45s cubic-bezier(.2, 1.5, .42, 1) both;
}

@keyframes giftIdIn {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

.gift-id-lbl {
    font-size: clamp(7px, 1.4vw, 9px);
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #9a9189;
    margin-right: 6px;
    vertical-align: middle;
}

.gift-id-val {
    font-family: 'Courier New', monospace;
    font-size: clamp(13px, 2.9vw, 18px);
    font-weight: 800;
    letter-spacing: 1px;
    color: #1a1a1a;
    white-space: nowrap;
    vertical-align: middle;
}

.gift-id-note {
    display: block;
    margin-top: 2px;
    font-size: clamp(7px, 1.5vw, 10px);
    color: #6b625a;
    line-height: 1.4;
}

.gift-id-sms {
    display: block;
    margin-top: 1px;
    font-size: clamp(7px, 1.4vw, 9px);
    font-weight: 700;
    color: #2e9e5b;
}

@media (prefers-reduced-motion: reduce) { .gift-id-box { animation: none; } }