@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,600;9..40,700&family=DM+Serif+Display&display=swap");

body { margin: 0; background: var(--surface-100); color: var(--ink); font-family: var(--font-sans); }
.ti-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-4); }
.ti-col { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
:where(.ti-btn, .ti-card):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-mask { display: inline-block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }

/* Button */
.ti-btn { font-family: var(--font-sans); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.24em; text-transform: uppercase;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; background: transparent; color: var(--ink); }
.ti-btn-lg { font-size: 14px; padding: var(--space-4) var(--space-8); }
.ti-btn-primary { background: var(--ink); color: var(--surface-100); }
.ti-btn-primary:hover { background: var(--ink-muted); }
.ti-btn-secondary { border-color: var(--line-200); }
.ti-btn-secondary:hover { background: var(--surface-300); }
.ti-btn-danger { background: var(--faction-red-hand); color: var(--cream); }
.ti-btn:disabled { background: var(--surface-300); color: var(--ink-muted); border-color: var(--line-100); cursor: not-allowed; }

/* Panel */
.ti-panel { background: var(--surface-200); border: 1px solid var(--line-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: var(--space-6); }
.ti-panel-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-1); }
.ti-panel-title { font-size: 24px; line-height: 30px; font-weight: 700; margin: 0 0 var(--space-4); }
.ti-panel-body { font-size: 16px; line-height: 24px; }

/* Faction tile (shared by GameCard and FactionBadge) */
.ti-tile { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--fc, var(--card-ink)); color: #fff; font-weight: 700; font-size: 14px; }
.ti-tile .ti-mask { width: 82%; height: 82%; }

/* GameCard — always the printed parchment card */
.ti-card { position: relative; width: 360px; aspect-ratio: 1215 / 1765; box-sizing: border-box; display: flex; flex-direction: column; padding: var(--space-4) var(--space-4) 10px;
  background: var(--card-face); color: var(--card-ink); border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-align: left; font: inherit; font-family: var(--font-sans); cursor: pointer; }
.ti-card[data-selected="true"] { box-shadow: var(--shadow-select); }
.ti-card-head { display: flex; align-items: center; gap: var(--space-2); }
.ti-card-name { flex: 1; font-size: 16px; line-height: 20px; font-weight: 700; }
.ti-gem { display: grid; place-items: center; width: 30px; height: 28px; border-radius: var(--radius-md); color: var(--on-cost); font-size: 17px; font-weight: 700; }
.ti-gem-gold { background: var(--cost-gold); } .ti-gem-mana { background: var(--cost-mana); }
.ti-card-art { margin-top: var(--space-2); aspect-ratio: 1103 / 793; border-radius: var(--radius-md); background: var(--card-ink) center / cover no-repeat; }
.ti-card-type { font-size: 13px; line-height: 16px; font-weight: 700; margin: 10px 0 6px 10px; }
.ti-card-box { position: relative; flex: 1; border: 1px solid var(--card-ink); border-radius: var(--radius-md); padding: 6px 10px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; }
.ti-card-text { flex: 1; }
.ti-card-ability { font-weight: 700; }
.ti-rarity { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); min-width: 40px; height: 16px; display: grid; place-items: center; border-radius: var(--radius-sm);
  background: var(--card-ink); color: var(--card-face); font-family: var(--font-serif); font-size: 15px; line-height: 16px; }
.ti-card-stats { display: flex; justify-content: space-between; margin-top: 12px; min-height: 20px; }
.ti-card-stats > span { display: flex; gap: 10px; }
.ti-card-foot { text-align: center; font-size: 8px; line-height: 10px; font-weight: 700; letter-spacing: 0.35em; margin-top: 4px; }

/* Stat */
.ti-stat { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; font-size: 17px; line-height: 20px; }
.ti-stat .ti-mask { width: 1.05em; height: 1.05em; }

/* StatBar */
.ti-bar { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-2); min-width: 220px; }
.ti-bar-label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.ti-bar-value { font-size: 14px; line-height: 14px; font-weight: 700; color: var(--bar); }
.ti-bar-track { grid-column: 1 / -1; height: 10px; background: var(--surface-000); border: 1px solid var(--line-200); border-radius: var(--radius-sm); overflow: hidden; }
.ti-bar-fill { display: block; height: 100%; background: var(--bar); }
.ti-bar-hp { --bar: var(--hp); } .ti-bar-mana { --bar: var(--mana); } .ti-bar-xp { --bar: var(--renown); }

/* FactionBadge */
.ti-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3) 4px 4px; border: 1px solid var(--line-100); border-radius: var(--radius-md); background: var(--surface-200);
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.ti-badge .ti-tile { width: 26px; height: 26px; font-size: 12px; letter-spacing: 0; }
.ti-badge[data-soon="true"] { color: var(--ink-muted); border-style: dashed; }

/* ---------- Menu primitives ---------- */
.ti-menu { display: flex; flex-direction: column; gap: 2px; }
.ti-mi { display: flex; align-items: center; gap: var(--space-3); width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--ink-muted); font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; text-align: left; cursor: pointer; }
.ti-mi-mark { flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 3px; box-sizing: border-box; }
.ti-mi-label { flex: 1; }
.ti-mi-hint { font-size: 11px; letter-spacing: 0.16em; color: var(--ink-muted); font-weight: 600; }
.ti-mi:hover, .ti-mi[data-active="true"] { color: var(--ink); background: var(--surface-300); }
.ti-mi:hover .ti-mi-mark, .ti-mi[data-active="true"] .ti-mi-mark { background: var(--ink); border-color: var(--ink); }
.ti-mi:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-mi[data-tone="danger"] { color: var(--danger); }
.ti-mi[data-tone="danger"]:hover .ti-mi-mark { background: var(--danger); border-color: var(--danger); }
.ti-mi:disabled { opacity: 1; color: var(--line-200); cursor: not-allowed; background: transparent; }
.ti-mi:disabled .ti-mi-mark { background: transparent; border-color: var(--line-200); border-style: dashed; }

.ti-modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(15, 8, 14, 0.72); }
.ti-modal > .ti-panel { min-width: 380px; max-width: 640px; }

.ti-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line-100); margin-bottom: var(--space-6); }
.ti-tab { border: 0; background: transparent; padding: 0 0 var(--space-3); margin-bottom: -1px; border-bottom: 2px solid transparent; cursor: pointer;
  color: var(--ink-muted); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.ti-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.ti-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.ti-field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-100); font-size: 15px; line-height: 20px; }
.ti-field:last-child { border-bottom: 0; }
.ti-switch { position: relative; flex: none; width: 44px; height: 24px; border-radius: 999px; border: 1px solid var(--line-200); background: var(--surface-000); cursor: pointer; padding: 0; }
.ti-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-muted); transition: left 150ms ease-out; }
.ti-switch[aria-checked="true"] { background: var(--ink); border-color: var(--ink); }
.ti-switch[aria-checked="true"]::after { left: 23px; background: var(--surface-100); }
.ti-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-slider { display: flex; align-items: center; gap: var(--space-3); }
.ti-slider input { width: 200px; accent-color: var(--ink); }
.ti-slider output { width: 32px; text-align: right; font-weight: 700; }

.ti-res { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.ti-res-gem { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-width: 52px; height: 44px; padding: 0 var(--space-2); box-sizing: border-box; border-radius: var(--radius-md); color: var(--on-cost); font-size: 22px; line-height: 22px; font-weight: 700; }
.ti-res-gold { background: var(--cost-gold); } .ti-res-mana { background: var(--cost-mana); }
.ti-res-gem small { font-size: 13px; font-weight: 600; opacity: 0.85; margin-left: 2px; }
.ti-res-label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Screens (1280 x 720) ---------- */
.ti-screen { position: relative; width: 1280px; height: 720px; overflow: hidden; box-sizing: border-box; color: var(--ink); font-family: var(--font-sans);
  background: var(--surface-100) var(--tex) center / cover no-repeat; }
.ti-screen::before { content: ""; position: absolute; inset: 0; background: var(--surface-100); opacity: var(--veil, 0); pointer-events: none; }
.ti-screen > * { position: relative; }
.ti-screen > .ti-modal { position: absolute; }
.ti-eyebrow { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-muted); }
.ti-h1 { margin: 0; font-size: 48px; line-height: 52px; font-weight: 700; }
.ti-wordmark { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-muted); }

/* Title */
.ti-title { display: grid; grid-template-columns: 1fr 380px; align-items: center; padding: 0 96px 0 72px; }
.ti-title-logo { width: 520px; height: auto; display: block; }
.ti-title-foot { position: absolute; left: 72px; right: 96px; bottom: 32px; display: flex; justify-content: space-between; }
.ti-title-top { position: absolute; top: 28px; right: 96px; display: flex; align-items: center; gap: var(--space-3); font-size: 13px; color: var(--ink-muted); }
.ti-title-top b { color: var(--ink); font-weight: 700; }

/* Factions */
.ti-fac { --veil: .55; display: grid; grid-template-columns: 1fr 440px; grid-template-rows: auto 1fr; gap: var(--space-6) var(--space-8); padding: 40px 64px; }
.ti-fac-head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; }
.ti-fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-content: start; }
.ti-fac-opt { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--line-100); border-radius: var(--radius-lg); background: var(--surface-200); color: var(--ink); cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-align: left; }
.ti-fac-opt:hover { background: var(--surface-300); }
.ti-fac-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ti-fac-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-fac-opt .ti-tile, .ti-fac-detail .ti-tile { width: 64px; height: 64px; font-size: 26px; }
.ti-fac-detail .ti-tile { width: 96px; height: 96px; font-size: 40px; }
.ti-fac-detail { display: flex; flex-direction: column; }
.ti-fac-detail > .ti-panel-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.ti-fac-detail p { margin: 0; }
.ti-fac-actions { margin-top: auto; display: flex; gap: var(--space-3); justify-content: flex-end; }

