@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
/* ════════════════════════════════════════════════════════════
   PileTrivial · UI compartida (sistema de tokens + footer + botones)
   Enlazar en cada juego:  <link rel="stylesheet" href="piletrivial-ui.css">

   IDENTIDAD ÚNICA: «azul noche + dorado».
   Cada juego debe BORRAR su propio :root y heredar estas variables.
   ════════════════════════════════════════════════════════════ */

:root{
  /* ---- Paleta maestra (nombres estándar que usan los juegos) ---- */
  --bg:#0f1535;            /* fondo principal            */
  --bg2:#151c3d;           /* fondo secundario / paneles */
  --card:#1e2a52;          /* tarjetas                   */
  --card-hover:#243060;    /* tarjeta hover              */
  --panel:#1e2a52;         /* alias de card (millonario/atrapa) */
  --panel2:#243060;        /* alias card-hover           */
  --border:#2d3a6a;        /* bordes                     */
  --border-sel:#f5a623;    /* borde seleccionado (dorado)*/
  --text:#e8eaf6;          /* texto principal            */
  --text2:#8892b0;         /* texto secundario           */
  --white:#e8eaf6;         /* alias de text              */
  --accent:#f5a623;        /* dorado de marca            */
  --accent2:#4fc3f7;       /* azul claro de marca        */
  --gold:#f5a623;          /* alias accent (millonario/atrapa) */
  --gold2:#ffa726;         /* dorado cálido secundario   */
  --blue:#4fc3f7;          /* alias accent2              */
  --green:#66bb6a;
  --red:#ef5350;
  --yellow:#ffa726;
  --orange:#ff8c00;
  --purple:#ab47bc;
  /* ---- Tipografía ---- */
  --font:'Outfit',system-ui,-apple-system,sans-serif;
  --font-body:'Outfit',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',monospace;
  /* ---- Radios y sombras comunes ---- */
  --radius-sm:8px; --radius:12px; --radius-lg:16px;
  --shadow-card:0 4px 20px rgba(0,0,0,.35);

  /* ---- Espejo con prefijo --pt- (compatibilidad) ---- */
  --pt-bg:#0f1535; --pt-bg2:#151c3d; --pt-card:#1e2a52; --pt-card-hover:#243060;
  --pt-border:#2d3a6a; --pt-text:#e8eaf6; --pt-text2:#8892b0;
  --pt-accent:#f5a623; --pt-accent2:#4fc3f7; --pt-green:#66bb6a;
  --pt-red:#ef5350; --pt-purple:#ab47bc;
  --pt-font:'Outfit',system-ui,-apple-system,sans-serif;
}


/* ───────── BOTÓN DE ACCIÓN (plano en reposo, se ilumina al hover) ───────── */
.pt-fbtn{
  position:relative; width:48px; height:48px; border:none; cursor:pointer;
  border-radius:13px; display:flex; align-items:center; justify-content:center;
  padding:0; margin:0; text-transform:none; font-size:0; line-height:0; flex-shrink:0;
  background:linear-gradient(180deg,var(--c-light) 0%,var(--c) 55%,var(--c-dark) 100%);
  box-shadow:
    0 0 0 2px var(--c-ring),
    0 3px 0 var(--c-shadow),
    0 6px 12px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 4px rgba(0,0,0,.22);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.pt-fbtn:hover{
  transform:translateY(-6px) scale(1.06);
  filter:brightness(1.15);
  box-shadow:
    0 0 0 2px var(--c-ring),
    0 12px 34px rgba(245,166,35,.6),
    0 6px 0 var(--c-shadow),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(0,0,0,.22);
}
.pt-fbtn:focus,.pt-fbtn:focus-visible{outline:none;}
.pt-fbtn:active{
  transform:translateY(-2px) scale(1.03);
  box-shadow:
    0 0 0 2px var(--c-ring),
    0 6px 18px rgba(245,166,35,.5),
    0 2px 0 var(--c-shadow),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 3px rgba(0,0,0,.22);
}
.pt-fbtn svg{width:23px; height:23px; display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));}

