/* ============================================================================
   UI.Confirm — the app's own confirmation dialog.

   Replaces `window.confirm()`, which a phone browser is free to suppress
   silently (iOS "Block Alerts", Brave's default), turning every guarded control
   into a dead button.
   ========================================================================== */

.mf-confirm {
    position: fixed;
    inset: 0;
    /* Above every modal surface in the app. A confirmation that opens behind
       the thing it is confirming is the same defect in a new costume. */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The notch is part of the layout (viewport-fit=cover), so the panel is
       kept out of it rather than the backdrop being shrunk away from it. */
    padding: max(var(--mf-safe-top, 0px), 16px) max(var(--mf-safe-right, 0px), 16px)
             max(var(--mf-safe-bottom, 0px), 16px) max(var(--mf-safe-left, 0px), 16px);
    background: rgba(6, 8, 20, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: mf-confirm-fade 140ms ease-out;
}

.mf-confirm-panel {
    width: min(420px, 100%);
    /* Never taller than the visible page: `dvh`, because on a phone `vh` is the
       height with the URL bar HIDDEN and the buttons would sit below the fold. */
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid rgba(150, 180, 255, 0.28);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(20, 24, 48, 0.98), rgba(12, 14, 32, 0.98));
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    animation: mf-confirm-rise 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.mf-confirm-message {
    margin: 0 0 18px;
    color: #e8ecff;
    font-size: 1rem;
    line-height: 1.45;
    /* A confirmation is read before it is answered; long copy wraps rather
       than forcing the panel wide. */
    overflow-wrap: anywhere;
}

/* The rules behind the question. Quieter than the question and separated from
   it, so the panel still reads as one decision rather than a wall of text. */
.mf-confirm-detail {
    margin: -8px 0 18px;
    padding-top: 10px;
    border-top: 1px solid rgba(232, 236, 255, 0.14);
    color: rgba(200, 210, 235, 0.86);
    font-size: 0.82rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mf-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.mf-confirm-actions .btn {
    /* The tap floor is not negotiable on the control that decides whether a
       match ends or stardust is spent. */
    min-height: var(--mf-touch, 44px);
    min-width: 96px;
    padding: 0 18px;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* A destructive answer is marked, not re-skinned. The red slab this used to
   paint existed nowhere else in the game, which is what made the one dialog
   that ends a match look like a different product. The shared primary button
   carries the shape; only its edge warns. */
.mf-confirm-accept.mf-confirm-destructive {
    box-shadow: inset 0 0 0 1px rgba(255, 140, 140, 0.55);
}

@keyframes mf-confirm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mf-confirm-rise {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mf-confirm,
    .mf-confirm-panel {
        animation: none;
    }
}

/* On a short landscape phone the panel competes with the page box directly:
   trim its padding so the two buttons stay on screen without scrolling. */
@media (orientation: landscape) and (max-height: 560px) {
    .mf-confirm-panel {
        padding: 14px 16px;
    }

    .mf-confirm-message {
        margin-bottom: 12px;
        font-size: 0.9rem;
    }

    .mf-confirm-detail {
        margin: -6px 0 12px;
        padding-top: 8px;
        font-size: 0.78rem;
    }
}