/* REDLINE - preto, branco e vermelho. Sem gradientes, sem sombras suaves, sem cantos arredondados.
   --u = tamanho de 1 pixel lógico do jogo em px de CSS (definido por JS conforme a tela). */
:root {
  --red: #e10600;
  --u: 2.5px;
  --font: 'Press Start 2P', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-size: calc(var(--u) * 4);
  line-height: 1.5;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

#stage {
  position: relative;
  width: calc(var(--u) * 144);
  height: calc(var(--u) * 256);
  overflow: hidden;
  background: #000;
  outline: calc(var(--u) * 1) solid #1a1a1a;
}

#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- HUD ---- */
#hud { position: absolute; inset: 0; pointer-events: none; }

#hud-score {
  position: absolute;
  top: calc(var(--u) * 14);
  left: 0; right: 0;
  text-align: center;
  font-size: calc(var(--u) * 16);
  line-height: 1;
  color: #fff;
  text-shadow:
    calc(var(--u) * 1) 0 0 #000, calc(var(--u) * -1) 0 0 #000,
    0 calc(var(--u) * 1) 0 #000, 0 calc(var(--u) * -1) 0 #000,
    calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--red),
    calc(var(--u) * 1) calc(var(--u) * 2) 0 var(--red);
}
#hud-score.pop { animation: pop 0.16s steps(3); }
@keyframes pop { 0% { transform: translateY(calc(var(--u) * -3)); } 100% { transform: none; } }

#hud-best {
  position: absolute;
  top: calc(var(--u) * 4);
  left: calc(var(--u) * 5);
  font-size: calc(var(--u) * 3.5);
  color: var(--red);
  text-shadow: calc(var(--u) * 0.75) calc(var(--u) * 0.75) 0 #000;
}

#hint {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--u) * 150);
  text-align: center;
  pointer-events: none;
}
#hint-main {
  display: block;
  font-size: calc(var(--u) * 6);
  animation: blink 0.9s steps(1) infinite;
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--red);
}
#hint-sub { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 3.2); color: var(--red); }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

#banner {
  position: absolute;
  left: 0; right: 0; top: 0;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  background: var(--red);
  color: #fff;
  font-size: calc(var(--u) * 3);
  text-align: center;
  z-index: 5;
  pointer-events: none;
}

.icon-btn {
  position: absolute;
  right: calc(var(--u) * 4);
  top: calc(var(--u) * 4);
  z-index: 6;
  font: inherit;
  font-size: calc(var(--u) * 2.8);
  color: #fff;
  background: #000;
  border: calc(var(--u) * 0.75) solid #fff;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2);
  cursor: pointer;
}
.icon-btn.off { color: var(--red); border-color: var(--red); text-decoration: line-through; }
#stage.playing .icon-btn { opacity: 0.35; }

