/**
 * Arka MMO IDLE Theme — design tokens canónicos (DOM / shell).
 *
 * Paralelo Phaser: src/ui/Theme.ts
 * Tipografía: Bitmini (display/mono) + Montserrat (UI lectura).
 * Paleta 5: --a-principal --a-secundario --a-teal --a-cocoa --a-slate.
 * CSS de panel (/css/ui/*.css) = layout, no paleta nueva.
 */

@font-face {
  font-family: 'Bitmini';
  src: url('/assets/fonts/Bitmini.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GameBitmini';
  src: url('/assets/fonts/Bitmini.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --a-brand-name: 'Arka MMO IDLE';

  /* Tipografía */
  --a-font-display: Bitmini, GameBitmini, 'Courier New', monospace;
  --a-font-ui: Montserrat, 'Segoe UI', Tahoma, sans-serif;
  --a-font-mono: Bitmini, GameBitmini, 'Courier New', monospace;
  --a-ui-scale: 1;
  --a-title-tracking: 0.04em;
  --a-body-lh: 1.45;

  /* Paleta 5 — ver Theme.ts */
  --a-principal: #3DD9C0;
  --a-secundario: #D9693D;
  --a-teal: #51998D;
  --a-cocoa: #845F51;
  --a-slate: #465956;
  --a-white: #F5F7F6;
  --a-black: #0E1010;

  --a-bg: #161c1b;
  --a-panel: #465956;
  --a-deep: #2a3534;
  --a-void: #161c1b;
  --a-edge: #0E1010;
  --a-ink: #F5F7F6;
  --a-muted: #51998D;
  --a-accent: #D9693D;
  --a-accent-hi: #e08a62;
  --a-secondary: #3DD9C0;
  --a-frame: #3DD9C0;
  --a-frame-dim: #51998D;
  --a-steel: #465956;
  --a-success: #3DD9C0;
  --a-warning: #D9693D;
  --a-danger: #845F51;

  /* Chrome pixel */
  --a-radius: 0px;
  --a-border-w: 2px;
  --a-pixel-shadow: 3px 3px 0 #0E1010;
  --a-panel-alpha: 0.94;

  /* Scrollbar */
  --a-scroll-size: 8px;
  --a-scroll-track: transparent;
  --a-scroll-thumb: #32403e;
  --a-scroll-thumb-hover: #3d4f4c;
  --a-scroll-thumb-border: var(--a-edge);

  /* Aliases cortos */
  --bg: var(--a-bg);
  --panel: var(--a-panel);
  --accent: var(--a-accent);
  --text: var(--a-ink);
  --muted: var(--a-muted);
}

.a-btn {
  --a-btn-face: color-mix(in srgb, var(--a-accent) 88%, var(--a-ink) 12%);
  --a-btn-hi: color-mix(in srgb, var(--a-accent-hi) 70%, var(--a-ink) 30%);
  --a-btn-sh: color-mix(in srgb, var(--a-accent) 55%, var(--a-edge));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--a-radius);
  border: var(--a-border-w) solid var(--a-edge);
  background: var(--a-btn-face);
  color: var(--a-ink);
  font-family: var(--a-font-display);
  font-size: calc(0.72rem * var(--a-ui-scale));
  font-weight: 700;
  letter-spacing: var(--a-title-tracking);
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--a-edge);
  /* Bevel pixel: luz arriba/izq, sombra abajo/der + sombra exterior */
  box-shadow:
    inset 2px 2px 0 var(--a-btn-hi),
    inset -2px -2px 0 var(--a-btn-sh),
    var(--a-pixel-shadow);
  cursor: pointer;
  image-rendering: pixelated;
}

.a-btn:hover {
  filter: brightness(1.08);
}

.a-btn:active {
  box-shadow:
    inset -2px -2px 0 var(--a-btn-hi),
    inset 2px 2px 0 var(--a-btn-sh),
    1px 1px 0 var(--a-edge);
  transform: translate(1px, 1px);
}

.a-btn-ghost {
  --a-btn-face: color-mix(in srgb, var(--a-deep) 88%, transparent);
  --a-btn-hi: color-mix(in srgb, var(--a-steel) 55%, var(--a-ink) 20%);
  --a-btn-sh: var(--a-void);
  color: var(--a-ink);
  border-color: var(--a-edge);
}

.a-btn-secondary {
  --a-btn-face: color-mix(in srgb, var(--a-frame-dim) 90%, var(--a-ink) 10%);
  --a-btn-hi: color-mix(in srgb, var(--a-frame) 75%, var(--a-ink) 25%);
  --a-btn-sh: color-mix(in srgb, var(--a-frame-dim) 50%, var(--a-edge));
  color: var(--a-ink);
}

.a-panel {
  background: color-mix(in srgb, var(--a-panel) calc(var(--a-panel-alpha) * 100%), transparent);
  color: var(--a-ink);
  border: var(--a-border-w) solid var(--a-edge);
  border-radius: var(--a-radius);
  box-shadow:
    inset 2px 2px 0 color-mix(in srgb, var(--a-frame) 45%, transparent),
    inset -2px -2px 0 var(--a-edge),
    var(--a-pixel-shadow);
  font-family: var(--a-font-display);
  font-size: calc(0.78rem * var(--a-ui-scale));
  line-height: var(--a-body-lh);
}

.a-panel-title {
  margin: 0;
  font-family: var(--a-font-display);
  font-size: calc(0.72rem * var(--a-ui-scale));
  letter-spacing: var(--a-title-tracking);
  text-transform: uppercase;
  color: var(--a-accent);
}

.a-panel-readable {
  font-family: var(--a-font-ui);
  font-size: calc(0.9rem * var(--a-ui-scale));
}

.a-muted {
  color: var(--a-muted);
}

.a-ink {
  color: var(--a-ink);
}

.a-accent {
  color: var(--a-accent);
}

.a-secondary {
  color: var(--a-secondary);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--a-scroll-thumb) var(--a-scroll-track);
}

*::-webkit-scrollbar {
  width: var(--a-scroll-size);
  height: var(--a-scroll-size);
}

*::-webkit-scrollbar-track {
  background: var(--a-scroll-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--a-scroll-thumb);
  border: 1px solid var(--a-scroll-thumb-border);
  border-radius: 0;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--a-scroll-thumb-hover);
}

.a-scroll-hidden {
  scrollbar-width: none !important;
}

.a-scroll-hidden::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.arken-field {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 2px solid var(--a-frame-dim);
  background: var(--a-deep);
  color: var(--a-ink);
  font-family: var(--a-font-ui);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.arken-field:focus {
  border-color: var(--a-frame);
  background: var(--a-void);
}

.arken-field::placeholder {
  color: var(--a-muted);
}