* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #14100b;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body { position: fixed; inset: 0; }

#game {
  position: absolute;
  inset: 0;
  display: block;
  touch-action: none;
}

.hidden { display: none !important; }

/* ---------- HUD ---------- */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #e8d5b0;
}

#hud-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: calc(8px + env(safe-area-inset-top)) 12px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#hud-top2 {
  position: absolute;
  top: calc(48px + env(safe-area-inset-top));
  left: 12px; right: 116px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gauge.slim { max-width: 180px; }
.gauge.slim .bar { height: 10px; }

.sel-chip.rival { border-color: #a33020; color: #ff9a7a; }

#minimap {
  position: absolute;
  bottom: calc(14px + env(safe-area-inset-bottom));
  right: 10px;
  width: 96px;
  height: 144px;
  border: 1px solid #5a4a33;
  border-radius: 6px;
  background: #14100b;
  z-index: 5;
  touch-action: none;
}

/* ---------- info panel ---------- */

#panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 92vw);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #6e5a3a;
  border-radius: 14px;
  background: rgba(24, 17, 10, 0.95);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  animation: panel-in 0.14s ease-out;
}

@keyframes panel-in {
  from { opacity: 0; transform: translate(-50%, -47%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* event feed, left edge */
#notify {
  position: absolute;
  left: 8px;
  top: 34%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 46vw;
  pointer-events: none;
  z-index: 6;
}

.note {
  padding: 6px 10px;
  border: 1px solid #b8a37e;
  border-left: 3px solid #8a7452;
  border-radius: 7px;
  background: rgba(232, 216, 184, 0.94); /* informative = beige */
  color: #3a2c1a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 1;
  transition: opacity 0.6s;
  animation: note-in 0.18s ease-out;
  pointer-events: auto;
  cursor: pointer;
}

.note.bad { /* negative = red */
  background: rgba(122, 26, 16, 0.94);
  border-color: #d84a2a;
  border-left-color: #ff5030;
  color: #ffd8cc;
}
.note.good { border-left-color: #4f8a3c; background: rgba(214, 228, 190, 0.94); }
.note.fading { opacity: 0; }

@keyframes note-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

#portrait {
  width: 72px; height: 72px;
  border: 1px solid #5a4a33;
  border-radius: 8px;
  flex: none;
}

#panel-body { flex: 1; min-width: 0; }

#panel-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffd9a0;
}

#panel-desc {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #b39b73;
  white-space: pre-line; /* bullet lines survive */
}

#panel-bars { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }

