/* ══════════════════════════════════════════════════════════════════════
   css/back-to-top.css — "Level Complete" back-to-top screen (footer.php)
   A retro arcade screen above the footer on every page: pixel stars,
   scanlines, an XP bar that tracks scroll progress, and a big red arcade
   button that launches a rocket and flies the page back to the top.
   Behaviour: js/back-to-top.js.
   ══════════════════════════════════════════════════════════════════════ */

.b2t {
    --b2t-bg: #10131a;
    --b2t-red: #ff4f64;
    --b2t-red-dk: #c9243b;
    --b2t-yellow: #ffcb52;
    --b2t-teal: #6ccfd3;
    --b2t-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    max-width: 1480px;
    margin: 4px auto 4px;
    padding: 0 24px;
}
.b2t[hidden] { display: none; }

.b2t__screen {
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 20px 28px;
    padding: 22px 28px;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 79, 100, .28) 0%, rgba(255, 79, 100, 0) 45%),
        radial-gradient(90% 120% at 0% 100%, rgba(108, 207, 211, .18) 0%, rgba(108, 207, 211, 0) 50%),
        var(--b2t-bg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 40px -18px rgba(16, 19, 26, .6);
}
/* CRT scanlines + pixel grid */
.b2t__screen::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 24px);
}

/* Twinkling pixel stars */
.b2t__stars i {
    position: absolute; width: 4px; height: 4px; background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, .8);
    animation: b2t-twinkle 2.4s steps(2, jump-none) infinite;
}
.b2t__stars i:nth-child(1) { left: 8%;  top: 22%; }
.b2t__stars i:nth-child(2) { left: 31%; top: 78%; animation-delay: -.6s; background: var(--b2t-yellow); }
.b2t__stars i:nth-child(3) { left: 52%; top: 18%; animation-delay: -1.2s; }
.b2t__stars i:nth-child(4) { left: 64%; top: 70%; animation-delay: -1.8s; background: var(--b2t-teal); }
.b2t__stars i:nth-child(5) { left: 79%; top: 30%; animation-delay: -.3s; }
.b2t__stars i:nth-child(6) { left: 91%; top: 82%; animation-delay: -1.5s; background: var(--b2t-red); }

.b2t__text { position: relative; min-width: 0; flex: 1 1 320px; }
.b2t__eyebrow {
    display: inline-block;
    font-family: var(--b2t-mono);
    font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
    color: var(--b2t-yellow);
    text-shadow: 2px 2px 0 rgba(255, 79, 100, .55);
}
.b2t__title {
    display: block; margin: 4px 0 12px;
    font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -.01em;
}

/* XP bar = scroll progress */
.b2t__xp { display: flex; align-items: center; gap: 10px; max-width: 460px; }
.b2t__xp-label, .b2t__xp-num {
    font-family: var(--b2t-mono); font-size: 12px; font-weight: 800; letter-spacing: .08em;
}
.b2t__xp-label { color: var(--b2t-teal); }
.b2t__xp-num { min-width: 42px; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.b2t__xp-bar {
    position: relative; flex: 1; height: 14px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14);
    overflow: hidden;
}
.b2t__xp-fill {
    position: absolute; inset: 2px auto 2px 2px;
    width: 0; max-width: calc(100% - 4px);
    border-radius: 2px;
    /* segmented "health bar" look */
    background:
        repeating-linear-gradient(90deg, transparent 0 10px, rgba(16, 19, 26, .55) 10px 12px),
        linear-gradient(90deg, var(--b2t-teal), var(--b2t-yellow) 60%, var(--b2t-red));
    transition: width .15s linear;
}
.b2t.is-max .b2t__xp-fill { animation: b2t-glow 1.2s ease-in-out infinite; }

/* Arcade button */
.b2t__controls { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.b2t__btn {
    position: relative;
    width: 84px; height: 84px; padding: 0;
    border: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #3a3f55 0%, #1c1f2b 70%);
    box-shadow: 0 0 0 4px #2a2e3f, 0 10px 24px -6px rgba(0, 0, 0, .6);
    cursor: pointer;
}
.b2t__btn-cap {
    position: absolute; left: 9px; right: 9px; top: 6px; bottom: 12px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle at 40% 30%, #ff8494 0%, var(--b2t-red) 45%, var(--b2t-red-dk) 100%);
    box-shadow: 0 6px 0 var(--b2t-red-dk), inset 0 -4px 8px rgba(0, 0, 0, .2), inset 0 4px 6px rgba(255, 255, 255, .35);
    transition: transform .08s ease, box-shadow .08s ease;
}
.b2t__btn:hover .b2t__btn-cap svg { animation: b2t-bob .7s ease-in-out infinite; }
.b2t__btn:active .b2t__btn-cap,
.b2t.is-launch .b2t__btn-cap {
    transform: translateY(5px);
    box-shadow: 0 1px 0 var(--b2t-red-dk), inset 0 -3px 6px rgba(0, 0, 0, .25), inset 0 3px 5px rgba(255, 255, 255, .3);
}
.b2t__btn:focus-visible { outline: 3px solid var(--b2t-yellow); outline-offset: 4px; }
/* Pulse ring to invite a press */
.b2t__btn::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 79, 100, .55);
    animation: b2t-ring 2.2s ease-out infinite;
    pointer-events: none;
}
.b2t__press {
    font-family: var(--b2t-mono);
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    animation: b2t-blink 1.1s steps(2, jump-none) infinite;
    white-space: nowrap;
}
.b2t__press b { color: var(--b2t-yellow); }

