/* skin-ps1.css: PS1 (3D) skin, html[data-skin="ps1"]. NieR-like: warm off-white ground, dark blocks, thin rules,
   small saturated symbols. Values here are the only place PS1 hex/px literals live (UI_STYLE_GUIDE section 4).
   Structure is shared (components.css); this file re-assigns variables and adds a few decorations. */

@layer skin {
  :root[data-skin="ps1"] {
    color-scheme: light;

    /* colour: ground and ink (guide 4.1) */
    --c-ground: #d9d4c3; --c-surface: #e6e2d3; --c-surface-2: #f1eee2; --c-plate: #cdc8b5;
    --c-ink-1: #2b2b28; --c-ink-2: #4a4a45; --c-ink-3: #5c5a52;
    --c-line: #2b2b28; --c-line-strong: #2b2b28; --c-line-soft: #7a7768;
    --c-focus-bg: #2b2b28; --c-focus-fg: #f1eee2; --c-disabled-fg: #5c5a52;
    --c-map-matte: #2b2b28; --c-danger: #b02418; --c-scrim: rgb(43 43 40 / 0.45);

    /* symbols: one colour per meaning (guide 5.6) */
    --sym-physical: #4a4a45; --sym-fire: #b02418; --sym-cold: #075f78; --sym-lightning: #735700; --sym-water: #1c58a0;
    --sym-poison: #2c6612; --sym-arcane: #6b3fa0; --sym-oil: #7a4e0f; --sym-wet: #1c58a0; --sym-ice: #075f78;
    --sym-metal: #4b5763; --sym-steam: #43596a; --sym-grass: #386426; --sym-blood: #8c1d40; --sym-spores: #52580f;
    --sym-rooted: #386426; --sym-weakened: #745400; --sym-confused: #9a2c8a; --sym-danger: #b02418;
    --sym-mud: #7a4e0f; --sym-ash: #4a4a45; --sym-sand: #735700; --sym-glass: #075f78; --sym-shards: #4b5763;
    --sym-rendering: geometricPrecision;

    /* type (guide 4.2): Barlow for Latin, Zen Kaku Gothic New for Japanese, both bundled */
    --ff-latin: "SW Latin", "SW JP", sans-serif;
    --ff-ui: "SW Latin", "SW JP", sans-serif;
    --ff-num: "SW Latin", "SW JP", sans-serif;
    --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;
    --fs-h1: max(var(--fs-floor), calc(var(--fs-h1-base) * var(--text-scale)));
    --fs-h2: max(var(--fs-floor), calc(var(--fs-h2-base) * var(--text-scale)));
    --fs-body: max(var(--fs-floor), calc(var(--fs-body-base) * var(--text-scale)));
    --fs-note: max(var(--fs-floor), calc(var(--fs-note-base) * var(--text-scale)));
    --fs-num: max(var(--fs-floor), calc(var(--fs-num-base) * var(--text-scale)));
    --fs-title: var(--fs-h1); --fs-title-ja: var(--fs-h2);
    --lh-key: 1.35;

    /* lines and surfaces */
    --bw-1: 1px; --bw-2: 2px; --bw-panel: var(--bw-1); --radius: 0; --shadow-panel: none;
    --inset-style: dotted; --inset-bw-x: 0px; --c-inset-line: var(--c-line-soft);
    --chip-pad: 2px; --title-pad: 0 0 var(--sp-2);
    --c-title-bg: transparent; --c-title-fg: var(--c-ink-1); --c-title-sep: var(--c-ink-3);
    --ps1-bg-deco:
      repeating-radial-gradient(circle at 82% 34%, transparent 0 95px, rgb(43 43 40 / 0.07) 95px 96px),
      linear-gradient(rgb(43 43 40 / 0.05) 1px, transparent 1px);
    --bg-deco: var(--ps1-bg-deco); --bg-deco-size: auto, 100% 96px;
    --ps1-rule-dotted: repeating-linear-gradient(90deg, var(--c-line-soft) 0 2px, transparent 2px 4px);

    /* gauges: solid fills, form (hatch) + colour for danger */
    --c-gauge-empty: var(--c-surface-2);
    --fill-hp: var(--c-ink-1); --fill-mp: var(--c-ink-2); --fill-sp: var(--c-ink-2);
    --mask-hp: none; --mask-mp: none; --mask-sp: none; --gauge-mask-size: auto;
    --low-hatch: repeating-linear-gradient(90deg, transparent 0 3px, var(--c-line-soft) 3px 4px);

    /* map overlay marks */
    --mark-radius: 50%;
    --mark-fill: repeating-linear-gradient(135deg, transparent 0 4px, rgb(176 36 24 / 0.28) 4px 6px);

    /* minimap palette (read by the canvas through getComputedStyle) */
    --c-mm-bg: var(--c-surface); --c-mm-floor: #a9a493; --c-mm-wall: var(--c-ink-1); --c-mm-edge: var(--c-surface-2);
    --c-mm-you: var(--c-ink-1); --c-mm-foe: var(--c-danger); --c-mm-stair: var(--c-ink-1); --c-mm-item: var(--sym-lightning);

    /* buttons, tabs, rows */
    --c-btn-bg: var(--c-plate); --c-btn-fg: var(--c-ink-1);
    --c-tab-bg: var(--c-plate); --c-tab-fg: var(--c-ink-1); --c-tab-line: var(--c-line-soft);
    --c-list-bg: transparent; --list-bw: 0px; --list-pad: 0px; --row-gap: var(--sp-2);
    --c-row-bg: var(--c-plate); --c-row-fg: var(--c-ink-1); --c-row-meta: var(--c-ink-2);
    --c-row-focus-bg: var(--c-focus-bg); --c-row-focus-fg: var(--c-focus-fg);
    --c-tag-line: var(--c-line-soft);
    --c-range-off: var(--c-plate); --c-range-off-line: var(--c-plate); --c-range-hit: var(--c-ink-2); --c-range-self: var(--c-ink-1);
    --row-gutter-w: 0px; --row-bullet-w: 0.62em; --row-bullet-bw: var(--bw-1); --cursor-img: none; --cursor-x-img: none;
    --log-indent: calc(var(--sp-4) + var(--sp-2)); --log-mark-w: 0.5em;
    --c-desc-bg: var(--c-ink-1); --c-desc-fg: var(--c-surface-2); --desc-pad: 0 var(--sp-6);

    /* skin switches for shared DOM */
    --d-title-en: inline; --d-title-ja: inline;
    --d-tab-ico: block; --d-tab-en: inline; --d-tab-ja: none;
    --d-tag: inline; --d-check: none;
    --motion-fade: var(--dur-base);
  }


  /* NieR-like panel details */
  [data-skin="ps1"] .ui-row { transition: background-color var(--motion-fade) var(--ease-out); }
  [data-skin="ps1"] .ui-row:hover, [data-skin="ps1"] .ui-btn:hover, [data-skin="ps1"] .ui-tab:hover {
    background: var(--c-focus-bg); color: var(--c-focus-fg);
  }
  [data-skin="ps1"] .ui-desc__text::before { background: var(--c-surface-2); }
  [data-skin="ps1"] .ui-guide--field { color: var(--c-ink-1); }
  [data-skin="ps1"] .ui-log__line:last-child::before { background: var(--c-ink-1); }
  [data-skin="ps1"] .ui-hud .ui-title { border-bottom-color: var(--c-line); }
  [data-skin="ps1"] .ui-detail__hint { border-top: var(--bw-1) dotted var(--c-line-soft); padding-top: var(--sp-3); }

  @media (prefers-reduced-motion: reduce) {
    :root[data-skin="ps1"] { --motion-fade: 0s; }
  }
}

@layer skin {
  /* CRT layer over the 3D map (developer bar only): scanlines + vignette */
  :root[data-skin="ps1"] {
    --fx-layer:
      repeating-linear-gradient(0deg, transparent 0 2px, rgb(0 0 0 / 0.22) 2px 3px),
      radial-gradient(ellipse at center, transparent 52%, rgb(10 4 24 / 0.55) 100%);
  }

  /* witch portrait art, attached per skin (menu and conversation only) */
  [data-skin="ps1"] .ui-portrait__img { background-image: url("../../../assets/ui/witch-ps1.png"); }
}

@layer skin {
  html[data-skin="ps1"] .product-flow-title-panel::before { content: ""; position: absolute; inset: 0; background: url("../../../assets/title/sleep-well-pen-v1.png") center/cover; filter: grayscale(1); pointer-events: none; }
}