/* Ultras error skin — same palette as the Hyvä theme (bg #0d0d0d, text #f2f2f2, brand red #c8202a). No external
   fonts or scripts: these pages must work when the shop itself is down. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background-color: #0d0d0d;
    background-image: linear-gradient(rgba(13, 13, 13, .78), rgba(13, 13, 13, .92)), var(--ultras-bg-image, none);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #f2f2f2;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.u-card {
    width: 100%;
    max-width: 34rem;
    padding: 40px 32px 32px;
    text-align: center;
    background: rgba(28, 29, 32, .88);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.u-logo img { max-width: 220px; max-height: 90px; width: auto; height: auto; }
h1 {
    margin: 28px 0 12px;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.u-lead { margin: 0 0 24px; color: #bdbdbd; font-size: 1.05rem; }
.u-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 6px;
    background: #c8202a;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
}
.u-btn:hover, .u-btn:focus { background: #a31a22; }
.u-social { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.u-insta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; color: #f2f2f2; text-decoration: none; font-size: .95rem; }
.u-insta svg { flex: none; }
.u-insta:hover strong, .u-insta:focus strong { color: #c8202a; }
.u-ref { margin: 16px 0 0; color: #7d7d7d; font-size: .8rem; }

/* "Torch Runner" mini game (js/torch-runner.js) under "Try again" */
.u-game { margin: 28px -12px 0; }
.u-game-hint { margin: 0 0 8px; color: #bdbdbd; font-size: .9rem; }
.u-game-hint span { color: #f2f2f2; font-weight: 700; }
.u-game canvas { display: block; width: 100%; height: auto; aspect-ratio: 600 / 170; background: rgba(13, 13, 13, .55); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (min-width: 640px) { .u-card:has(.u-game) { max-width: 44rem; } }
/* the game found the shop online again (after a crash): blink the button */
.u-btn.u-online { background: #1f9d55; animation: u-blink 1s ease-in-out infinite; }
.u-btn.u-online:hover, .u-btn.u-online:focus { background: #17803f; }
@keyframes u-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); transform: scale(1); } 50% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .u-btn.u-online { animation: none; } }
.u-online-msg { margin: 10px 0 0; color: #3ddc84; font-weight: 700; }