/**
 * Proyecto: MiniJuegoTech
 * Módulo: PlayerTech
 * Versión: 2.1.0
 * Archivo: assets/css/base.css
 * Finalidad: Variables, normalización y tipografía base.
 */

:root {
    --font-display: Georgia, "Times New Roman", serif;
    --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg: #11100e;
    --bg-soft: #181612;
    --panel: rgba(28, 25, 20, .92);
    --panel-solid: #1c1914;
    --text: #f5f0e7;
    --muted: #b9b0a2;
    --line: rgba(255, 255, 255, .11);
    --accent: #d29a55;
    --accent-soft: rgba(210, 154, 85, .15);
    --danger: #e57a72;
    --success: #75c69d;
    --shadow: 0 24px 70px rgba(0, 0, 0, .34);
    --radius-sm: .75rem;
    --radius-md: 1.1rem;
    --radius-lg: 1.65rem;
    --content: 78rem;
    --header-height: 4.75rem;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 17.5rem;
    min-height: 100dvh;
    font-family: var(--font-ui);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.skip-link {
    position: fixed;
    inset: .75rem auto auto .75rem;
    z-index: 9999;
    transform: translateY(-200%);
    padding: .75rem 1rem;
    border-radius: .6rem;
    color: #111;
    background: #fff;
}
.skip-link:focus { transform: none; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }

.eyebrow {
    margin-bottom: .65rem;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}

.lead {
    max-width: 42rem;
    color: var(--muted);
    line-height: 1.72;
}

/* PlayerTech V2: variables para navegación y carga real. */
:root {
    --transition-fast: 180ms;
    --transition-screen: 220ms;
    --skeleton: color-mix(in srgb, var(--panel-solid) 82%, white 18%);
    --skeleton-light: color-mix(in srgb, var(--panel-solid) 68%, white 32%);
}

html[data-app-ready="false"] body { overflow: hidden; }
body.is-transitioning { overflow: hidden; }
.noscript-message {
    position: fixed;
    inset: auto 1rem 1rem;
    z-index: 999;
    padding: 1rem;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--panel-solid);
}