/* =====================================================================
   statetap.css -- StateTap game styles (live page + admin preview).
   Every class is prefixed "st-" (wrapper: "statetap-wrap") so nothing
   collides with sitewide CSS. Loaded after includes/head.php.
   ===================================================================== */

.statetap-wrap {
    --st-ink: #1f2937;
    --st-muted: #6b7280;
    --st-pink: #E8577B;
    --st-pink-dark: #C43F63;
    --st-tile: #cfe9f3;
    --st-tile-ink: #1f5f7a;
    --st-tile-hover: #b5dcec;
    --st-slot-empty: #e5e7eb;
    --st-missed: #9ca3af;
    --st-green: #2e7d32;
    --st-danger: #c0392b;

    max-width: 480px;
    margin: 0 auto;
    padding: 30px 16px 40px;
    color: var(--st-ink);
    box-sizing: border-box;
}
.statetap-wrap *,
.statetap-wrap *::before,
.statetap-wrap *::after { box-sizing: border-box; }

/* ---- Header ---- */
.st-header { text-align: center; margin-bottom: 4px; }
.st-title {
    font-family: 'Fredoka', 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--st-pink-dark);
    text-decoration: none;
}
.st-title:hover { color: var(--st-pink); }

.st-question {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    margin: 14px auto 20px;
}

.st-not-ready {
    text-align: center;
    padding: 60px 20px;
    color: var(--st-muted);
}
.st-not-ready a { color: var(--st-pink-dark); }

/* ---- Answer slots (wrap onto as many rows as needed) ---- */
.st-slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}
.st-slot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.st-slot-ordinal {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--st-muted);
}
.st-slot {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: var(--st-slot-empty);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.5px;
    color: #ffffff;
}
.st-slots.st-slots-many .st-slot { width: 46px; height: 46px; font-size: 15px; }
.st-slot.filled { animation: stPop 0.32s cubic-bezier(.34,1.56,.64,1); }
.st-slot.st-slot-correct { background: var(--st-pink); }
.st-slot.st-slot-missed { background: var(--st-missed); }
.st-slot .st-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.st-slot .st-badge.correct { background: var(--st-green); }
.st-slot .st-badge.missed { background: var(--st-danger); }
@keyframes stPop {
    0% { transform: scale(0.4); }
    70% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* ---- Mistakes ("downs") ---- */
.st-downs-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 22px;
}
.st-downs-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-muted);
}
.st-downs { display: flex; gap: 6px; }
.st-down-marker {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--st-pink);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.st-down-marker.used {
    background: transparent;
    border: 2px solid var(--st-slot-empty);
    color: var(--st-missed);
    opacity: 0.6;
}

/* ---- End of game ---- */
.st-end-message {
    display: none;
    text-align: center;
    margin: 0 auto;
    max-width: 400px;
    font-size: 15px;
}
.st-end-message.win,
.st-end-message.lose,
.st-end-message.error { display: block; margin-bottom: 4px; }
.st-end-message.error { color: var(--st-danger); font-weight: 600; margin-bottom: 16px; }
.st-result-tag {
    display: block;
    font-family: 'Fredoka', 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2px;
}
.st-result-tag.win { color: var(--st-green); }
.st-result-tag.lose { color: var(--st-danger); }
.st-result-stats {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 12px 0 4px;
}
.st-result-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.st-result-stat-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
    color: var(--st-ink);
    white-space: nowrap;
}
.st-result-stat-label { font-size: 12px; color: var(--st-muted); }
.st-end-message.win .st-result-stat-circle { border-color: var(--st-green); }
.st-end-message.lose .st-result-stat-circle { border-color: var(--st-danger); }
.st-explanation {
    margin: 14px auto 0;
    max-width: 380px;
    font-size: 1rem;
    font-style: italic;
    color: var(--st-muted);
    line-height: 1.4;
    white-space: pre-line;
}

