/* Amusement Factory - site styles */

/* local fonts */
@font-face {
    font-family: "Fredoka";
    src: url("../webfonts/fredoka-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("../webfonts/nunito-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 1000;
    font-display: swap;
}

:root {
    --af-sky: #5bc9ff;
    --af-sky-deep: #2fa8e8;
    --af-sky-light: #d7f2ff;
    --af-grass: #7ed957;
    --af-grass-deep: #5cb944;
    --af-sun: #ffc93c;
    --af-coral: #ff6b6b;
    --af-pink: #ff8fb1;
    --af-purple: #9b5de5;
    --af-teal: #00bbf9;
    --af-ink: #1b4965;
    --af-cream: #fffaf0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body {
    font-family: "Nunito", "Segoe UI", sans-serif;
    color: var(--af-ink);
    background: var(--af-cream);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, .navbar-brand, .btn {
    font-family: "Fredoka", "Trebuchet MS", sans-serif;
}

.section-title {
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.section-lead {
    max-width: 620px;
    margin-inline: auto;
    font-size: 1.1rem;
}

/* navbar */
.navbar {
    background: rgba(255, 250, 240, 0.92);
    backdrop-filter: blur(8px);
    transition: box-shadow 0.25s ease;
}

.navbar.is-scrolled {
    box-shadow: 0 6px 24px rgba(27, 73, 101, 0.12);
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--af-ink);
}

.navbar-brand img {
    width: 38px;
    height: 38px;
}

.navbar .nav-link {
    font-weight: 700;
    color: var(--af-ink);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--af-sky-deep);
}

/* buttons */
.btn-sunny {
    background: var(--af-sun);
    color: #6b4b00;
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1.6rem;
    font-weight: 600;
    box-shadow: 0 6px 0 #e0a800;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-sunny:hover {
    background: #ffd45e;
    color: #6b4b00;
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #e0a800;
}

.btn-sunny:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #e0a800;
}

.btn-steam {
    background: #1b2838;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1.6rem;
    font-weight: 600;
    box-shadow: 0 6px 0 #0e1621;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-steam:hover {
    background: #2a3f5f;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #0e1621;
}

.btn-steam:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #0e1621;
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: translateY(-2px);
}

/* hero */
.hero {
    position: relative;
    padding: 9.5rem 0 0;
    background: linear-gradient(180deg, var(--af-sky-deep) 0%, var(--af-sky) 45%, #9be2ff 100%);
    color: #fff;
    overflow: hidden;
}

.hero h1 {
    font-weight: 600;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    text-shadow: 0 4px 0 rgba(27, 73, 101, 0.25);
}

.hero .tagline {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    max-width: 560px;
}

.hero-badge {
    display: inline-block;
    background: var(--af-coral);
    color: #fff;
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    transform: rotate(-2deg);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
}

.hero .platforms {
    font-size: 0.95rem;
    opacity: 0.95;
}

.hero .platforms i {
    font-size: 1.35rem;
    vertical-align: -0.2rem;
}

.hero-screenshot {
    border-radius: 1.25rem;
    border: 6px solid #fff;
    box-shadow: 0 24px 48px rgba(15, 60, 90, 0.35);
    transform: rotate(1.5deg);
}

/* floating decorations */
.float-slow, .float-fast {
    position: absolute;
    pointer-events: none;
}

.float-slow { animation: floaty 7s ease-in-out infinite; }
.float-fast { animation: floaty 5s ease-in-out infinite reverse; }

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

.cloud {
    width: 130px;
    height: 44px;
    background: #fff;
    border-radius: 999px;
    opacity: 0.9;
}

.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 50%;
}

.cloud::before {
    width: 56px;
    height: 56px;
    top: -24px;
    left: 22px;
}

.cloud::after {
    width: 40px;
    height: 40px;
    top: -14px;
    right: 26px;
}

.hero-sun {
    top: 90px;
    right: 8%;
    width: 96px;
    height: 96px;
    background: var(--af-sun);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(255, 217, 59, 0.25), 0 0 0 36px rgba(255, 217, 59, 0.12);
}

.balloon {
    width: 46px;
    height: 58px;
    border-radius: 50% 50% 48% 48%;
}

.balloon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 46px;
    background: rgba(255, 255, 255, 0.7);
}