.pbar { display: flex; align-items: center; gap: 6px; }
.pbar span { font-size: 9px; letter-spacing: 1px; color: #b39b73; min-width: 32px; }
.pbar .bar { height: 9px; }
.fill-hp { background: linear-gradient(90deg, #4d8a4a, #7cc65f); }

#panel-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#panel-actions button {
  padding: 9px 14px;
  border: 1px solid #6e5a3a;
  border-radius: 10px;
  background: rgba(46, 34, 20, 0.9);
  color: #ffd9a0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}

#panel-actions button:disabled { opacity: 0.35; }

#panel-close {
  flex: none;
  width: 32px; height: 32px;
  font-size: 14px;
}

.sel-chip {
  min-width: 30px;
  padding: 4px 0;
  text-align: center;
  border: 1px solid #8a5a24;
  border-radius: 8px;
  background: rgba(46, 34, 20, 0.9);
  color: #ffd9a0;
  font-size: 12px;
  font-weight: 800;
}

#hud button { pointer-events: auto; }

.icon-btn {
  width: 40px; height: 40px;
  border: 1px solid #5a4a33;
  border-radius: 8px;
  background: rgba(30, 22, 14, 0.85);
  color: #e8d5b0;
  font-size: 18px;
}

#hud-spice {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gauge {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gauge-label {
  font-size: 10px;
  letter-spacing: 1px;
  color: #b39b73;
}

.bar {
  flex: 1;
  height: 14px;
  border: 1px solid #5a4a33;
  border-radius: 7px;
  background: rgba(20, 14, 8, 0.8);
  overflow: hidden;
}

.bar > div {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  transition: width 0.15s linear;
}

#spice-fill { background: linear-gradient(90deg, #a34712, #e07b28); }
/* skirmish stacked bar: the enemy's oil creeps in from the right in red */
.bar.spice { position: relative; }
#spice-foe {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #7a1a10, #d84a2a);
  border-radius: 6px;
}
#spice-foe.hidden { display: none; }
.fill-load  { background: linear-gradient(90deg, #b4531e, #e08a30); }
.fill-fuel  { background: linear-gradient(90deg, #4d8a4a, #7cc65f); }
.fill-fuel.low { background: linear-gradient(90deg, #a33020, #d84a2a); }
.fill-water { background: linear-gradient(90deg, #2e6a9c, #5ab4e8); }

#spice-label {
  font-size: 12px;
  font-weight: 700;
  min-width: 34px;
  text-align: right;
}

#worm-warn {
  color: #ff8a5e;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  animation: warn-pulse 0.7s infinite;
}

@keyframes warn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

#btn-call, #btn-fence, #btn-trap {
  padding: 10px 16px;
  border: 1px solid #6e5a3a;
  border-radius: 10px;
  background: rgba(46, 34, 20, 0.9);
  color: #ffd9a0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}

#btn-call:disabled, #btn-fence:disabled, #btn-trap:disabled {
  opacity: 0.35;
}

#btn-fence.active, #btn-trap.active {
  border-color: #6fbf5a;
  background: rgba(30, 56, 24, 0.95);
  color: #b8f0a0;
}

#toast {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  border: 1px solid #a33020;
  border-radius: 10px;
  background: rgba(30, 12, 8, 0.9);
  color: #ff9a7a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  pointer-events: none;
  animation: toast-in 0.2s ease-out;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- overlays ---------- */

/* the hero introduction card: small, centered, self-dismissing */
#hero-intro {
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 55;
  width: min(78vw, 300px);
  padding: 16px 18px;
  border: 1px solid #8a5a24;
  border-radius: 14px;
  background: rgba(24, 17, 10, 0.96);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: #e8d5b0;
  animation: panel-in 0.18s ease-out;
}
#hero-intro .hi-face { font-size: 40px; line-height: 1.2; }
#hero-intro .hi-name { font-size: 15px; font-weight: 800; letter-spacing: 2px; color: #ffd9a0; margin-top: 4px; }
#hero-intro .hi-role { font-size: 11.5px; line-height: 1.45; color: #b39b73; margin-top: 6px; }
#hero-intro .hi-ok { margin-top: 12px; min-width: 0; width: 100%; padding: 8px 10px; font-size: 12px; }

/* the menu column: ONE width rules them all (the base W) */
#menu > button {
  width: min(84vw, 280px);
  min-width: 0;
  box-sizing: border-box;
  justify-content: center;
}
/* the slot row: 1 slot = W · 2 slots + gap = W · 3 slots + 2 gaps = 1.2 W */
#slot-row {
  display: flex;
  gap: 10px;
  width: min(84vw, 280px);
  justify-content: center;
}
#slot-row[data-count="3"] { width: min(92vw, 336px); } /* W * 1.2 */
#slot-row:empty { display: none; }
.slot-btn {
  flex: 1 1 0;
  min-width: 0 !important; /* the big-btn 220px floor must NOT win here */
  padding: 14px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* exact ledger math: buttons + gaps always sum to the row width */
#slot-row[data-count="2"] .slot-btn { flex: 0 0 calc(50% - 5px); }
#slot-row[data-count="3"] .slot-btn { flex: 0 0 calc((100% - 20px) / 3); }
#slot-row[data-count="2"] .slot-btn, #slot-row[data-count="3"] .slot-btn { font-size: 13px; }
#slot-row[data-count="3"] .slot-btn .sub { font-size: 8px; }

/* the resume card: the line so far, then back to the sand */
#resume-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 58;
  width: min(88vw, 360px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid #8a5a24;
  border-radius: 14px;
  background: rgba(24, 17, 10, 0.97);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
  animation: panel-in 0.16s ease-out;
}
#resume-panel .rp-title { font-size: 15px; font-weight: 800; letter-spacing: 2px; color: #ffd9a0; }
#metro2 {
  width: 100%;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  text-align: left;
  padding: 4px 8px 4px 4px;
  scrollbar-width: none;
  display: flex;
  flex-direction: column-reverse;
}
#rp-resume { width: 100%; min-width: 0; }
#rp-close { min-width: 0; width: 100%; padding: 8px; font-size: 12px; opacity: 0.8; }

/* the campaign metro line inside the pause card */
#metro {
  width: min(84vw, 340px);
  max-height: min(62vh, 560px); /* tall screens see the WHOLE line */
  overflow-y: auto;
  text-align: left;
  padding: 4px 8px 4px 4px;
  margin: 14px 0 10px; /* air between PAUSED and RESUME */
  scrollbar-width: none; /* the rail needs no rail */
  display: flex;
  flex-direction: column-reverse; /* the journey CLIMBS: start below, fate above */
}
#metro::-webkit-scrollbar, #metro2::-webkit-scrollbar { display: none; }
.metro-stop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0 7px 26px;
}
.metro-stop::before { /* the rail */
  content: '';
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #4e4030;
}
.metro-stop:first-child::before { bottom: 50%; top: 0; } /* bottom of the climb */
.metro-stop:last-child::before { top: 50%; bottom: 0; }  /* the summit */
.metro-stop .m-dot {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #6e5a3a;
  background: #1a120b;
  z-index: 1;
}
.metro-stop.done .m-dot { background: #ffcf7a; border-color: #ffcf7a; }
.metro-stop.current .m-dot {
  border-color: #8cdcff;
  animation: hero-blink 1.2s ease-in-out infinite;
}
.metro-stop .m-ico { font-size: 17px; width: 22px; text-align: center; flex: none; }
.metro-stop .m-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.metro-stop .m-txt b { font-size: 11px; letter-spacing: 1px; color: #e8d5b0; }
.metro-stop .m-txt i { font-size: 9.5px; font-style: normal; color: #8f7d5e; }
.metro-stop.done .m-txt b { color: #ffcf7a; }
.metro-stop.current .m-txt b { color: #bfe9ff; }
.metro-stop.tease { opacity: 0.55; }
.metro-stop.veiled { opacity: 0.3; }
.metro-stop.veiled .m-txt b { letter-spacing: 2px; color: #6e5a3a; }

/* chapter headers group the acts of the line */
.metro-chapter {
  display: flex; align-items: baseline; gap: 8px;
  padding: 15px 0 4px 26px; margin-top: 4px;
}
.metro-chapter:first-child { margin-top: 0; padding-top: 2px; }
.metro-chapter .mc-n { font-size: 8.5px; letter-spacing: 2px; color: #b98a3e; font-weight: 700; flex: none; }
.metro-chapter .mc-t { font-size: 12.5px; letter-spacing: 1.5px; color: #f0dcb0; font-weight: 700; text-transform: uppercase; }
.metro-chapter.veiled { opacity: 0.45; }
.metro-chapter.veiled .mc-t { color: #6e5a3a; letter-spacing: 3px; }

/* chapter chip in the command panel head */
#col-head .chip-ch:not(.hidden) { display: flex !important; }
#col-head .chip-ch {
  width: 100% !important; min-width: 84px; height: 32px;
  align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; box-sizing: border-box; color: #d9b774;
}

/* orbit pause: frost the whole planet behind the card */
#pause.orbit-pause {
  z-index: 50;
  background: rgba(8, 8, 16, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: rgba(14, 10, 6, 0.82);
  color: #e8d5b0;
  text-align: center;
}

#menu {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(190, 110, 40, 0.25), transparent 60%),
    rgba(14, 10, 6, 0.9);
}

.title {
  font-size: clamp(44px, 13vw, 76px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 4px;
  color: #e07b28;
  text-shadow: 0 4px 0 #5a2c0c, 0 8px 24px rgba(224, 123, 40, 0.35);
}

.subtitle {
  font-size: 13px;
  letter-spacing: 3px;
  color: #b39b73;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.big-msg {
  font-size: clamp(30px, 9vw, 52px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: 3px;
}

.win-msg  { color: #8fd06a; text-shadow: 0 3px 0 #2c4a1c; }
.lose-msg { color: #e05a3a; text-shadow: 0 3px 0 #4a1c10; }

.stats {
  font-size: 14px;
  color: #b39b73;
  letter-spacing: 1px;
}

.big-btn {
  min-width: 220px;
  padding: 16px 28px;
  border: 2px solid #8a5a24;
  border-radius: 14px;
  background: linear-gradient(180deg, #c96f2b, #9c4d16);
  color: #fff3df;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 0 6px 0 #5a2c0c;
}

.big-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #5a2c0c; }

.big-btn span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #ffd9a0;
}

.menu-btn {
  min-width: 220px;
  padding: 12px 20px;
  border: 1px solid #5a4a33;
  border-radius: 10px;
  background: rgba(40, 30, 18, 0.9);
  color: #e8d5b0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
}

.tips {
  margin-top: 18px;
  max-width: 340px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #9a8563;
}

.veg-btn { width: 34px; height: 34px; font-size: 15px; pointer-events: auto; }
.veg-btn.active {
  border-color: #6fbf5a;
  background: rgba(30, 56, 24, 0.95);
}

/* command panel: harvesters first, then the unlockable powers */
#cmd-panel {
  position: absolute;
  top: calc(84px + env(safe-area-inset-top));
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
  z-index: 5;
}

#fleet-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmd-btn {
  width: 40px; height: 40px;
  border: 1.5px solid #5a4a33;
  border-radius: 9px;
  background: rgba(30, 22, 14, 0.88);
  font-size: 17px;
  line-height: 1;
}

.cmd-btn.active {
  border-color: #6fbf5a;
  background: rgba(30, 56, 24, 0.95);
}

.cmd-btn.locked { opacity: 0.4; }
.fleet-chip {
  position: relative;
  width: 40px; height: 40px;
  border: 1.5px solid #5a4a33;
  border-radius: 9px;
  background: rgba(30, 22, 14, 0.88);
  color: #e8d5b0;
  font-size: 15px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.fleet-chip .n { font-size: 9px; font-weight: 800; color: #b39b73; }
.fleet-chip::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6fbf5a;
}
.fleet-chip.idle { border-color: #d8a03c; }
.fleet-chip.idle::after { background: #ffc04a; animation: warn-pulse 1s infinite; }
.fleet-chip.air::after { background: #5ab4e8; }
.fleet-chip.dock::after { background: #9a8f7c; }
.fleet-chip.dead { opacity: 0.45; }
.fleet-chip.dead::after { background: #d84a2a; }

.sel-chip.emp { border-color: #b8962e; color: #ffe28a; }
.sel-chip.emp.urgent { border-color: #d84a2a; color: #ff9a7a; animation: warn-pulse 0.8s infinite; }

.fleet-chip.blocked { border-color: #d84a2a; }
.fleet-chip.blocked::after { background: #ff5030; animation: warn-pulse 0.6s infinite; }

.aim-cancel {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 30;
  display: none;
  padding: 10px 26px;
  font-size: 15px;
  background: #6a2418;
  border-color: #d84a2a;
}

.speed-btn {
  position: fixed;
  top: calc(50px + env(safe-area-inset-top)); /* right rail, under the clipboard */
  right: 10px;
  z-index: 12;
  width: 52px;           /* matches the clipboard above it */
  height: 32px;
  font-size: 14px;
  letter-spacing: 1px;
}
.speed-btn.hot { border-color: #e07b28; color: #ffb060; }

#storm-bubble {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: min(78vw, 320px);
  padding: 14px 16px;
  border: 2px solid #c9a86a;
  border-radius: 12px;
  background: rgba(38, 28, 16, 0.96);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: note-in 0.2s ease-out;
}
#storm-bubble .sb-title { font-size: 16px; font-weight: 800; color: #ffb060; letter-spacing: 1px; }
#storm-bubble .sb-text { font-size: 12px; color: #e8d5b0; line-height: 1.4; }
#storm-bubble .sb-btn { width: 100%; }

#tut-card {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  width: min(84vw, 360px);
  padding: 10px 14px;
  border: 2px solid #6fa8d8;
  border-radius: 10px;
  background: rgba(18, 26, 38, 0.94);
  pointer-events: none;
  animation: note-in 0.25s ease-out;
}
#tut-card .tc-tag { font-size: 10px; font-weight: 800; color: #6fa8d8; letter-spacing: 1.5px; margin-bottom: 3px; }
#tut-card .tc-text { font-size: 12.5px; font-weight: 700; color: #dce8f4; line-height: 1.45; }

.big-btn.skirm { background: #2a3040; border-color: #5a7fb0; }
.big-btn .sub, .big-btn span { display: block; font-size: 10px; opacity: 0.75; letter-spacing: 1px; }
#globe-cv {
  border-radius: 50%;
  max-width: min(84vw, 340px);
  height: auto;
  cursor: pointer;
}

#skirm-cv {
  border: 2px solid #5a4a33;
  border-radius: 8px;
  max-height: 46vh;
  width: auto;
}

.menu-btn.dbg { opacity: 0.45; font-size: 11px; border-style: dashed; }

/* --- mobile hardening ------------------------------------------------ */
html, body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* no long-press magnifier / callout */
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;      /* no rubber-band / pull-to-refresh */
  touch-action: none;             /* the game handles every gesture */
  position: fixed;                /* defeat URL-bar resize jumps */
  inset: 0;
  overflow: hidden;
}
canvas { touch-action: none; }
button, .note { -webkit-user-select: none; user-select: none; }
/* safe areas: keep HUD and panels off the notch and home bar */
#hud-top { padding-top: max(6px, env(safe-area-inset-top)); }
#cmd-panel { padding-left: max(4px, env(safe-area-inset-left)); }
.aim-cancel { bottom: max(18px, env(safe-area-inset-bottom)); }
.aim-cancel:active { transform: translateX(-50%); box-shadow: 0 6px 0 #5a2c0c; } /* stays centred + doesn't sink */
#storm-bubble { top: max(18%, env(safe-area-inset-top)); }
/* landscape on a phone: this is a portrait game — say so instead of breaking */
@media (orientation: landscape) and (max-height: 500px) {
  body::before {
    content: 'ROTATE BACK TO PORTRAIT — THE DESERT IS TALL';
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 10, 6, 0.96);
    color: #e8c060;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    padding: 20px;
  }
}

/* heroes: second column in the command rail */
#cmd-panel { display: flex; flex-direction: row; gap: 4px; align-items: flex-start; flex-wrap: wrap; max-width: 96px; }
#fleet-bar, #hero-bar { display: flex; flex-direction: column; gap: 4px; }
.hero-chip { border-color: #c9a86a; background: rgba(60, 44, 20, 0.85); }

/* --- 3-section top bar + two-column command rail --------------------- */
#hud-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
#hud-left, #hud-right { display: flex; align-items: center; gap: 6px; }
#hud-mid { display: flex; flex-direction: column; gap: 3px; flex: 1; max-width: 46vw; }
#hud-top2 { display: none; }
#cmd-panel {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: flex-start;
  max-width: none;
  flex-wrap: nowrap;
}
#hero-bar { display: flex; flex-direction: column; gap: 4px; min-width: 34px; }
#unit-col { display: flex; flex-direction: column; gap: 4px; }
#unit-col #fleet-bar { display: flex; flex-direction: column; gap: 4px; }

.tut-reset-btn {
  position: fixed;
  top: calc(88px + env(safe-area-inset-top)); /* just beneath the timelapse */
  right: 10px;
  z-index: 12;
  width: 52px;
  height: 28px;
  font-size: 11px;
  opacity: 0.5;
  border-style: dashed;
}

/* menu alone top-left; money/day head their columns */
#hero-col { display: flex; flex-direction: column; gap: 4px; min-width: 38px; }
.col-chip { justify-content: center; font-size: 10px; padding: 3px 4px; text-align: center; }

/* objective strip slides off-screen; the arrow tab stays */
#hud-mid { transition: transform 0.25s ease, opacity 0.25s ease; }
#hud-mid.tucked { transform: translateX(-130%); opacity: 0; pointer-events: none; }
.mid-tab {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 46px;
  z-index: 21;
  width: 22px;
  height: 26px;
  font-size: 11px;
  opacity: 0.75;
}

/* notification center: bell + fold-in flash; feed hidden unless open */
#notify { display: none; }
#notify.open { display: flex; pointer-events: auto; max-height: 60vh; overflow-y: auto; }
.notif-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 15px; height: 15px;
  border-radius: 8px;
  background: #d02818;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}
#btn-notif { position: relative; }
.note-latest {
  position: fixed;
  top: calc(44px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 26;
  max-width: 70vw;
  transition: all 0.55s ease-in;
  pointer-events: none;
}
.note-latest.to-bell {
  top: calc(10px + env(safe-area-inset-top));
  left: 60px;
  transform: translateX(0) scale(0.15);
  opacity: 0;
}

/* the objective strip never eats a click; units beneath stay selectable */
#hud-mid { pointer-events: none; }
#hud-mid.tucked { transform: none; opacity: 1; } /* tuck retired */
.mid-tab { display: none; }
/* the tutorial card tucks instead */
#tut-card { pointer-events: none; }
#tut-card .tut-tuck { pointer-events: auto; position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 10px; opacity: 0.8; }
#tut-card { position: fixed; }
#tut-card.tucked { transform: translate(-160%, 0); opacity: 0; }
.tut-tab {
  position: fixed;
  top: 64px;
  left: 4px;
  z-index: 26;
  width: 22px;
  height: 26px;
  font-size: 11px;
  display: none;
  opacity: 0.8;
}

/* objectives: 📋 left of the minimap; the panel slides in leftward */
.obj-btn {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: 10px; /* the top-right corner is the clipboard's now */
  z-index: 12;
  width: 52px;
  height: 36px;
  font-size: 14px;
  letter-spacing: -1px;
}
#obj-panel {
  position: fixed;
  top: calc(50px + env(safe-area-inset-top)); /* under the 📋 */
  right: 68px; /* clear of the right rail */
  z-index: 30;
  width: min(78vw, 300px);
  padding: 10px 12px;
  border: 1px solid #5a4a33;
  border-radius: 10px;
  background: rgba(24, 17, 10, 0.95);
  transform: translateX(70px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease; /* fade both ways */
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#obj-panel.open {
  transform: translateX(0); /* slides in from the right */
  opacity: 1;
  pointer-events: auto;
}
.obj-row { color: #e8d5b0; font-size: 12px; font-weight: 600; line-height: 1.35; }
.obj-row.done { color: #8fbf7a; text-decoration: line-through; }

/* two scenes: anything marked game-scene-el exists only in the GAME scene */
body:not(.scene-game) .game-scene-el { display: none !important; }

/* the menu hangs in space — deep night, orange nebula, blinking stars */
#menu {
  background:
    radial-gradient(ellipse 90% 55% at 50% 88%, rgba(224, 123, 40, 0.22), rgba(224, 123, 40, 0) 60%),
    radial-gradient(ellipse 60% 40% at 78% 18%, rgba(120, 80, 200, 0.10), rgba(0, 0, 0, 0) 65%),
    linear-gradient(180deg, #05060e 0%, #0b0a14 55%, #17100c 100%);
  overflow: hidden;
}
#menu-stars, .star-sky { position: absolute; inset: 0; pointer-events: none; }
#menu-stars i, .star-sky i {
  position: absolute;
  border-radius: 50%;
  animation: twinkle 2.5s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}
/* scene swap: menu drops away, the desert descends from above */
#menu.leaving {
  animation: menu-fall 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 2 !important; /* the game slides OVER the menu */
}
@keyframes menu-fall {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 0.6; }
}
body.scene-swap #game,
body.scene-swap #hud,
body.scene-swap #minimap {
  animation: game-descend 0.55s cubic-bezier(0.4, 0, 0.2, 1); /* same curve, same speed */
  position: relative;
  z-index: 10;
}
body.scene-swap #hud { position: absolute; }
body.scene-swap #minimap { position: absolute; }
@keyframes game-descend {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* reverse swap: menu rises from below, the desert lifts away upward */
#menu.returning {
  animation: menu-rise 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2 !important; /* the game lifts away on top */
}
@keyframes menu-rise {
  from { transform: translateY(100%); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
body.scene-swap-out #game,
body.scene-swap-out #hud,
body.scene-swap-out #minimap {
  animation: game-ascend 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  position: relative;
  z-index: 10;
}
body.scene-swap-out #hud { position: absolute; }
body.scene-swap-out #minimap { position: absolute; }
@keyframes game-ascend {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

/* menu-scene elements hide during gameplay (reverse of game-scene-el) */
body.scene-game .menu-scene-el { display: none !important; }
.tut-reset-btn { opacity: 0.6; }

/* the planetary view continues the menu sky UPWARD: the menu fades orange
   (bottom) to indigo (top, #05060e); the planet starts on that very indigo at
   ITS bottom and deepens toward true indigo at the top — stacked in the slide
   they read as one continuous sky */
#globe {
  background:
    radial-gradient(ellipse 60% 40% at 78% 18%, rgba(120, 80, 200, 0.12), rgba(0, 0, 0, 0) 65%),
    linear-gradient(180deg, #10123a 0%, #0a0c24 55%, #05060e 100%);
}
#globe-cv { max-width: min(92vw, 62vh); }

/* the Arrival */
#arrival { background: #04050c; z-index: 60; }
#arrival-cv { position: absolute; inset: 0; }
#arrival-prompt {
  position: absolute;
  top: calc(26px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(86vw, 420px);
  text-align: center;
  color: #ffb060;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-shadow: 0 0 18px rgba(224, 123, 40, 0.6);
  pointer-events: none;
}
#arrival-skip {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom));
  right: 16px;
  opacity: 0.5;
}

/* menu <-> planetary scene: sliding, same speed, planet rides on top */
body.swap-to-planet #globe {
  animation: game-descend 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 40;
}
/* the left panel is GLUED to the planet: it slides with it, both ways */
body.swap-to-planet #hud {
  animation: game-descend 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 45;
}
body.swap-from-planet #hud {
  animation: game-ascend 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: 45;
}
/* mid-slide the panel already wears its orbit dress */
body.swap-to-planet #hud-mid,
body.swap-to-planet #hud-right,
body.swap-to-planet #unit-col { display: none !important; }
#globe.planet-leaving {
  animation: game-ascend 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: 40;
  pointer-events: none;
}

/* the intro descends over the falling menu */
body.swap-to-intro #arrival {
  animation: game-descend 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 60;
}

/* the planet's exit door, bottom left */
.globe-exit {
  position: absolute;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 14px;
  z-index: 5;
  font-size: 11px;
  opacity: 0.85;
}

/* satellite optics: dive onto a region; pull back to orbit.
   Both legs anchor on --dive-from: the player's CURRENT zoom, so the dive
   picks up exactly where the wheel/pinch left the planet. */
#globe-cv.zoom-in {
  animation: globe-dive 0.66s cubic-bezier(0.5, 0, 0.9, 0.4) forwards;
}
@keyframes globe-dive {
  from { transform: scale(var(--dive-from, 1)); }
  to { transform: scale(7); opacity: 0.25; }
}
#globe-cv.zoom-out {
  animation: globe-pullback 0.85s cubic-bezier(0.1, 0.6, 0.3, 1);
}
@keyframes globe-pullback {
  from { transform: scale(7); opacity: 0.25; }
  to { transform: scale(var(--dive-from, 1)); opacity: 1; }
}

/* a parked ground mission stays warm but OFF screen: the desert must never
   bleed under the space scenes while they slide over each other */
body:not(.scene-game):not(.scene-swap):not(.scene-swap-out) #game {
  visibility: hidden; /* menu<->planet slides NEVER show the parked desert */
}

/* the intro's back door and its exit slide */
.arrival-back {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 10px;
  z-index: 61;
  width: 34px;
  height: 34px;
  font-size: 16px;
  opacity: 0.8;
}
#arrival.intro-leaving {
  animation: game-ascend 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: 60;
  pointer-events: none;
}

/* the orbit button: strategic rail, under the objectives clipboard */
.orbit-btn {
  position: fixed;
  top: calc(90px + env(safe-area-inset-top));
  right: 112px;
  z-index: 12;
  width: 36px;
  height: 36px;
  font-size: 16px;
}

/* planetary lenses: spice + hazard, bottom right */
.globe-lenses {
  position: absolute;
  bottom: calc(14px + env(safe-area-inset-bottom));
  right: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lens-btn { font-size: 11px; opacity: 0.85; }
/* phone-width: the flanking bottom buttons must SHARE the row — no 220px floor */
.globe-exit,
.lens-btn {
  min-width: 0;
  max-width: 44vw;
  padding: 8px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dbg-btn { font-size: 10px; opacity: 0.45; } /* debug only — kept dim */
.lens-btn.lens-on {
  outline: 2px solid #e07b28;
  opacity: 1;
}


.globe-hero-chip { opacity: 0.95; }
.chip-n {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 9px;
  font-weight: 800;
  color: #ffd9a0;
} /* geometry comes from cmd-btn/hero-chip: identical to the ground rail */
.globe-hero-chip.sel {
  outline: 2px solid #8cdcff;
  animation: hero-blink 1s ease-in-out infinite;
}
@keyframes hero-blink {
  0%, 100% { box-shadow: 0 0 0 rgba(140, 220, 255, 0); }
  50% { box-shadow: 0 0 14px rgba(140, 220, 255, 0.9); }
}

/* command header: two FULL rows spanning both columns — days, then money */
#cmd-panel { align-items: stretch; }
#col-head { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.chip-wide {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px; /* a full row each */
  font-size: 12px;
  font-weight: 700;
}
.chip-money { color: #ffcf7a; } /* gold ink only — SAME type as the day chip */
#col-row { display: flex; gap: 6px; align-items: flex-start; }

/* back down to the waiting mission */
/* globe-ground now lives inside #globe-cmd */

.globe-hero-chip.pinned { opacity: 0.55; filter: saturate(0.6); }

/* the minimap: square, as the desert demands */
#minimap {
  border-radius: 6px;
  border: 1px solid rgba(120, 190, 255, 0.3);
}

/* menu-only elements: hidden everywhere except the true main menu */
.menu-only-el { display: none; }
body.scene-menu .menu-only-el { display: block; }
#globe .menu-only-el, body.scene-planet .menu-only-el { display: none !important; }

/* the bell rides top-right, above the objectives clipboard */
.bell-btn {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: 68px;
  z-index: 12;
  width: 36px;
  height: 32px;
  font-size: 14px;
}
.note-latest.to-bell {
  top: calc(8px + env(safe-area-inset-top));
  left: auto;
  right: 76px;
  transform: scale(0.15);
  opacity: 0;
}
#notify.open {
  position: fixed;
  top: calc(46px + env(safe-area-inset-top));
  right: 112px;
  left: auto;
  width: min(70vw, 280px);
  z-index: 30;
}

/* planetary statistics: a panel on the right, above the lenses */
#globe-stats {
  position: absolute;
  right: 14px;
  top: calc(10px + env(safe-area-inset-top));
  max-height: 46vh;
  overflow-y: auto;
  z-index: 5;
  color: #e8d5b0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.65;
  white-space: pre-line;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid #5a4a33;
  border-radius: 10px;
  background: rgba(24, 17, 10, 0.85);
  pointer-events: none;
}

/* the county ledger: left side, per-county statistics */
#county-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: min(46vw, 210px);
  max-height: 86vh; /* room for every row and button — no inner slider */
  overflow-y: visible;
  font-size: 12px;
  padding: 10px 12px;
  border: 1px solid #5a4a33;
  border-radius: 10px;
  background: rgba(24, 17, 10, 0.92);
  color: #e8d5b0;
  font-size: 11px;
  text-align: left;
}
.cp-name { font-weight: 800; font-size: 12px; letter-spacing: 1px; margin-bottom: 5px; color: #ffb060; }
.cp-row { line-height: 1.7; }
.cp-dim { opacity: 0.6; font-style: italic; }
.cp-launch {
  margin-top: 7px;
  width: 100%;
  min-width: 0; /* the menu-btn 220px floor would poke out of the 210px ledger */
  font-size: 11px;
  padding: 5px 6px; /* thin — it fits INSIDE the ledger */
  box-sizing: border-box;
  min-height: 0;
  line-height: 1.2;
}

/* ORBIT reuses the ground HUD as its left panel: lift it above the globe
   overlay, drop the middle gauges, the right chips and the command column */
body.scene-planet #hud { z-index: 45; }
body.scene-planet #hud-mid,
body.scene-planet #hud-right,
body.scene-planet #unit-col { display: none !important; }
/* the chips keep ONE width in both worlds (hero col + gap + command col) */
#cmd-panel { min-width: 84px; }

/* the orbit hint: bottom center, quiet */
#globe-hint {
  position: absolute;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  font-size: 11px;
  opacity: 0.8;
  white-space: nowrap;
  pointer-events: none;
}

/* THE header: day row on top, tall money row under it, columns below */
#cmd-panel { flex-direction: column !important; }
#col-head {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
#col-head .chip-wide {
  display: flex !important;
  width: 100% !important;
  min-width: 84px; /* sized for DAY 999 — no reflow flicker between scenes */
  height: 32px; /* same as every button */
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  box-sizing: border-box;
}
#col-head .chip-money { color: #ffcf7a; } /* geometry+type inherited from .chip-wide */
#col-row { display: flex !important; gap: 4px; align-items: flex-start; }

/* the menu: buttons alone, centered in space */
#menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}