/* =============================================================
   DREAM DROP — FULLY RESPONSIVE CSS
   Philosophy: Everything uses vw/vh/vmin/clamp/% so the game
   looks proportionally identical on desktop, laptop, tablet,
   and phone. NO fixed pixel values anywhere (except box-shadows).
   Flex is used throughout for centering and layout.
   ============================================================= */

   /* here we just updating the my progres bug itself */

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Arial, sans-serif;
  background-color: rgb(174, 237, 245);
  background-image: url("./Images/Common_Images/bg2.jpg");
  background-repeat: no-repeat;
  /* FIX: cover fills the screen without stretching or distorting */
  background-size: cover;
  background-position: center;
}

/* ---- Root body = the full game container ---- */
#fidrat-home {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: url("./Images/Common_Images/bg2.jpg");
  background-repeat: no-repeat;
  /* FIX: cover maintains aspect ratio — no stretching */
  background-size: cover;
  background-position: center;
  background-color: rgb(174, 237, 245);
}

/* ---- Device Block (very tiny screens only) ---- */
#device-block {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #cce7ff, #f3e8ff);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 99999;
  text-align: center;
  gap: 2vh;
}

#device-block h1 {
  font-size: clamp(1.2rem, 4vw, 3rem);
  color: #4b2e83;
}

#device-block p {
  font-size: clamp(0.8rem, 2vw, 1.5rem);
  color: #333;
  max-width: 80vw;
}

/* ---- Focus/Pause Block ---- */
#focus-block {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 40, 0.85);
  color: white;
  display: none;
  z-index: 100000;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  pointer-events: all;
  gap: 2vh;
}

#focus-block h2 { font-size: clamp(1rem, 3vw, 2.5rem); }
#focus-block p  { font-size: clamp(0.7rem, 1.5vw, 1.2rem); }

/* ---- Game Area ---- */
#game-area {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

#overlay, #maze { pointer-events: none; }

/* =============================================================
   HOME SCREEN
   ============================================================= */

/* Logos top corners */
#vv {
  width: 10vw;
  height: auto;
  position: absolute;
  top: 2vh;
  right: 3vw;
}

#ie {
  width: 9vw;
  height: auto;
  position: absolute;
  top: 2vh;
  left: 3vw;
}

/* Organisation name */
#para {
  position: absolute;
  font-size: clamp(0.8rem, 2.5vw, 2rem);
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(13,11,11,0.5);
  color: rgb(68, 77, 198);
  top: 1vh;
  text-align: center;
  z-index: 1;
}

#para1 {
  position: absolute;
  font-size: clamp(0.6rem, 1.8vw, 1.4rem);
  font-style: oblique;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(13,11,11,0.3);
  color: green;
  top: 10vh;
  text-align: center;
  z-index: 1;
}

/* Game title */
#game-title {
  position: absolute;
  font-size: clamp(1.2rem, 5vw, 4rem);
  color: brown;
  text-align: center;
  top: 14vh;
  text-transform: uppercase;
  letter-spacing: 0.5vw;
  text-shadow: 2px 2px 4px rgba(13,11,11,0.6);
  align-self: center;
  z-index: 1;
}

/* #kids-row wraps both character images.
   On desktop: invisible wrapper, children use absolute positioning.
   On phone (<700px): becomes a flex row so kids sit side by side. */
#kids-row {
  position: static;
  width: 0;
  height: 0;
  overflow: visible;
}

/* Character images — desktop: absolute left/right corners */
#prem {
  width: 20vw;
  height: auto;
  max-height: 55vh;
  position: absolute;
  bottom: 5vh;
  left: 3vw;
  object-fit: contain;
}

#shanti {
  width: 20vw;
  height: auto;
  max-height: 55vh;
  position: absolute;
  bottom: 5vh;
  right: 3vw;
  border-radius: 2vw;
  object-fit: contain;
}

/* =============================================================
   DIFFICULTY BUTTONS (Easy / Medium / Hard)
   Positioned at the exact center of the screen horizontally,
   which places them between the two character images.
   left: 50% + translateX(-50%) = true horizontal center.
   top: 55% places them in the lower-center of the screen
   where the characters are, vertically aligned with them.
   ============================================================= */
.buttons {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  z-index: 2;
  width: 20vw;
  min-width: 140px;
}

/* Individual difficulty buttons sit inside the flex container */
#easyBtn, #mediumBtn, #hardBtn, #roadmapBtn {
  position: relative;
  width: 100%;
}

/* =============================================================
   UNIVERSAL BUTTON STYLE
   clamp() ensures font never overflows at any window size.
   white-space: nowrap stops text from wrapping inside button.
   padding in vw/vh so it scales proportionally.
   ============================================================= */
