/* The win screens: the jobs reveal, the application's progress and the paywall
   (founder, 9 October: "needs to feel like gambling ... needs to be a dream").
   Vantum blue ground, gold for wins and the next move, white cards. Rules:
   nothing under 15px, tap targets 48px and up, headings 700 at most, no purple,
   no emoji (inline SVG icons), motion off under prefers-reduced-motion (app.css):
   every animation here ends in the plain visible state, so without motion or
   without the script the page reads exactly the same. */
:root{--win-ground:#1431b8;--win-deep:#0d2591;--win-light:#2f52e8;--gold:#ffcf3d;--gold-deep:#e8b100;--gold-ink:#0b1d73}

/* The deep blue ground (theme 'win') */
body.win{background:var(--win-deep)}
.win .shell{background:radial-gradient(130% 70% at 50% 0%,#2a4ee6 0%,var(--win-ground) 55%,var(--win-deep) 100%);color:#fff;overflow-x:hidden;overflow-x:clip}
.win .top-credits,.win .top-link,.win .top-back{color:#fff}
.win .note{color:#dfe6ff}
.win .error{color:var(--ink)}

/* Gold: the next move. A real button with depth, like a machine's big button. */
.btn.gold,.win .job[data-top] .job-apply,.apply-topup .topup-main{position:relative;overflow:hidden;background:var(--gold);color:var(--gold-ink);box-shadow:0 5px 0 var(--gold-deep),0 12px 26px #06105a59;font-weight:700}
.btn.gold:hover,.win .job[data-top] .job-apply:hover,.apply-topup .topup-main:hover{background:#ffd75c}
.btn.gold:active,.win .job[data-top] .job-apply:active,.apply-topup .topup-main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-deep),0 6px 14px #06105a40}
.btn.gold::after,.win .job[data-top] .job-apply::after,.apply-topup .topup-main::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,#fff0,#ffffff8c,#fff0);transform:translateX(-150%) skewX(-20deg);animation:win-shine 3.4s ease-in-out 1.6s infinite;pointer-events:none;will-change:transform}
.ghost-light{background:#ffffff1f;color:#fff}
.ghost-light:active{background:#ffffff33}

/* The hero: the count, huge and gold */
.win-page{display:flex;flex-direction:column;gap:22px}
.win-hero{position:relative;text-align:center;padding:4px 0 6px;isolation:isolate}
.win-rays{position:absolute;left:50%;top:110px;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:-1;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffffff17 0 8deg,#fff0 8deg 22deg);-webkit-mask:radial-gradient(circle,#000 0,#000 22%,#0000 66%);mask:radial-gradient(circle,#000 0,#000 22%,#0000 66%);animation:win-spin 60s linear infinite;pointer-events:none}
.win-sound{position:absolute;right:0;top:58px;z-index:1;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#ffffff1f;color:#fff;cursor:pointer}
.win-sound .icon{width:22px;height:22px}
.win-sound .icon-on,.win-sound[aria-pressed=true] .icon-off{display:none}
.win-sound[aria-pressed=true] .icon-on{display:block}
.win-sound[aria-pressed=true]{background:var(--gold);color:var(--gold-ink)}
.win-title{display:flex;flex-direction:column;align-items:center;line-height:1}
.win-small{font-size:23px;font-weight:600;letter-spacing:-.01em;color:#e6ebff}
.win-count{display:block;margin:2px 0 -4px;font-size:clamp(112px,36vw,156px);line-height:.92;font-weight:700;font-stretch:78%;letter-spacing:-.05em;color:var(--gold);text-shadow:0 6px 0 var(--gold-ink),0 0 46px #ffcf3d59}
.win-count.bump{animation:win-bump .26s ease-out}
.win-word{display:block;font-size:40px;font-weight:700;font-stretch:84%;letter-spacing:-.025em}
.win-sub{max-width:31ch;margin:12px auto 0;font-size:18px;line-height:1.4;color:#e6ebff}
.win-only{display:flex;justify-content:center;align-items:flex-start;gap:8px;max-width:32ch;margin:12px auto 0;font-size:16px;line-height:1.4;font-weight:600;color:var(--gold);text-align:left}
.win-only .icon{width:20px;height:20px;margin-top:1px}
.win-live{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px;font-size:16px;font-weight:600;color:#fff}
.win-live .icon{width:20px;height:20px;color:var(--gold)}
.win-live .num{font-size:19px;font-weight:700;color:var(--gold)}

/* The brag picture: the button, and the sheet win.js opens */
.brag-row{display:flex;flex-direction:column;gap:10px}
.brag-btn{background:#fff;color:var(--blue);box-shadow:0 10px 24px #06105a4d}
.brag-btn:active{background:#eef1ff}
.brag-note{font-size:15px;line-height:1.45;color:#dfe6ff;text-align:center}
.brag-sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:#050c3cb8}
.brag-panel{width:100%;max-width:520px;max-height:100%;overflow:auto;padding:16px 20px calc(20px + env(safe-area-inset-bottom));background:#fff;color:var(--ink);border-radius:22px 22px 0 0;animation:win-up .24s ease-out both}
.brag-panel>*+*{margin-top:12px}
.brag-panel h2{font-size:24px;line-height:1.15;font-weight:700;letter-spacing:-.02em;text-align:center}
.brag-img{display:block;width:min(100%,280px);aspect-ratio:4/5;margin:0 auto;border-radius:14px;background:var(--win-ground);box-shadow:0 14px 34px #06105a47}
.brag-panel .note{color:var(--muted);text-align:center}

/* The confetti layer (win.js) */
.win-confetti{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:60}

/* Countdowns tick in win.js; the server writes the first value */
[data-until],[data-ends]{font-variant-numeric:tabular-nums}

@keyframes win-spin{to{transform:rotate(360deg)}}
@keyframes win-shine{0%{transform:translateX(-150%) skewX(-20deg)}38%,100%{transform:translateX(330%) skewX(-20deg)}}
@keyframes win-bump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes win-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes win-pop{0%{transform:scale(.35);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes win-rise{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes win-fade{from{opacity:0}to{opacity:1}}

/* ---------- Every screen (9 October: "Betway energy in the Vantum look") ----------
   The blue ground everywhere. 'sheet' (the default): the work sits on a white sheet
   over the blue, so forms and long text stay easy to read; 'win': straight on the
   blue. On both, the one main button is gold. */
body.sheet{background:var(--win-deep)}
.sheet .shell{background:radial-gradient(140% 46% at 50% 0%,#2a4ee6 0%,var(--win-ground) 50%,var(--win-deep) 100%)}
.sheet .top-credits,.sheet .top-link,.sheet .top-back{color:#fff}
.sheet .screen{margin-top:4px;border-radius:24px 24px 0 0;background:#fff;color:var(--ink);box-shadow:0 -10px 30px #06105a40}
.sheet .btn.primary,.win .btn.primary{position:relative;overflow:hidden;background:var(--gold);color:var(--gold-ink);font-weight:700;box-shadow:0 5px 0 var(--gold-deep),0 10px 22px #06105a33}
.sheet .btn.primary:hover,.win .btn.primary:hover{background:#ffd75c}
.sheet .btn.primary:active,.win .btn.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-deep)}
.sheet .btn.primary::after,.win .btn.primary::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,#fff0,#ffffff8c,#fff0);transform:translateX(-150%) skewX(-20deg);animation:win-shine 3.4s ease-in-out 1.6s infinite;pointer-events:none;will-change:transform}
.sheet .title{color:var(--blue)}
.sheet .spinner{border-color:var(--blue-soft);border-top-color:var(--gold-deep)}

/* Shared pieces straight on the blue ('win' and the reward moments) */
.win .hint,.win .ok-box,.win .error,.win .choice,.win .quick button,.win .item,.win .doc,.win .preview,.win .card-white{color:var(--ink)}
.win input:not([type=checkbox]):not([type=radio]):not([type=file]),.win select,.win textarea{color:var(--ink)}
.win .card{background:#fff;color:var(--ink)}
.win .card .note,.win .item .note,.win .hint .note{color:var(--muted)}
.win .muted{color:#c9d3ff}
.win .card .muted{color:var(--muted)}
.win .link-btn{color:#fff}
.win .card .link-btn{color:var(--blue)}
.win .ghost{background:#ffffff1f;color:#fff}
.win .card .ghost{background:var(--grey);color:var(--ink)}
.win .tile{background:#ffffff1a;color:#fff}
.win .tile:active{background:#ffffff2e}
.win .tile-sub,.win .tile>.icon{color:#dfe6ff}
.win .tile-icon{background:var(--gold);color:var(--gold-ink)}
.win .tile-hero{background:var(--gold);color:var(--gold-ink)}
.win .tile-hero .tile-sub,.win .tile-hero>.icon{color:var(--gold-ink)}
.win .tile-hero .tile-icon{background:var(--gold-ink);color:var(--gold)}
.win .blue-text{color:var(--gold)}
.win .reward-num{color:var(--gold);text-shadow:0 6px 0 var(--gold-ink)}
.win .balance-num,.win .countdown{color:var(--gold)}
.win .progress{background:#ffffff26}
.win .progress>i{background:var(--gold)}
.win .spinner{border-color:#ffffff38;border-top-color:var(--gold)}
.win .plus{color:#8fe3b0}
.win .ledger-row{border-color:#ffffff26}
.win .card .ledger-row,.wallet-history .ledger-row{border-color:var(--line)}
.win .label{color:#fff}
.win .card .label{color:var(--ink)}
.win .card .countdown{color:var(--blue)}
.win .wheel-pointer{border-top-color:var(--gold);filter:drop-shadow(0 3px 0 var(--gold-ink))}
.win .land-perks .icon,.win .land-odds .icon{color:var(--gold)}

/* ---------- Lite: phones that ask for less (9 October, cheap phones) ----------
   html.lite comes from the page head: data saver on, 2 GB of memory or less, or reduced
   motion. No confetti, rays, soft shadows or long animations; every animation jumps to
   its end (the cards end face up). The gold frames, the gold buttons and the type stay.
   html.save-data (the Save-Data header): no web fonts either. */
.lite .win-rays,.lite .move::before,.lite .reveal-rays,.lite .win-confetti,.lite .move::after{display:none!important}
.lite *,.lite *::before,.lite *::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important;text-shadow:none!important;filter:none!important}
.lite *:not(.btn){box-shadow:none!important}
.lite .btn{box-shadow:none!important}
.lite .btn.gold,.lite .sheet .btn.primary,.lite .win .btn.primary,.lite .apply-topup .topup-main,.lite .win .job[data-top] .job-apply,.lite .home-bal-add{box-shadow:0 4px 0 var(--gold-deep)!important}
.lite .move,.lite .next-card,.lite .pack-done,.lite .apply-step.is-locked,.lite .apply-step.is-next,.lite .friends .fwd,.lite .job-back{outline:3px solid var(--gold);outline-offset:-3px}
.lite .win-count,.lite .fr-big,.lite .apply-pct,.lite .move-big,.lite .mk-pct,.lite .reveal-prize{text-shadow:0 5px 0 var(--gold-ink)!important}
.save-data,.save-data *,.save-data *::before,.save-data *::after{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif!important}
/* The legal small line (odds, no purchase needed): one line, small, readable */
.land-odds-line,.move-odds-line{font-size:15px;line-height:1.45;color:#dfe6ff;text-align:center}
.land-odds-line a,.move-odds-line a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* The one progress: a bar with its number inside */
.pbar{position:relative;display:flex;align-items:center;height:44px;padding:4px;border-radius:22px;background:#ffffff26}
.pbar>i{display:block;height:36px;border-radius:18px;background:var(--gold);box-shadow:inset 0 -3px 0 var(--gold-deep);transform-origin:left;animation:pbar-grow 1s cubic-bezier(.2,.8,.2,1) .2s both}
.pbar-num{position:absolute;left:18px;font-size:19px;font-weight:700;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.pbar .won-plus{position:absolute;right:14px;margin:0;font-size:20px;color:var(--gold)}
@keyframes pbar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.move .pbar{width:100%}