/* ======================================================================
   /realm_base.css  (MECHANICS ONLY)
   - No theme/palette decisions here.
   - All colors are variables that theme files override.
   ====================================================================== */

:root{
  /* Typography */
  --gm-font: system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  /* Base surfaces */
  --gm-body-bg: #070B14;
  --gm-text: #EAF7FF;

  /* Neutral surfaces (cards/tiles) */
  --gm-surface: rgba(11,16,32,0.92);
  --gm-surface-strong: rgba(11,16,32,0.96);
  --gm-surface-soft: rgba(7,10,18,0.55);

  /* Lines / borders */
  --gm-line: rgba(156,246,255,0.18);
  --gm-line-strong: rgba(156,246,255,0.22);
  --gm-line-soft: rgba(156,246,255,0.12);
  --gm-line-hair: rgba(156,246,255,0.14);

  /* Accents */
  --gm-accent: rgba(53,215,255,1);
  --gm-accent-soft: rgba(53,215,255,0.10);
  --gm-accent-soft2: rgba(53,215,255,0.06);
  --gm-accent-border: rgba(53,215,255,0.34);
  --gm-accent-border-strong: rgba(53,215,255,0.42);
  --gm-accent-hover: rgba(53,215,255,0.14);
  --gm-accent-grad-top: rgba(53,215,255,0.10);

  /* Headings / subtext */
  --gm-hdr: rgba(156,246,255,0.85);
  --gm-sub: rgba(156,246,255,0.70);
  --gm-sub2: rgba(156,246,255,0.62);
  --gm-chip: rgba(156,246,255,0.88);

  /* Shadows */
  --gm-shadow-1: 0 18px 60px rgba(0,0,0,0.60);
  --gm-shadow-2: 0 18px 60px rgba(0,0,0,0.55);
  --gm-orb-shadow: 0 14px 50px rgba(0,0,0,0.45), 0 0 22px rgba(53,215,255,0.18);

  /* Overlay */
  --gm-overlay: rgba(0,0,0,0.72);

  /* Radii */
  --gm-r-1: 14px;
  --gm-r-2: 16px;
  --gm-r-3: 18px;

  /* Spacing */
  --gm-gap: 12px;
  --gm-pad: 12px;
}

/* ===== Base ===== */
html, body{
  height:100%;
}
body{
  margin:0;
  background:var(--gm-body-bg);
  color:var(--gm-text);
  font-family:var(--gm-font);
}

/* Universal shell container */
.ui{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ===== Game shell (grid) ===== */
.shell{
  height:100vh;
  min-height:100vh;
  display:grid;                 /* FIXED: missing semicolon in your paste */
  grid-template-rows: 28vh 72vh; /* top WHERE + bottom cockpit */
  gap:var(--gm-gap);
  padding:var(--gm-pad);
  box-sizing:border-box;
}

/* Top row is now only WHERE */
.topRow{
  display:grid;
  grid-template-columns: 1fr;
  gap:var(--gm-pad);
  min-height:0;
}

/* ===== Tiles ===== */
.tile{
  flex:1;
  border:1px solid var(--gm-line);
  border-radius:var(--gm-r-2);
  background:var(--gm-surface);
  padding:var(--gm-pad);
  box-sizing:border-box;
}
.tile.small{ flex:0 0 360px; }

/* ===== WHERE wrapper + identity overlay ===== */
.whereWrap{ position:relative; width:100%; height:100%; }

/* Orb button */
.identityOrb{
  position:absolute;
  right:14px;
  top:14px;
  z-index:5;
  width:74px;
  height:74px;
  border-radius:999px;
  border:1px solid var(--gm-line-strong);
  background:linear-gradient(180deg, rgba(53,215,255,0.14), rgba(7,10,18,0.55));
  box-shadow: var(--gm-orb-shadow);
  overflow:hidden;
  cursor:pointer;
}
.identityOrb canvas{
  width:100%;
  height:100%;
  display:block;
}

/* Hover preview panel */
.identityPeek{
  position:absolute;
  right:14px;
  top:98px;
  z-index:6;
  width:min(320px, calc(100vw - 40px));
  border-radius:var(--gm-r-2);
  border:1px solid var(--gm-line);
  background:
    linear-gradient(180deg, rgba(53,215,255,0.08), transparent 55%),
    rgba(11,16,32,0.94);
  box-shadow: var(--gm-shadow-2);
  padding:12px;
  display:none;
  backdrop-filter: blur(6px);
}
.identityOrb:hover + .identityPeek,
.identityPeek:hover{ display:block; }

.peekGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  align-items:stretch;
}
.peekCard{
  border:1px solid var(--gm-line-soft);
  background:var(--gm-surface-soft);
  border-radius:var(--gm-r-1);
  overflow:hidden;
  min-height:110px;
}
.peekMeta{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.peekName{
  font-weight:900;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gm-hdr);
}
.peekChips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ===== Cockpit scroll container ===== */
.cockpit{
  min-height:0;  /* critical for grid children */
  width:100%;
  display:flex;
}

.cockpitInner{
  flex:1;
  min-width:0;
  width:100%;
  height:100%;
  min-height:800px;
  overflow:auto;       /* scroll here */
  padding-top:200px;    /* room for cockpit header row */
  box-sizing:border-box;
}

.cockpit iframe{
  width:100%;
  height:100%;
  min-height:800px;
  border:0;
  display:block;
  background:transparent;
}

/* ===== Overlay + Card ===== */
.overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gm-overlay);
  z-index:999;
  padding:18px;
}
.card{
  width:min(720px,100%);
  border:1px solid var(--gm-line-strong);
  border-radius:var(--gm-r-3);
  background:
    linear-gradient(180deg, var(--gm-accent-grad-top), transparent 52%),
    var(--gm-surface-strong);
  padding:16px;
  box-shadow: var(--gm-shadow-1);
}

/* ===== Type ===== */
.hdr{
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gm-hdr);
  font-weight:900;
  font-size:12px;
}
.title{
  margin:10px 0 0;
  font-size:22px;
  font-weight:900;
}
.sub{
  margin-top:8px;
  color:var(--gm-sub);
  line-height:1.45;
  font-size:14px;
}
.notice{
  margin-top:10px;
  font-size:12px;
  color:var(--gm-sub2);
}

/* ===== Row + Buttons + Chips ===== */
.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.btn{
  border:1px solid var(--gm-accent-border);
  background:var(--gm-accent-soft);
  border-radius:var(--gm-r-1);
  padding:10px 14px;
  font-weight:900;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--gm-text);
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  user-select:none;
}
.btn:hover{ background:var(--gm-accent-hover); }

.chip{
  border:1px solid var(--gm-line);
  background:var(--gm-accent-soft2);
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  color:var(--gm-chip);
  display:inline-block;
  margin-top:12px;
}

/* ===== Tabs + Panels ===== */
.tab{
  border:1px solid var(--gm-line);
  background:var(--gm-accent-soft2);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  letter-spacing:0.10em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--gm-hdr);
  cursor:pointer;
}
.tab.isActive{
  background:rgba(53,215,255,0.16);
  border-color:var(--gm-accent-border-strong);
}

.panel{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
}
.panel.isActive{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ===== Small quality-of-life ===== */
*{ box-sizing:border-box; }