/* Welcome-offer card, sign-up offer line, deposit bonus note, withdraw forfeit confirm (welcome-offer.js; RESEARCH
   docs/research/signup-conversion-2026-10-25 §2). Brand tokens only, so light and dark follow each site's theme. No backdrop:
   the sheet never blocks taps or scroll on the page behind it, and stays at most 46% of the viewport on phones.
   Pop-out (owner 2026-10-26 "characters come out", docs/design/wo-popout-2026-10-26/DESIGN.md): the cut-out character stands IN
   FRONT of the frame with her head and prop above its top edge; the scene painting is cropped to its character-free bottom-right
   so she is never painted twice; a brand-gold spotlight inside the frame grounds her and her torso dissolves into it. */
.wo-root[hidden]{display:none!important}
.wo-card,.wo-pill{--wo-a:var(--wo-card-a,#2A1B3D);--wo-b:var(--wo-card-b,#6B2E2E);--wo-base:#12091C;--wo-grad:linear-gradient(160deg,color-mix(in srgb,var(--wo-a) 78%,transparent) 0%,color-mix(in srgb,var(--wo-b) 78%,transparent) 100%);--wo-scrim:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.55) 100%)}
.wo-card{position:fixed;z-index:60;left:8px;right:8px;bottom:70px;box-sizing:border-box;max-height:46vh;max-height:46dvh;display:flex;flex-direction:column;gap:8px;padding:12px 14px 2px;border:1px solid color-mix(in srgb,var(--brand) 70%,transparent);border-radius:20px;background:var(--wo-scrim),var(--wo-grad),var(--wo-card-img,none) center top/cover no-repeat,var(--wo-base);color:#fff;box-shadow:0 0 22px color-mix(in srgb,var(--brand) 32%,transparent),0 -4px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14);font-family:var(--font);animation:wo-up .34s cubic-bezier(.2,.8,.2,1) both;transform:translateY(var(--wo-drag,0px))}
/* the spotlight: a brand-gold glow inside the frame, behind the character's lower half (z-index -1 = above the card's own
   background, below its content, inside the fixed card's stacking context); the pop-out dissolves into it */
.wo-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(150px 120px at 72px 58px,color-mix(in srgb,var(--brand) 54%,transparent),color-mix(in srgb,var(--brand) 16%,transparent) 55%,transparent 76%)}
/* a scene with its own painting (welcome-card-art 2026-10-26): the painting carries the colour, so the brand gradient drops to a
   light tint and the scrim only deepens the lower half; the title gets a soft shadow over the painted top. The painting is
   zoomed to 170 % and anchored bottom-right: its character (top-left 27 % x 24 %, props under her) is out of the frame and the
   cut-out is the only one; what shows is the bokeh and the calm dark zone (checked on all 14 scenes, DESIGN.md). */
.wo-card.has-card-art{--wo-grad:linear-gradient(160deg,color-mix(in srgb,var(--wo-a) 16%,transparent) 0%,color-mix(in srgb,var(--wo-b) 22%,transparent) 100%);--wo-scrim:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.28) 48%,rgba(0,0,0,.62) 100%);background-size:auto,auto,170% auto,auto;background-position:0 0,0 0,100% 100%,0 0}
/* a scene whose painting is already character-free (welcome-art.js `backdrop`, the brief in DESIGN.md) is shown whole */
.wo-card.has-card-art.has-backdrop{background-size:auto,auto,cover,auto;background-position:0 0,0 0,center top,0 0}
.wo-card.has-card-art .wo-title,.wo-card.has-card-art .wo-hi,.wo-card.has-card-art .wo-line{text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 12px rgba(0,0,0,.45)}
.wo-card.is-dragging{animation:none;transition:none}
.wo-grab{display:none}
@media(max-width:760px){.wo-grab{display:block;position:absolute;top:5px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:rgba(255,255,255,.4)}.wo-grab{touch-action:none}.wo-card .wo-head{touch-action:none;touch-action:pan-down}}
.wo-card:not(.is-dragging){transition:transform .18s ease-out}
@keyframes wo-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* the pop-out: the transparent cut-out (284x300 main, 268x300 cheer) in front of the frame, left, its top 36 % above the card's
   top edge; a drop shadow lifts it off the page content it overlaps; the bottom 22 % fades so the cut-off torso is never seen
   (mask = WebView 83 needs the -webkit- form); one pop after the sheet has slid up, none under reduced motion.
   pointer-events none: a tap on her lands on the sheet's head (the drag) inside the card and on the page above it. */
