/* ════════════════════════════════════════════════════════════════════════
   Helixra shared game start-menu + navbar.
   Used by both /olinda/ and /nerenchi/ so the two startup screens are
   identical. Relies on the per-page theme tokens (--font-sans, --text-main,
   --accent-amber, --border-mid, …) which both game pages define.
   ════════════════════════════════════════════════════════════════════════ */

.gm-overlay{
  position:fixed; inset:0; z-index:400;
  display:flex; flex-direction:column;
  background:var(--bg-surface,#f6f2e8);
  overflow-y:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.gm-overlay[hidden]{ display:none; }
/* warm texture wash, same image that reads through the landing page */
.gm-overlay::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url('/assets/main_gack/footer.png') center center / cover no-repeat;
  opacity:0.07;
}

/* ── navbar ── */
.gm-nav{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.6rem;
}
.gm-nav-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.gm-nav-brand img{ height:28px; width:auto; }
.gm-nav-brand span{ font-family:var(--font-display,sans-serif); font-size:1.05rem; font-weight:700; letter-spacing:-0.01em; color:var(--text-main,#110701); }
.gm-nav-links{ display:flex; gap:0.25rem; list-style:none; margin:0 auto 0 1.4rem; padding:0; }
.gm-nav-links a{ font-family:var(--font-sans,sans-serif); font-size:0.78rem; font-weight:500; color:var(--text-muted,#46372c); padding:0.45rem 0.9rem; border-radius:8px; text-decoration:none; transition:all .2s ease; }
.gm-nav-links a:hover{ color:var(--text-main,#110701); background:rgba(17,7,1,0.05); }
.gm-nav-account{ display:flex; align-items:center; gap:0.5rem; margin-left:auto; }
.gm-login{ font-family:var(--font-sans,sans-serif); font-size:0.78rem; font-weight:600; color:var(--text-muted,#46372c); padding:0.5rem 0.9rem; border-radius:8px; text-decoration:none; transition:all .2s ease; white-space:nowrap; }
.gm-login:hover{ color:var(--text-main,#110701); background:rgba(17,7,1,0.05); }
.gm-cta{ font-family:var(--font-sans,sans-serif); font-size:0.78rem; font-weight:600; padding:0.55rem 1.3rem; background:var(--text-main,#110701); color:#fff; border-radius:8px; text-decoration:none; transition:all .2s ease; white-space:nowrap; }
.gm-cta:hover{ background:var(--accent-amber,#b97217); }
.gm-account-btn{ display:inline-flex; align-items:center; gap:0.55rem; font-family:var(--font-sans,sans-serif); font-size:0.78rem; font-weight:600; color:var(--text-main,#110701); padding:0.35rem 0.9rem 0.35rem 0.4rem; border:1px solid var(--border-mid,rgba(17,7,1,.12)); border-radius:999px; text-decoration:none; transition:all .2s ease; white-space:nowrap; }
.gm-account-btn:hover{ border-color:var(--accent-amber,#b97217); color:var(--accent-amber,#b97217); }
.gm-avatar{ flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:#fff; background:linear-gradient(150deg,var(--accent-amber,#b97217),var(--accent-red,#aa1f1f)); }

/* ── centred card ── */
.gm-main{ position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center; padding:1.5rem 1.5rem 3rem; }
.gm-card{ width:100%; max-width:440px; text-align:center; }
.gm-logo{ width:clamp(180px,40vw,300px); height:auto; display:block; margin:0 auto 0.7rem; }
.gm-eyebrow{ font-family:var(--font-sans,sans-serif); font-size:0.6rem; letter-spacing:0.24em; text-transform:uppercase; color:rgba(17,7,1,0.34); font-weight:700; }
.gm-title{ font-family:var(--font-display,sans-serif); font-size:clamp(1.9rem,5vw,2.7rem); font-weight:600; letter-spacing:-0.03em; color:var(--text-main,#110701); margin-top:0.5rem; line-height:1.05; }
.gm-sub{ font-family:var(--font-sans,sans-serif); font-size:1rem; color:var(--accent-amber,#b97217); font-style:italic; margin-top:0.3rem; }

.gm-sep{ width:64px; height:1px; background:var(--border-mid,rgba(17,7,1,.12)); margin:1.6rem auto; }

/* ── mode selector ── */
.gm-modes{ display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:1.6rem; }
.gm-mode{
  display:flex; flex-direction:column; align-items:flex-start; gap:0.25rem;
  text-align:left; padding:1.1rem 1.2rem; cursor:pointer;
  background:var(--bg-card,#fff); border:1px solid var(--border-mid,rgba(17,7,1,.12)); border-radius:16px;
  transition:all .2s ease; font-family:inherit;
}
.gm-mode:hover{ border-color:rgba(185,114,23,0.5); transform:translateY(-1px); }
.gm-mode.is-active{ border-color:var(--accent-amber,#b97217); box-shadow:0 0 0 2px rgba(185,114,23,0.18); background:#fffdf9; }
.gm-mode-ic{ font-size:1.3rem; line-height:1; margin-bottom:0.3rem; }
.gm-mode-t{ font-family:var(--font-display,sans-serif); font-size:0.98rem; font-weight:600; color:var(--text-main,#110701); letter-spacing:-0.01em; }
.gm-mode-d{ font-family:var(--font-sans,sans-serif); font-size:0.76rem; color:var(--text-muted,#46372c); opacity:0.8; line-height:1.4; }

/* ── actions ── */
.gm-actions{ display:flex; flex-direction:column; gap:0.7rem; }
.gm-btn{
  width:100%; justify-content:center; display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-sans,sans-serif); font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:1.05rem 1.4rem; border-radius:12px; cursor:pointer; text-decoration:none;
  transition:all .2s ease; border:1px solid transparent; position:relative; overflow:hidden;
}
.gm-btn-primary{ background:var(--text-main,#110701); color:#fff; border-color:var(--text-main,#110701); }
.gm-btn-primary::before{ content:''; position:absolute; inset:0; background:var(--accent-amber,#b97217); z-index:0; transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.gm-btn-primary:hover::before{ transform:scaleX(1); transform-origin:left; }
.gm-btn-primary:hover{ border-color:var(--accent-amber,#b97217); box-shadow:0 12px 24px rgba(185,114,23,0.18); }
.gm-btn-primary > *{ position:relative; z-index:1; }
.gm-btn-ghost{ background:transparent; color:var(--text-muted,#46372c); border-color:var(--border-mid,rgba(17,7,1,.14)); }
.gm-btn-ghost:hover{ border-color:var(--text-main,#110701); color:var(--text-main,#110701); }

.gm-foot{ margin-top:1.8rem; }
.gm-link{ background:none; border:none; cursor:pointer; font-family:var(--font-sans,sans-serif); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(17,7,1,0.4); padding:0.5rem; transition:color .2s ease; text-decoration:none; }
.gm-link:hover{ color:var(--accent-amber,#b97217); }
.gm-credit{ margin-top:1.4rem; color:rgba(17,7,1,0.2); font-size:0.58rem; font-family:var(--font-sans,sans-serif); letter-spacing:0.22em; text-transform:uppercase; }

@media(max-width:560px){
  .gm-nav-links{ display:none; }
  .gm-modes{ grid-template-columns:1fr; }
  .gm-nav{ padding:1rem 1.1rem; }
}