/* =====================================================================
   WINORA.SPOT — "Midnight Jackpot" lottery theme
   Shared by: masterpage/User.master, Login.aspx, Register.aspx
   UI only. Class names set from code-behind are kept and styled here:
   pck / pck1 / pck2 (seats), package-card / selected / pactive (packages),
   aspNetDisabled (disabled LinkButtons).
   ===================================================================== */

:root {
    --bg: #0a0616;
    --bg-2: #120a28;
    --surface: #170e33;
    --surface-2: #1e1442;
    --surface-3: #271a54;
    --line: rgba(255, 209, 102, .14);
    --line-soft: rgba(255, 255, 255, .07);
    --text: #f6f2ff;
    --muted: #a99ecb;
    --dim: #7a6fa0;

    --gold: #ffd166;
    --gold-2: #f5a524;
    --gold-3: #b9770e;
    --gold-grad: linear-gradient(135deg, #fff1b8 0%, #ffd166 30%, #f5a524 70%, #c97d10 100%);

    --red: #ff4d6d;
    --blue: #4c8dff;
    --green: #22d3a0;
    --purple: #a66bff;
    --orange: #ff8a3d;
    --pink: #ff5fb4;

    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 26px;
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 2px 0 rgba(255, 255, 255, .03) inset;
    --glow-gold: 0 0 0 1px rgba(255, 209, 102, .35), 0 10px 30px -8px rgba(245, 165, 36, .55);

    --sb-w: 252px;
    --top-h: 60px;

    --font: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --display: 'Lexend', system-ui, sans-serif;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 14px; }
html, body { margin: 0; padding: 0; }

body.wn {
    font-family: var(--font);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.wn::before {
    /* layered stage lights */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 85% -10%, rgba(166, 107, 255, .22), transparent 60%),
        radial-gradient(700px 480px at -10% 30%, rgba(255, 95, 180, .12), transparent 60%),
        radial-gradient(800px 600px at 50% 120%, rgba(245, 165, 36, .14), transparent 60%),
        linear-gradient(180deg, #0c0720 0%, #0a0616 60%, #08040f 100%);
}

body.wn::after {
    /* fine star dust */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 38% 62%, rgba(255,209,102,.7), transparent 60%),
        radial-gradient(1px 1px at 88% 72%, rgba(255,255,255,.5), transparent 60%),
        radial-gradient(1px 1px at 22% 86%, rgba(255,255,255,.4), transparent 60%),
        radial-gradient(1.5px 1.5px at 58% 34%, rgba(255,255,255,.35), transparent 60%);
    background-size: 600px 600px;
    animation: wn-twinkle 6s ease-in-out infinite alternate;
}

body.wn a { color: var(--gold); text-decoration: none; transition: color .2s; }
body.wn a:hover { color: #fff1b8; }
body.wn img { max-width: 100%; }
body.wn h1, body.wn h2, body.wn h3, body.wn h4, body.wn h5, body.wn h6 { margin: 0; font-weight: 600; color: var(--text); }
body.wn p { margin: 0; }
body.wn hr { border: 0; border-top: 1px dashed var(--line); margin: 18px 0; }
body.wn ::selection { background: rgba(255, 209, 102, .35); color: #fff; }

body.wn ::-webkit-scrollbar { width: 10px; height: 10px; }
body.wn ::-webkit-scrollbar-track { background: transparent; }
body.wn ::-webkit-scrollbar-thumb { background: rgba(255, 209, 102, .2); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }

.wn-gold-text {
    background: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.wn-display { font-family: var(--display); letter-spacing: -.01em; }
.wn-muted { color: var(--muted); }
.wn-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Floating lottery balls (decor) ---------- */
.wn-balls { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.wn-balls i {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-style: normal;
    font-family: var(--display);
    font-weight: 600;
    color: #1a1033;
    opacity: .16;
    filter: blur(.3px);
    animation: wn-float 18s ease-in-out infinite;
}
.wn-balls i::before {
    content: attr(data-n);
    width: 46%;
    height: 46%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    font-size: .32em;
}

/* ---------- Lottery ball component ---------- */
.wn-ball {
    --c: var(--red);
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 6%, rgba(255,255,255,.35) 14%, transparent 34%),
        radial-gradient(circle at 70% 78%, rgba(0,0,0,.35), transparent 55%),
        var(--c);
    box-shadow: inset -4px -6px 10px rgba(0,0,0,.35), 0 8px 18px -6px var(--c);
}
.wn-ball b {
    width: 56%;
    height: 56%;
    border-radius: 50%;
    background: #fff;
    color: #1a1033;
    display: grid;
    place-items: center;
    font: 700 .78rem/1 var(--display);
    box-shadow: inset 0 -2px 3px rgba(0,0,0,.15);
}
.wn-ball.red { --c: var(--red); }
.wn-ball.blue { --c: var(--blue); }
.wn-ball.green { --c: var(--green); }
.wn-ball.purple { --c: var(--purple); }
.wn-ball.orange { --c: var(--orange); }
.wn-ball.gold { --c: var(--gold-2); }
.wn-ball.pink { --c: var(--pink); }
.wn-ball-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wn-ball-row .wn-ball { animation: wn-drop .8s var(--ease) both; }
.wn-ball-row .wn-ball:nth-child(2) { animation-delay: .08s; }
.wn-ball-row .wn-ball:nth-child(3) { animation-delay: .16s; }
.wn-ball-row .wn-ball:nth-child(4) { animation-delay: .24s; }
.wn-ball-row .wn-ball:nth-child(5) { animation-delay: .32s; }
.wn-ball-row .wn-ball:nth-child(6) { animation-delay: .40s; }

/* ---------- Buttons ---------- */
.wn-btn,
body.wn input[type=submit].wn-btn,
body.wn input[type=button].wn-btn {
    --b: var(--gold-grad);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: var(--b);
    color: #2a1600;
    font: 600 .86rem/1 var(--font);
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 28px -10px rgba(245, 165, 36, .7), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.15);
    transition: transform .2s var(--ease), box-shadow .25s, filter .2s;
    -webkit-appearance: none;
    appearance: none;
    white-space: normal;
}
.wn-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s var(--ease);
    pointer-events: none;
}
.wn-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(245, 165, 36, .85), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.15); color: #2a1600; }
.wn-btn:hover::after { transform: translateX(120%); }
.wn-btn:active { transform: translateY(0) scale(.98); }
.wn-btn:focus-visible { outline: 3px solid rgba(255, 209, 102, .5); outline-offset: 3px; }
.wn-btn--block { width: 100%; }
.wn-btn--ghost {
    --b: transparent;
    background: rgba(255,255,255,.04) !important;
    color: var(--gold) !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 209, 102, .5);
}
.wn-btn--ghost:hover { background: rgba(255, 209, 102, .1) !important; box-shadow: inset 0 0 0 1.5px var(--gold), 0 10px 24px -12px rgba(245,165,36,.6); }
.wn-btn--sm { min-height: 34px; padding: 0 14px; font-size: .74rem; border-radius: 12px; }

/* ripple */
.wn-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .55);
    animation: wn-ripple .65s linear;
    pointer-events: none;
}

/* ---------- Forms ---------- */
.wn-field { margin-bottom: 18px; }
.wn-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--muted) !important;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.wn-label strong { font-weight: 600; }
.wn-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(10, 6, 22, .55);
    border: 1.5px solid rgba(255,255,255,.09);
    border-radius: 14px;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.wn-input-wrap:focus-within {
    border-color: rgba(255, 209, 102, .7);
    background: rgba(10, 6, 22, .8);
    box-shadow: 0 0 0 4px rgba(255, 209, 102, .12);
}
.wn-input-wrap .wn-input-icon {
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 1rem;
    opacity: .85;
}
.wn-input,
body.wn .wn-input-wrap input[type=text],
body.wn .wn-input-wrap input[type=password],
body.wn .wn-input-wrap input[type=email],
body.wn .wn-input-wrap select {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 14px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: 400 .95rem var(--font);
    margin: 0;
    box-shadow: none;
}
.wn-input::placeholder,
body.wn .wn-input-wrap input::placeholder { color: var(--dim); font-weight: 500; }
body.wn .wn-input-wrap select option { background: var(--surface); color: var(--text); }
body.wn input:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px #140c2b inset;
    transition: background-color 9999s;
}
.wn-eye {
    flex: 0 0 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    transition: color .2s;
}
.wn-eye:hover { color: var(--gold); }

/* =====================================================================
   APP SHELL (master page)
   ===================================================================== */
.wn-shell { min-height: 100vh; }

/* ---------- Sidebar: floating glass panel ---------- */
.wn-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sb-w);
    z-index: 70;
    padding: 14px 0 14px 14px;
    transition: transform .35s var(--ease);
}
.wn-side-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 14px 14px;
    border-radius: 24px;
    overflow: hidden auto;
    scrollbar-width: none;
    background:
        radial-gradient(260px 200px at 0% 0%, rgba(166, 107, 255, .28), transparent 70%),
        radial-gradient(240px 220px at 100% 100%, rgba(255, 209, 102, .14), transparent 70%),
        linear-gradient(180deg, rgba(30, 18, 66, .92), rgba(14, 8, 34, .95));
    border: 1px solid rgba(255, 209, 102, .16);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
}
.wn-side-inner::-webkit-scrollbar { display: none; }
/* animated gold edge */
.wn-side-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    box-shadow: 0 0 16px var(--gold);
    animation: wn-edge 5s ease-in-out infinite;
}

.wn-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 2px 4px;
    color: var(--text) !important;
}
.wn-brand-coin {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 5px;
    background: radial-gradient(circle at 35% 30%, #3a2a00, #120a00);
    box-shadow: 0 0 0 2px var(--gold), 0 0 20px rgba(255, 209, 102, .45);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    animation: wn-coin-spin 8s ease-in-out infinite;
}
.wn-brand-coin img { width: 100%; height: 100%; object-fit: contain; }
.wn-brand-name { font: 700 1rem/1 var(--display); letter-spacing: .01em; }
.wn-brand-name span { color: var(--gold); font-weight: 600; }
.wn-brand-tag { margin-top: 5px; font-size: .56rem; letter-spacing: .3em; color: var(--muted); font-weight: 600; }

/* jackpot mini-ticket in the menu */
.wn-side-jackpot {
    position: relative;
    overflow: hidden;
    padding: 12px 14px;
    border-radius: 16px;
    background:
        radial-gradient(180px 80px at 100% 0%, rgba(255, 209, 102, .35), transparent 70%),
        linear-gradient(135deg, #3d2500, #1d1100);
    border: 1px solid rgba(255, 209, 102, .45);
    -webkit-mask:
        radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.wn-side-jackpot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 241, 184, .22) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: wn-shine 4.5s ease-in-out infinite;
}
.wn-side-jackpot small { display: block; font-size: .58rem; letter-spacing: .26em; color: #ffe3a0; font-weight: 600; }
.wn-side-jackpot strong { display: block; margin-top: 3px; font: 700 1.25rem/1.1 var(--display); }
.wn-side-jackpot em { font-style: normal; font-size: .7rem; color: #ffe3a0; font-weight: 600; margin-left: 4px; }
.wn-side-jackpot .wn-sj-ball {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    animation: wn-bob-y 3s ease-in-out infinite;
}
.wn-side-jackpot .wn-sj-ball b { font-size: .55rem; }

.wn-nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 0;
    font-size: .58rem;
    letter-spacing: .26em;
    font-weight: 600;
    color: var(--dim);
    text-transform: uppercase;
}
.wn-nav-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.wn-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.wn-nav a {
    --c: var(--gold);
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px 8px 8px;
    border-radius: 14px;
    color: var(--muted) !important;
    border: 1px solid transparent;
    transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.wn-nav a .wn-nav-ico {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .8rem;
    color: #fff;
    /* lottery-ball icon */
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.75) 0 6%, rgba(255,255,255,.2) 16%, transparent 36%),
        radial-gradient(circle at 70% 80%, rgba(0,0,0,.35), transparent 55%),
        var(--c);
    box-shadow: inset -3px -4px 8px rgba(0,0,0,.35), 0 6px 14px -6px var(--c);
    filter: saturate(.8) brightness(.95);
    transition: filter .3s, transform .5s var(--ease), box-shadow .3s;
}
.wn-nav a .wn-nav-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wn-nav a .wn-nav-txt b { font-weight: 600; font-size: .86rem; color: inherit; }
.wn-nav a .wn-nav-txt small { font-size: .66rem; color: var(--dim); font-weight: 400; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wn-nav a .wn-nav-arrow {
    margin-left: auto;
    font-size: .6rem;
    color: var(--dim);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s, transform .3s var(--ease);
}
.wn-nav a:hover {
    color: var(--text) !important;
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.06);
    transform: translateX(3px);
}
.wn-nav a:hover .wn-nav-ico { filter: none; transform: rotate(-20deg) scale(1.05); }
.wn-nav a:hover .wn-nav-arrow { opacity: 1; transform: none; }

.wn-nav a.active {
    color: #fff !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 6%, transparent));
    border-color: color-mix(in srgb, var(--c) 45%, transparent);
    box-shadow: 0 10px 24px -14px var(--c), inset 0 1px 0 rgba(255,255,255,.08);
}
.wn-nav a.active .wn-nav-ico { filter: none; box-shadow: inset -3px -4px 8px rgba(0,0,0,.35), 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 0 18px var(--c); animation: wn-ball-roll 6s ease-in-out infinite; }
.wn-nav a.active .wn-nav-txt small { color: color-mix(in srgb, var(--c) 60%, white); }
.wn-nav a.active .wn-nav-arrow { opacity: 1; transform: none; color: var(--c); }
.wn-nav a.active::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    width: 4px;
    height: 22px;
    transform: translateY(-50%);
    border-radius: 4px 0 0 4px;
    background: var(--c);
    box-shadow: 0 0 12px var(--c);
}
.wn-nav a[data-c="gold"] { --c: #f5a524; }
.wn-nav a[data-c="red"] { --c: #ef4466; }
.wn-nav a[data-c="blue"] { --c: #3b82f6; }
.wn-nav a[data-c="green"] { --c: #10b981; }
.wn-nav a[data-c="purple"] { --c: #8b5cf6; }
.wn-nav a[data-c="pink"] { --c: #ec4899; }

/* account quick actions */
.wn-side-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wn-side-actions a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 4px 8px;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line-soft);
    color: var(--muted) !important;
    font-size: .62rem;
    font-weight: 500;
    transition: transform .3s var(--ease), border-color .3s, color .3s, background .3s;
}
.wn-side-actions a i { font-size: .85rem; color: var(--gold); }
.wn-side-actions a:hover { transform: translateY(-3px); color: var(--text) !important; border-color: rgba(255, 209, 102, .35); background: rgba(255, 209, 102, .06); }
.wn-side-actions a.danger i { color: #ff8fa3; }
.wn-side-actions a.danger:hover { border-color: rgba(255, 77, 109, .4); background: rgba(255, 77, 109, .07); }

.wn-side-promo {
    margin-top: auto;
    position: relative;
    overflow: hidden;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(150deg, #2b1a5c, #1a0f3a);
    border: 1px solid var(--line);
}
.wn-side-promo h5 { font: 600 .8rem/1.35 var(--display); margin-bottom: 4px; }
.wn-side-promo p { color: var(--muted); font-size: .68rem; }
.wn-side-promo .wn-ball-row { margin-top: 10px; gap: 5px; }
.wn-side-promo .wn-ball { width: 26px; height: 26px; }
.wn-side-promo .wn-ball b { font-size: .5rem; }

.wn-inactive {
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(255, 77, 109, .1);
    border: 1px solid rgba(255, 77, 109, .3);
    color: #ffb3c1;
    font-size: .7rem;
    font-weight: 500;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.4;
}

@keyframes wn-edge { 0%, 100% { left: 10%; right: 60%; } 50% { left: 60%; right: 10%; } }
@keyframes wn-ball-roll { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(360deg); } }
@keyframes wn-bob-y { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 5px)); } }

/* Topbar */
.wn-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--top-h);
    margin-left: var(--sb-w);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(10, 6, 22, .72);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--line-soft);
}
.wn-burger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
    color: var(--gold);
    font-size: 1.1rem;
    cursor: pointer;
}
.wn-top-brand { display: none; align-items: center; gap: 10px; font: 700 1rem var(--display); color: var(--text) !important; }
.wn-top-brand img { width: 34px; height: 34px; object-fit: contain; }
.wn-top-brand span { color: var(--gold); }

