:root{
  --anchor:#0b5394;
  --bg-1:#eaf4ff;
  --bg-2:#d7ebff;
  --paper:#f7fbff;
  --ink:#16324f;
  --font-display:'Press Start 2P', monospace;
  --font-body:'VT323', monospace;
  --brand-1:#2f80ed;
  --brand-2:#56ccf2;
  --brand-solid:#2f80ed;
  --pixel-black:#16324f;
}

body{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:var(--bg-1);
  image-rendering:pixelated;
}

body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background-image:
    linear-gradient(90deg, rgba(11,83,148,.12) 2px, transparent 2px),
    linear-gradient(0deg, rgba(11,83,148,.12) 2px, transparent 2px);
  background-size:32px 32px;
  animation:pixelScroll 1s linear infinite;
  pointer-events:none;
}
@keyframes pixelScroll{
  from{ background-position:0 0; }
  to{ background-position:32px 32px; }
}

.noise{display:none;}

.pixel-field{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.pixel-star{
  position:absolute; width:6px; height:6px; background:var(--brand-2);
  box-shadow:
    0 -6px 0 0 var(--brand-2),
    0 6px 0 0 var(--brand-2),
    -6px 0 0 0 var(--brand-2),
    6px 0 0 0 var(--brand-2);
  opacity:0;
  animation:starBlink 4s ease-in-out infinite;
}
@keyframes starBlink{
  0%{ opacity:0; }
  8%{ opacity:1; }
  40%{ opacity:1; }
  50%{ opacity:0; }
  100%{ opacity:0; }
}

.pixel-star.c1{ background:var(--brand-solid); box-shadow:0 -6px 0 0 var(--brand-solid),0 6px 0 0 var(--brand-solid),-6px 0 0 0 var(--brand-solid),6px 0 0 0 var(--brand-solid); }
.pixel-star.c2{ background:var(--anchor); box-shadow:0 -6px 0 0 var(--anchor),0 6px 0 0 var(--anchor),-6px 0 0 0 var(--anchor),6px 0 0 0 var(--anchor); }

.landing-stage{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:36px; padding:0 16px;
}

.logo-img{
  width:clamp(90px, 16vw, 160px);
  height:auto;
  image-rendering:pixelated;
  filter:drop-shadow(-6px -6px 0 var(--brand-2));
}

@keyframes titleShine{
  0%, 20%{ background-position:200% 0; }
  40%, 100%{ background-position:-200% 0; }
}

.logo{
  font-size:clamp(3.2rem, 10vw, 6rem);
  letter-spacing:2px;
  line-height:1.3;
  text-align:center;
  text-shadow:3px 3px 0 var(--brand-solid);
}
.logo span{
  background-image:linear-gradient(115deg, var(--brand-2) 42%, #ffffff 50%, var(--brand-2) 58%);
  background-size:300% 100%;
  background-position:200% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:titleShine 5s ease-in-out infinite;
}

@keyframes btnBounce{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-8px) scale(1.04); }
}
@keyframes btnGlow{
  0%, 100%{
    box-shadow:
      5px 5px 0 0 var(--pixel-black),
      0 0 16px rgba(47,128,237,.35);
  }
  50%{
    box-shadow:
      5px 5px 0 0 var(--pixel-black),
      0 0 28px rgba(86,204,242,.7);
  }
}

.btn-comecar{
  display:inline-block; padding:18px 40px; border:3px solid var(--pixel-black);
  background:var(--brand-2); color:#ffffff; font-family:var(--font-display);
  font-size:1rem; letter-spacing:1px; text-decoration:none; cursor:pointer;
  transition:.08s;
  animation:btnBounce 1.6s ease-in-out infinite, btnGlow 2s ease-in-out infinite;
}
.btn-comecar:hover{background:var(--anchor);}
.btn-comecar:active{transform:translate(5px,5px); box-shadow:0 0 0 0 var(--pixel-black); animation:none;}

.btn-admin{
  position:fixed; bottom:18px; right:18px; z-index:10;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; background:var(--paper); border:3px solid var(--pixel-black); border-radius:0;
  box-shadow:4px 4px 0 0 var(--pixel-black); cursor:pointer; transition:.08s; text-decoration:none; color:var(--ink);
}
.btn-admin:hover{background:var(--brand-2); color:#ffffff; transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 var(--pixel-black);}
.btn-admin:active{transform:translate(4px,4px); box-shadow:0 0 0 0 var(--pixel-black);}

.btn-mute{
  position:fixed; bottom:72px; right:18px; z-index:10;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; background:var(--paper); border:3px solid var(--pixel-black); border-radius:0;
  box-shadow:4px 4px 0 0 var(--pixel-black); cursor:pointer; transition:.08s; color:var(--ink);
}
.btn-mute:hover{background:var(--brand-2); color:#ffffff; transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 var(--pixel-black);}
.btn-mute:active{transform:translate(4px,4px); box-shadow:0 0 0 0 var(--pixel-black);}
.btn-mute .mute-layer{display:none;}
.btn-mute.is-muted .wave-layer{display:none;}
.btn-mute.is-muted .mute-layer{display:block;}

.ui-icon{display:block;}
.ui-icon.i-chart{width:26px; height:26px;}
.ui-icon.i-speaker{width:30px; height:18px;}

/* -------- large tablet / kiosk (portrait only) -------- */
@media(min-width:900px) and (orientation:portrait){
  .landing-stage{gap:48px;}
  .btn-comecar{padding:24px 56px; font-size:1.3rem;}
}