/* =========================================================
   Tema Arcade Neon — Compact (≈15% menor)
   ========================================================= */

:root{
  /* Paleta */
  --bg:#0a0b10; --panel:#12131b; --panel-2:#181a25;
  --maze:#3d2e8f; --pellet:#ff8a20; --power:#00e0ff;
  --text:#eaeaf4; --muted:#aab0c0;
  --ghost1:#ff595e; --ghost2:#90d26d; --ghost3:#ffa600; --ghost4:#ff7ab6; --pac:#ffd400;

  /* FX */
  --glow-maz:0 0 18px rgba(61,46,143,.55);
  --glow-pwr:0 0 22px rgba(0,224,255,.35) inset;

  /* Raio/Padding compactos */
  --rad-s:8px; --rad-m:12px; --rad-l:16px;
  --pad-s:5px 9px; --pad-m:9px 12px;

  /* Tipografia (menor) */
  --font:600 15px/1.35 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}

/* Base --------------------------------------------------- */
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:var(--font);
  overflow:hidden; /* desktop travado para evitar bounce */
}
*{ box-sizing:border-box; }
:focus-visible{ outline:2px solid #6aa6ff; outline-offset:2px; }

.wrap{
  max-width:min(82vw, 680px); /* padrão desktop/notebook */
  margin:0 auto;
  padding:10px 10px 14px;
  display:grid; gap:10px;
}

/* Header / HUD ------------------------------------------ */
header{
  display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;
  background:linear-gradient(180deg,var(--panel) 0%, #0f1118 100%);
  border:1px solid #ffffff1a; border-radius:var(--rad-m);
  padding:6px 8px; box-shadow:0 6px 20px #000a, inset 0 1px 0 #ffffff0d;
}
.hud{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.badge{
  padding:var(--pad-s); border:1px solid #ffffff1c; border-radius:var(--rad-s);
  background:linear-gradient(145deg,var(--panel-2),#0f1016);
  box-shadow:inset 0 2px 4px #0008, 0 2px 6px #0006; color:var(--text); font-size:.95rem;
}

/* User + Botões ----------------------------------------- */
#userBox{ display:flex; align-items:center; gap:8px; }
.logout-btn,#logoutBtn,#restart{
  padding:var(--pad-s); border-radius:var(--rad-s); border:1px solid #ffffff22;
  background:#1e2130; color:#fff; font-weight:700; cursor:pointer;
  transition:transform .08s ease, background .2s ease, box-shadow .2s ease;
  display:inline-flex; align-items:center; gap:6px;
}
.logout-btn:hover,#logoutBtn:hover,#restart:hover{ background:#262a3d; box-shadow:0 0 0 2px #ffffff0f inset; }
.logout-btn:active,#logoutBtn:active,#restart:active{ transform:translateY(1px); }

.small-btn{
  padding:6px 12px; font-size:14px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  color:#fff; cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, background .2s ease;
}
.small-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1); }
.small-btn:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(0,0,0,.25) inset; }
.small-btn:focus-visible{ outline:2px solid #6aa6ff; outline-offset:2px; }

/* Canvas ------------------------------------------------- */
#game{
  width:100%;
  aspect-ratio:28/31;
  display:block;
  background:#000;
  border-radius:var(--rad-l);
  border:1px solid #2a2f55;
  box-shadow:0 8px 22px #000a, var(--glow-maz);
  touch-action:none;
}
body.power-on #game{ box-shadow:0 8px 22px #000a, var(--glow-maz), var(--glow-pwr); }

/* Controles Mobile -------------------------------------- */
.controls{
  display:grid; grid-template-columns: repeat(3,48px); grid-template-rows: repeat(3,48px);
  gap:6px; justify-content:center; margin:8px auto 0;
}
.controls > *{ width:48px; height:48px; }
.btn{
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid #ffffff1c;
  background:rgba(255,255,255,0.08); color:#e8ecff;
  box-shadow:0 6px 12px #0008, inset 0 1px 0 #ffffff14;
  backdrop-filter:blur(6px); transition:transform .08s ease, background .2s ease;
}
.btn:hover{ background:rgba(255,255,255,0.13); }
.btn:active{ transform:scale(.97); }
.btn span{ font-size:18px; }
.hidden{ visibility:hidden; opacity:0; pointer-events:none; }

footer{ opacity:.75; text-align:center; font-weight:500; font-size:.95rem; }

/* Overlays ---------------------------------------------- */
.overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(2px); background:rgba(3,5,10,.68); color:#fff; z-index:50;
  opacity:0; transition:opacity .18s ease;
}
.overlay[style*="display: flex"]{ opacity:1; }

