/* RUSH! - accent #ffd400, the hub's own arcade yellow.
   Deliberate: every other game takes a colour that stands apart from the
   cabinet, because every other game is about a thing. This one is about the
   machine, so it wears the machine's colour. Violet #a06bff carries the
   secondary line work, which is the same pairing the hub uses. */

:root{
  --accent:#ffd400;
  --accent-dark:#6a5800;
  --accent-deep:#2a2300;
  --violet:#a06bff;
  --bg:#0a0612;
  --ink:#eef2f6;
  --muted:#9d8fc4;
  --top-reserve:54px;
}

html,body{
  margin:0;
  overflow:hidden;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  width:100%;
  height:100%;
  background:var(--bg);
  font-family:'Courier New',ui-monospace,Menlo,Consolas,monospace;
}

#game{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:var(--bg);
}

.hidden{display:none !important;}

/* ---------- HUD: sits below the reserved ad band, never at top:0 ---------- */
#hud{
  position:fixed;
  top:calc(var(--top-reserve) + env(safe-area-inset-top,0px));
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  z-index:4;
  pointer-events:none;
  color:var(--ink);
  text-shadow:2px 2px 0 #000;
}

.hud-row{
  display:flex;
  gap:16px;
  align-items:baseline;
  justify-content:center;
}

#hudScore{
  font-size:clamp(22px,7vw,34px);
  font-weight:900;
  letter-spacing:2px;
  color:var(--accent);
}

.hud-sub span{
  font-size:clamp(11px,3.4vw,16px);
  letter-spacing:2px;
  color:var(--muted);
}

#hudRush{ color:#ffd400; }

#rushBar{
  width:min(62vw,300px);
  height:6px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,212,0,0.35);
  box-sizing:border-box;
}

#rushFill{
  height:100%;
  width:0%;
  background:#ffd400;
  transition:width 140ms linear;
  box-shadow:0 0 6px rgba(255,212,0,0.7);
}

#hudWave{
  font-size:clamp(10px,3vw,14px);
  letter-spacing:3px;
  color:var(--accent);
  opacity:0.8;
}

/* Escalation phases get their own colour in the HUD, not just on the table,
   so SWARM / OVERDRIVE / BLACKOUT read as distinct states at a glance. */
#hudWave.wave-swarm{ color:#ffb648; opacity:1; }
#hudWave.wave-overdrive{ color:#28e8ff; opacity:1; }
#hudWave.wave-blackout{ color:#ff4d4d; opacity:1; animation:waveFlicker 0.7s steps(2) infinite; }

@keyframes waveFlicker{
  0%,100%{ opacity:1; }
  50%{ opacity:0.4; }
}

/* ---------- Big transient callouts (BUMPER BANK! / TRAIN ARRIVING) ---------- */
#callout{
  position:fixed;
  left:0;
  right:0;
  top:38%;
  text-align:center;
  z-index:6;
  pointer-events:none;
  font-size:clamp(20px,7vw,38px);
  font-weight:900;
  letter-spacing:4px;
  color:#ffd400;
  text-shadow:4px 4px 0 #3a2a00;
  animation:callout 700ms ease-out;
}

@keyframes callout{
  0%{ transform:scale(0.7); opacity:0; }
  22%{ transform:scale(1.12); opacity:1; }
  70%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(1); opacity:0; }
}

/* ---------- Touch layer: left half / right half flippers, multi-touch ---------- */
#touchLayer{
  position:fixed;
  inset:0;
  z-index:3;
  display:flex;
  touch-action:none;
}

.touch-half{
  flex:1 1 50%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:14px;
  box-sizing:border-box;
  color:rgba(255,212,0,0.18);
  font-size:clamp(11px,3.4vw,15px);
  letter-spacing:4px;
}

.touch-half.lit{ background:rgba(255,212,0,0.07); }

#touchLeft{ border-right:1px dashed rgba(255,212,0,0.10); }

/* top/left/width are set from the table's own geometry in game.js
   (placePlungerHint), so the hint stays inside the table on any screen. */
#plungerHint{
  position:absolute;
  text-align:center;
  color:var(--accent);
  font-size:clamp(10px,3vw,14px);
  line-height:1.5;
  letter-spacing:2px;
  text-shadow:2px 2px 0 #000;
  pointer-events:none;
  animation:hintGlow 1.2s ease-in-out infinite;
}

@keyframes hintGlow{
  0%,100%{ opacity:1; }
  50%{ opacity:0.6; }
}
@media (prefers-reduced-motion: reduce){
  #plungerHint{ animation:none; }
}

/* ---------- Screens ---------- */
.screen{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  padding:24px;
  padding-top:calc(24px + var(--top-reserve));
  box-sizing:border-box;
  color:var(--ink);
  z-index:5;
  background:rgba(10,6,18,0.88);
}

.screen > *{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}

.title{
  font-size:clamp(30px,11vw,72px);
  margin:0;
  letter-spacing:4px;
  font-weight:900;
  color:var(--accent);
  text-shadow:4px 4px 0 var(--accent-deep), 8px 8px 0 rgba(0,0,0,0.45);
}

.tagline{
  font-size:clamp(13px,4vw,20px);
  max-width:min(84vw,560px);
  color:#9d8fc4;
  margin:0;
  letter-spacing:1px;
}

.best-line,.detail-line{
  font-size:clamp(14px,4.4vw,22px);
  color:var(--muted);
  margin:0;
  letter-spacing:1px;
}

.roast{
  font-size:clamp(12px,3.8vw,18px);
  color:rgba(238,242,246,0.5);
  margin:0;
  letter-spacing:1px;
  font-style:italic;
}

.target-big{
  font-size:clamp(32px,12vw,84px);
  font-weight:900;
  color:var(--accent);
  text-shadow:4px 4px 0 var(--accent-deep);
  margin:0;
}

.cta-btn{
  font-family:inherit;
  font-weight:900;
  font-size:clamp(18px,6vw,28px);
  letter-spacing:2px;
  padding:20px 38px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:#1a0f2c;
  box-shadow:0 8px 0 var(--accent-dark), 0 8px 20px rgba(0,0,0,0.5);
  cursor:pointer;
  touch-action:manipulation;
}

.cta-btn:active{
  transform:translateY(6px);
  box-shadow:0 2px 0 var(--accent-dark);
}

.pulse{ animation:pulse 1.1s ease-in-out infinite; }

@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.05); }
}

.kbd-hint{
  display:none;
  font-size:clamp(10px,3vw,14px);
  letter-spacing:2px;
  opacity:0.55;
  margin:0;
}
@media (hover: hover) and (pointer: fine){
  .kbd-hint{ display:block; }
  .touch-half span{ display:none; }
}