@font-face {
    font-family: 'Match 8h';
    src: url('offline-assets/fonts/Match8h.woff2') format('woff2'),
         url('offline-assets/fonts/Match8h.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --scale: 1;
    --stroke: calc(7px * var(--scale));
    --title-stroke: calc(9px * var(--scale));
    --stroke-color: #000;
    --title-size: clamp(calc(1.9rem * var(--scale)), calc(4vw * var(--scale)), calc(4.25rem * var(--scale)));
    --message-size: clamp(calc(1.2rem * var(--scale)), calc(2.2vw * var(--scale)), calc(2.4rem * var(--scale)));
    --subtitle-size: clamp(calc(1.05rem * var(--scale)), calc(1.55vw * var(--scale)), calc(1.65rem * var(--scale)));
    --logo-width: clamp(calc(220px * var(--scale)), calc(18vw * var(--scale)), calc(360px * var(--scale)));
    --status-size: clamp(calc(1.3rem * var(--scale)), calc(2.4vw * var(--scale)), calc(2.4rem * var(--scale)));
    --cta-width: min(calc(340px * var(--scale)), calc(20vw * var(--scale)));
    --frame-pad-y: clamp(calc(2.5rem * var(--scale)), calc(4.5vw * var(--scale)), calc(4.5rem * var(--scale)));
    --frame-pad-x: clamp(calc(2rem * var(--scale)), calc(4.5vw * var(--scale)), calc(3.5rem * var(--scale)));
    --frame-pad-x-wide: clamp(calc(3.5rem * var(--scale)), calc(7vw * var(--scale)), calc(6rem * var(--scale)));
    --frame-inner-gap: clamp(calc(1rem * var(--scale)), calc(2.2vw * var(--scale)), calc(1.75rem * var(--scale)));
    --hero-frame-gap: clamp(calc(1rem * var(--scale)), calc(2.8vw * var(--scale)), calc(2.8rem * var(--scale)));
    --screen-gap: clamp(calc(0.75rem * var(--scale)), calc(1.8vw * var(--scale)), calc(1.5rem * var(--scale)));
    --cta-margin: clamp(calc(0.5rem * var(--scale)), calc(1.2vw * var(--scale)), calc(1rem * var(--scale)));
    --bold-black:
         1px 0 0 #000,
        -1px 0 0 #000,
         0 1px 0 #000,
         0 -1px 0 #000,
         2px 0 0 #000,
        -2px 0 0 #000,
         0 2px 0 #000,
         0 -2px 0 #000,
         1px 1px 0 #000,
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px 1px 0 #000;
}

.title,
.title__hook {
    -webkit-text-stroke: var(--title-stroke) var(--stroke-color);
    paint-order: stroke fill;
    text-shadow: var(--bold-black);
}

.message,
.subtitle,
.status,
.highlight {
    -webkit-text-stroke: var(--stroke) var(--stroke-color);
    paint-order: stroke fill;
    text-shadow: var(--bold-black);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Match 8h', monospace;
    font-weight: 700;
    font-synthesis: weight;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #a8c5d8;
    background-image: url('offline-assets/img/bg_cielo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    overflow-x: hidden;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
}

img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    display: block;
    max-width: 100%;
    height: auto;
}

.screen {
    min-height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--screen-gap);
    padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem);
    text-align: center;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

.title {
    font-family: 'Match 8h', monospace;
    font-weight: 700;
    color: #ffffff;
    line-height: 0.38;
    letter-spacing: 0.04em;
    font-size: var(--title-size);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.45em;
}

.title__word {
    line-height: 0.38;
}

.title__hook {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-family: 'Match 8h', monospace;
    font-weight: 700;
    color: #ffffff;
    font-size: var(--title-size);
    line-height: 0.5;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding: 0 0.35em;
}

.hero .title {
    margin-bottom: 0;
}

.hero .frame {
    margin-top: var(--hero-frame-gap);
}

.frame {
    position: relative;
    width: fit-content;
    max-width: min(1080px, 94vw);
    padding: var(--frame-pad-y) var(--frame-pad-x);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.frame__side {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    pointer-events: none;
    user-select: none;
}

.frame__side--left {
    left: 0;
}

.frame__side--right {
    right: 0;
    transform: scaleX(-1);
}

.frame__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--frame-inner-gap);
    width: 100%;
}

.message {
    font-size: var(--message-size);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: 0.03em;
}

.highlight {
    color: #ffe800;
}

