@import url("css/battle.css");

:root {
      color-scheme: dark;
      --bg: #07090b;
      --panel: rgba(14, 18, 19, .84);
      --panel-2: rgba(24, 28, 29, .9);
      --line: rgba(224, 214, 190, .13);
      --line-strong: rgba(226, 183, 107, .34);
      --text: #edf1eb;
      --muted: #9da7a3;
      --gold: #c9984a;
      --gold-bright: #e8bf70;
      --blue: #6fb7c8;
      --red: #c8574d;
      --green: #78b66c;
      --slot: rgba(255, 255, 255, .045);
      --radius: 8px;
      font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 54% 18%, rgba(201, 152, 74, .13), transparent 25%),
        radial-gradient(circle at 82% 4%, rgba(111, 183, 200, .08), transparent 18%),
        linear-gradient(115deg, rgba(3, 5, 6, .97), rgba(9, 12, 13, .86) 46%, rgba(3, 5, 6, .98)),
        var(--outpost-asset-dnd-tabletop, url("assets/ui/dnd-tabletop.png")) center / cover fixed;
    }

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

    button {
      border: 1px solid var(--line);
      color: var(--text);
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035));
      border-radius: 7px;
      min-height: 38px;
      padding: 0 12px;
      cursor: pointer;
    }

    button:hover, button.active {
      border-color: rgba(201, 152, 74, .62);
      background: linear-gradient(180deg, rgba(201, 152, 74, .24), rgba(255, 255, 255, .055));
    }

    button:disabled {
      cursor: not-allowed;
      opacity: .48;
      border-color: rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .035);
      box-shadow: none;
    }

    button:disabled:hover {
      border-color: rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .035);
    }

    button.gold {
      border-color: rgba(201, 152, 74, .58);
      background: linear-gradient(180deg, rgba(201, 152, 74, .34), rgba(119, 77, 31, .78));
      color: #fff4d7;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 22px rgba(0, 0, 0, .24);
    }

    input, textarea, select {
      width: 100%;
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(5, 7, 8, .58);
      padding: 9px 10px;
      outline: none;
    }

    input:focus, textarea:focus, select:focus {
      border-color: rgba(111, 183, 200, .78);
    }

    textarea {
      min-height: 78px;
      resize: vertical;
    }

    .name-gate {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      place-items: center;
      padding: 18px;
      background:
        linear-gradient(115deg, rgba(4, 6, 8, .96), rgba(10, 13, 16, .92)),
        var(--outpost-asset-dnd-tabletop, url("assets/ui/dnd-tabletop.png")) center / cover fixed;
    }

    .name-gate.active { display: grid; }

    .name-card {
      width: min(430px, 100%);
      display: grid;
      gap: 12px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: rgba(10, 13, 15, .97);
      box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
      padding: 18px;
    }

    .save-slot-list {
      display: grid;
      gap: 7px;
      max-height: 220px;
      overflow: auto;
      padding-right: 3px;
    }

    .save-slot-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, .04);
    }

    .save-slot-row.active {
      border-color: rgba(201, 152, 74, .72);
      background: rgba(201, 152, 74, .1);
    }

    .save-slot-main {
      text-align: left;
      min-width: 0;
      background: transparent;
      border: 0;
      padding: 4px;
    }

    .save-slot-main b,
    .save-slot-main small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .save-slot-delete {
      min-width: 86px;
      border-color: rgba(160, 58, 58, .54);
      color: #ffd3d3;
    }

    .save-slot-delete.confirm {
      background: rgba(160, 58, 58, .28);
      border-color: rgba(255, 126, 126, .82);
      color: #fff;
    }



    .subtle {
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.45;
    }

    .character-grid {
      display: grid;
      grid-template-columns: minmax(280px, 340px) minmax(500px, 1fr) minmax(320px, 390px);
      gap: 16px;
      align-items: start;
      min-height: calc(100vh - 132px);
    }

    .character-column {
      display: grid;
      gap: 16px;
      align-content: start;
      min-width: 0;
    }

    .character-center {
      grid-template-rows: auto;
    }

    .weapon,
    .equipment {
      position: relative;
      overflow: hidden;
    }

    .weapon {
      min-height: 100%;
      display: grid;
      grid-template-rows: auto minmax(360px, auto) auto;
      gap: 12px;
    }

    .weapon::before,
    .equipment::before {
      content: "";
      position: absolute;
      inset: 44px 22% 18px;
      opacity: .18;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 50% 16%, rgba(226, 183, 107, .18), transparent 34%),
        linear-gradient(90deg, transparent 48%, rgba(226, 183, 107, .26) 49%, rgba(226, 183, 107, .26) 51%, transparent 52%),
        linear-gradient(180deg, transparent 18%, rgba(255, 255, 255, .12) 19%, transparent 20%, transparent 78%, rgba(255, 255, 255, .1) 79%, transparent 80%);
      border-radius: 42% 42% 12% 12%;
      border: 1px solid rgba(226, 183, 107, .16);
      filter: blur(.1px);
    }

    .weapon > *,
    .equipment > * {
      position: relative;
      z-index: 1;
    }

    .identity-row {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .name-stack {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .name-input {
      font-size: clamp(1.35rem, 2.25vw, 2.35rem);
      font-weight: 800;
      min-height: 62px;
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--line-strong);
      border-radius: 0;
      padding-left: 0;
      width: 100%;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .identity,
    .weapon,
    .equipment,
    .accessories,
    .traits,
    .resonance,
    .loadout,
    .resources,
    .combat,
    .abilities,
    .skills {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)),
        rgba(9, 12, 13, .76);
    }

    .identity {
      border-color: rgba(226, 183, 107, .22);
      background:
        radial-gradient(circle at 18% -15%, rgba(226, 183, 107, .18), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)),
        rgba(9, 12, 13, .82);
    }

    .level-box input, .coin-box input {
      text-align: center;
      font-size: 2rem;
      font-weight: 800;
      min-height: 58px;
    }

    .coin-box::before {
      content: "C";
      color: var(--gold-bright);
      font-size: .9rem;
    }

    .resource-grid, .combat-grid, .ability-grid, .gear-grid {
      display: grid;
      gap: 10px;
    }

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

    .character-left .resource-grid {
      grid-template-columns: 1fr;
    }

    .resource-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      background:
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, .08), transparent 38%),
        rgba(255, 255, 255, .035);
    }

    .resource-card label, .stat-card label, .gear-card label {
      display: block;
      color: var(--muted);
      font-size: .76rem;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .resource-values {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .character-left .resource-card {
      min-height: 104px;
    }

    .resource-values.single {
      grid-template-columns: 1fr;
    }

    .resource-values input, .stat-card input {
      text-align: center;
      font-weight: 800;
      font-size: 1.35rem;
    }

    .temp-hp-readout {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 7px;
      color: #93c5fd;
      font-size: .72rem;
      font-weight: 800;
    }

    .resource-bar {
      height: 5px;
      margin-top: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
    }

    .resource-bar i {
      display: block;
      width: var(--fill, 0%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #e04552, #ff776e);
      box-shadow: 0 0 14px rgba(224, 69, 82, .35);
      transition: width .25s ease;
    }

    .resource-mp .resource-bar i {
      background: linear-gradient(90deg, #3f8cff, #6bdcff);
      box-shadow: 0 0 14px rgba(77, 166, 255, .35);
    }

    .resource-card.resource-pulse {
      animation: resourcePulse .45s ease;
    }

    @keyframes resourcePulse {
      0% { box-shadow: 0 0 0 rgba(201, 152, 74, 0); transform: translateY(0); }
      40% { box-shadow: 0 0 26px rgba(201, 152, 74, .32); transform: translateY(-1px); }
      100% { box-shadow: 0 0 0 rgba(201, 152, 74, 0); transform: translateY(0); }
    }

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

    .resources .resource-card,
    .combat .stat-card {
      min-height: 118px;
    }

    .stat-card {
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(0, 0, 0, .18);
    }

    .stat-icon-input {
      text-align: center;
      min-height: 46px;
      margin-bottom: 8px;
      padding: 5px;
      font-size: 1.35rem;
      background: rgba(0, 0, 0, .26);
      border-color: rgba(211, 224, 226, .2);
    }

    .stat-icon-display {
      min-height: 32px;
      margin-bottom: 8px;
      display: grid;
      place-items: center;
      font-size: 1.55rem;
    }

    .stat-icon-display.rollable,
    .skill-roll {
      cursor: pointer;
    }

    .stat-icon-display.rollable:hover,
    .skill-roll:hover {
      color: var(--gold);
    }

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

    .character-right .loadout-list {
      grid-template-columns: 1fr;
    }

    .character-right .loadout-card-v3 {
      min-height: 112px;
    }

    .character-right .loadout,
    .character-right .traits,
    .character-right .resonance {
      max-height: 560px;
      overflow: auto;
    }

    .character-right .loadout {
      max-height: 520px;
    }

    .equipment-combo-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
    }

    .panel.equipment .gear-card {
      padding: 8px;
      border-color: rgba(255, 255, 255, .105);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .018)),
        rgba(0, 0, 0, .18);
    }

    .panel.equipment .gear-card.equipped {
      border-color: rgba(226, 183, 107, .28);
      background:
        linear-gradient(90deg, rgba(226, 183, 107, .09), rgba(255, 255, 255, .02)),
        rgba(0, 0, 0, .2);
    }

    .panel.equipment .gear-preview {
      grid-template-columns: 46px 1fr;
      gap: 9px;
    }

    .panel.equipment .gear-art {
      width: 46px;
      height: 46px;
    }

    .equipment-column-box {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 10px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .subpanel-title {
      color: var(--muted);
      font-size: .76rem;
      text-transform: uppercase;
      font-weight: 900;
      padding: 0 2px 2px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .ability-card {
      text-align: center;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(0, 0, 0, .2);
      padding: 10px;
    }

    .ability-card b {
      display: block;
      margin-bottom: 8px;
      font-size: .86rem;
      color: var(--muted);
    }

    .ability-card input {
      text-align: center;
      font-size: 1.55rem;
      font-weight: 800;
      border: 0;
      background: transparent;
      padding: 4px;
    }

    .mod {
      display: inline-flex;
      min-width: 48px;
      min-height: 28px;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(201, 152, 74, .44);
      border-radius: 999px;
      color: var(--gold);
      background: rgba(201, 152, 74, .08);
      font-weight: 800;
    }

    .skill-list {
      display: grid;
      gap: 4px;
    }

    .skill-row {
      display: grid;
      grid-template-columns: 20px 48px 1fr 42px;
      gap: 8px;
      align-items: center;
      min-height: 28px;
      border-bottom: 1px solid rgba(255, 255, 255, .055);
      font-size: .9rem;
    }

    .skill-row input {
      width: 17px;
      height: 17px;
      accent-color: var(--gold);
    }

    .bonus { color: #fff; text-align: right; font-weight: 800; }
    .ability-tag { color: var(--muted); text-align: right; font-size: .78rem; }

    .gear-grid { grid-template-columns: 1fr; }

    .weapon-slot-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      align-items: stretch;
    }

    .gear-card {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 10px;
      background:
        linear-gradient(90deg, rgba(226, 183, 107, .06), rgba(255, 255, 255, .026)),
        rgba(255, 255, 255, .03);
      overflow: hidden;
      transition: border-color .16s ease, transform .14s ease, background .16s ease, box-shadow .16s ease;
    }

    .gear-card.equipped {
      border-color: rgba(226, 183, 107, .34);
      background:
        radial-gradient(circle at 12% 8%, rgba(226, 183, 107, .16), transparent 38%),
        linear-gradient(90deg, rgba(226, 183, 107, .1), rgba(255, 255, 255, .028)),
        rgba(255, 255, 255, .035);
    }

    .gear-card:hover {
      transform: translateY(-1px);
      border-color: rgba(226, 183, 107, .54);
    }

    .gear-card:focus-visible {
      outline: 2px solid rgba(255, 224, 153, .74);
      outline-offset: 2px;
      border-color: rgba(226, 183, 107, .72);
      box-shadow: inset 0 0 0 1px rgba(226, 183, 107, .18), 0 0 0 4px rgba(226, 183, 107, .08);
    }

    .gear-card > select,
    .loadout-card-v3 select {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .gear-label {
      color: #f0dcb4;
      font-weight: 900;
      letter-spacing: 0;
    }

    .gear-preview {
      display: grid;
      grid-template-columns: 54px 1fr auto;
      gap: 11px;
      align-items: center;
      margin-top: 8px;
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.35;
    }

    .gear-art {
      width: 54px;
      height: 54px;
      border-color: rgba(226, 183, 107, .28);
      background:
        radial-gradient(circle at center, rgba(226, 183, 107, .12), transparent 58%),
        rgba(0, 0, 0, .32);
    }

    .gear-attack {
      min-height: 32px;
      padding: 0 10px;
      color: #111;
      font-weight: 800;
      background: linear-gradient(180deg, #e2b76b, #b97d32);
      border-color: rgba(255, 224, 153, .72);
    }

    .weapon-slot-card {
      min-height: 112px;
      padding: 10px;
      display: grid;
      align-content: start;
      gap: 8px;
      background:
        radial-gradient(circle at 18% 12%, rgba(226, 183, 107, .12), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        rgba(0, 0, 0, .22);
      cursor: pointer;
    }

    .weapon-slot-card:hover {
      transform: translateY(-2px);
      border-color: rgba(226, 183, 107, .62);
      box-shadow: 0 12px 24px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(226, 183, 107, .08);
    }

    .weapon-slot-card.equipped {
      background:
        radial-gradient(circle at 16% 10%, rgba(226, 183, 107, .18), transparent 38%),
        linear-gradient(180deg, rgba(226, 183, 107, .08), rgba(255, 255, 255, .02)),
        rgba(0, 0, 0, .25);
    }

    .weapon-slot-card .gear-label {
      font-size: .7rem;
      text-transform: uppercase;
      color: var(--muted);
    }

    .weapon-slot-content {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) 34px;
      gap: 9px;
      align-items: start;
    }

    .weapon-slot-art {
      width: 46px;
      height: 46px;
      align-self: start;
    }

    .weapon-slot-copy {
      min-width: 0;
      align-self: start;
      line-height: 1.25;
    }

    .weapon-slot-copy b {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .weapon-slot-copy small {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      white-space: normal;
    }

    .weapon-slot-copy b {
      font-size: .92rem;
    }

    .weapon-slot-copy small {
      color: var(--muted);
      margin-top: 3px;
      font-size: .76rem;
    }

    .weapon-roll-icon,
    .weapon-empty-action {
      width: 34px;
      height: 34px;
      min-height: 34px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      border-radius: 9px;
      align-self: start;
    }

    .weapon-roll-icon {
      font-size: 1rem;
      transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
    }

    .weapon-roll-icon:hover,
    .weapon-roll-icon:focus-visible {
      filter: brightness(1.08);
      box-shadow: 0 0 0 3px rgba(226, 183, 107, .12);
    }

    .weapon-roll-icon:active {
      transform: scale(.96);
    }

    .weapon-empty-action {
      color: var(--gold);
      border: 1px solid rgba(226, 183, 107, .25);
      background: rgba(226, 183, 107, .07);
      font-weight: 900;
    }

    .character-stage-v3 {
      position: relative;
      min-height: 380px;
      display: grid;
      place-items: center;
      margin: 0;
      overflow: hidden;
      border: 1px solid rgba(226, 183, 107, .16);
      border-radius: 12px;
      background:
        radial-gradient(circle at 50% 68%, rgba(226, 183, 107, .18), transparent 24%),
        radial-gradient(circle at 50% 26%, rgba(111, 183, 200, .1), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .22));
    }

    .character-stage-v3 img {
      animation: artFadeIn .22s ease-out both;
    }

    @keyframes artFadeIn {
      from { opacity: .2; }
      to { opacity: 1; }
    }

    .stage-level-badge {
      position: absolute;
      left: 14px;
      top: 14px;
      z-index: 4;
      width: 82px;
      height: 82px;
      display: grid;
      place-items: center;
      align-content: center;
      padding: 0;
      border: 1px solid rgba(226, 183, 107, .48);
      border-radius: 50%;
      background:
        radial-gradient(circle at 38% 22%, rgba(255, 239, 189, .22), transparent 32%),
        linear-gradient(180deg, rgba(226, 183, 107, .2), rgba(0, 0, 0, .42)),
        rgba(7, 7, 6, .74);
      box-shadow: 0 14px 34px rgba(0, 0, 0, .46), inset 0 0 22px rgba(226, 183, 107, .08);
      text-align: center;
    }

    .stage-level-badge span {
      display: block;
      color: var(--muted);
      font-size: .68rem;
      text-transform: uppercase;
      font-weight: 800;
    }

    .stage-level-badge b {
      display: block;
      color: #ffe1a1;
      font-size: 2rem;
      line-height: 1;
    }

    .stage-inspiration-badge {
      position: absolute;
      left: 110px;
      top: 24px;
      z-index: 4;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      align-content: center;
      padding: 0;
      border: 1px solid rgba(239, 68, 68, .64);
      border-radius: 50%;
      color: #ffd9d9;
      cursor: pointer;
      background:
        radial-gradient(circle at 36% 22%, rgba(255, 174, 174, .34), transparent 30%),
        linear-gradient(180deg, rgba(239, 68, 68, .88), rgba(116, 18, 18, .94)),
        rgba(16, 4, 4, .92);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .42), inset 0 0 18px rgba(255, 255, 255, .08), 0 0 24px rgba(239, 68, 68, .22);
      transform-origin: center;
    }

    .stage-inspiration-badge:not(.has-points) {
      color: rgba(255, 255, 255, .5);
      border-color: rgba(255, 255, 255, .16);
      background:
        radial-gradient(circle at 36% 22%, rgba(255, 255, 255, .12), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .46)),
        rgba(12, 14, 15, .88);
      box-shadow: 0 10px 24px rgba(0, 0, 0, .38), inset 0 0 16px rgba(255, 255, 255, .04);
    }

    .stage-inspiration-badge span {
      display: block;
      margin-bottom: 2px;
      color: currentColor;
      font-size: .46rem;
      text-transform: uppercase;
      font-weight: 950;
      letter-spacing: .04em;
    }

    .stage-inspiration-badge b {
      display: block;
      color: #fff2f2;
      font-size: 1.55rem;
      line-height: 1;
      text-shadow: 0 8px 18px rgba(0, 0, 0, .42);
    }

    .stage-inspiration-badge.spent {
      animation: inspirationSpend .46s ease-out;
    }

    @keyframes inspirationSpend {
      0% { transform: scale(1); filter: brightness(1); }
      34% { transform: scale(.82) rotate(-8deg); filter: brightness(1.45); }
      68% { transform: scale(1.15) rotate(4deg); box-shadow: 0 0 0 14px rgba(239, 68, 68, .12), 0 0 34px rgba(239, 68, 68, .38); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    .tag-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 0 8px 0 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .045);
    }

    .chip-detail {
      display: grid;
      grid-template-columns: 38px 1fr auto;
      gap: 8px;
      align-items: center;
      width: 100%;
      min-height: 54px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, .04);
      margin-bottom: 8px;
    }

    .chip-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(0, 0, 0, .24);
      overflow: hidden;
      font-weight: 800;
    }

    .chip-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .chip button {
      min-height: 24px;
      padding: 0 7px;
      color: #ffcbc5;
    }

    .add-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
    }

    .tag-grid input {
      min-height: 48px;
      text-align: center;
    }

    .loadout-list {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .skill-card {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 10px;
      background:
        linear-gradient(90deg, rgba(111, 183, 200, .08), rgba(255, 255, 255, .025)),
        rgba(0, 0, 0, .12);
    }

    .loadout-card-v3 {
      min-height: 128px;
      border-color: rgba(226, 183, 107, .18);
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
    }

    .loadout-card-v3:hover {
      transform: translateY(-1px);
      border-color: rgba(111, 183, 200, .42);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
    }

    .loadout-card-v3.equipped {
      border-color: rgba(111, 183, 200, .28);
      background:
        radial-gradient(circle at 12% 6%, rgba(111, 183, 200, .16), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
    }

    .loadout-card-v3.empty {
      opacity: .72;
      border-style: dashed;
    }

    .loadout-card-v3.skill-slot-hover {
      transform: translateY(-2px) scale(1.015);
      border-color: rgba(226, 183, 107, .82);
      background:
        radial-gradient(circle at 80% 12%, rgba(226, 183, 107, .18), transparent 42%),
        rgba(226, 183, 107, .075);
      box-shadow: 0 0 0 2px rgba(226, 183, 107, .16), 0 16px 32px rgba(0, 0, 0, .28);
    }

    .skill-card[data-skill-tooltip] {
      cursor: pointer;
    }

    .skill-card-head {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }

    .loadout .skill-card-head {
      grid-template-columns: 44px minmax(0, 1fr) 78px;
    }

    .loadout-skill-title {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .loadout-skill-title b,
    .loadout-skill-title small {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .loadout-skill-title b {
      color: #fff7db;
      font-size: .95rem;
      line-height: 1.1;
    }

    .loadout-skill-title small {
      color: var(--muted);
      font-size: .72rem;
    }

    .loadout-card-v3 p {
      margin-top: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .skill-name {
      font-weight: 900;
    }

    .role-burst { color: #ff6f61; }
    .role-aoe { color: #f0a84b; }
    .role-debuff { color: #b989ff; }
    .role-control { color: #6fd4ff; }
    .role-mobility { color: #f0d66b; }
    .role-utility { color: #b7c2ba; }
    .role-buff { color: #8dd66f; }
    .role-reaction { color: #ff8ac6; }
    .role-defense { color: #72a8ff; }
    .role-support { color: #6fd8c6; }
    .role-heal { color: #72f29a; }

    .icon-box {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(0, 0, 0, .24);
      font-size: 1.35rem;
    }

    .mana-badge {
      color: var(--blue);
      text-align: right;
      font-weight: 800;
    }

    .loadout-tools {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }

    .equipment-bags {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      align-items: start;
    }

    .mini-bag {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
      gap: 8px;
      max-height: 360px;
      overflow: auto;
      align-content: start;
      padding-right: 2px;
    }

    .category-list, .item-palette {
      display: grid;
      gap: 8px;
    }

    #itemPalette,
    #skillLibraryResults,
    #dmShopResults,
    #dmSendResults,
    #dmResearchRewardResults,
    #dmResearchItemResults {
      max-height: 360px;
      overflow: auto;
      align-content: start;
      padding-right: 2px;
    }

    .category-list button {
      text-align: left;
      justify-content: start;
    }

    .combat-number-input {
      min-height: 34px;
      padding: 4px 6px;
      font-size: 1.15rem;
    }

    .quick-draw-panel {
      position: fixed;
      right: 158px;
      top: calc(50% + 160px);
      z-index: 79;
      transform: translateY(-50%);
      width: min(360px, calc(100vw - 190px));
      display: none;
      gap: 12px;
      padding: 12px;
      border: 1px solid rgba(226, 183, 107, .3);
      border-radius: 14px;
      background:
        radial-gradient(circle at 18% 0%, rgba(111, 183, 200, .14), transparent 34%),
        linear-gradient(180deg, rgba(18, 24, 27, .96), rgba(5, 8, 10, .94));
      box-shadow: 0 20px 54px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .07);
      backdrop-filter: blur(16px);
    }

    .quick-draw-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      cursor: move;
      user-select: none;
    }

    .quick-draw-panel.dragging {
      border-color: rgba(201, 152, 74, .65);
      box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(201, 152, 74, .18);
    }

    .quick-draw-panel .battle-draw-tools {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .quick-draw-panel .battle-color-button {
      min-height: 28px;
      border-radius: 999px;
    }

    .quick-draw-panel label {
      grid-column: 1 / -1;
    }

    .sprite-frame-guide {
      position: relative;
      min-height: 86px;
      overflow: hidden;
      border: 1px solid rgba(226, 183, 107, .28);
      border-radius: 12px;
      background-color: rgba(0, 0, 0, .28);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
    }

    .sprite-frame-guide.empty {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 4px;
      padding: 12px;
      text-align: center;
      background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 32px),
        rgba(0, 0, 0, .22);
    }

    .sprite-frame-guide i {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(255, 244, 215, .72);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .38);
    }

    .sprite-frame-guide span {
      position: absolute;
      left: 8px;
      bottom: 7px;
      z-index: 1;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .68);
      color: #fff4d7;
      font-size: .7rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .sprite-frame-guide.empty span {
      position: static;
      background: transparent;
      padding: 0;
    }

    .sprite-frame-guide small {
      color: var(--muted);
      font-weight: 700;
    }

    .sprite-frame-guide.gif-preview {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding: 10px;
      background: rgba(0, 0, 0, .28);
      background-image: none !important;
    }

    .sprite-frame-guide.gif-preview img {
      width: 86px;
      height: 86px;
      object-fit: contain;
      border: 1px solid rgba(226, 183, 107, .28);
      border-radius: 10px;
      background: rgba(0, 0, 0, .3);
      image-rendering: pixelated;
    }

    .sprite-frame-guide.gif-preview span,
    .sprite-frame-guide.gif-preview small {
      position: static;
      display: block;
      background: transparent;
      padding: 0;
    }

    .quick-move-left {
      min-height: 30px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(111, 183, 200, .26);
      border-radius: 8px;
      background: rgba(111, 183, 200, .08);
      color: #b9ecff;
      font-weight: 900;
      font-size: .78rem;
    }

    .battle-player-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .battle-player-actions button {
      min-height: 32px;
      padding: 0 12px;
    }

    .battle-token.hidden-token {
      opacity: .55;
      filter: grayscale(.8);
    }

    .battle-token.corpse-token {
      opacity: .74;
      filter: grayscale(1) saturate(0) brightness(.72) contrast(.9);
    }

    .battle-token.hit-stop .battle-token-inner {
      animation-play-state: paused;
      filter: brightness(1.55) saturate(1.35);
      transform: translateZ(0) scale(1.03);
      transition: filter var(--hit-stop-ms, 55ms) steps(1), transform var(--hit-stop-ms, 55ms) steps(1);
    }

    .battle-token.corpse-token .battle-token-inner {
      transform: rotate(-5deg) scale(.94);
      box-shadow: none;
    }

    .battle-token.defeat-pulse .battle-token-inner {
      animation: tokenDefeat 1.15s cubic-bezier(.17, .88, .16, 1) both;
      border-color: rgba(248, 113, 113, .72);
    }

    .battle-token.defeat-pulse::after {
      content: "DOWN";
      position: absolute;
      left: 50%;
      top: -18px;
      transform: translateX(-50%);
      z-index: 8;
      padding: 2px 7px;
      border: 1px solid rgba(248, 113, 113, .55);
      border-radius: 999px;
      background: rgba(20, 6, 8, .82);
      color: #fecaca;
      font-size: .58rem;
      font-weight: 1000;
      letter-spacing: .08em;
      box-shadow: 0 0 16px rgba(239, 68, 68, .42);
      animation: defeatBadge 1.3s ease-out forwards;
      pointer-events: none;
    }

    .battle-token-hp {
      position: absolute;
      left: 9%;
      right: 9%;
      bottom: -9px;
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(0, 0, 0, .62);
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
      pointer-events: none;
    }

    .battle-token-hp i {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      display: block;
      border-radius: inherit;
    }

    .battle-token-hp .hp-trail {
      background: rgba(248, 113, 113, .55);
      transition: width .85s cubic-bezier(.22, .72, .2, 1);
    }

    .battle-token-hp .hp-fill {
      background: linear-gradient(90deg, #ef4444, #f97316);
      box-shadow: 0 0 8px rgba(248, 113, 113, .35);
      transition: width .28s ease-out;
    }

    .battle-token-hp .temp-hp-fill {
      left: auto;
      right: 0;
      min-width: 0;
      background: linear-gradient(90deg, rgba(96, 165, 250, .72), #dbeafe);
      box-shadow: 0 0 8px rgba(96, 165, 250, .65);
      transition: width .28s ease-out;
    }

    .battle-token.damage-pulse .battle-token-inner {
      animation: tokenHit .42s ease;
    }

    .battle-token.hit-heavy .battle-token-inner {
      animation: tokenHeavyHit .58s cubic-bezier(.2, .9, .2, 1);
    }

    .battle-token.hit-critical .battle-token-inner {
      animation: tokenCriticalHit .72s cubic-bezier(.18, .92, .16, 1);
    }

    .battle-token.heal-pulse .battle-token-inner {
      animation: tokenHeal .62s ease-out;
    }

    .battle-token.miss-pulse .battle-token-inner {
      animation: tokenDodge .42s ease-out;
    }

    .battle-token.token-lunge .battle-token-inner {
      animation: tokenMeleeLunge .52s cubic-bezier(.18, .86, .22, 1);
    }

    .battle-token[data-token-state="finisher"] .battle-token-inner {
      animation: tokenFinisher 1.05s cubic-bezier(.16, .84, .2, 1);
      box-shadow: 0 0 0 2px rgba(250, 204, 21, .28), 0 0 30px rgba(250, 204, 21, .5), 0 10px 24px rgba(0, 0, 0, .5);
    }

    .quick-pending-action {
      display: grid;
      gap: 2px;
      padding: 9px 10px;
      border: 1px solid rgba(226, 183, 107, .55);
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(226, 183, 107, .18), rgba(111, 183, 200, .08));
      box-shadow: 0 0 22px rgba(226, 183, 107, .16);
      color: var(--text);
    }

    .quick-pending-action span {
      color: var(--muted);
      font-size: .72rem;
      text-transform: uppercase;
    }

    .attack-roll-presentation {
      position: fixed;
      right: 96px;
      bottom: 112px;
      z-index: 155;
      width: 172px;
      display: grid;
      gap: 8px;
      justify-items: center;
      pointer-events: none;
      opacity: 0;
      transform: translateY(14px) scale(.92);
      transition: opacity .18s ease, transform .18s ease, filter .18s ease;
      filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .58));
    }

    .attack-roll-presentation.active {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .attack-roll-presentation.anchored {
      transform-origin: center;
    }

    .attack-roll-presentation.complete {
      opacity: .64;
      transform: translateY(0) scale(.95);
    }

    .attack-roll-ring {
      width: 142px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 3px;
      padding: 14px;
      border: 1px solid rgba(226, 183, 107, .64);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 18%, rgba(255, 241, 193, .2), transparent 28%),
        radial-gradient(circle at 50% 70%, rgba(226, 183, 107, .2), transparent 48%),
        rgba(8, 10, 12, .92);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 24px rgba(226, 183, 107, .18);
      text-align: center;
    }

    .attack-roll-ring span {
      color: var(--muted);
      font-size: .64rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .attack-roll-ring b {
      color: #fff4ce;
      font-size: 1.9rem;
      line-height: 1;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .attack-roll-ring small {
      color: var(--muted);
      font-size: .7rem;
      line-height: 1.2;
      max-width: 118px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .attack-roll-status {
      min-width: 110px;
      padding: 6px 10px;
      border: 1px solid rgba(226, 183, 107, .42);
      border-radius: 999px;
      background: rgba(226, 183, 107, .13);
      color: #ffe4a3;
      font-weight: 950;
      text-align: center;
      text-transform: uppercase;
    }

    .attack-roll-presentation.miss .attack-roll-status {
      border-color: rgba(148, 163, 184, .45);
      background: rgba(148, 163, 184, .13);
      color: #dbe5ec;
    }

    .attack-roll-presentation.critical .attack-roll-status {
      border-color: rgba(239, 68, 68, .64);
      background: rgba(127, 29, 29, .3);
      color: #fecaca;
    }

    .attack-roll-meta {
      max-width: 180px;
      color: var(--muted);
      font-size: .72rem;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .battle-token.hit-critical .battle-token-inner::after {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 999px;
      border: 2px solid rgba(250, 204, 21, .58);
      box-shadow: 0 0 24px rgba(250, 204, 21, .5), 0 0 36px rgba(239, 68, 68, .28);
      pointer-events: none;
      animation: criticalRing .72s ease-out forwards;
    }

    @keyframes tokenHit {
      0% { transform: translateX(0) scale(1); filter: none; }
      25% { transform: translateX(-4px) scale(1.04); filter: drop-shadow(0 0 14px rgba(239, 68, 68, .9)); }
      50% { transform: translateX(4px) scale(1.04); filter: drop-shadow(0 0 18px rgba(239, 68, 68, .95)); }
      100% { transform: translateX(0) scale(1); filter: none; }
    }

    @keyframes tokenHeavyHit {
      0% { transform: translate(0, 0) scale(1); filter: none; }
      18% { transform: translate(-7px, 2px) scale(1.08); filter: drop-shadow(0 0 18px rgba(239, 68, 68, .95)); }
      36% { transform: translate(7px, -2px) scale(1.08); }
      54% { transform: translate(-4px, 1px) scale(1.03); filter: drop-shadow(0 0 24px rgba(251, 146, 60, .9)); }
      100% { transform: translate(0, 0) scale(1); filter: none; }
    }

    @keyframes tokenCriticalHit {
      0% { transform: translate(0, 0) scale(1); filter: none; }
      15% { transform: translate(-10px, 2px) scale(1.14); filter: drop-shadow(0 0 22px rgba(248, 113, 113, 1)); }
      30% { transform: translate(10px, -3px) scale(1.13); }
      46% { transform: translate(-8px, 2px) scale(1.08); filter: drop-shadow(0 0 30px rgba(250, 204, 21, .95)); }
      62% { transform: translate(5px, 0) scale(1.04); }
      100% { transform: translate(0, 0) scale(1); filter: none; }
    }

    @keyframes tokenDefeat {
      0% { transform: translate(0, 0) scale(1); filter: none; opacity: 1; }
      15% { transform: translate(-8px, 1px) scale(1.12); filter: drop-shadow(0 0 24px rgba(248, 113, 113, 1)); opacity: 1; }
      34% { transform: translate(7px, -2px) scale(1.04); filter: drop-shadow(0 0 20px rgba(239, 68, 68, .85)); }
      62% { transform: rotate(-4deg) scale(.96); filter: grayscale(.65); opacity: .72; }
      100% { transform: rotate(-5deg) scale(.92); filter: grayscale(1); opacity: .42; }
    }

    @keyframes defeatBadge {
      0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); }
      20% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
      78% { opacity: 1; transform: translate(-50%, -8px) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -16px) scale(.94); }
    }

    @keyframes tokenHeal {
      0% { transform: scale(1); filter: none; }
      34% { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(74, 222, 128, .88)); }
      100% { transform: scale(1); filter: none; }
    }

    @keyframes tokenDodge {
      0% { transform: translateX(0) rotate(0deg); filter: none; }
      36% { transform: translateX(8px) rotate(2deg); filter: drop-shadow(0 0 14px rgba(229, 231, 235, .45)); }
      100% { transform: translateX(0) rotate(0deg); filter: none; }
    }

    @keyframes tokenFinisher {
      0% { transform: scale(1); filter: brightness(1); }
      18% { transform: scale(1.1); filter: brightness(1.55) drop-shadow(0 0 20px rgba(250, 204, 21, .8)); }
      48% { transform: scale(1.04) translateY(-3px); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    @keyframes tokenMeleeLunge {
      0% { transform: translate(0, 0) scale(1); }
      38% { transform: translate(var(--lunge-x, 0%), var(--lunge-y, 0%)) scale(1.08); filter: drop-shadow(0 0 18px rgba(226, 183, 107, .72)); }
      100% { transform: translate(0, 0) scale(1); }
    }

    @keyframes criticalRing {
      0% { opacity: 0; transform: scale(.72); }
      20% { opacity: 1; }
      100% { opacity: 0; transform: scale(1.45); }
    }

    .warning-panel {
      margin: 0 0 12px;
      border-color: rgba(234, 179, 8, .45);
      background: rgba(234, 179, 8, .08);
    }

    .sort-row {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;
    }

    .palette-item {
      display: grid;
      grid-template-columns: 34px 1fr auto;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, .04);
      cursor: pointer;
    }

    .category-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-bottom: 12px;
    }

    .library-tools {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
      padding: 8px;
      border: 1px solid rgba(211, 224, 226, .12);
      border-radius: 7px;
      background: rgba(0, 0, 0, .18);
    }

    .library-tools button {
      justify-content: center;
      border-color: rgba(201, 152, 74, .38);
      background: rgba(201, 152, 74, .08);
    }

    .library-empty {
      padding: 10px;
      color: var(--muted);
      border: 1px dashed var(--line);
      border-radius: 7px;
    }

    .compact-empty {
      padding: 8px 10px;
      margin-top: 8px;
    }

    .csv-editor {
      display: grid;
      gap: 8px;
      margin-top: 14px;
    }

    .csv-editor textarea {
      min-height: 150px;
      font-family: Consolas, "Courier New", monospace;
      font-size: .82rem;
    }

    .skillbook-layout {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 14px;
    }

    .skillbook-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 10px;
    }

    .skill-category-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }

    .rarity-common { color: #cfd8d2; }
    .rarity-uncommon { color: #75ca7d; }
    .rarity-rare { color: #69a8ff; }
    .rarity-epic { color: #b989ff; }
    .rarity-legendary { color: #efb35d; }

    .tooltip, .context-menu {
      position: fixed;
      display: none;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: rgba(8, 10, 12, .96);
      box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    }

    .tooltip {
      z-index: 250;
      width: 300px;
      padding: 12px;
      pointer-events: none;
    }

    .tooltip-head {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }

    .context-menu {
      z-index: 260;
      width: min(260px, calc(100vw - 24px));
      min-width: 128px;
      padding: 6px;
    }

    .context-menu label {
      display: grid;
      gap: 4px;
      margin: 4px;
    }

    .context-menu input,
    .context-menu select {
      width: 100%;
      min-height: 30px;
      padding: 4px 7px;
      font-size: .82rem;
    }

    .context-menu button {
      width: 100%;
      text-align: left;
      border: 0;
      background: transparent;
      min-height: 30px;
      padding: 0 8px;
      font-size: .82rem;
    }

    .context-menu-group {
      display: grid;
      gap: 5px;
      padding: 7px 4px 8px;
      margin-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .context-menu-group button {
      min-height: 28px;
      border: 1px solid rgba(201, 152, 74, .2);
      border-radius: 7px;
      background: rgba(201, 152, 74, .08);
    }

    .skill-editor-modal .token-editor-modal-body {
      display: grid;
      grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
      gap: 12px;
      align-items: start;
    }

    .skill-editor-modal .modal-section {
      margin-top: 0;
    }

    .skill-editor-modal .modal-section:nth-of-type(1),
    .skill-editor-modal .modal-section:nth-of-type(2),
    .skill-editor-modal .modal-section:nth-of-type(4),
    .skill-editor-modal .modal-section:nth-of-type(6) {
      grid-column: 1;
    }

    .skill-editor-modal .modal-section:nth-of-type(3) {
      grid-column: 2;
      grid-row: 1 / span 4;
    }

    .skill-editor-modal [data-toggle-modal-section] {
      display: none;
    }

    .item-editor-modal .modal-grid,
    .skill-editor-modal .modal-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .item-editor-modal textarea,
    .skill-editor-modal textarea {
      min-height: 74px;
    }

    .item-editor-modal .action-schema-builder,
    .skill-editor-modal .action-schema-builder {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gacha-window {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(201, 152, 74, .42);
      border-radius: 10px;
      background: rgba(0, 0, 0, .32);
      padding: 18px 0;
      margin-top: 12px;
    }

    .gacha-marker {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      background: var(--gold);
      box-shadow: 0 0 18px rgba(226, 183, 107, .9);
      z-index: 2;
    }

    .gacha-reel {
      display: flex;
      gap: 8px;
      width: max-content;
      padding-left: calc(50% - 63px);
      transform: translateX(0);
      transition: transform 3.35s cubic-bezier(.08, .78, .04, 1);
      will-change: transform;
    }

    .gacha-reel.rolling {
      transform: translateX(var(--gacha-end));
    }

    .gacha-card {
      width: 126px;
      min-height: 142px;
      display: grid;
      place-items: center;
      gap: 6px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .045);
      text-align: center;
      font-size: .74rem;
    }

    .craft-timing {
      position: relative;
      height: 58px;
      overflow: hidden;
      border: 1px solid rgba(201, 152, 74, .42);
      border-radius: 10px;
      background: rgba(0, 0, 0, .32);
      margin: 14px 0;
    }

    .craft-zone {
      position: absolute;
      left: 42%;
      top: 0;
      bottom: 0;
      width: 16%;
      background: linear-gradient(90deg, rgba(201, 152, 74, .15), rgba(226, 183, 107, .45), rgba(201, 152, 74, .15));
      box-shadow: 0 0 22px rgba(226, 183, 107, .35);
    }

    .craft-needle {
      position: absolute;
      top: 6px;
      bottom: 6px;
      width: 4px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 0 16px rgba(255, 255, 255, .8);
      animation: craftNeedle 1.3s linear infinite alternate;
    }

    @keyframes craftNeedle {
      from { left: 4%; }
      to { left: 96%; }
    }

    .rest-minigame-modal {
      display: grid;
      gap: 12px;
    }

    .rest-timing {
      position: relative;
      height: 74px;
      overflow: hidden;
      border: 1px solid rgba(214, 173, 91, .44);
      border-radius: 12px;
      background:
        radial-gradient(circle at 50% 50%, rgba(214, 173, 91, .12), transparent 48%),
        rgba(0, 0, 0, .36);
      box-shadow: inset 0 0 20px rgba(0, 0, 0, .35);
    }

    .rest-timing.complete .rest-timing-needle {
      animation-play-state: paused;
    }

    .rest-timing.pulse {
      animation: restTimingPulse .22s ease-out;
    }

    .rest-timing.tracking {
      border-color: rgba(111, 183, 200, .55);
      background:
        linear-gradient(90deg, rgba(111, 183, 200, .05), rgba(214, 173, 91, .09), rgba(111, 183, 200, .05)),
        rgba(0, 0, 0, .38);
    }

    .rest-timing.alchemy {
      border-color: rgba(93, 214, 174, .48);
      background:
        radial-gradient(circle at 50% 50%, rgba(93, 214, 174, .12), transparent 48%),
        rgba(0, 0, 0, .36);
    }

    .rest-timing.cooking {
      border-color: rgba(245, 158, 11, .5);
      background:
        radial-gradient(circle at 50% 50%, rgba(245, 158, 11, .14), transparent 48%),
        rgba(0, 0, 0, .36);
    }

    .rest-timing-ruler {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 9%);
      opacity: .35;
    }

    .rest-timing-zone {
      position: absolute;
      left: 42%;
      top: 0;
      bottom: 0;
      width: 16%;
      background: linear-gradient(90deg, transparent, rgba(214, 173, 91, .42), transparent);
      box-shadow: 0 0 30px rgba(214, 173, 91, .34);
    }

    .rest-timing-perfect {
      position: absolute;
      left: 48%;
      top: 8px;
      bottom: 8px;
      width: 4%;
      border-radius: 999px;
      background: rgba(255, 255, 255, .24);
      box-shadow: 0 0 16px rgba(255, 255, 255, .4);
    }

    .rest-timing-needle {
      position: absolute;
      top: 8px;
      bottom: 8px;
      width: 5px;
      border-radius: 999px;
      background: #fff8df;
      box-shadow: 0 0 18px rgba(255, 248, 223, .86);
      animation: restNeedle var(--rest-needle-duration, 1.3s) cubic-bezier(.42, 0, .58, 1) infinite alternate;
    }

    .rest-timing.tracking .rest-timing-needle {
      animation-duration: 1.45s;
      background: #c8f3ff;
      box-shadow: 0 0 18px rgba(111, 183, 200, .9);
    }

    @keyframes restNeedle {
      from { left: 4%; }
      to { left: 96%; }
    }

    .rest-selection-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .rest-selection-minigame {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rest-selection-header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 9px 10px;
      border: 1px solid rgba(214, 173, 91, .22);
      border-radius: 10px;
      background:
        radial-gradient(circle at 0% 50%, rgba(214, 173, 91, .12), transparent 52%),
        rgba(0, 0, 0, .22);
    }

    .rest-selection-header span {
      display: grid;
      gap: 2px;
    }

    .rest-selection-header b {
      color: var(--gold);
      font-size: 1.15rem;
    }

    .rest-selection-grid button {
      display: grid;
      gap: 4px;
      min-height: 86px;
      border-color: rgba(214, 173, 91, .26);
      text-align: left;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
        rgba(0, 0, 0, .2);
    }

    .rest-selection-grid button.selected {
      border-color: rgba(214, 173, 91, .75);
      background: rgba(214, 173, 91, .14);
    }

    .rest-selection-grid button.revealed {
      border-color: rgba(111, 183, 200, .42);
      background:
        radial-gradient(circle at 0% 0%, rgba(111, 183, 200, .12), transparent 55%),
        rgba(214, 173, 91, .06);
    }

    .rest-selection-grid button:disabled {
      opacity: .82;
      cursor: default;
    }

    .rest-selection-grid button i {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      border: 1px solid rgba(214, 173, 91, .24);
      background: rgba(0, 0, 0, .26);
      color: #ffe0a3;
      font-style: normal;
      font-size: .58rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .rest-selection-grid button small {
      color: var(--muted);
      line-height: 1.25;
    }

    .rest-timing-counter,
    .rest-timing-hit-feedback {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, .035);
      color: var(--muted);
    }

    .rest-timing-hit-feedback b {
      color: var(--gold);
    }

    .rest-minigame-result {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      border: 1px solid rgba(214, 173, 91, .28);
      border-radius: 10px;
      padding: 10px;
      background: rgba(255, 255, 255, .04);
      animation: restResultPop .18s ease-out;
    }

    .rest-minigame-result span {
      display: grid;
      gap: 2px;
      padding: 8px;
      border-radius: 8px;
      background: rgba(0, 0, 0, .2);
    }

    .rest-minigame-result small {
      color: var(--muted);
    }

    .rest-minigame-result b {
      color: var(--gold);
      font-size: 1.15rem;
    }

    .rest-minigame-result p {
      grid-column: 1 / -1;
      margin: 2px 0 0;
      color: var(--muted);
    }

    .rest-minigame-result.unsaved {
      border-color: rgba(239, 68, 68, .38);
      background: rgba(239, 68, 68, .07);
    }

    .rest-minigame-result.critical {
      border-color: rgba(255, 244, 185, .58);
      box-shadow: 0 0 24px rgba(214, 173, 91, .18);
    }

    .rest-tracking-header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: end;
    }

    .rest-tracking-header span {
      display: grid;
      gap: 2px;
    }

    .rest-tracking-header small {
      color: var(--muted);
    }

    .rest-tracking-header b {
      color: var(--gold);
      font-size: 1.25rem;
    }

    .rest-tracking-progress {
      height: 12px;
      overflow: hidden;
      border: 1px solid rgba(111, 183, 200, .22);
      border-radius: 999px;
      background: rgba(0, 0, 0, .36);
    }

    .rest-tracking-progress i {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #5cc8ff, #d6ad5b);
      box-shadow: 0 0 18px rgba(111, 183, 200, .38);
      transition: width .12s linear;
    }

    .rest-tracking-track {
      position: relative;
      height: 126px;
      overflow: hidden;
      border: 1px solid rgba(111, 183, 200, .4);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(111, 183, 200, .16), rgba(12, 28, 35, .56)),
        rgba(0, 0, 0, .32);
      box-shadow: inset 0 0 24px rgba(0, 0, 0, .38);
      cursor: pointer;
      touch-action: none;
      user-select: none;
    }

    .rest-tracking-water {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 25%, rgba(255, 255, 255, .14), transparent 10%),
        radial-gradient(circle at 72% 65%, rgba(255, 255, 255, .1), transparent 12%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 14px, transparent 14px 34px);
      opacity: .7;
      animation: restWaterDrift 3s linear infinite;
    }

    .rest-tracking-zone {
      position: absolute;
      left: 50%;
      top: 16px;
      bottom: 16px;
      width: 20%;
      transform: translateX(-50%);
      border: 1px solid rgba(214, 173, 91, .72);
      border-radius: 999px;
      background: rgba(214, 173, 91, .12);
      box-shadow: 0 0 22px rgba(214, 173, 91, .2);
    }

    .rest-tracking-track.caught .rest-tracking-zone {
      background: rgba(66, 211, 146, .14);
      border-color: rgba(66, 211, 146, .86);
      box-shadow: 0 0 26px rgba(66, 211, 146, .28);
    }

    .rest-tracking-track.holding .rest-tracking-zone {
      border-color: rgba(214, 173, 91, .95);
      box-shadow: 0 0 28px rgba(214, 173, 91, .32);
    }

    .rest-tracking-fish {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 38px;
      height: 22px;
      transform: translate(-50%, -50%);
      border-radius: 60% 45% 45% 60%;
      background: linear-gradient(135deg, #c8f3ff, #5cc8ff 54%, #2c718d);
      box-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 0 18px rgba(111, 183, 200, .28);
      transition: left .06s linear;
    }

    .rest-tracking-fish::after {
      content: "";
      position: absolute;
      right: -12px;
      top: 4px;
      border-left: 14px solid #5cc8ff;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
    }

    .rest-track-controls {
      justify-content: center;
    }

    .rest-track-controls button {
      min-width: 180px;
      min-height: 44px;
      touch-action: none;
      user-select: none;
    }

    .rest-search-field {
      position: relative;
      min-height: 240px;
      overflow: hidden;
      border: 1px solid rgba(86, 156, 109, .42);
      border-radius: 14px;
      background:
        radial-gradient(circle at 22% 34%, rgba(66, 211, 146, .13), transparent 18%),
        radial-gradient(circle at 72% 72%, rgba(214, 173, 91, .12), transparent 20%),
        linear-gradient(135deg, rgba(19, 42, 28, .64), rgba(4, 10, 8, .72));
      box-shadow: inset 0 0 28px rgba(0, 0, 0, .42);
    }

    .rest-search-object {
      position: absolute;
      width: 88px;
      min-height: 58px;
      transform: translate(-50%, -50%);
      display: grid;
      gap: 2px;
      place-items: center;
      padding: 7px;
      border-color: rgba(214, 173, 91, .28);
      background: rgba(0, 0, 0, .44);
      text-align: center;
    }

    .rest-search-object i {
      font-style: normal;
      color: var(--gold);
      font-weight: 950;
    }

    .rest-search-object.good {
      border-color: rgba(66, 211, 146, .72);
      background: rgba(66, 211, 146, .12);
    }

    .rest-search-object.bad {
      border-color: rgba(239, 68, 68, .72);
      background: rgba(239, 68, 68, .12);
    }

    .rest-hunt-lane {
      position: relative;
      height: 150px;
      overflow: hidden;
      border: 1px solid rgba(214, 173, 91, .42);
      border-radius: 14px;
      background:
        linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(214, 173, 91, .12), rgba(0, 0, 0, .7)),
        radial-gradient(circle at 50% 50%, rgba(214, 173, 91, .16), transparent 22%),
        rgba(0, 0, 0, .38);
    }

    .rest-hunt-aim {
      position: absolute;
      left: 50%;
      top: 12px;
      bottom: 12px;
      width: 18%;
      transform: translateX(-50%);
      border-inline: 1px solid rgba(255, 244, 185, .58);
      background: linear-gradient(90deg, transparent, rgba(214, 173, 91, .24), transparent);
      box-shadow: 0 0 28px rgba(214, 173, 91, .28);
    }

    .rest-hunt-target {
      position: absolute;
      top: 50%;
      left: 6%;
      width: 48px;
      height: 48px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255, 244, 185, .95) 0 12%, rgba(214, 173, 91, .85) 13% 28%, rgba(40, 18, 12, .95) 29% 100%);
      box-shadow: 0 0 22px rgba(214, 173, 91, .35);
    }

    .rest-hunt-lane.pulse {
      animation: restTimingPulse .2s ease-out;
    }

    .rest-risk-grid,
    .rest-recipe-grid {
      display: grid;
      gap: 10px;
    }

    .rest-risk-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rest-risk-grid button,
    .rest-recipe-grid button {
      display: grid;
      gap: 5px;
      min-height: 92px;
      text-align: left;
      border-color: rgba(214, 173, 91, .24);
      background: rgba(255, 255, 255, .035);
    }

    .rest-brew-meter {
      height: 20px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(93, 214, 174, .26);
      border-radius: 999px;
      background: rgba(0, 0, 0, .34);
    }

    .rest-brew-meter i {
      display: block;
      width: 64%;
      height: 100%;
      background: linear-gradient(90deg, rgba(239, 68, 68, .3), rgba(93, 214, 174, .72), rgba(214, 173, 91, .28));
    }

    .rest-brew-meter.cooking {
      border-color: rgba(245, 158, 11, .32);
    }

    .rest-brew-meter.cooking i {
      background: linear-gradient(90deg, rgba(66, 211, 146, .22), rgba(245, 158, 11, .76), rgba(239, 68, 68, .28));
    }

    .rest-brew-meter span {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #dfffee;
      font-size: .72rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .rest-drawing-pad {
      display: grid;
      grid-template-columns: minmax(180px, 256px) minmax(0, 1fr);
      gap: 12px;
      align-items: stretch;
    }

    .rest-drawing-pad canvas {
      width: 100%;
      aspect-ratio: 1;
      border: 1px solid rgba(214, 173, 91, .34);
      border-radius: 12px;
      background: rgba(5, 7, 8, .92);
      box-shadow: inset 0 0 24px rgba(0, 0, 0, .42);
      touch-action: none;
      cursor: crosshair;
    }

    .rest-drawing-tools {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-content: start;
    }

    .rest-drawing-tools button.active {
      border-color: rgba(214, 173, 91, .72);
      background: rgba(214, 173, 91, .18);
    }

    @keyframes restWaterDrift {
      from { transform: translateX(0); }
      to { transform: translateX(-34px); }
    }

    @keyframes restResultPop {
      from { transform: translateY(4px); opacity: .4; }
      to { transform: translateY(0); opacity: 1; }
    }

    @keyframes restTimingPulse {
      from { box-shadow: 0 0 0 rgba(214, 173, 91, 0), inset 0 0 20px rgba(0, 0, 0, .35); }
      45% { box-shadow: 0 0 24px rgba(214, 173, 91, .32), inset 0 0 20px rgba(0, 0, 0, .35); }
      to { box-shadow: 0 0 0 rgba(214, 173, 91, 0), inset 0 0 20px rgba(0, 0, 0, .35); }
    }

    .modal-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .action-schema-builder {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 10px;
      border: 1px solid rgba(111, 183, 200, .18);
      border-radius: 8px;
      background: rgba(111, 183, 200, .055);
    }

    .ability-schema-section {
      grid-column: 1 / -1;
      min-width: 0;
      margin: 0;
      padding: 12px;
      border: 1px solid rgba(111, 183, 200, .16);
      border-radius: 10px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
      background: rgba(0, 0, 0, .13);
    }

    .ability-schema-section > legend {
      padding: 0 7px;
      color: #bfeefa;
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .ability-repeat-group,
    .ability-repeat-group > [data-damage-component-list],
    .ability-repeat-group > [data-status-effect-list],
    .ability-repeat-group > [data-trigger-list] {
      grid-column: 1 / -1;
      display: grid;
      gap: 8px;
    }

    .ability-repeat-group .schema-subhead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 0;
      padding-top: 0;
    }

    .ability-repeat-group .schema-subhead button {
      min-height: 30px;
      padding: 5px 9px;
      color: #bfeefa;
      border-color: rgba(111, 183, 200, .28);
      background: rgba(111, 183, 200, .08);
      font-size: .7rem;
    }

    .ability-repeat-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
      gap: 8px;
      align-items: end;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .075);
      border-radius: 9px;
      background: rgba(0, 0, 0, .17);
    }

    .ability-row-delete {
      min-height: 34px;
      align-self: end;
      padding: 6px 9px;
      font-size: .68rem;
    }

    .ability-field-error {
      min-height: 0;
      color: #ffb4b4;
      font-size: .66rem;
    }

    .ability-behavior-section {
      border-style: dashed;
    }

    .ability-behavior-section .schema-help {
      grid-column: 1 / -1;
      margin: 0;
    }

    .item-editor-modal textarea[id$="SchemaJson"]:focus,
    .skill-editor-modal textarea[id$="SchemaJson"]:focus {
      min-height: 220px;
    }

    .schema-subhead {
      grid-column: 1 / -1;
      margin-top: 4px;
      padding-top: 8px;
      border-top: 1px solid rgba(111, 183, 200, .16);
      color: var(--gold);
      font-family: var(--font-display);
      font-size: .76rem;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .schema-preview {
      grid-column: 1 / -1;
      display: grid;
      gap: 9px;
      padding: 12px;
      border: 1px solid rgba(226, 183, 107, .2);
      border-radius: 9px;
      background:
        radial-gradient(circle at 0% 0%, rgba(226, 183, 107, .12), transparent 38%),
        rgba(0, 0, 0, .18);
    }

    .schema-preview-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }

    .schema-preview-head b {
      color: #f7d78b;
      font-family: var(--font-display);
      text-transform: uppercase;
      font-size: .82rem;
    }

    .schema-preview-head small {
      color: var(--muted);
    }

    .schema-preview-chips,
    .schema-preview-plan {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .schema-preview-chips span,
    .schema-preview-plan span {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 9px;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 999px;
      background: rgba(255, 255, 255, .045);
      color: #e8edf0;
      font-size: .76rem;
    }

    .schema-preview-chips small {
      color: var(--muted);
      text-transform: uppercase;
      font-size: .62rem;
    }

    .schema-preview-chips b {
      color: #fff7db;
    }

    .schema-preview-plan span {
      border-color: rgba(111, 183, 200, .18);
      background: rgba(111, 183, 200, .055);
      color: #bfeefa;
    }

    .schema-preview-messages {
      display: grid;
      gap: 5px;
    }

    .schema-preview-messages p {
      margin: 0;
      padding: 6px 8px;
      border-radius: 7px;
      font-size: .76rem;
      line-height: 1.35;
    }

    .schema-preview-messages.warn p {
      border: 1px solid rgba(239, 68, 68, .28);
      background: rgba(239, 68, 68, .08);
      color: #ffc2c2;
    }

    .schema-preview-messages.note p {
      border: 1px solid rgba(226, 183, 107, .18);
      background: rgba(226, 183, 107, .07);
      color: #eed49d;
    }

    .modal-section-inner {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid rgba(111, 183, 200, .18);
      border-radius: 8px;
      background: rgba(255, 255, 255, .025);
    }

    .modal-section {
      display: grid;
      gap: 10px;
      margin-top: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .03);
    }

    .modal-section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .modal-section-title button {
      width: 28px;
      min-height: 24px;
      padding: 0;
      line-height: 1;
    }

    .modal-section.collapsible.collapsed {
      gap: 0;
      padding-block: 9px;
    }

    .modal-section.collapsible.collapsed .modal-grid,
    .modal-section.collapsible.collapsed .action-schema-builder,
    .modal-section.collapsible.collapsed .battle-button-row,
    .modal-section.collapsible.collapsed > p {
      display: none;
    }

    .skill-editor-modal .modal-section.collapsible.collapsed {
      gap: 10px;
      padding: 12px;
    }

    .skill-editor-modal .modal-section.collapsible.collapsed .modal-grid,
    .skill-editor-modal .modal-section.collapsible.collapsed .action-schema-builder,
    .skill-editor-modal .modal-section.collapsible.collapsed > p {
      display: grid;
    }

    .skill-editor-modal .modal-section.collapsible.collapsed .action-schema-builder {
      display: grid;
    }

    .skill-editor-modal .modal-section:nth-of-type(5) {
      grid-column: 2;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
    }

    .modal-card > .modal-actions:last-child {
      position: sticky;
      bottom: -16px;
      z-index: 2;
      margin: 14px -16px -16px;
      padding: 10px 16px;
      background: linear-gradient(180deg, rgba(10, 13, 15, .6), rgba(10, 13, 15, .98));
      border-top: 1px solid var(--line);
    }

    .dice-drop-layer {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 120;
      perspective: 980px;
      overflow: hidden;
    }

    .dice-three-layer {
      position: fixed;
      inset: 0;
      z-index: 122;
      pointer-events: none;
      overflow: hidden;
      background:
        linear-gradient(rgba(226, 183, 107, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 183, 107, .08) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(226, 183, 107, .16), transparent 24%),
        radial-gradient(circle at 50% 50%, rgba(111, 183, 200, .08), transparent 42%);
      background-size:
        56px 56px,
        56px 56px,
        100% 100%,
        100% 100%;
      transition: opacity .08s linear;
      transform: translateZ(0);
    }

    .dice-three-layer.tray-mode {
      inset: auto;
      left: 50%;
      top: 50%;
      width: min(980px, calc(100vw - 48px));
      height: min(620px, calc(100vh - 96px));
      transform: translate(-50%, -50%);
      border: 1px solid rgba(226, 183, 107, .32);
      border-radius: 18px;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .58), inset 0 0 80px rgba(226, 183, 107, .08);
      background-color: rgba(4, 6, 7, .82);
    }

    .dice-three-layer canvas {
      display: block;
      width: 100%;
      height: 100%;
      image-rendering: auto;
    }

    .dice-three-label {
      position: fixed;
      min-width: 54px;
      transform: translate(-50%, -50%);
      display: grid;
      justify-items: center;
      gap: 1px;
      padding: 5px 8px;
      border: 1px solid rgba(255, 231, 174, .34);
      border-radius: 999px;
      background: rgba(7, 5, 4, .72);
      color: #ffe7ad;
      font-weight: 1000;
      text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
      box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    }

    .dice-three-label b {
      font-size: 1.05rem;
      line-height: 1;
    }

    .dice-three-label span {
      color: rgba(255, 240, 208, .72);
      font-size: .56rem;
      line-height: 1;
      text-transform: uppercase;
    }

    .dm-character-control {
      display: grid;
      grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
      gap: 14px;
      align-items: end;
      border-color: rgba(226, 183, 107, .22);
      background:
        radial-gradient(circle at 10% 0%, rgba(226, 183, 107, .14), transparent 34%),
        rgba(0, 0, 0, .18);
    }

    .dm-level-control {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto;
      gap: 8px;
      align-items: end;
    }

    .dice-drop-d20-real {
      position: absolute;
      left: 0;
      top: 0;
      width: 112px;
      height: 112px;
      opacity: 1;
      filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .62));
      transform-origin: center;
      transform-style: preserve-3d;
      will-change: transform, opacity;
    }

    .d20-poly {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
    }

    .d20-poly::before {
      content: "";
      position: absolute;
      inset: 16px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 24%, rgba(255, 235, 184, .5), rgba(126, 71, 27, .36) 42%, rgba(20, 12, 7, .8) 72%);
      filter: blur(10px);
      transform: translateZ(-18px);
    }

    .d20-tri {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 78px;
      height: 72px;
      display: grid;
      place-items: center;
      margin-left: -39px;
      margin-top: -36px;
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
      border: 1px solid rgba(255, 236, 188, .28);
      background:
        radial-gradient(circle at 50% 18%, rgba(255, 239, 189, .46), transparent 30%),
        linear-gradient(150deg, rgba(232, 174, 78, .96), rgba(107, 55, 19, .96));
      box-shadow:
        inset 0 0 0 1px rgba(255, 231, 174, .16),
        inset 0 -18px 28px rgba(0, 0, 0, .26);
      backface-visibility: hidden;
    }

    .d20-tri:nth-child(odd) {
      background:
        radial-gradient(circle at 50% 18%, rgba(255, 239, 189, .38), transparent 30%),
        linear-gradient(150deg, rgba(194, 119, 43, .96), rgba(69, 36, 16, .98));
    }

    .d20-tri b {
      transform: translateY(14px);
      color: #181008;
      font-size: 1.72rem;
      font-weight: 1000;
      text-shadow: 0 1px 0 rgba(255, 245, 216, .55);
    }

    .d20-tri em {
      position: absolute;
      left: 50%;
      bottom: 8px;
      transform: translateX(-50%);
      color: rgba(255, 242, 205, .88);
      font-size: .58rem;
      font-style: normal;
      font-weight: 900;
      letter-spacing: 0;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .68);
    }

    .d20-tri.face-0 { transform: rotateZ(0deg) rotateX(58deg) translateZ(48px); }
    .d20-tri.face-1 { transform: rotateZ(72deg) rotateX(58deg) translateZ(48px); }
    .d20-tri.face-2 { transform: rotateZ(144deg) rotateX(58deg) translateZ(48px); }
    .d20-tri.face-3 { transform: rotateZ(216deg) rotateX(58deg) translateZ(48px); }
    .d20-tri.face-4 { transform: rotateZ(288deg) rotateX(58deg) translateZ(48px); }
    .d20-tri.face-5 { transform: rotateZ(36deg) rotateX(116deg) translateZ(43px); }
    .d20-tri.face-6 { transform: rotateZ(108deg) rotateX(116deg) translateZ(43px); }
    .d20-tri.face-7 { transform: rotateZ(180deg) rotateX(116deg) translateZ(43px); }
    .d20-tri.face-8 { transform: rotateZ(252deg) rotateX(116deg) translateZ(43px); }
    .d20-tri.face-9 { transform: rotateZ(324deg) rotateX(116deg) translateZ(43px); }
    .d20-tri.face-10 { transform: rotateZ(0deg) rotateX(-58deg) translateZ(48px); }
    .d20-tri.face-11 { transform: rotateZ(72deg) rotateX(-58deg) translateZ(48px); }
    .d20-tri.face-12 { transform: rotateZ(144deg) rotateX(-58deg) translateZ(48px); }
    .d20-tri.face-13 { transform: rotateZ(216deg) rotateX(-58deg) translateZ(48px); }
    .d20-tri.face-14 { transform: rotateZ(288deg) rotateX(-58deg) translateZ(48px); }
    .d20-tri.face-15 { transform: rotateZ(36deg) rotateX(-116deg) translateZ(43px); }
    .d20-tri.face-16 { transform: rotateZ(108deg) rotateX(-116deg) translateZ(43px); }
    .d20-tri.face-17 { transform: rotateZ(180deg) rotateX(-116deg) translateZ(43px); }
    .d20-tri.face-18 { transform: rotateZ(252deg) rotateX(-116deg) translateZ(43px); }
    .d20-tri.face-19 { transform: rotateZ(324deg) rotateX(-116deg) translateZ(43px); }

    .history {
      display: grid;
      gap: 8px;
      max-height: 420px;
      overflow: auto;
    }

    .history-row {
      display: grid;
      grid-template-columns: minmax(120px, auto) 82px 1fr auto;
      gap: 10px;
      padding: 9px 10px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, .035);
    }

    .history-row b {
      color: var(--gold);
      font-size: 1.25rem;
    }

    .history-roller { color: #fff; font-weight: 800; }

    .history-source { color: var(--blue); font-size: .84rem; }

    .design-title-stack {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .design-header-actions {
      margin-top: 0 !important;
      padding-top: 0 !important;
      border-top: 0 !important;
      flex: 0 0 auto;
      justify-content: flex-end;
    }

    .design-header-actions button {
      min-height: 34px;
      padding: 0 12px;
    }

    .design-summary-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 2px 0 4px;
    }

    .design-summary-strip span {
      min-width: 0;
      padding: 7px 9px;
      border: 1px solid rgba(255, 255, 255, .075);
      border-radius: 9px;
      background: rgba(0, 0, 0, .16);
    }

    .design-summary-strip small {
      display: block;
      color: var(--muted);
      font-size: .58rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .design-summary-strip b {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 2px;
      font-size: .84rem;
    }

    .dm-design-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
      gap: 12px;
      align-items: start;
    }

    .dm-design-main {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .dm-design-preview-panel {
      position: sticky;
      top: 10px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .dm-design-preview-panel .design-preview-grid {
      margin-top: 0;
    }

    .dm-design-list-panel .item-palette {
      max-height: min(42vh, 520px);
      overflow: auto;
      padding-right: 4px;
    }

    .asset-manager-workspace {
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      margin-top: 12px;
      min-width: 0;
    }

    .asset-manager-workspace > .panel,
    .asset-manager-workspace > .skill-card {
      margin-top: 0 !important;
      min-width: 0;
    }

    .asset-manager-workspace .dm-asset-grid,
    .asset-manager-workspace .item-palette {
      max-height: min(58vh, 680px);
      overflow: auto;
      padding-right: 4px;
    }

    .asset-tab-visual,
    .asset-tab-audio,
    .asset-tab-token {
      grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    }

    .asset-tab-audio,
    .asset-tab-token {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .asset-tab-visual .visual-preview-panel,
    .asset-tab-audio .panel:nth-of-type(2),
    .asset-tab-token .panel:nth-of-type(2) {
      grid-column: 2;
    }

    .asset-tab-audio .sound-map-panel {
      grid-column: 1 / -1;
      max-height: min(48vh, 560px);
      overflow: auto;
    }

    .asset-tab-token > .asset-editor-disclosure {
      grid-column: 1 / -1;
      max-height: min(72vh, 860px);
      overflow: auto;
      padding-right: 6px;
    }

    .asset-tab-token > .asset-library-panel {
      grid-column: 1 / -1;
    }

    .asset-tab-token .token-editor-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: start;
      min-width: 0;
    }

    .asset-tab-token .token-editor-preview,
    .asset-tab-token .token-editor-fields {
      min-width: 0;
    }

    .asset-tab-token .token-editor-preview {
      display: grid;
      gap: 10px;
    }

    .asset-tab-token .token-editor-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: start;
    }

    .asset-tab-token .token-editor-fields > .modal-section:nth-child(3) { grid-column: 1 / -1; }
    .asset-tab-token .token-editor-fields .modal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    @media (min-width: 1500px) {
      .asset-tab-token .token-editor-grid {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
      }

      .asset-tab-token .token-editor-fields {
        grid-column: 1;
        grid-row: 1;
      }

      .asset-tab-token .token-editor-preview {
        grid-column: 2;
        grid-row: 1;
      }
    }

    .asset-tab-token .token-editor-art {
      min-height: 160px;
      max-height: 220px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 10px;
      background: rgba(0, 0, 0, .22);
    }

    .asset-tab-token .token-editor-art img {
      max-width: 100%;
      max-height: 210px;
      object-fit: contain;
    }

    .token-empty-preview {
      display: grid;
      place-items: center;
      gap: 4px;
      width: 100%;
      min-height: 140px;
      color: var(--muted);
      text-align: center;
      border: 1px dashed rgba(255, 255, 255, .12);
      border-radius: 10px;
      background:
        radial-gradient(circle at 50% 0%, rgba(226, 183, 107, .08), transparent 48%),
        rgba(255, 255, 255, .018);
    }

    .token-empty-preview b {
      color: #fff7db;
      font-size: .82rem;
      text-transform: uppercase;
    }

    .token-empty-preview small {
      max-width: 220px;
      line-height: 1.35;
    }

    .asset-tab-token .modal-section {
      margin-top: 8px;
    }

    .asset-tab-token .modal-section .modal-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .data-overview-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
      gap: 12px;
      align-items: start;
      margin-top: 12px;
      min-width: 0;
    }

    .data-overview-main,
    .data-overview-side {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .data-overview-side {
      position: sticky;
      top: 10px;
      max-height: calc(var(--drawer-inner-height, 70vh) - 22px);
      overflow: auto;
      padding-right: 4px;
    }

    .data-kpi-grid {
      margin-top: 0 !important;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .data-overview-workspace > .panel,
    .data-overview-workspace .panel {
      margin-top: 0 !important;
    }

    .dm-battle-design-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
      gap: 12px;
      align-items: start;
      min-width: 0;
    }

    .dm-battle-design-board {
      min-width: 0;
      overflow: hidden;
    }

    .dm-battle-design-board > .design-preview-grid {
      margin-top: 10px;
    }

    .dm-battle-design-side {
      position: sticky;
      top: 10px;
      display: grid;
      gap: 12px;
      max-height: calc(var(--drawer-inner-height, 70vh) - 22px);
      overflow: auto;
      padding-right: 3px;
    }

    .dm-battle-design-side .modal-grid {
      grid-template-columns: 1fr;
    }

    .dm-battle-design-side .battle-button-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .dm-battle-design-side .battle-button-row button {
      min-height: 34px;
    }

    .compact-note {
      margin: 8px 0 0;
      line-height: 1.35;
    }

    .dm-content-panel .dm-asset-body {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .dm-content-panel .dm-asset-body .data-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding-top: 4px;
      border-top: 0;
    }

    .dm-content-panel .dm-asset-body .data-actions button {
      min-height: 30px;
      padding: 0 9px;
      font-size: .72rem;
    }

    .dm-players-workspace {
      display: grid;
      grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      min-width: 0;
    }

    .dm-player-roster {
      position: sticky;
      top: 0;
      display: grid;
      gap: 10px;
      max-height: calc(100vh - 230px);
      overflow: auto;
      border-color: rgba(111, 183, 200, .25);
      background:
        radial-gradient(circle at 12% 0%, rgba(111, 183, 200, .12), transparent 38%),
        rgba(4, 10, 13, .76);
    }

    .dm-player-roster-head {
      display: grid;
      gap: 5px;
      padding-bottom: 9px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .dm-section-kicker {
      color: var(--gold);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .dm-player-roster-list {
      display: grid;
      gap: 8px;
    }

    .dm-player-workspace-detail {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .dm-player-select-card {
      cursor: pointer;
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 11px;
      align-items: start;
      padding: 10px;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .dm-player-roster-icon {
      position: relative;
      display: grid;
      place-items: center;
      width: 54px;
      height: 62px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 0;
      color: var(--text);
      background: rgba(0, 0, 0, .24);
      font-family: var(--mono);
      font-size: 1rem;
      font-weight: 800;
    }

    .dm-player-roster-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 24%;
    }

    .dm-player-roster-copy {
      display: grid;
      min-width: 0;
    }

    .dm-player-roster-copy > .subtle {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dm-player-select-card:hover,
    .dm-player-select-card:focus-visible {
      border-color: rgba(226, 183, 107, .62);
      background:
        radial-gradient(circle at 0% 0%, rgba(226, 183, 107, .14), transparent 42%),
        rgba(0, 0, 0, .2);
      transform: translateY(-1px);
      outline: none;
    }

    .dm-player-select-card.selected {
      border-color: rgba(226, 183, 107, .78);
      background:
        linear-gradient(90deg, rgba(226, 183, 107, .2), rgba(226, 183, 107, .04)),
        rgba(0, 0, 0, .28);
      box-shadow: inset 3px 0 0 var(--gold), 0 8px 24px rgba(0, 0, 0, .16);
      transform: none;
    }

    .dm-player-select-card .subtle {
      margin: 5px 0 0;
      line-height: 1.38;
    }

    .dm-player-manage-hint {
      display: block;
      margin-top: 8px;
      color: var(--gold);
      font-size: .74rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .dm-library-choice-field {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 8px;
      min-width: 0;
    }

    .dm-library-choice-field label {
      min-width: 0;
    }

    .dm-library-choose-button {
      min-height: 38px;
      padding: 0 16px;
      border-radius: 0;
      white-space: nowrap;
    }

    .dm-library-selection-preview {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 78px;
      margin-top: 12px;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 0;
      background: rgba(0, 0, 0, .16);
    }

    .dm-library-selection-art {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .09);
      background: rgba(0, 0, 0, .2);
      color: var(--muted);
      font-family: var(--mono);
      font-weight: 800;
    }

    .dm-library-selection-art img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .dm-library-selection-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .dm-library-selection-copy small,
    .dm-library-selection-preview code,
    .dm-library-selection-empty > span {
      color: var(--muted);
      font-family: var(--mono);
      font-size: .65rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .dm-library-selection-copy > span {
      overflow: hidden;
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dm-library-selection-empty {
      grid-column: 1 / -1;
      display: grid;
      gap: 3px;
    }

    .dm-library-selection-empty small {
      color: var(--muted);
    }

    .dm-player-route-card {
      grid-column: 1 / -1;
    }

    .dm-player-route-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .dm-player-route-grid button {
      display: grid;
      justify-items: start;
      gap: 3px;
      min-height: 70px;
      padding: 12px 14px;
      text-align: left;
      border-color: rgba(111, 183, 200, .22);
      background:
        linear-gradient(135deg, rgba(111, 183, 200, .1), rgba(226, 183, 107, .04)),
        rgba(0, 0, 0, .22);
    }

    .dm-player-route-grid button:hover,
    .dm-player-route-grid button:focus-visible {
      border-color: rgba(226, 183, 107, .62);
    }

    .dm-player-route-grid small {
      color: var(--muted);
      font-weight: 600;
    }

    .scene-workflow {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 2px 0 10px;
    }

    .scene-workflow > span {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      grid-template-rows: auto auto;
      column-gap: 8px;
      align-items: center;
      min-height: 52px;
      padding: 8px 10px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 10px;
      background: rgba(0, 0, 0, .2);
    }

    .scene-workflow b {
      grid-row: 1 / 3;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid currentColor;
      border-radius: 50%;
      color: var(--muted);
    }

    .scene-workflow small {
      color: #fff;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .scene-workflow strong {
      color: var(--muted);
      font-size: .74rem;
    }

    .scene-workflow > span.active,
    .scene-workflow > span.ready {
      border-color: rgba(98, 207, 143, .3);
    }

    .scene-workflow > span.active b,
    .scene-workflow > span.ready b {
      color: #62cf8f;
    }

    .scene-workflow > span.warn {
      border-color: rgba(226, 183, 107, .4);
      background: rgba(226, 183, 107, .07);
    }

    .scene-workflow > span.warn b {
      color: var(--gold);
    }

    .dm-admin-danger-zone {
      border-color: rgba(230, 91, 91, .34);
      background:
        linear-gradient(135deg, rgba(230, 91, 91, .08), transparent 54%),
        rgba(0, 0, 0, .24);
    }

    .dm-admin-player-delete-fields {
      grid-template-columns: 1fr;
    }

    @container (max-width: 900px) {
      .dm-players-workspace,
      .dm-section-head,
      .dm-send-grid {
        grid-template-columns: 1fr;
      }

      .dm-player-roster {
        position: static;
        max-height: none;
      }

      .dm-player-roster-list {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      }

      .scene-workflow {
        grid-template-columns: 1fr;
      }
    }

    .dm-content-assets .asset-grid,
    .dm-content-assets .dm-asset-grid,
    .dm-content-data .data-manager-grid {
      align-items: start;
    }

    .dm-content-log .history {
      max-height: min(62vh, 680px);
    }


    .dm-badge {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 7px;
      margin-left: 8px;
      border: 1px solid rgba(111, 183, 200, .5);
      border-radius: 999px;
      color: var(--blue);
      font-size: .72rem;
      letter-spacing: 0;
    }

    .dm-badge.ok {
      border-color: rgba(116, 211, 143, .45);
      color: #a9f0bd;
      background: rgba(61, 148, 86, .14);
    }

    .dm-badge.warn {
      border-color: rgba(244, 180, 72, .42);
      color: #ffd48a;
      background: rgba(169, 106, 24, .14);
    }

    .host-sync-panel {
      border-color: rgba(93, 168, 255, .22);
      background:
        linear-gradient(135deg, rgba(30, 83, 130, .22), rgba(10, 12, 15, .78)),
        rgba(12, 16, 20, .9);
    }

    .host-sync-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .host-sync-card {
      min-height: 76px;
      padding: 11px 12px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      background: rgba(0, 0, 0, .24);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    }

    .host-sync-card span,
    .host-sync-card small {
      display: block;
      color: var(--muted);
      font-size: 11px;
    }

    .host-sync-card b {
      display: block;
      margin: 4px 0 2px;
      color: var(--text);
      font-size: 18px;
      line-height: 1.1;
    }

    .dm-tool-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
      gap: 12px;
      align-items: start;
      min-width: 0;
    }

    .dm-tool-main,
    .dm-tool-side {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .dm-tool-side {
      position: sticky;
      top: 10px;
    }

    .dm-tool-workspace .panel {
      margin-top: 0 !important;
    }

    .dm-diagnostics-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
      gap: 12px;
      align-items: start;
      min-width: 0;
    }

    .dm-diagnostics-main,
    .dm-diagnostics-side {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .dm-diagnostics-side {
      position: sticky;
      top: 10px;
      max-height: calc(var(--drawer-inner-height, 70vh) - 22px);
      overflow: auto;
      padding-right: 4px;
    }

    .dm-diagnostics-workspace .panel,
    .dm-diagnostics-workspace .dm-grid {
      margin-top: 0 !important;
    }

    .diagnostics-kpi-grid {
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .diagnostics-ref-list {
      max-height: min(34vh, 360px);
      overflow: auto;
      padding-right: 4px;
    }

    .warn-text {
      color: #ffce8a;
    }

    .publish-button {
      min-height: 40px;
      padding: 0 16px;
      color: #111;
      font-weight: 900;
      border-color: rgba(255, 224, 153, .82);
      background: linear-gradient(180deg, #e2b76b, #b97d32);
      box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
    }

    .design-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .asset-picker-label {
      display: grid;
      gap: 5px;
    }

    .asset-picker-inline {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .asset-picker-inline .mini-toggle {
      min-height: 34px;
      padding: 0 10px;
      white-space: nowrap;
    }

    .asset-select-thumb {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(0, 0, 0, .28);
      color: var(--muted);
      overflow: hidden;
      font-weight: 900;
    }

    .asset-select-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .battle-design-controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 10px;
      align-items: start;
    }

    .battle-control-group {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: rgba(255, 255, 255, .03);
    }

    .battle-control-group.modal-section {
      margin-top: 0;
    }

    .battle-button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .battle-button-row button {
      min-height: 32px;
      padding: 0 10px;
    }

    .dm-menu {
      display: grid;
      gap: 12px;
    }

    .dm-menu-group {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        rgba(0, 0, 0, .18);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
    }

    .dm-menu-ops { border-color: rgba(97, 178, 255, .28); box-shadow: inset 3px 0 0 rgba(97, 178, 255, .42); }
    .dm-menu-encounter { border-color: rgba(215, 166, 74, .34); box-shadow: inset 3px 0 0 rgba(215, 166, 74, .48); }
    .dm-menu-library { border-color: rgba(98, 207, 143, .28); box-shadow: inset 3px 0 0 rgba(98, 207, 143, .42); }
    .dm-menu-system { border-color: rgba(183, 142, 255, .28); box-shadow: inset 3px 0 0 rgba(183, 142, 255, .4); }

    .dm-menu-label {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 7px;
    }

    .dm-menu-buttons {
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
    }

    .dm-menu-buttons button {
      min-height: 36px;
      justify-content: flex-start;
      padding: 0 10px;
      text-align: left;
    }

    .dm-menu button.active {
      border-color: var(--gold);
      color: #fff1ca;
      background:
        linear-gradient(90deg, rgba(201, 152, 74, .26), rgba(201, 152, 74, .08)),
        rgba(0, 0, 0, .18);
      box-shadow: inset 0 0 0 1px rgba(255, 224, 153, .1);
    }

    .dm-section-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
      gap: 14px;
      align-items: end;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .dm-section-head .panel-title {
      margin-bottom: 4px;
    }

    .dm-target-card {
      display: grid;
      gap: 6px;
      padding: 10px;
      border: 1px solid rgba(111, 183, 200, .24);
      border-radius: 10px;
      background:
        radial-gradient(circle at 0% 0%, rgba(111, 183, 200, .12), transparent 44%),
        rgba(0, 0, 0, .2);
    }

    .dm-target-card span {
      color: var(--blue);
      font-size: .72rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .encounter-head {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }

    .dm-encounter-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .dm-encounter-actions button {
      min-height: 38px;
      padding: 0 14px;
    }

    .dm-encounter-more {
      position: relative;
    }

    .dm-encounter-more > summary,
    .dm-token-advanced > summary {
      display: flex;
      align-items: center;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--muted);
      background: rgba(255, 255, 255, .035);
      cursor: pointer;
      font-weight: 800;
      list-style: none;
    }

    .dm-encounter-more > summary::-webkit-details-marker,
    .dm-token-advanced > summary::-webkit-details-marker {
      display: none;
    }

    .dm-encounter-more[open] > summary,
    .dm-token-advanced[open] > summary {
      border-color: rgba(226, 183, 107, .46);
      color: #fff1ca;
    }

    .dm-encounter-more > div {
      position: absolute;
      z-index: 12;
      top: calc(100% + 6px);
      right: 0;
      display: grid;
      gap: 7px;
      min-width: 190px;
      padding: 9px;
      border: 1px solid rgba(226, 183, 107, .3);
      border-radius: 10px;
      background: rgba(5, 9, 12, .98);
      box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
    }

    .dm-encounter-runbook {
      display: grid;
      gap: 12px;
      margin-bottom: 12px;
      border-color: rgba(111, 183, 200, .24);
      background:
        radial-gradient(circle at 0% 0%, rgba(111, 183, 200, .1), transparent 38%),
        rgba(0, 0, 0, .18);
    }

    .dm-encounter-runbook.empty {
      grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr) auto;
      align-items: center;
    }

    .dm-encounter-runbook-steps,
    .dm-encounter-runbook-status {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .dm-encounter-runbook-steps > span,
    .dm-encounter-runbook-status > span {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      grid-template-rows: auto auto;
      gap: 2px 8px;
      align-items: center;
      min-width: 0;
    }

    .dm-encounter-runbook-steps b,
    .dm-encounter-runbook-status b {
      grid-row: 1 / 3;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid currentColor;
      border-radius: 50%;
      color: var(--blue);
    }

    .dm-encounter-runbook-steps small,
    .dm-encounter-runbook-status small {
      color: #fff;
      font-weight: 900;
      text-transform: uppercase;
    }

    .dm-encounter-runbook-steps strong,
    .dm-encounter-runbook-status strong {
      overflow: hidden;
      color: var(--muted);
      font-size: .73rem;
      text-overflow: ellipsis;
    }

    .dm-encounter-runbook-status > span.complete b {
      color: #62cf8f;
    }

    .dm-encounter-runbook-status > span.active b {
      color: var(--gold);
    }

    .dm-encounter-admin {
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }

    .dm-battle-control-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
      gap: 12px;
      align-items: start;
    }

    .dm-battle-live-board {
      min-width: 0;
    }

    .dm-battle-side-control {
      position: sticky;
      top: 12px;
      min-width: 0;
      max-height: min(78vh, 820px);
      overflow: auto;
      scrollbar-width: thin;
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .dm-token-control {
      display: grid;
      gap: 10px;
      margin-top: 12px;
      border-color: rgba(111, 183, 200, .24);
      background:
        radial-gradient(circle at 0% 0%, rgba(111, 183, 200, .1), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        rgba(0, 0, 0, .18);
    }

    .dm-battle-side-control .dm-token-control {
      margin-top: 0;
    }

    .dm-board-shell {
      grid-template-columns: 1fr;
    }

    .dm-battle-side-control .turn-panel {
      position: static;
      max-height: 190px;
      overflow: hidden;
    }

    .dm-battle-side-control .turn-timeline {
      max-height: 140px;
    }

    .dm-battle-side-control .dm-token-stat-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dm-battle-side-control .dm-token-control-grid {
      grid-template-columns: 1fr 1fr;
    }

    .dm-battle-side-control .dm-token-control-grid button {
      min-height: 36px;
    }

    .dm-battle-side-control .dm-token-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dm-token-advanced {
      display: grid;
      gap: 10px;
      margin-top: 2px;
    }

    .dm-token-advanced > summary {
      justify-content: center;
    }

    .dm-token-advanced-body {
      display: grid;
      gap: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .07);
    }

    .dm-battle-summary {
      display: grid;
      gap: 8px;
      border-color: rgba(226, 183, 107, .25);
      background:
        radial-gradient(circle at 0% 0%, rgba(226, 183, 107, .1), transparent 34%),
        rgba(0, 0, 0, .18);
    }

    .dm-battle-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
    }

    .dm-battle-summary-grid span {
      min-width: 0;
      padding: 7px 6px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      background: rgba(0, 0, 0, .18);
    }

    .dm-battle-summary-grid small {
      display: block;
      color: var(--muted);
      font-size: .56rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .dm-battle-summary-grid b {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 2px;
      font-size: .82rem;
    }

    .dm-battle-summary-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .dm-battle-summary-actions button {
      min-height: 30px;
      padding: 0 8px;
      font-size: .72rem;
    }

    .dm-token-control-head {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .dm-token-control-head > span:nth-child(2) {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .dm-token-select-row {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .dm-token-stat-grid {
      display: grid;
      grid-template-columns: repeat(8, minmax(72px, 1fr));
      gap: 8px;
    }

    .dm-token-stat-grid span {
      min-width: 0;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      background: rgba(0, 0, 0, .18);
    }

    .dm-token-stat-grid small {
      display: block;
      color: var(--muted);
      font-size: .62rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .dm-token-stat-grid b {
      display: block;
      margin-top: 2px;
      color: var(--text);
      font-size: .95rem;
    }

    .dm-token-control-grid {
      display: grid;
      grid-template-columns: minmax(120px, 1fr) minmax(110px, .8fr) auto minmax(160px, 1.2fr) minmax(90px, .7fr) auto;
      gap: 8px;
      align-items: end;
    }

    .dm-token-control-section {
      display: grid;
      gap: 8px;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .075);
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
        rgba(0, 0, 0, .16);
    }

    .dm-token-section-title {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: baseline;
    }

    .dm-token-section-title b {
      font-size: .78rem;
      text-transform: uppercase;
      color: #f7e2b0;
    }

    .dm-token-section-title small {
      color: var(--muted);
      font-size: .66rem;
      text-align: right;
    }

    .dm-token-resource-editor,
    .dm-token-status-editor {
      grid-template-columns: minmax(0, 1fr) 92px auto;
    }

    .dm-token-status-preset-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .dm-token-status-preset-grid button {
      min-height: 32px;
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr);
      gap: 7px;
      align-items: center;
      justify-items: start;
      padding: 0 9px;
      font-size: .7rem;
      color: rgba(237, 241, 235, .9);
      border-color: color-mix(in srgb, var(--status, #e2b76b) 48%, transparent);
      background:
        radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--status, #e2b76b) 18%, transparent), transparent 58%),
        rgba(255, 255, 255, .028);
    }

    .dm-token-status-preset-grid i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--status, #e2b76b);
      box-shadow: 0 0 12px var(--status, #e2b76b);
    }

    .dm-token-status-preset-grid span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dm-token-turn-tools {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px;
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 8px;
      background: rgba(0, 0, 0, .16);
    }

    .dm-token-turn-tools button {
      min-height: 30px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: .72rem;
      color: rgba(237, 241, 235, .88);
      background: rgba(255, 255, 255, .035);
    }

    .dm-token-turn-tools button:hover {
      color: #fff4d7;
      background: rgba(201, 152, 74, .18);
    }

    .dm-token-quick-adjust {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .dm-token-quick-adjust button {
      min-height: 30px;
      padding: 0 8px;
      border-radius: 999px;
      font-size: .72rem;
      background: rgba(255, 255, 255, .035);
    }

    .compact-token-card {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 8px;
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 8px;
      background: rgba(0, 0, 0, .14);
    }

    .compact-token-card > span:nth-child(2) {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .compact-token-card b,
    .compact-token-card small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .compact-token-card small {
      color: var(--muted);
      font-size: .72rem;
    }

    .dm-token-mark-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-height: 28px;
      align-items: center;
    }

    .dm-token-mark-strip button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 0 8px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 999px;
      background: rgba(255, 255, 255, .035);
      color: var(--text);
      font-size: .74rem;
    }

    .dm-token-mark-strip i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--mark, var(--gold));
      box-shadow: 0 0 10px var(--mark, rgba(226, 183, 107, .55));
    }

    .dm-token-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .dm-admin-title {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .dm-admin-title > span {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .dm-admin-title b {
      color: #fff7db;
    }

    .dm-admin-title small {
      color: var(--muted);
      font-weight: 700;
    }

    .dm-live-shop-list,
    .dm-sell-offer-list {
      display: grid;
      gap: 8px;
      max-height: min(42vh, 420px);
      overflow: auto;
      padding-right: 4px;
    }

    .dm-live-shop-admin-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
      gap: 12px;
      align-items: start;
    }

    .dm-live-shop-admin-grid .nested-panel {
      min-width: 0;
      margin: 0;
    }

    .dm-live-shop-list {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

    .dm-live-shop-row,
    .dm-sell-offer-row {
      min-width: 0;
      display: grid;
      align-items: center;
      gap: 8px;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .085);
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .016)),
        rgba(0, 0, 0, .2);
    }

    .dm-live-shop-row {
      grid-template-columns: 44px minmax(0, 1fr) 82px 62px auto;
    }

    .dm-sell-offer-row {
      grid-template-columns: 44px minmax(0, 1fr) 92px auto auto;
    }

    .dm-live-shop-row > span:nth-child(2),
    .dm-sell-offer-row > span:nth-child(2) {
      min-width: 0;
      overflow: hidden;
    }

    .dm-live-shop-row small,
    .dm-sell-offer-row small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dm-send-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
      gap: 12px;
      align-items: start;
    }

    .dm-subtab-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
      margin: 12px 0;
      padding: 8px;
      border: 1px solid rgba(226, 183, 107, .14);
      border-radius: 14px;
      background:
        radial-gradient(circle at 12% 0%, rgba(226, 183, 107, .12), transparent 34%),
        rgba(0, 0, 0, .22);
    }

    .dm-subtab-row button {
      min-height: 40px;
      border-radius: 10px;
      color: var(--muted);
      background: rgba(255, 255, 255, .035);
      border-color: rgba(255, 255, 255, .08);
      font-weight: 900;
    }

    .dm-subtab-row button.active {
      color: #16110a;
      border-color: rgba(255, 224, 153, .72);
      background: linear-gradient(180deg, #e2b76b, #ad762f);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255, 255, 255, .22);
    }

    .dm-control-card {
      min-width: 0;
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        rgba(0, 0, 0, .2);
    }

    .dm-control-card.primary {
      border-color: rgba(226, 183, 107, .22);
      background:
        radial-gradient(circle at 96% 0%, rgba(226, 183, 107, .12), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        rgba(0, 0, 0, .22);
    }

    .dm-control-title {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      column-gap: 10px;
      align-items: center;
    }

    .dm-control-title span {
      grid-row: span 2;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(226, 183, 107, .28);
      border-radius: 50%;
      color: var(--gold);
      background: rgba(226, 183, 107, .08);
      font-weight: 900;
      font-size: .74rem;
    }

    .dm-control-title b {
      color: #fff7db;
      font-size: .98rem;
    }

    .dm-control-title small {
      color: var(--muted);
      font-size: .76rem;
    }

    .dm-control-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-items: end;
    }

    .item-transfer-fields {
      grid-template-columns: minmax(180px, 1fr) minmax(120px, .7fr) 86px;
    }

    .skill-transfer-fields {
      grid-template-columns: minmax(180px, 1fr) minmax(120px, .7fr);
    }

    .transfer-filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      max-height: 82px;
      overflow: auto;
      padding: 7px;
      border: 1px solid rgba(255, 255, 255, .075);
      border-radius: 10px;
      background: rgba(0, 0, 0, .16);
    }

    .transfer-filter-row button {
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: .76rem;
      color: var(--muted);
      background: rgba(255, 255, 255, .035);
    }

    .transfer-filter-row button.active {
      color: #111;
      border-color: rgba(226, 183, 107, .78);
      background: linear-gradient(180deg, #e2b76b, #b98238);
      box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
    }

    .dm-resource-control {
      grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    }

    .dm-level-control {
      grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto;
    }

    .dm-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .dm-action-row button,
    .dm-control-fields button {
      min-height: 34px;
      padding: 0 12px;
    }

    .dm-result-list {
      max-height: 300px;
      overflow: auto;
      padding-right: 4px;
    }

    .player-inventory-inspect {
      max-height: 320px;
      overflow: auto;
      padding-right: 4px;
    }

    .dm-player-overview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
      gap: 10px;
    }

    .dm-player-quick-stat {
      min-height: 74px;
      display: grid;
      align-content: center;
      gap: 4px;
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .016)),
        rgba(0, 0, 0, .24);
    }

    .dm-player-quick-stat span {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .dm-player-quick-stat b {
      color: var(--text);
      font-size: 1.08rem;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dm-player-quick-stat.hp b { color: #fb7185; }
    .dm-player-quick-stat.mp b { color: #60a5fa; }
    .dm-player-quick-stat.inspiration b { color: #fca5a5; }

    .dm-trait-control-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
    }

    .dm-player-current-tags {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .dm-player-current-tags > div {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 12px;
      background: rgba(0, 0, 0, .18);
    }

    .dm-player-current-tags b {
      width: 100%;
      color: var(--muted);
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .dm-player-current-tags span {
      padding: 4px 8px;
      border: 1px solid rgba(226, 183, 107, .2);
      border-radius: 999px;
      color: #ffe1a1;
      background: rgba(226, 183, 107, .08);
      font-size: .76rem;
      font-weight: 800;
    }

    .dm-bulk-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 12px;
    }

    .dm-bulk-grid .dm-control-card {
      min-width: 0;
      background: rgba(0, 0, 0, .18);
      align-content: start;
    }

    .dm-bulk-grid .dm-control-card > button {
      width: 100%;
      min-height: 38px;
      margin-top: 2px;
      white-space: normal;
    }

    .bulk-resource-control {
      grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    }

    .dm-bulk-grid .dm-level-control,
    .dm-bulk-grid .item-transfer-fields,
    .dm-bulk-grid .skill-transfer-fields {
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    }

    .bulk-action-row {
      justify-content: flex-end;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .inspect-row {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      min-width: 0;
    }

    .inspect-row > span {
      min-width: 0;
    }

    .dm-unlock-row {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto;
      gap: 10px;
      align-items: center;
      max-width: 520px;
      margin-top: 12px;
    }

    .dm-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .dm-row {
      display: grid;
      grid-template-columns: 1fr 92px 72px auto;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, .035);
    }

    .mini-toggle {
      min-height: 28px;
      padding: 0 8px;
      font-size: .74rem;
      justify-self: end;
      white-space: nowrap;
    }

    .mini-toggle.active {
      color: #111;
      border-color: rgba(255, 224, 153, .72);
      background: linear-gradient(180deg, #e2b76b, #b97d32);
    }

    .mini-toggle.danger {
      color: #fecaca;
      border-color: rgba(239, 68, 68, .6);
      background: rgba(127, 29, 29, .28);
    }

    .loot-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(68px, auto));
      gap: 6px;
      justify-content: flex-end;
      align-items: center;
      white-space: nowrap;
    }

    .battle-loot-row {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .panel .item-palette:has([data-battle-loot]) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-height: 296px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .player-inventory-inspect {
      display: grid;
      gap: 8px;
      max-height: 320px;
      overflow: auto;
      padding-right: 4px;
    }

    .inspect-row {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    :root {
      --motion-instant: 80ms;
      --motion-fast: 140ms;
      --motion-normal: 220ms;
      --motion-slow: 340ms;
      --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --motion-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    .dm-player-head {
      display: grid;
      justify-items: start;
      gap: 3px;
      margin-bottom: 8px;
    }

    .dm-stat-line {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--muted);
      font-size: .86rem;
    }

    .dm-asset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .dm-asset {
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .016)),
        rgba(0, 0, 0, .2);
    }

    .dm-asset img {
      width: 100%;
      height: 132px;
      object-fit: cover;
      display: block;
      background: rgba(0, 0, 0, .26);
    }

    .dm-asset-body {
      display: grid;
      gap: 7px;
      padding: 10px;
    }

    .dm-asset-body b,
    .dm-asset-body small {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dm-asset-body > button {
      min-height: 32px;
      justify-self: stretch;
    }

    .audio-asset-grid .dm-asset {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      align-items: stretch;
    }

    .audio-glyph {
      width: 58px;
      min-height: 92px;
      display: grid;
      place-items: center;
      border-right: 1px solid rgba(255, 255, 255, .08);
      color: #f0d18a;
      font-size: 1.5rem;
      background:
        radial-gradient(circle at center, rgba(226, 183, 107, .18), transparent 58%),
        rgba(0, 0, 0, .18);
    }

    .audio-asset-card audio {
      width: 100%;
      height: 34px;
      margin-top: 8px;
      filter: sepia(.18) saturate(.85) brightness(.88);
    }

    .sound-map-panel {
      border-color: rgba(226, 183, 107, .18);
    }

    .sound-map-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .sound-map-row {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) auto auto;
      gap: 8px;
      align-items: center;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      background: rgba(255, 255, 255, .025);
    }

    .sound-map-row > span {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .ambient-control-panel .modal-actions {
      justify-content: flex-start;
    }

    .meta-library-list {
      display: grid;
      gap: 10px;
    }

    .meta-entry {
      display: grid;
      grid-template-columns: 48px minmax(130px, 1fr) minmax(90px, .6fr) minmax(140px, .8fr);
      gap: 10px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 10px;
      background: rgba(255, 255, 255, .035);
    }

    .meta-entry .icon-box {
      width: 48px;
      height: 48px;
    }

    .meta-description {
      grid-column: 2 / -1;
    }

    .meta-actions {
      grid-column: 1 / -1;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .data-table {
      display: grid;
      gap: 8px;
      margin-top: 12px;
      max-height: min(62vh, 720px);
      overflow: auto;
      padding-right: 4px;
      scrollbar-width: thin;
    }

    .data-row {
      display: grid;
      grid-template-columns: 42px minmax(180px, .9fr) minmax(220px, 1.3fr) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .018)),
        rgba(0, 0, 0, .2);
      transition: border-color .14s ease, background .14s ease, transform .14s ease;
    }

    .data-row:hover {
      border-color: rgba(226, 183, 107, .28);
      background:
        linear-gradient(180deg, rgba(226, 183, 107, .055), rgba(255, 255, 255, .02)),
        rgba(0, 0, 0, .2);
    }

    .data-row-rich {
      align-items: start;
    }

    .data-status-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 7px;
    }

    .data-status-chip {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 0 7px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 999px;
      background: rgba(255, 255, 255, .045);
      color: var(--muted);
      font-size: .64rem;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .data-status-chip.ok {
      border-color: rgba(52, 211, 153, .28);
      background: rgba(20, 83, 45, .18);
      color: #bbf7d0;
    }

    .data-status-chip.warn {
      border-color: rgba(248, 113, 113, .38);
      background: rgba(127, 29, 29, .22);
      color: #fecaca;
    }

    .data-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      overflow: hidden;
      background: rgba(0, 0, 0, .25);
      font-size: 1.35rem;
    }

    .data-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .data-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(72px, 1fr));
      gap: 7px;
      justify-content: flex-end;
      align-self: stretch;
      align-content: center;
    }

    .data-actions button {
      min-height: 32px;
      padding: 0 10px;
    }

    .dm-log-console {
      display: grid;
      gap: 12px;
      min-height: 0;
    }

    .dm-log-console .compact-category-list {
      margin: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      flex-wrap: nowrap;
      overflow-x: auto;
      justify-content: flex-start;
    }

    .dm-log-list {
      min-height: min(34vh, 360px);
      max-height: min(62vh, 720px);
      overflow: auto;
      padding-right: 4px;
      scrollbar-width: thin;
    }

    .dm-log-row {
      grid-template-columns: 148px 112px minmax(0, 1fr);
      align-items: start;
    }

    .dm-log-row > span:last-child {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    button.danger {
      border-color: rgba(239, 68, 68, .65);
      background: rgba(127, 29, 29, .36);
      color: #fecaca;
    }

    .toggle-pill {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 12px;
      cursor: pointer;
      user-select: none;
      background: rgba(255, 255, 255, .045);
      color: var(--muted);
      font-weight: 900;
    }

    .toggle-pill input {
      width: 16px;
      height: 16px;
      accent-color: var(--gold);
    }

    .toggle-pill.active {
      border-color: rgba(201, 152, 74, .72);
      background: rgba(201, 152, 74, .18);
      color: var(--text);
    }

    .design-preview-grid {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .design-encounter-preview {
      min-height: 190px;
      border: 1px solid var(--line);
      border-radius: 7px;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(6, 8, 10, .92), rgba(6, 8, 10, .66)),
        var(--preview-bg, var(--outpost-asset-dnd-tabletop, url("assets/ui/dnd-tabletop.png"))) center / cover;
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 10px;
      padding: 10px;
    }

    .design-encounter-preview.event {
      grid-template-columns: minmax(0, 1fr) 92px;
    }

    .design-preview-npc,
    .design-preview-event {
      border: 1px solid var(--line);
      border-radius: 7px;
      overflow: hidden;
      display: grid;
      place-items: center;
      min-height: 132px;
      color: var(--muted);
      background: rgba(0, 0, 0, .3);
    }

    .design-preview-npc img,
    .design-preview-event img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .design-preview-body {
      display: grid;
      align-content: start;
      gap: 8px;
      min-width: 0;
    }

    .design-preview-body b,
    .design-preview-body p {
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .design-preview-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 0;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255, 255, 255, .04);
      font-size: .78rem;
      font-weight: 800;
    }

    .design-header-compact .status-pill {
      min-height: 22px;
      padding: 0 7px;
      font-size: .7rem;
    }

    .status-pill.live { color: #8dd66f; border-color: rgba(141, 214, 111, .45); }
    .status-pill.draft { color: var(--gold); border-color: rgba(201, 152, 74, .48); }
    .status-pill.unsaved { color: #ffb36b; border-color: rgba(255, 179, 107, .48); }

    .asset-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }


    .battle-board {
      --cols: 10;
      --rows: 8;
      position: relative;
      width: 100%;
      aspect-ratio: var(--cols) / var(--rows);
      min-height: 0;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      overflow: hidden;
      background:
        linear-gradient(rgba(5, 8, 10, .42), rgba(5, 8, 10, .62)),
        var(--battle-bg, var(--outpost-asset-dnd-tabletop, url("assets/ui/dnd-tabletop.png"))) center / cover;
    }

    .phaser-battle-board {
      min-height: 420px;
      background-position: center;
      background-size: cover;
      touch-action: none;
      cursor: grab;
    }

    .phaser-battle-board:active {
      cursor: grabbing;
    }

    .phaser-battle-board canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
      position: absolute;
      inset: 0;
    }

    .phaser-battle-tooltip {
      position: absolute;
      z-index: 8;
      max-width: 220px;
      padding: 7px 9px;
      border: 1px solid rgba(226, 183, 107, .58);
      border-radius: 7px;
      background: rgba(4, 7, 10, .92);
      color: #fff;
      font-size: .72rem;
      line-height: 1.35;
      pointer-events: none;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    }

    .phaser-battle-tooltip[hidden] {
      display: none;
    }

    @media (max-width: 720px) {
      .phaser-battle-board { min-height: 340px; }
    }

    .battle-grid {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(var(--cols), 1fr);
      grid-template-rows: repeat(var(--rows), 1fr);
    }


    .battle-board.hide-grid .battle-cell {
      border-color: transparent;
    }

    .battle-map-panel {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .battle-board-toolbar {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .battle-draw-tools {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(0, 0, 0, .28);
    }

    .battle-draw-tools button {
      min-height: 32px;
    }

    .battle-color-button {
      width: 28px;
      height: 28px;
      min-height: 28px !important;
      border-radius: 999px;
      padding: 0;
      border-color: rgba(255, 255, 255, .5);
    }

    .battle-color-button.active {
      box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(226, 183, 107, .55);
    }

    .battle-draw-layer {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      pointer-events: none;
      touch-action: none;
    }

    .battle-board.draw-mode .battle-draw-layer {
      pointer-events: auto;
      cursor: crosshair;
    }

    .battle-board.eraser-mode .battle-draw-layer {
      cursor: not-allowed;
    }

    .battle-cell {
      border: 1px solid rgba(255, 255, 255, .12);
      min-width: 0;
      min-height: 0;
      background: rgba(255, 255, 255, .01);
    }

    .battle-cell.blocked {
      background: repeating-linear-gradient(135deg, rgba(255, 95, 95, .26), rgba(255, 95, 95, .26) 7px, rgba(0, 0, 0, .18) 7px, rgba(0, 0, 0, .18) 14px);
    }

    .battle-cell.difficult {
      background: repeating-linear-gradient(135deg, rgba(245, 158, 11, .2), rgba(245, 158, 11, .2) 8px, rgba(120, 53, 15, .13) 8px, rgba(120, 53, 15, .13) 16px);
      box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .4);
    }

    .battle-cell.drop-target {
      background: rgba(111, 183, 200, .22);
      box-shadow: inset 0 0 0 2px rgba(111, 183, 200, .9), inset 0 0 28px rgba(111, 183, 200, .38);
    }

    .battle-cell.aoe-preview,
    .battle-cell.aoe-preview-live {
      background:
        radial-gradient(circle, rgba(226, 183, 107, .34), rgba(226, 183, 107, .12) 48%, rgba(111, 183, 200, .08));
      box-shadow: inset 0 0 0 1px rgba(255, 232, 167, .64), inset 0 0 26px rgba(226, 183, 107, .38);
      animation: aoeCellPulse .9s ease-in-out infinite alternate;
    }

    .battle-cell.aoe-impact {
      animation: aoeImpactFade 1.45s ease-out forwards;
    }

    .battle-cell.aoe-zone {
      border-color: rgba(226, 183, 107, .26);
      background: radial-gradient(circle, rgba(226, 183, 107, .16), rgba(226, 183, 107, .035) 64%);
      box-shadow: inset 0 0 0 1px rgba(226, 183, 107, .18), inset 0 0 22px rgba(226, 183, 107, .08);
      animation: zoneBreath 2.6s ease-in-out infinite;
    }

    .battle-cell.aoe-zone.aoe-heal {
      background: radial-gradient(circle, rgba(34, 197, 94, .2), rgba(34, 197, 94, .045) 66%);
      box-shadow: inset 0 0 0 1px rgba(187, 247, 208, .22), inset 0 0 22px rgba(34, 197, 94, .12);
    }

    .battle-cell.aoe-zone.aoe-buff {
      background: radial-gradient(circle, rgba(226, 183, 107, .22), rgba(56, 189, 248, .05) 66%);
      box-shadow: inset 0 0 0 1px rgba(253, 224, 171, .26), inset 0 0 24px rgba(226, 183, 107, .16);
    }

    .battle-cell.aoe-zone.aoe-debuff {
      background: radial-gradient(circle, rgba(139, 92, 246, .2), rgba(56, 189, 248, .055) 66%);
      box-shadow: inset 0 0 0 1px rgba(186, 230, 253, .24), inset 0 0 22px rgba(139, 92, 246, .14);
    }

    @keyframes zoneBreath {
      0%, 100% { filter: brightness(.86); }
      50% { filter: brightness(1.22); }
    }

    .battle-cell.aoe-damage {
      background: radial-gradient(circle, rgba(239, 68, 68, .52), rgba(127, 29, 29, .28) 56%, rgba(239, 68, 68, .08));
      box-shadow: inset 0 0 0 1px rgba(254, 202, 202, .76), inset 0 0 30px rgba(239, 68, 68, .5), 0 0 18px rgba(239, 68, 68, .28);
    }

    .battle-cell.aoe-heal {
      background: radial-gradient(circle, rgba(34, 197, 94, .5), rgba(20, 184, 166, .22) 56%, rgba(14, 165, 233, .08));
      box-shadow: inset 0 0 0 1px rgba(187, 247, 208, .74), inset 0 0 30px rgba(34, 197, 94, .46), 0 0 18px rgba(56, 189, 248, .22);
    }

    .battle-cell.aoe-buff {
      background: radial-gradient(circle, rgba(226, 183, 107, .52), rgba(56, 189, 248, .2) 56%, rgba(226, 183, 107, .08));
      box-shadow: inset 0 0 0 1px rgba(253, 224, 171, .78), inset 0 0 30px rgba(226, 183, 107, .48), 0 0 18px rgba(56, 189, 248, .2);
    }

    .battle-cell.aoe-debuff {
      background: radial-gradient(circle, rgba(56, 189, 248, .46), rgba(91, 33, 182, .28) 56%, rgba(56, 189, 248, .08));
      box-shadow: inset 0 0 0 1px rgba(186, 230, 253, .72), inset 0 0 30px rgba(56, 189, 248, .44), 0 0 18px rgba(139, 92, 246, .26);
    }

    .battle-token {
      position: absolute;
      z-index: 2;
      width: calc((100% / var(--cols)) * var(--token-size, 1));
      height: calc((100% / var(--rows)) * var(--token-size, 1));
      padding: 5px;
      left: calc((100% / var(--cols)) * var(--x));
      top: calc((100% / var(--rows)) * var(--y));
      transition: left .28s ease, top .28s ease;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    .battle-token.dragging {
      z-index: 5;
      opacity: .72;
      cursor: grabbing;
      filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .7));
    }

    .battle-token.remote-walk {
      animation: remoteTokenWalk .46s cubic-bezier(.2, .8, .2, 1) both;
    }

    @keyframes remoteTokenWalk {
      from { transform: translate(var(--remote-dx, 0), var(--remote-dy, 0)); }
      to { transform: translate(0, 0); }
    }

    .history-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }

    .history-actions button {
      min-height: 28px;
      padding: 5px 10px;
      font-size: 11px;
      line-height: 1;
      white-space: nowrap;
    }

    .battle-drag-ghost {
      position: fixed;
      z-index: 180;
      width: 58px;
      height: 58px;
      pointer-events: none;
      transform: translate(-50%, -50%);
      padding: 0;
    }

    .battle-token-inner {
      position: relative;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      border: 2px solid rgba(226, 183, 107, .86);
      border-radius: 999px;
      background: rgba(4, 6, 8, .78);
      box-shadow: 0 8px 22px rgba(0, 0, 0, .48);
      color: #fff;
      font-weight: 900;
      overflow: hidden;
    }

    .battle-token img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .battle-sprite-frame {
      width: 100%;
      height: 100%;
      display: block;
      background-repeat: no-repeat;
      background-position: 0 50%;
      background-size: calc(var(--sprite-frames, 1) * 100%) 100%;
      image-rendering: pixelated;
      animation: battleSpriteCycle var(--sprite-duration, .7s) steps(var(--sprite-steps, 1)) infinite;
    }

    .battle-token.token-one-shot .battle-sprite-frame {
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }

    .battle-sprite-frame.first-frame {
      animation: none;
      background-position: 0 50%;
    }

    .battle-gif-sprite {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      image-rendering: pixelated;
    }

    @keyframes battleSpriteCycle {
      from { background-position: 0 50%; }
      to { background-position: 100% 50%; }
    }

    .battle-token small {
      position: absolute;
      left: 4px;
      right: 4px;
      bottom: -12px;
      color: #fff;
      text-align: center;
      text-shadow: 0 2px 6px #000;
      font-size: .65rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .battle-token.active-turn .battle-token-inner {
      border-color: #fff3b0;
      box-shadow: 0 0 0 3px rgba(226, 183, 107, .24), 0 0 26px rgba(226, 183, 107, .72);
    }

    .battle-token.selected-target .battle-token-inner {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, .3), 0 0 26px rgba(239, 68, 68, .72);
    }

    .battle-token.aoe-target-preview .battle-token-inner,
    .battle-token.aoe-target-preview-live .battle-token-inner {
      border-color: rgba(226, 183, 107, .98);
      box-shadow: 0 0 0 4px rgba(226, 183, 107, .22), 0 0 30px rgba(226, 183, 107, .68), 0 8px 22px rgba(0, 0, 0, .48);
      animation: aoeTargetPulse .72s ease-in-out infinite alternate;
    }

    .battle-token.token-animated-16bit.aoe-target-preview::after,
    .battle-token.token-animated-16bit.aoe-target-preview-live::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 2px solid rgba(226, 183, 107, .95);
      border-radius: 12px;
      box-shadow: 0 0 0 3px rgba(226, 183, 107, .22), 0 0 22px rgba(226, 183, 107, .82);
      pointer-events: none;
      animation: aoeTargetPulse .72s ease-in-out infinite alternate;
    }

    .battle-token.token-animated-16bit.active-turn .battle-token-inner,
    .battle-token.token-animated-16bit.selected-target .battle-token-inner {
      border: 0;
      box-shadow: none;
    }

    .battle-token.token-animated-16bit.selected-target::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 2px solid rgba(239, 68, 68, .95);
      border-radius: 12px;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, .22), 0 0 22px rgba(239, 68, 68, .82);
      pointer-events: none;
      animation: targetPulse .9s ease-in-out infinite alternate;
    }

    .battle-token.token-animated-16bit.selected-target::before {
      border-color: #ef4444;
    }

    @keyframes targetPulse {
      from { opacity: .72; transform: scale(.96); }
      to { opacity: 1; transform: scale(1.04); }
    }

    @keyframes aoeCellPulse {
      from { filter: saturate(1); transform: scale(.98); }
      to { filter: saturate(1.35); transform: scale(1.015); }
    }

    @keyframes aoeImpactFade {
      0% { opacity: 0; transform: scale(.9); filter: brightness(1.3) saturate(1.3); }
      18% { opacity: 1; transform: scale(1.02); filter: brightness(1.18) saturate(1.25); }
      72% { opacity: .86; transform: scale(1); }
      100% { opacity: 0; transform: scale(.96); filter: brightness(.9) saturate(.9); }
    }

    @keyframes aoeTargetPulse {
      from { opacity: .72; transform: scale(.98); filter: brightness(1); }
      to { opacity: 1; transform: scale(1.06); filter: brightness(1.22); }
    }

    .battle-token.action-effect .battle-token-inner {
      animation: actionEffectPulse .62s ease-out 2;
    }

    .battle-token.effect-fire .battle-token-inner {
      box-shadow: 0 0 0 3px rgba(249, 115, 22, .26), 0 0 28px rgba(239, 68, 68, .82);
    }

    .battle-token.effect-ice .battle-token-inner {
      box-shadow: 0 0 0 3px rgba(56, 189, 248, .3), 0 0 28px rgba(125, 211, 252, .82);
    }

    .battle-token.effect-heal .battle-token-inner {
      box-shadow: 0 0 0 3px rgba(34, 197, 94, .28), 0 0 28px rgba(74, 222, 128, .78);
    }

    .battle-token.effect-bullet .battle-token-inner,
    .battle-token.effect-hit .battle-token-inner {
      box-shadow: 0 0 0 3px rgba(226, 183, 107, .22), 0 0 28px rgba(226, 183, 107, .72);
    }

    .battle-token.effect-slash .battle-token-inner {
      box-shadow: 0 0 0 3px rgba(248, 250, 252, .2), 0 0 24px rgba(226, 183, 107, .7);
    }

    .battle-token.effect-lightning .battle-token-inner {
      box-shadow: 0 0 0 3px rgba(250, 204, 21, .28), 0 0 30px rgba(56, 189, 248, .72);
    }

    .battle-token.effect-poison .battle-token-inner {
      box-shadow: 0 0 0 3px rgba(132, 204, 22, .24), 0 0 28px rgba(34, 197, 94, .72);
    }

    .battle-impact {
      position: absolute;
      z-index: 4;
      inset: 12%;
      border-radius: 999px;
      pointer-events: none;
      animation: battleImpact .72s ease-out forwards;
      background: radial-gradient(circle, rgba(226, 183, 107, .85), rgba(226, 183, 107, 0) 68%);
      mix-blend-mode: screen;
    }

    .battle-impact img,
    .battle-impact .battle-sprite-frame,
    .battle-impact .battle-gif-sprite {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
    }

    .battle-impact.effect-fire {
      background: radial-gradient(circle, rgba(251, 146, 60, .95), rgba(239, 68, 68, .35) 38%, rgba(239, 68, 68, 0) 72%);
    }

    .battle-impact.effect-ice {
      background: radial-gradient(circle, rgba(186, 230, 253, .95), rgba(56, 189, 248, .38) 42%, rgba(56, 189, 248, 0) 72%);
    }

    .battle-impact.effect-heal {
      background: radial-gradient(circle, rgba(187, 247, 208, .95), rgba(34, 197, 94, .35) 42%, rgba(34, 197, 94, 0) 72%);
    }

    .battle-impact.effect-lightning {
      background: radial-gradient(circle, rgba(254, 240, 138, .95), rgba(56, 189, 248, .42) 42%, rgba(56, 189, 248, 0) 72%);
    }

    .battle-impact.effect-poison {
      background: radial-gradient(circle, rgba(217, 249, 157, .9), rgba(34, 197, 94, .35) 42%, rgba(34, 197, 94, 0) 72%);
    }

    .battle-impact.effect-miss {
      background: radial-gradient(circle, rgba(229, 231, 235, .42), rgba(229, 231, 235, 0) 68%);
    }

    .battle-impact.effect-bullet {
      inset: 34% 8%;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(226, 183, 107, 0), rgba(226, 183, 107, .95), rgba(255, 255, 255, 0));
      animation-name: battleImpactLine;
    }

    .battle-impact.effect-slash {
      inset: 18% 5%;
      border-radius: 4px;
      --impact-rotate: -28deg;
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(226,183,107,0));
      animation-name: battleImpactLine;
    }

    .battle-impact.has-visual-asset {
      inset: -4%;
      border-radius: 0;
      background: transparent;
      mix-blend-mode: normal;
    }

    .battle-event-impact {
      position: absolute;
      z-index: 6;
      left: calc((100% / var(--cols)) * var(--x));
      top: calc((100% / var(--rows)) * var(--y));
      width: calc((100% / var(--cols)) * var(--token-size));
      height: calc((100% / var(--rows)) * var(--token-size));
      pointer-events: none;
    }

    .battle-event-impact .battle-impact {
      inset: 10%;
    }

    .battle-event-impact .damage-floater {
      left: 50%;
      top: 18%;
      transform: translate(-50%, 0) scale(var(--float-scale, 1));
    }

    .battle-projectile {
      position: absolute;
      z-index: 3;
      left: var(--from-left);
      top: var(--from-top);
      width: min(34px, calc(100% / var(--cols)));
      height: min(34px, calc(100% / var(--rows)));
      margin-left: -17px;
      margin-top: -17px;
      border-radius: 999px;
      pointer-events: none;
      background: radial-gradient(circle, rgba(226, 183, 107, .95), rgba(226, 183, 107, 0) 68%);
      box-shadow: 0 0 18px rgba(226, 183, 107, .72);
      animation: projectileTravel var(--projectile-ms, .56s) ease-in forwards;
      mix-blend-mode: screen;
    }

    .battle-projectile img,
    .battle-projectile .battle-sprite-frame,
    .battle-projectile .battle-gif-sprite {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 0 8px rgba(255,255,255,.45));
    }

    .battle-projectile.effect-fire {
      background: radial-gradient(circle, rgba(251, 146, 60, .95), rgba(239, 68, 68, 0) 70%);
      box-shadow: 0 0 22px rgba(249, 115, 22, .85);
    }

    .battle-projectile.effect-ice {
      background: radial-gradient(circle, rgba(186, 230, 253, .95), rgba(56, 189, 248, 0) 70%);
      box-shadow: 0 0 22px rgba(56, 189, 248, .8);
    }

    .battle-projectile.effect-heal {
      background: radial-gradient(circle, rgba(187, 247, 208, .95), rgba(34, 197, 94, 0) 70%);
      box-shadow: 0 0 22px rgba(34, 197, 94, .78);
    }

    .battle-projectile.effect-bullet,
    .battle-projectile.effect-slash {
      width: min(46px, calc(140% / var(--cols)));
      height: 8px;
      margin-top: -4px;
      background: linear-gradient(90deg, rgba(226,183,107,0), rgba(255,255,255,.95), rgba(226,183,107,0));
      border-radius: 999px;
      rotate: var(--projectile-angle);
    }

    .battle-projectile.has-visual-asset,
    .battle-projectile.has-visual-asset.effect-bullet,
    .battle-projectile.has-visual-asset.effect-slash {
      width: min(42px, calc(120% / var(--cols)));
      height: min(42px, calc(120% / var(--rows)));
      margin-left: -21px;
      margin-top: -21px;
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      rotate: var(--projectile-angle);
      mix-blend-mode: normal;
    }

    @keyframes actionEffectPulse {
      0% { filter: brightness(1); }
      45% { filter: brightness(1.55) saturate(1.35); }
      100% { filter: brightness(1); }
    }

    @keyframes battleImpact {
      from { opacity: 0; transform: scale(.45); }
      22% { opacity: 1; }
      to { opacity: 0; transform: scale(1.45); }
    }

    @keyframes battleImpactLine {
      from { opacity: 0; transform: scaleX(.35) rotate(var(--impact-rotate, 0deg)); }
      25% { opacity: 1; }
      to { opacity: 0; transform: scaleX(1.35) rotate(var(--impact-rotate, 0deg)); }
    }

    @keyframes projectileTravel {
      from { opacity: 0; left: var(--from-left); top: var(--from-top); transform: scale(.7); }
      14% { opacity: 1; }
      to { opacity: 0; left: var(--to-left); top: var(--to-top); transform: scale(1.05); }
    }

    .damage-floater {
      position: absolute;
      z-index: 6;
      left: 50%;
      top: -24px;
      transform: translateX(-50%);
      color: #fecaca;
      font-family: Inter, "Segoe UI", sans-serif;
      font-size: clamp(1.7rem, 2.5vw, 2.25rem);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      line-height: .92;
      white-space: nowrap;
      text-shadow: 0 4px 9px rgba(0, 0, 0, .92), 0 10px 24px rgba(0, 0, 0, .58);
      pointer-events: none;
      animation: floatDamage 1.08s cubic-bezier(.18, .82, .24, 1) forwards;
    }

    .damage-floater.miss {
      color: #e5e7eb;
      font-size: clamp(1.25rem, 2vw, 1.65rem);
      letter-spacing: .12em;
      transform: translateX(-50%) rotate(-8deg);
    }

    .damage-floater.heal {
      color: #86efac;
    }

    .damage-floater.heavy {
      color: #fb923c;
      font-size: clamp(2rem, 3vw, 2.65rem);
      text-shadow: 0 4px 10px rgba(0, 0, 0, .94), 0 0 20px rgba(251, 146, 60, .52);
    }

    .damage-floater.critical {
      color: #fff7d6;
      font-size: clamp(2.35rem, 3.8vw, 3.25rem);
      letter-spacing: -.02em;
      text-shadow: 0 5px 12px rgba(0, 0, 0, .96), 0 0 18px rgba(250, 204, 21, .58), 0 0 34px rgba(239, 68, 68, .34);
      animation: floatCritical 1.32s cubic-bezier(.18, .88, .22, 1) forwards;
    }

    @keyframes floatDamage {
      0% { opacity: 0; transform: translate(-50%, 10px) scale(calc(.58 * var(--float-scale, 1))); }
      12% { opacity: 1; transform: translate(-50%, -4px) scale(calc(1.1 * var(--float-scale, 1))); }
      24%, 58% { opacity: 1; transform: translate(-50%, -8px) scale(var(--float-scale, 1)); }
      100% { opacity: 0; transform: translate(-50%, -58px) scale(calc(.92 * var(--float-scale, 1))); }
    }

    @keyframes floatCritical {
      0% { opacity: 0; transform: translate(-50%, 14px) scale(calc(.44 * var(--float-scale, 1))); }
      10% { opacity: 1; transform: translate(-50%, -7px) scale(calc(1.18 * var(--float-scale, 1))); }
      22%, 60% { opacity: 1; transform: translate(-50%, -11px) scale(var(--float-scale, 1)); }
      100% { opacity: 0; transform: translate(-50%, -78px) scale(calc(.94 * var(--float-scale, 1))); }
    }

    .battle-shell.battle-camera-impact .battle-board {
      animation: battleCameraImpact .24s ease-out;
    }

    @keyframes battleCameraImpact {
      0% { transform: translate3d(0, 0, 0); }
      24% { transform: translate3d(var(--camera-impact, 2px), calc(var(--camera-impact, 2px) * -.5), 0); }
      52% { transform: translate3d(calc(var(--camera-impact, 2px) * -.6), calc(var(--camera-impact, 2px) * .4), 0); }
      100% { transform: translate3d(0, 0, 0); }
    }

    /* Rest compact board polish: keep the camp playable within its workspace. */
    .rest-content-full {
      padding: 12px 14px;
    }

    .rest-encounter {
      gap: 10px;
    }

    .rest-hero {
      grid-template-columns: minmax(0, 1fr) minmax(132px, auto) minmax(150px, auto);
      gap: 10px;
      padding: 12px 14px;
      border-radius: 12px;
      align-items: center;
    }

    .rest-hero-copy {
      gap: 4px;
    }

    .rest-eyebrow {
      gap: 6px;
      font-size: .68rem;
    }

    .rest-eyebrow span {
      padding: 2px 7px;
    }

    .rest-hero .panel-title {
      font-size: .95rem;
      line-height: 1.15;
    }

    .rest-hero p {
      margin: 0;
      line-height: 1.3;
      max-width: 760px;
    }

    .rest-energy-card {
      min-width: 0;
      padding: 9px 10px;
      border-radius: 10px;
    }

    .rest-energy-card b {
      margin-top: 2px;
      font-size: 1.22rem;
    }

    .rest-energy-dots {
      gap: 4px;
      margin-top: 6px;
    }

    .rest-energy-dots i {
      width: 9px;
      height: 9px;
    }

    .rest-command-strip {
      gap: 7px;
      padding: 7px;
      border-radius: 10px;
    }

    .rest-command-strip span {
      padding: 7px 9px;
      border-radius: 8px;
    }

    .rest-command-strip small {
      font-size: .66rem;
    }

    .rest-command-strip b {
      font-size: .92rem;
    }

    .rest-workspace {
      grid-template-columns: minmax(0, 1fr) 286px;
      gap: 10px;
    }

    .rest-activity-board,
    .rest-side-panel {
      border-radius: 12px;
    }

    .rest-activity-board.panel,
    .rest-side-panel.panel {
      padding: 10px;
    }

    .rest-activity-board > .panel-title,
    .rest-side-panel > .panel-title {
      margin-bottom: 8px;
    }

    .rest-category-stack {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .rest-category-section {
      gap: 8px;
      padding: 9px;
      border-radius: 11px;
    }

    .rest-category-title {
      padding-bottom: 4px;
    }

    .rest-category-title b {
      font-size: .72rem;
    }

    .rest-category-title small,
    .rest-activity-card p,
    .rest-activity-card small {
      font-size: .72rem;
    }

    .rest-activity-grid {
      grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
      gap: 7px;
    }

    .rest-activity-card {
      min-height: 116px;
      gap: 7px;
      padding: 10px 10px 10px 12px;
      border-radius: 10px;
    }

    .rest-activity-top {
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 8px;
    }

    .rest-activity-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      font-size: 1rem;
    }

    .rest-activity-card p {
      min-height: 0;
      line-height: 1.25;
    }

    .rest-activity-mode {
      padding: 5px 7px;
    }

    .rest-activity-mode span {
      font-size: .66rem;
    }

    .rest-activity-meter {
      height: 5px;
    }

    .rest-activity-card button {
      min-height: 32px;
      padding: 0 8px;
      font-size: .74rem;
    }

    .rest-side-panel {
      top: 8px;
      gap: 8px;
      max-height: calc(var(--drawer-inner-height) - 20px);
      overflow: auto;
    }

    .rest-player-summary {
      gap: 6px;
    }

    .rest-player-summary > span {
      padding: 7px;
    }

    .rest-result-list {
      gap: 6px;
      max-height: 220px;
      overflow: auto;
      padding-right: 2px;
    }

    .rest-result-row {
      padding: 7px;
      border-radius: 8px;
    }

    @media (max-width: 980px) {
      .rest-hero,
      .rest-workspace,
      .rest-command-strip,
      .rest-category-stack {
        grid-template-columns: 1fr;
      }
      .rest-side-panel {
        position: static;
        max-height: none;
      }
    }

    /* Rest top bar final EOF override. */
    #encounter .rest-hero {
      height: 96px !important;
      min-height: 96px !important;
      max-height: 96px !important;
      grid-template-columns: minmax(0, 1fr) 108px 142px !important;
      gap: 8px !important;
      align-items: center !important;
      padding: 9px 12px !important;
      overflow: hidden !important;
      border-radius: 11px !important;
    }
    #encounter .rest-hero-copy {
      gap: 4px !important;
      align-content: center !important;
    }
    #encounter .rest-eyebrow {
      gap: 5px !important;
      font-size: .62rem !important;
      line-height: 1 !important;
    }
    #encounter .rest-eyebrow span {
      padding: 2px 6px !important;
      line-height: 1 !important;
    }
    #encounter .rest-hero .panel-title {
      margin: 0 !important;
      font-size: .92rem !important;
      line-height: 1.05 !important;
    }
    #encounter .rest-hero .dm-badge {
      font-size: .58rem !important;
      padding: 2px 6px !important;
      line-height: 1 !important;
    }
    #encounter .rest-hero p {
      margin: 0 !important;
      max-width: 680px !important;
      font-size: .68rem !important;
      line-height: 1.18 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    #encounter .rest-status-rail {
      gap: 5px !important;
      margin-top: 1px !important;
    }
    #encounter .rest-status-rail span {
      min-width: 70px !important;
      padding: 3px 7px !important;
      gap: 7px !important;
    }
    #encounter .rest-status-rail small {
      font-size: .56rem !important;
    }
    #encounter .rest-status-rail b {
      font-size: .7rem !important;
    }
    #encounter .rest-energy-card {
      min-height: 58px !important;
      height: 58px !important;
      padding: 6px 7px !important;
      align-content: center !important;
      border-radius: 9px !important;
    }
    #encounter .rest-energy-card small {
      font-size: .62rem !important;
      line-height: 1.1 !important;
    }
    #encounter .rest-energy-card b {
      margin-top: 1px !important;
      font-size: .96rem !important;
      line-height: 1.05 !important;
    }
    #encounter .rest-energy-dots {
      gap: 3px !important;
      margin-top: 3px !important;
    }
    #encounter .rest-energy-dots i {
      width: 7px !important;
      height: 7px !important;
    }
    #encounter .rest-command-strip {
      display: none !important;
    }

    /* Rest redesign: horizontal Your Rest rail + image-led activity cards. */
    #encounter .rest-encounter {
      grid-template-rows: auto auto minmax(0, 1fr) !important;
      gap: 8px !important;
    }
    #encounter .rest-top-rest-panel {
      height: 82px !important;
      min-height: 82px !important;
      max-height: 82px !important;
      display: grid !important;
      grid-template-columns: 112px 300px minmax(0, 1fr) 116px !important;
      gap: 10px !important;
      align-items: center !important;
      padding: 8px 10px !important;
      overflow: hidden !important;
      border-color: rgba(214, 173, 91, .24) !important;
      background:
        linear-gradient(90deg, rgba(214, 173, 91, .07), rgba(255, 255, 255, .025)),
        rgba(5, 9, 11, .78) !important;
    }
    #encounter .rest-top-rest-panel > .panel-title {
      margin: 0 !important;
      font-size: .86rem !important;
      line-height: 1 !important;
    }
    #encounter .rest-top-rest-panel .rest-player-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 6px !important;
    }
    #encounter .rest-top-rest-panel .rest-player-summary > span {
      min-height: 48px !important;
      padding: 7px !important;
    }
    #encounter .rest-top-rest-panel .rest-result-list {
      height: 58px !important;
      max-height: 58px !important;
      display: flex !important;
      gap: 7px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      padding: 0 2px 3px 0 !important;
    }
    #encounter .rest-top-rest-panel .rest-result-row,
    #encounter .rest-top-rest-panel .library-empty {
      min-width: 210px !important;
      height: 58px !important;
      padding: 7px !important;
    }
    #encounter .rest-top-rest-panel .rest-result-row small {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    #encounter .rest-top-rest-panel .modal-actions {
      margin: 0 !important;
      align-self: stretch !important;
      display: grid !important;
    }
    #encounter .rest-top-rest-panel .modal-actions button {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
    }
    #encounter .rest-workspace {
      grid-template-columns: 1fr !important;
      min-height: 0 !important;
    }
    #encounter .rest-activity-board.panel {
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    #encounter .rest-category-stack {
      height: calc(100% - 31px) !important;
    }
    #encounter .rest-activity-card {
      grid-template-rows: auto auto minmax(0, 1fr) auto !important;
      align-content: start !important;
      overflow: hidden !important;
    }
    #encounter .rest-activity-card button,
    #encounter .rest-card-lock {
      display: none !important;
    }
    #encounter .rest-activity-card p {
      margin: 0 !important;
      min-height: 0 !important;
      -webkit-line-clamp: 2 !important;
    }
    #encounter .rest-activity-note {
      color: rgba(226, 183, 107, .72) !important;
      font-size: .62rem !important;
      line-height: 1.1 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    #encounter .rest-activity-art {
      min-height: 76px;
      height: 100%;
      border: 1px solid rgba(255, 255, 255, .065);
      border-radius: 9px;
      background:
        radial-gradient(circle at 50% 28%, rgba(226, 183, 107, .18), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .014));
      opacity: .92;
      position: relative;
      overflow: hidden;
    }
    #encounter .rest-activity-art::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, rgba(255, 255, 255, .06), transparent 42%),
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, .08), transparent 20%);
      mix-blend-mode: screen;
      opacity: .78;
    }
    #encounter .rest-activity-art::after {
      position: absolute;
      right: 10px;
      bottom: 8px;
      color: rgba(255, 244, 215, .32);
      font-size: 2.15rem;
      font-weight: 950;
      line-height: 1;
      text-shadow: 0 0 18px rgba(226, 183, 107, .18);
    }
    #encounter .rest-activity-art-rest_recovery {
      background:
        radial-gradient(circle at 30% 35%, rgba(120, 182, 108, .24), transparent 28%),
        linear-gradient(135deg, rgba(38, 65, 42, .35), rgba(4, 8, 10, .22));
    }
    #encounter .rest-activity-art-rest_recovery::after { content: "\2726"; }
    #encounter .rest-activity-art-fishing {
      background:
        repeating-linear-gradient(165deg, rgba(111, 183, 200, .22) 0 8px, rgba(111, 183, 200, .05) 8px 18px),
        radial-gradient(circle at 24% 26%, rgba(186, 230, 253, .18), transparent 30%),
        rgba(4, 18, 22, .46);
    }
    #encounter .rest-activity-art-fishing::after { content: "\2248"; }
    #encounter .rest-activity-art-foraging {
      background:
        radial-gradient(circle at 22% 68%, rgba(120, 182, 108, .32), transparent 22%),
        radial-gradient(circle at 64% 32%, rgba(214, 173, 91, .18), transparent 24%),
        linear-gradient(135deg, rgba(33, 68, 47, .42), rgba(6, 10, 9, .26));
    }
    #encounter .rest-activity-art-foraging::after { content: "\273B"; }
    #encounter .rest-activity-art-hunting {
      background:
        radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(214, 173, 91, .32) 15px 17px, transparent 18px 34px, rgba(200, 87, 77, .22) 35px 37px, transparent 38px),
        linear-gradient(135deg, rgba(70, 40, 35, .42), rgba(6, 8, 9, .24));
    }
    #encounter .rest-activity-art-hunting::after { content: "\2316"; }
    #encounter .rest-activity-art-crafting {
      background:
        linear-gradient(135deg, rgba(214, 173, 91, .22), transparent 34%),
        repeating-linear-gradient(90deg, rgba(226, 183, 107, .12) 0 3px, transparent 3px 16px),
        rgba(26, 20, 12, .42);
    }
    #encounter .rest-activity-art-crafting::after { content: "\2692"; }
    #encounter .rest-activity-art-alchemist {
      background:
        radial-gradient(circle at 35% 36%, rgba(120, 182, 108, .28), transparent 24%),
        radial-gradient(circle at 70% 62%, rgba(184, 137, 255, .28), transparent 22%),
        linear-gradient(135deg, rgba(19, 36, 36, .48), rgba(5, 8, 10, .24));
    }
    #encounter .rest-activity-art-alchemist::after { content: "\2697"; }
    #encounter .rest-activity-art-cooking {
      background:
        radial-gradient(circle at 48% 70%, rgba(214, 173, 91, .32), transparent 28%),
        linear-gradient(180deg, rgba(200, 87, 77, .18), rgba(8, 11, 15, .24));
    }
    #encounter .rest-activity-art-cooking::after { content: "\25D2"; }
    #encounter .rest-activity-art-creative_drawing {
      background:
        linear-gradient(135deg, rgba(184, 137, 255, .24), transparent 38%),
        repeating-linear-gradient(155deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 18px),
        rgba(20, 14, 33, .4);
    }
    #encounter .rest-activity-art-creative_drawing::after { content: "\270E"; }
    #encounter .rest-activity-art-creative_writing {
      background:
        repeating-linear-gradient(0deg, rgba(226, 183, 107, .12) 0 1px, transparent 1px 12px),
        linear-gradient(135deg, rgba(214, 173, 91, .18), rgba(8, 11, 15, .24));
    }
    #encounter .rest-activity-art-creative_writing::after { content: "\25A3"; }

    @media (max-width: 980px) {
      #encounter .rest-top-rest-panel {
        height: auto !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
      }
      #encounter .rest-category-stack {
        height: auto !important;
      }
    }

    /* Rest layout polish final: tidy board, aligned category counters. */
    #encounter .rest-frame {
      overflow: hidden !important;
    }
    #encounter .rest-content-full {
      padding: 8px 10px 92px !important;
      overflow: hidden !important;
    }
    #encounter .rest-encounter {
      height: 100% !important;
      display: grid !important;
      grid-template-rows: auto minmax(0, 1fr) !important;
      gap: 8px !important;
    }
    #encounter .rest-hero {
      height: 78px !important;
      min-height: 78px !important;
      max-height: 78px !important;
      grid-template-columns: minmax(0, 1fr) 92px 130px !important;
      padding: 8px 10px !important;
      border-color: rgba(214, 173, 91, .26) !important;
      background:
        linear-gradient(90deg, rgba(8, 11, 13, .88), rgba(7, 12, 14, .62)),
        radial-gradient(circle at 35% 35%, rgba(214, 173, 91, .08), transparent 34%) !important;
    }
    #encounter .rest-hero .panel-title {
      font-size: .86rem !important;
    }
    #encounter .rest-hero p {
      display: none !important;
    }
    #encounter .rest-status-rail span {
      min-width: 64px !important;
      padding: 3px 7px !important;
    }
    #encounter .rest-energy-card {
      height: 52px !important;
      min-height: 52px !important;
      padding: 5px 6px !important;
    }
    #encounter .rest-energy-card b {
      font-size: .9rem !important;
    }
    #encounter .rest-energy-card small {
      font-size: .58rem !important;
    }
    #encounter .rest-workspace {
      min-height: 0 !important;
      grid-template-columns: minmax(0, 1fr) 282px !important;
      gap: 8px !important;
      align-items: stretch !important;
    }
    #encounter .rest-activity-board.panel,
    #encounter .rest-side-panel.panel {
      min-height: 0 !important;
      padding: 8px !important;
      border-color: rgba(255, 255, 255, .1) !important;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018)),
        rgba(4, 8, 10, .68) !important;
    }
    #encounter .rest-activity-board {
      overflow: hidden !important;
    }
    #encounter .rest-activity-board > .panel-title {
      height: 24px !important;
      margin: 0 0 7px !important;
      font-size: .82rem !important;
      line-height: 1 !important;
    }
    #encounter .rest-activity-board > .panel-title .subtle {
      font-size: .64rem !important;
      letter-spacing: .02em !important;
    }
    #encounter .rest-category-stack {
      height: calc(100% - 31px) !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
    }
    #encounter .rest-category-section {
      position: relative !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-rows: 24px minmax(0, 1fr) !important;
      gap: 6px !important;
      padding: 8px !important;
      border-radius: 10px !important;
      overflow: hidden !important;
    }
    #encounter .rest-category-title {
      min-height: 24px !important;
      display: flex !important;
      align-items: center !important;
      padding: 0 34px 4px 0 !important;
      border-bottom: 1px solid rgba(255, 255, 255, .065) !important;
    }
    #encounter .rest-category-title span {
      min-width: 0 !important;
    }
    #encounter .rest-category-title b {
      display: block !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      font-size: .7rem !important;
      line-height: 1 !important;
    }
    #encounter .rest-category-title small {
      display: none !important;
    }
    #encounter .rest-category-title i {
      position: absolute !important;
      top: 8px !important;
      right: 8px !important;
      width: 24px !important;
      min-width: 24px !important;
      height: 24px !important;
      display: grid !important;
      place-items: center !important;
      margin: 0 !important;
      border-radius: 999px !important;
      font-size: .72rem !important;
      line-height: 1 !important;
    }
    #encounter .rest-activity-grid {
      min-height: 0 !important;
      height: 100% !important;
      display: grid !important;
      gap: 6px !important;
      align-content: stretch !important;
    }
    #encounter .rest-category-gathering .rest-activity-grid,
    #encounter .rest-category-production .rest-activity-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    #encounter .rest-category-rest .rest-activity-grid {
      grid-template-columns: 1fr !important;
    }
    #encounter .rest-category-creative .rest-activity-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #encounter .rest-activity-card {
      min-height: 0 !important;
      height: 100% !important;
      padding: 8px !important;
      gap: 5px !important;
      align-content: space-between !important;
    }
    #encounter .rest-activity-top {
      grid-template-columns: 30px minmax(0, 1fr) !important;
      gap: 7px !important;
    }
    #encounter .rest-activity-icon {
      width: 30px !important;
      height: 30px !important;
      border-radius: 8px !important;
      font-size: .82rem !important;
    }
    #encounter .rest-activity-card b {
      font-size: .76rem !important;
      line-height: 1.08 !important;
    }
    #encounter .rest-activity-card small {
      font-size: .62rem !important;
      line-height: 1.15 !important;
    }
    #encounter .rest-activity-card p {
      font-size: .66rem !important;
      line-height: 1.2 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }
    #encounter .rest-activity-card button,
    #encounter .rest-card-lock {
      min-height: 27px !important;
      font-size: .68rem !important;
    }
    #encounter .rest-side-panel {
      max-height: none !important;
      height: 100% !important;
      overflow: hidden !important;
    }
    #encounter .rest-result-list {
      max-height: none !important;
      min-height: 0 !important;
      overflow: auto !important;
    }
    @media (max-width: 980px) {
      #encounter .rest-hero,
      #encounter .rest-workspace,
      #encounter .rest-category-stack,
      #encounter .rest-category-gathering .rest-activity-grid,
      #encounter .rest-category-production .rest-activity-grid,
      #encounter .rest-category-creative .rest-activity-grid {
        grid-template-columns: 1fr !important;
      }
      #encounter .rest-hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
      }
      #encounter .rest-category-stack {
        height: auto !important;
        grid-template-rows: none !important;
      }
      #encounter .rest-side-panel {
        height: auto !important;
      }
    }
    #encounter .rest-content-full {
      padding: 8px 10px 10px !important;
    }
    #encounter .rest-encounter {
      gap: 8px !important;
    }
    #encounter .rest-workspace {
      grid-template-columns: minmax(0, 1fr) 276px !important;
      gap: 8px !important;
    }
    #encounter .rest-side-panel {
      max-height: calc(var(--drawer-inner-height) - 122px) !important;
    }

    /* Rest top bar ultra-compact override. Must remain at EOF. */
    #encounter.drawer-view > .rest-frame {
      min-height: var(--drawer-inner-height);
    }

    #encounter .rest-content-full {
      padding: 8px 10px 10px;
    }

    #encounter .rest-encounter {
      gap: 8px;
    }

    #encounter .rest-hero {
      height: 96px;
      min-height: 96px;
      max-height: 96px;
      grid-template-columns: minmax(0, 1fr) 108px 142px;
      gap: 8px;
      align-items: center;
      padding: 9px 12px;
      overflow: hidden;
      border-radius: 11px;
    }

    #encounter .rest-hero-copy {
      gap: 4px;
      align-content: center;
      min-width: 0;
    }

    #encounter .rest-eyebrow {
      gap: 5px;
      font-size: .62rem;
      line-height: 1;
    }

    #encounter .rest-eyebrow span {
      padding: 2px 6px;
      line-height: 1;
    }

    #encounter .rest-hero .panel-title {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 0;
      font-size: .92rem;
      line-height: 1.05;
    }

    #encounter .rest-hero .dm-badge {
      font-size: .58rem;
      padding: 2px 6px;
      line-height: 1;
    }

    #encounter .rest-hero p {
      max-width: 680px;
      margin: 0;
      font-size: .68rem;
      line-height: 1.18;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #encounter .rest-status-rail {
      gap: 5px;
      margin-top: 1px;
    }

    #encounter .rest-status-rail span {
      min-width: 70px;
      padding: 3px 7px;
      gap: 7px;
    }

    #encounter .rest-status-rail small {
      font-size: .56rem;
    }

    #encounter .rest-status-rail b {
      font-size: .7rem;
    }

    #encounter .rest-energy-card {
      min-height: 58px;
      height: 58px;
      padding: 6px 7px;
      align-content: center;
    }

    #encounter .rest-energy-card small {
      font-size: .62rem;
      line-height: 1.1;
    }

    #encounter .rest-energy-card b {
      margin-top: 1px;
      font-size: .96rem;
      line-height: 1.05;
    }

    #encounter .rest-energy-dots {
      gap: 3px;
      margin-top: 3px;
    }

    #encounter .rest-energy-dots i {
      width: 7px;
      height: 7px;
    }

    #encounter .rest-command-strip {
      display: none !important;
    }

    #encounter .rest-workspace {
      grid-template-columns: minmax(0, 1fr) 276px;
      gap: 8px;
    }

    #encounter .rest-activity-board.panel,
    #encounter .rest-side-panel.panel {
      padding: 8px;
    }

    #encounter .rest-side-panel {
      max-height: calc(var(--drawer-inner-height) - 122px);
    }

    @media (max-width: 980px) {
      #encounter .rest-hero,
      #encounter .rest-workspace {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
      }
      #encounter .rest-hero p {
        white-space: normal;
      }
    }

    /* Camp Rest v2 final override: keep this last so the board stays compact. */
    .rest-content-full {
      min-height: calc(var(--drawer-inner-height) - 4px);
      padding: 10px 12px;
      background:
        radial-gradient(circle at 8% 10%, rgba(214, 173, 91, .14), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(111, 183, 200, .1), transparent 26%),
        linear-gradient(135deg, rgba(3, 6, 8, .95), rgba(8, 14, 15, .72));
    }
    .rest-encounter { gap: 8px; }
    .rest-hero {
      min-height: 118px;
      grid-template-columns: minmax(0, 1fr) 132px 164px;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 12px;
      align-items: center;
      background:
        linear-gradient(90deg, rgba(6, 9, 11, .88), rgba(8, 12, 13, .62)),
        radial-gradient(circle at 48% 38%, rgba(214, 173, 91, .08), transparent 34%),
        rgba(0, 0, 0, .18);
    }
    .rest-hero-copy {
      align-content: center;
      gap: 6px;
    }
    .rest-hero .panel-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 1.02rem;
      line-height: 1.15;
      margin: 0;
    }
    .rest-hero p {
      max-width: 680px;
      margin: 0;
      font-size: .76rem;
      line-height: 1.3;
      color: #b7c0bc;
    }
    .rest-status-rail {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 2px;
    }
    .rest-status-rail span {
      min-width: 84px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 5px 8px;
      border: 1px solid rgba(255, 255, 255, .075);
      border-radius: 999px;
      background: rgba(255, 255, 255, .035);
    }
    .rest-status-rail small {
      color: var(--muted);
      font-size: .62rem;
      font-weight: 850;
      text-transform: uppercase;
    }
    .rest-status-rail b {
      color: var(--gold);
      font-size: .78rem;
    }
    .rest-command-strip { display: none; }
    .rest-energy-card {
      min-width: 0;
      min-height: 78px;
      padding: 9px;
      border-radius: 10px;
    }
    .rest-energy-card small { font-size: .72rem; }
    .rest-energy-card b {
      margin-top: 2px;
      font-size: 1.1rem;
    }
    .rest-energy-dots {
      gap: 4px;
      margin-top: 6px;
    }
    .rest-energy-dots i {
      width: 9px;
      height: 9px;
    }
    .rest-workspace {
      grid-template-columns: minmax(0, 1fr) 276px;
      gap: 8px;
      min-height: 0;
    }
    .rest-activity-board.panel,
    .rest-side-panel.panel {
      padding: 9px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)),
        rgba(3, 7, 9, .62);
    }
    .rest-activity-board > .panel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 7px;
      font-size: .86rem;
    }
    .rest-activity-board > .panel-title .subtle {
      font-size: .7rem;
      text-align: right;
    }
    .rest-side-panel > .panel-title {
      margin-bottom: 2px;
      font-size: .9rem;
    }
    .rest-category-stack {
      grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
      grid-auto-flow: dense;
      gap: 8px;
    }
    .rest-category-section {
      padding: 8px;
      gap: 7px;
      border-radius: 11px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .014)),
        rgba(0, 0, 0, .14);
    }
    .rest-category-title {
      gap: 8px;
      padding-bottom: 4px;
    }
    .rest-category-title b {
      color: #d6ad5b;
      font-size: .72rem;
    }
    .rest-category-title small { display: none; }
    .rest-category-title i {
      min-width: 24px;
      height: 24px;
      font-size: .72rem;
    }
    .rest-category-gathering .rest-activity-grid,
    .rest-category-production .rest-activity-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .rest-category-creative .rest-activity-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rest-activity-grid { gap: 6px; }
    .rest-activity-card {
      min-height: 104px;
      gap: 6px;
      padding: 9px 9px 9px 11px;
      border-radius: 10px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014)),
        rgba(2, 5, 7, .38);
    }
    .rest-activity-top {
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 7px;
    }
    .rest-activity-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      font-size: .9rem;
    }
    .rest-activity-card b {
      font-size: .82rem;
      line-height: 1.1;
    }
    .rest-activity-card p {
      min-height: 0;
      font-size: .7rem;
      line-height: 1.24;
      color: #c8d0cb;
    }
    .rest-activity-card small,
    .rest-activity-card small.subtle { font-size: .68rem; }
    .rest-activity-card small.subtle { display: none; }
    .rest-activity-mode {
      padding: 0;
      border: 0;
      background: transparent;
    }
    .rest-activity-mode span { display: none; }
    .rest-activity-meter { height: 4px; }
    .rest-activity-card button,
    .rest-card-lock {
      min-height: 28px;
      padding: 0 8px;
      border-radius: 7px;
      font-size: .7rem;
    }
    .rest-side-panel {
      top: 6px;
      gap: 7px;
      max-height: calc(var(--drawer-inner-height) - 154px);
      align-self: start;
      overflow: auto;
    }
    .rest-player-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
    }
    .rest-player-summary > span {
      padding: 7px 6px;
      border-radius: 8px;
    }
    .rest-player-summary > span small { font-size: .63rem; }
    .rest-player-summary > span b { font-size: .86rem; }
    .rest-result-list {
      max-height: min(240px, calc(var(--drawer-inner-height) - 330px));
      gap: 6px;
      overflow: auto;
      padding-right: 2px;
    }
    .rest-result-row {
      padding: 7px;
      gap: 7px;
      border-radius: 8px;
    }
    .rest-result-row b { font-size: .82rem; }
    .rest-result-row small { font-size: .68rem; }
    .rest-side-panel .modal-actions { margin-top: 0; }
    .rest-side-panel .modal-actions button {
      width: 100%;
      min-height: 34px;
    }

    @media (max-width: 980px) {
      .rest-hero,
      .rest-workspace,
      .rest-category-stack,
      .rest-category-gathering .rest-activity-grid,
      .rest-category-production .rest-activity-grid,
      .rest-category-creative .rest-activity-grid {
        grid-template-columns: 1fr;
      }
      .rest-side-panel {
        position: static;
        max-height: none;
      }
    }

    .nav-icon-map-panel {
      margin-bottom: 12px;
      border-color: rgba(214, 173, 91, .28);
      background:
        radial-gradient(circle at 0 0, rgba(214, 173, 91, .12), transparent 42%),
        rgba(8, 11, 15, .74);
    }

    .nav-icon-map-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .nav-icon-map-row {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 10px;
      background: rgba(255, 255, 255, .035);
    }

    .nav-icon-map-preview {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(214, 173, 91, .26);
      border-radius: 10px;
      color: #ffe3a3;
      background: rgba(0, 0, 0, .25);
      font-weight: 900;
      overflow: hidden;
    }

    .nav-icon-map-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .nav-icon-map-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .nav-icon-map-copy small {
      color: var(--muted);
      font-size: .72rem;
    }

    .nav-icon-map-row select {
      grid-column: 1 / -1;
      min-height: 34px;
    }

    /* Camp Rest v2: denser play board with the important controls above the fold. */
    .rest-content-full {
      min-height: calc(var(--drawer-inner-height) - 4px);
      padding: 10px 12px;
      background:
        radial-gradient(circle at 8% 10%, rgba(214, 173, 91, .14), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(111, 183, 200, .1), transparent 26%),
        linear-gradient(135deg, rgba(3, 6, 8, .95), rgba(8, 14, 15, .72));
    }

    .rest-encounter {
      gap: 8px;
    }

    .rest-hero {
      min-height: 118px;
      grid-template-columns: minmax(0, 1fr) 132px 164px;
      padding: 12px 14px;
      border-radius: 12px;
      background:
        linear-gradient(90deg, rgba(6, 9, 11, .88), rgba(8, 12, 13, .62)),
        radial-gradient(circle at 48% 38%, rgba(214, 173, 91, .08), transparent 34%),
        rgba(0, 0, 0, .18);
    }

    .rest-hero-copy {
      align-content: center;
      gap: 6px;
    }

    .rest-hero .panel-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 1.02rem;
      margin: 0;
    }

    .rest-hero p {
      max-width: 680px;
      font-size: .76rem;
      color: #b7c0bc;
    }

    .rest-status-rail {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 2px;
    }

    .rest-status-rail span {
      min-width: 84px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 5px 8px;
      border: 1px solid rgba(255, 255, 255, .075);
      border-radius: 999px;
      background: rgba(255, 255, 255, .035);
    }

    .rest-status-rail small {
      color: var(--muted);
      font-size: .62rem;
      font-weight: 850;
      text-transform: uppercase;
    }

    .rest-status-rail b {
      color: var(--gold);
      font-size: .78rem;
    }

    .rest-command-strip {
      display: none;
    }

    .rest-energy-card {
      min-height: 78px;
      padding: 9px;
    }

    .rest-energy-card small {
      font-size: .72rem;
    }

    .rest-energy-card b {
      font-size: 1.1rem;
    }

    .rest-workspace {
      grid-template-columns: minmax(0, 1fr) 276px;
      gap: 8px;
      min-height: 0;
    }

    .rest-activity-board.panel,
    .rest-side-panel.panel {
      padding: 9px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)),
        rgba(3, 7, 9, .62);
    }

    .rest-activity-board > .panel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 7px;
      font-size: .86rem;
    }

    .rest-activity-board > .panel-title .subtle {
      font-size: .7rem;
      text-align: right;
    }

    .rest-category-stack {
      grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
      grid-auto-flow: dense;
      gap: 8px;
    }

    .rest-category-section {
      padding: 8px;
      gap: 7px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .014)),
        rgba(0, 0, 0, .14);
    }

    .rest-category-gathering,
    .rest-category-production,
    .rest-category-creative {
      grid-column: span 1;
    }

    .rest-category-gathering .rest-activity-grid,
    .rest-category-production .rest-activity-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rest-category-creative .rest-activity-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rest-category-title {
      gap: 8px;
      padding-bottom: 4px;
    }

    .rest-category-title b {
      color: #d6ad5b;
    }

    .rest-category-title small {
      display: none;
    }

    .rest-category-title i {
      min-width: 24px;
      height: 24px;
      font-size: .72rem;
    }

    .rest-activity-grid {
      gap: 6px;
    }

    .rest-activity-card {
      min-height: 104px;
      padding: 9px 9px 9px 11px;
      gap: 6px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014)),
        rgba(2, 5, 7, .38);
    }

    .rest-activity-top {
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 7px;
    }

    .rest-activity-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      font-size: .9rem;
    }

    .rest-activity-card b {
      font-size: .82rem;
      line-height: 1.1;
    }

    .rest-activity-mode {
      padding: 0;
      border: 0;
      background: transparent;
    }

    .rest-activity-mode span {
      display: none;
    }

    .rest-activity-meter {
      height: 4px;
    }

    .rest-activity-card p {
      font-size: .7rem;
      line-height: 1.24;
      color: #c8d0cb;
    }

    .rest-activity-card small.subtle {
      display: none;
    }

    .rest-activity-card button,
    .rest-card-lock {
      min-height: 28px;
      font-size: .7rem;
      border-radius: 7px;
    }

    .rest-side-panel {
      top: 6px;
      max-height: calc(var(--drawer-inner-height) - 154px);
      align-self: start;
      gap: 7px;
    }

    .rest-side-panel > .panel-title {
      font-size: .9rem;
      margin-bottom: 2px;
    }

    .rest-player-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
    }

    .rest-player-summary > span {
      padding: 7px 6px;
      border-radius: 8px;
    }

    .rest-player-summary > span small {
      font-size: .63rem;
    }

    .rest-player-summary > span b {
      font-size: .86rem;
    }

    .rest-result-list {
      max-height: min(240px, calc(var(--drawer-inner-height) - 330px));
      gap: 6px;
    }

    .rest-result-row {
      padding: 7px;
      gap: 7px;
    }

    .rest-result-row b {
      font-size: .82rem;
    }

    .rest-result-row small {
      font-size: .68rem;
    }

    .rest-side-panel .modal-actions {
      margin-top: 0;
    }

    .rest-side-panel .modal-actions button {
      width: 100%;
      min-height: 34px;
    }

    @media (prefers-reduced-motion: reduce) {
      .battle-token .battle-token-inner,
      .battle-projectile,
      .battle-impact,
      .damage-floater,
      .battle-shell.battle-camera-impact .battle-board {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

    .battle-token.active-turn::before {
      content: "";
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 14px solid #e2b76b;
      filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .8));
    }

    .token-marks {
      position: absolute;
      left: 4px;
      right: 4px;
      bottom: -25px;
      display: flex;
      justify-content: center;
      gap: 3px;
      pointer-events: auto;
    }

    .token-mark-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .76);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .72);
    }

    .battle-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(132px, 170px);
      gap: 12px;
      align-items: start;
    }

    .battle-shell.dm-board-shell {
      grid-template-columns: minmax(0, 1fr);
    }

    .battle-dice-panel {
      display: grid;
      gap: 8px;
      max-height: 620px;
      overflow: auto;
      border: 1px solid rgba(111, 183, 200, .26);
      border-radius: 8px;
      background: rgba(0, 0, 0, .28);
      padding: 10px;
    }

    .compact-command {
      grid-template-columns: 1fr auto;
    }

    .compact-history {
      max-height: 440px;
      overflow: auto;
    }

    .turn-panel {
      display: grid;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(0, 0, 0, .26);
      padding: 8px;
      align-self: start;
      position: sticky;
      top: 12px;
      max-height: min(72vh, 720px);
      overflow: hidden;
    }

    .turn-panel-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      min-height: 20px;
    }

    .turn-end-mini {
      min-height: 26px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: .74rem;
      line-height: 1;
    }

    .turn-timeline {
      display: grid;
      gap: 6px;
      overflow-y: auto;
      padding: 4px 2px 6px;
      align-content: start;
    }

    .turn-row {
      position: relative;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255, 255, 255, .035);
      padding: 4px 6px;
      cursor: grab;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .turn-row.active {
      border-color: rgba(226, 183, 107, .82);
      background: rgba(226, 183, 107, .16);
      color: #fff;
      transform: translateX(-3px);
      box-shadow: 0 12px 26px rgba(0, 0, 0, .34), 0 0 0 1px rgba(226, 183, 107, .22);
    }

    .turn-row.group-active::after {
      content: "◆";
      position: absolute;
      right: 6px;
      top: 5px;
      color: #ffe59a;
      font-size: .58rem;
    }

    .turn-row.group-done {
      opacity: .48;
      filter: grayscale(.55);
    }

    .turn-name small {
      display: block;
      margin-top: 2px;
      color: #ffe59a;
      font-size: .48rem;
      letter-spacing: .08em;
    }

    #encounter .battle-shell,
    #dm .battle-shell {
      height: clamp(360px, calc(100dvh - 210px), 820px);
      min-height: 0;
      align-items: stretch;
    }

    #encounter .battle-map-panel,
    #dm .battle-map-panel {
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    #encounter .phaser-battle-board,
    #dm .phaser-battle-board {
      min-height: 0;
      height: auto;
      flex: 1 1 auto;
      aspect-ratio: auto;
    }

    #encounter .turn-panel {
      position: static;
      align-self: stretch;
      height: 100%;
      max-height: none;
    }

    .turn-row.drop-target {
      border-color: rgba(111, 183, 200, .92);
      box-shadow: inset 0 0 0 1px rgba(111, 183, 200, .5);
    }

    .turn-index {
      display: none;
      position: absolute;
      left: 5px;
      top: 5px;
      width: 18px;
      height: 18px;
      place-items: center;
      border-radius: 999px;
      background: rgba(0, 0, 0, .72);
      color: var(--gold);
      font-size: .68rem;
      font-weight: 1000;
      z-index: 2;
    }

    .turn-token-icon {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(226, 183, 107, .48);
      border-radius: 999px;
      background: rgba(8, 10, 12, .72);
      color: var(--gold);
      font-weight: 900;
      font-size: .76rem;
    }

    .turn-token-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .turn-name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
      color: var(--muted);
      font-size: .62rem;
      font-weight: 800;
    }

    .research-requirements {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .research-row {
      display: grid;
      grid-template-columns: 44px minmax(160px, 1fr) 1fr 92px auto;
      gap: 8px;
      align-items: center;
    }

    .research-contribution {
      display: grid;
      grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.4fr) minmax(150px, auto);
      gap: 10px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 10px;
      background: rgba(255, 255, 255, .035);
    }

    .research-contribution progress {
      width: 100%;
      min-width: 0;
    }

    .research-send-controls {
      display: grid;
      grid-template-columns: 70px auto;
      gap: 8px;
      align-items: center;
    }

    .rest-preview {
      min-height: 300px;
      border: 1px solid rgba(214, 173, 91, .24);
      background-size: cover;
      background-position: center;
    }

    .rest-preview .design-preview-card {
      background: rgba(8, 10, 13, .78);
      backdrop-filter: blur(8px);
    }

    .rest-chip-grid,
    .rest-activity-config-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .rest-chip,
    .rest-activity-toggle {
      display: grid;
      gap: 4px;
      text-align: left;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .035);
      padding: 10px;
      color: var(--text);
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .rest-chip:hover,
    .rest-activity-toggle:hover {
      transform: translateY(-1px);
      border-color: rgba(214, 173, 91, .42);
    }

    .rest-chip.active,
    .rest-activity-toggle.active {
      border-color: rgba(214, 173, 91, .82);
      background: linear-gradient(135deg, rgba(214, 173, 91, .2), rgba(214, 173, 91, .06));
      box-shadow: inset 0 0 0 1px rgba(214, 173, 91, .18);
    }

    .rest-chip b,
    .rest-activity-toggle b {
      color: var(--gold);
      font-size: .82rem;
    }

    .rest-chip span,
    .rest-activity-toggle span {
      color: var(--muted);
      font-size: .72rem;
      line-height: 1.35;
    }

    .rest-reward-editor-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .rest-reward-editor-grid label {
      display: grid;
      gap: 6px;
    }

    .rest-reward-editor-grid textarea {
      min-height: 156px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: .72rem;
      line-height: 1.35;
    }

    .rest-frame {
      min-height: 520px;
      height: auto;
      background-size: cover;
      background-position: center;
      overflow: visible;
    }

    #encounter.drawer-view > .rest-frame {
      height: auto;
      min-height: var(--drawer-inner-height);
    }

    .rest-content-full {
      min-height: inherit;
      max-height: none;
      overflow: visible;
      background:
        radial-gradient(circle at 20% 8%, rgba(214, 173, 91, .16), transparent 32%),
        radial-gradient(circle at 82% 8%, rgba(111, 183, 200, .11), transparent 28%),
        linear-gradient(120deg, rgba(4, 7, 10, .92), rgba(7, 14, 18, .76));
      padding: 22px;
    }

    .rest-encounter {
      display: grid;
      gap: 18px;
    }

    .rest-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 18px;
      align-items: stretch;
      border: 1px solid rgba(214, 173, 91, .2);
      border-radius: 14px;
      padding: 22px;
      background:
        linear-gradient(90deg, rgba(8, 11, 15, .84), rgba(8, 11, 15, .54)),
        radial-gradient(circle at 18% 20%, rgba(214, 173, 91, .18), transparent 40%),
        rgba(8, 11, 15, .74);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 40px rgba(0, 0, 0, .18);
    }

    .rest-hero-copy {
      display: grid;
      gap: 8px;
      align-content: center;
      max-width: 820px;
    }

    .rest-eyebrow {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      color: var(--gold);
      font-size: .74rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .rest-eyebrow span {
      padding: 4px 8px;
      border: 1px solid rgba(214, 173, 91, .22);
      border-radius: 999px;
      color: #e7f7ff;
      background: rgba(255, 255, 255, .045);
    }

    .rest-hero h2 {
      margin: 0 0 6px;
      letter-spacing: 0;
    }

    .rest-energy-card {
      min-width: 186px;
      border: 1px solid rgba(214, 173, 91, .26);
      border-radius: 12px;
      padding: 14px;
      background:
        linear-gradient(145deg, rgba(214, 173, 91, .1), rgba(255, 255, 255, .025)),
        rgba(0, 0, 0, .18);
      text-align: center;
      display: grid;
      align-content: center;
    }

    .rest-energy-card b {
      display: block;
      margin-top: 4px;
      font-size: 1.7rem;
      color: var(--gold);
    }

    .rest-energy-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .rest-energy-dots i {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      border: 1px solid rgba(214, 173, 91, .55);
      background: rgba(255, 255, 255, .08);
    }

    .rest-energy-dots i.active {
      background: var(--gold);
      box-shadow: 0 0 14px rgba(214, 173, 91, .5);
    }

    .rest-command-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 12px;
      background: rgba(0, 0, 0, .22);
    }

    .rest-command-strip span {
      display: grid;
      gap: 2px;
      padding: 10px 12px;
      border-radius: 9px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)),
        rgba(0, 0, 0, .18);
      border: 1px solid rgba(255, 255, 255, .07);
    }

    .rest-command-strip small {
      color: var(--muted);
      font-size: .72rem;
      text-transform: uppercase;
      font-weight: 800;
    }

    .rest-command-strip b {
      color: var(--gold);
      font-size: 1.08rem;
    }

    .rest-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(310px, .34fr);
      gap: 16px;
      align-items: start;
    }

    .rest-activity-board,
    .rest-side-panel {
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        rgba(8, 11, 15, .7);
    }

    .rest-side-panel {
      position: sticky;
      top: 0;
      display: grid;
      gap: 12px;
    }

    .rest-category-stack {
      display: grid;
      gap: 14px;
    }

    .rest-category-section {
      display: grid;
      gap: 12px;
      border: 1px solid rgba(255, 255, 255, .085);
      border-radius: 14px;
      padding: 12px;
      background:
        radial-gradient(circle at 0 0, rgba(214, 173, 91, .08), transparent 45%),
        rgba(255, 255, 255, .025);
    }

    .rest-category-title {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .rest-category-title span {
      display: grid;
      gap: 2px;
    }

    .rest-category-title b {
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .04em;
      font-size: .78rem;
    }

    .rest-category-title small {
      color: var(--muted);
    }

    .rest-category-title i {
      min-width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid rgba(214, 173, 91, .3);
      color: var(--gold);
      font-style: normal;
      font-weight: 900;
      background: rgba(214, 173, 91, .08);
    }

    .rest-activity-grid,
    .rest-result-list,
    .rest-dm-player-grid {
      display: grid;
      gap: 10px;
    }

    .rest-activity-grid {
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }

    .rest-activity-card {
      display: grid;
      gap: 12px;
      min-height: 178px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018)),
        rgba(0, 0, 0, .14);
      padding: 14px;
      text-align: left;
      color: var(--text);
      transition: transform .16s ease, border-color .16s ease, background .16s ease;
      align-content: space-between;
      position: relative;
      overflow: hidden;
    }

    .rest-activity-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: rgba(214, 173, 91, .55);
    }

    .rest-accent-gather::before { background: #6fb7c8; }
    .rest-accent-produce::before { background: #d6ad5b; }
    .rest-accent-create::before { background: #b889ff; }
    .rest-accent-rest::before { background: #78b66c; }

    .rest-activity-card.actionable:hover {
      transform: translateY(-2px);
      border-color: rgba(214, 173, 91, .5);
      background: rgba(214, 173, 91, .08);
    }

    .rest-activity-card.actionable {
      border-color: rgba(214, 173, 91, .22);
      cursor: pointer;
    }

    .rest-activity-card.actionable:focus-visible {
      outline: 2px solid rgba(214, 173, 91, .76);
      outline-offset: 2px;
    }

    .rest-activity-card.disabled,
    .rest-activity-card.idle {
      opacity: .74;
    }

    .rest-activity-card button {
      width: 100%;
      min-height: 40px;
      border-color: rgba(214, 173, 91, .3);
      background:
        linear-gradient(180deg, rgba(214, 173, 91, .22), rgba(214, 173, 91, .08)),
        rgba(0, 0, 0, .22);
      font-weight: 900;
    }

    .rest-activity-card b {
      color: var(--gold);
    }

    .rest-activity-top {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .rest-activity-icon {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      border: 1px solid rgba(214, 173, 91, .36);
      background:
        radial-gradient(circle at 50% 24%, rgba(214, 173, 91, .26), transparent 60%),
        rgba(0, 0, 0, .28);
      color: #ffe3a3;
      font-weight: 950;
      font-size: 1.35rem;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .rest-activity-meter {
      height: 6px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .06);
    }

    .rest-activity-meter i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #38bdf8, #d6ad5b);
      box-shadow: 0 0 14px rgba(214, 173, 91, .34);
    }

    .rest-activity-mode {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      padding: 7px 8px;
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 8px;
      background: rgba(0, 0, 0, .18);
    }

    .rest-activity-mode span {
      color: #e7f7ff;
      font-weight: 900;
      font-size: .72rem;
      text-transform: uppercase;
    }

    .rest-activity-card small,
    .rest-result-row small,
    .rest-dm-player-card small {
      color: var(--muted);
      line-height: 1.35;
    }

    .rest-activity-card p {
      margin: 0;
      color: #d7ded8;
      line-height: 1.35;
      min-height: 38px;
    }

    .rest-card-lock {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 6px 9px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      color: var(--muted);
      background: rgba(255, 255, 255, .035);
      font-size: .76rem;
      font-weight: 850;
      text-transform: uppercase;
      text-align: center;
    }

    .rest-card-lock.passive {
      color: #d6ad5b;
      border-color: rgba(214, 173, 91, .18);
      background: rgba(214, 173, 91, .06);
    }

    .rest-result-row,
    .rest-dm-player-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: rgba(255, 255, 255, .035);
    }

    .rest-result-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }

    .rest-result-row > span:first-child {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .rest-reward-line {
      color: var(--gold) !important;
    }

    .rest-player-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      align-content: start;
    }

    .rest-player-summary > span {
      display: grid;
      gap: 2px;
      min-width: 0;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 9px;
      background: rgba(255, 255, 255, .035);
    }

    .rest-player-summary > span small {
      color: var(--muted);
      line-height: 1.15;
    }

    .rest-player-summary > span b {
      color: var(--gold);
      font-size: 1.05rem;
    }

    .rest-player-summary .modal-actions {
      justify-content: stretch;
    }

    .rest-player-summary .modal-actions button {
      flex: 1;
    }

    .rest-camp-summary {
      margin-top: 0;
    }

    .rest-camp-summary.compact {
      background: rgba(8, 11, 15, .62);
      border-color: rgba(214, 173, 91, .2);
    }

    .rest-summary-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }

    .rest-summary-metrics span {
      display: grid;
      gap: 2px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      padding: 9px;
      background: rgba(255, 255, 255, .035);
    }

    .rest-summary-metrics small,
    .rest-summary-row small {
      color: var(--muted);
    }

    .rest-summary-metrics b {
      color: var(--gold);
      font-size: 1.1rem;
    }

    .rest-summary-list {
      display: grid;
      gap: 8px;
      max-height: 260px;
      overflow: auto;
      padding-right: 2px;
    }

    .rest-summary-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: rgba(255, 255, 255, .03);
    }

    .rest-summary-row.ready {
      border-color: rgba(66, 211, 146, .34);
      background: rgba(66, 211, 146, .06);
    }

    .rest-summary-row > div {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .rest-dm-player-card {
      display: grid;
      gap: 8px;
      align-items: center;
    }

    .rest-dm-player-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }

    .rest-dm-player-head span:first-child {
      display: grid;
      gap: 2px;
    }

    .event-loot-panel {
      margin-top: 12px;
      background: rgba(8, 11, 15, .72);
      border-color: rgba(214, 173, 91, .32);
    }

    .event-loot-grid {
      margin-top: 10px;
    }

    .event-loot-card {
      align-items: center;
    }

    .event-loot-card .loot-actions,
    .event-loot-list .loot-actions {
      display: inline-flex;
      gap: 8px;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
    }

    .compact-results {
      max-height: 220px;
      overflow: auto;
      margin-top: 8px;
    }














    .shop-card {
      display: grid;
      grid-template-columns: 46px 1fr 70px auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, .04);
    }

    .shop-card-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      overflow: hidden;
      background: rgba(0, 0, 0, .26);
      font-size: 1.45rem;
    }

    .shop-card-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @media (max-width: 1180px) {
      .weapon-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .character-grid {
        grid-template-columns: 300px 1fr;
      }

      .character-right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .character-right .loadout {
        grid-column: 1 / -1;
      }

      .dm-section-head,
      .dm-send-grid,
      .dm-players-workspace {
        grid-template-columns: 1fr;
      }

      .dm-player-roster {
        position: static;
        max-height: none;
      }

      .dm-player-roster-list {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      }

      .dm-player-route-grid,
      .scene-workflow {
        grid-template-columns: 1fr;
      }

      .dm-encounter-runbook.empty,
      .dm-encounter-runbook-steps,
      .dm-encounter-runbook-status {
        grid-template-columns: 1fr;
      }

      .rest-workspace {
        grid-template-columns: 1fr;
      }

      .rest-hero {
        grid-template-columns: 1fr;
      }

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

      .dm-design-workspace {
        grid-template-columns: 1fr;
      }

      .dm-design-preview-panel {
        position: static;
      }

      .asset-manager-workspace,
      .asset-tab-visual,
      .asset-tab-audio,
      .asset-tab-token {
        grid-template-columns: 1fr;
      }

      .asset-tab-visual .visual-preview-panel,
      .asset-tab-audio .panel:nth-of-type(2),
      .asset-tab-token .panel:nth-of-type(2) {
        grid-column: auto;
      }

      .asset-tab-audio .sound-map-panel {
        grid-column: auto;
      }

      .data-overview-workspace {
        grid-template-columns: 1fr;
      }

      .data-overview-side {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }

      .dm-tool-workspace {
        grid-template-columns: 1fr;
      }

      .dm-tool-side {
        position: static;
      }

      .dm-diagnostics-workspace {
        grid-template-columns: 1fr;
      }

      .dm-diagnostics-side {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }

      .dm-battle-design-workspace {
        grid-template-columns: 1fr;
      }

      .dm-battle-design-side {
        position: static;
        max-height: none;
        overflow: visible;
      }

      .dm-battle-control-layout {
        grid-template-columns: 1fr;
      }

      .dm-battle-side-control {
        position: static;
        max-height: none;
        overflow: visible;
      }

      .dm-token-control-grid,
      .sound-map-row {
        grid-template-columns: 1fr 1fr;
      }

      .dm-token-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .item-transfer-fields,
      .skill-transfer-fields,
      .dm-resource-control,
      .dm-level-control {
        grid-template-columns: 1fr 1fr;
      }

      .dm-action-row {
        justify-content: stretch;
      }

      .dm-action-row button,
      .dm-control-fields button {
        flex: 1;
      }

      .dice-stage-v3 {
        min-height: 420px;
      }

      .battle-shell {
        grid-template-columns: minmax(0, 1fr) minmax(112px, 150px);
      }

      .battle-shell.dm-board-shell { grid-template-columns: minmax(0, 1fr); }

      .action-schema-builder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .ability-schema-section,
      .ability-repeat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .meta-entry {
        grid-template-columns: 48px 1fr;
      }

      .meta-entry label,
      .meta-description,
      .meta-actions {
        grid-column: 1 / -1;
      }

      .data-row {
        grid-template-columns: 42px 1fr;
      }

      .data-row > .subtle,
      .data-row > button {
        grid-column: 1 / -1;
      }

      .data-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
      }

      .data-actions button {
        width: 100%;
      }

      .dm-log-row {
        grid-template-columns: 1fr;
      }

      .research-contribution {
        grid-template-columns: 1fr;
      }

      .research-row {
        grid-template-columns: 42px 1fr;
      }

      .research-row > span:nth-child(3),
      .research-row > input,
      .research-row > button {
        grid-column: 1 / -1;
      }

      .research-send-controls {
        grid-template-columns: 1fr auto;
      }

      .equipment-combo-grid,
      .dm-character-control,
      .dm-level-control {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .character-grid {
        grid-template-columns: 1fr;
      }

      .weapon-slot-grid {
        grid-template-columns: 1fr;
      }

      .character-right {
        grid-column: auto;
        grid-template-columns: 1fr;
      }
      .resource-grid, .combat-grid, .ability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .identity-row {
        grid-template-columns: 64px minmax(0, 1fr);
      }
      .action-schema-builder {
        grid-template-columns: 1fr;
      }
      .ability-schema-section,
      .ability-repeat-row {
        grid-template-columns: 1fr;
      }
      .ability-row-delete {
        width: 100%;
      }
      .battle-design-controls,
      .dm-grid,
      .dm-section-head,
      .data-table {
        grid-template-columns: 1fr;
      }
      .asset-tabs,
      .category-list {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
      }
      .battle-button-row,
      .dm-encounter-actions,
      .modal-actions {
        justify-content: flex-start;
      }
      .battle-button-row button,
      .dm-encounter-actions button,
      .modal-actions button {
        flex: 1 1 140px;
      }
      .dm-live-shop-list {
        grid-template-columns: 1fr;
      }
      .dm-live-shop-admin-grid {
        grid-template-columns: 1fr;
      }
      .dm-token-control-head,
      .dm-token-control-grid,
      .sound-map-row {
        grid-template-columns: 1fr;
      }
      .dm-token-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .dm-live-shop-row,
      .dm-sell-offer-row {
        grid-template-columns: 38px minmax(0, 1fr);
      }
      .dm-live-shop-row input,
      .dm-live-shop-row label,
      .dm-sell-offer-row input,
      .dm-sell-offer-row button {
        grid-column: 2;
      }
      .panel .item-palette:has([data-battle-loot]) {
        grid-template-columns: 1fr;
      }
      .name-input { grid-column: 1 / -1; }
      .ability-tag { display: none; }
      .quick-side-bar { display: none !important; }
      .rest-hero,
      .rest-workspace,
      .rest-command-strip {
        grid-template-columns: 1fr;
      }
      .rest-side-panel {
        position: static;
      }
      .rest-activity-grid {
        grid-template-columns: 1fr;
      }
      .rest-content-full {
        padding: 12px;
      }
    }

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

      .character-grid,
      .weapon-slot-content,
      .character-stage-v3 img,
      .gear-card:hover,
      .weapon-slot-card:hover,
      .loadout-card-v3:hover {
        transform: none !important;
      }
    }

    /* Final Rest overrides. */
    .rest-content-full { padding: 12px 14px; }
    .rest-encounter { gap: 10px; }
    .rest-hero {
      grid-template-columns: minmax(0, 1fr) minmax(132px, auto) minmax(150px, auto);
      gap: 10px;
      padding: 12px 14px;
      border-radius: 12px;
      align-items: center;
    }
    .rest-hero-copy { gap: 4px; }
    .rest-eyebrow {
      gap: 6px;
      font-size: .68rem;
    }
    .rest-eyebrow span { padding: 2px 7px; }
    .rest-hero .panel-title {
      font-size: .95rem;
      line-height: 1.15;
    }
    .rest-hero p {
      margin: 0;
      line-height: 1.3;
      max-width: 760px;
    }
    .rest-energy-card {
      min-width: 0;
      padding: 9px 10px;
      border-radius: 10px;
    }
    .rest-energy-card b {
      margin-top: 2px;
      font-size: 1.22rem;
    }
    .rest-energy-dots {
      gap: 4px;
      margin-top: 6px;
    }
    .rest-energy-dots i {
      width: 9px;
      height: 9px;
    }
    .rest-command-strip {
      gap: 7px;
      padding: 7px;
      border-radius: 10px;
    }
    .rest-command-strip span {
      padding: 7px 9px;
      border-radius: 8px;
    }
    .rest-command-strip small { font-size: .66rem; }
    .rest-command-strip b { font-size: .92rem; }
    .rest-workspace {
      grid-template-columns: minmax(0, 1fr) 286px;
      gap: 10px;
    }
    .rest-activity-board,
    .rest-side-panel { border-radius: 12px; }
    .rest-activity-board.panel,
    .rest-side-panel.panel { padding: 10px; }
    .rest-activity-board > .panel-title,
    .rest-side-panel > .panel-title { margin-bottom: 8px; }
    .rest-category-stack {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }
    .rest-category-section {
      gap: 8px;
      padding: 9px;
      border-radius: 11px;
    }
    .rest-category-title { padding-bottom: 4px; }
    .rest-category-title b { font-size: .72rem; }
    .rest-category-title small,
    .rest-activity-card p,
    .rest-activity-card small { font-size: .72rem; }
    .rest-activity-grid {
      grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
      gap: 7px;
    }
    .rest-activity-card {
      min-height: 116px;
      gap: 7px;
      padding: 10px 10px 10px 12px;
      border-radius: 10px;
    }
    .rest-activity-top {
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 8px;
    }
    .rest-activity-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      font-size: 1rem;
    }
    .rest-activity-card p {
      min-height: 0;
      line-height: 1.25;
    }
    .rest-activity-mode { padding: 5px 7px; }
    .rest-activity-mode span { font-size: .66rem; }
    .rest-activity-meter { height: 5px; }
    .rest-activity-card button {
      min-height: 32px;
      padding: 0 8px;
      font-size: .74rem;
    }
    .rest-side-panel {
      top: 8px;
      gap: 8px;
      max-height: calc(var(--drawer-inner-height) - 20px);
      overflow: auto;
    }
    .rest-player-summary { gap: 6px; }
    .rest-player-summary > span { padding: 7px; }
    .rest-result-list {
      gap: 6px;
      max-height: 220px;
      overflow: auto;
      padding-right: 2px;
    }
    .rest-result-row {
      padding: 7px;
      border-radius: 8px;
    }

    @media (max-width: 980px) {
      .rest-hero,
      .rest-workspace,
      .rest-command-strip,
      .rest-category-stack {
        grid-template-columns: 1fr;
      }
      .rest-side-panel {
        position: static;
        max-height: none;
      }
    }
    /* Rest top bar final EOF override. */
    #encounter .rest-hero {
      height: 96px !important;
      min-height: 96px !important;
      max-height: 96px !important;
      grid-template-columns: minmax(0, 1fr) 108px 142px !important;
      gap: 8px !important;
      align-items: center !important;
      padding: 9px 12px !important;
      overflow: hidden !important;
      border-radius: 11px !important;
    }
    #encounter .rest-hero-copy {
      gap: 4px !important;
      align-content: center !important;
    }
    #encounter .rest-hero p {
      margin: 0 !important;
      font-size: .68rem !important;
      line-height: 1.18 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    #encounter .rest-energy-card {
      min-height: 58px !important;
      height: 58px !important;
      padding: 6px 7px !important;
      align-content: center !important;
    }
    #encounter .rest-command-strip {
      display: none !important;
    }
    /* Rest redesign EOF authority. */
    #encounter .rest-encounter {
      grid-template-rows: auto auto minmax(0, 1fr) !important;
      gap: 8px !important;
    }
    #encounter .rest-top-rest-panel {
      height: 82px !important;
      min-height: 82px !important;
      max-height: 82px !important;
      display: grid !important;
      grid-template-columns: 112px 300px minmax(0, 1fr) 116px !important;
      gap: 10px !important;
      align-items: center !important;
      padding: 8px 10px !important;
      overflow: hidden !important;
      border-color: rgba(214, 173, 91, .24) !important;
    }
    #encounter .rest-top-rest-panel > .panel-title {
      margin: 0 !important;
      font-size: .86rem !important;
      line-height: 1 !important;
    }
    #encounter .rest-top-rest-panel .rest-player-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 6px !important;
    }
    #encounter .rest-top-rest-panel .rest-player-summary > span {
      min-height: 48px !important;
      padding: 7px !important;
    }
    #encounter .rest-top-rest-panel .rest-result-list {
      height: 58px !important;
      max-height: 58px !important;
      display: flex !important;
      gap: 7px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      padding: 0 2px 3px 0 !important;
    }
    #encounter .rest-top-rest-panel .rest-result-row,
    #encounter .rest-top-rest-panel .library-empty {
      min-width: 210px !important;
      height: 58px !important;
      padding: 7px !important;
    }
    #encounter .rest-top-rest-panel .modal-actions {
      margin: 0 !important;
      align-self: stretch !important;
      display: grid !important;
    }
    #encounter .rest-top-rest-panel .modal-actions button {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
    }
    #encounter .rest-workspace {
      grid-template-columns: 1fr !important;
      min-height: 0 !important;
      gap: 8px !important;
    }
    #encounter .rest-activity-board.panel {
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    #encounter .rest-category-stack {
      height: calc(100% - 31px) !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
    }
    #encounter .rest-category-section {
      position: relative !important;
      min-height: 0 !important;
      grid-template-rows: 24px minmax(0, 1fr) !important;
      gap: 6px !important;
      padding: 8px !important;
      overflow: hidden !important;
    }
    #encounter .rest-category-title {
      min-height: 24px !important;
      padding: 0 34px 4px 0 !important;
      align-items: center !important;
    }
    #encounter .rest-category-title i {
      position: absolute !important;
      top: 8px !important;
      right: 8px !important;
      width: 24px !important;
      min-width: 24px !important;
      height: 24px !important;
      display: grid !important;
      place-items: center !important;
      margin: 0 !important;
    }
    #encounter .rest-category-gathering .rest-activity-grid,
    #encounter .rest-category-production .rest-activity-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    #encounter .rest-category-rest .rest-activity-grid {
      grid-template-columns: 1fr !important;
    }
    #encounter .rest-category-creative .rest-activity-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #encounter .rest-activity-card {
      height: 100% !important;
      min-height: 0 !important;
      grid-template-rows: auto auto minmax(0, 1fr) auto !important;
      align-content: start !important;
      gap: 5px !important;
      padding: 8px !important;
      overflow: hidden !important;
    }
    #encounter .rest-activity-card button,
    #encounter .rest-card-lock {
      display: none !important;
    }
    #encounter .rest-activity-top {
      grid-template-columns: 30px minmax(0, 1fr) !important;
      gap: 7px !important;
    }
    #encounter .rest-activity-icon {
      width: 30px !important;
      height: 30px !important;
      border-radius: 8px !important;
      font-size: .82rem !important;
    }
    #encounter .rest-activity-card p {
      margin: 0 !important;
      min-height: 0 !important;
      font-size: .66rem !important;
      line-height: 1.2 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }
    #encounter .rest-activity-art {
      min-height: 76px !important;
      height: 100% !important;
      display: block !important;
      border: 1px solid rgba(255, 255, 255, .065) !important;
      border-radius: 9px !important;
      position: relative !important;
      overflow: hidden !important;
      background:
        radial-gradient(circle at 50% 28%, rgba(226, 183, 107, .18), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .014)) !important;
    }
    #encounter .rest-activity-art::after {
      position: absolute !important;
      right: 10px !important;
      bottom: 8px !important;
      color: rgba(255, 244, 215, .32) !important;
      font-size: 2.15rem !important;
      font-weight: 950 !important;
      line-height: 1 !important;
    }
    #encounter .rest-activity-art-rest_recovery {
      background:
        radial-gradient(circle at 30% 35%, rgba(120, 182, 108, .24), transparent 28%),
        linear-gradient(135deg, rgba(38, 65, 42, .35), rgba(4, 8, 10, .22)) !important;
    }
    #encounter .rest-activity-art-fishing {
      background:
        repeating-linear-gradient(165deg, rgba(111, 183, 200, .22) 0 8px, rgba(111, 183, 200, .05) 8px 18px),
        radial-gradient(circle at 24% 26%, rgba(186, 230, 253, .18), transparent 30%),
        rgba(4, 18, 22, .46) !important;
    }
    #encounter .rest-activity-art-foraging {
      background:
        radial-gradient(circle at 22% 68%, rgba(120, 182, 108, .32), transparent 22%),
        radial-gradient(circle at 64% 32%, rgba(214, 173, 91, .18), transparent 24%),
        linear-gradient(135deg, rgba(33, 68, 47, .42), rgba(6, 10, 9, .26)) !important;
    }
    #encounter .rest-activity-art-hunting {
      background:
        radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(214, 173, 91, .32) 15px 17px, transparent 18px 34px, rgba(200, 87, 77, .22) 35px 37px, transparent 38px),
        linear-gradient(135deg, rgba(70, 40, 35, .42), rgba(6, 8, 9, .24)) !important;
    }
    #encounter .rest-activity-art-crafting {
      background:
        linear-gradient(135deg, rgba(214, 173, 91, .22), transparent 34%),
        repeating-linear-gradient(90deg, rgba(226, 183, 107, .12) 0 3px, transparent 3px 16px),
        rgba(26, 20, 12, .42) !important;
    }
    #encounter .rest-activity-art-alchemist {
      background:
        radial-gradient(circle at 35% 36%, rgba(120, 182, 108, .28), transparent 24%),
        radial-gradient(circle at 70% 62%, rgba(184, 137, 255, .28), transparent 22%),
        linear-gradient(135deg, rgba(19, 36, 36, .48), rgba(5, 8, 10, .24)) !important;
    }
    #encounter .rest-activity-art-cooking {
      background:
        radial-gradient(circle at 48% 70%, rgba(214, 173, 91, .32), transparent 28%),
        linear-gradient(180deg, rgba(200, 87, 77, .18), rgba(8, 11, 15, .24)) !important;
    }
    #encounter .rest-activity-art-creative_drawing {
      background:
        linear-gradient(135deg, rgba(184, 137, 255, .24), transparent 38%),
        repeating-linear-gradient(155deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 18px),
        rgba(20, 14, 33, .4) !important;
    }
    #encounter .rest-activity-art-creative_writing {
      background:
        repeating-linear-gradient(0deg, rgba(226, 183, 107, .12) 0 1px, transparent 1px 12px),
        linear-gradient(135deg, rgba(214, 173, 91, .18), rgba(8, 11, 15, .24)) !important;
    }
    #encounter .rest-activity-art-creative_handcraft {
      background:
        radial-gradient(circle at 28% 30%, rgba(226, 183, 107, .26), transparent 24%),
        radial-gradient(circle at 70% 68%, rgba(111, 183, 200, .18), transparent 22%),
        linear-gradient(135deg, rgba(55, 38, 24, .42), rgba(8, 11, 15, .24)) !important;
    }
    #encounter .rest-activity-art-rest_recovery::after { content: "\2726"; }
    #encounter .rest-activity-art-fishing::after { content: "\2248"; }
    #encounter .rest-activity-art-foraging::after { content: "\273B"; }
    #encounter .rest-activity-art-hunting::after { content: "\2316"; }
    #encounter .rest-activity-art-crafting::after { content: "\2692"; }
    #encounter .rest-activity-art-alchemist::after { content: "\2697"; }
    #encounter .rest-activity-art-cooking::after { content: "\25D2"; }
    #encounter .rest-activity-art-creative_drawing::after { content: "\270E"; }
    #encounter .rest-activity-art-creative_writing::after { content: "\25A3"; }
    #encounter .rest-activity-art-creative_handcraft::after { content: "\25C7"; }

    /* Rest activity image source authority: Rest Recovery uses the selected Rest background. */
    #encounter .rest-activity-card.unavailable {
      opacity: .44 !important;
      filter: saturate(.42) contrast(.92) !important;
    }

    #encounter .rest-activity-card.unavailable .rest-activity-art {
      opacity: .55 !important;
    }

    #encounter .rest-activity-card.unavailable .rest-activity-top,
    #encounter .rest-activity-card.unavailable p {
      opacity: .72 !important;
    }

    #encounter .rest-activity-art.has-custom-bg {
      background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .08), rgba(4, 8, 10, .5)),
        var(--rest-activity-bg) !important;
      background-size: cover !important;
      background-position: center !important;
    }

    #encounter .rest-activity-art.has-custom-bg::after {
      color: rgba(255, 244, 215, .38) !important;
      text-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
    }

    #encounter .rest-activity-note {
      color: rgba(214, 224, 220, .68) !important;
      min-height: 16px !important;
    }

    /* Rest typography and fixed activity artwork polish. */
    #encounter .rest-encounter {
      font-size: .86rem !important;
    }

    #encounter .rest-hero h2,
    #encounter .rest-activity-board h3,
    #encounter .rest-side-panel h3 {
      font-size: .88rem !important;
      line-height: 1.1 !important;
    }

    #encounter .rest-hero p,
    #encounter .rest-stat-pill,
    #encounter .rest-activity-card p,
    #encounter .rest-activity-card small,
    #encounter .rest-result-row small {
      font-size: .72rem !important;
      line-height: 1.35 !important;
    }

    #encounter .rest-category-title {
      grid-template-columns: minmax(0, 1fr) !important;
      align-items: end !important;
    }

    #encounter .rest-category-title i {
      display: none !important;
    }

    #encounter .rest-category-title b,
    #encounter .rest-activity-card b,
    #encounter .rest-result-row b {
      font-size: .78rem !important;
      line-height: 1.15 !important;
    }

    #encounter .rest-activity-art-fishing {
      background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .12), rgba(4, 8, 10, .42)),
        url("assets/ui/rest/fishing.webp"),
        repeating-linear-gradient(165deg, rgba(111, 183, 200, .22) 0 8px, rgba(111, 183, 200, .05) 8px 18px),
        radial-gradient(circle at 24% 26%, rgba(186, 230, 253, .18), transparent 30%) !important;
      background-size: cover, cover, auto, auto !important;
      background-position: center !important;
    }

    #encounter .rest-activity-art-foraging {
      background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .12), rgba(4, 8, 10, .42)),
        url("assets/ui/rest/foraging.webp"),
        radial-gradient(circle at 22% 68%, rgba(120, 182, 108, .32), transparent 22%),
        radial-gradient(circle at 64% 32%, rgba(214, 173, 91, .18), transparent 24%) !important;
      background-size: cover, cover, auto, auto !important;
      background-position: center !important;
    }

    #encounter .rest-activity-art-hunting {
      background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .12), rgba(4, 8, 10, .42)),
        url("assets/ui/rest/hunting.webp"),
        radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(214, 173, 91, .32) 15px 17px, transparent 18px 34px, rgba(200, 87, 77, .22) 35px 37px, transparent 38px) !important;
      background-size: cover, cover, auto !important;
      background-position: center !important;
    }

    #encounter .rest-activity-art-crafting {
      background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .12), rgba(4, 8, 10, .42)),
        url("assets/ui/rest/crafting.webp"),
        linear-gradient(135deg, rgba(214, 173, 91, .22), transparent 34%),
        repeating-linear-gradient(90deg, rgba(226, 183, 107, .12) 0 3px, transparent 3px 16px) !important;
      background-size: cover, cover, auto, auto !important;
      background-position: center !important;
    }

    #encounter .rest-activity-art-alchemist {
      background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .12), rgba(4, 8, 10, .42)),
        url("assets/ui/rest/alchemist.webp"),
        radial-gradient(circle at 35% 36%, rgba(120, 182, 108, .28), transparent 24%),
        radial-gradient(circle at 70% 62%, rgba(184, 137, 255, .28), transparent 22%) !important;
      background-size: cover, cover, auto, auto !important;
      background-position: center !important;
    }

    #encounter .rest-activity-art-cooking {
      background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .12), rgba(4, 8, 10, .42)),
        url("assets/ui/rest/cooking.webp"),
        radial-gradient(circle at 48% 70%, rgba(214, 173, 91, .32), transparent 28%) !important;
      background-size: cover, cover, auto !important;
      background-position: center !important;
    }

    #encounter .rest-activity-art-creative_drawing {
      background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .12), rgba(4, 8, 10, .42)),
        url("assets/ui/rest/drawing.webp"),
        linear-gradient(135deg, rgba(184, 137, 255, .24), transparent 38%),
        repeating-linear-gradient(155deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 18px) !important;
      background-size: cover, cover, auto, auto !important;
      background-position: center !important;
    }

    #encounter .rest-activity-art-creative_writing {
      background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .12), rgba(4, 8, 10, .42)),
        url("assets/ui/rest/writing.webp"),
        repeating-linear-gradient(0deg, rgba(226, 183, 107, .12) 0 1px, transparent 1px 12px) !important;
      background-size: cover, cover, auto !important;
      background-position: center !important;
    }

    #encounter .rest-activity-art-creative_handcraft {
      background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .12), rgba(4, 8, 10, .42)),
        url("assets/ui/rest/handcraft.webp"),
        radial-gradient(circle at 28% 30%, rgba(226, 183, 107, .26), transparent 24%),
        radial-gradient(circle at 70% 68%, rgba(111, 183, 200, .18), transparent 22%) !important;
      background-size: cover, cover, auto, auto !important;
      background-position: center !important;
    }

    /* Camp Rest hover motion. */
    #encounter .rest-activity-card,
    #encounter .rest-result-row,
    #encounter .rest-side-panel {
      transition:
        transform 150ms cubic-bezier(.2, .8, .2, 1),
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease,
        filter 150ms ease,
        opacity 150ms ease !important;
      will-change: transform !important;
    }

    #encounter .rest-activity-art,
    #encounter .rest-activity-icon,
    #encounter .rest-activity-card::before {
      transition:
        transform 180ms cubic-bezier(.2, .8, .2, 1),
        opacity 180ms ease,
        filter 180ms ease !important;
      will-change: transform !important;
    }

    #encounter .rest-activity-card.actionable:hover,
    #encounter .rest-activity-card.actionable:focus-visible {
      transform: translateY(-4px) scale(1.012) !important;
      border-color: rgba(226, 183, 107, .58) !important;
      background-color: rgba(255, 255, 255, .055) !important;
      box-shadow:
        0 16px 36px rgba(0, 0, 0, .36),
        0 0 0 1px rgba(226, 183, 107, .12),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
      z-index: 2 !important;
    }

    #encounter .rest-activity-card.actionable:hover .rest-activity-art,
    #encounter .rest-activity-card.actionable:focus-visible .rest-activity-art {
      transform: scale(1.035) !important;
      filter: saturate(1.12) brightness(1.08) !important;
    }

    #encounter .rest-activity-card.actionable:hover .rest-activity-icon,
    #encounter .rest-activity-card.actionable:focus-visible .rest-activity-icon {
      transform: translateY(-1px) scale(1.08) !important;
      box-shadow: 0 0 18px rgba(226, 183, 107, .24) !important;
    }

    #encounter .rest-activity-card.actionable:hover .rest-activity-art::after,
    #encounter .rest-activity-card.actionable:focus-visible .rest-activity-art::after {
      transform: translate(-2px, -2px) scale(1.08) !important;
      opacity: .92 !important;
    }

    #encounter .rest-activity-card.idle:not(.unavailable):hover {
      transform: translateY(-2px) !important;
      border-color: rgba(255, 255, 255, .16) !important;
      box-shadow: 0 10px 26px rgba(0, 0, 0, .25) !important;
    }

    #encounter .rest-activity-card.unavailable:hover {
      opacity: .56 !important;
      transform: translateY(-1px) !important;
      filter: saturate(.55) contrast(.95) !important;
    }

    #encounter .rest-result-row:hover {
      transform: translateX(3px) !important;
      border-color: rgba(226, 183, 107, .24) !important;
      background-color: rgba(255, 255, 255, .045) !important;
    }

    @media (prefers-reduced-motion: reduce) {
      #encounter .rest-activity-card,
      #encounter .rest-result-row,
      #encounter .rest-side-panel,
      #encounter .rest-activity-art,
      #encounter .rest-activity-icon,
      #encounter .rest-activity-card::before,
      #encounter .rest-activity-art::after {
        transition: none !important;
        transform: none !important;
      }
    }

    /* Camp Rest layout fix: three-card vertical columns and non-overlapping active view. */
    #encounter .rest-encounter {
      min-height: calc(100vh - 120px) !important;
      max-height: calc(100vh - 132px) !important;
      grid-template-rows: auto auto minmax(0, 1fr) !important;
      gap: 8px !important;
      overflow: auto !important;
      padding-bottom: 118px !important;
    }

    #encounter .rest-hero {
      min-height: 92px !important;
      padding: 12px 14px !important;
      align-items: center !important;
    }

    #encounter .rest-top-rest-panel {
      min-height: 70px !important;
      height: auto !important;
      padding: 10px !important;
      grid-template-columns: 108px auto minmax(180px, 1fr) auto !important;
      gap: 10px !important;
      align-items: center !important;
    }

    #encounter .rest-top-rest-panel .rest-result-list {
      min-height: 48px !important;
      max-height: 64px !important;
      overflow: auto !important;
    }

    #encounter .rest-workspace {
      min-height: 0 !important;
      overflow: visible !important;
    }

    #encounter .rest-activity-board {
      min-height: 0 !important;
      overflow: visible !important;
    }

    #encounter .rest-category-stack {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      grid-auto-rows: auto !important;
      gap: 8px !important;
      align-items: stretch !important;
    }

    #encounter .rest-category-section {
      min-height: 0 !important;
      height: auto !important;
    }

    #encounter .rest-category-rest {
      grid-row: span 1 !important;
    }

    #encounter .rest-category-gathering .rest-activity-grid,
    #encounter .rest-category-production .rest-activity-grid,
    #encounter .rest-category-creative .rest-activity-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      align-items: stretch !important;
    }

    #encounter .rest-category-creative .rest-activity-card {
      min-height: 172px !important;
      grid-template-rows: auto auto minmax(92px, 1fr) auto !important;
    }

    #encounter .rest-category-creative .rest-activity-art {
      min-height: 92px !important;
    }

    #encounter .rest-category-rest .rest-activity-card {
      min-height: 214px !important;
    }

    #encounter .rest-category-rest .rest-activity-art {
      min-height: 154px !important;
    }

    @media (max-width: 980px) {
      #encounter .rest-category-stack,
      #encounter .rest-category-gathering .rest-activity-grid,
      #encounter .rest-category-production .rest-activity-grid,
      #encounter .rest-category-creative .rest-activity-grid {
        grid-template-columns: 1fr !important;
      }

      #encounter .rest-top-rest-panel {
        grid-template-columns: 1fr !important;
      }
    }

    #encounter .rest-category-stack {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    #encounter .rest-category-gathering .rest-activity-grid,
    #encounter .rest-category-production .rest-activity-grid,
    #encounter .rest-category-creative .rest-activity-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #encounter .rest-category-creative .rest-activity-card {
      min-height: 172px !important;
      grid-template-rows: auto auto minmax(92px, 1fr) auto !important;
    }

    #encounter .rest-category-creative .rest-activity-art {
      min-height: 92px !important;
    }

    /* Design section tabs: keep Shop/Event/Battle/Research/Rest aligned on one row. */
    #dm .dm-design-subtabs {
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      gap: 8px !important;
      align-items: stretch !important;
      margin: 8px 0 14px !important;
    }

    #dm .dm-design-subtabs button {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 54px !important;
      padding: 8px 12px !important;
      justify-content: flex-start !important;
      gap: 12px !important;
      white-space: nowrap !important;
    }

    #dm .dm-design-subtabs .dm-subtab-index {
      flex: 0 0 auto !important;
    }

    #dm .dm-design-subtabs b {
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    @media (max-width: 1120px) {
      #dm .dm-design-subtabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 760px) {
      #dm .dm-design-subtabs {
        grid-template-columns: 1fr !important;
      }
    }

    /* Player Options */
    .options-panel {
      display: grid;
      gap: 14px;
    }

    .options-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: start;
    }

    .options-card {
      display: grid;
      gap: 12px;
      min-height: 100%;
    }

    .options-profile-card {
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
      align-items: center;
    }

    .option-profile-line {
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 8px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, .035);
      display: grid;
      gap: 3px;
    }

    .option-profile-line span,
    .option-slider small,
    .toggle-row small {
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.25;
    }

    .option-slider {
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 8px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, .035);
      display: grid;
      gap: 8px;
    }

    .option-slider > span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .option-slider input[type="range"] {
      width: 100%;
      accent-color: var(--gold);
    }

    .option-sound-tests {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    body.reduce-motion *,
    body.no-hover-motion * {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }

    body.low-performance .dice-physics-stage,
    body.low-performance .dice-3d-stage,
    body.low-performance .dice-three-layer,
    body.low-performance .battle-projectile,
    body.low-performance .battle-impact,
    body.low-performance .battle-event-impact,
    body.simple-battle-fx .battle-projectile,
    body.simple-battle-fx .battle-impact,
    body.simple-battle-fx .battle-event-impact {
      display: none !important;
    }

    body.static-token-mode .battle-sprite-frame,
    body.static-token-mode .battle-gif-sprite,
    body.low-performance .battle-sprite-frame,
    body.low-performance .battle-gif-sprite {
      animation: none !important;
    }

    body.low-performance .rest-activity-card:hover,
    body.no-hover-motion .rest-activity-card:hover,
    body.low-performance .drawer-view,
    body.reduce-motion .drawer-view {
      transform: none !important;
    }

    @media (max-width: 900px) {
      .options-grid,
      .options-profile-card {
        grid-template-columns: 1fr;
      }
      .option-sound-tests {
        grid-template-columns: 1fr;
      }
    }

    .armor-schema-editor.is-hidden {
      display: none;
    }

    .armor-schema-preview {
      grid-column: 1 / -1;
      padding: 10px 12px;
      border: 1px solid rgba(116, 211, 255, .22);
      border-radius: 8px;
      background: rgba(47, 128, 168, .08);
      color: var(--text, #eef7ff);
      line-height: 1.45;
    }

    .armor-schema-preview.invalid {
      border-color: rgba(255, 103, 103, .55);
      background: rgba(168, 47, 47, .12);
      color: #ffb6b6;
    }

    .armor-final-value {
      display: grid;
      place-items: center;
      min-height: 34px;
      font-weight: 800;
    }

    .armor-stat-card .armor-formula,
    .armor-stat-card .armor-extra {
      grid-column: 1 / -1;
      line-height: 1.35;
    }

    .skill-row.has-disadvantage,
    .dice-skill-switch.has-disadvantage {
      box-shadow: inset 3px 0 0 rgba(255, 174, 80, .8);
    }
/* Rest Cooking */
.cooking-modal {
  width: min(1400px, 96vw);
  max-height: 94vh;
  overflow: auto;
}

@media (max-width: 760px) {
  #encounter .battle-shell,
  #dm .battle-shell {
    height: auto;
    grid-template-columns: 1fr;
  }

  #encounter .phaser-battle-board,
  #dm .phaser-battle-board {
    height: min(62dvh, 560px);
    min-height: 300px;
    flex: none;
  }
}

