:root{
  --bg:#07070c;
  --panel:#111225;
  --panel2:#181a34;
  --text:#f1f2ff;
  --muted:#b9bde7;
  --accent:#6ea8fe;
  --accent2:#a5fffb;
  --danger:#ff4d6d;
  --cardRadius:16px;

  /* gets set per level by JS */
  --levelBg:none;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Nunito, system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* ------------------------------
   Smartphone performance/layout
   ------------------------------ */
body.isMobile{
  -webkit-text-size-adjust:100%;
}
body.isMobile:not(.hasMenu){
  overflow:hidden;
  overscroll-behavior:none;
}
/* Mobile: remove heavy blur + endless drift animation */
body.isMobile::before{
  filter:saturate(1.02) contrast(1.08) brightness(.46);
  animation:none;
  will-change:auto;
}
body.isMobile::after{opacity:.45}
body.isMobile .grunge{opacity:.18;filter:none}
body.isMobile .particles{display:none}

/* Level background + sci‑fi horror mood */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    var(--levelBg) center/cover no-repeat,
    radial-gradient(1200px 700px at 50% 10%, rgba(110,168,254,.18), transparent 60%),
    radial-gradient(900px 600px at 20% 90%, rgba(255,77,109,.12), transparent 55%),
    linear-gradient(180deg, #05050a, #0b0c18);
  /* Darker + slightly blurred like a horror sci‑fi screen */
  filter:saturate(1.05) contrast(1.15) brightness(.42) blur(4px);
  animation:bgDrift 2.35s ease-in-out infinite alternate;
  will-change:transform, background-position;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.035),
      rgba(255,255,255,.035) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    ),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:overlay;
  opacity:.62;
}

/* Extra grunge layer */
.grunge{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.35;
  background:
    radial-gradient(900px 500px at 30% 30%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(700px 520px at 70% 70%, rgba(0,0,0,.42), transparent 62%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.18), rgba(0,0,0,.18) 2px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 14px);
  mix-blend-mode:multiply;
  filter:blur(0.4px);
}

/* Floating particles (canvas) */
.particles{
  position:fixed;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.75;
}

@keyframes bgDrift{
  0%{transform:scale(1.10) translate3d(-4%,2.6%,0) rotate(-.9deg);background-position:40% 60%}
  35%{transform:scale(1.26) translate3d(3.8%,-4.2%,0) rotate(.9deg);background-position:72% 35%}
  100%{transform:scale(1.18) translate3d(-3.6%,-3.0%,0) rotate(-.6deg);background-position:32% 42%}
}

/* Floating particles canvas */
.particles{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.55;
}

