:root {
    --bg: #0b1020;
    --surface: #111a2d;
    --raised: #1a2740;
    --line: #263550;
    --text: #f3f6ff;
    --muted: #9ba9c2;
    --gold: #b6fb56;
    --gold-hover: #cbff84;
    --gold-ink: #14230b;
    --violet: #7a9cff;
    --ok: #6ee7b7;
    --danger: #ff8a98;
    --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

h1, h2, h3 { font-family: var(--display); letter-spacing: -0.01em; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }

/* ===== Top bar ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
    background: rgba(19, 14, 31, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.logo {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text);
    text-decoration: none;
}

.logo span { color: var(--gold); }

.auth-bar { display: flex; gap: 0.5rem; align-items: center; }

/* ===== Hero ===== */
.hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(2.5rem, 8vw, 5.5rem) clamp(1rem, 4vw, 2.5rem) 1.5rem;
}

.hero h1 {
    margin: 0 0 1rem;
    max-width: 14ch;
    font-size: clamp(2.5rem, 7vw, 4.75rem);
    line-height: 1.02;
    font-weight: 800;
}

.hero p {
    margin: 0;
    max-width: 52ch;
    font-size: 1.15rem;
    color: var(--muted);
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 4rem;
}

.game-catalog h2 { margin: 0 0 1.25rem; font-size: 1.5rem; }

/* ===== Game cards ===== */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.game-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.game-card:hover { transform: translateY(-3px); border-color: var(--violet); }

.game-cover {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
}

.game-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.1rem 1.25rem 1.25rem;
}

.game-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.game-card h3 { margin: 0; font-size: 1.3rem; }
.game-card p { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.95rem; }

.badges { display: flex; gap: 0.35rem; flex-shrink: 0; }

.badge {
    background: var(--raised);
    color: var(--violet);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-new { background: var(--gold); color: var(--gold-ink); }

.card-actions { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 1.1rem; }

/* ===== Buttons ===== */
button {
    font-family: inherit;
    border: none;
    padding: 0.65rem 1.1rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-play, .submit-btn { background: var(--gold); color: var(--gold-ink); }
.btn-play:hover, .submit-btn:hover { background: var(--gold-hover); }
.btn-play { flex: 1; }

.btn-review, .btn-review-inline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
}
.btn-review:hover, .btn-review-inline:hover { border-color: var(--violet); color: var(--violet); }
.btn-review { flex: 1; }
.btn-review-inline { font-size: 0.85rem; padding: 0.45rem 0.8rem; }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
}
.btn-ghost:hover { background: var(--raised); border-color: var(--violet); }

.link-btn {
    background: none;
    padding: 0;
    color: var(--violet);
    text-decoration: underline;
    font-weight: 600;
    font-size: inherit;
}

.btn-google { width: 100%; margin-top: 1rem; background: #f8fafc; color: #1e293b; }

.submit-btn { width: 100%; margin-top: 1.5rem; }
.submit-btn:disabled { opacity: 0.6; cursor: wait; }

/* ===== Modals ===== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 5, 16, 0.82);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    z-index: 1000;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 450px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.modal-content h2 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.modal-content h3 { margin: 1.5rem 0 0.75rem; font-size: 1.1rem; }

.game-modal-content {
    max-width: 800px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

.profile-modal-content { max-width: 580px; }

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.modal-header h2 { margin: 0; font-size: 1.25rem; }
.modal-header-btns { display: flex; align-items: center; gap: 0.5rem; }

.iframe-container {
    width: 100%;
    height: 620px;
    max-height: 75vh;
    background: #150f22;
    border-radius: 10px;
    overflow: hidden;
}
iframe { width: 100%; height: 100%; border: none; }

.close-btn { background: transparent; font-size: 1.6rem; line-height: 1; color: var(--muted); padding: 0 0.25rem; }
.close-btn:hover { color: var(--text); background: transparent; }
.modal-content > .close-btn { position: absolute; top: 0.75rem; right: 1rem; }

/* ===== Forms ===== */
label { display: block; margin: 1rem 0 0.4rem; font-size: 0.9rem; color: var(--muted); }

select, textarea, input[type="email"], input[type="text"], input[type="password"] {
    width: 100%;
    padding: 0.7rem 0.8rem;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 10px;
}

.inline-form { display: flex; gap: 0.5rem; }
.inline-form input { flex: 1; }

#success-message { color: var(--ok); text-align: center; margin-top: 1rem; font-weight: 600; }
.form-note { color: var(--ok); margin: 1rem 0 0; font-size: 0.9rem; }
.form-note.is-error { color: var(--danger); }
.guest-note { color: var(--muted); font-size: 0.85rem; text-align: center; margin: 1rem 0 0; }

.divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0 0; color: var(--muted); font-size: 0.85rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.tabs { display: flex; margin-top: 1rem; border-bottom: 1px solid var(--line); }
.tab { flex: 1; background: transparent; color: var(--muted); border-radius: 0; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.auth-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 1rem; font-size: 0.85rem; }

/* ===== Profile & achievements ===== */
.xp-bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; margin: 0.75rem 0 1rem; }
#xp-fill { height: 100%; width: 0; background: var(--gold); transition: width 0.4s ease; }

