/* Fonts are served with the app (licences beside them in fonts/), so nothing is fetched from elsewhere. */
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('../fonts/baloo-2.woff2') format('woff2');
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/nunito.woff2') format('woff2');
}

/* Colours taken from the Scanimals cover: sky, sunshine and grass. */
:root {
    --sq-sky: #eaf6ff;
    --sq-sky-edge: #b9dbf7;
    --sq-sky-shadow: #c7e3fa;
    --sq-blue: #1d5fb8;
    --sq-blue-dark: #134685;
    --sq-ink: #1f2a44;
    --sq-muted: #4f5b75;
    --sq-sun: #ffc93c;
    --sq-sun-shadow: #d99a00;
    --sq-grass: #237a40;
    --sq-grass-shadow: #175a2d;
    --sq-suit: #2f3446;
    --sq-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --bs-body-font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: var(--sq-ink);
    --bs-body-bg: var(--sq-sky);
}

html, body {
    font-family: var(--bs-body-font-family);
    color: var(--sq-ink);
    background: var(--sq-sky);
}

h1, h2, h3, .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--sq-display);
    font-weight: 800;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--sq-blue);
}

.btn {
    border-radius: 1rem;
    font-weight: 800;
}

.btn-primary {
    color: #fff;
    background-color: var(--sq-blue);
    border-color: var(--sq-blue);
}

    .btn-primary:hover, .btn-primary:focus-visible {
        background-color: var(--sq-blue-dark);
        border-color: var(--sq-blue-dark);
    }

.btn-outline-primary {
    color: var(--sq-blue);
    background-color: #fff;
    border: 2px solid var(--sq-sky-edge);
}

    .btn-outline-primary:hover {
        color: var(--sq-blue-dark);
        background-color: #fff;
        border-color: var(--sq-blue);
    }

