:root {
      --panel: #17313d;
      --panel-alt: #224150;
      --text: #f2efe2;
      --muted: #98b7c2;
      --accent: #f0b44d;
      --danger: #ef5d50;
      --safe: #5abf8f;
      --cell-size: 36px;
      --radius: 10px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Trebuchet MS", "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 20%, #23495b 0%, transparent 45%),
        radial-gradient(circle at 80% 10%, #3f2d44 0%, transparent 35%),
        linear-gradient(165deg, #0c161c 0%, #132832 100%);
      padding: 24px;
      display: grid;
      place-items: center;
    }

    .app {
      width: min(1080px, 100%);
      background: color-mix(in srgb, var(--panel), #000 10%);
      border: 1px solid #2c5566;
      border-radius: 16px;
      padding: 18px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    }

    h1 {
      margin: 0 0 10px;
      font-size: 1.7rem;
      letter-spacing: 0.04em;
    }

    .sub {
      margin: 0 0 16px;
      color: var(--muted);
    }

    .top {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 12px;
      align-items: center;
    }

    .chip {
      background: var(--panel-alt);
      border: 1px solid #325869;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 0.95rem;
      white-space: nowrap;
    }

    .chip strong { color: var(--accent); }

    .chip.with-meter {
      display: grid;
      gap: 6px;
      white-space: normal;
      min-width: 240px;
    }

    .hp-bar {
      height: 12px;
      border-radius: 999px;
      border: 1px solid #406677;
      background: #112733;
      overflow: hidden;
    }

    .hp-fill {
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, #4fd78b 0%, #33b974 100%);
      transition: width 160ms ease, background 160ms ease;
    }

    .xp-bar {
      height: 10px;
      border-radius: 999px;
      border: 1px solid #406677;
      background: #112733;
      overflow: hidden;
    }

    .xp-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #7ec8ff 0%, #569dff 100%);
      transition: width 160ms ease;
    }

    .controls {
      margin-left: auto;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    button {
      border: 1px solid #49717f;
      border-radius: 10px;
      padding: 9px 12px;
      background: linear-gradient(180deg, #315667 0%, #244654 100%);
      color: var(--text);
      cursor: pointer;
      font-weight: 700;
    }

    button:hover { filter: brightness(1.08); }
    button:disabled { opacity: 0.45; cursor: not-allowed; }

    #descend-btn {
      border-color: #3d835f;
      background: linear-gradient(180deg, #39a56f 0%, #2d8459 100%);
      color: #e8fff2;
    }

    #descend-btn:hover {
      filter: brightness(1.15);
    }

    #descend-btn:disabled {
      background: linear-gradient(180deg, #335746 0%, #294939 100%);
      border-color: #3f5f4f;
      color: #c7dbce;
    }

    .layout {
      display: grid;
      grid-template-columns: auto minmax(250px, 310px);
      gap: 14px;
      align-items: start;
      border-radius: 12px;
      transition: background-color 180ms ease, border-color 180ms ease;
      --danger-alpha: 0;
      --danger-border-alpha: 0;
      --danger-shadow-alpha: 0;
      background:
        linear-gradient(
          180deg,
          rgba(150, 24, 24, var(--danger-alpha)) 0%,
          rgba(109, 18, 18, calc(var(--danger-alpha) * 0.75)) 100%
        );
      border: 1px solid rgba(219, 87, 87, var(--danger-border-alpha));
      box-shadow: inset 0 0 24px rgba(200, 45, 45, var(--danger-shadow-alpha));
    }

    .layout.game-over {
      --danger-alpha: 0.30;
      --danger-border-alpha: 0.65;
      --danger-shadow-alpha: 0.45;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(12, var(--cell-size));
      gap: 4px;
      width: max-content;
      margin: 0 auto;
      padding: 10px;
      border-radius: 12px;
      background: #0f2530;
      border: 1px solid #355567;
    }

    .cell {
      width: var(--cell-size);
      height: var(--cell-size);
      border-radius: 8px;
      border: 1px solid #436372;
      background: linear-gradient(180deg, #2f5362 0%, #234350 100%);
      display: grid;
      place-items: center;
      user-select: none;
      font-size: 1rem;
      font-weight: 800;
      color: #e6edf0;
      cursor: pointer;
      transition: transform 120ms ease, filter 120ms ease, background-color 120ms ease;
    }

    .cell:not(.revealed):hover {
      transform: translateY(-1px);
      filter: brightness(1.12);
    }

    .cell.revealed {
      cursor: default;
      background: #1a3440;
    }

    .cell.revealed:hover {
      filter: brightness(1.06);
    }

    .cell.flagged { background: linear-gradient(180deg, #5c4151 0%, #4a3242 100%); }
    .cell.monster { background: linear-gradient(180deg, #643632 0%, #4d2522 100%); }
    .cell.chest { background: linear-gradient(180deg, #645436 0%, #4e4028 100%); }

    .panel {
      border-radius: 12px;
      border: 1px solid #365768;
      background: color-mix(in srgb, var(--panel-alt), #000 14%);
      padding: 10px;
    }

    .panel h2 {
      margin: 0 0 8px;
      font-size: 1rem;
      color: #d6e6ec;
    }

    .abilities {
      display: grid;
      gap: 8px;
    }

    .ability-row {
      display: grid;
      grid-template-columns: 64px 1fr auto;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid #365768;
      border-radius: 10px;
      background: #1a3340;
    }

    .ability-row[hidden] {
      display: none !important;
    }

    .ability-badge {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      border: 1px solid #456a79;
      background: #0f2730;
      display: grid;
      place-items: center;
      font-weight: 800;
      color: #d9ecf3;
      text-align: center;
      line-height: 1.05;
      padding: 4px;
      font-size: 1.35rem;
    }

    .ability-badge.rank {
      font-size: 1.55rem;
      color: #f0b44d;
    }

    .ability-badge.charged {
      border-color: #3d835f;
      background: #1f4e38;
      color: #d4ffe7;
    }

    .ability-badge.uncharged {
      border-color: #6a5951;
      background: #3a2d29;
      color: #f1d6c9;
    }

    .ability-info {
      font-size: 0.86rem;
      line-height: 1.25;
      color: #d5e4ea;
    }

    .ability-action {
      min-width: 62px;
      padding: 7px 10px;
      font-size: 0.8rem;
      border-radius: 8px;
      text-align: center;
    }

    .abilities .ability-action {
      width: 100%;
      max-width: 86px;
    }

    .charge {
      margin-top: 8px;
      height: 10px;
      border-radius: 999px;
      border: 1px solid #406677;
      background: #112733;
      overflow: hidden;
    }

    .charge-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #6ed8ff 0%, #f0b44d 100%);
    }

    .status-log {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: var(--radius);
      border: 1px solid #365768;
      background: color-mix(in srgb, var(--panel-alt), #000 14%);
      font-size: 0.9rem;
      min-height: 44px;
      max-height: 160px;
      overflow-y: auto;
      display: grid;
      gap: 6px;
      align-content: start;
    }

    .status-line {
      padding: 6px 8px;
      border-radius: 8px;
      background: #1a3340;
      border: 1px solid #365768;
      color: #cfdfe5;
    }

    .legend {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .legend span {
      border: 1px solid #355769;
      border-radius: 999px;
      padding: 4px 8px;
      background: #1a3542;
    }

    .legend span.cleared {
      opacity: 0.9;
    }

    .legend .label-strike {
      text-decoration: line-through;
      text-decoration-thickness: 1.5px;
      text-decoration-color: #9db2bb;
    }

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

    .debug {
      margin-top: 14px;
      padding: 10px;
      border: 1px solid #365768;
      border-radius: 12px;
      background: color-mix(in srgb, var(--panel-alt), #000 18%);
    }

    .debug h2 {
      margin: 0 0 8px;
      font-size: 1rem;
      color: #d6e6ec;
    }

    .debug-grid {
      display: grid;
      gap: 8px;
    }

    .debug-row {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 120px auto;
      gap: 8px;
      align-items: center;
      font-size: 0.86rem;
      color: #d3e3ea;
    }

    .debug-row input {
      width: 100%;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid #456a79;
      background: #102730;
      color: #eaf3f7;
      font-size: 0.86rem;
    }

    .debug-actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .debug-note {
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.82rem;
    }

    @media (max-width: 980px) {
      .layout { grid-template-columns: 1fr; }
      .panel { width: min(100%, 520px); margin: 0 auto; }
    }

    @media (max-width: 760px) {
      :root { --cell-size: 28px; }
      body { padding: 12px; }
      .app { padding: 12px; }
      h1 { font-size: 1.3rem; }
      .chip { font-size: 0.85rem; }
    }