/* UI System v1 (docs/design/UI-SYSTEM-V1.md). Loaded LAST (after vow.css). Sections: 1 tokens, 2 reset, 3 components, 4 helpers, 5 adapter (temporary), 6 screen exceptions. */

/* ---------- 1. tokens ---------- */
:root{
  --fs-meta:11px;--fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:22px;--fs-3xl:28px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;
  --r-xs:6px;--r-sm:10px;--r-md:12px;--r-lg:16px;--r-xl:18px;--r-pill:999px;
  --paper-0:#fbf1d8;--paper-1:#f6e7c4;--paper-2:#e6cf9c;--paper:linear-gradient(180deg,var(--paper-1),var(--paper-2));
  --paper-row:rgba(255,248,228,.6);--paper-line:rgba(120,80,30,.3);
  --frame:linear-gradient(160deg,#fff2b8,#e2a233 30%,#8a5410 60%,#ffd77a 85%,#8a5410);
  --wood-1:#7a4a22;--wood-2:#4a2a12;--wood:linear-gradient(180deg,var(--wood-1),var(--wood-2));--wood-edge:#2b170a;
  --scrim:rgba(7,22,17,.78);
  --ink:#3a2410;--ink-2:#5a4224;--ink-3:#6a4a22;--ink-on-dark:#fff0bd;
  --gold-1:#fff0a6;--gold-2:#ffc84a;--gold-3:#e48c17;--gold-edge:#4a2806;--gold-sel:#f0cf7a;
  --green-1:#3c9a62;--green-2:#1f6a3e;--green-ink:#1a5c34;
  --red-1:#c93c31;--red-2:#8f1c14;--red-ink:#a3231a;--red-edge:#4a0c08;
  --rar-common-ring:#a3a8b0;--rar-common-bg:#d9d2c0;--rar-common-ink:#3f3a2e;--rar-common-deep:#3f444b;
  --rar-uncommon-ring:#5fbf5a;--rar-uncommon-bg:#cdebc6;--rar-uncommon-ink:#1d4d1a;--rar-uncommon-deep:#1d4d1a;
  --rar-rare-ring:#4aa3ff;--rar-rare-bg:#cfe3ff;--rar-rare-ink:#0f356a;--rar-rare-deep:#0f356a;
  --rar-epic-ring:#b46bff;--rar-epic-bg:#e6d3ff;--rar-epic-ink:#3a1468;--rar-epic-deep:#3a1468;
  --rar-legendary-ring:#ffa53a;--rar-legendary-bg:#ffe0b8;--rar-legendary-ink:#6b3006;--rar-legendary-deep:#6b3006;
  --rar-fusion-ring:#ffd25a;--rar-fusion-bg:#fff0a6;--rar-fusion-ink:#4a2300;
  --rar-vow-ring:#2f8f6a;--rar-vow-bg:#7fd69b;--rar-vow-ink:#0b3a22;
  --sh-edge-sm:0 2px 0 var(--edge,var(--wood-edge));--sh-edge:0 3px 0 var(--edge,var(--wood-edge));--sh-edge-lg:0 4px 0 var(--edge,var(--wood-edge));
  --sh-hi:inset 0 2px 0 rgba(255,255,255,.35);--sh-card:0 8px 20px rgba(0,0,0,.4);--sh-pop:0 20px 50px rgba(0,0,0,.6);
  --sh-focus:0 0 0 3px #fff8e4,0 0 0 6px #c46a00;--sh-glow-gold:0 0 16px rgba(255,200,90,.6);
  --ic-inline:16px;--ic-chip:20px;--ic-row:24px;--ic-list:28px;--ic-tile:40px;--ic-hero:56px;--ic-reveal:72px;
  --hit:44px;
}
@media (pointer:fine){:root{--hit:36px}}
@media (pointer:coarse){:root{--hit:44px}}

/* ---------- 3. components ---------- */
/* Base is in :where() (specificity 0) so a legacy rule of any weight still wins until its batch deletes it. */
:where(.ui-btn){--edge:var(--wood-edge);display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);box-sizing:border-box;min-width:0;min-height:44px;padding:0 var(--sp-4);
  font:800 var(--fs-md)/1.3 inherit;font-family:inherit;color:var(--ink-on-dark);background:var(--wood);border:2px solid var(--edge);border-radius:var(--r-md);
  box-shadow:var(--sh-hi),var(--sh-edge);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;white-space:nowrap;text-shadow:none;-webkit-text-stroke:0;text-decoration:none;
  transition:filter .12s,transform .08s,box-shadow .08s;position:relative}
