/* ==========================================================================
   In-game UI components. Everything here is scoped to .game and driven by the
   --ui-* custom properties that js/themes.js sets on the canvas.
   ========================================================================== */

.game {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden;
  font-family: var(--ui-font-b); color: var(--ui-text); font-size: 18px; line-height: 1.3;
  -webkit-font-smoothing: antialiased; user-select: none;
  --ui-surface-bg: color-mix(in srgb, var(--ui-panel) calc(var(--ui-panel-a) * 100%), transparent);
}
.game *, .game *::before, .game *::after { box-sizing: border-box; }
:where(.game) button, :where(.game) input, :where(.game) select { font: inherit; color: inherit; }
.scene-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45)); }

.gx { position: absolute; }
.gx > .gx-inner { width: 100%; height: 100%; }
.gx.is-hidden { display: none !important; }
.ui-slot { position: relative; flex: 1; min-height: 0; }
.ui-missing { display: grid; place-items: center; height: 100%; background: repeating-linear-gradient(45deg, #400 0 10px, #600 10px 20px); color: #fff; font-size: 14px; }

/* Shared surface: panels, windows, popups, plates */
.ui-surface {
  background: var(--ui-surface-bg);
  border: var(--ui-bw) solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  backdrop-filter: blur(var(--ui-blur));
}

.ui-field-label { color: var(--ui-text); font-size: 20px; }
.ui-caption { margin-top: 6px; text-align: center; font-size: 16px; color: var(--ui-muted); white-space: nowrap; }

/* ───────── Buttons ───────── */
.ui-btn {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--ui-font-d); font-size: var(--fs, 22px); letter-spacing: .02em; line-height: 1;
  background: var(--ui-panel2); color: var(--ui-text);
  border: var(--ui-bw) solid var(--ui-border); border-radius: var(--ui-radius);
  cursor: pointer; transition: transform .08s, filter .15s, background-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap; overflow: hidden; padding: 0 .8em;
}
.ui-btn-icon { font-size: 1.1em; }
.ui-btn.v-primary { background: var(--ui-accent); color: var(--ui-accent-text); border-color: color-mix(in srgb, var(--ui-accent) 55%, #000); }
.ui-btn.v-outline { background: transparent; border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-btn.v-ghost { background: transparent; border-color: transparent; color: var(--ui-text); box-shadow: none; }
.ui-btn.v-danger { background: var(--ui-danger); color: #fff; border-color: color-mix(in srgb, var(--ui-danger) 55%, #000); }
.ui-btn.v-menu { background: transparent; border-color: transparent; box-shadow: none; justify-content: flex-start; color: var(--ui-text); padding-left: 1.2em; position: relative; }
.ui-btn.v-menu::before { content: '▸'; position: absolute; left: .2em; color: var(--ui-accent); opacity: 0; transform: translateX(-6px); transition: .15s; }
.ui-btn[disabled] { opacity: .42; cursor: not-allowed; filter: grayscale(.6); }
.playing .ui-btn:not([disabled]):hover { filter: brightness(1.14); }
.playing .ui-btn.v-ghost:hover, .playing .ui-btn.v-menu:hover { color: var(--ui-accent); filter: none; }
.playing .ui-btn.v-menu:hover::before { opacity: 1; transform: none; }
.playing .ui-btn.v-outline:hover { background: color-mix(in srgb, var(--ui-accent) 16%, transparent); }
.playing .ui-btn:not([disabled]):active { transform: translateY(2px) scale(.985); }
.ui-togglebtn.is-on { background: var(--ui-accent); color: var(--ui-accent-text); border-color: var(--ui-accent); }

.ui-iconbtn-wrap { display: flex; flex-direction: column; align-items: center; }
.ui-iconbtn {
  position: relative; width: 100%; aspect-ratio: 1; max-height: 100%; display: grid; place-items: center; cursor: pointer;
  background: var(--ui-panel2); border: var(--ui-bw) solid var(--ui-border); box-shadow: var(--ui-shadow); transition: transform .1s, filter .15s;
}
.ui-iconbtn.s-round { border-radius: 50%; }
.ui-iconbtn.s-square { border-radius: var(--ui-radius); }
.ui-iconbtn-glyph { font-size: 2.1em; line-height: 1; }
.playing .ui-iconbtn:hover { filter: brightness(1.15); transform: translateY(-2px); }
.ui-badge {
  position: absolute; top: -6px; right: -6px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  background: var(--ui-danger); color: #fff; font: 700 15px/26px var(--ui-font-b); text-align: center; border: 2px solid var(--ui-panel);
}
.ui-badge[hidden] { display: none; }

.ui-seg { display: flex; height: 100%; border: var(--ui-bw) solid var(--ui-border); border-radius: var(--ui-radius); overflow: hidden; background: var(--ui-surface-bg); }
.ui-seg-btn { flex: 1; border: 0; background: transparent; cursor: pointer; font-family: var(--ui-font-d); font-size: 19px; color: var(--ui-muted); transition: .15s; }
.ui-seg-btn + .ui-seg-btn { border-left: var(--ui-bw) solid color-mix(in srgb, var(--ui-border) 50%, transparent); }
.ui-seg-btn.is-on { background: var(--ui-accent); color: var(--ui-accent-text); }
.playing .ui-seg-btn:not(.is-on):hover { color: var(--ui-text); background: color-mix(in srgb, var(--ui-accent) 14%, transparent); }

.ui-menu { display: flex; flex-direction: column; justify-content: center; gap: .3em; height: 100%; font-family: var(--ui-font-d); font-size: var(--fs); }
.ui-menu-item {
  background: none; border: 0; cursor: pointer; padding: .15em .4em .15em 1.1em; position: relative; color: var(--ui-muted);
  text-shadow: 0 2px 6px rgba(0,0,0,.6); transition: color .12s, transform .12s; font-size: inherit; font-family: inherit;
}
.ui-menu-item::before { content: '◆'; position: absolute; left: 0; top: 50%; font-size: .5em; transform: translate(-6px, -50%); opacity: 0; color: var(--ui-accent); transition: .15s; }
.playing .ui-menu-item:hover { color: var(--ui-text); transform: translateX(6px); }
.playing .ui-menu-item:hover::before { opacity: 1; transform: translate(0, -50%); }
.ui-menu-item:first-child { color: var(--ui-text); }

.ui-keybind { display: flex; align-items: center; gap: 12px; height: 100%; font-size: 19px; text-shadow: 0 2px 6px rgba(0,0,0,.7); white-space: nowrap; }
.ui-key {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; font: 700 18px var(--ui-font-b);
  background: var(--ui-text); color: var(--ui-panel); border-radius: 6px; box-shadow: 0 4px 0 color-mix(in srgb, var(--ui-text) 45%, #000);
}
.ui-key.k-pad { border-radius: 50%; background: var(--ui-accent); color: var(--ui-accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 40%, transparent); }

/* ───────── Wrappers ───────── */
.ui-panel { display: flex; flex-direction: column; padding: var(--pad, 16px); }
.ui-panel-title { font-family: var(--ui-font-d); font-size: 24px; color: var(--ui-accent); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 55%, transparent); }
.ui-panel.pv-glass { --ui-panel-a: .45; backdrop-filter: blur(12px); }
.ui-panel.pv-inset { background: color-mix(in srgb, var(--ui-panel) 70%, #000); box-shadow: inset 0 3px 12px rgba(0,0,0,.5); }
.ui-panel.pv-outline { background: transparent; box-shadow: none; backdrop-filter: none; }
.ui-panel.pv-framed { outline: 2px solid color-mix(in srgb, var(--ui-accent) 70%, transparent); outline-offset: -9px; }
.ui-panel.pv-banner {
  border-left: 0; border-right: 0; border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--ui-surface-bg) 18%, var(--ui-surface-bg) 82%, transparent);
  box-shadow: none;
}

.ui-window { display: flex; flex-direction: column; overflow: hidden; }
.ui-win-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 16px;
  background: color-mix(in srgb, var(--ui-panel2) 85%, var(--ui-accent) 15%);
  border-bottom: var(--ui-bw) solid var(--ui-border); font-family: var(--ui-font-d); font-size: 22px;
}
.playing .ui-win-bar { cursor: grab; }
.ui-win-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-win-close {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; cursor: pointer; font-size: 16px;
  background: transparent; border: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent); border-radius: calc(var(--ui-radius) * .6);
}
.playing .ui-win-close:hover { background: var(--ui-danger); color: #fff; border-color: var(--ui-danger); }
.ui-win-body { padding: 14px; }

.ui-modal { display: flex; flex-direction: column; padding: 18px 22px 22px; }
.ui-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-modal-title { font-family: var(--ui-font-d); font-size: 34px; color: var(--ui-accent); }
.ui-modal-body { margin: 8px 0 12px; color: var(--ui-muted); font-size: 19px; line-height: 1.45; white-space: pre-line; }
.playing .gx-modal { z-index: 50; }
.ui-backdrop { position: absolute; width: 12000px; height: 12000px; background: rgba(4,4,8,.62); backdrop-filter: blur(3px); z-index: -1; }

.ui-tabs { display: flex; flex-direction: column; overflow: hidden; }
.ui-tabbar { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: var(--ui-bw) solid var(--ui-border); background: color-mix(in srgb, var(--ui-panel) 70%, #000 30%); }
.ui-tab {
  padding: 10px 22px; cursor: pointer; font-family: var(--ui-font-d); font-size: 20px; color: var(--ui-muted);
  background: transparent; border: var(--ui-bw) solid transparent; border-bottom: 0; border-radius: var(--ui-radius) var(--ui-radius) 0 0; margin-bottom: calc(var(--ui-bw) * -1);
}
.ui-tab.is-on { color: var(--ui-text); background: var(--ui-surface-bg); border-color: var(--ui-border); box-shadow: inset 0 3px 0 var(--ui-accent); }
.playing .ui-tab:not(.is-on):hover { color: var(--ui-text); }
.ui-tabpage { padding: 18px; }
.ui-tabs.ts-side { flex-direction: row; }
.ui-tabs.ts-side .ui-tabbar { flex-direction: column; padding: 12px 0 12px 12px; border-bottom: 0; border-right: var(--ui-bw) solid var(--ui-border); min-width: 170px; }
.ui-tabs.ts-side .ui-tab { text-align: left; border-radius: var(--ui-radius) 0 0 var(--ui-radius); border: var(--ui-bw) solid transparent; border-right: 0; margin: 0 calc(var(--ui-bw) * -1) 0 0; }
.ui-tabs.ts-side .ui-tab.is-on { box-shadow: inset 3px 0 0 var(--ui-accent); border-color: var(--ui-border); }

/* ───────── Display ───────── */
.ui-label { display: flex; align-items: var(--va, center); height: 100%; white-space: pre-line; line-height: 1.15; }
.ui-label.has-shadow { text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 4px 18px rgba(0,0,0,.55); }

.ui-bar-wrap { display: flex; align-items: center; gap: 8px; height: 100%; }
.ui-bar-icon { font-size: 22px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.ui-bar {
  position: relative; flex: 1; height: 100%; overflow: hidden;
  background: color-mix(in srgb, var(--ui-panel) 70%, #000); border: var(--ui-bw) solid var(--ui-border); border-radius: var(--ui-radius);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
}
.ui-bar-fill, .ui-bar-trail { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; }
.ui-bar-fill {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bar) 70%, #fff) 0%, var(--bar) 45%, color-mix(in srgb, var(--bar) 70%, #000) 100%);
  transition: width .22s ease-out;
}
.ui-bar-trail { background: #fff; opacity: .55; transition: width .6s .35s ease-in; }
.ui-bar-segs { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(100% - 3px), rgba(0,0,0,.6) 0) 0 0 / calc(100% / var(--segs)) 100%; }
.ui-bar { container-type: size; }
.ui-bar-text { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(10px, 62cqh, 20px)/1 var(--ui-font-b); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; }
.ui-bar.is-low .ui-bar-fill { animation: ui-low 0.9s ease-in-out infinite; }
@keyframes ui-low { 50% { filter: brightness(1.6); } }

.ui-counter { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 16px 0 10px; font: 700 24px var(--ui-font-b); }
.ui-counter:not(.ui-surface) { text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.ui-counter-icon { font-size: 26px; }
.ui-counter-val { display: inline-block; }

.ui-portrait-wrap { display: flex; flex-direction: column; align-items: center; height: 100%; }
.ui-portrait {
  position: relative; width: 100%; aspect-ratio: 1; max-height: 100%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, var(--ui-panel2), var(--ui-panel)); border: calc(var(--ui-bw) + 2px) solid var(--ui-accent);
  box-shadow: var(--ui-shadow), inset 0 0 0 3px color-mix(in srgb, var(--ui-panel) 70%, transparent);
}
.ui-portrait.sh-round { border-radius: 50%; }
.ui-portrait.sh-square { border-radius: var(--ui-radius); }
.ui-portrait.sh-diamond { transform: rotate(45deg) scale(.72); border-radius: var(--ui-radius); }
.ui-portrait.sh-diamond > * { transform: rotate(-45deg); }
.ui-portrait-face { font-size: 3.2em; line-height: 1; }
.ui-portrait-lvl {
  position: absolute; bottom: -4px; right: -4px; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 17px;
  display: grid; place-items: center; background: var(--ui-accent); color: var(--ui-accent-text); font: 700 17px var(--ui-font-b); border: 2px solid var(--ui-panel);
}

.ui-image { height: 100%; border-radius: var(--ui-radius); background-position: center; background-repeat: no-repeat; border: var(--ui-bw) solid var(--ui-border); }
.ui-image.is-placeholder {
  display: grid; place-items: center; color: var(--ui-muted); font-size: 18px;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ui-panel) 80%, transparent) 0 14px, color-mix(in srgb, var(--ui-panel2) 80%, transparent) 14px 28px);
  border-style: dashed;
}

.ui-minimap-wrap { display: flex; flex-direction: column; align-items: center; height: 100%; }
.ui-minimap { position: relative; width: 100%; aspect-ratio: 1; max-height: 100%; overflow: hidden; }
.ui-minimap.sh-round { border-radius: 50%; }
.ui-minimap-ground {
  position: absolute; inset: 0; opacity: .55;
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--ui-good) 60%, transparent) 0 18%, transparent 19%),
    radial-gradient(circle at 70% 65%, color-mix(in srgb, var(--ui-mana) 60%, transparent) 0 14%, transparent 15%),
    linear-gradient(color-mix(in srgb, var(--ui-border) 25%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, color-mix(in srgb, var(--ui-border) 25%, transparent) 1px, transparent 1px) 0 0 / 22px 22px;
}
.ui-ping { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--ui-text); box-shadow: 0 0 0 2px rgba(0,0,0,.5); }
.ui-ping.is-quest { background: var(--ui-accent); width: 14px; height: 14px; margin: -7px; animation: ui-ping 1.6s ease-out infinite; }
@keyframes ui-ping { 0% { box-shadow: 0 0 0 0 var(--ui-accent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.ui-minimap-player { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--ui-accent); font-size: 20px; filter: drop-shadow(0 0 3px #000); }
.ui-minimap-n { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font: 700 14px var(--ui-font-d); color: var(--ui-accent); }

.ui-compass { position: relative; height: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.ui-compass-track { position: absolute; left: 0; top: 0; bottom: 0; transition: transform .25s; }
.ui-compass-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); font: 600 15px var(--ui-font-d); color: var(--ui-muted); }
.ui-compass-mark:empty { width: 2px; height: 10px; background: var(--ui-muted); opacity: .6; }
.ui-compass-mark.is-major { color: var(--ui-text); font-size: 18px; }
.ui-compass-needle { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--ui-accent); transform: translateX(-1px); }

.ui-quest { height: 100%; padding: 12px 14px; text-shadow: 0 2px 4px rgba(0,0,0,.85); }
.ui-quest-title { font-family: var(--ui-font-d); color: var(--ui-accent); font-size: 21px; margin-bottom: 6px; }
.ui-quest ul { list-style: none; margin: 0; padding: 0; }
.ui-quest li { position: relative; padding-left: 22px; margin: 4px 0; font-size: 17px; }
.ui-quest li::before { content: ''; position: absolute; left: 2px; top: .38em; width: 10px; height: 10px; border: 2px solid var(--ui-text); transform: rotate(45deg); }
.ui-quest li.is-done { color: var(--ui-muted); text-decoration: line-through; }
.ui-quest li.is-done::before { background: var(--ui-good); border-color: var(--ui-good); }

.ui-stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; align-content: start; height: 100%; font-size: 19px; }
.ui-stats dt { color: var(--ui-muted); }
.ui-stats dd { margin: 0; text-align: right; font-weight: 700; display: inline-block; }

.ui-crosshair { position: relative; height: 100%; filter: drop-shadow(0 0 2px #000); }
.ui-crosshair i { position: absolute; background: var(--ui-text); }
.ch-cross i:nth-child(1), .ch-cross i:nth-child(2) { left: 50%; width: 3px; height: 32%; margin-left: -1.5px; }
.ch-cross i:nth-child(1) { top: 0; } .ch-cross i:nth-child(2) { bottom: 0; }
.ch-cross i:nth-child(3), .ch-cross i:nth-child(4) { top: 50%; height: 3px; width: 32%; margin-top: -1.5px; }
.ch-cross i:nth-child(3) { left: 0; } .ch-cross i:nth-child(4) { right: 0; }
.ch-dot i:first-child { left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; }
.ch-dot i + i, .ch-circle i + i, .ch-chevron i + i + i { display: none; }
.ch-circle i:first-child { inset: 10%; background: none; border: 3px solid var(--ui-text); border-radius: 50%; }
.ch-chevron i:nth-child(1), .ch-chevron i:nth-child(2) { top: 40%; width: 36%; height: 3px; }
.ch-chevron i:nth-child(1) { left: 16%; transform: rotate(35deg); transform-origin: right center; }
.ch-chevron i:nth-child(2) { right: 16%; transform: rotate(-35deg); transform-origin: left center; }

.ui-divider { display: flex; align-items: center; gap: 12px; height: 100%; color: var(--ui-accent); }
.ui-divider span { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--ui-accent)); }
.ui-divider span:last-child { background: linear-gradient(90deg, var(--ui-accent), transparent); }

/* ───────── Inputs ───────── */
.ui-slider { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 3ch; align-items: center; gap: 16px; height: 100%; }
.ui-slider-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; margin: 0; --p: 50%; }
.ui-range::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; border: 1px solid var(--ui-border); background: linear-gradient(90deg, var(--ui-accent) var(--p), color-mix(in srgb, var(--ui-panel) 60%, #000) var(--p)); }
.ui-range::-moz-range-track { height: 10px; border-radius: 5px; border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-panel) 60%, #000); }
.ui-range::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--ui-accent); }
.ui-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: var(--ui-text); border: 3px solid var(--ui-accent); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.ui-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ui-text); border: 3px solid var(--ui-accent); }