/* Rocket: waits behind the button, launches on press */
.b2t__rocket {
    position: absolute;
    right: calc(28px + 20px);
    bottom: 34px;
    z-index: 2;
    opacity: 0;
    transform: translateY(0) scale(.6);
    pointer-events: none;
}
.b2t.is-launch .b2t__rocket { animation: b2t-launch .9s cubic-bezier(.5, 0, .75, .3) forwards; }
.b2t__flame { transform-origin: 32px 40px; animation: b2t-flame .12s ease-in-out infinite alternate; }

/* "+1 UP" coins spawned by js/back-to-top.js */
.b2t__coin {
    position: absolute; z-index: 3; pointer-events: none;
    font-family: var(--b2t-mono); font-size: 13px; font-weight: 900;
    color: var(--b2t-yellow); text-shadow: 2px 2px 0 var(--b2t-red-dk);
    animation: b2t-coin .8s ease-out forwards;
}

@keyframes b2t-twinkle { 0% { opacity: .15; } 100% { opacity: 1; } }
@keyframes b2t-blink   { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes b2t-bob     { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
@keyframes b2t-ring    { 0% { box-shadow: 0 0 0 0 rgba(255, 79, 100, .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 79, 100, 0); } }
@keyframes b2t-glow    { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes b2t-flame   { from { transform: scaleY(.8); } to { transform: scaleY(1.15); } }
@keyframes b2t-launch {
    0%   { opacity: 1; transform: translateY(0) scale(.7); }
    15%  { opacity: 1; transform: translateY(6px) scale(.8); }
    100% { opacity: 1; transform: translateY(-110vh) scale(1.1); }
}
@keyframes b2t-coin {
    0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 0px), -70px) scale(1.1); }
}

/* Hidden while the game page is in (faux) fullscreen */
body.faux-fs .b2t { display: none !important; }

@media (max-width: 720px) {
    .b2t { padding: 0 12px; margin: 8px auto 6px; }
    .b2t__screen { padding: 18px; gap: 16px; border-radius: 18px; }
    .b2t__btn { width: 72px; height: 72px; }
    .b2t__rocket { right: 34px; }
}
@media (max-width: 520px) {
    .b2t__screen { flex-direction: column; align-items: stretch; text-align: center; }
    .b2t__text { flex: none; }        /* the 320px basis would become a height here */
    .b2t__xp { margin: 0 auto; }
    .b2t__controls { align-self: center; }
    .b2t__rocket { right: 50%; margin-right: -22px; }
}

/* ── BUTTON-ONLY VERSION (footer.php .b2t--button-only) ──────────────
   Just the red arcade button, aligned right above the footer — no dark
   screen, texts or XP bar. The rocket + "+1 UP" coins still fire on press. */
.b2t--button-only { margin: 4px auto 4px !important; }
.b2t--button-only .b2t__screen {
    justify-content: flex-end;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.b2t--button-only .b2t__screen::before { display: none; }
.b2t--button-only .b2t__btn { width: 64px; height: 64px; }
.b2t--button-only .b2t__btn-cap { left: 7px; right: 7px; top: 5px; bottom: 10px; }
.b2t--button-only .b2t__btn-cap svg { width: 24px; height: 24px; }
/* Rocket sits (hidden) right behind the button, centred on it, and lifts
   off straight up from there when pressed. */
.b2t--button-only .b2t__rocket {
    left: 50%; right: auto;
    bottom: 16px;
    margin-left: -22px;          /* half the 44px rocket → centred */
    z-index: 0;                  /* behind the button cap until it rises */
}
.b2t--button-only .b2t__btn { z-index: 1; }

/* Banner ad with the button right BESIDE it, the pair centred on the page.
   A 24px gap is kept between them (never touching — AdSense treats ads
   pressed against clickable controls as inviting accidental clicks). */
.b2t--button-only .b2t__screen { justify-content: center; align-items: center; gap: 24px; }
.b2t__ad { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; }
.b2t__ad .adbox,
.b2t__ad .ad-slot {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
.b2t__ad .ad-slot__label {
    margin: 0 auto 2px !important;
    font-size: 10px;
    line-height: 1.2;
}
/* 'slim' banner (render_ad): reserve a banner-height box */
.b2t__ad .adbox--slim ins,
.b2t__ad .ad-slot__actual ins.adsbygoogle {
    margin: 0 auto !important;
    min-height: 90px;
}
@media (max-width: 760px) {
    .b2t__ad .adbox--slim ins,
    .b2t__ad .ad-slot__actual ins.adsbygoogle { min-height: 100px; }
}

@media (max-width: 720px) {
    /* Phones: the ad gets its own line, the button sits below-right,
       20px away — no thumb can hit one while aiming at the other. */
    .b2t--button-only .b2t__screen { flex-direction: column; align-items: stretch; gap: 20px; }
    .b2t__ad { flex: none; max-width: none; }   /* the 760px basis would become a height here */
    .b2t--button-only .b2t__controls { align-self: flex-end; }
}
@media (max-width: 520px) {
    .b2t--button-only .b2t__rocket { left: 50%; right: auto; margin-right: 0; }
    .b2t--button-only .b2t__btn { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .b2t__stars i, .b2t__press, .b2t__btn::after, .b2t.is-max .b2t__xp-fill,
    .b2t__btn:hover .b2t__btn-cap svg, .b2t__flame { animation: none !important; }
    .b2t.is-launch .b2t__rocket { animation: none; }
    .b2t__xp-fill, .b2t__btn-cap { transition: none; }
}