.wn-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(34, 211, 160, .08);
    border: 1px solid rgba(34, 211, 160, .25);
    color: #9ff5d9;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.wn-live::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(34, 211, 160, .7);
    animation: wn-pulse 1.8s infinite;
}
.wn-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.wn-ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wn-ticker-track { display: inline-flex; gap: 38px; white-space: nowrap; animation: wn-marquee 28s linear infinite; color: var(--muted); font-size: .82rem; font-weight: 600; }
.wn-ticker-track span i { color: var(--gold); margin-right: 8px; }

.wn-profile { position: relative; }
.wn-profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
    color: var(--text);
    cursor: pointer;
    font: 700 .85rem var(--font);
    transition: border-color .2s, background .2s;
}
.wn-profile-btn:hover { border-color: rgba(255, 209, 102, .5); background: rgba(255, 209, 102, .06); }
.wn-profile-btn img { width: 30px; height: 30px; border-radius: 50%; object-fit: contain; background: #1b1238; padding: 3px; box-shadow: 0 0 0 2px var(--gold); }
.wn-profile-btn .fa-chevron-down { font-size: .7rem; color: var(--muted); transition: transform .25s; }
.wn-profile.open .wn-profile-btn .fa-chevron-down { transform: rotate(180deg); }
.wn-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 230px;
    padding: 8px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    box-shadow: 0 24px 50px -12px rgba(0,0,0,.8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.wn-profile.open .wn-menu { opacity: 1; visibility: visible; transform: none; }
.wn-menu-title { padding: 10px 12px; font-size: .72rem; letter-spacing: .16em; color: var(--dim); font-weight: 600; text-transform: uppercase; }
.wn-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--text) !important;
    font-weight: 600;
    font-size: .9rem;
}
.wn-menu a i { width: 18px; color: var(--gold); text-align: center; }
.wn-menu a:hover { background: rgba(255,255,255,.05); }
.wn-menu a.danger, .wn-menu a.danger i { color: #ff8fa3 !important; }
.wn-menu hr { margin: 6px 0 !important; border-top: 1px solid var(--line-soft) !important; }

/* Main */
.wn-main {
    margin-left: var(--sb-w);
    padding: 22px 26px 40px;
    min-height: calc(100vh - var(--top-h) - 90px);
}
.wn-container { max-width: 1320px; margin: 0 auto; }

.wn-footer {
    margin-left: var(--sb-w);
    padding: 22px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: .82rem;
}
.wn-footer-features { display: flex; gap: 18px; flex-wrap: wrap; }
.wn-footer-features span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.wn-footer-features i { color: var(--gold); }
.wn-footer strong { color: var(--text); }
.wn-footer-slogan { font: 700 .72rem var(--display); letter-spacing: .26em; color: var(--gold); }

.wn-overlay {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(5, 2, 12, .65);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

/* Bottom nav (mobile) */
.wn-bottomnav {
    display: none;
    position: fixed;
    z-index: 60;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    height: 68px;
    padding: 0 6px;
    border-radius: 22px;
    background: rgba(23, 14, 51, .88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px -10px rgba(0,0,0,.8);
    align-items: center;
    justify-content: space-around;
}
.wn-bottomnav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--dim) !important;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 6px 0;
    transition: color .2s;
}
.wn-bottomnav a i { font-size: 1.1rem; transition: transform .3s var(--ease); }
.wn-bottomnav a.active { color: var(--gold) !important; }
.wn-bottomnav a.active i { transform: translateY(-3px); filter: drop-shadow(0 4px 10px rgba(255, 209, 102, .7)); }
.wn-bottomnav a.wn-bn-center i {
    width: 52px;
    height: 52px;
    margin-top: -30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gold-grad);
    color: #2a1600;
    box-shadow: 0 10px 24px -6px rgba(245, 165, 36, .8), 0 0 0 5px var(--bg);
    transform: none !important;
}

/* =====================================================================
   COMMON PAGE COMPONENTS
   ===================================================================== */
.wn-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.wn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}
.wn-page-title { font: 600 clamp(1.3rem, 1.9vw, 1.7rem)/1.2 var(--display); letter-spacing: -.01em; }
.wn-page-sub { color: var(--muted); margin-top: 6px; }

