/* Ravle final UI integration
   Loaded after the established theme files so responsive placement remains
   stable across the daily board, navigation, and secondary panels. */

.header-btn,
.header-btn:hover,
.header-btn:focus-visible {
    width: clamp(3.25rem, 5.2vw, 4.35rem);
    min-width: clamp(3.25rem, 5.2vw, 4.35rem);
    min-height: 3.55rem;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.3rem 0.18rem 0.34rem;
    font-size: clamp(0.5rem, 0.72vw, 0.61rem);
    line-height: 1.05;
    text-align: center;
}

.header-btn::before {
    width: 1.78rem;
    height: 1.78rem;
    border: 1px solid color-mix(in srgb, var(--border), transparent 18%);
    border-radius: 0.55rem;
    background: var(--surface-soft);
    box-shadow: 0 2px 7px rgb(31 40 36 / 7%);
}

#profile-btn::before,
#profile-btn::after {
    display: none;
}

.profile-icon-frame {
    display: grid;
    width: 1.78rem;
    height: 1.78rem;
    flex: 0 0 1.78rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--border), transparent 18%);
    border-radius: 0.55rem;
    background: var(--surface-soft);
    box-shadow: 0 2px 7px rgb(31 40 36 / 7%);
}

.profile-icon-frame::before {
    width: 1rem;
    height: 1rem;
    background: var(--primary);
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='black'/%3E%3Cpath d='M4.8 20c.5-4 3.2-6.2 7.2-6.2s6.7 2.2 7.2 6.2H4.8Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='black'/%3E%3Cpath d='M4.8 20c.5-4 3.2-6.2 7.2-6.2s6.7 2.2 7.2 6.2H4.8Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.panel-masthead {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin: 0 0 0.72rem;
    padding: 0.05rem 0.12rem 0.78rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 30%);
}

.panel-title-block {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
    text-align: left;
}

.panel-title-block > span {
    color: var(--primary);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.panel-title-block > h2 {
    margin: 0;
    color: var(--text);
    font-family: ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
    font-size: clamp(1.25rem, 2.35vw, 1.62rem);
    font-weight: 820;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.panel-masthead > .close-btn {
    position: relative;
    top: auto;
    right: auto;
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 2.55rem;
    padding: 0;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface-raised), transparent 4%);
    color: var(--muted);
    box-shadow: 0 5px 16px rgb(20 28 25 / 10%);
    font-size: 0;
    line-height: 1;
    z-index: 6;
}

.panel-masthead > .close-btn::before,
.panel-masthead > .close-btn::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.9rem;
    height: 1.5px;
    border-radius: var(--radius-pill);
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center;
}

.panel-masthead > .close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.panel-masthead > .close-btn:hover,
.panel-masthead > .close-btn:focus-visible {
    border-color: color-mix(in srgb, var(--primary), var(--border) 48%);
    background: var(--surface-soft);
    color: var(--text);
    transform: none;
}

/* The introduction is nearly full width and centered below the masthead. */
.modal-content > .panel-hero {
    --hero-accent: var(--primary);
    box-sizing: border-box;
    width: calc(100% - 0.5rem);
    max-width: none;
    margin: 0.08rem auto 0.9rem;
    padding: 0.76rem 1rem;
    flex: 0 0 auto;
    justify-items: center;
    text-align: center;
}

.panel-hero.is-help { --hero-accent: var(--correct); }
.panel-hero.is-archive { --hero-accent: var(--present); }
.panel-hero.is-profile { --hero-accent: var(--primary); }
.panel-hero.is-settings { --hero-accent: var(--muted); }
.panel-hero.is-history { --hero-accent: var(--correct); }

.panel-intro-title {
    color: var(--text);
    font-family: ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 820;
    letter-spacing: -0.015em;
}

.modal-content > .panel-hero p {
    max-width: 42rem;
    font-size: 0.7rem;
    text-align: center;
}

/* Explicit transition states make every panel animate consistently. */
.modal-overlay,
.modal-overlay:not([hidden]),
.modal-overlay.is-closing {
    animation: none !important;
    opacity: 1;
    transition: opacity 190ms ease;
}

.modal-overlay .modal-content,
#puzzle-overview-overlay .modal-content,
#modal-overlay .global-only-stats {
    animation: none !important;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 190ms ease,
        transform 230ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.is-entering,
