/* =========================================================================
   ESSENCE GAMES — Base (v0.8.0, DN-12)
   Framework-free: plain HTML gets a finished look from two imports.

     <link rel="stylesheet" href="https://ds.essence.games/v0.8.0/styles/glass/style.css">
     <link rel="stylesheet" href="https://ds.essence.games/v0.8.0/styles/base.css">

   A style (styles/<name>/style.css) fills the --eg-* colour, font and radius
   tokens; this file supplies the shared scale and draws every element and
   primitive from those tokens only. Element rules are wrapped in :where() so
   they carry zero specificity: any class the app writes wins. Rules:
   docs/styles.md.
   ========================================================================= */

:root {
  /* Spacing */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-8: 16px;
  --sp-10: 20px;
  --sp-12: 24px;
  --sp-15: 30px;
  --sp-20: 40px;

  /* Type scale */
  --fz-display: 48px;
  --fz-h1: 42px;
  --fz-h2: 36px;
  --fz-h3: 28px;
  --fz-h4: 22px;
  --fz-h5: 18px;
  --fz-btn: 18px;
  --fz-btn-default: 16px;
  --fz-btn-small: 15px;
  --fz-body: 15px;
  --fz-caption: 13px;
  --fz-version: 12px;
  --fz-hint: 11px;
  --fz-timer-safe: 18px;
  --fz-timer-warn: 22px;
  --fz-timer-danger: 28px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-strong: 600;
  --fw-bold: 700;

  /* Radii: the style sets the two that carry its character. */
  --r-sm: 4px;
  --r-md: var(--eg-radius);
  --r-lg: var(--eg-radius-lg);
  --r-pill: 999px;

  /* The touch floor (MOBILE_INTENT section 4). */
  --eg-touch: 44px;
}

/* ---- Elements ----------------------------------------------------------- */

