@layer reset, base, components, layout, responsive;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    color-scheme: dark;
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    background: #0c0d0d;
  }

  body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button {
    color: inherit;
  }

  h1,
  h2,
  h3,
  p {
    margin-block-start: 0;
  }
}

@layer base {
  :root {
    --ink: #eee8dc;
    --muted: #aaa69d;
    --dim: #76746f;
    --night: #0c0d0d;
    --coal: #121414;
    --slate: #181b1b;
    --iron: #242827;
    --line: rgb(224 214 190 / 16%);
    --line-strong: rgb(224 214 190 / 32%);
    --ember: #d96a35;
    --ember-bright: #ff9660;
    --gold: #d5ac61;
    --human: #5e91b5;
    --undead: #8a6cae;
    --success: #79ae84;
    --warning: #d5ac61;
    --danger: #db7065;
    --shadow: 0 24px 70px rgb(0 0 0 / 42%);
  }

  body {
    color: var(--ink);
    background:
      radial-gradient(
        circle at 15% -10%,
        rgb(217 106 53 / 12%),
        transparent 30rem
      ),
      radial-gradient(
        circle at 90% 25%,
        rgb(94 145 181 / 8%),
        transparent 34rem
      ),
      linear-gradient(180deg, #121313 0, var(--night) 55%);
  }

  body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px);
    background-size: 32px 32px;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 68%);
  }

  a,
  button {
    -webkit-tap-highlight-color: transparent;
  }

  button:not(:disabled) {
    cursor: pointer;
  }

  button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :focus-visible {
    outline: 3px solid var(--ember-bright);
    outline-offset: 3px;
  }

  .skip-link {
    position: fixed;
    z-index: 100;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.75rem 1rem;
    color: #111;
    background: var(--ink);
    transform: translateY(-150%);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .app-shell {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .app-shell--battle {
    display: grid;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .eyebrow {
    margin-bottom: 0.6rem;
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  h1,
  h2,
  h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    line-height: 1.05;
    text-wrap: balance;
  }

  h1 {
    margin-bottom: 1rem;
    font-size: clamp(2.25rem, 10vw, 5.25rem);
    letter-spacing: -0.045em;
  }

  h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.5rem, 5vw, 2.35rem);
  }

  h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
  }

  p {
    color: var(--muted);
    line-height: 1.65;
  }

  .page {
    width: min(100% - 2rem, 1240px);
    min-height: calc(100dvh - 8rem);
    margin-inline: auto;
    padding-block: 2.5rem 5rem;
  }

  .page--narrow {
    width: min(100% - 2rem, 980px);
  }

  .button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1.05rem;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
  }

  .button--primary {
    border-color: var(--ember);
    color: #160e09;
    background: linear-gradient(135deg, var(--ember-bright), var(--ember));
    box-shadow: 0 8px 24px rgb(217 106 53 / 20%);
  }

  .button--secondary {
    border-color: rgb(213 172 97 / 50%);
    color: #17130b;
    background: linear-gradient(135deg, #efd18d, var(--gold));
  }

  .button--ghost,
  .button--compact {
    background: rgb(255 255 255 / 4%);
  }

  .button--compact {
    min-height: 44px;
    padding-inline: 0.85rem;
  }

  .button--human {
    border-color: rgb(94 145 181 / 60%);
    color: #ecf7ff;
    background: linear-gradient(135deg, #376a8e, #26495e);
  }

  .button--undead {
    border-color: rgb(138 108 174 / 60%);
    color: #fbf5ff;
    background: linear-gradient(135deg, #654c82, #423354);
  }

  label {
    display: grid;
    gap: 0.45rem;
    color: #d6d1c8;
    font-size: 0.79rem;
    font-weight: 750;
    letter-spacing: 0.025em;
  }

  input,
  textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--ink);
    background: #0d0f0f;
  }

  input,
  select {
    padding: 0.72rem 0.8rem;
  }

  textarea {
    padding: 0.8rem;
    line-height: 1.5;
    resize: vertical;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--gold);
  }

  .label-hint {
    color: var(--dim);
    font-size: 0.7rem;
    font-weight: 500;
  }
}

