/* =====================================================================
   Spirila - Descent :: Stage, canvas, centre hints, toast, zoom pad, centre button
   Extracted verbatim from index.html lines 92-187
   ===================================================================== */
/* Stage / canvas */
.stage{
  position:relative;
  width:100%;
  height:100%;
  pointer-events:auto;
}
canvas#scene{
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}

.center-help{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:var(--muted);
  font-size:13px;
  text-align:center;
  transition: opacity 0.3s ease; /* Adds a smooth fade */
}

.center-help.hidden {
  opacity: 0;
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  transform:translate(-50%,40px);
  bottom:24px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--ring);
  background:rgba(5,8,18,.95);
  color:var(--ink);
  font-size:12px;
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:40;
}
.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

/* Mobile zoom + center */
.zoom-pad{
  position:fixed;
  right:10px;
  bottom:72px;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:auto;
}
.center-btn{
  position:fixed;
  right:10px;
  bottom:18px;
  pointer-events:auto;
}
.zbtn{
  width:46px;
  height:46px;
  border-radius:12px;
  border:1px solid var(--ring);
  background:var(--glass);
  color:var(--ink);
  display:grid;
  place-items:center;
  font-size:18px;
  cursor:pointer;
  box-shadow:var(--shadow);
}
.center-btn .zbtn{
  width:120px;
  border-radius:999px;
  font-size:14px;
}
.zbtn:active{
  transform:translateY(1px) scale(.97);
}
@media (min-width:900px){
  .zoom-pad,.center-btn{right:16px;}
}