:root{font-family:Inter,system-ui,Arial,sans-serif;color:#f7f8ff;background:#080d20}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 85% 5%,#302468 0%,transparent 48%),#080d20;min-height:100vh}
header{max-width:1120px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:24px}
strong.logo{font-size:24px;letter-spacing:1px}
strong.logo span{color:#b6a0ff}
.btn{background:linear-gradient(110deg,#815aff,#bd64f8);border:0;color:white;padding:13px 22px;border-radius:12px;font-weight:750;cursor:pointer;text-decoration:none;display:inline-block}
button:disabled{opacity:.6;cursor:wait}
main{max-width:1120px;margin:auto;padding:45px 24px 90px}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:55px;align-items:center;min-height:470px}
h1{font-size:clamp(42px,5vw,72px);line-height:1.08;margin:14px 0 22px}
h1 em{font-style:normal;color:#ba9cff}
p{color:#b9c0d9;line-height:1.7}
.tag{display:inline-block;color:#cab7ff;background:#49357966;padding:8px 13px;border-radius:30px;font-size:12px;font-weight:700}
.panel{background:#171b36;border:1px solid #434169;border-radius:26px;padding:34px;box-shadow:0 25px 70px #0006}
.panel h2{margin:0 0 10px;font-size:29px}
label{display:block;margin:23px 0 9px;font-size:13px;color:#ccd1e7}
input{width:100%;background:#0c1229;border:1px solid #555576;border-radius:12px;padding:16px;color:white;font-size:17px}
input:focus{outline:2px solid #9b75ff}
.panel button{width:100%;margin-top:19px;font-size:16px}
.small{font-size:12px;color:#aeb5cf}
.message{min-height:26px;color:#f8c7a6;font-size:13px;margin-top:12px}
.games{margin-top:65px}
.games h2{font-size:32px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.game{border:1px solid #373e62;background:#151b35;padding:24px;border-radius:18px}
.game b{display:block;font-size:20px;margin:12px 0 4px}
.emoji{font-size:42px}
.navlink{margin-right:20px;text-decoration:none}
.avatar{font-size:60px;background:#302657;border-radius:50%;width:110px;height:110px;display:grid;place-items:center;margin:20px 0}
footer{padding:30px;text-align:center;color:#9ba4c5;border-top:1px solid #333852}
a{color:#c5b0ff}
.hidden{display:none!important}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:22px}main{padding-top:15px}.cards{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cards{grid-template-columns:1fr}.panel{padding:22px}header{padding:18px}strong.logo{font-size:19px}}

/* classes replacing the former inline style="" attributes (a strict CSP allows no inline styles) */
strong.logo span.logo-sub{font-size:12px;color:#aab0cb}
.emoji-hero{font-size:95px;text-align:center;padding:30px}
.btn-alt{background:#323758}