/* wave dividers */
.wave {
    display: block;
    width: 100%;
    height: 70px;
}

/* feature cards */
.feature-card {
    border: none;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 10px 24px rgba(27, 73, 101, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-6px) rotate(-0.5deg);
    box-shadow: 0 16px 32px rgba(27, 73, 101, 0.14);
}

.feature-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    font-size: 1.7rem;
    color: #fff;
    transform: rotate(-4deg);
}

.bg-sun { background: var(--af-sun); }
.bg-coral { background: var(--af-coral); }
.bg-grass { background: var(--af-grass-deep); }
.bg-purple { background: var(--af-purple); }
.bg-teal { background: var(--af-teal); }
.bg-pink { background: var(--af-pink); }

/* screenshots */
.shot-card {
    border-radius: 1.25rem;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 12px 28px rgba(27, 73, 101, 0.14);
    cursor: pointer;
    transition: transform 0.2s ease;
    display: block;
    padding: 0;
    width: 100%;
}

.shot-card:hover {
    transform: scale(1.02) rotate(0.4deg);
}

.shot-card img {
    display: block;
    width: 100%;
    /* the cards carry width/height attributes to reserve their space, and those act as a
       presentational height - without this a real screenshot is stretched to its own pixel
       height instead of keeping its shape */
    height: auto;
}

/* trailer */
.trailer-frame {
    border-radius: 1.5rem;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 20px 44px rgba(27, 58, 90, 0.3);
    position: relative;
}

.trailer-frame img {
    width: 100%;
    display: block;
}

/* about section */
.about-panel {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 14px 32px rgba(27, 73, 101, 0.1);
}

.about-list i {
    width: 1.6rem;
    color: var(--af-grass-deep);
}

/* platform band */
.platform-band {
    background: linear-gradient(135deg, var(--af-purple), var(--af-teal));
    color: #fff;
}

/* these are <button>s (they open the coming-soon dialog), so the type has to be inherited back off the
   user agent and they need to look pressable */
.platform-chip {
    background: rgba(255, 255, 255, 0.16);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 1.25rem;
    padding: 1.4rem 2.2rem;
    text-align: center;
    min-width: 170px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.platform-chip:hover,
.platform-chip:focus-visible {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.75);
    transform: translateY(-3px);
}

.platform-chip i {
    font-size: 2.4rem;
}

/* footer */
footer {
    background: var(--af-ink);
    color: #cfe8f7;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    color: var(--af-sun);
}

.social-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-size: 1.15rem;
    transition: background 0.15s ease, transform 0.15s ease;
}

.social-btn:hover {
    background: var(--af-coral);
    transform: translateY(-3px);
}

/* "coming soon" modal on the Steam buttons */
.soon-modal {
    border: none;
    border-radius: 1.5rem;
    background: var(--af-cream);
    color: var(--af-ink);
    box-shadow: 0 24px 48px rgba(15, 60, 90, 0.35);
}

.soon-mark {
    width: 76px;
    height: 76px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: #1b2838;
    color: #fff;
    font-size: 2.1rem;
    transform: rotate(-4deg);
}

/* .btn-ghost is drawn for the sky - white on white here, so it gets ink instead */
.soon-ghost, .soon-ghost:hover {
    background: transparent;
    border-color: rgba(27, 73, 101, 0.3);
    color: var(--af-ink);
}

.soon-ghost:hover {
    background: rgba(27, 73, 101, 0.06);
}

/* modal lightbox - a gallery stepped through with the arrows, the keyboard or a swipe */
#screenshotModal .modal-content {
    background: transparent;
    border: none;
}

.shot-viewer {
    position: relative;
    display: flex;
    justify-content: center;
    /* shrink to the picture, so the arrows and the close button hug the shot itself rather
       than the dialog - otherwise they drift away from it whenever the height cap bites */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

#screenshotModal img {
    border-radius: 1rem;
    border: 5px solid #fff;
    /* fit the shot to the window rather than letting it run out of the dialog at its
       natural size, which a real screenshot is far wider than */
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
}

.shot-nav,
.shot-close {
    position: absolute;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--af-ink);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(27, 73, 101, 0.35);
    transition: background 0.2s ease, transform 0.2s ease;
}

