:root{
  --midnight:#0B1F2A; --evergreen:#173B32; --cedar:#2E6A4F; --mist:#A8DADC;
  --slide:#38BDF8; --raincoat:#FFCB47; --coral:#FF6B4A; --violet:#9B5DE5;
  --foam:#EAF4F4; --brown:#7A4A2B; --asphalt:#59636B; --night:#10172F;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#05090d;}
body{
  display:flex;align-items:center;justify-content:center;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  color:var(--foam);
  touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#frame{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
canvas#screen{
  display:block;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  background:#0B1F2A;
  outline:none;
  box-shadow:0 0 0 2px #0B1F2A, 0 18px 60px rgba(0,0,0,.7);
}
/* ---- boot gate ---- */
#boot{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%, #17324a 0%, #0B1F2A 60%, #05090d 100%);
  transition:opacity .45s ease;
}
#boot.gone{opacity:0;pointer-events:none}
#bootInner{text-align:center;padding:1rem}
#bootTitle{
  font-weight:900;letter-spacing:.06em;line-height:.92;
  font-size:clamp(30px,7vw,74px);
  color:var(--mist);
  text-shadow:0 4px 0 var(--midnight),0 0 26px rgba(56,189,248,.35);
}
#bootTitle span{display:block;color:var(--raincoat);font-size:.86em;letter-spacing:.22em}
#bootTag{margin:.9rem 0 1.6rem;color:#9fc3cb;font-size:clamp(12px,1.6vw,16px);font-style:italic}
#bootBtn{
  font:inherit;font-weight:800;letter-spacing:.14em;font-size:clamp(14px,2vw,20px);
  padding:.75em 2.4em;border:0;border-radius:999px;cursor:pointer;
  color:#08202b;background:linear-gradient(#FFD96B,#FFCB47);
  box-shadow:0 5px 0 #b8862a,0 12px 30px rgba(0,0,0,.45);
  transition:transform .08s ease, box-shadow .08s ease;
}
#bootBtn:active{transform:translateY(4px);box-shadow:0 1px 0 #b8862a}
#bootNote{margin-top:1.4rem;color:#6f8b95;font-size:12px}
/* ---- touch ---- */
#touch{position:absolute;inset:0;pointer-events:none;z-index:20}
#touch.on{display:block}
#touch.hidden{display:none}
#stick{
  position:absolute;left:3.5vmin;bottom:4vmin;width:30vmin;height:30vmin;max-width:180px;max-height:180px;
  border-radius:50%;background:rgba(168,218,220,.13);border:2px solid rgba(234,244,244,.28);
  pointer-events:auto;
}
#stickNub{position:absolute;left:50%;top:50%;width:38%;height:38%;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(234,244,244,.5)}
#touchBtns{position:absolute;right:3.5vmin;bottom:4vmin;display:grid;grid-template-columns:auto auto auto;gap:1.6vmin;pointer-events:auto;justify-items:end;align-items:end}
/* rhythm lanes sit across the bottom centre, under the falling notes */
#touchLanes{position:absolute;left:50%;transform:translateX(-50%);bottom:3vmin;display:flex;gap:3vmin;pointer-events:auto}
#touchLanes.hidden{display:none}
.tbtn.lane{width:18vmin;height:18vmin;max-width:96px;max-height:96px;font-size:4vmin}
.tbtn{
  font:inherit;font-weight:800;width:14vmin;height:14vmin;max-width:78px;max-height:78px;border-radius:50%;
  border:2px solid rgba(234,244,244,.35);background:rgba(11,31,42,.6);color:var(--foam);font-size:3.4vmin;
  pointer-events:auto;cursor:pointer;
}
.tbtn.small{width:11vmin;height:11vmin;font-size:2.4vmin;max-width:56px;max-height:56px}
.tbtn:active{background:rgba(56,189,248,.5)}
#rotate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0B1F2Aee;z-index:30;font-size:5vmin;text-align:center;padding:2rem}
#rotate.hidden{display:none}
/* ---- dev error overlay ---- */
#errOverlay{
  position:fixed;left:0;right:0;bottom:0;z-index:80;max-height:45%;overflow:auto;
  background:#3b0d14ee;border-top:3px solid #FF6B4A;padding:.8rem 1rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
}
#errOverlay.hidden{display:none}
#errClose{margin-top:.5rem;font:inherit;background:#FF6B4A;color:#2a0a0f;border:0;border-radius:4px;padding:.3em 1em;cursor:pointer}
#errText{white-space:pre-wrap}
.hidden{display:none}