.modal-overlay.is-closing {
    opacity: 0;
    pointer-events: none;
}

.modal-overlay.is-entering .modal-content,
.modal-overlay.is-closing .modal-content {
    opacity: 0;
    transform: translateY(1rem) scale(0.992);
}

@media (min-width: 48rem) {
    #puzzle-overview-overlay.is-entering .modal-content,
    #puzzle-overview-overlay.is-closing .modal-content,
    #modal-overlay.is-entering .global-only-stats,
    #modal-overlay.is-closing .global-only-stats {
        transform: translateX(1.4rem) scale(0.994);
    }
}

/* Compact puzzle overview: rankings first, then a dense activity summary. */
.overview-content .global-leaderboard-section {
    border-color: color-mix(in srgb, var(--present), var(--border) 62%);
    background: color-mix(in srgb, var(--surface-soft), var(--present) 3%);
}

.overview-content .stats-group-heading,
.global-only-stats .stats-group-heading {
    margin-bottom: 0.58rem;
}

.metric-leaderboards {
    gap: 0.58rem;
}

.metric-leaderboards .leaderboard-panel {
    min-width: 0;
    padding: 0.7rem;
    border-radius: var(--radius-md);
}

.metric-leaderboards .leaderboard-heading {
    margin-bottom: 0.48rem;
}

.leaderboard-row {
    min-width: 0;
}

.leaderboard-row.is-you {
    border-color: color-mix(in srgb, var(--primary), var(--border) 24%);
    background: color-mix(in srgb, var(--primary-soft), var(--surface-raised) 18%);
    box-shadow:
        inset 3px 0 0 var(--primary),
        0 0 0 1px color-mix(in srgb, var(--primary), transparent 72%);
}

.leaderboard-name,
.leaderboard-score,
.leaderboard-identity {
    min-width: 0;
}

.leaderboard-name {
    overflow-wrap: anywhere;
}

.leaderboard-list.is-scrollable {
    padding-right: 0.32rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, var(--primary), transparent 45%) transparent;
    scrollbar-width: thin;
}

.metric-leaderboards .leaderboard-list.is-scrollable {
    max-height: 18.15rem;
}

.metric-leaderboards .leaderboard-list.is-scrollable .leaderboard-row {
    height: 3.35rem;
    box-sizing: border-box;
}

.load-more-slot {
    min-height: 0;
}

.load-more-slot.is-active {
    min-height: 3.3rem;
}

.puzzle-community-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 0.65rem;
    align-items: stretch;
}

.puzzle-community-layout .community-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.46rem;
    margin: 0;
}

.puzzle-community-layout .community-stat {
    min-height: 3.6rem;
    padding: 0.55rem;
}

.puzzle-community-layout .puzzle-detail-strip {
    gap: 0.46rem;
}

.puzzle-community-layout .puzzle-detail-strip > div {
    padding: 0.55rem 0.36rem;
}

/* Global standings show the useful ranking data without long mobile sentences. */
.global-only-stats .all-time-standings {
    background: color-mix(in srgb, var(--surface-soft), var(--primary) 3%);
}

.lifetime-standing-row {
    grid-template-columns: 2.25rem minmax(0, 1fr) minmax(3.6rem, auto) !important;
    gap: 0.62rem;
    min-height: 3.55rem;
    padding: 0.52rem 0.68rem;
}

.leaderboard-identity {
    display: grid;
    align-content: center;
    gap: 0.12rem;
}

.leaderboard-identity .leaderboard-name {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-breakdown {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lifetime-score {
    display: grid;
    width: auto;
    grid-column: auto;
    grid-row: auto;
    align-self: center;
    align-content: center;
    justify-items: end;
    gap: 0;
    text-align: right;
}

.lifetime-score strong {
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
}

.lifetime-score small {
    color: var(--muted);
    font-size: 0.55rem;
}

.lifetime-standings-list.is-scrollable {
    max-height: 19.15rem;
}

.lifetime-standings-list.is-scrollable .lifetime-standing-row {
    height: 3.55rem;
}

.your-global-standing .lifetime-standing-row {
    width: 100%;
    box-sizing: border-box;
}

.global-summary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 0.65rem;
    align-items: stretch;
}

.global-summary-activity,
.global-summary-numbers {
    display: grid;
    min-width: 0;
    gap: 0.58rem;
    align-content: start;
}

.global-summary-layout .global-placeholder {
    margin: 0;
    font-size: 0.66rem;
}

.global-summary-layout .community-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 0;
}