/* Battle */
.ti-battle { --veil: .35; display: grid; grid-template-columns: 236px 1fr 260px; grid-template-rows: 64px 1fr 176px; }
.ti-bt-top { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--space-6); background: var(--surface-000); border-bottom: 1px solid var(--line-100); }
.ti-bt-opp { display: flex; align-items: center; gap: var(--space-3); }
.ti-bt-opp .ti-bar { min-width: 180px; }
.ti-bt-turn { text-align: center; }
.ti-bt-turn strong { display: block; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ti-bt-turn span { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.ti-bt-menu { justify-self: end; }
.ti-bt-log { margin: var(--space-4) 0 var(--space-4) var(--space-4); padding: var(--space-4); background: var(--surface-200); border: 1px solid var(--line-100); border-radius: var(--radius-lg); overflow: hidden; font-size: 13px; line-height: 18px; }
.ti-bt-log ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ti-bt-log li { padding-bottom: var(--space-2); border-bottom: 1px solid var(--line-100); color: var(--ink-muted); }
.ti-bt-log li:first-child { color: var(--ink); }
.ti-board-wrap { display: grid; place-items: center; }
.ti-board { display: grid; grid-template-columns: repeat(8, 64px); grid-template-rows: repeat(5, 64px); gap: 4px; padding: var(--space-3); background: rgba(15, 8, 14, 0.45); border: 1px solid var(--line-100); border-radius: var(--radius-lg); }
.ti-sq { position: relative; display: grid; place-items: center; border: 1px solid var(--line-100); border-radius: var(--radius-sm); background: var(--surface-200); padding: 0; cursor: default; }
.ti-sq[data-reach="true"] { border: 1.5px dashed var(--ink); background: var(--surface-300); cursor: pointer; }
.ti-sq[data-zone="enemy"] { background: var(--surface-100); }
.ti-unit { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); border: 2px solid var(--surface-000); background: var(--fc); color: #fff; cursor: pointer; padding: 0; }
.ti-unit .ti-mask { width: 70%; height: 70%; }
.ti-unit[data-side="enemy"] { box-shadow: inset 0 0 0 2px var(--hp); }
.ti-unit[data-selected="true"] { box-shadow: var(--shadow-select); }
.ti-unit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-unit-hp { position: absolute; right: -8px; bottom: -8px; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; border-radius: 6px; background: var(--surface-000); color: var(--hp); border: 1px solid var(--hp); font-size: 12px; line-height: 18px; font-weight: 700; }
.ti-bt-side { margin: var(--space-4) var(--space-4) var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ti-inspect { width: 238px; height: 346px; }
.ti-inspect > .ti-card { transform: scale(0.661); transform-origin: top left; }
.ti-bt-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 236px 1fr 260px; align-items: end; padding: 0 var(--space-4) var(--space-4); }
.ti-bt-res { display: flex; gap: var(--space-3); padding-bottom: var(--space-2); }
.ti-hand { display: flex; justify-content: center; height: 160px; }
.ti-hand-slot { width: 112px; height: 160px; transition: transform 160ms ease-out; }
.ti-hand-slot > .ti-card { transform: scale(0.42); transform-origin: top left; }
.ti-hand-slot:nth-child(1) { transform: rotate(-6deg) translateY(10px); } .ti-hand-slot:nth-child(3) { transform: rotate(6deg) translateY(10px); }
.ti-hand-slot:hover, .ti-hand-slot[data-selected="true"] { transform: translateY(-28px); z-index: 2; }
.ti-hand-slot + .ti-hand-slot { margin-left: 46px; }
.ti-bt-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); padding-bottom: var(--space-2); }
.ti-deck { display: grid; place-items: center; width: 52px; height: 72px; border-radius: 6px; background: var(--plum) var(--back) center / cover; border: 1px solid var(--line-200); font-size: 13px; font-weight: 700; color: var(--cream); }

/* Result */
.ti-result { --veil: .3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); text-align: center; }
.ti-result-big { margin: 0; font-size: 104px; line-height: 104px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ti-result-stats { display: flex; gap: var(--space-4); }
.ti-result-stat { min-width: 150px; padding: var(--space-4); background: var(--surface-200); border: 1px solid var(--line-100); border-radius: var(--radius-lg); }
.ti-result-stat b { display: block; font-size: 28px; line-height: 32px; }
.ti-result-stat span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; }
.ti-result .ti-bar { width: 480px; text-align: left; }
.ti-result-actions { display: flex; gap: var(--space-3); }

/* ---------- Sheet: off-white parchment surface ---------- */
.ti-sheet { --sheet-tex: none; position: relative; box-sizing: border-box; padding: var(--space-6); border-radius: var(--radius-card); color: var(--card-ink); box-shadow: var(--shadow-card);
  background: var(--paper) var(--sheet-tex) center / cover; font-family: var(--font-sans); }
.ti-sheet[data-tone="aged"] { background-color: var(--card-face); }
.ti-sheet-eyebrow { margin: 0 0 var(--space-1); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-muted); }
.ti-sheet-title { margin: 0 0 var(--space-4); font-size: 24px; line-height: 30px; font-weight: 700; }
.ti-sheet .ti-tabs { border-bottom-color: rgba(51, 33, 49, 0.25); }
.ti-rule { height: 1px; background: rgba(51, 33, 49, 0.25); border: 0; margin: var(--space-4) 0; }
.ti-sheet-foot { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 8px; line-height: 10px; font-weight: 700; letter-spacing: 0.35em; }

/* Screen header shared by stats / city / talents */
.ti-page { --veil: .45; display: grid; grid-template-rows: auto 1fr; gap: var(--space-6); padding: 32px 48px 40px; }
.ti-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.ti-page-head > div:last-child { display: flex; align-items: center; gap: var(--space-4); }
.ti-page-body { display: grid; gap: var(--space-6); min-height: 0; }

/* Roster list on plum */
.ti-roster { display: flex; flex-direction: column; gap: var(--space-2); }
.ti-roster-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line-100); border-radius: var(--radius-md); background: var(--surface-200);
  color: var(--ink); font-family: var(--font-sans); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.ti-roster-item small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.ti-roster-item[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ti-roster-item:hover { background: var(--surface-300); }
.ti-roster-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-roster-item .ti-tile { width: 40px; height: 40px; font-size: 18px; }

/* Stats */
.ti-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.ti-statbox { padding: var(--space-3) var(--space-4); border: 1px solid var(--card-ink); border-radius: var(--radius-md); }
.ti-statbox-top { display: flex; align-items: center; justify-content: space-between; }
.ti-statbox-top .ti-mask { width: 26px; height: 26px; }
.ti-statbox b { font-size: 32px; line-height: 36px; }
.ti-statbox-label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.ti-pips { display: flex; gap: 4px; margin-top: var(--space-2); }
.ti-pip { flex: 1; height: 6px; border-radius: 2px; border: 1px solid var(--card-ink); }
.ti-pip[data-on="base"] { background: var(--card-ink); }
.ti-pip[data-on="bonus"] { background: var(--cost-gold); border-color: var(--renown); }
.ti-bonus { font-size: 12px; line-height: 16px; color: var(--renown); font-weight: 700; margin-top: 4px; min-height: 16px; }
.ti-slots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ti-slot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 1px dashed var(--card-ink); border-radius: var(--radius-md); font-size: 13px; line-height: 18px; }
.ti-slot[data-filled="true"] { border-style: solid; }
.ti-thumb { flex: none; width: 64px; height: 46px; border-radius: 6px; background: var(--card-ink) center / cover; display: grid; place-items: center; color: var(--paper); }
.ti-thumb .ti-mask { width: 24px; height: 24px; }
.ti-record { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.ti-record b { display: block; font-size: 26px; line-height: 30px; }
.ti-record span { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.ti-hbars { display: flex; flex-direction: column; gap: var(--space-3); }
.ti-hbar { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: var(--space-3); font-size: 13px; font-weight: 700; }
.ti-hbar-track { height: 10px; border-radius: 3px; background: rgba(51, 33, 49, 0.12); overflow: hidden; }
.ti-hbar-fill { display: block; height: 100%; background: var(--fc); }
.ti-hbar output { text-align: right; }

/* City ledger */
.ti-ledger { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 18px; }
.ti-ledger th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); padding: 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--card-ink); }
.ti-ledger td { padding: var(--space-2); border-bottom: 1px solid rgba(51, 33, 49, 0.2); vertical-align: middle; }
.ti-ledger tr[data-active="true"] td { background: rgba(51, 33, 49, 0.07); }
.ti-ledger .num { text-align: right; font-weight: 700; white-space: nowrap; }
.ti-item { display: flex; align-items: center; gap: var(--space-3); }
.ti-item b { display: block; font-size: 14px; }
.ti-item small { font-size: 12px; color: var(--ink-muted); }
.ti-price { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 6px; box-sizing: border-box; border-radius: 6px; background: var(--cost-gold); color: var(--on-cost); font-weight: 700; }
.ti-step { display: inline-flex; align-items: center; border: 1px solid var(--card-ink); border-radius: var(--radius-md); overflow: hidden; }
.ti-step button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--card-ink); font: 700 16px/1 var(--font-sans); cursor: pointer; }
.ti-step button:hover:not(:disabled) { background: rgba(51, 33, 49, 0.1); }
.ti-step button:disabled { color: rgba(51, 33, 49, 0.35); cursor: not-allowed; }
.ti-step button:focus-visible { outline: 2px solid var(--card-ink); outline-offset: -2px; }
.ti-step output { min-width: 26px; text-align: center; font-weight: 700; }
.ti-purse { display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; }
.ti-purse-line { display: flex; justify-content: space-between; gap: var(--space-3); }
.ti-purse-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; padding-top: var(--space-3); border-top: 1px solid var(--card-ink); }
.ti-note { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0; }
.ti-note[data-tone="warn"] { color: var(--warning); font-weight: 700; }
.ti-note[data-tone="ok"] { color: var(--success); font-weight: 700; }
.ti-sheet .ti-btn-primary { background: var(--card-ink); color: var(--paper); }
.ti-sheet .ti-btn-secondary { border-color: var(--card-ink); color: var(--card-ink); }
.ti-sheet .ti-btn-secondary:hover { background: rgba(51, 33, 49, 0.08); }
.ti-sheet .ti-btn:disabled { background: rgba(51, 33, 49, 0.12); color: var(--ink-muted); border-color: transparent; }
.ti-sheet .ti-btn:focus-visible { outline-color: var(--card-ink); }
.ti-sheet .ti-tab { color: var(--ink-muted); } .ti-sheet .ti-tab[aria-selected="true"] { color: var(--card-ink); border-bottom-color: var(--card-ink); }