.ui-btn img,.ui-btn .j-ic{width:var(--ic-chip);height:var(--ic-chip);object-fit:contain;flex:none}
.ui-btn--wrap{white-space:normal;text-align:center}
.ui-btn--primary{--edge:var(--gold-edge);background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 45%,var(--gold-3));color:var(--ink)}
.ui-btn--secondary{--edge:var(--wood-edge);background:var(--wood);color:var(--ink-on-dark)}
.ui-btn--tertiary{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.ui-btn--tertiary.is-danger{color:var(--red-ink)}
.ui-btn--danger{--edge:var(--red-edge);background:linear-gradient(180deg,var(--red-1),var(--red-2));color:#fff}
.ui-btn--sm{min-height:36px;font-size:var(--fs-sm);padding:0 var(--sp-3);border-radius:var(--r-sm);box-shadow:var(--sh-hi),var(--sh-edge-sm)}
.ui-btn--md{min-height:44px;font-size:var(--fs-md)}
.ui-btn--lg{min-height:52px;font-size:var(--fs-xl);padding:0 var(--sp-6);box-shadow:var(--sh-hi),var(--sh-edge-lg)}
.ui-btn--tertiary,.ui-btn--tertiary:active{box-shadow:none}
@media (hover:hover){.ui-btn:hover:not(:disabled):not([aria-disabled=true]){filter:brightness(1.06)}}
.ui-btn:active:not(:disabled){transform:translateY(2px);box-shadow:var(--sh-hi),0 1px 0 var(--edge)}
.ui-btn--tertiary:active:not(:disabled){transform:none}
.ui-btn:focus-visible,.ui-chip:focus-visible,.ui-tile:focus-visible{outline:0;box-shadow:var(--sh-hi),var(--sh-edge),var(--sh-focus)}
.ui-btn--tertiary:focus-visible{box-shadow:var(--sh-focus)}
.ui-btn:disabled,.ui-btn[aria-disabled=true]{opacity:.5;filter:grayscale(.4);cursor:default;pointer-events:none}
.ui-btn[data-locked]{opacity:.5;filter:grayscale(.4);pointer-events:auto}
.ui-btn[data-locked]::after{content:"";position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;background:url(assets/ui/icon-lock.webp) center/contain no-repeat}
.ui-btn[aria-busy=true]{color:transparent;pointer-events:none}
.ui-btn[aria-busy=true]::before{content:"";position:absolute;width:20px;height:20px;border:3px solid var(--ink-on-dark);border-top-color:transparent;border-radius:50%;animation:ui-spin .8s linear infinite}
.ui-btn--primary[aria-busy=true]::before{border-color:var(--ink);border-top-color:transparent}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ui-btn[aria-busy=true]::before{animation-duration:2.4s}.ui-btn{transition:none}}
html[data-motion=reduce] .ui-btn[aria-busy=true]::before{animation-duration:2.4s}
html[data-motion=reduce] .ui-btn{transition:none}
.ui-btn[aria-pressed=true],.ui-btn[aria-selected=true]{background:var(--gold-sel);color:var(--ink);border-color:#8a5410}
.ui-btn.is-ready{box-shadow:var(--sh-hi),var(--sh-edge),var(--sh-glow-gold)}
.ui-btn.is-ready.ui-btn--primary{animation:ui-breathe 2.4s ease-in-out infinite}
@keyframes ui-breathe{50%{filter:brightness(1.08);box-shadow:var(--sh-hi),var(--sh-edge),0 0 22px rgba(255,200,90,.85)}}
@media (prefers-reduced-motion:reduce){.ui-btn.is-ready.ui-btn--primary{animation:none}}
html[data-motion=reduce] .ui-btn.is-ready.ui-btn--primary{animation:none}

/* icon button */
.ui-btn--icon{padding:0;width:44px;min-width:44px}
.ui-btn--icon img,.ui-btn--icon .j-ic{width:var(--ic-row);height:var(--ic-row)}
.ui-btn--icon.ui-btn--sm{width:36px;min-width:36px}.ui-btn--icon.ui-btn--sm img,.ui-btn--icon.ui-btn--sm .j-ic{width:var(--ic-chip);height:var(--ic-chip)}
.ui-btn--icon.ui-btn--lg{width:52px;min-width:52px}.ui-btn--icon.ui-btn--lg img,.ui-btn--icon.ui-btn--lg .j-ic{width:var(--ic-list);height:var(--ic-list)}
.ui-btn--icon.is-round{border-radius:50%}

/* tags */
.ui-tag{display:inline-flex;align-items:center;gap:var(--sp-1);box-sizing:border-box;height:22px;padding:1px 8px;border-radius:var(--r-xs);font:800 var(--fs-xs)/1.5 inherit;font-family:inherit;background:rgba(58,36,16,.12);color:var(--ink);white-space:nowrap}
.ui-tag img{width:var(--ic-inline);height:var(--ic-inline)}
.ui-tag--danger{color:var(--red-ink);background:rgba(179,38,30,.12)}
.ui-tag--ok{color:var(--green-ink);background:rgba(63,140,60,.16)}
.ui-tag--dark{color:var(--ink-on-dark);background:rgba(20,10,4,.75)}
.ui-tag--r-common{background:var(--rar-common-bg);color:var(--rar-common-ink);border:1px solid var(--rar-common-ring)}
.ui-tag--r-uncommon{background:var(--rar-uncommon-bg);color:var(--rar-uncommon-ink);border:1px solid var(--rar-uncommon-ring)}
.ui-tag--r-rare{background:var(--rar-rare-bg);color:var(--rar-rare-ink);border:1px solid var(--rar-rare-ring)}
.ui-tag--r-epic{background:var(--rar-epic-bg);color:var(--rar-epic-ink);border:1px solid var(--rar-epic-ring)}
.ui-tag--r-legendary{background:var(--rar-legendary-bg);color:var(--rar-legendary-ink);border:1px solid var(--rar-legendary-ring)}
.ui-tag--r-fusion{background:var(--rar-fusion-bg);color:var(--rar-fusion-ink);border:1px solid var(--rar-fusion-ring)}
.ui-tag--r-vow{background:var(--rar-vow-bg);color:var(--rar-vow-ink);border:1px solid var(--rar-vow-ring)}

/* chip (interactive pill) */
:where(.ui-chip){display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;min-height:36px;padding:0 var(--sp-3);border-radius:var(--r-pill);background:var(--paper-row);border:2px solid #8a5410;
  font:800 var(--fs-sm)/1.3 inherit;font-family:inherit;color:var(--ink);cursor:pointer;touch-action:manipulation;white-space:nowrap;position:relative;-webkit-text-stroke:0;text-shadow:none}
.ui-chip img{width:var(--ic-chip);height:var(--ic-chip)}
.ui-chip[aria-pressed=true]{background:var(--gold-sel)}

/* badge (corner overlay, 11px floor) */
.ui-badge{display:inline-flex;align-items:center;box-sizing:border-box;height:18px;padding:0 5px;border-radius:var(--r-xs);font:800 var(--fs-meta)/1.4 inherit;font-family:inherit;background:var(--gold-2);color:var(--ink)}

/* tile */
.ui-tile{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--rar-common-ring);border-radius:var(--r-sm);position:relative;padding:0}
.ui-tile img{width:100%;height:100%;object-fit:contain}
.ui-tile[aria-pressed=true],.ui-tile.is-selected{box-shadow:0 0 0 3px var(--gold-sel),var(--sh-glow-gold)}

/* surfaces */
.ui-panel{color:var(--ink);background:var(--paper) padding-box,var(--frame) border-box;border:6px solid transparent;border-radius:var(--r-lg);box-shadow:var(--sh-card)}
dialog.ui-panel{box-shadow:var(--sh-pop)}
.ui-panel h1,.ui-panel h2,.ui-panel h3{color:var(--ink)}
.ui-panel--sheet{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:88%;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.ui-plaque{background:var(--wood);border:3px solid var(--wood-edge);border-radius:var(--r-md);color:var(--ink-on-dark)}
.ui-row{box-sizing:border-box;min-height:48px;background:var(--paper-row);border:2px solid #c9ab6a;border-radius:var(--r-md);padding:6px 10px}

/* ---------- 4. helpers ---------- */
.ui-hit{position:relative}
.ui-hit::after{content:"";position:absolute;inset:-8px}
.ui-meta{font-size:var(--fs-meta);line-height:1.4;color:var(--ink-2)}
.ui-hud-label{font-size:var(--fs-xs);line-height:1.5;-webkit-text-stroke:2px #1b0d04;paint-order:stroke fill;color:#fff}
.ui-seg{display:inline-flex;gap:var(--sp-1);padding:2px;border-radius:var(--r-pill);background:rgba(58,36,16,.12)}

/* ---------- 5. adapter block (temporary; removed when batches T2-T7 land) ---------- */
/* Legacy token names re-pointed to the new tokens (consumers migrate in their batch). */
/* T1 note: the legacy dark-green base button look stays in style.css:2 / journey-ui.css:14 behind a zero-weight :where(:not(.ui-btn,.ui-chip,.ui-tile)) guard
   (same specificity and cascade position as before, so un-migrated screens are pixel-identical). Delete those guarded rules when batch T7 lands. */
/* (aliases for --v15-*, --v16-*, --dc-* are added here only when a consumer migrates; --v15-gold is #f0cf7a = --gold-sel, so no blanket re-point) */

/* ---------- 6. screen-scoped exceptions ---------- */
/* T1: parchment screens (landing hero stays on art). Text on .ui-panel is ink, not the legacy light cream. */
.j-parchment.ui-panel{outline:0}
.j-parchment.ui-panel h1,.j-parchment.ui-panel h2,.j-parchment.ui-panel h3{color:var(--ink)}
.j-parchment.ui-panel small,.j-parchment.ui-panel label{color:var(--ink-2)}
.j-parchment.ui-panel p{color:var(--ink)}
.j-journal.ui-panel article,.j-journal.ui-panel article p,.j-journal.ui-panel article small,.j-journal.ui-panel article b{color:var(--ink)}
.j-colors .ui-chip{flex:1;justify-content:center}
dialog.ui-panel h2,dialog.ui-panel #choiceDesc,dialog.ui-panel #draftStats{color:var(--ink)}
dialog.ui-panel #choiceDesc,dialog.ui-panel #draftStats{color:var(--ink-2)}
#pauseMenu .pm-btns .ui-btn{white-space:normal}