/* «روّاد» after the first chapter: the frame around the city, the games and the home (js/hub/hub.js).
   #hub makes no stacking context of its own: its parts sit among the story's layers (the map is 14/15, the journal 16,
   the game frame 13), and the bottom bar (19) stays above the map and the journal. */
:root {
  /* the day theme (points.md: after the foundation stone the mind club is bright and clear) */
  --day-bg: #F4ECDA;
  --day-card: #FFFDF7;
  --day-ink: #1D2A44;
  --day-mute: #6B7489;
  --day-line: rgba(29, 42, 68, .12);
  --day-gold: #C98A1B;
  --day-green: #3E8E5A;
  --nav-h: max(3cqw, env(safe-area-inset-bottom)); /* no bottom bar (owner, 31-10) */
}
#hub { position: absolute; inset: 0; pointer-events: none; }
#hub > * { pointer-events: auto; }
.hview { position: absolute; inset: 0; z-index: 12; overflow: hidden; background: var(--day-bg); color: var(--day-ink); }
#stage.inhub #top { display: none; }
#stage.inhub.gaming #hubNav, #stage.inhub.gaming #hubTop { display: none; }

/* top: drops and today's stars */
#hubTop { position: absolute; z-index: 19; top: max(3.5cqw, env(safe-area-inset-top)); left: 4cqw; right: 4cqw; display: flex; align-items: center; gap: 2.4cqw; pointer-events: none; }
#hubTop > * { pointer-events: auto; }
#hubTop .grow { flex: 1; }
#hub[data-tab="map"] #hubTop, #hub[data-tab="journal"] #hubTop { display: none; }
.pill { display: inline-flex; align-items: center; gap: 1.4cqw; height: 10cqw; padding: 0 3.4cqw 0 2.2cqw; border-radius: 5cqw; background: rgba(7, 11, 23, .62);
  border: 1px solid rgba(255, 227, 161, .28); color: var(--cream); font-family: var(--f-title); font-weight: 800; font-size: 4.6cqw; line-height: 1;
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .25); }
.pill b { font-weight: 800; color: var(--gold-soft); }
.pill small { font-size: 3.4cqw; color: var(--mute); font-weight: 700; }
.pill svg { width: 5.6cqw; height: 5.6cqw; }
.dropIcon { width: 6.4cqw; height: 6.4cqw; display: inline-block; vertical-align: middle; }
.pill .dropIcon { width: 7.4cqw; height: 7.4cqw; margin: -1cqw 0; }
.pill.glow { animation: pillGlow 1.1s ease-out; }
@keyframes pillGlow { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 100, .8); transform: scale(1); } 30% { transform: scale(1.12); } 100% { box-shadow: 0 0 0 5cqw rgba(255, 200, 100, 0); transform: scale(1); } }

/* bottom bar */
#hubNav { position: absolute; z-index: 19; left: 0; right: 0; bottom: 0; height: var(--nav-h); padding: 1.6cqw 2cqw max(2.5cqw, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(2, 1fr); background: rgba(9, 14, 28, .92); border-top: 1px solid rgba(255, 227, 161, .16);
  box-shadow: 0 -2cqw 6cqw rgba(0, 0, 0, .25); }
#hubNav button { appearance: none; border: 0; background: none; color: var(--mute); font: inherit; font-size: 3.2cqw; font-weight: 700; display: grid; justify-items: center; align-content: center; gap: .8cqw; cursor: pointer; padding: 0; min-height: 12cqw; border-radius: 3cqw; }
#hubNav button svg { width: 6.6cqw; height: 6.6cqw; }
#hubNav button[aria-pressed="true"] { color: var(--gold-soft); }
#hubNav button[aria-pressed="true"] svg { filter: drop-shadow(0 0 1.6cqw rgba(242, 181, 68, .6)); }
#hubNav button:active { transform: scale(.94); }
/* the map and the journal keep their own screens; the bar sits over them */
#stage.inhub #journal { padding-bottom: var(--nav-h); }
#stage.inhub #mapCard { bottom: calc(var(--nav-h) + 3cqw); }

/* a short message above the bar */
#hubToast { position: absolute; z-index: 21; left: 50%; bottom: calc(var(--nav-h) + 5cqw); transform: translate(-50%, 4cqw); opacity: 0; pointer-events: none;
  padding: 3cqw 5cqw; border-radius: 5cqw; background: rgba(7, 11, 23, .9); color: var(--cream); font-size: 4.2cqw; font-weight: 700; white-space: nowrap;
  display: flex; align-items: center; gap: 1.4cqw; border: 1px solid rgba(255, 227, 161, .25); transition: opacity .25s, transform .25s; }
#hubToast b { color: var(--gold-soft); font-family: var(--f-title); font-size: 5cqw; }
#hubToast small { color: var(--mute); font-size: 3.2cqw; margin-inline-start: 1.5cqw; }
#hubToast.on { opacity: 1; transform: translate(-50%, 0); }

/* the lantern's short line in the city */
#hubSay { position: absolute; z-index: 20; left: 4cqw; right: 4cqw; top: calc(max(3.5cqw, env(safe-area-inset-top)) + 13cqw); display: flex; align-items: center; gap: 3cqw; padding: 3cqw 4.5cqw 3cqw 3cqw;
  border-radius: 5cqw; background: rgba(9, 14, 28, .9); border: 1px solid rgba(255, 200, 100, .3); color: var(--cream); box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(-3cqw); transition: opacity .3s, transform .3s; pointer-events: none; }
#hubSay.on { opacity: 1; transform: none; }
#hubSay p { margin: 0; font-size: 4.4cqw; line-height: 1.6; font-weight: 600; color: var(--qandil); }
#hubSay .qface { flex: none; width: 11cqw; height: 11cqw; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(255, 200, 100, .45), rgba(255, 200, 100, 0) 70%); display: grid; place-items: center; }
#hubSay .qface img { height: 9.5cqw; }

/* no bottom bar (owner, 31-10): the games are an icon at the top that turns between games, exercise and apps */
#hubNav { display: none !important; }
#hubBack { display: none; }
#hub[data-tab="games"] #hubBack { display: grid; }
#hub[data-tab="games"] #hubGames { display: none; }
#hubGames { width: 13cqw; height: 13cqw; border: 1.5px solid rgba(255, 227, 161, .7); background: rgba(9, 14, 28, .72); color: #FFE3A1; box-shadow: 0 0 4cqw rgba(242, 181, 68, .35); perspective: 40cqw; }
#hubGames .faces { position: relative; width: 6.8cqw; height: 6.8cqw; display: block; }
#hubGames .faces i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; animation: face 7.5s infinite; backface-visibility: hidden; }
#hubGames .faces i:nth-child(2) { animation-delay: 2.5s; }
#hubGames .faces i:nth-child(3) { animation-delay: 5s; }
#hubGames .faces svg { width: 100%; height: 100%; }
@keyframes face { 0% { opacity: 0; transform: rotateY(-90deg); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: rotateY(90deg); } }
#hubTop .pill { white-space: nowrap; flex-shrink: 0; }
#hubTop { gap: 1.8cqw; }
#hubTop .round { flex-shrink: 0; }
#hub.gpage #hubBack { display: none !important; } /* a game page has its own back */