.subtitle {
    font-size: var(--subtitle-size);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.logo {
    width: var(--logo-width);
    height: auto;
}

.status {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    color: #ffe800;
    font-size: var(--status-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0 0.5em;
    white-space: nowrap;
}

.cta {
    display: inline-block;
    margin-top: var(--cta-margin);
    transition: transform 0.15s ease;
    width: var(--cta-width);
    max-width: 100%;
}

.cta img {
    width: 100%;
    height: auto;
}

.cta:hover {
    transform: translateY(-2px) scale(1.02);
}

.cta:active {
    transform: translateY(1px) scale(0.99);
}

.cta:focus-visible {
    outline: 3px solid #ffe800;
    outline-offset: 4px;
    border-radius: 4px;
}

@media (min-width: 901px) and (orientation: landscape) {
    :root {
        --scale: 1.18;
        --status-size: clamp(1.75rem, 3.1vw, 3.2rem);
        --cta-width: min(480px, 26vw);
        --screen-gap: 24px;
        --cta-margin: 0;
    }

    .frame {
        padding-inline: var(--frame-pad-x-wide);
        padding-bottom: clamp(calc(1.1rem * var(--scale)), calc(2vw * var(--scale)), calc(1.75rem * var(--scale)));
    }

    .status {
        transform: translate(-50%, 28%);
    }

    .logo {
        margin-top: calc(var(--frame-inner-gap) * -0.65);
        margin-bottom: 12px;
    }

    .message {
        line-height: 0.92;
    }
}

@media (orientation: portrait), (max-width: 900px) {
    :root {
        --title-size: clamp(3rem, max(9.2vw, 5.2vh), 6.85rem);
        --title-hook-gap: 0.14em;
        --cta-width: clamp(12.5rem, 62vw, 22rem);
        --stroke: 5px;
        --title-stroke: 7px;
    }

    body {
        background-image: url('offline-assets/img/bg_cielo_mobile.png');
    }

    .screen {
        gap: clamp(1rem, 2.5vw, 1.75rem);
        padding: clamp(1rem, 4vw, 2rem) clamp(0.75rem, 3vw, 1.5rem);
    }

    .hero {
        max-width: 100%;
        gap: 0;
    }

    .title {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        line-height: 0.78;
        letter-spacing: 0.04em;
        max-width: 100%;
        margin-bottom: 0;
    }

    .title__word {
        flex-basis: auto;
        width: 100%;
        line-height: 0.78;
    }

    .title__word--1 {
        line-height: 1.28;
    }

    .title__word--2 {
        margin-top: -0.18em;
        margin-bottom: 0.18em;
    }

    .title__hook {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 1;
        margin: 0;
        padding: 0 0.35em;
    }

    .hero .frame {
        margin-top: calc(var(--title-hook-gap) + 0.5em);
    }

    .frame {
        max-width: 94vw;
        padding-top: clamp(3.25rem, 8vw, 5rem);
        padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
        padding-inline: clamp(4.5rem, 12vw, 7.5rem);
    }

    .frame__inner {
        gap: clamp(1.5rem, 4vw, 2.5rem);
    }

    .message {
        font-size: clamp(1.7rem, 5.9vw, 4.1rem);
        line-height: 0.95;
    }

    .message .highlight {
        white-space: nowrap;
    }

    .subtitle {
        font-size: clamp(1.38rem, 3.75vw, 2.6rem);
    }

    .logo {
        width: clamp(210px, 37vw, 440px);
    }

    .status {
        font-size: clamp(1.9rem, 6.5vw, 4.6rem);
    }

    .cta {
        margin-top: clamp(1.5rem, 3vw, 2rem);
    }
}

@media (max-width: 480px) {
    :root {
        --title-size: clamp(2.85rem, max(10vw, 5.4vh), 5.95rem);
        --title-hook-gap: 0.12em;
        --cta-width: clamp(11rem, 58vw, 20rem);
    }

    .title__word--2 {
        margin-top: -0.18em;
        margin-bottom: 0.18em;
    }

    .message {
        font-size: clamp(1.5rem, 5.5vw, 2.2rem);
        line-height: 0.95;
    }

    .subtitle {
        font-size: clamp(1.2rem, 3.85vw, 1.6rem);
    }

    .status {
        font-size: clamp(1.55rem, 6.2vw, 2.05rem);
    }

    .logo {
        width: clamp(180px, 35vw, 350px);
    }

    .frame {
        padding-top: clamp(2.75rem, 9vw, 4.5rem);
        padding-bottom: clamp(2.25rem, 7vw, 4rem);
        padding-inline: clamp(4rem, 11vw, 6.5rem);
    }
}