@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  --bg:#05040a;
  --panel:#0c0a18;
  --grid:#1a1530;
  --neon-cyan:#4dfcff;
  --neon-magenta:#ff3ec8;
  --neon-yellow:#ffe14d;
  --neon-green:#4dff88;
  --neon-red:#ff3b3b;
  --text:#e8e8ff;
}

*{box-sizing:border-box; margin: 0;}
[hidden]{display:none !important;}

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:'Press Start 2P','Courier New',monospace;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
}

#wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:100%;
  max-width:500px;
  padding:15px;
}

#title{
  color:var(--neon-cyan);
  font-size:20px;
  letter-spacing:2px;
  text-align:center;
  text-shadow:0 0 6px var(--neon-cyan),0 0 14px rgba(77,252,255,.5);
  margin: 0;
}

#title span{
  color:var(--neon-magenta);
  text-shadow:0 0 6px var(--neon-magenta);
}

#hud{
  display:flex;
  justify-content:space-between;
  width:100%;
  padding:0 2px;
  color:var(--neon-yellow);
  font-size:10px;
  text-shadow:0 0 4px var(--neon-yellow);
}

#frame{
  position:relative;
  width:100%;
  max-width:480px;
  line-height:0;
  background:#000;
  border:4px solid var(--neon-magenta);
  /*box-shadow:0 0 0 4px #000,0 0 0 8px var(--neon-magenta),0 0 30px rgba(77,252,255,.4);*/
  image-rendering:pixelated; 
}

canvas{
  display:block;
  width:calc(100% - 8px) !important;
  height:auto !important;
  background:radial-gradient(ellipse at 50% 30%,#0a0a1e 0%,#020103 80%);
  image-rendering:pixelated;
  border: 4px solid var(--neon-cyan);
  margin: 4px;
}

#scanlines{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 1px,rgba(0,0,0,.18) 2px,rgba(0,0,0,.18) 3px);
  mix-blend-mode:multiply;
}

#overlay{
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  background:rgba(2,1,8,.88);
  text-align:center;
  border: 4px solid var(--neon-cyan);
  margin: 4px;
}

#overlay[hidden]{display:none !important;}

.overlay-panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:18px;
  overflow:auto;
  line-height:1.45;
}

.overlay-panel h2{
  margin:0;
  color:var(--neon-magenta);
  font-size:18px;
  text-shadow:0 0 8px var(--neon-magenta);
}

.overlay-panel > p{
  width:100%;
  max-width:450px;
  margin:0;
  color:var(--neon-cyan);
  font-size:9px;
  line-height:1.9;
}

.instructions-desk{display: inline;}
.instructions-mob{display: none;}

.overlay-panel strong{
  color: var(--neon-magenta);
  text-shadow: 0 0 5px var(--neon-magenta);
}

.arcade-btn{
  appearance:none;
  min-height:44px;
  padding:12px 18px;
  border:0;
  border-radius:0;
  font:11px/1.35 'Press Start 2P','Courier New',monospace;
  letter-spacing:.25px;
  cursor:pointer;
  touch-action:manipulation;
}

.arcade-btn:disabled{
  cursor:wait;
  filter:saturate(.4);
  opacity:.65;
}

.arcade-btn-primary{
  color:#04140a;
  background:var(--neon-green);
  box-shadow:0 4px 0 #1a5c34,0 0 14px rgba(77,255,136,.6);
}

.arcade-btn-primary:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 1px 0 #1a5c34,0 0 14px rgba(77,255,136,.5);
}

.arcade-btn-secondary{
  color:var(--neon-cyan);
  background:#070510;
  border:3px solid var(--neon-yellow);
}

.arcade-btn-secondary:active:not(:disabled){transform:translateY(2px);}

.overlay-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

.blink{animation:blink 1s step-start infinite;}
@keyframes blink{50%{opacity:.35;}}

.final-result{
  color:var(--neon-cyan) !important;
  font-size:9px !important;
  line-height:1.9 !important;
}

.final-result strong{
  display:inline-block;
  margin:8px 0 10px;
  color:var(--neon-yellow);
  font-size:25px;
  line-height:1;
  text-shadow:0 0 9px var(--neon-yellow);
}

