@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
:root{--cyan:#00f5ff;--pink:#ff0090;--green:#39ff14;--yellow:#fff200;--dark:#030810;}
body{background:var(--dark);color:var(--cyan);font-family:'Share Tech Mono',monospace;overflow:hidden;width:100vw;height:100vh;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,245,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,245,255,0.04) 1px,transparent 1px);
  background-size:40px 40px;}
#wrap{position:relative;z-index:1;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;}
#hud{width:100%;display:flex;align-items:center;justify-content:space-between;padding:5px 16px;flex-shrink:0;
  background:rgba(0,10,30,0.92);border-bottom:1px solid rgba(0,245,255,0.2);}
#logo{font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.2rem;letter-spacing:6px;
  color:var(--cyan);text-shadow:0 0 10px var(--cyan),0 0 30px rgba(0,245,255,0.4);}
.stat{text-align:center;}
.stat-label{font-size:0.48rem;color:rgba(0,245,255,0.5);letter-spacing:3px;text-transform:uppercase;}
.stat-val{font-family:'Orbitron',sans-serif;font-size:1rem;color:var(--green);text-shadow:0 0 8px var(--green);}
#gameArea{position:relative;flex:1;width:100%;overflow:hidden;}
#gameCanvas{display:block;}
#lb{position:absolute;top:8px;right:8px;width:155px;background:rgba(0,8,20,0.88);
  border:1px solid rgba(0,245,255,0.2);border-radius:4px;padding:8px;font-size:0.65rem;}
#lb h3{font-family:'Orbitron',sans-serif;font-size:0.5rem;letter-spacing:4px;color:var(--cyan);
  text-align:center;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(0,245,255,0.15);}
.lr{display:flex;align-items:center;gap:5px;padding:2px 0;}
.lr-rank{color:rgba(255,255,255,0.35);width:12px;text-align:right;font-size:0.58rem;}
.lr-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.lr-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,0.7);}
.lr-sc{color:var(--yellow);font-family:'Orbitron',sans-serif;font-size:0.58rem;}
#minimap{position:absolute;bottom:8px;right:8px;border:1px solid rgba(0,245,255,0.3);border-radius:3px;}
#boostWrap{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;font-size:0.58rem;color:rgba(0,245,255,0.45);letter-spacing:2px;}
#boostTrack{width:110px;height:5px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;}
#boostFill{height:100%;width:100%;background:linear-gradient(90deg,var(--pink),var(--yellow));border-radius:3px;box-shadow:0 0 6px var(--pink);}
#hint{position:absolute;bottom:10px;left:8px;font-size:0.56rem;color:rgba(0,245,255,0.28);line-height:1.9;}
#connStatus{
  position:absolute;top:10px;left:10px;
  padding:6px 10px;border-radius:6px;
  background:rgba(0,10,30,0.75);
  color:var(--yellow);font-size:0.65rem;letter-spacing:1px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 0 8px rgba(0,245,255,0.25);
  pointer-events:none;z-index:5;
}
/* ── OVERLAY ── */
#overlay{
  position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:99;
  background:#020e1a;
  overflow:hidden;
}
/* deep radial bg glow */
#ovBg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(0,80,100,0.45) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,40,70,0.6) 0%, transparent 60%);
}

/* Logo */
#ovLogo{
  position:relative;z-index:2;
  font-family:'Russo One',sans-serif;
  font-size:clamp(3rem,10vw,6rem);
  letter-spacing:2px;
  font-style:italic;
  color:#00eeff;
  line-height:1;
  margin-bottom:2px;
  text-shadow:
    0 0 8px #00eeff,
    0 0 20px #00ccdd,
    0 0 50px rgba(0,220,255,0.6),
    0 0 100px rgba(0,200,255,0.25);
  animation:logoFlicker 3s ease-in-out infinite;
  -webkit-text-stroke:1px rgba(0,255,255,0.3);
}
#ovLogo .dot-io{
  color:#b0f8ff;
  text-shadow:0 0 10px #b0f8ff,0 0 30px rgba(120,240,255,0.5);
}
@keyframes logoFlicker{
  0%,100%{
    text-shadow:0 0 8px #00eeff,0 0 20px #00ccdd,0 0 50px rgba(0,220,255,0.6),0 0 100px rgba(0,200,255,0.25);
  }
  45%{
    text-shadow:0 0 12px #00ffff,0 0 30px #00ddee,0 0 70px rgba(0,230,255,0.85),0 0 130px rgba(0,210,255,0.4);
  }
  47%{
    text-shadow:0 0 4px #00ccdd,0 0 10px #009baa,0 0 30px rgba(0,180,200,0.4);
  }
  50%{
    text-shadow:0 0 12px #00ffff,0 0 30px #00ddee,0 0 70px rgba(0,230,255,0.85),0 0 130px rgba(0,210,255,0.4);
  }
}

/* Mini snake demo canvas */
#demoCanvas{
  position:relative;z-index:2;
  display:block;
  margin-bottom:6px;
}

/* EAT TO GROW */
#eatToGrow{
  position:relative;z-index:2;
  font-family:'Orbitron',sans-serif;font-size:0.72rem;
  letter-spacing:6px;color:rgba(0,210,230,0.6);
  margin-bottom:24px;text-transform:uppercase;
}

/* Death msg */
#deathMsg{
  position:relative;z-index:2;
  font-family:'Orbitron',sans-serif;font-size:1.3rem;
  color:#ff0090;text-shadow:0 0 20px #ff0090;
  letter-spacing:4px;display:none;margin-bottom:4px;
}
#finalScore{
  position:relative;z-index:2;
  font-size:0.72rem;color:#fff200;letter-spacing:2px;
  display:none;margin-bottom:16px;
}

