:root {
    --wtlw-turquoise: #0f766e;
    --wtlw-turquoise-light: #2a9d8f;
    --wtlw-lapis: #0b4f6c;
    --wtlw-lapis-deep: #062f3e;
    --wtlw-gold: #e9c46a;
    --wtlw-saffron: #d89b2b;
    --wtlw-rose: #b83244;
    --wtlw-ivory: #fffaf0;
    --wtlw-ink: #f8fbfa;
    --wtlw-muted: #c9ddd9;
}

.wtlw-app {
    box-sizing: border-box;
    max-width: 920px;
    margin: 32px auto;
    padding: 40px 24px 30px;
    overflow: hidden;
    position: relative;
    direction: rtl;
    border: 1px solid rgba(233, 196, 106, .34);
    border-radius: 30px;
    color: var(--wtlw-ink);
    background:
        radial-gradient(circle at 84% 4%, rgba(42, 157, 143, .38) 0, transparent 33%),
        radial-gradient(circle at 9% 93%, rgba(216, 155, 43, .16) 0, transparent 28%),
        linear-gradient(145deg, #0b4f6c 0%, #073c4f 42%, #052a36 100%);
    font-family: Tahoma, "Vazirmatn", "IRANSans", "Yekan Bakh", Arial, sans-serif;
    box-shadow: 0 28px 74px rgba(6, 47, 62, .28);
}

.wtlw-app:before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background-image:
        linear-gradient(45deg, transparent 45%, rgba(255, 250, 240, .08) 45% 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(233, 196, 106, .07) 45% 55%, transparent 55%);
    background-size: 44px 44px;
    background-position: 0 0, 22px 22px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.12));
}

