/* ════════════════════════════════════════════════════════════════════════
   medieval-ui.css — Sistema de diseño MEDIEVAL compartido de MyMedieval.

   CAPA DE DATOS del estilo (tokens) + componentes opt-in. Cada pantalla
   (lobby, europe-terrain, scene, realm-view…) lo carga y consume los tokens;
   cambiar el look del juego entero = cambiar ESTE archivo, sin tocar la UI.

   Convenciones:
   - Prefijo --mui- para tokens, .mui- para componentes opt-in.
   - Los ids/clases existentes de cada pantalla NO se definen aquí (cada
     pantalla se retematiza en su propio <style> usando estos tokens).
   - Escala z-index documentada: TODO nuevo elemento debe elegir una banda.
   - Táctil: interactivos ≥44px de alto. Nunca depender de hover.
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* ── Tipografía ── */
  --mui-font-display: 'MedievalSharp', 'Georgia', serif;   /* títulos, botones, dock */
  --mui-font-body: 'Crimson Text', 'Georgia', serif;        /* cuerpo de paneles */

  /* ── Paleta: madera / pergamino / oro / tinta ── */
  --mui-gold: #f0d488;           /* oro suave: títulos y labels */
  --mui-gold-hot: #ffd700;       /* oro vivo: SOLO acentos/activo */
  --mui-gold-dim: #c8b88a;       /* oro apagado: bordes por defecto */
  --mui-bronze: #8a6f3d;         /* bisel/borde secundario */
  --mui-text: #ecdcb6;           /* texto crema sobre madera */
  --mui-text-dim: #a89372;       /* texto secundario sobre madera */
  --mui-ink: #2b1d0e;            /* tinta sobre pergamino */
  --mui-ink-dim: #5a452c;        /* tinta secundaria sobre pergamino */

  /* Fondos madera (fallback plano si la textura no carga) */
  --mui-wood-hi: #3a2a15;
  --mui-wood: #241a0c;
  --mui-wood-lo: #191207;
  --mui-night: rgba(12, 8, 3, .78);      /* scrim tras modales */

  /* Estados */
  --mui-ok: #7fae4a;   --mui-ok-bg: #2f5a2a;
  --mui-danger: #d86a5a; --mui-danger-bg: #5a2320;
  --mui-info: #86a8c8;

  /* ── Materiales (imagen + fallback) ── */
  --mui-mat-wood: linear-gradient(180deg, rgba(30,20,9,.42), rgba(16,10,4,.62)), url('/assets/ui/wood-tile.jpg?v=1');
  --mui-mat-wood-deep: linear-gradient(180deg, rgba(12,8,3,.62), rgba(10,6,2,.78)), url('/assets/ui/wood-tile.jpg?v=1');
  --mui-mat-parch: url('/assets/ui/parchment-tile.jpg?v=1');

  /* ── Trazos y relieve ── */
  --mui-radius: 10px;
  --mui-radius-lg: 14px;
  --mui-border: 1px solid var(--mui-gold-dim);
  --mui-bevel: inset 0 1px 0 rgba(255, 230, 170, .18), inset 0 -2px 6px rgba(0, 0, 0, .45);
  --mui-shadow: 0 8px 26px rgba(0, 0, 0, .55);
  --mui-glow: 0 0 10px rgba(255, 215, 0, .35);

  /* ── Táctil ── */
  --mui-tap: 44px;

  /* ── Escala z-index (bandas). Documentación viva: usarla SIEMPRE. ──
     10-19  decoración de mapa (tooltips de terreno, badges)
     40-49  HUD persistente (barras, dock, fabs)
     50-59  paneles laterales / hojas
     60-69  menús flotantes (ctx, constelación)
     80-89  overlays de pantalla (selección de reino, editores)
     90-99  modales + su scrim
     100+   toasts y avisos por encima de todo */
  --z-map: 10; --z-hud: 40; --z-panel: 50; --z-menu: 60;
  --z-overlay: 80; --z-modal: 90; --z-toast: 100;
}

/* ── Scrollbars temáticos (WebKit + Firefox) ── */
.mui-scroll, .mui-scroll-x { scrollbar-width: thin; scrollbar-color: var(--mui-bronze) transparent; }
.mui-scroll::-webkit-scrollbar, .mui-scroll-x::-webkit-scrollbar { width: 8px; height: 8px; }
.mui-scroll::-webkit-scrollbar-thumb, .mui-scroll-x::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--mui-bronze), #5a4526); border-radius: 6px;
}
.mui-scroll::-webkit-scrollbar-track, .mui-scroll-x::-webkit-scrollbar-track { background: rgba(0,0,0,.25); }

/* Carrusel horizontal con snap: para barras con muchos elementos (móvil).
   La sombra de borde indica "hay más" sin robar el gesto de la cámara. */
