@font-face{
  font-family:"NCBlack";
  src:url("assets/fonts/ncblack.ttf?v=3") format("truetype");
  font-weight:100 900; font-display:swap;
}
:root{ --bg:#0b0d13; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;touch-action:manipulation;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{height:100%;display:flex;align-items:center;justify-content:center}
#stagewrap{position:relative;width:min(100vw,calc(100vh * 1.75));aspect-ratio:7/4;max-height:100vh}
canvas{width:100%;height:100%;display:block;background:#79c7ef;touch-action:none;
  image-rendering:auto}
@media (orientation:portrait){
  #stagewrap{width:100vw;aspect-ratio:7/4;height:auto}
}
/* phones: force landscape */
#rotate{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:8%;background:var(--bg);text-align:center;color:#f4f1ea}
#rotate .phone{width:58px;height:104px;border:3px solid #ffd34d;border-radius:12px;
  animation:rot 2.2s ease-in-out infinite}
#rotate p{margin:0;font-size:clamp(14px,4vmin,20px);font-weight:700}
#rotate small{color:#9aa3b8;font-size:clamp(11px,2.6vmin,14px)}
@keyframes rot{0%,15%{transform:rotate(0)}55%,100%{transform:rotate(90deg)}}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}
@media (orientation:portrait) and (max-width:600px){#rotate{display:flex}}