:root { color-scheme: dark; }

* { box-sizing: border-box; }

body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background: radial-gradient(1200px 800px at 50% 30%, #1b1b25 0%, #0a0a0f 55%, #050507 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;
}

.wrap{ width:min(920px, 94vw); }

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 14px 6px 10px;
  opacity:.78;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  gap:10px;
  flex-wrap:wrap;
}

.chip{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding:8px 10px;
  border-radius:999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stage{
  position:relative;
}

canvas{
  width:100%;
  height: min(560px, 66vh);
  display:block;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  touch-action:none; /* crucial for mobile dragging */
}

.overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  border-radius:18px;
  background: radial-gradient(600px 500px at 50% 55%, rgba(255,255,255,.06), rgba(0,0,0,0));
  transition: opacity .35s ease;
}

.overlay.hidden{ opacity:0; }

.overlay-title{
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:14px;
  opacity:.90;
  text-align:center;
}

.overlay-sub{
  margin-top:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  opacity:.55;
  text-align:center;
}

.hint{
  margin: 10px 6px 0;
  font-size:12px;
  opacity:.55;
  line-height:1.35;
}