:root {
  --navy: #0a1628;
  --navy-2: #12233d;
  --navy-3: #1a3358;
  --silver: #c8d0dc;
  --silver-2: #e8eef6;
  --gold: #c9a227;
  --accent: #4a7ec7;
  --danger: #c45c5c;
  --radius: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--navy); color: var(--silver-2);
  overflow: hidden; touch-action: none;
}
#app { position: relative; width: 100%; height: 100%; }
#c { display: block; width: 100%; height: 100%; }

#topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-t)) 12px 10px;
  background: linear-gradient(180deg, rgba(10,22,40,.92), rgba(10,22,40,.35) 70%, transparent);
  pointer-events: none;
}
#topbar .logo {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; border: 1.5px solid var(--silver);
  pointer-events: auto;
}
#topbar .titles { display: flex; flex-direction: column; line-height: 1.15; flex: 1; }
#topbar .titles strong { font-size: 14px; letter-spacing: .02em; }
#topbar .titles span { font-size: 11px; color: var(--silver); opacity: .85; }
#btn-help {
  pointer-events: auto;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--silver); background: rgba(18,35,61,.7);
  color: var(--silver-2); font-weight: 700;
}

#hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 12px 12px calc(56px + var(--safe-b));
  background: linear-gradient(0deg, rgba(10,22,40,.95), rgba(10,22,40,.45) 65%, transparent);
}
#hint {
  margin: 0 0 10px; text-align: center;
  font-size: 12px; color: var(--silver); opacity: .9;
}
.actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.actions #btn-host { grid-column: 1 / -1; }

button {
  appearance: none; border: 1px solid rgba(200,208,220,.35);
  background: var(--navy-2); color: var(--silver-2);
  border-radius: 12px; padding: 12px 14px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
button.primary {
  background: linear-gradient(180deg, #2a4f86, #1a3358);
  border-color: var(--silver);
}
button.gold {
  background: linear-gradient(180deg, #d4b84a, #8a6e16);
  border-color: #f0e0a0; color: #0a1628;
}
button:active { transform: scale(.98); opacity: .92; }

#footer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  text-align: center; font-size: 11px; letter-spacing: .04em;
  color: var(--silver); padding: 8px 8px calc(8px + var(--safe-b));
  background: rgba(10,22,40,.85);
  border-top: 1px solid rgba(200,208,220,.2);
}

#overlay, #ar-sheet, #splash {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(5,10,20,.72);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; padding-bottom: calc(16px + var(--safe-b));
}
#splash {
  align-items: center; flex-direction: column; gap: 10px;
  background: radial-gradient(ellipse at 50% 30%, #1a3358, #0a1628 70%);
  z-index: 30; text-align: center;
}
#splash img {
  width: 96px; height: 96px; border-radius: 50%;
  border: 2px solid var(--silver); object-fit: cover;
  box-shadow: 0 0 40px rgba(74,126,199,.35);
}
#splash h1 { margin: 8px 0 0; font-size: 22px; letter-spacing: .04em; }
#splash p { margin: 0; color: var(--silver); font-size: 14px; max-width: 280px; }
#splash small { color: var(--silver); opacity: .7; font-size: 11px; margin-top: 8px; }
#splash .primary { min-width: 220px; margin-top: 8px; }

.hidden { display: none !important; }

.card, .sheet {
  width: min(440px, 100%);
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border: 1px solid rgba(200,208,220,.35);
  border-radius: var(--radius);
  padding: 20px 18px 16px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  max-height: 85vh; overflow: auto;
}
.card .close, .sheet .close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  padding: 0; font-size: 22px; line-height: 1;
}
.card-badge {
  display: inline-block; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy);
  background: var(--silver); padding: 4px 10px; border-radius: 999px;
  margin-bottom: 10px; font-weight: 700;
}
.card-badge.corp { background: var(--gold); }
.card h2, .sheet h2 { margin: 0 0 8px; font-size: 20px; }
.card p, .sheet p { margin: 0 0 10px; color: var(--silver); font-size: 14px; line-height: 1.45; }
.card ul { margin: 0 0 12px; padding-left: 18px; color: var(--silver-2); font-size: 14px; }
.card li { margin: 4px 0; }
.note {
  font-size: 12px !important; color: var(--gold) !important;
  border-left: 3px solid var(--gold); padding-left: 10px; margin: 12px 0 !important;
}
.muted { opacity: .75; font-size: 12px !important; }
#card-cta, #ar-done, .ar-mv-btn { width: 100%; margin-top: 4px; }
.ar-mv-btn { margin: 8px 0; }

/* floating stall labels in HUD (optional chips) */
#chips {
  position: absolute; top: calc(64px + var(--safe-t)); left: 8px; right: 8px;
  z-index: 4; display: flex; flex-wrap: wrap; gap: 6px;
  pointer-events: none;
}
.chip {
  pointer-events: auto;
  font-size: 11px; padding: 6px 10px; border-radius: 999px;
  background: rgba(18,35,61,.78); border: 1px solid rgba(200,208,220,.3);
  color: var(--silver-2); backdrop-filter: blur(6px);
}
.chip.corp { border-color: rgba(201,162,39,.6); color: #f0e0a0; }