/* ═══════════════════════════════════════════════════
   NEON RUNNER — style.css
   Font locale: fonts/Orbitron-Bold.ttf
   Rescale dinamico via #game-wrap + JS transform
═══════════════════════════════════════════════════ */

/* ── FONT LOCALE ── */
@font-face {
  font-family: 'GameFont';
  src: url('fonts/Orbitron-Bold.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%;
  overflow:hidden;
  background:#000;
  font-family:'GameFont','Orbitron',monospace;
  user-select:none; -webkit-user-select:none;
}

/* ══════════════════════════════════════════════════
   GAME WRAP — contenitore fisso 1280×720.
   Il JS calcola la scala e applica transform:scale()
   per il rescale proporzionale.
══════════════════════════════════════════════════ */
#game-wrap {
  position:fixed;
  top:0; left:0;
  width:1280px;
  height:720px;
  transform-origin:top left;
  /* transition smooth gravity flip */
  transition: transform 0.55s cubic-bezier(0.68,-0.55,0.27,1.55);
}
#cv {
  display:block;
  position:absolute;
  top:0; left:0;
  width:1280px !important;
  height:720px !important;
}
#flash {
  position:absolute; inset:0; z-index:99;
  pointer-events:none; opacity:0; background:#fff;
  transition:opacity .05s;
}
#pause-screen {
  display:none;
  position:absolute; inset:0; z-index:60;
  background:rgba(0,0,0,.80);
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
#pause-screen.visible { display:flex; }
.pause-title {
  font-family:'GameFont','Orbitron',monospace;
  font-size:54px; font-weight:900; letter-spacing:12px;
  color:#ff2d78; text-shadow:0 0 24px #ff2d78;
  animation:psfl 2.4s infinite;
}
@keyframes psfl{0%,92%,100%{opacity:1}93%{opacity:.3}97%{opacity:.8}}
.pause-sub {
  font-family:'GameFont','Orbitron',monospace;
  font-size:13px; letter-spacing:6px; color:rgba(255,255,255,.45);
}

/* ── HUD ── */
#hud {
  position:absolute; top:0; left:0; right:0; height:52px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; z-index:10; pointer-events:none;
  transform-origin:center center;
  transition:transform 0.3s ease;
}
.hi { display:flex; flex-direction:column; align-items:center; width:200px; flex-shrink:0; }
.hl { font-size:9px; letter-spacing:5px; margin-bottom:1px; white-space:nowrap; }
.hv { font-size:22px; font-weight:900; letter-spacing:2px; color:#fff;
      font-variant-numeric:tabular-nums;
      min-width:4ch; text-align:center; display:block; }

/* ── OVERLAY ── */
#ov {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:20; background:rgba(0,0,0,.88);
}
#ov.off { display:none; }

