.game-notch{ position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 12px; background: rgba(0, 0, 0, 0.72); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 7px 10px 7px 16px; color: #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); font-weight: 800; font-size: 15px;} .game-notch[hidden]{ display: none;} @keyframes notch-in{ from{ opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.94);} to{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1);}} .game-notch:not([hidden]){ animation: notch-in 0.26s ease-out;} @media (prefers-reduced-motion: reduce){ .game-notch:not([hidden]){ animation: none;}} .notch-score{ display: inline-flex; align-items: center; gap: 4px;} #notch-score-value, #wheel-score-value{ display: inline-block;} .notch-timer{ display: inline-flex; align-items: center; gap: 4px; color: #fde047; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;} .notch-timer[hidden]{ display: none;} .plays-remaining-line{ text-align: center; color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; margin: 12px 0 0;} .plays-remaining-line[hidden]{ display: none;} .notch-wheel-btn{ background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; width: 30px; height: 30px; font-size: 16px; line-height: 1; cursor: pointer; color: #fff; padding: 0; transition: transform 0.2s ease, background 0.2s ease;} .notch-wheel-btn:hover{ transform: scale(1.12); background: rgba(255, 255, 255, 0.28);} .notch-fx-btn.is-muted{ background: rgba(255, 255, 255, 0.08); opacity: 0.7; filter: grayscale(1);} .notch-fx-btn svg{ display: block; margin: 0 auto;} .fx-icon{ transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);} .fx-slash{ stroke-dasharray: 30; stroke-dashoffset: 30; opacity: 0; transition: stroke-dashoffset 0.35s ease, opacity 0.25s ease;} .fx-wave{ transition: opacity 0.3s ease;} .notch-fx-btn.is-muted .fx-icon{ transform: rotate(-18deg);} .notch-fx-btn.is-muted .fx-slash{ stroke-dashoffset: 0; opacity: 1;} .notch-fx-btn.is-muted .fx-wave-1{ opacity: 0.4;} .notch-fx-btn.is-muted .fx-wave-2{ opacity: 0;} .float-point{ position: fixed; z-index: 10000; font-weight: 800; font-size: 22px; color: #fde047; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65); pointer-events: none; animation: floatPoint 1s ease-out forwards;} @keyframes floatPoint{ from{ opacity: 1; transform: translateY(0) scale(1);} to{ opacity: 0; transform: translateY(-70px) scale(1.5);}} .wheel-page{ text-align: center; color: #fff;} .wheel-title{ font-size: 1.5rem; margin: 0 0 4px;} .wheel-cost{ font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); margin: 0 0 10px;} .wheel-stage{ position: relative; width: min(260px, calc(100vw - 48px)); aspect-ratio: 1; height: auto; margin: 12px auto;} .wheel{ width: 100%; height: 100%; aspect-ratio: 1; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15), inset 0 0 24px rgba(0, 0, 0, 0.35); position: relative; transition: transform 4s cubic-bezier(0.16, 0.84, 0.24, 1); --label-radius: 92px;} .wheel-pointer{ position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 26px; color: #fde047; z-index: 3; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);} .wheel-label{ position: absolute; top: 50%; left: 50%; font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); pointer-events: none; white-space: normal; max-width: 72px; text-align: center; line-height: 1.3; z-index: 4; transform: translate(-50%, -50%) rotate(var(--label-angle)) translateX(var(--label-radius)) rotate(calc(-1 * var(--label-angle))); transform-origin: center; overflow-wrap: anywhere;} .wheel-highlight, .wheel-highlight-glow{ position: absolute; inset: 0; border-radius: 50%; pointer-events: none;} .wheel-highlight{ z-index: 2;} .wheel-highlight-glow{ z-index: 3;} .wheel-spin-btn{ width: 100%; margin-top: 6px;} .wheel-spin-btn:disabled{ opacity: 0.55; cursor: not-allowed;} .wheel-score-line{ font-size: 0.95rem; margin: 12px 0 6px;} .wheel-message{ text-align: center; color: #fca5a5; font-size: 0.9rem; font-weight: 600; margin: 8px 0 0; min-height: 1.4em;} .wheel-message[hidden]{ display: none;} @media (max-width: 400px){ .wheel-stage{ width: min(220px, calc(100vw - 32px));} .wheel{ --label-radius: 78px;} .wheel-label{ max-width: 56px; font-size: 8px;}} .wheel-winners{ margin-top: 14px; text-align: right;} .wheel-winners-title{ font-size: 0.95rem; margin: 0 0 8px; color: rgba(255, 255, 255, 0.9);} .wheel-winners-list{ list-style: none; margin: 0; padding: 0; max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;} .wheel-winner-item{ display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; font-size: 0.82rem; animation: winnerItemIn 0.4s ease-out both;} .wheel-winner-avatar{ width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 800; font-size: 0.78rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.25);} @keyframes winnerItemIn{ from{ opacity: 0; transform: translateX(16px) scale(0.97);} to{ opacity: 1; transform: translateX(0) scale(1);}} .wheel-winner-user{ color: #fde047; font-weight: 800; white-space: nowrap;} .wheel-winner-label{ flex: 1; color: rgba(255, 255, 255, 0.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .wheel-winner-time{ color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; white-space: nowrap;} .wheel-winner-empty{ text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; padding: 8px; list-style: none;} .win-celebration{ position: fixed; inset: 0; z-index: 20000; pointer-events: none; overflow: hidden;} .win-flash{ position: absolute; left: 50%; top: 50%; width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 179, 0.95) 0%, rgba(253, 224, 71, 0.5) 35%, rgba(253, 224, 71, 0) 70%);} .win-ring{ position: absolute; left: 50%; top: 50%; width: 40vmin; height: 40vmin; margin: -20vmin 0 0 -20vmin; border-radius: 50%; border: 4px solid rgba(253, 224, 71, 0.9); box-shadow: 0 0 40px rgba(253, 224, 71, 0.6), inset 0 0 40px rgba(253, 224, 71, 0.25);} .win-fx{ position: absolute; inset: 0;} .win-confetti{ position: absolute; top: 0; border-radius: 2px; will-change: transform, opacity;} .win-balloon{ position: absolute; bottom: 0; will-change: transform, opacity;} .win-celebration.no-gsap .win-flash{ animation: winFlash 0.9s ease-out forwards;} .win-celebration.no-gsap .win-ring{ animation: winRing 1s ease-out forwards;} .win-celebration.no-gsap .win-confetti{ animation: winConfettiFall 2.4s ease-in forwards;} .win-celebration.no-gsap.desktop .win-confetti{ animation: winConfettiCorner 2.2s ease-out forwards;} .win-celebration.no-gsap .win-balloon{ animation: winBalloonRise 2.6s ease-out forwards;} @keyframes winFlash{ from{ opacity: 1; transform: scale(0.2);} to{ opacity: 0; transform: scale(3.2);}} @keyframes winRing{ from{ opacity: 1; transform: scale(0.4);} to{ opacity: 0; transform: scale(2.6);}} @keyframes winConfettiFall{ from{ transform: translateY(-80px) rotate(0deg); opacity: 1;} to{ transform: translateY(105vh) rotate(720deg); opacity: 0.7;}} @keyframes winConfettiCorner{ 0%{ opacity: 1; transform: translate(0, 0) rotate(0deg);} 45%{ opacity: 0.95; transform: translate(calc(var(--cx) * 0.55), calc(var(--cy) * 0.55 - var(--peak, 60px))) rotate(calc(var(--rot, 720deg) * 0.45));} 100%{ opacity: 0.8; transform: translate(var(--cx), calc(var(--cy) + var(--droop, 80px))) rotate(var(--rot, 720deg));}} @keyframes winBalloonRise{ from{ transform: translateY(0); opacity: 0;} 20%{ opacity: 1;} to{ transform: translateY(-110vh); opacity: 0;}} .card-section.status-panel{ position: relative; padding: 28px 24px 24px; border-radius: 24px; background: linear-gradient(180deg, rgba(9, 23, 21, 0.66) 0%, rgba(4, 14, 13, 0.55) 100%); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.09); overflow: hidden;} .card-section.status-panel::before{ content: ''; position: absolute; inset: -55% -20% auto -20%; height: 130%; background: radial-gradient(60% 70% at 50% 0%, rgba(74, 222, 128, 0.16), transparent 70%); pointer-events: none;} .card-section.status-panel > *{ position: relative;} @media (max-width: 420px){ .card-section.status-panel{ padding: 22px 16px 18px; border-radius: 20px;}} .status-logo-wrap{ display: flex; justify-content: center; margin-bottom: 18px; min-height: 96px;} .status-logo{ max-width: 150px; max-height: 96px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45)); -webkit-user-drag: none; user-select: none;} .status-logo-float{ animation: statusLogoFloat 2.6s ease-in-out infinite alternate;} @keyframes statusLogoFloat{ from{ transform: translateY(0);} to{ transform: translateY(-9px);}} .status-progress-track{ position: relative;} .status-progress-track::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: translateX(-100%); animation: statusShimmer 1.5s ease-in-out infinite; pointer-events: none;} @keyframes statusShimmer{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);}} @media (prefers-reduced-motion: reduce){ .status-logo-float, .status-progress-track::after, .countdown-ring::before, .countdown-ring-halo.pulse-css{ animation: none;} .fx-slash, .fx-wave, .fx-icon{ transition: none;}} .status-title{ font-size: 1.4rem; font-weight: 800; text-align: center; color: #fff; margin-bottom: 22px;} .status-progress{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px;} .status-progress-track{ flex: 1; height: 10px; background: rgba(255, 255, 255, 0.14); border-radius: 999px; overflow: hidden;} .status-progress-bar{ height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #14b8a6, #4ade80); transition: width 0.35s ease;} .status-progress-bar.error{ background: linear-gradient(90deg, #ef4444, #f97316);} .status-progress-label{ min-width: 44px; text-align: center; color: #fde047; font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums;} .status-message{ text-align: center; color: rgba(255, 255, 255, 0.92); font-size: 0.95rem; font-weight: 600; margin: 0 0 16px; min-height: 1.5em;} .status-message.error{ color: #fca5a5;} .status-countdown{ text-align: center; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(253, 224, 71, 0.35); border-radius: 14px; padding: 16px;} .status-countdown[hidden]{ display: none;} .status-countdown-value{ font-size: 1.6rem; font-weight: 800; color: #fde047; font-variant-numeric: tabular-nums; direction: ltr;} .status-countdown-label{ margin-top: 4px; color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; font-weight: 600;} .festival-closed{ position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 22, 20, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);} .festival-closed[hidden]{ display: none;} .festival-closed-card{ text-align: center; color: #fff; width: 100%; max-width: 380px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px; padding: 32px 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);} .festival-closed-icon{ font-size: 2.6rem; line-height: 1; margin-bottom: 10px;} .festival-closed-title{ font-size: 1.4rem; font-weight: 800; margin: 0 0 10px;} .festival-closed-message{ font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); margin: 0; line-height: 1.7;} .festival-closed-countdown{ margin-top: 16px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(253, 224, 71, 0.35); border-radius: 16px; padding: 16px;} .festival-closed-countdown[hidden]{ display: none;} .countdown-ring{ position: relative; width: 112px; height: 112px; margin: 4px auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(253, 224, 71, 0.14) 0%, rgba(0, 0, 0, 0.38) 72%); border: 2px solid rgba(253, 224, 71, 0.55); box-shadow: 0 0 26px rgba(253, 224, 71, 0.22), inset 0 0 20px rgba(253, 224, 71, 0.1);} .countdown-ring::before{ content: ''; position: absolute; inset: -13px; border-radius: 50%; border: 2px dashed rgba(253, 224, 71, 0.45); animation: countdownSpin 16s linear infinite; pointer-events: none;} .countdown-ring-halo{ position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(253, 224, 71, 0.65); opacity: 0; pointer-events: none; will-change: transform, opacity;} .countdown-ring-halo.pulse-css{ animation: countdownHaloPulse 2.2s ease-in-out infinite;} @keyframes countdownSpin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);}} @keyframes countdownHaloPulse{ 0%, 100%{ transform: scale(1); opacity: 0.8;} 50%{ transform: scale(1.3); opacity: 0.35;}} .festival-closed-countdown-value{ font-size: 1.3rem; font-weight: 800; color: #fde047; font-variant-numeric: tabular-nums; direction: ltr; line-height: 1.35; text-align: center; max-width: 96px; padding: 0 4px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);} .festival-closed-countdown-label{ margin-top: 2px; color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; font-weight: 600;} .festival-closed-retry{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 11px 26px; font-size: 0.95rem; font-weight: 800; font-family: inherit; color: #fde047; background: rgba(253, 224, 71, 0.1); border: 1px solid rgba(253, 224, 71, 0.45); border-radius: 999px; cursor: pointer; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);} .festival-closed-retry:hover:not(:disabled){ background: rgba(253, 224, 71, 0.2); box-shadow: 0 0 22px rgba(253, 224, 71, 0.35); transform: translateY(-1px);} .festival-closed-retry:disabled{ opacity: 0.7; cursor: not-allowed;}.festival-closed-retry.is-checking .festival-closed-retry-icon{ animation: countdownSpin 0.9s linear infinite;} .guide-overlay{ position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 20px; background: none; backdrop-filter: none;} .guide-overlay[hidden]{ display: none;} .guide-overlay-card{ text-align: center; color: #fff; width: 100%; max-width: 400px; background: rgba(9, 20, 18, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px; padding: 32px 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);} .guide-overlay-card .title-small{ font-size: 1.5rem; margin-bottom: 20px;} .guide-overlay-card .instruction-box{ background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 20px; margin-bottom: 22px; border: 1px solid rgba(255, 255, 255, 0.2);} .guide-overlay-card .game-instruction{ text-align: center; font-size: 1.1rem; font-weight: 500; color: #fff; margin: 0; line-height: 1.8;} .guide-overlay-card .guide-actions{ display: flex; flex-direction: column; gap: 12px;} .guide-overlay-card .guide-actions .btn{ padding: 16px 20px; border-radius: 16px; font-size: 1.15rem;} .guide-overlay-card .btn-wheel-choice{ background: linear-gradient(135deg, #fdc473 0%, #2fbf22 100%); color: #10231a; font-family: 'Vazirmatn', 'Vazir', sans-serif;} .guide-overlay-card .btn-wheel-choice:hover{ background: linear-gradient(135deg, #ffd79a 0%, #34d126 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(47, 191, 34, 0.4);} .guide-overlay-card .btn-wheel-choice:active{ transform: translateY(0);}