/* Nickname input */
#nickWrap{position:relative;z-index:2;width:min(400px,78vw);margin-bottom:14px;}
#nickInput{
  width:100%;padding:15px 22px;
  background:rgba(0,18,30,0.75);
  border:2px solid #00d8f0;
  border-radius:10px;
  color:rgba(255,255,255,0.55);
  font-family:'Orbitron',sans-serif;font-size:0.9rem;
  letter-spacing:2px;outline:none;
  box-shadow:0 0 20px rgba(0,216,240,0.25),0 0 0 1px rgba(0,216,240,0.08) inset;
  transition:all .3s;
}
#nickInput::placeholder{
  color:rgba(255,255,255,0.22);
  font-family:'Orbitron',sans-serif;
  font-size:0.88rem;
  letter-spacing:1px;
}
#nickInput:focus{
  border-color:#00f5ff;
  box-shadow:0 0 32px rgba(0,245,255,0.5),0 0 0 1px rgba(0,245,255,0.1) inset;
  color:#fff;
}

/* PLAY button — solid teal like screenshot */
#playBtn{
  position:relative;z-index:2;
  width:min(240px,65vw);padding:17px 0;
  background:linear-gradient(180deg,#10cfd8 0%,#0aabb4 50%,#079aa2 100%);
  border:none;border-radius:10px;
  color:#ffffff;
  font-family:'Russo One',sans-serif;
  font-size:1.5rem;letter-spacing:5px;
  cursor:pointer;text-transform:uppercase;
  transition:all .2s;
  box-shadow:
    0 0 18px rgba(0,200,215,0.5),
    0 4px 0 rgba(0,100,110,0.8),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
#playBtn:hover{
  background:linear-gradient(180deg,#18e8f2 0%,#0fc8d2 50%,#0aaeb8 100%);
  box-shadow:0 0 35px rgba(0,220,235,0.7),0 4px 0 rgba(0,100,110,0.8),inset 0 1px 0 rgba(255,255,255,0.25);
  transform:translateY(-2px);
}
#playBtn:active{
  transform:translateY(2px);
  box-shadow:0 0 18px rgba(0,200,215,0.4),0 1px 0 rgba(0,100,110,0.8),inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Gear button */
#settingsBtn{
  position:absolute;bottom:22px;right:22px;
  width:52px;height:52px;border-radius:50%;
  border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:3;transition:transform .4s;
}
#settingsBtn svg{
  width:46px;height:46px;
  filter:drop-shadow(0 0 8px #00e5ff) drop-shadow(0 0 18px rgba(0,229,255,0.5));
}
#settingsBtn:hover{transform:rotate(60deg);}

/* ── Touch controls (mobile) ── */
#touchLayer{display:none !important;} /* hide joystick/boost overlay to keep map clear */

/* Pause/menu button */
#pauseBtn{
  position:absolute;top:10px;right:50%;transform:translateX(50%);
  width:64px;height:64px;border:none;border-radius:16px;
  background:rgba(0,200,230,0.12);
  box-shadow:0 0 16px rgba(0,255,255,0.35), inset 0 0 0 2px rgba(0,255,255,0.35);
  cursor:pointer;z-index:6;
  backdrop-filter:blur(2px);
}
#pauseBtn svg{width:36px;height:36px;filter:drop-shadow(0 0 10px #00f5ff);}
#pauseBtn:active{transform:translateX(50%) scale(0.96);}

/* Pause modal */
#pauseModal{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;background:rgba(0,10,20,0.82);backdrop-filter:blur(3px);
  z-index:8;
}
#pauseModal.hidden{display:none;}
.pm-title{
  font-family:'Russo One',sans-serif;
  font-size:1.4rem;letter-spacing:2px;color:#00f5ff;text-shadow:0 0 12px rgba(0,255,255,0.6);
  text-align:center;
}
.pm-actions{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.pm-btn{
  min-width:140px;padding:14px 20px;border-radius:12px;border:2px solid rgba(0,255,255,0.5);
  background:rgba(0,200,230,0.18);color:#00f5ff;font-family:'Russo One',sans-serif;font-size:1.2rem;
  letter-spacing:2px;cursor:pointer;box-shadow:0 0 14px rgba(0,255,255,0.4);
}
.pm-btn.ghost{background:rgba(0,0,0,0.25);}
.pm-btn:active{transform:translateY(1px);}

/* Death panel */
#deathPanel{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  background:rgba(1,10,20,0.72);
  backdrop-filter:blur(2px);
  color:var(--cyan);
  font-family:'Russo One',sans-serif;
  text-align:center;
  z-index:7;
}
#deathPanel.hidden{display:none;}
#deathTitle{
  font-size:1.8rem;letter-spacing:3px;
  text-shadow:0 0 12px var(--cyan);
}
.dp-row{display:flex;gap:30px;}
.dp-col{min-width:140px;}
.dp-label{font-size:0.9rem;letter-spacing:2px;color:rgba(0,245,255,0.7);}
.dp-val{font-size:1.4rem;letter-spacing:2px;color:#b0f8ff;text-shadow:0 0 10px rgba(0,255,255,0.5);}
#deathCta{
  margin-top:6px;
  padding:10px 22px;
  border:1px solid rgba(0,255,255,0.4);
  border-radius:10px;
  letter-spacing:2px;
  background:rgba(0,255,255,0.08);
  box-shadow:0 0 14px rgba(0,255,255,0.35);
  cursor:pointer;
}
#deathCta:active{transform:translateY(1px);}

@media (max-width:640px){
  .dp-row{flex-direction:column;gap:10px;}
  .dp-col{min-width:0;}
  #deathPanel{padding:20px;}
}