.shot-nav {
    top: 50%;
    width: 52px;
    height: 52px;
    font-size: 1.15rem;
    transform: translateY(-50%);
}

.shot-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

.shot-prev { left: 1.25rem; }
.shot-next { right: 1.25rem; }

.shot-close {
    top: 1.25rem;
    right: 1.25rem;
    width: 42px;
    height: 42px;
    font-size: 1rem;
}

.shot-close:hover {
    background: #fff;
    transform: scale(1.08);
}

.shot-caption {
    text-align: center;
    color: #fff;
    font-family: "Fredoka", "Trebuchet MS", sans-serif;
    font-size: 1.1rem;
    margin: 1rem 0 0.15rem;
}

.shot-counter {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

/* on a phone the arrows would sit on top of the picture, so put them under it */
@media (max-width: 575.98px) {
    .shot-nav {
        top: auto;
        bottom: -4.25rem;
        width: 46px;
        height: 46px;
        transform: none;
    }

    .shot-nav:hover { transform: scale(1.08); }

    .shot-prev { left: 25%; }
    .shot-next { right: 25%; }

    .shot-caption { margin-top: 4.75rem; }
}

/* ==========================================================================
   sub pages - rides.html and shops.html
   ========================================================================== */

/* a shorter hero than the front page, same sky */
.page-hero {
    position: relative;
    padding: 8rem 0 0;
    background: linear-gradient(180deg, var(--af-sky-deep) 0%, var(--af-sky) 55%, #9be2ff 100%);
    color: #fff;
    overflow: hidden;
}

/* the clouds and balloons are absolutely positioned siblings of this, and the sub-page heroes are short
   enough that they land on the text rather than beside it - so the copy is lifted above them */
.page-hero .container {
    z-index: 2;
}

.page-hero h1 {
    font-weight: 600;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    text-shadow: 0 4px 0 rgba(27, 73, 101, 0.25);
}

.page-hero .tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 620px;
}

/* White on a white cloud is nothing at all, and the clouds are placed in percentages so which of them
   lands behind this moves with the window - there is no safe spot to put it instead. So it carries its own
   background and stays readable over cloud, sky or balloon alike. */
.page-hero .breadcrumb-back {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    background: rgba(19, 61, 88, 0.42);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    backdrop-filter: blur(2px);
    transition: background 0.15s ease, transform 0.15s ease;
}

.page-hero .breadcrumb-back:hover {
    color: #fff;
    background: rgba(19, 61, 88, 0.62);
    transform: translateX(-2px);
}

/* generic white panel, used for ride cards, shop cards and explainers */
.info-card {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 10px 24px rgba(27, 73, 101, 0.08);
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(27, 73, 101, 0.14);
}

/* the rendered picture at the top of a ride or shop card. Rendered 3:2 (WebsiteShotBuilder), so the
   ratio is declared rather than cropped - object-fit would quietly cut the top off a drop tower. */
.card-shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 1.25rem 1.25rem 0 0;
    background: var(--af-sky-light);
}

.ride-card, .shop-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ride-card > .p-4, .shop-card > .p-4 {
    flex: 1 1 auto;
}

.info-card .card-eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* numbered steps */
.step-num {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-family: "Fredoka", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    transform: rotate(-4deg);
}

/* thrill bands */
.band-pill {
    display: inline-block;
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    white-space: nowrap;
}

