/* ============================================
   SATOR ALEA 6×6 — PUNKY KIDS SKETCHBOOK (DARKER)
   Dark base • Bright pops • Less girly
   Updated: extended glow tiers valid-2..valid-12
   for the new expanded-letter-count scoring.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Comic+Neue:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

:root {
    --bg: #0F0F0F;
    --ink: #1A1A1A;
    --pink: #FF5BA3;
    --lime: #A3FF2D;
    --cyan: #00E5FF;
    --yellow: #FFEB3B;
    --orange: #FF6B00;
    --purple: #9D4EDD;
    --red: #FF2D55;
    --white: #FFFFFF;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Fredoka', sans-serif;
    background: var(--bg);
    color: #EEE;
    line-height: 1.4;
}

/* ─── HEADER ─── */
header {
    background: #1A1A1A;
    color: var(--yellow);
    text-align: center;
    padding: 1.4rem 1rem 1.1rem;
    position: relative;
    border-bottom: 5px solid var(--pink);
}

h1 {
    margin: 0;
    font-family: 'Fredoka', sans-serif;
    font-size: 2.85rem;
    letter-spacing: 3px;
    font-weight: 700;
    color: var(--yellow);
    text-shadow: 3px 3px 0 var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

h1 .dice {
    font-size: 2.25rem;
    color: var(--cyan);
    text-shadow: 3px 3px 0 var(--purple);
}

#daily-info {
    margin-top: 4px;
    font-size: 0.9rem;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ─── MAIN LAYOUT ─── */
main {
    max-width: 1180px;
    margin: 2rem auto;
    padding: 0 1.2rem;
    display: grid;
    grid-template-columns: 1fr 420px 1fr;
    gap: 1.8rem;
    align-items: start;
}

/* ─── SIDE PANELS ─── */
#pool-section,
#score-section {
    background: #1A1A1A;
    border: 3px solid #444;
    border-radius: 6px;
    padding: 1.35rem;
    position: relative;
    box-shadow: 5px 5px 0 #000;
}

#grid-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

h2 {
    margin: 0 0 0.85rem;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    color: var(--lime);
    text-shadow: 2px 2px 0 var(--pink);
}

/* ─── TILE POOL ─── */
.tile-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 155px;
    padding: 12px;
    background: #111;
    border: 3px dashed var(--lime);
    border-radius: 5px;
}

/* ─── TILES ─── */
.tile {
    width: 52px;
    height: 52px;
    background: #222;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.82rem;
    font-weight: 700;
    border-radius: 5px;
    border: 3px solid var(--yellow);
    box-shadow: 3px 3px 0 #000;
    cursor: grab;
    user-select: none;
    transition: transform 0.1s ease;
}

.tile:active {
    transform: scale(1.14) rotate(2deg);
}

.tile.wild {
    background: var(--pink);
    color: #FFF;
    border-color: var(--purple);
    box-shadow: 3px 3px 0 #000, 0 0 10px rgba(255, 91, 163, 0.35);
}

/* ─── GRID ─── */
.grid {
    display: grid;
    grid-template-columns: repeat(6, 54px);
    grid-template-rows: repeat(6, 54px);
    gap: 4px;
    background: #1A1A1A;
    padding: 10px;
    border: 4px solid #555;
    border-radius: 6px;
    box-shadow: 5px 5px 0 #000;
    position: relative;
}

.cell {
    background: #222;
    border: 2.5px solid #555;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.88rem;
    font-weight: 700;
    min-height: 54px;
    position: relative;
    cursor: pointer;
    color: #EEE;
    transition: all 0.1s ease;
}

.cell:hover {
    border-color: var(--pink);
    background: #2A2A2A;
}

.cell.focused {
    z-index: 50 !important;
    position: relative;

    border: 6px solid #00FFFF !important;

    outline: 5px solid #FFFFFF !important;
    outline-offset: -5px !important;

    box-shadow: 
        0 0 0 8px #00FFFF inset !important,
        0 0 0 12px #FFFFFF inset !important,
        0 0 0 16px #FF00FF inset !important,
        0 0 30px 12px rgba(0, 212, 255, 0.85) !important;

    background: rgba(0, 255, 255, 0.28) !important;
}

