:root{
  --cyan: #00e5ff;
  --magenta: #ff6ec7;
  --panel: rgba(16,17,20,0.85);
  --border: rgba(255,255,255,0.08);
}

.canvas-frame{
  position: absolute; inset: 0;
}
#bitflipCanvas{
  display: block;
  cursor: grab;
}

.iconbtn{
  background: var(--panel); border: 1px solid var(--border); color: #fff;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; backdrop-filter: blur(6px);
  transition: border-color .15s ease;
}
.iconbtn:hover{ border-color: var(--cyan); }

.info-btn{
  position: fixed; top: 18px; right: 18px; z-index: 30;
}

.info-panel{
  position: fixed; top: 64px; right: 18px; z-index: 30;
  width: 220px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
  backdrop-filter: blur(6px);
  display: none;
  flex-direction: column; gap: 10px;
}
.info-panel.open{ display: flex; }
.info-panel h2{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px; font-weight: 800; margin: 0;
  letter-spacing: -0.01em;
}
.info-panel .tagline{ font-size: 12px; color: rgba(255,255,255,0.6); margin: 0; }
.info-row{
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.dot{ width: 7px; height: 7px; border-radius: 50%; }
.dot.online{ background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.coord-readout{
  position: fixed; bottom: 18px; left: 18px; z-index: 20;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; color: rgba(255,255,255,0.5);
  background: var(--panel); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 6px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.cooldown-ring{
  position: fixed; bottom: 18px; right: 18px; z-index: 20;
  width: 44px; height: 44px;
  pointer-events: none;
}
.cooldown-ring svg{
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.cooldown-ring .track{
  fill: var(--panel); stroke: var(--border); stroke-width: 3;
}
.cooldown-ring .progress{
  fill: none; stroke: var(--cyan); stroke-width: 3;
  stroke-dasharray: 107; stroke-dashoffset: 0;
  transition: stroke-dashoffset .1s linear;
  filter: drop-shadow(0 0 4px var(--cyan));
}
.cooldown-ring.ready .progress{ stroke: var(--magenta); }