@font-face {
  font-family: 'Maplestory';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MaplestoryLight.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Maplestory';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MaplestoryBold.woff') format('woff');
  font-weight: 700 900;
  font-display: swap;
}

  :root{--bg:#0d0d1a;--ink:#24364b;--brand:#ffb84d;--deep:#314a6b;--card:#ffffff;}
  800;900&display=swap');
  *{box-sizing:border-box;}
  html,body{
    margin:0;height:100%;overflow:hidden;
    background: radial-gradient(ellipse at 30% 20%, #1a1040 0%, #0a0818 50%, #050510 100%);
    font-family:'Maplestory',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;
  }
  /* Starfield background dots */
  body::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:
      radial-gradient(1px 1px at 15% 12%, rgba(255,255,255,.7) 0%, transparent 100%),
      radial-gradient(1px 1px at 72% 8%,  rgba(255,255,255,.5) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 43% 25%, rgba(255,220,120,.8) 0%, transparent 100%),
      radial-gradient(1px 1px at 88% 38%, rgba(255,255,255,.6) 0%, transparent 100%),
      radial-gradient(1px 1px at 5%  55%, rgba(255,255,255,.4) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 60% 70%, rgba(180,220,255,.7) 0%, transparent 100%),
      radial-gradient(1px 1px at 92% 82%, rgba(255,255,255,.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 28% 90%, rgba(255,255,255,.3) 0%, transparent 100%);
  }
  /* Glowing orbs in background */
  body::after{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(ellipse 340px 280px at 15% 80%, rgba(80,40,180,.18) 0%, transparent 70%),
      radial-gradient(ellipse 300px 240px at 88% 10%, rgba(255,160,40,.10) 0%, transparent 70%),
      radial-gradient(ellipse 220px 180px at 50% 50%, rgba(40,120,255,.07) 0%, transparent 70%);
  }
  .wrap{
    height:100%;display:flex;align-items:center;justify-content:center;
    padding:10px;position:relative;z-index:1;
  }
  .device-frame{
    position:relative;
    width:min(100vw - 20px, 430px);
    max-height:calc(100vh - 20px);
    aspect-ratio:390/720;
    flex-shrink:0;
  }
  /* Outer phone-like glow ring */
  .device-frame::before{
    content:'';position:absolute;inset:-3px;border-radius:28px;
    background:linear-gradient(135deg,rgba(255,200,80,.6),rgba(120,80,255,.4),rgba(40,160,255,.5),rgba(255,100,140,.3));
    z-index:-1;filter:blur(2px);
  }
  /* Inner shadow overlay for screen depth */
  .device-frame::after{
    content:'';position:absolute;inset:0;border-radius:24px;pointer-events:none;z-index:2;
    box-shadow:
      inset 0 0 0 1.5px rgba(255,255,255,.18),
      inset 0 2px 0 rgba(255,255,255,.35),
      inset 0 -2px 0 rgba(0,0,0,.35),
      0 0 60px rgba(100,60,255,.25),
      0 24px 80px rgba(0,0,10,.7);
  }
  canvas{
    width:100%;height:100%;
    aspect-ratio:390/720;
    background:#0d0820;
    border-radius:24px;
    touch-action:none;
    display:block;
  }
canvas{font-family:'Maplestory',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}