/* ==================================================================
   RbxVault — shared stylesheet
   Mobile-first. Every page is a single 400px-max centred column
   sitting on a fixed, full-bleed grid backdrop.

   Layout geometry is deliberately unchanged from the previous build:
   the column width, tile grid, breakpoints and spacing are identical.
   What changed is the typeface, the palette and the motion layer.
   ================================================================== */

/* ---------- 0. Typeface ----------
   One self-hosted variable file covers 300-700, so the whole site
   needs a single 32KB request and no third-party DNS + TLS handshake.
   swap paints text immediately in the fallback and restyles on load,
   which keeps first contentful paint off the font's critical path. */

@font-face {
    font-family: "Outfit";
    src: url("../assets/fonts/outfit-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    /* Latin subset only — matches the shipped file, and stops the
       browser attempting the face for glyphs it does not contain. */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Reset & tokens ---------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Inheriting is cheaper than re-resolving a font stack on every
       node, and it still reaches inputs and buttons, which otherwise
       keep the user-agent face. */
    font-family: inherit;
    text-decoration: none;
}

::-webkit-scrollbar {
    display: none;
}

:root {
    /* surfaces */
    --page-bg: #000000;
    --column-bg: #0e0d14;
    --card-bg: #1a1a22;
    --panel-bg: #24232e;
    --popup-bg: #22212b;

    /* text */
    --text-color: #8b8b99;
    --text-on-dark: #ffffff;
    --text-muted: #ffffffab;
    --text-faint: #ffffffa3;

    /* brand — amber vault gold against a violet secondary */
    --accent: #ffb020;
    --accent-soft: #ff8a3d;
    --accent-ghost: #ff8a3d78;
    --accent-warm: #ffc45c;
    --accent-hot: #ff7a1a;
    --accent-hot-hover: #e56405;
    --accent-alt: #7c5cff;

    /* geometry — unchanged */
    --rounded: 15px;
    --btn-rounded: 393px;
    --tile-rounded: 25px;
    --border-color: #e5e7eb;
    --panel-border: #e5e7eb9c;

    /* elevation */
    --div-boxShadow: rgba(0, 0, 0, 0.25) 0px 12px 22px -12px;
    --img-boxShadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    /* column */
    --column-max: 400px;
    --inner-width: 370px;

    /* motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: var(--page-bg);
}

img,
video {
    height: auto;
    max-width: 100%;
}

/* Visible to a screen reader, not to the eye. Used for input labels
   where the visible design relies on a placeholder alone. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Anything focused by keyboard gets a visible ring. The site is one
   long list of tappable tiles, so without this it is impossible to
   tell where you are. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- 2. Page shell ---------- */

/* The backdrop framing the column. Only desktop sees it — below 500px
   the column fills the viewport — so it is drawn entirely in CSS
   rather than loaded as an image: original artwork, and one fewer
   request on the mobile path where it is never even visible.

   Two brand-tinted glows over a fine engraved grid, on near-black. */
main {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    background-color: var(--page-bg);
    background-image:
        radial-gradient(ellipse 60% 50% at 12% 8%, rgba(255, 176, 32, 0.13), transparent 60%),
        radial-gradient(ellipse 55% 45% at 88% 82%, rgba(124, 92, 255, 0.13), transparent 60%),
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 138, 61, 0.05), transparent 70%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.030) 0 1px, transparent 1px 68px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.030) 0 1px, transparent 1px 68px);
    background-position: center center;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    background-attachment: fixed;
    background-size: cover, cover, cover, 68px 68px, 68px 68px;
    overflow-x: hidden;
}

.main_div {
    max-width: var(--column-max);
    width: 100%;
    height: 100%;
    margin: 3px;
    position: relative;
    background-color: var(--column-bg);
    color: var(--text-color);
    text-wrap: nowrap;
    gap: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.fff_game_section {
    text-align: center;
    width: 100%;
}

/* ---------- 3. Header ---------- */

/* The title is centred on the COLUMN, not on the space left over after
   the back button. The button used to sit in the flex flow, so its
   40px plus 40px of margins pushed the heading 95px to the right —
   most obvious on the hub, where the button is only visibility:hidden
   and therefore still occupies its slot. Taking it out of the flow and
   pinning it left lets the heading centre properly on every page. */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 40px;
    /* Keeps a long centred title clear of the pinned button. */
    padding: 0 68px;
    /* Same viewport-fit=cover consequence as the footer, at the other
       end: without the inset the title sits under the notch. */
    margin-top: calc(20px + env(safe-area-inset-top, 0px));
}

