:root {
  --spacing: 0.25rem;
  --container-3xs: 16rem;
  --container-md: 28rem;
  --container-xl: 36rem;
  --container-7xl: 80rem;
  --color-black: #000;
  --color-white: #fff;
  --color-gray-300: #d1d5db;
  --color-gray-500: #6b7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-green-500: #22c55e;
  --color-emerald-300: #6ee7b7;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
}

html,
body {
  background: #000;
  height: 100%;
  line-height: 1.5;
  overscroll-behavior: none;
  overflow: auto;
}

body.app-body {
  font-family: "VT323", monospace !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

@media (display-mode: standalone) {
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
  }
}

img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.town-tooltip {
  background: none;
  border: none;
  box-shadow: none;
  color: #fff;
  font-family: "VT323", sans-serif;
  font-size: 14px;
}

.follow-tooltip {
  background: #000;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #49ab16;
  font-family: "VT323", sans-serif;
  font-size: 14px;
  opacity: 1 !important;
}

.player-tooltip {
  background: #000;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #ca8a04;
  font-family: "VT323", sans-serif;
  font-size: 14px;
  opacity: 1 !important;
}

.leaflet-touch .leaflet-bar a:first-child,
.leaflet-touch .leaflet-bar a:last-child {
  border-radius: 0;
}

.leaflet-container {
  background: #000;
  outline: 0;
}

.leaflet-tooltip-right:before {
  display: none;
}

.turbo-progress-bar {
  background: #fff;
  position: fixed;
  top: 64px;
  z-index: 999999;
}

@media (min-width: 1024px) {
  .turbo-progress-bar {
    top: 0;
  }
}
.absolute { position: absolute; }
.fixed { position: fixed; }
.relative { position: relative; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-50 { z-index: 50; }

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.col-span-5 { grid-column: span 5 / span 5; }
.float-right { float: right; }

.mx-auto { margin-inline: auto; }
.ms-3 { margin-inline-start: calc(var(--spacing) * 3); }
.ms-6 { margin-inline-start: calc(var(--spacing) * 6); }
.mt-2 { margin-top: calc(var(--spacing) * 2); }
.mt-3 { margin-top: calc(var(--spacing) * 3); }
.mt-4 { margin-top: calc(var(--spacing) * 4); }
.mt-8 { margin-top: calc(var(--spacing) * 8); }
.mr-2 { margin-right: calc(var(--spacing) * 2); }
.mb-2 { margin-bottom: calc(var(--spacing) * 2); }
.mb-4 { margin-bottom: calc(var(--spacing) * 4); }
.mb-6 { margin-bottom: calc(var(--spacing) * 6); }
.ml-2 { margin-left: calc(var(--spacing) * 2); }

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

.h-4 { height: calc(var(--spacing) * 4); }
.h-16 { height: calc(var(--spacing) * 16); }
.w-4 { width: calc(var(--spacing) * 4); }
.w-16 { width: calc(var(--spacing) * 16); }
.w-56 { width: calc(var(--spacing) * 56); }
.w-full { width: 100%; }
.max-w-3xs { max-width: var(--container-3xs); }
.max-w-7xl { max-width: var(--container-7xl); }

.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: calc(var(--spacing) * 2); }
.gap-3 { gap: calc(var(--spacing) * 3); }
.gap-4 { gap: calc(var(--spacing) * 4); }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.space-y-2 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 2); }
.space-y-3 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 3); }

.overflow-hidden { overflow: hidden; }
.rounded-none { border-radius: 0; }
.cursor-pointer { cursor: pointer; }
.appearance-none { appearance: none; }

.border { border-style: solid; border-width: 1px; }
.border-b { border-bottom-style: solid; border-bottom-width: 1px; }
.border-transparent { border-color: transparent; }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }

.bg-black { background-color: var(--color-black); }
.bg-gray-900 { background-color: var(--color-gray-900); }
.bg-red-600 { background-color: var(--color-red-600); }
.bg-white { background-color: var(--color-white); }

.p-0 { padding: 0; }
.p-2 { padding: calc(var(--spacing) * 2); }
.p-3 { padding: calc(var(--spacing) * 3); }
.p-4 { padding: calc(var(--spacing) * 4); }
.px-2 { padding-inline: calc(var(--spacing) * 2); }
.px-4 { padding-inline: calc(var(--spacing) * 4); }
.py-1 { padding-block: calc(var(--spacing) * 1); }
.py-2 { padding-block: calc(var(--spacing) * 2); }
.py-4 { padding-block: calc(var(--spacing) * 4); }
.py-6 { padding-block: calc(var(--spacing) * 6); }
.pb-2 { padding-bottom: calc(var(--spacing) * 2); }
.pt-\[68px\] { padding-top: 68px; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.leading-5 { line-height: 1.25rem; }
.leading-tight { line-height: 1.25; }
.tracking-widest { letter-spacing: 0.1em; }
.uppercase { text-transform: uppercase; }

.text-xs { font-size: 0.75rem; line-height: 1.3333; }
.text-sm { font-size: 0.875rem; line-height: 1.4286; }
.text-lg { font-size: 1.125rem; line-height: 1.5556; }
.text-xl { font-size: 1.25rem; line-height: 1.4; }

.text-black { color: var(--color-black); }
.text-emerald-300 { color: var(--color-emerald-300); }
.text-gray-300 { color: var(--color-gray-300); }
.text-green-500 { color: var(--color-green-500); }
.text-red-400 { color: var(--color-red-400); }
.text-red-500 { color: var(--color-red-500); }
.text-red-600 { color: var(--color-red-600); }
.text-white { color: var(--color-white); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-yellow-400 { color: var(--color-yellow-400); }
.text-yellow-500 { color: var(--color-yellow-500); }
.text-yellow-600 { color: var(--color-yellow-600); }
.underline { text-decoration-line: underline; }

.focus\:outline-none:focus {
  outline: none;
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, currentColor);
}

.focus\:ring-yellow-600:focus {
  --ring-color: var(--color-yellow-600);
}

.focus\:ring-offset-2:focus {
  --ring-offset-width: 2px;
}

.active\:bg-yellow-600:active {
  background-color: var(--color-yellow-600);
}

.active\:text-yellow-600:active {
  color: var(--color-yellow-600);
}

@media (hover: hover) {
  .hover\:bg-yellow-600:hover {
    background-color: var(--color-yellow-600);
  }

  .hover\:text-yellow-600:hover {
    color: var(--color-yellow-600);
  }
}

@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); }
}

