/* Dungeon Incorporated: single stylesheet. Variables first; html classes: text-1/text-2, hc, cb, reduced-motion, show-tips. */
:root {
  --bg: #0f1420; --panel: #141b2b; --panel-2: #1b2437; --panel-3: #232e47; --line: #2c3a58;
  --gold: #d8a944; --gold-dim: #8f7330; --parch: #d9c4a0; --parch-2: #c9b088; --ink: #2a1d0e;
  --green: #2a8239; --green-hi: #3fae52; --danger: #b23a2e; --danger-hi: #d65546; --warn: #d9a21b; --info: #4a8fd9;
  --text: #ebe6d8; --muted: #9ba6bd; --good-c: #4cc263; --warn-c: #e8b73a; --bad-c: #e8624f;
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --r: 10px; --r-sm: 6px; --tap: 44px; --hud-h: 56px; --rail-w: 208px; --tab-h: 62px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --shadow: 0 6px 22px rgba(0,0,0,.45); --ease: .16s ease;
}
html.cb { --good-c: #4aa3ff; --warn-c: #f2c94c; --bad-c: #ff8a3d; --green: #2a6fb8; --green-hi: #3b87d6; --danger: #c2641c; --danger-hi: #e07a2f; }
html.hc { --bg: #000; --panel: #0a0d14; --panel-2: #10151f; --panel-3: #1a2233; --line: #e6e6e6; --text: #fff; --muted: #d4d8e2; --gold: #ffd35c; --parch: #fff3d6; }
html.text-1 { font-size: 112.5%; } html.text-2 { font-size: 125%; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; height: 100%; background: var(--bg); }
body { margin: 0; height: 100%; min-height: 100dvh; overflow: hidden; color: var(--text); background: var(--bg); font: 1rem/1.45 var(--font-body); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#app { height: 100dvh; width: 100%; overflow: hidden; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0 0 .4em; letter-spacing: .02em; line-height: 1.15; }
p { margin: 0 0 .6em; } .muted { color: var(--muted); font-size: .9em; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
html.hc :focus-visible { outline-color: #fff; outline-width: 4px; }
button { font: inherit; color: inherit; cursor: pointer; }
.boot { display: grid; place-items: center; height: 100%; color: var(--parch); font-family: var(--font-display); }

/* ---------- layout shell ---------- */
.shell { display: grid; height: 100dvh; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "hud hud" "rail screen"; background: var(--bg); }
.hud { grid-area: hud; } .rail { grid-area: rail; } .screen { grid-area: screen; } .tabbar { grid-area: tabbar; display: none; }
.shell.is-bare { grid-template-columns: minmax(0, 1fr); grid-template-areas: "screen"; grid-template-rows: minmax(0, 1fr); }
.shell.is-bare .hud, .shell.is-bare .rail, .shell.is-bare .tabbar { display: none; }
.screen { position: relative; overflow: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; min-width: 0; outline: none; }
.screen--title, .screen--workshop, .screen--raid { overflow: hidden; }
.screen-pad { padding: 18px 20px 28px; max-width: 1200px; margin: 0 auto; }
.screen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.screen-head__title { font-size: 1.7rem; color: var(--gold); margin: 0; }
.screen-head__right { display: flex; gap: 8px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.stack { display: grid; gap: 14px; } .row-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .row-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* ---------- HUD ---------- */
.hud { display: flex; align-items: center; gap: 10px; min-height: var(--hud-h); padding: calc(var(--sat) + 4px) calc(12px + var(--sar)) 4px calc(12px + var(--sal));
  background: linear-gradient(180deg, #1a2338, #121a2b); border-bottom: 2px solid var(--gold-dim); box-shadow: 0 2px 0 #000a; position: relative; z-index: 5; }
.hud__brand { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--gold); padding: 0 6px; min-height: var(--tap); width: calc(var(--rail-w) - 20px); text-align: left; }
.hud__brand .icon { width: 30px; height: 30px; } .hud__name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1; color: var(--parch); }
.hud__stats { display: flex; align-items: center; gap: 6px 16px; background: none; border: 0; padding: 4px 8px; min-height: var(--tap); flex-wrap: wrap; border-radius: var(--r); text-align: left; }
.hud__stats:hover { background: #ffffff0f; }
.hud__stat { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; white-space: nowrap; } .hud__stat b { font-weight: 700; } .hud__stat small { color: var(--muted); }
.hud__stat--gold { color: var(--gold); } .hud__stat--gold .icon { color: var(--gold); } .hud__stat--bad { color: var(--bad-c); }
.hud__rep { display: inline-flex; gap: 12px; color: var(--parch); } .hud__rep span { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; } .hud__rep .icon { width: 18px; height: 18px; color: var(--gold); }
.hud__job { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); max-width: 320px; padding: 4px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-align: left; }
.hud__job--none { opacity: .7; cursor: default; } .hud__jobtext { display: grid; line-height: 1.15; min-width: 0; } .hud__jobtext b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; } .hud__jobtext small { color: var(--muted); text-transform: capitalize; }

/* ---------- rail / tab bar ---------- */
.rail { display: flex; flex-direction: column; gap: 4px; padding: 12px 8px calc(12px + var(--sab)) calc(8px + var(--sal)); background: var(--panel); border-right: 2px solid var(--gold-dim); overflow-y: auto; }
.rail__btn { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 6px 12px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--parch); text-align: left; font-weight: 600; }
.rail__btn .icon { width: 24px; height: 24px; color: var(--gold); flex: none; }
.rail__btn:hover { background: var(--panel-2); border-color: var(--line); }
.rail__btn.is-active { background: linear-gradient(180deg, #1f6b2d, #174f22); border-color: var(--gold); color: #fff; box-shadow: inset 0 0 0 1px #0006; } .rail__btn.is-active .icon { color: #fff; }
.rail__spacer { flex: 1; }
.tabbar { padding: 4px calc(6px + var(--sar)) calc(4px + var(--sab)) calc(6px + var(--sal)); background: var(--panel); border-top: 2px solid var(--gold-dim); gap: 4px; }
.tabbar__btn { flex: 1; min-width: 0; min-height: var(--tap); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--parch); font-size: max(12px, .72rem); font-weight: 600; }
.tabbar__btn .icon { width: 26px; height: 26px; color: var(--gold); } .tabbar__btn.is-active { background: linear-gradient(180deg, #1f6b2d, #174f22); border-color: var(--gold); color: #fff; } .tabbar__btn.is-active .icon { color: #fff; }
.morelist { display: grid; gap: 6px; } .morelist__btn { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel-2); color: var(--text); text-align: left; font-weight: 600; }
.morelist__btn > span { flex: 1; } .morelist__btn .icon { color: var(--gold); }

/* ---------- icons ---------- */
.icon { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; } .icon svg { width: 100%; height: 100%; }
.icon--gold svg, .icon--coin svg, .icon--crown svg, .icon--star svg { stroke-width: 1.8; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); min-width: var(--tap); padding: 8px 18px; border-radius: var(--r); border: 2px solid var(--gold-dim); background: linear-gradient(180deg, var(--panel-3), var(--panel-2)); color: var(--parch); font-weight: 700; letter-spacing: .01em; transition: transform var(--ease), filter var(--ease), box-shadow var(--ease); user-select: none; -webkit-user-select: none; }
.btn:hover:not(:disabled) { filter: brightness(1.15); } .btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: linear-gradient(180deg, var(--green-hi), var(--green) 55%, #1f6b2d); border-color: var(--gold); color: #fff; text-shadow: 0 1px 0 #0007; box-shadow: 0 2px 0 #0007, inset 0 1px 0 #ffffff33; font-size: 1.05rem; }
.btn--danger { background: linear-gradient(180deg, var(--danger-hi), var(--danger)); border-color: #e9a99f; color: #fff; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--parch); } .btn--ghost:hover:not(:disabled) { background: #ffffff12; }
.btn--small { min-height: 36px; padding: 4px 12px; font-size: .9rem; } .btn--block { display: flex; width: 100%; } .btn--icon-only { padding: 6px; } .btn .icon { width: 1.3em; height: 1.3em; }
@media (pointer: coarse) { .btn--small { min-height: var(--tap); } }

/* ---------- panels, parchment ---------- */
.panel { background: var(--panel); border: 2px solid var(--gold-dim); border-radius: var(--r); box-shadow: inset 0 0 0 1px #000a, var(--shadow); overflow: hidden; }
.panel__title { margin: 0; padding: 10px 16px; font-size: 1.05rem; color: var(--gold); background: linear-gradient(180deg, #1d2740, #161e32); border-bottom: 1px solid var(--gold-dim); }
.panel__body { padding: 14px 16px; display: grid; gap: 12px; }
.parch { background: linear-gradient(180deg, #e3d1b0, var(--parch)); color: var(--ink); border: 2px solid #8a6a2e; border-radius: var(--r); }
.parch .muted { color: #6b5a3a; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--panel-3); color: var(--text); border: 1px solid var(--line); white-space: nowrap; }
.tag--gold { color: var(--gold); border-color: var(--gold-dim); } .tag--good { color: var(--good-c); border-color: currentColor; } .tag--warn { color: var(--warn-c); border-color: currentColor; } .tag--bad { color: var(--bad-c); border-color: currentColor; }
.stat { display: flex; align-items: center; gap: 10px; } .stat .icon { width: 26px; height: 26px; color: var(--gold); } .stat__label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .stat__value { font-weight: 700; font-size: 1.1rem; }
.stat--good .stat__value { color: var(--good-c); } .stat--bad .stat__value { color: var(--bad-c); } .stat--warn .stat__value { color: var(--warn-c); }
.bar { position: relative; height: 18px; border-radius: 999px; background: #0b101b; border: 1px solid var(--line); overflow: hidden; min-width: 70px; }
.bar__fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #f0c85f, var(--gold)); transition: width .3s ease; }
.bar--good .bar__fill { background: linear-gradient(180deg, #62d97b, var(--good-c)); } .bar--warn .bar__fill { background: var(--warn-c); } .bar--bad .bar__fill { background: var(--bad-c); } .bar--info .bar__fill { background: var(--info); }
.bar__text { position: relative; display: block; text-align: center; font-size: max(12px, .72rem); font-weight: 700; line-height: 16px; color: #fff; text-shadow: 0 1px 2px #000; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); } .kv--bad b { color: var(--bad-c); }
.repline { display: grid; grid-template-columns: auto 1fr minmax(90px, 140px); gap: 10px; align-items: center; } .repline .icon { color: var(--gold); width: 24px; height: 24px; } .repline__main { display: grid; }
.collapsible { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); } .collapsible__head { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 8px 12px; cursor: pointer; font-weight: 700; list-style: none; } .collapsible__head::-webkit-details-marker { display: none; } .collapsible__head > span:not(.icon) { flex: 1; } .collapsible[open] .collapsible__head .icon:last-child { transform: rotate(180deg); } .collapsible__body { padding: 0 12px 12px; }

/* ---------- headline checks ---------- */
.checks { display: grid; gap: 6px; }
.check { border: 2px solid var(--line); border-radius: var(--r); background: var(--panel-2); overflow: hidden; }
.check__head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 6px 12px; border: 0; background: transparent; text-align: left; font-weight: 700; }
.check__label { flex: 1; } .check__word { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.check .icon:last-child { transition: transform var(--ease); } .check.is-open .icon:last-child { transform: rotate(180deg); }
.check--good { border-color: var(--good-c); } .check--good .check__head > .icon:first-child, .check--good .check__word { color: var(--good-c); }
.check--warn { border-color: var(--warn-c); } .check--warn .check__head > .icon:first-child, .check--warn .check__word { color: var(--warn-c); }
.check--bad { border-color: var(--bad-c); } .check--bad .check__head > .icon:first-child, .check--bad .check__word { color: var(--bad-c); }
.check__body { padding: 4px 14px 12px; border-top: 1px dashed var(--line); font-size: .92rem; } .check__list { margin: 6px 0 0; padding-left: 1.1em; }
html.cb .check--bad .check__word::before { content: '! '; } html.cb .check--warn .check__word::before { content: '~ '; }

/* ---------- tabs, forms ---------- */
.tabs__list { display: flex; gap: 4px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.tabs__tab { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 6px 14px; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 700; white-space: nowrap; }
.tabs__tab.is-active { color: var(--gold); border-bottom-color: var(--gold); } .tabs__pane { padding-top: 12px; }
.input, .textarea { width: 100%; min-height: var(--tap); padding: 8px 12px; border-radius: var(--r-sm); border: 2px solid var(--line); background: #0b101b; color: var(--text); font: inherit; } .input:focus, .textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px #d8a94455; }
.textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; resize: vertical; }
.field { display: grid; gap: 6px; } .field__label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px dashed var(--line); } .setting:last-child { border-bottom: 0; } .setting__text { flex: 1 1 220px; min-width: 0; } .setting__title { font-weight: 700; } .setting__ctl { flex: 0 0 auto; max-width: 100%; }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { width: 54px; height: 30px; border-radius: 999px; background: #0b101b; border: 2px solid var(--line); position: relative; transition: background var(--ease); flex: none; }
.switch__thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--parch); transition: transform var(--ease); }
.switch input:checked + .switch__track { background: var(--green); border-color: var(--gold); } .switch input:checked + .switch__track .switch__thumb { transform: translateX(24px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--gold); outline-offset: 2px; } .switch__state { font-size: .8rem; font-weight: 700; min-width: 2em; color: var(--muted); }
.seg { display: inline-flex; border: 2px solid var(--gold-dim); border-radius: var(--r); overflow: hidden; } .seg__btn { min-height: var(--tap); min-width: 56px; padding: 6px 14px; border: 0; border-right: 1px solid var(--line); background: var(--panel-2); font-weight: 700; } .seg__btn:last-child { border-right: 0; } .seg__btn.is-active { background: var(--green); color: #fff; }
.range { width: min(240px, 100%); accent-color: var(--gold); min-height: var(--tap); }
.keymap { display: grid; gap: 4px; } .keymap__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.keycap { display: inline-flex; gap: 6px; align-items: center; min-width: 120px; min-height: var(--tap); padding: 4px 10px; border-radius: var(--r-sm); border: 2px solid var(--line); background: #0b101b; justify-content: center; } .keycap:hover { border-color: var(--gold); } .keycap.is-waiting { border-color: var(--gold); background: #2a2210; } .keycap__wait { font-size: .8rem; color: var(--gold); }
kbd { font: 700 .85rem ui-monospace, Menlo, monospace; padding: 2px 8px; border-radius: 5px; background: var(--panel-3); border: 1px solid var(--line); border-bottom-width: 3px; color: var(--parch); }
.slot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--r); background: var(--panel-2); flex-wrap: wrap; } .slot--full { border-color: var(--gold-dim); } .slot > .icon { width: 26px; height: 26px; color: var(--gold); } .slot__main { flex: 1 1 180px; min-width: 0; } .slot__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .slot__name { font-weight: 700; } .slot__actions { display: flex; gap: 6px; }

/* ---------- overlays ---------- */
#overlays { position: fixed; inset: 0; z-index: 100; pointer-events: none; } #overlays > * { pointer-events: auto; }
.overlay { position: fixed; inset: 0; display: grid; animation: fadein .14s ease; } .overlay.is-closing { opacity: 0; transition: opacity .14s; }
.overlay__scrim { position: absolute; inset: 0; background: rgba(5, 8, 14, .72); backdrop-filter: blur(2px); }
.overlay--modal { place-items: center; padding: 16px; }
.overlay__dlg { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); background: var(--panel); border: 2px solid var(--gold); border-radius: 14px; box-shadow: var(--shadow), 0 0 0 4px #0008; width: min(480px, 100%); overflow: hidden; }
.overlay__dlg--wide { width: min(680px, 100%); }
.overlay__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--gold-dim); background: linear-gradient(180deg, #1d2740, #161e32); } .overlay__title { margin: 0; color: var(--gold); font-size: 1.25rem; }
.overlay__body { padding: 16px 18px; overflow: auto; } .overlay__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px calc(12px + var(--sab)); border-top: 1px solid var(--line); background: #0f1523; flex-wrap: wrap; }
.overlay--sheet { align-items: end; justify-items: end; }
.overlay__dlg--sheet { width: min(420px, 100%); max-height: 100dvh; height: 100dvh; border-radius: 14px 0 0 14px; border-right: 0; animation: slidein .2s ease; }
.overlay__grab { display: none; }
@keyframes fadein { from { opacity: 0; } } @keyframes slidein { from { transform: translateX(40px); opacity: 0; } } @keyframes slideup { from { transform: translateY(60px); opacity: 0; } } @keyframes pop { from { transform: translateY(10px) scale(.96); opacity: 0; } }
#toasts { position: fixed; z-index: 120; right: calc(14px + var(--sar)); top: calc(var(--sat) + 70px); display: grid; gap: 8px; width: min(380px, calc(100vw - 28px)); pointer-events: none; }
.toast { pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r); background: var(--panel-2); border: 2px solid var(--line); box-shadow: var(--shadow); animation: pop .2s ease; transition: opacity .24s, transform .24s; }
.toast .btn { pointer-events: auto; } /* toasts never eat map taps; only their action button is clickable */
.toast.is-out { opacity: 0; transform: translateX(20px); } .toast__msg { flex: 1; }
.toast--good { border-color: var(--good-c); } .toast--good > .icon { color: var(--good-c); } .toast--warn { border-color: var(--warn-c); } .toast--warn > .icon { color: var(--warn-c); } .toast--bad { border-color: var(--bad-c); } .toast--bad > .icon { color: var(--bad-c); }

/* tooltips: instant styled bubble when "show all tooltips" is on (native title still works otherwise) */
[data-tip] { position: relative; }
html.show-tips [data-tip]:hover::after, html.show-tips [data-tip]:focus-visible::after, html.show-tips [data-tip]:active::after { content: attr(data-tip); position: absolute; z-index: 60; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); max-width: 240px; width: max-content; padding: 6px 10px; border-radius: 6px; background: #000; color: var(--parch); border: 1px solid var(--gold); font: 600 .78rem/1.3 var(--font-body); text-align: left; white-space: normal; pointer-events: none; }

/* ---------- art ---------- */
.portrait { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: #0b101b; flex: none; } .portrait--framed { border: 2px solid var(--gold); box-shadow: 0 0 0 2px #000a; } .portrait__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sprite { object-fit: contain; image-rendering: auto; flex: none; filter: drop-shadow(0 3px 3px #0008); }

/* ---------- title ---------- */
.title { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px); overflow-y: auto; }
.title__bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; transform: scale(1.03); animation: drift 40s ease-in-out infinite alternate; }
.title__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(8, 12, 22, .2), rgba(8, 12, 22, .75) 85%), linear-gradient(180deg, rgba(8,12,22,.35), rgba(8,12,22,0) 40%, rgba(8,12,22,.6)); }
@keyframes drift { to { transform: scale(1.1) translateX(-1.5%); } }
.title__box { position: relative; width: min(440px, 100%); display: grid; gap: 12px; text-align: center; justify-items: center; padding: 22px 22px 24px; background: rgba(15, 20, 32, .72); border: 2px solid var(--gold); border-radius: 16px; box-shadow: var(--shadow), 0 0 60px #000a; backdrop-filter: blur(3px); }
.title__crest .icon { width: 54px; height: 54px; color: var(--gold); } .title__logo { display: grid; margin: 0; font-size: clamp(2.2rem, 8vw, 3.2rem); color: var(--parch); text-shadow: 0 3px 0 #000, 0 0 24px #d8a94455; line-height: 1; } .title__logo span:last-child { color: var(--gold); font-size: max(12px, .78em); letter-spacing: .06em; }
.title__tag { font-family: var(--font-display); font-style: italic; color: var(--parch); margin: 0 0 4px; font-size: 1.02rem; }
.title__menu { display: grid; gap: 10px; width: 100%; } .title__hint { margin-top: -4px; font-size: .85rem; color: var(--muted); } .title__hint--bad { color: var(--warn-c); }
.title__foot { position: absolute; bottom: calc(var(--sab) + 8px); left: 0; right: 0; text-align: center; font-size: .75rem; color: #c7cbd6aa; pointer-events: none; }
.diffs { display: grid; gap: 8px; } .diff { display: grid; gap: 4px; text-align: left; padding: 10px 14px; border-radius: var(--r); border: 2px solid var(--line); background: var(--panel-2); min-height: var(--tap); }
.diff.is-active { border-color: var(--gold); background: #1c2a1f; box-shadow: inset 0 0 0 1px var(--green); } .diff__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } .diff__text { color: var(--muted); font-size: .9rem; } .diff.is-active .diff__name::before { content: '✓'; color: var(--good-c); margin-right: 6px; } .diff.is-active .diff__name { justify-content: flex-start; } .diff.is-active .diff__name .tag { margin-left: auto; }

/* ---------- loader, crash ---------- */
.loader { height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 40%, #1a2338, var(--bg) 70%); }
.loader__logo .icon { width: 72px; height: 72px; color: var(--gold); animation: bob 1.6s ease-in-out infinite; } .loader__title { color: var(--parch); font-size: 1.8rem; margin: 0; }
.loader__bar { width: min(320px, 80vw); height: 14px; border-radius: 999px; background: #0b101b; border: 2px solid var(--gold-dim); overflow: hidden; } .loader__fill { height: 100%; background: linear-gradient(180deg, #f0c85f, var(--gold)); transition: width .15s; } .loader__msg { color: var(--muted); font-size: .9rem; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.crash { display: grid; justify-items: center; gap: 12px; padding: 40px 20px; text-align: center; max-width: 640px; margin: 0 auto; } .crash h1 { color: var(--gold); margin: 0; } .crash--soft h1 { color: var(--parch); }
.crash__err { width: 100%; max-height: 180px; overflow: auto; text-align: left; padding: 10px; background: #0b101b; border: 1px solid var(--bad-c); border-radius: var(--r-sm); font-size: .78rem; white-space: pre-wrap; word-break: break-word; color: #f3b7ae; }

/* ---------- tutorial overlay (non-blocking: only the card/chip take pointer events) ---------- */
.tut { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.tut * { pointer-events: none; } .tut .tut__call, .tut .tut__call * { pointer-events: auto; }
.tut__spot { position: fixed; display: none; border-radius: 10px; border: 3px solid var(--gold); box-shadow: 0 0 0 9999px rgba(4, 7, 14, .32), 0 0 22px 4px #d8a944aa; animation: pulse 1.6s ease-in-out infinite; transition: left .2s, top .2s, width .2s, height .2s; }
.tut--bigspot .tut__spot { box-shadow: 0 0 22px 4px #d8a944aa; animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9999px rgba(4, 7, 14, .32), 0 0 34px 8px #d8a944dd; } }
/* the coach is a docked strip: the shell is pushed down by --tut-h so it can never sit on the map, tray, dialogs or result cards */
body { --tut-h: 0px; } body.tut-on { --tut-h: 70px; } body.tut-on.tut-chip { --tut-h: 34px; }
#app { box-sizing: border-box; padding-top: var(--tut-h); } .shell { height: calc(100dvh - var(--tut-h)); }
.tut__call { position: fixed; left: 0; right: 0; top: 0; height: var(--tut-h); padding: 6px 12px 8px; background: linear-gradient(180deg, #e8d8b8, var(--parch)); color: var(--ink); border-bottom: 3px solid #8a6a2e; box-shadow: 0 4px 14px #0008; z-index: 91; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; overflow: hidden; }
.tut__call--chip { display: flex; padding: 0 10px; align-items: center; }
.tut__chip { display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.tut__chip .icon { width: 20px; height: 20px; color: #6b4a12; flex: none; } .tut__chip .icon--chevron { transform: rotate(-90deg); width: 16px; height: 16px; margin-left: auto; }
.tut__chiptext { display: flex; gap: 8px; align-items: baseline; min-width: 0; } .tut__chiptext small { font-size: max(12px, .7rem); text-transform: uppercase; letter-spacing: .08em; color: #6b5a3a; white-space: nowrap; } .tut__chiptext b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.tut__chip:hover { filter: brightness(1.06); }
.tut__head { display: flex; gap: 8px; align-items: center; min-width: 0; } .tut__headtext { flex: 1; min-width: 0; } .tut__step { font-size: max(12px, .68rem); text-transform: uppercase; letter-spacing: .1em; color: #6b5a3a; } .tut__title { margin: 0; font-size: 1rem; color: var(--ink); line-height: 1.15; }
.tut__body { min-width: 0; max-height: calc(var(--tut-h) - 14px); overflow: auto; cursor: default; } .tut__text { margin: 0; font-size: .86rem; line-height: 1.28; }
.tut__min { color: #4a3a1e !important; flex: none; }
.tut__where { margin: 2px 0 0; font-size: .76rem; color: #5b4a2e; display: flex; gap: 6px; align-items: center; } .tut__where .icon { width: 14px; height: 14px; flex: none; } .tut__where--tile { color: #7a4d00; font-weight: 600; }
.tut__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #0002; } .tut__bar > div { height: 100%; background: var(--green); }
.tut__actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; } .tut__actions .btn--ghost { color: #4a3a1e; }
.tut__coords { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: #4a3a1e; cursor: pointer; white-space: nowrap; } .tut__coords input { width: 18px; height: 18px; accent-color: #2e8b3d; }
.tut__stuck { background: none; border: 0; color: #7a3d10; text-decoration: underline; cursor: pointer; font: 600 .8rem var(--font-body); min-height: 36px; padding: 0 6px; }
.tut__stuck[hidden] { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 899px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "hud" "screen" "tabbar"; }
  .rail { display: none; } .tabbar { display: flex; }
  .shell.is-bare { grid-template-rows: minmax(0, 1fr); grid-template-areas: "screen"; }
  .hud { --hud-h: 52px; gap: 6px; padding-left: calc(8px + var(--sal)); padding-right: calc(8px + var(--sar)); }
  .hud__brand { width: auto; padding: 0; } .hud__name { display: none; } .hud__brand .icon { width: 28px; height: 28px; }
  .hud__stats { gap: 2px 10px; padding: 2px 4px; flex: 1; min-width: 0; } .hud__rep { display: none; } .hud__stat small { display: none; }
  .hud__job { margin-left: 0; max-width: 40%; padding: 4px 8px; } .hud__job .icon { display: none; } .hud__jobtext b { font-size: .78rem; } .hud__jobtext small { font-size: max(12px, .68rem); }
  .screen-pad { padding: 12px 12px 20px; } .screen-head__title { font-size: 1.35rem; } .grid-2 { grid-template-columns: 1fr; }
  .overlay--modal { align-items: end; padding: 0; } .overlay--modal .overlay__dlg { width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; border-bottom: 0; animation: slideup .2s ease; }
  .overlay--sheet { align-items: end; justify-items: stretch; } .overlay__dlg--sheet { width: 100%; height: auto; max-height: 88dvh; border-radius: 16px 16px 0 0; border: 2px solid var(--gold); border-bottom: 0; animation: slideup .22s ease; }
  .overlay__grab { display: block; width: 44px; height: 5px; border-radius: 9px; background: var(--line); margin: 8px auto 0; }
  #toasts { top: calc(var(--sat) + 60px); right: 10px; left: 10px; width: auto; }
  .setting__ctl { flex-basis: 100%; } .keycap { min-width: 96px; } .repline { grid-template-columns: auto 1fr; } .repline .bar { grid-column: 1 / -1; }
  body.tut-on { --tut-h: 96px; } body.tut-on.tut-chip { --tut-h: 34px; }
  .tut__call:not(.tut__call--chip) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: 4px 10px 7px; gap: 2px 8px; align-items: start; }
  .tut__head { grid-column: 1; grid-row: 1; } .tut__head .sprite { display: none; } .tut__title { font-size: .95rem; } .tut__step { font-size: max(12px, .62rem); }
  .tut__actions { grid-column: 2; grid-row: 1; flex-wrap: nowrap; gap: 3px; } .tut__actions .tut__coords, .tut__actions .tut__stuck, .tut__actions .btn--ghost:not(.tut__min), .tut__actions .tut__resume { display: none; }
  .tut__body { grid-column: 1 / -1; grid-row: 2; max-height: calc(var(--tut-h) - 44px); overflow: hidden; } .tut__text { font-size: .8rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tut__where { display: none; }
  /* tap the text to read it all (and reach Skip / coordinates): the strip grows over the map until tapped again, the layout underneath never moves */
  .tut__call.is-open { height: auto; max-height: 70dvh; overflow: auto; align-items: start; } .tut__call.is-open .tut__body { max-height: none; overflow: visible; } .tut__call.is-open .tut__text { -webkit-line-clamp: unset; display: block; } .tut__call.is-open .tut__where { display: flex; }
  .tut__call.is-open .tut__actions { grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; justify-content: flex-end; } .tut__call.is-open .tut__actions .tut__coords, .tut__call.is-open .tut__actions .tut__stuck, .tut__call.is-open .tut__actions .btn--ghost { display: inline-flex; }
  .tut__call.is-open .tut__actions .tut__stuck:not([hidden]) { display: inline-block; } .tut__call.is-open .tut__actions .tut__stuck[hidden] { display: none; }
}
@media (max-width: 899px) and (max-height: 480px) { .title__box { padding: 12px; gap: 6px; } .title__crest { display: none; } }
@media (max-height: 640px) and (min-width: 900px) { .title__box { gap: 8px; padding: 16px; } .title__crest { display: none; } }

/* ---------- reduced motion ---------- */
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- high contrast ---------- */
html.hc .panel, html.hc .btn, html.hc .check, html.hc .slot, html.hc .diff, html.hc .hud, html.hc .rail, html.hc .tabbar { border-color: #fff; }
html.hc .btn--primary { background: #0d6a1d; border-color: #fff; } html.hc .title__shade { background: rgba(0,0,0,.82); } html.hc .title__bg { opacity: .35; }
html.hc .muted { color: #e2e5ee; } html.hc .rail__btn.is-active, html.hc .tabbar__btn.is-active { background: #0d6a1d; border-color: #fff; }
html.hc .overlay__dlg, html.hc .toast { border-color: #fff; background: #000; } html.hc .hud { background: #000; }
/* loading state while a screen module loads */
.screen[aria-busy="true"]::before { content: 'Loading…'; position: absolute; left: 50%; top: 40%; transform: translateX(-50%); color: var(--muted); font: 600 .95rem var(--font-body); padding: 10px 18px 10px 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel) radial-gradient(circle at 22px 50%, var(--gold) 0 5px, transparent 6px); animation: pulse-load 1s ease-in-out infinite; }
@keyframes pulse-load { 50% { opacity: .55; } }
.w-tbtn .icon { width: 22px; height: 22px; }

.tut__actions .btn { min-height: 34px; padding-top: 2px; padding-bottom: 2px; }

/* ---- UI-FIX-4: company name in the HUD ---- */
.hud__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 899px) { .hud__name { display: none; } }
.hud__co { font-size: .88rem; line-height: 1.1; color: var(--parch); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 152px; word-break: break-word; }
.tour__foot .btn { white-space: nowrap; flex: 0 0 auto; }
.hud__tag { font: 500 max(12px, .66rem) var(--font-body); color: var(--muted); letter-spacing: .02em; }

/* ---- UI-FIX-4: quick tours, cheat-sheet, screen transitions, focus/hover/pressed ---- */
.tour { position: fixed; right: 18px; bottom: 18px; z-index: 900; width: min(380px, calc(100vw - 24px)); background: linear-gradient(180deg, #1d2740, #151c2e); border: 2px solid var(--gold); border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 12px 36px rgba(0,0,0,.6); animation: tour-in .28s ease; }
.tour.is-out { opacity: 0; transform: translateY(8px); transition: .2s ease; }
.tour__head { display: flex; gap: 8px; align-items: center; color: var(--gold); font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 6px; } .tour__head .icon { width: 24px; height: 24px; }
.tour__list { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; font-size: .92rem; }
.tour__foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
@keyframes tour-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) { .tour { left: 12px; right: 12px; width: auto; bottom: calc(var(--tab-h) + 12px + var(--sab)); } }
.cheats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 22px; }
.cheats__group h3 { font-size: 1rem; color: var(--gold); margin-bottom: 6px; }
.cheats__list { display: grid; grid-template-columns: minmax(8em, 13em) minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: .9rem; align-items: baseline; } .cheats__list dt { white-space: normal; line-height: 1.7; } .cheats__list dd { margin: 0; color: var(--muted); }
.cheats__group:first-child { grid-column: 1 / -1; } @media (min-width: 900px) { .cheats__group:first-child .cheats__list { grid-template-columns: repeat(2, minmax(8em, 13em) minmax(0, 1fr)); } }
kbd { font: 700 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 6px; border: 1px solid #56617f; border-bottom-width: 2px; border-radius: 5px; background: #0f1420; color: var(--gold); }
.screen > * { animation: screen-in .18s ease both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html.reduced-motion .screen > *, html.reduced-motion .tour { animation: none !important; }
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
.btn:focus-visible, .w-btn:focus-visible, .w-card:focus-visible, .w-tab:focus-visible, .w-tbtn:focus-visible, .w-check:focus-visible, .w-hot:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn--secondary:active:not(:disabled), .btn--ghost:active:not(:disabled) { background: #ffffff1c; }
html.hc .btn, html.hc .w-btn, html.hc .w-card, html.hc .w-panel, html.hc .tour { border-color: #fff !important; }
html.hc .muted, html.hc .w-muted { color: #e6e9f2 !important; }
/* loading skeleton while a screen module loads (router sets aria-busy) */
.screen[aria-busy=true]::before { content: ''; display: block; margin: 24px; height: 160px; border-radius: 12px; background: linear-gradient(90deg, #182033 0%, #222c45 50%, #182033 100%); background-size: 200% 100%; animation: skel 1.1s linear infinite; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* UI-FIX-7: phone toasts are compact and never cover more than a strip of the map */
@media (max-width: 899px) { .toast { padding: 6px 10px; font-size: .82rem; line-height: 1.25; } .toast__msg { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }

/* ==== UI8-ONBOARD ==== */
.help-btn { flex: none; margin-left: auto; width: 34px; height: 34px; min-width: 34px; border-radius: 50%; border: 2px solid var(--gold, #d8a944); background: #151c2e; color: var(--gold, #d8a944); font: 700 1.05rem/1 var(--font-display, serif); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.help-btn:hover, .help-btn:focus-visible { background: var(--gold, #d8a944); color: #151c2e; }
.help-btn--head { align-self: center; }
.help-btn--fab { position: fixed; right: 10px; top: calc(var(--hud-h, 48px) + var(--tut-h, 0px) + 6px); z-index: 60; opacity: .9; }
@media (pointer: coarse), (max-width: 899px) { .help-btn { width: 40px; height: 40px; min-width: 40px; } }
.help-btn--map { margin-left: 0; pointer-events: auto; width: 34px; height: 34px; min-width: 34px; align-self: flex-start; }
@media (max-width: 899px) { .help-btn--map { width: 34px; height: 34px; min-width: 34px; } }
.helpsheet__list { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.35; }
.helpsheet__acts { gap: 8px; }
html.hc .help-btn { border-color: #fff; color: #fff; }
/* one coach at a time: a hint card never sits under the quick-tour card */
body.tut-on .tour { display: none; }
/* first coach card: Skip tutorial must be visible on phones too (the full action row is collapsed there until the text is tapped) */
.tut__skipmini { display: none; position: absolute; right: 8px; bottom: 7px; z-index: 2; background: #f0e2c4; border: 0; border-radius: 6px; padding: 4px 8px; color: #7a3d10; text-decoration: underline; font: 700 max(12px, .74rem) var(--font-body); cursor: pointer; min-height: 30px; }
@media (max-width: 899px) { .tut__skipmini { display: inline-block; } .tut__call--first:not(.is-open) .tut__text { padding-right: 96px; } }
/* ==== /UI8-ONBOARD ==== */

/* ==== UI8-ART ==== */
/* title: pointer parallax on the bg (composes with the drift animation), logo glow, candle flicker */
.title__bg { translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -9px); transition: translate .35s ease-out; will-change: transform; }
.title__logo { animation: ui8-logoglow 5s ease-in-out infinite alternate; }
@keyframes ui8-logoglow { from { text-shadow: 0 3px 0 #000, 0 0 18px #d8a94540; } to { text-shadow: 0 3px 0 #000, 0 0 34px #d8a944a8, 0 0 70px #d8a94530; } }
.title__candle { position: absolute; width: 38vmin; height: 38vmin; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 170, 70, .34), rgba(255, 140, 40, .1) 45%, rgba(255, 120, 30, 0) 70%); animation: ui8-candle 2.3s steps(1, end) infinite; }
.title__candle--l { left: -6vmin; bottom: 4vmin; } .title__candle--r { right: -8vmin; top: 6vmin; animation-delay: -1.1s; animation-duration: 3.1s; }
@keyframes ui8-candle { 0% { opacity: .85; transform: scale(1); } 12% { opacity: .55; transform: scale(.96); } 27% { opacity: 1; transform: scale(1.04); } 41% { opacity: .7; transform: scale(.98); } 58% { opacity: .95; transform: scale(1.02); } 77% { opacity: .6; transform: scale(.97); } 90% { opacity: .9; transform: scale(1.03); } 100% { opacity: .85; } }
/* screen transition: the existing .screen > * fade (180 ms) gets a short slide; title and raid stay still */
.screen:not(.screen--title):not(.screen--raid):not(.screen--workshop) > * { animation: ui8-screen-in .18s ease-out both; }
@keyframes ui8-screen-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
/* report banner ribbon: icon + word + colour; gold for victory, muted red for defeat, amber for partial */
.ui8-banner { display: flex; align-items: stretch; justify-content: center; margin: 2px 0 12px; animation: ui8-banner-in .55s cubic-bezier(.2, 1.2, .3, 1) both; }
.ui8-banner__ribbon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 8px 22px; min-width: 0; font-family: var(--font-display, Georgia, serif); position: relative; z-index: 1;
  background: linear-gradient(180deg, var(--bn1), var(--bn2)); color: var(--bnfg); border-top: 2px solid var(--bnedge); border-bottom: 2px solid var(--bnedge); box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ui8-banner__icon { font-size: 1.5rem; line-height: 1; } .ui8-banner__word { font-size: 1.5rem; font-weight: 800; letter-spacing: .22em; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.ui8-banner__sub { font-size: .85rem; font-style: italic; opacity: .92; }
.ui8-banner__tail { width: 26px; margin-top: 8px; background: var(--bn2); border-top: 2px solid var(--bnedge); border-bottom: 2px solid var(--bnedge); filter: brightness(.72); }
.ui8-banner__tail--l { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%); margin-right: -2px; } .ui8-banner__tail--r { clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); margin-left: -2px; }
.ui8-banner--success { --bn1: #f1cf6a; --bn2: #b98a24; --bnedge: #fff1b0; --bnfg: #2a1c05; }
.ui8-banner--partial { --bn1: #c9a24a; --bn2: #8a6a2a; --bnedge: #e9d49a; --bnfg: #20160a; }
.ui8-banner--failure { --bn1: #8c4a44; --bn2: #5e2a28; --bnedge: #b98a82; --bnfg: #f6e3dd; }
.ui8-banner--success .ui8-banner__ribbon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); background-size: 250% 100%; animation: ui8-shine 3.2s ease-in-out 1s infinite; pointer-events: none; }
@keyframes ui8-banner-in { from { opacity: 0; transform: translateY(-14px) scaleX(.82); } to { opacity: 1; transform: none; } }
@keyframes ui8-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (max-width: 480px) { .ui8-banner__ribbon { padding: 8px 12px; } .ui8-banner__word { font-size: 1.2rem; letter-spacing: .14em; } .ui8-banner__tail { width: 14px; } }
html.reduced-motion .title__bg { translate: none; } html.reduced-motion .title__candle { animation: none; opacity: .75; } html.reduced-motion .title__logo, html.reduced-motion .ui8-banner, html.reduced-motion .ui8-banner__ribbon::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .title__bg { translate: none; } .title__candle { animation: none; opacity: .75; } .title__logo { animation: none; } }
/* ==== /UI8-ART ==== */
/* ==== UI8-LEAD (command palette, a11y, clarity) ==== */
.b-filters__tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pal { display: grid; gap: 8px; min-width: min(560px, 86vw); }
.pal__in { width: 100%; min-height: 46px; padding: 8px 12px; border-radius: 8px; border: 2px solid var(--gold-dim); background: var(--panel-2); color: var(--text); font: 600 1.05rem var(--font-body); }
.pal__in:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.pal__list { list-style: none; margin: 0; padding: 0; max-height: min(52vh, 420px); overflow: auto; display: grid; gap: 2px; }
.pal__item { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 10px; align-items: center; min-height: 40px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.pal__item.is-sel { background: var(--panel-3); box-shadow: inset 3px 0 0 var(--gold); }
.pal__grp { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.pal__lbl { font-weight: 600; } .pal__item kbd { font: 700 .75rem var(--font-body); padding: 1px 7px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel-2); }
.pal__none { padding: 10px; color: var(--muted); } .pal__foot { margin: 0; font-size: .78rem; }
/* consistent component states */
.btn:disabled, .w-btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: saturate(.6); }
.btn:not(:disabled):active, .w-btn:not(:disabled):active { transform: translateY(1px); }
.w-am:focus-visible, .pm-btn:focus-visible, .pb-fab:focus-visible, .pb-fl:focus-visible, .pb-wi:focus-visible, .pb-ri:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { html:not(.motion-ok) .pb-wi, html:not(.motion-ok) .pm-verdict { animation-duration: .01ms !important; } }
@media (max-width: 899px) { .tut__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; } } /* coach title never eats the body text on phones */
/* ==== /UI8-LEAD ==== */

/* ==== R9 UI CHROME (border-image art from assets/art/ui/web, slices per assets/art/ui/README.md) ====
   Everything is scoped to html:not(.hc): high contrast keeps the flat, textured-free look. Fallback = the flat rules above
   (each frame keeps a matching background colour under it, so a missing image still reads as the same component).
   border-image-width is ~1/3 of the slice so corners stay crisp from 360 px phones to 1280 desktops at DPR 1-3. */
html:not(.hc) .btn:not(.btn--ghost), html:not(.hc) .b-btn, html:not(.hc) .w-btn.w-primary, html:not(.hc) .w-btn.w-big, html:not(.hc) .w-btn.w-danger {
  border-style: solid; border-radius: 999px; padding-left: 22px; padding-right: 22px;
  border-image: url(../assets/art/ui/web/button_secondary_dark.webp) 44 64 fill / 16px 22px stretch; }
html:not(.hc) .btn.btn--primary:enabled, html:not(.hc) .b-btn:not(.ghost):not(.danger):enabled, html:not(.hc) .w-btn.w-primary:enabled, html:not(.hc) .w-btn.w-big:not(.w-danger):not(.w-gold):enabled {
  border-image-source: url(../assets/art/ui/web/button_primary_green.webp); background: #1f7a2c; color: #fff; text-shadow: 0 1px 1px #000c; }
html:not(.hc) .btn.btn--danger:enabled, html:not(.hc) .b-btn.danger:enabled, html:not(.hc) .w-btn.w-danger:enabled { border-image-source: url(../assets/art/ui/web/button_danger_red.webp); background: #a01c16; color: #fff; text-shadow: 0 1px 1px #000c; }
html:not(.hc) .btn.btn--secondary, html:not(.hc) .b-btn.ghost { background: #262c35; color: var(--parch); }
/* R9 fix: the dark button art keeps light text even inside parchment cards (their dark ink colour used to win: '− week' was invisible) */
html:not(.hc) .b-btn.ghost:enabled, html:not(.hc) .btn.btn--secondary:enabled, html:not(.hc) .parch .btn:not(.btn--ghost):not(.btn--primary):not(.btn--danger):enabled { color: #f3e6c8 !important; text-shadow: 0 1px 1px #000c; }
html:not(.hc) .btn:not(.btn--ghost):disabled, html:not(.hc) .b-btn:disabled, html:not(.hc) .w-btn.w-primary:disabled, html:not(.hc) .w-btn.w-big:disabled {
  border-image-source: url(../assets/art/ui/web/button_disabled.webp); background: #8d8d8a; color: #000; text-shadow: 0 1px 0 #ffffff40; opacity: 1; filter: none; }
html:not(.hc) .btn--small:not(.btn--ghost), html:not(.hc) .b-btn.sm { border-image-width: 13px 18px; padding-left: 16px; padding-right: 16px; }
html:not(.hc) .btn--icon-only:not(.btn--ghost) { padding: 6px 12px; }
html:not(.hc) .w-btn.w-gold.w-big { border-image: none; }
/* panels, cards, dialogs: navy frame; parchment frame for paper cards; contract scroll for the negotiation paper */
html:not(.hc) .panel, html:not(.hc) .b-card:not(.alert):not(.good):not(.parch), html:not(.hc) .overlay__dlg, html:not(.hc) .b-sheet, html:not(.hc) .w-modal {
  border-style: solid; border-width: 12px; border-image: url(../assets/art/ui/web/panel_navy_frame.webp) 64 fill / 12px stretch; background-color: #0d1630; box-shadow: var(--shadow); }
html:not(.hc) .overlay__dlg { border-width: 14px; border-image-width: 14px; }
html:not(.hc) .overlay__dlg--sheet { border-right-width: 14px; }
html:not(.hc) .parch, html:not(.hc) .b-card.parch { border-style: solid; border-width: 12px; border-image: url(../assets/art/ui/web/panel_parchment_frame.webp) 64 fill / 12px stretch; background: #ead9b6; }
html:not(.hc) .screen--negotiation .b-card.parch, html:not(.hc) .scroll-contract { border-width: 22px 18px; border-image: url(../assets/art/ui/web/scroll_contract_parchment.webp) 96 fill / 22px 18px stretch; background: #e4cfa6; border-radius: 4px; }
html:not(.hc) .panel-stone { border-style: solid; border-width: 12px; border-image: url(../assets/art/ui/web/panel_stone_frame.webp) 56 fill / 12px stretch; background: #3a3a3e; }
@media (max-width: 899px) {
  html:not(.hc) .panel, html:not(.hc) .b-card:not(.alert):not(.good):not(.parch), html:not(.hc) .b-sheet, html:not(.hc) .w-modal, html:not(.hc) .parch, html:not(.hc) .b-card.parch, html:not(.hc) .panel-stone { border-width: 9px; border-image-width: 9px; }
  html:not(.hc) .overlay__dlg { border-width: 10px; border-image-width: 10px; }
  html:not(.hc) .overlay__dlg--sheet { border-bottom-width: 0; }
}
@media (max-width: 899px) { /* narrow action rows (workshop sign-off strip): slimmer end caps so labels don't wrap */
  html:not(.hc) .w-btn.w-primary, html:not(.hc) .w-btn.w-big, html:not(.hc) .w-btn.w-danger { border-image-width: 12px 12px; padding-left: 10px; padding-right: 10px; }
  html:not(.hc) .b-btn.sm, html:not(.hc) .btn--small:not(.btn--ghost) { border-image-width: 12px 14px; padding-left: 12px; padding-right: 12px; }
}
/* dialog corner flourishes (decorative; under the close button) */
html:not(.hc) .overlay__dlg--modal::before, html:not(.hc) .overlay__dlg--modal::after { content: ''; position: absolute; top: 0; width: 34px; height: 34px; pointer-events: none; z-index: 1;
  background: url(../assets/art/ui/web/corner_flourish.webp) 0 0 / contain no-repeat; opacity: .9; }
html:not(.hc) .overlay__dlg--modal::before { left: 0; } html:not(.hc) .overlay__dlg--modal::after { right: 0; transform: scaleX(-1); }
html:not(.hc) .overlay__head { position: relative; z-index: 2; background: linear-gradient(180deg, #1a2747cc, #121c36cc); }
html:not(.hc) .overlay__scrim { background: radial-gradient(ellipse at center, rgba(5,8,14,.55) 30%, rgba(2,3,6,.9) 100%); }
/* tabs */
html:not(.hc) .tabs__list { border-bottom: 0; background: url(../assets/art/ui/web/divider_filigree.webp) center bottom / auto 14px no-repeat; padding-bottom: 10px; gap: 2px; }
html:not(.hc) .tabs__tab { border-style: solid; border-width: 0; border-image: url(../assets/art/ui/web/tab_idle.webp) 40 48 fill / 14px 17px stretch; padding: 6px 18px; background: #191c22; border-radius: 12px 12px 0 0; }
html:not(.hc) .tabs__tab.is-active { border-image-source: url(../assets/art/ui/web/tab_active.webp); background: #15223e; color: var(--gold); text-decoration: underline 2px; text-underline-offset: 4px; }
/* toast + tooltip */
html:not(.hc) .toast { border-style: solid; border-width: 2px; border-image: url(../assets/art/ui/web/toast_frame.webp) 40 48 fill / 14px 17px stretch; background: #111a30; border-radius: 16px; padding: 12px 20px; }
html:not(.hc).show-tips [data-tip]:hover::after, html:not(.hc).show-tips [data-tip]:focus-visible::after, html:not(.hc).show-tips [data-tip]:active::after {
  background: #f1e3c4; color: #2a1d0e; border: 9px solid transparent; border-image: url(../assets/art/ui/web/tooltip_frame.webp) 30 fill / 9px stretch; padding: 2px 4px; border-radius: 8px; }
/* gauges: bar_frame over a gradient fill */
html:not(.hc) .bar { border: 0; border-radius: 9px; background: #0b101b; }
html:not(.hc) .bar::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-style: solid; border-width: 4px 9px; border-image: url(../assets/art/ui/web/bar_frame.webp) 20 36 / 4px 9px stretch; }
html:not(.hc) .bar__fill { margin: 3px 0 3px 5px; inset: 0 auto 0 0; border-radius: 6px; background: url(../assets/art/ui/web/gauge_fill_gold.webp) 0 0 / 100% 100%; max-width: calc(100% - 10px); }
html:not(.hc) .bar--good .bar__fill { background-image: url(../assets/art/ui/web/gauge_fill_green.webp); } html:not(.hc) .bar--bad .bar__fill { background-image: url(../assets/art/ui/web/gauge_fill_red.webp); }
html:not(.hc) .bar--warn .bar__fill { background: var(--warn-c); } html:not(.hc) .bar--info .bar__fill { background: var(--info); }
html:not(.hc) .bar__text { z-index: 2; }
/* portraits: gold (default) or stone frame drawn over the picture; % widths scale with any portrait size */
html:not(.hc) .portrait--framed { border: 0; box-shadow: 0 2px 8px #000a; border-radius: 12%; }
html:not(.hc) .portrait--framed::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-style: solid; border-width: 0; border-image: url(../assets/art/ui/web/portrait_frame_gold.webp) 100 / 26% stretch; }
html:not(.hc) .portrait--stone::after { border-image-source: url(../assets/art/ui/web/portrait_frame_stone.webp); border-image-slice: 110; border-image-width: 28%; }
html:not(.hc) img.b-portrait { border-style: solid; border-width: 7px; border-image: url(../assets/art/ui/web/portrait_frame_gold.webp) 100 / 7px stretch; border-radius: 10px; }
html:not(.hc) img.b-portrait.lg { border-width: 10px; border-image-width: 10px; } html:not(.hc) img.b-portrait.sm { border-width: 5px; border-image-width: 5px; }
/* screen titles: gold ribbon banner behind the heading (3-slice horizontal) */
html:not(.hc) .screen-head__title, html:not(.hc) .b-head .b-title { display: inline-block; width: fit-content; max-width: 100%; border-style: solid; border-width: 0 30px; padding: 6px 6px 8px;
  border-image: url(../assets/art/ui/web/banner_ribbon_gold.webp) 0 120 fill / 0 30px stretch; color: #fbecc6; text-shadow: 0 1px 2px #000; background: transparent; }
@media (max-width: 899px) { html:not(.hc) .b-head .b-title { border-width: 0 22px; border-image-width: 0 22px; padding: 4px 4px 6px; } }
/* HUD cash on the coin counter plate (the plate draws the coin, so the vector coin hides) */
html:not(.hc) .hud__stat--gold { border-style: solid; border-width: 0; border-image: url(../assets/art/ui/web/coin_counter_plate.webp) 44 44 44 110 fill / 11px 11px 11px 30px stretch; padding: 4px 12px 4px 34px; min-height: 30px; }
html:not(.hc) .hud__stat--gold .icon { opacity: 0; width: 0 !important; margin: 0; }
html:not(.hc) .hud__stat--gold b { color: #ffe09a; }
/* rail + tab bar: the active item is the green primary pill */
html:not(.hc) .rail__btn.is-active, html:not(.hc) .tabbar__btn.is-active { border-style: solid; border-width: 1px; border-image: url(../assets/art/ui/web/button_primary_green.webp) 44 64 fill / 15px 20px stretch; background: #1f7a2c; box-shadow: none; padding-left: 18px; }
html:not(.hc) .tabbar__btn.is-active { border-image-width: 14px 12px; padding-left: 2px; border-radius: 14px; }
html:not(.hc) .rail { background: linear-gradient(90deg, #121a2c, #0f1626); }
/* dividers, wax seals, logo, crest (helpers in kit.js: divider(), seal(), logo()) */
.divider { height: 16px; margin: 10px auto; width: min(100%, 320px); background: url(../assets/art/ui/web/divider_filigree.webp) center / contain no-repeat; border: 0; }
html.hc .divider { background: none; border-top: 2px solid #fff; height: 0; }
.seal { display: inline-block; width: 52px; height: 66px; flex: none; background: url(../assets/art/ui/web/wax_seal_red.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px #000a); vertical-align: middle; }
.seal--gold { background-image: url(../assets/art/ui/web/wax_seal_gold.webp); } .seal--sm { width: 32px; height: 40px; } .seal--lg { width: 80px; height: 102px; }
.seal-stamp { animation: seal-stamp .35s cubic-bezier(.2,1.6,.4,1) both; } @keyframes seal-stamp { from { transform: scale(1.8) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.logo { display: block; width: min(440px, 80vw); height: auto; margin: 0 auto; filter: drop-shadow(0 4px 10px #000c); }
.crest { display: inline-block; width: 40px; height: 52px; background: url(../assets/art/ui/web/crest_emblem.webp) center / contain no-repeat; }
.pwa-card { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.pwa-card .btn { pointer-events: auto; }
/* ==== /R9 UI CHROME ==== */
/* R9-UI-INTEGRATE: progressive-disclosure "new" dot, sectioned More sheet, rail utilities */
.rail__btn, .tabbar__btn { position: relative; }
.nav-new { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--bg, #0f1420); }
.tabbar__btn .nav-new { top: 4px; right: calc(50% - 20px); }
.morelist__btn { position: relative; } .morelist__btn .nav-new { position: static; flex: none; }
.morelist__sec { display: grid; gap: 6px; } .morelist__sec + .morelist__sec { margin-top: 10px; }
.morelist__h { margin: 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.rail__btn--util { min-height: 40px; }
@media (pointer: coarse) { .rail__btn--util { min-height: var(--tap); } }
.hud__repwhere { font-size: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; align-self: center; } .hud__emp { border-left: 1px solid var(--line); padding-left: 10px; }

/* R9-UI-INTEGRATE WCAG 1.4.13: tips appear after 300 ms, stay while the pointer is over the bubble (hoverable), hide on Escape / screen change */
html.show-tips [data-tip]:hover::after, html.show-tips [data-tip]:focus-visible::after, html.show-tips [data-tip]:active::after { pointer-events: auto; animation: tip-in .12s ease-out .3s both; }
html.tips-dismissed [data-tip]::after, html.tips-dismissed [data-tip]:hover::after, html.tips-dismissed [data-tip]:focus-visible::after { display: none !important; }
html.tips-dismissed .w-richtip { display: none !important; }
@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.show-tips [data-tip]:hover::after, html.show-tips [data-tip]:focus-visible::after { animation-duration: .01s; } }
.morelist__btn { text-align: left; } .morelist__btn > .morelist__label { flex: 1; }
/* R9-UI-INTEGRATE a11y: phone tap targets >= 44px (WCAG 2.5.8 + research R7) */
@media (pointer: coarse) {
  .help-btn { width: 44px; height: 44px; min-width: 44px; }
  .hud__brand { min-width: 44px; }
  summary { min-height: 44px; display: flex; align-items: center; }
}
/* R10-UI desktop polish: one spacing / type scale, filter chips for dense lists (Staff, Research, Franchise), consistent hover/focus */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --fs-s: .82rem; --fs-m: .95rem; --fs-l: 1.1rem; }
.b-filterbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.b-filterchip { min-height: 36px; padding: 0 var(--sp-3); border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--parch); font: 600 var(--fs-s) var(--font-body); transition: background var(--ease), border-color var(--ease); }
.b-filterchip:hover { border-color: var(--gold-dim); background: var(--panel-3); }
.b-filterchip.on { border-color: var(--gold); background: #2d2610; color: #ffe7a8; }
.b-filterchip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.b-staff-more { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); }
.b-card .b-more > summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; color: var(--gold); font-weight: 600; font-size: var(--fs-s); }
.b-card .b-more > summary:hover { color: #ffe7a8; }
@media (max-width: 899px) { .b-filterchip, .b-card .b-more > summary { min-height: 44px; } }
/* R10-UI: header reputation chips (one getter: kingdom, Empire, Guild trio) */
.hud__rep > span[data-rep] { display: inline-flex; align-items: center; gap: 3px; }
/* R10-UI (render scan, phone): every form control is a 44 px target */
@media (max-width: 899px) { .b-filters__sel select, .b-screen select, .b-screen input[type=text], .b-sheet input[type=text], .b-field input, .overlay__dlg input[type=text] { min-height: 44px; } }
/* Yonk Labs footer contract (js/ui/about.js): About / Legal sheet + the `short` line; every link is a 44 px target */
.yl__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.yl__link { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); color: var(--gold); text-decoration: none; }
.yl__link:hover, .yl__link:focus-visible { border-color: var(--gold); background: var(--panel-3); }
.yl__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.yl__label { font-weight: 700; letter-spacing: .03em; } .yl__what { color: var(--muted); font-size: .85rem; }
.yl__notice { margin: 4px 0 0; line-height: 1.45; } .yl__copy { margin: 0; font-size: .85rem; }
.title__pair { display: flex; gap: 10px; } .title__pair > .btn { flex: 1 1 0; min-width: 0; }
.title__yl { font-size: .68rem; color: #c7cbd6aa; margin-top: -4px; } .yl__short { font-size: .72rem; }

/* 0.9.0 deploy fix: the title must fit short desktop windows (the footer used to overlay the last buttons at 1280x720) */
.title { grid-template-rows: 1fr auto; }
.title__foot { position: relative; bottom: auto; padding: 6px 12px 0; }
@media (max-height: 860px) { .title__crest { display: none; } .title__logo .logo { width: min(340px, 80vw); } .title__box { gap: 8px; padding: 14px 20px 16px; } .title__menu { gap: 7px; } .title__tag { margin: 0; } }
@media (max-height: 720px) { .title__logo .logo { width: min(280px, 70vw); } .title__box { gap: 6px; padding: 12px 18px 14px; } .title__menu { gap: 6px; } }