/* POCKET PINBALL - mobile-first overhead pinball test rig.
   The canvas owns the whole viewport; everything else floats on top of it. */

:root{
  --ink:#e8ecff;
  --dim:#7d86b5;
  --hot:#ff3b6b;
  --cool:#31d9ff;
  --lime:#9dff4f;
  --pad-safe: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  width:100%;
  overflow:hidden;
  background:#05060c;
  color:var(--ink);
  font-family:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  touch-action:none;
}

#stage{
  position:fixed;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}

/* ---------- HUD ---------- */

#hud{
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  align-items:flex-start;
  gap:2px;
  padding:calc(env(safe-area-inset-top,0px) + 6px) 10px 8px;
  font-size:11px;
  letter-spacing:.14em;
  pointer-events:none;
  background:linear-gradient(#05060cdd,#05060c00);
  z-index:5;
}
.hud-cell{ display:flex; flex-direction:column; flex:1 1 0; min-width:0; }
.hud-mid{ align-items:center; flex:0 0 auto; padding:0 14px; }
.hud-right{ align-items:flex-end; }
.hud-label{ color:var(--dim); font-size:9px; text-transform:uppercase; }
.hud-value{
  font-size:19px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 0 12px #31d9ff66;
}
#hudMult.up{ color:var(--lime); text-shadow:0 0 14px #9dff4f88; }

#tools{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 46px);
  right:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:6;
}
/* Tilt pad: the top-left corner of the table. Borderless like the flipper
   pads - a fill here would draw an edge across the playfield - so the press
   shows in the label only. */
#tilt{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 40px);
  left:0;
  width:96px; height:86px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:10px 0 0 12px;
  font-size:10px;
  letter-spacing:.22em;
  color:#ffffff26;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  transition:color .06s linear;
  z-index:6;
}
#tilt.on{ color:#ffd24a; }

.tool{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid #ffffff1f;
  background:#ffffff0d;
  color:var(--dim);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.tool.off{ color:#4a5075; text-decoration:line-through; }

/* ---------- touch pads ---------- */

#pads{
  position:fixed;
  left:0; right:0; bottom:0;
  height:min(34vh, 260px);
  display:flex;
  z-index:4;
  padding-bottom:var(--pad-safe);
}
.pad{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:calc(14px + var(--pad-safe));
  font-size:11px;
  letter-spacing:.18em;
  line-height:1.5;
  text-align:center;
  color:#ffffff2b;
  transition:color .06s linear;
}
/* No backgrounds on the pads, at rest or pressed. A flat fill would draw a
   visible edge across the playfield (the pads overlay the canvas), so the
   press shows in the label colour only. */
.pad-flip{ flex:1 1 40%; }
.pad-plunge{ flex:0 0 22%; }
.pad.on{ color:#bff2ff; }
.pad-plunge.on{ color:#ffd0dc; }

/* On a wide screen the playfield is a narrow column, so shrink the pads to
   match it rather than letting them sprawl across the desktop. */
@media (min-width:760px){
  #hud{ width:min(52vh, 100%); left:50%; transform:translateX(-50%); right:auto; }
  #tools{ right:calc(50% - min(26vh, 50%) - 42px); }
  #tilt{ left:calc(50% - min(26vh, 50%)); }
  #pads{ width:min(46vh, 100%); left:50%; transform:translateX(-50%); height:min(30vh,240px); }
  .pad{ font-size:10px; }
}

/* ---------- curtain ---------- */

#curtain{
  position:fixed;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:radial-gradient(120% 80% at 50% 30%, #131a3aee, #05060cf7);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:opacity .25s ease;
}
#curtain.hide{ opacity:0; pointer-events:none; }
.panel{ width:100%; max-width:330px; text-align:center; }
.panel h1{
  line-height:1.05;
  font-size:38px;
  letter-spacing:.22em;
  font-weight:800;
  text-shadow:0 0 26px #31d9ff77;
}
.panel h1 span{ color:var(--hot); text-shadow:0 0 26px #ff3b6b88; }
.tag{ margin-top:8px; color:var(--dim); font-size:11px; letter-spacing:.1em; }
#btnStart{
  width:100%;
  margin-top:26px;
  padding:15px;
  border:0;
  border-radius:14px;
  background:linear-gradient(#31d9ff,#1a8fd4);
  color:#04121b;
  font:inherit;
  font-size:15px;
  font-weight:800;
  letter-spacing:.24em;
  cursor:pointer;
  box-shadow:0 8px 30px #31d9ff44;
}
#btnStart:active{ transform:translateY(1px); }

/* ---------- drain flash ---------- */

#flash{
  position:fixed; inset:0; z-index:8;
  pointer-events:none;
  background:#ff3b6b;
  opacity:0;
  transition:opacity .35s ease;
}
#flash.on{ opacity:.28; transition:opacity .04s linear; }