/* ══════════════════════════════════════════════════════════
   brain-kids.css — Brain Kids game styles
   Unified design: light background, purple navbar
   ══════════════════════════════════════════════════════════ */

html, body {
  height: 100%;
  background: var(--sky-bg);
  color: var(--sky-text);
  overflow: hidden;
}

/* ══ SCREENS ══ */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }

/* ══ HOME ══ */
#screen-home { background: transparent; }

.home-header {
  background: rgba(10,10,26,0.95);
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sky-border);
  flex-shrink: 0;
}
.home-title {
  color: var(--sky-brain, #a29bfe);
  font-size: 1.2rem;
  font-weight: 900;
  font-family: 'Fredoka One', cursive;
  letter-spacing: 0.5px;
}
.home-session { color: var(--sky-text-soft); font-size: 0.75rem; font-weight: 800; background: rgba(255,255,255,0.1); border-radius: 50px; padding: 3px 10px; }

.game-grid {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-content: start;
  -webkit-overflow-scrolling: touch;
}
.game-tile {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 45%),
    var(--tile-color, #6c5ce7);
  border: 2px solid rgba(255,255,255,0.28);
  border-radius: 22px;
  padding: clamp(14px,3.5vw,18px) 6px clamp(11px,2.8vw,15px);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 0.12s;
  box-shadow:
    0 6px 0 rgba(0,0,0,0.22),
    0 10px 22px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.3);
  position: relative; overflow: hidden;
  animation: tilePopIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
/* Top gloss sheen */
.game-tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
  border-radius: 22px 22px 60% 60%;
  pointer-events: none; z-index: 0;
}
.game-tile::after { display: none; }

.game-tile:hover  { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 0 rgba(0,0,0,0.22), 0 16px 30px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.35); }
.game-tile:active { transform: translateY(5px) scale(0.96); box-shadow: 0 1px 0 rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2); }
.game-tile.locked { opacity: 0.42; pointer-events: none; filter: grayscale(0.4); }

@keyframes tilePopIn {
  from { transform: scale(0.65); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.game-tile-icon  { font-size: clamp(2.4rem,10vw,3.2rem); line-height: 1; position: relative; z-index: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35)); }
