/* ===== Meow Battle · WELCOME (first visit) ===== */
#wlScr { position: fixed; inset: 0; z-index: 8600; overflow: hidden; background: #07040b; opacity: 0; transition: opacity .7s ease; font-family: Barlow, system-ui, sans-serif; color: #f3eff7; }
#wlScr.on { opacity: 1; }
#wlScr.out { opacity: 0; }
#wlScr[hidden] { display: none; }

/* paintings: balcony (name), theatre (pack), curtain (reveal), Shadow Cat (ready). Each breathes with a slow push-in. */
.wl-bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1s ease, transform 1.2s cubic-bezier(.6, 0, .2, 1); animation: wlKb 22s ease-in-out infinite alternate; }
.wl-bg.b0 { background-image: url(signin.webp); transform-origin: 72% 50%; }
.wl-bg.b1 { background-image: url(balcony.webp); transform-origin: 70% 40%; }
.wl-bg.b2 { background-image: url(theatre.webp); transform-origin: var(--px, 68%) var(--py, 58%); }
.wl-bg.b3 { background-image: url(reveal.webp); }
.wl-bg.b4 { background-image: url(finale.webp); transform-origin: 72% 45%; }
@keyframes wlKb { from { scale: 1; } to { scale: 1.055; } }
#wlScr[data-step="s0"] .b0, #wlScr[data-step="s1"] .b1, #wlScr[data-step="s2"] .b2, #wlScr[data-step="opening"] .b2, #wlScr[data-step="s3"] .b3, #wlScr[data-step="s4"] .b4 { opacity: 1; }
#wlScr.zoom .b2 { transform: scale(2.4); transition: transform 1.25s cubic-bezier(.7, 0, .3, 1); }

.wl-sh { position: absolute; inset: 0; pointer-events: none; transition: opacity .8s ease, background .8s ease; background: linear-gradient(90deg, rgba(6, 3, 12, .84) 0%, rgba(6, 3, 12, .55) 32%, rgba(6, 3, 12, 0) 58%); }
#wlScr[data-step="s3"] .wl-sh { background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(10, 4, 18, .35), rgba(8, 3, 14, .8)); }
#wlScr[data-step="opening"] .wl-sh { opacity: 0; }
#wlScr.dim .wl-sh { background: rgba(4, 2, 8, .86); }

/* particles */
.wl-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.wl-stage { z-index: 3; }

/* light: a slow sweep across the balcony and the finale, a breathing glow on the pack */
.wl-sweep { position: absolute; inset: -20%; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: linear-gradient(105deg, transparent 38%, rgba(255, 214, 140, .16) 47%, rgba(255, 240, 210, .26) 50%, rgba(255, 214, 140, .16) 53%, transparent 62%); background-size: 300% 100%; animation: wlSweep 9s ease-in-out infinite; transition: opacity 1s; }
#wlScr[data-step="s0"] .wl-sweep, #wlScr[data-step="s1"] .wl-sweep, #wlScr[data-step="s4"] .wl-sweep { opacity: 1; }
@keyframes wlSweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.wl-glow { position: absolute; left: var(--px); top: var(--py); width: calc(var(--pw, 120px) * 4.2); aspect-ratio: 1; translate: -50% -52%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: radial-gradient(closest-side, rgba(255, 236, 180, .75), rgba(255, 196, 90, .32) 38%, rgba(255, 160, 60, 0) 72%); transition: opacity .6s; }
#wlScr[data-step="s2"] .wl-glow { opacity: 1; animation: wlBreath 2.4s ease-in-out infinite; }
#wlScr[data-step="opening"] .wl-glow { opacity: 1; scale: 1.6; transition: opacity .3s, scale 1.2s; }
#wlScr.hot .wl-glow { filter: brightness(1.35); }
@keyframes wlBreath { 0%, 100% { scale: .9; opacity: .55; } 50% { scale: 1.08; opacity: 1; } }

