/* ============================================================
   main.css — Global CSS Variables, Reset, Base Layout
   ============================================================
   PURPOSE : Defines the entire design system — colors, fonts,
             spacing, app shell, nav, screens, and breakpoints.
             All game-specific styles go in components.css.
   EDIT     : Update CSS variables here to retheme the whole app.
   ============================================================ */


/* ── CSS Variables (Design Tokens) ── */
:root {
  /* Team Colors */
  --red:          #FF4757;
  --red-dark:     #c0392b;
  --red-light:    #ff6b81;
  --blue:         #1E90FF;
  --blue-dark:    #0066cc;
  --blue-light:   #74b9ff;

  /* Background & Card */
  --bg:           #0f0c29;
  --bg2:          #1a1a3e;
  --card:         #1e1b4b;
  --card2:        #252250;

  /* Accent Colors */
  --gold:         #FFD700;
  --green:        #2ecc71;
  --purple:       #a855f7;

  /* Text */
  --text:         #f0f0ff;
  --text-muted:   #9999cc;

  /* Difficulty */
  --easy:         #2ecc71;
  --medium:       #f39c12;
  --hard:         #e74c3c;

  /* Layout */
  --radius:       14px;
  --nav-h:        58px;        /* Desktop top nav height */
  --bottom-nav-h: 64px;        /* Mobile bottom nav height */
}


/* ============================================================
   CHILD-FRIENDLY THEME (games view only)
   ============================================================
   Active only when body.show-app — login and admin stay dark.
   Overrides just the design tokens; component styles stay the same.
   ============================================================ */
body.show-app {
  --bg:            #DBEAFE;    /* soft sky blue */
  --bg2:           #EFF6FF;    /* even softer */
  --card:          #FFFFFF;    /* clean white cards */
  --card2:         #F0F9FF;
  --text:          #1E293B;    /* deep slate, high contrast on white */
  --text-muted:    #64748B;
  --gold:          #F59E0B;    /* warm sunny yellow */
  --purple:        #EC4899;    /* coral pink replaces purple */
  --radius:        22px;       /* chunkier, more bubbly */

  /* New playful palette — used by category-specific themes */
  --coral:         #F87171;
  --sunny:         #FBBF24;
  --mint:          #34D399;
  --sky:           #38BDF8;
  --orange:        #FB923C;
  --lavender:      #A78BFA;
  --peach:         #FDBA74;
  --rose:          #FB7185;
}


/* ── Reset & Base ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

/* ── Body: THE SINGLE SCROLL LAYER ──
   Simple, universally compatible: body scrolls naturally, everything
   flows through the browser's native scroll. Works on every browser
   from IE11 to modern Chrome, on every laptop and mobile device.
   No nested scroll containers, no flex overflow gotchas. */