/* ─── SCORING ─── */
#score-display {
    font-size: 1.25rem;
    text-align: center;
}

.total {
    font-family: 'Fredoka', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    letter-spacing: 1px;
    color: var(--lime);
    text-shadow: 2px 2px 0 var(--pink);
    border-top: 3px solid #444;
}

.best-score {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    margin-top: 6px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ─── BUTTONS ─── */
.actions {
    display: flex;
    gap: 10px;
    margin-top: 1.7rem;
}

button {
    flex: 1;
    padding: 12px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 3px solid #555;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.1s ease;
    letter-spacing: 1px;
    box-shadow: 3px 3px 0 #000;
}

#submit-btn {
    background: var(--pink);
    color: #FFF;
}

#submit-btn:hover {
    background: var(--lime);
    color: #111;
    transform: translateY(-2px);
}

#reset-btn {
    background: #222;
    color: #EEE;
    border-color: var(--cyan);
}

#reset-btn:hover {
    background: var(--cyan);
    color: #111;
    transform: translateY(-2px);
}

.help {
    font-size: 0.82rem;
    margin-top: 0.85rem;
    opacity: 0.5;
    text-align: center;
    color: #777;
}

/* ============================================
   ─── GLOW PROGRESSION (valid-2 .. valid-12) ───
   Tier reflects expanded letter count of the word
   the tile belongs to. Glow gets brighter, wider,
   and more multi-layered as words get longer.
   Tiers 10–12 add a pulse animation for jackpot feel.
   ============================================ */

/* Tier 2 — modest lime outline */
.tile.valid-2 {
    border-color: var(--lime);
    box-shadow: 3px 3px 0 #000, 0 0 9px var(--lime);
}

/* Tier 3 — cyan, slightly brighter */
.tile.valid-3 {
    border-color: var(--cyan);
    box-shadow: 3px 3px 0 #000, 0 0 12px var(--cyan);
}

/* Tier 4 — purple */
.tile.valid-4 {
    border-color: var(--purple);
    box-shadow: 3px 3px 0 #000, 0 0 14px var(--purple);
}

/* Tier 5 — pink with a soft halo */
.tile.valid-5 {
    border-color: var(--pink);
    box-shadow: 
        3px 3px 0 #000,
        0 0 16px var(--pink),
        0 0 8px rgba(255, 91, 163, 0.6);
}

/* Tier 6 — yellow + orange (the old "max" — still cool) */
.tile.valid-6 {
    border-color: var(--yellow);
    box-shadow: 
        3px 3px 0 #000,
        0 0 18px var(--yellow),
        0 0 28px var(--orange);
}

/* Tier 7 — orange takes over, intense double halo */
.tile.valid-7 {
    border-color: var(--orange);
    background: #2a1a0a;
    box-shadow:
        3px 3px 0 #000,
        0 0 14px var(--yellow),
        0 0 28px var(--orange),
        0 0 42px rgba(255, 107, 0, 0.7);
}

/* Tier 8 — orange + pink, getting hotter */
.tile.valid-8 {
    border-color: var(--orange);
    background: #2a1015;
    color: #FFF;
    box-shadow:
        3px 3px 0 #000,
        0 0 14px var(--yellow),
        0 0 30px var(--orange),
        0 0 48px var(--pink),
        0 0 60px rgba(255, 91, 163, 0.55);
}

/* Tier 9 — pink + cyan combo, vaporwave heat */
.tile.valid-9 {
    border-color: var(--pink);
    background: #20102a;
    color: var(--white);
    box-shadow:
        3px 3px 0 #000,
        0 0 16px var(--cyan),
        0 0 32px var(--pink),
        0 0 50px var(--purple),
        0 0 70px rgba(255, 91, 163, 0.6);
}

