/* components.css: structure of the .ui-* components (UI_STYLE_GUIDE section 5).
   Only semantic variables are read here (--c-*, --fs-*, --sp-*, --lay-*, --bw-*, --d-* ...).
   The skin decides values through skin-gb.css / skin-ps1.css; DOM and class names never change between skins.
   Zero important-flags; the layer order handles overrides (reset < components < state). */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background-color: var(--c-ground);
    background-image: var(--bg-deco);
    background-size: var(--bg-deco-size);
    color: var(--c-ink-1);
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
  }
  button { font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
  ul, ol { list-style: none; margin: 0; padding: 0; }
  h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }
  kbd { font: inherit; }
  h1, h2, h3, b, strong, dt, th { font-weight: inherit; }
  i { font-style: normal; }
}

@layer components {
  /* ---------- panel / inset (the only two frame styles) ---------- */
  .ui-panel {
    background: var(--c-surface);
    border: var(--bw-panel) solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
    padding: var(--sp-4);
  }
  .ui-inset {
    border-style: var(--inset-style);
    border-color: var(--c-inset-line);
    border-width: var(--bw-1) var(--inset-bw-x);
    padding: var(--sp-3) var(--sp-4);
  }
  .ui-panel:empty, .ui-inset:empty { display: none; }

  /* ---------- symbols ---------- */
  .ui-sym {
    flex: none;
    width: var(--sym-size); height: var(--sym-size);
    color: var(--sym-color, var(--c-ink-1));
    fill: var(--sym-color, var(--c-ink-1));
    shape-rendering: var(--sym-rendering);
  }
  .ui-sym[data-sym="physical"]  { --sym-color: var(--sym-physical); }
  .ui-sym[data-sym="fire"]      { --sym-color: var(--sym-fire); }
  .ui-sym[data-sym="cold"]      { --sym-color: var(--sym-cold); }
  .ui-sym[data-sym="lightning"] { --sym-color: var(--sym-lightning); }
  .ui-sym[data-sym="water"]     { --sym-color: var(--sym-water); }
  .ui-sym[data-sym="poison"]    { --sym-color: var(--sym-poison); }
  .ui-sym[data-sym="arcane"]    { --sym-color: var(--sym-arcane); }
  .ui-sym[data-sym="oil"]       { --sym-color: var(--sym-oil); }
  .ui-sym[data-sym="wet"]       { --sym-color: var(--sym-wet); }
  .ui-sym[data-sym="metal"]     { --sym-color: var(--sym-metal); }
  .ui-sym[data-sym="ice"]       { --sym-color: var(--sym-ice); }
  .ui-sym[data-sym="rooted"]    { --sym-color: var(--sym-rooted); }
  .ui-sym[data-sym="weakened"]  { --sym-color: var(--sym-weakened); }
  .ui-sym[data-sym="confused"]  { --sym-color: var(--sym-confused); }
  .ui-sym[data-sym="danger"]    { --sym-color: var(--sym-danger); }
  .ui-sym[data-sym="steam"] { --sym-color: var(--sym-steam); }
  .ui-sym[data-sym="grass"] { --sym-color: var(--sym-grass); }
  .ui-sym[data-sym="blood"] { --sym-color: var(--sym-blood); }
  .ui-sym[data-sym="spores"] { --sym-color: var(--sym-spores); }
  .ui-sym[data-sym="mud"] { --sym-color: var(--sym-mud); }
  .ui-sym[data-sym="ash"] { --sym-color: var(--sym-ash); }
  .ui-sym[data-sym="sand"] { --sym-color: var(--sym-sand); }
  .ui-sym[data-sym="glass"] { --sym-color: var(--sym-glass); }
  .ui-sym[data-sym="shards"] { --sym-color: var(--sym-shards); }
  .ui-sym[data-sym="check"], .ui-sym[data-sym^="arrow"], .ui-sym[data-sym="wait"] { --sym-color: currentColor; }
  .ui-chip {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    padding: var(--chip-pad);
    background: transparent;
  }

  /* ---------- title band ---------- */
  .ui-title {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
    min-width: 0;
    padding: var(--title-pad);
    background: var(--c-title-bg);
    color: var(--c-title-fg);
    border-bottom: var(--title-bw, var(--bw-2)) solid var(--c-line);
    font-size: var(--fs-title);
    line-height: var(--lh-tight);
    font-weight: var(--fw-bold);
  }
  .ui-title__main { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
  .ui-title__en { display: var(--d-title-en); text-transform: uppercase; letter-spacing: var(--ls-caps); }
  .ui-title__sep { display: var(--d-title-en); font-weight: var(--fw-medium); color: var(--c-title-sep); }
  .ui-title__ja { display: var(--d-title-ja); font-size: var(--fs-title-ja); letter-spacing: var(--ls-jp); }
  .ui-title__meta { display: var(--d-title-meta); font-size: var(--fs-note); font-weight: var(--fw-medium); letter-spacing: var(--ls-jp); white-space: nowrap; }

  /* ---------- map ---------- */
  .ui-map {
    position: relative; min-width: 0; min-height: 0; overflow: hidden;
    background: var(--c-map-matte);
    border: var(--bw-panel) solid var(--c-line);
    border-radius: var(--radius);
    --stage-w: calc(var(--src-w) * var(--map-s) * var(--px));
    --stage-h: calc(var(--src-h) * var(--map-s) * var(--px));
  }
  .ui-map__view { position: absolute; inset: 0; display: grid; place-items: center; }
  .ui-map__viewport { position: relative; width: var(--map-w); height: var(--map-h); overflow: hidden; }
  .ui-map__stage {
    position: absolute;
    left: calc((var(--map-w) - var(--stage-w)) / 2);
    top: calc((var(--map-h) - var(--stage-h)) / 2);
    width: var(--stage-w); height: var(--stage-h);
  }
  .ui-map__img {
    position: absolute; inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
  }
  .ui-map__mark {
    position: absolute;
    left: calc((var(--mx) - var(--mw) / 2) * var(--map-s) * var(--px));
    top: calc((var(--my) - var(--mh) / 2) * var(--map-s) * var(--px));
    width: calc(var(--mw) * var(--map-s) * var(--px));
    height: calc(var(--mh) * var(--map-s) * var(--px));
    border: var(--bw-2) solid var(--c-danger);
    border-radius: var(--mark-radius);
    background: var(--mark-fill);
  }
  .ui-map__tag {
    position: absolute; left: 50%; bottom: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-1);
    margin-left: calc(var(--sym-size) * -0.5 - var(--sp-1) - var(--bw-1));
    margin-bottom: var(--sp-1);
    background: var(--c-surface-2);
    border: var(--bw-1) solid var(--c-line);
  }

  /* ---------- threat (first tier: the dangerous enemy) ---------- */
  .ui-threat {
    display: flex; align-items: center; gap: var(--sp-3);
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface);
    border: var(--bw-panel) solid var(--c-line);
    border-radius: var(--radius);
  }
  .ui-threat__name { font-weight: var(--fw-bold); font-size: var(--fs-body); white-space: nowrap; }
  .ui-threat__note { display: var(--d-threat-note); font-size: var(--fs-note); color: var(--c-ink-2); white-space: nowrap; }

  /* ---------- HUD, gauges ---------- */
  .ui-hud {
    display: grid; align-items: center; min-width: 0; gap: var(--sp-3);
    grid-template-columns: var(--hud-cols, minmax(0, 1fr));
    grid-template-areas: var(--hud-areas, "title" "hp" "mp" "sp" "status");
  }
  .ui-hud > .ui-title { grid-area: title; }
  .ui-hud > .ui-gauge[data-kind="hp"] { grid-area: hp; }
  .ui-hud > .ui-gauge[data-kind="mp"] { grid-area: mp; }
  .ui-hud > .ui-stat { grid-area: sp; }
  .ui-hud > .ui-status { grid-area: status; }
  .ui-gauge {
    display: grid; align-items: baseline; min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "label value" "bar bar";
    column-gap: var(--sp-3); row-gap: var(--sp-1);
  }
  .ui-gauge__label {
    grid-area: label;
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-note); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: var(--ls-caps);
  }
  .ui-gauge__alert { display: none; }
  .ui-gauge[data-low="true"] .ui-gauge__alert { display: block; }
  .ui-gauge__value {
    grid-area: value; justify-self: end;
    font-family: var(--ff-num); font-variant-numeric: tabular-nums;
    font-size: var(--fs-note); font-weight: var(--fw-medium); line-height: var(--lh-tight);
    white-space: nowrap;
  }
  .ui-gauge__value b { font-size: var(--fs-num); font-weight: var(--fw-bold); }
  .ui-gauge__bar {
    grid-area: bar; position: relative;
    height: var(--gauge-h);
    background-color: var(--c-gauge-empty);
    border: var(--bw-1) solid var(--c-line);
  }
  .ui-gauge__fill {
    position: absolute; inset: 0 auto 0 0;
    width: calc(var(--gauge) * 100%);
    background-color: var(--gauge-fill);
    mask-image: var(--gauge-mask);
    mask-size: var(--gauge-mask-size);
    mask-repeat: repeat;
    image-rendering: pixelated;
  }
  .ui-gauge[data-kind="hp"] { --gauge-h: var(--lay-gauge-hp-h); --gauge-fill: var(--fill-hp); --gauge-mask: var(--mask-hp); }
  .ui-gauge[data-kind="hp"] .ui-gauge__label { font-size: var(--fs-body); }
  .ui-gauge[data-kind="mp"] { --gauge-h: var(--lay-gauge-sub-h); --gauge-fill: var(--fill-mp); --gauge-mask: var(--mask-mp); }
  .ui-gauge[data-kind="sp"] { --gauge-h: var(--lay-gauge-sub-h); --gauge-fill: var(--fill-sp); --gauge-mask: var(--mask-sp); }
  .ui-gauge[data-low="true"] .ui-gauge__value { color: var(--c-danger); }
  .ui-gauge[data-low="true"] .ui-gauge__bar { background-image: var(--low-hatch); }
  .ui-stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
  .ui-stat__label { font-size: var(--fs-note); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); }
  .ui-stat__value { font-family: var(--ff-num); font-variant-numeric: tabular-nums; font-size: var(--fs-num); font-weight: var(--fw-bold); }
  .ui-status { display: var(--d-status, flex); flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
  .ui-status__item { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-note); white-space: nowrap; }

  /* ---------- minimap ---------- */
  .ui-minimap {
    display: grid; place-items: center; overflow: hidden; flex: var(--minimap-flex, none);
    width: var(--minimap-fill-w, var(--minimap-w)); height: var(--minimap-fill-h, var(--minimap-h)); min-height: var(--minimap-h);
    background: var(--c-mm-bg);
    border: var(--bw-panel) solid var(--c-line);
    border-radius: var(--radius);
  }
  .ui-minimap__canvas { display: block; image-rendering: pixelated; }

  /* ---------- message log ---------- */
  .ui-log {
    display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-width: 0; min-height: 0;
    padding: var(--log-pad-y) var(--sp-4);
    background: var(--c-surface);
    border: var(--bw-panel) solid var(--c-line);
    border-radius: var(--radius);
  }
  .ui-log.expanded { position: fixed; z-index: var(--z-dialog); left: var(--lay-pad); right: var(--lay-pad); bottom: var(--lay-pad); max-height: 60dvh; overflow-y: auto; }
  .ui-log__list { display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
  .ui-log__line { position: relative; padding-left: var(--log-indent); color: var(--c-ink-2); }
  .ui-log__line:nth-last-child(n+3) { display: var(--d-log-old); }
  .ui-log__line:last-child { color: var(--c-ink-1); font-weight: var(--fw-bold); }
  .ui-log__line:last-child::before {
    content: ""; position: absolute; left: 0; top: calc((var(--fs-body) * var(--lh-body) - var(--log-mark-w)) / 2);
    width: var(--log-mark-w); height: var(--log-mark-w);
    background: currentColor;
    mask: var(--cursor-img) center / contain no-repeat;
  }

  /* ---------- map overlays: aim card, inspect card, gate card (children of .ui-map) ---------- */
  .ui-aim, .ui-inspect, .ui-gate {
    position: absolute; z-index: var(--z-field);
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface); color: var(--c-ink-1);
    border: var(--bw-panel) solid var(--c-line); border-radius: var(--radius);
    font-size: var(--fs-note); line-height: var(--lh-body);
  }
  .ui-aim { left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); }
  .ui-gate { left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); }
  .ui-inspect { left: var(--sp-2); top: var(--sp-2); width: min(46%, 30em); max-height: calc(100% - var(--sp-2) * 2); overflow-y: auto; scrollbar-width: none; }
  .ui-aim .spell-target-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
  .ui-aim .spell-target-title b, .ui-aim .spell-target-state strong { font-weight: var(--fw-bold); }
  .ui-aim .spell-target-title span, .ui-aim .spell-target-state span { color: var(--c-ink-2); }
  .ui-aim .spell-target-desc, .ui-aim .spell-target-state { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
  .ui-inspect .tap-inspect-head { display: flex; justify-content: space-between; gap: var(--sp-3); font-weight: var(--fw-bold); border-bottom: var(--bw-1) var(--inset-style) var(--c-inset-line); padding-bottom: var(--sp-1); margin-bottom: var(--sp-2); }
  .ui-inspect .tap-inspect-head span, .ui-inspect .inspect-block > span { color: var(--c-ink-2); font-weight: var(--fw-medium); }
  .ui-inspect .inspect-block { display: flex; flex-direction: column; gap: var(--sp-1); padding-bottom: var(--sp-2); }
  .ui-inspect .inspect-block > b { font-weight: var(--fw-bold); }
  .ui-inspect .inspect-block small { font-size: var(--fs-note); }
  .ui-gauge__barrier { font-size: var(--fs-note); }
  .ui-status__turns { font-family: var(--ff-num); font-variant-numeric: tabular-nums; color: var(--c-ink-2); }

  /* ---------- guide keys / buttons ---------- */
  .ui-guide { display: var(--d-guide, flex); align-items: center; gap: var(--sp-6); min-width: 0; font-size: var(--fs-note); }
  .ui-key { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
  .ui-key kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.7em; padding: 0 var(--sp-2);
    border: var(--bw-1) solid currentColor;
    font-family: var(--ff-latin); font-weight: var(--fw-bold); letter-spacing: 0; line-height: var(--lh-key);
  }
  html[data-input="touch"] .ui-key kbd { display: none; }
  html[data-input="touch"] .ui-guide .ui-key {
    min-height: var(--lay-hit-min); justify-content: center; padding: 0 var(--guide-key-pad-x);
    border: var(--bw-1) solid currentColor;
  }
  html[data-input="touch"] .ui-key[data-touch="off"] { display: none; }
  html[data-input="touch"] .ui-desc .ui-guide { flex: 0 0 auto; margin-left: 0; gap: var(--sp-3); }
  html[data-input="touch"] .ui-desc .ui-guide .ui-key { flex: 1 1 0; }
  .ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-width: 0; min-height: var(--lay-hit-min);
    padding: 0 var(--sp-3);
    background: var(--c-btn-bg); color: var(--c-btn-fg);
    border: var(--bw-1) solid var(--c-line);
    border-radius: var(--radius);
    font-size: var(--fs-note); font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap;
  }
  .ui-btn[data-primary] { background: var(--c-focus-bg); color: var(--c-focus-fg); }

  /* touch deck */
  .ui-dpad { display: grid; grid-template-columns: repeat(3, var(--lay-dpad-cell)); grid-auto-rows: var(--lay-dpad-cell); gap: var(--bw-1); }
  .ui-dpad__btn {
    display: grid; place-items: center;
    background: var(--c-btn-bg); color: var(--c-btn-fg);
    border: var(--bw-1) solid var(--c-line); border-radius: var(--radius);
  }
  .ui-dpad__btn[data-dir="wait"] { background: var(--c-focus-bg); color: var(--c-focus-fg); }
  .ui-actions { display: grid; grid-template-columns: repeat(2, var(--lay-action-w)); grid-auto-rows: var(--lay-action-h); gap: var(--sp-2); justify-content: end; }
  .ui-actions .ui-btn { padding: 0 var(--sp-1); min-height: 0; flex-direction: column; }

  /* ---------- tabs ---------- */
  .ui-tabs { display: flex; align-items: stretch; gap: var(--sp-2); min-width: 0; }
  .ui-tabs__hint {
    display: var(--d-hints); align-items: center;
    padding: 0 var(--sp-2);
    font-family: var(--ff-latin); font-weight: var(--fw-bold); font-size: var(--fs-note); color: var(--c-ink-2);
  }
  .ui-tabs__hint kbd { padding: 0 var(--sp-2); border: var(--bw-1) solid currentColor; min-width: 1.7em; text-align: center; }
  .ui-tab {
    flex: 1 1 0; min-width: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 0 var(--sp-2);
    background: var(--c-tab-bg); color: var(--c-tab-fg);
    border: var(--bw-1) solid var(--c-tab-line);
    border-radius: var(--radius);
    font-size: var(--fs-note); font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap;
  }
  .ui-tab[aria-selected="true"] { flex-grow: var(--tab-active-grow); background: var(--c-focus-bg); color: var(--c-focus-fg); border-color: var(--c-focus-bg); }
  .ui-tab__ico { display: var(--d-tab-ico); flex: none; width: var(--sym-size); height: var(--sym-size); fill: currentColor; }
  .ui-tab__en { display: var(--d-tab-en); }
  .ui-tab:not([aria-selected="true"]) .ui-tab__en { display: var(--d-tab-en-idle, var(--d-tab-en)); }
  .ui-tab__ja { display: var(--d-tab-ja); letter-spacing: var(--ls-jp); text-transform: none; }
  .ui-tab:not([aria-selected="true"]) .ui-tab__ja { display: var(--d-tab-ja-idle, var(--d-tab-ja)); }

  /* ---------- menu frame ---------- */
  .ui-menu { background-color: var(--c-ground); background-image: var(--bg-deco); background-size: var(--bg-deco-size); color: var(--c-ink-1); }
  .ui-menu__meta { font-size: var(--fs-note); }

  /* ---------- list rows ---------- */
  .ui-list {
    display: flex; flex-direction: column;
    min-width: 0; min-height: 0; overflow: hidden;
    padding: var(--list-pad);
    background: var(--c-list-bg);
    border: var(--list-bw) solid var(--c-line);
    border-radius: var(--radius);
  }
  .ui-list__rows { display: flex; flex-direction: column; gap: var(--row-gap); flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .ui-list__rows > .ui-row { flex: none; }
  .ui-row {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: var(--lay-row-h);
    padding: 0 var(--sp-3);
    background: var(--c-row-bg); color: var(--c-row-fg);
    border-radius: var(--radius);
    font-size: var(--fs-body);
  }
  .ui-row__gutter {
    flex: none; width: var(--row-gutter-w); height: var(--row-gutter-w);
    background: transparent;
    mask: var(--cursor-img) center / contain no-repeat;
  }
  .ui-row__bullet { flex: none; width: var(--row-bullet-w); height: var(--row-bullet-w); background: currentColor; }
  .ui-row__name { flex: 1 1 auto; min-width: 0; white-space: nowrap; letter-spacing: var(--ls-jp); }
  .ui-row__tag { display: var(--d-tag); font-size: var(--fs-note); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap; }
  .ui-row__tag i { font-weight: var(--fw-medium); letter-spacing: var(--ls-jp); text-transform: none; }
  .ui-row__check { display: var(--d-check); }
  .ui-row__meta {
    flex: none; min-width: 4.5ch; text-align: right;
    font-family: var(--ff-num); font-variant-numeric: tabular-nums; font-size: var(--fs-note);
    color: var(--c-row-meta); white-space: nowrap;
  }


  /* ---------- menu, legacy inner content (phase C restyles it) ---------- */
  .ui-menu > .ui-menu__head { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-note); }
  .ui-menu > .ui-menu__head input { width: 12em; font: inherit; color: inherit; background: var(--c-surface); border: var(--bw-1) solid var(--c-line); padding: var(--sp-1) var(--sp-2); }
  .ui-list .ui-row.selected { background: var(--c-row-focus-bg); color: var(--c-row-focus-fg); }
  .ui-detail { overflow-y: auto; font-size: var(--fs-body); }
  .ui-detail .sidebar-popup-hint, .ui-detail .record-launch-hint { display: flex; flex-direction: column; gap: var(--sp-2); }
  .ui-detail .sidebar-popup-hint b, .ui-detail .record-launch-hint b { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
  .ui-detail .item-inline-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .ui-detail .item-inline-actions button { display: flex; flex-direction: column; min-height: var(--lay-hit-min); padding: var(--sp-1) var(--sp-3); border: var(--bw-1) solid var(--c-line); background: var(--c-btn-bg); color: var(--c-btn-fg); }
  .ui-detail .item-inline-actions button.selected { background: var(--c-focus-bg); color: var(--c-focus-fg); }

  /* ---------- detail ---------- */
  .ui-detail {
    display: flex; flex-direction: column; gap: var(--sp-4);
    min-width: 0; min-height: 0; overflow: hidden auto;
    padding: var(--sp-4) var(--sp-6);
    background: var(--c-surface);
    border: var(--bw-panel) solid var(--c-line);
    border-radius: var(--radius);
  }
  .ui-detail > * { flex: none; }
  .ui-detail__actions {
    position: sticky; bottom: 0; z-index: 1;
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    margin-top: auto; padding-block: var(--sp-3);
    background: var(--c-surface);
  }
  .ui-detail__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-width: 0; }
  .ui-detail__name { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-jp); overflow-wrap: anywhere; }
  .ui-detail__en { margin-left: auto; font-size: var(--fs-note); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-ink-2); white-space: nowrap; }
  .ui-stats { display: flex; flex-wrap: wrap; padding: 0; }
  .ui-stats > div { flex: 1 1 calc(100% / var(--stats-cols, 4)); min-width: max-content; display: flex; flex-direction: column; gap: 0; padding: var(--sp-2) var(--sp-3); }
  .ui-stats dt { font-size: var(--fs-note); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-ink-2); white-space: nowrap; }
  .ui-stats dd { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--ff-num); font-variant-numeric: tabular-nums; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); white-space: nowrap; }
  .ui-detail__text { font-size: var(--fs-body); line-height: var(--lh-body); }
  .ui-detail__sub { font-size: var(--fs-note); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-ink-2); }
  .ui-detail__sub i { text-transform: none; letter-spacing: var(--ls-jp); }
  .ui-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .ui-tag { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border: var(--bw-1) solid var(--c-tag-line); font-size: var(--fs-note); white-space: nowrap; }
  .ui-tag b { font-weight: var(--fw-bold); }
  .ui-detail__cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
  .ui-detail__main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
  .ui-detail__extra { display: var(--d-detail-extra); flex-direction: column; gap: var(--sp-3); }
  .ui-detail__react { display: var(--d-detail-react); flex-direction: column; gap: var(--sp-2); }
  .ui-effects.ui-inset { padding-block: 0; padding-inline: 0; }
  .ui-effects > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2); font-size: var(--fs-note); border-bottom: var(--bw-1) var(--inset-style) var(--c-inset-line); }
  .ui-effects > li:last-child { border-bottom: 0; }
  .ui-effects b { font-family: var(--ff-num); font-variant-numeric: tabular-nums; font-size: var(--fs-body); font-weight: var(--fw-bold); }
  .ui-effects small { font-size: inherit; }
  .ui-range { display: var(--d-range); margin-left: var(--sp-6); }
  .ui-range__grid {
    display: grid; grid-template-columns: repeat(11, var(--range-cell)); grid-auto-rows: var(--range-cell); gap: var(--bw-1);
    margin-top: var(--sp-2);
  }
  .ui-range__cell { background: var(--c-range-off); outline: var(--bw-1) solid var(--c-range-off-line); outline-offset: calc(var(--bw-1) * -1); }
  .ui-range__cell[data-k="hit"] { background: var(--c-range-hit); outline: 0; }
  .ui-range__cell[data-k="self"] { background: var(--c-range-self); outline: 0; }
  .ui-range__cell[data-k="end"] { background: var(--c-range-hit); outline: var(--bw-2) solid var(--c-range-self); outline-offset: calc(var(--bw-2) * -1); }
  .ui-detail__hint { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; font-size: var(--fs-note); font-weight: var(--fw-bold); }

  /* ---------- portrait (menu / conversation only, never on the field) ---------- */
  .ui-portrait {
    display: var(--d-portrait); flex-direction: column; align-items: center; gap: var(--sp-4);
    min-width: 0; min-height: 0; overflow: hidden;
    padding: var(--portrait-pad);
    background: var(--c-surface);
    border: var(--bw-panel) solid var(--c-line);
    border-radius: var(--radius);
  }
  .ui-portrait__img {
    flex: none;
    width: min(100%, calc(var(--pw) * var(--portrait-s) * var(--px)));
    height: min(var(--portrait-max-h), calc(var(--ph) * var(--portrait-s) * var(--px)));
    background-size: calc(var(--pw) * var(--portrait-s) * var(--px)) calc(var(--ph) * var(--portrait-s) * var(--px));
    background-position: center top;
    background-repeat: no-repeat;
    image-rendering: pixelated;
  }
  .ui-portrait__cap { display: var(--d-portrait-cap); align-self: stretch; text-align: left; }
  .ui-portrait__name { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-jp); }
  .ui-portrait__sub { font-size: var(--fs-note); color: var(--c-ink-2); margin-bottom: var(--sp-3); }
  .ui-portrait__gear { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-note); }
  .ui-portrait__gear dt { font-weight: var(--fw-bold); color: var(--c-ink-2); }
  .ui-portrait__gear dd { white-space: nowrap; }
  .ui-portrait__stats { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sp-4); font-size: var(--fs-note); }
  .ui-portrait__stats dt { font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
  .ui-portrait__stats dd { font-family: var(--ff-num); font-variant-numeric: tabular-nums; text-align: right; }

  /* ---------- description bar (menu bottom) ---------- */
  .ui-desc {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
    min-width: 0; min-height: 0; overflow: hidden;
    padding: var(--desc-pad);
    background: var(--c-desc-bg); color: var(--c-desc-fg);
    border: var(--bw-panel) solid var(--c-line);
    border-radius: var(--radius);
  }
  .ui-desc__text {
    display: var(--d-desc-text); align-items: flex-start; gap: var(--sp-3); flex: 1 1 auto; min-width: 0;
    font-size: var(--fs-note); line-height: var(--lh-body);
  }
  .ui-desc__text::before {
    content: ""; flex: none;
    width: var(--log-mark-w); height: var(--log-mark-w);
    margin-top: calc((var(--fs-note) * var(--lh-body) - var(--log-mark-w)) / 2);
    background: currentColor;
    mask: var(--cursor-img) center / contain no-repeat;
  }
  .ui-desc .ui-guide { flex: none; margin-left: auto; }
}