/* Talents */
.ti-tree { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.ti-tree-col { display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; }
.ti-tree-col h3 { margin: 0 0 var(--space-1); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
.ti-tree-col::before { content: ""; position: absolute; top: 46px; bottom: 30px; left: 50%; width: 2px; margin-left: -1px; background: rgba(51, 33, 49, 0.35); }
.ti-node { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-md); cursor: pointer; padding: 0;
  border: 2px solid var(--card-ink); background: var(--paper); color: var(--card-ink); }
.ti-node .ti-mask { width: 30px; height: 30px; }
.ti-node[data-state="learned"] { background: var(--card-ink); color: var(--paper); }
.ti-node[data-state="locked"] { border-style: dashed; border-color: rgba(51, 33, 49, 0.45); color: rgba(51, 33, 49, 0.45); background: #ddd8c3; }
.ti-node[data-selected="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--card-ink); }
.ti-node:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 6px; }
.ti-node-tier { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 6px; background: var(--paper); border: 1px solid var(--card-ink); color: var(--card-ink); font-size: 11px; line-height: 18px; font-weight: 700; }
.ti-node-name { font-size: 12px; line-height: 14px; font-weight: 700; text-align: center; max-width: 120px; margin-top: -14px; background: var(--paper); padding: 0 4px; }
.ti-points { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--line-200); border-radius: var(--radius-md); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.ti-points b { font-size: 20px; letter-spacing: 0; }

/* ---------- GameStat (the 13 game stats) ---------- */
.ti-gs { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid rgba(51, 33, 49, 0.18); font-size: 13px; line-height: 16px; }
[data-theme="plum"] .ti-gs { border-bottom-color: var(--line-100); }
.ti-gs:last-child { border-bottom: 0; }
.ti-gs-icon { width: 28px; height: 28px; display: block; }
.ti-gs-name { font-weight: 600; }
.ti-gs-val { font-size: 17px; line-height: 20px; font-weight: 700; white-space: nowrap; }
.ti-gs-val small { font-size: 12px; color: var(--renown); }
.ti-gs-compact { grid-template-columns: 22px 1fr auto; padding: 3px 0; }
.ti-gs-compact .ti-gs-icon { width: 22px; height: 22px; }
.ti-gs-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.ti-gs-col .ti-sheet-eyebrow { margin-bottom: var(--space-2); }
.ti-node-icon { width: 34px; height: 34px; }
.ti-node[data-state="learned"] { background: var(--card-ink); }
.ti-node[data-state="locked"] .ti-node-icon { filter: grayscale(1); opacity: 0.45; }
.ti-gs-cols .ti-gs { padding: 4px 0; }
.ti-gs-group + .ti-gs-group { margin-top: var(--space-4); }

/* ---------- ResourceBar: HP, MP, XP ---------- */
.ti-rb { --fill: var(--bar-hp); display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--ink); font-family: var(--font-sans); }
.ti-rb-mp { --fill: var(--bar-mp); } .ti-rb-xp { --fill: var(--bar-xp); }
.ti-rb-icon { flex: none; width: 24px; height: 24px; display: block; }
.ti-rb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ti-rb-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.ti-rb-label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.ti-rb-val { font-size: 14px; line-height: 16px; font-weight: 700; white-space: nowrap; }
.ti-rb-val small { font-size: 12px; font-weight: 700; margin-left: 6px; }
.ti-rb-val .loss { color: var(--danger); } .ti-rb-val .heal { color: var(--success); } .ti-rb-val .gain { color: var(--renown); } .ti-rb-val .cost { color: var(--mana); }
.ti-rb-low { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: var(--danger); color: var(--surface-100); font-size: 10px; line-height: 14px; letter-spacing: 0.14em; }
.ti-rb-track { position: relative; height: 14px; border-radius: 4px; background: var(--bar-track); border: 1px solid var(--line-200); overflow: hidden; }
.ti-rb[data-low="true"] .ti-rb-track { border-color: var(--danger); }
.ti-rb-track > span { position: absolute; top: 0; bottom: 0; }
.ti-rb-fill { left: 0; background: var(--fill); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.ti-rb-loss { background: var(--bar-hp-loss); }
.ti-rb-heal { background: repeating-linear-gradient(135deg, var(--bar-heal) 0 4px, rgba(79, 191, 134, 0.45) 4px 8px); }
.ti-rb-cost { background: repeating-linear-gradient(135deg, var(--bar-mp-cost) 0 4px, var(--fill) 4px 8px); }
.ti-rb-gain { background: var(--bar-xp-gain); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4); }
.ti-rb-ticks { inset: 0; left: 0; right: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--tick) - 1px), rgba(15, 8, 14, 0.55) calc(var(--tick) - 1px) var(--tick)); pointer-events: none; }
/* sizes */
.ti-rb-lg .ti-rb-track { height: 18px; } .ti-rb-lg .ti-rb-icon { width: 30px; height: 30px; } .ti-rb-lg .ti-rb-val { font-size: 16px; }
.ti-rb-md .ti-rb-track { height: 10px; }
.ti-rb-md .ti-rb-main { flex-direction: row; align-items: center; gap: var(--space-2); }
.ti-rb-md .ti-rb-main .ti-rb-track { flex: 1; } .ti-rb-md .ti-rb-top { order: 2; } .ti-rb-md .ti-rb-label { display: none; }
.ti-rb-md .ti-rb-icon { width: 20px; height: 20px; } .ti-rb-md .ti-rb-val { font-size: 13px; min-width: 52px; text-align: right; }
.ti-rb-sm { gap: 0; } .ti-rb-sm .ti-rb-track { height: 6px; border-radius: 2px; border-width: 1px; border-color: rgba(15, 8, 14, 0.9); }
/* XP level badge */
.ti-rb-lv { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--bar-track); border: 2px solid var(--bar-xp); color: #f4eedb; line-height: 1; }
.ti-rb-lv b { font-size: 17px; } .ti-rb-lv i { font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: 0.16em; margin-bottom: -6px; }
.ti-rb-md .ti-rb-lv { width: 28px; height: 28px; } .ti-rb-md .ti-rb-lv b { font-size: 13px; } .ti-rb-md .ti-rb-lv i { display: none; }

/* UnitFrame */
.ti-uf { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--surface-200); border: 1px solid var(--line-100); min-width: 260px; }
.ti-uf > .ti-tile { grid-row: span 3; width: 52px; height: 52px; font-size: 22px; }
.ti-uf-name { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 14px; line-height: 18px; font-weight: 700; }
.ti-uf-name small { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-muted); text-transform: uppercase; }
.ti-uf[data-side="enemy"] { border-color: var(--danger); }
.ti-uf-compact { padding: 6px 10px; min-width: 240px; } .ti-uf-compact > .ti-tile { width: 40px; height: 40px; }

/* unit nameplate bar on the board */
.ti-unit-bar { position: absolute; left: 6px; right: 6px; bottom: 3px; }
.ti-sq .ti-unit { width: 46px; height: 46px; margin-bottom: 8px; }

/* ---------- World map HUD ---------- */
.ti-kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 4px; border: 1px solid currentColor; font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 0; opacity: 0.8; }
.ti-map { background: #020103 var(--map) center / cover no-repeat; }
.ti-map-scrim-top, .ti-map-scrim-bot { position: absolute; left: 0; right: 0; pointer-events: none; }
.ti-map-hit { position: absolute; inset: 56px 0 0 0; cursor: pointer; }
.ti-mbar { position: absolute; top: 0; left: 0; right: 0; height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--space-4); background: var(--surface-100) var(--tex) center / cover; border-bottom: 1px solid var(--line-100); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); z-index: 5; }
.ti-mbar-brand { display: flex; align-items: center; gap: var(--space-3); }
.ti-mbar-brand img { height: 44px; width: auto; }
.ti-mbar-turn { text-align: center; line-height: 1.1; }
.ti-mbar-turn b { display: block; font-size: 20px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ti-mbar-turn span { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.ti-mbar-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.ti-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3) 0 6px; border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--line-100); font-size: 15px; font-weight: 700; white-space: nowrap; }
.ti-chip small { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: var(--ink-muted); text-transform: uppercase; }
.ti-chip .ti-coin { width: 24px; height: 24px; border-radius: 6px; background: var(--cost-gold); }
.ti-chip .ti-tile { width: 24px; height: 24px; font-size: 11px; }
.ti-navbtn { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line-200); background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.ti-navbtn:hover { background: var(--surface-300); }
.ti-navbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-vsep { width: 1px; height: 28px; background: var(--line-100); }

/* MovePips */
.ti-pips-move { display: inline-flex; gap: 4px; align-items: center; }
.ti-pips-move i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--stat-speed); box-sizing: border-box; }
.ti-pips-move i[data-on="true"] { background: var(--stat-speed); }
[data-theme="plum"] .ti-pips-move i { border-color: #3fb7a3; } [data-theme="plum"] .ti-pips-move i[data-on="true"] { background: #3fb7a3; }

/* Company panel */
.ti-company { position: absolute; left: 16px; bottom: 16px; width: 330px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: rgba(48, 32, 45, 0.94); border: 1px solid var(--line-100); box-shadow: var(--shadow-panel); z-index: 4; }
.ti-company-head { display: flex; align-items: center; gap: var(--space-3); }
.ti-company-head .ti-tile { width: 44px; height: 44px; }
.ti-company-head b { display: block; font-size: 15px; } .ti-company-head small { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.ti-members { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-3) 0; }
.ti-member { display: flex; flex-direction: column; gap: 4px; align-items: stretch; padding: 4px; border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--line-100); font-size: 10px; font-weight: 700; text-align: center; color: var(--ink-muted); }
.ti-member .ti-tile { width: 100%; height: 34px; }
.ti-company-moves { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-2); border-top: 1px solid var(--line-100); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.ti-company-moves b { color: var(--ink); letter-spacing: 0; font-size: 14px; margin-left: 6px; }
.ti-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: 0.14em; background: var(--warning); color: var(--surface-100); }

/* Chronicle */
.ti-chron { position: absolute; left: 16px; top: 72px; width: 300px; border-radius: var(--radius-lg); background: rgba(48, 32, 45, 0.9); border: 1px solid var(--line-100); z-index: 4; overflow: hidden; }
.ti-chron button.ti-chron-head { all: unset; box-sizing: border-box; display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 10px var(--space-4); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.ti-chron button.ti-chron-head:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ti-chron ol { list-style: none; margin: 0; padding: 0 var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; }
.ti-chron li { display: flex; gap: var(--space-2); align-items: baseline; color: var(--ink-muted); } .ti-chron li:first-child { color: var(--ink); }
.ti-chron li em { font-style: normal; flex: none; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--surface-000); color: var(--ink-muted); }

/* Map nameplate and tile info */
.ti-plate { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 12px 4px 4px; border-radius: var(--radius-md); background: rgba(31, 19, 29, 0.92); border: 1px solid var(--line-200);
  color: var(--ink); font-family: var(--font-sans); cursor: pointer; white-space: nowrap; z-index: 3; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.ti-plate::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-right: 1px solid var(--line-200); border-bottom: 1px solid var(--line-200); transform: rotate(45deg); }
.ti-plate .ti-tile { width: 28px; height: 28px; }
.ti-plate b { display: block; font-size: 14px; line-height: 16px; } .ti-plate small { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.ti-plate:hover { border-color: var(--ink); } .ti-plate:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ti-tilehl { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.ti-tileinfo { position: absolute; width: 196px; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(31, 19, 29, 0.94); border: 1px solid var(--line-200); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); font-size: 12px; line-height: 16px; z-index: 3; pointer-events: none; }
.ti-tileinfo b { display: block; font-size: 15px; line-height: 18px; margin-bottom: 6px; }
.ti-tileinfo dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; } .ti-tileinfo dt { color: var(--ink-muted); } .ti-tileinfo dd { margin: 0; font-weight: 700; text-align: right; }
.ti-tileinfo p { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--line-100); color: var(--ink-muted); font-size: 11px; }