.final-wave{
  color:var(--neon-cyan);
}

.final-wave b{color:var(--neon-yellow);}

.result-message{
  min-height:3.8em;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--neon-magenta) !important;
  font-size:10px !important;
  text-shadow:0 0 7px rgba(255,62,200,.65);
}

#scoreForm{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:17px;
  width:100%;
  margin:0;
}

.initials-label{
  color:var(--neon-cyan);
  font-size:9px;
  line-height:1.9;
}

.initials-entry{
  display:flex;
  justify-content:center;
  gap:14px;
}

.initial-input{
  appearance:none;
  width:56px;
  height:64px;
  padding:6px 0 0;
  border:3px solid var(--neon-cyan);
  border-radius:0;
  outline:0;
  background:#05040a;
  color:var(--neon-yellow);
  font:29px/1 'Press Start 2P','Courier New',monospace;
  text-align:center;
  text-transform:uppercase;
  caret-color:var(--neon-magenta);
  box-shadow:0 0 0 3px #000,0 0 0 5px var(--neon-magenta),0 0 15px rgba(77,252,255,.35);
}

.initial-input:focus{
  color:#fff;
  border-color:var(--neon-yellow);
  box-shadow:0 0 0 3px #000,0 0 0 5px var(--neon-magenta),0 0 22px rgba(255,225,77,.65);
}

.status-text{
  min-height:1.5em;
  width:100%;
  margin:0;
  color:var(--neon-yellow) !important;
  font-size:8px !important;
  line-height:1.6 !important;
}

.status-text.error{color:var(--neon-red) !important;}

.leaderboard-shell{
  width:min(100%,430px);
  padding:4px;
  overflow:auto;
  background:rgba(5,4,10,.86);
  border:4px solid var(--neon-magenta);
}

.leaderboard-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  color:var(--text);
  font-size:8px;
  line-height:1.4;
  border:4px solid var(--neon-cyan);

}

.leaderboard-table th,
.leaderboard-table td{
  padding:7px 4px;
  border-bottom:1px solid #27213e;
  text-align:right;
  white-space:nowrap;
}

.leaderboard-table th{
  color:var(--neon-cyan);
  font-size:7px;
}

.leaderboard-table th:nth-child(1),.leaderboard-table td:nth-child(1){width:12%;text-align:center;}
.leaderboard-table th:nth-child(2),.leaderboard-table td:nth-child(2){width:22%;text-align:center;}
.leaderboard-table th:nth-child(3),.leaderboard-table td:nth-child(3){width:43%;}
.leaderboard-table th:nth-child(4),.leaderboard-table td:nth-child(4){width:23%;}
.leaderboard-table tbody tr:nth-child(1) td{color:var(--neon-yellow);}
.leaderboard-table tbody tr:nth-child(2) td{color:var(--neon-cyan);}
.leaderboard-table tbody tr:nth-child(3) td{color:var(--neon-magenta);}
.leaderboard-table tbody tr.current-score td{color:#05040a;background:var(--neon-green);text-shadow:none;}
.leaderboard-table tbody tr.empty-row td{color:#56516e;}

#touch{
  display:none;
  width:100%;
  justify-content:center;
}

#trackpad{
  position:relative;
  width:100%;
  height:110px;
  overflow:hidden;
  background:var(--panel);
  border:2px solid var(--neon-cyan);
  border-radius:0;
  touch-action:none;
}

#trackpadLabel{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  color:#3a3a5a;
  font-size:8px;
  letter-spacing:1px;
  text-align:center;
  pointer-events:none;
}

#footer{
  color:#5a5a7a;
  font-size:8px;
  line-height:1.8;
  text-align:center;
}


