/* ===== EB Games — Global Styles (shared by portal + all games) ===== */
:root{
  --bg:#0b0f1a;
  --panel:#0f172a;
  --panel-2:#0c1222;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#22d3ee;
  --danger:#ef4444;
  --success:#22c55e;
  --ring:rgba(34,211,238,.45);
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-tap-highlight-color: transparent;
}

/* Layout helpers */
.container{max-width:980px;margin:0 auto;padding:20px}
.card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:20px;
  margin:18px 0;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

/* Header/Footer (portal pages) */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(11,15,26,.95),rgba(11,15,26,.7));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:900;font-size:22px;letter-spacing:.3px}
.brand span{color:var(--accent)}
.nav a{
  color:var(--text);text-decoration:none;margin-left:14px;padding:8px 10px;border-radius:10px;transition:.2s;
}
.nav a:hover{background:rgba(255,255,255,.06)}

.site-footer{border-top:1px solid rgba(255,255,255,.06);background:var(--panel-2);margin-top:24px}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.footer-link{color:var(--accent);text-decoration:none}

/* Typography */
h1,h2,h3{margin:0 0 .4em}
.muted{color:var(--muted)}
.mini{font-size:.9rem}
.hidden{display:none}

/* ===== Top Game Bar (shared UI across games) ===== */
.top-bar{
  position:fixed;left:0;right:0;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(12,18,34,.95),rgba(12,18,34,.6));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}
.top-bar .group{display:flex;align-items:center;gap:10px}
.stat{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.06);
  padding:6px 10px;border-radius:12px;
  font-weight:700;
}

/* ===== Buttons (Home, Pause, Sound, Play, etc.) ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:10px 14px;border:none;border-radius:12px;
  background:rgba(255,255,255,.10);color:var(--text);
  cursor:pointer;font-weight:800;text-decoration:none;
  outline:2px solid transparent;transition:.15s;
}
.btn:hover{background:rgba(255,255,255,.16)}
.btn:focus{outline-color:var(--ring)}
.btn--accent{background:var(--accent);color:#000}
.btn--danger{background:var(--danger)}
.btn--success{background:var(--success)}
.btn--icon{width:40px;height:40px;padding:0;border-radius:12px}

/* Suggested placements */
.btn--home{position:fixed;left:12px;top:12px;z-index:45}
.btn--pause{position:fixed;right:12px;top:12px;z-index:45}
.btn--sound{position:fixed;right:62px;top:12px;z-index:45}

/* ===== Panels (Pause/GameOver/Ads) ===== */
.panel{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);
}
.panel.is-open{display:flex}
.panel__card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:22px;max-width:520px;width:92%;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  text-align:center;
}
.panel__title{margin:0 0 10px}
.panel__row{display:flex;gap:10px;justify-content:center;margin-top:14px}

/* ===== Game Canvas/Safe Area (portrait 9:16) ===== */
.game-wrap{padding-top:66px}         /* keep game content under top-bar */
.game-canvas{
  width:100%;
  max-width:1080px;
  aspect-ratio:9/16;                 /* keeps portrait shape */
  margin:0 auto;
  background:#0a0e19;                /* fallback if game doesn’t fill */
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ===== Forms (Contact page also uses these) ===== */
form .field{display:grid;gap:6px;margin:10px 0}
input[type="text"],
input[type="email"],
textarea{
  width:100%;padding:12px;border:none;border-radius:12px;
  background:#111827;color:#fff;outline:2px solid transparent;transition:.15s;
}
input:focus, textarea:focus{outline-color:var(--ring)}