.ui-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; cursor: pointer; }
.ui-switch { position: relative; width: 62px; height: 32px; flex: none; border-radius: 16px; background: color-mix(in srgb, var(--ui-panel) 55%, #000); border: var(--ui-bw) solid var(--ui-border); transition: background .18s; }
.ui-switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ui-muted); transition: transform .18s, background .18s; }
.is-on > .ui-switch { background: var(--ui-accent); }
.is-on > .ui-switch i { transform: translateX(30px); background: var(--ui-accent-text); }

.ui-selector { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 16px; height: 100%; }
.ui-selector > :only-child { grid-column: 1 / -1; }
.ui-cycler { display: flex; align-items: center; height: 100%; max-height: 52px; border: var(--ui-bw) solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface-bg); }
.ui-cycler-arrow { width: 44px; height: 100%; flex: none; border: 0; background: transparent; color: var(--ui-accent); cursor: pointer; font-size: 16px; }
.playing .ui-cycler-arrow:hover { background: color-mix(in srgb, var(--ui-accent) 18%, transparent); }
.ui-cycler-val { flex: 1; text-align: center; font-family: var(--ui-font-d); font-size: 20px; }
.ui-select, .ui-input {
  width: 100%; height: 100%; max-height: 52px; padding: 0 14px; font: 20px var(--ui-font-b); color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-panel) 70%, #000); border: var(--ui-bw) solid var(--ui-border); border-radius: var(--ui-radius);
}
.ui-select option { background: var(--ui-panel); color: var(--ui-text); }
.ui-input::placeholder { color: var(--ui-muted); }
.ui-input:focus, .ui-select:focus { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.ui-textfield { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.ui-textfield .ui-field-label { font-size: 16px; color: var(--ui-muted); }
.ui-textfield .ui-input { flex: 1; }

.ui-stepper { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.ui-stepper-ctl { display: flex; align-items: center; gap: 10px; }
.ui-step-btn { width: 38px; height: 38px; border-radius: var(--ui-radius); background: var(--ui-panel2); border: var(--ui-bw) solid var(--ui-border); cursor: pointer; font-size: 22px; line-height: 1; }
.playing .ui-step-btn:hover { background: var(--ui-accent); color: var(--ui-accent-text); }
.ui-step-val { min-width: 2.4ch; text-align: center; font: 700 22px var(--ui-font-b); font-variant-numeric: tabular-nums; }

.ui-colorpick { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; }
.ui-colorpick .ui-field-label { font-size: 16px; color: var(--ui-muted); }
.ui-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.ui-swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ui-panel); box-shadow: 0 0 0 2px var(--ui-border); cursor: pointer; transition: transform .12s; }
.ui-swatch.is-on { box-shadow: 0 0 0 3px var(--ui-text); transform: scale(1.12); }
.playing .ui-swatch:hover { transform: scale(1.12); }
.ui-colorinput { width: 64px; height: 36px; padding: 0; border: var(--ui-bw) solid var(--ui-border); border-radius: var(--ui-radius); background: none; cursor: pointer; }

/* ───────── Game widgets ───────── */
.ui-inv { display: grid; gap: 6px; height: 100%; }
.ui-slot-cell {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; cursor: pointer; overflow: hidden;
  background: color-mix(in srgb, var(--ui-panel) 75%, #000); border: var(--ui-bw) solid color-mix(in srgb, var(--ui-border) 65%, transparent);
  border-radius: calc(var(--ui-radius) * .7); box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
}
.ui-slot-cell.is-empty { opacity: .65; }
.ui-slot-glyph { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.ui-slot-count { position: absolute; right: 5px; bottom: 2px; font: 700 15px var(--ui-font-b); text-shadow: 0 1px 2px #000; }
.ui-slot-cell.r-uncommon { border-color: #4caf50; } .ui-slot-cell.r-rare { border-color: #3f8cff; }
.ui-slot-cell.r-epic { border-color: #b05cff; } .ui-slot-cell.r-legendary { border-color: #ff9f1a; box-shadow: inset 0 0 14px rgba(255,159,26,.45); }
.ui-slot-cell.is-sel { outline: 3px solid var(--ui-accent); outline-offset: 1px; }
.playing .ui-slot-cell:not(.is-empty):hover { filter: brightness(1.25); }

.ui-hotbar { display: flex; gap: 8px; height: 100%; }
.ui-hot { flex: 1; height: 100%; }
.ui-hot-key { position: absolute; left: 5px; top: 3px; font: 700 14px var(--ui-font-b); color: var(--ui-muted); }
.ui-cd { position: absolute; inset: 0; pointer-events: none; background: conic-gradient(rgba(0,0,0,.7) var(--cd, 0%), transparent 0); opacity: 0; }
@property --cd { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes ui-cd { from { --cd: 100%; opacity: 1; } 99% { opacity: 1; } to { --cd: 0%; opacity: 0; } }

.ui-dialogue { display: flex; gap: 20px; padding: 18px 22px; }
.ui-dlg-face {
  flex: none; width: 130px; height: 130px; display: grid; place-items: center; font-size: 76px; align-self: center;
  background: radial-gradient(circle at 50% 35%, var(--ui-panel2), var(--ui-panel)); border: 2px solid var(--ui-accent); border-radius: var(--ui-radius);
}
.ui-dlg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-dlg-speaker { font-family: var(--ui-font-d); color: var(--ui-accent); font-size: 24px; }
.ui-dlg-text { margin: 6px 0 10px; font-size: 21px; line-height: 1.4; min-height: 2.8em; }
.ui-dlg-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; transition: opacity .2s; }
.ui-dlg-choices.is-waiting { opacity: 0; pointer-events: none; }
.ui-dlg-choice { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; font-size: 18px; cursor: pointer; background: var(--ui-panel2); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.ui-dlg-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: var(--ui-accent); color: var(--ui-accent-text); font-size: 14px; font-weight: 700; }
.playing .ui-dlg-choice:hover { border-color: var(--ui-accent); color: var(--ui-accent); }

.ui-timer { display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; font: 700 26px var(--ui-font-d); font-variant-numeric: tabular-nums; }
.ui-timer.is-low { color: var(--ui-danger); animation: ui-low .9s infinite; }

.ui-loader { display: flex; align-items: center; gap: 14px; height: 100%; font-size: 20px; text-shadow: 0 2px 4px rgba(0,0,0,.7); }
.ui-spin { width: 36px; height: 36px; flex: none; display: grid; place-items: center; }
.sp-ring { border: 4px solid color-mix(in srgb, var(--ui-accent) 25%, transparent); border-top-color: var(--ui-accent); border-radius: 50%; animation: ui-rot .9s linear infinite; }
.sp-rune { color: var(--ui-accent); font-size: 32px; animation: ui-rot 3s linear infinite; }
.sp-dots { display: flex; gap: 5px; }
.sp-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); animation: ui-dot 1s infinite; }
.sp-dots i:nth-child(2) { animation-delay: .15s; } .sp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ui-rot { to { transform: rotate(360deg); } }
@keyframes ui-dot { 50% { transform: translateY(-8px); opacity: .5; } }

/* ───────── Toasts & tooltip ───────── */
.ui-toasts { position: absolute; z-index: 9000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; width: 440px; }
.ui-toasts.pos-top-right { top: 28px; right: 28px; align-items: flex-end; }
.ui-toasts.pos-top-center { top: 28px; left: 50%; transform: translateX(-50%); align-items: center; }
.ui-toasts.pos-bottom-right { bottom: 28px; right: 28px; flex-direction: column-reverse; align-items: flex-end; }
.ui-toasts.pos-bottom-center { bottom: 120px; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; align-items: center; }
.ui-toast { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; font-size: 19px; animation: ui-toast-in .35s cubic-bezier(.2,1.3,.4,1); max-width: 100%; }
.ui-toast.is-leaving { animation: ui-toast-out .35s forwards; }
.ui-toast-icon { font-size: 22px; }
.ui-toast.t-success .ui-toast-icon { color: var(--ui-good); }
.ui-toast.t-warning .ui-toast-icon { color: var(--ui-danger); }
.ui-toast.t-achievement { border-color: var(--ui-accent); padding: 14px 22px 14px 16px; }
.ui-toast.t-achievement .ui-toast-icon { font-size: 34px; }
.ui-toast-kicker { font-size: 14px; color: var(--ui-accent); }
.ui-toast-text { font-family: var(--ui-font-d); }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateX(30px); } }

.ui-tip {
  position: absolute; z-index: 9500; pointer-events: none; max-width: 340px; padding: 8px 12px; font-size: 17px;
  background: color-mix(in srgb, var(--ui-panel) 96%, #000); color: var(--ui-text); border: 1px solid var(--ui-accent); border-radius: calc(var(--ui-radius) * .6);
  box-shadow: 0 6px 18px rgba(0,0,0,.5); white-space: pre-line;
}
.ui-tip[hidden] { display: none; }

/* ───────── Motion ───────── */
.ui-pop { animation: ui-pop .3s ease-out; }
@keyframes ui-pop { 40% { transform: scale(1.25); } }
.ui-shake { animation: ui-shake .3s; }
@keyframes ui-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.anim-pop > .gx-inner { animation: ui-enter-pop .26s cubic-bezier(.2,1.4,.4,1); }
.anim-slide > .gx-inner { animation: ui-enter-slide .3s ease-out; }
.anim-fade { animation: ui-enter-fade .25s ease-out; }
.anim-pop > .ui-backdrop, .anim-slide > .ui-backdrop { animation: ui-enter-fade .25s; }
@keyframes ui-enter-pop { from { opacity: 0; transform: scale(.88); } }
@keyframes ui-enter-slide { from { opacity: 0; transform: translateY(40px); } }
@keyframes ui-enter-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .game *, .game *::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Theme flavours — decoration that variables alone can't express
   ========================================================================== */

/* Gilded Keep: double frame, embossed gold primary buttons */
[data-theme="fantasy"] .ui-surface:not(.ui-counter):not(.ui-quest) { outline: 1px solid color-mix(in srgb, var(--ui-accent) 45%, transparent); outline-offset: -7px; }
[data-theme="fantasy"] .ui-btn.v-primary { background: linear-gradient(180deg, #f2d27a, var(--ui-accent) 48%, #9c7424); text-shadow: 0 1px 0 rgba(255,240,200,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(0,0,0,.5); }
[data-theme="fantasy"] .ui-btn.v-secondary { background: linear-gradient(180deg, #4a3624, var(--ui-panel2)); }
[data-theme="fantasy"] .ui-modal-title, [data-theme="fantasy"] .ui-panel-title { letter-spacing: .04em; }

/* Orbital: cut corners and scanlines */
[data-theme="scifi"] .ui-surface, [data-theme="scifi"] .ui-btn, [data-theme="scifi"] .ui-slot-cell, [data-theme="scifi"] .ui-cycler, [data-theme="scifi"] .ui-seg {
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
[data-theme="scifi"] .ui-surface { background-image: repeating-linear-gradient(0deg, rgba(63,208,255,.05) 0 1px, transparent 1px 4px); }
[data-theme="scifi"] .ui-btn.v-primary { box-shadow: 0 0 18px color-mix(in srgb, var(--ui-accent) 60%, transparent); }
[data-theme="scifi"] .ui-btn, [data-theme="scifi"] .ui-tab, [data-theme="scifi"] .ui-modal-title, [data-theme="scifi"] .ui-win-title { text-transform: uppercase; letter-spacing: .08em; }
[data-theme="scifi"] .ui-bar-fill { background: var(--bar); box-shadow: 0 0 12px var(--bar); }
[data-theme="scifi"] .ui-portrait, [data-theme="scifi"] .ui-minimap.sh-round { clip-path: none; }

/* Meadow: chunky offset shadows, squishy presses */
[data-theme="cozy"] .ui-btn, [data-theme="cozy"] .ui-iconbtn, [data-theme="cozy"] .ui-step-btn { box-shadow: 0 5px 0 var(--ui-border); }
[data-theme="cozy"] .playing .ui-btn:active, .playing[data-theme="cozy"] .ui-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ui-border); }
[data-theme="cozy"] .ui-bar { border-radius: 99px; }
[data-theme="cozy"] .ui-label.has-shadow { text-shadow: 0 2px 0 rgba(255,255,255,.8), 0 0 22px rgba(255,246,227,.85); }
[data-theme="cozy"] .ui-quest, [data-theme="cozy"] .ui-keybind, [data-theme="cozy"] .ui-counter:not(.ui-surface), [data-theme="cozy"] .ui-loader, [data-theme="cozy"] .ui-menu-item { text-shadow: 0 2px 0 rgba(255,255,255,.75); }

/* 8-Bit: stepped bevels, no smoothing, chunky everything */
[data-theme="pixel"] { -webkit-font-smoothing: none; }
[data-theme="pixel"] .ui-surface, [data-theme="pixel"] .ui-btn, [data-theme="pixel"] .ui-slot-cell, [data-theme="pixel"] .ui-iconbtn {
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.35), inset 4px 4px 0 rgba(255,255,255,.14), 6px 6px 0 rgba(0,0,0,.55);
}
[data-theme="pixel"] .ui-iconbtn.s-round, [data-theme="pixel"] .ui-portrait.sh-round, [data-theme="pixel"] .ui-minimap.sh-round,
[data-theme="pixel"] .ui-swatch, [data-theme="pixel"] .ui-switch, [data-theme="pixel"] .ui-switch i, [data-theme="pixel"] .ui-badge { border-radius: 0; }
[data-theme="pixel"] .ui-bar-fill { background: var(--bar); box-shadow: inset 0 4px 0 rgba(255,255,255,.3); }

/* Hex Academy: candle-glow on the important things */
[data-theme="hex"] .ui-surface { background-image: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--ui-border) 30%, transparent), transparent 60%); }
[data-theme="hex"] .ui-btn.v-primary { box-shadow: 0 0 22px color-mix(in srgb, var(--ui-accent) 55%, transparent); }
[data-theme="hex"] .ui-modal-title, [data-theme="hex"] .ui-panel-title, [data-theme="hex"] .ui-quest-title { text-shadow: 0 0 14px color-mix(in srgb, var(--ui-accent) 70%, transparent); }
[data-theme="hex"] .ui-label.has-shadow { text-shadow: 0 0 22px color-mix(in srgb, var(--ui-border) 90%, transparent), 0 3px 0 rgba(0,0,0,.6); }
[data-theme="hex"] .ui-btn, [data-theme="hex"] .ui-tab, [data-theme="hex"] .ui-menu { font-size: calc(var(--fs, 22px) * 1.12); }

/* Clean glass: lighter weight, airy */
[data-theme="clean"] .ui-btn { font-weight: 500; letter-spacing: .01em; }
[data-theme="clean"] .ui-btn.v-secondary { background: rgba(255,255,255,.08); }
[data-theme="clean"] .ui-modal-title { color: var(--ui-text); font-weight: 600; }
[data-theme="clean"] .ui-bar { border-width: 0; background: rgba(255,255,255,.12); box-shadow: none; }
[data-theme="clean"] .ui-bar-fill { background: var(--bar); }