.hud{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:rgba(4,5,10,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.hudLeft{
  flex:1;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.hudLogo{
  width:min(260px, 60vw);
  height:auto;
  display:block;
  filter:drop-shadow(0 0 16px rgba(255,77,109,.22)) drop-shadow(0 0 24px rgba(110,168,254,.18));
}
.hudLeft .meta{
  margin-top:4px;
  color:var(--muted);
  font-size:18px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.dot{opacity:.7}

.hudRight{display:flex;align-items:center;gap:10px}

.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(17,18,37,.92);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.4px;
}
.btn:hover,
.btn:focus-visible{
  color:#fff;
}
.btn:hover{background:rgba(24,26,52,.95)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btnPrimary{
  border-color:rgba(110,168,254,.55);
  box-shadow:0 0 0 1px rgba(110,168,254,.10) inset;
}

/* Gold CTA (Play/Continue) */
.btnGold{
  background:linear-gradient(180deg, rgba(255,215,92,.98), rgba(214,149,18,.98));
  border-color:rgba(255,215,92,.75);
  color:#1b1200;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    0 10px 26px rgba(214,149,18,.20),
    0 0 0 1px rgba(255,215,92,.22) inset,
    0 0 22px rgba(255,215,92,.22);
}
.btnGold:hover{filter:brightness(1.05)}

/* Blue CTA (Secret gift) */
.btnBlue{
  background:linear-gradient(180deg, rgba(78,172,255,.98), rgba(30,86,240,.98));
  border-color:rgba(94,179,255,.85);
  color:#06101f;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  box-shadow:
    0 10px 26px rgba(28,92,255,.22),
    0 0 0 1px rgba(110,168,254,.25) inset,
    0 0 26px rgba(110,168,254,.22);
}
.btnBlue:hover{filter:brightness(1.06)}

.btnBig{padding:14px 16px;border-radius:16px;font-size:18px}

.btn.discoverLink{flex-direction:column;gap:2px}
.btnLink{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

.discoverLine{display:block; width:100%; text-align:center; line-height:1.05}
@media (max-width:520px){
  .btn.discoverLink{flex-direction:column;gap:2px}
  .discoverLine{display:block; width:100%; text-align:center; line-height:1.05}
}

.iconBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(17,18,37,.92);
  color:var(--text);
  width:40px;
  height:40px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
}
.iconBtn:hover{background:rgba(24,26,52,.95)}

.status{
  min-height:22px;
  padding:10px 16px 0 16px;
  color:var(--muted);
  text-align:center;
  font-size:16px;
}

main{padding:16px}

.board{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  max-width:980px;
  margin:0 auto;
}

@media (max-width:720px){
  .board{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media (max-width:520px){
  .board{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

/* Mobile: fit the whole 10-card board on screen (5x2) */
body.isMobile main{padding:10px 10px 6px}
body.isMobile .status{padding:8px 10px 0 10px;font-size:14px}
body.isMobile .hud{padding:10px 12px}
body.isMobile .hudLeft .meta{font-size:14px;gap:8px}
/* Mobile: use 4 columns to fill vertical space better */
body.isMobile .board{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  max-width:100%;
}
body.isMobile .cardFace{box-shadow:none}

.card{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  perspective:1000px;
}

.cardInner{
  position:absolute;
  inset:0;
  border-radius:var(--cardRadius);
  transform-style:preserve-3d;
  transition:transform .22s ease;
}

.cardFace{
  position:absolute;
  inset:0;
  border-radius:var(--cardRadius);
  backface-visibility:hidden;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.cardFront{
  background:
    radial-gradient(circle at 30% 20%, rgba(165,255,251,.22), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(255,77,109,.18), transparent 42%),
    url('assets/cardback.jpg') center/cover no-repeat;
}

.cardBack{
  transform:rotateY(180deg);
  background:rgba(17,18,37,.92);
}

.cardBack img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card.isFlipped .cardInner{transform:rotateY(180deg)}
.card.isMatched{cursor:default}
.card.isMatched .cardFace{border-color:rgba(110,168,254,.55)}

/* 1s BIG glow when a pair is found (no extra rotation/flip) */
.card.matchGlow::after{
  content:"";
  position:absolute;
  inset:-46px;
  border-radius:calc(var(--cardRadius) + 46px);
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 40%, rgba(165,255,251,.95), transparent 55%),
    radial-gradient(circle at 40% 65%, rgba(110,168,254,.85), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,77,109,.72), transparent 62%);
  filter:blur(10px);
  opacity:0;
  animation:matchHalo 1s ease-out;
}

/* Mobile: keep the glow (lighter) so players still get feedback */
body.isMobile .card.matchGlow::after{
  inset:-26px;
  filter:blur(7px);
}

.card.matchGlow .cardFace{
  animation:matchGlow 1s ease-out;
}
@keyframes matchGlow{
  0%{box-shadow:0 8px 20px rgba(0,0,0,.35)}
  18%{
    box-shadow:
      0 0 0 6px rgba(165,255,251,1),
      0 0 120px 30px rgba(110,168,254,.98),
      0 0 180px 60px rgba(255,77,109,.80),
      0 0 240px 90px rgba(165,255,251,.38);
  }
  70%{
    box-shadow:
      0 0 0 5px rgba(110,168,254,1),
      0 0 100px 24px rgba(165,255,251,.90),
      0 0 160px 52px rgba(110,168,254,.55),
      0 0 220px 80px rgba(165,255,251,.30);
  }
  100%{box-shadow:0 8px 20px rgba(0,0,0,.35)}
}

@keyframes matchHalo{
  0%{opacity:0;transform:scale(.65)}
  22%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.08)}
}

.hud.isLoading{opacity:.85}

/* Menu */
.menu{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:transparent;
  overflow:hidden;
}

/* Smartphone menu background fallback (no video) */
body.isMobile .menuVideo{display:none;}
body.isMobile .menu::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:center/cover no-repeat url("assets/memory50_framebgmenu.jpg");
  transform:scale(1.08);
  filter:contrast(1.05) saturate(1.05);
  animation:mobileMenuBg 6.5s ease-in-out infinite;
}
@keyframes mobileMenuBg{
  0%{transform:scale(1.10) translate3d(0,0,0); filter:contrast(1.06) saturate(1.06) brightness(.95);} 
  45%{transform:scale(1.16) translate3d(-1.2%, -1.4%,0); filter:contrast(1.07) saturate(1.07) brightness(1);} 
  100%{transform:scale(1.10) translate3d(0,0,0); filter:contrast(1.06) saturate(1.06) brightness(.95);} 
}

.menuVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter:none;
  transform:scale(1.06);
}
.menuVignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.045),
      rgba(255,255,255,.045) 1px,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 8px
    );
  opacity:.25;
}