/* ------------------------------------------------------------- telas ---- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: calc(var(--u) * 10) calc(var(--u) * 9) calc(var(--u) * 8);
  z-index: 3;
}

/* logo */
.logo {
  margin: calc(var(--u) * 12) 0 0;
  text-align: center;
  font-size: calc(var(--u) * 17);
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
  color: #fff;
  text-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--red);
}
.logo .r { color: var(--red); text-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 #fff; }

#gauge-strip { display: flex; gap: calc(var(--u) * 1); justify-content: center; margin-top: calc(var(--u) * 6); }
#gauge-strip i { display: block; width: calc(var(--u) * 3); height: calc(var(--u) * 4); background: #fff; }
#gauge-strip i.hot { background: var(--red); }
#gauge-strip i.tall { height: calc(var(--u) * 7); margin-top: calc(var(--u) * -3); }

.tagline {
  margin: calc(var(--u) * 7) 0 0;
  text-align: center;
  font-size: calc(var(--u) * 4);
  color: #fff;
}
.record {
  margin: calc(var(--u) * 3) 0 calc(var(--u) * 7);
  text-align: center;
  font-size: calc(var(--u) * 3.2);
  color: var(--red);
  min-height: 1.5em;
}
.record b { color: #fff; font-weight: normal; }

form { display: flex; flex-direction: column; }
label, dt, .lbl { font-size: calc(var(--u) * 3); color: var(--red); margin-bottom: calc(var(--u) * 1.5); }

input[type='text'] {
  width: 100%;
  font: inherit;
  font-size: calc(var(--u) * 4.5);
  color: #fff;
  background: #000;
  border: calc(var(--u) * 1) solid #fff;
  border-radius: 0;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  margin: 0 0 calc(var(--u) * 4);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  text-transform: none;
  caret-color: var(--red);
}
input[type='text']::placeholder { color: #555; }
input[type='text']:focus { border-color: var(--red); box-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 var(--red); }

.err { min-height: calc(var(--u) * 5); margin: 0 0 calc(var(--u) * 2); font-size: calc(var(--u) * 3); color: var(--red); }

/* botões */
.btn {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: calc(var(--u) * 4.5);
  color: #fff;
  background: #000;
  border: calc(var(--u) * 1) solid #fff;
  border-radius: 0;
  padding: calc(var(--u) * 3.5) calc(var(--u) * 3);
  cursor: pointer;
  text-align: center;
  box-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 var(--red);
  transition: none;
}
.btn.primary { background: var(--red); border-color: #fff; box-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 #fff; font-size: calc(var(--u) * 5.5); padding: calc(var(--u) * 4.5) calc(var(--u) * 3); }
.btn.small { font-size: calc(var(--u) * 3); padding: calc(var(--u) * 2.5) calc(var(--u) * 2); flex: 1; }
.btn:active:not(:disabled) { transform: translate(calc(var(--u) * 1.5), calc(var(--u) * 1.5)); box-shadow: none; }
.btn:disabled { opacity: 0.5; cursor: wait; }
.btn:focus-visible, .icon-btn:focus-visible { outline: calc(var(--u) * 1) dashed #fff; outline-offset: calc(var(--u) * 1); }

.row { display: flex; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 6); }

/* game over */
.over { justify-content: center; background: #000; border: calc(var(--u) * 1) solid #000; }
.over { inset: calc(var(--u) * 24) calc(var(--u) * 6) auto; padding: calc(var(--u) * 7); background: #000; border: calc(var(--u) * 1.5) solid #fff; box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--red); animation: drop 0.28s steps(5); }
@keyframes drop { 0% { transform: translateY(calc(var(--u) * -40)); } 100% { transform: none; } }
.title-over { margin: 0; text-align: center; font-size: calc(var(--u) * 8); font-weight: normal; color: var(--red); text-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 #fff; }
.new-pb { margin: calc(var(--u) * 4) 0 0; text-align: center; font-size: calc(var(--u) * 3.6); color: #fff; background: var(--red); padding: calc(var(--u) * 2); animation: blink 0.7s steps(1) infinite; }
.score-box { display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--u) * 6); }
.score-box .big { font-size: calc(var(--u) * 17); line-height: 1.2; color: #fff; text-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 var(--red); }
.status { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 2.8); color: #888; }
.status.ok { color: #fff; background: var(--red); padding: calc(var(--u) * 0.8) calc(var(--u) * 2); }
.status.bad { color: #000; background: #fff; padding: calc(var(--u) * 0.8) calc(var(--u) * 2); }
.status.wait::after { content: ''; animation: dots 1s steps(1) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.stats { display: flex; gap: calc(var(--u) * 4); margin: calc(var(--u) * 6) 0 0; }
.stats > div { flex: 1; border: calc(var(--u) * 0.75) solid #444; padding: calc(var(--u) * 2.5); text-align: center; }
.stats dt { margin: 0 0 calc(var(--u) * 1.5); }
.stats dd { margin: 0; font-size: calc(var(--u) * 5.5); color: #fff; }
.stats.three dd { font-size: calc(var(--u) * 4.5); }
.note { min-height: calc(var(--u) * 5); margin: calc(var(--u) * 3) 0 calc(var(--u) * 4); font-size: calc(var(--u) * 2.8); color: #aaa; text-align: center; }
.over .btn.primary { margin-top: calc(var(--u) * 1); }

/* ranking e perfil */
.lb, .profile { padding-top: calc(var(--u) * 8); background: #000; }
header h2 { margin: 0; font-size: calc(var(--u) * 6.5); font-weight: normal; color: var(--red); text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #fff; }
.sub { margin: calc(var(--u) * 2) 0 calc(var(--u) * 4); font-size: calc(var(--u) * 3); color: #aaa; }
h3 { margin: calc(var(--u) * 5) 0 calc(var(--u) * 2); font-size: calc(var(--u) * 3.2); font-weight: normal; color: var(--red); }

.list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border-top: calc(var(--u) * 0.75) solid var(--red);
  border-bottom: calc(var(--u) * 0.75) solid var(--red);
  -webkit-user-select: none;
}
.list.short { flex: 0 0 calc(var(--u) * 54); }
.list::-webkit-scrollbar { width: calc(var(--u) * 2); }
.list::-webkit-scrollbar-track { background: #111; }
.list::-webkit-scrollbar-thumb { background: var(--red); }
.list { scrollbar-width: thin; scrollbar-color: var(--red) #111; }

.row-lb {
  display: grid;
  grid-template-columns: calc(var(--u) * 11) 1fr auto;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2);
  border-bottom: calc(var(--u) * 0.5) solid #222;
  font-size: calc(var(--u) * 3.4);
}
.row-lb .rk { color: #888; }
.row-lb .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-lb .ig { display: block; font-size: calc(var(--u) * 2.6); color: var(--red); margin-top: calc(var(--u) * 0.8); overflow: hidden; text-overflow: ellipsis; }
.row-lb .sc { color: #fff; font-size: calc(var(--u) * 4); }
.row-lb.top { background: var(--red); color: #fff; border-bottom-color: #000; padding-top: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 3); }
.row-lb.top .rk { color: #000; background: #fff; text-align: center; padding: calc(var(--u) * 1) 0; }
.row-lb.top .ig { color: #000; }
.row-lb.top .sc { font-size: calc(var(--u) * 5); }
.row-lb.top.t1 { font-size: calc(var(--u) * 4); padding-top: calc(var(--u) * 4); padding-bottom: calc(var(--u) * 4); }
.row-lb.top.t3 { background: #000; color: var(--red); outline: calc(var(--u) * 0.75) solid var(--red); outline-offset: calc(var(--u) * -0.75); }
.row-lb.top.t3 .rk { background: var(--red); color: #fff; }
.row-lb.top.t3 .ig { color: #fff; }
.row-lb.top.t3 .sc { color: #fff; }
.row-lb.mine { outline: calc(var(--u) * 1) solid #fff; outline-offset: calc(var(--u) * -1); }
.row-lb.mine .nm::after { content: ' < YOU'; color: #fff; background: var(--red); font-size: calc(var(--u) * 2.4); padding: 0 calc(var(--u) * 1); margin-left: calc(var(--u) * 1); }
.list .empty { padding: calc(var(--u) * 6) calc(var(--u) * 3); text-align: center; color: #aaa; font-size: calc(var(--u) * 3.2); line-height: 1.8; }
.list .empty .btn { margin-top: calc(var(--u) * 4); }

.me { margin-top: calc(var(--u) * 3); }
.me .row-lb { border: calc(var(--u) * 0.75) solid #fff; }

#pf-form input { margin-bottom: calc(var(--u) * 2.5); font-size: calc(var(--u) * 3.6); padding: calc(var(--u) * 2) calc(var(--u) * 2.5); }
#pf-form { margin-top: calc(var(--u) * 4); }
#pf-form .btn { align-self: flex-start; }
.pf-row { display: flex; justify-content: space-between; padding: calc(var(--u) * 2) calc(var(--u) * 2); border-bottom: calc(var(--u) * 0.5) solid #222; font-size: calc(var(--u) * 3.2); }
.pf-row .pb { color: #fff; background: var(--red); padding: 0 calc(var(--u) * 1); font-size: calc(var(--u) * 2.4); margin-left: calc(var(--u) * 2); }
.pf-row .d { color: #888; }

/* pausa e rotação */
.pause { background: #000; align-items: center; justify-content: center; text-align: center; font-size: calc(var(--u) * 8); z-index: 8; }
.pause .sub { font-size: calc(var(--u) * 3.4); color: var(--red); animation: blink 0.9s steps(1) infinite; }

#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  color: #fff;
  font-family: var(--font);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 14px;
  font-size: 14px;
}
#rotate .sub { font-size: 9px; color: var(--red); margin: 0; }
#rotate p { margin: 0; }
#rotate .phone {
  width: 44px; height: 76px;
  border: 4px solid #fff;
  background: #000;
  box-shadow: 4px 4px 0 var(--red);
  animation: tilt 1.6s steps(2) infinite;
}
@keyframes tilt { 0% { transform: rotate(90deg); } 50% { transform: rotate(0); } 100% { transform: rotate(0); } }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #rotate { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  #hint-main, .new-pb, .pause .sub { animation: none; }
  .over { animation: none; }
}