/* ── TITOLO ── */
#title-wrap { position:relative; display:inline-block; margin-bottom:10px; }
.tl {
  font-family:'GameFont','Orbitron',monospace;
  font-size:clamp(28px,4.5vw,68px);
  font-weight:900; letter-spacing:10px; text-transform:uppercase; line-height:1; white-space:nowrap;
}
.t-main{color:#fff;text-shadow:0 0 10px #ff2d78,0 0 30px #ff2d78,0 0 80px rgba(255,45,120,.4);position:relative;z-index:3;animation:tmain 6s infinite}
@keyframes tmain{0%,92%,100%{opacity:1;transform:none}93%{opacity:.8;transform:translateX(-2px)}94%{opacity:1;transform:translateX(2px)}95%{opacity:.9}97%{transform:translateX(-1px)}98%{transform:none}}
.t-sh1{position:absolute;inset:0;z-index:1;color:transparent;text-shadow:4px 4px 0 #ff2d78;animation:ts1 6s infinite;opacity:.4}
@keyframes ts1{0%,91%,100%{opacity:.4;transform:none}92%{opacity:.8;transform:translate(6px,2px)}93%{opacity:.3}96%{opacity:.5;transform:translate(-4px,1px)}97%{opacity:.4;transform:none}}
.t-sh2{position:absolute;inset:0;z-index:1;color:transparent;text-shadow:-3px -2px 0 #00f7ff;animation:ts2 7s infinite;opacity:.3}
@keyframes ts2{0%,88%,100%{opacity:.3;transform:none}89%{opacity:.7;transform:translate(-5px,-1px)}90%{opacity:.2}95%{opacity:.4;transform:translate(3px,2px)}96%{opacity:.3;transform:none}}
.t-g1{position:absolute;inset:0;z-index:4;color:#ff2d78;clip-path:polygon(0 30%,100% 30%,100% 45%,0 45%);animation:tg1 4s infinite;mix-blend-mode:screen}
@keyframes tg1{0%,89%,100%{transform:none;opacity:0}90%{transform:translateX(-8px);opacity:.9}91%{transform:translateX(5px);opacity:.7}92%{transform:none;opacity:0}}
.t-g2{position:absolute;inset:0;z-index:4;color:#00f7ff;clip-path:polygon(0 62%,100% 62%,100% 74%,0 74%);animation:tg2 5s infinite;mix-blend-mode:screen}
@keyframes tg2{0%,84%,100%{transform:none;opacity:0}85%{transform:translateX(10px);opacity:.8}86%{transform:translateX(-6px);opacity:.6}87%{transform:none;opacity:0}}
.t-scan{position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.2)2px,rgba(0,0,0,.2)3px)}

.os{font-size:11px;letter-spacing:7px;color:#00f7ff;text-shadow:0 0 10px #00f7ff;margin-bottom:28px;animation:pu 1.8s infinite}
@keyframes pu{0%,100%{opacity:1}50%{opacity:.2}}
.ok{font-size:13px;letter-spacing:2px;line-height:2.4;text-align:center;margin-bottom:30px;color:rgba(255,255,255,.65)}
.ok kbd{background:rgba(255,45,120,.15);border:1px solid #ff2d78;border-radius:4px;padding:1px 9px;color:#ff2d78;font-family:inherit}
.ob{font-family:'GameFont','Orbitron',monospace;font-size:15px;font-weight:900;letter-spacing:5px;border:none;padding:14px 52px;cursor:pointer;background:#ff2d78;color:#000;clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px)100%,0%100%);box-shadow:0 0 20px #ff2d78;transition:.12s}
.ob:hover{transform:scale(1.06);background:#00f7ff;box-shadow:0 0 20px #00f7ff}
.gsc{font-family:'GameFont','Orbitron',monospace;font-size:18px;letter-spacing:4px;color:#fff;margin-top:18px;margin-bottom:6px}
.gbs{font-family:'GameFont','Orbitron',monospace;font-size:13px;letter-spacing:4px;color:#ffe600;margin-bottom:28px}
#menu-tabs{display:flex;gap:0;margin:18px 0 0;border-bottom:2px solid rgba(255,45,120,.3)}
.mtab{font-family:'GameFont','Orbitron',monospace;font-size:11px;font-weight:700;letter-spacing:4px;border:none;background:none;color:rgba(255,255,255,.4);padding:10px 28px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.15s}
.mtab.active{color:#ff2d78;border-bottom-color:#ff2d78;text-shadow:0 0 10px #ff2d78}
.mtab:hover{color:#fff}
#panel-play,#panel-lb{display:flex;flex-direction:column;align-items:center;padding-top:20px;min-width:min(500px,90vw)}
#name-row{display:flex;align-items:center;gap:12px;margin-bottom:22px;margin-top:-8px}
#pname{font-family:'GameFont','Orbitron',monospace;font-size:15px;font-weight:700;letter-spacing:4px;background:rgba(255,45,120,.1);border:2px solid #ff2d78;color:#fff;padding:8px 16px;width:160px;text-transform:uppercase;outline:none;text-align:center}
#pname::placeholder{color:rgba(255,255,255,.3)}
#pname:focus{box-shadow:0 0 14px #ff2d7866}
#lb-list{width:100%;max-height:300px;overflow-y:auto}
.lb-row{display:flex;align-items:center;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.07);gap:12px;font-family:'GameFont','Orbitron',monospace}
.lb-row.me{background:rgba(255,45,120,.12);border-color:rgba(255,45,120,.3)}
.lb-pos{width:28px;font-size:11px;color:rgba(255,255,255,.4);font-weight:700;text-align:right}
.lb-pos.gold{color:#ffe600;text-shadow:0 0 8px #ffe600}
.lb-pos.silver{color:#c0c0c0;text-shadow:0 0 6px #c0c0c0}
.lb-pos.bronze{color:#cd7f32;text-shadow:0 0 6px #cd7f32}
.lb-name{flex:1;font-size:13px;letter-spacing:2px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{font-size:15px;font-weight:900;letter-spacing:2px;color:#ff2d78;text-shadow:0 0 8px #ff2d7866}
.lb-loading{font-family:'GameFont','Orbitron',monospace;font-size:12px;letter-spacing:4px;color:rgba(255,255,255,.4);padding:30px;text-align:center}
.lb-empty{font-family:'GameFont','Orbitron',monospace;font-size:11px;letter-spacing:3px;color:rgba(255,255,255,.3);padding:30px;text-align:center}

/* ── MAPI GAMES BRANDING ── */
#branding {
  position: absolute;
  bottom: 8px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'GameFont','Orbitron',monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: #ff2d78;
  opacity: 0.7;
  z-index: 5;
  pointer-events: none;
}
.menu-branding {
  font-family: 'GameFont','Orbitron',monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: #ff2d78;
  opacity: 0.75;
  margin-top: 14px;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 0 10px #ff2d7888;
}

/* ── HOW TO PLAY ── */
.howto-scroll{width:min(560px,92vw);max-height:420px;overflow-y:auto;padding:4px 2px;scrollbar-width:thin;scrollbar-color:#ff2d78 rgba(255,45,120,.1)}
.howto-scroll::-webkit-scrollbar{width:4px}
.howto-scroll::-webkit-scrollbar-track{background:rgba(255,45,120,.1)}
.howto-scroll::-webkit-scrollbar-thumb{background:#ff2d78;border-radius:2px}
.howto-block{border-left:3px solid #ff2d78;padding:10px 16px;margin-bottom:12px;background:rgba(255,45,120,.05);border-radius:0 4px 4px 0}
.howto-title{font-family:'GameFont','Orbitron',monospace;font-size:11px;letter-spacing:4px;color:#ff2d78;text-shadow:0 0 8px #ff2d7866;margin-bottom:8px}
.howto-text{font-family:'GameFont','Orbitron',monospace;font-size:10px;letter-spacing:1.5px;color:rgba(255,255,255,.78);line-height:2.2}
.howto-key{background:rgba(255,45,120,.15);border:1px solid #ff2d78;border-radius:3px;padding:1px 7px;color:#ff2d78;font-size:10px}
.howto-pu{font-size:11px;font-weight:700;letter-spacing:2px}

/* ── ACHIEVEMENTS — neon glass style ── */
.ach-scroll{
  width:min(560px,92vw);max-height:420px;overflow-y:auto;
  padding:6px 2px;
  scrollbar-width:thin;scrollbar-color:#ffe600 rgba(255,230,0,.1);
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.ach-scroll::-webkit-scrollbar{width:4px}
.ach-scroll::-webkit-scrollbar-track{background:rgba(255,230,0,.08)}
.ach-scroll::-webkit-scrollbar-thumb{background:#ffe600;border-radius:2px}
/* carta achievement — neon glass */
.ach-row{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 10px 12px;
  border-radius:8px;
  font-family:'GameFont','Orbitron',monospace;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(4px);
  transition:.2s;
}
.ach-row.done{
  border-color:rgba(255,230,0,.45);
  background:rgba(255,230,0,.06);
  box-shadow:0 0 18px rgba(255,230,0,.12), inset 0 0 20px rgba(255,230,0,.04);
}
.ach-row.done::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,230,0,.08) 0%,transparent 60%);
  pointer-events:none;
}
/* icona neon glass */
.ach-icon-wrap{
  width:48px;height:48px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  margin-bottom:8px;
  position:relative;
}
.ach-row.done .ach-icon-wrap{
  background:rgba(255,230,0,.12);
  border:1.5px solid rgba(255,230,0,.4);
  box-shadow:0 0 14px rgba(255,230,0,.25),inset 0 0 10px rgba(255,230,0,.08);
}
.ach-row:not(.done) .ach-icon-wrap{
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.1);
  filter:grayscale(1) brightness(.4);
}
.ach-label{
  font-size:9px;font-weight:700;letter-spacing:2.5px;
  color:#fff;text-align:center;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;
}
.ach-row:not(.done) .ach-label{color:rgba(255,255,255,.3)}
.ach-row.done .ach-label{color:#ffe600;text-shadow:0 0 8px rgba(255,230,0,.6)}
.ach-desc{
  font-size:8px;letter-spacing:1px;
  color:rgba(255,255,255,.4);text-align:center;line-height:1.6;
}
.ach-row.done .ach-desc{color:rgba(255,255,255,.6)}
/* badge check */
.ach-check{
  position:absolute;top:8px;right:8px;
  font-size:11px;color:#ffe600;
  text-shadow:0 0 8px #ffe600;
}
/* locked shimmer */
.ach-row:not(.done){
  animation:achshim 4s infinite;
}
@keyframes achshim{
  0%,100%{border-color:rgba(255,255,255,.06)}
  50%{border-color:rgba(255,255,255,.12)}
}

/* ── MENU TABS (4 tab versione) ── */
#menu-tabs{flex-wrap:wrap}
.mtab{font-size:9px;padding:8px 16px;letter-spacing:2px}

/* ── SPLASH SCREEN ── */
#splash-screen {
  position:fixed; inset:0; z-index:9999;
  background:#000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer;
}
#splash-img {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute; inset:0;
}
#splash-tap {
  position:relative; z-index:2;
  font-family:'GameFont','Orbitron',monospace;
  font-size:clamp(14px,2.5vw,28px);
  letter-spacing:8px;
  color:#fff;
  text-shadow:0 0 20px #ff2d78, 0 0 40px #ff2d78;
  animation:splashBlink 1.1s ease-in-out infinite;
  margin-top:60vh;
}
@keyframes splashBlink {
  0%,100%{opacity:1} 50%{opacity:0}
}
@keyframes splashOut {
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.04)}
}

/* ── GAME OVER TITLE ── */
.go-title-wrap {
  position:relative; display:inline-block;
  margin-bottom:14px;
}
.go-main {
  font-family:'GameFont','Orbitron',monospace;
  font-size:clamp(32px,6vw,72px);
  font-weight:900; letter-spacing:8px;
  text-transform:uppercase; line-height:1;
  position:relative; z-index:2;
  animation:goGlitch 2.4s infinite;
}
.go-shadow {
  position:absolute; inset:0; z-index:1;
  font-family:'GameFont','Orbitron',monospace;
  font-size:clamp(32px,6vw,72px);
  font-weight:900; letter-spacing:8px;
  color:transparent;
  text-shadow:4px 3px 0 rgba(255,45,120,.5);
  animation:goShadow 2.4s infinite;
}
.go-scan {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    transparent 0,transparent 2px,
    rgba(0,0,0,.15)2px,rgba(0,0,0,.15)3px);
}
@keyframes goGlitch {
  0%,88%,100%{transform:none;opacity:1}
  89%{transform:translateX(-4px);opacity:.9}
  90%{transform:translateX(3px);opacity:1}
  91%{transform:none}
  94%{transform:translateX(-2px) skewX(-3deg)}
  95%{transform:none}
}
@keyframes goShadow {
  0%,88%,100%{opacity:.5;transform:none}
  89%{opacity:.9;transform:translate(8px,2px)}
  90%{opacity:.3;transform:translate(-5px,-1px)}
  91%{opacity:.5;transform:none}
}

/* ── RESET ALL BUTTON ── */
#reset-btn {
  background:transparent;
  border:1px solid rgba(255,45,120,.35);
  color:rgba(255,45,120,.6);
  font-family:'GameFont','Orbitron',monospace;
  font-size:9px; letter-spacing:3px;
  padding:7px 18px; cursor:pointer;
  margin-top:10px;
  transition:.15s;
  border-radius:2px;
}
#reset-btn:hover {
  border-color:#ff2d78; color:#ff2d78;
  box-shadow:0 0 10px rgba(255,45,120,.3);
}

/* ── NOME REGISTRATO (etichetta fissa) ── */
.name-fixed {
  display:flex; align-items:center; gap:10px;
  margin-bottom:22px; margin-top:-8px;
  padding:8px 18px;
  border:1.5px solid rgba(255,45,120,.4);
  background:rgba(255,45,120,.06);
  border-radius:3px;
}
.name-label {
  font-family:'GameFont','Orbitron',monospace;
  font-size:9px; letter-spacing:4px;
  color:rgba(255,255,255,.4);
}
.name-value {
  font-family:'GameFont','Orbitron',monospace;
  font-size:15px; font-weight:900; letter-spacing:4px;
  color:#ff2d78; text-shadow:0 0 10px #ff2d7866;
}