@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#eaf2ff; --muted:#a9b7cc; --navy:#0c1527; --card:#15233b; --line:rgba(205,224,255,.15); --blue:#55a8ff; --cyan:#57e6d0; --danger:#ff8787; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:Manrope,Arial,sans-serif; background:radial-gradient(circle at 15% -10%,#274f86 0,transparent 31rem),radial-gradient(circle at 100% 20%,#163e61 0,transparent 28rem),var(--navy); min-height:100vh; }
.container { max-width:1030px; margin:auto; padding:64px 24px 28px; }
.hero { padding:8px 0 38px; max-width:750px; }
.badge { display:inline-block; color:var(--cyan); font:500 12px 'DM Mono',monospace; letter-spacing:1.7px; border:1px solid rgba(87,230,208,.4); border-radius:99px; padding:8px 12px; }
h1 { margin:18px 0 12px; font-size:clamp(32px,5vw,56px); line-height:1.06; letter-spacing:-2.3px; }
p { color:var(--muted); line-height:1.65; margin:0; }
.rules { margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }.rules span { color:#c9dcf8; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:13px; }
.card { border:1px solid var(--line); border-radius:18px; background:rgba(21,35,59,.82); padding:27px; margin-bottom:16px; box-shadow:0 22px 45px rgba(0,0,0,.12); }
h2 { margin:0 0 19px; font-size:20px; letter-spacing:-.6px; }.fields { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; }
label { display:block; color:#dbe9fc; font-size:13px; font-weight:700; } input[type=text],select { margin-top:7px; width:100%; color:var(--ink); background:#0c172b; border:1px solid #344a69; border-radius:10px; padding:13px; outline:none; font:500 15px Manrope,sans-serif; } select { cursor:pointer; } option { background:#0c172b; } input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(85,168,255,.16); }
.section-heading { display:flex; justify-content:space-between; gap:16px; align-items:start; margin-bottom:22px; }.section-heading h2 { margin-bottom:4px; }.section-heading p { font-size:14px; }.counter { flex:none; min-width:112px; text-align:center; color:#cbe2ff; background:#0c172b; border:1px solid #344a69; padding:9px; border-radius:9px; font:500 12px 'DM Mono',monospace; }.counter.good { color:#04251f; background:var(--cyan); border-color:var(--cyan); }
.games-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.game-option { min-height:55px; display:flex; gap:9px; align-items:center; border:1px solid #344a69; background:#101d32; padding:11px; border-radius:10px; cursor:pointer; transition:.15s ease; }.game-option:hover { border-color:#6b9ed4; transform:translateY(-1px); }.game-option input { position:absolute; opacity:0; }.tick { height:20px; width:20px; display:grid; place-items:center; flex:none; border:1px solid #496485; color:transparent; border-radius:6px; transition:.15s; }.game-option:has(input:checked) { background:rgba(85,168,255,.16); border-color:var(--blue); }.game-option:has(input:checked) .tick { color:#07223e; background:var(--blue); border-color:var(--blue); }
.other-label { margin-top:23px; }.other-label span { color:var(--muted); font-weight:400; }.notice { margin:16px 0; padding:15px 17px; color:#d5e7ff; background:rgba(85,168,255,.11); border-left:3px solid var(--blue); border-radius:8px; font-size:14px; line-height:1.55; }.submit { width:100%; cursor:pointer; color:#06223a; background:var(--cyan); border:0; border-radius:11px; font:800 16px Manrope,sans-serif; padding:17px; transition:.16s; }.submit:hover { background:#84f4e2; transform:translateY(-1px); }.submit span { font-size:22px; margin-left:7px; vertical-align:-1px; }.privacy { font-size:12px; text-align:center; margin:13px 0 0; }.message { margin:0 0 17px; padding:17px; border-radius:12px; line-height:1.55; }.success { color:#d7fff7; background:rgba(87,230,208,.13); border:1px solid rgba(87,230,208,.45); }.error { color:#ffe2e2; background:rgba(255,90,90,.13); border:1px solid rgba(255,135,135,.52); }.error ul { margin:7px 0 0 19px; } footer { padding:22px; color:#7f93b1; text-align:center; font-size:12px; } footer span { color:var(--cyan); margin:0 8px; }
@media(max-width:700px) { .container{padding:40px 16px 18px}.hero{padding-bottom:27px}h1{letter-spacing:-1.5px}.card{padding:20px 16px}.fields,.games-grid{grid-template-columns:1fr}.section-heading{display:block}.counter{display:inline-block;margin-top:14px}.game-option{min-height:51px} }