button {
  box-sizing: border-box;
  appearance: none;
  backdrop-filter: blur(10px);
  border: 0.3vh solid #afdbf8;
  border-color: #afdbf8;
  color: #000000;
  border-radius: 0.6em;
  box-shadow: 0 0 40px 40px #afdbf8 inset, 0 0 0 0 #afc7f8;
  transition: all 150ms ease-in-out;
  cursor: pointer;
  font-size: clamp(0.55rem, 1.6vh, 1.1rem); /* Scales — never overflows */
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;       /* Text stays on one line */
  line-height: 1.4;
  padding: 1.5vh 1.5vw;     /* Scales with viewport */
  margin: 0;
  width: 100%;
}

button:hover {
  box-shadow: 0 0 10px 0 #afdbf8 inset, 0 0 10px 4px #afdbf8;
  color: #000000;
}

#restartBtn, #quitBtn, #next {
  display: block;
  margin: 1.5vh auto;
  width: 60%;
}

/* My Progress button inside game over modal */
#progressBtn {
  display: none;          /* JS shows this when level ends */
  margin: 1.5vh auto 0;
  width: 60%;
  background: rgba(175, 219, 248, 0.7);
  border: none;
  border-radius: 0.5em;
  padding: 1vh 0;
  font-size: clamp(0.7rem, 1.5vw, 0.95rem);
  font-weight: bold;
  color: #333;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.2s;
}
#progressBtn:hover { background: rgba(175, 219, 248, 1); }

/* ---- Audio Toggle ---- */
.container1 {
  position: absolute;
  top: 1vh;
  left: 50%;
  transform: translateX(-50%);
  width: 8vw;
  height: 5vh;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.hidden { display: none; }

.slider {
  position: absolute;
  top: 1vh;
  left: 1vw;
  width: 3.5vw;
  height: 3vh;
  border-radius: 30vh;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 3vh;
  width: 1.5vw;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 50%;
  transition: .4s;
  box-shadow: 0 0 3px gray;
}

#audio_setting:checked + .slider { background: #fce1e4; }
#audio_setting:not(:checked) + .slider { background: #e38792; }
#audio_setting:not(:checked) + .slider:before { right: 2vw; }

.container1 .audio_icon { position: absolute; top: 100vh; right: 100vw; }
.container1 .audio_icon:hover { color: salmon; }

.container1 #audio_icon_off {
  top: 0; right: 1vw;
  width: 3vw; height: 5vh;
  cursor: pointer;
}

.container1 #audio_icon_on {
  top: 0; left: 6vw;
  width: 3vw; height: 5vh;
  cursor: pointer;
}

/* =============================================================
   INSTRUCTION MODALS
   Centered with flex. Padding and font in vw/vh.
   ============================================================= */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background-color: rgba(36, 35, 36, 0.8);
  justify-content: center;
  align-items: center;
}

/* FIXED: When JS sets display:block on modals, override to flex for centering */
.modal[style*="display: block"],
.modal[style*="display:block"] {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.modal-content1,
.instruction-content {
  text-align: center;
  font-size: clamp(0.9rem, 2.5vw, 2rem);
  background-color: rgb(201, 177, 246);
  padding: 4vh 4vw;
  width: clamp(260px, 60vw, 700px);
  border-radius: 4vw;
  box-shadow: 4px 4px 2px 1px rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  margin-right: 10vw;
  margin-left: 45vw;
}

.close {
  color: #aaa;
  float: right;
  font-size: clamp(1rem, 2vw, 1.8rem);
  font-weight: bold;
  cursor: pointer;
}
.close:hover { color: black; }

/* =============================================================
   GAME OVER MODAL
   FIXED: #gameOver uses display:flex for centering but JS sets
   display:block which breaks it. Solution: use a wrapper approach
   where the overlay IS the flex container.
   ============================================================= */
.over {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background-color: rgba(0,0,0,0.5);
}

#gameOver {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none;                 /* JS switches this to flex via style */
  justify-content: center;
  align-items: center;
  text-align: center;
  user-select: none;
  backdrop-filter: blur(5px);
  background-color: rgba(27,27,27,0.5);
  z-index: 999;
}

/* FIXED: When JS sets display:block, override back to flex so centering works */
#gameOver[style*="display: block"],
#gameOver[style*="display:block"] {
  display: flex !important;
}

/* Card inside game over —
   Narrow enough to NOT cover the characters on either side.
   Characters are ~20vw wide each, so card stays in middle ~30vw. */
.game {
  background-color: rgb(238, 217, 250);
  border-radius: 4vw;
  padding: 3vh 3vw;
  box-shadow: 4px 4px 2px 1px rgba(0,0,0,.5);
  width: clamp(200px, 30vw, 400px);
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: clamp(0.85rem, 1.8vw, 1.4rem);
  position: relative;
  z-index: 1000;
}

/* Side character images — positioned so they stand beside the card.
   z-index higher than card so they appear in front. */
.left-image, .right-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 55vh;
  width: auto;
  object-fit: contain;
  z-index: 1001;
}
.left-image  { left: 3vw; }
.right-image { right: 3vw; }

