/* ============================================================
   LOODIFIC — Tema compartilhado das DEMOS
   Aplica a identidade do site novo + barra de aviso de demo.
   Carregado ANTES do style.css de cada jogo.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --brand-blue: #91d5f2;
  --brand-blue-deep: #5cb8e0;
  --brand-orange: #ef8333;
  --ink-950: #05070d;
  --ink-900: #080b14;
  --ink-800: #0d1220;
  --demo-bar-h: 60px;
}

/* Fundo escuro premium global */
html {
  background: #05070d;
}

/* Esconde efeitos de fundo antigos dos jogos (usamos o nosso) */
.background-effect {
  display: none !important;
}

/* Esconde os botões "Voltar" internos antigos (a barra de demo já tem) */
.btn-back,
.back-button {
  display: none !important;
}

/* Camada de fundo cinematográfica (grid + brilhos da marca) */
.loo-demo-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: #05070d;
}
.loo-demo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(145, 213, 242, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(145, 213, 242, 0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 100%);
}
.loo-demo-bg .orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
}
.loo-demo-bg .orb-blue {
  width: 38rem;
  height: 38rem;
  left: -8rem;
  top: -6rem;
  background: rgba(145, 213, 242, 0.18);
}
.loo-demo-bg .orb-orange {
  width: 34rem;
  height: 34rem;
  right: -10rem;
  bottom: -8rem;
  background: rgba(239, 131, 51, 0.15);
}

/* Empurra o conteúdo do jogo para baixo da barra */
body.loo-demo {
  padding-top: calc(var(--demo-bar-h) + 14px) !important;
  background: transparent !important;
  font-family: 'Inter', sans-serif;
}

/* ── Barra superior de DEMO ── */
.loo-demo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: var(--demo-bar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: rgba(8, 11, 20, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: 'Inter', sans-serif;
}

.loo-demo-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.loo-demo-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: -0.02em;
}
.loo-demo-logo .b {
  color: var(--brand-blue);
}
.loo-demo-logo .o {
  color: var(--brand-orange);
}
.loo-demo-logo .dot {
  color: var(--brand-blue);
}
.loo-demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-orange);
  background: rgba(239, 131, 51, 0.12);
  border: 1px solid rgba(239, 131, 51, 0.35);
}
.loo-demo-pill .ping {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-orange);
  animation: looPing 1.6s ease-in-out infinite;
}
@keyframes looPing {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.loo-demo-msg {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.3;
  color: #9aa6bd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loo-demo-msg strong {
  color: #e6edf7;
  font-weight: 600;
}

.loo-demo-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.loo-demo-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: #05070d;
  background: linear-gradient(120deg, #91d5f2 0%, #b9e4f7 40%, #ef8333 100%);
  box-shadow: 0 0 30px -10px rgba(145, 213, 242, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.loo-demo-cta:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 36px -8px rgba(239, 131, 51, 0.6);
}
.loo-demo-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  color: #c3ccdd;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.25s ease;
  white-space: nowrap;
}
.loo-demo-back:hover {
  color: #fff;
  border-color: rgba(145, 213, 242, 0.4);
}

/* Faixa informativa abaixo da barra (reforça que é demo) */
.loo-demo-note {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: #b7c2d6;
  background: rgba(8, 11, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px -25px rgba(0, 0, 0, 0.8);
  animation: looNoteIn 0.6s ease 0.5s both;
}
.loo-demo-note .icon {
  flex-shrink: 0;
  color: var(--brand-blue);
}
.loo-demo-note b {
  color: #fff;
  font-weight: 600;
}
.loo-demo-note .close {
  margin-left: 4px;
  cursor: pointer;
  color: #6b7689;
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
}
.loo-demo-note .close:hover { color: #fff; }
@keyframes looNoteIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Responsivo */
@media (max-width: 760px) {
  .loo-demo-msg { display: none; }
  .loo-demo-back span { display: none; }
}
@media (max-width: 520px) {
  :root { --demo-bar-h: 54px; }
  .loo-demo-cta { padding: 7px 12px; font-size: 0.76rem; }
  .loo-demo-note { font-size: 0.72rem; padding: 8px 12px; }
}