body {
  font-family: 'Nunito', sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* ── Scrollbar — visible enough that users see they CAN scroll ── */
::-webkit-scrollbar              { width: 10px; height: 10px; }
::-webkit-scrollbar-track        { background: rgba(255,255,255,0.04); }
::-webkit-scrollbar-thumb        {
  background: rgba(168,85,247,0.6);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover  { background: rgba(168,85,247,0.9); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: rgba(168,85,247,0.6) rgba(255,255,255,0.04); }


/* ── App Shell — a normal document container, not a scroll trap ──
   min-height only, no overflow constraint. Content grows the body,
   the body scrolls, everyone's happy. */
.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}
  


/* ── Screens (shown/hidden by app.js) ── */
.screen            { display: none; }
.screen.active     { display: block; animation: fadeUp 0.25s ease; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Content Area — flows naturally, body handles scroll ── */
.content {
  flex: 1;
  width: 100%;
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
  .grade-grid  { grid-template-columns: repeat(4, 1fr); }
  .games-grid  { grid-template-columns: repeat(4, 1fr); }
  .play-wrap   { padding: 14px 20px; gap: 12px; }
}

/* Tablet Landscape (900–1200px) */
@media (max-width: 1200px) and (min-width: 900px) {
  .grade-grid  { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet Portrait (600–900px) */
@media (max-width: 900px) and (min-width: 600px) {
  .grade-grid  { grid-template-columns: repeat(3, 1fr); }
  .games-grid  { grid-template-columns: repeat(2, 1fr); }
  .play-wrap   { gap: 8px; }
}

/* Mobile (max 600px) — bottom nav active */
@media (max-width: 600px) {
  .top-nav .nav-btn[data-category] { display: none; }
  .top-nav .nav-divider            { display: none; }
  .bottom-nav                      { display: flex; }
  .content { padding-bottom: var(--bottom-nav-h); }

  .play-wrap {
    height: calc(100dvh - var(--nav-h) - var(--bottom-nav-h));
    padding: 8px;
    gap: 6px;
  }

  .home-wrap   { padding: 20px 12px 100px; }
  .grade-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .games-grid  { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Very Small Phones (max 400px) */
@media (max-width: 400px) {
  .grade-grid  { grid-template-columns: 1fr 1fr; gap: 8px; }
  .games-grid  { grid-template-columns: 1fr; }
  .answer-area { grid-template-columns: 1fr; }  /* stack panels */
  .draw-area   { grid-template-columns: 1fr; }  /* stack drawing panels */
}

/* Landscape Phone (short + wide) */
@media (max-height: 500px) and (orientation: landscape) {
  .play-wrap        { padding: 4px 8px; gap: 4px; }
  .score-card       { padding: 5px 10px; }
  .question-card    { padding: 6px 12px; }
  .progress-text    { display: none; }
  .game-title-small { display: none; }
  .draw-area        { gap: 6px; }
  .draw-panel       { padding: 4px; gap: 3px; }
  .draw-panel-header { font-size: 11px; }
}

/* iPad / Tablet specific */
@media (min-width: 600px) and (max-width: 1024px) {
  .play-wrap         { padding: 12px 16px; gap: 10px; }
  .question-text     { font-size: clamp(20px, 3vw, 32px); }
  .opt-btn           { font-size: clamp(16px, 2.5vw, 22px); }
  .team-panel        { padding: 12px; }
}

/* ── iPad / Tablet LANDSCAPE — compact vertical layout ── */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 900px) {
  .play-wrap, .draw-wrap {
    height: calc(100dvh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    padding: 8px 16px;
    gap: 6px;
    overflow: hidden;
  }
  /* Force two-column answer layout in landscape */
  .answer-area      { grid-template-columns: 1fr 1fr; gap: 10px; }
  .draw-area        { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Slimmer score bar */
  .score-bar        { padding: 6px 12px; }
  .score-num        { font-size: clamp(20px, 3.2vw, 36px); }
  .score-team       { font-size: clamp(10px, 1.5vw, 14px); }
  /* Smaller question card */
  .question-card    { padding: 8px 14px; }
  .question-text    { font-size: clamp(16px, 2.4vw, 26px); line-height: 1.2; }
  .question-img     { max-height: 80px; }
  .question-sub     { font-size: 11px; margin-top: 2px; }
  /* Smaller turn indicator */
  .turn-indicator   { padding: 4px 10px; font-size: 11px; }
  /* Compact options */
  .opt-btn          { font-size: clamp(14px, 1.8vw, 20px); padding: 10px 12px; min-height: 44px; }
  .options-grid     { gap: 6px; }
  /* Tighter team panels */
  .team-panel       { padding: 8px 10px; gap: 6px; }
  .team-panel-header{ font-size: 12px; padding: 4px 8px; }
  /* Compact controls */
  .game-controls    { padding: 4px; gap: 6px; }
  .ctrl-btn         { padding: 6px 12px; font-size: 12px; }
  .feedback-bar     { padding: 4px 10px; font-size: 13px; min-height: 24px; }
  /* Smaller puzzle grid in landscape */
  .puzzle-grid td   { width: clamp(24px, 4vw, 38px); height: clamp(24px, 4vw, 38px); font-size: clamp(14px, 2vw, 22px); }
}

/* ── Force orientation refresh (iOS Safari quirk) ── */
@media (orientation: landscape) {
  html, body, .app  { width: 100vw; min-height: 100dvh; }
}
@media (orientation: portrait) {
  html, body, .app  { width: 100vw; min-height: 100dvh; }
}

/* ── Very Tiny Phones (≤340px) ── */
@media (max-width: 340px) {
  .grade-grid  { grid-template-columns: 1fr; gap: 8px; }
  .games-grid  { grid-template-columns: 1fr; }
  .grade-card  { padding: 12px 10px; }
  .grade-emoji { font-size: 28px; }
  .grade-name  { font-size: 14px; }
  .grade-sub   { display: none; }
  .top-nav     { gap: 4px; padding: 0 8px; }
  .logo        { font-size: 14px; }
  .opt-btn     { font-size: 13px; padding: 8px 10px; }
  .play-btn    { font-size: 11px; padding: 5px 8px; }
  .puzzle-grid td { min-width: 22px; min-height: 22px; font-size: 11px; }
}

/* ── Large Desktop (≥1600px) ── */
@media (min-width: 1600px) {
  .grade-grid  { grid-template-columns: repeat(5, 1fr); }
  .games-grid  { grid-template-columns: repeat(5, 1fr); }
  .grade-card  { padding: 28px 20px; }
  .grade-emoji { font-size: 52px; }
  .grade-name  { font-size: 20px; }
  .question-text    { font-size: clamp(24px, 2.5vw, 40px); }
  .opt-btn          { font-size: clamp(18px, 1.8vw, 28px); padding: 16px 20px; }
  .puzzle-grid td   { min-width: 52px; min-height: 52px; font-size: 22px; }
  .play-wrap        { padding: 20px 32px; gap: 16px; max-width: 1400px; margin: 0 auto; }
}

/* ── 4K / Smart TV (≥2400px) ── */
@media (min-width: 2400px) {
  :root { --nav-h: 80px; }
  .grade-grid  { grid-template-columns: repeat(6, 1fr); gap: 28px; }
  .games-grid  { grid-template-columns: repeat(6, 1fr); gap: 28px; }
  .grade-card  { padding: 40px 28px; border-radius: 24px; }
  .grade-emoji { font-size: 72px; }
  .grade-name  { font-size: 26px; }
  .top-nav     { height: var(--nav-h); font-size: 20px; }
  .top-nav .nav-btn { font-size: 18px; padding: 0 20px; }
  .question-text    { font-size: clamp(28px, 2vw, 52px); }
  .opt-btn          { font-size: clamp(22px, 1.5vw, 36px); padding: 22px 28px; }
  .puzzle-grid td   { min-width: 72px; min-height: 72px; font-size: 28px; }
  .game-title-small { font-size: 20px; }
  .score-num        { font-size: 60px; }
  .play-wrap        { max-width: 2000px; margin: 0 auto; }
}

/* Touch Devices — remove hover effects */
@media (hover: none) {
  .grade-card:hover { transform: none; box-shadow: none; }
  .game-card:hover  { transform: none; box-shadow: none; }
  .opt-btn:hover:not(:disabled):not(.locked) { transform: none; background: transparent; }
  .opt-btn:active:not(:disabled):not(.locked) { transform: scale(0.92) !important; }
}