@font-face{

    font-family:"Vatsal-logo";

    src:url("../../assets/data/vatsal-logo-font.ttf")
    format("truetype");
    font-display:swap;
}
* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
   body {
      min-height: 100vh;
      background: #0b0e1a;
      background: radial-gradient(circle at 30% 30%, #1b1f35, #03050c);
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: 'Segoe UI', system-ui, sans-serif;
      touch-action: pan-y;
    }
    .game-container {
      width: 100%;
      max-width: 460px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .top-bar {
      width: 100%;
      background: rgba(10, 15, 30, 0.8);
      backdrop-filter: blur(10px);
      border: 1px solid #fffa;
      border-radius: 60px;
      padding: 16px 24px;
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
      font-weight: 600;
      font-size: 1.5rem;
      box-shadow: 0 15px 25px black;
    }
    .score {
      background: #2a3f5e;
      padding: 6px 20px;
      border-radius: 40px;
      box-shadow: inset 0 -3px 0 #0a1a2a;
    }
    .high-score {
      background: #3d2b5e;
      padding: 6px 20px;
      border-radius: 40px;
    }
    .canvas-wrapper {
      width: 100%;
      background: #0a0c18;
      border-radius: 48px;
      padding: 8px;
      box-shadow: 0 20px 30px black, 0 0 0 2px #f0f3ff40 inset;
    }
    canvas {
      display: block;
      width: 100%;
      height: auto;
      background: #111629;
      background: radial-gradient(circle at 30% 30%, #232845, #0a0d1a);
      border-radius: 40px;
      touch-action: none;
      cursor: pointer;
      box-shadow: inset 0 -8px 10px rgba(0,0,0,0.6);
    }
    .hint {
      color: #ccdaff;
      margin-top: 16px;
      font-size: 1.2rem;
      background: #1a1f35;
      padding: 8px 25px;
      border-radius: 60px;
      border: 1px solid cyan;
      box-shadow: 0 0 15px cyan;
    }
    .overlay-card {
      background: #131b30;
      border: 3px solid #7aa5ff;
      border-radius: 80px;
      padding: 40px 32px;
      max-width: 360px;
      width: 80%;
      text-align: center;
      color: white;
      box-shadow: 0 0 70px #7aa5ff;
    }
    .overlay-title {
      font-size: 3rem;
      font-weight: 800;
      color: #b3c7ff;
      text-shadow: 0 0 20px blue;
      margin-bottom: 20px;
    }
    .btn {
      background: #1f2b4a;
      border: 2px solid #9bb3ff;
      color: white;
      font-size: 2rem;
      font-weight: 600;
      padding: 16px 24px;
      border-radius: 60px;
      margin: 16px 0;
      width: 100%;
      box-shadow: 0 10px 0 #0e1a2a, 0 0 30px #9bb3ff;
      cursor: pointer;
      transition: 0.05s linear;
      touch-action: manipulation;
    }
    .btn:active {
      transform: translateY(5px);
      box-shadow: 0 5px 0 #0e1a2a, 0 0 40px #9bb3ff;
    }
    .small-note { color: #aab9e0; margin-top: 12px; }
    /* screen panels — replace overlays */
.screen-panel {
    width: 100%;
    max-width: 460px;
    background: #131b30;
    border: 3px solid #7aa5ff;
    border-radius: 48px;
    padding: 40px 32px;
    text-align: center;
    color: white;
    box-shadow: 0 0 70px #7aa5ff44;
    margin: 16px 8px;
}

.hidden { display: none !important; }

/* vatsal header centering */
.vatsal-header {
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    padding: 10px 16px 4px;
    color: white;
    flex-shrink: 0;
}

.vatsal-home {
    color: white !important;
}

/* hide top-bar on start/menu */
.hide-topbar .top-bar {
    display: none !important;
}
.vatsal-related-title,
.vatsal-footer,
.vatsal-footer a {
    font-family: "Vatsal-logo" !important;
    color: #ffffff !important;
}
.vatsal-related {
    border: none !important;
}