:root{
  --bg:#050816;
  --blue:#2563eb;
  --cyan:#00e5ff;
  --pink:#ff2dd5;
  --yellow:#facc15;
  --green:#22c55e;
  --text:#fff;
  --muted:#a8b6d8;
}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;width:100%;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:monospace;touch-action:manipulation;}
canvas{display:block;}

#bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
#topflash{position:fixed;top:0;left:0;width:100%;height:20vh;opacity:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom,rgba(255,255,255,.22),rgba(255,255,255,0));transition:opacity .14s linear;}

/* ---- STEROWANIE — kierownica obrazek + boost ---- */
#ctrlOverlay{
  position:fixed;bottom:0;left:0;right:0;z-index:10;
  display:none;
  height:120px;
  padding-bottom:env(safe-area-inset-bottom);
  pointer-events:auto;
  background:linear-gradient(to top,rgba(5,8,22,.92),rgba(5,8,22,.7));
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(0,229,255,.12);
}
#ctrlOverlay.visible{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 8px 12px;}

/* Kierownica-slider */
#wheelWrap{
  position:relative;
  flex:1;
  height:108px;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;cursor:grab;
  max-width:280px;
}
#wheelImg{
  width:200px;height:auto;
  user-select:none;pointer-events:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
  transition:transform .05s;
  transform-origin:50% 65%;
}
/* Wskaźnik skrętu */
#wheelIndicator{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:60%;height:3px;
  background:rgba(255,255,255,.1);
  border-radius:2px;
}
#wheelIndicatorFill{
  position:absolute;top:0;height:100%;
  background:var(--cyan);border-radius:2px;
  left:50%;width:0;
  transition:width .05s,left .05s;
}

/* Radio button — środek, większy */
#radioBtn{
  flex:0 0 auto;
  background:none;
  border:2px solid rgba(255,255,255,.15);
  border-radius:8px;
  padding:4px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s,border-color .15s;
  margin:0 10px;
}
#radioBtn img{
  width:160px;height:auto;
  border-radius:4px;
  filter:brightness(.55) saturate(.5);
  transition:filter .15s;
}
#radioBtn.on img{filter:brightness(1) saturate(1);}
#radioBtn.on{border-color:rgba(0,229,255,.5);}
#radioBtn:active{transform:scale(.95);}

/* Boost button */
#btnGas{
  width:88px;height:88px;
  border-radius:50%;
  border:3px solid var(--yellow);
  background:radial-gradient(circle at 35% 35%,rgba(250,204,21,.2),rgba(180,60,0,.1));
  color:var(--yellow);font-size:28px;
  cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:all .06s;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 16px rgba(250,204,21,.2);
  flex-shrink:0;
  margin-left:12px;
}
#btnGas:active,#btnGas.pressed{
  background:radial-gradient(circle at 35% 35%,rgba(250,204,21,.55),rgba(250,100,0,.3));
  box-shadow:0 0 32px rgba(250,204,21,.8);
  transform:scale(.93);
}
/* Ukryj stare przyciski */
#btnL,#btnR{display:none!important;}

/* ---- WRAP ---- */
.wrap{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:8px;
  padding:28vh 8px 130px;
}

/* COUNTDOWN — większy */
.panel{width:min(960px,96vw);background:rgba(5,8,22,.78);border:3px solid #fff;
  box-shadow:0 0 0 3px var(--blue),0 0 0 6px #fff,0 0 24px rgba(37,99,235,.4);
  text-align:center;padding:10px 10px 9px;}
.title{font-size:clamp(12px,2.5vw,22px);line-height:1.1;text-shadow:2px 2px 0 var(--blue);letter-spacing:.03em;}
.count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px;}
.box{background:#1e293b;border:2px solid #fff;padding:7px 4px;}
.num{font-size:clamp(22px,6vw,48px);font-weight:800;line-height:1;color:var(--cyan);text-shadow:0 0 12px var(--cyan);}
.lbl{font-size:9px;color:var(--muted);margin-top:3px;text-transform:uppercase;}

/* MAIN TABS */
.main-tabs-bar{width:min(960px,96vw);display:flex;gap:0;margin-bottom:-1px;}
.main-tab{flex:1;font-family:monospace;font-size:clamp(10px,2.5vw,14px);font-weight:700;
  padding:9px 4px;border:2px solid #334155;background:rgba(5,8,22,.7);color:var(--muted);
  cursor:pointer;border-bottom:none;transition:all .12s;white-space:nowrap;}
.main-tab:not(:last-child){border-right:none;}
.main-tab.active{background:rgba(8,13,26,.9);color:#fff;border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan) inset;}
.main-tab:hover:not(.active){color:#fff;}

/* PANES */
.main-pane{display:none;width:min(960px,96vw);flex-direction:column;align-items:center;gap:7px;
  border:2px solid var(--cyan);padding:8px;background:rgba(8,13,26,.82);}
.main-pane.active{display:flex;}

/* GAME */
#gameWrap{position:relative;width:100%;}
#game{display:block;width:100%;aspect-ratio:16/9;min-height:180px;
  background:#000;cursor:pointer;touch-action:none;border:1px solid #1e3a5f;}
#hud{position:absolute;top:0;left:0;width:100%;pointer-events:none;padding:3px 5px;
  display:flex;justify-content:space-between;}
#hudL,#hudR{background:rgba(0,0,0,.72);padding:2px 6px;font-size:clamp(9px,1.6vw,11px);
  line-height:1.7;border:1px solid rgba(0,229,255,.2);}
#boostBar{position:absolute;bottom:4px;left:5px;right:5px;height:4px;
  background:rgba(255,255,255,.1);border-radius:2px;}
