/* First-visit welcome: a Lagos street poster on the felt. Play first, sign-in second. */
.welcome-wrap{display:flex;flex-direction:column;gap:16px;flex:1;width:100%;justify-content:center;padding-bottom:4px}
.screen-welcome .brandrow{padding-top:2px}
.screen-welcome .tokens{height:56px}
.screen-welcome .logo{font-size:clamp(28px,9.6vw,52px)}

/* the poster: paper, ink, a strip of danfo tape */
.wl-poster{position:relative;background:var(--paper);color:#2a1d00;border-radius:6px;padding:22px 18px 16px;margin:6px 4px 0;
  transform:rotate(-1.2deg);box-shadow:6px 6px 0 var(--felt-lo),0 14px 30px rgba(0,0,0,.35)}
.wl-tape{position:absolute;top:-11px;left:50%;width:120px;height:22px;transform:translateX(-50%) rotate(2deg);border-radius:2px;
  background:repeating-linear-gradient(-45deg,var(--danfo) 0 9px,#141414 9px 18px);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.wl-head{margin:0;font:400 clamp(30px,10.4vw,46px)/1.02 var(--display);color:var(--ink);letter-spacing:.01em;text-wrap:balance;text-align:center;
  text-shadow:2px 2px 0 rgba(42,29,0,.14)}
.wl-sub{margin:10px 0 0;font-size:15.5px;line-height:1.4;font-weight:600;color:#3a2a10;text-align:center;text-wrap:balance}

/* the one big button */
.wl-cta{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:4px}
.btn.wl-play{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:66px;border-radius:16px;
  font:400 clamp(22px,7vw,27px)/1 var(--display);letter-spacing:.04em;background:var(--danfo);color:var(--gold-ink);
  border:2px solid #2a1d00;box-shadow:0 6px 0 #2a1d00,0 12px 24px rgba(0,0,0,.35);transition:transform .08s ease,box-shadow .08s ease}
.btn.wl-play:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #2a1d00,0 6px 14px rgba(0,0,0,.3)}
.btn.wl-play:disabled{cursor:progress;opacity:.85}
.btn.wl-play:focus-visible{outline:3px solid var(--paper);outline-offset:4px}
@media (hover:hover){.btn.wl-play:hover:not(:disabled){background:#ffd246}}
.wl-arrow{flex:none}
.wl-note{margin:2px 0 0;text-align:center;color:var(--text);font-size:14px;line-height:1.35;text-wrap:balance}
.wl-cta .error{text-align:center}
.wl-cta .error:empty{min-height:0}

/* the games on offer: informational, not buttons */
.wl-games{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wl-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 9px;border-radius:14px;background:rgba(0,0,0,.24);border:1px solid var(--line);text-align:center;min-width:0}
.wl-tile b{font:400 clamp(10px,3vw,14px)/1 var(--display);letter-spacing:.02em;color:var(--paper);white-space:nowrap}
.wl-ic{display:block;width:clamp(36px,11vw,48px);height:auto}

/* three short promises */
.wl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wl-chips li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,198,26,.45);background:rgba(0,0,0,.18);
  color:var(--text);font-size:13px;font-weight:600;line-height:1.2}
.wl-chips li::before{content:'';width:7px;height:7px;background:var(--danfo);transform:rotate(45deg);flex:none}

/* sign in, smaller and quieter than Play now */
.wl-acct{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;color:var(--mute);font-size:14px;padding-top:2px}
.wl-acct .btn{min-height:44px;padding:8px 16px}
.wl-signin{border-color:rgba(251,244,226,.45);color:var(--paper);background:rgba(255,255,255,.06)}
.wl-register{color:var(--text);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.wl-signin:hover{background:rgba(255,255,255,.12)}.wl-register:hover{color:var(--paper)}}
.welcome-wrap>.privacy{margin-top:-4px}

/* short phones: tighten so Play now stays near the top */
@media (max-height:640px){
  .welcome-wrap{gap:12px;justify-content:flex-start}
  .screen-welcome .tokens{display:none}
  .wl-poster{padding:18px 14px 12px}
  .btn.wl-play{min-height:58px}
}
/* wide screens: a touch more room for the poster */
@media (min-width:700px){
  .wl-poster{padding:26px 26px 18px}
  .wl-games{gap:12px}
}

/* a gentle entrance, only for people who are fine with motion */
@keyframes wl-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes wl-poster{from{opacity:0;transform:rotate(-4deg) scale(.96)}to{opacity:1;transform:rotate(-1.2deg)}}
@media (prefers-reduced-motion:no-preference){
  .wl-poster{animation:wl-poster .45s cubic-bezier(.2,.8,.3,1.15) both}
  .wl-cta{animation:wl-up .4s .12s ease-out both}
  .wl-games{animation:wl-up .4s .2s ease-out both}
  .wl-chips,.wl-acct{animation:wl-up .4s .28s ease-out both}
}
@media (prefers-reduced-motion:reduce){
  .wl-poster,.wl-cta,.wl-games,.wl-chips,.wl-acct{animation:none}
  .btn.wl-play{transition:none}
}