.back-button,
.home-back-button {
    position: absolute;
    left: 20px;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: 0;
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform 0.18s var(--ease-out);
}

.back-button:active {
    transform: translateY(-50%) translateX(-3px) scale(0.94);
}

/* The home screen keeps the back button's footprint but hides it,
   so the title stays optically aligned with every other page. */
.home-back-button {
    visibility: hidden;
}

.home-title {
    font-size: 20px;
    margin-left: 0;
    color: var(--text-on-dark);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
    /* The column sets text-wrap:nowrap, so a longer heading would be
       clipped rather than wrapped inside the narrower centred slot. */
    text-wrap: wrap;
    white-space: normal;
    line-height: 1.25;
}

.title {
    font-size: 26px;
    margin-left: 15px;
    color: var(--accent);
}

/* ---------- 4. Ad slots ---------- */

/* Ad slots run the full width of the mobile column — edge to edge,
   with no horizontal inset — so a responsive unit gets the widest
   canvas the viewport allows. Wider slots earn materially better
   creatives and higher rates than an inset one. */
.gadsbanner {
    margin-top: 16px;
    width: 100%;
}

.ad-slot {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    /* Deliberately NO min-height. data-ad-format="auto" plus
       data-full-width-responsive sizes the unit to whatever creative
       fills it, and an unfilled slot collapses to nothing rather than
       leaving a hole in the page. */
    text-align: center;
    overflow: hidden;
}

.ad-slot .adsbygoogle {
    display: block;
    width: 100%;
}

/* No creative and no publisher ID means no box: the slot takes up no
   room at all rather than reserving empty space. */
.ad-placeholder {
    display: none;
}

/* ---------- 5. Coin bar ---------- */

.resp_play_btn,
.resp_choose_game,
.resp_more_game,
.resp_about_section,
.resp_footer {
    display: flex;
    justify-content: center;
}

.resp_choose_game {
    margin-bottom: 4px;
}

.choose_game {
    margin: 12px 16px 0 16px;
    padding: 16px;
    width: var(--inner-width);
    border-radius: var(--rounded);
    border: 1px solid var(--panel-border);
}

.redeem-coin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#coin {
    font-weight: 600;
    color: var(--text-on-dark);
    display: inline-block;
    min-width: 1.5em;
    font-variant-numeric: tabular-nums;
}

/* Pulses when the balance changes, so a coin grant is felt. */
.coin-pop {
    animation: coinPop 0.55s var(--ease-out);
}

@keyframes coinPop {
    0% { transform: scale(1); color: var(--text-on-dark); }
    35% { transform: scale(1.32); color: var(--accent); }
    100% { transform: scale(1); color: var(--text-on-dark); }
}

.earn-coin-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
}

.earn-coin-btn button {
    cursor: pointer;
    background: var(--accent-ghost);
    color: #fff;
    border: none;
    height: 42px;
    width: 100%;
    padding: 10px 0;
    border-radius: var(--btn-rounded);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.15s var(--ease-out), filter 0.15s ease;
}

.earn-coin-btn button:active {
    transform: scale(0.97);
}

.earn-coin-btn button:disabled {
    cursor: progress;
    filter: saturate(0.5);
}

.earn-coin-btn button img {
    width: 24px;
    height: 24px;
}

/* Slow breathing glow so the primary revenue CTA stays noticeable
   without flashing. */
.earn-coin-btn button:not(:disabled) {
    animation: ctaGlow 3.2s ease-in-out infinite;
}

@keyframes ctaGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0); }
    50% { box-shadow: 0 0 18px 2px rgba(255, 138, 61, 0.35); }
}

.ad-tag-earn {
    position: absolute;
    top: 0;
    right: -10px;
    color: var(--text-on-dark);
    font-size: 10px;
    letter-spacing: 0;
    text-transform: capitalize;
}

