/* ============================================================
   SQLISM — DAILY SQL CHALLENGE
   Loaded AFTER challenge.css on daily-challenge.php only. Reuses
   challenge.css's existing classes/tokens (.hero, .hero-content,
   .stat, .game-container, --primary/--warning/--card-bg/--border
   etc.) wherever they already fit — everything below is either new
   markup this page adds, or a page-scoped override of challenge.css
   so the shared challenge.php/challenge.js board still works
   correctly with one fewer visible column (the practice-mode
   sidebar is intentionally hidden here, not removed from the DOM —
   challenge.js still reads/writes #score/#completed/#streak inside
   it, so it must stay in the page, just invisible).
   ============================================================ */

/* Practice-mode sidebar + prev/next sequence nav don't apply to a
   single fixed daily puzzle — hidden, not deleted (see note above). */
body[data-page="daily-challenge"] .challenges-sidebar {
    display: none;
}

/* .game-container's 3 fixed-width grid columns are populated by DOM
   order (challenges-sidebar / game-main / info-sidebar) with no
   explicit grid-column assignment in challenge.css. Hiding the first
   item removes it from the grid entirely, so the remaining two would
   otherwise fall into the sidebar-width and center tracks instead of
   center + info-width — this redefines the template to match what's
   actually left.

   Scoped to min-width:1201px to match challenge.css's OWN desktop/
   mobile split exactly (its `@media (max-width: 1200px)` rule is what
   collapses .game-container to a single stacked column) — without
   this guard, this override's higher specificity would beat that
   mobile rule at every width, not just desktop, and break the stack. */
@media (min-width: 1201px) {
    body[data-page="daily-challenge"] .game-container {
        grid-template-columns: 1fr minmax(220px, 320px);
    }
}

body[data-page="daily-challenge"] #prev-btn,
body[data-page="daily-challenge"] #next-btn {
    display: none;
}
body[data-page="daily-challenge"] .nav-buttons {
    justify-content: center;
}

/* "Current Level N/50" framing is practice-mode specific and would
   just show today's rotation-picked id, which means nothing here. */
body[data-page="daily-challenge"] .progress-card {
    display: none;
}

/* ============================================================
   MODERN HERO (Studio v2) — appended override, same pattern as
   every other content page (about/contact/interview/quiz/resources/
   challenge.css). Without this, daily-challenge.php falls back to
   the OLD light-tint `.hero` rules from challenge.css (it loads
   challenge.css for the shared board, but challenge.css's Studio v2
   override is scoped to `body[data-page="challenge"]`, which never
   matches here since this page's data-page is "daily-challenge") —
   that's why this hero looked out of step with the rest of the site.
   Markup unchanged, just re-scoped to this page's own data-page.
   ============================================================ */
body[data-page="daily-challenge"] .hero{
  position:relative; margin:clamp(16px,3vw,30px) clamp(12px,4vw,48px);
  padding:clamp(38px,6vw,68px) clamp(22px,4vw,48px);
  border-radius:24px; text-align:center; color:#fff; overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(120% 130% at 10% -10%, rgba(124,92,255,0.40), transparent 60%),
    radial-gradient(90% 120% at 100% 112%, rgba(34,211,238,0.22), transparent 58%),
    linear-gradient(158deg,#0c1024 0%,#0a0d1a 55%,#090b16 100%);
  box-shadow:0 40px 90px -42px rgba(10,13,26,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
body[data-page="daily-challenge"] .hero::before{
  content:''; position:absolute; inset:0; opacity:1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 42%,transparent 82%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 42%,transparent 82%);
}
body[data-page="daily-challenge"] .hero-content{position:relative;z-index:1;max-width:920px;margin:0 auto;}
body[data-page="daily-challenge"] .hero h1{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(2.1rem,5vw,4rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.07; color:#fff;
  -webkit-text-fill-color:#fff; background:none; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; text-align:center;
  animation:none;
}
body[data-page="daily-challenge"] .hero h1 i{
  background:linear-gradient(120deg,#a3e635,#22d3ee 55%,#7c5cff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  transform:translateX(-4px); padding-right:4px;
}
body[data-page="daily-challenge"] .hero p{
  font-family:'Plus Jakarta Sans',sans-serif; color:rgba(226,232,240,0.82);
  -webkit-text-fill-color:rgba(226,232,240,0.82); background:none; opacity:1;
  font-size:clamp(1rem,1.5vw,1.22rem); line-height:1.7; max-width:680px; margin:0 auto;
}
body[data-page="daily-challenge"] .hero-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px;}
body[data-page="daily-challenge"] .hero-stats .stat{
  display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
body[data-page="daily-challenge"] .hero-stats .stat:hover{transform:translateY(-2px);border-color:rgba(124,92,255,0.5);background:rgba(124,92,255,0.14);}
body[data-page="daily-challenge"] .hero-stats .stat i{color:#a3e635;font-size:1rem;}
body[data-page="daily-challenge"] .hero-stats .stat span{color:#e7eaf5;font-weight:600;font-size:0.92rem;}

/* ================================
   HERO ADDITIONS
   (this page's own elements, layered on top of the Studio v2 hero
   above — kept in their own selectors, not folded into the block
   above, since they're specific to the streak badge / solved banner
   this page adds rather than shared hero anatomy)
   ================================ */

/* Streak pill: needs its own amber tint on top of the plain glass
   `.stat` look above, so it still reads as the "hot streak" badge —
   selector is one level more specific than `.hero-stats .stat` above
   so it wins instead of being flattened to a plain glass pill. */
body[data-page="daily-challenge"] .hero-stats .stat.daily-streak-stat {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.5);
}
body[data-page="daily-challenge"] .hero-stats .stat.daily-streak-stat:hover {
    background: rgba(245, 158, 11, 0.24);
    border-color: rgba(245, 158, 11, 0.65);
}
.daily-streak-stat i {
    color: var(--warning);
}
.daily-streak-stat strong {
    font-weight: 800;
}

.daily-solved-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 1.5rem;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.4);
    /* Fixed light color, not var(--text-primary) — this banner sits
       inside the hero above, which is now a fixed dark glass panel
       in BOTH themes, so a theme-dependent color (near-black in
       light mode) would go nearly invisible against it. */
    color: #e7eaf5;
    font-size: 0.95rem;
}
.daily-solved-banner[hidden] {
    display: none;
}
.daily-solved-banner i.fa-circle-check {
    color: var(--success);
    font-size: 1.1rem;
}

.daily-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.daily-share-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(139, 92, 246, 0.6);
}
.daily-share-btn:active {
    transform: translateY(0);
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 600px) {
    .daily-solved-banner {
        flex-direction: column;
        text-align: center;
    }
    .daily-share-btn {
        width: 100%;
        justify-content: center;
    }
}