.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 998;
}

/* =============================================================
   BALL
   Uses vmin so it always stays proportional to the smaller
   dimension of the screen — same relative size on any device.
   Ball = 7vmin
   ============================================================= */
.ball {
  position: absolute;
  width: 7vmin;
  height: 7vmin;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background-image: url('Images/Dream_Drop/ball1.png');
  background-size: contain;
  background-repeat: no-repeat;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 10;
  transition: transform 150ms linear;
  will-change: left, top;
}

.ball:active  { cursor: grabbing; }
.ball.level1  { cursor: pointer; }

/* =============================================================
   BASKET
   Also uses vmin so it's ALWAYS larger than the ball.
   Ball = 7vmin, Basket = 12vmin wide — proportional on all screens.
   ============================================================= */
#basket {
  display: none;
  position: absolute;
  width: 12vmin;
  height: 14vmin;
  min-width: 64px;
  min-height: 74px;
  user-select: none;
  z-index: 9;
}

#basket > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =============================================================
   SCORE & TIME
   clamp() so readable at any size, positioned in vw from right.
   ============================================================= */
#score {
  position: absolute;
  display: none;
  top: 2vh;
  right: 22vw;
  font-size: clamp(0.8rem, 2.5vw, 1.6rem);
  font-weight: bold;
  user-select: none;
  z-index: 100;
}

#time {
  position: absolute;
  display: none;
  top: 2vh;
  right: 8vw;
  font-size: clamp(0.8rem, 2.5vw, 1.6rem);
  font-weight: bold;
  user-select: none;
  z-index: 100;
}

/* ---- Obstacles ---- */
.obstacle {
  position: absolute;
  background-image: url("Images/Dream_Drop/obstacle.png");
  background-repeat: repeat;
  z-index: 1;
  pointer-events: none;
}

/* ---- Video popups (basket success / try again animations) ----
   Fixed position at top-center, small size so they don't
   dominate the screen or block the game over card. */
#Basketvideo, #tryvideo {
  display: none;
  position: fixed;
  z-index: 1002;
  top: 2vh;
  left: 50%;
  transform: translateX(-50%);
  width: 10vmin;
  height: 10vmin;
  min-width: 55px;
  min-height: 55px;
  user-select: none;
}

/* ---- Animations ---- */
@keyframes drop-animation1 {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

.drop-animation {
  animation: drop-animation1 1.5s ease forwards;
  pointer-events: none;
}

.blur-background { filter: blur(7px); }

/* =============================================================
   TOUCH DEVICE OVERRIDES
   Added by JS only on real touch screens (pointer: coarse).
   Resizing a laptop browser does NOT trigger these.
   Ball and basket increase together so ratio is preserved.
   ============================================================= */
body.is-touch-device .ball {
  width: 10vmin;
  height: 10vmin;
  min-width: 56px;
  min-height: 56px;
}

body.is-touch-device #basket {
  width: 17vmin;
  height: 19vmin;
  min-width: 85px;
  min-height: 95px;
}

body.is-touch-device button {
  font-size: clamp(0.8rem, 2.5vh, 1.4rem);
  padding: 2vh 2.5vw;
}

/* Phone specific — hide heavy images to save space */
body.is-phone #prem,
body.is-phone #shanti,
body.is-phone .left-image,
body.is-phone .right-image {
  display: none;
}

body.is-phone .game   { width: 85vw; }
body.is-phone .buttons { width: 50vw; right: 50%; transform: translate(50%, -50%); }

/* =============================================================
   RESPONSIVE LAYOUT — MEDIA QUERIES
   These handle LAYOUT changes based on available screen space.
   Ball/basket sizes stay vmin-based — only layout changes here.
   ============================================================= */