.card {
    border: none;
    border-radius: 1.5rem;
    box-shadow: 0 0.4rem 0 var(--sq-sky-shadow);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.sq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sq-scanner {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 60vh;
    background: #000;
    border-radius: 0.75rem;
    overflow: hidden;
}

.sq-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sq-target {
    position: absolute;
    inset: 25% 10%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.sq-profile {
    display: grid;
    /* minmax(0, ...) lets long values such as hashes wrap instead of widening the page. */
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.25rem 1rem;
}

    .sq-profile dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

.sq-creature {
    max-width: 26rem;
    overflow: hidden;
}

.sq-creature-frame {
    padding: 0.75rem;
}

.sq-creature-picture {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    background-color: #fff;
    background-repeat: no-repeat;
}

.sq-creature-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #495057;
}

.sq-creature-initial {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
}

.sq-rarity-common {
    background-color: #6c757d;
}

.sq-rarity-uncommon {
    background-color: #198754;
}

.sq-rarity-rare {
    background-color: #0b5ed7;
}

.sq-rarity-legendary {
    background: linear-gradient(135deg, #8a5a00, #b0136f);
}

.sq-rarity-mythical {
    background: linear-gradient(135deg, #5b21b6, #b0136f, #8a5a00);
}

/* Rare cards shine, and legendary and mythical ones glow gold and sparkle, as the children asked
   (docs/children-answers.md). The shine sweeps across the picture now and then. */
.sq-card-rare .sq-creature-frame,
.sq-card-legendary .sq-creature-frame,
.sq-card-mythical .sq-creature-frame {
    position: relative;
    overflow: hidden;
}

    .sq-card-rare .sq-creature-frame::after,
    .sq-card-legendary .sq-creature-frame::after,
    .sq-card-mythical .sq-creature-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
        transform: translateX(-100%);
        animation: sq-shine 3.5s ease-in-out infinite;
        pointer-events: none;
    }

.sq-card-legendary {
    border: 3px solid #f5b400;
    box-shadow: 0 0 0 3px rgba(255, 200, 61, 0.35), 0 0 22px 6px rgba(255, 200, 61, 0.55);
}

.sq-card-mythical {
    border: 3px solid #b48cff;
    box-shadow: 0 0 0 3px rgba(255, 200, 61, 0.45), 0 0 26px 8px rgba(155, 123, 255, 0.6);
}

    .sq-card-legendary .sq-creature-frame::before,
    .sq-card-mythical .sq-creature-frame::before {
        content: "\2726  \2727  \2726";
        position: absolute;
        top: 0.9rem;
        left: 0;
        right: 0;
        z-index: 1;
        text-align: center;
        color: #ffd84d;
        font-size: 1.6rem;
        letter-spacing: 0.6rem;
        word-spacing: 6rem;
        text-shadow: 0 0 6px #fff;
        animation: sq-twinkle 1.8s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes sq-shine {
    0%, 55% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes sq-twinkle {
    0%, 100% { opacity: 0.35; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .sq-creature-frame::before {
        animation: none;
    }

    .sq-creature-frame::after {
        display: none;
    }
}

.sq-stats,
.sq-traits {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    align-items: center;
}

    .sq-stats dd,
    .sq-traits dd {
        margin: 0;
    }

    .sq-stats dd {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .sq-stats .progress {
        flex: 1;
    }

.sq-stat-value {
    min-width: 2.5ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sq-stat-extra {
    opacity: 0.6;
}

.sq-stat-added {
    min-width: 3.5ch;
    color: #146c43;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sq-stat-health {
    background-color: #dc3545;
}

.sq-stat-attack {
    background-color: #fd7e14;
}

.sq-stat-defence {
    background-color: #0d6efd;
}

.sq-stat-speed {
    background-color: #20c997;
}

.sq-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    vertical-align: -0.15rem;
}

.sq-details,
.sq-owner-box {
    max-width: 26rem;
}

    .sq-details summary {
        color: #495057;
        cursor: pointer;
    }

/* Players (Players/PlayerSession.cs) and the collection. */
.sq-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sq-name-suggestion {
    font-size: 2rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.sq-secret-words {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sq-collection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 0.75rem;
}

.sq-collected {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
}

/* Sort and filters above the collection (Pages/CollectionPage.razor). */
.sq-collection-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

    .sq-collection-tools .form-label {
        margin-bottom: 0.25rem;
        font-weight: 700;
    }

    .sq-collection-tools .form-check {
        min-height: 2.4rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

/* Each creature in the collection is a link to its full card. */
a.sq-collected {
    color: inherit;
    text-decoration: none;
}

a.sq-collected:hover,
a.sq-collected:focus-visible {
    border-color: var(--sq-blue);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}

.sq-collected-frame {
    flex: none;
    width: 5.5rem;
    padding: 0.35rem;
    border-radius: 0.5rem;
}

.sq-collected-picture {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.35rem;
    background-color: #fff;
    background-repeat: no-repeat;
}

.sq-collected-picture .sq-creature-initial {
    font-size: 2.5rem;
}

.sq-collected-body {
    min-width: 0;
}

.sq-collected-name {
    font-weight: 700;
    font-size: 1.1rem;
}

.sq-collected-stat + .sq-collected-stat::before {
    content: " \00B7  ";
}

.sq-account-players li {
    padding: 0.35rem 0;
}

/* Home page (Pages/Home.razor). */
.sq-hero {
    height: 14.5rem;
    border: 4px solid #fff;
    border-radius: 1.5rem;
    box-shadow: 0 0.4rem 0 var(--sq-sky-shadow);
    background: url('../images/scanimals-cover.jpg') no-repeat;
    background-size: max(156%, 34rem) auto;
    background-position: 42% 2%;
}

.sq-title {
    margin: 1.1rem 0 0;
    color: var(--sq-blue);
    font-size: 1.6rem;
    line-height: 1;
}

.sq-tagline {
    margin: 0;
    font-family: var(--sq-display);
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1.05;
}

.sq-lead {
    margin: 0.5rem 0 0;
    font-size: 1.1rem;
    color: var(--sq-muted);
}

.sq-home-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.sq-scan-button,
.sq-keep-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--sq-display);
    font-weight: 800;
}

.sq-scan-button {
    min-height: 4.5rem;
    border-radius: 1.4rem;
    background: var(--sq-sun);
    color: var(--sq-ink);
    font-size: 1.7rem;
    box-shadow: 0 0.4rem 0 var(--sq-sun-shadow);
}

    .sq-scan-button:hover {
        color: var(--sq-ink);
        filter: brightness(1.05);
    }

.sq-keep-button {
    min-height: 3rem;
    border-radius: 1rem;
    background: var(--sq-grass);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 0.25rem 0 var(--sq-grass-shadow);
}

    .sq-keep-button:hover {
        color: #fff;
        filter: brightness(1.1);
    }

.sq-panel,
.sq-hello {
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 1.5rem;
    background: #fff;
}

.sq-hello {
    background: var(--sq-blue);
    color: #fff;
    font-weight: 700;
}

.sq-hello-name {
    margin: 0 0 0.25rem;
    font-family: var(--sq-display);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.sq-hello-bar {
    height: 0.9rem;
    border-radius: 999px;
    background: var(--sq-blue-dark);
    overflow: hidden;
}

    .sq-hello-bar > div {
        height: 100%;
        border-radius: 999px;
        background: var(--sq-sun);
    }

.sq-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin: 1.25rem 0 0.6rem;
}

    .sq-section-head a {
        font-weight: 800;
    }

.sq-album-count {
    color: var(--sq-grass);
    font-weight: 800;
}

.sq-species-picture {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.75rem;
    background-color: #fff;
    background-repeat: no-repeat;
}

.sq-species-unknown {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d5e3ef;
    color: var(--sq-muted);
    font-family: var(--sq-display);
    font-weight: 800;
    font-size: 1.5rem;
}

.sq-missing {
    filter: grayscale(1) brightness(0.55) contrast(0.6);
    opacity: 0.45;
}

.sq-teaser {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.25rem 0 0.9rem;
}

.sq-latest {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}

    /* Each latest find is a link to its full card. */
    .sq-latest-card {
        height: 100%;
        color: inherit;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        min-width: 0;
        padding: 0.4rem;
        border-radius: 1rem;
        background: #fff;
    }

.sq-latest-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    font-size: 0.85rem;
}

.sq-album {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: 0.45rem;
    margin: 0 0 0.75rem;
}

/* The zip-up suit over a new find (Creatures/ZipReveal.razor). */
.sq-reveal {
    position: relative;
    max-width: 26rem;
    /* Room for the card's shadow, which the hidden overflow would cut off. */
    padding-bottom: 0.5rem;
    overflow: hidden;
    border-radius: 1.5rem;
}

.sq-zip {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 1.5rem;
    background: transparent;
    cursor: pointer;
}

.sq-zip-suit {
    position: absolute;
    inset: 0.5rem;
    border-radius: 1.5rem;
    animation: sq-wobble 1.6s ease-in-out infinite;
}

.sq-zip-teeth {
    position: absolute;
    left: calc(50% - 6px);
    top: 5.5rem;
    bottom: 1.5rem;
    width: 12px;
    background: repeating-linear-gradient(180deg, #c9ced8 0 6px, transparent 6px 12px);
}

.sq-zip-pull {
    position: absolute;
    left: calc(50% - 20px);
    top: 2.25rem;
    width: 40px;
    height: 52px;
    border: 4px solid var(--sq-suit);
    border-radius: 10px;
    background: var(--sq-sun);
    box-shadow: 0 4px 0 var(--sq-sun-shadow);
    /* Only the pull swings: the button itself stays still, so it is easy to tap. */
    transform-origin: 50% 0;
    animation: sq-swing 1.6s ease-in-out infinite;
}

.sq-zip-text {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 8rem;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: #fff;
    color: var(--sq-ink);
    font-family: var(--sq-display);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.2;
}

    .sq-zip-text strong {
        display: block;
        color: var(--sq-blue);
    }

.sq-zip-half {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 50%;
    pointer-events: none;
}

.sq-zip-left {
    left: 0;
    animation: sq-left-away 0.7s ease-in forwards;
}

.sq-zip-right {
    right: 0;
    animation: sq-right-away 0.7s ease-in forwards;
}

.sq-revealing > .sq-creature {
    animation: sq-pop 0.6s 0.25s ease-out both;
}

/* A species with unzipping pictures climbs out of its suit one picture at a time (a quarter of a
   second each, the last one held), then the pictures fade and the card pops in. --sq-steps is the
   number of pictures, set by Creatures/ZipReveal.razor. */
.sq-zip-steps {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 1.5rem;
    background: #fff;
    pointer-events: none;
    animation: sq-steps-away 0.4s calc(var(--sq-steps) * 0.25s + 0.35s) ease-in forwards;
}

.sq-zip-step {
    position: absolute;
    top: 1rem;
    left: 50%;
    width: min(18rem, calc(100% - 2rem));
    aspect-ratio: 1;
    max-width: 100%;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    opacity: 0;
    animation: sq-step 0.25s linear forwards;
}

    .sq-zip-step:last-child {
        animation-name: sq-step-held;
    }

.sq-revealing.sq-revealing-steps > .sq-creature {
    animation-delay: calc(var(--sq-steps) * 0.25s + 0.55s);
}

.sq-revealing.sq-revealing-steps > .sq-find-banner {
    animation-delay: calc(var(--sq-steps) * 0.25s + 0.9s);
}

@keyframes sq-step {
    0%, 99% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes sq-step-held {
    0%, 100% { opacity: 1; }
}

@keyframes sq-steps-away {
    to { opacity: 0; visibility: hidden; }
}

/* Above the card under the suit (Pages/Result.razor): a first of its species, or another one. */
.sq-find-banner {
    margin-bottom: 0.75rem;
    padding: 0.6rem 1rem;
    border-radius: 1rem;
    text-align: center;
    font-weight: 700;
}

    .sq-find-banner strong {
        display: block;
        font-family: var(--sq-display);
        font-size: 1.6rem;
        font-weight: 800;
        line-height: 1.2;
    }

.sq-new-species {
    background: var(--sq-sun);
    color: var(--sq-ink);
    box-shadow: 0 0.3rem 0 var(--sq-sun-shadow);
}

.sq-another-species {
    background: #fff;
    color: var(--sq-ink);
    border: 2px solid var(--sq-sun);
}

.sq-revealing > .sq-find-banner {
    animation: sq-pop 0.6s 0.6s ease-out both;
}

@keyframes sq-wobble {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-1.5deg); }
    75% { transform: rotate(1.5deg); }
}

@keyframes sq-swing {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}

@keyframes sq-left-away {
    to { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
}

@keyframes sq-right-away {
    to { transform: translateX(120%) rotate(8deg); opacity: 0; }
}

@keyframes sq-pop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); }
}

/* A suit that cannot be opened yet (Creatures/WildSuit.razor): nothing is under it. */
.sq-wild {
    position: relative;
    max-width: 26rem;
    height: 20rem;
    margin-bottom: 1rem;
}

    .sq-wild .sq-zip-text {
        top: 7.5rem;
        text-align: center;
    }

/* Less motion: no suit to open, the card shows straight away. */
@media (prefers-reduced-motion: reduce) {
    .sq-zip,
    .sq-zip-half,
    .sq-zip-steps {
        display: none;
    }

    .sq-wild .sq-zip-suit,
    .sq-wild .sq-zip-pull {
        animation: none;
    }

    .sq-revealing > .sq-creature,
    .sq-revealing > .sq-find-banner {
        animation: none;
    }
}

/* Player avatars (Players/PlayerAvatar.razor): the colour and theme the name was made from. */
.sq-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    color: #fff;
    vertical-align: middle;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
}

    .sq-avatar svg {
        width: 60%;
        height: 60%;
    }

.sq-avatar-red { background: #d64545; }
.sq-avatar-orange { background: #e8711a; }
.sq-avatar-yellow { background: #ffd23f; color: var(--sq-ink); }
.sq-avatar-green { background: #2f9e44; }
.sq-avatar-teal { background: #0f8f89; }
.sq-avatar-blue { background: #1d6fd1; }
.sq-avatar-purple { background: #8b4fd6; }
.sq-avatar-pink { background: #e05aa8; }
.sq-avatar-gold { background: #e0b12a; color: var(--sq-ink); }
.sq-avatar-silver { background: #c3cad4; color: var(--sq-ink); }
.sq-avatar-rainbow { background: linear-gradient(135deg, #e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa); }
.sq-avatar-white { background: #fff; color: var(--sq-ink); }

/* "Who is playing?" (Pages/WhoPage.razor): big buttons a child can find by picture. */
.sq-who {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
    gap: 0.75rem;
}

.sq-who-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 0.5rem;
    border: 3px solid transparent;
    border-radius: 1.5rem;
    background: #fff;
    color: var(--sq-ink);
    box-shadow: 0 0.4rem 0 var(--sq-sky-shadow);
}

    .sq-who-button:hover,
    .sq-who-button:focus-visible {
        border-color: var(--sq-blue);
    }

    .sq-who-button .sq-avatar {
        width: 5rem;
        height: 5rem;
        margin: 0;
    }

.sq-who-playing {
    border-color: var(--sq-grass);
}

.sq-who-name {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: var(--sq-display);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.1;
}

/* Wild battles (Pages/BattlePage.razor, Battles/). */
.sq-team-pick {
    display: grid;
    gap: 0.5rem;
}

.sq-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sq-fighter {
    width: 100%;
    padding: 0.5rem;
    border: 2px solid #dee2e6;
    border-radius: 1rem;
    background: #fff;
    color: inherit;
    text-align: left;
}

    .sq-choices .sq-fighter {
        width: auto;
        flex: 1 1 14rem;
    }

    .sq-fighter:disabled {
        opacity: 0.5;
    }

.sq-fighter-picked {
    border-color: var(--sq-blue);
    box-shadow: 0 0 0 3px rgba(29, 95, 184, 0.25);
    background: #eef5ff;
}

.sq-fighter-face {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sq-fighter-picture {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background-color: #fff;
    background-repeat: no-repeat;
}

.sq-fighter-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    font-family: var(--sq-display);
    font-size: 1.5rem;
    font-weight: 800;
}

.sq-fighter-text {
    display: flex;
    flex-direction: column;
}

.sq-fighter-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    font-size: 0.9rem;
    color: #495057;
}

.sq-scoreboard {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    background: var(--sq-sun);
    font-family: var(--sq-display);
    font-size: 1.4rem;
    font-weight: 700;
}

.sq-rounds {
    display: grid;
    gap: 0.5rem;
}

.sq-round {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    border-left: 6px solid;
}

.sq-round-won {
    border-color: #2f9e44;
    background: #ebfbee;
}

.sq-round-lost {
    border-color: #e03131;
    background: #fff5f5;
}

.sq-round-number {
    font-size: 0.85rem;
    color: #495057;
}