.game-tile-name  { font-size: clamp(0.64rem,2.5vw,0.76rem); font-weight: 900; color: #fff; text-align: center; line-height: 1.25; position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.game-tile-stars { font-size: 0.68rem; line-height: 1; color: #ffd93d; position: relative; z-index: 1; min-height: 12px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.tile-badge { position: absolute; top: 6px; right: 6px; z-index: 2; background: rgba(0,0,0,0.35); color: #fff; font-size: 0.48rem; font-weight: 900; padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); }

.home-nav {
  background: rgba(10,10,26,0.97);
  display: flex;
  border-top: 1px solid var(--sky-border);
  flex-shrink: 0;
}
.nav-btn { flex: 1; padding: 10px 4px 8px; background: none; border: none; color: var(--sky-text-soft); font-size: 0.58rem; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nav-btn.active { color: var(--sky-brain, #a29bfe); }
.nav-icon { font-size: 1.25rem; line-height: 1; }

/* ══ COUNTDOWN ══ */
#screen-countdown { background: transparent; align-items: center; justify-content: center; gap: 12px; }
.cd-icon { font-size: 5rem; animation: cdPop 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }
.cd-name { color: var(--sky-text-soft); font-size: 1.1rem; font-weight: 800; }
.cd-num { font-size: 7rem; font-weight: 900; color: var(--sky-brain, #a29bfe); font-family: 'Fredoka One', cursive; line-height: 1; }
.cd-go  { font-size: 3rem; font-weight: 900; color: #00b894; font-family: 'Fredoka One', cursive; }
@keyframes cdPop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/* ══ GAME SCREEN ══ */
#screen-game { background: transparent; }
.game-topbar {
  background: rgba(10,10,26,0.95);
  padding: 0 16px;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.game-topbar-name { color: #fff; font-size: 0.95rem; font-weight: 800; }
.game-topbar-right { display: flex; align-items: center; gap: 14px; }
.game-score-display { color: var(--gs-warm); font-size: 1rem; font-weight: 900; font-family: 'Fredoka One', cursive; transition: transform 0.2s; }
.game-timer-display { color: #fff; font-size: 1.15rem; font-weight: 900; font-family: 'Fredoka One', cursive; min-width: 28px; text-align: right; background: rgba(255,255,255,0.2); border-radius: 50px; padding: 2px 8px; }
.game-timer-display.urgent { color: #ff453a; animation: timerPulse 0.5s ease-in-out infinite; }
@keyframes timerPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.timer-bar-outer { height: 5px; background: rgba(108,92,231,0.1); flex-shrink: 0; }
.timer-bar-inner { height: 5px; background: linear-gradient(90deg,var(--gs-primary),#a29bfe); transition: width 1s linear; transform-origin: left; }

.game-area {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(10px,3vw,16px) clamp(12px,4vw,18px);
  gap: clamp(10px,2.5vw,14px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ══ RESULT SCREEN ══ */
#screen-result { background: transparent; align-items: center; justify-content: center; }
.result-card {
  background: var(--sky-card);
  border-radius: 26px;
  width: 88%; max-width: 340px;
  padding: clamp(24px,6vw,36px) clamp(18px,5vw,28px) clamp(20px,5vw,28px);
  text-align: center;
  animation: gs-card-pop 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  border: 1px solid var(--sky-border);
}
.res-game-name  { color: var(--sky-text-soft); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.res-stars-row  { font-size: 3rem; letter-spacing: 4px; margin-bottom: 6px; animation: gs-card-pop 0.5s 0.1s cubic-bezier(0.175,0.885,0.32,1.275) both; }
.res-score-num  { font-size: 5rem; font-weight: 900; color: var(--sky-brain, #a29bfe); font-family: 'Fredoka One', cursive; line-height: 1; }
.res-score-lbl  { color: var(--sky-text-soft); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.res-best-line  { color: #ffd93d; font-size: 0.78rem; font-weight: 800; margin-bottom: 22px; min-height: 18px; }
.res-btns { display: flex; gap: 10px; }
.res-btn { flex: 1; padding: 13px 10px; border-radius: 50px; border: none; font-size: 0.9rem; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; }
.res-btn.home  { background: rgba(255,255,255,0.1); color: var(--sky-text); }
.res-btn.again { background: linear-gradient(135deg,var(--sky-brain, #a29bfe),#6c5ce7); color: #fff; }

/* ══ SCORES SCREEN ══ */
#screen-scores { background: transparent; }
.scores-header { background: rgba(10,10,26,0.95); padding: 0 16px; height: 56px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--sky-border); }
.scores-back  { background: none; border: none; color: var(--sky-text-soft); font-size: 1.2rem; cursor: pointer; }
.scores-title { color: var(--sky-brain, #a29bfe); font-size: 1.2rem; font-weight: 900; font-family: 'Fredoka One', cursive; }
.scores-list  { flex: 1; overflow-y: auto; padding: 12px; }
.score-row { background: var(--sky-surface); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); border: 1px solid var(--sky-border); }
.score-row-icon { font-size: 1.8rem; }
.score-row-info { flex: 1; }
.score-row-name { font-size: 0.85rem; font-weight: 800; color: var(--sky-text); }
.score-row-best { font-size: 0.7rem; color: var(--sky-text-soft); font-weight: 700; }
.score-row-stars { font-size: 1rem; color: #ffd93d; }

/* ══ SHARED GAME UI ══ */
.big-q { font-size: clamp(2.4rem,13vw,3.6rem); font-weight: 900; color: var(--sky-text); font-family: 'Fredoka One', cursive; text-align: center; line-height: 1.1; }
.sub-q { font-size: 1rem; font-weight: 800; color: var(--sky-text-soft); text-align: center; }

.ans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px,2.5vw,12px); width: 100%; max-width: 320px; }
.ans-btn {
  padding: clamp(14px,4vw,20px) 8px; border-radius: 18px; border: none;
  font-size: clamp(1.1rem,5vw,1.4rem); font-weight: 900; cursor: pointer;
  transition: transform 0.1s; font-family: 'Fredoka One', cursive;
  box-shadow: 0 5px 0 rgba(0,0,0,0.2);
}
.ans-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.2); }
.ans-btn.c0 { background: #ff6b6b; color: #fff; }
.ans-btn.c1 { background: #1dd1a1; color: #fff; }
.ans-btn.c2 { background: #feca57; color: #333; }
.ans-btn.c3 { background: #a29bfe; color: #fff; }
.ans-btn.flash-ok { background: #00b894 !important; color: #fff !important; animation: btnOk 0.25s; }
.ans-btn.flash-no { background: var(--gs-warm-dk) !important; color: #fff !important; animation: btnNo 0.3s; }
@keyframes btnOk { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes btnNo { 20%{transform:translateX(-8px)} 80%{transform:translateX(8px)} 100%{transform:translateX(0)} }

.feedback { font-size: 1.2rem; font-weight: 900; text-align: center; min-height: 26px; transition: opacity 0.2s; }
.feedback.ok { color: #00b894; }
.feedback.no { color: var(--gs-warm-dk); }

/* ══ TOUCH THE NUMBER ══ */
.ttn-wrap { position: relative; width: 100%; height: clamp(220px,45vw,290px); }
.ttn-bubble { position: absolute; width: clamp(52px,14vw,64px); height: clamp(52px,14vw,64px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: clamp(1.4rem,4.5vw,1.8rem); font-weight: 900; cursor: pointer; font-family: 'Fredoka One', cursive; box-shadow: 0 4px 12px rgba(0,0,0,0.18); transition: transform 0.12s; color: #fff; }
.ttn-bubble:active { transform: scale(0.88) !important; }
.ttn-bubble.popped { animation: bubblePop 0.3s forwards; pointer-events: none; }
@keyframes bubblePop { 0%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.6} 100%{transform:scale(0);opacity:0} }
.ttn-next { font-size: 0.85rem; color: var(--gs-text-soft); font-weight: 800; text-align: center; }

/* ══ FOLLOW THE LEADER ══ */
.ftl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; width: clamp(190px,54vw,230px); height: clamp(190px,54vw,230px); }
.ftl-tile { border-radius: 18px; cursor: pointer; transition: transform 0.1s, filter 0.15s; filter: brightness(0.7); }
.ftl-tile:active { transform: scale(0.93); }
.ftl-tile.lit { filter: brightness(1.4) saturate(1.2); transform: scale(1.05); }
.ftl-status { font-size: 0.82rem; font-weight: 800; color: var(--gs-text-soft); text-align: center; }

/* ══ FLICK MASTER ══ */
.flick-arrow { font-size: clamp(4rem,15vw,5.5rem); text-align: center; line-height: 1; animation: arrowIn 0.2s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes arrowIn { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
.dir-grid { display: grid; grid-template-areas: '. up .' 'left . right' '. down .'; grid-template-columns: 1fr 1fr 1fr; gap: 8px; width: clamp(190px,52vw,220px); }
.dir-btn { width: clamp(58px,15vw,68px); height: clamp(58px,15vw,68px); border-radius: 16px; border: none; font-size: 1.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; box-shadow: 0 4px 0 rgba(0,0,0,0.2); }
.dir-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.dir-btn[data-d=up]    { grid-area: up;    background: #74b9ff; }
.dir-btn[data-d=down]  { grid-area: down;  background: #fd79a8; }
.dir-btn[data-d=left]  { grid-area: left;  background: #a29bfe; }
.dir-btn[data-d=right] { grid-area: right; background: #55efc4; }

/* ══ STROOP ══ */
.stroop-word { font-size: clamp(2.2rem,11vw,3rem); font-weight: 900; font-family: 'Fredoka One', cursive; padding: 10px 18px; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(108,92,231,0.12); }
.color-btns  { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.col-btn { width: clamp(64px,17vw,76px); height: clamp(64px,17vw,76px); border-radius: 18px; border: 4px solid transparent; cursor: pointer; transition: transform 0.1s, border-color 0.1s; box-shadow: 0 4px 0 rgba(0,0,0,0.18); }
.col-btn:active { transform: scale(0.9); }

/* ══ HIGH OR LOW ══ */
.hl-prev-info { text-align: center; }
.hl-prev-lbl { font-size: 0.7rem; color: var(--gs-text-soft); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.hl-prev-num { font-size: 2rem; font-weight: 900; color: var(--gs-text-soft); font-family: 'Fredoka One', cursive; }
.hl-card { background: linear-gradient(135deg,#0984e3,#74b9ff); border-radius: 22px; width: clamp(120px,34vw,150px); height: clamp(160px,44vw,185px); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(9,132,227,0.35); animation: cardFlip 0.3s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes cardFlip { from{transform:scale(.7) rotateY(45deg);opacity:0} to{transform:scale(1) rotateY(0);opacity:1} }
.hl-num-big { font-size: clamp(3rem,12vw,4rem); font-weight: 900; color: #fff; font-family: 'Fredoka One', cursive; }
.hl-btns { display: flex; gap: 12px; }
.hl-btn { padding: 13px 22px; border-radius: 50px; border: none; font-size: 0.95rem; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.2); transition: transform 0.1s; font-family: 'Nunito', sans-serif; }
.hl-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.hl-btn.hi { background: #00b894; color: #fff; }
.hl-btn.lo { background: #ff6b6b; color: #fff; }

/* ══ SIMPLICITY ══ */
.simp-wrap { background: var(--gs-surface); border-radius: 18px; overflow: hidden; width: clamp(200px,56vw,240px); box-shadow: 0 4px 16px rgba(108,92,231,0.12); }
.simp-row { padding: 12px 20px; font-size: 1.3rem; font-weight: 900; color: var(--gs-text); font-family: 'Fredoka One', cursive; border-bottom: 1px solid var(--gs-border); cursor: pointer; text-align: center; transition: background 0.1s; }
.simp-row:last-child { border-bottom: none; }
.simp-row.hi { background: linear-gradient(135deg,#0984e3,#74b9ff); color: #fff; }
.simp-row:active { opacity: 0.7; }

/* ══ MATCHING ══ */
.match-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(6px,2vw,9px); width: 100%; max-width: min(310px,88vw); }
.match-card { aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 900; cursor: pointer; transition: transform 0.15s; font-family: 'Fredoka One', cursive; box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
.match-card:active { transform: scale(0.91); }
.match-card.face-down { background: linear-gradient(135deg,var(--gs-primary),#764ba2); color: transparent; }
.match-card.face-up   { background: var(--gs-surface); color: var(--gs-text); border: 2px solid var(--gs-border); }
.match-card.matched   { background: linear-gradient(135deg,#00b894,#2ecc71) !important; color: #fff !important; pointer-events: none; }

/* ══ TAP THE COLOR ══ */
.tap-color-instr { font-size: 1.1rem; font-weight: 900; color: var(--gs-text-soft); text-align: center; }
.tap-color-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: clamp(200px,58vw,240px); }
.tap-color-tile  { aspect-ratio: 1; border-radius: 18px; cursor: pointer; transition: transform 0.1s; box-shadow: 0 5px 0 rgba(0,0,0,0.2); }
.tap-color-tile:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.2); }

/* ══ RAPID SORTING ══ */
.sort-item { font-size: clamp(3.5rem,16vw,5rem); text-align: center; animation: arrowIn 0.25s; }
.sort-btns { display: flex; gap: 14px; }
.sort-btn  { flex: 1; max-width: 130px; padding: 14px 8px; border-radius: 18px; border: none; font-size: 0.9rem; font-weight: 900; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,0.2); transition: transform 0.1s; font-family: 'Nunito', sans-serif; }
.sort-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.2); }

/* ══ ADDITION ADDICTION ══ */
.aa-target-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.aa-target-lbl  { font-size: 0.72rem; font-weight: 900; color: var(--gs-text-soft); text-transform: uppercase; letter-spacing: 0.5px; }
.aa-target-num  { font-family: 'Fredoka One', cursive; font-size: clamp(3rem,13vw,4rem); color: var(--gs-text); line-height: 1; }
.aa-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; width: 100%; max-width: 300px; }
.aa-tile { padding: clamp(14px,4vw,18px) 6px; border-radius: 16px; border: none; background: linear-gradient(135deg,#74b9ff,#0984e3); color: #fff; font-size: clamp(1.2rem,5vw,1.5rem); font-weight: 900; font-family: 'Fredoka One', cursive; cursor: pointer; transition: transform 0.12s, background 0.15s; box-shadow: 0 5px 0 rgba(0,0,0,0.2); }
.aa-tile:active { transform: scale(0.92); }
.aa-tile.sel  { background: linear-gradient(135deg,#00b894,#2ecc71); transform: scale(1.06); box-shadow: 0 3px 0 rgba(0,0,0,0.2); }
.aa-tile.over { background: linear-gradient(135deg,#ff6b6b,#ee5a24); }
.aa-sum-row { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 800; color: var(--gs-text-soft); }
.aa-sum-val { font-family: 'Fredoka One', cursive; font-size: 1.4rem; color: #0984e3; min-width: 32px; text-align: center; }

/* ══ REVERSE RPS ══ */
.rps-shown { font-size: clamp(4.5rem,18vw,6rem); text-align: center; line-height: 1; animation: arrowIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275); }
.rps-btns  { display: flex; gap: 14px; justify-content: center; }
.rps-btn   { width: clamp(72px,20vw,88px); height: clamp(72px,20vw,88px); border-radius: 50%; border: none; font-size: clamp(1.8rem,7vw,2.4rem); cursor: pointer; transition: transform 0.12s; box-shadow: 0 5px 0 rgba(0,0,0,0.2); }
.rps-btn:active { transform: scale(0.9) translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.2); }

/* ══ BIRD WATCHING ══ */
.bw-scene  { position: relative; width: 100%; height: clamp(160px,42vw,210px); background: linear-gradient(180deg,#87ceeb 0%,#b8e4b8 70%,#8dbf8d 100%); border-radius: 20px; overflow: hidden; flex-shrink: 0; }
.bw-tree   { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: clamp(5rem,18vw,7rem); line-height: 1; pointer-events: none; }
.bw-bird   { position: absolute; font-size: clamp(1.4rem,5vw,1.8rem); transition: opacity 0.3s; pointer-events: none; }
.bw-instr  { font-size: 0.78rem; font-weight: 800; color: var(--gs-text-soft); text-align: center; }

/* ══ CONCENTRATION ══ */
.conc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(7px,2vw,10px); width: 100%; max-width: 290px; }
.conc-card { aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: clamp(1.5rem,6vw,1.9rem); cursor: pointer; transition: transform 0.15s, background 0.2s; box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
.conc-card:active { transform: scale(0.92); }
.conc-card.face-up    { background: linear-gradient(135deg,#a29bfe,var(--gs-primary)); }
.conc-card.face-down  { background: linear-gradient(135deg,#b2bec3,#dfe6e9); color: transparent !important; }
.conc-card.hit        { background: linear-gradient(135deg,#00b894,#2ecc71) !important; color: #fff !important; }
.conc-card.miss       { background: linear-gradient(135deg,var(--gs-warm-dk),#c0392b) !important; }
.conc-target { font-size: 0.88rem; font-weight: 900; color: var(--gs-text-soft); text-align: center; min-height: 24px; transition: opacity 0.3s; }

/* ══ RAINFALL ══ */
.rf-zone   { flex: 1; min-height: 0; width: 100%; position: relative; overflow: hidden; background: linear-gradient(180deg,#cce8ff 0%,#e8f5ff 100%); border-radius: 16px; }
.rf-item   { position: absolute; width: clamp(48px,13vw,58px); height: clamp(48px,13vw,58px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: clamp(1.1rem,4.5vw,1.4rem); font-weight: 900; font-family: 'Fredoka One', cursive; color: #fff; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); user-select: none; z-index: 2; }
.rf-item:active { transform: scale(1.15); }
.rf-instr  { flex-shrink: 0; font-size: 0.82rem; font-weight: 900; color: #fff; text-align: center; padding: 8px 18px; border-radius: 50px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); }

/* ══ CONFETTI ══ */
.conf { position: fixed; top: -12px; border-radius: 3px; animation: confFall linear forwards; pointer-events: none; z-index: 9999; }
@keyframes confFall { to{transform:translateY(110vh) rotate(720deg);opacity:0} }

/* ══ UTILS ══ */
.instr-lbl   { font-size: 0.78rem; font-weight: 800; color: var(--sky-text-soft); text-align: center; }
.score-flash { animation: scorePop 0.35s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes scorePop { 0%{transform:scale(1)} 50%{transform:scale(1.5)} 100%{transform:scale(1)} }