@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); /* full-bleed blurred background */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;          /* lock scrolling */
    overscroll-behavior: none; /* prevent bounce on modern browsers */
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("title-background.png") center / cover no-repeat;
    filter: blur(12px);
    transform: scale(1.06);        /* hides blur edges */
    z-index: -2;
}
/* optional dark tint for contrast */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: -1;
}

/* background lock that doesn't affect the modal overlay */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}


/* centered logo (horizontal), responsive */
.logo {
    display: block;
    margin: 40px auto;
    max-width: 90vw;
    height: auto;
}

.menu { --scale: 1; transform: scale(var(--scale)); transform-origin: top center; }
@media (max-width: 720px){ .menu { --scale: .9; } }
@media (max-width: 560px){ .menu { --scale: .8; } }
@media (max-width: 840px){ .mc-btn--lang { position: static; margin: 0; } }

/* Use Minecraftia from FontLibrary, with sensible fallbacks */
:root {
    --mc-font: "MinecraftiaRegular", "Minecraftia", "Minecraft", monospace;
    --px: 1px; /* pixel step for crisp outline */
}

.hud-label {
    position: fixed;
    bottom: 12px;
    font-family: var(--mc-font);
    font-size: 16px;
    letter-spacing: 0.3px;
    color: #fff;
    user-select: none;
    pointer-events: none;

    /* Pixel-outline (8 directions) + classic drop shadow (down-right) */
    text-shadow:
            var(--px) 0 0 #000,
            calc(-1 * var(--px)) 0 0 #000,
            0 var(--px) 0 #000,
            0 calc(-1 * var(--px)) 0 #000,
            var(--px) var(--px) 0 #000,
            calc(-1 * var(--px)) var(--px) 0 #000,
            var(--px) calc(-1 * var(--px)) 0 #000,
            calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #000,
                /* soft drop for depth */
            calc(2 * var(--px)) calc(2 * var(--px)) 0 rgba(0,0,0,.35);
}

/* Corners */
.hud-left  { left: 14px;  text-align: left;  }
.hud-right { right: 14px; text-align: right; }

/* optional: bump the version a touch brighter */
.hud-label .ver,
.hud-label .ip {
    filter: brightness(1.25);
}

/* Optional: crisper edges (toggle if you prefer smoother AA) */
/*
.hud-label {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeSpeed;
}
*/

/* Tailwind helpers */
.font-mc { font-family: var(--mc-font); }