/* --- Narrow screens < 700px (phones/small tablets) --- */
@media (max-width: 700px) {

  /* Switch the whole home screen to a vertical flex column
     so everything stacks: title → buttons → kids row */
  #fidrat-home {
    justify-content: flex-start;
    padding-top: 2vh;
    gap: 0;
  }

  /* Org name and subtitle — centered at top */
  #para {
    position: relative;
    top: auto;
    font-size: clamp(0.85rem, 3.5vw, 1.4rem);
    margin-top: 1vh;
    text-align: center;
    z-index: 1;
  }

  #para1 {
    position: relative;
    top: auto;
    font-size: clamp(0.7rem, 3vw, 1.1rem);
    margin-top: 0.5vh;
    text-align: center;
    z-index: 1;
  }

  /* Game title — centered, below the org names */
  #game-title {
    position: relative;
    top: auto;
    font-size: clamp(1.4rem, 7vw, 2.5rem);
    margin-top: 1vh;
    text-align: center;
    align-self: center;
  }

  /* Difficulty buttons — centered in the middle */
  .buttons {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 65vw;
    min-width: 180px;
    align-self: center;
    margin-top: 3vh;
    gap: 1.5vh;
  }

  /* #kids-row becomes a visible flex row at the bottom —
     kids sit side by side below the buttons */
  #kids-row {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
    margin-top: auto;   /* Push kids to the bottom of the flex column */
  }

  /* Character images — relative inside the flex row */
  #prem, #shanti {
    display: block;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: 40vw;
    height: auto;
    max-height: 30vh;
    object-fit: contain;
    border-radius: 0;
  }

  /* Logos — smaller */
  #vv { width: 13vw; top: 1vh; right: 2vw; }
  #ie { width: 11vw; top: 1vh; left: 2vw;  }

  /* Game Over card — full usable width, no side images */
  .game {
    width: 82vw;
    font-size: clamp(0.9rem, 3.5vw, 1.3rem);
    padding: 4vh 5vw;
  }

  /* Hide side character images in game over overlay */
  .left-image, .right-image {
    display: none;
  }

  /* Instruction modals — full width */
  .modal-content1,
  .instruction-content {
    width: 82vw;
    font-size: clamp(0.9rem, 4vw, 1.5rem);
    padding: 4vh 5vw;
    border-radius: 6vw;
    margin: 0 auto;
  }

  /* Score/time — opposite top corners */
  #score {
    right: auto;
    left: 3vw;
    top: 1.5vh;
    font-size: clamp(0.75rem, 3.5vw, 1rem);
  }

  #time {
    right: 3vw;
    top: 1.5vh;
    font-size: clamp(0.75rem, 3.5vw, 1rem);
  }

  #restartBtn, #quitBtn, #next, #progressBtn { width: 80%; }

  #Basketvideo, #tryvideo {
    width: 15vmin;
    height: 15vmin;
  }
}

/* --- Very narrow portrait phones < 430px --- */
@media (max-width: 430px) {

  .buttons { width: 72vw; }
  .game    { width: 90vw; }

  #prem, #shanti {
    width: 44vw;
    max-height: 26vh;
  }

  .container1 {
    left: auto;
    right: 2vw;
    transform: none;
  }
}

/* =============================================================
   LIVE FEEDBACK — POINT 5
   Emoji bursts, mascot speech bubble, screen flash
   ============================================================= */

/* ---- Emoji Burst ----
   A single emoji that pops up at the event location and floats up */
#emoji-burst {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  font-size: clamp(1.5rem, 5vmin, 3.5rem);
  display: none;
  user-select: none;
  /* Animation applied via JS */
}

@keyframes emoji-float {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(-8vh) scale(1.3); }
  100% { opacity: 0; transform: translateY(-16vh) scale(0.8); }
}

/* Multiple emoji particles spawned by JS */
.emoji-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  font-size: clamp(1.2rem, 4vmin, 2.8rem);
  user-select: none;
  animation: emoji-float 1s ease-out forwards;
}

/* ---- Mascot Speech Bubble ----
   Appears above the mascot images with encouraging text */
#mascot-message {
  position: fixed;
  bottom: 22vh;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 2vw;
  padding: 1vh 2vw;
  font-size: clamp(0.8rem, 2vw, 1.3rem);
  font-weight: bold;
  color: #4b2e83;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 99997;
  display: none;
  pointer-events: none;
  white-space: nowrap;
  /* Arrow pointing down toward mascots */
}

/* Triangle arrow at bottom of speech bubble */
#mascot-message::after {
  content: '';
  position: absolute;
  bottom: -1.2vh;
  left: 50%;
  transform: translateX(-50%);
  border-left: 1.2vw solid transparent;
  border-right: 1.2vw solid transparent;
  border-top: 1.5vh solid white;
}

@keyframes bubble-pop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.5); }
  40%  { opacity: 1; transform: translateX(-50%) scale(1.1); }
  70%  { transform: translateX(-50%) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ---- Mascot Bounce Animation ----
   Applied to #prem and #shanti via JS on score events */
@keyframes mascot-happy {
  0%   { transform: translateY(0) rotate(0deg); }
  20%  { transform: translateY(-3vh) rotate(-5deg); }
  40%  { transform: translateY(0) rotate(5deg); }
  60%  { transform: translateY(-2vh) rotate(-3deg); }
  80%  { transform: translateY(0) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes mascot-sad {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-1vw); }
  40%  { transform: translateX(1vw); }
  60%  { transform: translateX(-0.5vw); }
  80%  { transform: translateX(0.5vw); }
  100% { transform: translateX(0); }
}

/* Class added/removed by JS */
#prem.mascot-bounce,
#shanti.mascot-bounce {
  animation: mascot-happy 0.7s ease;
}

#prem.mascot-shake,
#shanti.mascot-shake {
  animation: mascot-sad 0.5s ease;
}

/* ---- Full Screen Flash ----
   Brief green/red overlay flash on success/fail */