/* the pack itself is the button: no ring, it just glows brighter under the cursor */
.wl-hot { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 3 / 4.4; border: 0; padding: 0; background: none; cursor: pointer; opacity: 0; pointer-events: none; z-index: 4; }
#wlScr[data-step="s2"] .wl-hot { pointer-events: auto; }
.wl-hot:focus-visible { outline: 2px solid #ffd98a; outline-offset: 8px; opacity: 1; border-radius: 12px; }

/* flashes */
.wl-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 5; background: radial-gradient(circle at var(--px, 68%) var(--py, 58%), #fffbe8 0%, #ffe39a 18%, rgba(255, 200, 110, .5) 38%, rgba(255, 200, 110, 0) 70%); }
#wlScr.burst .wl-flash { animation: wlFlash 1.1s ease-out both; }
.wl-boomfx { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 5; background: radial-gradient(circle at 50% 41%, rgba(250, 236, 255, 1) 0%, rgba(190, 110, 255, .7) 22%, rgba(120, 40, 200, 0) 62%); }
#wlScr.boom .wl-boomfx { animation: wlFlash 1.2s ease-out both; }
@keyframes wlFlash { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }

/* stage (1920 x 1080, scaled) */
.wl-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; }
.wl-step { position: absolute; left: 140px; top: 50%; width: 880px; transform: translateY(-46%); opacity: 0; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
#wlScr[data-step="s0"] .s0, #wlScr[data-step="s1"] .s1, #wlScr[data-step="s2"] .s2, #wlScr[data-step="s4"] .s4 { opacity: 1; transform: translateY(-50%); pointer-events: auto; transition-delay: .35s; }

/* type: painted titles and buttons; the rest in Barlow (same family as the whole site) */
.wl-k { font: 600 22px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .42em; text-transform: uppercase; color: rgba(243, 207, 122, .9); text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.wl-k b { font-weight: 700; color: #fff0c8; letter-spacing: .24em; }
.wl-title { position: relative; width: 760px; margin: 18px 0 26px -6px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .75)); }
.s1 .wl-title { width: 800px; margin-top: 0; }
.wl-title img { display: block; width: 100%; height: auto; }
/* a glint of light runs through the gold, clipped to the letters */
.wl-title::after, .wl-ib::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 42%, rgba(255, 252, 235, .85) 50%, transparent 58%); background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: screen; }
.wl-title::after { animation: wlGlint 5.5s ease-in-out 1.2s infinite; }
@keyframes wlGlint { 0% { background-position: 130% 0; } 40%, 100% { background-position: -30% 0; } }
.wl-p { margin: 0 0 34px; max-width: 600px; font: 500 24px/1.5 Barlow, sans-serif; color: rgba(246, 236, 214, .92); text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.wl-p b { color: #ffe7b0; font-weight: 700; }

/* name field */
.wl-name { display: block; width: 540px; }
.wl-name span { display: block; margin-bottom: 12px; font: 600 16px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .36em; text-transform: uppercase; color: rgba(243, 207, 122, .85); }
.wl-name input { width: 100%; box-sizing: border-box; height: 80px; padding: 0 28px; border: 0; border-radius: 14px; outline: none; font: 700 40px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff3d6; background: linear-gradient(180deg, rgba(20, 8, 30, .82), rgba(8, 3, 14, .82)); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .55), inset 0 0 0 5px rgba(8, 3, 14, .7), inset 0 0 0 6px rgba(243, 207, 122, .18), 0 12px 34px rgba(0, 0, 0, .5); transition: box-shadow .25s; }
.wl-name input::placeholder { color: rgba(243, 223, 176, .3); text-transform: none; letter-spacing: .04em; font-weight: 600; }
.wl-name input:focus { box-shadow: inset 0 0 0 2px #ffd98a, inset 0 0 0 5px rgba(8, 3, 14, .7), inset 0 0 0 6px rgba(255, 217, 138, .3), 0 0 30px rgba(255, 200, 110, .25), 0 12px 34px rgba(0, 0, 0, .5); }
.wl-st { min-height: 24px; margin: 14px 0 22px; font: 600 17px/1.3 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.wl-st.wait { color: rgba(243, 223, 176, .6); }
.wl-st.ok { color: #b8ff8a; } .wl-st.ok::before { content: "✓  "; }
.wl-st.no { color: #ff9a8a; } .wl-st.no::before { content: "✕  "; }
.wl-note { display: block; margin-top: 16px; font: 600 15px/1.4 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 223, 176, .5); }

/* painted buttons */
.wl-ib { position: relative; display: inline-block; height: 92px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); transition: transform .2s, filter .25s, opacity .3s; }
.wl-ib img { display: block; height: 100%; width: auto; pointer-events: none; }
.wl-ib:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .6)) brightness(1.12); }
.wl-ib:hover:not(:disabled)::after { animation: wlGlint 1s ease-out; }
.wl-ib:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.wl-ib:disabled { cursor: not-allowed; filter: grayscale(.85) brightness(.55) drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.wl-ib:focus-visible, .wl-later:focus-visible, .wl-skip:focus-visible { outline: 2px solid #ffd98a; outline-offset: 4px; border-radius: 999px; }
.wl-row { display: flex; gap: 14px; align-items: center; }
.wl-row .how { height: 104px; } /* the purple frame is drawn thicker: same visual size */
.wl-later { margin-top: 20px; border: 0; background: none; cursor: pointer; font: 600 16px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: rgba(243, 223, 176, .6); }
.wl-later:hover { color: #f3dfb0; }
.wl-ok { margin: 0 0 34px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font: 500 24px/1.3 Barlow, sans-serif; color: rgba(246, 236, 214, .92); text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.wl-ok li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 16px; transform: rotate(45deg); background: linear-gradient(135deg, #fff0c4, #d9a23e); box-shadow: 0 0 10px rgba(255, 200, 110, .7); vertical-align: .15em; }
.wl-ok b { color: #ffe7b0; }

/* ---------- reveal ---------- */
.wl-rv { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
#wlScr[data-step="s3"] .wl-rv { opacity: 1; pointer-events: auto; }
.wl-rvh { position: absolute; left: 0; right: 0; top: 56px; text-align: center; }
.wl-cnt { margin-top: 12px; font: 700 30px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .14em; color: rgba(255, 240, 200, .55); text-shadow: 0 2px 10px #000; transition: opacity .4s; }
.wl-cnt b { color: #fff0c8; }
#wlScr.fin .wl-cnt { opacity: 0; }
.wl-hint { margin-top: 12px; min-height: 20px; font: 600 17px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: rgba(243, 223, 176, .6); }
.wl-hint.pulse { animation: wlNudge .6s ease; }
@keyframes wlNudge { 30% { color: #fff3c4; transform: scale(1.12); } }
.wl-layer { position: absolute; inset: 0; }

.wl-c { position: absolute; aspect-ratio: 480 / 671; perspective: 1600px; isolation: isolate; will-change: transform; }
.wl-c .in { position: absolute; inset: 0; transform-style: preserve-3d; }
.wl-c .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, .6); }
.wl-c .face img { width: 100%; height: 100%; display: block; }
.wl-c .back { transform: rotateY(180deg); }
.wl-c .halo { position: absolute; inset: -26% -36%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(closest-side, rgba(255, 214, 140, .6), rgba(255, 214, 140, 0)); }
.wl-c.on .halo, .wl-sp .halo { opacity: 1; }
.wl-c.r-rara .halo { background: radial-gradient(closest-side, rgba(79, 141, 255, .7), rgba(79, 141, 255, 0)); }
.wl-c.r-epica .halo { background: radial-gradient(closest-side, rgba(180, 92, 255, .85), rgba(180, 92, 255, 0)); }
.wl-c .lab { position: absolute; left: -80px; right: -80px; top: calc(100% + 20px); text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.wl-c.on .lab, .wl-sp.up .lab { opacity: 1; transform: none; transition-delay: .25s; }
.wl-c .lab em { display: block; font: 700 17px/1 'Barlow Condensed', Barlow, sans-serif; font-style: normal; letter-spacing: .46em; color: rgba(243, 223, 176, .75); }
.wl-c.r-rara .lab em { color: #8fbcff; text-shadow: 0 0 14px rgba(79, 141, 255, .9); }
.wl-c.r-epica .lab em { color: #dca8ff; text-shadow: 0 0 16px rgba(180, 92, 255, 1); }
.wl-c .lab b { display: block; margin-top: 9px; font: 700 34px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff3d6; text-shadow: 0 2px 10px #000; }

/* the strip of commons */
.wl-strip { position: absolute; left: 0; right: 0; top: 806px; display: flex; justify-content: center; gap: 9px; transition: opacity .5s, transform .5s; }
.wl-strip .sl { position: relative; width: 86px; aspect-ratio: 480 / 671; border-radius: 6px; background: rgba(255, 230, 180, .05); box-shadow: inset 0 0 0 1px rgba(243, 207, 122, .16); pointer-events: auto; transition: transform .25s, box-shadow .25s; }
.wl-strip .sl img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, .6); animation: wlLand .35s ease-out; }
@keyframes wlLand { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.wl-strip .sl.in:hover { z-index: 3; transform: translateY(-62%) scale(2.6); }
#wlScr.fin .wl-strip { opacity: .55; }
#wlScr.fin .wl-strip:hover { opacity: 1; }

.wl-skip { position: absolute; right: 70px; bottom: 60px; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; font: 700 18px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #f3dfb0; background: rgba(8, 4, 14, .6); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .5); transition: opacity .4s; }
.wl-skip span { font-size: 24px; letter-spacing: 0; }
.wl-skip:hover { color: #fff3d6; box-shadow: inset 0 0 0 1.5px #ffd98a; }
#wlScr.fin .wl-skip { opacity: 0; pointer-events: none; }

/* the best for last */
.wl-sp { cursor: pointer; }
.wl-sp .rays { position: absolute; left: 50%; top: 50%; width: 270%; aspect-ratio: 1; z-index: -2; translate: -50% -50%; background: center / contain no-repeat; opacity: .3; animation: wlSpin 20s linear infinite; pointer-events: none; transition: opacity .6s; }
.wl-sp.up .rays { opacity: .95; }
@keyframes wlSpin { to { rotate: 360deg; } }
.wl-sp.down:hover .in { translate: 0 -10px; }
.wl-sp.down .in { transition: translate .25s; }
.wl-sp.r-epica.down { animation: wlIdle 2.6s ease-in-out infinite; }
@keyframes wlIdle { 50% { translate: 0 -8px; } }
/* the Epic charges as each Rare is revealed */
.wl-sp.charge1 .halo { scale: 1.25; }
.wl-sp.charge1 .rays { opacity: .6; animation-duration: 9s; }
.wl-sp.charge1.down { animation: wlShake .5s linear infinite; }
.wl-sp.charge2 .halo { scale: 1.5; filter: brightness(1.4); }
.wl-sp.charge2 .rays { opacity: .85; animation-duration: 4s; }
.wl-sp.charge2.down { animation: wlShake .22s linear infinite; }
.wl-sp.blast .halo { scale: 2.2; filter: brightness(2); transition: scale .5s ease-in, filter .5s; }
.wl-sp.blast.down { animation: wlShake .08s linear infinite; }
@keyframes wlShake { 0%, 100% { translate: 0 0; } 25% { translate: -3px 2px; } 50% { translate: 3px -2px; } 75% { translate: -2px -3px; } }
.wl-sp.r-epica.up { animation: wlPop .9s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes wlPop { 0% { scale: 1.25; } 100% { scale: 1; } }

.wl-rvf { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
#wlScr.done .wl-rvf { opacity: 1; pointer-events: auto; transform: none; }
#wlScr.done .wl-strip { opacity: 1; transform: translateY(-34px); }

@media (prefers-reduced-motion: reduce) { .wl-bg, .wl-sweep, .wl-glow, .wl-title::after, .wl-sp .rays, .wl-sp.down { animation: none !important; } #wlScr.zoom .b2 { transform: none; } }

/* ---------- sign in ---------- */
.wl-auth { display: flex; flex-direction: column; gap: 12px; width: 520px; }
.wl-ab { display: flex; align-items: center; gap: 18px; height: 74px; padding: 0 22px 0 14px; border: 0; border-radius: 16px; cursor: pointer; text-align: left; color: #fff4e0; transition: transform .2s, box-shadow .25s, background .25s;
  background: linear-gradient(180deg, rgba(36, 14, 44, .86), rgba(14, 6, 20, .9)); box-shadow: inset 0 0 0 1.5px rgba(236, 196, 116, .42), inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 30px rgba(0, 0, 0, .45); }
.wl-ab .ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 13px; color: #2a1404; background: linear-gradient(180deg, #fff0c4, #e8b54e 55%, #b9832a); box-shadow: 0 0 0 1px rgba(90, 54, 8, .8), 0 6px 14px rgba(0, 0, 0, .45); }
.wl-ab .ic svg { width: 24px; height: 24px; }
.wl-ab b { flex: 1; font: 700 22px/1 Barlow, sans-serif; letter-spacing: .01em; }
.wl-ab i { font: 400 34px/1 Barlow, sans-serif; font-style: normal; color: rgba(243, 207, 122, .7); transition: transform .2s; }
.wl-ab:hover, .wl-ab.on { transform: translateX(4px); background: linear-gradient(180deg, rgba(56, 22, 66, .9), rgba(22, 9, 30, .92)); box-shadow: inset 0 0 0 1.5px #ffd98a, inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 26px rgba(255, 200, 110, .2), 0 12px 30px rgba(0, 0, 0, .45); }
.wl-ab:hover i { transform: translateX(4px); color: #ffe7b0; }
.wl-ab:focus-visible { outline: 2px solid #ffd98a; outline-offset: 4px; }
.wl-mail { display: flex; gap: 10px; animation: wlMail .3s ease; }
@keyframes wlMail { from { opacity: 0; transform: translateY(-6px); } }
.wl-mail input { flex: 1; height: 60px; padding: 0 20px; border: 0; border-radius: 14px; outline: none; font: 600 20px/1 Barlow, sans-serif; color: #fff3d6; background: rgba(8, 4, 14, .75); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .5); }
.wl-mail input:focus { box-shadow: inset 0 0 0 2px #ffd98a, 0 0 24px rgba(255, 200, 110, .2); }
.wl-mail input::placeholder { color: rgba(243, 223, 176, .35); }
.wl-mail button { height: 60px; padding: 0 24px; border: 0; border-radius: 14px; cursor: pointer; font: 700 16px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #2a1404; background: linear-gradient(180deg, #fff0c4, #e8b54e 55%, #b9832a); box-shadow: 0 0 0 1px rgba(90, 54, 8, .8), 0 8px 20px rgba(0, 0, 0, .45); }
.wl-mail button:hover { filter: brightness(1.08); }
.wl-note.demo { margin-top: 22px; color: rgba(243, 223, 176, .55); }

.wl-wait { display: flex; align-items: center; gap: 14px; margin-top: 4px; font: 600 17px/1.3 Barlow, sans-serif; color: #ffe7b0; }
.wl-wait small { display: block; margin-top: 3px; font: 600 13px/1.3 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 223, 176, .55); }
.wl-err { margin-top: 12px; padding: 10px 14px; border-radius: 10px; font: 600 15px/1.35 Barlow, sans-serif; color: #ffd0c4; background: rgba(120, 20, 30, .35); box-shadow: inset 0 0 0 1px rgba(255, 120, 110, .35); }
.wl-err[hidden] { display: none; }
.wl-wait .sp { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2.5px solid rgba(243, 207, 122, .25); border-top-color: #ffd98a; animation: wlSpin2 .8s linear infinite; }
@keyframes wlSpin2 { to { transform: rotate(360deg); } }
.s0.busy .wl-ab:not(.on) { opacity: .45; }
.wl-code { width: 560px; }
.wl-code .wl-k { margin-bottom: 14px; }
.wl-code .wl-p b { color: #ffe7b0; }
.wl-code .digits { display: flex; gap: 10px; margin: -12px 0 22px; }
.wl-code .digits input { width: 64px; height: 78px; border: 0; border-radius: 14px; outline: none; text-align: center; font: 800 36px/1 Barlow, sans-serif; color: #fff3d6; background: rgba(8, 4, 14, .75); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .45); caret-color: #ffd98a; }
.wl-code .digits input:focus { box-shadow: inset 0 0 0 2px #ffd98a, 0 0 22px rgba(255, 200, 110, .22); }
.wl-code .row { display: flex; align-items: center; gap: 18px; }
.wl-code .verify { height: 60px; min-width: 200px; padding: 0 30px; border: 0; border-radius: 14px; cursor: pointer; font: 700 17px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #2a1404; background: linear-gradient(180deg, #fff0c4, #e8b54e 55%, #b9832a); box-shadow: 0 0 0 1px rgba(90, 54, 8, .8), 0 8px 20px rgba(0, 0, 0, .45); }
.wl-code .verify:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }
.wl-code .back { border: 0; background: none; cursor: pointer; font: 600 15px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 223, 176, .6); }
.wl-code .back:hover { color: #f3dfb0; }
.wl-code[hidden], .wl-auth[hidden], .wl-wait[hidden] { display: none !important; }