/* colores por acción */
.pt-fbtn.fb-home {--c:#3a78d6;--c-light:#6ea4ee;--c-dark:#255aad;--c-shadow:#1a4486;--c-ring:#7ec4ff;--c-glow:rgba(79,195,247,.85)}
.pt-fbtn.fb-reset{--c:#d4860a;--c-light:#f5b94e;--c-dark:#a96700;--c-shadow:#7d4c00;--c-ring:#ffd277;--c-glow:rgba(245,166,35,.85)}
.pt-fbtn.fb-sound{--c:#43a85a;--c-light:#74d488;--c-dark:#2e8043;--c-shadow:#1f5f30;--c-ring:#8fe6a3;--c-glow:rgba(102,187,106,.85)}
.pt-fbtn.fb-purple{--c:#9b46bc;--c-light:#c47fe0;--c-dark:#7a2f97;--c-shadow:#5b1f72;--c-ring:#d29bee;--c-glow:rgba(171,71,188,.85)}
/* sonido silenciado: gris apagado */
.pt-fbtn.fb-sound.is-muted{--c:#7a8499;--c-light:#9aa3b5;--c-dark:#5b6479;--c-shadow:#3e4456;--c-ring:#aeb6c7;--c-glow:rgba(160,170,190,.6)}

/* ───────── FOOTER FLOTANTE (pastilla despegada del borde) ───────── */
.pt-footer{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom,0)); z-index:2000;
  display:flex; gap:14px; padding:10px 16px; border-radius:20px;
  background:rgba(21,28,61,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:
    0 8px 30px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08);
}
/* Variante esquina inferior derecha (para juegos con teclado: wordle, nerdle) */
.pt-footer.pt-footer--corner{
  left:auto; right:16px; transform:none;
  bottom:calc(16px + env(safe-area-inset-bottom,0));
}

/* ───────── BOTÓN ATRÁS (esquina sup-izq, todas las pantallas) ───────── */
.pt-back{
  position:fixed; top:14px; left:14px; z-index:2100;
  width:38px; height:38px; border:none; cursor:pointer; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  padding:0; margin:0; flex-shrink:0;
  background:linear-gradient(180deg,#3a4470 0%,#2a3358 55%,#1e2545 100%);
  box-shadow:
    0 0 0 1.5px rgba(140,160,210,.55),
    0 0 10px 1px rgba(120,150,220,.35),
    0 3px 0 #161c38,
    0 5px 10px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .08s ease, filter .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.pt-back:hover{filter:brightness(1.12)}
.pt-back:focus,.pt-back:focus-visible{outline:none;}
.pt-back:active{transform:translateY(3px)}
.pt-back svg{width:19px; height:19px;}
/* Variante incrustada (en el flujo, no fija en esquina) */
.pt-back.pt-back-inline{position:static; top:auto; left:auto; width:48px; height:48px; border-radius:13px; z-index:auto;}
.pt-back.pt-back-inline svg{width:23px; height:23px;}

@media (max-width:480px){
  .pt-fbtn{width:46px;height:46px}
  .pt-fbtn svg{width:22px;height:22px}
}

/* ───────── BLINDAJE: garantiza el MISMO efecto en TODOS los juegos
   (reposo plano · al hover se eleva y se ilumina dorado), ganando a las
   reglas genéricas "button:hover / .btn:hover" que cada juego define.   */
button.pt-fbtn,
.pt-actions button.pt-fbtn,
.pt-footer button.pt-fbtn,
.botonera button.pt-fbtn{
  background:linear-gradient(180deg,var(--c-light) 0%,var(--c) 55%,var(--c-dark) 100%) !important;
  box-shadow:
    0 0 0 2px var(--c-ring),
    0 3px 0 var(--c-shadow),
    0 6px 12px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 4px rgba(0,0,0,.22) !important;
  transform:none !important;
  filter:none !important;
}
button.pt-fbtn:hover,
.pt-actions button.pt-fbtn:hover,
.pt-footer button.pt-fbtn:hover,
.botonera button.pt-fbtn:hover{
  transform:translateY(-6px) scale(1.06) !important;
  filter:brightness(1.15) !important;
  box-shadow:
    0 0 0 2px var(--c-ring),
    0 12px 34px rgba(245,166,35,.6),
    0 6px 0 var(--c-shadow),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(0,0,0,.22) !important;
}
button.pt-fbtn:active,
.pt-actions button.pt-fbtn:active,
.pt-footer button.pt-fbtn:active,
.botonera button.pt-fbtn:active{
  transform:translateY(-2px) scale(1.03) !important;
  box-shadow:
    0 0 0 2px var(--c-ring),
    0 6px 18px rgba(245,166,35,.5),
    0 2px 0 var(--c-shadow),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 3px rgba(0,0,0,.22) !important;
}

/* ───────── FONDO ANIMADO DE MARCA (idéntico en todos los juegos) ─────────
   Degradado azul noche sutil que se desplaza lentamente. Cada juego puede
   omitir su propio fondo; este se aplica por defecto al body.            */
body{
  background:linear-gradient(135deg,#0f1535 0%,#1e2a52 50%,#0f1535 100%) !important;
  background-size:400% 400% !important;
  animation:ptBgShift 15s ease infinite !important;
}
@keyframes ptBgShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
/* Cabecera común PileTrivial (variante B: icono + título en fila) */
.pt-header{display:flex;align-items:center;gap:14px;justify-content:center;margin:8px 0 18px;padding:14px 18px;background:var(--card,#1e2a52);border:1px solid var(--border,#2d3a6a);border-radius:14px}
.pt-header .pt-h-icon{width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.pt-header .pt-h-icon img,.pt-header .pt-h-icon svg{width:46px;height:46px;object-fit:contain}
.pt-header .pt-h-text{text-align:left}
.pt-header .pt-h-title{font-size:24px;font-weight:800;letter-spacing:.5px;line-height:1.1;color:var(--text,#e8eaf6)}
.pt-header .pt-h-sub{font-size:12px;color:var(--text2,#8892b0);margin-top:2px}
@media(max-width:480px){
  .pt-header{gap:10px;padding:10px 12px;margin:6px 0 14px}
  .pt-header .pt-h-icon{width:36px;height:36px}
  .pt-header .pt-h-icon img,.pt-header .pt-h-icon svg{width:36px;height:36px}
  .pt-header .pt-h-title{font-size:19px}
  .pt-header .pt-h-sub{font-size:11px}
}


/* ═══ Pantallas de resultado coherentes ═══ */
.pt-result{text-align:center;padding:8px 0}
.pt-result .pt-r-icon{margin-bottom:10px}
.pt-result .pt-r-icon svg{width:60px;height:60px}
.pt-result .pt-r-title{font-size:24px;font-weight:800;color:var(--text,#e8eaf6);margin-bottom:4px;letter-spacing:.5px}
.pt-result .pt-r-sub{font-size:13px;color:var(--text2,#8892b0);margin-bottom:18px}
.pt-result .pt-r-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.pt-r-stat{background:var(--bg2,#151c3d);border:1.5px solid var(--border,#2d3a6a);border-radius:12px;padding:12px 18px;text-align:center;min-width:84px}
.pt-r-stat .v{font-size:24px;font-weight:800;color:var(--accent,#f5a623);line-height:1}
.pt-r-stat .l{font-size:11px;color:var(--text2,#8892b0);margin-top:4px;text-transform:uppercase;letter-spacing:.4px}
@media(max-width:480px){
  .pt-result .pt-r-icon svg{width:50px;height:50px}
  .pt-result .pt-r-title{font-size:21px}
  .pt-r-stat{padding:10px 14px;min-width:72px}
  .pt-r-stat .v{font-size:21px}
}