/* Vatsal.lol Standard v2 Custom Implementation */
@font-face {
    font-family: "Vatsal-logo";
    src: url("../../assets/data/vatsal-logo-font.woff2") format("woff2");
    font-display: swap;
}
:root {
    --navy: #0d1b2a;
    --card: rgba(255,255,255,0.06);
    --card-border: rgba(255,255,255,0.12);
    --text: #e8f0fe;
    --muted: #7a9abf;
    --accent: #4fc3f7;
    --gold: #ffd54f;
    --red: #ef5350;
    --btn-bg: linear-gradient(135deg, #4fc3f7, #1e88e5);
    --btn-shadow: 0 8px 32px rgba(79,195,247,0.35);
    --radius: 20px;
  }

  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    overflow-y: auto !important; /* Forces natural scroll context */
    min-height: 100vh;
}

  /* BG */
  .bg {
    position:fixed; inset:0; z-index:0;
    background:
      radial-gradient(ellipse at 20% 20%, #1a3a5c 0%, var(--navy) 60%),
      radial-gradient(ellipse at 80% 80%, #0f2a44 0%, transparent 70%);
  }
  .bg::before {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
    background-size:40px 40px;
  }

  /* SCREENS */
  .screen {
     position:fixed;
    inset:0;
    z-index: 10;
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    padding-top: 0; /* Reserves perfect top space without breaking flex-center layout */
}
 
.screen.hidden {
    display:none !important;
}
  .bubble-deco { display:flex; gap:12px; margin:22px 0; align-items:center; }
  .deco-bubble { border-radius:50%; animation:floatDeco 3s ease-in-out infinite; }
  .deco-bubble:nth-child(1){ width:36px;height:36px;background:radial-gradient(circle at 35% 35%,#80deea,#00acc1);animation-delay:0s; }
  .deco-bubble:nth-child(2){ width:48px;height:48px;background:radial-gradient(circle at 35% 35%,#fff59d,#f9a825);animation-delay:0.4s; }
  .deco-bubble:nth-child(3){ width:32px;height:32px;background:radial-gradient(circle at 35% 35%,#f48fb1,#c2185b);animation-delay:0.8s; }
  .deco-bubble:nth-child(4){ width:44px;height:44px;background:radial-gradient(circle at 35% 35%,#ce93d8,#7b1fa2);animation-delay:1.2s; }
  .deco-bubble:nth-child(5){ width:30px;height:30px;background:radial-gradient(circle at 35% 35%,#a5d6a7,#388e3c);animation-delay:0.6s; }
  @keyframes floatDeco {
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-10px) scale(1.05); }
  }

  .home-desc {
    font-size:16px; color:var(--muted);
    text-align:center; line-height:1.6;
    margin-bottom:28px; max-width:280px;
  }
  .home-desc strong { color:var(--text); font-weight:700; }

  .home-best {
    display:flex; align-items:center; gap:8px;
    background:var(--card); border:1px solid var(--card-border);
    border-radius:50px; padding:10px 20px;
    font-size:15px; font-weight:700;
    margin-bottom:28px; color:var(--gold);
  }
  .home-best span { color:var(--muted); font-weight:600; font-size:13px; }
  /* Home title specifics */
.home-title {
    font-family: 'Righteous', cursive;
    font-size: clamp(54px, 14vw, 84px);
    line-height: 0.9;
    text-align: center;
    color: var(--text);
}
.home-title span { color: var(--accent); }

  /* BUTTONS */
  .btn-play {
    background:var(--btn-bg); color:#fff;
    border:none; border-radius:60px;
    padding:18px 56px;
    font-family:'Nunito',sans-serif;
    font-size:20px; font-weight:800; letter-spacing:1px;
    cursor:pointer; box-shadow:var(--btn-shadow);
    transition:transform 0.15s, box-shadow 0.15s;
    position:relative; overflow:hidden;
  }
  .btn-play::after {
    content:''; position:absolute;
    top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
    animation:shimmer 2.5s infinite;
  }
  @keyframes shimmer { to { left:200%; } }
  .btn-play:active { transform:scale(0.96); box-shadow:0 4px 16px rgba(79,195,247,0.2); }

  .btn-secondary {
    background:var(--card); color:var(--text);
    border:1px solid var(--card-border); border-radius:60px;
    padding:14px 40px;
    font-family:'Nunito',sans-serif;
    font-size:16px; font-weight:700;
    cursor:pointer; transition:transform 0.15s,background 0.15s;
  }
  .btn-secondary:active { transform:scale(0.96); background:rgba(255,255,255,0.1); }

  /* ── GAME SCREEN ── */
  #game { padding:0; justify-content:flex-start; }

  /* HUD */
  .hud {
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px;
    background:rgba(13,27,42,0.9);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--card-border);
    gap:6px;
  }
  .hud-item { display:flex; flex-direction:column; align-items:center; min-width:52px; }
  .hud-label { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:1px; }
  .hud-val { font-family:'Righteous',cursive; font-size:22px; color:var(--text); line-height:1; }
  .hud-val.gold { color:var(--gold); }
  .hud-lives { display:flex; gap:3px; align-items:center; }
  .heart { font-size:15px; transition:transform 0.2s,opacity 0.2s; }
  .heart.lost { opacity:0.2; transform:scale(0.8); }

  .sound-btn {
    background:var(--card); border:1px solid var(--card-border);
    border-radius:50%; width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; cursor:pointer; color:var(--text); flex-shrink:0;
  }

  /* CANVAS — sits below HUD via pointer-events on HUD */
  #canvas {
    position:fixed; top:0; left:0;
    width:100%; height:100%;
    touch-action:none; z-index:11;
  }

  /* COMBO */
  #combo-display {
    position:fixed; top:76px; left:50%;
    transform:translateX(-50%);
    z-index:200; font-family:'Righteous',cursive;
    font-size:26px; color:var(--gold);
    text-shadow:0 0 20px rgba(255,213,79,0.6);
    pointer-events:none; opacity:0; transition:opacity 0.25s;
    white-space:nowrap;
  }
  #combo-display.show { opacity:1; }

  /* RAINBOW BANNER */
  #rainbow-banner {
    position:fixed; top:64px; left:0; right:0; z-index:150;
    text-align:center; padding:7px;
    font-family:'Righteous',cursive; font-size:15px; letter-spacing:2px;
    background:linear-gradient(90deg,#f48fb1,#ce93d8,#4fc3f7,#69f0ae,#ffd54f,#f48fb1);
    background-size:200% 100%;
    animation:rainbowShift 1s linear infinite;
    color:#fff; opacity:0; pointer-events:none; transition:opacity 0.3s;
  }
  #rainbow-banner.show { opacity:1; }
  @keyframes rainbowShift { to { background-position:200% 0; } }

  /* ── RESULT SCREEN ── */
  #result { gap:14px; padding:24px; }

  .result-label { font-family:'Righteous',cursive; font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); }
  .result-title { font-family:'Righteous',cursive; font-size:clamp(44px,13vw,68px); line-height:1; text-align:center; color:var(--text); }

  .result-card {
    background:var(--card); border:1px solid var(--card-border);
    border-radius:var(--radius); padding:22px 30px;
    text-align:center; width:100%; max-width:320px;
  }
  .result-score-label { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
  .result-score-num { font-family:'Righteous',cursive; font-size:54px; color:var(--accent); line-height:1; }
  .result-best-row { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; font-size:14px; font-weight:700; color:var(--gold); }
  .result-desc { color:var(--muted); font-size:13px; margin-top:6px; font-style:italic; }
  .new-best-badge {
    display:inline-block;
    background:linear-gradient(135deg,var(--gold),#ff8f00);
    color:#000; font-size:11px; font-weight:900;
    letter-spacing:2px; text-transform:uppercase;
    padding:4px 12px; border-radius:20px; margin-top:10px;
  }

  .result-btns { display:flex; flex-direction:column; gap:12px; width:100%; max-width:320px; }

  /* HOME BTN (result screen) */


  /* FOOTER */
  .page-footer {
    text-align:center; padding:10px;
    font-size:12px; color:var(--muted);
    font-weight:600; letter-spacing:1px;
  }
  .page-footer a { color:var(--accent); text-decoration:none; }

  /* SHAKE */
  @keyframes shake {
    0%,100%{ transform:translate(0,0); }
    20%{ transform:translate(-5px,2px); }
    40%{ transform:translate(5px,-3px); }
    60%{ transform:translate(-4px,3px); }
    80%{ transform:translate(4px,-1px); }
  }
  .shake { animation:shake 0.28s ease; }

#home .vatsal-header{

    position:absolute;

    top:0;

    left:0;

    right:0;

    margin:0;

    padding:0 20px;

    z-index:1000;
}
.vatsal-home{
    font-family:"Vatsal-logo" !important;
        color: #ffffff !important;
}
body{
    min-height:auto !important;
}
#result{
    gap:14px;
    padding:24px;
}


#bomb-flash{
    position:fixed;
    inset:0;
    background:#ef5350;
    opacity:0;
    pointer-events:none;
    z-index:9999;
}

/* AFTER */
#bomb-flash.show{
    animation:bombFlash 0.18s ease-out forwards;
}

@keyframes bombFlash{
    0%  { opacity: 0.55; }
    60% { opacity: 0.25; }
    100%{ opacity: 0;    }
}

@keyframes shakeCanvas {
  0%,100%{ transform:translate(0,0); }
  20%    { transform:translate(-6px, 3px); }
  40%    { transform:translate( 6px,-4px); }
  60%    { transform:translate(-5px, 4px); }
  80%    { transform:translate( 5px,-2px); }
}

#canvas.shake {
  animation: shakeCanvas 0.22s ease;
}
.screen{
    overflow-y:hidden !important;
}


#result.hidden{
    display:none !important;
}
#result {
  position: relative;
  min-height: 100vh;
  overflow-y: auto;
  justify-content: flex-start;
  padding-top: 60px;
  padding-bottom: 40px;
}
#home,
#game{
    overflow-y:hidden;
}

#result{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
/* Footer inside result screen */
#result .vatsal-related {
  width: 100%;
  max-width: 500px;
  margin: 20px 0 0;
}

#result .vatsal-related-title {
  color: var(--text);
   font-family:"Vatsal-logo" !important;
}

#result .vatsal-footer a {
  color: var(--muted);
   font-family:"Vatsal-logo" !important;
}