#feedback-flash {
  position: fixed;
  inset: 0;
  z-index: 99996;
  pointer-events: none;
  opacity: 0;
  display: none;
}

@keyframes flash-success {
  0%   { opacity: 0.35; }
  100% { opacity: 0; }
}

@keyframes flash-fail {
  0%   { opacity: 0.3; }
  100% { opacity: 0; }
}

#feedback-flash.success {
  display: block;
  background: #00e676;
  animation: flash-success 0.5s ease-out forwards;
}

#feedback-flash.fail {
  display: block;
  background: #ff1744;
  animation: flash-fail 0.5s ease-out forwards;
}

/* ---- Basket hint arrow — bounces above basket on wrong drop ---- */
@keyframes arrow-bounce {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

/* ---- My Progress button — home screen only, below the difficulty buttons ---- */
#roadmapBtn {
  position: relative;
  width: 100%;
  background: rgba(175, 219, 248, 0.6);
  border: none;
  border-radius: 0.5em;
  padding: 1.2vh 0;
  font-size: clamp(0.75rem, 1.8vw, 1rem);
  font-weight: bold;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  z-index: 100;
  letter-spacing: 0.08em;
  transition: background 0.2s;
}

#roadmapBtn:hover {
  background: rgba(175, 219, 248, 0.9);
}

/* ============================================================
   VISUAL UPGRADE — Attractive game UI, backgrounds & effects
   ============================================================ */

/* ---------- Smooth rendering for all devices ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { -webkit-tap-highlight-color: transparent; }

/* ---------- Home screen background stars ---------- */
#fidrat-home {
  background-image: url("./Images/Common_Images/bg2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

/* Floating sparkle particles behind the home screen */
#fidrat-home::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,200,100,0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(100,180,255,0.18) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(180,100,255,0.12) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Game title — glowing neon style ---------- */
#game-title {
  font-family: 'Georgia', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 10px #ff9800,
    0 0 30px #ff5722,
    0 0 60px rgba(255,87,34,0.5),
    2px 2px 0 rgba(0,0,0,0.4);
  animation: title-pulse 3s ease-in-out infinite;
}
@keyframes title-pulse {
  0%, 100% { text-shadow: 0 0 10px #ff9800, 0 0 30px #ff5722, 0 0 60px rgba(255,87,34,0.5), 2px 2px 0 rgba(0,0,0,0.4); }
  50%       { text-shadow: 0 0 20px #ffc107, 0 0 50px #ff9800, 0 0 90px rgba(255,152,0,0.7), 2px 2px 0 rgba(0,0,0,0.4); }
}

/* ---------- Buttons — vibrant pill style ---------- */
#easyBtn {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
  color: #1a4a2e !important;
  box-shadow: 0 6px 20px rgba(67,233,123,0.45), 0 0 0 0 rgba(67,233,123,0.4) !important;
  border: none !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
#easyBtn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(67,233,123,0.6), 0 0 0 4px rgba(67,233,123,0.2) !important;
}

#mediumBtn {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
  color: #5a3000 !important;
  box-shadow: 0 6px 20px rgba(247,151,30,0.45) !important;
  border: none !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
#mediumBtn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(247,151,30,0.65) !important;
}

#hardBtn {
  background: linear-gradient(135deg, #f5515f 0%, #9f041b 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(245,81,95,0.45) !important;
  border: none !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
#hardBtn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(245,81,95,0.65) !important;
}

#roadmapBtn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(102,126,234,0.45) !important;
  border: none !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
#roadmapBtn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(102,126,234,0.65) !important;
}

/* Button press pop */
button:active { transform: scale(0.95) !important; }
#roadmapBtn:active { transform: scale(0.95) !important; }

/* ---------- Game-area background when playing ---------- */
body.game-active #fidrat-home,
#fidrat-home.game-active {
  background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
}

/* ---------- Score / Time HUD ---------- */
#score, #time {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  border-radius: 2em;
  padding: 0.4vh 1.8vw;
  font-size: clamp(0.9rem, 2vw, 1.4rem) !important;
  font-family: 'Georgia', serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1.5px solid rgba(255,255,255,0.18);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  top: 1.5vh !important;
}
#score { right: clamp(80px,16vw,220px) !important; }
#time  { right: clamp(20px,5vw,80px) !important; }

/* ---------- Ball glow ---------- */
.ball {
  filter: drop-shadow(0 0 8px rgba(255,120,50,0.7));
  transition: filter 0.1s;
}
.ball:hover {
  filter: drop-shadow(0 0 16px rgba(255,180,50,1));
}