.cooking-header,
.cooking-recipe-title,
.cooking-vessel-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cooking-header {
  justify-content: space-between;
  margin-bottom: 14px;
}

.cooking-energy {
  min-width: 148px;
  padding: 10px 14px;
  border: 1px solid rgba(245, 194, 107, .4);
  border-radius: 12px;
  background: rgba(245, 194, 107, .08);
  text-align: right;
}

.cooking-energy small,
.cooking-energy span {
  display: block;
}

.cooking-energy b {
  color: var(--gold, #f5c26b);
  font-size: 1.35rem;
}

.cooking-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(340px, 1.1fr) minmax(300px, 1fr);
  gap: 12px;
}

.cooking-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(8, 13, 22, .6);
}

.cooking-panel h3 {
  margin: 0 0 4px;
}

.cooking-inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 58vh;
  overflow: auto;
  padding-right: 4px;
}

.cooking-inventory-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 8px;
  min-height: 62px;
  padding: 8px;
  text-align: left;
}

.cooking-inventory-item > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 9px;
  font-size: 1.6rem;
  line-height: 1;
}

.cooking-inventory-item > span img,
.cooking-vessel-item > span img,
.cooking-recipe-title > span img,
.cooking-result-icon img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cooking-inventory-item b,
.cooking-inventory-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cooking-inventory-item.selected {
  border-color: var(--gold, #f5c26b);
  box-shadow: 0 0 0 1px rgba(245, 194, 107, .25) inset;
}

.cooking-inventory-item.protected {
  opacity: .44;
}

.cooking-inventory-item em {
  position: absolute;
  right: 5px;
  top: 4px;
  padding: 1px 5px;
  border-radius: 8px;
  background: #32558a;
  font-size: .62rem;
  font-style: normal;
}

.cooking-inventory-item em.toxic,
.cooking-poison-warning {
  color: #dfff9a;
  background: rgba(102, 160, 32, .2);
}

.cooking-vessel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cooking-vessel-tabs button.active {
  border-color: var(--gold, #f5c26b);
  color: var(--gold, #f5c26b);
}

.cooking-vessel-drop {
  display: grid;
  place-items: center;
  min-height: 150px;
  margin: 10px 0;
  border: 1px dashed rgba(245, 194, 107, .45);
  border-radius: 50% 50% 18px 18px;
  background: radial-gradient(circle at 50% 80%, rgba(230, 126, 34, .18), transparent 65%);
}

.cooking-vessel-drop:focus-visible {
  outline: 2px solid var(--gold, #f5c26b);
  outline-offset: 3px;
}

.cooking-vessel-art {
  position: relative;
  font-size: 4.2rem;
  line-height: 1;
}

.cooking-vessel-art span {
  position: absolute;
  left: 50%;
  bottom: 72%;
  font-size: 1.3rem;
  opacity: .75;
  transform: translateX(-50%);
  animation: cookingSteam 1.8s ease-in-out infinite;
}

.cooking-vessel-list,
.cooking-recipe-list {
  display: grid;
  gap: 8px;
  max-height: 42vh;
  overflow: auto;
}

.crafting-recipe-more {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-style: dashed;
}

.crafting-recipe-more small {
  opacity: .7;
}

.cooking-vessel-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
}

.cooking-vessel-item > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 8px;
  font-size: 1.45rem;
  line-height: 1;
}

.cooking-qty {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cooking-qty button,
.cooking-remove {
  min-width: 28px;
  min-height: 28px;
  padding: 2px 7px;
}

.cooking-preview {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}

.cooking-recipe-card {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.cooking-recipe-title > span {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 9px;
  font-size: 1.8rem;
  line-height: 1;
}

.cooking-recipe-title div,
.cooking-recipe-title small {
  display: block;
}

.cooking-recipe-card ul {
  display: grid;
  gap: 3px;
  padding: 0;
  list-style: none;
}

.cooking-recipe-card li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.cooking-recipe-card li.missing {
  color: #ff9c9c;
}

.cooking-mobile-tabs {
  display: none;
}

.cooking-result-card {
  width: min(460px, 92vw);
  overflow: hidden;
  text-align: center;
}

.alchemist-modal {
  border-color: color-mix(in srgb, #9c6cff 55%, var(--line));
  background: radial-gradient(circle at 50% 22%, rgba(108, 62, 171, .18), transparent 40%), var(--panel);
}

.alchemist-cauldron-panel {
  box-shadow: inset 0 0 40px rgba(94, 54, 154, .12);
}

.alchemist-cauldron-drop {
  border-color: rgba(156, 108, 255, .62);
  background: radial-gradient(circle, rgba(89, 230, 193, .14), rgba(64, 35, 105, .16));
}

.alchemist-cauldron-art {
  color: #b99aff;
  text-shadow: 0 0 18px rgba(89, 230, 193, .7);
}

.alchemist-ingredient.selected,
.alchemist-cauldron-item {
  border-color: rgba(89, 230, 193, .72);
}

.alchemist-confirm-note {
  color: #7ef1d3;
  font-weight: 700;
}

.cooking-result-icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 16px auto 8px;
  overflow: hidden;
  border-radius: 16px;
  font-size: 5rem;
  line-height: 1;
}

.cooking-result-steam {
  font-size: 2rem;
  animation: cookingSteam 1.2s ease-out both;
}

.cooking-discovered {
  color: var(--gold, #f5c26b);
  font-weight: 700;
}

@keyframes cookingSteam {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.9); }
  50% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -16px) scale(1.12); }
}

@media (max-width: 980px) {
  .cooking-layout {
    grid-template-columns: 1fr;
  }

  .cooking-mobile-tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 8px;
    color: var(--gold, #f5c26b);
    font-size: .78rem;
    text-transform: uppercase;
  }

  .cooking-inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 36vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cooking-vessel-art span,
  .cooking-result-steam {
    animation: none;
  }
}

/* V1 accessibility and release hardening --------------------------------- */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 50%;
  min-height: 42px;
  padding: 10px 16px;
  border: 2px solid #f2cb83;
  border-radius: 8px;
  color: #171006;
  background: #f2cb83;
  font-weight: 900;
  transform: translate(-50%, -150%);
  transition: transform .12s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

:where(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--op-focus, currentColor);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(7, 9, 11, .86);
}