.menuCard{
  width:min(520px, 92%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  /* 35% opacity so the menu video is clearly visible */
  background:linear-gradient(180deg, rgba(14,15,30,.35), rgba(8,8,14,.35));
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  padding:22px;
  text-align:center;
  position:relative;
  overflow:hidden;
  z-index:2;
}
.menuCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(110,168,254,.22), transparent 60%),
    radial-gradient(500px 240px at 90% 100%, rgba(255,77,109,.18), transparent 60%);
  pointer-events:none;
}
.menuBadge{
  font-family:Orbitron, Nunito, system-ui;
  font-weight:900;
  letter-spacing:2.2px;
  font-size:12px;
  color:rgba(241,242,255,.85);
  text-transform:uppercase;
}
.logoTitle{
  margin:10px auto 6px auto;
  width:min(520px, 92%);
  height:auto;
  display:block;
  filter:drop-shadow(0 0 18px rgba(255,77,109,.28)) drop-shadow(0 0 34px rgba(110,168,254,.20));
  /* A bit less dynamic movement */
  animation:logoFloat 2.1s ease-in-out infinite, logoGlitch 5.0s steps(2,end) infinite, logoFlicker 7.5s steps(2,end) infinite;
  transform-origin:center;
}
.menuSubtitle{
  margin:0 auto 18px auto;
  max-width:55ch;
  font-size:18px;
  color:var(--muted);
}
.menuButtons{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.menuStatus{margin-top:14px;color:rgba(165,255,251,.85);font-family:Orbitron, Nunito, system-ui;font-size:13px;letter-spacing:1.2px;text-transform:uppercase}

.warning{color:rgba(255,77,109,.95)}

/* Modal */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:22px}
.modal.isOpen{display:flex}
.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.modalCard{
  position:relative;
  width:min(640px, 100%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(14,15,30,.96), rgba(8,8,14,.96));
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  padding:16px;
}
.modalHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 10px 8px;border-bottom:1px solid rgba(255,255,255,.10)}
.modalTitle{font-family:Orbitron, Nunito, system-ui;font-weight:900;letter-spacing:1.2px;font-size:18px}
.modalBody{padding:14px 10px 10px 10px;font-size:18px;line-height:1.4}
.modalBody ol{margin:0;padding-left:20px}
.modalBody li{margin:10px 0}
.muted{color:var(--muted)}
.modalFooter{display:flex;justify-content:flex-end;padding:8px 10px 6px 10px}

/* Mural */
.muralCard{width:min(920px, 100%)}
.muralGrid{
  display:grid;
  grid-template-columns:repeat(10, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width:900px){
  .muralGrid{grid-template-columns:repeat(8, minmax(0, 1fr))}
}
@media (max-width:720px){
  .muralGrid{grid-template-columns:repeat(6, minmax(0, 1fr))}
}
@media (max-width:520px){
  .muralGrid{grid-template-columns:repeat(5, minmax(0, 1fr))}
}

.muralTile{
  width:100%;
  aspect-ratio:1/1;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(17,18,37,.82);
  overflow:hidden;
  cursor:pointer;
  padding:0;
  position:relative;
}
.muralTile img{width:100%;height:100%;object-fit:cover;display:block}
.muralTile.isLocked{cursor:not-allowed;opacity:.85}
.muralTile.isLocked img{filter:saturate(.75) contrast(.95)}
.muralTile:not(.isLocked):hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.35)}

