html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #070807;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    canvas {
      display: block;
      width: 100vw;
      height: 100vh;
      cursor: default;
    }

    #game {
      position: fixed;
      inset: 0;
      z-index: 2;
    }

    .menu-root {
      position: fixed;
      inset: 0;
      z-index: 900;
      display: flex;
      min-width: 320px;
      min-height: 100vh;
      overflow: auto;
      background-color: #070807;
      background-position: center;
      background-size: cover;
      color: #f2ead7;
    }

    .menu-root[hidden] {
      display: none;
    }

    .menu-root,
    .menu-root * {
      box-sizing: border-box;
    }

    .menu-glass {
      border: 1px solid rgba(201, 190, 165, 0.22);
      border-radius: 8px;
      background: rgba(23, 25, 18, 0.58);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(18px) saturate(1.12);
      -webkit-backdrop-filter: blur(18px) saturate(1.12);
    }

    .menu-root--home {
      align-items: center;
      justify-content: flex-start;
      padding: 48px 48px 48px clamp(72px, 15vw, 360px);
    }

    .menu-home-panel {
      display: flex;
      width: min(390px, 100%);
      min-height: 280px;
      padding: 34px 32px;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 28px;
    }

    .menu-logo {
      display: block;
      width: 100%;
      max-height: 150px;
      object-fit: contain;
      filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.48));
    }

    .menu-root--intro {
      overflow: hidden;
      background-image: none;
    }

    .menu-intro-screen {
      position: relative;
      isolation: isolate;
      width: 100%;
      min-height: 100vh;
      overflow: hidden;
      background: #050604;
    }

    .menu-intro-blackout {
      position: absolute;
      inset: 0;
      width: 100%;
      min-height: 100vh;
      background: #000;
    }

    .menu-intro-stage,
    .menu-intro-scene,
    .menu-intro-layer,
    .menu-intro-shimmer {
      position: absolute;
      inset: 0;
    }

    .menu-intro-scene {
      margin: 0;
      opacity: 0;
      transition: opacity 560ms ease;
      pointer-events: none;
    }

    .menu-intro-scene.is-active {
      z-index: 2;
      opacity: 1;
    }

    .menu-intro-scene.is-leaving {
      z-index: 1;
      opacity: 0;
    }

    .menu-intro-layer {
      inset: -8vmax;
      background-image: var(--intro-image);
      background-position: var(--intro-focus-x, 50%) var(--intro-focus-y, 50%);
      background-repeat: no-repeat;
      background-size: cover;
      will-change: transform;
    }

    .menu-intro-layer--back {
      filter: brightness(0.62) saturate(0.94) blur(1.4px);
      transform: translate3d(var(--intro-back-x, 0), var(--intro-back-y, 0), 0) scale(1.04);
    }

    .menu-intro-layer--middle {
      opacity: 0.78;
      filter: brightness(0.92) saturate(1.04);
      mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 76%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 76%, transparent 100%);
      transform: translate3d(var(--intro-mid-x, 0), var(--intro-mid-y, 0), 0) scale(1.075);
    }

    .menu-intro-layer--front {
      opacity: 0.72;
      filter: brightness(1.08) contrast(1.04) saturate(1.08);
      mask-image: linear-gradient(to bottom, transparent 0%, transparent 44%, rgba(0, 0, 0, 0.62) 58%, #000 73%, #000 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 44%, rgba(0, 0, 0, 0.62) 58%, #000 73%, #000 100%);
      transform: translate3d(var(--intro-front-x, 0), var(--intro-front-y, 0), 0) scale(1.12);
    }

    .menu-intro-screen::before,
    .menu-intro-screen::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .menu-intro-screen::before {
      z-index: 3;
      background:
        linear-gradient(105deg, transparent 0 34%, rgba(231, 199, 128, 0.16) 46%, transparent 60%),
        linear-gradient(to bottom, rgba(4, 5, 4, 0.24), transparent 28%, transparent 70%, rgba(4, 5, 4, 0.48));
      mix-blend-mode: screen;
      opacity: 0.78;
    }

    .menu-intro-screen::after {
      z-index: 4;
      background:
        linear-gradient(to right, rgba(0, 0, 0, 0.48), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.48)),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.34), transparent 24%, transparent 68%, rgba(0, 0, 0, 0.62));
    }

    .menu-intro-shimmer {
      z-index: 3;
      background: linear-gradient(100deg, transparent 0 30%, rgba(246, 219, 158, 0.2) 48%, transparent 66%);
      mix-blend-mode: screen;
      opacity: 0.26;
      transform: translate3d(-26%, 0, 0);
      animation: menu-intro-shimmer 4.8s ease-in-out infinite alternate;
      pointer-events: none;
    }

    .menu-intro-controls {
      position: absolute;
      top: 22px;
      right: 22px;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .menu-intro-skip {
      min-width: 96px;
      min-height: 40px;
      padding: 0 16px;
      background: rgba(18, 19, 14, 0.62);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .menu-intro-progress {
      position: absolute;
      left: 50%;
      bottom: 26px;
      z-index: 5;
      display: flex;
      gap: 8px;
      transform: translateX(-50%);
    }

    .menu-intro-progress-dot {
      display: block;
      width: 28px;
      height: 3px;
      border-radius: 999px;
      background: rgba(242, 234, 215, 0.28);
      box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
      transition: background 180ms ease, opacity 180ms ease;
    }

    .menu-intro-progress-dot.is-active {
      background: #d39b32;
    }

    @keyframes menu-intro-shimmer {
      from {
        transform: translate3d(-34%, 0, 0);
      }

      to {
        transform: translate3d(22%, 0, 0);
      }
    }

    .menu-primary-button,
    .menu-secondary-button,
    .menu-character-row,
    .menu-type-button,
    .menu-color-button,
    .menu-palette-slot,
    .menu-palette-row-hex,
    .menu-hex-input {
      font: inherit;
    }

    .menu-primary-button,
    .menu-secondary-button {
      min-height: 46px;
      border: 1px solid #9a7a32;
      border-radius: 6px;
      padding: 0 20px;
      color: #f2ead7;
      font-size: 15px;
      font-weight: 900;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }

    .menu-primary-button {
      background: linear-gradient(180deg, #d8a33a 0%, #9c691c 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 28px rgba(0, 0, 0, 0.36);
    }

    .menu-secondary-button {
      background: rgba(32, 34, 25, 0.82);
      border-color: #6f6342;
    }

    .menu-primary-button:hover,
    .menu-secondary-button:hover {
      transform: translateY(-1px);
      border-color: #e2bd6b;
    }

    .menu-primary-button:disabled,
    .menu-secondary-button:disabled {
      cursor: not-allowed;
      opacity: 0.46;
      transform: none;
    }

    .menu-screen {
      display: grid;
      width: min(100%, var(--menu-content-width, 1440px));
      min-height: 100vh;
      margin: 0 auto;
      gap: 28px;
      padding: 48px;
    }

    .menu-screen--select {
      --menu-content-width: 1280px;
      grid-template-columns: minmax(320px, 520px) minmax(360px, 1fr);
      align-items: center;
    }

    .menu-screen--create {
      --menu-content-width: 1440px;
      grid-template-columns: minmax(230px, 340px) minmax(360px, 1fr) minmax(220px, 300px);
      align-items: center;
    }

    .menu-panel {
      position: relative;
      z-index: 4;
      padding: 22px;
    }

    .menu-panel-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
      color: #c9bea5;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .menu-panel-heading strong {
      color: #d39b32;
    }

    .menu-panel-heading-tools {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .menu-icon-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(211, 155, 50, 0.46);
      border-radius: 5px;
      background: rgba(32, 34, 25, 0.72);
      color: #d39b32;
      cursor: pointer;
      transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
    }

    .menu-icon-button:hover {
      border-color: #e6c06f;
      background: rgba(41, 41, 31, 0.92);
      color: #f2ead7;
      transform: translateY(-1px);
    }

    .menu-character-list,
    .menu-type-list,
    .menu-color-list,
    .menu-palette-list,
    .menu-actions {
      display: grid;
      gap: 12px;
    }

    .menu-character-row,
    .menu-type-button {
      display: grid;
      align-items: center;
      gap: 14px;
      width: 100%;
      min-height: 76px;
      border: 1px solid rgba(111, 99, 66, 0.72);
      border-radius: 6px;
      padding: 10px;
      background: rgba(32, 34, 25, 0.74);
      color: #f2ead7;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
    }

    .menu-character-row {
      grid-template-columns: 64px 1fr auto 40px;
    }

    .menu-type-button {
      grid-template-columns: 56px 1fr;
    }


    .menu-character-row:hover,
    .menu-type-button:hover,
    .menu-character-row.is-selected,
    .menu-type-button.is-selected {
      border-color: #d39b32;
      background: rgba(41, 41, 31, 0.9);
      transform: translateY(-1px);
    }

    .menu-character-thumb,
    .menu-type-thumb {
      width: 56px;
      height: 56px;
      border-radius: 6px;
      object-fit: cover;
      object-position: top center;
      background: #14150f;
      border: 1px solid rgba(201, 190, 165, 0.18);
    }

    .menu-character-copy,
    .menu-type-button span {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .menu-character-copy strong,
    .menu-type-button strong {
      overflow: hidden;
      color: #f2ead7;
      font-size: 15px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .menu-character-copy small,
    .menu-type-button small {
      color: #c9bea5;
      font-size: 12px;
    }

    .menu-character-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .menu-character-copy .menu-character-level {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 2px 7px;
      border: 1px solid rgba(211, 155, 50, 0.54);
      border-radius: 999px;
      background: rgba(211, 155, 50, 0.14);
      color: #f2ead7;
      font-weight: 900;
      line-height: 1;
    }

    .menu-character-color {
      width: 18px;
      height: 42px;
      border: 1px solid rgba(242, 234, 215, 0.34);
      border-radius: 4px;
      background:
        linear-gradient(
          to bottom,
          transparent calc(50% - 0.5px),
          rgba(20, 21, 15, 0.72) calc(50% - 0.5px),
          rgba(20, 21, 15, 0.72) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)
        ),
        linear-gradient(
          to bottom,
          var(--character-primary-color, var(--character-color)) 0 50%,
          var(--character-secondary-color, var(--character-color)) 50% 100%
        );
    }

    .menu-delete-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 1px solid transparent;
      border-radius: 4px;
      background: rgba(185, 71, 53, 0.08);
      color: #8f8773;
      cursor: pointer;
      transition: all 0.16s ease;
      z-index: 2;
    }

    .menu-delete-button:hover {
      border-color: #b94735;
      background: rgba(185, 71, 53, 0.22);
      color: #ff6b6b;
      transform: scale(1.05);
    }

    .menu-danger-button {
      min-height: 46px;
      border: 1px solid #d65b50;
      border-radius: 6px;
      padding: 0 22px;
      background: linear-gradient(180deg, #b94735, #7f2f29);
      color: #fff6ef;
      font: 900 14px 'Inter', system-ui, -apple-system, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 28px -18px rgba(0, 0, 0, 0.8);
    }

    .menu-danger-button:hover,
    .menu-danger-button:focus-visible {
      background: linear-gradient(180deg, #d65b50, #8f362d);
      outline: none;
      box-shadow: 0 0 0 3px rgba(214, 91, 80, 0.22), 0 16px 34px -20px rgba(0, 0, 0, 0.9);
    }

    .menu-dialog-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(6, 7, 5, 0.68);
      backdrop-filter: blur(4px);
    }

    .menu-dialog {
      width: min(440px, calc(100vw - 40px));
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 16px;
      padding: 22px;
      border-color: rgba(211, 155, 50, 0.7);
      background: rgba(16, 20, 17, 0.94);
      color: #f2ead7;
      box-shadow: 0 28px 70px -20px rgba(0, 0, 0, 0.82);
    }

    .menu-dialog-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(185, 71, 53, 0.64);
      border-radius: 8px;
      background: rgba(185, 71, 53, 0.16);
      color: #ff8a7d;
    }

    .menu-dialog-copy {
      min-width: 0;
    }

    .menu-dialog-copy strong {
      display: block;
      margin-bottom: 8px;
      color: #f2ead7;
      font: 900 22px/1.1 'Inter', system-ui, -apple-system, sans-serif;
      letter-spacing: 0;
    }

    .menu-dialog-copy p {
      margin: 0;
      color: #c9bea5;
      font: 600 14px/1.5 'Inter', system-ui, -apple-system, sans-serif;
    }

    .menu-dialog-actions {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 4px;
    }

    .menu-actions {
      grid-template-columns: 1fr 140px;
      margin-top: 18px;
    }

    .menu-character-stage,
    .menu-create-stage {
      position: relative;
      display: grid;
      min-height: 640px;
      align-content: center;
      justify-items: center;
      padding: 28px;
    }

    .menu-create-stage {
      gap: 18px;
    }

    .menu-character-stage::before,
    .menu-create-stage::before {
      content: "";
      position: absolute;
      width: min(54vw, 520px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, var(--character-color) 0%, transparent 68%);
      filter: blur(10px);
      opacity: 0.24;
      pointer-events: none;
    }

    .menu-character-preview {
      position: relative;
      z-index: 1;
      width: min(44vw, 520px);
      height: min(66vh, 520px);
      max-height: 66vh;
      object-fit: contain;
      object-position: center bottom;
      filter: drop-shadow(0 32px 42px rgba(0, 0, 0, 0.62));
    }

    .menu-character-preview-canvas,
    .menu-character-preview-fallback {
      display: block;
      width: 100%;
      height: 100%;
    }

    .menu-character-preview-canvas {
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    .menu-character-preview-canvas.is-dragging {
      cursor: grabbing;
    }

    .menu-character-preview-fallback {
      object-fit: contain;
      object-position: center bottom;
    }

    .menu-character-nameplate {
      position: relative;
      z-index: 2;
      display: grid;
      min-width: min(420px, 100%);
      margin-bottom: 10px;
      padding: 16px 20px;
      text-align: center;
      border-color: var(--character-color);
    }

    .menu-character-nameplate strong {
      overflow-wrap: anywhere;
      font-size: 26px;
      font-weight: 900;
    }

    .menu-character-nameplate span {
      margin-top: 4px;
      color: #c9bea5;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .menu-create-form {
      position: relative;
      z-index: 2;
      display: grid;
      width: min(430px, 100%);
      gap: 12px;
    }

    .menu-create-actions {
      display: grid;
      grid-template-columns: minmax(112px, 0.75fr) minmax(140px, 1fr);
      gap: 12px;
    }

    .menu-name-input {
      width: 100%;
      min-height: 48px;
      border: 1px solid #6f6342;
      border-radius: 6px;
      padding: 0 16px;
      outline: none;
      background: rgba(13, 15, 11, 0.84);
      color: #f2ead7;
      font-size: 16px;
      font-weight: 700;
    }

    .menu-name-input:focus {
      border-color: #d39b32;
      box-shadow: 0 0 0 3px rgba(211, 155, 50, 0.18);
    }

    .menu-name-input.is-invalid,
    .menu-name-input:invalid:not(:placeholder-shown) {
      border-color: #b94735;
      color: #ffb4a9;
      box-shadow: 0 0 0 3px rgba(185, 71, 53, 0.18);
    }

    .menu-color-list {
      grid-template-columns: repeat(3, minmax(48px, 1fr));
    }

    .menu-color-button {
      display: grid;
      min-height: 52px;
      place-items: center;
      border: 1px solid rgba(111, 99, 66, 0.82);
      border-radius: 6px;
      background: rgba(32, 34, 25, 0.76);
      cursor: pointer;
    }

    .menu-color-button span {
      width: 30px;
      height: 30px;
      border: 2px solid rgba(242, 234, 215, 0.48);
      border-radius: 50%;
      background: var(--swatch);
    }

    .menu-color-button:hover,
    .menu-color-button.is-selected {
      border-color: #d39b32;
      background: rgba(41, 41, 31, 0.92);
    }

    .menu-palette-list {
      grid-template-columns: repeat(4, minmax(42px, 1fr));
      gap: 8px;
      max-height: min(52vh, 430px);
      overflow-y: auto;
      padding-right: 2px;
    }

    .menu-palette-list--named {
      grid-template-columns: 1fr;
      gap: 8px;
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }

    .menu-palette-row {
      display: grid;
      grid-template-columns: minmax(92px, 1fr) 32px minmax(104px, 122px);
      align-items: center;
      min-height: 34px;
      color: #c7c6dd;
    }

    .menu-palette-row-label {
      overflow: hidden;
      padding-right: 14px;
      color: rgba(223, 222, 239, 0.86);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 2px;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .menu-palette-row-swatch {
      display: block;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(216, 210, 181, 0.62);
      border-radius: 3px 0 0 3px;
      background: var(--swatch);
      cursor: pointer;
      overflow: hidden;
    }

    .menu-palette-row.is-selected .menu-palette-row-swatch,
    .menu-palette-row:hover .menu-palette-row-swatch {
      border-color: #d39b32;
      box-shadow: 0 0 0 2px rgba(211, 155, 50, 0.2);
    }

    .menu-palette-row-hex {
      width: 100%;
      min-height: 32px;
      border: 1px solid rgba(216, 210, 181, 0.38);
      border-left: 0;
      border-radius: 0 4px 4px 0;
      padding: 0 10px;
      outline: none;
      background: rgba(50, 51, 75, 0.88);
      color: #d9d6ff;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .menu-palette-row-hex:focus {
      border-color: #d39b32;
      box-shadow: 0 0 0 3px rgba(211, 155, 50, 0.16);
    }

    .menu-palette-row-hex.is-invalid {
      border-color: #b94735;
      color: #ffb4a9;
      box-shadow: 0 0 0 3px rgba(185, 71, 53, 0.18);
    }

    .menu-palette-slot {
      position: relative;
      display: block;
      min-height: 44px;
      border: 1px solid rgba(111, 99, 66, 0.82);
      border-radius: 6px;
      background: var(--swatch);
      cursor: pointer;
      overflow: hidden;
      transition: border-color 0.16s ease, transform 0.16s ease;
    }

    .menu-palette-slot:hover,
    .menu-palette-slot.is-selected {
      border-color: #d39b32;
      transform: translateY(-1px);
    }

    .menu-palette-slot.is-selected::after {
      content: "";
      position: absolute;
      inset: 4px;
      border: 2px solid rgba(242, 234, 215, 0.72);
      border-radius: 4px;
      pointer-events: none;
    }

    .menu-palette-color-input {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 32px;
      border: 0;
      padding: 0;
      background: var(--swatch);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
    }

    .menu-palette-color-input::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    .menu-palette-color-input::-webkit-color-swatch {
      border: 0;
    }

    .menu-palette-code {
      display: grid;
      gap: 8px;
      margin-top: 14px;
      color: #c9bea5;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .menu-hex-input {
      width: 100%;
      min-height: 42px;
      border: 1px solid #6f6342;
      border-radius: 6px;
      padding: 0 12px;
      outline: none;
      background: rgba(13, 15, 11, 0.84);
      color: #f2ead7;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .menu-hex-input:focus {
      border-color: #d39b32;
      box-shadow: 0 0 0 3px rgba(211, 155, 50, 0.18);
    }

    .menu-hex-input.is-invalid {
      border-color: #b94735;
      color: #ffb4a9;
      box-shadow: 0 0 0 3px rgba(185, 71, 53, 0.18);
    }

    .board-webgl {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    .debug-hero-overlay {
      position: fixed;
      z-index: 5;
      display: grid;
      align-content: start;
      gap: 8px;
      padding: 0;
      box-sizing: border-box;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(211, 155, 50, 0.58) rgba(17, 19, 13, 0.35);
      color: #f2ead7;
      pointer-events: auto;
    }

    .debug-hero-overlay::-webkit-scrollbar {
      width: 8px;
    }

    .debug-hero-overlay::-webkit-scrollbar-track {
      background: rgba(17, 19, 13, 0.35);
      border-radius: 999px;
    }

    .debug-hero-overlay::-webkit-scrollbar-thumb {
      background: rgba(211, 155, 50, 0.58);
      border-radius: 999px;
    }

    .debug-hero-overlay[hidden] {
      display: none;
    }

    .debug-hero-title {
      display: block;
      color: #f2ead7;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .debug-hero-help,
    .debug-hero-status {
      margin: 0;
      color: #c9bea5;
      font-size: 12px;
      line-height: 1.45;
    }

    .debug-hero-help {
      display: none;
    }

    .debug-hero-status {
      color: #d39b32;
      font-weight: 700;
    }

    .debug-hero-field {
      display: grid;
      gap: 6px;
      color: #c9bea5;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .debug-hero-section-title {
      display: block;
      margin-top: 2px;
      color: #f2ead7;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .debug-hero-config-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
      gap: 6px 8px;
    }

    .debug-hero-config-field {
      display: grid;
      gap: 2px;
      min-width: 0;
      color: #c9bea5;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .debug-hero-config-field input {
      width: 100%;
      min-height: 28px;
      box-sizing: border-box;
      border: 1px solid rgba(111, 99, 66, 0.82);
      border-radius: 5px;
      padding: 0 8px;
      outline: none;
      background: rgba(32, 34, 25, 0.92);
      color: #f2ead7;
      font: 800 12px 'Inter', system-ui, -apple-system, sans-serif;
    }

    .debug-hero-config-field input:focus {
      border-color: #d39b32;
      box-shadow: 0 0 0 2px rgba(211, 155, 50, 0.16);
    }

    .debug-hero-apply {
      min-height: 32px;
      border: 1px solid #e6c06f;
      border-radius: 6px;
      background: #8f6724;
      color: #f2ead7;
      font: 900 11px 'Inter', system-ui, -apple-system, sans-serif;
      cursor: pointer;
    }

    .debug-hero-apply:hover,
    .debug-hero-apply:focus {
      background: #d39b32;
      outline: none;
    }

    .debug-hero-select {
      width: 100%;
      min-height: 36px;
      border: 1px solid #6f6342;
      border-radius: 6px;
      background: rgba(32, 34, 25, 0.92);
      color: #f2ead7;
      padding: 0 12px;
      font: 600 13px 'Inter', system-ui, -apple-system, sans-serif;
      outline: none;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .debug-hero-select:hover,
    .debug-hero-select:focus {
      border-color: #d39b32;
    }

    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.86);
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .modal-container {
      background: #171912;
      width: 90%;
      max-width: 900px;
      height: 85vh;
      border-radius: 8px;
      border: 2px solid #6f6342;
      display: flex;
      flex-direction: column;
      position: relative;
      color: #c9bea5;
      box-shadow: 0 28px 56px -14px rgba(0, 0, 0, 0.62);
    }

    .modal-close {
      position: absolute;
      top: 10px;
      right: 15px;
      background: none;
      border: none;
      color: #8f8773;
      font-size: 32px;
      cursor: pointer;
      z-index: 10;
    }

    .modal-close:hover {
      color: #f2ead7;
    }

    .modal-layout {
      display: flex;
      height: 100%;
      overflow: hidden;
      border-radius: 8px;
    }

    .modal-sidebar {
      width: 250px;
      background: #202219;
      padding: 20px;
      overflow-y: auto;
      border-right: 1px solid #4a4638;
    }

    .modal-sidebar h3 {
      color: #f2ead7;
      margin-top: 0;
      font-size: 18px;
    }

    .modal-sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .modal-sidebar li {
      margin-bottom: 12px;
    }

    .modal-sidebar a {
      color: #c9bea5;
      text-decoration: none;
      font-size: 15px;
      transition: color 0.2s;
    }

    .modal-sidebar a:hover {
      color: #d39b32;
    }

    .modal-content {
      flex: 1;
      padding: 30px 40px;
      overflow-y: auto;
      scroll-behavior: smooth;
    }

    .modal-content h1 {
      color: #f2ead7;
      margin-top: 0;
    }

    .modal-content h2 {
      color: #d9c894;
      border-bottom: 1px solid #4a4638;
      padding-bottom: 8px;
      margin-top: 30px;
    }

    .modal-content p {
      line-height: 1.6;
      margin-bottom: 16px;
    }

      .modal-content strong {
        color: #f2ead7;
      }

    @media (max-width: 980px) {
      .menu-root--home {
        align-items: flex-end;
        padding: 28px;
      }

      .menu-screen {
        min-height: auto;
        padding: 28px;
      }

      .menu-screen--select,
      .menu-screen--create {
        grid-template-columns: 1fr;
      }

      .menu-character-stage,
      .menu-create-stage {
        min-height: 460px;
        padding: 10px;
      }

      .menu-character-preview {
        width: min(76vw, 440px);
        height: min(48vh, 440px);
        max-height: 48vh;
      }

      .menu-intro-layer {
        inset: -12vmax;
      }

      .menu-intro-controls {
        top: 16px;
        right: 16px;
      }
    }

    @media (max-width: 560px) {
      .menu-root--home,
      .menu-screen {
        padding: 18px;
      }

      .menu-home-panel,
      .menu-panel {
        padding: 18px;
      }

      .menu-actions {
        grid-template-columns: 1fr;
      }

      .menu-character-nameplate strong {
        font-size: 21px;
      }

      .menu-character-row {
        grid-template-columns: 56px 1fr auto 40px;
      }

      .menu-intro-skip {
        min-width: 82px;
        min-height: 38px;
        padding: 0 12px;
        font-size: 12px;
      }

      .menu-intro-progress {
        bottom: 18px;
        gap: 6px;
      }

      .menu-intro-progress-dot {
        width: 20px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .menu-intro-scene,
      .menu-intro-progress-dot {
        transition: none;
      }

      .menu-intro-shimmer {
        animation: none;
      }
    }