/* ---------- Game-over modal — upgraded ---------- */
.game {
  background: linear-gradient(135deg, rgba(30,10,60,0.97), rgba(70,20,100,0.97)) !important;
  border: 2px solid rgba(255,255,255,0.15) !important;
  border-radius: 1.8em !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(16px);
  color: #fff !important;
  font-size: clamp(1rem, 2vw, 1.5rem) !important;
}
#gameOverMessage {
  color: #fff;
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  margin-bottom: 1.5vh;
  text-shadow: 0 0 10px rgba(255,200,100,0.5);
}
#restartBtn {
  background: linear-gradient(135deg, #43e97b, #38f9d7) !important;
  color: #1a4a2e !important; border: none !important;
}
#quitBtn {
  background: linear-gradient(135deg, #f5515f, #9f041b) !important;
  color: #fff !important; border: none !important;
}
#next {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: #fff !important; border: none !important;
}
#progressBtn {
  background: linear-gradient(135deg, #f7971e, #ffd200) !important;
  color: #5a3000 !important; border: none !important;
}

/* ---------- Obstacle walls — glowing neon style ---------- */
.obstacle {
  background-image: none !important;
  background: linear-gradient(90deg, #8e2de2, #4a00e0) !important;
  border-radius: 6px;
  box-shadow:
    0 0 8px rgba(142,45,226,0.8),
    0 0 20px rgba(74,0,224,0.5),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

/* ---------- Basket glow ---------- */
#basket {
  filter: drop-shadow(0 0 12px rgba(255,200,50,0.6));
}

/* ---------- Instruction modals ---------- */
.modal-content1, .instruction-content {
  background: linear-gradient(135deg, rgba(50,10,90,0.96), rgba(100,30,150,0.96)) !important;
  color: #fff !important;
  border-radius: 1.5em !important;
  border: 2px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
.modal-content1 p, .instruction-content p {
  color: #fff;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
}

/* ---------- Focus / device block ---------- */
#focus-block {
  background: rgba(10,10,30,0.92) !important;
  backdrop-filter: blur(12px);
}
#focus-block h2 { color: #ffd200; text-shadow: 0 0 12px rgba(255,210,0,0.5); }
#focus-block p  { color: rgba(255,255,255,0.8); }

/* ---------- Feedback flash overlay ---------- */
#feedback-flash {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.1s;
}

/* ---------- Emoji burst ---------- */
#emoji-burst {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  top: 0; left: 0;
}

/* ---------- Mascot message bubble ---------- */
#mascot-message {
  background: rgba(255,255,255,0.95);
  border-radius: 1.2em;
  padding: 0.6em 1.2em;
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  font-weight: bold;
  color: #4b2e83;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  border: 2px solid rgba(102,126,234,0.4);
}

/* ---------- Para texts on home screen ---------- */
#para  { color: #fff; text-shadow: 0 0 8px rgba(100,150,255,0.6), 0 2px 4px rgba(0,0,0,0.5); }
#para1 { color: #ffd200; text-shadow: 0 0 8px rgba(255,200,0,0.6), 0 2px 4px rgba(0,0,0,0.5); }

/* ---------- Roadmap progress button in game-over ---------- */
#progressBtn { margin-top: 1vh; }