/* Tier 10 — pulse begins. Cyan/pink/purple cocktail. */
.tile.valid-10 {
    border-color: var(--cyan);
    background: #1a0a2a;
    color: var(--white);
    text-shadow: 0 0 8px var(--cyan);
    animation: dropogram-pulse 1.4s ease-in-out infinite;
    box-shadow:
        3px 3px 0 #000,
        0 0 20px var(--cyan),
        0 0 38px var(--pink),
        0 0 58px var(--purple),
        0 0 80px rgba(0, 229, 255, 0.55);
}

/* Tier 11 — full rave, faster pulse, yellow heart */
.tile.valid-11 {
    border-color: var(--yellow);
    background: #2a1a05;
    color: var(--white);
    text-shadow: 0 0 10px var(--yellow), 0 0 16px var(--orange);
    animation: dropogram-pulse 1.1s ease-in-out infinite;
    box-shadow:
        3px 3px 0 #000,
        0 0 22px var(--yellow),
        0 0 42px var(--orange),
        0 0 62px var(--pink),
        0 0 90px rgba(255, 235, 59, 0.6);
}

/* Tier 12 — JACKPOT. Rainbow cycle + scale pulse. */
.tile.valid-12 {
    border-color: var(--white);
    background: #2a0a2a;
    color: var(--white);
    text-shadow:
        0 0 8px var(--white),
        0 0 16px var(--cyan),
        0 0 22px var(--pink);
    animation:
        dropogram-pulse 0.9s ease-in-out infinite,
        dropogram-rainbow 3s linear infinite;
    box-shadow:
        3px 3px 0 #000,
        0 0 24px var(--white),
        0 0 44px var(--cyan),
        0 0 64px var(--pink),
        0 0 90px var(--yellow),
        0 0 120px rgba(255, 255, 255, 0.55);
}

/* Pulsing scale (gentle breathe) */
@keyframes dropogram-pulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.06);
        filter: brightness(1.25);
    }
}

/* Rainbow border hue rotation — only used on tier 12 */
@keyframes dropogram-rainbow {
    0%   { filter: hue-rotate(0deg) brightness(1.15); }
    25%  { filter: hue-rotate(90deg) brightness(1.25); }
    50%  { filter: hue-rotate(180deg) brightness(1.15); }
    75%  { filter: hue-rotate(270deg) brightness(1.25); }
    100% { filter: hue-rotate(360deg) brightness(1.15); }
}

/* Respect motion preferences — disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tile.valid-10,
    .tile.valid-11,
    .tile.valid-12 {
        animation: none;
    }
}

/* ─── INVALID TILES ─── */
.tile.invalid {
    border-color: var(--red);
    background: #331111;
    color: #FFDDDD;
    box-shadow: 
        3px 3px 0 #000,
        0 0 9px var(--red),
        0 0 18px rgba(255, 45, 85, 0.75);
}

/* Orphan (placed but not part of any valid word) */
.tile.orphan {
    opacity: 0.65;
    filter: grayscale(70%);
    box-shadow: 3px 3px 0 #000, 0 0 8px var(--yellow);
}

.hidden { display: none !important; }

/* ─── HIDDEN MESSAGES ─── */
.hidden-messages {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── SHARE ─── */
.share-section {
    margin-top: 1.3rem;
    text-align: center;
}

#share-btn {
    background: var(--purple);
    color: #FFF;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.92rem;
    padding: 10px 24px;
    border: 3px solid var(--pink);
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 3px 3px 0 #000;
}

#share-btn:hover {
    background: var(--pink);
    transform: scale(1.04);
}

/* ─── MOBILE ─── */
@media (max-width: 900px) {
    main {
        grid-template-columns: 1fr;
        gap: 1.3rem;
    }
    h1 { font-size: 2.05rem; }
    .grid {
        grid-template-columns: repeat(6, 48px);
        grid-template-rows: repeat(6, 48px);
    }
    .cell { font-size: 1.68rem; }
    .tile { width: 48px; height: 48px; font-size: 1.58rem; }
}