/* Shimmer sweep shared by the coin button and the popup CTA. */
.earn-coin-btn button::before,
.earn-coin-btn button::after,
.watch-btn::before,
.watch-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 10%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: shimmer 2s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes shimmer {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

/* Inline spinner for buttons awaiting an ad. */
.btn-spinner {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid #ffffff59;
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -2px;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- 6. Tile grid ---------- */

.game_section {
    margin: 16px 16px 0 16px;
    border-radius: var(--rounded);
}

.game_section1 {
    padding: 4px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    justify-items: center;
}

.game_section2 {
    border-radius: var(--tile-rounded);
    background-color: transparent;
    box-shadow: var(--div-boxShadow);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}

.game_section2:active {
    transform: scale(0.96);
}

@media (hover: hover) {
    .game_section2:hover {
        transform: translateY(-4px);
        box-shadow: rgba(0, 0, 0, 0.45) 0px 18px 26px -14px;
    }
}

.game_section3 {
    overflow: hidden;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}

.game_section4 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
}

.game_section_img {
    width: 100%;
    height: unset;
    border-top-left-radius: var(--tile-rounded);
    border-top-right-radius: var(--tile-rounded);
}

/* A link waiting on its ad dims, so a tap always has feedback even
   when the placement takes a moment to open. */
.is-navigating {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* ---------- 7. Full-width banners ---------- */

.homeimage {
    width: 100%;
    border-radius: 10px;
    box-shadow: var(--img-boxShadow);
    transition: transform 0.2s var(--ease-out);
}

.homeimage:active {
    transform: scale(0.985);
}

.rbximage {
    width: 75%;
    border-radius: 10px;
    box-shadow: var(--img-boxShadow);
}

.animesec {
    margin-bottom: 10px;
}

/* ---------- 8. Calculators ---------- */

.input-field {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    /* 16px is the threshold below which iOS Safari zooms the viewport
       on focus, which visibly breaks the fixed mobile column. */
    font-size: 16px;
    background: #fff;
    color: #14131a;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.input-field::placeholder {
    color: #9a9aa5;
}

.input-field:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.25);
}

/* The number spinners are pure clutter on a numeric-only field and
   make the control narrower than it looks on desktop. */
.input-field::-webkit-outer-spin-button,
.input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-field[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.continue-btn {
    width: 100%;
    background-color: var(--accent);
    color: #241a00;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform 0.15s var(--ease-out), filter 0.15s ease;
}

.continue-btn:active {
    transform: scale(0.98);
    filter: brightness(0.94);
}

/* Result panel stays hidden until a calculation succeeds. */
#rbxbuilder {
    display: none;
    padding: 20px;
    color: var(--text-on-dark);
}

/* Same nowrap trap as #final-value — the caption is a full sentence. */
#rbxbuilder,
#rbxbuilder div,
.h1scratch,
.reward-box p,
.dialog-box h2 {
    text-wrap: wrap;
    white-space: normal;
    overflow-wrap: break-word;
}

#rbxbuilder.is-visible {
    display: block;
    animation: resultIn 0.4s var(--ease-out);
}

@keyframes resultIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.rbxresult {
    margin-top: 10px;
    color: var(--accent);
    font-weight: bold;
    font-size: 25px;
    font-variant-numeric: tabular-nums;
}

/* ---------- 9. Spin wheel ---------- */

.wheel-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    /* Leaves room for the pointer, which overhangs the right edge. */
    margin: 0 32px;
}

.wheel-wrap canvas {
    display: block;
}

/* Equal width and height so the hub is a true circle. It was 24% wide
   by 11% tall — an ellipse roughly 70x32px, which the 1.8em label
   overflowed on both sides. */
#spin-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 26%;
    width: 26%;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #ffffffcc;
    background: radial-gradient(#fdcf3b 45%, #d88a40 90%);
    color: #8a4a08;
    text-transform: uppercase;
    /* Scales with the wheel, so the label fits the hub at every
       viewport instead of only at the size it was authored for. */
    font-size: clamp(11px, 4.2vw, 17px);
    letter-spacing: 0.06em;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s var(--ease-out);
}

#spin-btn:active:not(:disabled) {
    transform: translate(-50%, -50%) scale(0.92);
}

#spin-btn:disabled {
    cursor: default;
    filter: saturate(0.6);
}

/* Pointer sits at the wheel's right edge, tip aimed inward at the
   segment that decides the result. */
.imgspin {
    position: absolute;
    width: 4em;
    top: 50%;
    right: -28px;
    transform: translateY(-50%);
    transform-origin: 20% 50%;
}

/* Ticks as each segment passes, driven from the spin loop. */
.imgspin.tick {
    animation: pointerTick 0.09s ease-out;
}

@keyframes pointerTick {
    0% { transform: translateY(-50%) rotate(0deg); }
    50% { transform: translateY(-50%) rotate(-13deg); }
    100% { transform: translateY(-50%) rotate(0deg); }
}

/* .main_div sets text-wrap:nowrap for the whole column, and main
   clips overflow-x — so a long result line was silently cut off at
   BOTH edges instead of wrapping. Every block that holds a full
   sentence has to opt back in. */
#final-value {
    font-size: 1.5em;
    text-align: center;
    margin-top: 1.5em;
    padding: 0 16px;
    color: var(--text-on-dark);
    font-weight: 500;
    min-height: 2.4em;
    text-wrap: wrap;
    white-space: normal;
    overflow-wrap: break-word;
}

