@import url('/wao-system.css');
:root { --wao-bg:var(--color-canvas); --wao-panel:#14131b; --wao-panel-raised:var(--color-surface-raised); --wao-text:var(--color-text-primary); --wao-muted:var(--color-text-secondary); --wao-purple:var(--color-action-primary); --wao-purple-bright:var(--color-action-primary-hover); --wao-gold:var(--color-state-winner); --wao-border:var(--color-border-subtle); --wao-radius:var(--radius-card); --wao-shadow:var(--shadow-raised); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body.wao-page { margin:0; min-height:100vh; background-color:var(--wao-bg); background-image:radial-gradient(ellipse at 18% -8%,rgba(42,33,72,.72) 0,rgba(42,33,72,.3) 28%,transparent 62%),radial-gradient(ellipse at 100% 22%,rgba(124,111,255,.045) 0,transparent 54%); background-position:top left; background-size:100% clamp(30rem,68vh,36rem); background-repeat:no-repeat; color:var(--wao-text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.wao-page h1,body.wao-page h2,body.wao-page h3 { color:var(--wao-text); letter-spacing:-.025em; }
body.wao-page a { text-underline-offset:.18em; }
.wao-nav { min-height:68px; padding:.8rem clamp(1rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--wao-border); background:rgba(9,9,13,.86); backdrop-filter:blur(18px); position:relative; z-index:20; }
.wao-nav-brand { color:#fff; text-decoration:none; text-transform:uppercase; font-weight:850; font-size:.95rem; letter-spacing:.12em; white-space:nowrap; }
.wao-nav-links { display:flex; align-items:center; gap:.35rem; }
.wao-nav-link,.wao-nav-user { color:var(--wao-muted); text-decoration:none; padding:.6rem .75rem; border-radius:9px; font-size:.9rem; font-weight:650; }
.wao-nav-link:hover,.wao-nav-link:focus-visible,.wao-nav-user:hover,.wao-nav-user:focus-visible,.wao-nav-link.active,.wao-nav-user.active { color:#fff; background:rgba(124,111,255,.13); outline:none; }
.wao-nav-user { display:none; align-items:center; gap:.5rem; }
.wao-nav-user.visible { display:flex; }
.wao-nav-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#302b45; }
.wao-nav-avatar-fallback { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; color:#fff; background:#302b45; font-size:.78rem; font-weight:850; }
.wao-nav-avatar-fallback.is-loading { color:transparent; background:linear-gradient(100deg,#242132 20%,#37324b 38%,#242132 56%); background-size:220% 100%; animation:wao-shimmer 1.35s linear infinite; }
.wao-nav-avatar[hidden],.wao-nav-avatar-fallback[hidden] { display:none; }
.wao-main { width:min(1080px,calc(100% - 2rem)); margin:0 auto; padding:clamp(2.5rem,7vw,5.5rem) 0 4rem; }
.wao-collection-main { width:min(var(--measure-stage),calc(100% - 2rem)); }
.wao-page-masthead { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:clamp(1.25rem,4vw,3rem); margin-bottom:clamp(1.5rem,4vw,2.5rem); }
.wao-page-masthead-copy { max-width:760px; }
.wao-page-title { margin:.55rem 0 .7rem; font-size:clamp(2.6rem,7vw,5.3rem); line-height:.96; letter-spacing:-.055em; }
.wao-page-description { max-width:650px; margin:0; color:#c9c5d4; font-size:clamp(1rem,2vw,1.2rem); line-height:1.55; }
.wao-page-tools { justify-self:end; }
.wao-home-main { width:min(var(--measure-stage),calc(100% - 2rem)); }
.wao-home-hero { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.65fr); align-items:end; gap:clamp(2rem,7vw,7rem); min-height:min(680px,calc(100vh - 68px)); padding:clamp(3rem,9vh,7rem) 0; border-bottom:1px solid var(--wao-border); }
.wao-home-hero h1 { max-width:980px; margin:.65rem 0 0; font-size:clamp(4rem,9vw,8.7rem); line-height:.86; letter-spacing:-.072em; }
.wao-home-hero-action { padding-bottom:.6rem; }
.wao-home-hero-action p { max-width:390px; margin:0; color:var(--wao-muted); font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.55; }
.wao-home-process,.wao-home-games { display:grid; grid-template-columns:minmax(200px,.34fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); padding:clamp(3rem,7vw,6rem) 0; border-bottom:1px solid var(--wao-border); }
.wao-home-process header h2,.wao-home-games header h2 { margin:.5rem 0 0; font-size:clamp(2rem,4vw,3.8rem); line-height:.96; letter-spacing:-.05em; }
.wao-home-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.wao-home-steps li { display:grid; align-content:start; gap:1rem; min-height:170px; padding:1.25rem; border-left:1px solid var(--wao-border); }
.wao-home-steps span { color:var(--wao-purple-bright); font-size:.72rem; font-weight:850; letter-spacing:.14em; }
.wao-home-steps strong { max-width:240px; font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.18; }
.wao-home-games-detail { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem; }
.wao-home-games-detail .wao-button { margin:0; }
.wao-hero { max-width:780px; }
.wao-eyebrow { color:var(--wao-gold); text-transform:uppercase; letter-spacing:.13em; font-size:.76rem; font-weight:800; }
.wao-title { margin:.6rem 0 1rem; font-size:clamp(2.5rem,7vw,5.8rem); line-height:.96; letter-spacing:-.06em; }
.wao-lede { color:#c9c5d4; font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.6; max-width:650px; }
.wao-button { display:inline-flex; align-items:center; justify-content:center; margin-top:1.25rem; padding:.9rem 1.15rem; border:0; border-radius:10px; color:#fff; background:linear-gradient(135deg,#8a7cff,#5b4de8); box-shadow:0 10px 30px rgba(91,77,232,.22); font:inherit; font-weight:800; text-decoration:none; cursor:pointer; transition:transform .18s ease,filter .18s ease; }
.wao-button:hover { filter:brightness(1.08); transform:translateY(-1px); }
.wao-button.secondary { background:rgba(255,255,255,.08); }
.wao-section { margin-top:clamp(2.5rem,6vw,4.5rem); }
.wao-section h2 { font-size:1.4rem; }
.wao-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.wao-card { padding:1.25rem; border:1px solid var(--wao-border); border-radius:var(--wao-radius); background:rgba(20,19,27,.9); box-shadow:var(--wao-shadow); }
.wao-card p,.wao-muted { color:var(--wao-muted); line-height:1.55; }
.wao-status { padding:1rem; border-radius:12px; background:rgba(124,111,255,.1); color:#d9d5ff; }
.wao-status[data-state="loading"] { color:var(--wao-muted); background:rgba(255,255,255,.035); }
.wao-status[data-state="empty"] { color:var(--wao-muted); background:rgba(255,255,255,.025); }
.wao-status[data-state="error"] { border:1px solid rgba(255,170,166,.28); color:var(--color-state-error); background:rgba(255,170,166,.07); }
.wao-image-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); justify-content:center; gap:1rem; }
.wao-image-card { justify-self:center; width:100%; max-width:320px; margin:0; overflow:hidden; border:1px solid var(--wao-border); border-radius:14px; background:var(--wao-panel); box-shadow:0 14px 36px rgba(0,0,0,.18); }
.wao-image-media { position:relative; aspect-ratio:1; overflow:hidden; background:#111019; }
.wao-image-open { display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.wao-image-card img { display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .28s ease,transform .35s ease; }
.wao-image-card.is-loaded img { opacity:1; }
.wao-image-card:hover img { transform:scale(1.02); }
.wao-image-skeleton,.wao-lightbox-skeleton { position:absolute; inset:0; background:linear-gradient(100deg,#171622 20%,#252236 38%,#171622 56%); background-size:220% 100%; animation:wao-shimmer 1.35s linear infinite; }
.wao-image-card.is-loaded .wao-image-skeleton { display:none; }
.wao-image-actions { position:absolute; right:.7rem; bottom:.7rem; display:flex; gap:.45rem; opacity:0; transform:translateY(6px); transition:opacity .18s ease,transform .18s ease; }
.wao-image-card:hover .wao-image-actions,.wao-image-card:focus-within .wao-image-actions { opacity:1; transform:none; }
.wao-image-action { display:inline-flex; align-items:center; justify-content:center; width:34px; min-width:34px; height:34px; padding:0; border:0; border-radius:50%; color:#fff; background-color:rgba(8,8,12,.6); backdrop-filter:blur(8px); font:inherit; font-size:0; text-decoration:none; cursor:pointer; }
.wao-image-action:hover,.wao-image-action:focus-visible { color:#fff; background-color:var(--wao-purple); outline:2px solid #fff; outline-offset:2px; }
.wao-download-icon { background-image:url('/assets/images/down-arrow.png'); background-position:center; background-repeat:no-repeat; background-size:22px 22px; }
.wao-image-card figcaption { padding:1rem; }
.wao-image-card p { margin:0 0 .5rem; }
.wao-image-card small { display:block; color:var(--wao-muted); }
.wao-card-link { display:inline-flex; margin-top:.65rem; color:#c8c2ff; font-size:.86rem; font-weight:750; text-decoration:none; }
.wao-card-link:hover,.wao-card-link:focus-visible { color:#fff; text-decoration:underline; outline:none; }
.wao-form { max-width:560px; display:grid; gap:1rem; }
.wao-label { display:grid; gap:.4rem; color:#d6d2df; font-weight:650; }
.wao-input { width:100%; padding:.8rem .9rem; border:1px solid rgba(255,255,255,.18); border-radius:9px; color:#fff; background:#0d0c12; font:inherit; }
.wao-input:focus { outline:2px solid var(--wao-purple); outline-offset:1px; }
.wao-auth-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.75fr); align-items:center; gap:clamp(2rem,7vw,6rem); min-height:calc(100vh - 68px); padding-top:clamp(2rem,5vw,4rem); }
.wao-auth-intro h1 { max-width:680px; margin:.65rem 0 1rem; font-size:clamp(2.7rem,6vw,5.2rem); line-height:.96; letter-spacing:-.055em; }
.wao-login-points { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.75rem; }
.wao-login-points span { padding:.55rem .75rem; border:1px solid rgba(124,111,255,.24); border-radius:999px; color:#d9d5ff; background:rgba(124,111,255,.08); font-size:.82rem; font-weight:750; }
.wao-form-panel { padding:clamp(1.35rem,4vw,2.25rem); border:1px solid var(--wao-border); border-radius:var(--wao-radius); background:linear-gradient(145deg,rgba(25,23,34,.97),rgba(15,14,21,.97)); box-shadow:var(--wao-shadow); }
.wao-form-panel h2 { margin:.45rem 0 .4rem; font-size:clamp(1.8rem,4vw,2.45rem); }
.wao-form-panel .wao-form { max-width:none; margin-top:1.4rem; gap:.65rem; }
.wao-password-heading { display:flex; align-items:center; justify-content:space-between; margin-top:.35rem; }
.wao-password-toggle { border:0; padding:.25rem; color:#c8c2ff; background:transparent; font:inherit; font-size:.8rem; font-weight:750; cursor:pointer; }
.wao-password-toggle:hover,.wao-password-toggle:focus-visible { color:#fff; outline:2px solid var(--wao-purple); outline-offset:2px; border-radius:5px; }
.wao-checkbox { display:flex; align-items:center; gap:.6rem; margin-top:.4rem; color:var(--wao-muted); font-size:.88rem; cursor:pointer; }
.wao-checkbox input { width:17px; height:17px; accent-color:var(--wao-purple); }
.wao-login-submit { width:100%; margin-top:.65rem; }
.wao-login-submit:disabled { cursor:wait; filter:saturate(.55); opacity:.72; transform:none; }
.wao-form-status { min-height:1.35rem; color:var(--wao-muted); font-size:.88rem; }
.wao-form-status.error { color:#ffaaa6; }
.wao-form-status.success { color:#b8f2c5; }
.wao-form-status[data-state="loading"] { color:var(--wao-muted); }
.wao-form-status[data-state="success"],.wao-muted[data-state="success"] { color:var(--color-state-success); }
.wao-form-status[data-state="error"],.wao-muted[data-state="error"] { color:var(--color-state-error); }
.wao-login-divider { height:1px; margin:1.35rem 0; background:var(--wao-border); }
.wao-login-link { display:inline; margin:0; }
.wao-account-card { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:clamp(1.25rem,4vw,2rem); border:1px solid var(--wao-border); border-radius:var(--wao-radius); background:linear-gradient(145deg,rgba(25,23,34,.96),rgba(15,14,21,.96)); box-shadow:var(--wao-shadow); }
.wao-account-identity { display:flex; align-items:center; gap:clamp(1rem,3vw,1.75rem); min-width:0; }
.wao-profile-avatar { position:relative; flex:0 0 auto; width:clamp(112px,16vw,168px); aspect-ratio:1; overflow:hidden; border:2px solid rgba(124,111,255,.32); border-radius:50%; background:#171522; box-shadow:0 16px 48px rgba(0,0,0,.32); }
button.wao-profile-avatar { padding:0; cursor:default; }
button.wao-profile-avatar.is-animated { cursor:pointer; }
.wao-profile-avatar:focus-visible { outline:3px solid var(--wao-purple-bright); outline-offset:4px; }
.wao-profile-avatar img,.wao-profile-avatar video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .25s ease; }
.wao-profile-avatar video { opacity:0; }
.wao-profile-avatar.is-playing video { opacity:1; }
.wao-profile-avatar.is-playing img { opacity:0; }
.wao-profile-avatar-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#fff; background:#302b45; font-size:2.6rem; font-weight:850; }
.wao-profile-avatar-fallback.is-loading { color:transparent; background:linear-gradient(100deg,#171622 20%,#2b2740 38%,#171622 56%); background-size:220% 100%; animation:wao-shimmer 1.35s linear infinite; }
.wao-profile-avatar [hidden] { display:none; }
.wao-account-name { margin:.2rem 0 .4rem; font-size:clamp(1.8rem,4vw,3rem); }
.wao-account-detail { margin:.2rem 0; color:var(--wao-muted); }
.wao-animation-hint { margin:.65rem 0 0; color:#c8c2ff; font-size:.8rem; }
.wao-logout { flex:0 0 auto; margin:0; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055); box-shadow:none; }
.wao-account-skeleton { display:flex; align-items:center; gap:clamp(1rem,3vw,1.75rem); padding:clamp(1.25rem,4vw,2rem); border:1px solid var(--wao-border); border-radius:var(--wao-radius); background:linear-gradient(145deg,rgba(25,23,34,.72),rgba(15,14,21,.72)); }
.wao-account-skeleton-avatar { flex:0 0 auto; width:clamp(112px,16vw,168px); aspect-ratio:1; border-radius:50%; }
.wao-account-skeleton-copy { display:grid; gap:.75rem; width:min(360px,52vw); }
.wao-account-skeleton-line { height:14px; border-radius:999px; }
.wao-account-skeleton-line.name { width:62%; height:24px; }
.wao-account-skeleton-avatar,.wao-account-skeleton-line { background:linear-gradient(100deg,#171622 20%,#28243a 38%,#171622 56%); background-size:220% 100%; animation:wao-shimmer 1.35s linear infinite; }
.wao-account-main { width:min(var(--measure-wide),calc(100% - 2rem)); }
.wao-account-completion { display:grid; grid-template-columns:minmax(0,.8fr) minmax(340px,1fr); align-items:start; gap:clamp(1.5rem,5vw,4rem); }
.wao-account-completion-copy { max-width:560px; }
.wao-account-completion-copy h2 { margin:0 0 .7rem; font-size:clamp(1.8rem,4vw,2.7rem); }
.wao-account-completion .wao-form { max-width:none; }
.wao-account-completion .wao-button { width:100%; }
.wao-players-summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; color:var(--wao-muted); font-size:.9rem; }
.wao-players-count { color:var(--wao-gold); font-weight:850; }
.wao-players-hint { color:#c8c2ff; }
.wao-player-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:clamp(.85rem,2vw,1.25rem); }
.wao-player-card { --rarity-rgb:156,163,175; position:relative; min-width:0; overflow:hidden; padding:.8rem; border:2px solid rgba(var(--rarity-rgb),.3); border-radius:14px; background:rgba(255,255,255,.045); transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease; }
.wao-player-card::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(110deg,transparent 20%,rgba(var(--rarity-rgb),.16) 45%,transparent 70%); transform:translateX(-110%); }
.wao-player-card:hover,.wao-player-card:focus-within { transform:translateY(-5px) scale(1.025); border-color:rgba(var(--rarity-rgb),.68); background:rgba(var(--rarity-rgb),.08); box-shadow:0 16px 34px rgba(0,0,0,.3),0 0 28px rgba(var(--rarity-rgb),.2); }
.wao-player-card:hover::before,.wao-player-card:focus-within::before { opacity:1; animation:wao-player-shimmer 1.25s ease-out; }
.wao-player-card.rarity-uncommon { --rarity-rgb:16,185,129; }
.wao-player-card.rarity-rare { --rarity-rgb:59,130,246; }
.wao-player-card.rarity-epic { --rarity-rgb:139,92,246; }
.wao-player-card.rarity-legendary { --rarity-rgb:245,158,11; }
.wao-player-image-wrap { position:relative; aspect-ratio:1; overflow:hidden; border:2px solid rgba(var(--rarity-rgb),.2); border-radius:50%; background:#171522; transition:border-color .25s ease,box-shadow .25s ease; }
.wao-player-card:hover .wao-player-image-wrap,.wao-player-card:focus-within .wao-player-image-wrap { border-color:rgba(var(--rarity-rgb),.7); box-shadow:0 0 20px rgba(var(--rarity-rgb),.25); }
.wao-player-image { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s ease; }
.wao-player-video { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; transition:opacity .22s ease; }
.wao-player-card.is-playing .wao-player-video { opacity:1; }
.wao-player-card.is-playing .wao-player-image { opacity:0; }
.wao-player-card.has-animation .wao-player-image-wrap { cursor:pointer; }
.wao-player-card.is-loaded .wao-player-image { opacity:1; }
.wao-player-card.is-loaded .wao-player-loader { display:none; }
.wao-player-loader { position:absolute; inset:0; background:linear-gradient(100deg,#171622 20%,#2b2740 38%,#171622 56%); background-size:220% 100%; animation:wao-shimmer 1.35s linear infinite; }
.wao-player-copy { position:relative; padding:.75rem .15rem .15rem; text-align:center; }
.wao-player-name { overflow:hidden; margin:0; color:var(--wao-text); font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.wao-player-meta { overflow:hidden; margin:.25rem 0 0; color:var(--wao-muted); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.wao-player-empty { grid-column:1/-1; padding:2.5rem; border:1px solid var(--wao-border); border-radius:var(--wao-radius); color:var(--wao-muted); background:rgba(255,255,255,.025); text-align:center; }
.wao-player-empty[data-state="loading"] { background:linear-gradient(100deg,rgba(23,22,34,.72) 20%,rgba(40,36,58,.72) 38%,rgba(23,22,34,.72) 56%); background-size:220% 100%; animation:wao-shimmer 1.35s linear infinite; }
.wao-player-empty[data-state="error"] { border-color:rgba(255,170,166,.28); color:var(--color-state-error); background:rgba(255,170,166,.07); }
.wao-gallery-controls { display:flex; flex-wrap:wrap; align-items:end; gap:.75rem; }
.wao-gallery-control { display:grid; gap:.35rem; color:var(--wao-muted); font-size:.72rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.wao-select { min-width:170px; padding:.7rem 2.2rem .7rem .8rem; border:1px solid rgba(255,255,255,.16); border-radius:9px; color:var(--wao-text); background:#111018; font:inherit; text-transform:none; }
.wao-select:focus { outline:2px solid var(--wao-purple); outline-offset:1px; }
.wao-public-byline { color:#d5d1df; }
@keyframes wao-player-shimmer { from { transform:translateX(-110%); } to { transform:translateX(110%); } }

/* Shared foundation for the existing challenge and games surfaces. */
body.wao-challenge-page,body.wao-games-page { align-items:stretch; padding-top:0; }
.wao-challenge-page .wao-nav,.wao-games-page .wao-nav { width:100%; }
.wao-challenge-page .screen,.wao-games-page .page { width:min(1080px,calc(100% - 2rem)); margin-right:auto; margin-left:auto; }
.wao-challenge-page .screen { min-height:calc(100vh - 68px); }
.wao-challenge-page .hero-headline,.wao-games-page .page-title { color:var(--wao-text); letter-spacing:-.045em; }
.wao-challenge-page .hero-sub,.wao-games-page .page-sub,.wao-challenge-page .status-msg { color:var(--wao-muted); }
.wao-challenge-page .screen-label,.wao-games-page .page-eyebrow,.wao-challenge-page .prompt-label,.wao-challenge-page .format-kicker { color:var(--wao-gold); }
.wao-challenge-page .prompt-card,.wao-games-page .game-card,.wao-games-page .auth-wall,.wao-games-page .empty-state,.wao-challenge-page .invite-card,.wao-challenge-page .results-card { border:1px solid var(--wao-border); border-radius:var(--wao-radius); background:linear-gradient(145deg,rgba(25,23,34,.96),rgba(15,14,21,.96)); box-shadow:var(--wao-shadow); }
.wao-challenge-page .format-identity,.wao-challenge-page .answer-guidance,.wao-challenge-page .voted-msg,.wao-games-page .new-challenge-strip { border:1px solid rgba(124,111,255,.18); background:rgba(124,111,255,.08); }
.wao-challenge-page .answer-input,.wao-challenge-page input[type="text"],.wao-challenge-page input[type="email"],.wao-challenge-page input[type="password"] { border:1px solid rgba(255,255,255,.16); border-radius:10px; color:var(--wao-text); background:rgba(8,8,12,.78); }
.wao-challenge-page .answer-input:focus,.wao-challenge-page input:focus { border-color:var(--wao-purple-bright); outline:2px solid rgba(124,111,255,.24); outline-offset:1px; }
.wao-challenge-page .btn-primary,.wao-challenge-page .btn-start-vote,.wao-challenge-page .btn-copy-invite-primary,.wao-games-page .btn-cta,.wao-games-page .btn-new-challenge { background:linear-gradient(135deg,#8a7cff,#5b4de8); box-shadow:0 10px 30px rgba(91,77,232,.22); }
.wao-challenge-page .btn-secondary,.wao-challenge-page .btn-copy-link-secondary,.wao-games-page .btn-cta.secondary { border-color:rgba(255,255,255,.14); color:var(--wao-text); background:rgba(255,255,255,.045); }
.wao-games-page .game-card.needs-action { border-color:rgba(124,111,255,.48); background:linear-gradient(145deg,rgba(37,31,60,.92),rgba(18,16,27,.96)); }
.wao-games-page .group-label { color:var(--wao-muted); letter-spacing:.12em; }
.wao-games-page .group-label.action { color:var(--wao-gold); }
.wao-lightbox { width:min(96vw,1100px); max-width:none; border:1px solid var(--wao-border); padding:0; overflow:visible; background:#0d0c12; color:#fff; border-radius:16px; box-shadow:0 28px 90px rgba(0,0,0,.6); }
.wao-lightbox::backdrop { background:rgba(0,0,0,.82); }
.wao-lightbox-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:min(72vh,760px); overflow:hidden; border-radius:16px; background:#08080b; }
.wao-lightbox img { display:block; max-width:100%; max-height:82vh; opacity:0; transition:opacity .25s ease; }
.wao-lightbox.is-loaded img { opacity:1; }
.wao-lightbox.is-loaded .wao-lightbox-skeleton { display:none; }
.wao-lightbox-close { position:absolute; top:.5rem; right:.5rem; border:0; border-radius:50%; width:40px; height:40px; color:#fff; background:rgba(0,0,0,.7); font-size:1.3rem; cursor:pointer; }
.wao-lightbox-nav { position:absolute; top:50%; z-index:2; width:48px; height:64px; margin-top:-32px; border:1px solid rgba(255,255,255,.16); border-radius:12px; color:#fff; background:rgba(8,8,12,.76); font-size:2rem; cursor:pointer; }
.wao-lightbox-prev { left:.75rem; }
.wao-lightbox-next { right:.75rem; }
.wao-lightbox-download { position:absolute; top:.75rem; right:3.7rem; bottom:auto; z-index:2; width:40px; height:40px; background-size:25px 25px; }
@keyframes wao-shimmer { to { background-position:-220% 0; } }
@media (hover:none) { .wao-image-actions { opacity:1; transform:none; } }
@media (max-width:760px) { .wao-nav { align-items:flex-start; flex-direction:column; } .wao-nav-links { width:100%; overflow-x:auto; padding-bottom:.15rem; } .wao-nav-link,.wao-nav-user { padding:.5rem .6rem; font-size:.82rem; white-space:nowrap; } .wao-page-masthead { grid-template-columns:1fr; align-items:start; gap:1rem; } .wao-page-tools { width:100%; justify-self:stretch; } .wao-home-hero,.wao-home-process,.wao-home-games { grid-template-columns:1fr; min-height:0; } .wao-home-hero { gap:2rem; padding:3.5rem 0; } .wao-home-hero h1 { font-size:clamp(3.4rem,17vw,5.3rem); } .wao-home-steps { grid-template-columns:1fr; } .wao-home-steps li { min-height:0; border-top:1px solid var(--wao-border); border-left:0; } .wao-home-games-detail { grid-template-columns:1fr; } .wao-home-games-detail .wao-button { justify-self:start; } .wao-grid { grid-template-columns:1fr; } .wao-image-grid { grid-template-columns:repeat(2,minmax(0,320px)); } .wao-player-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .wao-players-summary { align-items:flex-start; flex-direction:column; gap:.35rem; } .wao-gallery-controls { display:grid; grid-template-columns:1fr 1fr; } .wao-select { width:100%; min-width:0; } .wao-auth-layout,.wao-account-completion { grid-template-columns:1fr; min-height:0; } .wao-auth-intro h1 { font-size:clamp(2.5rem,13vw,4rem); } .wao-lightbox { width:94vw; } .wao-lightbox-stage { min-height:60vh; } .wao-lightbox-nav { width:42px; height:54px; } .wao-account-card { align-items:flex-start; flex-direction:column; } .wao-account-identity { align-items:flex-start; flex-direction:column; } .wao-account-skeleton { align-items:flex-start; flex-direction:column; } .wao-account-skeleton-copy { width:80%; } }
@media (max-width:520px) { .wao-image-grid { grid-template-columns:minmax(0,320px); } }