@media (min-width: 1024px) {
  .lg\:fixed { position: fixed; }
  .lg\:top-0 { top: 0; }
  .lg\:top-1\/2 { top: 50%; }
  .lg\:right-0 { right: 0; }
  .lg\:bottom-0 { bottom: 0; }
  .lg\:left-0 { left: 0; }
  .lg\:left-1\/2 { left: 50%; }

  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:order-3 { order: 3; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }

  .lg\:mt-0 { margin-top: 0; }
  .lg\:mb-0 { margin-bottom: 0; }
  .lg\:mb-4 { margin-bottom: calc(var(--spacing) * 4); }

  .lg\:block { display: block; }
  .lg\:hidden { display: none; }

  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .lg\:border-0 { border-width: 0; }
  .lg\:border-3 { border-width: 3px; border-style: solid; }
  .lg\:border-b-4 { border-bottom-width: 4px; border-bottom-style: solid; }
  .lg\:border-solid { border-style: solid; }
  .lg\:border-white { border-color: var(--color-white); }

  .lg\:bg-black { background-color: var(--color-black); }
  .lg\:bg-opacity-80 { background-color: rgba(0, 0, 0, 0.8); }

  .lg\:px-8 { padding-inline: calc(var(--spacing) * 8); }
  .lg\:py-4 { padding-block: calc(var(--spacing) * 4); }
  .lg\:pb-0 { padding-bottom: 0; }

  .lg\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y, 0);
  }

  .lg\:-translate-y-1\/2 {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x, 0) var(--tw-translate-y);
  }
}

/* Handwritten class aliases used in templates */
.full-width { width: 100%; }
.width-16 { width: calc(var(--spacing) * 16); }
.width-menu { width: calc(var(--spacing) * 56); }
.size-w-4 { width: calc(var(--spacing) * 4); }
.size-h-4 { height: calc(var(--spacing) * 4); }
.height-16 { height: calc(var(--spacing) * 16); }
.max-page-width { max-width: var(--container-7xl); }
.max-logo-width { max-width: var(--container-3xs); }

.flex-fill { flex: 1; }
.float-end { float: right; }

.space-b-sm { margin-bottom: calc(var(--spacing) * 2); }
.space-b-md { margin-bottom: calc(var(--spacing) * 4); }
.space-b-lg { margin-bottom: calc(var(--spacing) * 6); }
.space-t-sm { margin-top: calc(var(--spacing) * 2); }
.space-t-base { margin-top: calc(var(--spacing) * 3); }
.space-t-md { margin-top: calc(var(--spacing) * 4); }
.space-t-xl { margin-top: calc(var(--spacing) * 8); }
.space-l-sm { margin-left: calc(var(--spacing) * 2); }
.space-r-sm { margin-right: calc(var(--spacing) * 2); }
.space-start-md { margin-inline-start: calc(var(--spacing) * 3); }
.space-start-lg { margin-inline-start: calc(var(--spacing) * 6); }

.pad-none { padding: 0; }
.pad-sm { padding: calc(var(--spacing) * 2); }
.pad-md { padding: calc(var(--spacing) * 3); }
.pad-lg { padding: calc(var(--spacing) * 4); }
.pad-x-sm { padding-inline: calc(var(--spacing) * 2); }
.pad-x-md { padding-inline: calc(var(--spacing) * 4); }
.pad-y-xs { padding-block: calc(var(--spacing) * 1); }
.pad-y-sm { padding-block: calc(var(--spacing) * 2); }
.pad-y-md { padding-block: calc(var(--spacing) * 4); }
.pad-y-lg { padding-block: calc(var(--spacing) * 6); }
.pad-top-nav { padding-top: 68px; }

.text-xsmall { font-size: 0.75rem; line-height: 1.3333; }
.text-small { font-size: 0.875rem; line-height: 1.4286; }
.text-large { font-size: 1.125rem; line-height: 1.5556; }
.text-title { font-size: 1.25rem; line-height: 1.4; }

.text-light-dim { color: rgba(255, 255, 255, 0.5); }
.text-light { color: var(--color-white); }
.text-dark { color: var(--color-black); }
.text-muted { color: var(--color-gray-300); }
.text-danger { color: var(--color-red-500); }
.text-danger-strong { color: var(--color-red-600); }
.text-accent { color: var(--color-yellow-400); }
.text-accent-strong { color: var(--color-yellow-500); }
.text-online { color: var(--color-green-500); }

