:root{
  --bg0:#07090c;
  --bg1:#0b0d10;

  --card:#11151b;
  --txt:#e9eef6;
  --muted:#aab3c2;
  --line:rgba(255,255,255,0.08);

  --primary:#1c6df2;
  --danger:#b00020;
  --ok:#04c2a8;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--txt);
  background: radial-gradient(1200px 900px at 50% 35%, #101722 0%, var(--bg1) 45%, var(--bg0) 100%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow:hidden;
}

#bgCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

/* ---- layout primitives ---- */
.screen{
  position:fixed;
  inset:0;
  z-index:2;
  padding:16px 16px 22px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.screenHeader{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
.title{
  margin:0;
  font-size:22px;
  font-weight:800;
  letter-spacing:0.3px;
}
.subtle{
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}
.hidden{ display:none !important; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  margin:12px 0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}
.centerCard{
  max-width:420px;
  margin: 18vh auto 0;
  text-align:center;
}
.cardTitle{
  margin:0 0 10px;
  font-size:16px;
  font-weight:800;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:10px 0;
}
.fieldLabel{
  font-size:12px;
  color:var(--muted);
}
.input, .select{
  height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.22);
  color:var(--txt);
  padding:0 12px;
  font-size:16px;
  outline:none;
}
.input.center{ text-align:center; }
.select{ appearance:none; }

.row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.grow{ flex:1; }
.wide{ width:100%; }
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 420px){
  .grid2{ grid-template-columns: 1fr; }
}

/* ---- buttons ---- */
.btn{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color:var(--txt);
  font-size:15px;
  font-weight:700;
  letter-spacing:0.2px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active{ transform: translateY(1px); }
.btn.primary{
  background: linear-gradient(180deg, rgba(28,109,242,0.95), rgba(28,109,242,0.75));
  border-color: rgba(28,109,242,0.8);
}
.btn.ghost{ background: rgba(255,255,255,0.03); }
.btn.danger{
  background: linear-gradient(180deg, rgba(176,0,32,0.95), rgba(176,0,32,0.75));
  border-color: rgba(176,0,32,0.7);
}

/* Stepper controls (setup + pause) */
.stepper{
  display:flex;
  align-items:center;
  gap:10px;
}
.stepper .btn{
  width:56px;
  padding:0;
  flex:0 0 auto;
  font-size:20px;
  font-weight:900;
}
.stepperValue{
  flex:1;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.22);
  font-size:15px;
  font-weight:900;
  letter-spacing:0.2px;
}

.panel{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.list-item{
  height:44px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,0.22);
  color:var(--txt);
  font-size:14px;
  text-align:left;
  cursor:pointer;
}

/* ---- floating pause ---- */
.pauseFloat{
  position:fixed;
  right:14px;
  top:14px;
  z-index:5;
  height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,0.35);
  color:var(--txt);
  font-weight:800;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---- RUN screen (premium minimal) ---- */
.stage{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  min-height: 74vh;
  text-align:center;
}
.ruleLabel{
  font-size:56px;
  font-weight:900;
  letter-spacing:0.6px;
  min-height: 68px; /* keeps layout stable when cue is temporarily hidden */
}
.toast{
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,0.30);
  color:var(--txt);
  min-width: min(520px, 92vw);
  font-size:18px;
  font-weight:900;
  letter-spacing:0.2px;
}
.toast.ok{
  border-color: rgba(4,194,168,0.45);
  background: rgba(4,194,168,0.14);
}
.toast.bad{
  border-color: rgba(176,0,32,0.45);
  background: rgba(176,0,32,0.12);
}

/* Touch input buttons (hidden by default; app.js toggles .hidden) */
.touchButtons{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:4;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.touchBtn{
  height:76px;
  border-radius:18px;
  border:1px solid var(--line);
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.touchBtn.white{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.14);
}
.touchBtn.blue{
  background: rgba(28,109,242,0.30);
  border-color: rgba(28,109,242,0.55);
}

/* ---- COUNTDOWN (dots) ---- */
.countdownDots{
  display:flex;
  justify-content:center;
  gap:16px;
  font-size:56px;
  font-weight:900;
  line-height:1;
  letter-spacing:0.5px;
  user-select:none;
}
.countdownDots .dot{
  display:inline-block;
  transform: translateZ(0);
  transition: opacity 200ms ease;
}
.countdownNumber{
  font-size:64px;
  font-weight:900;
  letter-spacing:1px;
}
.countdownFeedback{
  margin-top:14px;
  font-size:18px;
  font-weight:900;
}

/* ---- RULES + MAPPING infographic ---- */
.rulesBody{
  font-size:14px;
  line-height:1.45;
  color: var(--txt);
}
.rulesGrid{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rulesGridHead{
  display:grid;
  grid-template-columns: minmax(120px, 150px) 1fr 1fr;
  gap:10px;
}
.rulesCorner{
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.rulesCol{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  font-weight:900;
  letter-spacing:0.5px;
  font-size:13px;
}
.rulesRow{
  display:grid;
  grid-template-columns: minmax(120px, 150px) 1fr 1fr;
  gap:10px;
}
.rulesBtnCell{
  height:54px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,0.24);
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:0.2px;
}
.rulesBtnIcon{
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
}
.rulesBtnIcon.white{
  background:#ffffff; /* requested: true white */
  border:1px solid rgba(0,0,0,0.25);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}
.rulesBtnIcon.blue{
  background: rgba(28,109,242,0.95);
  border:1px solid rgba(28,109,242,0.95);
  box-shadow: 0 0 0 2px rgba(28,109,242,0.18);
}
.rulesBtnText{
  font-size:15px;
}
.rulesCell{
  height:54px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,0.24);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:0.2px;
  text-transform: lowercase;
}

/* Small-screen readability */
@media (max-width: 360px){
  .rulesGridHead,
  .rulesRow{
    grid-template-columns: minmax(104px, 120px) 1fr 1fr;
  }
  .rulesCol{ font-size:12px; }
  .rulesBtnText{ font-size:14px; }
}

/* ---- PAUSE mapping emphasis (legacy lines kept safe) ---- */
.mappingLine{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,0.26);
  font-weight:900;
  font-size:16px;
  letter-spacing:0.2px;
}
#pauseMappingWhite{
  background: rgba(255,255,255,0.06);
}
#pauseMappingBlue{
  background: rgba(28,109,242,0.16);
  border-color: rgba(28,109,242,0.40);
}

/* ---- Level gate ---- */
.levelGateTitle{
  font-size:44px;
  font-weight:900;
  letter-spacing:0.6px;
}
.levelGateSub{
  margin-top:10px;
  color:var(--muted);
  font-size:16px;
  font-weight:900;
}

/* ---- On-screen keyboard (participant entry + admin numeric) ---- */
.softKbd{
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,0.20);
}
.softKbdKeys{ display:flex; flex-direction:column; gap:8px; }
.kbdRow{ display:flex; gap:8px; }
.kbdKey{
  flex:1;
  height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color:var(--txt);
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.kbdKey:active{ transform: translateY(1px); }
.kbdKey.wide{ flex:1.4; }
.kbdKey.xwide{ flex:3; }

/* ---- (optional) legacy/debug classes kept safe ---- */
.debug{ display:none !important; }

/* ---- Overlay (kept for future maintenance if you re-add) ---- */
.overlay{
  position:fixed;
  inset:0;
  z-index:10;
  background: rgba(0,0,0,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.overlayCard{
  width:min(520px, 100%);
  background: var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}