@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;900&display=swap');
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background: #000;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    height:100vh;overflow:hidden;
    font-family:'Nunito',sans-serif;
  }
  #title{
    color:#ff4466;font-family:'Fredoka One',cursive;
    font-size:26px;letter-spacing:3px;margin-bottom:6px;
    text-shadow:0 0 25px #ff446688,0 0 50px #ff446633;
  }
  #wrapper{position:relative}
  canvas{
    display:block;
    border:3px solid #ff4466;border-radius:6px;
    box-shadow:0 0 30px #ff446644,0 0 60px #ff446622;
  }
  #ui{
    position:absolute;top:10px;left:14px;
    color:#fff;font-size:14px;font-weight:700;
    z-index:10;text-shadow:1px 1px 3px #000;pointer-events:none;
  }
  #ui span{color:#ffd700;font-family:'Fredoka One',cursive;font-size:17px}
  #hint{
    position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
    color:#ffcc44;font-size:13px;font-weight:700;
    background:#00000099;padding:4px 14px;border-radius:20px;
    border:1px solid #ff446666;pointer-events:none;white-space:nowrap;
    font-family:'Fredoka One',cursive;letter-spacing:1px;
  }
  #overlay{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    color:#fff;font-family:'Fredoka One',cursive;
    font-size:42px;text-align:center;display:none;
    z-index:20;pointer-events:none;line-height:1.3;
    text-shadow:0 0 30px currentColor,2px 2px 0 #000;
  }
  #controls{margin-top:6px;color:#444;font-size:11px;text-align:center}