/* Landing refinements stay isolated from the lobby and game workspace. */
body:has(#app > .hero) .atlas::before {
  opacity: 0.3;
}
body:has(#app > .hero) header {
  padding-top: 18px;
  padding-bottom: 18px;
}
body:has(#app > .hero) .brand {
  font-size: 17px;
  padding-left: 43px;
  letter-spacing: 0.7px;
}
body:has(#app > .hero) .brand::before {
  width: 34px;
  height: 34px;
  top: 0;
}
body:has(#app > .hero) .brand span {
  font-size: 8px;
  letter-spacing: 3px;
}
body:has(#app > .hero) .brand-smoke {
  width: 34px;
  height: 34px;
  top: 0;
}
body:has(#app > .hero) #app {
  padding-top: 24px;
  padding-bottom: 24px;
  min-height: 0;
}
.hero {
  min-height: 500px;
}
.hero .game-logo {
  margin-bottom: 25px;
}
.hero h1 {
  margin-bottom: 16px;
}
.hero .intro {
  line-height: 1.65;
  max-width: 390px;
}
.hero .hero-actions {
  margin: 25px 0 19px;
}
.hero .hero-art {
  height: 490px;
}
.hero .compass,
.hero .poster .wanted {
  animation: none;
}
.hero .poster .wanted {
  transition:
    transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 240ms ease;
}
.hero .hero-actions button {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}
.hero .hero-actions button:active {
  transform: translateY(1px) scale(0.98);
}
.hero .hero-actions .primary span {
  display: inline-block;
  transition: transform 180ms ease;
}
body:has(#app > .hero) footer {
  margin-top: 0;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 11px;
}
@media (hover: hover) and (pointer: fine) {
  .hero .poster:hover .wanted {
    transform: perspective(900px) translateY(-7px) rotateX(3deg) rotateY(-3deg);
    filter: brightness(1.035);
  }
  .hero .hero-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px #0003;
  }
  .hero .hero-actions .primary:hover span {
    transform: translate(2px, -2px);
  }
}
@media (min-width: 1000px) and (min-height: 650px) {
  body:has(#app > .hero) {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  body:has(#app > .hero) header,
  body:has(#app > .hero) footer {
    width: 100%;
    flex-shrink: 0;
  }
  body:has(#app > .hero) #app {
    width: 100%;
    flex: 1;
    display: grid;
    align-items: center;
  }
}
@media (min-width: 701px) and (max-width: 1150px) {
  .hero {
    min-height: 460px;
  }
  .hero .hero-art {
    height: 430px;
  }
  .hero .game-logo-title {
    font-size: clamp(38px, 5vw, 60px);
  }
}
@media (max-width: 700px) {
  body:has(#app > .hero) header {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  body:has(#app > .hero) .brand {
    font-size: 14px;
    padding-left: 35px;
  }
  body:has(#app > .hero) .brand::before,
  body:has(#app > .hero) .brand-smoke {
    width: 28px;
    height: 28px;
  }
  body:has(#app > .hero) .brand span {
    font-size: 7px;
    letter-spacing: 2px;
  }
  body:has(#app > .hero) #app {
    padding-top: 24px;
    padding-bottom: 28px;
  }
  .hero {
    min-height: 0;
    gap: 12px;
  }
  .hero .game-logo {
    margin-bottom: 23px;
  }
  .hero .hero-art {
    height: 355px;
    margin-top: 18px;
  }
  .hero .hero-actions {
    margin-top: 23px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .poster:hover .wanted,
  .hero .hero-actions button:hover,
  .hero .hero-actions button:active,
  .hero .hero-actions .primary:hover span {
    transform: none;
  }
}
/* Direct game description and one compact social cue. */
.hero .intro {
  max-width: 460px;
  margin-bottom: 0;
}
.hero .intro strong {
  display: block;
  color: var(--cream, #f3e6c7);
  font-size: 17px;
  font-weight: 600;
}
.hero .intro > span {
  display: block;
  margin-top: 5px;
  font-size: 14px;
}
.hero .chips {
  flex-wrap: wrap;
  gap: 8px;
}
.hero .chips > span {
  font-size: 11px;
}
.hero .call-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 15px 0 0;
  color: #c4cfc9;
  font-size: 12px;
  line-height: 1.5;
}
.hero .call-hint svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: #d9b676;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero .hero-art {
  transform: none;
}
.hero .poster-landing {
  position: relative;
}
.hero .landing-shadow {
  position: absolute;
  inset: 9px 5px;
  z-index: -1;
  pointer-events: none;
  background: #010c12;
  box-shadow: 12px 18px 25px #0009;
  opacity: 0;
}
.hero .poster .wanted {
  filter: drop-shadow(1px 3px 2px #0005);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero .poster::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  pointer-events: none;
  box-shadow: 8px 13px 18px #0008;
  opacity: 0;
  transition: opacity 220ms ease;
}
.hero .hero-actions button:focus-visible {
  outline: 2px solid #f6dfab;
  outline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .hero .poster:hover .wanted {
    transform: perspective(900px) translateY(-6px)
      rotateX(var(--paper-rx, 2deg)) rotateY(var(--paper-ry, -2deg));
    filter: drop-shadow(1px 3px 2px #0005);
  }
  .hero .poster:hover::after {
    opacity: 0.7;
  }
  .hero .hero-actions button:hover:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 1px 3px #0003;
  }
}
@media (max-width: 700px) {
  .hero .intro strong {
    font-size: 16px;
  }
  .hero .intro > span {
    font-size: 13px;
  }
  .hero .call-hint {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .poster:hover .wanted {
    transform: none;
  }
  .hero .poster::after {
    display: none;
  }
}
/* The intro never changes poster layout transforms or the final paper surface. */
.hero[data-bounty-intro="pending"] .poster-landing,
.hero[data-bounty-intro="pending"] .stamp {
  opacity: 0;
}
.hero[data-bounty-intro="pending"] .poster,
.hero[data-bounty-intro="running"] .poster {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-bounty-intro="pending"] .poster-landing,
  .hero[data-bounty-intro="pending"] .stamp {
    opacity: 1;
  }
}
/* Contain airborne edges at the page boundary, without cropping the artwork. */
body:has(#app > .hero[data-bounty-intro="running"]) #app {
  overflow-x: clip;
  overflow-y: visible;
}
.hero-motion-setting {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-motion-setting input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gold);
}
.hero .paper-mesh {
  position: absolute;
  left: -32px;
  top: -32px;
  pointer-events: none;
}
.hero[data-bounty-intro="pending"][data-force-hero-motion="true"]
  .poster-landing,
.hero[data-bounty-intro="pending"][data-force-hero-motion="true"] .stamp {
  opacity: 0;
}