/* === Shared completion modal === */
/* Used by both housegame and frogscotch via window.CompletionModal.show().
   Depends on global CSS custom properties: --color-title, --fn-font-heading,
   --fn-font-body, --fn-ink, --fn-ink-light, --fn-error, --color-text. */

/* Full-screen dimmed backdrop that hosts the modal box. Shared infrastructure
   used here by the completion modal and elsewhere (e.g. housegame's resume
   modal — both apps load this file). */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--color-text, #000) 50%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: modal-fade-in 0.2s ease;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.completion-modal {
    position: relative;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 1.5rem 2.5rem 1.5rem;
    max-width: min(28rem, calc(100vw - 2rem));
    width: 100%;
}

.completion-icon {
    font-size: 3.6rem;
    line-height: 1;
    margin-bottom: 0.4rem;
    animation: completion-bounce 0.6s ease infinite alternate;
}

.completion-icon-img {
    display: block;
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    margin: 0 auto 0.4rem;
    animation: completion-bounce 0.6s ease infinite alternate;
}

@keyframes completion-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .completion-icon,
    .completion-icon-img { animation: none; }
}

.completion-title {
    display: inline-block;
    color: var(--color-title);
    font-family: var(--fn-font-heading);
    font-size: 2.4rem;
    line-height: 1;
    margin: 0 0 1.25rem 0;
    padding: 0.25rem 0.5rem;
}

/* Row spans ±6px past the modal content so its horizontal extents match the
   blue stats highlight. The green-on-time fills the wrapper, so green.left
   lands on blue.left, and the buttons block sits at the row's right edge
   so its right side lines up with blue.right. */
.completion-time-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 -6px 1rem;
}

.completion-time {
    flex: 1 1 auto;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    line-height: 1;
    padding: 0.875rem 0.6rem;
}

/* Green highlighter — fills the wrapper exactly so its left edge aligns with
   the row's (and therefore the blue stats highlight's) left edge. */
.completion-time::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(34, 197, 94, 0.3);
    border-radius: 2px;
    transform: rotate(-0.5deg);
    z-index: -1;
}

.completion-time-label {
    font-family: var(--fn-font-heading);
    font-size: 1.4rem;
    color: var(--fn-ink-light);
    line-height: 1;
}

.completion-time-value {
    flex: 1 1 auto;
    text-align: center;
    font-family: var(--fn-font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-title);
    line-height: 1;
    font-feature-settings: "tnum";
    letter-spacing: 0.02em;
    /* Keep "10m 13s" on a single line — the green box is too narrow at the
       previous size to fit the m+s format without wrapping. */
    white-space: nowrap;
}

.completion-stats {
    position: relative;
    isolation: isolate;
    display: grid;
    /* Auto-flow so the grid scales to whatever number of stats the caller
       provides (housegame: 3, frogscotch: 2). Each child takes equal share. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.85rem 0.6rem;
}

.completion-stats::before {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    top: 0;
    bottom: 0;
    background: rgba(74, 111, 165, 0.15);
    border-radius: 3px;
    transform: rotate(-0.4deg);
    z-index: -1;
}

.completion-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.completion-stat .stat-value {
    font-family: var(--fn-font-heading);
    font-size: 1.4rem;
    color: var(--color-title);
    line-height: 1;
    font-feature-settings: "tnum";
}

.completion-stat .stat-label {
    font-size: 0.7rem;
    color: var(--fn-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.completion-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.completion-actions .fn-btn {
    flex: 1;
}

.completion-time-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.completion-time-actions .fn-btn {
    width: 6rem;
    min-height: 30px;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    /* Stops "Examine level" from wrapping inside the now-narrower button. */
    white-space: nowrap;
}

/* Emoji badges pinned to the right end of the green time highlight. They
   overlay rather than displace the centered time digits, so the time stays
   centered between the label and the wrapper's right edge regardless of
   whether badges are present. */
.completion-time-badges {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1;
    z-index: 1;
}

.completion-time-badges:has(:only-child) {
    top: 0.4rem;
    transform: none;
}

.completion-time:has(.completion-time-badge) {
    padding-right: 3.6rem;
}

.completion-time-badge {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.15rem;
    line-height: 1;
    cursor: help;
    user-select: none;
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.15s ease;
}

.completion-time-badge.appear {
    animation: completion-badge-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.completion-time-badge.appear:hover {
    transform: scale(1.15);
}

@keyframes completion-badge-pop {
    0%   { opacity: 0; transform: scale(0.4) rotate(-18deg); }
    55%  { opacity: 1; transform: scale(1.25) rotate(6deg); }
    80%  { transform: scale(0.95) rotate(-2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .completion-time-badge {
        opacity: 1;
        transform: none;
    }
    .completion-time-badge.appear {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.completion-time-badge-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.completion-time-badge-icon-img {
    width: 1.8rem;
    height: 1.8rem;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.completion-time-badge-value {
    font-family: var(--fn-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-title);
    margin-bottom: 0.15rem;
    font-feature-settings: "tnum";
}

.completion-tooltip {
    display: none;
    position: fixed;
    background: #ffffff;
    color: var(--fn-ink, #000);
    border: 2px solid #6b7280;
    font-family: var(--fn-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    line-height: 1.35;
    white-space: nowrap;
    z-index: 2000;
    pointer-events: none;
}

.completion-tooltip.visible {
    display: block;
}

.completion-tooltip-num {
    color: var(--fn-error, #ef4444);
    font-weight: 700;
}

.completion-btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.completion-btn-share-icon {
    font-size: 1.05em;
    line-height: 1;
}

.completion-next {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    margin: 0 0 0.85rem 0;
    font-size: 0.9rem;
    color: var(--fn-ink-light);
}

.completion-next[data-empty="true"] {
    display: none;
}

.completion-next-icon {
    font-size: 1em;
}

.completion-next-time {
    font-weight: 700;
    color: var(--fn-ink);
    font-feature-settings: "tnum";
}

.confetti-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

@media (max-width: 480px) {
    .completion-modal {
        padding: 1.5rem 1.5rem 1.25rem;
    }
    .completion-title {
        font-size: 2rem;
    }
    .completion-time {
        font-size: 2.6rem;
    }
    .completion-stats {
        gap: 0.5rem;
    }
}