/* ── RESET & KIOSK BASE ── */
        *, *::before, *::after {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent; /* removes blue flash on Android tap */
        }

        html {
            /* stops Android WebView from inflating text size on wide layouts */
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body, html {
            margin: 0; padding: 0;
            width: 100%; height: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #123075;
            background-image: url('./img/bg-game.jpg');
            background-size: cover;
            background-position: top center;
            overflow: hidden;
            /* allows fast tap response, disables double-tap zoom */
            touch-action: manipulation;
        }

        /* ── GAME CONTAINER ──
           580px gives a proper width on a 1080px kiosk without looking too narrow.
        ── */
        .game-container {
            position: relative;
            width: 100%;
            max-width: 580px;
            height: 100%;
            height: 100dvh; /* dvh = real visible height on mobile, falls back to 100% */
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 12px;   /* fixed px — no vh surprises on tall kiosk */
            box-sizing: border-box;
            user-select: none;          /* no accidental text selection on touch */
            -webkit-user-select: none;
        }

        /* ── KEYFRAME ANIMATIONS ── */
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @keyframes cloud-drift {
            0%, 100% { transform: translateX(0); }
            50%       { transform: translateX(12px); }
        }
        @keyframes overlay-fade {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        @keyframes modal-pop {
            0%   { opacity: 0; transform: scale(0.6) translateY(40px); }
            65%  { opacity: 1; transform: scale(1.05) translateY(-6px); }
            85%  { transform: scale(0.97) translateY(2px); }
            100% { transform: scale(1) translateY(0); }
        }

        /* ── BACKGROUND DECORATIONS ── */
        .decor-mandala {
            position: absolute;
            width: min(20vw, 140px);
            opacity: 0.8;
            z-index: 0;
        }
        .mandala-left {
            top: -15px; left: -15px;
            animation: spin-slow 10s linear infinite;
            transform-origin: center center;
        }
        .mandala-mid {
            top: 23%; left: -20px;
            width: min(17vw, 120px);
            animation: spin-slow 14s linear infinite reverse;
            transform-origin: center center;
        }
        .decor-cloud {
            position: absolute;
            width: min(18vw, 110px);
            top: 14px; right: 10px;
            z-index: 0;
            animation: cloud-drift 3.5s ease-in-out infinite;
        }

        /* ── HEADER ── */
        .header {
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;        /* fixed — no vh gap inflation on tall kiosk */
            width: 100%;
            flex-shrink: 0;
        }
        .header img.logo {
            width: min(22vw, 130px);
        }
        .header img.bg-title {
            width: min(78%, 300px);
        }

        /* ── WHEEL WRAPPER ──
           --wheel-d is set by JS (applyWheelSize) so it's always correct
           regardless of browser CSS-calc quirks on Android WebViews.
           Base ratios (original design was 300px wheel):
             frame  = 1.133 × wheel-d  (340px)
             height = 1.200 × wheel-d  (360px)
             width  = 1.067 × wheel-d  (320px)
             spin-top = 0.033 × wheel-d (10px)
             product  = 0.200 × wheel-d (60px)
             prod-r   = 0.300 × wheel-d (90px  — translateY offset)
             pointer  = 0.150 × wheel-d (45px)
             ptr-right= 0.083 × wheel-d (25px)
        ── */
        .wheel-wrapper {
            position: relative;
            width:  calc(var(--wheel-d) * 1.067);
            height: calc(var(--wheel-d) * 1.2);
            z-index: 10;
            margin-top: 8px;   /* fixed — no vh surprises */
            flex-shrink: 0;
        }

        .wheel-frame {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: calc(var(--wheel-d) * 1.133);
            z-index: 2;
            pointer-events: none;
        }

        .wheel-spin-area {
            position: absolute;
            top:  calc(var(--wheel-d) * 0.033);
            left: 50%;
            margin-left: calc(var(--wheel-d) / -2);
            width:  var(--wheel-d);
            height: var(--wheel-d);
            border-radius: 50%;
            background: conic-gradient(
                #00c3d9  0deg  72deg,
                #ffa500  72deg 144deg,
                #1d226a 144deg 216deg,
                #e32322 216deg 288deg,
                #f0158a 288deg 360deg
            );
            transition: transform 4s cubic-bezier(0.1, 0.7, 0.1, 1);
            z-index: 1;
        }

        .product-item {
            position: absolute;
            top: 50%; left: 50%;
            width:  calc(var(--wheel-d) * 0.2);
            height: calc(var(--wheel-d) * 0.2);
            margin-top:  calc(var(--wheel-d) * -0.1);
            margin-left: calc(var(--wheel-d) * -0.1);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .product-item img {
            max-width: 100%; max-height: 100%;
            transform: rotate(90deg);
        }

        .pos-0 { transform: rotate(36deg)  translateY(calc(var(--wheel-d) * -0.3)) rotate(-90deg); }
        .pos-1 { transform: rotate(108deg) translateY(calc(var(--wheel-d) * -0.3)) rotate(-90deg); }
        .pos-2 { transform: rotate(180deg) translateY(calc(var(--wheel-d) * -0.3)) rotate(-90deg); }
        .pos-3 { transform: rotate(252deg) translateY(calc(var(--wheel-d) * -0.3)) rotate(-90deg); }
        .pos-4 { transform: rotate(324deg) translateY(calc(var(--wheel-d) * -0.3)) rotate(-90deg); }

        .pointer {
            position: absolute;
            top: 50%;
            right: calc(var(--wheel-d) * -0.083);
            width: calc(var(--wheel-d) * 0.15);
            z-index: 4;
            transform: translateY(-55%);
        }

        /* ── BOTTOM AREA ── */
        .bottom-area {
            text-align: center;
            z-index: 10;
            margin-top: auto;
            padding-bottom: 16px;   /* fixed — no vh surprises */
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .win-badge {
            width: min(42vw, 200px);
            margin-bottom: 12px;
            margin-top: -20px;
            position: relative;
            z-index: 15;
        }
        .start-btn {
            background-color: #d1c31e;
            color: #123075;
            font-size: min(4.5vw, 22px);
            font-weight: 900;
            padding: 12px 40px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            transition: transform 0.15s, opacity 0.15s;
            touch-action: manipulation;
        }
        .start-btn:active   { transform: scale(0.95); }
        .start-btn:disabled { opacity: 0.6; cursor: not-allowed; }

        /* ── RESULT MODAL ── */
        .modal-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(10, 20, 60, 0.85);
            backdrop-filter: blur(4px);
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: overlay-fade 0.3s ease forwards;
        }

        .ng-hide { display: none !important; }

        .modal-box {
            background-color: #0b1551;
            border: 2px solid #ffd700;
            border-radius: 15px;
            padding: 24px 28px;
            text-align: center;
            color: white;
            width: min(72vw, 300px);
            box-shadow: 0 0 20px rgba(255,215,0,0.3);
            animation: modal-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        .modal-box h3 {
            color: #ffd700;
            font-size: min(3.2vw, 14px);
            margin: 0; letter-spacing: 2px;
        }
        .modal-box h1 {
            font-size: min(5.5vw, 24px);
            margin: 8px 0 16px;
        }
        .modal-img-circle {
            width:  min(22vw, 110px);
            height: min(22vw, 110px);
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.2);
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        }
        .modal-img-circle img { max-height: 75%; max-width: 75%; }
        .product-name {
            color: #a0b4ff;
            font-weight: 900;
            font-size: min(4.2vw, 18px);
            margin: 12px 0 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .play-again-btn {
            background-color: #ffd700;
            color: #0b1551;
            font-weight: 900;
            padding: 10px 32px;
            border-radius: 20px;
            border: none;
            cursor: pointer;
            font-size: min(3.8vw, 16px);
            margin-bottom: 8px;
            touch-action: manipulation;
        }
        .play-again-btn:active { transform: scale(0.95); }
        .timer-text { font-size: 10px; color: #6b7ebd; margin: 0; }