@layer components {
  .site-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: max(0.55rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right)) 0.55rem
      max(0.75rem, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line);
    background: rgb(12 13 13 / 90%);
    backdrop-filter: blur(16px);
  }

  .brand {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 0.65rem;
    padding: 0;
    border: 0;
    text-align: left;
    background: transparent;
  }

  .brand__mark {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: 0.8rem;
    transform: rotate(45deg);
  }

  .brand__mark::first-line {
    transform: rotate(-45deg);
  }

  .brand strong,
  .brand small {
    display: block;
  }

  .brand strong {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 500;
  }

  .brand small {
    margin-top: 0.1rem;
    color: var(--dim);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .site-header nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .nav-button {
    min-width: 44px;
    min-height: 44px;
    padding: 0.55rem;
    border: 0;
    color: var(--muted);
    background: transparent;
  }

  .player-chip {
    display: none;
    color: var(--muted);
    font-size: 0.78rem;
  }

  .notice {
    position: sticky;
    z-index: 18;
    top: 64px;
    width: min(calc(100% - 1rem), 760px);
    margin: 0.5rem auto -0.25rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    color: var(--muted);
    background: rgb(18 20 20 / 96%);
    box-shadow: var(--shadow);
    font-size: 0.78rem;
  }

  .notice--success {
    color: var(--success);
  }

  .notice--warning {
    color: var(--warning);
  }

  .notice--danger {
    color: var(--danger);
  }

  .app-shell--battle .notice {
    position: fixed;
    top: calc(64px + 0.5rem);
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }

  .site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem max(1rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    color: var(--dim);
    font-size: 0.68rem;
  }

  .loading-panel {
    display: grid;
    min-height: calc(100dvh - 4rem);
    place-content: center;
    padding: 2rem;
    text-align: center;
  }

  .loading-rune {
    display: block;
    margin-bottom: 1.25rem;
    color: var(--ember);
    font-size: 3rem;
    animation: pulse 1.8s ease-in-out infinite;
  }

  @keyframes pulse {
    50% {
      opacity: 0.35;
      transform: scale(0.88);
    }
  }

  .auth-layout {
    display: grid;
    min-height: 100dvh;
  }

  .auth-story {
    position: relative;
    display: grid;
    min-height: 46dvh;
    align-content: end;
    overflow: hidden;
    padding: 4rem 1.25rem 2rem;
    border-bottom: 1px solid var(--line);
    background:
      linear-gradient(0deg, rgb(8 9 9 / 92%), rgb(8 9 9 / 10%)),
      radial-gradient(
        circle at 70% 24%,
        rgb(217 106 53 / 35%),
        transparent 8rem
      ),
      conic-gradient(
        from 210deg at 70% 40%,
        #161919,
        #4a271b,
        #151717,
        #283236,
        #161919
      );
  }

  .auth-story::before,
  .auth-story::after {
    position: absolute;
    border: 1px solid rgb(213 172 97 / 15%);
    content: "";
    transform: rotate(45deg);
  }

  .auth-story::before {
    top: 9%;
    right: -8rem;
    width: 22rem;
    height: 22rem;
  }

  .auth-story::after {
    top: 24%;
    right: -1rem;
    width: 11rem;
    height: 11rem;
  }

  .auth-story > * {
    position: relative;
    z-index: 1;
  }

  .auth-story h1 {
    max-width: 12ch;
  }

  .lede {
    max-width: 42rem;
    color: #c4bfb4;
    font-size: 1.02rem;
  }

  .realm-sigil {
    position: absolute;
    z-index: 1;
    top: 14%;
    right: 16%;
    display: grid;
    width: 7rem;
    height: 7rem;
    place-items: center;
    border: 1px solid rgb(213 172 97 / 60%);
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: 1.5rem;
    transform: rotate(45deg);
  }

  .realm-sigil span {
    transform: rotate(-45deg);
  }

  .feature-list {
    display: none;
    padding: 0;
    color: var(--muted);
    list-style: none;
  }

  .feature-list span {
    margin-right: 0.45rem;
    color: var(--gold);
  }

  .auth-card {
    display: grid;
    align-content: center;
    gap: 1.5rem;
    padding: 2rem 1.25rem 4rem;
    background: var(--coal);
  }

  .auth-section form {
    display: grid;
    gap: 0.85rem;
  }

  .auth-section .button {
    width: 100%;
    margin-top: 0.3rem;
  }

  .divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--dim);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .divider::before,
  .divider::after {
    height: 1px;
    flex: 1;
    background: var(--line);
    content: "";
  }

  .page-heading {
    max-width: 760px;
    margin-bottom: 2rem;
  }

  .race-grid {
    display: grid;
    gap: 1rem;
  }

  .race-card {
    position: relative;
    overflow: hidden;
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-radius: 5px;
    background:
      linear-gradient(145deg, rgb(255 255 255 / 5%), transparent 55%),
      var(--slate);
    box-shadow: var(--shadow);
  }

  .race-card::after {
    position: absolute;
    inset: auto -4rem -7rem auto;
    width: 15rem;
    height: 15rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
    opacity: 0.13;
  }

  .race-card--human {
    color: var(--human);
  }

  .race-card--undead {
    color: var(--undead);
  }

  .race-card p,
  .race-card h2,
  .race-card dl {
    color: var(--ink);
  }

  .race-card > p:not(.eyebrow) {
    color: var(--muted);
  }

  .race-emblem {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.5rem;
    place-items: center;
    border: 1px solid currentColor;
    font-size: 1.6rem;
    transform: rotate(45deg);
  }

  .race-emblem::first-line {
    transform: rotate(-45deg);
  }

  .traits {
    display: grid;
    gap: 0.5rem;
    margin-block: 1.5rem;
  }

  .traits div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--line);
  }

  .traits dt {
    color: var(--dim);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .traits dd {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: right;
  }

  .race-card .button {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .quiet-note {
    margin-top: 1.25rem;
    color: var(--dim);
    font-size: 0.75rem;
  }

  .campaign-hero {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    background:
      linear-gradient(105deg, rgb(12 13 13 / 88%), rgb(12 13 13 / 35%)),
      radial-gradient(
        circle at 85% 50%,
        rgb(217 106 53 / 22%),
        transparent 12rem
      ),
      #25201c;
  }

  .campaign-hero h1 {
    max-width: 17ch;
    font-size: clamp(2.15rem, 7vw, 4.4rem);
  }

  .profile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin: 0;
    background: var(--line);
  }

  .profile-stats div {
    padding: 0.7rem;
    background: rgb(12 13 13 / 82%);
  }

  .profile-stats dt {
    color: var(--dim);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .profile-stats dd {
    margin: 0.2rem 0 0;
    color: var(--ink);
    font-family: Georgia, serif;
  }

  .campaign-layout {
    display: grid;
    gap: 2.5rem;
    margin-top: 2.5rem;
  }

  .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .section-heading h1,
  .section-heading h2 {
    margin-bottom: 0;
  }

  .progress-pill {
    flex: 0 0 auto;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.7rem;
  }

  .campaign-path {
    position: relative;
    display: grid;
    gap: 0.8rem;
  }

  .campaign-path::before {
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    left: 1.35rem;
    width: 1px;
    background: linear-gradient(var(--gold), var(--line));
    content: "";
  }

  .level-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 0.8rem;
  }

  .level-card__marker {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    background: var(--night);
    font-family: Georgia, serif;
  }

  .level-card--locked .level-card__marker {
    border-color: var(--line-strong);
    color: var(--dim);
  }

  .level-card__body {
    padding: 1rem;
    border: 1px solid var(--line);
    background: var(--slate);
  }

  .level-card--locked .level-card__body {
    opacity: 0.66;
  }

  .level-card__meta,
  .level-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--dim);
    font-size: 0.68rem;
  }

  .level-card__body h3 {
    margin-top: 0.55rem;
  }

  .level-card__body p {
    margin-bottom: 1rem;
    font-size: 0.83rem;
  }

  .rating {
    color: var(--gold);
    letter-spacing: 0.08em;
  }

  .doctrine-panel {
    align-self: start;
    padding: 1.25rem;
    border: 1px solid var(--line);
    background:
      linear-gradient(160deg, rgb(138 108 174 / 7%), transparent), var(--coal);
  }

  .doctrine-panel > p:not(.eyebrow) {
    font-size: 0.84rem;
  }

  .tech-grid {
    display: grid;
    gap: 0.75rem;
  }

  .tech-card {
    padding: 1rem;
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 2%);
  }

  .tech-card--selected {
    border-color: rgb(213 172 97 / 55%);
    box-shadow: inset 3px 0 var(--gold);
  }

  .tech-card__branch {
    color: var(--gold);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .tech-card h3 {
    margin-top: 0.35rem;
  }

  .tech-card p {
    font-size: 0.78rem;
  }

  .battle-shell {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(210px, 1fr) auto;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .battle-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.6rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--line);
    background: var(--coal);
  }

  .battle-authority-note {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgb(195 155 75 / 38%);
    background: rgb(77 55 25 / 52%);
    color: var(--gold);
    font-size: 0.62rem;
    letter-spacing: 0.035em;
    line-height: 1.35;
    text-align: center;
  }

  .health {
    min-width: 0;
  }

  .health__labels {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 0.3rem;
    font-size: 0.62rem;
  }

  .health__labels span {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .health__labels strong {
    display: none;
  }

  .health__track {
    height: 8px;
    overflow: hidden;
    border: 1px solid rgb(121 174 132 / 45%);
    background: #0b0d0c;
  }

  .health__track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #4c8158, var(--success));
  }

  .health--hostile .health__labels {
    flex-direction: row-reverse;
  }

  .health--hostile .health__track {
    border-color: rgb(219 112 101 / 45%);
    transform: scaleX(-1);
  }

  .health--hostile .health__track span {
    background: linear-gradient(90deg, #983f38, var(--danger));
  }

  .wave-marker {
    min-width: 3.4rem;
    text-align: center;
  }

  .wave-marker span,
  .wave-marker small {
    display: block;
    color: var(--dim);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .wave-marker strong {
    display: block;
    margin-block: 0.1rem;
    color: var(--gold);
    font-family: Georgia, serif;
  }

  .battlefield {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background:
      linear-gradient(180deg, transparent 50%, rgb(5 7 7 / 75%)),
      radial-gradient(
        ellipse at 50% 110%,
        rgb(111 78 50 / 50%),
        transparent 58%
      ),
      #18201f;
  }

  .battlefield__sky {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        circle at 78% 18%,
        rgb(217 106 53 / 30%),
        transparent 4rem
      ),
      repeating-linear-gradient(
        165deg,
        transparent 0 2rem,
        rgb(255 255 255 / 1%) 2.1rem 2.2rem
      );
    opacity: 0.8;
  }

  .battlefield__route {
    position: absolute;
    inset: 12% 5% 24%;
  }

  .route-line {
    position: absolute;
    top: 50%;
    right: 8%;
    left: 8%;
    height: 22%;
    border-block: 1px solid rgb(213 172 97 / 18%);
    background: rgb(92 70 49 / 25%);
    transform: skewY(-4deg);
  }

  .gate {
    position: absolute;
    top: 40%;
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--muted);
    background: #111514;
    font-size: 0.58rem;
    text-transform: uppercase;
  }

  .gate--enemy {
    left: 0;
    border-color: rgb(219 112 101 / 60%);
  }

  .gate--player {
    right: 0;
    border-color: rgb(121 174 132 / 60%);
  }

  .build-grid {
    position: absolute;
    inset: 12% 13% 25%;
    display: grid;
    grid-template-columns: repeat(2, minmax(6rem, 9rem));
    align-content: space-between;
    justify-content: space-between;
    gap: 1rem;
  }

  .build-slot {
    min-height: 62px;
    padding: 0.5rem;
    border: 1px dashed var(--line-strong);
    border-radius: 50% 50% 8px 8px;
    color: var(--muted);
    background: rgb(8 10 10 / 74%);
    box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
  }

  .build-slot--selected {
    border-style: solid;
    border-color: var(--gold);
    box-shadow:
      0 0 0 3px rgb(213 172 97 / 12%),
      0 8px 24px rgb(0 0 0 / 25%);
  }

  .build-slot span,
  .build-slot strong {
    display: block;
  }

  .build-slot__category {
    color: var(--dim);
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .build-slot strong {
    margin-block: 0.15rem;
    color: var(--ink);
    font-family: Georgia, serif;
    font-size: 0.78rem;
  }

  .build-slot span:last-child {
    font-size: 0.56rem;
  }

  .threat-line {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    color: var(--muted);
    background: rgb(10 12 12 / 90%);
    font-size: 0.7rem;
  }

  .threat-line__icon {
    color: var(--ember);
  }

  .action-tray {
    max-height: 42dvh;
    overflow-y: auto;
    padding: 0.75rem max(0.75rem, env(safe-area-inset-right))
      max(0.75rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: #111313;
  }

  .resource-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.7rem;
    color: var(--muted);
    font-size: 0.72rem;
  }

  .resource-row b {
    color: var(--gold);
  }

  .action-tray__hint {
    display: none;
    margin-left: auto;
    color: var(--dim);
  }

  .action-groups {
    display: grid;
    gap: 0.75rem;
  }

  .action-group h2 {
    margin-bottom: 0.45rem;
    color: var(--dim);
    font-family: inherit;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .action-scroll {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 3px 3px 0.4rem;
    scroll-snap-type: x proximity;
  }

  .action-card {
    display: grid;
    min-width: min(78vw, 270px);
    min-height: 58px;
    grid-template-columns: 2.25rem 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    text-align: left;
    background: var(--slate);
    scroll-snap-align: start;
  }

  .action-card__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--line-strong);
    color: var(--gold);
  }

  .action-card strong,
  .action-card small {
    display: block;
  }

  .action-card strong {
    margin-bottom: 0.2rem;
    font-family: Georgia, serif;
    font-size: 0.82rem;
  }

  .action-card small {
    overflow: hidden;
    color: var(--dim);
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .unit-action {
    display: grid;
    min-width: min(88vw, 330px);
    min-height: 58px;
    grid-template-columns: minmax(8rem, 1fr) minmax(9rem, auto);
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--slate);
    scroll-snap-align: start;
  }

  .unit-action__summary {
    min-width: 0;
  }

  .unit-action__summary strong,
  .unit-action__summary small {
    display: block;
  }

  .unit-action__summary strong {
    margin-bottom: 0.2rem;
    font-family: Georgia, serif;
    font-size: 0.82rem;
  }

  .unit-action__summary small {
    overflow: hidden;
    color: var(--dim);
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .unit-action__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
  }

  .unit-action__buttons .button {
    padding-inline: 0.55rem;
    font-size: 0.65rem;
  }

  .battle-controls {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.55rem;
  }

  .battle-controls .button {
    flex: 1;
  }

  .admin-warning {
    padding: 0.75rem;
    border-left: 3px solid var(--warning);
    color: var(--warning);
    background: rgb(213 172 97 / 7%);
    font-size: 0.78rem;
  }

  .admin-layout {
    display: grid;
    gap: 1rem;
  }

  .editor-panel,
  .preview-panel {
    padding: 1rem;
    border: 1px solid var(--line);
    background: var(--coal);
  }

  .editor-panel {
    display: grid;
    gap: 1rem;
  }

  .draft-picker {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .draft-picker .button {
    flex: 0 0 auto;
  }

  .draft-picker [aria-pressed="true"] {
    border-color: var(--gold);
    color: var(--gold);
  }

  .admin-form-status {
    color: var(--warning);
    font-size: 0.78rem;
  }

  .admin-form-status:empty {
    display: none;
  }

  .form-grid {
    display: grid;
    gap: 0.8rem;
  }

  .code-editor {
    min-height: 22rem;
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: 0.72rem;
    tab-size: 2;
  }

  .editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .editor-actions .button {
    flex: 1 1 10rem;
  }

  .preview-panel dl {
    display: grid;
    gap: 1px;
    background: var(--line);
  }

  .preview-panel dl div {
    padding: 0.65rem;
    background: var(--slate);
  }

  .preview-panel dt {
    color: var(--dim);
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .preview-panel dd {
    margin: 0.2rem 0 0;
    overflow-wrap: anywhere;
  }
}

@layer layout {
  @media (min-width: 720px) {
    .auth-layout {
      grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.7fr);
    }

    .auth-story {
      min-height: 100dvh;
      padding: 4rem clamp(2rem, 7vw, 7rem);
      border-right: 1px solid var(--line);
      border-bottom: 0;
    }

    .auth-card {
      padding: 3rem clamp(2rem, 4vw, 4rem);
    }

    .feature-list {
      display: grid;
      gap: 0.5rem;
      margin: 1rem 0 0;
    }

    .race-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .race-card {
      padding: 2rem;
    }

    .campaign-hero {
      grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.65fr);
      align-items: end;
      padding: 2.25rem;
    }

    .campaign-layout {
      grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr);
    }

    .doctrine-panel {
      position: sticky;
      top: 84px;
    }

    .player-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    .health__labels strong {
      display: inline;
    }

    .build-grid {
      grid-template-columns: repeat(4, minmax(6rem, 9rem));
      align-content: center;
    }

    .action-groups {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .action-card {
      min-width: 250px;
    }

    .action-tray__hint {
      display: inline;
    }

    .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-layout {
      grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.5fr);
    }

    .preview-panel {
      position: sticky;
      top: 84px;
      align-self: start;
    }
  }

  @media (min-width: 1100px) {
    .battle-shell {
      grid-template-rows: auto minmax(320px, 1fr) auto;
    }

    .battle-topbar {
      padding-inline: 2rem;
    }

    .build-grid {
      inset-inline: 18%;
    }

    .action-tray {
      padding-inline: 2rem;
    }
  }
}

@layer responsive {
  @media (max-width: 480px) {
    .nav-button {
      max-width: 5.4rem;
      font-size: 0.7rem;
    }

    .section-heading {
      align-items: start;
    }

    .level-card__footer {
      align-items: start;
      flex-direction: column;
    }

    .level-card__footer .button {
      width: 100%;
    }

    .battle-topbar {
      padding-inline: 0.45rem;
    }

    .build-grid {
      inset-inline: 8%;
    }

    .site-footer {
      display: none;
    }
  }

  @media (orientation: landscape) and (max-height: 620px) {
    .battle-shell {
      height: calc(100dvh - 56px);
      min-height: 430px;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 38vw);
      grid-template-rows: auto minmax(0, 1fr);
    }

    .battle-topbar {
      grid-column: 1 / -1;
    }

    .action-tray {
      max-height: none;
      border-top: 0;
      border-left: 1px solid var(--line);
    }

    .action-groups {
      grid-template-columns: 1fr;
    }

    .action-card {
      min-width: 230px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}