.st-share-btn {
    display: none;
    margin: 16px auto 26px;
    padding: 14px 36px;
    border-radius: 10px;
    border: none;
    background: var(--st-pink);
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    touch-action: manipulation;
}
.st-share-btn:hover { background: var(--st-pink-dark); }
.st-share-btn.visible { display: block; }
.st-share-confirm {
    display: none;
    text-align: center;
    margin: -18px 0 20px;
    font-size: 13px;
    color: var(--st-green);
    font-weight: 600;
}
.st-come-back-note {
    display: none;
    margin: 0 0 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--st-pink-dark);
}
.st-come-back-note.visible { display: block; }

/* ---- Board wrapper ---- */
.st-board {
    width: 100%;
    margin: 0 auto;
}
.st-board-loading { min-height: 240px; }

/* ---- Board: real US map (statetap-map.svg) ---- */
.st-board-map { max-width: 760px; }
.statetap-wrap:has(.st-board-map) { max-width: 760px; }
.statetap-wrap:has(.st-board-map) > :not(.st-board) { max-width: 480px; margin-left: auto; margin-right: auto; }

.st-map-name {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--st-tile-ink);
    min-height: 20px;
    margin-bottom: 4px;
}
.st-map svg {
    display: block;
    width: 100%;
    height: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
.st-state { cursor: pointer; outline: none; }
.st-state path {
    fill: var(--st-tile);
    stroke: #ffffff;
    stroke-width: 1;
    stroke-linejoin: round;
    transition: fill 0.15s ease;
}
.st-state .st-hit { fill: transparent; pointer-events: all; }
.st-state text {
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    fill: var(--st-tile-ink);
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}
.st-state text.st-hidden-label { display: none; }
.st-state:hover path,
.st-state:focus-visible path { fill: var(--st-tile-hover); }
.st-state:focus-visible path { stroke: var(--st-pink-dark); stroke-width: 2; }

.st-state.correct path,
.st-state.correct:hover path { fill: var(--st-pink); }
.st-state.correct text { fill: #ffffff; }
.st-state.wrong path,
.st-state.wrong:hover path { fill: #e5e7eb; }
.st-state.wrong text { fill: rgba(31,41,55,0.35); }
.st-state .st-map-x {
    fill: none;
    stroke: var(--st-danger);
    stroke-width: 4;
    stroke-linecap: round;
    pointer-events: none;
}
@keyframes stShakeMap {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.st-state.shake { animation: stShakeMap 0.32s ease; }
.st-state.missed-answer path,
.st-state.missed-answer:hover path { fill: var(--st-missed); }
.st-state.missed-answer text { fill: #ffffff; }
.st-state.excluded { cursor: not-allowed; }
.st-state.excluded path,
.st-state.excluded:hover path { fill: #f3f4f6; stroke: #d1d5db; stroke-dasharray: 3 2; }
.st-state.excluded text { fill: rgba(31,41,55,0.25); }
.st-board-done .st-state:not(.correct):not(.wrong):not(.missed-answer):not(.excluded) { cursor: default; }
.st-board-done .st-state:not(.correct):not(.wrong):not(.missed-answer):not(.excluded):hover path { fill: var(--st-tile); }

/* Small-state chips under the map */
.st-chips { margin: 10px auto 0; max-width: 480px; text-align: center; }
.st-chips-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--st-muted);
    margin-bottom: 6px;
}
.st-chips-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}
.st-chip {
    position: relative;
    min-width: 40px;
    height: 36px;
    padding: 0 6px;
    border: none;
    border-radius: 8px;
    background: var(--st-tile);
    color: var(--st-tile-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.st-chip:hover:not(:disabled) { background: var(--st-tile-hover); }
.st-chip:active:not(:disabled) { transform: scale(0.92); }
.st-chip:focus-visible { outline: 2px solid var(--st-pink-dark); outline-offset: 1px; }
.st-chip:disabled { cursor: default; }
.st-chip.st-chip-dc { font-style: italic; }
.st-chip.correct { background: var(--st-pink); color: #ffffff; }
.st-chip.wrong { background: #e5e7eb; color: rgba(31,41,55,0.25); cursor: not-allowed; }
.st-chip.missed-answer { background: var(--st-missed); color: #ffffff; }
.st-chip.excluded {
    background: transparent;
    color: rgba(31,41,55,0.25);
    border: 1px dashed rgba(31,41,55,0.2);
    cursor: not-allowed;
}
.st-chip .st-check-overlay,
.st-chip .st-x-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.st-chip .st-check-overlay { color: #ffffff; }
.st-chip .st-check-overlay svg { width: 50%; height: 50%; }
.st-chip .st-x-overlay { color: var(--st-danger); }
.st-chip .st-x-overlay svg { width: 45%; height: 70%; }
.st-chip.shake { animation: stShake 0.32s ease; }

/* ---- Board: equal-size tile map, 11 columns x 8 rows (?board=tiles) ---- */
.st-board-tiles {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 3px;
    max-width: 480px;
}
.st-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: var(--st-tile);
    color: var(--st-tile-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(9px, 2.9vw, 14px);
    letter-spacing: 0.2px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.st-tile:hover:not(:disabled) { background: var(--st-tile-hover); }
.st-tile:active:not(:disabled) { transform: scale(0.92); }
.st-tile:focus-visible { outline: 2px solid var(--st-pink-dark); outline-offset: 1px; }
.st-tile.st-tile-dc { font-size: clamp(8px, 2.5vw, 12px); font-style: italic; }
.st-tile:disabled { cursor: default; }
.st-tile.excluded {
    background: transparent;
    color: rgba(31,41,55,0.25);
    border: 1px dashed rgba(31,41,55,0.2);
    cursor: not-allowed;
}
.st-tile.correct,
.st-tile.wrong {
    background: transparent;
    color: rgba(31,41,55,0.2);
}
.st-tile.missed-answer {
    box-shadow: inset 0 0 0 2px var(--st-danger);
}
.st-tile.wrong { cursor: not-allowed; }
.st-tile .st-check-overlay,
.st-tile .st-x-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.st-tile .st-check-overlay { color: var(--st-green); }
.st-tile .st-check-overlay svg { width: 70%; height: 70%; }
.st-tile .st-x-overlay { color: var(--st-danger); }
.st-tile .st-x-overlay svg { width: 60%; height: 80%; }
.st-tile.shake { animation: stShake 0.32s ease; }
@keyframes stShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Big X that flies from the center of the screen onto the wrong tile.
   Appended to <body>, so it can't rely on the wrapper's variables. */
.st-feud-x {
    position: fixed;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c0392b;
    pointer-events: none;
    transition: left 0.45s cubic-bezier(.25,.8,.3,1),
                top 0.45s cubic-bezier(.25,.8,.3,1),
                width 0.45s cubic-bezier(.25,.8,.3,1),
                height 0.45s cubic-bezier(.25,.8,.3,1);
}
.st-feud-x svg { width: 100%; height: 100%; }

/* ---- FAQ ---- */
.st-faq { max-width: 480px; margin: 44px auto 0; }
.st-faq-q { font-weight: 700; color: var(--st-ink); margin: 0 0 4px; }
.st-faq-a { color: #4b5563; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }

/* ---- Dev-only buttons (remove before launch) ---- */
.st-dev-btn {
    display: block;
    margin: 30px auto 0;
    background: #f3f4f6;
    color: var(--st-muted);
    border: 1px dashed #9ca3af;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.st-dev-btn:hover { background: #e5e7eb; }

@media (max-width: 480px) {
    .statetap-wrap { padding: 24px 10px 30px; }
    .st-board-tiles { gap: 2px; }
    .st-state text { font-size: 22px; }
    .st-state .st-map-x { stroke-width: 6; }
    .st-chips-row { gap: 4px; }
    .st-chip { min-width: 34px; padding: 0 4px; font-size: 13px; }
    .st-tile { border-radius: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .st-slot.filled, .st-tile.shake { animation: none; }
    .st-feud-x { transition: none; }
}