:where(.drawer-view, .modal, .name-gate, #appRoot)[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.drawer-view,
.modal-card,
.name-card {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.drawer-view[aria-hidden="true"],
.modal[aria-hidden="true"],
.name-gate[aria-hidden="true"] {
  pointer-events: none;
}

@media (max-width: 760px) {
  .drawer-view {
    overscroll-behavior: contain;
  }

  .drawer-view :where(button, input, select, textarea),
  .modal :where(button, input, select, textarea),
  .name-gate :where(button, input, select, textarea) {
    min-height: 44px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #bbc3c0;
    --line: rgba(255, 244, 220, .28);
    --line-strong: rgba(242, 203, 131, .72);
  }

  .outpost-surface,
  .panel,
  .modal-card,
  .drawer-view {
    border-color: currentColor !important;
  }
}

@media (forced-colors: active) {
  .skip-link,
  .outpost-action-primary,
  .outpost-action-secondary {
    forced-color-adjust: auto;
  }

  :where(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
  }
}

/* Character Profile presentation is owned by
 * css/outpost-design-lab-character.css. The historical cinematic/profile
 * revisions were removed after the live renderer moved to op-character-* DOM. */
/* Shared Loot Table presentation; resolution and mutation remain Host-authoritative. */
.loot-open-modal,
.loot-result-modal { max-width: 720px; }
.loot-preview-list { display: grid; gap: 6px; margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.loot-preview-list span::before { content: "✓ "; color: var(--success, #65d68a); }
.loot-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 16px 0; }
.loot-result-card { display: grid; place-items: center; gap: 6px; min-height: 140px; padding: 12px; text-align: center; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2, rgba(255,255,255,.04)); opacity: 0; transform: translateY(8px) scale(.98); animation: loot-result-reveal .28s ease forwards; animation-delay: var(--loot-delay, 0ms); }
.loot-result-card .shop-card-icon { width: 64px; height: 64px; }
.loot-result-card .shop-card-icon img { width: 100%; height: 100%; object-fit: contain; }
@keyframes loot-result-reveal { to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .loot-result-card { animation-duration: 1ms; } }
.data-table {
  contain: layout style;
}

.data-row {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 92px;
}
.dm-workspace-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 10px 0 14px;
}

.data-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 8px;
  min-height: 34px;
}

.data-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-pagination button {
  min-width: 76px;
}

@media (max-width: 680px) {
  .data-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}

.dm-workspace-switch button.active {
  border-color: var(--gold);
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

.schema-contract-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 10px;
}
.schema-contract-card.warning { border-style: dashed; }
.schema-contract-card.invalid { border-width: 2px; }
.schema-contract-warning,
.schema-contract-error { font-size: .9rem; }
[data-item-schema-field].is-hidden { display: none !important; }


/* Character Creation wizard */
.character-creation-shell{max-width:1180px;margin:0 auto;padding:24px;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;align-content:start;gap:18px}
.character-creation-shell>*{grid-column:1;min-width:0;position:relative;inset:auto;transform:none}
.character-creation-header{display:flex;justify-content:space-between;gap:18px;align-items:center;width:auto;padding:20px 22px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,rgba(201,152,74,.12),rgba(255,255,255,.025))}
.character-creation-header>div{display:grid;gap:4px}.character-creation-header small{color:var(--gold-bright);font-weight:800;letter-spacing:.12em}.character-creation-header b{font-size:1.45rem}.character-creation-header span{color:var(--text-muted)}
.character-creation-progress{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px}.character-creation-progress button{display:grid;gap:4px;justify-items:start;padding:9px 10px;border-radius:12px;opacity:.62;min-width:0}.character-creation-progress button.active{opacity:1;border-color:var(--gold-bright);background:rgba(201,152,74,.1)}
.character-creation-progress span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);font-size:.75rem}.character-creation-progress b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.character-creation-progress button.complete{opacity:.86;border-color:rgba(110,221,158,.28)}.character-creation-progress button.complete span{background:rgba(110,221,158,.16);color:#9de9bd}.character-creation-progress button.upcoming{opacity:.42;cursor:not-allowed}
.character-creation-stage{min-height:420px;padding:24px;border:1px solid var(--border);border-radius:18px;background:rgba(8,10,14,.72)}
.creation-intro{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.creation-intro span,.creation-note,.creation-empty{color:var(--text-muted)}
.creation-ability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.creation-ability-grid label{display:grid;gap:8px;padding:18px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025)}.creation-ability-grid span{font-weight:800;letter-spacing:.08em}.creation-ability-grid select{font-size:1.2rem}
.creation-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.creation-feature-column{min-width:0;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(155deg,rgba(255,255,255,.025),rgba(0,0,0,.08))}.creation-feature-column.trait{--creation-feature-accent:#6fd49a}.creation-feature-column.flaw{--creation-feature-accent:#ed987f}.creation-feature-column>header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.07)}.creation-feature-column>header>div{display:grid;gap:2px}.creation-feature-column>header small{color:var(--creation-feature-accent);font-size:.65rem;font-weight:800;letter-spacing:.11em}.creation-feature-column>header b{font-size:1.05rem}.creation-feature-column>header>span{padding:4px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:var(--text-muted);font-size:.72rem}.creation-feature-list{display:grid;gap:8px}
.creation-feature-card{position:relative;display:flex;gap:12px;min-height:88px;padding:13px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:rgba(255,255,255,.02);transition:border-color .16s ease,background .16s ease,opacity .16s ease}.creation-feature-card:hover{border-color:color-mix(in srgb,var(--creation-feature-accent) 48%,var(--border))}.creation-feature-card.selected{border-color:var(--creation-feature-accent);background:color-mix(in srgb,var(--creation-feature-accent) 10%,transparent)}.creation-feature-card.limit-reached{opacity:.42;cursor:not-allowed}.creation-feature-card.limit-reached:hover{border-color:var(--border)}.creation-feature-copy{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:start;min-width:0}.creation-feature-copy>b{min-width:0}.creation-feature-copy>small{grid-column:1/-1;color:var(--text-muted);line-height:1.4}.creation-feature-copy>em{grid-column:2;grid-row:1;padding:3px 7px;border-radius:999px;font-size:.62rem;font-style:normal;font-weight:800;white-space:nowrap}.creation-feature-copy>em.active{color:#a8e6bf;background:rgba(76,190,125,.12)}.creation-feature-copy>em.guided{color:#f2c38e;background:rgba(225,143,67,.12)}.creation-feature-copy>em.narrative{color:#c6b6e5;background:rgba(142,105,202,.12)}
.creation-feature-card input[type="checkbox"]{width:18px;height:18px;min-width:18px;margin:2px 0 0;padding:0;accent-color:var(--gold-bright)}
.creation-feature-column>header span.valid{border-color:rgba(110,221,158,.26);color:#9de9bd;background:rgba(110,221,158,.07)}.creation-selection-summary{margin-bottom:14px;padding:14px 16px;border:1px solid rgba(201,152,74,.24);border-radius:13px;background:rgba(201,152,74,.055)}.creation-selection-dashboard{display:grid;grid-template-columns:repeat(2,minmax(0,150px)) minmax(240px,1fr);gap:10px}.creation-selection-dashboard>article{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.12)}.creation-selection-dashboard>article.trait{border-color:rgba(111,212,154,.2)}.creation-selection-dashboard>article.flaw{border-color:rgba(237,152,127,.2)}.creation-selection-dashboard>article small{grid-column:1/-1;font-size:.62rem;font-weight:800;letter-spacing:.1em;color:var(--text-muted)}.creation-selection-dashboard>article b{font-size:1.05rem}.creation-selection-dashboard>article span{font-size:.7rem;color:var(--text-muted);align-self:center}.creation-selection-dashboard>p{grid-column:1/-1;margin:2px 0 0;color:var(--text-muted);font-size:.74rem}.creation-selected-group{display:grid;gap:5px}.creation-selected-group:nth-of-type(2){grid-column:3;grid-row:2}.creation-selected-group>small{color:var(--gold-bright);font-size:.61rem;font-weight:800;letter-spacing:.09em}.creation-selected-group>div{display:flex;flex-wrap:wrap;gap:5px}.creation-selected-group button{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;font-size:.69rem}.creation-selected-group button i{font-size:.9rem;font-style:normal;line-height:1}.creation-selected-empty{font-size:.72rem;color:var(--text-muted)}
.creation-choice-stack{max-width:620px;display:grid;gap:14px}.creation-choice-stack label{display:grid;gap:7px}.creation-class-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.creation-class-grid button{display:grid;gap:8px;text-align:left;padding:16px;border-radius:14px;min-height:108px}.creation-class-grid button.selected{border-color:var(--gold-bright);background:rgba(201,152,74,.1)}.creation-class-grid small{color:var(--text-muted);line-height:1.45}
.creation-loadout-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;padding:16px 18px;border:1px solid rgba(110,221,158,.22);border-radius:14px;background:linear-gradient(135deg,rgba(110,221,158,.07),rgba(255,255,255,.018))}.creation-loadout-summary>div{display:grid;gap:3px}.creation-loadout-summary small{color:#9de9bd;font-size:.63rem;font-weight:800;letter-spacing:.11em}.creation-loadout-summary b{font-size:1.14rem}.creation-loadout-summary span{color:var(--text-muted);font-size:.77rem}.creation-loadout-summary strong{padding:5px 10px;border:1px solid rgba(110,221,158,.26);border-radius:999px;color:#9de9bd;font-size:.68rem;letter-spacing:.08em}.creation-equipment-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.creation-equipment-list article{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.018)}.creation-equipment-art{width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(0,0,0,.14);overflow:hidden}.creation-equipment-list article>div{display:grid;gap:3px;min-width:0}.creation-equipment-list article>div small{color:var(--gold-bright);font-size:.62rem;font-weight:800;letter-spacing:.08em}.creation-equipment-list article>div span{color:var(--text-muted);font-size:.74rem}.creation-equipment-list article>em{padding:4px 7px;border-radius:999px;background:rgba(201,152,74,.08);color:#e5c995;font-size:.64rem;font-style:normal;white-space:nowrap}.creation-loadout-missing{display:grid;gap:5px;padding:18px;border:1px dashed rgba(237,152,127,.35);border-radius:14px}.creation-loadout-missing span{line-height:1.45}
.creation-review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.creation-review-grid article{position:relative;display:grid;gap:7px;padding:15px;border:1px solid rgba(110,221,158,.18);border-radius:14px;background:linear-gradient(145deg,rgba(110,221,158,.035),rgba(255,255,255,.012))}.creation-review-grid article.pending{border-color:rgba(201,152,74,.23);background:rgba(201,152,74,.045)}.creation-review-grid article>span{display:flex;align-items:center;gap:7px;color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.creation-review-grid article>span i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(110,221,158,.14);color:#9de9bd;font-size:.66rem;font-style:normal}.creation-review-grid article.pending>span i{background:rgba(201,152,74,.13);color:var(--gold-bright)}.creation-review-grid article>b{line-height:1.4}.creation-review-grid article>small{color:var(--text-muted)}.creation-review-warning{margin-top:14px;padding:12px;border-radius:10px;background:rgba(220,120,80,.12)}
.creation-review-blockers{display:grid;gap:12px;margin-top:16px;padding:16px;border:1px solid rgba(244,140,106,.4);border-radius:14px;background:linear-gradient(145deg,rgba(180,72,52,.12),rgba(0,0,0,.08))}.creation-review-blockers>header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.creation-review-blockers>header>div{display:grid;gap:3px}.creation-review-blockers>header small{color:#efbd82;font-size:.62rem;font-weight:800;letter-spacing:.1em}.creation-review-blockers>header span{padding:4px 8px;border:1px solid rgba(244,140,106,.2);border-radius:999px;color:#efbd82;font-size:.7rem}.creation-review-blockers>div{display:grid;gap:8px}.creation-review-blockers article{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-radius:10px;background:rgba(0,0,0,.2)}.creation-review-blockers article>div{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center}.creation-review-blockers article small{color:#efbd82;font-size:.61rem;font-weight:800;letter-spacing:.08em}.creation-review-blockers article span{color:var(--gold-bright);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.creation-review-blockers article b{grid-column:1/-1;font-weight:600;line-height:1.4}.creation-review-blockers article button{white-space:nowrap}.creation-review-blockers article button span{font-size:.9rem}
.creation-foundation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.creation-foundation-grid article{display:grid;align-content:start;gap:8px;min-height:150px;padding:20px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,rgba(201,152,74,.08),rgba(255,255,255,.02))}.creation-foundation-grid small,.creation-final-check small{color:var(--gold-bright);font-weight:800;letter-spacing:.1em}.creation-foundation-grid b{font-size:1.08rem}.creation-foundation-grid span,.creation-final-check span{color:var(--text-muted);line-height:1.55}.creation-skill-foundation{grid-template-columns:repeat(3,minmax(0,1fr))}.creation-policy-banner,.creation-final-check{display:flex;flex-direction:column;gap:5px;margin-top:16px;padding:14px 16px;border:1px dashed rgba(201,152,74,.42);border-radius:13px;background:rgba(201,152,74,.06)}.creation-policy-banner span{color:var(--text-muted);line-height:1.5}.creation-create-stage{display:grid;gap:16px}.creation-final-check{margin-top:0;border-style:solid}.creation-final-check b{font-size:1.15rem}.creation-commit-assurances{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.creation-commit-assurances span{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(110,221,158,.18);border-radius:999px;background:rgba(110,221,158,.055);color:#b9dbc7;font-size:.7rem;line-height:1.2}.creation-commit-assurances i{color:#8ddbae;font-style:normal}
.creation-stage-status{max-width:62ch;font-size:.82rem;color:var(--text-muted);text-align:center}.creation-stage-status.ok{color:#a8d9aa}.creation-stage-status.warn{color:#e4b982}.character-creation-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.character-creation-actions .primary{min-width:180px}.character-manage-actions{display:flex;gap:8px;align-items:center}
@media(max-width:1080px){.character-creation-progress{grid-template-columns:repeat(5,1fr)}}
@media(max-width:900px){.character-creation-progress{grid-template-columns:repeat(3,1fr)}.creation-feature-grid,.creation-review-grid,.creation-equipment-list,.creation-foundation-grid,.creation-skill-foundation{grid-template-columns:1fr}.creation-selection-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}.creation-selected-group,.creation-selected-group:nth-of-type(2){grid-column:1/-1;grid-row:auto}.creation-class-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.character-creation-shell{padding:12px}.character-creation-header{align-items:flex-start;flex-direction:column}.character-creation-progress{grid-template-columns:repeat(2,1fr)}.creation-ability-grid{grid-template-columns:repeat(2,1fr)}.creation-class-grid{grid-template-columns:1fr}.character-creation-stage{padding:16px}.character-creation-actions{flex-wrap:wrap}.creation-stage-status{order:3;width:100%;text-align:center}.creation-loadout-summary{align-items:flex-start;flex-direction:column}.creation-equipment-list article{grid-template-columns:48px minmax(0,1fr)}.creation-equipment-list article>em{grid-column:2;justify-self:start}.creation-feature-copy{grid-template-columns:1fr}.creation-feature-copy>em{grid-column:1;grid-row:auto;justify-self:start}.creation-review-blockers article{grid-template-columns:1fr}.creation-review-blockers article button{justify-self:start}.creation-commit-assurances{display:grid}}

/* Character progression dashboard */
.progression-dashboard{margin-bottom:16px}
.progression-resource-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 14px}.progression-resource-strip article{position:relative;display:grid;gap:3px;min-height:94px;padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));overflow:hidden}.progression-resource-strip article::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--progression-accent,rgba(255,255,255,.15))}.progression-resource-strip article.pool{--progression-accent:#d6b36a}.progression-resource-strip article.bonus{--progression-accent:#a77cff}.progression-resource-strip article.spent{--progression-accent:#5bb9e8}.progression-resource-strip article.cap{--progression-accent:#63c58b}.progression-resource-strip small{color:var(--gold-bright);font-size:.66rem;font-weight:800;letter-spacing:.09em}.progression-resource-strip b{font-size:1.08rem}.progression-resource-strip span{font-size:.74rem;line-height:1.35;opacity:.7}
.progression-layout{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(340px,1.15fr);gap:14px}
.progression-ability-panel,.progression-tree-panel{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;background:linear-gradient(155deg,rgba(255,255,255,.032),rgba(255,255,255,.014))}
.progression-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.07)}.progression-panel-heading>div{display:grid;gap:2px}.progression-panel-heading small,.progression-loadout-heading small{color:var(--gold-bright);font-size:.65rem;font-weight:800;letter-spacing:.1em}.progression-panel-heading b{font-size:1.04rem}.progression-panel-heading>span{padding:4px 8px;border:1px solid rgba(214,179,106,.22);border-radius:999px;background:rgba(214,179,106,.07);font-size:.68rem;color:#e7d2a2;white-space:nowrap}
.progression-ability-list{display:grid;grid-template-columns:1fr;gap:8px;margin:12px 0}
.progression-ability-row{display:grid;grid-template-columns:minmax(64px,1fr) 68px 76px;align-items:center;gap:9px;padding:9px 10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(0,0,0,.1)}
.progression-ability-row span{display:flex;flex-direction:column;gap:2px}.progression-ability-row small{font-size:.68rem;opacity:.68}.progression-ability-effective{align-items:center;padding-left:8px;border-left:1px solid rgba(255,255,255,.08)}.progression-ability-effective b{font-size:1.06rem}.progression-ability-allocation{align-items:stretch}.progression-ability-row input{width:100%;min-width:0;height:34px;padding:5px;text-align:center}
.progression-action-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:11px;border-top:1px solid rgba(255,255,255,.07)}.progression-action-row>span{font-size:.76rem;opacity:.72}
.progression-policy-note{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px dashed rgba(255,255,255,.14);border-radius:12px}
.progression-policy-note span{opacity:.72;line-height:1.45}
.progression-loadout-heading{display:grid;gap:3px;margin-top:15px}.progression-loadout-heading b{font-size:.9rem}
.progression-loadout-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.progression-loadout-summary article{position:relative;display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.1)}
.progression-loadout-summary article.active{border-color:rgba(85,168,255,.3)}.progression-loadout-summary article.passive{border-color:rgba(103,205,142,.3)}.progression-loadout-summary article.reaction{border-color:rgba(255,138,198,.3)}
.progression-loadout-summary small{grid-column:1/-1;font-size:.62rem;font-weight:800;letter-spacing:.08em;opacity:.62}.progression-loadout-summary b{font-size:.92rem}.progression-loadout-summary strong{font-size:.9rem;color:var(--gold-bright)}.progression-loadout-summary span{grid-column:1/-1;font-size:.74rem;line-height:1.35;opacity:.68}
@media(max-width:1100px){.progression-resource-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.progression-layout{grid-template-columns:1fr}.progression-loadout-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.progression-resource-strip,.progression-loadout-summary,.progression-ability-list{grid-template-columns:1fr}.progression-panel-heading,.progression-action-row{align-items:stretch;flex-direction:column}.progression-panel-heading>span{align-self:flex-start}.progression-action-row button{width:100%}}
@media(max-width:430px){.progression-ability-row{grid-template-columns:minmax(54px,1fr) 58px 70px;padding:8px}.progression-ability-row input{height:32px}}