:where(*, *::before, *::after) {
  box-sizing: border-box;
}
:where(html) {
  background: var(--eg-page-bg);
  background-color: var(--eg-bg);
  color: var(--eg-text);
  font-family: var(--eg-font-body);
  font-size: var(--fz-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
:where(body) {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
}
:where(h1, h2, h3, h4, h5) {
  font-family: var(--eg-font-display);
  color: var(--eg-text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
}
:where(h1) { font-size: clamp(28px, 7vw, var(--fz-h1)); }
:where(h2) { font-size: clamp(22px, 5vw, var(--fz-h3)); }
:where(h3) { font-size: var(--fz-h4); }
:where(h4, h5) { font-size: var(--fz-h5); font-family: var(--eg-font-body); font-weight: var(--fw-strong); }
:where(p) { margin: 0 0 var(--sp-4); text-wrap: pretty; }
:where(a) { color: var(--eg-accent); text-underline-offset: 0.15em; }
:where(a:hover) { color: var(--eg-accent-2); }
:where(hr) { border: 0; border-top: 1px solid var(--eg-border); margin: var(--sp-8) 0; }
:where(code, kbd, samp, pre) { font-family: var(--eg-font-mono); font-size: 0.92em; }
:where(pre) {
  background: var(--eg-sunken);
  border: 1px solid var(--eg-border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
:where(kbd) {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--eg-sunken);
  border: 1px solid var(--eg-border-strong);
  color: var(--eg-text-strong);
  font-size: var(--fz-caption);
}
:where(table) { border-collapse: collapse; width: 100%; }
:where(th, td) { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--eg-border); }
:where(th) { color: var(--eg-text-strong); font-weight: var(--fw-strong); }
:where(img, svg, video, canvas) { max-width: 100%; }
:where(summary) { cursor: pointer; }
:where(audio) { width: 100%; }

/* Focus is always visible, and never borrows the selected look (owner 2026-09-20). */
:where(:focus-visible) {
  outline: 2px solid var(--eg-accent);
  outline-offset: 2px;
}

/* ---- Controls ------------------------------------------------------------
   A bare <button> / <select> / <input> / <textarea> is already styled; the
   .eg-btn and .eg-input classes are the same look at class specificity, for
   the Svelte components and for apps that need to override around them. */

:where(button, input[type='button'], input[type='submit'], input[type='reset']),
.eg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 36px;
  padding: var(--sp-3) var(--sp-8);
  border-radius: var(--r-md);
  border: 1px solid var(--eg-border);
  background: var(--eg-surface-2);
  color: var(--eg-text);
  font: var(--fw-medium) var(--fz-btn-default) / 1.2 var(--eg-font-body);
  cursor: pointer;
  transition: background 80ms linear, border-color 80ms linear, transform 80ms linear;
  -webkit-tap-highlight-color: transparent;
}
.eg-btn {
  min-height: var(--eg-touch);
  min-width: 160px;
  font-weight: var(--fw-strong);
}
:where(button, input[type='button'], input[type='submit'], input[type='reset']):where(:hover:not(:disabled)),
.eg-btn:hover:not(:disabled) {
  background: var(--eg-hover);
}
:where(button, input[type='button'], input[type='submit'], input[type='reset']):where(:active:not(:disabled)),
.eg-btn:active:not(:disabled) {
  background: var(--eg-active);
  transform: translateY(1px);
}
:where(button, input[type='button'], input[type='submit'], input[type='reset']):where(:disabled),
.eg-btn:disabled,
.eg-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Variants. Primary = the one forward action on a screen. */
.eg-btn--primary {
  background: var(--eg-accent-fill);
  border-color: transparent;
  color: var(--eg-on-accent);
  font-size: var(--fz-btn);
}
.eg-btn--primary:hover:not(:disabled),
.eg-btn--primary:active:not(:disabled) {
  background: var(--eg-accent-fill);
  filter: brightness(1.1);
}
.eg-btn--small {
  min-height: 36px;
  min-width: 0;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fz-btn-small);
  font-weight: var(--fw-regular);
}
.eg-btn--ghost {
  background: transparent;
}
/* Selected beats every interaction state and says so explicitly: a tapped
   button keeps :hover on touch devices, which used to repaint it unselected
   (owner 2026-09-20). */
.eg-btn--toggle-on,
.eg-btn--toggle-on:hover:not(:disabled),
.eg-btn--toggle-on:active:not(:disabled),
.eg-btn--toggle-on:focus-visible {
  background: var(--eg-accent-fill);
  border-color: var(--eg-accent-2);
  color: var(--eg-on-accent);
}
.eg-btn--destructive,
.eg-btn--danger,
.eg-btn--destructive:hover:not(:disabled),
.eg-btn--danger:hover:not(:disabled) {
  background: var(--eg-danger-fill);
  border-color: transparent;
  color: var(--eg-on-danger);
}
.eg-btn--destructive:hover:not(:disabled),
.eg-btn--danger:hover:not(:disabled) {
  filter: brightness(1.12);
}

:where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset']), select, textarea),
.eg-input {
  min-height: 36px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--eg-border);
  background: var(--eg-sunken);
  color: var(--eg-text);
  font: var(--fw-regular) var(--fz-body) / 1.3 var(--eg-font-body);
  max-width: 100%;
}
:where(select) { cursor: pointer; }
:where(select option) { background: var(--eg-bg); color: var(--eg-text); }
:where(textarea) { width: 100%; resize: vertical; }
:where(input, select, textarea):where(:focus-visible),
.eg-input:focus-visible {
  outline: none;
  border-color: var(--eg-accent);
  box-shadow: 0 0 0 1px var(--eg-accent);
}
:where(input, textarea)::placeholder,
.eg-input::placeholder {
  color: var(--eg-text-muted);
}
:where(input, select, textarea):where(:disabled) { opacity: 0.5; cursor: not-allowed; }
:where(input[type='checkbox'], input[type='radio'], input[type='range'], progress) {
  accent-color: var(--eg-accent-fill);
}

/* Touch floor: on a coarse pointer every control is at least 44 px tall. */
@media (pointer: coarse) {
  :where(button, select, input:not([type='checkbox'], [type='radio'], [type='range']), textarea),
  .eg-btn--small,
  .eg-input {
    min-height: var(--eg-touch);
  }
}

/* ---- Text helpers ------------------------------------------------------- */

.muted { color: var(--eg-text-muted); }
.heading { color: var(--eg-text-strong); }
.eg-caption { font-size: var(--fz-caption); color: var(--eg-text-muted); }
.eg-mono { font-family: var(--eg-font-mono); }
.eg-good { color: var(--eg-success); }
.eg-warn { color: var(--eg-warn); }
.eg-bad { color: var(--eg-danger); }
.eg-info { color: var(--eg-info); }

/* ---- Layout primitives -------------------------------------------------- */

/* The page column. Content first: 1100px reads, wider wastes the eye. */
.eg-page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-8) var(--sp-20);
}
.eg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
}
.eg-row--between { justify-content: space-between; }
.eg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.eg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-5);
}
.eg-grow { flex: 1 1 0; min-width: 0; }

/* A card / section surface. Glass styles blur what is behind it. */
.eg-panel {
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: var(--r-lg);
  padding: var(--sp-10);
  box-shadow: none;
  backdrop-filter: blur(var(--eg-blur));
  -webkit-backdrop-filter: blur(var(--eg-blur));
  min-width: 0;
}
.eg-panel--sunken {
  background: var(--eg-sunken);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.eg-panel--raised { box-shadow: var(--eg-shadow); }

/* Header bar: title on the left, status on the right. */
.eg-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}
.eg-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font: var(--fw-bold) var(--fz-h5) / var(--lh-tight) var(--eg-font-display);
  color: var(--eg-text-strong);
}