/* Special golden halo for 050 (gift) when unlocked */
.muralTile.isGolden::before{
  content:"";
  position:absolute;
  inset:-8px;
  background:radial-gradient(circle at 50% 40%, rgba(255,215,92,.55), rgba(255,215,92,.0) 55%);
  filter:blur(10px);
  pointer-events:none;
  animation:goldPulse 1.4s ease-in-out infinite;
}
.muralTile.isGolden::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:12px;
  border:2px solid rgba(255,215,92,.72);
  box-shadow:0 0 18px rgba(255,215,92,.55), 0 0 42px rgba(255,215,92,.32);
  pointer-events:none;
  animation:goldStroke 1.4s ease-in-out infinite;
}
.muralTile.isGolden img{
  box-shadow:0 0 0 1px rgba(255,215,92,.22) inset, 0 0 26px rgba(255,215,92,.28);
}
@keyframes goldPulse{
  0%,100%{opacity:.70;transform:scale(1)}
  50%{opacity:1;transform:scale(1.03)}
}

@keyframes goldStroke{
  0%,100%{opacity:.85;filter:blur(0px)}
  50%{opacity:1;filter:blur(.2px)}
}
@keyframes goldStroke{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.01)}
}
.muralCode{
  position:absolute;
  left:8px;
  top:8px;
  bottom:auto;
  font-family:Orbitron, Nunito, system-ui;
  font-size:11px;
  letter-spacing:.6px;
  padding:4px 6px;
  border-radius:10px;
  background:rgba(0,0,0,.52);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(241,242,255,.86);
}
.muralTile .lockTag{
  position:absolute;
  inset:auto 0 0 0;
  padding:6px 8px;
  font-family:Orbitron, Nunito, system-ui;
  font-size:10px;
  letter-spacing:1px;
  background:rgba(0,0,0,.55);
  color:rgba(241,242,255,.85);
}

/* Bottom controls (Restart) */
.bottomControls{
  position:fixed;
  left:0;
  right:0;
  bottom:46px;
  z-index:12;
  display:flex;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  pointer-events:none;
}
.bottomControls .btn{pointer-events:auto}

/* Mobile: keep controls on screen (no overlap with footer) */
body.isMobile .bottomControls{bottom:12px;padding:8px 10px;gap:8px}
body.isMobile .btn{padding:9px 11px;border-radius:12px}

/* Level complete overlay */
.completeOverlay{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:22px}
.completeOverlay.isOpen{display:flex}
.completeBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(8px)}
.completeCard{
  position:relative;
  width:min(680px, 100%);
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(14,15,30,.96), rgba(8,8,14,.96));
  box-shadow:0 26px 80px rgba(0,0,0,.62);
  padding:20px 18px 18px 18px;
  text-align:center;
  overflow:hidden;
}
.completeCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(640px 260px at 20% 0%, rgba(110,168,254,.24), transparent 60%),
    radial-gradient(520px 260px at 90% 100%, rgba(255,77,109,.20), transparent 60%);
  pointer-events:none;
}
.completeLogo{
  width:min(420px, 80%);
  height:auto;
  filter:drop-shadow(0 0 22px rgba(110,168,254,.40)) drop-shadow(0 0 30px rgba(255,77,109,.28));
  transform-origin:center;
  animation:completePop 900ms cubic-bezier(.2,1.1,.2,1) both, completeWiggle 1.8s ease-in-out 900ms infinite;
}
.completeText{
  /* Removed per request: no "¡nivel completado!" text */
  display:none;
}
.completeBtn{width:100%;max-width:360px;margin:0 auto}

@keyframes completePop{
  0%{transform:scale(.4) rotate(-12deg);opacity:0}
  60%{transform:scale(1.08) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}
@keyframes completeWiggle{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.02) rotate(1.2deg)}
}