.global-summary-layout .community-stat {
    min-height: 3.6rem;
    padding: 0.48rem 0.24rem;
}

.global-summary-layout .community-stat span {
    font-size: clamp(0.92rem, 2vw, 1.2rem);
}

.global-summary-layout .community-outcomes,
.global-summary-layout .community-totals,
.global-summary-layout .community-averages {
    margin-top: 0;
}

.global-summary-layout .community-totals {
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

.global-summary-layout .community-totals > div {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 2.65rem;
    padding: 0.48rem 0.68rem;
    text-align: left;
}

.global-summary-layout .community-totals strong {
    justify-self: end;
}

.global-summary-layout .community-averages {
    padding: 0.62rem;
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal-overlay .modal-content {
        transition-duration: 0.01ms !important;
    }
}

.category-card {
    border-color: color-mix(in srgb, var(--primary), var(--border) 58%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary), transparent 88%),
        0 10px 28px color-mix(in srgb, var(--primary), transparent 90%);
}

.game-board {
    border-color: color-mix(in srgb, var(--correct), var(--border) 58%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--correct), transparent 89%),
        0 18px 46px color-mix(in srgb, var(--correct), transparent 91%),
        var(--shadow-raised);
}

@media (max-width: 61.99rem) {
    .puzzle-shortcuts {
        z-index: 1;
        grid-column: 1;
        grid-row: 2;
    }

    .board-container {
        grid-column: 1;
        grid-row: 3;
    }

    .game-controls {
        grid-column: 1;
        grid-row: 4;
    }
}

@media (max-width: 47.99rem) {
    .header-btn,
    .header-btn:hover,
    .header-btn:focus-visible {
        width: clamp(2.55rem, 12vw, 3.1rem);
        min-width: 0;
        min-height: 3.15rem;
        padding: 0.2rem 0.06rem 0.22rem;
        font-size: clamp(0.43rem, 1.65vw, 0.52rem);
    }

    .header-btn::before {
        width: 1.55rem;
        height: 1.55rem;
    }

    .profile-icon-frame {
        width: 1.55rem;
        height: 1.55rem;
        flex-basis: 1.55rem;
    }

    .profile-icon-frame::before {
        width: 0.9rem;
        height: 0.9rem;
    }

    .panel-masthead {
        gap: 0.6rem;
        padding: 0.02rem 0.08rem 0.68rem;
    }

    .panel-title-block > h2 {
        font-size: clamp(1.12rem, 5vw, 1.32rem);
    }

    .modal-content > .panel-hero {
        width: calc(100% - 0.4rem);
        margin: 0.06rem auto 0.8rem;
        padding: 0.68rem 0.78rem;
    }

    .panel-masthead > .close-btn {
        width: 2.35rem;
        height: 2.35rem;
        flex-basis: 2.35rem;
    }

    .puzzle-community-layout,
    .global-summary-layout {
        grid-template-columns: 1fr;
    }

    .puzzle-community-layout .puzzle-detail-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .global-summary-layout .community-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lifetime-standing-row {
        grid-template-columns: 1.9rem minmax(0, 1fr) minmax(3rem, auto) !important;
        gap: 0.4rem;
        padding-inline: 0.5rem;
    }

    .lifetime-standing-row .lifetime-score {
        grid-column: 3;
        text-align: right;
    }

    .puzzle-shortcuts {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.38fr);
    }

    .footer-links {
        flex-wrap: nowrap;
        gap: 0.05rem;
    }

    .footer-link {
        min-height: 2.5rem;
        padding-inline: clamp(0.28rem, 1.5vw, 0.45rem);
        font-size: clamp(0.54rem, 1.75vw, 0.64rem);
        white-space: nowrap;
    }
}

@media (max-width: 23rem) {
    .brand-row {
        display: none;
    }

    .header-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .header-btn,
    .header-btn:hover,
    .header-btn:focus-visible {
        width: 19%;
    }
}