/* ===== Nunito variable font (weight 200–1000) ===== */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url(/nunito-variable.woff2) format('woff2');
}

/* ===== Pico CSS overrides ===== */
:root[data-theme="light"] {
    --pico-primary: #0d9488;
    --pico-primary-hover: #0f766e;
    --pico-primary-focus: rgba(13, 148, 136, 0.25);
    --pico-primary-inverse: #fff;
    --pico-background-color: #e8e8e8;
    --pico-card-background-color: #f8f8f8;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
    font-weight: 1000;
}

/* ===== Navigation bar ===== */
#main-nav {
    background: #d0d0d0;
    border-bottom: 1px solid #b8b8b8;
    padding: 0 1rem;
}

#main-nav ul li a.nav-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 1000;
    font-size: 1.5em !important;
    color: #000 !important;
    text-decoration: none;
}

/* Black text, gold glow on hover for all nav links */
#main-nav ul li a {
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: #000 !important;
    transition: text-shadow 0.15s ease;
    padding: 2px 12px;
    text-decoration: none;
}

#main-nav ul li:first-child a {
    padding-left: 15px;
}

#main-nav ul li a:hover {
    text-shadow: 0 0 8px rgba(255, 190, 0, 0.9), 0 0 18px rgba(255, 190, 0, 0.6);
    color: #000 !important;
    text-decoration: none;
}

/* Dropdown summary (display name trigger) */
#main-nav details summary {
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: #000;
}

/* Narrow dropdown menu — fit content, don't stretch full width */
#main-nav details ul {
    width: max-content;
    min-width: 0;
    left: auto;
    right: 0;
}

/* ===== Login & Welcome pages ===== */
#login-page {
    max-width: 480px;
    margin: 2rem auto 0;
}

.login-notice {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    background: #fff4e5;
    border: 1px solid #f0c97a;
    color: #6b4e00;
    margin-bottom: 1rem;
}

#welcome-page {
    max-width: 560px;
    margin: 2rem auto 0;
}

/* ===== Screen size gate ===== */
#screen-too-small {
    display: none;
    padding: 2rem;
    text-align: center;
    font-size: 1.1em;
    color: #555;
}

@media (max-width: 1099px) {
    #screen-too-small {
        display: block;
    }

    #rating-content {
        display: none;
    }
}

/* ===== Card flip ===== */
.card-container {
    perspective: 1100px;
}

.card {
    position: relative;
    transform-style: preserve-3d;
}

.card.flipping {
    transform: rotateX(180deg);
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
}

.card-front,
.card-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Contain .rating-container's top margin so the front sits at the same
   y-offset as the abs-positioned back (which contains its margins via BFC).
   Without this, the back renders 16px lower than the front during the flip
   and snaps up when the flip ends. */
.card-front {
    display: flow-root;
}

.card-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: rotateX(180deg);
}

/* ===== Rating container ===== */
.rating-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin: 16px 0;
}

.rating-image {
    width: 512px;
    height: 512px;
    cursor: pointer;
    display: block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rating-image:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.rating-image.selected {
    box-shadow: 0 0 0 3px rgba(255, 190, 0, 0.9), 0 0 24px 6px rgba(255, 190, 0, 0.55);
}

/* ===== Spinner ===== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(13, 148, 136, 0.15);
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 2rem auto;
}

/* ===== Toast ===== */
@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1em;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-in 0.2s ease-out;
    white-space: nowrap;
}

.toast-error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.toast-badge {
    background-color: #fef9c3;
    color: #713f12;
    border: 1px solid #fde047;
}

/* ===== Preload (invisible) ===== */
.preload-image {
    display: none;
}

/* ===== Text elements ===== */
.stats-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
}

.score-display {
    font-size: 0.9em;
    color: #555;
}

.badge-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Leaderboard name-cell badges: space them away from the display name
   and from each other so they don't feel crowded against the text. */
.leaderboard-table td svg,
.leaderboard-table td img {
    margin-left: 8px;
}

.leaderboard-table td svg + svg,
.leaderboard-table td svg + img,
.leaderboard-table td img + svg,
.leaderboard-table td img + img {
    margin-left: 4px;
}