body .iubenda-tp-btn:not(.iubenda-floatable-tb-btn):not([data-tp-nostyle],.iubenda-floatable-default-btn),
.iub__us-widget{display: none !important;}
body .iubenda-embed:not(.no-brand):not(.iubenda-nostyle){background-color: var(--bg) !important; background-image: none !important; color: #5a5a7a !important; padding: 0 !important; font-size: 8px !important; line-height: 1.8 !important; font-family: 'Press Start 2P', 'Courier New', monospace !important; text-transform: uppercase !important; text-decoration: none;}
body .iubenda-embed:not(.no-brand):not(.iubenda-nostyle):hover{background-color: var(--bg) !important; color: var(--neon-green) !important;}

@media (pointer:coarse){#touch{display:flex;}}

@media (max-width:700px),(pointer:coarse){
  html,body{width:100vw; min-height:100dvh;}

  #wrap{width:94vw; max-width:94vw; height:94dvh; max-height:94dvh; padding:0; gap:10px; justify-content:center;}
  #title{font-size:20px;flex:0 0 auto;text-shadow:0 0 1.5px var(--neon-cyan),0 0 2px rgba(77,252,255,.5);}
  #title span{text-shadow:0 0 1.5px var(--neon-magenta);}
  #hud{font-size:8px;line-height:1.35;flex:0 0 auto;text-shadow:0 0 2px var(--neon-yellow);}
  /* #footer{display:none;} */
  #footer, 
  body .iubenda-embed:not(.no-brand):not(.iubenda-nostyle){font-size: 7px !important;}

  #frame{width:100%;max-width:94vw;flex:0 0 auto;}

  .overlay-panel{gap:15px; padding:15px;}
  .overlay-panel h2{font-size:10px;text-shadow:0 0 3px var(--neon-magenta);}
  .overlay-panel > p{font-size:6.8px;line-height:2;}
  .overlay-panel strong{text-shadow: 0 0 2.5px var(--neon-magenta);}
  .instructions-desk{display: none;}
  .instructions-mob{display: inline;}

  .arcade-btn{min-height:40px; padding:10px 13px; font-size:clamp(8px,2.4vw,11px);}

  .final-result{font-size:clamp(7px,2vw,9px) !important;}
  .final-result strong{font-size:clamp(20px,7vw,28px); text-shadow:0 0 1.5px var(--neon-yellow);}
  .result-message{font-size:clamp(7px,2.2vw,10px) !important; text-shadow:0 0 1.5px rgba(255,62,200,.65);}
  .initials-label{font-size:clamp(7px,2.1vw,9px);}

  .initials-entry{gap:clamp(9px,3vw,14px);}
  .initial-input{width:clamp(44px,14vw,58px); height:clamp(52px,16vw,66px); font-size:clamp(22px,7vw,30px);}

  .leaderboard-shell{padding:7px;}
  .leaderboard-table{font-size:clamp(6px,1.9vw,8px);}
  .leaderboard-table th{font-size:clamp(6px,1.7vw,7px);}
  .leaderboard-table th,.leaderboard-table td{padding:5px 3px;}

  #touch{height: 90px; flex:0 0 auto; border: 4px solid var(--neon-magenta);}
  #trackpad{height: 74px; border: 4px solid var(--neon-cyan); margin: 4px;}
  #trackpadLabel{color:var(--neon-yellow); font-size:10px; text-shadow:0 0 5px rgba(77,252,255,.25);}
}

@media (max-height:620px) and (pointer:coarse){
  #wrap{gap:5px;}
  #title{font-size:14px;}
  #hud{font-size:8px;}
  #touch{margin-top:14px;}
  #trackpad{height:130px;}
  .overlay-panel{gap:7px;padding:8px;}
  .overlay-panel > p{font-size:7px;line-height:1.55;}
}


/* ---------- Easter egg DEM ---------- */

.easter-egg{position:absolute; inset:4px; z-index:20; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(2,1,8,.92); pointer-events:none; animation:dem-easter-in .22s steps(3,end);}
.easter-egg-card{width:min(100%,380px); padding:14px; background:var(--panel);; border:4px solid var(--neon-yellow); box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px var(--neon-magenta), 0 0 28px rgba(255,225,77,.7); text-align:center;}
.easter-egg-card p{margin:0 0 14px; color:var(--neon-yellow); font-size:clamp(8px,2.6vw,11px); line-height:1.6; text-shadow:0 0 8px var(--neon-yellow);}
.easter-egg-card img{display:block; width:100%; max-height:55vh; object-fit:contain; image-rendering:auto;}

@keyframes dem-easter-in{
  from{opacity:0; transform:scale(.75);}
  to{opacity:1; transform:scale(1);}
}