.weight-semibold { font-weight: 600; }
.weight-bold { font-weight: 700; }
.leading-compact { line-height: 1.25rem; }
.leading-tighter { line-height: 1.25; }
.track-wide { letter-spacing: 0.1em; }
.all-caps { text-transform: uppercase; }
.is-underlined { text-decoration-line: underline; }

.bg-base { background-color: var(--color-black); }
.bg-light { background-color: var(--color-white); }
.bg-deep { background-color: var(--color-gray-900); }
.bg-danger { background-color: var(--color-red-600); }

.border-thin { border-style: solid; border-width: 1px; }
.border-bottom-thin { border-bottom-style: solid; border-bottom-width: 1px; }
.border-light-faint { border-color: rgba(255, 255, 255, 0.2); }
.border-clear { border-color: transparent; }

.gap-sm { gap: calc(var(--spacing) * 2); }
.gap-md { gap: calc(var(--spacing) * 3); }
.gap-lg { gap: calc(var(--spacing) * 4); }

.grid-one-col { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-span-full { grid-column: span 5 / span 5; }
.order-one { order: 1; }
.order-two { order: 2; }
.order-three { order: 3; }
/* Shared pixel-border frame used across panels, inputs, and buttons */
.border-pixel,
.border-thin-pixel,
.panel-box,
.auth-box,
.btn,
.menu-btn,
.field-input,
.field-select,
.field-select-plain {
  clip-path: polygon(
    0 calc(100% - 6px),
    3px calc(100% - 6px),
    3px calc(100% - 3px),
    6px calc(100% - 3px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 3px) 6px,
    calc(100% - 3px) 3px,
    calc(100% - 6px) 3px,
    calc(100% - 6px) 0,
    6px 0,
    6px 3px,
    3px 3px,
    3px 6px,
    0 6px
  );
  border: 3px solid #fff;
  position: relative;
}

.border-pixel--wrapper {
  width: fit-content;
  height: fit-content;
  clip-path: polygon(
    0 calc(100% - 6px),
    3px calc(100% - 6px),
    3px calc(100% - 3px),
    6px calc(100% - 3px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 3px) 6px,
    calc(100% - 3px) 3px,
    calc(100% - 6px) 3px,
    calc(100% - 6px) 0,
    6px 0,
    6px 3px,
    3px 3px,
    3px 6px,
    0 6px
  );
  position: relative;
}

.border-pixel::after,
.border-thin-pixel::after,
.border-pixel--wrapper::after,
.panel-box::after,
.auth-box::after,
.btn::after,
.menu-btn::after,
.field-input::after,
.field-select::after,
.field-select-plain::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: -3px;
  z-index: 400;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(
    0 calc(100% - 6px),
    3px calc(100% - 6px),
    3px calc(100% - 3px),
    6px calc(100% - 3px),
    6px 100%,
    calc(100% - 3px) 100%,
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 3px) 6px,
    calc(100% - 3px) 3px,
    calc(100% - 6px) 3px,
    calc(100% - 6px) 0,
    6px 0,
    6px 3px,
    3px 3px,
    3px 6px,
    0 6px,
    0 50%,
    3px 50%,
    3px 6px,
    6px 6px,
    6px 3px,
    calc(100% - 6px) 3px,
    calc(100% - 6px) 6px,
    calc(100% - 3px) 6px,
    calc(100% - 3px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 3px),
    6px calc(100% - 3px),
    6px calc(100% - 6px),
    3px calc(100% - 6px),
    3px 50%,
    0 50%
  );
}

.border-pixel-focus-ring:focus,
.border-thin-pixel-focus-ring:focus,
.btn:focus,
.menu-btn:focus,
.field-input:focus,
.field-select:focus,
.field-select-plain:focus {
  border-color: #ca8a04;
  outline: none;
}

.btn {
  align-items: center;
  background: #fff;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.5rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-danger {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.btn-danger::after {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn-ring:focus {
  box-shadow: 0 0 0 2px #ca8a04, 0 0 0 4px #fff;
}

