/* Import styles from dashboard_new.css */
/*@import url('dashboard_new.css');*/

/* Additional dashboard-specific styles */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f3f4f6; 
}

.dashboard-card { 
    transition: all 0.3s ease; 
}

.dashboard-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.pulse-animation { 
    animation: pulse 2s infinite; 
}

@keyframes pulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
    }
    70% { 
        box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
}

.topic-card { 
    transition: all 0.3s ease; 
    cursor: pointer; 
}

.topic-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
} 

.fun-quiz-chip {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.fun-quiz-chip:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* The pinned festival / national-day chip, injected at the front of the row
   by showOccasion() in dashboard.html. Solid fill instead of the translucent
   default so "today's thing" stands out from the dozen standing topics it
   sits next to. */
.fun-quiz-chip-occasion {
    background: #fff;
    color: #ea580c;
    border-color: #fff;
    font-weight: 700;
}
.fun-quiz-chip-occasion:hover {
    background: #f3f4f6;
}

.fun-quiz-mode-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.fun-quiz-mode-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
.fun-quiz-mode-btn.active {
    background: #fff;
    color: #4f46e5;
    border-color: #fff;
}

/* Festival / national-day banner (#occasionBanner in dashboard.html).
   Hardcoded here on purpose, NOT left to Tailwind utility classes: this
   page's tailwind.css is a purged/pre-built bundle, and several classes
   used on this banner (from-amber-500, via-orange-500, to-rose-500,
   text-white/85, leading-none, select-none, px-5, py-2.5, hover:bg-gray-100)
   were never compiled into it, so the banner rendered with no background
   and default padding (white text on the page's default gray, "Play the
   quiz" button unpadded). Explicit CSS here covers the whole banner so it
   renders correctly regardless of whether the Tailwind bundle ever gets
   rebuilt. */
.occasion-banner {
    background: linear-gradient(to right, #f59e0b, #f97316, #f43f5e);
    color: #fff;
}
.occasion-banner .occasion-emoji {
    line-height: 1;
    user-select: none;
}
.occasion-banner .occasion-play-btn {
    padding: 10px 20px;
}
.occasion-banner .occasion-play-btn:hover {
    background: #f3f4f6;
}

/* Autocomplete dropdown for the dashboard's Fun Quiz Challenge topic
   textbox (funQuizTopicInput). Mirrors fun-quiz.html's .picker-autocomplete
   - same backend (/fun_quiz_autocomplete), different page/input, so the
   styling lives here instead of being shared across two very different
   stylesheets (this one plain CSS, that one Tailwind-based). */
.fun-quiz-input-wrap { position: relative; }
.fun-quiz-autocomplete {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border-radius: 10px; overflow: hidden; overflow-y: auto;
    max-height: 240px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 20;
    display: none; text-align: left;
}
.fun-quiz-autocomplete-item {
    padding: 10px 14px; font-size: 13px; color: #1f2937; cursor: pointer;
}
.fun-quiz-autocomplete-item + .fun-quiz-autocomplete-item { border-top: 1px solid #f0f0f0; }
.fun-quiz-autocomplete-item:hover, .fun-quiz-autocomplete-item.active { background: #f3f4f6; }

/* ---- Fun Quiz card: compact layout ---------------------------------
   These are plain CSS rather than Tailwind utilities because the
   stylesheet is prebuilt - arbitrary values like bg-[#25d366] never make
   it into the output and silently render as unstyled text. */

/* Play folds into the input itself: the arrow sits inside the field's
   right edge, so the pair reads as one control. */
.fun-quiz-input-wrap { position: relative; }
.fun-quiz-input-wrap input { padding-right: 48px; }
.fun-quiz-go-btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: 8px; cursor: pointer;
  background: #4f46e5; color: #fff; font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.fun-quiz-go-btn:hover { background: #4338ca; }

/* The one action worth a full-width button on this card. */
.fun-quiz-challenge-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 18px; margin-top: 10px;
  border: none; border-radius: 10px; cursor: pointer;
  background: #25d366; color: #073b23; font-weight: 800; font-size: 14px;
}
.fun-quiz-challenge-btn:hover { filter: brightness(1.08); }

/* Secondary entry points: still one tap, but visibly not the main path. */
.fun-quiz-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px;
}
.fun-quiz-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.fun-quiz-link:hover { color: #fff; }

/* Chips past the first few are hidden until "More topics" is tapped. */
.fun-quiz-chip.is-extra { display: none; }
#funQuizChips.show-all .fun-quiz-chip.is-extra { display: inline-block; }

/* Practice mode is a setting, not a per-visit decision. */
#funQuizModeToggle { display: none; }
#funQuizModeToggle.show { display: flex; }

/* Game modes strip (2026-09-23 declutter): Daily Challenge, Hangman and
   Story Quest as compact horizontally-scrolling cards instead of three
   stacked full-width banners - see TODO.md's dashboard-clutter note.
   Little Ones (ages 3-5) was moved into the strip as a 4th card
   (it is just a link into /kids-quiz). Fun Quiz Challenge stays its
   own full section - it doesn't compress into a small card
   (topic picker + chips + mode toggle). */
.game-modes-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.game-modes-strip::-webkit-scrollbar { height: 6px; }
.game-modes-strip::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
.game-mode-card {
  scroll-snap-align: start;
  flex: 0 0 152px;
  min-height: 116px;
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s, opacity 0.15s;
}
.game-mode-card:hover { opacity: 0.95; transform: translateY(-2px); }
.game-mode-card .gm-top { display: flex; align-items: center; justify-content: space-between; }
.game-mode-card .gm-emoji { font-size: 26px; line-height: 1; }
.game-mode-card .gm-badge {
  display: none;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.22);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.game-mode-card .gm-title { font-weight: 700; font-size: 15px; margin-top: 10px; line-height: 1.2; }
.game-mode-card .gm-sub { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 2px; }
.gm-daily { background: linear-gradient(135deg, #f97316, #db2777); }
.gm-hangman { background: linear-gradient(135deg, #334155, #0f172a); }
.gm-story { background: linear-gradient(135deg, #d97706, #854d0e); }
.gm-cities { background: linear-gradient(135deg, #0e7490, #0B0D17); }
.gm-kids { background: linear-gradient(135deg, #fb923c, #ec4899 55%, #a855f7); }

/* Scroll affordance for the game-modes strip (2026-09-23): on a typical
   phone the 3 cards overflow the visible width by a lot (152px*3 + gaps
   ~480px vs ~340px of usable width), and the leftover peek of the next
   card is only ~14px - not enough of a visual cue that there's more to
   scroll. mask-image fades whichever edge still has hidden content,
   toggled by dashboard.html's scroll listener (adds/removes
   .gm-fade-left/.gm-fade-right; both classes together means both edges
   are faded, neither means the strip fits with nothing to scroll).
   mask-image (not a gradient overlay div) is used deliberately - it
   reveals whatever the real page background is, so it can never
   mismatch a background color the way an overlay div would. */
.game-modes-strip.gm-fade-right {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.game-modes-strip.gm-fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 28px, black 100%);
  mask-image: linear-gradient(to right, transparent 0, black 28px, black 100%);
}
.game-modes-strip.gm-fade-left.gm-fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
}

/* Popular Quizzes strip (2026-09-24): the grid used to force lg:grid-cols-6,
   which squeezed cards too narrow and broke the layout (see the card
   rewrite in cards.js). On a phone, a grid also wastes vertical space
   wrapping to many rows - switch to the same horizontal-scroll pattern
   used by the game-modes strip above, with the same scroll-edge fade cue
   (wired up in dashboard.html, reusing .gm-fade-left/.gm-fade-right).
   Desktop keeps the auto-fill grid untouched. */
@media (max-width: 700px) {
  .popular-quizzes-scroll {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 12px;
    padding: 4px 2px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .popular-quizzes-scroll::-webkit-scrollbar { height: 6px; }
  .popular-quizzes-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
  .popular-quizzes-scroll > .small-quiz-card {
    scroll-snap-align: start;
    flex: 0 0 210px;
  }
}