/* ============================================================
   css/demo-puzzle.css — homepage "try it" demo section
   ============================================================
   Companion to js/demo-puzzle.js — see that file's header comment
   for why this is a separate file rather than an edit to puzzle.css.

   Reused as-is from puzzle.css (already loaded on index.php, no
   duplication needed): .cell, .q-item, .q-num, .q-text,
   .q-answer-reveal, .questions-panel, .grid-wrapper, .direction-hint,
   .found-toast — all class-based, so they apply here with zero risk
   to puzzle.php or the Daily Puzzle embed.

   NOT reused: #grid-container / #grid / #overlay in puzzle.css are
   ID selectors scoped to the real engine's fixed IDs — this demo
   uses its own IDs (#demo-grid-container etc.), so those rules
   don't apply here. Mirrored below as classes instead.
   ============================================================ */

/* ------------------------------------------------------------
   Grid sizing — rebuilt to remove every point where an ancestor's
   layout could disagree with what this component expects:

   - Fixed, explicit width (not 100% of some ancestor whose actual
     available space isn't known) — max-width:100% still keeps it
     safe on narrow viewports.
   - flex: 0 0 auto — can't be shrunk by a parent flexbox, full stop.
   - The grid itself uses CSS Grid's own 1fr tracks + aspect-ratio,
     so the BROWSER sizes every cell identically and automatically —
     no per-cell inline pixel width is set by JS at all anymore, so
     there's nothing for JS to get wrong relative to the DOM.
   - The overlay uses inset:6px (not top/left alone) so its CSS box
     is *automatically* pinned to match the grid's content box —
     it cannot end up a different size than the grid, because it's
     defined in terms of the same container, not a separately
     computed number.

   js/demo-puzzle.js no longer predicts any of this ahead of time —
   it measures the grid's actual rendered box via
   getBoundingClientRect() after paint and uses that measured value
   for all position math (drag detection, found-word pill drawing).
   Whatever the browser actually did is what gets used — nothing to
   fall out of sync with reality.
   ------------------------------------------------------------ */
.demo-grid-wrap {
    display: flex;
    justify-content: center;
}

.demo-grid-container {
    position: relative;
    width: 320px;
    max-width: 100%;
    flex: 0 0 auto;
    background: rgba(28,26,22,0.6);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 10px;
    padding: 6px;
    box-sizing: border-box;
    touch-action: none;
    -webkit-touch-callout: none;
    box-shadow: 0 4px 32px rgba(0,0,0,0.5);
    overflow: hidden;
}
.demo-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    aspect-ratio: 1 / 1;
    width: 100%;
    position: relative;
    z-index: 1;
}
.demo-grid .cell {
    font-size: var(--df, 16px);
}
.demo-overlay {
    position: absolute;
    inset: 6px;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

/* Questions panel sits under/beside the grid in the demo — reuses
   .questions-panel from puzzle.css but doesn't need that class's
   max-width cap here, since the demo column already constrains it. */
.demo-questions-panel {
    max-width: none;
    padding: 0;
    margin-top: 18px;
}

/* Completion overlay — sits on top of the grid itself (inside
   #demo-grid-container, which is already position:relative), same
   "win card appears over the board" treatment as the real engine's
   #win-banner in puzzle.css. Hidden until all 3 words are found
   (js/demo-puzzle.js toggles .show). */
.demo-complete {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    align-items: center;
    justify-content: center;
    background: rgba(14,12,10,0.82);
    border-radius: 9px; /* matches container's own 10px radius minus its 1px border */
    opacity: 0;
    transition: opacity .4s ease;
}
.demo-complete.show {
    display: flex;
    opacity: 1;
}
.demo-complete-card {
    text-align: center;
    padding: 0 16px;
}
.demo-complete-msg {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--cream);
    margin: 0 0 16px;
}
.demo-complete-cta {
    display: inline-block;
    padding: 12px 26px;
    background: var(--gold);
    color: var(--ink);
    border-radius: 50px;
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s;
}
.demo-complete-cta:hover { background: var(--gold-light); }