.menu-btn {
  align-items: center;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.menu-btn-center {
  justify-content: center;
}

.field-input,
.field-select,
.field-select-plain {
  align-items: center;
  background: #fff;
  color: #000;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.5rem 1rem;
}

.field-select,
.field-select-plain {
  appearance: none;
}

.field-input {
  width: 100%;
}

.field-select {
  text-transform: uppercase;
}

.panel-box {
  background: #000;
  border-radius: 0;
  overflow: hidden;
}

.panel-content {
  color: #fff;
  padding: 1.5rem;
}

.auth-box {
  align-items: center;
  background: #000;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  max-width: 28rem;
  padding: 1rem 1.5rem;
  width: 100%;
}

.auth-box-body {
  color: #fff;
  margin-inline: auto;
  max-width: 28rem;
  width: 100%;
}

.auth-box-body-wide {
  max-width: 36rem;
}

.form-actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.consent-row {
  align-items: flex-start;
  color: #fff;
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.consent-row-inline {
  align-items: center;
}

.intro-text {
  color: #fff;
  display: block;
  flex: 1;
}

.link-list {
  display: block;
  line-height: 1.2;
  padding: 0.22rem 0.08rem;
  text-align: left;
  width: 100%;
}

@media (max-width: 1023px) {
  .link-list {
    min-height: 1.9rem;
    padding: 0.34rem 0.1rem;
  }
}

.link-hover {
  text-decoration: none;
}

.link-inline {
  text-decoration: underline;
}

.statbar {
  border: 1px solid rgba(255, 255, 255, 0.25);
  height: 8px;
  margin-bottom: 4px;
  width: 100%;
}

.bar {
  height: 100%;
  min-width: 2px;
}

@media (hover: hover) {
  .btn:hover,
  .menu-btn:hover {
    background: #ca8a04;
    border-color: #ca8a04;
    color: #000;
  }

  .btn-danger:hover {
    background: #991b1b;
    border-color: #991b1b;
    color: #fff;
  }

  .btn:hover::after,
  .menu-btn:hover::after,
  .hover\:bg-yellow-600.border-pixel:hover::after,
  .hover\:bg-yellow-600.border-pixel--wrapper:hover::after,
  .hover\:bg-yellow-600.border-pixel:hover,
  .hover\:bg-yellow-600.border-pixel--wrapper:hover {
    background: #ca8a04;
    border-color: #ca8a04;
  }

  .btn-danger:hover::after {
    background: #991b1b;
    border-color: #991b1b;
  }

  .link-list:hover,
  .link-inline:hover,
  .link-hover:hover {
    color: #ca8a04;
  }
}

.btn:active,
.menu-btn:active,
.active\:bg-yellow-600.border-pixel:active,
.active\:bg-yellow-600.border-pixel--wrapper:active {
  background: #ca8a04;
  border-color: #ca8a04;
  color: #000;
}

.btn:active::after,
.menu-btn:active::after,
.active\:bg-yellow-600.border-pixel:active::after,
.active\:bg-yellow-600.border-pixel--wrapper:active::after {
  background: #ca8a04;
  border-color: #ca8a04;
}

.btn-danger:active {
  background: #7f1d1d;
  border-color: #7f1d1d;
  color: #fff;
}

.btn-danger:active::after {
  background: #7f1d1d;
  border-color: #7f1d1d;
}

.nav-active {
  background: #ca8a04;
  border-color: #ca8a04;
  color: #000;
}

.nav-active::after,
.nav-active.border-pixel::after,
.nav-active.border-pixel--wrapper::after {
  background: #ca8a04;
  border-color: #ca8a04;
}
.char-portrait {
  padding-right: 8px;
  padding-top: 8px;
}

main {
  padding-bottom: 200px;
}

.map-overlay,
#map {
  z-index: 9999;
}

#mobile-menu {
  position: absolute;
}

#mobile-menu .mobile-menu-content {
  padding: 0 0.8rem 0.8rem;
}

#mobile-menu .retro-action-list {
  margin-inline: -0.8rem;
}

#mobile-menu .retro-action-list:last-child {
  margin-bottom: -0.8rem;
}

.mobile-nav-return-wrap {
  filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.5));
}

.mobile-nav {
  background: #000;
  position: fixed;
  width: 100%;
}

.mobile-nav-shell {
  margin-inline: auto;
  max-width: 80rem;
  padding: 0 1rem 0.5rem;
}

.app-main {
  background: #000;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  padding-top: 75px;
}

.guest-header {
  background: #000;
  display: none;
}

.page-header-inner {
  margin-inline: auto;
  max-width: 80rem;
  padding: 1.5rem 1rem;
}

.page-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1rem;
  width: 100%;
}

.layout-column-left {
  order: 3;
}

.layout-column-right {
  order: 2;
}

.main-stage-guest {
  align-items: center;
  display: flex;
  flex-direction: column;
  grid-column: span 5 / span 5;
  justify-content: center;
}

.main-stage-player {
  order: 1;
}

.alert-inner {
  color: #fff;
  margin-inline: auto;
  max-width: 80rem;
  padding: 0.5rem 1rem;
  text-align: center;
}

.player-header {
  background: #000;
  display: none;
  position: relative;
}

.player-return {
  margin-top: 1rem;
  position: absolute;
}

.mobile-tab-only {
  /* Intentionally no base display override.
     Mobile tab visibility is controlled by the \`hidden\` class + Stimulus. */
}

.sidebar-panel {
  /* Base display is controlled by \`hidden\` + mobile tab toggles. */
}

.layout-column-left .panel-content,
.layout-column-right .panel-content {
  padding: 0.7rem 0.8rem 0.8rem;
}

.sidebar-panel .panel-content,
.travel-panel .panel-content,
.explore-panel .panel-content,
.mobile-tab-only .panel-content {
  display: grid;
  gap: 0.45rem;
}

.travel-panel {
  margin-top: 1rem;
}

.explore-panel {
  margin-bottom: 1rem;
}

@media (max-width: 1023px) {
  .explore-panel {
    display: none !important;
  }
}

.desktop-only {
  display: none;
}

.desktop-hidden {
  display: block;
}

.map-mini-wrapper {
  overflow: hidden;
}

.map-overlay-panel {
  background: #000;
  border-radius: 0;
  overflow: hidden;
}

.map-overlay-body {
  padding: 0;
  width: 100%;
}

.map-full-surface {
  width: 100%;
}

.map-close-action {
  color: #fff;
  margin: 0.5rem 0;
  text-align: center;
  text-decoration: underline;
  width: 100%;
}

.mobile-hud-shell {
  background: linear-gradient(#0000, #000 15%);
  bottom: 0;
  left: 0;
  overflow: visible;
  padding: 1.6rem 1rem 0;
  position: fixed;
  right: 0;
  z-index: 9998;
}

.mobile-hud-wrap {
  filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.5));
  margin-inline: auto;
  max-width: 80rem;
  overflow: visible;
  position: relative;
}

