/* ============================================================
   css/daily-embed.css — homepage inline-expand Daily Puzzle
   Desktop only (see media query at bottom) — mobile navigates to
   daily.php instead, exactly as it did before this feature existed.

   Relies on:
   - --gold/--cream/--ink variables from css/style.css
   - leaf-level classes (.cell, .q-item, .win-btn, etc.) from css/puzzle.css
   Both must be loaded before this file — see index.php's <link> order.
   ============================================================ */

#daily-embed {
    max-height: 0;
    overflow: hidden;
    overflow-anchor: none; /* stops the browser's automatic scroll-compensation from fighting our own scrollToEmbed() call */
    transition: max-height .5s ease;
    width: 100%;
    display: flex;
    justify-content: center;
    scroll-margin-top: 120px; /* keeps the "Today's Puzzle" button visible above the panel when scrolling to it */
}
#daily-embed.open {
    max-height: 1000px;
}

.daily-embed-inner {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto 2rem;
    background: rgba(28,26,22,0.55);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 18px;
    padding: 1.5rem 2rem 2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    text-align: left;
    overflow: hidden; /* safety net: nothing can ever visually spill past the card again */
    box-sizing: border-box;
}

.daily-embed-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: transparent;
    border: none;
    color: rgba(245,237,216,0.5);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color .2s;
    padding: 4px 8px;
}
.daily-embed-close:hover { color: var(--gold); }

.daily-embed-header {
    text-align: center;
    margin-bottom: 1rem;
}

.daily-embed-loading {
    text-align: center;
    color: rgba(245,237,216,0.5);
    font-size: .85rem;
    padding: 2.5rem 0;
    letter-spacing: .04em;
}

/* Progress bar (chat 2.8) — puzzle.css's default .progress-wrap is
   max-width:480px, sized for puzzle.php's single-column layout. Both
   this panel and category.php's puzzle-view render their grid capped
   at 340px (initPuzzle's maxGridWidth:340 — see js/home-daily.js and
   js/category-picker.js), so the wider 480px bar visibly overshot past
   the actual grid into the gap before the questions column, reading as
   a layout bug. Capped to match the grid's real width and centered so
   it reads as intentional regardless of how much leftover space
   .daily-embed-columns' centering leaves on either side. */
.daily-embed .progress-wrap {
    max-width: 340px;
    margin: 0 auto;
}

.daily-embed-columns {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 40px;
    align-items: flex-start;
}

/* Narrower than the mobile full-width .questions-panel default (480px) —
   this context has a grid beside it, not below it, so it doesn't need
   nearly as much width. Scoped under .daily-embed so puzzle.php's own
   mobile stacked layout, which reuses the same .questions-panel class,
   is untouched. */
.daily-embed .questions-panel {
    flex: 1 1 280px;
    min-width: 220px;
    max-width: 460px;
    padding: 4px 0 0;
}
.daily-embed .q-text {
    font-size: .82rem;
    min-width: 0; /* lets text actually wrap within its column instead of forcing the row wider */
}
.daily-embed .q-item {
    flex-wrap: nowrap;
}
.daily-embed .q-answer-reveal {
    font-size: .68rem;
}
.daily-embed .grid-wrapper {
    max-width: none;
    width: auto;
    padding: 0;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
}
.daily-embed .direction-hint {
    padding: 8px 0 0;
}

/* This whole panel only ever activates at desktop widths — on mobile
   the "Today's Puzzle" link just navigates to daily.php normally,
   same as it did before this feature existed. */
@media (max-width: 639px) {
    #daily-embed { display: none !important; }
}