.zrn-lw-wrap { max-width: 980px; margin: 32px auto; font-family: inherit; } .zrn-lw-card { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 20%, #2f2f2f 0, #111 45%, #050505 100%); border: 1px solid rgba(255, 255, 255, .12); border-radius: 30px; padding: 30px 24px 28px; color: #fff; box-shadow: 0 25px 80px rgba(0, 0, 0, .35); text-align: center; } .zrn-lw-card:before { content: ""; position: absolute; inset: -20%; background: radial-gradient( circle at 50% 35%, rgba(255, 183, 0, .11), transparent 36% ), radial-gradient( circle at 50% 70%, rgba(170, 0, 0, .22), transparent 42% ); pointer-events: none; } .zrn-lw-title, .zrn-lw-subtitle, .zrn-box, .zrn-wheel-stage, .zrn-result, .zrn-ref, .zrn-points, .zrn-history { position: relative; z-index: 1; } .zrn-lw-title { font-size: 34px; font-weight: 1000; letter-spacing: -.6px; color: #fff; text-shadow: 0 3px 0 #000; } .zrn-lw-subtitle { margin: 8px 0 20px; color: rgba(255, 255, 255, .78); font-size: 16px; } .zrn-box { background: #fff; color: #222; border-radius: 22px; padding: 24px; max-width: 430px; margin: auto; box-shadow: 0 14px 35px rgba(0, 0, 0, .22); } .zrn-box input, .zrn-ref-row input { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 14px; padding: 14px; margin: 7px 0; font-size: 16px; line-height: 1.5; } .zrn-box input:focus, .zrn-ref-row input:focus { outline: none; border-color: #c49a40; box-shadow: 0 0 0 3px rgba(196, 154, 64, .13); } .zrn-btn { border: 0; border-radius: 14px; background: linear-gradient(180deg, #f5cc70, #be8c2d); color: #241804; font-weight: 1000; padding: 13px 20px; cursor: pointer; margin-top: 7px; box-shadow: 0 7px 18px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .15s ease, filter .15s ease, opacity .15s ease; } .zrn-btn:hover { filter: brightness(1.04); } .zrn-btn:active { transform: translateY(1px); } .zrn-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .zrn-btn.small { white-space: nowrap; } .zrn-msg { min-height: 24px; margin-top: 8px; } .zrn-msg.error { color: #b71c1c; } .zrn-msg.ok { color: #1b6e35; } .zrn-points { display: inline-flex; gap: 8px; align-items: center; margin: 10px auto 18px; background: linear-gradient( 180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .07) ); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 10px 18px; color: #f7e6b2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } .zrn-wheel-stage { position: relative; width: min(90vw, 560px); aspect-ratio: 1; margin: 6px auto 0; display: grid; place-items: center; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .55)); isolation: isolate; } .zrn-wheel-stage:before { content: ""; position: absolute; inset: -4%; border-radius: 50%; background: radial-gradient( circle, rgba(255, 205, 90, .12), transparent 60% ); filter: blur(3px); pointer-events: none; } .zrn-pointer { position: absolute; z-index: 30; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 36px solid #d7b361; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .8)); pointer-events: none; } .zrn-pointer:before { content: ""; position: absolute; left: -10px; top: -37px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient( circle at 35% 30%, #fff4b6, #e2b84a 55%, #6e4d12 ); box-shadow: 0 0 16px rgba(255, 206, 81, .95); } .zrn-pointer:after { content: ""; position: absolute; left: -2px; top: -7px; width: 4px; height: 9px; background: #6f4f15; border-radius: 3px; } .zrn-wheel { position: relative; width: calc(100% - 46px); height: calc(100% - 46px); border-radius: 50%; overflow: hidden; background: #b41418; border: 13px solid #f0cf75; box-shadow: 0 0 0 5px #6f4d12, 0 0 0 10px #cfac5a, 0 0 26px rgba(255, 205, 78, .34), inset 0 0 28px rgba(0, 0, 0, .75); transform-origin: 50% 50%; transform: rotate(0deg); will-change: transform; transition: none; user-select: none; -webkit-user-select: none; } .zrn-wheel.spinning { transform: rotate(var(--spin-to)); transition: transform 5200ms cubic-bezier(.12, .72, .18, 1); } .zrn-wheel[data-spin-ms] { transition-duration: 5200ms; } .zrn-wheel:after { content: ""; position: absolute; inset: 1.7%; border-radius: 50%; border: 2px solid rgba(255, 250, 215, .7); box-shadow: inset 0 0 26px rgba(0, 0, 0, .52); z-index: 10; pointer-events: none; } .zrn-wheel-sectors { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient( from -90deg, #a70c12 0deg, #a70c12 calc(360deg / var(--n)), #f2ab1a calc(360deg / var(--n)), #f2ab1a calc(720deg / var(--n)) ); pointer-events: none; } .zrn-wheel-sectors:after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient( from -90deg, rgba(90, 0, 0, .35) 0deg 1.2deg, transparent 1.2deg calc(360deg / var(--n)) ); mix-blend-mode: multiply; pointer-events: none; } .zrn-wheel-sectors:before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient( circle at 50% 42%, rgba(255, 255, 255, .18), transparent 42% ), linear-gradient( 180deg, rgba(255, 255, 255, .08), transparent 32%, rgba(0, 0, 0, .16) ); pointer-events: none; } .zrn-wheel-label { position: absolute; z-index: 7; inset: 0; width: auto; height: auto; transform: rotate( calc( (var(--i) + .5) * 360deg / var(--n) ) ); transform-origin: 50% 50%; pointer-events: none; } .zrn-wheel-label span { position: absolute; left: 58%; top: 9.5%; transform: translateX(-50%); display: block; width: clamp(72px, 22%, 124px); padding: 0 3px; box-sizing: border-box; font-weight: 1000; font-size: clamp(12px, 2.25vw, 19px); line-height: 1.08; letter-spacing: -.2px; text-align: center; white-space: normal; overflow-wrap: anywhere; word-break: break-word; color: #5c0906; text-shadow: 0 1px 0 rgba(255, 232, 130, .36); } .zrn-wheel-label:nth-of-type(even) span { color: #fff5c7; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); } .zrn-wheel-hub { position: absolute; z-index: 20; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle at 32% 26%, #fff9ce 0, #edcf70 24%, #a77a27 58%, #4a3310 100% ); border: 5px solid #f6da8a; box-shadow: 0 0 0 5px #563d14, 0 8px 22px rgba(0, 0, 0, .6), inset 0 3px 5px rgba(255, 255, 255, .65); pointer-events: none; } .zrn-spin-center { position: absolute !important; z-index: 25; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50% !important; border: 3px solid #f7e39f !important; background: radial-gradient( circle at 35% 30%, #fff3bc, #c49339 56%, #6f4b15 100% ); color: #211708 !important; font-size: 16px !important; font-weight: 1000 !important; cursor: pointer !important; box-shadow: inset 0 2px 5px rgba(255, 255, 255, .62), 0 5px 14px rgba(0, 0, 0, .55) !important; transition: filter .15s ease, transform .15s ease, opacity .15s ease; } .zrn-spin-center:hover { filter: brightness(1.06); } .zrn-spin-center:active { transform: translate(-50%, -50%) scale(.98); } .zrn-spin-center:disabled { opacity: .58; cursor: not-allowed !important; } .zrn-wheel-lights { position: absolute; inset: -8px; border-radius: 50%; z-index: 8; pointer-events: none; } .zrn-wheel-light { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: radial-gradient( circle at 35% 30%, #fff9cf 0, #ffe78b 36%, #e2a82f 68%, #7a4a0d 100% ); box-shadow: 0 0 7px rgba(255, 217, 106, .95), 0 0 14px rgba(255, 193, 59, .58); transform: rotate(calc(var(--light) * 15deg)) translateY( calc( (min(90vw, 560px) - 46px) / -2 - 7px ) ); } .zrn-result { display: none; margin: 22px auto 0; background: linear-gradient( 135deg, #fff, #f1e8d2 ); color: #17120b; border-radius: 16px; padding: 18px; font-weight: 900; max-width: 500px; box-shadow: 0 8px 25px rgba(0, 0, 0, .2); } .zrn-result.show { display: block; } .zrn-ref { margin-top: 28px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); padding: 18px; border-radius: 18px; } .zrn-ref-row { display: flex; gap: 8px; align-items: center; } .zrn-ref-row input { background: #fff; color: #111; margin: 0; } .zrn-history { margin-top: 18px; background: rgba(255, 255, 255, .97); color: #17120b; border: 1px solid rgba(255, 255, 255, .15); border-radius: 18px; padding: 18px; text-align: right; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); } .zrn-history-title { font-size: 19px; font-weight: 900; margin-bottom: 4px; } .zrn-history-subtitle { font-size: 13px; color: #777; margin-bottom: 13px; } .zrn-history-scroll { overflow-x: auto; } .zrn-history-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 650px; font-size: 13px; } .zrn-history-table th, .zrn-history-table td { padding: 11px 10px; border-bottom: 1px solid #ece8df; vertical-align: middle; } .zrn-history-table th { font-weight: 900; color: #5f5136; background: #fbf7ee; } .zrn-history-table th:first-child { border-radius: 0 10px 10px 0; } .zrn-history-table th:last-child { border-radius: 10px 0 0 10px; } .zrn-history-table code { display: inline-block; padding: 4px 7px; border-radius: 7px; background: #f3efe7; color: #7b5b21; font-weight: 800; direction: ltr; } .zrn-history-status { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-weight: 800; font-size: 12px; } .zrn-history-status.active { background: #ecf8ee; color: #1c6f35; } .zrn-history-status.used { background: #f6e9e9; color: #9b2d2d; } .zrn-history-empty { padding: 20px; border-radius: 12px; background: #faf8f3; color: #777; text-align: center; } @media (max-width: 700px) { .zrn-lw-card { padding: 20px 12px; } .zrn-lw-title { font-size: 27px; } .zrn-wheel-stage { width: min(96vw, 450px); } .zrn-wheel { width: calc(100% - 34px); height: calc(100% - 34px); border-width: 10px; } .zrn-wheel.spinning { transition-duration: 5200ms; } .zrn-wheel-hub { width: 74px; height: 74px; } .zrn-spin-center { width: 68px; height: 68px; font-size: 14px; } .zrn-wheel-label span { max-width: 66px; font-size: 12px; } .zrn-wheel-light { width: 8px; height: 8px; margin: -4px; transform: rotate(calc(var(--light) * 15deg)) translateY( calc( (min(96vw, 450px) - 34px) / -2 - 5px ) ); } .zrn-pointer { border-left-width: 15px; border-right-width: 15px; border-top-width: 30px; } .zrn-pointer:before { left: -9px; top: -32px; width: 18px; height: 18px; } .zrn-ref-row { flex-direction: column; } .zrn-ref-row input, .zrn-ref-row .zrn-btn { width: 100%; } .zrn-history { padding: 14px; } .zrn-history-title { font-size: 17px; } .zrn-history-table { min-width: 600px; } }