/* ---------- Arrow-bounce animation (basket hint) ---------- */
@keyframes arrow-bounce {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

/* ---------- Drop animation ---------- */
@keyframes drop-animation1 {
  0%   { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
/* ============================================================
   ALL ADDONS CSS
   ============================================================ */
#rotate-block{display:none;position:fixed;inset:0;background:#1a1a2e;z-index:999999;flex-direction:column;align-items:center;justify-content:center;gap:2vh;text-align:center;padding:4vw;}
#rotate-icon{font-size:clamp(3rem,15vw,5rem);color:#afdbf8;animation:rotate-hint 2s ease-in-out infinite;}
@keyframes rotate-hint{0%{transform:rotate(0deg)}40%{transform:rotate(90deg)}60%{transform:rotate(90deg)}100%{transform:rotate(0deg)}}
#rotate-block h2{font-size:clamp(1.1rem,5vw,1.6rem);color:#fff;font-weight:700;margin:0;}
#rotate-block p{font-size:clamp(0.75rem,3.5vw,1rem);color:rgba(255,255,255,0.65);max-width:80vw;margin:0;}
@media(max-height:500px)and(max-width:900px){
  #score{position:fixed!important;top:4px!important;left:8px!important;right:auto!important;font-size:clamp(0.65rem,2.5vw,0.9rem)!important;background:rgba(0,0,0,0.55);color:#fff;padding:2px 8px;border-radius:6px;z-index:200;}
  #time{position:fixed!important;top:4px!important;right:8px!important;left:auto!important;font-size:clamp(0.65rem,2.5vw,0.9rem)!important;background:rgba(0,0,0,0.55);color:#fff;padding:2px 8px;border-radius:6px;z-index:200;}
  .game{width:70vw!important;padding:2vh 3vw!important;margin:10% auto!important;}
  .left-image,.right-image{display:none!important;}
}
.modal-content{margin-right:auto!important;margin-left:auto!important;}
#gameOver{overflow-y:auto!important;}
#gameOver[style*="display: block"],#gameOver[style*="display:block"]{display:flex!important;overflow-y:auto!important;align-items:flex-start!important;padding:4vh 0!important;}
@media(max-height:600px){.game{margin:2vh auto!important;padding:2vh 3vw!important;}.left-image,.right-image{display:none!important;}}
body.is-touch-device button{min-height:44px;}

/* Analytics button */
#analytics-btn{display:block;margin:1.5vh auto;width:60%;}

/* Analytics overlay */
#an-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:999999;align-items:center;justify-content:center;padding:10px;}
#an-overlay.an-open{display:flex;}
#an-panel{background:#fff;border-radius:14px;width:min(96vw,940px);max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,0.5);}
#an-header{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid #e8eaf0;flex-shrink:0;background:#f8f9ff;border-radius:14px 14px 0 0;}
#an-title{font-size:clamp(0.85rem,1.8vw,1rem);font-weight:700;color:#1a1a2e;}
.an-hdr-btn{font-size:12px!important;padding:4px 12px!important;border-radius:6px!important;border:1px solid #dde!important;background:#fff!important;color:#444!important;cursor:pointer;width:auto!important;margin:0!important;min-height:unset!important;box-shadow:none!important;}
#an-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px 14px;border-bottom:1px solid #e8eaf0;flex-shrink:0;}
.an-card{background:#f4f6fb;border-radius:8px;padding:8px 6px;text-align:center;}
.an-lbl{font-size:10px;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:3px;}
.an-val{font-size:clamp(0.9rem,1.8vw,1.15rem);font-weight:800;color:#1a1a2e;}
#an-body{display:grid;grid-template-columns:1fr 210px;gap:12px;padding:12px 14px;flex:1;}
#an-canvas-col{display:flex;flex-direction:column;gap:7px;}
#an-chk-row{display:flex;gap:14px;font-size:12px;color:#555;}
#an-chk-row label{display:flex;align-items:center;gap:4px;cursor:pointer;}
#an-canvas-wrap{position:relative;border-radius:8px;overflow:hidden;border:1px solid #e0e4f0;background:#f0f3ff;}
#an-cv-heat,#an-cv-path{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
#an-cv-heat{opacity:0.55;}
#an-cv-main{display:block;width:100%;height:260px;}
#an-fb{display:flex;align-items:center;gap:8px;background:#f4f6fb;border-radius:8px;padding:7px 12px;font-size:12px;color:#555;min-height:34px;}
#an-fb-dot{width:9px;height:9px;border-radius:50%;background:#ccc;flex-shrink:0;transition:background 0.3s;}
#an-sidebar{display:flex;flex-direction:column;gap:10px;}
.an-sec{background:#f8f9ff;border-radius:8px;padding:9px 10px;border:1px solid #e8eaf0;}
.an-sec-ttl{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:7px;}
#an-pattern{display:flex;flex-direction:column;gap:5px;}
#an-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.an-zone-cell{background:#fff;border-radius:5px;padding:5px 3px;text-align:center;border:1px solid #e8eaf0;font-size:10px;}
.an-zone-bar{height:3px;background:#e8eaf0;border-radius:2px;margin:3px 0;overflow:hidden;}
.an-zone-fill{height:100%;background:#378ADD;border-radius:2px;}
@media(max-width:600px){#an-stats{grid-template-columns:repeat(3,1fr);}#an-body{grid-template-columns:1fr;}#an-sidebar{display:none;}}

/* Taskbar */
#game-taskbar{display:none;position:fixed;right:0;top:50%;transform:translateY(-50%);width:clamp(48px,6.5vw,68px);background:rgba(12,10,30,0.88);border-radius:16px 0 0 16px;border:1.5px solid rgba(255,255,255,0.12);border-right:none;z-index:90000;flex-direction:column;align-items:center;padding:clamp(10px,1.6vh,18px) 0;gap:clamp(5px,0.9vh,11px);box-shadow:-6px 0 28px rgba(0,0,0,0.45);}
#game-taskbar.tb-on{display:flex;}
#tb-lvl-wrap{color:rgba(255,255,255,0.55);font-size:clamp(0.45rem,0.85vh,0.62rem);font-weight:800;letter-spacing:0.1em;text-transform:uppercase;text-align:center;user-select:none;line-height:1.25;}
#tb-lvl-wrap strong{font-size:clamp(0.9rem,1.7vh,1.15rem);color:#fff;display:block;}
.tb-sep{width:58%;height:1px;background:rgba(255,255,255,0.12);flex-shrink:0;}
.tb-btn{display:flex;align-items:center;justify-content:center;width:clamp(32px,4vw,46px);height:clamp(32px,4vw,46px);background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.14);border-radius:9px;color:#fff;cursor:pointer;font-size:clamp(0.95rem,1.8vh,1.3rem);transition:background 0.15s,transform 0.1s;padding:0;flex-shrink:0;min-height:unset!important;}
.tb-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.08);}
.tb-btn img{width:clamp(17px,2.4vh,25px);height:clamp(17px,2.4vh,25px);object-fit:contain;filter:brightness(0)invert(1);}
#game-taskbar.snd-off #tb-snd{background:rgba(220,55,55,0.28);}
#tb-pause.tb-paused{background:rgba(245,166,35,0.3);color:#ffcc55;}

/* Mascot animations */
#prem,#shanti{transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);will-change:transform;}
@keyframes mascot-jump{0%{transform:translateY(0)scaleX(1)}25%{transform:translateY(-8vh)scaleX(0.92)rotate(-6deg)}50%{transform:translateY(-12vh)scaleX(1.05)rotate(5deg)}75%{transform:translateY(-4vh)scaleX(0.97)rotate(-2deg)}100%{transform:translateY(0)scaleX(1)}}
@keyframes mascot-clap{0%,100%{transform:rotate(0)translateY(0)}20%{transform:rotate(-12deg)translateY(-1.5vh)}40%{transform:rotate(12deg)translateY(-2.5vh)}60%{transform:rotate(-8deg)translateY(-1.5vh)}80%{transform:rotate(8deg)translateY(-2vh)}}
@keyframes mascot-point-l{0%,100%{transform:rotate(0)translateX(0)}35%{transform:rotate(-15deg)translateX(3vw)}65%{transform:rotate(-12deg)translateX(2.5vw)}}
@keyframes mascot-point-r{0%,100%{transform:rotate(0)translateX(0)}35%{transform:rotate(15deg)translateX(-3vw)}65%{transform:rotate(12deg)translateX(-2.5vw)}}
@keyframes mascot-worry{0%,100%{transform:rotate(0)}15%{transform:rotate(-7deg)translateY(-1vh)}30%{transform:rotate(7deg)}45%{transform:rotate(-5deg)translateY(-0.5vh)}60%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}90%{transform:rotate(3deg)}}
@keyframes mascot-comfort-l{0%{transform:translateX(-130%)rotate(-5deg);opacity:0}50%{transform:translateX(13vw)rotate(4deg);opacity:1}70%{transform:translateX(11vw)rotate(-2deg)}100%{transform:translateX(12vw)rotate(0)}}
@keyframes mascot-comfort-r{0%{transform:translateX(130%)rotate(5deg);opacity:0}50%{transform:translateX(-13vw)rotate(-4deg);opacity:1}70%{transform:translateX(-11vw)rotate(2deg)}100%{transform:translateX(-12vw)rotate(0)}}
@keyframes mascot-retreat-l{0%{transform:translateX(12vw)}100%{transform:translateX(0)}}
@keyframes mascot-retreat-r{0%{transform:translateX(-12vw)}100%{transform:translateX(0)}}
@keyframes mascot-idle{0%,100%{transform:scaleY(1)translateY(0)}50%{transform:scaleY(0.97)translateY(0.3vh)}}
@keyframes mascot-entrance-l{0%{transform:translateX(-150%)rotate(-10deg);opacity:0}70%{transform:translateX(5%)rotate(4deg);opacity:1}85%{transform:translateX(-2%)rotate(-2deg)}100%{transform:translateX(0)rotate(0)}}
@keyframes mascot-entrance-r{0%{transform:translateX(150%)rotate(10deg);opacity:0}70%{transform:translateX(-5%)rotate(-4deg);opacity:1}85%{transform:translateX(2%)rotate(2deg)}100%{transform:translateX(0)rotate(0)}}
#prem.mascot-jump{animation:mascot-jump 0.9s cubic-bezier(0.175,0.885,0.32,1.275);}
#shanti.mascot-jump{animation:mascot-jump 0.9s cubic-bezier(0.175,0.885,0.32,1.275);}
#prem.mascot-clap{animation:mascot-clap 0.8s ease;}
#shanti.mascot-clap{animation:mascot-clap 0.8s ease;}
#prem.mascot-point{animation:mascot-point-l 1.2s ease forwards;}
#shanti.mascot-point{animation:mascot-point-r 1.2s ease forwards;}
#prem.mascot-worry{animation:mascot-worry 1s ease;}
#shanti.mascot-worry{animation:mascot-worry 1s ease;}
#prem.mascot-comfort{animation:mascot-comfort-l 1s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}
#shanti.mascot-comfort{animation:mascot-comfort-r 1s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}
#prem.mascot-retreat{animation:mascot-retreat-l 0.6s ease forwards;}
#shanti.mascot-retreat{animation:mascot-retreat-r 0.6s ease forwards;}
#prem.mascot-idle{animation:mascot-idle 3s ease-in-out infinite;}
#shanti.mascot-idle{animation:mascot-idle 3s ease-in-out infinite;}
#prem.mascot-entrance{animation:mascot-entrance-l 0.8s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}
#shanti.mascot-entrance{animation:mascot-entrance-r 0.8s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}