/* Midlife Survivors universal navigation (Nov 3). One bar for the game, its menus and every devlog page.
   Built by assets/ui/ms-nav.js. Tap the ▲ to tuck it away; a small MENU tab brings it back. */
.ms-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  padding-top: max(8px, env(safe-area-inset-top));
  background: rgba(23, 28, 53, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #303750; box-shadow: 0 1px 0 rgba(62, 119, 117, 0.55);
  font-family: "Silkscreen", "Courier New", monospace; color: #F2D7A1;
}
.ms-nav.ms-fixed { position: fixed; left: 0; right: 0; }
.ms-nav[hidden], .ms-nav-tab[hidden] { display: none !important; }
.ms-nav-brand { line-height: 1.3; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #F2D7A1; min-width: 0; }
.ms-nav-mark { display: block; flex: 0 0 30px; width: 30px; height: 30px; image-rendering: pixelated;
  background: var(--ms-nav-mark) center / 30px 30px no-repeat; }
.ms-nav-title { display: block; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.ms-nav-brand > span:last-child { font-size: 12px; line-height: 1.3; }
.ms-nav-sub { display: block; font-family: "Atkinson Hyperlegible", system-ui, sans-serif; font-size: 12px; line-height: 1.3; color: #B8C0D4; white-space: nowrap; }
.ms-nav.is-compact .ms-nav-sub { display: none; }
.ms-nav-links { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.ms-nav-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: "Silkscreen", "Courier New", monospace; font-size: 11px; letter-spacing: 0.03em; line-height: 1;
  padding: 9px 12px; border-radius: 4px; text-decoration: none; cursor: pointer;
  background: transparent; color: #F2D7A1; border: 1px solid #3E7775;
}
.ms-nav-btn:hover { border-color: #EF9347; color: #EF9347; }
.ms-nav-btn:focus-visible, .ms-nav-tab:focus-visible { outline: 2px solid #EF9347; outline-offset: 2px; }
/* The page you're on looks pressed in and can't be picked (Nov 5, Rami: "the Title Screen tab shouldn't be selectable") */
.ms-nav-btn[aria-current="page"] { background: rgba(23, 28, 53, 0.9); border-color: #303750; color: #83A89A; box-shadow: inset 0 3px 0 rgba(0,0,0,.45); transform: translateY(2px); pointer-events: none; cursor: default; }
.ms-nav-btn.primary { background: #EF9347; color: #171C35; border-color: #EF9347; }
.ms-nav-btn.primary:hover { filter: brightness(1.06); color: #171C35; }
.ms-nav-btn.coffee { background: #F2D7A1; color: #171C35; border-color: #F2D7A1; }
.ms-nav-btn.coffee:hover { background: #FFF0CF; color: #171C35; }
.ms-nav-btn.hide { padding: 9px 10px; border-color: #303750; color: #B8C0D4; }
/* The tab that brings the bar back */
.ms-nav-tab {
  position: fixed; top: max(6px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 51;
  font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; letter-spacing: 0.05em;
  padding: 7px 10px; border-radius: 0 0 6px 6px; border: 1px solid #3E7775; border-top: 0; cursor: pointer;
  background: rgba(23, 28, 53, 0.92); color: #F2D7A1; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
/* During an actual run the bar and its tab are gone, so nothing covers the fight */
html.ms-playing .ms-nav, html.ms-playing .ms-nav-tab { display: none !important; }
@media (max-width: 720px) { .ms-nav-long { display: none; } }
/* Phones: one row. Logo mark, then links that scroll sideways */
@media (max-width: 560px) {
  .ms-nav { gap: 8px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .ms-nav-title, .ms-nav-sub { display: none; }
  .ms-nav-links { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; gap: 6px; }
  .ms-nav-links::-webkit-scrollbar { display: none; }
  .ms-nav-btn { padding: 9px 10px; font-size: 10px; }
}
@media (min-width: 700px) and (pointer: coarse) { .ms-nav-btn { padding: 11px 14px; font-size: 12px; } }
/* Touch: every nav button is at least 40 px tall, close to Apple's 44 px tap target (Fable review) */
@media (pointer: coarse) { .ms-nav-btn { min-height: 40px; } }

/* 8-bit cursors everywhere: game, menus, gameplay and every devlog page (Nov 3) */
html, body, canvas { cursor: url("cursors/cursor-arrow.png") 0 0, auto; }
a, button, [role="button"], summary, label, select, .nav-item, .perk-card, .dossier-char, .shop-row, .opt-btn, .t-style-btn, .ctrl-btn,
.ms-nav-btn, .ms-nav-tab, .ms-nav-brand, .hotspot, .card, .sequel-card, .feature { cursor: url("cursors/cursor-hand.png") 8 0, pointer !important; }

/* Quick poll (assets/ui/ms-poll.js), shared by the devlog and the game (Nov 3) */
.ms-poll { text-align: left; font-family: "Atkinson Hyperlegible", system-ui, sans-serif; color: #FFF0CF; }
.ms-poll-tag { font-family: "Silkscreen", monospace; font-size: 11px; letter-spacing: .05em; color: #EF9347; margin-bottom: 6px; }
.ms-poll-q { font-weight: 700; font-size: 15px; line-height: 1.3; margin-bottom: 10px; }
.ms-poll-opts { display: flex; flex-direction: column; gap: 6px; }
.ms-poll-opt { text-align: left; font: 600 13.5px "Atkinson Hyperlegible", system-ui, sans-serif; color: #FFF0CF; background: rgba(48,55,80,.75);
  border: 1px solid #3E7775; border-radius: 6px; padding: 9px 11px; transition: border-color .15s, background .15s; }
.ms-poll-opt:hover, .ms-poll-opt:focus-visible { border-color: #EF9347; background: rgba(239,147,71,.14); outline: none; }
.ms-poll-opt.picked { border-color: #F2D7A1; background: rgba(242,215,161,.2); }
.ms-poll-opt:disabled { opacity: .7; }
.ms-poll-row { display: grid; grid-template-columns: 1fr 44px; grid-template-areas: "lbl lbl" "bar n"; gap: 4px 8px; align-items: center; margin-bottom: 8px; }
.ms-poll-lbl { grid-area: lbl; font-size: 13px; color: #B8C0D4; } .ms-poll-row.mine .ms-poll-lbl { color: #FFF0CF; }
.ms-poll-lbl b { color: #EF9347; font-weight: 700; }
.ms-poll-row .ms-bar { grid-area: bar; } .ms-poll-n { grid-area: n; font-family: "Silkscreen", monospace; font-size: 12px; text-align: right; color: #F2D7A1; }
.ms-poll-foot { margin-top: 8px; font-size: 12px; color: #83A89A; }