#final-value .win {
    color: var(--accent);
    font-weight: 700;
    animation: popUp 0.45s var(--ease-out);
    display: inline-block;
}

/* ---------- 10. Scratch card ---------- */

.h1scratch {
    font-size: 2.3rem;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.scratchCanvas {
    background: radial-gradient(circle, #cccccc, #999999);
    border-radius: var(--rounded);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.2s;
    touch-action: none;
    max-width: 100%;
}

@media (hover: hover) {
    .scratchCanvas:hover {
        transform: scale(1.05);
    }
}

.scratch-hint {
    margin-top: 12px;
    font-size: 14px;
    color: #ffffffc4;
    text-wrap: wrap;
    animation: hintPulse 2.4s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

#newCardBtn {
    width: auto;
    min-width: 200px;
    margin-top: 18px;
    padding: 12px 24px;
    font-size: 16px;
}

#reward {
    margin: 20px 0 10px 0;
}

.reward-box {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 20px;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    animation: popUp 0.5s ease-in-out;
}

.reward-box p {
    font-size: 1.5rem;
    color: #2e9e4f;
    margin-bottom: 10px;
}

.reward-box h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #ff5722;
}

@keyframes popUp {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---------- 11. Meme cards ---------- */

.meme-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    border: 1px solid #ffffff0f;
    transition: border-color 0.2s ease, transform 0.2s var(--ease-out);
}

@media (hover: hover) {
    .meme-card:hover {
        border-color: #ffffff24;
        transform: translateY(-2px);
    }
}

.meme-text {
    flex: 1;
    min-width: 0;
}

.meme-card h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    text-align: left;
    white-space: normal;
    color: var(--text-on-dark);
    font-weight: 600;
}

.meme-card p {
    margin: 0;
    font-size: 14px;
    color: #c9c9d4;
    text-align: left;
    word-wrap: break-word;
    white-space: normal;
}

.copy-btn {
    background: var(--accent-hot);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 74px;
    transition: background 0.18s ease, transform 0.15s var(--ease-out);
}

.copy-btn:hover {
    background: var(--accent-hot-hover);
}

.copy-btn:active {
    transform: scale(0.94);
}

.copy-btn.is-copied {
    background: #2e9e4f;
}

/* ---------- 12. Skin detail ---------- */

.contentButton {
    font-size: 15px;
    color: var(--accent-warm);
    padding: 20px;
    background-color: var(--panel-bg);
    box-shadow: var(--img-boxShadow);
    border-radius: 10px;
    margin: 10px 10px 5px 10px;
}

.countryP {
    font-size: 17px;
    color: var(--text-on-dark);
    text-wrap: wrap;
    margin: 10px 0;
}

.imgActivate {
    cursor: pointer;
    transition: transform 0.18s var(--ease-out);
}

.imgActivate:active {
    transform: scale(0.96);
}

.dialog-button {
    width: 100%;
    cursor: pointer;
}

.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.hidden {
    display: none;
}

.dialog-box {
    background: #fff;
    border-radius: var(--rounded);
    padding: 20px;
    text-align: center;
    width: 300px;
    max-width: 90vw;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    animation: popUp 0.28s var(--ease-out);
}

.dialog-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

.dialog-box h2 {
    margin: 10px 0;
    font-size: 20px;
    font-weight: bold;
    color: #14131a;
}