.mui-scroll-x {
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; white-space: nowrap;
}
.mui-scroll-x > * { scroll-snap-align: start; }
.mui-edge-fade {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

/* ── Panel de madera (contenedor HUD por defecto) ── */
.mui-panel {
  background: var(--mui-mat-wood); background-size: 512px 512px, 512px 512px;
  background-color: var(--mui-wood);
  border: var(--mui-border); border-radius: var(--mui-radius-lg);
  box-shadow: var(--mui-shadow), var(--mui-bevel);
  color: var(--mui-text);
  font-family: var(--mui-font-body);
}

/* ── Panel de pergamino (lectura larga: cartas, crónicas, fichas) ── */
.mui-panel-parch {
  background: var(--mui-mat-parch); background-size: 512px 512px;
  background-color: #d8c9a4;
  border: 2px solid var(--mui-bronze); border-radius: var(--mui-radius);
  box-shadow: var(--mui-shadow), inset 0 0 40px rgba(90, 60, 20, .22);
  color: var(--mui-ink);
  font-family: var(--mui-font-body);
}
.mui-panel-parch h1, .mui-panel-parch h2, .mui-panel-parch h3 { color: #4a2f14; font-family: var(--mui-font-display); }

/* ── Cabecera de panel con filo dorado ── */
.mui-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  font-family: var(--mui-font-display); color: var(--mui-gold);
  font-size: 1.05rem; letter-spacing: .4px;
  border-bottom: 1px solid rgba(200, 184, 138, .45);
  background: linear-gradient(180deg, rgba(255, 226, 150, .10), rgba(0, 0, 0, 0));
  border-radius: var(--mui-radius-lg) var(--mui-radius-lg) 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* ── Botones ── */
.mui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--mui-tap); padding: 8px 16px;
  font-family: var(--mui-font-display); font-size: 1rem; color: var(--mui-text);
  background: linear-gradient(180deg, var(--mui-wood-hi), var(--mui-wood-lo));
  border: 1px solid var(--mui-bronze); border-radius: var(--mui-radius);
  box-shadow: var(--mui-bevel), 0 2px 6px rgba(0, 0, 0, .5);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.mui-btn:hover { border-color: var(--mui-gold); }
.mui-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 8px rgba(0,0,0,.6); }
.mui-btn[disabled] { opacity: .45; pointer-events: none; }
.mui-btn-primary {
  background: linear-gradient(180deg, #7a5f28, #4a3512);
  border-color: var(--mui-gold); color: #ffe9b0;
}
.mui-btn-primary:hover { box-shadow: var(--mui-glow), var(--mui-bevel); }
.mui-btn-ok { background: linear-gradient(180deg, var(--mui-ok-bg), #1c3a18); border-color: var(--mui-ok); color: #d8ecc0; }
.mui-btn-danger { background: linear-gradient(180deg, var(--mui-danger-bg), #3a1512); border-color: var(--mui-danger); color: #f0cfc8; }

/* ── Botón de cierre unificado (siempre el MISMO glifo ✕ y tamaño táctil) ── */
.mui-close {
  width: var(--mui-tap); height: var(--mui-tap); min-height: var(--mui-tap);
  display: inline-flex; align-items: center; justify-content: center;
  font: 20px/1 var(--mui-font-body); color: var(--mui-text-dim);
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(200, 184, 138, .35);
  border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mui-close:hover, .mui-close:active { color: var(--mui-gold-hot); border-color: var(--mui-gold); }

/* ── Chip de recurso / dato (barra superior, listas) ── */
.mui-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 4px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.22));
  border: 1px solid rgba(200, 184, 138, .4); border-radius: 8px;
  color: var(--mui-text); font-family: var(--mui-font-body); font-weight: 600;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}

/* ── Divisoria ornamental ligera ── */
.mui-rule {
  border: 0; height: 1px; margin: 8px 0;
  background: linear-gradient(90deg, transparent, var(--mui-gold-dim), transparent);
}

/* ── Marco TALLADO 9-slice (superficies héroe: login, modales, panel de reino) ──
   Usa el marco ornamentado de wood-frame.jpg (talla dorada, escudos, remaches).
   El interior se rellena con la tesela de madera limpia, recortada al padding-box
   para no pisar la talla. Nota: border-image ignora border-radius (esquinas rectas). */
.mui-ornate {
  border: 22px solid transparent;
  border-image: url('/assets/ui/wood-frame.jpg?v=1') 96 round;
  background: linear-gradient(180deg, rgba(30,21,10,.35), rgba(16,11,4,.55)), url('/assets/ui/wood-tile.jpg?v=1');
  background-size: auto, 512px 512px;
  background-clip: padding-box;
  background-color: var(--mui-wood);
  border-radius: 0;
  box-shadow: var(--mui-shadow);
}
@media (max-width: 520px) { .mui-ornate { border-width: 16px; } }