.prompt-text {
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 8px;
}

.error-message {
    color: #cc0000;
    padding: 20px;
    text-align: center;
    font-size: 1.1em;
}

/* ===== Leaderboard ===== */
.leaderboard-table {
    width: 100%;
}

.leaderboard-table th {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    color: #555;
    letter-spacing: 0.04em;
}

.leaderboard-table td {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    vertical-align: middle;
}

/* Rank column: centered */
.leaderboard-table .rank-col {
    text-align: center;
}

/* Alternating row shading — must target td because Pico sets background-color on td */
.leaderboard-table tbody tr:nth-child(even):not(.current-user):not(.ellipsis-row) td {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Current-user row: teal-tinted background + left accent on first cell */
.current-user td {
    background-color: #e0f4f2 !important;
    font-weight: 800;
}

.current-user td.rank-col {
    box-shadow: inset 4px 0 0 #0d9488;
}

.placeholder-row td {
    color: #ccc;
}

.ellipsis-row td {
    text-align: center;
    color: #999;
    padding: 4px 0;
}

/* ===== Plane badge: click easter egg + 500-rating unlock ceremony ===== */

.plane-badge-button {
    all: unset;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.plane-badge-button:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
    border-radius: 4px;
}

.plane-badge-button img {
    transition: transform 120ms ease-out;
}

.plane-badge-button:hover img {
    transform: scale(1.08);
}

/* Fixed-position overlay. Transform-only animation (GPU-composited). The
   --start-x / --start-y custom properties are set inline from Elm at
   animation start and represent the badge center's offset from the viewport
   center, so the plane emerges from where the badge actually sits on screen. */
.plane-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    will-change: transform, opacity;
}

.plane-overlay-img {
    width: 50vmin;
    height: auto;
    display: block;
}

.plane-overlay-text {
    text-align: center;
    font-family: 'Nunito', sans-serif;
    color: #0d9488;
}

.plane-overlay-text-big {
    font-weight: 1000;
    font-size: 2.5rem;
}

.plane-overlay-text-small {
    font-weight: 700;
    font-size: 1.25rem;
    margin-top: 0.25rem;
}

/* Click timeline over 2950ms total:
     0-42.4%  fly-in     (1250ms)
     42.4-76% hold       (1000ms)
     76-100%  fade-out   ( 700ms) */
@keyframes plane-flyby-click {
    0% {
        transform: translate(calc(var(--start-x) - 50%), calc(var(--start-y) - 50%)) scale(0.1);
        opacity: 0;
    }
    5% { opacity: 1; }
    42.4% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    76.3% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Unlock timeline over 4450ms total:
     0-28.1%  fly-in     (1250ms)
     28.1-84% hold       (2500ms)
     84-100%  fade-out   ( 700ms) */
@keyframes plane-flyby-unlock {
    0% {
        transform: translate(calc(var(--start-x) - 50%), calc(var(--start-y) - 50%)) scale(0.1);
        opacity: 0;
    }
    5%  { opacity: 1; }
    28.1% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    84.3% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.plane-overlay-click {
    animation: plane-flyby-click 2950ms cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

.plane-overlay-unlock {
    animation: plane-flyby-unlock 4450ms cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

/* Congrats text fades in just before the plane reaches center (850ms into
   the 1250ms fly-in), then rides the plane's hold/fade for the rest. */
.plane-overlay-click .plane-overlay-text {
    display: none;
}

.plane-overlay-unlock .plane-overlay-text {
    opacity: 0;
    animation: plane-text-fadein 400ms ease-out forwards;
    animation-delay: 850ms;
}

@keyframes plane-text-fadein {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Defense-in-depth: if prefers-reduced-motion is set but the Elm flag somehow
   missed it, the CSS still suppresses the overlay and the hover-scale. */
@media (prefers-reduced-motion: reduce) {
    .plane-overlay,
    .plane-overlay-click,
    .plane-overlay-unlock {
        display: none;
    }

    .plane-badge-button img,
    .plane-badge-button:hover img {
        transition: none;
        transform: none;
    }
}