.mobile-hud-card {
  align-items: center;
  background: #000;
  color: #fff;
  display: flex;
  gap: 0.5rem;
  margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
  overflow: visible;
  padding: 0.75rem;
  position: relative;
  text-align: left;
  z-index: 1;
}

.mobile-hud-screen-strip {
  align-items: stretch;
  background: #000;
  bottom: calc(100% - 1.3rem);
  display: flex;
  gap: 0;
  left: 50%;
  padding: 0;
  position: absolute;
  top: auto;
  transform: translateX(-50%);
  z-index: 1200;
}

.mobile-hud-card > .flex-fill {
  min-width: 0;
}

.mobile-hud-controls {
  align-items: center;
  display: flex;
  margin-left: auto;
  min-width: 0;
}

.mobile-hud-dpad-wrap {
  margin-left: auto;
  touch-action: manipulation;
}

.mobile-hud-dpad-wrap.hidden {
  display: block;
  pointer-events: none;
  visibility: hidden;
}

.mobile-hud-dpad-form {
  background: #000;
  display: grid;
  gap: 0.14rem;
  justify-items: center;
}

.mobile-hud-dpad {
  display: grid;
  gap: 0.14rem;
  grid-template-areas:
    ". n ."
    "w c e"
    ". s .";
  grid-template-columns: 2.32rem 2.72rem 2.32rem;
  grid-template-rows: repeat(3, 2.02rem);
}

.mobile-dpad-n {
  grid-area: n;
}

.mobile-dpad-w {
  grid-area: w;
}

.mobile-dpad-e {
  grid-area: e;
}

.mobile-dpad-s {
  grid-area: s;
}

.mobile-dpad-center {
  align-items: center;
  background: #050505;
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  font-size: 0.72rem;
  font-weight: 700;
  grid-area: c;
  justify-content: center;
  letter-spacing: 0.08em;
  line-height: 1.02;
  min-width: 2.72rem;
  padding: 0.12rem 0.1rem;
  text-transform: uppercase;
}

.mobile-dpad-position-line {
  display: block;
  white-space: nowrap;
}

.mobile-dpad-btn {
  align-items: center;
  background: #050505;
  color: #fff;
  display: inline-flex;
  font-size: 0.98rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.08em;
  min-height: 2.02rem;
  min-width: 2.32rem;
  padding: 0.14rem 0.22rem;
}

.mobile-screen-btn {
  padding: 0.08rem;
}

.mobile-screen-strip-btn {
  align-items: center;
  background: transparent;
  border: 0;
  clip-path: none;
  display: inline-flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 2.22rem;
  min-width: 2.2rem;
  padding: 0.2rem 0.16rem;
  position: relative;
}

.mobile-screen-strip-btn::after {
  display: none;
}

.mobile-screen-strip-btn + .mobile-screen-strip-btn {
  border-left: 3px solid #fff;
}

.mobile-screen-icon {
  filter: brightness(0) invert(1);
  height: 1.08rem;
  image-rendering: pixelated;
  opacity: 0.95;
  pointer-events: none;
  width: 1.08rem;
}

.mobile-screen-icon-social {
  color: #fff;
  display: block;
  height: 1.06rem;
  shape-rendering: crispEdges;
  pointer-events: none;
  width: 1.06rem;
}

.mobile-screen-btn.nav-active .mobile-screen-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.mobile-screen-btn.nav-active .mobile-screen-icon-social {
  color: #fff;
}

.mobile-screen-btn.nav-active {
  background: #ca8a04;
}

.mobile-screen-strip-btn.menu-btn:active {
  background: #ca8a04;
  color: #fff;
}

@media (hover: hover) {
  .mobile-screen-strip-btn.menu-btn:hover {
    background: #ca8a04;
    color: #fff;
  }
}

.duel-lobby-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .mobile-nav-shell {
    padding-inline: 1.5rem;
  }

  .page-header-inner {
    padding-inline: 1.5rem;
  }

  .page-grid {
    padding-inline: 1.5rem;
  }

  .auth-box {
    max-width: 28rem;
  }

  .duel-lobby-row {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }

  .mobile-nav-shell {
    padding-inline: 2rem;
    padding-bottom: 0;
  }

  .app-main {
    padding-block: 1rem;
    padding-top: 1rem;
  }

  .guest-header,
  .player-header {
    display: block;
  }

  .page-header-inner {
    padding-inline: 2rem;
  }

  .page-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-inline: 2rem;
  }

  .layout-column-left {
    order: 1;
  }

  .layout-column-right {
    order: 3;
  }

  .main-stage-player {
    display: block;
    grid-column: span 3 / span 3;
    order: 2;
  }

  .mobile-tab-only {
    display: none !important;
  }

  .sidebar-panel {
    display: block;
  }

  .travel-panel {
    display: block;
    margin-top: 0;
  }

  .explore-panel {
    display: block;
  }

  .desktop-only {
    display: block;
  }

  .desktop-hidden {
    display: none;
  }

  .map-overlay-panel {
    background: rgba(0, 0, 0, 0.8);
    border-width: 0;
    bottom: 0;
    left: 0;
    margin-bottom: 0;
    position: fixed;
    right: 0;
    top: 0;
  }

  .map-overlay-body {
    background: #000;
    border: 3px solid #fff;
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(99% - 1.5rem);
  }

  .map-full-surface {
    border-bottom: 4px solid #fff;
  }

  .mobile-hud-shell {
    display: none;
  }

  .mobile-hud-card {
    padding-inline: 2rem;
  }

  #map {
    z-index: 9999;
  }

  #map > div {
    max-width: 508px;
    width: calc(99% - 1.5rem);
  }

  main {
    padding-bottom: 0;
  }
}
.town-shop {
  display: grid;
  gap: 0.75rem;
}