.guest-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--muted);
}
.guest-banner .btn-play { flex: none; white-space: nowrap; }

.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; }

.achievement {
    display: flex;
    gap: 0.75rem;
    padding: 0.8rem;
    background: var(--bg);
    border: 1px solid var(--gold);
    border-radius: 10px;
}
.achievement.locked { border-color: var(--line); opacity: 0.5; filter: grayscale(1); }
.achievement-icon { font-size: 1.75rem; line-height: 1; }
.achievement-body { display: flex; flex-direction: column; gap: 0.15rem; }
.achievement-xp { font-size: 0.75rem; color: var(--gold); font-weight: 600; }

.profile-modal-content .btn-ghost { margin-top: 1rem; }

/* ===== Toasts ===== */
#toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2000;
    max-width: calc(100vw - 2rem);
}

.toast {
    background: var(--raised);
    border: 1px solid var(--gold);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    animation: toast-in 0.25s ease-out;
}

@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== Accessibility & small screens ===== */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .toast, .game-card, #xp-fill { animation: none; transition: none; }
}

@media (max-width: 640px) {
    .site-header { flex-wrap: wrap; }
    .guest-banner { flex-direction: column; align-items: stretch; }
    .modal-content { padding: 1.5rem; }
}
/* Game Test Labs — launch visual system */
html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:radial-gradient(ellipse at 75% 2%,#162542 0,transparent 38%),var(--bg)}
.site-header{padding:1rem clamp(1.25rem,5vw,5rem);background:rgba(11,16,32,.92);border-color:#26334a;min-height:80px}.logo{display:flex;align-items:center;gap:.75rem;font-size:1rem;letter-spacing:.06em}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--gold);color:#10201c;font-size:1.3rem;font-weight:800;letter-spacing:-.12em}.brand-mark span{color:#10201c;font-size:.75rem;margin-left:-4px}.brand-word{white-space:nowrap}.brand-word em{font-style:normal;color:var(--gold)}.site-nav{display:flex;gap:2rem;margin:auto}.site-nav a{color:#c7d0e4;text-decoration:none;font-size:.9rem;font-weight:600}.site-nav a:hover{color:var(--gold)}
.hero{max-width:1380px;min-height:570px;padding:5rem clamp(1.25rem,5vw,5rem) 5rem;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:4rem}.hero h1{max-width:none;font-size:clamp(3.25rem,5.4vw,5.8rem);line-height:1.06;letter-spacing:-.055em;margin:1.4rem 0}.hero p{max-width:570px;font-size:1.1rem;line-height:1.75}.eyebrow,.section-kicker{font-size:.75rem;letter-spacing:.2em;font-weight:800;color:var(--gold)}.eyebrow{display:flex;align-items:center;gap:.7rem}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px #b6fb5620}.gradient-text{background:linear-gradient(95deg,#b6fb56,#6ee9df);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0}.hero-primary,.hero-secondary{display:inline-flex;align-items:center;justify-content:center;gap:2rem;padding:1rem 1.4rem;border-radius:10px;font-weight:800;text-decoration:none}.hero-primary{background:var(--gold);color:#12220a}.hero-primary:hover{background:var(--gold-hover)}.hero-secondary{border:1px solid #3a4a65;color:var(--text)}.hero-secondary:hover{border-color:var(--gold)}.hero-proof{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:#a8b8ce}.proof-icon{color:var(--gold)}.proof-divider{padding:0 .65rem;color:#50617e}
.hero-art{position:relative;min-height:430px;display:grid;place-items:center}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#4c64801c 1px,transparent 1px),linear-gradient(90deg,#4c64801c 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(ellipse,#000 25%,transparent 75%)}.art-glow{position:absolute;width:75%;height:65%;background:#84fb6d;filter:blur(100px);opacity:.13}.art-panel{position:relative;width:min(100%,390px);min-height:380px;transform:rotate(4deg);border:1px solid #43536e;border-radius:20px;background:linear-gradient(150deg,#1c2d49,#111c31 70%);box-shadow:0 35px 70px #0008;padding:1.5rem;overflow:hidden}.art-panel:after{content:'';position:absolute;width:270px;height:270px;border:1px solid #b6fb5630;border-radius:50%;right:-100px;top:80px;box-shadow:0 0 0 45px #b6fb5608,0 0 0 95px #b6fb5605}.art-panel-top,.art-panel-bottom{display:flex;justify-content:space-between;align-items:center;font-size:.65rem;letter-spacing:.15em;color:#9aaac1;font-weight:700}.art-led{display:inline-block;width:8px;height:8px;background:var(--gold);border-radius:50%;margin-right:6px}.art-symbol{font-size:3.5rem;color:var(--gold);margin:1rem 0 0}.art-big{position:relative;z-index:1;font-family:var(--display);font-size:clamp(3.7rem,5.8vw,5.7rem);font-weight:800;letter-spacing:-.08em;line-height:.95}.art-big span{color:var(--gold)}.art-panel-bottom{margin-top:1.3rem;border-top:1px solid #34465e;padding-top:1rem}.floating-tag{position:absolute;z-index:2;bottom:12px;left:0;transform:rotate(-5deg);padding:.8rem 1rem;background:var(--gold);color:#1a2a12;font-size:.7rem;letter-spacing:.08em;font-weight:900;border-radius:8px;box-shadow:0 12px 25px #0005}
main{max-width:1380px;padding:1rem clamp(1.25rem,5vw,5rem) 5rem}.game-catalog{padding:2rem 0 4rem}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin:1rem 0 2rem}.section-heading h2,.how-section h2{font-size:clamp(2rem,3.5vw,3.3rem);letter-spacing:-.045em;line-height:1.15;margin:0}.section-heading p{color:var(--muted);margin:.7rem 0 0}.heading-period{color:var(--gold)}.section-label{font-size:.7rem;letter-spacing:.13em;color:var(--gold);font-weight:800;white-space:nowrap}.game-card{border-radius:16px;box-shadow:0 12px 30px #0002}.game-card:hover{transform:translateY(-5px);border-color:#658e63}.game-cover{background-color:#1b2843}.game-card-body{padding:1.4rem}.game-card h3{font-size:1.25rem}.card-actions{padding-top:1.5rem}.how-section{padding:4rem 0 3rem;border-top:1px solid var(--line)}.how-section h2{margin:1rem 0 2rem}.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.how-grid article{padding:2rem;background:var(--surface);border:1px solid var(--line);border-radius:16px}.step-num{color:var(--gold);font-size:.7rem;font-weight:800;letter-spacing:.15em}.step-icon{font-size:2.6rem;color:#86e8d9;margin:1.5rem 0}.how-grid h3{font-size:1.3rem;margin:0 0 .5rem}.how-grid p{color:var(--muted);margin:0;line-height:1.65}.site-footer{border-top:1px solid var(--line);padding:2.5rem clamp(1.25rem,5vw,5rem);display:flex;justify-content:space-between;align-items:center;gap:2rem}.footer-brand{font-family:var(--display);font-weight:800;letter-spacing:.06em}.footer-brand span{color:var(--gold)}.footer-brand small{display:block;color:var(--muted);font-size:.65rem;margin-top:.3rem}.footer-right{display:flex;flex-direction:column;align-items:end;gap:.35rem;color:var(--muted);font-size:.8rem}
@media(max-width:900px){.site-nav{display:none}.hero{grid-template-columns:1fr;padding-top:3.5rem;gap:1rem}.hero-art{min-height:350px}.art-panel{min-height:320px;max-width:340px}.art-big{font-size:4.5rem}.how-grid{grid-template-columns:1fr}.how-grid article{padding:1.5rem}.section-label{display:none}}@media(max-width:550px){.site-header{min-height:70px;padding:1rem}.brand-mark{width:36px;height:36px}.brand-word{font-size:.78rem}.hero{padding:3rem 1.2rem 2rem}.hero h1{font-size:clamp(2.6rem,10vw,3.6rem)}.hero-art{min-height:320px}.art-panel{width:85%;min-height:290px;padding:1.2rem}.art-big{font-size:3.8rem}.floating-tag{font-size:.58rem}.hero-actions{gap:.65rem}.hero-primary,.hero-secondary{gap:.8rem;padding:.9rem}.site-footer{align-items:flex-start;flex-direction:column}.footer-right{align-items:flex-start}.section-heading h2{font-size:2rem}}

/* Refined launch header branding */
.site-header{min-height:78px;padding-block:.8rem;gap:1.5rem}
.site-header .logo{display:inline-flex;align-items:center;gap:1rem;flex-shrink:0;color:#f5f8ff;text-decoration:none;letter-spacing:.035em}
.site-header .brand-mark{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;background:transparent;border-radius:0;letter-spacing:normal;box-shadow:none}
.site-header .brand-mark svg{width:48px;height:48px;display:block;filter:drop-shadow(0 0 10px rgba(184,255,89,.13))}
.site-header .brand-word{font-size:1.03rem;font-weight:800;letter-spacing:.055em;white-space:nowrap;color:#f4f7ff}
.site-header .brand-word em{color:#b8ff59;font-style:normal}
.site-header .logo:hover .brand-mark svg{filter:drop-shadow(0 0 12px rgba(184,255,89,.32))}
.site-nav a:focus-visible,.site-header .logo:focus-visible{outline:2px solid #b8ff59;outline-offset:5px;border-radius:4px}
@media(max-width:550px){.site-header{min-height:68px;padding:.65rem 1rem;gap:.65rem}.site-header .logo{gap:.6rem}.site-header .brand-mark,.site-header .brand-mark svg{width:38px;height:38px}.site-header .brand-word{font-size:.79rem;letter-spacing:.025em}}