/* ==========================================================================
   CROSSING TILES — super subtle & clean version
   Pure white/silver metallic glow (no lime, cyan, purple, pink, yellow,
   orange, or any other scoring color). 
   Dramatically reduced glow size + opacity so it feels premium/special
   without overwhelming the tile or clashing with the blue focused state.
   ========================================================================== */

.tile.crossing {
    /* Very restrained white metallic treatment */
    box-shadow:
        0 0 0 3px #ffffff,                      /* crisp white ring */
        0 0 7px 2px rgba(255, 255, 255, 0.45),  /* soft inner halo */
        0 0 13px 3px rgba(255, 255, 255, 0.18); /* tiny outer bloom */
    position: relative;
    z-index: 2;
}

/* Extremely gentle, slow pulse — barely noticeable */
@keyframes crossing-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px #ffffff,
            0 0 7px 2px rgba(255, 255, 255, 0.45),
            0 0 13px 3px rgba(255, 255, 255, 0.18);
    }
    50% {
        box-shadow:
            0 0 0 3.5px #ffffff,
            0 0 9px 3px rgba(255, 255, 255, 0.55),
            0 0 16px 4px rgba(255, 255, 255, 0.22);
    }
}

.tile.crossing {
    animation: crossing-pulse 2.4s ease-in-out infinite;
}

/* Bonus badge — clean and small */
.tile.crossing::after {
    content: "+1";
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.58em;
    font-weight: 700;
    color: #ffffff;
    background: rgba(20, 20, 20, 0.92);
    padding: 1px 4px 2px;
    border-radius: 4px;
    line-height: 1;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 3;
}

/* Invalid override — crossing disappears on red tiles */
.tile.crossing.invalid {
    animation: none;
    box-shadow: none;
}
.tile.crossing.invalid::after {
    display: none;
}



/* ─── SUBMITTED STATE ─────────────────────────
   When body.submitted is set, the board is locked.
   We keep all the valid-N + crossing styling so the player still sees
   their accomplishment, but darken the whole grid and stop the animations
   so it reads as "finished" rather than "still playing".
   ============================================ */

body.submitted .grid {
    /* Dim everything inside the grid uniformly without changing hue */
    filter: brightness(0.62) saturate(0.85);
    transition: filter 0.4s ease;
}

/* Stop the breathing/pulsing animations on submit — locked boards shouldn't move */
body.submitted .tile.valid-10,
body.submitted .tile.valid-11,
body.submitted .tile.valid-12,
body.submitted .tile.crossing {
    animation: none !important;
}

/* Slight inner darkening on tiles so the dimming feels intentional, not just like
   the screen brightness dropped. The ::before adds a subtle dark overlay. */
body.submitted .cell {
    cursor: default;
}

body.submitted .cell:hover {
    /* Disable the hover highlight — there's nothing to do anymore */
    border-color: #555;
    background: #222;
}

/* Tighten the crossing badge so it doesn't try to pulse on a locked board.
   Keep it visible — it's a trophy now. */
body.submitted .tile.crossing {
    box-shadow:
        0 0 0 3px #ffd23f,
        0 0 14px 4px rgba(255, 210, 63, 0.65),
        0 0 28px 8px rgba(255, 210, 63, 0.25);
}

/* ==========================================================================
   DAILY WORD + THEME UI
   Append to your existing styles.css
   ========================================================================== */

#daily-meta {
    text-align: center;
    margin-top: 10px;
}

#daily-meta .daily-meta-row {
    margin: 5px 0;
    line-height: 1;
}

#daily-meta .meta-label {
    color: #888;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-right: 8px;
    font-weight: 600;
}

#daily-meta #daily-word {
    color: var(--lime);
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 1px 1px 0 var(--pink);
    letter-spacing: 2px;
}