@layer state {
  /* one focus look for keyboard, pad (.controller-selected) and touch-highlight */
  :is(.ui-btn, .ui-key, .ui-dpad__btn, .ui-tab):is(:focus-visible, .controller-selected, [data-focus="true"]) {
    background: var(--c-focus-bg); color: var(--c-focus-fg);
    outline: var(--bw-2) solid var(--c-line); outline-offset: var(--bw-1);
  }
  .ui-row:is(:focus-visible, .controller-selected, [data-focus="true"], [aria-selected="true"]) {
    background: var(--c-row-focus-bg); color: var(--c-row-focus-fg);
    outline: none;
  }
  .ui-row:is(.controller-selected, [data-focus="true"], [aria-selected="true"]) .ui-row__gutter { background: currentColor; }
  .ui-row:is(.controller-selected, [data-focus="true"], [aria-selected="true"]) .ui-row__meta { color: inherit; }
  .ui-row:is(.controller-selected, [data-focus="true"], [aria-selected="true"]) .ui-chip { background: var(--c-surface-2); }
  .ui-row[aria-current="true"] { font-weight: var(--fw-bold); }
  .ui-row[aria-disabled="true"] { color: var(--c-disabled-fg); }
  .ui-row[aria-disabled="true"] .ui-row__bullet { background: transparent; border: var(--row-bullet-bw) solid currentColor; }
  .ui-row[aria-disabled="true"] .ui-row__gutter { background: currentColor; mask-image: var(--cursor-x-img); }
  .ui-btn:disabled, .ui-btn[aria-disabled="true"] { color: var(--c-disabled-fg); border-color: var(--c-line-soft); }
}