.band-gentle { background: var(--af-grass-deep); }
.band-family { background: var(--af-teal); }
.band-thrilling { background: var(--af-sun); color: #6b4b00; }
.band-extreme { background: var(--af-coral); }

/* rating bars on a ride card */
.rating-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.rating-label {
    flex: 0 0 4.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.rating-track {
    flex: 1 1 auto;
    height: 9px;
    border-radius: 999px;
    background: rgba(27, 73, 101, 0.1);
    overflow: hidden;
}

.rating-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.fill-thrill { background: var(--af-coral); }
.fill-family { background: var(--af-teal); }
.fill-scenery { background: var(--af-grass-deep); }
.fill-prestige { background: var(--af-purple); }

.rating-value {
    flex: 0 0 1.6rem;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 800;
}

/* price + tier line at the foot of a card */
.card-foot {
    border-top: 2px dashed rgba(27, 73, 101, 0.12);
    padding-top: 0.75rem;
    margin-top: 0.9rem;
    font-size: 0.9rem;
}

.price-tag {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--af-grass-deep);
}

.tier-tag {
    background: rgba(155, 93, 229, 0.12);
    color: var(--af-purple);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.restful-tag {
    background: rgba(0, 187, 249, 0.14);
    color: #0782ad;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
}

/* filter chips above the ride grid */
.filter-chip {
    border: 2px solid rgba(27, 73, 101, 0.15);
    background: #fff;
    color: var(--af-ink);
    border-radius: 999px;
    padding: 0.45rem 1.15rem;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.filter-chip:hover {
    transform: translateY(-2px);
    border-color: var(--af-sky-deep);
}

.filter-chip.is-active {
    background: var(--af-ink);
    border-color: var(--af-ink);
    color: #fff;
}

/* what one item does to a guest */
.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(27, 73, 101, 0.07);
    white-space: nowrap;
}

.stat-chip i { font-size: 0.75rem; opacity: 0.75; }
.stat-good { background: rgba(126, 217, 87, 0.22); color: #3f7f2c; }
.stat-bad { background: rgba(255, 107, 107, 0.16); color: #b93b3b; }

/* one line of stock inside a shop card */
.stock-item {
    border-top: 2px dashed rgba(27, 73, 101, 0.12);
    padding-top: 0.8rem;
    margin-top: 0.8rem;
}

.stock-item:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.stock-price {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    color: var(--af-grass-deep);
}

.dial-tag {
    background: rgba(255, 201, 60, 0.25);
    color: #8a6200;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

/* the sugar / salt / strength explainer */
.dial-scale {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--af-coral) 0%, var(--af-grass) 50%, var(--af-coral) 100%);
    position: relative;
}

.dial-scale::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    width: 4px;
    height: 22px;
    border-radius: 999px;
    background: var(--af-ink);
    transform: translateX(-50%);
}

/* a soft note panel that is not a card */
.note-panel {
    background: #fff;
    border-left: 6px solid var(--af-sun);
    border-radius: 0 1rem 1rem 0;
    box-shadow: 0 8px 20px rgba(27, 73, 101, 0.07);
}

/* ==========================================================================
   other games from the developer - deliberately quiet
   ==========================================================================
   This sits between the platform band (the real call to action) and the footer, so it must not compete
   with it: no gradient, no pill buttons, no full-size section title. Cream on cream, a hairline card and
   a text link. */

.other-games {
    border-top: 2px dashed rgba(27, 73, 101, 0.14);
}

.other-games .other-title {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 1.15rem;
    color: rgba(27, 73, 101, 0.75);
}

.game-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;   /* on a narrow screen the url drops below the title rather than squeezing it */
    gap: 1rem;
    background: #fff;
    border: 2px solid rgba(27, 73, 101, 0.1);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--af-ink);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.game-card:hover {
    border-color: var(--af-sky-deep);
    color: var(--af-ink);
    transform: translateY(-2px);
}

/* a flex item will not shrink below its own content unless told to, so the title line can wrap instead
   of pushing the card wide */
.game-card .flex-grow-1 {
    min-width: 0;
}

.game-card .game-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(155, 93, 229, 0.12);
    color: var(--af-purple);
    font-size: 1.1rem;
}

/* the genre, sitting on the same line as the title. Lighter and quieter than the name so the two read as
   two things rather than one long sentence - which is all the separation they need, with no punctuation
   between them. */
.game-card .game-genre {
    font-weight: 400;
    color: rgba(27, 73, 101, 0.7);
}

.game-card .game-when {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(27, 73, 101, 0.6);
}

/* small tables of raw numbers */
.af-table {
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(27, 73, 101, 0.08);
}

.af-table table {
    margin: 0;
    color: var(--af-ink);
}

.af-table thead th {
    background: var(--af-ink);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    border: none;
    white-space: nowrap;
}

/* Roomier than Bootstrap's default (and than .table-sm, which the number tables use to keep their type
   small). These hold a handful of short rows and are read a line at a time, so they want air. */
.af-table td, .af-table th {
    vertical-align: middle;
    padding: 0.85rem 1.25rem;
}

.af-table thead th {
    padding-top: 1rem;
    padding-bottom: 1rem;
}