/* Turn prompt, minimap, End Turn */
.ti-prompt { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-3); padding: 10px 16px; border-radius: 999px; background: rgba(31, 19, 29, 0.94); border: 1px solid var(--warning); color: var(--ink); font-size: 14px; font-weight: 700; z-index: 4; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.ti-prompt .ti-tag { background: var(--warning); }
.ti-endturn { position: absolute; right: 16px; bottom: 16px; width: 228px; display: flex; flex-direction: column; gap: var(--space-2); z-index: 4; }
.ti-minimap { position: relative; height: 128px; border-radius: var(--radius-lg); background: rgba(31, 19, 29, 0.92); border: 1px solid var(--line-100); overflow: hidden; }
.ti-minimap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ti-endturn .ti-btn { width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.ti-endturn .ti-btn[data-ready="true"] { box-shadow: var(--shadow-select); }
.ti-endturn .ti-btn .ti-kbd { color: var(--surface-100); }

/* Company roster: up to 16 units, scrolls inside the panel */
button.ti-members-head b { color: var(--ink); letter-spacing: 0; font-size: 13px; }
.ti-company .ti-members { margin: 0; padding: 2px; }
button.ti-members-head { all: unset; box-sizing: border-box; display: flex; width: 100%; justify-content: space-between; align-items: baseline; margin: var(--space-3) 0 6px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
button.ti-members-head:hover span { color: var(--ink); }
button.ti-members-head:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-company .ti-scroll { margin-bottom: var(--space-3); }

/* ScrollArea: the game's own scrollbar, always visible when content overflows */
.ti-scroll { display: flex; gap: 6px; }
.ti-scroll-view { flex: 1; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.ti-scroll-view::-webkit-scrollbar { display: none; }
.ti-scroll-view:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-scroll-bar { flex: none; width: 12px; display: flex; flex-direction: column; gap: 3px; }
.ti-scroll-btn { all: unset; height: 12px; display: grid; place-items: center; border-radius: 3px; background: var(--surface-000); border: 1px solid var(--line-100); cursor: pointer; }
.ti-scroll-btn:hover { border-color: var(--line-200); }
.ti-scroll-btn span { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.ti-scroll-btn .up { border-bottom: 5px solid var(--ink-muted); } .ti-scroll-btn .down { border-top: 5px solid var(--ink-muted); }
.ti-scroll-track { position: relative; flex: 1; border-radius: 4px; background: var(--surface-000); border: 1px solid var(--line-100); cursor: pointer; }
.ti-scroll-thumb { position: absolute; left: 1px; right: 1px; min-height: 18px; border-radius: 3px; background: var(--line-200); cursor: grab; touch-action: none; }
.ti-scroll-thumb:hover { background: var(--ink); } .ti-scroll-thumb:active { cursor: grabbing; background: var(--ink); }
button.ti-member { position: relative; font-family: var(--font-sans); cursor: pointer; }
button.ti-member:hover { border-color: var(--line-200); }
button.ti-member[data-selected="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); color: var(--ink); }
button.ti-member:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ti-member { height: 70px; box-sizing: border-box; }
.ti-member > span:not(.ti-tile) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-member-lead { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 4px; background: var(--cost-gold); color: #1a130a; font-style: normal; font-size: 9px; line-height: 14px; font-weight: 700; }
.ti-member-empty { justify-content: center; border-style: dashed; background: transparent; color: var(--line-200); }

/* ---------- StatusIcon: buffs, debuffs and control effects ---------- */
.ti-status { --k: var(--line-200); position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; box-sizing: border-box; border-radius: var(--radius-md); background: var(--bar-track); border: 2px solid var(--k); }
.ti-status[data-kind="buff"] { --k: var(--success); }
.ti-status[data-kind="debuff"] { --k: var(--danger); }
.ti-status[data-kind="control"] { --k: var(--warning); border-style: dashed; }
.ti-status img { width: 78%; height: 78%; display: block; }
.ti-status-turns { position: absolute; right: -6px; bottom: -6px; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box; border-radius: 5px; background: var(--k); color: #1a1218; font-size: 10px; line-height: 16px; font-weight: 700; text-align: center; }
.ti-status-stacks { position: absolute; left: -5px; top: -6px; padding: 0 3px; border-radius: 4px; background: var(--surface-000); border: 1px solid var(--k); color: var(--ink); font-style: normal; font-size: 9px; line-height: 12px; font-weight: 700; }
.ti-status-sm { width: 26px; height: 26px; border-width: 1.5px; }
.ti-status-sm .ti-status-turns { min-width: 14px; height: 14px; line-height: 14px; font-size: 9px; right: -5px; bottom: -5px; }
.ti-status-lg { width: 48px; height: 48px; }
.ti-status-row { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.ti-status-row > span { display: inline-flex; }
.ti-uf-wrap { display: inline-flex; flex-direction: column; gap: 8px; }
.ti-bt-opp .ti-uf-wrap { flex-direction: row; align-items: center; gap: 12px; }

/* ---------- Passive tree ---------- */
.ti-pt { display: flex; gap: 16px; padding: 16px; height: 100%; box-sizing: border-box; }
.ti-pt-canvas { position: relative; flex: none; width: var(--pt-w); height: var(--pt-h); border-radius: var(--radius-lg); overflow: hidden; cursor: grab; touch-action: none; user-select: none;
  background: #120a11; box-shadow: inset 0 0 0 1px var(--line), inset 0 0 60px rgba(0,0,0,.6); }
.ti-pt-canvas:active { cursor: grabbing; }
.ti-pt-canvas svg { display: block; }
.ti-pt-orbits circle { fill: none; stroke: var(--cream); stroke-opacity: .07; stroke-width: 1.5; stroke-dasharray: 2 7; }
.ti-pt-branch { fill: var(--cream); fill-opacity: .4; font: 400 22px var(--font-serif); letter-spacing: .28em; text-anchor: middle; pointer-events: none; }
.ti-pt-edge { stroke-linecap: round; transition: stroke .15s; }
.ti-pt-edge[data-state="dim"] { stroke: var(--tree-edge); stroke-width: 4; }
.ti-pt-edge[data-state="reach"] { stroke: var(--tree-edge-reach); stroke-width: 4; stroke-dasharray: 6 6; }
.ti-pt-edge[data-state="lit"] { stroke: var(--tree-edge-lit); stroke-width: 6; filter: drop-shadow(0 0 4px rgba(227,168,58,.7)); }
.ti-pt-node { cursor: pointer; outline: none; }
.ti-pt-node[data-state="dim"] { cursor: default; }
.ti-pt-minor { fill: #2a1a2c; stroke: var(--tree-edge); stroke-width: 3; }
.ti-pt-frame { fill: #3a2638; stroke: #6b5a68; stroke-width: 2; }
.ti-pt-well { fill: #1d1020; stroke: rgba(0,0,0,.6); stroke-width: 1.5; }
.ti-pt-inner { fill: none; stroke: #6b5a68; stroke-width: 1.5; }
.ti-pt-icon { filter: grayscale(1) brightness(.6); opacity: .75; }
.ti-pt-label { fill: var(--cream); fill-opacity: .7; font: 700 15px var(--font-sans); letter-spacing: .08em; text-anchor: middle; text-transform: uppercase; pointer-events: none; }
.ti-pt-node[data-state="reach"] .ti-pt-minor { stroke: var(--tree-edge-reach); fill: #3a2638; }
.ti-pt-node[data-state="reach"] .ti-pt-frame, .ti-pt-node[data-state="reach"] .ti-pt-inner { stroke: var(--tree-edge-reach); }
.ti-pt-node[data-state="reach"] .ti-pt-icon { filter: none; opacity: .9; }
.ti-pt-node[data-state="alloc"] .ti-pt-minor { fill: var(--tree-edge-lit); stroke: #fff1c9; }
.ti-pt-node[data-state="alloc"] .ti-pt-frame { fill: #7a5419; stroke: var(--tree-edge-lit); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(227,168,58,.75)); }
.ti-pt-node[data-state="alloc"] .ti-pt-inner { stroke: var(--tree-edge-lit); }
.ti-pt-node[data-state="alloc"] .ti-pt-icon { filter: none; opacity: 1; }
.ti-pt-node[data-state="alloc"] .ti-pt-label { fill: var(--tree-edge-lit); fill-opacity: 1; }
.ti-pt-node:not([data-state="dim"]):hover .ti-pt-minor, .ti-pt-node:not([data-state="dim"]):hover .ti-pt-frame { stroke: #fff; }
.ti-pt-node:focus-visible .ti-pt-minor, .ti-pt-node:focus-visible .ti-pt-frame { stroke: #fff; stroke-width: 4; }
.ti-pt-hit { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 5 4; }
.ti-pt-seat-ring { fill: none; stroke: var(--tree-edge-lit); stroke-width: 3; stroke-dasharray: 3 5; }
.ti-pt-seat { fill: #2a1a2c; stroke: var(--tree-edge-lit); stroke-width: 4; }
.ti-pt-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ti-pt-zoom button { width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-200); color: var(--cream); font: 700 18px var(--font-sans); cursor: pointer; }
.ti-pt-zoom button:hover { border-color: var(--cost-gold); }
.ti-pt-zoom button:focus-visible { outline: 2px solid var(--cost-gold); outline-offset: 2px; }
.ti-pt-tip { position: absolute; width: 280px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--card-face); color: var(--card-ink); box-shadow: var(--shadow-panel); pointer-events: none; border-top: 4px solid #6b5a68; font-size: 14px; }
.ti-pt-tip[data-type="notable"] { border-top-color: var(--cost-gold); }
.ti-pt-tip[data-type="keystone"] { border-top-color: var(--faction-violet); }
.ti-pt-tip b { display: block; font: 400 20px var(--font-serif); margin: 2px 0 6px; }
.ti-pt-tip-kind { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.ti-pt-tip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ti-pt-tip li { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.ti-pt-tip li img { width: 18px; height: 18px; }
.ti-pt-tip li.up { color: #17602f; }
.ti-pt-tip li.down { color: #a3201b; }
.ti-pt-tip-hint { margin: 8px 0 0; font-size: 12px; font-style: italic; opacity: .75; }
.ti-pt-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ti-pt-points { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); background: rgba(122,84,25,.12); }
.ti-pt-points span { font-weight: 700; flex: 1; }
.ti-pt-points b { font: 400 32px var(--font-serif); color: #7a5419; }
.ti-pt-search { display: grid; gap: 4px; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ti-pt-search input { font: 500 15px var(--font-sans); padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(43,26,46,.35); background: rgba(255,255,255,.55); color: var(--card-ink); text-transform: none; letter-spacing: 0; }
.ti-pt-search input:focus-visible { outline: 2px solid var(--cost-gold); }
.ti-pt-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0; font-size: 12px; font-weight: 600; }
.ti-pt-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ti-pt-legend i { display: inline-block; width: 12px; height: 12px; background: #3a2638; border: 2px solid #6b5a68; }
.ti-pt-legend .lg-minor { border-radius: 50%; }
.ti-pt-legend .lg-notable { border-radius: 3px; width: 14px; height: 14px; border-color: var(--cost-gold); }
.ti-pt-legend .lg-key { clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); width: 16px; height: 16px; background: var(--faction-violet); border: 0; }
.ti-pt-legend .lg-lit { width: 18px; height: 5px; border: 0; background: var(--tree-edge-lit); border-radius: 3px; }
.ti-pt-legend .lg-reach { width: 18px; height: 0; border: 0; border-top: 3px dashed #b3a189; background: none; }
.ti-pt-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: auto; }
.ti-pt-actions > * { min-width: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.ti-pt-keystone .ti-pt-frame { stroke-width: 3; }
.ti-pt-backdrop { pointer-events: none; }
.ti-pt-node[data-state="dim"] .ti-pt-icon { filter: grayscale(.85) brightness(.75); opacity: .7; }

/* ---------- Text dungeons ---------- */
.ti-dg { display: flex; flex-direction: column; padding: 20px 24px; gap: 14px; }
.ti-dg-top { display: flex; justify-content: space-between; align-items: center; }
.ti-dg-top .ti-eyebrow { margin: 0; }
.ti-dg-title { margin: 2px 0 0; font: 400 30px/36px var(--font-serif); color: var(--ink); }
.ti-dg-topr { display: flex; align-items: center; gap: 18px; }
.ti-dg-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 272px 1fr 268px; gap: 16px; }
.ti-dg-company { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ti-dg-company > .ti-panel-eyebrow { margin: 0; }
.ti-dg-unit { position: relative; }
.ti-dg-unit .ti-uf-compact { min-width: 0; }
.ti-dg-unit[data-down="true"] { opacity: .45; filter: grayscale(.8); }
.ti-dg-cls { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; padding: 2px; border-radius: 6px; background: var(--surface-000); }
.ti-dg-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ti-dg-side .ti-panel { padding: 14px 16px; }
.ti-dg-map .ti-panel-body { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ti-dg-map .ti-note { font-size: 11.5px; line-height: 15px; text-align: center; }
.ti-dg-log { flex: 1; min-height: 0; }
.ti-dg-logline { margin: 0 0 6px; font-size: 13px; line-height: 17px; color: var(--ink-muted); }
.ti-dg-logline:first-child { color: var(--ink); font-weight: 600; }

/* minimap */
.ti-mm { display: block; overflow: visible; }
.ti-mm-door { stroke: var(--line-200); stroke-width: 3; stroke-linecap: round; }
.ti-mm-door[data-seen="true"] { stroke-dasharray: 3 4; stroke-width: 2; opacity: .7; }
.ti-mm-cell rect { fill: var(--surface-300); stroke: var(--line-200); stroke-width: 1.25; }
.ti-mm-cell { color: var(--ink); }
.ti-mm-cell[data-state="seen"] rect { fill: var(--surface-000); stroke-dasharray: 4 3; }
.ti-mm-cell[data-state="seen"] { color: var(--ink-muted); }
.ti-mm-cell[data-state="visited"][data-cleared="true"] { color: var(--ink-muted); }
.ti-mm-cell[data-state="here"] rect { fill: rgba(227,168,58,.22); stroke: var(--cost-gold); stroke-width: 2.5; }
.ti-mm-cell[data-state="here"] { color: #f2c66d; }
.ti-mm-cell[role="button"] { cursor: pointer; outline: none; }
.ti-mm-cell[role="button"]:hover rect, .ti-mm-cell[role="button"]:focus-visible rect { stroke: var(--cream); stroke-width: 2; }
.ti-mm-here { fill: var(--cost-gold); }

/* torch */
.ti-torch { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; color: #f2c66d; }
.ti-torch .ti-dg-glyph { grid-row: 1 / span 2; }
.ti-torch-label { font-size: 13px; color: var(--ink); letter-spacing: .04em; }
.ti-torch-label b { font-size: 16px; }
.ti-torch-segs { display: flex; gap: 3px; }
.ti-torch-segs i { width: 9px; height: 10px; border-radius: 2px; background: var(--bar-track); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ti-torch-segs i[data-on="true"] { background: linear-gradient(#f6d27a, #d99d21); box-shadow: 0 0 6px rgba(217,157,33,.55); }
.ti-torch[data-state="low"] .ti-torch-segs i[data-on="true"] { background: #b8641b; box-shadow: none; }
.ti-torch[data-state="out"] { color: var(--ink-muted); }
.ti-torch-warn { grid-column: 2; font-size: 11.5px; font-weight: 700; color: var(--warning); }

/* room card */
.ti-room { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.ti-room .ti-sheet-title { font: 400 28px/34px var(--font-serif); margin: 0 0 10px; }
.ti-room-text p { margin: 0 0 8px; font-size: 16px; line-height: 24px; }
.ti-room-note { margin: 0 0 8px; font-size: 13px; font-style: italic; opacity: .8; }
.ti-room-choices, .ti-room-doors { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ti-room-doors { margin-top: 14px; }
.ti-room-doors .ti-sheet-eyebrow { margin: 0 0 2px; }

/* choices */
.ti-choice { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 7px 12px; text-align: left; cursor: pointer;
  border-radius: var(--radius-md); border: 1px solid rgba(43,26,46,.28); background: rgba(255,255,255,.45); color: var(--card-ink); font: 600 15px/19px var(--font-sans); }
.ti-choice:hover:not(:disabled) { background: rgba(255,255,255,.75); border-color: var(--card-ink); }
.ti-choice:focus-visible { outline: 2px solid var(--cost-gold); outline-offset: 2px; }
.ti-choice[data-kind="fight"] { border-color: rgba(166,32,27,.5); }
.ti-choice[data-kind="door"] { background: transparent; border-style: dashed; font-weight: 500; min-height: 36px; padding: 5px 12px; }
.ti-choice:disabled { cursor: not-allowed; opacity: .55; }
.ti-choice:disabled .ti-choice-cls { filter: grayscale(1); }
.ti-choice-cls { width: 26px; height: 26px; flex: none; }
.ti-choice-glyph { width: 26px; display: grid; place-items: center; color: #6b5a68; flex: none; }
.ti-choice-dot { width: 26px; flex: none; display: grid; place-items: center; }
.ti-choice-dot::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--card-ink); opacity: .55; }
.ti-choice-main { flex: 1; min-width: 0; }
.ti-choice-main b { color: #6b4a12; }
.ti-choice-main small { display: block; font-size: 12px; line-height: 15px; font-weight: 500; opacity: .75; }
.ti-choice-odds { flex: none; min-width: 48px; text-align: center; padding: 3px 8px; border-radius: 999px; font: 700 14px/18px var(--font-sans); color: #fff; }
.ti-choice-odds[data-band="good"] { background: #2f7a3d; }
.ti-choice-odds[data-band="mid"] { background: #8a6410; }
.ti-choice-odds[data-band="bad"] { background: #a3201b; }
.ti-choice-cost { flex: none; font-size: 12px; font-weight: 700; color: #6b4a12; white-space: nowrap; }

/* check result */
.ti-check { margin: 4px 0 6px; padding: 10px 12px; border-radius: var(--radius-md); border-left: 4px solid #6b5a68; background: rgba(255,255,255,.5); font-size: 14px; line-height: 19px; }
.ti-check[data-tone="success"] { border-left-color: #2f7a3d; }
.ti-check[data-tone="partial"] { border-left-color: #8a6410; }
.ti-check[data-tone="fail"] { border-left-color: #a3201b; }
.ti-check ul { margin: 4px 0 0; padding-left: 18px; }

/* fight + battle hand-off + results */
.ti-dg-foes { display: grid; gap: 8px; }
.ti-dg-board { position: relative; width: 1280px; height: 720px; }
.ti-dg-boardbar { position: absolute; left: 50%; top: 78px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 999px;
  background: var(--surface-000); border: 1px solid var(--cost-gold); color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: var(--shadow-panel); }
.ti-dg-results { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,10,18,.72); }
.ti-dg-results > .ti-sheet { width: 640px; }
.ti-dg-res { display: grid; gap: 0; margin-bottom: 14px; }
.ti-dg-res > div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(43,26,46,.15); font-size: 15px; }
.ti-dg-resunits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ti-dg-resunits .ti-uf-compact { min-width: 0; }
.ti-dg-unit .ti-uf-wrap { display: grid; gap: 4px; width: 100%; }
.ti-dg-unit .ti-uf-wrap > .ti-uf { width: auto; }

/* ---------- Match (worker-placement board) ---------- */
.ti-mt { display: grid; grid-template-columns: 272px 1fr 256px; grid-template-rows: 52px 1fr 148px; column-gap: 14px; row-gap: 10px; padding: 12px 16px 0; }
.ti-mt-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; }
.ti-mt-turn { display: flex; align-items: center; gap: 16px; flex: 1; }
.ti-mt-turnno { font: 400 28px/32px var(--font-serif); color: var(--ink); }
.ti-mt-phases { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ti-mt-phases li { padding: 5px 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--line-100); border-radius: 999px; }
.ti-mt-phases li[data-state="done"] { opacity: .55; }
.ti-mt-phases li[data-state="now"] { color: var(--surface-000); background: var(--cream); border-color: var(--cream); }
.ti-mt-whose { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.ti-mt-whose b { color: #f2c66d; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.ti-mt-whose span { font-size: 12px; color: var(--ink-muted); }

.ti-mt-left { grid-row: 2 / 4; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ti-mt-players { display: grid; gap: 6px; }
.ti-mt-player { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 4px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-200); border: 1px solid var(--line-100); }
.ti-mt-player[data-active="true"] { border-color: var(--cost-gold); box-shadow: 0 0 0 1px var(--cost-gold); }
.ti-mt-player > .ti-tile { grid-row: 1 / 4; width: 40px; height: 40px; align-self: center; }
.ti-mt-pname { display: flex; align-items: baseline; gap: 6px; font-size: 15px; color: var(--ink); }
.ti-mt-pname small { font-size: 11px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .1em; }
.ti-mt-pname em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
.ti-mt-pname i { padding: 1px 6px; border-radius: 4px; background: rgba(227,168,58,.16); font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #f2c66d; }
.ti-mt-php .ti-rb { width: 100%; }
.ti-mt-pres { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.ti-mt-chip { display: inline-flex; align-items: baseline; gap: 2px; min-width: 26px; justify-content: center; padding: 1px 6px; border-radius: 6px; color: #fff; font-size: 14px; }
.ti-mt-chip[data-kind="gold"] { background: var(--cost-gold); color: var(--on-cost, #1f131d); }
.ti-mt-chip[data-kind="mana"] { background: var(--cost-mana); }
.ti-mt-chip small { font-size: 10.5px; font-weight: 700; opacity: .85; }
.ti-mt-meta { display: inline-flex; align-items: center; gap: 3px; }
.ti-mt-inspect { flex: 1; min-height: 0; }
.ti-mt-inspect > .ti-card { transform: scale(0.66); transform-origin: top left; }
.ti-mt-inspect-empty { height: 100%; display: grid; place-items: center; border: 1px dashed var(--line-100); border-radius: var(--radius-lg); color: var(--ink-muted); font-size: 13px; }

.ti-mt-center { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.ti-mt-prompt { margin: 0; padding: 5px 14px; border-radius: 999px; background: var(--surface-000); border: 1px solid var(--line-100); color: var(--ink); font-size: 13px; font-weight: 600; }
.ti-mt-prompt[data-mode="place"] { border-color: var(--cost-gold); color: #f2c66d; }
.ti-mt-boardwrap { display: grid; grid-template-columns: 16px auto; grid-template-rows: 14px auto; column-gap: 4px; row-gap: 3px; }
.ti-mt-files { grid-column: 2; display: grid; grid-template-columns: repeat(16, 34px); gap: 3px; }
.ti-mt-ranks { grid-row: 2; display: grid; grid-template-rows: repeat(10, 34px); gap: 3px; }
.ti-mt-files span, .ti-mt-ranks span { display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--ink-muted); opacity: .6; }
.ti-mt-files span[data-hot="true"], .ti-mt-ranks span[data-hot="true"] { opacity: 1; color: var(--cream); }
.ti-mt-board { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(16, 34px); grid-template-rows: repeat(10, 34px); gap: 3px; padding: 0; }
.ti-mt-cell { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: rgba(20,10,18,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); cursor: pointer; }
.ti-mt-cell:hover { background: rgba(70,50,63,.85); }
.ti-mt-cell:focus-visible { outline: 2px solid var(--cream); outline-offset: 1px; }
.ti-mt-cell[data-sel="true"] { box-shadow: inset 0 0 0 2px var(--cream); }
.ti-mt-cell[data-can="true"] { background: rgba(227,168,58,.14); box-shadow: inset 0 0 0 1.5px rgba(227,168,58,.7); }
.ti-mt-cell[data-can="true"]:hover { background: rgba(227,168,58,.32); }
.ti-mt-node { position: absolute; }
.ti-mt-node path:first-child { stroke-width: 1.2; }
.ti-mt-node[data-kind="gold"] path:first-child { fill: #d99d21; stroke: #f6d27a; }
.ti-mt-node[data-kind="mana"] path:first-child { fill: #1948a0; stroke: #6f9be8; }
.ti-mt-node-in { fill: rgba(255,255,255,.85); }
.ti-mt-cell:has(.ti-mt-worker) .ti-mt-node, .ti-mt-cell:has(.ti-mt-cmd) .ti-mt-node { transform: translate(10px, -10px) scale(.6); }
.ti-mt-worker { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; }
.ti-mt-worker[data-side="you"] { background: var(--faction-voltaire); box-shadow: 0 0 0 2px var(--cream); }
.ti-mt-worker[data-side="op"] { background: var(--faction-taqla); box-shadow: 0 0 0 2px #0e0a10; }
.ti-mt-legend .ti-mt-worker { width: 18px; height: 18px; }
.ti-mt-cmd { position: relative; display: grid; place-items: center; }
.ti-mt-cmd > .ti-tile { width: 32px; height: 32px; border-radius: 7px; }
.ti-mt-cmd[data-side="you"] > .ti-tile { box-shadow: 0 0 0 2px var(--cream); }
.ti-mt-cmd > i { position: absolute; left: 1px; bottom: -5px; height: 3px; max-width: 30px; border-radius: 2px; background: var(--stat-hp, #d64545); }
.ti-mt-legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-muted); }
.ti-mt-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ti-mt-legend .ti-mt-node { position: static; width: 16px; height: 16px; }

.ti-mt-right { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ti-mt-right .ti-panel { padding: 14px 16px; }
.ti-mt-selp .ti-panel-title { font-size: 20px; line-height: 26px; margin-bottom: 4px; }
.ti-mt-log { flex: 1; min-height: 0; }

.ti-mt-hand { grid-column: 2; grid-row: 3; position: relative; padding-top: 18px; display: flex; justify-content: center; align-items: flex-start; }
.ti-mt-slot { position: relative; width: 137px; height: 200px; margin: 0 -10px; transform: translateY(calc(abs(var(--i)) * 6px)) rotate(calc(var(--i) * 3deg)); transition: transform 150ms ease-out; }
.ti-mt-slot > .ti-card { transform: scale(0.38); transform-origin: top left; }
.ti-mt-slot:hover, .ti-mt-slot[data-selected="true"] { transform: translateY(-26px); z-index: 3; }
.ti-mt-slot[data-ok="false"] > .ti-card { filter: saturate(.55) brightness(.82); }
.ti-mt-need { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: rgba(20,10,18,.88); color: #f2c66d; font-size: 11px; font-weight: 700; pointer-events: none; }
.ti-mt-actions { grid-column: 3; grid-row: 3; display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; }
.ti-mt-actions .ti-btn { width: 100%; }
.ti-mt-on { border-color: var(--cost-gold) !important; color: #f2c66d !important; }
.ti-mt-left, .ti-mt-player, .ti-mt-pname { min-width: 0; }
.ti-mt-player { overflow: hidden; }
.ti-mt-right { gap: 8px; }
.ti-mt-right .ti-mt-player { grid-template-columns: 44px 1fr; padding: 12px; row-gap: 6px; }
.ti-mt-right .ti-mt-player > .ti-tile { width: 44px; height: 44px; }
.ti-mt-right .ti-mt-pname { flex-wrap: wrap; row-gap: 2px; }
.ti-mt-right .ti-mt-pname em { margin-left: 0; flex-basis: 100%; }
.ti-mt-left { gap: 8px; }
.ti-mt-inspect { flex: none; height: 400px; }
.ti-mt-inspect > .ti-card { transform: scale(0.75); }
.ti-mt-play { width: 270px; }
.ti-mt-slot[data-ok="false"] > .ti-card { filter: none; }
.ti-mt-board { grid-template-columns: repeat(16, 38px); grid-template-rows: repeat(10, 38px); margin-top: 6px; }
.ti-mt-cell .ti-mt-worker { width: 26px; height: 26px; }
.ti-mt-cmd > .ti-tile { width: 34px; height: 34px; }
/* hand: a straight row, half below the screen edge, starting at the buttons and running left */
.ti-mt-left { grid-row: 2; }
.ti-mt-hand { grid-column: 1 / 3; flex-direction: row-reverse; justify-content: flex-start; align-items: flex-start; gap: 8px; padding-top: 38px; }
.ti-mt-slot { width: 151px; height: 220px; margin: 0; transform: none; flex: none; }
.ti-mt-slot > .ti-card { transform: scale(0.42); }
.ti-mt-slot[data-selected="true"] { transform: translateY(-48px); z-index: 3; }
.ti-mt-slot:hover, .ti-mt-slot:focus-within { transform: translateY(-112px); z-index: 4; }

/* ---------- Formation battle (Screens.FormationBattle): the game's battle screen ---------- */
.ti-iso { position: relative; overflow: hidden; background: #2c3319; }
.ti-iso-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ti-iso-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 0 16px; box-sizing: border-box;
  background: var(--surface-100) var(--tex) center / cover; border-bottom: 1px solid var(--line-100); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.ti-iso-side { flex: 1 1 0; display: flex; align-items: center; min-width: 0; gap: 8px; }
.ti-iso-side-right { justify-content: flex-end; }
.ti-iso-uframe { width: 340px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; margin: 6px 0; padding: 6px 12px 6px 6px; border-radius: 12px; background: var(--surface-200); border: 1px solid var(--line-100); }
.ti-iso-uframe[data-side="foe"] { border-color: var(--danger); }
.ti-iso-tile { width: 52px; height: 52px; font-size: 22px; }
.ti-iso-tile[data-side="you"] { background: #7a5a1e; }
.ti-iso-tile[data-side="foe"] { background: #6b221d; }
.ti-iso-uinfo { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ti-iso-uname { display: flex; align-items: baseline; gap: 8px; }
.ti-iso-uname b { flex: 1; min-width: 0; font-size: 14px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-iso-uname small { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.ti-iso-controls { display: flex; align-items: center; gap: 0; }
.ti-iso-small { padding: 8px 14px; }
.ti-iso-pause { width: 94px; }
.ti-iso-seg { display: flex; margin: 0 8px 0 12px; padding: 2.67px; border-radius: 8px; border: 1px solid var(--line-100); background: var(--surface-200); }
.ti-iso-seg button { min-width: 44px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-muted); font: 700 13px/16px var(--font-sans); cursor: pointer; }
.ti-iso-seg button:hover { color: var(--ink); background: var(--surface-300); }
.ti-iso-seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface-100); }
.ti-iso-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ti-iso-log { position: absolute; z-index: 1; left: 16px; top: 96px; width: 236px; padding: 16px; box-sizing: border-box; box-shadow: var(--shadow-panel); }
.ti-iso-log .ti-panel-body { display: block; margin-top: 4px; }
.ti-iso-line { margin: 8px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line-100); font-size: 13px; line-height: 17px; color: var(--ink-muted); }
.ti-iso-line:first-child { color: var(--ink); }
.ti-iso-context { position: absolute; z-index: 1; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(15, 8, 14, 0.78); color: var(--cream); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.ti-iso-menu { display: grid; gap: 2px; margin-top: 16px; }
/* Playback: the attacker lunges, the target flinches, damage rises off it; shots fly from the back row. */
.ti-iso-act { animation: ti-iso-lunge 0.32s ease-out; }
@keyframes ti-iso-lunge { 40% { transform: translate(var(--lx), var(--ly)); } }
.ti-iso-hit { animation: ti-iso-hit 0.36s ease-out; }
@keyframes ti-iso-hit { 0%, 100% { filter: none; } 30% { filter: brightness(1.9) saturate(0.4); transform: translate(3px, 0); } 60% { transform: translate(-2px, 0); } }
.ti-iso-shot { animation: ti-iso-shot 0.26s ease-in both; }
@keyframes ti-iso-shot { from { transform: translate(var(--sx), var(--sy)); opacity: 1; } 90% { opacity: 1; } to { transform: none; opacity: 0; } }
.ti-iso-float { font: 700 22px var(--font-sans); fill: #fff; stroke: #1a0f0d; stroke-width: 4px; paint-order: stroke; text-anchor: middle; animation: ti-iso-float 0.9s ease-out both; pointer-events: none; }
.ti-iso-float-skill { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; fill: #f0c060; }
@keyframes ti-iso-float { from { transform: translateY(6px); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ti-iso-act, .ti-iso-hit, .ti-iso-shot { animation: none; } .ti-iso-float { animation-duration: 0.01s; animation-fill-mode: none; } }
/* Result: the outcome in large tracked caps, stat tiles and the way on */
.ti-iso-result { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15, 8, 14, 0.72); }
.ti-iso-result-title { margin: 0; font: 700 104px/1 var(--font-sans); letter-spacing: 14px; text-transform: uppercase; color: var(--ink); text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
.ti-iso-result-title[data-tone="bad"] { color: var(--danger); }
.ti-iso-result-title[data-tone="muted"] { color: var(--ink-muted); }
.ti-iso-result-stats { display: flex; gap: 16px; margin-top: 24px; }
.ti-iso-result-stat { min-width: 150px; box-sizing: border-box; display: grid; justify-items: center; gap: 6px; padding: 16px; border-radius: 12px; border: 1px solid var(--line-100); background: var(--surface-200); }
.ti-iso-result-stat b { font-size: 28px; line-height: 32px; font-variant-numeric: tabular-nums; }
.ti-iso-result-stat small { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.ti-iso-result-actions { display: flex; gap: 12px; margin-top: 32px; }

/* ---------- Field battle (Screens.FieldBattle): the general's war table, played in turns ---------- */
.ti-fb { display: flex; flex-direction: column; padding: 14px 18px 16px; gap: 12px; box-sizing: border-box; }
.ti-fb-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.ti-fb-title { margin: 2px 0 0; font: 400 26px/32px var(--font-serif); color: var(--ink); }
.ti-fb-turn { display: grid; justify-items: center; gap: 3px; }
.ti-fb-turnno { font: 700 12px/20px var(--font-sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-muted); }
.ti-fb-turnno b { margin-left: 8px; font-size: 22px; letter-spacing: 0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ti-fb-phase { font-size: 12.5px; line-height: 16px; color: var(--ink-muted); }
.ti-fb-phase[data-phase="playing"] { color: var(--warning); }
.ti-fb-balance { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ti-fb-scale { display: block; width: 180px; height: 6px; border-radius: 3px; background: #b5483b; overflow: hidden; }
.ti-fb-scale i { display: block; height: 100%; background: #6f93c9; }
.ti-fb-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.ti-fb-actions .ti-btn { padding: 10px 16px; }
.ti-fb-waiting { margin-right: 4px; font-size: 13px; font-weight: 700; color: var(--warning); white-space: nowrap; }
.ti-fb-waiting[data-none="true"] { color: var(--ink-muted); font-weight: 600; }
.ti-fb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 228px 1fr 252px; gap: 12px; }
.ti-fb-body .ti-panel { padding: 12px 14px; }
.ti-fb-army { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ti-fb-army > .ti-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.ti-fb-row { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ti-fb-row:hover { background: var(--surface-300); }
.ti-fb-row[aria-pressed="true"] { border-color: var(--cream); background: var(--surface-300); }
.ti-fb-row[data-await="true"] small { color: var(--warning); font-weight: 700; }
.ti-fb-row[data-state="routing"] small { color: var(--danger); }
.ti-fb-row[data-state="dead"], .ti-fb-row[data-state="fled"] { opacity: 0.45; }
.ti-fb-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-fb-rowtext { display: grid; gap: 3px; min-width: 0; }
.ti-fb-rowtext b { font-size: 13.5px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-fb-rowname { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ti-fb-rowname b { flex: 1; min-width: 0; }
.ti-fb-rowname i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ti-fb-rowtext small { font-size: 11.5px; line-height: 15px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-fb-icon { width: 40px; height: 26px; display: block; overflow: visible; }
.ti-fb-bars { display: grid; gap: 2px; }
.ti-fb-bar { display: block; height: 4px; border-radius: 2px; background: rgba(18, 10, 17, 0.6); overflow: hidden; }
.ti-fb-bar i { display: block; height: 100%; background: #7fc28a; }
.ti-fb-bar[data-kind="morale"] { height: 3px; } .ti-fb-bar[data-kind="morale"] i { background: #f0c060; }
.ti-fb-legend { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; padding-top: 8px; border-top: 1px solid var(--line-100); font-size: 11.5px; line-height: 14px; color: var(--ink-muted); }
.ti-fb-legend span { display: flex; align-items: center; gap: 4px; }
.ti-fb-legend .ti-fb-icon { width: 30px; height: 20px; }
/* The table: parchment in a dark wooden rim */
.ti-fb-fieldwrap { min-height: 0; display: flex; align-items: center; justify-content: center; }
.ti-fb-field { width: 100%; height: auto; max-height: 100%; display: block; padding: 7px; box-sizing: border-box; border-radius: 8px; background: linear-gradient(#3b2617, #23150c); box-shadow: inset 0 0 0 1px rgba(255, 230, 190, 0.12), var(--shadow-panel); cursor: crosshair; }
.ti-fb-field[data-phase="playing"], .ti-fb-field[data-phase="over"] { cursor: default; }
.ti-fb-place { fill: #5a3d1f; font: italic 400 13px var(--font-serif); text-anchor: middle; pointer-events: none; }
.ti-fb-place-sm { font-size: 11px; }
.ti-fb-edge { fill: #6e4f2c; font: 700 9px var(--font-sans); letter-spacing: 0.32em; text-transform: uppercase; text-anchor: middle; pointer-events: none; }
.ti-fb-compass { fill: #6e4f2c; font: italic 400 12px var(--font-serif); text-anchor: middle; }
.ti-fb-tag { font: 700 10px var(--font-sans); text-anchor: middle; fill: #2a1d10; stroke: #e6d4a8; stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; pointer-events: none; font-variant-numeric: tabular-nums; }
.ti-fb-tag[data-side="foe"] { fill: #5c1c16; }
.ti-fb-tag[data-state="routing"] { fill: #8f2e24; font-style: italic; }
.ti-fu[data-ghost="true"] { opacity: 0.38; }
.ti-fu[data-routing="true"] { opacity: 0.6; }
.ti-fb-unit, .ti-fb-fight[data-live="true"] { cursor: pointer; }
.ti-fb-unit:focus-visible, .ti-fb-fight:focus-visible { outline: none; }
.ti-fb-unit:focus-visible .ti-fu, .ti-fb-fight:focus-visible circle { filter: drop-shadow(0 0 2px #9a6a12) drop-shadow(0 0 2px #9a6a12); }
.ti-fb-fight[data-live="true"] circle { animation: ti-fb-pulse 1.2s ease-in-out infinite; }
@keyframes ti-fb-pulse { 50% { fill: #f3dc9c; } }
@media (prefers-reduced-motion: reduce) { .ti-fb-fight circle { animation: none; } }
.ti-fb-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ti-fb-sel { display: grid; gap: 8px; }
.ti-fb-selhead { display: flex; gap: 10px; align-items: center; }
.ti-fb-selhead .ti-fb-icon { width: 46px; height: 30px; }
.ti-fb-selhead b { display: block; font-size: 15px; line-height: 19px; }
.ti-fb-selhead small { color: var(--ink-muted); font-size: 12px; }
.ti-fb-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12.5px; line-height: 17px; }
.ti-fb-dl dt { color: var(--ink-muted); } .ti-fb-dl dd { margin: 0; font-weight: 700; }
.ti-fb-orders { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ti-fb-orders .ti-btn { padding: 6px 8px; min-height: 32px; font-size: 11.5px; letter-spacing: 0.16em; }
.ti-fb-sel .ti-note { margin: 0; font-size: 12px; line-height: 16px; }
.ti-fb-log { flex: 1; min-height: 0; overflow: hidden; }
.ti-fb-logline { margin: 0 0 5px; font-size: 12.5px; line-height: 16px; color: var(--ink-muted); }
.ti-fb-loghead { margin: 8px 0 4px; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
.ti-fb-loghead:first-child { margin-top: 0; }

/* ---------- Website kit ---------- */
.ti-site { --nav-w: 264px; container: site / inline-size; height: 100%; min-height: 640px; color: var(--ink); font-family: var(--font-sans); background: var(--surface-100); }
.ti-site-grid { position: relative; display: grid; grid-template-columns: var(--nav-w) 1fr; height: 100%; overflow: hidden; }
.ti-site-ic { flex: none; }
.ti-site-fmark { display: inline-grid; place-items: center; flex: none; color: #fff; font-weight: 700; }
.ti-site-fmark > .ti-mask { width: 78%; height: 78%; background: #fff; }

/* nav */
.ti-site-nav { position: relative; z-index: 5; display: flex; flex-direction: column; min-height: 0; background: var(--surface-000); border-right: 1px solid var(--line-100); }
.ti-site-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; text-decoration: none; color: var(--ink); }
.ti-site-brand img { width: 44px; height: 44px; object-fit: contain; }
.ti-site-brand b { display: block; font: 400 20px/22px var(--font-serif); }
.ti-site-brand small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.ti-site-search { position: relative; margin: 0 14px 10px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: var(--radius-md); background: var(--surface-200); border: 1px solid var(--line-100); color: var(--ink-muted); }
.ti-site-search:focus-within { border-color: var(--cream); }
.ti-site-search input { flex: 1; min-width: 0; height: 36px; border: 0; background: none; color: var(--ink); font: 500 14px var(--font-sans); outline: none; }
.ti-site-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; padding: 6px; border-radius: var(--radius-md); background: var(--surface-300); border: 1px solid var(--line-200); box-shadow: var(--shadow-panel); }
.ti-site-results a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; }
.ti-site-results a:hover, .ti-site-results a:focus-visible { background: var(--surface-200); outline: none; }
.ti-site-results small { color: var(--ink-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ti-site-results p { margin: 6px 8px; font-size: 13px; color: var(--ink-muted); }
.ti-site-navscroll { flex: 1; min-height: 0; overflow: auto; padding: 4px 10px 12px; }
.ti-site-group { padding: 6px 0; border-top: 1px solid var(--line-100); }
.ti-site-group:first-child { border-top: 0; }
.ti-site-glabel { margin: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); }
.ti-site-link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.ti-site-link > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-site-link .ti-site-ic { color: var(--ink-muted); }
.ti-site-link:hover { background: var(--surface-200); }
.ti-site-link:focus-visible { outline: 2px solid var(--cream); outline-offset: -2px; }
.ti-site-link[aria-current="page"] { background: var(--surface-300); color: var(--cream); font-weight: 700; }
.ti-site-link[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cost-gold); }
.ti-site-link[aria-current="page"] .ti-site-ic { color: var(--cost-gold); }
.ti-site-foldbtn { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -4px; border: 0; border-radius: 6px; background: none; color: var(--ink-muted); cursor: pointer; }
.ti-site-foldbtn:hover { background: var(--surface-300); color: var(--ink); }
.ti-site-foldbtn[aria-expanded="true"] .ti-site-ic { transform: rotate(90deg); }
.ti-site-sub { margin: 2px 0 4px 18px; padding-left: 10px; border-left: 1px solid var(--line-100); }
.ti-site-sublink { min-height: 30px; font-size: 13.5px; }
.ti-site-navfoot { padding: 12px 20px; border-top: 1px solid var(--line-100); font-size: 12px; color: var(--ink-muted); }
.ti-site-mbar { display: none; }

/* main */
.ti-site-main { min-width: 0; min-height: 0; overflow: auto; background: var(--surface-100) var(--tex) center top / 1400px auto; }
.ti-site-body { max-width: 1040px; margin: 0 auto; padding: 24px 40px 0; }
.ti-site-hero { position: relative; display: flex; align-items: center; gap: 32px; padding: 64px max(40px, calc((100% - 960px) / 2)) 56px; min-height: 340px; box-sizing: border-box;
  background: linear-gradient(90deg, rgba(31,19,29,.96) 0%, rgba(31,19,29,.82) 45%, rgba(31,19,29,.35) 100%), var(--hero-img) center / cover no-repeat, var(--surface-000); border-bottom: 1px solid var(--line-100); }
.ti-site-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-tint) 0, transparent 70%); opacity: .45; mix-blend-mode: screen; pointer-events: none; }
.ti-site-hero[data-size="md"] { min-height: 280px; padding-top: 48px; padding-bottom: 44px; }
.ti-site-hero[data-size="sm"] { min-height: 200px; padding-top: 40px; padding-bottom: 36px; }
.ti-site-hero-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 28px; flex: 1; min-width: 0; }
.ti-site-hero-text { min-width: 0; max-width: 640px; }
.ti-site-actions .ti-btn { white-space: nowrap; }
.ti-site-hero .ti-eyebrow { margin: 0 0 6px; }
.ti-site-h1 { margin: 0; font: 400 56px/60px var(--font-serif); color: var(--cream); }
.ti-site-hero[data-size="md"] .ti-site-h1 { font-size: 48px; line-height: 54px; }
.ti-site-hero[data-size="sm"] .ti-site-h1 { font-size: 40px; line-height: 46px; }
.ti-site-lead { margin: 14px 0 0; font-size: 18px; line-height: 28px; color: var(--ink); opacity: .9; }
.ti-site-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ti-site-hero-aside { position: relative; z-index: 1; flex: none; }
.ti-site-hero-logo { width: 240px; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.5)); }
.ti-site-hero-mark { flex: none; filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)); }
.ti-site-hero-mark .ti-site-fmark { box-shadow: 0 0 0 3px var(--cream); }
.ti-site-hero-gmark { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 18px; background: var(--surface-200); border: 2px solid var(--cream); color: var(--cream); }

.ti-site-sec { padding: 28px 0 8px; }
.ti-site-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ti-site-sechead .ti-eyebrow { margin: 0 0 2px; }
.ti-site-h2 { margin: 0; font: 400 30px/36px var(--font-serif); color: var(--cream); }
.ti-site-more { display: inline-flex; align-items: center; gap: 4px; color: var(--cream); font-size: 14px; font-weight: 600; text-decoration: none; }
.ti-site-more:hover { text-decoration: underline; }

/* game tiles */
.ti-site-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.ti-site-game { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-200); border: 1px solid var(--line-100); color: var(--ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.ti-site-game:hover { transform: translateY(-3px); border-color: var(--cream); }
.ti-site-game:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.ti-site-game-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--surface-000) var(--tex, none) center / cover; background-size: cover; background-position: center; }
.ti-site-game-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(31,19,29,.8)); }
.ti-site-crest { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; }
.ti-site-game-mark { position: absolute; z-index: 1; left: 14px; bottom: -18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-300); border: 1.5px solid var(--cream); color: var(--cream); }
.ti-site-game-body { display: flex; flex-direction: column; gap: 4px; padding: 26px 16px 16px; flex: 1; }
.ti-site-game-genre { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.ti-site-game-name { font: 400 22px/27px var(--font-serif); color: var(--cream); }
.ti-site-game-pitch { font-size: 14px; line-height: 20px; color: var(--ink); opacity: .85; flex: 1; }
.ti-site-game-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13px; font-weight: 700; color: #f2c66d; }

/* factions row */
.ti-site-facrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ti-site-facpill { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: var(--radius-md); background: var(--surface-200); border: 1px solid var(--line-100); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.ti-site-facpill:hover { border-color: var(--cream); }

/* lore cards */
.ti-site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ti-site-lc { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--card-face); color: var(--card-ink); text-decoration: none; box-shadow: var(--shadow-card); transition: transform .15s ease; }
.ti-site-lc:hover { transform: translateY(-3px); }
.ti-site-lc:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.ti-site-lc-img { aspect-ratio: 4 / 3; background: var(--card-ink) center 18% / cover no-repeat; }
.ti-site-lc-crest { display: grid; place-items: center; aspect-ratio: 4 / 3; background-image: radial-gradient(circle at 50% 40%, rgba(255,255,255,.18), transparent 65%); }
.ti-site-lc-cls { background: var(--surface-200); color: var(--cream); }
.ti-site-lc-cls img { width: 72px; height: 72px; }
.ti-site-lc-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.ti-site-lc-kind { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.ti-site-lc-name { font: 400 21px/26px var(--font-serif); }
.ti-site-lc-sum { font-size: 13.5px; line-height: 19px; }
.ti-site-todo { font-style: italic; color: inherit; opacity: .6; font-size: 13.5px; }
.ti-site-todo-block { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid rgba(43,26,46,.25); }

/* article */
.ti-site-split { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.ti-site-prose { padding: 28px 32px; }
.ti-site-prose h2 { margin: 22px 0 8px; font: 400 24px/30px var(--font-serif); }
.ti-site-prose h2:first-child { margin-top: 0; }
.ti-site-prose p, .ti-site-prose li { font-size: 16px; line-height: 26px; }
.ti-site-prose p { margin: 0 0 12px; }
.ti-site-prose a { color: #6b3f12; font-weight: 600; }
.ti-site-lead-dark { font-size: 19px !important; line-height: 30px !important; font-family: var(--font-serif); }
.ti-site-list { padding-left: 20px; }
.ti-site-info { position: sticky; top: 16px; overflow: hidden; border-radius: var(--radius-lg); background: var(--card-face); color: var(--card-ink); box-shadow: var(--shadow-card); }
.ti-site-info-media { display: grid; }
.ti-site-info-crest { display: grid; place-items: center; height: 160px; background-image: radial-gradient(circle at 50% 40%, rgba(255,255,255,.18), transparent 65%); }
.ti-site-info-crest.ti-site-lc-cls img { width: 88px; height: 88px; }
.ti-site-info-portrait { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top; }
.ti-site-info-art { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--surface-200) center / cover; color: var(--cream); }
.ti-site-info-title { margin: 0; padding: 12px 16px; font: 400 20px/24px var(--font-serif); border-bottom: 1px solid rgba(43,26,46,.15); }
.ti-site-info dl { display: grid; grid-template-columns: 96px 1fr; margin: 0; padding: 6px 16px 14px; }
.ti-site-info dt, .ti-site-info dd { padding: 8px 0; border-bottom: 1px solid rgba(43,26,46,.1); font-size: 14px; line-height: 19px; }
.ti-site-info dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.ti-site-info dd { margin: 0; }
.ti-site-swatch { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace; font-size: 13px; }
.ti-site-swatch i { width: 14px; height: 14px; border-radius: 3px; }
.ti-site-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-site-chip, .ti-site-inl { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; background: rgba(43,26,46,.08); border: 1px solid rgba(43,26,46,.2); color: var(--card-ink) !important; text-decoration: none; font-size: 13px; font-weight: 600; }
.ti-site-chip:hover, .ti-site-inl:hover { background: rgba(43,26,46,.15); }
.ti-site-inl { background: none; border: 0; padding: 0; }

/* crumbs, filter, media, footer */
.ti-site-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 13px; color: var(--ink-muted); }
.ti-site-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.ti-site-crumbs a { color: var(--ink); text-decoration: none; }
.ti-site-crumbs a:hover { text-decoration: underline; }
.ti-site-crumbs [aria-current] { color: var(--cream); font-weight: 600; }
.ti-site-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ti-site-filterq { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: var(--radius-md); background: var(--surface-200); border: 1px solid var(--line-100); color: var(--ink-muted); }
.ti-site-filterq input { width: 220px; height: 36px; border: 0; background: none; color: var(--ink); font: 500 14px var(--font-sans); outline: none; }
.ti-site-count { margin: 4px 0 14px; font-size: 13px; color: var(--ink-muted); }
.ti-site-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ti-site-shots figure { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--line-100); }
.ti-site-shots img { display: block; width: 100%; height: 220px; object-fit: cover; }
.ti-site-shots[data-kind="tcg"] img { object-fit: contain; background: var(--surface-000); }
.ti-site-empty { display: flex; align-items: center; gap: 14px; padding: 22px; border-radius: var(--radius-lg); border: 1px dashed var(--line-200); color: var(--ink-muted); }
.ti-site-empty p { margin: 0; }
.ti-site-foot { display: flex; align-items: center; gap: 16px; margin: 40px 0 0; padding: 24px 0 32px; border-top: 1px solid var(--line-100); color: var(--ink-muted); font-size: 13px; }
.ti-site-foot img { width: 40px; }
.ti-site-foot b { color: var(--ink); font: 400 18px var(--font-serif); }
.ti-site-foot p { margin: 2px 0 0; }
.ti-site-foot nav { margin-left: auto; display: flex; gap: 18px; }
.ti-site-foot a { color: var(--ink); text-decoration: none; font-weight: 600; }
.ti-site-foot a:hover { text-decoration: underline; }

/* narrow screens: the nav becomes a drawer behind a top bar */
@container site (max-width: 860px) {
  .ti-site-grid { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; }
  .ti-site-mbar { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--surface-000); border-bottom: 1px solid var(--line-100); }
  .ti-site-mbar img { width: 32px; } .ti-site-mbar b { font: 400 20px var(--font-serif); }
  .ti-site-menubtn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
  .ti-site-nav { position: absolute; top: 56px; bottom: 0; left: 0; width: min(300px, 86%); transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow-panel); }
  .ti-site-nav[data-open="true"] { transform: none; }
  .ti-site-body { padding: 20px 16px 0; }
  .ti-site-hero { flex-direction: column; align-items: flex-start; padding: 32px 16px; min-height: 0; }
  .ti-site-hero-in { flex-direction: column; align-items: flex-start; }
  .ti-site-h1 { font-size: 38px; line-height: 42px; }
  .ti-site-hero-logo { width: 140px; }
  .ti-site-split { grid-template-columns: 1fr; }
  .ti-site-info { position: static; }
  .ti-site-prose { padding: 20px; }
}
.ti-site-link > .ti-site-fmark { flex: none; }
.ti-site-brand small { font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
@container site (max-width: 860px) { .ti-site-hero-aside { display: none; } }
.ti-site-main { background: linear-gradient(rgba(48,32,45,0) 0, rgba(48,32,45,.6) 500px, var(--surface-100) 1100px), var(--tex) center top / 1400px auto no-repeat, var(--surface-100); }
.ti-site-nav { min-width: 0; width: 100%; box-sizing: border-box; overflow: hidden; }