.wn-card {
    position: relative;
    padding: 20px;
    border-radius: 22px;
    background:
        radial-gradient(500px 200px at var(--mx, 80%) var(--my, -20%), rgba(255, 209, 102, .07), transparent 60%),
        linear-gradient(160deg, rgba(39, 26, 84, .75), rgba(23, 14, 51, .85));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.wn-card + .wn-card { margin-top: 20px; }
.wn-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.wn-card-title { display: flex; align-items: center; gap: 11px; font: 600 .98rem/1.2 var(--display); }
.wn-icon-chip {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: #2a1600;
    background: var(--gold-grad);
    box-shadow: 0 8px 20px -8px var(--gold-2);
}
.wn-icon-chip.purple { background: linear-gradient(135deg, #c9a6ff, #7c3aed); color: #fff; box-shadow: 0 8px 20px -8px #7c3aed; }
.wn-icon-chip.green { background: linear-gradient(135deg, #8ff5d6, #10b981); color: #032a1e; box-shadow: 0 8px 20px -8px #10b981; }
.wn-icon-chip.blue { background: linear-gradient(135deg, #a8c8ff, #3b6dff); color: #fff; box-shadow: 0 8px 20px -8px #3b6dff; }
.wn-icon-chip.pink { background: linear-gradient(135deg, #ffb3dc, #e93d8f); color: #fff; box-shadow: 0 8px 20px -8px #e93d8f; }

/* Ticket card — perforated side notches */
.wn-ticket {
    --notch: 14px;
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0 var(--ny, 50%), transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% var(--ny, 50%), transparent 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at 0 var(--ny, 50%), transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% var(--ny, 50%), transparent 98%, #000) right / 51% 100% no-repeat;
}
.wn-perf {
    border: 0;
    height: 0;
    border-top: 2px dashed rgba(255, 209, 102, .25);
    margin: 20px -6px;
}

/* Stat tiles */
.wn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wn-stats.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wn-stats.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wn-stat {
    --accent: var(--gold);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(39, 26, 84, .8), rgba(23, 14, 51, .9));
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
    transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
    color: var(--text) !important;
}
.wn-stat::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -50px;
    top: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    opacity: .18;
    transition: opacity .3s, transform .5s var(--ease);
}
.wn-stat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--accent) 60%, black); }
.wn-stat:hover::before { opacity: .32; transform: scale(1.15); }
.wn-stat .wn-stat-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.wn-stat-body { min-width: 0; flex: 1; position: relative; }
.wn-stat-label { color: var(--muted); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.wn-stat-value { font: 600 clamp(1.15rem, 1.6vw, 1.4rem)/1.2 var(--display); margin-top: 4px; word-break: break-word; }
.wn-stat-value small { font: 700 .72rem var(--font); color: var(--muted); letter-spacing: .08em; margin-left: 4px; }
.wn-stat-sub { color: var(--dim); font-size: .78rem; margin-top: 2px; }
.wn-stat-go {
    position: relative;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .8rem;
    color: var(--accent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    transition: transform .3s var(--ease), background .3s;
}
.wn-stat:hover .wn-stat-go, .wn-stat-go:hover { transform: translateX(4px) rotate(-45deg); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wn-stat.gold { --accent: #ffd166; }
.wn-stat.green { --accent: #22d3a0; }
.wn-stat.purple { --accent: #b388ff; }
.wn-stat.blue { --accent: #5b9bff; }
.wn-stat.pink { --accent: #ff6fb8; }
.wn-stat.orange { --accent: #ff9a52; }
.wn-stat.red { --accent: #ff6b85; }

/* Badges / chips */
.wn-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 209, 102, .08);
    border: 1px solid rgba(255, 209, 102, .28);
    color: #ffe3a0;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.wn-chip.hot { background: rgba(255, 77, 109, .12); border-color: rgba(255, 77, 109, .4); color: #ffb3c1; animation: wn-blink 1.6s ease-in-out infinite; }
.wn-chip.green { background: rgba(34, 211, 160, .1); border-color: rgba(34, 211, 160, .35); color: #9ff5d9; }

/* GridView tables */
.wn-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    border: 1px solid var(--line-soft);
    background: rgba(8, 4, 18, .35);
}
body.wn table.gridview {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 0 !important;
    font-size: .9rem;
    color: var(--text);
    margin: 0;
}
body.wn table.gridview th {
    position: sticky;
    top: 0;
    padding: 14px 16px !important;
    background: rgba(255, 209, 102, .08) !important;
    color: var(--gold) !important;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    white-space: nowrap;
}
body.wn table.gridview td {
    padding: 13px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    vertical-align: middle;
}
body.wn table.gridview tr:last-child td { border-bottom: 0 !important; }
body.wn table.gridview tr { transition: background .2s; }
body.wn table.gridview tbody tr:hover td { background: rgba(255, 255, 255, .03); }
body.wn table.gridview td a { color: var(--green) !important; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
body.wn table.gridview td a:hover { text-decoration: underline; }
body.wn table.gridview .wn-pos { color: var(--green); font-weight: 600; }
body.wn table.gridview .wn-num { text-align: right; font-weight: 600; font-family: var(--display); font-size: .85rem; }
body.wn table.gridview .wn-seatno {
    width: 56px;
}
body.wn table.gridview .wn-seatno span,
body.wn table.gridview td.wn-seatno {
    font-family: var(--display);
    font-weight: 600;
    color: var(--gold);
}
body.wn table.gridview .wn-pager td { padding: 10px !important; background: transparent !important; }
body.wn table.gridview .wn-pager table td { border: 0 !important; padding: 2px !important; }
body.wn table.gridview .wn-pager a,
body.wn table.gridview .wn-pager span {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 10px;
    border: 1px solid var(--line);
    color: var(--muted) !important;
    font-weight: 600;
}
body.wn table.gridview .wn-pager span { background: var(--gold-grad); color: #2a1600 !important; border-color: transparent; }
body.wn table.gridview img { vertical-align: middle; }
/* Empty data row */
body.wn table.gridview tr:only-child td:only-child { text-align: center; color: var(--dim); padding: 28px 16px !important; }

/* List-style rows (no header grid) */
body.wn table.gridview.wn-list td:first-child { color: var(--muted); font-weight: 600; }

.wn-total {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(34, 211, 160, .12), rgba(34, 211, 160, .03));
    border: 1px solid rgba(34, 211, 160, .3);
    font-weight: 600;
}
.wn-total strong { font: 700 1.15rem var(--display); color: #8ff5d6; }
.wn-total.gold { background: linear-gradient(90deg, rgba(255, 209, 102, .14), rgba(255, 209, 102, .03)); border-color: rgba(255, 209, 102, .35); }
.wn-total.gold strong { color: var(--gold); }

/* grid helpers */
.wn-grid { display: grid; gap: 20px; }
.wn-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.wn-mt { margin-top: 20px; }
.wn-mt-lg { margin-top: 28px; }
.wn-stack > * + * { margin-top: 20px; }

/* Alert */
.wn-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 77, 109, .1);
    border: 1px solid rgba(255, 77, 109, .35);
    color: #ffb3c1 !important;
    font-weight: 600;
}

/* Toast */
.wn-toast {
    position: fixed;
    left: 50%;
    bottom: 100px;
    z-index: 9999;
    transform: translate(-50%, 20px);
    opacity: 0;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--gold-grad);
    color: #2a1600;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: 0 16px 36px -10px rgba(245, 165, 36, .8);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity .3s, transform .35s var(--ease);
    pointer-events: none;
}
.wn-toast.show { opacity: 1; transform: translate(-50%, 0); }

#wn-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100000; }

/* =====================================================================
   DASHBOARD
   ===================================================================== */
.wn-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 26px 30px;
    border-radius: 26px;
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(255, 209, 102, .2), transparent 60%),
        radial-gradient(500px 300px at 0% 100%, rgba(166, 107, 255, .3), transparent 60%),
        linear-gradient(135deg, #2a1660 0%, #1a0d3d 55%, #120830 100%);
    border: 1px solid rgba(255, 209, 102, .25);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
    margin-bottom: 24px;
}
.wn-hero::before {
    /* light rays */
    content: "";
    position: absolute;
    right: -20%;
    top: -60%;
    width: 80%;
    height: 220%;
    background: conic-gradient(from 200deg, transparent 0 10deg, rgba(255, 209, 102, .07) 10deg 18deg, transparent 18deg 30deg, rgba(255, 209, 102, .05) 30deg 36deg, transparent 36deg 360deg);
    animation: wn-spin 40s linear infinite;
    pointer-events: none;
}
.wn-hero-title { font: 600 clamp(1.35rem, 2.3vw, 1.95rem)/1.2 var(--display); margin: 4px 0 10px; letter-spacing: -.01em; }
.wn-hero-title span.wn-gold-text { display: inline; }
.wn-hero p { color: #cfc5ee; max-width: 520px; }
.wn-hero .wn-ball-row { margin-top: 22px; }
.wn-hero-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Draw machine (globe with tumbling balls) */
.wn-machine {
    position: relative;
    justify-self: center;
    width: min(210px, 100%);
    aspect-ratio: 1 / 1.12;
}
.wn-globe {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 22%),
        radial-gradient(circle at 50% 50%, rgba(166, 107, 255, .15), rgba(20, 10, 45, .5) 70%);
    border: 2px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 40px rgba(166, 107, 255, .35), 0 0 60px -10px rgba(255, 209, 102, .35);
}
.wn-globe .wn-ball { position: absolute; width: 22%; height: 22%; animation: wn-tumble 3.2s ease-in-out infinite; }
.wn-globe .wn-ball b { font-size: .55rem; }
.wn-globe .wn-ball:nth-child(1) { left: 14%; top: 50%; animation-delay: 0s; }
.wn-globe .wn-ball:nth-child(2) { left: 40%; top: 62%; animation-delay: -.6s; animation-duration: 2.8s; }
.wn-globe .wn-ball:nth-child(3) { left: 62%; top: 46%; animation-delay: -1.2s; animation-duration: 3.5s; }
.wn-globe .wn-ball:nth-child(4) { left: 28%; top: 26%; animation-delay: -1.8s; animation-duration: 3s; }
.wn-globe .wn-ball:nth-child(5) { left: 56%; top: 20%; animation-delay: -2.4s; animation-duration: 2.6s; }
.wn-globe .wn-ball:nth-child(6) { left: 46%; top: 38%; animation-delay: -.9s; animation-duration: 3.8s; }
.wn-globe-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34%;
    transform: translate(-50%, -50%);
    opacity: .9;
    filter: drop-shadow(0 6px 18px rgba(255, 209, 102, .6));
    animation: wn-bob 4s ease-in-out infinite;
}
.wn-machine-base {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 62%;
    height: 18%;
    transform: translateX(-50%);
    border-radius: 14px 14px 22px 22px;
    background: linear-gradient(180deg, #ffd166, #b9770e);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 14px 30px -10px rgba(245, 165, 36, .8);
    display: grid;
    place-items: center;
    font: 700 .7rem var(--display);
    color: #3a2100;
    letter-spacing: .2em;
}
.wn-machine-base::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -16%;
    width: 30%;
    height: 22%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #c98a14, #8a5a07);
    border-radius: 6px 6px 0 0;
}

/* Layout: packages/board left, join right */
.wn-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
    margin-top: 24px;
}
.wn-sticky { position: sticky; top: calc(var(--top-h) + 20px); }

/* Packages (lottery chips) */
.wn-packages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.wn-packages > a { display: block; color: inherit !important; text-decoration: none !important; }
.wn-packages .package-card {
    position: relative;
    height: 100%;
    padding: 14px 8px 12px;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
    border: 1.5px solid rgba(255,255,255,.08);
    transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, background .3s;
    cursor: pointer;
    overflow: hidden;
}
.wn-packages .package-card::after {
    content: "";
    position: absolute;
    inset: auto -30% -60% -30%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(255, 209, 102, .25), transparent 65%);
    opacity: 0;
    transition: opacity .3s;
}
.wn-packages > a:hover .package-card { transform: translateY(-5px); border-color: rgba(255, 209, 102, .45); }
.wn-packages > a:hover .package-card::after { opacity: 1; }
.wn-packages .package-card.selected,
.wn-packages .package-card.pactive {
    border-color: var(--gold);
    background: linear-gradient(170deg, rgba(255, 209, 102, .22), rgba(245, 165, 36, .06));
    box-shadow: 0 0 0 4px rgba(255, 209, 102, .12), 0 20px 40px -16px rgba(245, 165, 36, .7);
    transform: translateY(-4px);
}
.wn-packages .package-card.selected::after { opacity: 1; }
.wn-packages .package-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .62rem;
    background: rgba(255,255,255,.08);
    color: transparent;
    transition: all .3s var(--ease);
}
.wn-packages .package-card.selected .package-check { background: var(--gold); color: #2a1600; box-shadow: 0 0 12px var(--gold); transform: scale(1.1); }
.wn-packages .package-icon {
    --c: var(--gold-2);
    width: 46px;
    height: 46px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.15rem;
    /* casino chip */
    background:
        repeating-conic-gradient(from 0deg, rgba(255,255,255,.9) 0 10deg, transparent 10deg 45deg),
        var(--c);
    box-shadow: inset 0 0 0 6px var(--c), inset 0 0 0 8px rgba(255,255,255,.35), 0 10px 22px -8px var(--c);
    transition: transform .6s var(--ease);
}
.wn-packages .package-icon i {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--c);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
    font-size: .8rem;
}
.wn-packages > a:hover .package-icon,
.wn-packages .package-card.selected .package-icon { transform: rotate(180deg); }
.wn-packages .package-icon.purple { --c: #8b5cf6; }
.wn-packages .package-icon.blue { --c: #3b82f6; }
.wn-packages .package-icon.teal { --c: #10b981; }
.wn-packages .package-icon.red { --c: #ef4466; }
.wn-packages .package-icon.gold { --c: #e09a14; }
.wn-packages .package-card strong { display: block; font: 600 1.25rem/1 var(--display); color: var(--text); }
.wn-packages .package-card small { display: block; margin-top: 4px; font-size: .7rem; letter-spacing: .16em; color: var(--muted); font-weight: 600; }
.wn-packages .package-card em {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.3);
    font-style: normal;
    font-size: .72rem;
    font-weight: 600;
    color: var(--gold);
}

/* Board */
.wn-board-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wn-crown {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #2a1600;
    background: var(--gold-grad);
    box-shadow: 0 12px 26px -10px var(--gold-2);
    animation: wn-bob 3s ease-in-out infinite;
}
.wn-board-head h2 { font: 600 clamp(1.05rem, 1.6vw, 1.25rem)/1.2 var(--display); }
.wn-board-head p { color: var(--muted); font-size: .9rem; margin-top: 4px; }

table.wn-chiprow { display: block; width: 100%; margin: 18px 0 0; border: 0; }
table.wn-chiprow tbody { display: block; }
table.wn-chiprow tr { display: flex; flex-wrap: wrap; gap: 10px; }
table.wn-chiprow td { display: block; padding: 0; border: 0; }

.wn-jackpot {
    margin-top: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}
.wn-jackpot-main {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 22px;
    background:
        radial-gradient(300px 140px at 0% 0%, rgba(255, 209, 102, .3), transparent 70%),
        linear-gradient(135deg, #3b2300, #1e1200);
    border: 1px solid rgba(255, 209, 102, .5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px -20px rgba(245,165,36,.8);
}
.wn-jackpot-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 241, 184, .18) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: wn-shine 4s ease-in-out infinite;
}
.wn-trophy {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: #2a1600;
    background: var(--gold-grad);
    box-shadow: 0 0 0 6px rgba(255, 209, 102, .15), 0 0 30px rgba(255, 209, 102, .5);
}
.wn-jackpot-main h3 { font-size: .72rem; letter-spacing: .26em; color: #ffe3a0; font-weight: 600; }
.wn-jackpot-main h4 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.wn-jackpot-main h4 .wn-jp {
    font: 700 clamp(1.7rem, 2.8vw, 2.2rem)/1 var(--display) !important;
    background: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    filter: drop-shadow(0 4px 16px rgba(255, 209, 102, .4));
}
.wn-jackpot-main h4 > span:last-child { color: #ffe3a0; font-weight: 600; font-size: .9rem; letter-spacing: .1em; }
.wn-mini {
    padding: 18px;
    border-radius: 22px;
    text-align: center;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line-soft);
}
.wn-mini i { font-size: 1.1rem; }
.wn-mini strong { display: block; font: 600 1.45rem/1.1 var(--display); margin: 6px 0 2px; }
.wn-mini h6 { font-size: .68rem; letter-spacing: .22em; color: var(--muted); font-weight: 600; }
.wn-mini.filled i { color: var(--green); }
.wn-mini.filled strong { color: #8ff5d6; }
.wn-mini.vacant i { color: var(--purple); }
.wn-mini.vacant strong { color: #d4bcff; }

.wn-progress { margin-top: 18px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.wn-progress span {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3a0, #ffd166, #ff8a3d);
    background-size: 200% 100%;
    animation: wn-flow 3s linear infinite;
    transition: width 1s var(--ease);
}

/* Seats = lottery balls */
.wn-seats {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
    padding: 20px;
    border-radius: 22px;
    background: radial-gradient(ellipse at center, rgba(166, 107, 255, .12), transparent 70%), rgba(0,0,0,.18);
    border: 1px dashed rgba(255, 209, 102, .2);
}
.wn-seats > a {
    --c: #3a2d66;
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-width: 62px;
    justify-self: center;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: .95rem;
    line-height: 1;
    transition: transform .3s var(--ease), box-shadow .3s, filter .3s;
    -webkit-tap-highlight-color: transparent;
}
.wn-seats > a br { display: none; }
.wn-seats > a span { font: 700 .72rem/1 var(--display); }
.wn-seats > a i { font-size: .9rem; }

/* vacant (pck1) — empty glass ball, clickable */
.wn-seats > a.pck1,
.wn-seats > a.btn-toggle:not(.pck):not(.pck2) {
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.18), transparent 40%), rgba(255,255,255,.03);
    border: 2px dashed rgba(255, 255, 255, .22);
    color: var(--muted) !important;
}
.wn-seats > a.pck1:not(.aspNetDisabled):hover {
    transform: translateY(-4px) scale(1.06);
    border-color: var(--gold);
    color: var(--gold) !important;
    box-shadow: 0 0 0 5px rgba(255, 209, 102, .1), 0 0 24px rgba(255, 209, 102, .3);
}
.wn-seats > a.pck1.aspNetDisabled { opacity: .45; cursor: not-allowed; }

/* filled (pck) — glossy coloured ball */
.wn-seats > a.pck {
    --c: var(--red);
    background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,.9) 0 5%, rgba(255,255,255,.3) 13%, transparent 32%),
        radial-gradient(circle at 70% 80%, rgba(0,0,0,.35), transparent 55%),
        var(--c);
    box-shadow: inset -5px -7px 12px rgba(0,0,0,.35), 0 10px 20px -8px var(--c);
    cursor: default;
}
.wn-seats > a.pck i,
.wn-seats > a.pck span { text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.wn-seats > a.pck:nth-child(6n+1) { --c: #ef4466; }
.wn-seats > a.pck:nth-child(6n+2) { --c: #3b82f6; }
.wn-seats > a.pck:nth-child(6n+3) { --c: #10b981; }
.wn-seats > a.pck:nth-child(6n+4) { --c: #8b5cf6; }
.wn-seats > a.pck:nth-child(6n+5) { --c: #f97316; }
.wn-seats > a.pck:nth-child(6n+6) { --c: #ec4899; }

/* your pick (pck2) — pulsing gold ball */
.wn-seats > a.pck2 {
    background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0 5%, rgba(255,255,255,.35) 13%, transparent 32%),
        var(--gold-grad);
    color: #2a1600 !important;
    box-shadow: inset -5px -7px 12px rgba(120, 60, 0, .35), 0 0 0 0 rgba(255, 209, 102, .6);
    animation: wn-seat-pulse 1.6s ease-in-out infinite;
}

.wn-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.wn-legend span { display: inline-flex; align-items: center; gap: 8px; }
.wn-legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.wn-legend .l-filled { background: linear-gradient(135deg, #ef4466, #8b5cf6); }
.wn-legend .l-pick { background: var(--gold-grad); box-shadow: 0 0 8px var(--gold); }
.wn-legend .l-open { border: 2px dashed rgba(255,255,255,.35); }

.wn-note {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(76, 141, 255, .08);
    border: 1px solid rgba(76, 141, 255, .25);
    color: #c9dbff;
    font-size: .88rem;
}
.wn-note i { color: var(--blue); margin-top: 3px; }
.wn-note span[id] { color: var(--gold); font-weight: 600; }

/* Join panel (golden ticket) */
.wn-join {
    --ny: 46%;
    padding: 26px 24px;
    border-radius: 26px;
    background:
        radial-gradient(400px 200px at 50% -10%, rgba(255, 209, 102, .22), transparent 70%),
        linear-gradient(170deg, #2c1a5e, #1a0f3a 60%, #150b30);
    border: 1px solid rgba(255, 209, 102, .35);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
}
.wn-join-title { display: flex; align-items: center; gap: 14px; }
.wn-join-title h2 { font: 600 1.05rem/1.2 var(--display); }
.wn-join-title p { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.wn-price {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--line);
}
.wn-price .wn-coins {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: #2a1600;
    background: var(--gold-grad);
    box-shadow: 0 10px 24px -8px var(--gold-2);
    animation: wn-coin-spin 6s ease-in-out infinite;
}
.wn-price-val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wn-price-val .wn-pv { font: 700 1.7rem/1 var(--display) !important; color: #fff !important; }
.wn-price-val em { font-style: normal; color: var(--gold); font-weight: 600; letter-spacing: .08em; }
.wn-price small { display: block; color: var(--muted); font-size: .68rem; letter-spacing: .24em; font-weight: 600; margin-top: 6px; }

.wn-rows { margin-top: 6px; }
.wn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
    font-size: .9rem;
}
.wn-row > span { color: var(--muted); }
.wn-row strong { font-weight: 600; color: #8ff5d6; text-align: right; }
.wn-row strong.muted { color: var(--muted); font-weight: 600; }

.wn-total-cost {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 209, 102, .08);
    border: 1px solid rgba(255, 209, 102, .3);
}
.wn-total-cost span { color: #ffe3a0; font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.wn-total-cost strong { font: 700 1.1rem var(--display); color: var(--gold); }

.wn-qty { margin-top: 18px; display: flex; align-items: stretch; gap: 10px; }
body.wn .wn-qty input.quantity-button {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.15);
    background-color: rgba(255,255,255,.08);
    background-image: linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.15));
    color: #1a1033;
    font: 700 1.5rem/1 var(--font);
    cursor: pointer;
    transition: transform .2s var(--ease), filter .2s;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
}
body.wn .wn-qty input.quantity-button:hover { transform: translateY(-2px); filter: brightness(1.1); }
body.wn .wn-qty input.quantity-button:active { transform: scale(.94); }
body.wn .wn-qty input.join-button { flex: 1; min-height: 44px; padding: 0 12px; font-size: .82rem; letter-spacing: .03em; }

/* Referral */
.wn-ref-hero { text-align: center; padding: 34px 26px; }
.wn-ref-hero .wn-gift {
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    font-size: 2rem;
    color: #2a1600;
    background: var(--gold-grad);
    box-shadow: 0 20px 40px -14px var(--gold-2);
    animation: wn-bob 3s ease-in-out infinite;
}
.wn-ref-hero h2 { font: 600 clamp(1.2rem, 1.9vw, 1.5rem)/1.2 var(--display); }
.wn-ref-hero p { color: var(--muted); margin: 8px auto 0; max-width: 520px; }
.wn-linkbox {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 18px;
    border-radius: 18px;
    background: rgba(0,0,0,.3);
    border: 1.5px dashed rgba(255, 209, 102, .4);
    text-align: left;
}
.wn-linkbox > i { color: var(--gold); }
.wn-linkbox #p1 { flex: 1; min-width: 0; overflow: hidden; }
.wn-linkbox #p1 a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem !important;
    text-decoration: none !important;
}
.wn-linkbox #p1 a span { color: var(--text) !important; font-weight: 600; }
.wn-share { margin-top: 22px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.wn-share a {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--line-soft);
    transition: transform .3s var(--ease), background .3s, border-color .3s;
}
.wn-share a:hover { transform: translateY(-5px) rotate(-4deg); background: rgba(255, 209, 102, .1); border-color: rgba(255, 209, 102, .4); }
.wn-share input[type=image] { width: 34px !important; height: 34px; object-fit: contain; display: block; }
.wn-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wn-step { text-align: center; padding: 22px 16px; }
.wn-step .wn-ball { margin: 0 auto 12px; width: 50px; height: 50px; }
.wn-step h5 { font: 700 .95rem var(--display); margin-bottom: 6px; }
.wn-step p { color: var(--muted); font-size: .84rem; }

/* Wallet */
.wn-wallet-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 28px;
    background:
        radial-gradient(400px 200px at 100% 0%, rgba(255, 209, 102, .35), transparent 70%),
        radial-gradient(400px 260px at 0% 100%, rgba(236, 72, 153, .3), transparent 70%),
        linear-gradient(135deg, #3b1d7a, #24104f 60%, #1a0b3a);
    border: 1px solid rgba(255, 209, 102, .35);
    box-shadow: 0 30px 60px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12);
}
.wn-wallet-card::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 30px solid rgba(255, 209, 102, .08);
}
.wn-wallet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wn-chipcard {
    width: 50px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffe7a3, #c48a1a);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    position: relative;
}
.wn-chipcard::before { content: ""; position: absolute; inset: 8px 10px; border: 1.5px solid rgba(90, 50, 0, .4); border-radius: 4px; }
.wn-addr-label { margin-top: 26px; font-size: .7rem; letter-spacing: .22em; color: #d8cdf7; font-weight: 600; text-transform: uppercase; }
.wn-addr {
    margin-top: 6px;
    font: 600 clamp(.85rem, 1.8vw, 1.05rem)/1.4 'Courier New', monospace;
    word-break: break-all;
    color: #fff;
    letter-spacing: .04em;
}
.wn-addr span { color: #fff !important; font-weight: 600 !important; }
.wn-wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }

.wn-txn-img img { border-radius: 50%; }

/* Rewards withdraw strip */
.wn-cta-strip {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 24px;
    border-radius: 22px;
    background:
        radial-gradient(300px 150px at 100% 50%, rgba(255, 209, 102, .2), transparent 70%),
        linear-gradient(135deg, rgba(34, 211, 160, .1), rgba(39, 26, 84, .6));
    border: 1px solid rgba(255, 209, 102, .3);
}
.wn-cta-strip h4 { font: 700 1.05rem var(--display); }
.wn-cta-strip p { color: var(--muted); font-size: .86rem; margin-top: 4px; }

/* =====================================================================
   AUTH (Login / Register)
   ===================================================================== */
.wn-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.wn-auth-show {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 56px;
    background:
        radial-gradient(700px 500px at 20% 0%, rgba(166, 107, 255, .35), transparent 60%),
        radial-gradient(600px 400px at 100% 100%, rgba(255, 209, 102, .2), transparent 60%),
        linear-gradient(160deg, #1d0f45, #0f0727);
    border-right: 1px solid var(--line);
}
.wn-auth-show::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160%;
    height: 160%;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255, 209, 102, .05) 8deg 14deg, transparent 14deg 30deg);
    animation: wn-spin 60s linear infinite;
    pointer-events: none;
}
.wn-auth-show > * { position: relative; }
.wn-auth-brand { display: flex; align-items: center; gap: 14px; color: var(--text) !important; }
.wn-auth-brand .wn-brand-coin { width: 58px; height: 58px; }
.wn-auth-hero { max-width: 520px; padding: 30px 0; }
.wn-auth-hero h1 { font: 700 clamp(1.9rem, 3.2vw, 2.8rem)/1.08 var(--display); margin: 8px 0 14px; letter-spacing: -.02em; }
.wn-auth-hero p { color: #cfc5ee; font-size: 1.02rem; }
.wn-auth-hero .wn-ball-row { margin-top: 28px; }
.wn-auth-hero .wn-ball { width: 44px; height: 44px; }
.wn-auth-hero .wn-ball b { font-size: .9rem; }
.wn-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.wn-feature {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line-soft);
    transition: transform .3s var(--ease), border-color .3s;
}
.wn-feature:hover { transform: translateY(-4px); border-color: rgba(255, 209, 102, .35); }
.wn-feature i { color: var(--gold); font-size: 1.15rem; }
.wn-feature strong { display: block; margin-top: 10px; font-size: .92rem; }
.wn-feature small { color: var(--muted); font-size: .78rem; }
.wn-auth-foot { display: flex; align-items: center; gap: 14px; color: var(--muted); font: 700 .72rem var(--display); letter-spacing: .24em; }
.wn-auth-foot span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .5; }
.wn-auth-foot strong { color: var(--gold); }

.wn-auth-form {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.wn-auth-mobile-brand { display: none; text-align: center; margin-bottom: 22px; }
.wn-auth-mobile-brand img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(255, 209, 102, .5)); }
.wn-auth-mobile-brand .wn-brand-name { margin-top: 10px; font-size: 1.3rem; }
.wn-auth-mobile-brand .wn-ball-row { justify-content: center; margin-top: 14px; }
.wn-auth-mobile-brand .wn-ball { width: 34px; height: 34px; }
.wn-auth-mobile-brand .wn-ball b { font-size: .6rem; }

.wn-auth-card {
    --ny: 128px;
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 28px 28px 24px;
    border-radius: 28px;
    background:
        radial-gradient(420px 200px at 50% -20%, rgba(255, 209, 102, .2), transparent 70%),
        linear-gradient(170deg, #241550, #170d36);
    border: 1px solid rgba(255, 209, 102, .3);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
    animation: wn-rise .7s var(--ease) both;
}
.wn-auth-card::before {
    /* gold top bar */
    content: "";
    position: absolute;
    left: 32px;
    right: 32px;
    top: 0;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--gold-grad);
    box-shadow: 0 0 20px var(--gold);
}
.wn-auth-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: #2a1600;
    background: var(--gold-grad);
    box-shadow: 0 16px 32px -12px var(--gold-2);
}
.wn-auth-card h2 { text-align: center; font: 600 1.35rem/1.2 var(--display); }
.wn-auth-card .wn-auth-sub { text-align: center; color: var(--muted); margin: 8px 0 0; font-size: .92rem; }
.wn-auth-card .wn-perf { margin: 20px -28px; }
.wn-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--dim); font-size: .68rem; font-weight: 600; letter-spacing: .22em; }
.wn-divider span { flex: 1; height: 1px; background: var(--line-soft); }
.wn-secure { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(34, 211, 160, .07); border: 1px solid rgba(34, 211, 160, .2); color: #b7f5e1; font-size: .82rem; }
.wn-secure i { color: var(--green); margin-top: 2px; }
.wn-switch { text-align: center; margin-top: 18px; color: var(--muted); font-size: .9rem; }
.wn-switch a { font-weight: 600; margin-left: 4px; }
.wn-copy { margin-top: 22px; color: var(--dim); font-size: .78rem; text-align: center; }
.wn-copy strong { color: var(--muted); }

.wn-captcha {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    border-radius: 14px;
    background:
        repeating-linear-gradient(45deg, rgba(255, 209, 102, .07) 0 8px, transparent 8px 16px),
        #fff7e0;
    border: 2px dashed var(--gold-2);
    overflow: hidden;
}
body.wn .wn-captcha span[id] {
    display: block;
    width: 100%;
    text-align: center;
    background: none !important;
    border: 0 !important;
    padding: 10px 0 !important;
    color: #3a2470 !important;
    font-size: 1.7rem !important;
    letter-spacing: 16px !important;
    font-weight: 700 !important;
    user-select: none;
}
.wn-validator { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; color: #ff8fa3 !important; }
.wn-btn-pair { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; margin-top: 8px; }

/* =====================================================================
   SweetAlert — cream "lottery ticket" popup (keeps existing inline colours readable)
   ===================================================================== */
body.wn .swal2-container.swal2-backdrop-show { background: rgba(8, 3, 20, .72) !important; backdrop-filter: blur(4px); }
body.wn .swal2-popup {
    border-radius: 24px !important;
    background:
        radial-gradient(300px 120px at 50% 0%, rgba(255, 209, 102, .35), transparent 70%),
        #fffaf0 !important;
    border: 2px solid var(--gold-2);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.8) !important;
    font-family: var(--font) !important;
    padding-bottom: 1.6em !important;
}
body.wn .swal2-title { font-family: var(--display) !important; }
body.wn .swal2-html-container { color: #2a2245 !important; }
body.wn .swal2-styled.swal2-confirm {
    background: var(--gold-grad) !important;
    color: #2a1600 !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    padding: .7em 2.2em !important;
    box-shadow: 0 10px 24px -8px rgba(245, 165, 36, .8) !important;
}

/* =====================================================================
   ENTRY ANIMATIONS (disabled after first paint so UpdatePanel refreshes don't re-animate)
   ===================================================================== */
html:not(.wn-settled) .wn-reveal { animation: wn-rise .7s var(--ease) both; animation-delay: var(--d, 0s); }

@keyframes wn-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wn-drop { 0% { opacity: 0; transform: translateY(-40px) scale(.6); } 60% { opacity: 1; transform: translateY(6px) scale(1.05); } 100% { transform: none; } }
@keyframes wn-float { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(30px, -40px) rotate(40deg); } 66% { transform: translate(-20px, 20px) rotate(-30deg); } }
@keyframes wn-tumble { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(40%, -60%) rotate(90deg); } 50% { transform: translate(-30%, -90%) rotate(200deg); } 75% { transform: translate(-50%, -20%) rotate(290deg); } }
@keyframes wn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.wn-globe-logo { --tx: -50%; }
@keyframes wn-spin { to { transform: rotate(360deg); } }
@keyframes wn-coin-spin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
@keyframes wn-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 160, .7); } 70% { box-shadow: 0 0 0 10px rgba(34, 211, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 211, 160, 0); } }
@keyframes wn-seat-pulse { 0%, 100% { box-shadow: inset -5px -7px 12px rgba(120, 60, 0, .35), 0 0 0 0 rgba(255, 209, 102, .6); transform: scale(1); } 50% { box-shadow: inset -5px -7px 12px rgba(120, 60, 0, .35), 0 0 0 10px rgba(255, 209, 102, 0); transform: scale(1.06); } }
@keyframes wn-ripple { to { transform: scale(4); opacity: 0; } }
@keyframes wn-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes wn-flow { to { background-position: -200% 0; } }
@keyframes wn-blink { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@keyframes wn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wn-twinkle { from { opacity: .35; } to { opacity: .6; } }

/* globe logo keeps centering while bobbing */
.wn-globe-logo { animation-name: wn-bob-c; }
@keyframes wn-bob-c { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 6px)); } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1280px) {
    .wn-dash-grid { grid-template-columns: minmax(0, 1fr) 330px; }
    .wn-seats { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; padding: 16px; }
}

@media (max-width: 1100px) {
    .wn-dash-grid { grid-template-columns: 1fr; }
    .wn-sticky { position: static; }
    .wn-packages { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .wn-sidebar { transform: translateX(-105%); box-shadow: 30px 0 60px rgba(0,0,0,.6); }
    body.wn-nav-open .wn-sidebar { transform: none; }
    body.wn-nav-open .wn-overlay { opacity: 1; visibility: visible; }
    body.wn-nav-open { overflow: hidden; }
    .wn-topbar, .wn-main, .wn-footer { margin-left: 0; }
    .wn-topbar { padding: 0 16px; }
    .wn-burger { display: grid; place-items: center; }
    .wn-top-brand { display: flex; }
    .wn-ticker { display: none; }
    .wn-main { padding: 22px 20px 120px; }
    .wn-footer { padding: 20px 20px 110px; justify-content: center; text-align: center; }
    .wn-bottomnav { display: flex; }

    .wn-hero { grid-template-columns: 1fr; padding: 28px 24px; }
    .wn-machine { width: 200px; order: -1; }
    .wn-stats, .wn-stats.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wn-grid-2 { grid-template-columns: 1fr; }
    .wn-jackpot { grid-template-columns: 1fr 1fr; }
    .wn-jackpot-main { grid-column: 1 / -1; }

    .wn-auth { grid-template-columns: 1fr; }
    .wn-auth-show { display: none; }
    .wn-auth-mobile-brand { display: block; }
}

@media (max-width: 767px) {
    .wn-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .wn-seats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .wn-steps { grid-template-columns: 1fr; }
    .wn-card { padding: 20px 18px; border-radius: 22px; }
}

@media (max-width: 575px) {
    body.wn { font-size: 14px; }
    .wn-main { padding: 18px 14px 116px; }
    .wn-top-right .wn-live { display: none; }
    .wn-profile-btn > span { display: none; }
    .wn-stats, .wn-stats.cols-2, .wn-stats.cols-3 { grid-template-columns: 1fr; gap: 12px; }
    .wn-stats.wn-stats--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wn-stats.wn-stats--tight .wn-stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
    .wn-stats.wn-stats--tight .wn-stat-icon { width: 42px; height: 42px; font-size: 1rem; border-radius: 12px; }
    .wn-stat { padding: 16px; }
    .wn-hero { padding: 24px 18px; border-radius: 24px; }
    .wn-hero .wn-ball { width: 38px; height: 38px; }
    .wn-packages .package-card { padding: 14px 6px 12px; }
    .wn-packages .package-icon { width: 46px; height: 46px; }
    .wn-packages .package-card strong { font-size: 1.25rem; }
    .wn-jackpot { grid-template-columns: 1fr 1fr; gap: 10px; }
    .wn-jackpot-main { padding: 16px; gap: 14px; }
    .wn-trophy { width: 50px; height: 50px; font-size: 1.25rem; }
    .wn-seats { gap: 10px; padding: 14px; }
    .wn-join { padding: 22px 18px; }
    .wn-wallet-card { padding: 22px 20px; }
    .wn-wallet-actions { grid-template-columns: 1fr 1fr; }
    .wn-auth-form { padding: 28px 14px; }
    .wn-auth-card { padding: 28px 20px 22px; border-radius: 24px; }
    .wn-auth-card .wn-perf { margin: 22px -20px; }
    .wn-linkbox { flex-wrap: wrap; padding: 14px; }
    .wn-linkbox .wn-btn { width: 100%; }
    .wn-cta-strip .wn-btn { width: 100%; }
}

@media (max-width: 380px) {
    .wn-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wn-btn-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   HELPERS (replace every former inline style in the pages)
   ===================================================================== */
@font-face {
    font-family: 'KalamCaptcha';
    src: url('../fonts/Kalam-Regular.ttf') format('truetype');
}
body.wn .wn-captcha span[id] { font-family: 'KalamCaptcha', cursive !important; }

.wn-hidden { display: none !important; }
.d1 { --d: .06s; } .d2 { --d: .12s; } .d3 { --d: .18s; } .d4 { --d: .24s; } .d5 { --d: .30s; } .d6 { --d: .36s; } .d7 { --d: .42s; } .d8 { --d: .48s; }

/* floating background balls — positions/sizes/colours */
.wn-balls i:nth-child(1) { left: 6%;  top: 14%; width: 70px;  height: 70px;  background: var(--red);    animation-duration: 22s; }
.wn-balls i:nth-child(2) { left: 82%; top: 22%; width: 54px;  height: 54px;  background: var(--blue);   animation-duration: 18s; animation-delay: -4s; }
.wn-balls i:nth-child(3) { left: 70%; top: 76%; width: 90px;  height: 90px;  background: var(--gold-2); animation-duration: 26s; animation-delay: -9s; }
.wn-balls i:nth-child(4) { left: 18%; top: 70%; width: 46px;  height: 46px;  background: var(--green);  animation-duration: 20s; animation-delay: -2s; }
.wn-balls i:nth-child(5) { left: 46%; top: 6%;  width: 40px;  height: 40px;  background: var(--purple); animation-duration: 24s; animation-delay: -12s; }
.wn-balls i:nth-child(6) { left: 92%; top: 56%; width: 36px;  height: 36px;  background: var(--pink);   animation-duration: 19s; animation-delay: -7s; }
.wn-balls i:nth-child(1)::before { font-size: 1.4rem; } .wn-balls i:nth-child(3)::before { font-size: 1.7rem; }
.wn-balls i:nth-child(2)::before, .wn-balls i:nth-child(4)::before { font-size: 1.1rem; }
.wn-balls i:nth-child(5)::before, .wn-balls i:nth-child(6)::before { font-size: .9rem; }

/* SweetAlert message text (classes used inside Swal html strings) */
.wn-sw-ok { color: #0f8a5f; }
.wn-sw-warn { color: #c97d10; }
.wn-sw-err { color: #d6203f; }
.wn-sw-strong { color: #3a2470; font-weight: 600; }
.wn-sw-text { color: #2a2245; }

/* bare image buttons (share) & logo images */
.wn-logo-img { width: 100%; height: auto; display: block; }
body.wn input.wn-pressed { transform: scale(.96) !important; filter: brightness(1.15); }
body.wn table.gridview .wn-txn-img { width: 44px; text-align: right; }
body.wn table.gridview .wn-txn-img img { width: 20px; height: 20px; border-radius: 50%; }

/* anchors styled as buttons keep button colours */
body.wn a.wn-btn, body.wn a.wn-btn:hover { color: #2a1600; }
body.wn a.wn-btn--ghost, body.wn a.wn-btn--ghost:hover { color: var(--gold) !important; }
.wn-brand-name, .wn-brand-tag { display: block; }
.wn-auth-card { --ny: 164px; }
@media (max-width: 575px) { .wn-auth-card { --ny: 160px; } .wn-card-title { font-size: .95rem; } }
.wn-card-head { flex-wrap: wrap; }
.wn-grid-2 > .wn-card, .wn-grid-2 > .wn-stack { margin-top: 0 !important; }
.wn-stat-value small { white-space: nowrap; }
.wn-balls i { opacity: .1; }
@media (max-width: 575px) {
    .wn-stats--tight .wn-stat-value { font-size: 1.2rem; }
    .wn-balls i:nth-child(1), .wn-balls i:nth-child(2), .wn-balls i:nth-child(5) { display: none; }
}

/* =====================================================================
   PREMIUM FX LAYER
   ===================================================================== */
@property --wn-a {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* rotating gold/colour ring around hero cards */
.wn-hero::after,
.wn-join::after,
.wn-auth-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--wn-a), transparent 0 55%, rgba(255, 209, 102, .9) 70%, #ff5fb4 80%, #a66bff 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: wn-ring 6s linear infinite;
    pointer-events: none;
}
.wn-join { position: relative; }
@keyframes wn-ring { to { --wn-a: 360deg; } }

/* glowing accent line on top of every card */
.wn-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 24px;
    width: 80px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    box-shadow: 0 0 12px rgba(255, 209, 102, .7);
    transition: width .5s var(--ease);
}
.wn-card:hover::before { width: 160px; }
.wn-card { transition: border-color .3s, transform .3s var(--ease); }
.wn-card:hover { border-color: rgba(255, 209, 102, .26); }

/* twinkling sparkles on the jackpot */
.wn-jackpot-main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(2px 2px at 78% 22%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 64%, #ffe3a0, transparent 60%),
        radial-gradient(2px 2px at 62% 80%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 94% 38%, #fff, transparent 60%),
        radial-gradient(1px 1px at 70% 50%, #ffe3a0, transparent 60%);
    animation: wn-sparkle 2.4s ease-in-out infinite alternate;
}
@keyframes wn-sparkle { from { opacity: .25; } to { opacity: 1; } }

/* decorative ball cluster beside page titles */
.wn-page-head::after {
    content: "";
    width: 120px;
    height: 46px;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 3px, transparent 7px) 0 6px / 34px 34px no-repeat,
        radial-gradient(circle, #ef4466 0 16px, transparent 17px) 0 6px / 34px 34px no-repeat,
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 3px, transparent 7px) 38px 0 / 40px 40px no-repeat,
        radial-gradient(circle, #f5a524 0 19px, transparent 20px) 38px 0 / 40px 40px no-repeat,
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 3px, transparent 7px) 82px 10px / 30px 30px no-repeat,
        radial-gradient(circle, #8b5cf6 0 14px, transparent 15px) 82px 10px / 30px 30px no-repeat;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
    animation: wn-bob 4s ease-in-out infinite;
}
.wn-page-head:has(> a)::after { display: none; }

/* primary buttons: periodic sheen */
.wn-btn:not(.wn-btn--ghost)::after { animation: wn-sheen 4.5s ease-in-out infinite; }
@keyframes wn-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* stat icons pop on hover */
.wn-stat:hover .wn-stat-icon { animation: wn-pop .5s var(--ease); }
@keyframes wn-pop { 40% { transform: scale(1.15) rotate(-8deg); } }

/* topbar glowing baseline */
.wn-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 209, 102, .45), rgba(166, 107, 255, .45), transparent);
}

/* gridview rows: subtle zebra + hover glow */
body.wn table.gridview tr:nth-child(even) td { background: rgba(255, 255, 255, .015); }
body.wn table.gridview tbody tr:hover td { background: rgba(255, 209, 102, .05); }

/* section titles get a tiny ball bullet */
.wn-card-title .wn-icon-chip { position: relative; }
.wn-card-title .wn-icon-chip::after {
    content: "";
    position: absolute;
    right: -3px;
    top: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 2px var(--surface), 0 0 8px var(--green);
}

/* hero coins confetti dots */
.wn-hero .wn-machine::after {
    content: "";
    position: absolute;
    inset: -20px;
    pointer-events: none;
    background:
        radial-gradient(3px 3px at 10% 30%, var(--gold), transparent 60%),
        radial-gradient(2px 2px at 90% 20%, #ff5fb4, transparent 60%),
        radial-gradient(3px 3px at 85% 75%, #4c8dff, transparent 60%),
        radial-gradient(2px 2px at 15% 80%, #22d3a0, transparent 60%),
        radial-gradient(2px 2px at 50% 0%, #fff, transparent 60%);
    animation: wn-sparkle 1.8s ease-in-out infinite alternate;
}

/* mobile sidebar spacing */
@media (max-width: 991px) {
    .wn-sidebar { width: 280px; padding: 10px 0 10px 10px; box-shadow: none; }
    .wn-nav a.active::after { display: none; }
}
@media (max-width: 575px) {
    .wn-page-head::after { display: none; }
    html { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .wn-hero::after, .wn-join::after, .wn-auth-card::after { animation: none; }
}
@media (max-width: 575px) { .wn-machine { width: 170px; } }

/* =====================================================================
   AUTH: fit one screen on desktop / laptop (no page scroll)
   ===================================================================== */
@media (min-width: 992px) {
    .wn-auth { height: 100vh; height: 100dvh; min-height: 520px; overflow: hidden; }
    .wn-auth-show { padding: clamp(18px, 4vh, 40px) clamp(28px, 4vw, 56px); }
    .wn-auth-hero { padding: 0; }
    .wn-auth-form { padding: clamp(12px, 3vh, 32px) 24px; overflow-y: auto; scrollbar-width: none; }
    .wn-auth-form::-webkit-scrollbar { display: none; }

    /* register: two-column field grid */
    .wn-auth-card--reg { max-width: 560px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
    .wn-auth-card--reg > * { grid-column: 1 / -1; }
    .wn-auth-card--reg > .wn-half { grid-column: auto; }
}

/* shorter laptop screens */
@media (min-width: 992px) and (max-height: 860px) {
    .wn-auth-hero h1 { font-size: clamp(1.7rem, 5.4vh, 2.5rem); margin: 6px 0 10px; }
    .wn-auth-hero p { font-size: .9rem; }
    .wn-auth-hero .wn-ball-row { margin-top: 3vh; }
    .wn-auth-hero .wn-ball { width: 38px; height: 38px; }
    .wn-auth-hero .wn-ball b { font-size: .72rem; }
    .wn-features { margin-top: 3vh; }
    .wn-feature { padding: 12px; }
    .wn-feature strong { margin-top: 6px; }
    .wn-auth-brand .wn-brand-coin { width: 46px; height: 46px; }

    .wn-auth-card { padding: 20px 24px 18px; }
    .wn-auth-card::before { left: 24px; right: 24px; }
    .wn-auth-icon { width: 44px; height: 44px; font-size: 1.1rem; border-radius: 14px; margin-bottom: 8px; }
    .wn-auth-card h2 { font-size: 1.2rem; }
    .wn-auth-card .wn-auth-sub { margin-top: 4px; font-size: .85rem; }
    .wn-auth-card .wn-perf { margin: 14px -24px; }
    .wn-auth-card { --ny: 124px; }
    .wn-auth .wn-field { margin-bottom: 12px; }
    .wn-auth .wn-label { margin-bottom: 6px; }
    body.wn .wn-auth .wn-input-wrap input[type=text],
    body.wn .wn-auth .wn-input-wrap input[type=password] { height: 42px; }
    .wn-auth .wn-divider { margin: 14px 0 10px; }
    .wn-auth .wn-secure { padding: 9px 12px; font-size: .78rem; }
    .wn-auth .wn-switch { margin-top: 12px; }
    .wn-auth .wn-copy { margin-top: 12px; }
    .wn-captcha { min-height: 44px; }
    body.wn .wn-captcha span[id] { font-size: 1.3rem !important; padding: 6px 0 !important; letter-spacing: 12px !important; }
}

/* very short screens (e.g. 1366x768 with browser bars, 150% scaling) */
@media (min-width: 992px) and (max-height: 640px) {
    .wn-auth-hero > p { display: none; }
    .wn-feature small { display: none; }
    .wn-auth-foot { display: none; }
    .wn-auth .wn-divider { display: none; }
    .wn-auth .wn-secure { margin-top: 10px; }
    .wn-auth-icon { display: none; }
    .wn-auth-card { --ny: 74px; }
}

/* =====================================================================
   SIDEBAR FIX — panels never get squeezed (jackpot ticket was clipping)
   ===================================================================== */
.wn-side-inner > * { flex-shrink: 0; }
.wn-side-jackpot strong { line-height: 1.25; padding-bottom: 2px; }
@media (max-height: 760px) { .wn-side-promo { display: none; } }

/* =====================================================================
   AUTH SHOWCASE — animated headline + draw-machine visual
   ===================================================================== */
.wn-words { perspective: 600px; }
.wn-words .w {
    display: inline-block;
    animation: wn-word .9s var(--ease) both;
}
.wn-words .w:nth-of-type(1) { animation-delay: .1s; }
.wn-words .w:nth-of-type(2) { animation-delay: .25s; }
.wn-words .wn-shine-text {
    position: relative;
    animation: wn-word .9s .45s var(--ease) both, wn-shine-move 5s 1.4s linear infinite;
    background: linear-gradient(100deg, #ffd166 0%, #fff4c9 18%, #f5a524 36%, #ff7ab8 54%, #ffd166 72%, #fff4c9 90%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 26px rgba(245, 165, 36, .45));
    padding-right: .15em;
}
.wn-words .wn-shine-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: .3em;
    bottom: -.06em;
    height: .09em;
    border-radius: 99px;
    background: linear-gradient(90deg, #ffd166, #ff7ab8, transparent);
    transform-origin: left;
    animation: wn-underline 1s 1.2s var(--ease) both;
}
.wn-words .wn-shine-text::before {
    content: "✦";
    position: absolute;
    right: -.35em;
    top: -.15em;
    font-size: .38em;
    animation: wn-star 2.2s ease-in-out infinite;
}
@keyframes wn-word { from { opacity: 0; transform: translateY(42px) rotateX(-70deg); filter: blur(8px); } to { opacity: 1; transform: none; } }
@keyframes wn-shine-move { to { background-position: -250% 0; } }
@keyframes wn-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wn-star { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.15) rotate(90deg); opacity: 1; } }

.wn-auth-hero h1.wn-words {
    font: 700 clamp(2.4rem, min(5.2vw, 8vh), 4.4rem)/1.04 var(--display);
    letter-spacing: -.03em;
    margin: 8px 0 14px;
}

/* visual composition */
.wn-auth-visual { position: relative; display: none; }
.wn-machine--xl { position: relative; width: 100%; max-width: 270px; margin: 0 auto; }
.wn-machine--xl .wn-globe .wn-ball b { font-size: .62rem; }
.wn-orbit {
    position: absolute;
    left: 50%;
    top: 42%;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 209, 102, .25);
    transform: translate(-50%, -50%);
    animation: wn-orbit-spin 30s linear infinite;
    pointer-events: none;
}
.wn-orbit.o1 { width: 118%; aspect-ratio: 1; }
.wn-orbit.o2 { width: 146%; aspect-ratio: 1; border-color: rgba(166, 107, 255, .22); animation-direction: reverse; animation-duration: 44s; }
.wn-orbit::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 14px var(--gold);
}
.wn-orbit.o2::after { background: var(--pink); box-shadow: 0 0 14px var(--pink); top: auto; bottom: -6px; }
@keyframes wn-orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.wn-float-ticket {
    position: absolute;
    left: -20%;
    bottom: -6%;
    padding: 12px 16px;
    border-radius: 16px;
    background:
        radial-gradient(160px 70px at 100% 0%, rgba(255, 209, 102, .35), transparent 70%),
        linear-gradient(135deg, #3d2500, #1d1100);
    border: 1px solid rgba(255, 209, 102, .5);
    box-shadow: 0 20px 40px -14px rgba(0,0,0,.8), 0 0 30px -10px rgba(245, 165, 36, .6);
    -webkit-mask:
        radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
    animation: wn-ticket-float 5s ease-in-out infinite;
}
.wn-ft-top { display: flex; align-items: center; gap: 6px; font-size: .6rem; letter-spacing: .24em; color: #ffe3a0; font-weight: 600; }
.wn-float-ticket strong { display: block; font: 700 1.35rem/1.2 var(--display); margin-top: 3px; }
.wn-float-ticket small { color: #e9d7a8; font-size: .7rem; }
@keyframes wn-ticket-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }

.wn-float-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 500;
    background: rgba(23, 14, 51, .85);
    border: 1px solid var(--line);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 26px -12px rgba(0,0,0,.8);
    white-space: nowrap;
}
.wn-float-chip i { color: var(--gold); }
.wn-float-chip.c1 { top: 4%; right: -6%; animation: wn-bob 4s ease-in-out infinite; }
.wn-float-chip.c2 { top: 40%; right: -12%; animation: wn-bob 4.6s .8s ease-in-out infinite; }
.wn-float-chip.c2 i { color: var(--green); }

@media (min-width: 992px) {
    .wn-auth-stage {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(200px, 36%, 360px);
        column-gap: clamp(16px, 3vw, 48px);
        align-items: center;
    }
    .wn-auth-hero { display: contents; }
    .wn-auth-stage > .wn-auth-hero > *,
    .wn-auth-hero > * { grid-column: 1; }
    .wn-auth-hero > .wn-features { grid-column: 1 / -1; }
    .wn-auth-visual { display: block; grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 10px; }
    .wn-auth-hero > p { max-width: 520px; }
}

/* =====================================================================
   AUTH FORM SIDE — spotlight, orbit rings, floating balls, trust strip
   ===================================================================== */
.wn-auth-form { isolation: isolate; }
.wn-auth-form::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(420px 320px at 50% 45%, rgba(166, 107, 255, .22), transparent 70%),
        radial-gradient(300px 200px at 50% 20%, rgba(255, 209, 102, .12), transparent 70%);
}
.wn-form-fx { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.wn-ring {
    position: absolute;
    left: 50%;
    top: 48%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(255, 209, 102, .16);
    animation: wn-orbit-spin 60s linear infinite;
}
.wn-ring.r1 { width: min(620px, 92%); aspect-ratio: 1; }
.wn-ring.r2 { width: min(820px, 130%); aspect-ratio: 1; border-color: rgba(166, 107, 255, .14); animation-direction: reverse; animation-duration: 90s; }
.wn-form-fx .wn-ball { position: absolute; width: 40px; height: 40px; opacity: .85; animation: wn-drift 9s ease-in-out infinite; }
.wn-form-fx .wn-ball b { font-size: .62rem; }
.wn-form-fx .fx1 { left: 8%; top: 14%; }
.wn-form-fx .fx2 { right: 9%; top: 22%; width: 32px; height: 32px; animation-delay: -3s; }
.wn-form-fx .fx3 { right: 7%; bottom: 16%; width: 48px; height: 48px; animation-delay: -5s; }
.wn-form-fx .fx4 { left: 10%; bottom: 20%; width: 28px; height: 28px; animation-delay: -7s; }
@keyframes wn-drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(10px, -16px) rotate(60deg); } 66% { transform: translate(-8px, 10px) rotate(-40deg); } }

.wn-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wn-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: .7rem;
    color: var(--muted);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line-soft);
}
.wn-trust i { color: var(--gold); font-size: .68rem; }

@media (min-width: 992px) and (max-height: 760px) { .wn-trust { display: none; } }
@media (min-width: 992px) and (max-height: 640px) { .wn-float-chip, .wn-orbit { display: none; } }
@media (max-width: 991px) { .wn-form-fx .wn-ball { opacity: .4; } }

/* =====================================================================
   REFERRAL PAGE
   ===================================================================== */
.wn-ref { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 20px; align-items: stretch; }
.wn-ref > .wn-card { margin-top: 0 !important; }
.wn-ref-main { overflow: hidden; }
.wn-ref-main::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 95, 180, .22), transparent 70%);
    pointer-events: none;
}
.wn-ref-intro { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.wn-ref-intro .wn-gift { width: 58px; height: 58px; margin: 0; flex: 0 0 auto; font-size: 1.4rem; border-radius: 18px; }
.wn-ref-intro h2 { font: 600 clamp(1.1rem, 1.6vw, 1.35rem)/1.25 var(--display); }
.wn-ref-intro p { color: var(--muted); font-size: .86rem; margin-top: 4px; }
.wn-field-label { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 10px; }

.wn-linkbox { margin-top: 0; padding: 8px 8px 8px 8px; gap: 10px; background: rgba(8, 4, 18, .5); border: 1.5px dashed rgba(255, 209, 102, .45); }
.wn-linkbox-ico { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 209, 102, .1); color: var(--gold); }
.wn-linkbox #p1 a span { font-weight: 500; font-size: .9rem; }

.wn-share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.wn-share-tile {
    --b: #3a2d66;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 6px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line-soft);
    color: var(--muted) !important;
    font: 500 .74rem var(--font);
    cursor: pointer;
    transition: transform .3s var(--ease), border-color .3s, background .3s, color .3s, box-shadow .3s;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.wn-share-tile::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    background: linear-gradient(0deg, color-mix(in srgb, var(--b) 30%, transparent), transparent);
    transition: height .35s var(--ease);
}
.wn-share-tile:hover { transform: translateY(-4px); color: var(--text) !important; border-color: color-mix(in srgb, var(--b) 60%, transparent); box-shadow: 0 14px 28px -16px var(--b); }
.wn-share-tile:hover::before { height: 100%; }
.wn-st-ico {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.05rem;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.55) 0 6%, transparent 30%),
        var(--b);
    box-shadow: inset -3px -4px 8px rgba(0,0,0,.3), 0 8px 16px -8px var(--b);
    transition: transform .5s var(--ease);
}
.wn-share-tile:hover .wn-st-ico { transform: rotate(-12deg) scale(1.08); }
.wn-share-tile > span:last-child { position: relative; }
.wn-share-tile.srv .wn-st-ico { background: #fff; padding: 7px; }
.wn-share-tile.srv input[type=image] { width: 100% !important; height: 100%; object-fit: contain; display: block; }
.wn-share-tile.whatsapp { --b: #25d366; }
.wn-share-tile.telegram { --b: #2aabee; }
.wn-share-tile.gmail { --b: #ea4335; }
.wn-share-tile.facebook { --b: #1877f2; }
.wn-share-tile.x { --b: #3b3b46; }
.wn-share-tile.linkedin { --b: #0a66c2; }
.wn-share-tile.reddit { --b: #ff4500; }
.wn-share-tile.sms { --b: #22c55e; }
.wn-share-tile.email { --b: #a66bff; }
.wn-share-tile.more { --b: #f5a524; }
.wn-share-tile.more .wn-st-ico { color: #2a1600; background: var(--gold-grad); }

/* QR */
.wn-qr-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wn-qr-card .wn-card-head { width: 100%; }
.wn-qr-frame {
    position: relative;
    margin: 6px auto 0;
    padding: 16px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255, 209, 102, .12), 0 24px 50px -20px rgba(245, 165, 36, .6);
    overflow: hidden;
}
.wn-qr { width: 200px; height: 200px; display: grid; place-items: center; }
.wn-qr img, .wn-qr canvas { width: 200px !important; height: 200px !important; display: block; image-rendering: pixelated; }
.wn-qr.wn-qr-missing { color: #6b5a9a; font-size: .8rem; padding: 20px; }
.wn-qr-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    padding: 6px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.25);
    object-fit: contain;
}
.wn-qr-corner { position: absolute; width: 22px; height: 22px; border: 3px solid var(--gold-2); }
.wn-qr-corner.tl { left: 6px; top: 6px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.wn-qr-corner.tr { right: 6px; top: 6px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.wn-qr-corner.bl { left: 6px; bottom: 6px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.wn-qr-corner.br { right: 6px; bottom: 6px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.wn-qr-scan {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
    box-shadow: 0 0 12px var(--gold-2);
    animation: wn-scan 2.6s ease-in-out infinite;
}
@keyframes wn-scan { 0%, 100% { top: 12px; opacity: .2; } 50% { top: calc(100% - 14px); opacity: 1; } }
.wn-qr-help { color: var(--muted); font-size: .8rem; margin: 14px auto 0; max-width: 260px; }
.wn-qr-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }

/* =====================================================================
   PROFILE PAGE
   ===================================================================== */
.wn-profile-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.wn-player {
    position: relative;
    overflow: hidden;
    padding: 0 20px 20px;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(170deg, rgba(39, 26, 84, .85), rgba(23, 14, 51, .92));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.wn-player-banner {
    position: relative;
    height: 96px;
    margin: 0 -20px;
    background:
        radial-gradient(200px 120px at 80% 0%, rgba(255, 209, 102, .45), transparent 70%),
        radial-gradient(220px 140px at 0% 100%, rgba(255, 95, 180, .4), transparent 70%),
        linear-gradient(135deg, #3b1d7a, #24104f);
    overflow: hidden;
}
.wn-player-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(from 200deg at 70% -20%, transparent 0 10deg, rgba(255, 209, 102, .12) 10deg 18deg, transparent 18deg 30deg, rgba(255, 209, 102, .08) 30deg 36deg, transparent 36deg);
}
.wn-player-banner .wn-ball { position: absolute; width: 30px; height: 30px; animation: wn-drift 8s ease-in-out infinite; }
.wn-player-banner .wn-ball b { font-size: .5rem; }
.wn-player-banner .wn-ball:nth-child(1) { left: 14%; top: 18%; }
.wn-player-banner .wn-ball:nth-child(2) { right: 14%; top: 26%; width: 24px; height: 24px; animation-delay: -3s; }
.wn-player-banner .wn-ball:nth-child(3) { left: 70%; top: 56%; width: 20px; height: 20px; animation-delay: -5s; }
.wn-avatar-wrap { position: relative; width: 92px; margin: -46px auto 0; }
.wn-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 1.9rem var(--display);
    color: #2a1600;
    background: var(--gold-grad);
    box-shadow: 0 0 0 5px var(--surface), 0 0 0 7px rgba(255, 209, 102, .5), 0 18px 34px -12px rgba(245, 165, 36, .8);
    position: relative;
}
.wn-avatar::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 209, 102, .45);
    animation: wn-orbit-spin 18s linear infinite;
}
.wn-avatar-badge {
    position: absolute;
    right: -2px;
    bottom: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .7rem;
    color: #fff;
    background: linear-gradient(135deg, #c9a6ff, #7c3aed);
    box-shadow: 0 0 0 3px var(--surface);
}
.wn-player-name { margin-top: 14px; font: 600 1.15rem/1.25 var(--display); word-break: break-word; }
.wn-player-handle { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.wn-player-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wn-player .wn-perf { margin: 18px -20px 10px; }
.wn-player-links { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.wn-player-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--muted) !important;
    font-size: .86rem;
    transition: background .25s, color .25s, transform .25s var(--ease);
}
.wn-player-links a i:first-child { width: 18px; text-align: center; color: var(--gold); }
.wn-player-links a i:last-child { margin-left: auto; font-size: .6rem; opacity: .6; }
.wn-player-links a:hover { background: rgba(255,255,255,.05); color: var(--text) !important; transform: translateX(3px); }

.wn-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
body.wn .wn-input-wrap input[readonly] { color: #e8e1ff; cursor: default; }
body.wn .wn-input-wrap:has(input[readonly]) { background: rgba(255,255,255,.025); }

/* =====================================================================
   CHANGE PASSWORD PAGE
   ===================================================================== */
.wn-pwd-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.wn-pwd-grid > .wn-card, .wn-pwd-grid > .wn-stack { margin-top: 0 !important; }
.wn-pwd-hero { position: relative; height: 110px; display: grid; place-items: center; margin-bottom: 8px; }
.wn-lock {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    color: #2a1600;
    background: var(--gold-grad);
    box-shadow: 0 0 0 8px rgba(255, 209, 102, .1), 0 20px 40px -14px rgba(245, 165, 36, .9);
    animation: wn-bob 3s ease-in-out infinite;
}
.wn-pwd-hero .wn-ball { position: absolute; width: 26px; height: 26px; top: 50%; left: 50%; margin: -13px 0 0 -13px; animation: wn-orbit-ball 6s linear infinite; }
.wn-pwd-hero .wn-ball b { font-size: .55rem; }
.wn-pwd-hero .s2 { animation-delay: -2s; }
.wn-pwd-hero .s3 { animation-delay: -4s; }
@keyframes wn-orbit-ball { from { transform: rotate(0) translateX(70px) rotate(0); } to { transform: rotate(360deg) translateX(70px) rotate(-360deg); } }

.wn-meter-label { letter-spacing: .04em; text-transform: none; font-weight: 500; color: var(--dim); }
.wn-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.wn-meter span { height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); transition: background .3s; }
.wn-meter[data-level="0"] span:nth-child(1) { background: #ff4d6d; }
.wn-meter[data-level="1"] span:nth-child(-n+1) { background: #ff4d6d; }
.wn-meter[data-level="2"] span:nth-child(-n+2) { background: #ff8a3d; }
.wn-meter[data-level="3"] span:nth-child(-n+3) { background: #ffd166; }
.wn-meter[data-level="4"] span { background: #22d3a0; box-shadow: 0 0 8px rgba(34, 211, 160, .6); }
.wn-match { min-height: 18px; margin-top: 6px; font-size: .76rem; font-weight: 500; }
.wn-match.ok { color: #8ff5d6; }
.wn-match.bad { color: #ff8fa3; }

.wn-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wn-tips li { display: flex; gap: 14px; align-items: flex-start; }
.wn-tips .wn-ball { width: 32px; height: 32px; }
.wn-tips .wn-ball b { font-size: .6rem; }
.wn-tips strong { display: block; font-weight: 600; font-size: .9rem; }
.wn-tips small { color: var(--muted); font-size: .8rem; }
.wn-pwd-grid .wn-cta-strip { margin-top: 0; }

/* responsive */
@media (max-width: 1100px) {
    .wn-ref { grid-template-columns: 1fr; }
    .wn-profile-grid { grid-template-columns: 1fr; }
    .wn-player { max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 991px) {
    .wn-pwd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .wn-form-grid { grid-template-columns: 1fr; }
    .wn-share-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .wn-share-tile { padding: 10px 2px 9px; font-size: .64rem; }
    .wn-st-ico { width: 36px; height: 36px; font-size: .9rem; }
    .wn-ref-intro .wn-gift { width: 48px; height: 48px; font-size: 1.1rem; }
    .wn-linkbox { flex-wrap: wrap; }
    .wn-linkbox #p1 { flex: 1 1 calc(100% - 56px); }
}
.wn-gift {
    display: grid;
    place-items: center;
    color: #2a1600;
    background: var(--gold-grad);
    box-shadow: 0 16px 32px -12px var(--gold-2);
    animation: wn-bob 3s ease-in-out infinite;
}
.wn-steps > .wn-card { margin-top: 0 !important; }
.wn-qr-help { margin-top: 16px; }
.wn-player-name { margin-top: 20px; }
.wn-player-name { margin-top: 26px; }

/* =====================================================================
   ORBITING BALLS — balls ride a visible ring like moons around a sun
   ===================================================================== */
.wn-arm { position: absolute; inset: 0; pointer-events: none; transform: rotate(var(--t, 0deg)); font-style: normal; }
.wn-arm[data-a="0"] { --t: 0deg; }
.wn-arm[data-a="45"] { --t: 45deg; }
.wn-arm[data-a="60"] { --t: 60deg; }
.wn-arm[data-a="90"] { --t: 90deg; }
.wn-arm[data-a="165"] { --t: 165deg; }
.wn-arm[data-a="180"] { --t: 180deg; }
.wn-arm[data-a="240"] { --t: 240deg; }
.wn-arm[data-a="270"] { --t: 270deg; }
.wn-arm[data-a="285"] { --t: 285deg; }
.wn-arm > .wn-ball {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--bs, 36px);
    height: var(--bs, 36px);
    animation: wn-counter var(--dur, 40s) linear infinite;
    animation-direction: var(--dirn, normal);
}
.wn-arm > .wn-ball b { font-size: calc(var(--bs, 36px) * .26); }
@keyframes wn-counter {
    from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--t, 0deg))); }
    to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--t, 0deg) - 360deg)); }
}

/* form side (login): two visible orbits around the card */
.wn-form-fx .wn-ring {
    border: 1px solid rgba(255, 209, 102, .2);
    box-shadow: 0 0 30px rgba(166, 107, 255, .08) inset;
    animation: wn-orbit-spin var(--dur) linear infinite;
    animation-direction: var(--dirn, normal);
}
.wn-form-fx .wn-ring.r1 { --dur: 36s; --bs: 40px; width: min(600px, 96%); }
.wn-form-fx .wn-ring.r2 { --dur: 54s; --bs: 30px; --dirn: reverse; width: min(780px, 128%); border-color: rgba(166, 107, 255, .2); }
.wn-form-fx .wn-ring > .wn-arm > .wn-ball { opacity: 1; }
.wn-form-fx > .wn-ball { display: none; }
.wn-sun {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 520px;
    height: 520px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 209, 102, .2), rgba(245, 165, 36, .06) 40%, transparent 68%);
    animation: wn-sun-pulse 5s ease-in-out infinite;
}
@keyframes wn-sun-pulse { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.95); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }

/* showcase (login): moons around the draw machine */
.wn-orbit::after { display: none; }
.wn-orbit { animation: wn-orbit-spin var(--dur) linear infinite; animation-direction: var(--dirn, normal); border-style: solid; }
.wn-orbit.o1 { --dur: 22s; --bs: 30px; }
.wn-orbit.o2 { --dur: 34s; --bs: 24px; --dirn: reverse; }

@media (max-width: 991px) {
    .wn-form-fx .wn-ring.r1 { width: 112%; }
    .wn-form-fx .wn-ring.r2 { display: none; }
}

/* =====================================================================
   REGISTER — "Golden Ticket" layout (distinct from login)
   ===================================================================== */
body.wn.wn-reg-page::before {
    background:
        radial-gradient(900px 600px at 0% 0%, rgba(16, 185, 129, .22), transparent 60%),
        radial-gradient(800px 600px at 100% 100%, rgba(245, 165, 36, .2), transparent 60%),
        radial-gradient(700px 500px at 100% 0%, rgba(59, 130, 246, .14), transparent 60%),
        linear-gradient(160deg, #04161a 0%, #0a0f24 50%, #120a1f 100%);
}
.wn-reg { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding: 18px clamp(14px, 3vw, 40px); }
.wn-reg-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; z-index: 2; }
.wn-reg-top .wn-brand-coin { width: 44px; height: 44px; }
.wn-reg-signin {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--muted) !important;
    font-size: .82rem;
    backdrop-filter: blur(8px);
    transition: border-color .3s, background .3s;
}
.wn-reg-signin b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--gold-grad);
    color: #2a1600;
    font-weight: 600;
}
.wn-reg-signin:hover { border-color: rgba(255, 209, 102, .5); background: rgba(255, 209, 102, .07); }
.wn-reg-signin:hover b i { transform: translateX(3px); }
.wn-reg-signin b i { transition: transform .3s var(--ease); }

.wn-reg-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 0; position: relative; z-index: 1; }

/* the ticket */
.wn-regticket {
    --stub: 340px;
    position: relative;
    width: 100%;
    max-width: 1020px;
    display: grid;
    grid-template-columns: var(--stub) minmax(0, 1fr);
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(20, 30, 58, .96), rgba(14, 12, 36, .98));
    box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255, 209, 102, .22);
    -webkit-mask:
        radial-gradient(circle 16px at var(--stub) 0, transparent 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 16px at var(--stub) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle 16px at var(--stub) 0, transparent 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 16px at var(--stub) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
    animation: wn-ticket-in .9s var(--ease) both;
}
@keyframes wn-ticket-in { from { opacity: 0; transform: translateY(30px) rotate(-1.5deg) scale(.97); } to { opacity: 1; transform: none; } }

/* stub */
.wn-stub {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 26px 28px 22px;
    background:
        radial-gradient(360px 260px at 0% 0%, rgba(255, 241, 184, .35), transparent 70%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 12px),
        linear-gradient(160deg, #6b4300 0%, #3d2500 50%, #241500 100%);
    border-right: 2px dashed rgba(255, 209, 102, .45);
    color: #fff3d1;
}
.wn-stub::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 241, 184, .2) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: wn-shine 5s ease-in-out infinite;
    pointer-events: none;
}
.wn-stub-admit { display: flex; justify-content: space-between; gap: 10px; font-size: .62rem; letter-spacing: .3em; font-weight: 600; color: #ffe3a0; padding-bottom: 12px; border-bottom: 1px dashed rgba(255, 209, 102, .35); }
.wn-stub h1.wn-words { font: 700 clamp(1.8rem, min(3.2vw, 6.2vh), 2.7rem)/1.06 var(--display); letter-spacing: -.02em; margin: 18px 0 8px; color: #fff; }
.wn-stub-sub { color: #f1dfb3; font-size: .84rem; }
.wn-stub-steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wn-stub-steps li { display: flex; align-items: center; gap: 12px; }
.wn-stub-steps .wn-ball { width: 32px; height: 32px; }
.wn-stub-steps .wn-ball b { font-size: .62rem; }
.wn-stub-steps strong { display: block; font-size: .88rem; font-weight: 600; color: #fff; }
.wn-stub-steps small { color: #e3cf9d; font-size: .72rem; }
.wn-stub-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.wn-barcode {
    display: block;
    height: 38px;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg,
        #ffe7a3 0 2px, transparent 2px 4px, #ffe7a3 4px 5px, transparent 5px 8px,
        #ffe7a3 8px 11px, transparent 11px 12px, #ffe7a3 12px 13px, transparent 13px 17px);
    opacity: .75;
}
.wn-serial { font: 500 .66rem 'Courier New', monospace; letter-spacing: .2em; color: #e3cf9d; }

/* form side */
.wn-reg-form { position: relative; padding: 26px 30px 22px; }
.wn-reg-form::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, .2), transparent 70%);
    pointer-events: none;
}
.wn-reg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.wn-reg-badge {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #032a1e;
    background: linear-gradient(135deg, #8ff5d6, #10b981);
    box-shadow: 0 12px 26px -10px #10b981;
    animation: wn-bob 3s ease-in-out infinite;
}
.wn-reg-head h2 { font: 600 1.3rem/1.2 var(--display); }
.wn-reg-head p { color: var(--muted); font-size: .84rem; margin-top: 3px; }
.wn-reg-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.wn-reg-fields > * { grid-column: 1 / -1; }
.wn-reg-fields > .wn-half { grid-column: auto; }
.wn-reg .wn-field { margin-bottom: 14px; }
.wn-reg .wn-input-wrap:focus-within { border-color: rgba(34, 211, 160, .7); box-shadow: 0 0 0 4px rgba(34, 211, 160, .12); }
.wn-reg .wn-input-icon { color: #5eead4; }
.wn-reg .wn-btn-pair { margin-top: 4px; }
.wn-reg .wn-switch { margin-top: 14px; }
.wn-reg > .wn-copy { position: relative; z-index: 1; margin-top: 4px; }

/* falling balls */
.wn-rain { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.wn-rain .wn-ball { position: absolute; top: -60px; width: 30px; height: 30px; opacity: .35; animation: wn-fall linear infinite; }
.wn-rain .wn-ball b { font-size: .55rem; }
.wn-rain .wn-ball:nth-child(1) { left: 4%;  animation-duration: 14s; animation-delay: -2s; }
.wn-rain .wn-ball:nth-child(2) { left: 14%; animation-duration: 18s; animation-delay: -9s; width: 22px; height: 22px; }
.wn-rain .wn-ball:nth-child(3) { left: 26%; animation-duration: 16s; animation-delay: -5s; }
.wn-rain .wn-ball:nth-child(4) { left: 38%; animation-duration: 20s; animation-delay: -13s; width: 24px; height: 24px; }
.wn-rain .wn-ball:nth-child(5) { left: 52%; animation-duration: 15s; animation-delay: -7s; }
.wn-rain .wn-ball:nth-child(6) { left: 64%; animation-duration: 19s; animation-delay: -1s; width: 36px; height: 36px; }
.wn-rain .wn-ball:nth-child(7) { left: 74%; animation-duration: 17s; animation-delay: -11s; width: 22px; height: 22px; }
.wn-rain .wn-ball:nth-child(8) { left: 84%; animation-duration: 21s; animation-delay: -4s; }
.wn-rain .wn-ball:nth-child(9) { left: 92%; animation-duration: 16s; animation-delay: -15s; width: 26px; height: 26px; }
.wn-rain .wn-ball:nth-child(10) { left: 46%; animation-duration: 23s; animation-delay: -18s; width: 20px; height: 20px; }
@keyframes wn-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(calc(100vh + 120px)) rotate(540deg); } }

/* desktop: one screen, no page scroll */
@media (min-width: 992px) {
    .wn-reg { height: 100vh; height: 100dvh; min-height: 540px; overflow: hidden; }
}
@media (min-width: 992px) and (max-height: 760px) {
    .wn-reg { padding-top: 12px; padding-bottom: 10px; }
    .wn-regticket { --stub: 310px; }
    .wn-stub { padding: 20px 22px 16px; }
    .wn-stub h1.wn-words { margin: 12px 0 6px; }
    .wn-stub-steps { margin-top: 12px; gap: 8px; }
    .wn-reg-form { padding: 18px 24px 16px; }
    .wn-reg-head { margin-bottom: 12px; padding-bottom: 10px; }
    .wn-reg-badge { width: 40px; height: 40px; font-size: 1rem; }
    .wn-reg-head h2 { font-size: 1.15rem; }
    .wn-reg .wn-field { margin-bottom: 10px; }
    .wn-reg .wn-label { margin-bottom: 5px; }
    body.wn .wn-reg .wn-input-wrap input[type=text] { height: 40px; }
    .wn-reg .wn-captcha { min-height: 40px; }
    body.wn .wn-reg .wn-captcha span[id] { font-size: 1.2rem !important; padding: 4px 0 !important; }
    .wn-reg .wn-btn { min-height: 40px; }
    .wn-reg .wn-switch { margin-top: 10px; }
    .wn-barcode { height: 28px; }
}
@media (min-width: 992px) and (max-height: 620px) {
    .wn-stub-sub, .wn-stub-steps small { display: none; }
    .wn-reg > .wn-copy { display: none; }
}

/* tablet & phone: ticket stacks vertically */
@media (max-width: 991px) {
    .wn-regticket { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
    .wn-stub { border-right: 0; border-bottom: 2px dashed rgba(255, 209, 102, .45); border-radius: 28px 28px 0 0; }
    .wn-stub-steps { flex-direction: row; flex-wrap: wrap; gap: 10px 16px; }
    .wn-stub-foot { flex-direction: row; align-items: center; justify-content: space-between; }
    .wn-barcode { width: 140px; height: 26px; }
}
@media (max-width: 575px) {
    .wn-reg-top .wn-reg-signin > span { display: none; }
    .wn-reg-top .wn-brand-tag { display: none; }
    .wn-reg-fields { grid-template-columns: 1fr; }
    .wn-reg-fields > .wn-half { grid-column: 1 / -1; }
    .wn-stub { padding: 20px 18px 16px; }
    .wn-reg-form { padding: 20px 18px 18px; }
    .wn-stub-steps li { flex: 1 1 100%; }
    .wn-serial { display: none; }
    .wn-barcode { width: 100%; }
}
.wn-reg-page .wn-balls { display: none; }

/* referral: message composer + perks */
.wn-fl-hint { letter-spacing: .04em; text-transform: none; color: var(--dim); font-weight: 400; margin-left: 6px; }
.wn-msg {
    border-radius: 16px;
    background: rgba(8, 4, 18, .5);
    border: 1.5px solid rgba(255,255,255,.08);
    transition: border-color .25s, box-shadow .25s;
    overflow: hidden;
}
.wn-msg:focus-within { border-color: rgba(255, 209, 102, .6); box-shadow: 0 0 0 4px rgba(255, 209, 102, .1); }
.wn-msg-text {
    display: block;
    width: 100%;
    min-height: 130px;
    resize: vertical;
    padding: 14px 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: 400 .88rem/1.6 var(--font);
}
.wn-msg-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px dashed rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.wn-msg-count { margin-right: auto; font-size: .7rem; color: var(--dim); }
.wn-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wn-perk {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line-soft);
    transition: transform .3s var(--ease), border-color .3s;
}
.wn-perk:hover { transform: translateY(-4px); border-color: rgba(255, 209, 102, .35); }
.wn-perk i { color: var(--gold); font-size: 1.1rem; }
.wn-perk strong { display: block; margin-top: 10px; font-weight: 600; font-size: .9rem; }
.wn-perk small { color: var(--muted); font-size: .78rem; }
.wn-share-tile.whatsapp .wn-st-ico, .wn-share-tile.telegram .wn-st-ico { font-size: 1.3rem; }
.wn-share-tile.gmail .wn-st-ico { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55) 0 6%, transparent 30%), linear-gradient(135deg, #ea4335, #fbbc05); }
@media (max-width: 991px) { .wn-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .wn-msg-bar { flex-wrap: wrap; } .wn-msg-count { width: 100%; } }

/* profile: cleaner avatar header */
.wn-player-banner { height: 112px; }
.wn-player-banner .wn-ball:nth-child(1) { left: 8%; top: 14%; }
.wn-player-banner .wn-ball:nth-child(2) { right: 9%; left: auto; top: 16%; }
.wn-player-banner .wn-ball:nth-child(3) { left: 20%; top: 58%; }
.wn-avatar-wrap { width: 84px; margin: -42px auto 0; }
.wn-avatar { width: 84px; height: 84px; font-size: 1.7rem; box-shadow: 0 0 0 4px #1d1340, 0 0 0 6px rgba(255, 209, 102, .55), 0 16px 30px -12px rgba(245, 165, 36, .8); }
.wn-avatar::after { inset: -12px; border-color: rgba(255, 209, 102, .35); }
.wn-avatar-badge { width: 26px; height: 26px; right: -4px; bottom: -2px; box-shadow: 0 0 0 3px #1d1340; }
.wn-player-name { margin-top: 24px; }

/* change password: space between tips and CTA */
.wn-pwd-grid .wn-stack > * + * { margin-top: 20px !important; }
.wn-qr-card .wn-qr-frame { margin-top: auto; } .wn-qr-card .wn-qr-actions { margin-bottom: auto; }
.wn-avatar::after { inset: -9px; } .wn-player-name { margin-top: 30px; }

/* =====================================================================
   FIXES — login headline, solo hero, profile name
   ===================================================================== */
/* login: hero on its own (visual removed) */
@media (min-width: 992px) {
    .wn-auth-stage--solo { display: block; }
    .wn-auth-stage--solo .wn-auth-hero { display: block; max-width: 620px; }
}

/* headline: fully visible gradient (no near-white stops) + breathing room */
.wn-words .wn-shine-text {
    background: linear-gradient(100deg, #ffc23d 0%, #ff9f1c 25%, #ff6fae 50%, #ffb347 75%, #ffc23d 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding: 0 .18em .08em 0;
    filter: drop-shadow(0 6px 22px rgba(255, 159, 28, .35));
}
@keyframes wn-shine-move { to { background-position: -200% 0; } }
.wn-auth-hero h1.wn-words { line-height: 1.14; margin: 10px 0 26px; }
.wn-stub h1.wn-words { line-height: 1.14; margin-bottom: 16px; }
.wn-words .wn-shine-text::after { bottom: -.12em; }
.wn-auth-hero > .wn-ball-row { margin-top: 24px; }
.wn-auth-hero > .wn-features { margin-top: 26px; }
@media (min-width: 992px) and (max-height: 760px) {
    .wn-auth-hero h1.wn-words { margin-bottom: 18px; }
    .wn-auth-hero > .wn-ball-row { margin-top: 16px; }
    .wn-auth-hero > .wn-features { margin-top: 18px; }
}

/* profile: avatar block reserves its own space so the name never overlaps */
.wn-avatar-wrap { width: 84px; height: 84px; margin: -42px auto 0; position: relative; z-index: 1; }
.wn-player-name {
    position: relative;
    z-index: 2;
    margin-top: 26px !important;
    line-height: 1.3;
    font-size: 1.1rem;
}
.wn-player-handle { position: relative; z-index: 2; }

/* =====================================================================
   DEPOSIT / WITHDRAW
   ===================================================================== */
.wn-money-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.wn-money-grid > .wn-card, .wn-money-grid > .wn-stack { margin-top: 0 !important; }
.wn-money-grid .wn-stack > * + * { margin-top: 20px !important; }
.wn-money-card .wn-btn--block { margin-top: 6px; }

/* big amount input */
.wn-amount {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 8px;
    border-radius: 18px;
    background: rgba(8, 4, 18, .55);
    border: 1.5px solid rgba(255, 209, 102, .3);
    transition: border-color .25s, box-shadow .25s;
}
.wn-amount:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 209, 102, .12), 0 16px 34px -18px rgba(245, 165, 36, .7); }
.wn-amount-cur {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #2a1600;
    background: var(--gold-grad);
    font-size: 1rem;
}
body.wn .wn-amount input[type=text] {
    flex: 1;
    min-width: 0;
    height: 56px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: 600 1.7rem var(--display);
    letter-spacing: -.01em;
}
.wn-amount-unit { font-weight: 600; color: var(--gold); letter-spacing: .12em; font-size: .8rem; }
.wn-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wn-quick button {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 209, 102, .3);
    background: rgba(255, 209, 102, .06);
    color: #ffe3a0;
    font: 500 .8rem var(--font);
    cursor: pointer;
    transition: background .2s, transform .2s var(--ease), border-color .2s;
}
.wn-quick button:hover { transform: translateY(-2px); border-color: var(--gold); }
.wn-quick button.on { background: var(--gold-grad); color: #2a1600; border-color: transparent; }
.wn-input-money input[type=text] { font-weight: 600 !important; color: #8ff5d6 !important; }

/* balance hero (withdraw) */
.wn-balance-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border-radius: 18px;
    background:
        radial-gradient(240px 120px at 100% 0%, rgba(34, 211, 160, .25), transparent 70%),
        linear-gradient(135deg, rgba(16, 185, 129, .14), rgba(39, 26, 84, .4));
    border: 1px solid rgba(34, 211, 160, .3);
}
.wn-bh-ico { width: 50px; height: 50px; flex: 0 0 auto; border-radius: 16px; display: grid; place-items: center; font-size: 1.2rem; color: #032a1e; background: linear-gradient(135deg, #8ff5d6, #10b981); box-shadow: 0 12px 26px -10px #10b981; }
.wn-bh-body { flex: 1; min-width: 0; }
.wn-bh-body .wn-label { margin-bottom: 2px; }
.wn-bh-val { display: flex; align-items: baseline; gap: 8px; }
body.wn .wn-bh-val input[type=text] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font: 600 1.7rem/1.2 var(--display);
    cursor: default;
}
.wn-bh-val span { color: #8ff5d6; font-weight: 600; font-size: .8rem; letter-spacing: .1em; }

/* OTP row */
.wn-otp { margin-bottom: 16px; }
.wn-otp-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.wn-otp-row .wn-btn { min-height: 46px; font-size: .74rem; padding: 0 16px; }

/* payment card (deposit) */
.wn-qr-hidden { display: none; }
.wn-pay-card { border-color: rgba(255, 209, 102, .4); animation: wn-rise .6s var(--ease) both; }
.wn-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 77, 109, .12);
    border: 1px solid rgba(255, 77, 109, .4);
    color: #ffc2cd;
    font: 600 .9rem var(--display);
}
.wn-timer-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; }
.wn-timer-bar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #22d3a0, #ffd166, #ff4d6d); transform-origin: left; animation: wn-deplete 300s linear forwards; }
@keyframes wn-deplete { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.wn-pay-sub { color: var(--muted); font-size: .76rem; margin-top: 8px; }
.wn-dep-qr {
    position: relative;
    width: fit-content;
    margin: 16px auto 0;
    padding: 14px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255, 209, 102, .12), 0 24px 50px -20px rgba(245, 165, 36, .6);
    overflow: hidden;
    min-width: 120px;
    min-height: 120px;
}
.wn-dep-qr img { width: 190px !important; height: 190px !important; display: block; image-rendering: pixelated; }
.wn-addrbox .adrrs {
    flex: 1;
    min-width: 0;
    font: 500 .82rem 'Courier New', monospace;
    color: #fff;
    word-break: break-all;
}
.cpyd { display: block; min-height: 16px; margin-top: 4px; font-size: .74rem; color: #8ff5d6; text-align: right; }
.wn-warn {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 138, 61, .1);
    border: 1px solid rgba(255, 138, 61, .35);
    color: #ffd2b3;
    font-size: .8rem;
}
.wn-warn i { color: var(--orange); margin-top: 2px; }

/* withdrawal slip */
.wn-wd-ticket {
    --ny: 46%;
    position: relative;
    overflow: hidden;
    padding: 22px 22px 18px;
    border-radius: 24px;
    background:
        radial-gradient(260px 140px at 100% 0%, rgba(255, 241, 184, .3), transparent 70%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 12px),
        linear-gradient(160deg, #5c3a00, #2d1b00 60%, #1e1200);
    border: 1px solid rgba(255, 209, 102, .5);
    color: #fff3d1;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
    -webkit-mask:
        radial-gradient(circle 12px at 0 var(--ny), transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 12px at 100% var(--ny), transparent 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 12px at 0 var(--ny), transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 12px at 100% var(--ny), transparent 98%, #000) right / 51% 100% no-repeat;
}
.wn-wd-ticket::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 241, 184, .16) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: wn-shine 5s ease-in-out infinite;
    pointer-events: none;
}
.wn-wd-top { display: flex; justify-content: space-between; align-items: center; font-size: .62rem; letter-spacing: .3em; font-weight: 600; color: #ffe3a0; }
.wn-wd-top i { font-size: 1rem; color: var(--gold); }
.wn-wd-label { margin-top: 16px; font-size: .74rem; color: #e3cf9d; }
.wn-wd-amount { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.wn-wd-amount span { font: 700 2.2rem/1.1 var(--display); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wn-wd-amount em { font-style: normal; color: #ffe3a0; font-weight: 600; letter-spacing: .1em; font-size: .8rem; }
.wn-wd-ticket .wn-perf { margin: 16px -22px; border-top-color: rgba(255, 209, 102, .4); }
.wn-wd-ticket .wn-row { border-bottom-color: rgba(255, 209, 102, .15); }
.wn-wd-ticket .wn-row > span { color: #e3cf9d; }
.wn-wd-ticket .wn-row strong { color: #fff; }
.wn-wd-addr { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); }
.wn-wd-addr small { display: block; font-size: .62rem; letter-spacing: .2em; color: #e3cf9d; text-transform: uppercase; }
.wn-wd-addr span { display: block; margin-top: 3px; font: 500 .78rem 'Courier New', monospace; word-break: break-all; color: #fff; }

/* table helpers */
body.wn table.gridview .wn-hash { font: 500 .78rem 'Courier New', monospace; color: var(--muted); max-width: 260px; word-break: break-all; }
body.wn table.gridview .wn-status { font-weight: 600; color: var(--gold); }
.wn-tips .wn-ball b i { font-size: .55rem; }

@media (max-width: 1100px) { .wn-money-grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
    .wn-otp-row { grid-template-columns: 1fr; }
    body.wn .wn-amount input[type=text] { font-size: 1.4rem; height: 50px; }
    .wn-bh-val input[type=text] { font-size: 1.4rem !important; }
}
@media (max-width: 1100px) { .wn-money-grid { grid-template-columns: minmax(0, 1fr); } }
body.wn .wn-amount input[type=text], body.wn .wn-bh-val input[type=text] { width: 100%; flex: 1 1 0; min-width: 0; }
.wn-money-grid > * { min-width: 0; }