/* Route-local polish: this file intentionally affects only /game/. */
.game-shell,
.game-shell > canvas,
.game-shell > .topbar,
.game-shell > .mission-config,
.game-shell > .objectives,
.game-shell > .stage-card,
.game-shell > .actions,
.game-shell > .seasonal-job-board,
.game-shell > .feel-hud {
  contain: layout paint;
}

#application-canvas {
  contain: strict;
  transform: translateZ(0);
}

.loading__brand {
  display: block;
  width: clamp(4.5rem, 18vw, 7rem);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(185, 255, 86, .18));
}

.brand-lockup__logo {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .28));
}

@media (max-width: 780px) {
  .brand-lockup { gap: .55rem; padding: .55rem .7rem; }
  .brand-lockup__logo { width: 34px; height: 34px; border-radius: 9px; }
  .brand-lockup small { letter-spacing: .06em; font-size: .52rem; }
  .brand-lockup strong { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  #application-canvas { transform: none; }
}

@keyframes feel-check-pop {
  0% { transform: scale(.2); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.completion-check {
  animation: feel-check-pop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .completion-check { animation: none; }
}

/* ── AAA completion funnel + campaign feedback (2026-09-10) ─────────────── */
[hidden] { display: none !important; }

/* Modal cards must never out-grow short viewports (mobile completion probe):
   the CTA/actions stay reachable by scrolling inside the card. dvh keeps the
   budget honest while the URL bar collapses. */
.modal:not([hidden]) .modal__card {
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
@supports (height: 100dvh) {
  .modal:not([hidden]) .modal__card {
    max-height: calc(100dvh - 2.5rem);
  }
}

.modal__card .completion-cta {
  margin: .35rem 0 .2rem;
  padding: .7rem .8rem;
  border: 1px solid var(--lime, #c8f24b);
  border-radius: 12px;
  background: rgba(200, 242, 75, .08);
  display: grid;
  gap: .45rem;
  width: 100%;
  box-sizing: border-box;
}
.completion-cta strong { font-size: 1.02rem; }
.completion-cta .button-link {
  display: flex;
  width: 100%;
  min-height: 46px;
  font-size: 1.02rem;
  box-sizing: border-box;
}
.completion-cta small { opacity: .8; font-weight: 600; }
.completion-cta small a { color: var(--lime, #c8f24b); text-underline-offset: 2px; }

#next-job-button { width: 100%; }

.score-explainer {
  font-size: .82rem;
  line-height: 1.45;
  opacity: .78;
  margin: .25rem 0 .1rem;
}

#campaign-celebrate .modal__card { text-align: center; }
#campaign-celebrate .button-link { display: flex; width: 100%; justify-content: center; }
#campaign-celebrate .completion-check {
  animation: feel-celebrate-spark .7s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes feel-celebrate-spark {
  0% { transform: scale(.2) rotate(-20deg); opacity: 0; }
  70% { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.sal-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 84px;
  z-index: 9;
  max-width: min(92vw, 520px);
  padding: .7rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--lime, #c8f24b);
  background: #10170e;
  color: #eaf2dd;
  font-weight: 700;
  font-size: .9rem;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  animation: feel-toast-in .3s ease both;
}
@keyframes feel-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #campaign-celebrate .completion-check,
  .sal-toast { animation: none; }
}

/* Mobile actions bar (2026-09-11): the authored absolute bottom-right bar
   clipped Rotate view / Fullscreen / Replay to zero-size at narrow widths
   (measured 390x844). Wrap to centered rows with touch-sized targets; the
   absolute left+right pair spans the width so rows stay inside the viewport. */
@media (max-width: 640px) {
  .game-shell > .actions {
    left: 18px;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .35rem;
  }
  .game-shell > .actions button {
    flex: 1 1 auto;
    min-height: 40px;
  }
}