/* Minecrafty gray button (1.2.5 vibe) */
.mc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    border: 2px solid #000;
    padding: 0.7rem 1.25rem;
    user-select: none;
    transition: filter .12s ease, transform .05s ease, box-shadow .05s ease;
    text-shadow:
            1px 1px 0 #000, -1px 1px 0 #000,
            1px -1px 0 #000, -1px -1px 0 #000;
    box-shadow: 0 4px 0 rgba(0,0,0,.35); /* blocky drop */
}
.mc-btn--green{
    background: linear-gradient(#00b606, #028004);
    box-shadow:
            0 0 0 2px #000 inset,            /* inner rim */
            inset 0 2px 0 rgba(255,255,255,.12),
            inset 0 -2px 0 rgba(0,0,0,.25),
            0 4px 0 rgba(0,0,0,.35);
}
.mc-btn--gray{
    background: linear-gradient(#9a9a9a, #6e6e6e);
    box-shadow:
            0 0 0 2px #000 inset,            /* inner rim */
            inset 0 2px 0 rgba(255,255,255,.12),
            inset 0 -2px 0 rgba(0,0,0,.25),
            0 4px 0 rgba(0,0,0,.35);
}
.mc-btn:hover { filter: brightness(1.06); }
.mc-btn:active {
    transform: translateY(1px);
    box-shadow:
            0 0 0 2px #000 inset,
            inset 0 1px 0 rgba(255,255,255,.10),
            inset 0 -1px 0 rgba(0,0,0,.22),
            0 3px 0 rgba(0,0,0,.35);
}

/* Fixed square button — change --btn to scale everything */
.mc-btn--square {
    --btn: 44px;
    width: var(--btn);
    height: var(--btn);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Float the globe left of the row; always vertical-center without transform */
.mc-btn--lang {
    position: absolute;
    top: 50%;
    margin-top: calc(var(--btn) / -2); /* centers no matter icon */
}

/* Horizontal offset relative to the row (tweak to taste) */
@media (min-width: 768px) {
    .mc-btn--lang { left: -56px; }
}

/* Icon sizing: keep pixel look and fit inside the square */
.mc-btn--lang .mc-icon {
    width: min(32px, calc(var(--btn)));
    height: auto;
    max-height: calc(var(--btn));
    image-rendering: pixelated;
    display: block;
    pointer-events: none;
}

/* optional: keep buttons from stretching too tall on tiny screens */
.menu .mc-btn { min-height: 44px; }

/* Disabled (locked) button */
.mc-btn--disabled{
    filter: grayscale(.45) brightness(.9);
    color: #d7d7d7;
    cursor: not-allowed;
    /* allow click so JS can animate/shake */
    pointer-events: auto;
    background: linear-gradient(#8a8a8a, #5f5f5f);
}

/* Yellow notice button text (faithful MC-ish gold) */
.mc-btn--notice{
    color: #ffd24a; /* gold */
    text-shadow:
            1px 1px 0 #000, -1px 1px 0 #000,
            1px -1px 0 #000, -1px -1px 0 #000,
            0 2px 3px rgba(0,0,0,.55);
}

/* Fun shake for the quit egg */
@media (prefers-reduced-motion: reduce) {
    .mc-egg-shake { animation: none !important; }
}
@keyframes mc-shake {
    0%,100% { transform: translateY(0) }
    20% { transform: translateX(-2px) }
    40% { transform: translateX(2px) }
    60% { transform: translateX(-2px) }
    80% { transform: translateX(2px) }
}
.mc-egg-shake { animation: mc-shake 180ms ease-in-out 2; }

/* Tiny toast for messages */
.mc-toast{
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    padding: .5rem .75rem;
    background: rgba(0,0,0,.75);
    color:#fff; border:2px solid #000;
    font-family: var(--mc-font);
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 4px 0 rgba(0,0,0,.35);
    border-radius: 4px;
    z-index: 50;
}

/* Ensure modal text is white */
.mc-modal, .mc-modal * { color: #fff; }

/* Modal shell */
.mc-modal {
    position: fixed;
    inset: 0;
    z-index: 50;

    /* center horizontally, allow vertical scroll when tall */
    display: flex;
    justify-content: center;
    align-items: flex-start;

    overflow-y: auto;                 /* <-- scroll here */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;

    padding: 24px 0;                  /* breathing room when centered */
}
.mc-modal.hidden { display: none; }
.mc-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
}
.mc-modal__dialog {
    position: relative;
    width: 520px;
    max-width: calc(100% - 24px);
    background: rgba(0,0,0,.85);
    border: 2px solid #2d2d2d;
    box-shadow: 0 6px 18px rgba(0,0,0,.7);
    padding: 16px;

    margin: auto;                     /* center horizontally */
    margin-top: 6vh;                  /* optically centered vertically */
    margin-bottom: 6vh;

    max-height: none;                 /* <-- remove inner cap */
    overflow: visible;                /* <-- no inner scrolling */
}
.mc-modal__hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.mc-x { font-size: 22px; line-height: 1; opacity:.85; }
.mc-x:hover { opacity: 1; }
.mc-note { opacity:.85; font-size: 12px; text-align:center; margin-top: 10px; }

/* Amount picker */
/* Center the amount buttons */
.mc-amt {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.mc-amt__btn {
    padding: 10px 12px; border: 2px solid #2d2d2d; background:#6b6b6b;
    font-family: var(--mc-font);
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.25);
}
.mc-amt__btn.is-active { background:#b59b2a; border-color:#594f17; }

.mc-amt__custom { display:flex; flex-direction:column; gap:6px; }
.mc-amt__custom input {
    width: 120px; padding: 8px; border: 2px solid #2d2d2d; background:#111; color:#fff;
    font-family: var(--mc-font);
}

/* MOTD */
.mc-motd { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.mc-motd input {
    padding: 8px; border: 2px solid #2d2d2d; background:#111; color:#fff; font-family: var(--mc-font);
}
.mc-motd__hint { opacity:.75; font-size: 11px; }

/* Payment form spacing */
.mc-form { display:flex; flex-direction:column; gap:12px; }

#payment-element {
    display: block;
    /*min-height: 140px; !* smooth first paint; Stripe will resize above this *!*/
}