#boostFill{height:100%;background:linear-gradient(90deg,var(--green),var(--yellow),#ef4444);
  border-radius:2px;width:0%;transition:width .08s;}
#lapMsg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:clamp(14px,4vw,28px);font-weight:800;color:var(--yellow);
  text-shadow:0 0 10px #f97316,2px 2px 0 #000;opacity:0;transition:opacity .3s;
  pointer-events:none;white-space:nowrap;}

/* MODE BAR */
#modeBar{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.modeBtn{font-family:monospace;font-size:clamp(8px,1.6vw,11px);font-weight:700;padding:6px 2px;
  border:2px solid #334155;background:#0c1424;color:#94a3b8;cursor:pointer;text-align:center;}
.modeBtn.active,.modeBtn:hover{border-color:var(--cyan);color:#fff;background:#111827;}

.cmd-row,.neon-row{width:100%;display:flex;gap:5px;}
.cmd-row input,.neon-row input{flex:1;font-family:monospace;font-size:13px;padding:8px;
  border:2px solid #334155;background:#0c1424;color:#fff;outline:none;min-width:0;}
.cmd-row button,.neon-row button{font-family:monospace;font-size:12px;padding:0 10px;min-height:38px;
  border:2px solid #334155;background:#0c1424;color:#fff;outline:none;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.cmd-row button:hover,.neon-row button:hover{border-color:var(--cyan);}

#neon{width:100%;min-height:42px;display:flex;align-items:center;justify-content:center;
  padding:5px 10px;border:2px solid var(--pink);background:rgba(10,7,20,.65);
  color:#ffc8f9;text-align:center;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(10px,2.2vw,18px);
  text-shadow:0 0 3px #fff,0 0 10px #ff6fe8,0 0 24px #ff6fe8,0 0 42px #ff2dd5;
  box-shadow:inset 0 0 8px rgba(255,255,255,.08),0 0 14px rgba(255,45,213,.22);
  animation:neonFlicker 3.8s infinite;}
@keyframes neonFlicker{0%,18%,22%,24%,55%,100%{opacity:1}19%,23%{opacity:.7}56%{opacity:.8}58%{opacity:.6}59%{opacity:1}}

/* SCORES */
.lb-header{width:100%;padding:4px 0;}
.lb-header h3{margin:0 0 7px;font-size:12px;color:var(--cyan);letter-spacing:.1em;}
.period-row{display:flex;gap:4px;}
.periodBtn{font-family:monospace;border:2px solid #334155;background:#0c1424;color:#fff;
  padding:6px 10px;cursor:pointer;font-size:11px;font-weight:700;}
.periodBtn.active,.periodBtn:hover{border-color:var(--cyan);color:var(--cyan);}
#lbList{width:100%;font-size:12px;line-height:1.9;min-height:300px;}
.scoreRow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center;
  padding:8px 2px;border-top:1px solid rgba(255,255,255,.06);}
.scoreRow:first-child{border-top:none;}
.scoreRank{color:var(--cyan);font-weight:700;font-size:13px;}
.scoreName{font-weight:700;}
.scoreMeta{font-size:10px;color:var(--muted);margin-top:1px;}
.scoreTime{font-size:13px;font-weight:800;color:var(--yellow);}

/* GUESTBOOK — pełna szerokość i wysokość */
#guestStageViewport{position:relative;width:100%;height:50vw;min-height:240px;max-height:420px;overflow:auto;
  background:linear-gradient(180deg,rgba(7,10,22,.95),rgba(16,23,38,.92));
  border:1px solid rgba(255,255,255,.1);scrollbar-width:thin;overscroll-behavior:none;}
#guestStage{position:relative;width:1400px;height:860px;transform-origin:top left;
  background:radial-gradient(circle at 20% 20%,rgba(255,104,210,.07),transparent 20%),
    radial-gradient(circle at 75% 32%,rgba(96,165,250,.07),transparent 20%),
    linear-gradient(180deg,rgba(7,10,22,.98),rgba(16,23,38,.95));}
.neonWord{position:absolute;max-width:280px;text-transform:uppercase;letter-spacing:.08em;
  white-space:nowrap;font-weight:700;font-size:24px;user-select:none;}