.wo-mascot{position:absolute;z-index:1;left:2px;top:-54px;margin:var(--wo-pop-dy,0px) 0 0 var(--wo-pop-dx,0px);width:auto;height:150px;pointer-events:none;user-select:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45)) drop-shadow(0 1px 2px rgba(0,0,0,.35));-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%);transform-origin:50% 100%;animation:wo-pop .5s cubic-bezier(.22,1.1,.36,1) .14s both}
@keyframes wo-pop{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
.wo-x{position:absolute;z-index:2;top:2px;right:2px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.wo-x:hover{color:#fff;background:rgba(255,255,255,.14)}
.wo-head{position:relative;min-height:70px;padding:2px 34px 0 136px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.wo-title{margin:0;font-size:20px;line-height:1.15;font-weight:850;letter-spacing:-.2px;color:#fff}
.wo-hi{margin:0;font-size:13px;line-height:1.3;font-style:italic;font-weight:600;color:rgba(255,255,255,.88)}
.wo-line{margin:0;font-size:13px;line-height:1.4;color:rgba(255,255,255,.88)}
.wo-timer{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:4px 6px 4px 12px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18)}
.wo-timer-label{font-size:12px;font-weight:750;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.8)}
.wo-clock{font-size:22px;line-height:1;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:.5px;padding:6px 10px;border-radius:9px;background:#fff;color:var(--wo-a)}
.wo-cta.button{min-height:48px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:850;text-decoration:none;border-radius:12px;margin-top:2px}
.wo-terms{margin:0;font-size:11px;line-height:1.4;color:rgba(255,255,255,.72);text-align:center}
.wo-later{align-self:center;min-height:44px;min-width:120px;padding:0 16px;border:0;background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wo-card :focus-visible,.wo-pill :focus-visible{outline:2px solid #fff;outline-offset:2px}
/* the minimised pill: 44 px, docked above the tab bar; the face cut-out stands in front of it, head above its top edge */
.wo-pill{position:fixed;z-index:60;right:12px;bottom:72px;display:flex;align-items:center;height:44px;border:1px solid color-mix(in srgb,var(--brand) 70%,transparent);border-radius:22px;background:var(--wo-grad),var(--wo-base);color:#fff;box-shadow:0 0 16px color-mix(in srgb,var(--brand) 28%,transparent),0 4px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14);animation:wo-up .25s ease-out both;font-family:var(--font)}
.wo-pill-open{display:flex;align-items:center;gap:6px;height:44px;padding:0 4px 0 8px;border:0;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.wo-pill-face{align-self:flex-end;width:56px;height:56px;margin:0 -2px -1px -4px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
.wo-pill-clock{font-variant-numeric:tabular-nums;padding:4px 8px;border-radius:8px;background:#fff;color:var(--wo-a);font-size:13px}
.wo-pill-x{width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:20px;cursor:pointer;border-radius:0 22px 22px 0}
@media(max-width:760px){
 /* the pill sits left: the prices are on the right of every row (and the floating slip button too) */
 .wo-pill{right:auto;left:12px;bottom:var(--wo-pill-b,72px)}
 /* a toast while the sheet is up shows at the top instead of over the sheet's button */
 body.wo-sheet-open #toast{bottom:auto!important;top:calc(var(--header,67px) + 12px)}
 body.wc-has-slipbar .wo-card{bottom:118px}
 /* the pill's bottom is measured by welcome-offer.js into --wo-pill-b (tab bar, casino dock and slip bar, whichever are visible) */
 html[data-wyn-app] .wo-card{bottom:calc(70px + var(--wyn-inset-bottom-max,0px))}
}
/* phones: the intent card (cheer pose, 268 wide) docks highest (over wincricket's slip bar); same pop, a touch lower so the raised
   fist stays off the row above */
@media(max-width:760px){.wo-card.is-intent .wo-mascot{top:-48px;height:144px;left:4px}.wo-card.is-intent .wo-head{padding-left:134px;min-height:64px}}
@media(max-width:760px) and (max-height:700px){.wo-hi{display:none}.wo-head{min-height:60px}.wo-mascot{height:132px;top:-46px}.wo-head{padding-left:126px}}
@media(min-width:761px){
 /* 392 wide (was 372): the bigger pop-out keeps a two-line title beside it on both brands' fonts */
 .wo-card{left:auto;right:24px;bottom:24px;width:392px;max-height:none;padding:16px 18px 4px;border-radius:22px}
 .wo-card::before{background:radial-gradient(160px 130px at 78px 62px,color-mix(in srgb,var(--brand) 46%,transparent),color-mix(in srgb,var(--brand) 14%,transparent) 55%,transparent 76%)}
 .wo-mascot{height:164px;top:-62px;left:2px}
 .wo-head{min-height:78px;padding-left:152px;padding-right:28px}
 .wo-pill{right:24px;bottom:24px}
}
/* wincricket's bet-slip column (≥1280 on the sportsbook routes): the card sits left of it */
@media(min-width:1280px){body:has(#wc-slipcol) .wo-card,body:has(#wc-slipcol) .wo-pill{right:calc(var(--wc-slipcol-w,340px) + 40px)}}
/* dark pages: the shadow alone vanishes, so a faint warm rim keeps her off the dark rows she overlaps */
[data-theme="dark"] .wo-mascot{filter:drop-shadow(0 10px 14px rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(255,214,140,.45))}
[data-theme="dark"] .wo-pill-face{filter:drop-shadow(0 4px 8px rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(255,214,140,.4))}
@media(prefers-reduced-motion:reduce){.wo-card,.wo-pill,.wo-mascot{animation:none;transition:none}}
html.reduce-motion .wo-card,html.reduce-motion .wo-pill,html.reduce-motion .wo-mascot{animation:none;transition:none}

/* sign-up form: one line above "Create account" */
.wo-form-slot:empty{display:none}
.wo-form-line{display:flex;align-items:center;gap:8px;margin:2px 0 12px;padding:7px 8px 7px 7px;border-radius:12px;border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line));background:color-mix(in srgb,var(--brand) 12%,var(--surface));font-size:13px;line-height:1.35;color:var(--text)}
.wo-form-face,.wo-note-face{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--brand) 30%,var(--surface))}
.wo-form-text{flex:1 1 auto;min-width:0}
.wo-form-text strong{font-weight:800}
.wo-nw{white-space:nowrap}
.wo-form-clock{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;padding:4px 8px;border-radius:8px;background:var(--text);color:var(--surface-2)}

/* deposit page: the bonus note under the payment logos */
.wo-deposit-note{position:relative;display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 10px 8px 8px;border-radius:12px;border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line));background:color-mix(in srgb,var(--brand) 12%,var(--surface));font-size:13px;line-height:1.4;color:var(--text)}
.wo-deposit-note[hidden]{display:none}
.wo-deposit-note b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.wo-note-long{flex:1 1 auto;min-width:0}
.wo-note-short{display:none}
.wo-note-rule{display:block;font-size:11px;line-height:1.3;color:var(--dim)}
.wo-deposit-note.is-active{padding-bottom:13px}
.wo-note-bar{position:absolute;left:44px;right:12px;bottom:6px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--text) 12%,transparent);overflow:hidden}
.wo-note-bar>i{display:block;height:100%;width:var(--wo-p,0%);border-radius:2px;background:var(--positive)}
/* phones (<= 760 px): the short form, and the form's eyebrow gives its room, so "Generate payment QR" stays clear of the tab
   bar (at 412 px the long sentence put it 4 px under the bar with the strip at its tallest) */
@media(max-width:760px){
 .wo-deposit-note{gap:6px;margin-bottom:6px;padding:3px 8px 3px 5px;font-size:12px;line-height:1.35;border-radius:10px}
 .wo-deposit-note.is-active{padding-top:2px;padding-bottom:7px}
 .wo-deposit-note.is-active .wo-note-short{white-space:normal}
 .wo-deposit-note.is-active .wo-note-rule{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .wo-note-bar{left:34px;bottom:3px;height:3px}
 .wo-deposit-note .wo-note-face{flex-basis:22px;width:22px;height:22px}
 .wo-note-long{display:none}
 .wo-note-short{display:block;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 :is(.account-payment-form,.pago-deposit):has(>.wo-deposit-note)>.eyebrow{display:none}
 :is(.account-payment-form,.pago-deposit):has(>.wo-deposit-note)>h2{margin-top:0}
 .pay-apps:has(+.wo-deposit-note){margin-bottom:4px}
}

/* withdraw: the bonus forfeit confirm (account dialog) */
.wo-forfeit-progress{margin:-10px 0 18px;font-size:13px;line-height:1.5;color:var(--dim)}
.wo-forfeit-actions{display:grid;gap:10px}
.wo-forfeit-actions .button{min-height:48px}