/* ---------- map canvas: integer scale, matte for the remainder (guide 1.7) ----------
   SliceRenderer.layout() writes --map-w / --map-h (exactly tiles * 16 * scale in CSS px) on the wrap.
   The canvas is never stretched: no width:100%, no aspect-ratio, no object-fit while a slice skin draws. */
@layer components {
  .ui-map > canvas#game {
    position: absolute; inset: 0; margin: auto;
    width: var(--map-w, 100%); height: var(--map-h, 100%);
    touch-action: none;
    image-rendering: pixelated;
  }
  /* legacy ink drawing (developer mode only) is not tile-aligned, so it may fit its box */
  .ui-map:not(.slice-on) > canvas#game { object-fit: contain; }

  /* developer bar and the CRT layer (PS1 only, developer mode only) */
  .ui-devbar { position: absolute; left: var(--sp-2); top: var(--sp-2); z-index: var(--z-dev); display: flex; gap: var(--sp-1); }
  .ui-fxlayer { position: absolute; inset: 0; z-index: var(--z-map); pointer-events: none; display: none; background: var(--fx-layer, none); }
}

@layer state {
  [hidden] { display: none; }
  /* developer-facing pieces (version, seed, save hash, slice bar, key legend ...) carry data-dev-only */
  html:not([data-runtime-debug="1"]) [data-dev-only] { display: none; }
  html[data-runtime-debug="1"][data-skin="ps1"] .ui-map.slice-on .ui-fxlayer { display: block; opacity: var(--slice-fx, 0); }

  /* ---------- records shown in the LOG detail pane (observation board, expedition history, route, messages) ---------- */
  .knowledge-board, .run-history-detail { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
  .knowledge-board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-note); }
  .knowledge-board-head b { font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); }
  .knowledge-board-head span { display: block; color: var(--c-ink-2); }
  .knowledge-dev-reveal { min-height: var(--lay-hit-min); padding: 0 var(--sp-3); background: var(--c-btn-bg); color: var(--c-btn-fg); border: var(--bw-1) solid var(--c-line); font-size: var(--fs-note); }
  .knowledge-dev-reveal.active { background: var(--c-focus-bg); color: var(--c-focus-fg); }
  .knowledge-map-scroll { overflow: auto; border: var(--bw-1) var(--inset-style) var(--c-inset-line); }
  .knowledge-map-scroll svg { display: block; width: 100%; min-width: calc(var(--range-cell) * 18); height: auto; }
  .knowledge-edges line { stroke: var(--c-ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
  .knowledge-edges line.known { stroke: var(--c-ink-1); stroke-dasharray: none; }
  .knowledge-node { cursor: pointer; }
  .knowledge-node circle { fill: var(--c-surface); stroke: var(--c-ink-1); stroke-width: 2; }
  .knowledge-node.lead circle { stroke: var(--c-ink-3); stroke-dasharray: 3 3; }
  .knowledge-node.hypothesis circle { stroke-dasharray: 5 3; }
  .knowledge-node.selected circle { fill: var(--c-focus-bg); }
  .knowledge-node text { fill: var(--c-ink-1); font-size: 15px; }
  .knowledge-node:focus-visible { outline: var(--bw-2) solid var(--c-focus-bg); outline-offset: 2px; }
  .knowledge-detail { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-body); line-height: var(--lh-body); }
  .knowledge-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
  .knowledge-detail-head b { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
  .knowledge-detail-head span, .knowledge-detail small { font-size: var(--fs-note); color: var(--c-ink-2); }
  .knowledge-question { font-size: var(--fs-note); padding-top: var(--sp-2); border-top: var(--bw-1) var(--inset-style) var(--c-inset-line); }
  .knowledge-question b { margin-right: var(--sp-2); }
  .run-history-picker { display: flex; gap: var(--sp-2); overflow-x: auto; }
  .run-history-picker button { flex: none; display: flex; flex-direction: column; align-items: flex-start; min-height: var(--lay-hit-min); padding: var(--sp-1) var(--sp-3); background: var(--c-btn-bg); color: var(--c-btn-fg); border: var(--bw-1) solid var(--c-line); font-size: var(--fs-note); }
  .run-history-picker button.selected { background: var(--c-focus-bg); color: var(--c-focus-fg); }
  .run-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
  .run-history-head b { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
  .run-history-head span, .run-history-seed { font-size: var(--fs-note); color: var(--c-ink-2); }
  .run-history-route, .run-history-build, .run-history-cause, .run-history-empty { font-size: var(--fs-body); line-height: var(--lh-body); }
  .run-history-empty { display: flex; flex-direction: column; gap: var(--sp-2); }
  .run-history-actions > div { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-note); }
  .run-history-timeline ol, .record-route-list, .record-message-list { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
  .run-history-timeline li, .record-route-list li, .record-message-list li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-note); border-bottom: var(--bw-1) var(--inset-style) var(--c-inset-line); }
  .record-route-view { display: flex; flex-direction: column; gap: var(--sp-3); }
}