/* ============================================================
   STAR WARS — The Arcade Game (Clone)  |  Estilo CRT 3D
   ============================================================ */

:root{
  --green: #2bff5a;
  --green-dim: #19a23a;
  --red: #ff2b2b;
  --red-dim: #b01818;
  --cyan: #7df9ff;
  --amber: #ffd23f;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:#000;
  overflow:hidden;
  font-family:"Courier New", Courier, monospace;
  color:var(--green);
  cursor:none;
}

#stage{
  position:fixed;
  inset:0;
  background:#000;
}

.home-link{
  position:fixed;
  top:14px;
  left:16px;
  z-index:80;
  padding:8px 12px;
  border:1px solid var(--cyan);
  background:rgba(0,0,0,.72);
  color:var(--cyan);
  font-size:13px;
  font-weight:bold;
  letter-spacing:2px;
  text-decoration:none;
  text-shadow:0 0 8px var(--cyan);
  cursor:pointer;
}
.home-link:hover,.home-link:focus-visible{
  background:var(--cyan);
  color:#001013;
  outline:none;
  box-shadow:0 0 18px var(--cyan);
}

#game{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Linhas de varredura do monitor CRT */
#scanlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.28) 3px,
    rgba(0,0,0,0.28) 4px
  );
  mix-blend-mode:multiply;
  z-index:50;
}
#stage::after{ /* vinheta + brilho de tubo */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:49;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.65) 100%);
}

/* ===================== HUD ===================== */
#hud{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:40;
  font-weight:bold;
  letter-spacing:2px;
}
#hud .lbl{ font-size:14px; opacity:.85; display:block; }
#hud-score{
  position:absolute; top:14px; left:20px; color:var(--red);
  text-shadow:0 0 8px var(--red);
}
#scoreVal{ font-size:30px; }
#hud-hi{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  text-align:center; color:var(--amber); text-shadow:0 0 8px var(--amber);
}
#hiVal{ font-size:20px; }
#hud-wave{
  position:absolute; top:14px; right:20px; text-align:right;
  color:var(--red); text-shadow:0 0 8px var(--red);
}
#waveVal{ font-size:30px; display:inline-block; }
#hud-wave .lbl{ display:block; }
#hud-phase{
  position:absolute; bottom:54px; left:50%; transform:translateX(-50%);
  color:var(--green); text-shadow:0 0 10px var(--green);
  font-size:16px; opacity:.9; letter-spacing:4px;
}
#hud-shields{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  text-align:center; color:var(--cyan); text-shadow:0 0 8px var(--cyan);
}
#shieldPips{ display:flex; gap:6px; justify-content:center; margin-top:4px; }
#shieldPips .pip{
  width:26px; height:10px; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan); transform:skewX(-18deg);
}
#shieldPips .pip.lost{ background:#0a2a2c; box-shadow:none; }

/* ===================== Overlays ===================== */
.overlay{
  position:absolute; inset:0; z-index:60;
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto;
  background:radial-gradient(ellipse at center, rgba(0,8,2,0.55), rgba(0,0,0,0.92));
  cursor:default;
}
.hidden{ display:none !important; }

.title-scroll{
  max-width:760px;
  width:100%;
  padding:32px 24px 60px;
  text-align:center;
}

/* Logo STAR WARS */
.logo{ margin:6px 0 4px; }
.logo-star, .logo-wars{
  font-weight:900;
  color:var(--amber);
  letter-spacing:14px;
  line-height:.92;
  text-shadow:0 0 18px rgba(255,210,63,.8), 0 0 40px rgba(255,160,0,.4);
  font-size:64px;
  transform:scaleY(1.25);
}
.subtitle{
  color:var(--cyan); letter-spacing:6px; font-size:15px; margin:14px 0 22px;
  text-shadow:0 0 10px var(--cyan);
}