.town-shop-copy {
  color: #d1d5db;
}

.town-shop-gold {
  color: #fff;
  margin-top: 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.town-shop-gold strong {
  color: #facc15;
}

.town-shop-section {
  background: #000;
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem 0.8rem;
}

.town-shop-heading {
  color: #fff;
  font-size: 1.18rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.town-shop-list {
  display: grid;
  gap: 0;
  margin-inline: -0.8rem;
}

.town-shop-section > .town-shop-list:last-child {
  margin-bottom: -0.8rem;
}

.town-shop-row {
  align-items: center;
  background: #000;
  border-bottom: 3px solid rgba(255, 255, 255, 0.28);
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.5rem 0.8rem;
}

.town-shop-row-link {
  color: inherit;
  text-decoration: none;
}

.town-shop-row-link:focus-visible {
  outline: 2px solid #facc15;
  outline-offset: 2px;
}

.town-shop-row:last-child {
  border-bottom: 0;
}

.town-shop-row-main {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  min-width: 0;
}

.town-shop-icon-wrap {
  align-items: center;
  background: #000;
  border: 1px solid #fff;
  display: flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.town-shop-icon-wrap img {
  max-height: 24px;
  max-width: 24px;
}

.town-shop-map-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.town-shop-item-meta {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.4rem;
}

.town-shop-item-link {
  color: #fff;
  font-size: 1.16rem;
  line-height: 1.05;
  text-decoration: none;
}

.town-shop-special {
  color: #eab308;
  font-weight: 700;
  line-height: 1.05;
}

.town-shop-stats {
  color: #d1d5db;
  display: flex;
  font-size: 0.98rem;
  gap: 0.75rem;
  line-height: 1.05;
  width: 100%;
}

.town-shop-price {
  color: #d1d5db;
  display: grid;
  justify-items: end;
  margin-left: 0.5rem;
  min-width: 122px;
  text-align: right;
}

.town-shop-price span {
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  line-height: 1.05;
  text-transform: uppercase;
}

.town-shop-price strong {
  color: #facc15;
  font-size: 1.03rem;
  line-height: 1.1;
}

.town-shop-price-owned strong {
  color: #86efac;
}

.town-shop-empty {
  border: 3px dashed rgba(255, 255, 255, 0.35);
  color: #d1d5db;
  padding: 0.55rem 0.65rem;
}

@media (hover: hover) {
  .town-shop-row-link:hover {
    background: rgba(255, 255, 255, 0.03);
  }

  .town-shop-row-link:hover .town-shop-item-link {
    color: #facc15;
  }
}

@media (max-width: 640px) {
  .town-shop-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
    grid-template-columns: 1fr;
  }

  .town-shop-price {
    justify-items: start;
    margin-left: 0;
    min-width: 0;
    text-align: left;
  }

  .town-shop-stats {
    flex-direction: column;
    gap: 0.12rem;
  }
}
.retro-sheet {
  display: grid;
  gap: 0.75rem;
}

.top-level-sections .panel-content {
  padding: 0;
}

.retro-section {
  background: #000;
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem 0.8rem;
}

.retro-heading {
  color: #fff;
  font-size: 1.12rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.retro-subheading {
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.retro-copy {
  color: #fff;
}

.retro-copy strong,
.retro-value {
  color: #fff;
}

.retro-muted {
  color: var(--color-gray-300);
}

.retro-empty {
  border: 3px dashed rgba(255, 255, 255, 0.35);
  color: var(--color-gray-300);
  line-height: 1.35;
  padding: 0.55rem 0.65rem;
}

.sidebar-panel .retro-empty,
.travel-panel .retro-empty,
.mobile-tab-only .retro-empty {
  margin-top: 0.35rem;
}

.retro-highlight {
  color: #facc15;
}

.retro-action-list {
  display: grid;
  gap: 0;
}

.retro-section > .retro-action-list,
.panel-content > .retro-action-list,
.sidebar-section-content > .retro-action-list {
  margin-inline: -0.8rem;
}

.retro-section > .retro-action-list:last-child,
.panel-content > .retro-action-list:last-child,
.sidebar-section-content > .retro-action-list:last-child {
  margin-bottom: -0.8rem;
}

.retro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.retro-actions-confirm {
  justify-content: flex-end;
}

.retro-action-stack {
  display: grid;
  gap: 0.45rem;
}

.retro-action-link {
  border-bottom: 3px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  display: block;
  line-height: 2;
  min-height: 1.9rem;
  padding: 0.4rem 0.8rem;
  text-decoration: none;
}

.retro-action-link:last-child {
  border-bottom: 0;
}

.retro-action-toggle {
  background: transparent;
  cursor: pointer;
  letter-spacing: 0.08em;
  line-height: 1.2;
  min-height: 0;
  padding-block: 0.18rem;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}

.sidebar-section {
  margin-top: 0.12rem;
}

.sidebar-section > .desktop-only {
  margin-inline: -0.8rem;
}

.sidebar-section-content {
  margin-top: 0.35rem;
}

.sidebar-section-content > * + * {
  margin-top: 0.35rem;
}

.sidebar-equipment-list {
  display: grid;
  gap: 0.2rem;
}

.sidebar-equipment-row {
  align-items: center;
  display: flex;
  gap: 0.35rem;
}

.sidebar-equipment-label {
  min-width: 3.9rem;
}

.sidebar-stat-list {
  display: grid;
  gap: 0.2rem;
}

.sidebar-stat-row {
  display: flex;
  gap: 0.35rem;
}

.sidebar-stat-label {
  min-width: 5.4rem;
}

.sidebar-statbar-table {
  justify-self: start;
  width: auto;
}

.sidebar-friend-tools {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

.sidebar-friend-form {
  margin-top: 0;
}

.sidebar-friend-form-row {
  align-items: stretch;
  display: flex;
  gap: 0.6rem;
}

.sidebar-friend-form-row .field-input,
.sidebar-friend-form-row .btn {
  min-height: 2.4rem;
}

.sidebar-friend-form-row .btn {
  justify-content: center;
  min-width: 6.4rem;
}

.sidebar-friend-input {
  min-width: 0;
}

.sidebar-friend-empty {
  margin-top: 0.35rem;
}

.sidebar-friend-list {
  display: grid;
  gap: 0;
  margin-inline: -0.8rem;
  margin-top: 0.2rem;
}

.sidebar-friend-list:last-child {
  margin-bottom: -0.8rem;
}

.sidebar-friend-row {
  align-items: center;
  background: #000;
  border-bottom: 3px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  line-height: 1.1;
  min-height: 2.1rem;
  padding: 0.42rem 0.8rem;
  text-decoration: none;
}

.sidebar-friend-row:last-child {
  border-bottom: 0;
}

.sidebar-friend-row-main {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  min-width: 0;
}

.sidebar-friend-icon-wrap {
  align-items: center;
  background: #000;
  border: 1px solid #fff;
  display: flex;
  flex-shrink: 0;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.sidebar-friend-icon {
  height: 1.2rem;
  width: 1.2rem;
}

.sidebar-friend-meta {
  display: grid;
  gap: 0.02rem;
  min-width: 0;
}

.sidebar-friend-name {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-friend-class {
  color: var(--color-gray-300);
  font-size: 0.96rem;
  letter-spacing: 0.03em;
}

.sidebar-friend-status {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .sidebar-section {
    margin-top: 0.5rem;
  }

  .retro-action-link {
    min-height: 2.05rem;
    padding: 0.48rem 0.8rem;
  }

  .sidebar-friend-row {
    min-height: 2.25rem;
    padding: 0.5rem 0.8rem;
  }
}

.retro-form-grid {
  display: grid;
  gap: 0.55rem;
}

.retro-form-row {
  display: grid;
  gap: 0.25rem;
}

.retro-form-label {
  color: var(--color-gray-300);
  display: block;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.retro-inline-links a {
  color: #fff;
  text-decoration: underline;
}

.retro-stat-list {
  display: grid;
  gap: 0.2rem;
}

.retro-stat-row {
  align-items: baseline;
  display: flex;
  gap: 0.4rem;
}

.retro-stat-label {
  color: var(--color-gray-300);
  min-width: 80px;
  text-transform: uppercase;
}

.retro-radio-list {
  display: grid;
  gap: 0.3rem;
}

.retro-radio-row {
  align-items: center;
  border-bottom: 3px solid rgba(255, 255, 255, 0.24);
  display: flex;
  gap: 0.45rem;
  padding: 0.28rem 0.12rem;
}

.retro-radio-row:last-child {
  border-bottom: 0;
}

.retro-radio-row input[type="radio"] {
  accent-color: #ca8a04;
}

.retro-kv {
  color: #fff;
  display: grid;
  gap: 0.2rem;
}

.retro-alert {
  color: var(--color-red-500);
}

.retro-log {
  display: grid;
  gap: 0.24rem;
}

.retro-log-line {
  color: #fff;
}

.retro-section-with-portrait {
  min-height: 4.5rem;
  padding-right: 5.7rem;
  position: relative;
}

.char-portrait-dock {
  position: absolute;
  right: -11px;
  top: -11px;
}

.landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.landing-cta-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.landing-cta-btn-wide {
  min-width: 110px;
}

.landing-cta-btn-narrow {
  min-width: 90px;
}

.landing-preview-image {
  max-width: 366px;
  margin: 0 auto;
  display: block;
}

@media (hover: hover) {
  .retro-action-link:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #facc15;
  }

  .sidebar-friend-row-link:hover {
    background: rgba(255, 255, 255, 0.03);
  }

  .sidebar-friend-row-link:hover .sidebar-friend-name {
    color: #facc15;
  }

  .retro-inline-links a:hover {
    color: #facc15;
  }
}

/* Marketing / guest landing layout */
html.marketing-layout {
  height: 100%;
}

body.marketing-layout {
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
}

.marketing-header {
  position: relative;
  z-index: 50;
}

.marketing-header-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 80rem;
  padding: 2rem 1rem;
}

.marketing-logo {
  height: 4rem;
  width: auto;
}

.marketing-main {
  flex: 1 1 0%;
}

.marketing-landing-shell {
  min-height: 100%;
  overflow: hidden;
  padding-bottom: 5rem;
  padding-top: 5rem;
}

.marketing-main-inner {
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1rem;
}

.marketing-hero {
  display: block;
}

.marketing-hero-text {
  margin-inline: auto;
  max-width: 42rem;
  position: relative;
  z-index: 10;
}

.marketing-hero-heading {
  color: #fff;
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  text-align: center;
}

.marketing-hero-body {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.4;
  margin-top: 1.5rem;
  text-align: center;
}

.marketing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}

.marketing-cta-btn {
  background: #000;
  border: 4px solid #fff;
  color: #fff;
  display: inline-flex;
  text-decoration: none;
}

.marketing-cta-btn-inner {
  align-items: center;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  padding-inline: 1rem;
  font-size: 1.125rem;
}

.pwa-install-open {
  overflow: hidden;
}

.pwa-install-dialog[hidden] {
  display: none;
}

.pwa-install-dialog {
  align-items: center;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  z-index: 10000;
}

.pwa-install-panel {
  background: #000;
  color: #fff;
  max-height: calc(100vh - 2rem);
  max-width: 34rem;
  overflow: auto;
  padding: 1.5rem;
  position: relative;
  width: 100%;
}

.pwa-install-close {
  color: #fff;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  position: absolute;
  right: 1rem;
  top: 0.75rem;
}

.pwa-install-heading {
  font-size: 2rem;
  line-height: 1;
  padding-right: 2rem;
}

.pwa-install-copy {
  font-size: 1.125rem;
  line-height: 1.35;
  margin-top: 1rem;
}

.pwa-install-action {
  margin-top: 1rem;
}

.pwa-install-steps {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.pwa-install-steps h3 {
  color: #facc15;
  font-size: 1.25rem;
  line-height: 1;
}

.pwa-install-steps p {
  font-size: 1.0625rem;
  line-height: 1.35;
  margin-top: 0.25rem;
}

.pwa-install-footer {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.marketing-hero-media {
  margin-inline: auto;
  margin-top: 2.5rem;
  position: relative;
}

.marketing-phone-wrap {
  -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent);
  mask-image: linear-gradient(to bottom, white 60%, transparent);
  height: 448px;
  margin-inline: -1rem;
  padding-inline: 2.25rem;
}

.marketing-phone-mockup {
  aspect-ratio: 366 / 729;
  margin-inline: auto;
  max-width: 366px;
  position: relative;
}

.marketing-phone-shadow {
  border-radius: 15.846% / 7.956%;
  bottom: 0.137%;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  left: 0.96%;
  position: absolute;
  right: 0.686%;
  top: 0.137%;
}

.marketing-phone-screenshot {
  padding: 1.5rem;
  position: relative;
  width: 100%;
}

.marketing-phone-frame {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.marketing-footer {
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1rem;
  width: 100%;
}

.marketing-footer-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
  padding-top: 2rem;
  width: 100%;
}

.marketing-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: flex-start;
}

.marketing-footer-link {
  border-radius: 0.5rem;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.5556;
  margin: -0.75rem -0.75rem;
  padding: 0.5rem 0.75rem;
  position: relative;
  text-decoration: underline;
}

.marketing-footer-copy {
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.5556;
  margin-top: 1.5rem;
}

.marketing-footer-copy a {
  text-decoration: underline;
}

@media (hover: hover) {
  .marketing-cta-btn:hover {
    background: #fff;
    color: #000;
  }

  .marketing-footer-link:hover {
    color: #ca8a04;
  }

  .marketing-footer-copy a:hover {
    color: #ca8a04;
  }
}

@media (min-width: 640px) {
  .marketing-landing-shell {
    padding-bottom: 8rem;
    padding-top: 8rem;
  }

  .marketing-header-inner,
  .marketing-main-inner,
  .marketing-footer {
    padding-inline: 1.5rem;
  }

  .marketing-phone-wrap {
    margin-inline: 0;
  }
}

@media (min-width: 768px) {
  .marketing-footer-inner {
    flex-direction: row;
    justify-content: space-between;
  }

  .marketing-footer-copy {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .marketing-hero {
    display: grid;
    gap: 2rem 2rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .marketing-hero-text {
    grid-column: span 7 / span 7;
    margin-inline: 0;
    max-width: none;
    padding-top: 1.5rem;
  }

  .marketing-hero-heading,
  .marketing-hero-body {
    text-align: left;
  }

  .marketing-hero-actions {
    justify-content: flex-start;
  }

  .marketing-hero-media {
    grid-column: span 5 / span 5;
    grid-row: span 2 / span 2;
    margin-inline: 0;
    margin-top: 0;
  }

  .marketing-phone-wrap {
    -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent);
    mask-image: linear-gradient(to bottom, white 60%, transparent);
    bottom: -5rem;
    height: auto;
    left: -2.5rem;
    margin-inline: 0;
    max-width: none;
    padding-inline: 0;
    padding-top: 2.5rem;
    position: absolute;
    right: -2.5rem;
    top: -2.5rem;
  }

  .marketing-header-inner,
  .marketing-main-inner,
  .marketing-footer {
    padding-inline: 2rem;
  }
  .marketing-landing-shell {
    padding-bottom: 8rem;
  }
}

@media (min-width: 1280px) {
  .marketing-hero-text {
    grid-column: span 6 / span 6;
  }

  .marketing-hero-media {
    grid-column: span 6 / span 6;
  }

  .marketing-landing-shell {
    padding-bottom: 9rem;
  }

  .marketing-phone-wrap {
    bottom: -8rem;
  }
}