.wtlw-app *, .wtlw-app *:before, .wtlw-app *:after { box-sizing: border-box; }
.wtlw-hero, .wtlw-register-form, .wtlw-game, .wtlw-trust-row { position: relative; z-index: 1; }
.wtlw-hero { text-align: center; margin-bottom: 28px; }
.wtlw-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--wtlw-gold); letter-spacing: .02em; font-size: 12px; font-weight: 800; }
.wtlw-kicker:before, .wtlw-kicker:after { content: '◆'; color: rgba(233,196,106,.65); font-size: 8px; }
.wtlw-hero h2 { margin: 9px 0 8px; color: #fff; font-size: clamp(30px, 5vw, 51px); line-height: 1.35; font-weight: 900; text-shadow: 0 4px 24px rgba(0,0,0,.22); }
.wtlw-hero p { margin: 0; color: var(--wtlw-muted); font-size: 14px; line-height: 1.9; }

.wtlw-register-form {
    max-width: 690px;
    margin: 0 auto;
    padding: 27px;
    border: 1px solid rgba(233,196,106,.22);
    border-radius: 22px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.wtlw-form-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 23px; text-align: right; }
.wtlw-badge { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid #f4d88e; border-radius: 12px; color: #163d43; background: linear-gradient(145deg, #f5d98f, #d89b2b); font-weight: 900; box-shadow: 0 6px 18px rgba(216,155,43,.22); }
.wtlw-form-heading h3 { margin: 0 0 5px; font-size: 19px; color: #fff; line-height: 1.7; }
.wtlw-form-heading p { margin: 0; color: #c2d9d5; font-size: 12px; line-height: 1.8; }
.wtlw-form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.wtlw-app label { display: grid; gap: 8px; color: #e3efec; font-size: 12px; font-weight: 700; text-align: right; }
.wtlw-app input { width: 100%; direction: rtl; border: 1px solid rgba(255,255,255,.17); border-radius: 11px; padding: 12px 13px; color: #fff; background: rgba(3, 33, 42, .52); font: inherit; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.wtlw-app input[type="email"] { direction: ltr; text-align: left; }
.wtlw-app input:focus { border-color: var(--wtlw-gold); background: rgba(3,33,42,.68); box-shadow: 0 0 0 3px rgba(233,196,106,.14); }
.wtlw-app input::placeholder { color: rgba(220,235,232,.52); }

.wtlw-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; padding: 14px 21px; color: #173b3d; background: linear-gradient(135deg, #f5dfa5, #dfa435); box-shadow: 0 11px 26px rgba(216,155,43,.22); cursor: pointer; font: inherit; font-weight: 900; transition: transform .2s, box-shadow .2s, opacity .2s; }
.wtlw-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 15px 31px rgba(216,155,43,.3); }
.wtlw-button:disabled { opacity: .48; cursor: not-allowed; }
.wtlw-register-button { width: 100%; margin-top: 20px; }
.wtlw-form-message, .wtlw-spin-message { min-height: 22px; margin-top: 12px; text-align: center; color: #aee8ca; font-size: 13px; line-height: 1.8; }
.wtlw-form-message.is-error, .wtlw-spin-message.is-error { color: #ffbdc6; }

.wtlw-game { max-width: 640px; margin: 0 auto; text-align: center; }
.wtlw-attempts { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px; padding: 8px 14px; border: 1px solid rgba(233,196,106,.34); border-radius: 999px; color: #e9f3f1; background: rgba(255,255,255,.07); font-size: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.wtlw-attempt-icon { color: var(--wtlw-gold); }
.wtlw-attempt-count { display: inline-grid; place-items: center; min-width: 27px; height: 27px; border-radius: 8px; color: #163d43; background: var(--wtlw-gold); font-weight: 900; }
.wtlw-wheel-stage { position: relative; width: min(82vw, 440px); aspect-ratio: 1; margin: 0 auto 22px; display: grid; place-items: center; }
.wtlw-wheel-stage:before { content: ''; position: absolute; inset: 2.5%; border-radius: 50%; box-shadow: 0 0 0 4px rgba(233,196,106,.38), 0 0 34px 11px rgba(42,157,143,.44), inset 0 0 0 10px rgba(3,42,54,.76); }
.wtlw-wheel-stage:after { content: '◆  ◆  ◆  ◆'; position: absolute; inset: auto 0 -6px; color: rgba(233,196,106,.46); letter-spacing: 12px; font-size: 9px; pointer-events: none; }
.wtlw-pointer { position: absolute; z-index: 4; top: -4px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 39px solid var(--wtlw-gold); filter: drop-shadow(0 4px 4px rgba(0,0,0,.38)); }
.wtlw-wheel { position: relative; z-index: 1; width: 88%; height: 88%; overflow: hidden; border: 11px solid #083f52; border-radius: 50%; background: var(--wtlw-gradient); box-shadow: inset 0 0 0 3px rgba(255,250,240,.2), inset 0 0 28px rgba(0,0,0,.42), 0 8px 30px rgba(0,0,0,.18); transition: transform 5.2s cubic-bezier(.13,.7,.12,1); will-change: transform; }
.wtlw-wheel:after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255,250,240,.18) 0deg 1deg, transparent 1deg 51deg); mix-blend-mode: soft-light; pointer-events: none; }
.wtlw-wheel-labels { position: absolute; inset: 0; }
.wtlw-wheel-labels span { position: absolute; top: 50%; left: 50%; width: 94px; margin-left: -47px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.62); text-align: center; transform: rotate(var(--wtlw-label-angle)) translateY(-118px); transform-origin: 50% 50%; font-size: 22px; }
.wtlw-wheel-labels b { display: block; max-width: 92px; margin-top: 6px; overflow: hidden; color: #fffdf7; font-size: 9px; line-height: 1.55; font-weight: 800; white-space: normal; }
.wtlw-wheel-hub { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 72px; height: 72px; transform: translate(-50%,-50%); border: 4px solid #f2d784; border-radius: 50%; color: #f7dfa0; background: radial-gradient(circle at 35% 30%, #126e79, #073c4f 65%); box-shadow: 0 0 0 6px rgba(5,48,62,.58), 0 0 18px rgba(233,196,106,.44); font-size: 14px; font-weight: 900; }
.wtlw-spin-button { min-width: 220px; }
.wtlw-trust-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 17px; margin-top: 29px; color: #aac7c2; font-size: 11px; }

body.wtlw-popup-open { overflow: hidden; }
.wtlw-popup-shell { display: inline-block; direction: rtl; font-family: Tahoma, "Vazirmatn", "IRANSans", "Yekan Bakh", Arial, sans-serif; }
.wtlw-popup-trigger { min-width: 210px; }
.wtlw-popup { position: fixed; z-index: 99990; inset: 0; display: grid; place-items: center; padding: 18px; visibility: hidden; opacity: 0; transition: opacity .24s ease, visibility .24s ease; }
.wtlw-popup.is-visible { visibility: visible; opacity: 1; }
.wtlw-popup-backdrop { position: absolute; inset: 0; background: rgba(2, 25, 33, .82); backdrop-filter: blur(8px); }
.wtlw-popup-dialog { position: relative; z-index: 1; width: min(960px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(233,196,106,.42); border-radius: 30px; background: #052f3e; box-shadow: 0 32px 90px rgba(0,0,0,.52); transform: translateY(14px) scale(.97); transition: transform .24s ease; scrollbar-width: thin; }
.wtlw-popup.is-visible .wtlw-popup-dialog { transform: translateY(0) scale(1); }
.wtlw-popup-dialog .wtlw-app { max-width: none; margin: 0; border: 0; border-radius: 29px; box-shadow: none; }
.wtlw-popup-close { position: absolute; z-index: 8; top: 12px; left: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #fff; background: rgba(3,42,54,.76); box-shadow: 0 8px 20px rgba(0,0,0,.18); cursor: pointer; font-size: 28px; line-height: 1; transition: transform .2s, background .2s; }
.wtlw-popup-close:hover { transform: rotate(6deg) scale(1.04); background: rgba(15,118,110,.9); }

.wtlw-modal { position: fixed; z-index: 99999; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; font-family: Tahoma, "Vazirmatn", "IRANSans", "Yekan Bakh", Arial, sans-serif; }
.wtlw-modal.is-visible { visibility: visible; opacity: 1; }
.wtlw-modal-backdrop { position: absolute; inset: 0; background: rgba(3, 29, 38, .78); backdrop-filter: blur(7px); }
.wtlw-modal-card { position: relative; z-index: 1; width: min(90vw, 420px); padding: 40px 28px 29px; overflow: hidden; direction: rtl; border: 1px solid rgba(233,196,106,.55); border-radius: 25px; color: #fff; background: radial-gradient(circle at 80% 0, rgba(42,157,143,.35), transparent 35%), linear-gradient(145deg,#0b4f6c,#052f3e); text-align: center; box-shadow: 0 25px 70px rgba(0,0,0,.5); transform: translateY(12px) scale(.95); transition: transform .3s; }
.wtlw-modal-card:before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(233,196,106,.14); border-radius: 19px; pointer-events: none; }
.wtlw-modal.is-visible .wtlw-modal-card { transform: translateY(0) scale(1); }
.wtlw-modal-close { position: absolute; z-index: 2; top: 10px; left: 14px; right: auto; border: 0; color: #d6e7e3; background: transparent; cursor: pointer; font-size: 27px; }
.wtlw-result-sparkle { color: var(--wtlw-gold); font-size: 41px; }
.wtlw-modal-card h3 { margin: 8px 0 8px; font-size: 30px; }
.wtlw-result-name { margin: 0 0 17px; color: #d9ebe7; line-height: 1.8; }
.wtlw-result-code { display: grid; gap: 8px; margin-bottom: 21px; color: #c8ded9; font-size: 13px; line-height: 1.9; }
.wtlw-result-code code { display: inline-block; padding: 10px 16px; border: 1px dashed var(--wtlw-gold); border-radius: 10px; color: #f2d47d; background: rgba(233,196,106,.1); font-size: 20px; letter-spacing: .08em; }
.wtlw-confetti { position: absolute; inset: 50% 50%; pointer-events: none; }
.wtlw-confetti i { position: absolute; width: 7px; height: 13px; border-radius: 2px; background: hsl(var(--hue),90%,65%); animation: wtlw-confetti .9s var(--delay) ease-out both; }
@keyframes wtlw-confetti { from { transform: translate(0,0) rotate(0); opacity: 1; } to { transform: translate(var(--x),var(--y)) rotate(280deg); opacity: 0; } }

.wtlw-notice { max-width: 700px; margin: 20px auto; padding: 16px 18px; direction: rtl; border: 1px solid #cbe1dc; border-radius: 12px; color: #164e52; background: #eef8f5; text-align: center; font-family: Tahoma, "Vazirmatn", "IRANSans", Arial, sans-serif; }

.wtlw-account { max-width: 960px; margin: 28px auto; padding: 28px; direction: rtl; border: 1px solid #d8e7e3; border-radius: 20px; color: #173d43; background: linear-gradient(180deg,#fffdf8,#fbf7ed); box-shadow: 0 15px 45px rgba(11,79,108,.08); font-family: Tahoma, "Vazirmatn", "IRANSans", "Yekan Bakh", Arial, sans-serif; }
.wtlw-account-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid #e4ece8; }
.wtlw-account h2 { margin: 6px 0 0; font-size: 29px; }
.wtlw-account .wtlw-kicker { color: #0f766e; }
.wtlw-balance { padding: 14px 18px; border: 1px solid rgba(233,196,106,.28); border-radius: 14px; color: #fff; background: linear-gradient(135deg,#0f766e,#0b4f6c); text-align: right; box-shadow: 0 10px 24px rgba(11,79,108,.14); }
.wtlw-balance small, .wtlw-balance strong { display: block; }
.wtlw-balance small { color: #d3e8e3; font-size: 11px; }
.wtlw-balance strong { margin-top: 4px; font-size: 22px; }
.wtlw-balance em { color: #f4d782; font-size: 11px; font-style: normal; }
.wtlw-account-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 22px; }
.wtlw-account-card { padding: 20px; border: 1px solid #e4ece8; border-radius: 14px; background: rgba(255,255,255,.72); }
.wtlw-account-card h3 { margin: 0 0 14px; font-size: 17px; }
.wtlw-muted { color: #718782; font-size: 13px; }
.wtlw-coupon-list, .wtlw-transaction-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wtlw-coupon-list li, .wtlw-transaction-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; border-radius: 10px; background: #edf6f3; font-size: 12px; }
.wtlw-coupon-list code { direction: ltr; color: #0b4f6c; font-weight: 800; }
.wtlw-coupon-list small { color: #2e7b56; }
.wtlw-transaction-list strong.is-credit { color: #218654; }
.wtlw-transaction-list strong.is-debit { color: #b83244; }

@media (max-width: 560px) {
    .wtlw-account { padding: 18px 14px; }
    .wtlw-account-header { align-items: flex-start; flex-direction: column; }
    .wtlw-balance { width: 100%; }
    .wtlw-account-grid { grid-template-columns: 1fr; }
    .wtlw-coupon-list li, .wtlw-transaction-list li { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
    .wtlw-app { margin: 12px auto; padding: 29px 13px 22px; border-radius: 20px; }
    .wtlw-register-form { padding: 19px 15px; }
    .wtlw-form-grid { grid-template-columns: 1fr; }
    .wtlw-wheel-labels span { transform: rotate(var(--wtlw-label-angle)) translateY(-101px); width: 82px; margin-left: -41px; }
    .wtlw-wheel-labels b { font-size: 8px; }
    .wtlw-trust-row { gap: 9px; font-size: 10px; }
    .wtlw-popup { padding: 8px; }
    .wtlw-popup-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); border-radius: 21px; }
    .wtlw-popup-dialog .wtlw-app { margin: 0; border-radius: 20px; }
    .wtlw-popup-close { top: 8px; left: 8px; width: 36px; height: 36px; }
}