*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#05070d;--cyan:#00f6ff;--ink:#dffcff;--card:rgba(5,7,13,.72);--line:rgba(0,246,255,.18);--shadow:0 0 22px rgba(0,246,255,.22)}
html,body{width:100%;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;overflow:hidden}
a{color:var(--ink);text-decoration:none;opacity:.9}a:hover{opacity:1}
#gameCanvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;display:block}
.hud{position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:16px;pointer-events:none}
.hud__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand__logo{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 12px var(--cyan))}
.brand__name{font-weight:800}.brand__tagline{opacity:.85;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud__controls{display:flex;gap:10px;pointer-events:auto}
.hud__center{display:flex;justify-content:center;align-items:center}
.panel{width:min(520px,92vw);background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;backdrop-filter:blur(10px)}
.panel__title{font-weight:900;font-size:18px;margin-bottom:6px}
.panel__desc{opacity:.92;line-height:1.4;margin-bottom:12px}
.panel__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.stat{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(0,0,0,.18)}
.stat__label{display:block;opacity:.75;font-size:12px}
.stat__value{display:block;font-size:18px;font-weight:900;margin-top:2px}
.panel__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;pointer-events:auto}
.panel__hint{margin-top:10px;opacity:.75;font-size:12px}
.hud__bottom{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tiny{font-size:12px;opacity:.75}
.btn{pointer-events:auto;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.18);color:var(--ink);padding:12px 16px;cursor:pointer;transition:transform .12s ease, background .2s ease, border-color .2s ease}
.btn:hover{background:rgba(0,246,255,.12);border-color:rgba(0,246,255,.35)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:rgba(0,246,255,.16);border-color:rgba(0,246,255,.42);box-shadow:var(--shadow);font-weight:800}
.btn--outline{background:transparent;border-color:rgba(0,246,255,.32)}
.btn--ghost{background:rgba(0,0,0,.22)}
.btn--small{padding:10px 12px;border-radius:12px}
.landing{position:relative;z-index:2;opacity:0;pointer-events:none;min-height:100vh;overflow:auto}
.landing.is-live{opacity:1;pointer-events:auto}
.nav{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:rgba(5,7,13,.72);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.nav__brand{display:flex;align-items:center;gap:10px}
.nav__logo{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 10px var(--cyan))}
.nav__name{font-weight:900}
.nav__links{display:flex;gap:14px;flex-wrap:wrap}
.nav__links a{font-size:14px;opacity:.8}.nav__links a:hover{opacity:1}
.section{max-width:980px;margin:0 auto;padding:64px 16px}
.section h2{font-size:28px;margin-bottom:10px}
.lead{opacity:.9;line-height:1.5;max-width:72ch}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}
.hero h1{font-size:44px;line-height:1.05;margin-bottom:12px}
.hero p{opacity:.92;line-height:1.6;max-width:72ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.hero__note{opacity:.75;font-size:13px;margin-top:8px}
.hero__cards{display:grid;gap:12px}
.card{border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.18);padding:14px;box-shadow:var(--shadow)}
.card__kicker{opacity:.8;font-size:12px;margin-bottom:6px}
.card__title{font-weight:900;margin-bottom:6px}
.card__desc{opacity:.85;line-height:1.4;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.tile{border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.16);padding:16px}
.tile__title{font-weight:900;margin-bottom:6px}
.tile__desc{opacity:.85;line-height:1.45}
.steps{display:grid;gap:10px;margin-top:18px}
.step{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.16);padding:14px}
.step__num{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(0,246,255,.12);border:1px solid rgba(0,246,255,.26);font-weight:900}
.muted{opacity:.75}
.contact .form{margin-top:18px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.16);padding:16px}
.form label{display:block;font-size:14px;opacity:.9;margin-bottom:10px}
.form input,.form textarea{width:100%;margin-top:6px;padding:12px;border-radius:14px;border:1px solid rgba(0,246,255,.22);background:rgba(5,7,13,.65);color:var(--ink);outline:none}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.footer{border-top:1px solid var(--line);padding:22px 16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:980px;margin:0 auto}
.transition{position:fixed;inset:0;z-index:4;display:none;place-items:center;background:rgba(5,7,13,.85);backdrop-filter:blur(10px)}
.transition.is-on{display:grid}
.transition__ring{width:120px;height:120px;border-radius:999px;border:2px solid rgba(0,246,255,.35);box-shadow:var(--shadow);animation:ring 1.2s linear infinite}
.transition__text{margin-top:12px;opacity:.9;font-weight:800}
@keyframes ring{to{transform:rotate(360deg)}}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero h1{font-size:38px}.grid{grid-template-columns:1fr}.nav__links{display:none}}

/* Return-to-game floating button (mobile friendly) */
.fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(0,246,255,.35);
  background: rgba(0,0,0,.22);
  color: var(--ink);
  display: none;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.landing.is-live .fab{ display: grid; }
@media (min-width: 901px){
  .landing.is-live .fab{ display: none; }
}
.nav__cta{display:flex;gap:10px;align-items:center}

/* Control lock UI */
.panel__lock{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(0,0,0,.16);
}
.lock__label{opacity:.8;font-size:12px;font-weight:700}
.lock__group{display:flex;gap:8px;flex-wrap:wrap}
.lockbtn{padding:10px 12px}
.lockbtn.is-on{
  background:rgba(0,246,255,.14);
  border-color:rgba(0,246,255,.42);
  box-shadow: var(--shadow);
  font-weight:800;
}

/* When game is active, hide the big center panel so the player can see the action */
.hud.playing .hud__center{display:none}
/* Keep top/bottom visible while playing */
.hud.playing{pointer-events:none}
.hud.playing .hud__controls,
.hud.playing .hud__bottom{pointer-events:auto}