/* World of Criminals - landing page + login/join card (extends woc-login.css) */
.wa__hero{text-align:center;margin:0 0 22px}
.wa__hero h1{margin:0 0 12px;font:700 clamp(26px,5.4vw,44px)/1.12 var(--f-display,sans-serif);letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:0 0 14px rgba(25,230,255,.5),0 0 38px rgba(138,61,255,.4)}
.wa__hero h1 b{color:var(--wl-pk);text-shadow:0 0 16px rgba(255,47,208,.7)}
.wa__sub{max-width:620px;margin:0 auto 14px;font-size:16px;line-height:1.6;color:var(--chrome,#c9d3e0)}
.wa__notice{display:flex;align-items:center;gap:10px;justify-content:center;max-width:620px;margin:0 auto 16px;padding:8px 14px;font-size:13px;color:#f2d27a;background:rgba(224,184,74,.08);border:1px solid rgba(224,184,74,.4);border-radius:12px}
.wa__notice i{flex:none;width:8px;height:8px;border-radius:50%;background:#f2d27a;box-shadow:0 0 8px #f2d27a;animation:wa-blink 1.6s ease-in-out infinite}
@keyframes wa-blink{50%{opacity:.3}}

.wa__cols{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
.wa__feat{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.wa__feat li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;background:var(--panel,#0c1020);border:1px solid var(--edge,#1f2a44);border-radius:14px;transition:border-color .2s,transform .2s}
.wa__feat li:hover{border-color:var(--wl-cy);transform:translateX(3px)}
.wa__feat svg{flex:none;width:34px;height:34px;padding:7px;box-sizing:border-box;fill:none;stroke:var(--wl-cy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;background:rgba(25,230,255,.08);border:1px solid rgba(25,230,255,.45);border-radius:10px}
.wa__feat b{display:block;margin-bottom:2px;font:700 13px var(--f-display,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.wa__feat span{font-size:13px;line-height:1.5;color:var(--text-dim,#8b97b3)}
.wa__steps{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.wa__steps li{flex:1;display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12px;color:var(--chrome,#c9d3e0);background:rgba(138,61,255,.1);border:1px solid rgba(138,61,255,.35);border-radius:12px}
.wa__steps b{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font:700 12px var(--f-mono,monospace);color:#05060b;background:var(--wl-pk);border-radius:50%}

/* card + tabs */
.wa__card{padding-top:16px}
.wa__tabs{display:none;gap:6px;margin:0 0 16px;padding:4px;background:rgba(2,3,8,.7);border:1px solid var(--edge,#1f2a44);border-radius:14px}
.wa-js .wa__tabs{display:flex}
.wa__tab{flex:1;padding:10px 8px;cursor:pointer;font:700 12px var(--f-display,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim,#8b97b3);background:transparent;border:0;border-radius:11px;outline:none;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,box-shadow .2s}
.wa__tab:hover{color:#fff}
.wa__tab:focus-visible,.wa__eye:focus-visible,.wa__btn:focus-visible,.wa__cta:focus-visible{box-shadow:0 0 0 3px rgba(25,230,255,.35)}
.wa__tab[aria-selected=true]{color:#05060b;background:linear-gradient(90deg,#19e6ff,#5ff0ff);box-shadow:0 0 14px rgba(25,230,255,.45)}
.wa__tab--hot[aria-selected=true]{color:#fff;background:linear-gradient(100deg,var(--wl-pk),var(--wl-vi));box-shadow:0 0 14px rgba(255,47,208,.5)}
.wa__card h2{margin-top:0}
.wa-js .wa__panel[hidden]{display:none}
.wa-js .wa__panel{animation:wl-in .22s ease-out}
.wa-js .wa__card h2{display:none}
.wa__panel+.wa__panel{margin-top:22px}
.wa-js .wa__panel+.wa__panel{margin-top:0}

/* error banner */
.wa__err{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:10px 12px;font-size:13px;line-height:1.45;color:#ffd5dd;background:rgba(255,42,77,.1);border:1px solid rgba(255,42,77,.6);border-radius:12px;box-shadow:0 0 14px rgba(255,42,77,.2)}
.wa__err.hidden{display:none}
.wa__err svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:#ff5a78;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wa__err.is-info{color:#d5f6ff;background:rgba(25,230,255,.08);border-color:rgba(25,230,255,.5);box-shadow:none}
.wa__err.is-info svg{stroke:var(--wl-cy)}
.wa__shake{animation:wa-shake .4s ease}
@keyframes wa-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.wl__card input.is-bad{border-color:#ff2a4d!important;background:rgba(255,42,77,.08)!important}

.wa__pw{position:relative;display:block;margin:0!important}
.wa__pw input{padding-right:64px!important}
.wa__eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);padding:6px 10px;cursor:pointer;font:600 11px var(--f-display,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim,#8b97b3);background:rgba(255,255,255,.05);border:0;border-radius:8px;outline:none;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s}
.wa__eye:hover{color:#fff;background:rgba(25,230,255,.2)}
.wa__row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 14px}
.wa__row .wl__chk,.wa__row .wl__link{margin:0}

/* buttons: smooth, no default tap box */
.wa__btn,.wa__cta{outline:none;-webkit-tap-highlight-color:transparent;border-radius:14px;transition:filter .2s,transform .15s,box-shadow .2s}
.wa__btn{position:relative}
.wa__btn:active,.wa__cta:active{transform:scale(.98)}
.wa__btn[disabled]{cursor:progress;filter:saturate(.6) brightness(.9);transform:none}
.wa__btn.is-busy span::after{content:'';display:inline-block;width:12px;height:12px;margin-left:10px;vertical-align:-1px;border:2px solid rgba(5,6,11,.35);border-top-color:#05060b;border-radius:50%;animation:wa-spin .7s linear infinite}
@keyframes wa-spin{to{transform:rotate(360deg)}}
.wa__fine{margin:10px 0 0;text-align:center;font-size:12px;color:var(--text-dim,#8b97b3)}
.wa__closed{padding:16px;text-align:center;background:rgba(224,184,74,.08);border:1px solid rgba(224,184,74,.4);border-radius:12px}
.wa__closed b{display:block;margin-bottom:6px;font:700 14px var(--f-display,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:#f2d27a}
.wa__closed p{margin:0;line-height:1.6}

.wa__how{margin-top:34px;text-align:center}
.wa__how h2{display:flex;align-items:center;gap:14px;margin:0 0 16px;font:700 15px var(--f-display,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--wl-cy)}
.wa__how h2::before,.wa__how h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--edge),transparent)}
.wa__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;text-align:left}
.wa__tiles div{padding:14px;background:var(--panel,#0c1020);border:1px solid var(--edge,#1f2a44);border-top:2px solid var(--wl-vi);border-radius:14px}
.wa__tiles b{display:block;margin-bottom:5px;font:700 13px var(--f-display,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.wa__tiles span{font-size:13px;line-height:1.5;color:var(--text-dim,#8b97b3)}
.wa__cta{display:inline-block;padding:14px 28px;font:700 14px var(--f-display,sans-serif);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#fff;background:linear-gradient(100deg,var(--wl-pk),var(--wl-vi));box-shadow:0 0 22px rgba(255,47,208,.45)}
.wa__cta:hover{color:#fff;filter:brightness(1.15);transform:translateY(-2px)}

@media (max-width:820px){
  .wa__cols{grid-template-columns:1fr}
  .wa__glow{order:-1}
  .wa__tiles{grid-template-columns:1fr}
  .wa__steps{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .wa__shake,.wa-js .wa__panel,.wa__notice i{animation:none}
  .wa__feat li,.wa__cta{transition:none}
}