/* Label above or beside a control. */
.eg-field {
  display: inline-flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fz-caption);
  color: var(--eg-text-muted);
  min-width: 0;
}
.eg-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.eg-field > :where(input, select, textarea) { color: var(--eg-text); font-size: var(--fz-body); }

/* ---- Small primitives --------------------------------------------------- */

/* Chip: a removable or selectable item in a row. */
.eg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--eg-border);
  background: var(--eg-sunken);
  font-size: var(--fz-caption);
  color: var(--eg-text);
  max-width: 100%;
}
.eg-chip > button {
  min-height: 0;
  padding: 0 var(--sp-2);
  border: none;
  background: none;
  color: var(--eg-text-muted);
  font-size: 1em;
}
.eg-chip > button:hover { color: var(--eg-danger); background: none; }

/* Tag: a short outlined label that carries meaning in its colour. Set
   `--tag` to any colour for a custom category (a tier, a faction, a suit). */
.eg-tag {
  --tag: var(--eg-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 1px var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  color: var(--tag);
  font-size: var(--fz-hint);
  font-weight: var(--fw-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.eg-tag--accent { --tag: var(--eg-accent); }
.eg-tag--good { --tag: var(--eg-success); }
.eg-tag--warn { --tag: var(--eg-warn); }
.eg-tag--bad { --tag: var(--eg-danger); }
.eg-tag--info { --tag: var(--eg-info); }
.eg-tag--solid {
  background: var(--tag);
  border-color: var(--tag);
  color: var(--eg-bg);
}

/* Pill: a status readout (connection, mode, version). */
.eg-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--eg-border);
  background: var(--eg-surface);
  color: var(--eg-text-muted);
  font-size: var(--fz-caption);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Segmented tabs. The selected tab carries aria-selected="true" (or .is-on). */
.eg-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--sp-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--eg-border);
  background: var(--eg-surface);
  max-width: 100%;
  align-self: flex-start;
}
.eg-tabs > button {
  min-height: 32px;
  padding: var(--sp-3) var(--sp-10);
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--eg-text-muted);
}
.eg-tabs > button:hover:not(:disabled) { background: var(--eg-hover); color: var(--eg-text); }
.eg-tabs > button[aria-selected='true'],
.eg-tabs > button.is-on,
.eg-tabs > button[aria-selected='true']:hover,
.eg-tabs > button.is-on:hover {
  background: var(--eg-accent-fill);
  color: var(--eg-on-accent);
}

/* One status line under a control: idle, live, ok, warn, error. */
.eg-status {
  min-height: 1.5em;
  font-size: var(--fz-caption);
  color: var(--eg-text-muted);
}
.eg-status--live { color: var(--eg-info); }
.eg-status--ok { color: var(--eg-success); }
.eg-status--warn { color: var(--eg-warn); }
.eg-status--error { color: var(--eg-danger); }

/* Level meter. Set the fill width inline (style="width: 40%") or via --level. */
.eg-meter {
  position: relative;
  width: min(260px, 100%);
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--eg-sunken);
  border: 1px solid var(--eg-border);
  overflow: hidden;
}
.eg-meter > .eg-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--level, 0%);
  background: var(--eg-accent-fill);
  transition: width 60ms linear;
}
.eg-meter > .eg-meter__mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--eg-warn);
}

/* File drop zone (wrap a hidden <input type="file">). .is-over while dragging. */
.eg-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 90px;
  padding: var(--sp-8);
  border: 2px dashed var(--eg-border-strong);
  border-radius: var(--r-lg);
  color: var(--eg-text-muted);
  text-align: center;
  cursor: pointer;
}
.eg-drop.is-over { border-color: var(--eg-accent); color: var(--eg-text); }
.eg-drop > input[type='file'] { display: none; }

/* Empty state inside a list or grid. */
.eg-empty {
  color: var(--eg-text-muted);
  font-size: var(--fz-caption);
  font-style: italic;
}

/* Popover panel for dropdowns, pickers and menus anchored to a control. */
.eg-popover {
  position: absolute;
  z-index: 40;
  min-width: min(320px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--eg-border-strong);
  background: var(--eg-bg);
  box-shadow: var(--eg-shadow);
}

/* Version stamp: every PWA shows its version (standing rule). */
.eg-version {
  color: var(--eg-text-muted);
  font-family: var(--eg-font-mono);
  font-size: var(--fz-version);
}

:where([hidden]) { display: none !important; }