.panel{
  background:linear-gradient(180deg,#161827 0%, #0e1018 100%);
  border:1px solid #3d2e8f55; border-radius:var(--rad-l);
  padding:18px 20px; box-shadow:0 22px 54px #000d, inset 0 0 18px #3d2e8f33;
  max-width:92vw; text-align:center;
}
.panel h2{ margin:.2em 0 .4em; font-size:1.45rem; color:var(--pac); text-shadow:0 0 8px #000; }
.panel p{ color:var(--muted); }
.panel button{
  margin-top:10px; padding:var(--pad-m); border-radius:10px; border:none;
  background:linear-gradient(145deg,#3d2e8f,#2b1d70); color:#fff; font-weight:800; cursor:pointer;
  transition:transform .08s ease, background .2s ease, box-shadow .2s ease; box-shadow:0 8px 18px #000a;
}
.panel button:hover{ background:linear-gradient(145deg,#4a39a6,#34237f); }
.panel button:active{ transform:translateY(2px); }

/* Overlay de ranking */
#leadOverlay{ display:none; align-items:center; justify-content:center; }
#leadOverlay .panel{ width:min(720px,92vw); max-height:80vh; overflow:auto; }
.lead-list{ list-style:none; margin:12px 0; padding:0; }
.lead-row{
  display:grid; grid-template-columns:48px 1fr 160px 110px 70px;
  gap:10px; align-items:center; padding:10px 12px;
  border-radius:10px; background:rgba(255,255,255,.04); margin-bottom:8px;
}
.lead-row .pos{ font-weight:800; opacity:.9; }
.lead-row .pts,.lead-row .tries{ text-align:right; }

/* Utilitários ------------------------------------------- */
.badge--pill{ border-radius:999px; }

/* Responsivo “micro” ------------------------------------ */
@media (max-width:560px){
  .wrap{ gap:10px; } 
  header{ padding:6px; } 
  .badge{ font-size:14px; }
  .controls{ grid-template-columns:repeat(3,44px); grid-template-rows:repeat(3,44px); gap:6px; }
  .btn span{ font-size:17px; }
  .lead-row{ grid-template-columns:40px 1fr 0 90px 60px; }
  .lead-row .phone{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ===== MOBILE/TABLET (<= 768px) ===== */
@media (max-width: 768px) {
  /* Libera o scroll vertical no mobile e corrige a altura */
  html, body{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    height:auto !important;
    min-height:100% !important;
  }

  .wrap{
    max-width:96vw !important;
    padding-left:12px;
    padding-right:12px;
    /* Reserva espaço REAL para os controles fixos */
    padding-bottom:calc(200px + env(safe-area-inset-bottom,0px)) !important;
  }

  #game{
    width:100% !important;
    height:auto !important;
    aspect-ratio:28/31;
    /* um respiro mínimo acima dos controles */
    margin:0 auto 10px !important;
  }

  /* Não usamos padding-bottom no body no mobile */
  body{ padding-bottom:0 !important; }

  /* Controles fixos e centralizados */
  .controls{
    position:fixed !important;
    left:50% !important;
    bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important;
    transform:translateX(-50%);
    z-index:999;
    background:transparent;
    grid-template-columns:repeat(3,56px);
    grid-template-rows:repeat(3,56px);
    gap:8px;
  }
  .controls > *{ width:56px; height:56px; }
  .btn span{ font-size:18px; }
}

/* ===== PHONES PEQUENOS (<= 420px) ===== */
@media (max-width:420px){
  .controls{
    grid-template-columns:repeat(3,52px);
    grid-template-rows:repeat(3,52px);
    gap:8px;
  }
  .controls > *{ width:52px; height:52px; }
  .btn span{ font-size:17px; }
}

/* ===== DESKTOP/NOTEBOOK (>= 769px) ===== */
@media (min-width: 769px){
  .wrap{
    max-width:min(82vw, 680px) !important;
    margin:0 auto !important;
    padding-left:10px !important;
    padding-right:10px !important;
    padding-bottom:14px !important;
  }
  .controls{
    position:static !important;
    transform:none !important;
    margin:8px auto 0 !important;
  }
  body{
    padding-bottom:14px !important;
    overflow:hidden !important; /* mantém o desktop travado */
    height:100% !important;
  }
  #game{
    margin-bottom:0 !important; /* se quiser respiro extra, use 110px */
  }
}



/* ===== Fix mobile board sizing: fill width, keep 28:31 aspect, avoid "zoomed" look ===== */
#game{
  display:block;
  width: min(92vmin, 100%);
  height: auto;           /* let CSS height follow width via aspect-ratio */
  aspect-ratio: 28 / 31;  /* Pac-man grid 28x31 */
  margin: 0 auto;
}

/* Edge-to-edge (optional) on very small phones */
@media (max-width: 420px){
  #game{
    width: 96vmin;
    max-width: 100%;
  }
  .hud{
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Fallback for browsers without aspect-ratio on canvas */
@supports not (aspect-ratio: 1){
  #game{
    width: min(92vmin, 100%);
    height: calc(min(92vmin, 100vw) * 31 / 28);
  }
}