body .roof-neon-sign {
  --neon: #f6c344;
  --neon-glow: rgba(246, 195, 68, .82);
  position: relative;
  display: block;
  min-width: 174px;
  padding: 7px 14px 8px;
  border: 3px solid var(--neon) !important;
  border-radius: 4px;
  background: linear-gradient(180deg, #231d22 0%, #0d0b0e 100%) !important;
  box-shadow: 0 0 5px var(--neon), 0 0 13px var(--neon-glow), inset 0 0 8px var(--neon-glow), 0 5px 0 #343c47;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 1.7px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  animation: none;
  transform: none !important;
  rotate: none !important;
}

body .roof-neon-sign::before,
body .roof-neon-sign::after {
  content: "";
  position: absolute;
  bottom: -19px;
  width: 5px;
  height: 16px;
  border-radius: 0 0 2px 2px;
  background: #343c47;
  box-shadow: inset 1px 0 0 #687586, 0 2px 2px rgba(0, 0, 0, .35);
}

body .roof-neon-sign::before { left: 24px; }
body .roof-neon-sign::after { right: 24px; }

body .roof-neon-sign.sign-style-0 {
  --neon: #f6c344;
  --neon-glow: rgba(246, 195, 68, .82);
  color: #fff7ce;
  text-shadow: 0 0 2px #fff, 0 0 7px #f6c344, 0 0 16px #f59e0b, 0 0 28px #f59e0b;
}

body .roof-neon-sign.sign-style-1 {
  --neon: #60a5fa;
  --neon-glow: rgba(37, 99, 235, .82);
  color: #eaf5ff;
  text-shadow: 0 0 2px #fff, 0 0 7px #60a5fa, 0 0 16px #2563eb, 0 0 28px #2563eb;
}

body .roof-neon-sign.sign-style-2 {
  --neon: #ff5c7a;
  --neon-glow: rgba(225, 29, 72, .82);
  color: #ffe7eb;
  text-shadow: 0 0 2px #fff, 0 0 7px #ff5c7a, 0 0 16px #e11d48, 0 0 28px #e11d48;
}

body .roof-neon-sign.sign-style-3 {
  --neon: #4ade80;
  --neon-glow: rgba(22, 163, 74, .82);
  color: #e8ffef;
  text-shadow: 0 0 2px #fff, 0 0 7px #4ade80, 0 0 16px #16a34a, 0 0 28px #16a34a;
}

@media (max-width: 480px) {
  body .roof-neon-sign {
    min-width: 150px;
    font-size: 14px;
    letter-spacing: 1.25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .roof-neon-sign { animation: none; }
}

/* Keep the complete job decision visible on short landscape phones. */
@media (orientation: landscape) and (max-height: 520px) {
  body .overlay-root .action-bar {
    position: absolute;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(4px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    z-index: 16;
    margin: 0;
    padding: 3px 0;
  }

  body .overlay-root .status-pill { display: none; }

  body .overlay-root .job-stack {
    position: absolute;
    top: 78px;
    bottom: 58px;
    left: max(8px, env(safe-area-inset-left));
    width: min(238px, 35vw);
    height: auto;
    max-height: none;
    overflow-y: auto;
  }

  body .job-card {
    gap: 3px;
    margin: 0 0 5px;
    padding: 7px 9px;
  }

  body .job-card .job-detail { display: none; }

  body .job-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    margin: 2px 0;
  }

  body .job-card dl > div {
    min-width: 0;
    font-size: 10.5px;
  }

  body .job-card .life { margin-top: 2px; }

  body .job-actions {
    gap: 5px;
    margin-top: 3px;
  }

  body .job-actions .btn {
    min-height: 40px;
    padding: 5px 4px;
    font-size: 11.5px;
  }
}

/* TOWCOON launch identity. The supplied artwork stays crisp and blends into
   the black/amber hero without changing the actual gameplay palette. */
body .landing {
  background: #070706;
}

body .landing-hero {
  isolation: isolate;
  padding: 22px 18px 40px;
  background:
    radial-gradient(70% 54% at 50% 28%, rgba(255, 166, 0, .28), transparent 72%),
    radial-gradient(38% 36% at 18% 38%, rgba(0, 129, 203, .2), transparent 74%),
    linear-gradient(180deg, #050505 0%, #12100a 62%, #080807 100%);
}

body .landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .2;
  background-image:
    linear-gradient(115deg, transparent 0 47%, rgba(255, 184, 0, .11) 48% 49%, transparent 50% 100%),
    linear-gradient(25deg, transparent 0 47%, rgba(255, 184, 0, .08) 48% 49%, transparent 50% 100%);
  background-size: 120px 120px;
  pointer-events: none;
}

body .landing-hero .hero-glow {
  width: min(860px, 90vw);
  height: min(620px, 78vh);
  background: radial-gradient(circle, rgba(255, 167, 0, .34) 0%, rgba(255, 183, 0, .08) 48%, transparent 72%);
  filter: blur(22px);
}

body .landing-logo {
  z-index: 1;
  width: min(960px, 94vw);
  max-height: min(66dvh, 640px);
  object-fit: contain;
  border-radius: 24px;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .72)) drop-shadow(0 0 20px rgba(255, 168, 0, .18));
  box-shadow: 0 0 0 1px rgba(255, 190, 35, .12), 0 28px 70px rgba(0, 0, 0, .5);
}

body .landing-tag {
  z-index: 1;
  margin: 10px 0 24px;
  color: #ffc52e;
  font-size: clamp(12px, 1.4vw, 16px);
  letter-spacing: clamp(1.7px, .35vw, 4px);
  text-shadow: 0 2px 14px rgba(255, 161, 0, .72);
}

body .landing-play {
  z-index: 1;
  color: #17130a;
  background: linear-gradient(180deg, #ffe36f 0%, #ffbd20 48%, #ed8f00 100%);
  border-color: #090909;
  box-shadow: 0 8px #9c5500, 0 18px 38px rgba(0, 0, 0, .72), 0 0 0 2px rgba(255, 203, 63, .28);
}

body .landing-scroll { z-index: 1; }

body .landing-card {
  border-top-color: #ffb800;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .72);
}

@media (max-width: 520px) {
  body .landing-hero { padding: 18px 12px 34px; }
  body .landing-logo {
    width: min(96vw, 560px);
    max-height: 48dvh;
    border-radius: 16px;
  }
  body .landing-tag { margin: 8px 0 20px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  body .landing-hero { padding: 8px 14px 26px; }
  body .landing-logo {
    width: min(58vw, 520px);
    max-height: 58dvh;
    border-radius: 14px;
  }
  body .landing-tag { margin: 2px 0 8px; }
  body .landing-play { padding: 11px 18px; font-size: 18px; }
  body .landing-scroll { margin-top: 10px; }
}