.neon-pink{color:#ffc8f9;text-shadow:0 0 4px #fff,0 0 12px #ff6fe8,0 0 28px #ff6fe8,0 0 55px #ff2dd5,0 0 80px #ff2dd5;filter:drop-shadow(0 0 8px #ff2dd5);}
.neon-blue{color:#cae8ff;text-shadow:0 0 4px #fff,0 0 12px #7dd3fc,0 0 28px #38bdf8,0 0 55px #2563eb,0 0 80px #0ea5e9;filter:drop-shadow(0 0 8px #2563eb);}
.neon-green{color:#d9ffe6;text-shadow:0 0 4px #fff,0 0 12px #4ade80,0 0 28px #22c55e,0 0 55px #15803d,0 0 80px #166534;filter:drop-shadow(0 0 8px #22c55e);}
.neon-yellow{color:#fff7c2;text-shadow:0 0 4px #fff,0 0 12px #fde047,0 0 28px #facc15,0 0 55px #eab308,0 0 80px #ca8a04;filter:drop-shadow(0 0 8px #facc15);}

.guest-editor{width:100%;display:flex;flex-direction:column;gap:6px;}
.guest-inputs{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.guest-inputs input,.guest-inputs select,.guest-inputs button{
  font-family:monospace;border:2px solid #334155;background:#0c1424;color:#fff;
  outline:none;padding:8px;font-size:12px;}
.guest-inputs button{grid-column:span 2;font-weight:700;cursor:pointer;}
.guest-inputs button:hover{border-color:var(--cyan);}

.guest-joy-area{display:flex;gap:16px;align-items:center;justify-content:center;padding:4px 0;}
.joy-group{display:flex;flex-direction:column;align-items:center;gap:5px;}
.joy-label{font-size:10px;color:var(--muted);letter-spacing:.08em;}
.joystick-wrap{position:relative;width:80px;height:80px;background:rgba(0,0,0,.5);
  border:2px solid #334155;border-radius:50%;cursor:grab;touch-action:none;}
.joystick-wrap.joystick-h{width:140px;height:42px;border-radius:21px;}
.joy-knob{position:absolute;width:24px;height:24px;
  background:radial-gradient(circle at 35% 35%,var(--cyan),#0050a0);
  border:2px solid rgba(255,255,255,.5);border-radius:50%;top:50%;left:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  box-shadow:0 0 8px rgba(0,229,255,.6);}
.joystick-wrap.joystick-h .joy-knob{width:20px;height:20px;}
.joy-cross::before,.joy-cross::after{content:'';position:absolute;background:rgba(255,255,255,.12);}
.joy-cross::before{width:1px;height:100%;left:50%;}
.joy-cross::after{width:100%;height:1px;top:50%;}
.joy-cross-h::before{content:'';position:absolute;width:1px;height:100%;left:50%;background:rgba(255,255,255,.2);}
#joyAngleVal{font-size:11px;color:var(--cyan);min-width:28px;text-align:center;}
#guestStatus{font-size:10px;color:var(--muted);min-height:14px;}

/* MODAL */
#nameModal{display:none;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.85);
  align-items:center;justify-content:center;}
#nameModal.show{display:flex;}
#nameBox{background:#0f172a;border:4px solid var(--yellow);padding:22px;text-align:center;
  width:min(320px,88vw);box-shadow:0 0 36px rgba(250,204,21,.3);}
#nameBox h2{margin:0 0 5px;color:var(--yellow);font-size:20px;}
#nameBox p{margin:0 0 12px;color:#94a3b8;font-size:12px;}
#nameInput{width:100%;font-family:monospace;font-size:17px;padding:9px;
  background:#1e293b;border:2px solid var(--yellow);color:#fff;outline:none;margin-bottom:10px;}
#nameBox button{font-family:monospace;font-size:14px;padding:9px 22px;
  background:var(--yellow);color:#000;border:none;cursor:pointer;font-weight:700;}
.secondaryBtn{margin-top:8px;background:#334155 !important;color:#fff !important;}

/* ZOOM BAR */
.zoom-bar{display:flex;align-items:center;gap:6px;padding:4px 0;width:100%;}
.zoom-btn{font-family:monospace;font-size:14px;font-weight:700;width:32px;height:32px;
  border:2px solid #334155;background:#0c1424;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.zoom-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.zoom-val{font-size:11px;color:var(--muted);min-width:36px;text-align:center;}
.stage-sizer{position:absolute;top:0;left:0;pointer-events:none;}

/* FOOTER — prawy dolny róg */
.site-footer{
  position:fixed;bottom:6px;right:10px;z-index:11;
  font-size:9px;color:rgba(168,182,216,.4);
  pointer-events:auto;
}
.site-footer a{color:rgba(0,229,255,.4);text-decoration:none;}
.site-footer a:hover{color:var(--cyan);}