/* Footer */
.footer{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:12;
  padding:10px 14px;
  text-align:center;
  font-family:Orbitron, Nunito, system-ui;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(241,242,255,.78);
  background:rgba(4,5,10,.62);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.10);
}
.footer a{color:rgba(165,255,251,.92);text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Keep content above footer */
main{padding-bottom:120px}

/* Mobile: avoid vertical scroll while playing */
body.isMobile:not(.hasMenu) .footer{display:none}
body.isMobile:not(.hasMenu) main{padding-bottom:18px}

/* Timer */
.timerWrap{
  width:100%;
  display:flex;
  justify-content:center;
  padding:8px 12px 6px;
}
.timer{
  font-family:Orbitron, Nunito, system-ui;
  font-weight:900;
  font-size:clamp(34px, 5.2vw, 64px);
  letter-spacing:2px;
  padding:8px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,11,22,.62);
  backdrop-filter:blur(10px);
  text-shadow:0 0 18px rgba(110,168,254,.55), 0 0 30px rgba(165,255,251,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transform:translateZ(0);
}

body.isMobile .timerWrap{padding:6px 10px 4px}
body.isMobile .timer{
  font-size:clamp(24px, 6vw, 36px);
  padding:6px 12px;
  box-shadow:none;
  text-shadow:none;
  backdrop-filter:none;
}

/* Mobile: lighter timer */
body.isMobile .timer{font-size:clamp(26px, 6vw, 40px);box-shadow:none}
.timer.isTick{
  animation:timerTick 140ms ease-out;
}
@keyframes timerTick{
  0%{transform:translateY(0) scale(1)}
  45%{transform:translateY(-3px) scale(1.02)}
  100%{transform:translateY(0) scale(1)}
}

/* Footer layout + audio controls */
.footerRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.footerText{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
}
.audioControls{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
}
.audioIcon{
  width:38px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(17,18,37,.55);
  color:rgba(241,242,255,.92);
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.32);
}
.audioIcon:hover{filter:brightness(1.08)}
.volumeSlider{
  width:min(220px, 36vw);
}

@media (max-width:520px){
  .footerRow{flex-direction:column;gap:8px}
}

/* Intro (unskippable) */
.introGate{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:#000;
  backdrop-filter:none;
}
.introGate.isHidden{display:none}
.introCard{
  width:min(680px, 100%);
  border-radius:26px;
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
  text-align:center;
}
.introTitle{
  font-family:Orbitron, Nunito, system-ui;
  font-weight:900;
  letter-spacing:2px;
  font-size:22px;
}
.introText{color:var(--muted);margin:10px 0 14px 0;font-size:18px}
.introHint{margin-top:12px;color:rgba(241,242,255,.75);font-family:Orbitron, Nunito, system-ui;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.introVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  opacity:0;
  transition:opacity .2s ease;
}
.introGate.isPlaying .introVideo{opacity:1;}
/* Menu "Discover" link: 1 line on desktop, 3 lines on mobile */
.discoverLine{display:block; width:100%; text-align:center; line-height:1.05}
body.isMobile .discoverLine{display:block; width:100%; text-align:center; line-height:1.05}
.introGate .introCard{position:relative; z-index:2;}
.introGate.isPlaying .introCard{display:none;}
.introGate::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 35%, rgba(0,0,0,.15), rgba(0,0,0,.75) 70%);
}
.introGate.isPlaying::before{background:radial-gradient(circle at 50% 35%, rgba(0,0,0,.05), rgba(0,0,0,.55) 70%);}

/* Smartphone intro fallback (2s full-screen image animation)
   - Activated by JS adding .isActive to #introMobileFrame and body.isMobile.
*/
.introMobileFrame{
  position:absolute;
  inset:0;
  z-index:3;
  opacity:0;
  pointer-events:none;
  background:center/cover no-repeat url("assets/disturbinggames_frameintroV.jpg");
  transform:scale(1.06);
  filter:contrast(1.08) saturate(1.05);
}
body.isMobile .introVideo{display:none;}

/* Smartphone: when any menu/modal is open, never allow the game board to show through. */
body.isMobile.hasMenu #hud,
body.isMobile.hasMenu main,
body.isMobile.hasMenu #board,
body.isMobile.hasMenu .timerWrap,
body.isMobile.hasMenu .bottomControls,
body.isMobile.hasMenu #status,
body.isMobile.hasMenu footer{
  display:none !important;
}

/* Smartphone: modals must be scrollable (How to play + Mural) */
body.isMobile .modalCard{
  max-height:92vh;
  overflow:hidden;
}
body.isMobile .modalBody{
  max-height:70vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  font-size:15px;
  line-height:1.35;
}