#daily-meta #daily-theme {
    color: var(--cyan);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1px;
}

/* ==========================================================================
   DAILY WORD PROGRESS SLOTS
   Each letter of the daily word renders as a "slot" — gold when filled,
   dim when not yet satisfied. When ALL slots are filled, dw-complete fires
   and they all pulse.
   ========================================================================== */

#daily-word-progress {
    display: inline-flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 6px 0 !important;
}

.dw-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 26px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 3px;
    border: 2px solid #555;
    background: #222;
    color: #555;
    transition: all 0.25s ease;
    text-transform: uppercase;
}

/* A slot whose letter is on the board — glows gold to say "earned" */
.dw-slot.dw-satisfied {
    border-color: #ffd23f;
    background: #2a2310;
    color: #ffd23f;
    box-shadow: 0 0 6px rgba(255, 210, 63, 0.5);
}

/* All slots filled = the bonus has fired. Brighter, with a celebratory pulse. */
.dw-slot.dw-complete {
    border-color: #fff;
    background: #ffd23f;
    color: #1a1a1a;
    box-shadow: 0 0 12px #ffd23f, 0 0 24px rgba(255, 210, 63, 0.6);
    animation: dw-complete-pulse 1.4s ease-in-out infinite;
}

@keyframes dw-complete-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .dw-slot.dw-complete { animation: none; }
}

/* ==========================================================================
   GOLD DOT — small marker on tiles whose letter is in today's daily word.
   Subtle by design: it's information, not a tier glow.
   Uses an ::after pseudo-element positioned in the bottom-right corner.
   ========================================================================== */

.tile.daily-letter {
    /* Make sure ::after positions relative to the tile */
    position: relative;
}

.tile.daily-letter::before {
    content: "";
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: 0 0 4px rgba(255, 210, 63, 0.8);
    pointer-events: none;
    z-index: 1;
}

/* Keep the dot visible on submitted boards but slightly dimmed */
body.submitted .tile.daily-letter::before {
    opacity: 0.6;
}

/* =============================================================================
   MOBILE SECTION REORDER
   =============================================================================
   On mobile, the natural document order is:
       pool-section -> grid-section (contains grid + how-to-play) -> score-section

   We want:
       pool-section -> grid (only) -> score-section -> how-to-play

   The how-to-play div lives INSIDE grid-section, so we can't just reorder
   <main>'s direct children. Trick: turn grid-section into `display: contents`
   on mobile, which makes its children (the grid + the how-to-play) become
   logical siblings of pool-section and score-section. Then `order` works.

   `display: contents` has historically had accessibility issues, but modern
   browsers (2022+) handle it correctly for non-interactive containers. Our
   grid-section has no role/aria — it's just a layout wrapper — so we're safe.

   Append to the bottom of style.css. Keep the existing `@media (max-width: 900px)`
   block as-is; this layers on top.
   ========================================================================== */

@media (max-width: 900px) {

    /* Make main a flex column so `order` is honored on its children */
    main {
        display: flex !important;
        flex-direction: column;
    }

    /* Dissolve grid-section's box on mobile — its children become flex
       siblings of pool-section and score-section. The grid keeps its own
       container styling; the how-to-play just flows like another card. */
    #grid-section {
        display: contents;
    }

    /* Order on mobile (lower number = appears first):
         1. pool-section
         2. .grid (the actual board)
         3. score-section (with submit + final result)
         4. .how-to-play (rules drop to the bottom) */
    #pool-section   { order: 1; }
    .grid           { order: 2; }
    #score-section  { order: 3; }
    .how-to-play    { order: 4; }

    /* Because grid-section was the centering parent for the grid, we need
       to re-center the grid on mobile now that grid-section is dissolved. */
    .grid {
        margin-left: auto;
        margin-right: auto;
    }

    /* Same goes for the rules — they no longer have a parent, so give them
       a little breathing room to match the other sections. */
    .how-to-play {
        margin: 0 0 1rem;
    }
}