.briefing{
  border:1px solid var(--green-dim);
  background:rgba(0,30,10,.25);
  padding:16px 20px; margin:0 auto 22px; max-width:640px;
  text-align:left; line-height:1.55; font-size:15px;
  box-shadow:0 0 22px rgba(43,255,90,.15) inset;
}
.briefing p{ margin:6px 0; }
.brief-head{ color:var(--cyan); text-align:center; letter-spacing:3px; margin-bottom:10px !important; }
.brief-force{
  color:var(--amber); text-align:center; letter-spacing:3px; margin-top:12px !important;
  text-shadow:0 0 10px var(--amber);
}
.red{ color:var(--red); text-shadow:0 0 8px var(--red); }
.green{ color:var(--green); text-shadow:0 0 8px var(--green); }

/* Tabela de pontuação (igual à da referência) */
.scoring{
  max-width:560px; margin:0 auto 22px; padding:14px 22px;
  border:1px solid var(--red-dim); color:#d36bff;
  text-shadow:0 0 8px rgba(190,90,255,.7);
}
.scoring-head{ letter-spacing:8px; font-size:22px; margin-bottom:12px; }
.scoring-row{ display:flex; justify-content:space-between; font-size:16px; padding:3px 0; letter-spacing:1px; }
.scoring-row.big{ font-size:17px; }
.scoring-gap{ height:14px; }

.controls{ color:var(--green); font-size:14px; margin-bottom:18px; line-height:1.6; }

.hiscores{
  max-width:420px; margin:0 auto 22px; padding:12px 18px;
  border:1px dashed var(--amber); color:var(--amber);
  text-shadow:0 0 6px var(--amber);
}
.hiscores h3{ letter-spacing:6px; font-size:16px; margin-bottom:10px; color:var(--amber); }
.hs-row{ display:flex; justify-content:space-between; font-size:16px; padding:2px 0; }
.hs-row .rank{ width:36px; text-align:left; opacity:.8; }
.hs-row .nm{ flex:1; text-align:left; letter-spacing:4px; }
.hs-row .sc{ width:120px; text-align:right; }
.hs-row.you{ color:var(--cyan); text-shadow:0 0 8px var(--cyan); }

.start-prompt{
  color:#fff; font-size:20px; letter-spacing:3px; margin:10px 0 8px;
  text-shadow:0 0 12px #fff;
}
.coin{ color:var(--cyan); font-size:13px; letter-spacing:4px; opacity:.8; }

.blink{ animation:blink 1s steps(2,start) infinite; }
@keyframes blink{ to{ visibility:hidden; } }

/* Botão de som */
#muteBtn{
  position:absolute; top:14px; right:16px;
  background:transparent; border:1px solid var(--green-dim); color:var(--green);
  font-size:18px; padding:6px 10px; cursor:pointer; z-index:61;
}

/* ===================== Game Over ===================== */
.go-inner{ text-align:center; padding:40px 24px; max-width:560px; width:100%; }
.go-title{
  color:var(--red); font-size:64px; font-weight:900; letter-spacing:10px;
  text-shadow:0 0 22px var(--red); margin-bottom:24px;
}
.go-stats{ font-size:20px; line-height:1.9; margin-bottom:24px; color:#fff; letter-spacing:2px; }
.go-stats .green{ font-size:24px; }

#newRecord{ margin:18px 0 26px; }
.rec-head{ font-size:28px; letter-spacing:6px; }
.rec-sub{ color:var(--cyan); letter-spacing:4px; margin:8px 0; }
#initialsInput{
  background:#000; border:2px solid var(--amber); color:var(--amber);
  font-family:inherit; font-size:40px; letter-spacing:18px; text-align:center;
  width:200px; padding:6px 0 6px 18px; text-transform:uppercase;
  text-shadow:0 0 10px var(--amber); outline:none; cursor:text;
}
button#saveScore, button#playAgain{
  display:inline-block; margin:18px auto 0;
  background:transparent; border:2px solid var(--green); color:var(--green);
  font-family:inherit; font-size:20px; font-weight:bold; letter-spacing:3px;
  padding:10px 26px; cursor:pointer; text-shadow:0 0 8px var(--green);
  transition:all .12s;
}
button#saveScore:hover, button#playAgain:hover{
  background:var(--green); color:#000; box-shadow:0 0 18px var(--green);
}

/* Cursor normal nos menus; mira desenhada (cursor oculto) durante o jogo */
.overlay, .overlay *{ cursor:default; }
button, input, .home-link{ cursor:pointer !important; }
#initialsInput{ cursor:text !important; }