/* Smartphone: Mural should be scrollable and without numeric badges */
body.isMobile .muralCode{display:none;}
body.isMobile .introMobileFrame.isActive{
  opacity:1;
  animation:mobileIntro 2s ease-out forwards;
}
@keyframes mobileIntro{
  0%{transform:scale(1.10); filter:contrast(1.10) saturate(1.10) brightness(.9);}
  60%{transform:scale(1.04); filter:contrast(1.08) saturate(1.06) brightness(1);}
  100%{transform:scale(1.00); filter:contrast(1.05) saturate(1.04) brightness(1);}
}

/* Menu video overlays */
.menuVignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 30%, rgba(0,0,0,.25), rgba(0,0,0,.92) 70%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03),
      rgba(255,255,255,.03) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  opacity:.92;
}

/* Bottom buttons emphasis */
#reloadBtn{
  background:linear-gradient(180deg, rgba(255,77,109,.98), rgba(168,18,42,.98));
  border-color:rgba(255,77,109,.85);
  color:#000;
  text-shadow:none;
  box-shadow:0 10px 26px rgba(255,77,109,.18), 0 0 34px rgba(255,77,109,.12);
}
#reloadBtn:hover{filter:brightness(1.04)}

/* Final screen */
.finalMessage{
  margin:14px auto 12px auto;
  max-width:60ch;
  color:rgba(241,242,255,.92);
  font-size:18px;
  line-height:1.35;
}
.totalTime{
  margin:8px auto 14px auto;
  font-family:Orbitron, Nunito, system-ui;
  font-weight:900;
  letter-spacing:1.6px;
  font-size:clamp(22px, 3.6vw, 34px);
  padding:10px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,11,22,.62);
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(110,168,254,.55), 0 0 30px rgba(165,255,251,.22);
}

.warning{
  color:rgba(255,215,92,.92);
}

.goldNote{color:rgba(255,211,108,.95)!important;font-weight:900;letter-spacing:.6px;text-transform:uppercase;}



@keyframes logoFloat{
  0%{transform:translate3d(0,0,0) rotate(-1.1deg) scale(1);} 
  25%{transform:translate3d(5px,-6px,0) rotate(1.4deg) scale(1.02);} 
  55%{transform:translate3d(-4px,-8px,0) rotate(-1.6deg) scale(1.03);} 
  78%{transform:translate3d(3px,-4px,0) rotate(1.8deg) scale(1.015);} 
  100%{transform:translate3d(0,0,0) rotate(-1.1deg) scale(1);} 
}
@keyframes logoGlitch{
  0%, 70%, 100%{filter:drop-shadow(0 0 18px rgba(255,77,109,.28)) drop-shadow(0 0 34px rgba(110,168,254,.20));} 
  71%{filter:drop-shadow(-14px 0 18px rgba(110,168,254,.46)) drop-shadow(14px 0 18px rgba(255,77,109,.46));} 
  72%{filter:drop-shadow(14px 0 18px rgba(110,168,254,.46)) drop-shadow(-14px 0 18px rgba(255,77,109,.46));} 
  73%{filter:drop-shadow(0 0 34px rgba(255,215,0,.34)) drop-shadow(0 0 64px rgba(110,168,254,.26));}
  74%{filter:drop-shadow(-10px -3px 20px rgba(165,255,251,.40)) drop-shadow(10px 3px 20px rgba(255,77,109,.40));}
}

@keyframes logoFlicker{
  0%, 86%, 100%{opacity:1;} 
  87%{opacity:.85;} 
  88%{opacity:1;} 
  89%{opacity:.78;} 
  90%{opacity:1;}
}


/* v1.1 - Intro ICO + desktop-only lock + menu volume */
.introStartWrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.introStartBtn{width:min(320px, 86vw)}
.introIco{width:min(320px, 86vw);height:auto;image-rendering:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.desktopOnlyOverlay{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;touch-action:none}
.desktopOnlyImg{max-width:100vw;max-height:100vh;object-fit:contain}
.menuAudio{margin-top:14px;display:flex;justify-content:center}
.menuAudio .audioControls{background:rgba(0,0,0,.35);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:10px 12px}