/* Battle Skill Card hand — prepared Active Skills only */
.battle-skill-hand{display:flex;align-items:flex-end;gap:10px;min-height:94px;padding:10px 8px 4px}
.battle-skill-card{position:relative;width:100px;min-width:100px;min-height:84px;padding:8px;border:1px solid rgba(226,183,107,.42);border-radius:11px;background:linear-gradient(180deg,rgba(34,37,43,.98),rgba(16,18,22,.98));box-shadow:0 7px 18px rgba(0,0,0,.28);display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:minmax(38px,auto) auto;align-items:start;gap:4px 7px;text-align:left;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;cursor:grab}
.battle-skill-card:hover,.battle-skill-card:focus-visible{transform:translateY(-8px) scale(1.025);z-index:3;border-color:var(--gold-bright);box-shadow:0 15px 26px rgba(0,0,0,.42)}
.battle-skill-card:active{cursor:grabbing}
.battle-skill-card-art{grid-row:1;width:38px;height:38px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:rgba(255,255,255,.035);font-size:1.05rem}
.battle-skill-card-art img{width:100%;height:100%;object-fit:cover}
.battle-skill-card b{font-size:.72rem;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}
.battle-skill-card small{grid-column:1/3;align-self:end;font-size:.58rem;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.battle-skill-card-index{position:absolute;top:-6px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--gold-bright);color:#17130c;font-size:.62rem;font-weight:800;display:grid;place-items:center}
.battle-skill-hand-empty{align-self:center;color:var(--muted);font-size:.72rem;padding:0 10px}
.skill-kind-badge{margin-left:auto;padding:2px 6px;border:1px solid var(--line);border-radius:999px;font-size:.56rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.skill-kind-reaction .skill-kind-badge{border-color:rgba(124,181,255,.4)}
.skill-kind-passive .skill-kind-badge{border-color:rgba(124,220,156,.35)}
@media(max-width:900px){.battle-skill-hand{gap:7px;overflow-x:auto;max-width:56vw;scrollbar-width:thin}.battle-skill-card{width:92px;min-width:92px;min-height:82px}.battle-skill-card:hover,.battle-skill-card:focus-visible{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.battle-skill-card{transition:none}.battle-skill-card:hover,.battle-skill-card:focus-visible{transform:none}}

/* Battle Skill Card UX Phase 2: local-only state, never global redraw animation. */
.battle-skill-card.action-unavailable{opacity:.64;filter:saturate(.62);cursor:not-allowed}
.battle-skill-card.needs-target{box-shadow:0 0 0 1px rgba(103,232,249,.45),0 8px 18px rgba(0,0,0,.28)}
.battle-skill-card.pending-active{transform:translateY(-9px);box-shadow:0 0 0 2px rgba(103,232,249,.72),0 16px 32px rgba(0,0,0,.42)}
.battle-skill-card.pending-dim{opacity:.6}
.battle-skill-card::after{content:attr(data-card-state-label);position:absolute;left:7px;bottom:-7px;padding:3px 6px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#10141a;color:#dbe1ea;font-size:.5rem;font-weight:850;letter-spacing:.07em;line-height:1.15;box-shadow:0 3px 8px rgba(0,0,0,.36);pointer-events:none}
.battle-skill-card[data-action-state="usable"]::after{border-color:rgba(110,221,158,.42);color:#9de9bd}
.battle-skill-card.waiting-turn{opacity:.54;filter:saturate(.45)}
.battle-skill-card.waiting-turn::after{border-color:rgba(150,163,178,.34);color:#aeb8c5}
.battle-skill-card.insufficient-mp{border-color:rgba(116,157,255,.55);box-shadow:inset 0 0 0 1px rgba(116,157,255,.16),0 7px 18px rgba(0,0,0,.28)}
.battle-skill-card.insufficient-mp::after{border-color:rgba(116,157,255,.48);color:#a8c0ff}
.battle-skill-card.spent-action{filter:grayscale(.28) saturate(.58);opacity:.6}
.battle-skill-card.spent-action::after{border-color:rgba(255,184,103,.38);color:#efbd82}
.battle-skill-card.invalid-target{border-color:rgba(244,106,111,.52);box-shadow:inset 0 0 0 1px rgba(244,106,111,.14),0 7px 18px rgba(0,0,0,.28)}
.battle-skill-card.invalid-target::after{border-color:rgba(244,106,111,.48);color:#ff9da1}
.battle-skill-card.pending-target{border-color:rgba(103,232,249,.74)}
.battle-skill-card.aoe-targeting{border-color:rgba(240,168,75,.8);box-shadow:0 0 0 2px rgba(240,168,75,.6),0 16px 32px rgba(0,0,0,.42)}
.battle-skill-card.aoe-targeting::after{border-color:rgba(240,168,75,.58);color:#f4c47e}
.battle-skill-card.pending-dim::after{opacity:.48}
body.battle-skill-card-dragging .phaser-battle-board,
body.battle-skill-card-dragging .battle-board{cursor:crosshair}
.battle-skill-card.card-used{animation:battle-skill-card-used .42s ease-out}
@keyframes battle-skill-card-used{
  0%{transform:translateY(-12px) scale(1.025)}
  45%{transform:translateY(-18px) scale(1.045)}
  100%{transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .battle-skill-card.card-used{animation:none}
  .battle-skill-card{transition:none!important}
}
/* Camp Phase C4: visual, short-session mini-games. Only the open activity owns
   these scene images and animations; closing the modal releases the runtime. */
.rest-minigame-modal{width:min(920px,94vw);max-width:none;max-height:92vh;overflow:auto}
.rest-minigame-ability{display:inline-grid;gap:1px;margin-left:auto;padding:5px 9px;border:1px solid rgba(111,183,200,.3);border-radius:10px;background:rgba(111,183,200,.08);vertical-align:middle}
.rest-minigame-ability small{color:var(--muted);font-size:.58rem;letter-spacing:.08em}.rest-minigame-ability b{color:#bfefff;font-size:.68rem}.rest-minigame-ability em{color:rgba(220,242,246,.7);font-size:.56rem;font-style:normal;white-space:nowrap}
.rest-ready-actions{align-items:flex-start;flex-wrap:wrap}.rest-ready-actions small{flex:1 1 220px;color:var(--muted);line-height:1.45;padding-top:5px}
.rest-fishing-layout{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;min-height:350px}
.rest-fishing-meter{position:relative;overflow:hidden;border:1px solid rgba(111,183,200,.46);border-radius:15px;background:linear-gradient(180deg,rgba(32,111,138,.48),rgba(5,25,35,.88));box-shadow:inset 0 0 24px rgba(0,0,0,.52)}
.rest-fishing-meter::before{content:"";position:absolute;inset:8px 11px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 11%);opacity:.5}
.rest-fishing-meter .rest-tracking-progress{position:absolute;z-index:1;left:7px;bottom:7px;width:10px;height:calc(100% - 14px);border-radius:999px;background:rgba(0,0,0,.45)}
.rest-fishing-meter .rest-tracking-progress span{position:absolute;inset:auto 0 0;height:10%;border-radius:inherit;background:linear-gradient(0deg,#43a9dc,#f5d477);box-shadow:0 0 16px rgba(92,200,255,.48);transition:height .1s linear}
.rest-fishing-meter .rest-tracking-zone{z-index:2;left:24px;right:8px;top:auto;bottom:35%;width:auto;height:18%;transform:translateY(50%);border-color:rgba(245,212,119,.78);border-radius:10px;background:rgba(245,212,119,.14);transition:bottom .06s linear}
.rest-fishing-meter .rest-tracking-fish{z-index:3;left:50px;top:auto;bottom:50%;width:25px;height:15px;transform:translate(-50%,50%);transition:bottom .06s linear}
.rest-fishing-meter.caught .rest-tracking-zone{border-color:#71e2a5;background:rgba(78,211,143,.17);box-shadow:0 0 22px rgba(78,211,143,.28)}
.rest-fishing-stage{--rest-minigame-image:none;position:relative;min-height:350px;overflow:hidden;border:1px solid rgba(111,183,200,.42);border-radius:16px;background-image:linear-gradient(180deg,rgba(5,18,27,.08),rgba(2,12,18,.48)),var(--rest-minigame-image);background-position:center;background-size:cover;box-shadow:inset 0 0 54px rgba(0,0,0,.34);cursor:pointer;touch-action:none;user-select:none;transition:filter .16s ease,transform .16s ease}
.rest-fishing-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;background:linear-gradient(180deg,transparent,rgba(3,17,24,.66));pointer-events:none}
.rest-fishing-line{position:absolute;z-index:2;left:22%;top:-2%;width:2px;height:62%;background:rgba(239,244,224,.75);transform-origin:top;box-shadow:0 0 3px rgba(255,255,255,.5);transition:height .18s ease,transform .18s ease}
.rest-fishing-bobber{position:absolute;z-index:3;left:calc(22% - 7px);top:58%;width:15px;height:20px;border-radius:50% 50% 46% 46%;background:linear-gradient(#f3eee0 0 45%,#d9534f 46%);box-shadow:0 5px 12px rgba(0,0,0,.35);transition:top .12s ease,transform .12s ease}
.rest-fishing-splash{position:absolute;z-index:2;left:22%;top:61%;width:12px;height:5px;border:2px solid rgba(211,244,255,.8);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2)}
.rest-fishing-state-label{position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);padding:7px 12px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(4,13,18,.78);color:#edf8f5;box-shadow:0 5px 18px rgba(0,0,0,.34);white-space:nowrap}
.rest-fishing-stage[data-fishing-state="waiting"] .rest-fishing-bobber{animation:restFishingFloat 1.4s ease-in-out infinite}
.rest-fishing-stage[data-fishing-state="bite"] .rest-fishing-bobber{top:65%;transform:scale(.82)}
.rest-fishing-stage[data-fishing-state="bite"] .rest-fishing-splash{animation:restFishingSplash .55s ease-out infinite}
.rest-fishing-stage[data-fishing-state="reeling"]{filter:saturate(1.13) contrast(1.04)}
.rest-fishing-stage[data-fishing-state="reeling"] .rest-fishing-line{height:57%;transform:rotate(-3deg)}
.rest-fishing-stage[data-fishing-state="reeling"] .rest-fishing-bobber{top:54%;transform:translateY(-5px)}
.rest-fishing-stage[data-fishing-state="releasing"] .rest-fishing-line{height:67%;transform:rotate(2deg)}
.rest-fishing-stage[data-fishing-state="releasing"] .rest-fishing-bobber{top:64%}
.rest-fishing-stage[data-fishing-state="escaped"]{filter:grayscale(.45) brightness(.72)}
@keyframes restFishingFloat{50%{transform:translateY(4px)}}
@keyframes restFishingSplash{0%{opacity:.9;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}

.rest-search-field{--rest-minigame-image:none;min-height:370px;background-image:linear-gradient(180deg,rgba(6,16,11,.08),rgba(3,9,7,.48)),var(--rest-minigame-image);background-position:center;background-size:cover}
.rest-search-object{width:78px;min-height:78px;padding:5px;border-radius:50%;background:rgba(6,12,10,.62);box-shadow:0 7px 16px rgba(0,0,0,.42);backdrop-filter:blur(2px);transition:transform .13s ease,border-color .13s ease,opacity .13s ease}
.rest-search-object:hover,.rest-search-object:focus-visible{transform:translate(-50%,-50%) scale(1.1);z-index:3;border-color:#f2d28b}
.rest-search-object i{display:grid;place-items:center;width:42px;height:42px;overflow:hidden;border-radius:50%;font-size:1.45rem;background:rgba(0,0,0,.25)}
.rest-search-object i img{width:100%;height:100%;object-fit:cover}.rest-search-object b{max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.62rem;text-shadow:0 2px 3px #000}.rest-search-object small{display:none}
.rest-search-object:disabled{opacity:.28;transform:translate(-50%,-50%) scale(.84)}

.rest-hunt-lane{--rest-minigame-image:none;height:370px;background-image:linear-gradient(180deg,rgba(8,17,10,.06),rgba(4,10,6,.35)),var(--rest-minigame-image);background-position:center;background-size:cover;cursor:crosshair;box-shadow:inset 0 0 50px rgba(0,0,0,.38)}
.rest-hunt-aim{top:25%;bottom:20%;width:16%;border:1px solid rgba(255,244,185,.58);border-radius:50%;background:radial-gradient(circle,transparent 0 38%,rgba(230,196,118,.13) 40%,transparent 45%);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 28px rgba(214,173,91,.25)}
.rest-hunt-aim::before,.rest-hunt-aim::after{content:"";position:absolute;background:rgba(255,244,185,.72)}.rest-hunt-aim::before{left:50%;top:-10%;bottom:-10%;width:1px}.rest-hunt-aim::after{top:50%;left:-10%;right:-10%;height:1px}
.rest-hunt-target{top:68%;width:158px;height:116px;border-radius:0;background:transparent url("assets/ui/rest/hunting-deer-v1.png") center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 9px 7px rgba(0,0,0,.48));transition:filter .12s ease}
.rest-hunt-lane[data-hunt-state="hidden"] .rest-hunt-target{opacity:.5}.rest-hunt-lane[data-hunt-state="hit"] .rest-hunt-target{filter:drop-shadow(0 0 10px rgba(255,220,130,.85)) brightness(1.35)}.rest-hunt-lane[data-hunt-state="miss"]{filter:saturate(.62)}

@media(max-width:660px){.rest-minigame-modal{width:96vw}.rest-fishing-layout{grid-template-columns:58px minmax(0,1fr);min-height:270px}.rest-fishing-stage{min-height:270px}.rest-search-field,.rest-hunt-lane{min-height:300px;height:300px}.rest-search-object{width:64px;min-height:64px}.rest-search-object i{width:34px;height:34px}.rest-hunt-target{width:128px;height:94px}.rest-minigame-ability{display:flex;margin:7px 0 0}}
@media(prefers-reduced-motion:reduce){.rest-fishing-stage,.rest-fishing-line,.rest-fishing-bobber,.rest-search-object,.rest-hunt-target{transition:none}.rest-fishing-stage[data-fishing-state="waiting"] .rest-fishing-bobber,.rest-fishing-stage[data-fishing-state="bite"] .rest-fishing-splash{animation:none}}

/* V1 polish: authoritative inspectors, recap, and shared Live Event presentation */
.status-inspector-modal{width:min(760px,94vw);max-height:min(820px,90vh);overflow:auto}.status-inspector-head,.status-inspector-row header,.after-battle-recap>header{display:flex;align-items:center;justify-content:space-between;gap:16px}.status-inspector-list{display:grid;gap:10px;margin-top:14px}.status-inspector-row{padding:14px;border:1px solid var(--line);border-radius:0;background:var(--panel)}.status-inspector-row p{margin:8px 0;color:var(--muted)}.status-inspector-row dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0}.status-inspector-row dt{font-size:10px;letter-spacing:.12em;color:var(--muted)}.status-inspector-row dd{margin:2px 0 0}.battle-status-inspector-trigger{min-width:92px}.after-battle-recap{margin-bottom:14px}.after-battle-recap header strong{color:var(--accent)}.battle-recap-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.battle-recap-groups>div{display:grid;align-content:start;gap:8px;padding:12px;border:1px solid var(--line);border-radius:0}.battle-recap-groups span{display:grid}.battle-recap-groups em,.battle-recap-groups small{color:var(--muted)}.dm-live-events{margin-top:14px}.dm-live-event-builders{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dm-live-event-builders details,.dm-live-event-list article{padding:12px;border:1px solid var(--line);border-radius:0}.dm-live-event-list{display:grid;gap:8px;margin-top:12px}.dm-live-event-list article{display:flex;align-items:center;gap:10px}.dm-live-event-list article>span{display:grid;margin-right:auto}.live-event-dim{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px;background:rgba(2,4,8,.86)}.forced-roll-modal,.roulette-stage{width:min(640px,94vw);padding:clamp(24px,5vw,54px);border:1px solid var(--line-strong);border-radius:0;text-align:center;background:var(--panel);box-shadow:0 18px 48px rgba(0,0,0,.32)}.forced-roll-modal button{display:block;width:100%;margin-top:22px;padding:16px;font-size:1.1rem}.roulette-stage{width:min(820px,96vw)}.roulette-wheel{position:relative;width:min(430px,72vw);aspect-ratio:1;margin:24px auto;border:8px solid var(--line-strong);border-radius:50%;background:conic-gradient(var(--panel),var(--surface),var(--panel),var(--surface));animation:outpost-roulette-spin var(--roulette-duration) cubic-bezier(.12,.66,.16,1) both;animation-delay:var(--roulette-delay)}.roulette-wheel span{position:absolute;left:50%;top:50%;width:42%;transform:rotate(calc(360deg / var(--n) * var(--i))) translateX(64%) rotate(calc(-360deg / var(--n) * var(--i)));transform-origin:0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.roulette-winner{min-height:58px;opacity:.45}.roulette-winner.revealed{opacity:1;color:var(--text);animation:outpost-reveal .35s ease both}@keyframes outpost-roulette-spin{from{transform:rotate(0)}to{transform:rotate(2160deg)}}@keyframes outpost-reveal{from{transform:scale(.92)}to{transform:scale(1)}}@media(max-width:760px){.battle-recap-groups,.dm-live-event-builders{grid-template-columns:1fr}.status-inspector-row dl{grid-template-columns:1fr}.dm-live-event-list article{align-items:stretch;flex-direction:column}}
/* Calm Signal Sweep -------------------------------------------------------
   Presentation only. The top-left diagonal wave covers either the visible
   workspace or the full viewport; authoritative state changes remain in app.js. */
.op-grid-transition {
  --op-grid-tile: #070809;
  --op-grid-tile-line: rgba(255,255,255,.055);
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: repeat(var(--op-grid-cols), minmax(0,1fr));
  grid-template-rows: repeat(var(--op-grid-rows), minmax(0,1fr));
  overflow: hidden;
  pointer-events: auto;
  contain: layout paint style;
  background: transparent;
}
.op-grid-transition[hidden] { display: none !important; }
.op-grid-transition-workspace { z-index: 60; right: auto; bottom: auto; }
.op-grid-transition-cell { position: relative; min-width: 0; min-height: 0; }
.op-grid-transition-cell::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--op-grid-tile);
  border: 1px solid var(--op-grid-tile-line);
  opacity: 1;
  transform: translate3d(0,0,0) scale(1.015);
  will-change: opacity;
}
.op-grid-transition-cell::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.op-grid-transition.is-entering .op-grid-transition-cell::before {
  animation: op-grid-signal-enter var(--op-grid-enter-duration) cubic-bezier(.22,.7,.2,1) var(--op-enter-delay) both;
}
.op-grid-transition.is-entering .op-grid-transition-cell::after {
  animation: op-grid-signal-trace 112ms ease-out var(--op-signal-delay) both;
}
.op-grid-transition.is-covered .op-grid-transition-cell::before { opacity: 1; }
.op-grid-transition.is-revealing .op-grid-transition-cell::before {
  animation: op-grid-signal-exit var(--op-grid-exit-duration) cubic-bezier(.4,0,.2,1) var(--op-exit-delay) both;
}
.op-grid-transition.is-revealing .op-grid-transition-cell::after {
  animation: op-grid-signal-trace 105ms ease-out var(--op-exit-delay) both;
}
[data-op-theme="light"] .op-grid-transition,
[data-outpost-theme="light"] .op-grid-transition {
  --op-grid-tile: #edede9;
  --op-grid-tile-line: rgba(9,11,13,.065);
}
[data-op-theme="light"] .op-grid-transition-cell::after,
[data-outpost-theme="light"] .op-grid-transition-cell::after {
  background: rgba(9,11,13,.025);
  border-color: rgba(9,11,13,.08);
}
@keyframes op-grid-signal-enter {
  0% { opacity: 0; }
  24% { opacity: .18; }
  100% { opacity: 1; }
}
@keyframes op-grid-signal-exit {
  0% { opacity: 1; }
  76% { opacity: .12; }
  100% { opacity: 0; }
}
@keyframes op-grid-signal-trace {
  0%, 100% { opacity: 0; }
  42% { opacity: .28; }
}
body[data-op-motion="reduced"] .op-grid-transition { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .op-grid-transition { display: none !important; }
}

/* Data & Assets workspace -------------------------------------------------
   One restrained catalog language for authoritative data and reusable media. */
.admin-library-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 0;
  padding: 0 0 15px;
  border-bottom-color: var(--line);
}
.admin-workspace-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--font-mono, monospace);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.admin-library-head .panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--text);
  font-size: 1.45rem;
  letter-spacing: -.025em;
}
.admin-library-head .subtle {
  max-width: 660px;
  margin: 5px 0 0;
  line-height: 1.45;
}
.admin-library-head .dm-badge {
  min-height: 19px;
  padding: 2px 7px;
  border-color: var(--line);
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-mono, monospace);
  font-size: .54rem;
  letter-spacing: .12em;
}
.admin-library-head .dm-badge.is-ready { color: var(--success, #8ee0ad); }
.admin-library-head .dm-badge.is-warning { color: var(--warning, #f2c56f); }
.asset-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.admin-utility-menu {
  position: relative;
  justify-self: end;
}
.admin-utility-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-mono, monospace);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .11em;
  cursor: pointer;
  list-style: none;
}
.admin-utility-menu > summary::-webkit-details-marker { display: none; }
.admin-utility-menu > summary::after { content: "+"; margin-left: 12px; color: var(--text); }
.admin-utility-menu[open] > summary::after { content: "−"; }
.admin-utility-actions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  min-width: 220px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  background: var(--panel, #090b0d);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.admin-utility-actions button {
  justify-content: flex-start;
  min-height: 34px;
  border-width: 0 0 1px;
  border-color: var(--line);
  border-radius: 0;
  text-align: left;
}
.admin-utility-actions small {
  padding: 9px 7px 4px;
  color: var(--muted);
  font-family: var(--font-mono, monospace);
  font-size: .55rem;
  line-height: 1.5;
}
.admin-library-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.admin-library-nav-group {
  display: grid;
  grid-template-rows: 18px 45px;
  align-items: stretch;
  min-width: 0;
  border-right: 1px solid var(--line);
}
.admin-library-nav-group > span {
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-bottom: 1px solid var(--line);
  color: color-mix(in srgb, var(--muted) 65%, transparent);
  font-family: var(--font-mono, monospace);
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.admin-library-nav-group > div { display: flex; align-items: stretch; }
.admin-library-nav button {
  position: relative;
  min-height: 45px;
  padding: 0 15px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-mono, monospace);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-library-nav button::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 1px;
  background: transparent;
}
.admin-library-nav button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 3%, transparent); }
.admin-library-nav button.active { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.admin-library-nav button.active::after { background: var(--text); }

.asset-manager-workspace {
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  gap: 14px;
  margin-top: 0;
}
.asset-editor-disclosure {
  align-self: start;
  min-width: 0;
  border: 1px solid var(--line);
  background: transparent;
}
.asset-editor-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.asset-editor-disclosure > summary::-webkit-details-marker { display: none; }
.asset-editor-disclosure > summary > span:first-child { display: grid; gap: 3px; }
.asset-editor-disclosure > summary b {
  color: var(--text);
  font-size: .74rem;
  letter-spacing: .04em;
}
.asset-editor-disclosure > summary small {
  color: var(--muted);
  font-size: .65rem;
  line-height: 1.35;
}
.asset-disclosure-action {
  color: var(--muted);
  font-family: var(--font-mono, monospace);
  font-size: .55rem;
  letter-spacing: .13em;
}
.asset-editor-disclosure[open] .asset-disclosure-action::before { content: "CLOSE "; }
.asset-editor-disclosure[open] .asset-disclosure-action { font-size: 0; }
.asset-editor-disclosure[open] .asset-disclosure-action::before { font-size: .55rem; }
.asset-editor-body {
  display: grid;
  gap: 11px;
  padding: 13px;
  border-top: 1px solid var(--line);
}
.asset-editor-body .modal-grid { grid-template-columns: 1fr; margin: 0; }
.asset-editor-body .modal-actions { margin: 0; }
.asset-editor-body .sprite-frame-guide { margin-top: 0 !important; }
.asset-field-note { margin: 0; line-height: 1.5; }
.asset-library-panel,
.asset-preview-panel {
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.asset-library-panel > .panel-title,
.asset-preview-panel > .panel-title {
  min-height: 43px;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: .75rem;
  letter-spacing: .02em;
}
.asset-catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-height: 61px;
  border-bottom: 1px solid var(--line);
}
.asset-search-field { display: grid; gap: 5px; min-width: 0; padding: 9px 12px; }
.asset-search-field > span {
  color: var(--muted);
  font-family: var(--font-mono, monospace);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .13em;
}
.asset-search-field input {
  min-height: 27px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: .78rem;
}
.asset-result-count {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 72px;
  padding: 7px;
  border-left: 1px solid var(--line);
}
.asset-result-count b { color: var(--text); font-size: 1rem; }
.asset-result-count span { color: var(--muted); font-family: var(--font-mono, monospace); font-size: .48rem; letter-spacing: .1em; }
.asset-manager-workspace .dm-asset-grid {
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 0;
  max-height: min(61vh, 690px);
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
  overflow: auto;
  scrollbar-gutter: stable;
}
.asset-manager-workspace .dm-asset {
  min-width: 0;
  border-width: 0 1px 1px 0;
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
  transition: background var(--motion-fast, 140ms) ease;
}
.asset-manager-workspace .dm-asset:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.asset-manager-workspace .dm-asset img {
  height: 104px;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.asset-tab-icon .dm-asset img { object-fit: contain; padding: 14px; }
.asset-manager-workspace .dm-asset-body { gap: 6px; min-height: 92px; padding: 9px 10px; }
.asset-manager-workspace .dm-asset-body b { color: var(--text); font-size: .71rem; }
.asset-manager-workspace .dm-asset-body small { color: var(--muted); font-family: var(--font-mono, monospace); font-size: .5rem; }
.asset-manager-workspace .dm-asset-body > button,
.asset-manager-workspace .dm-asset-body .data-actions button {
  min-height: 27px;
  padding: 0 7px;
  border-radius: 0;
  font-size: .54rem;
}
.asset-manager-workspace .dm-library-empty { grid-column: 1 / -1; min-height: 210px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
.asset-tab-visual .asset-library-panel,
.asset-tab-audio .sound-map-panel,
.asset-tab-icon > .panel:not(.asset-library-panel) { grid-column: 1 / -1; }
.asset-tab-visual .asset-editor-disclosure { grid-column: 1 / -1; }
.asset-tab-visual .asset-editor-body { padding: 0; }
.visual-upload-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  min-height: 260px;
  border-bottom: 1px solid var(--line);
}
.visual-upload-fields {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 15px;
  border-right: 1px solid var(--line);
}
.asset-upload-primary {
  display: grid;
  gap: 7px;
  min-height: 92px;
  padding: 12px;
  border: 1px dashed var(--line-strong, var(--line));
  background: color-mix(in srgb, var(--text) 2%, transparent);
}
.asset-upload-primary input { min-height: 34px; border-radius: 0; }
.asset-upload-primary small { color: var(--muted); font-size: .59rem; line-height: 1.5; }
.visual-upload-fields .modal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visual-frame-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.visual-frame-settings[hidden] { display: none; }
.visual-upload-workbench .sprite-frame-guide {
  min-height: 100%;
  margin: 0 !important;
  border: 0;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--text) 2%, transparent);
}
.asset-tab-visual .asset-editor-body > .modal-actions { justify-content: flex-end; padding: 11px 14px; }
.visual-library-panel > .panel-title { justify-content: space-between; }
.visual-catalog-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  border-bottom: 1px solid var(--line);
}
.visual-catalog-controls .asset-catalog-toolbar { min-height: 54px; border-bottom: 0; border-left: 1px solid var(--line); }
.visual-kind-filter { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.visual-kind-filter::-webkit-scrollbar { display: none; }
.visual-kind-filter button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 102px;
  min-height: 54px;
  padding: 0 12px;
  border-width: 0 1px 0 0;
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}
.visual-kind-filter button b { color: inherit; font-family: var(--font-mono, monospace); font-size: .58rem; }
.visual-kind-filter button span { font-size: .61rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.visual-kind-filter button.active { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.visual-kind-filter button.active::after { content: ""; position: absolute; right: 11px; bottom: 0; left: 11px; height: 1px; background: var(--text); }
.asset-manager-workspace .visual-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.asset-manager-workspace .visual-asset-row { display: grid; grid-template-rows: 132px minmax(0, 1fr); }
.visual-card-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--text) 3%, transparent); }
.asset-manager-workspace .visual-card-stage img { width: 100%; height: 100%; padding: 0; border: 0; object-fit: contain; image-rendering: auto; }
.visual-card-stage > span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 3px 5px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface, #090b0d) 88%, transparent);
  color: var(--text);
  font-family: var(--font-mono, monospace);
  font-size: .47rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.asset-tab-audio .asset-library-panel,
.asset-tab-token .asset-library-panel { grid-column: 2; }
.asset-tab-audio .audio-asset-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.asset-tab-audio .audio-asset-card { grid-template-columns: 42px minmax(0,1fr); }
.asset-tab-audio .audio-glyph {
  width: 42px;
  min-height: 100%;
  border-right-color: var(--line);
  color: var(--muted);
  background: transparent;
  font-family: var(--font-mono, monospace);
  font-size: .8rem;
}
.asset-preset-library { grid-column: 1 / -1; }
.asset-preset-library .item-palette { max-height: min(61vh,690px); margin: 0; padding: 0; overflow: auto; scrollbar-gutter: stable; }
.asset-preset-library .dm-row { border-radius: 0; }

.data-overview-workspace { gap: 14px; margin-top: 0; }
.data-overview-main,
.data-overview-side { gap: 0; }
.data-overview-workspace .panel,
.data-overview-workspace .skill-card {
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.data-overview-workspace .data-kpi-grid { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.data-overview-workspace .data-kpi-grid .skill-card { min-height: 94px; border-width: 0 1px 1px 0; }
.data-overview-main > .panel,
.data-overview-side > .panel { padding: 13px; border-width: 0 0 1px; }
.data-manager-head + .admin-library-nav + .panel,
.data-manager-head + .admin-library-nav + .data-overview-workspace { margin-top: 0 !important; }
.data-manager-head + .admin-library-nav + .panel {
  padding: 0;
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.data-manager-head + .admin-library-nav + .panel > .design-header {
  min-height: 58px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.data-manager-head + .admin-library-nav + .panel > input {
  width: calc(100% - 24px);
  margin: 10px 12px 0;
  border-radius: 0;
}
.data-manager-head + .admin-library-nav + .panel .data-filter-row,
.data-manager-head + .admin-library-nav + .panel .data-pagination {
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.data-manager-head + .admin-library-nav + .panel .data-filter-row button,
.data-manager-head + .admin-library-nav + .panel .data-pagination button {
  border-radius: 0;
}
.data-manager-head + .admin-library-nav + .panel > .data-table {
  max-height: min(58vh, 650px);
  margin: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}
.data-manager-head + .admin-library-nav + .panel .data-row {
  border-radius: 0;
}

[data-op-theme="light"] .admin-utility-actions,
[data-outpost-theme="light"] .admin-utility-actions { box-shadow: 0 18px 45px rgba(20,22,24,.12); }
[data-op-theme="light"] .asset-manager-workspace .dm-asset img,
[data-outpost-theme="light"] .asset-manager-workspace .dm-asset img { background: rgba(10,12,14,.025); }
[data-op-theme="light"] .admin-library-head .panel-title,
[data-outpost-theme="light"] .admin-library-head .panel-title,
[data-op-theme="light"] .admin-library-nav button.active,
[data-outpost-theme="light"] .admin-library-nav button.active,
[data-op-theme="light"] .asset-editor-disclosure > summary b,
[data-outpost-theme="light"] .asset-editor-disclosure > summary b,
[data-op-theme="light"] .asset-library-panel > .panel-title,
[data-outpost-theme="light"] .asset-library-panel > .panel-title,
[data-op-theme="light"] .asset-preview-panel > .panel-title,
[data-outpost-theme="light"] .asset-preview-panel > .panel-title,
[data-op-theme="light"] .asset-manager-workspace .dm-asset-body b,
[data-outpost-theme="light"] .asset-manager-workspace .dm-asset-body b {
  color: var(--op-text, #121416);
}
[data-op-theme="light"] .asset-disclosure-action,
[data-outpost-theme="light"] .asset-disclosure-action,
[data-op-theme="light"] .asset-editor-disclosure > summary small,
[data-outpost-theme="light"] .asset-editor-disclosure > summary small,
[data-op-theme="light"] .asset-search-field > span,
[data-outpost-theme="light"] .asset-search-field > span,
[data-op-theme="light"] .asset-result-count span,
[data-outpost-theme="light"] .asset-result-count span {
  color: var(--op-text-muted, #575c62);
}

@media (max-width: 980px) {
  .admin-library-head { grid-template-columns: 1fr; align-items: start; }
  .asset-head-actions, .admin-utility-menu { justify-self: start; }
  .admin-library-nav { overflow-x: auto; scrollbar-width: none; }
  .admin-library-nav::-webkit-scrollbar { display: none; }
  .admin-library-nav-group { flex: 0 0 auto; }
  .asset-manager-workspace,
  .asset-tab-visual,
  .asset-tab-audio,
  .asset-tab-token { grid-template-columns: 1fr; }
  .asset-tab-audio .asset-library-panel,
  .asset-tab-token .asset-library-panel { grid-column: auto; }
  .visual-upload-workbench,
  .visual-catalog-controls { grid-template-columns: 1fr; }
  .visual-upload-fields { border-right: 0; border-bottom: 1px solid var(--line); }
  .visual-catalog-controls .asset-catalog-toolbar { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .asset-head-actions { display: grid; width: 100%; grid-template-columns: minmax(0,1fr) auto; }
  .asset-head-actions > button { min-width: 0; }
  .admin-library-nav-group > span { display: none; }
  .admin-library-nav button { padding: 0 12px; }
  .asset-manager-workspace .dm-asset-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .visual-upload-fields .modal-grid { grid-template-columns: 1fr; }
  .asset-manager-workspace .visual-catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* DM Token context command rework — 2026-08-29 */
#contextMenu:has(> .dm-token-context) {
  width: min(360px, calc(100vw - 24px));
  padding: 0;
  border-radius: 0;
  max-height: calc(100vh - 20px);
  overflow: auto;
  background: rgba(8, 10, 12, .985);
}
.dm-token-context { display: grid; min-width: 0; }
.dm-token-context-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-bottom: 1px solid var(--line-strong);
}
.dm-token-context-title { display: grid; gap: 2px; min-width: 0; }
.dm-token-context-title small,
.dm-token-context-label { font-size: .66rem; letter-spacing: .12em; color: var(--muted); }
.dm-token-context-title b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-token-context-title span { font-size: .72rem; color: var(--muted); }
.dm-token-context-economy { display: flex; gap: 4px; }
.dm-token-context-economy span { padding: 3px 5px; border: 1px solid var(--line); font-size: .61rem; color: var(--muted); }
.dm-token-context-economy b { color: var(--text); }
.dm-token-context-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.dm-token-context-stats > span { position: relative; display: grid; gap: 1px; padding: 8px 9px; border-right: 1px solid var(--line); }
.dm-token-context-stats > span:last-child { border-right: 0; }
.dm-token-context-stats small { font-size: .6rem; letter-spacing: .1em; color: var(--muted); }
.dm-token-context-stats b { font-size: .84rem; }
.dm-token-context-stats em { position: absolute; right: 6px; top: 7px; font-size: .58rem; color: #93c5fd; font-style: normal; }
.dm-token-context-section { display: grid; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.dm-token-context-label { display: flex; justify-content: space-between; align-items: center; }
.dm-token-context-label span { color: var(--text); letter-spacing: .04em; }
.dm-token-context-stat-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) 66px; gap: 6px; }
.dm-token-context-status-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px 66px; gap: 6px; }
.dm-token-context select,
.dm-token-context input { min-height: 32px; padding: 5px 7px; border-radius: 0; font-size: .75rem; }
.dm-token-context button { min-height: 32px; padding: 0 8px; border-radius: 0; font-size: .75rem; }
.dm-token-context-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dm-token-context-action-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-token-context-action-grid button { text-align: left; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.dm-token-context-action-grid button:hover { border-color: var(--line-strong); background: rgba(255,255,255,.055); }
.dm-token-context .dm-context-primary { border-color: rgba(201,152,74,.42); background: rgba(201,152,74,.09); }
.dm-token-context .dm-context-primary:hover { border-color: rgba(201,152,74,.72); background: rgba(201,152,74,.15); }
.dm-token-context-danger { padding: 8px 12px 10px; }
.dm-token-context-danger button { width: 100%; text-align: left; border-color: rgba(200,87,77,.45); color: #ffaaa3; background: rgba(200,87,77,.08); }
.dm-token-context-danger button:hover { border-color: rgba(200,87,77,.8); background: rgba(200,87,77,.15); }
@media (max-width: 520px) {
  #contextMenu:has(> .dm-token-context) { width: min(330px, calc(100vw - 16px)); }
  .dm-token-context-head { grid-template-columns: 1fr; }
  .dm-token-context-economy { justify-content: flex-start; }
  .dm-token-context-stat-row,
  .dm-token-context-status-row { grid-template-columns: 1fr; }
}

/* Add Item workspace recompose — 2026-08-29 */
.item-editor-rework {
  width: min(1180px, calc(100vw - 36px));
  max-width: none;
  max-height: min(92vh, 920px);
  overflow: auto;
  border-radius: 0;
}
.item-editor-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 12px;
  border-bottom: 1px solid var(--line);
}
.item-editor-kicker,
.item-editor-mode {
  font-size: .66rem;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--muted);
}
.item-editor-mode { align-self: start; }
.item-editor-body {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  padding-top: 10px;
}
.item-editor-body > * { grid-column: 1 / -1; min-width: 0; }
.item-editor-body > .item-editor-identity { grid-column: 1 / 9; grid-row: 1; }
.item-editor-body > .item-editor-image { grid-column: 9 / -1; grid-row: 1; }
.item-editor-body > .item-editor-inventory { grid-column: 1 / 5; grid-row: 2; }
.item-editor-body > .item-editor-use { grid-column: 5 / -1; grid-row: 2; }
.item-editor-body > .item-editor-text { grid-column: 1 / 7; }
.item-editor-body > .item-editor-data { grid-column: 7 / -1; }
.item-editor-rework .item-editor-section {
  margin-top: 0;
  border-radius: 0;
  background: rgba(255,255,255,.012);
}
.item-editor-rework .modal-section-title {
  min-height: 34px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.item-editor-rework .modal-section-title button {
  width: 28px;
  min-width: 28px;
  min-height: 26px;
  padding: 0;
  border-radius: 0;
}
.item-editor-rework .item-editor-identity .modal-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.item-editor-rework .item-editor-inventory .modal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.item-editor-rework .item-editor-use .modal-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.item-editor-rework .item-editor-image .modal-grid { grid-template-columns: 1fr; }
.item-editor-rework .modal-grid { gap: 8px; }
.item-editor-rework label > .subtle { display: block; margin-bottom: 4px; }
.item-editor-rework input,
.item-editor-rework select { min-height: 34px; padding: 6px 8px; }
.item-editor-rework textarea { min-height: 82px; }
.item-editor-rework #editItemIconPreview {
  width: 118px !important;
  height: 118px !important;
  margin: 8px auto 0 !important;
  border: 1px solid var(--line);
  border-radius: 0 !important;
}
.item-editor-rework #editItemIconPreview img { border-radius: 0 !important; }
.item-editor-rework .item-editor-contract.collapsed { opacity: .82; }
.item-editor-rework .item-editor-text.collapsed,
.item-editor-rework .item-editor-data.collapsed { opacity: .78; }
.item-editor-rework .token-editor-modal-actions {
  margin-top: 10px;
  padding-top: 10px;
}
@media (max-width: 980px) {
  .item-editor-rework { width: min(760px, calc(100vw - 24px)); }
  .item-editor-body { grid-template-columns: 1fr 1fr; }
  .item-editor-body > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .item-editor-rework .item-editor-identity .modal-grid,
  .item-editor-rework .item-editor-use .modal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}