.dialog-box .countryP {
    color: #555;
    font-size: 16px;
    margin: 10px 0 20px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- 13. Toasts ---------- */

.toast-message,
.timer-toast-message {
    display: none;
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    color: #14131a;
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 24px #00000040;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
    z-index: 9999;
    max-width: 90vw;
    width: max-content;
    white-space: nowrap;
    text-wrap: wrap;
    text-align: center;
    align-items: center;
    gap: 6px;
    /* A toast must never intercept a tap meant for the page beneath
       it. It is a fixed bar across the top of a mobile viewport, so
       while it was fading it was silently eating taps on whatever it
       covered. */
    pointer-events: none;
}

.toast-message.show,
.timer-toast-message.show {
    display: flex;
    animation: toastIn 0.28s var(--ease-out), fadeOut 3s forwards;
}

.timer-toast-message.show {
    animation: toastIn 0.28s var(--ease-out);
}

.toast-icon {
    flex-shrink: 0;
}

.toast-cross {
    color: #d43b3b;
    font-weight: 700;
}

@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, -14px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes fadeOut {

    0%,
    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ---------- 14. Not-enough-coins popup ---------- */

.popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

.popup.is-closing {
    animation: fadeIn 0.18s ease reverse forwards;
}

.popup-data {
    background: var(--popup-bg);
    padding: 20px;
    border-radius: var(--rounded);
    text-align: center;
    max-width: 370px;
    width: 90%;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: popUp 0.3s var(--ease-out);
}

/* The mascot overhangs the top edge of the card. */
.popup-data .oops-img {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: auto;
}

.popup-data .main-text {
    font-weight: bold;
    font-size: 16px;
    color: var(--text-on-dark);
    margin: 50px 0 10px;
    text-wrap: wrap;
}

.popup-data .sub-text {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
    text-wrap: wrap;
}

.watch-btn-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.watch-btn {
    background: var(--accent-soft);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: var(--btn-rounded);
    width: 100%;
    height: 42px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.15s var(--ease-out);
}

.watch-btn:active {
    transform: scale(0.97);
}

.watch-btn:disabled {
    cursor: progress;
}

.ad-tag {
    position: absolute;
    top: 0;
    right: -15px;
    color: #e3e3e3;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: capitalize;
}

.popup-data .skip-btn {
    background: none;
    border: none;
    color: var(--text-faint);
    width: fit-content;
    margin: 8px auto 0;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}

/* ---------- 15. Long-form copy ---------- */

.about_section {
    margin-top: 40px;
    width: 316px;
}

.about_section h1,
.about_section h2 {
    margin: 10px 0;
    font-size: 22px;
    text-align: left;
    text-wrap: wrap;
    color: var(--text-on-dark);
    font-weight: 600;
}

.about_section h2 {
    font-size: 19px;
}

.about_section p,
.about_section ul {
    text-wrap: wrap;
    text-align: left;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.55;
}

.about_section ul {
    padding-left: 10px;
}

.about_section li {
    margin-bottom: 4px;
}

.about_section a {
    color: var(--accent-warm);
    word-break: break-all;
    text-decoration: underline;
}

/* ---------- 15b. Footer ----------
   AdSense review expects a reachable privacy policy, contact route and
   disclaimer from every page. */

.site-footer {
    margin-top: 40px;
    /* viewport-fit=cover lets the page run under the home indicator on
       a notched phone, which clipped the last line of this block. The
       safe-area inset gives that hardware its space back; the 34px
       floor keeps a comfortable gap on devices that report zero. */
    padding: 20px 16px calc(34px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #ffffff14;
    width: 100%;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.site-footer a {
    color: var(--text-color);
    font-size: 14px;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--accent);
}

.site-footer p {
    color: #6d6d7a;
    font-size: 12px;
    text-wrap: wrap;
    line-height: 1.55;
}

.site-footer p + p {
    margin-top: 8px;
}

/* ---------- 16. Entrance & reveal animation ---------- */

@keyframes bounceBottomToTop {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    50% {
        transform: translateY(-10px);
        opacity: 1;
    }

    70% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}

.anima {
    animation: bounceBottomToTop 1s ease-in-out forwards;
}

/* Applied by app.js only when motion is allowed and
   IntersectionObserver exists, so the un-enhanced state is simply
   "visible" and content can never be stranded invisible. */
.reveal {
    opacity: 0;
    transform: translateY(16px);
}

.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s var(--ease-out) var(--reveal-delay, 0ms),
                transform 0.5s var(--ease-out) var(--reveal-delay, 0ms);
}

/* One global off switch for every decorative animation on the site. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ==================================================================
   17. Responsive
   The column is fluid below 500px; tiles go half-width at 500px and
   full-width at 420px, where the grid becomes effectively single-file
   inside a narrower viewport. Breakpoints unchanged.
   ================================================================== */

@media (max-width: 500px) {
    .main_div {
        min-width: 100%;
        width: 100%;
        padding: 0;
    }

    .game_section2 {
        width: 180px;
    }
}

@media (max-width: 500px) and (min-width: 420px) {
    .game_section1 {
        width: fit-content;
        margin: 0 auto;
    }
}

@media (max-width: 450px) {
    .game_section {
        border: none;
        padding: 0;
    }
}

@media (max-width: 420px) {

    .game_section2,
    .choose_game {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .about_section {
        padding: 0 16px 16px 16px;
    }
}

@media (max-width: 346px) {
    .game_section1 {
        gap: 0.5rem;
    }

    .h1scratch {
        font-size: 1.9rem;
    }
}

@media (max-width: 280px) {
    .game_section {
        margin: 16px 12px 0 12px;
    }
}