:root {
    color-scheme: dark;
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    background: #071427;
    color: #f8fafc;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 209, 102, 0.28) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 12%, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 34%, rgba(125, 211, 252, 0.75) 0 2px, transparent 3px),
        radial-gradient(circle at 22% 68%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
        radial-gradient(circle at 64% 76%, rgba(255, 209, 102, 0.6) 0 2px, transparent 3px),
        linear-gradient(145deg, #071427 0%, #12335d 54%, #0f766e 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.5px);
    background-position: 0 0, 32px 44px;
    background-size: 86px 86px, 112px 112px;
    opacity: 0.42;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid #fde68a;
    outline-offset: 3px;
}

h1,
h2,
p {
    margin-top: 0;
}

.home-hero,
.game-page,
.simple-page {
    margin: 0 auto;
    max-width: 1180px;
    padding: clamp(1.25rem, 4vw, 3rem);
    position: relative;
}

.home-hero {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    min-height: calc(100vh - 76px);
}

.home-copy h1,
.game-header h1 {
    font-size: clamp(2.25rem, 6vw, 4.8rem);
    line-height: 0.98;
    margin-bottom: 1rem;
}

.home-copy p,
.game-header p,
.simple-page p {
    color: #dbeafe;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    max-width: 640px;
}

.eyebrow {
    color: #fde68a;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
}

.primary-link,
.restart-button {
    align-items: center;
    background: #ffd166;
    border: 0;
    border-radius: 8px;
    color: #172554;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 900;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
}

.primary-link:hover,
.restart-button:hover {
    background: #fbbf24;
}

.orbit-preview {
    aspect-ratio: 1;
    min-height: 280px;
    position: relative;
}

.preview-sun,
.preview-orbit,
.preview-planet {
    position: absolute;
}

.preview-sun {
    background: #ffd166;
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(255, 209, 102, 0.5);
    height: 32%;
    left: 34%;
    top: 34%;
    width: 32%;
}

.preview-orbit {
    border: 2px dashed rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    inset: 12%;
}

.orbit-two {
    inset: 0;
}

.preview-planet {
    border-radius: 50%;
    box-shadow: inset -8px -10px 0 rgba(0, 0, 0, 0.16);
}

.planet-one {
    background: #38bdf8;
    height: 14%;
    left: 11%;
    top: 24%;
    width: 14%;
}

.planet-two {
    background: #ef6b4a;
    height: 11%;
    right: 4%;
    top: 55%;
    width: 11%;
}

.planet-three {
    background: #a78bfa;
    height: 9%;
    bottom: 10%;
    left: 43%;
    width: 9%;
}

.game-header {
    align-items: end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.game-panel {
    display: grid;
    gap: 1rem;
}

.scorebar {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.85rem 1rem;
}

.scorebar span {
    background: rgba(7, 20, 39, 0.6);
    border-radius: 8px;
    min-width: 8rem;
    padding: 0.65rem 0.75rem;
}

.scorebar strong {
    color: #fde68a;
    display: block;
    font-size: 0.78rem;
    margin-bottom: 0.1rem;
    text-transform: uppercase;
}

.fact-box,
.finish-panel {
    background: #ecfeff;
    border: 3px solid #67e8f9;
    border-radius: 8px;
    color: #164e63;
    padding: 1rem;
}

.fact-box strong {
    color: #0f766e;
    display: block;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.fact-box p,
.finish-panel p {
    margin-bottom: 0;
}

.memory-grid {
    display: grid;
    gap: clamp(0.55rem, 1.8vw, 1rem);
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.memory-card {
    aspect-ratio: 0.78;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    perspective: 800px;
    width: 100%;
}

.memory-card:disabled {
    cursor: default;
}

.memory-card-inner {
    display: block;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 320ms ease;
    width: 100%;
}

.memory-card.is-open .memory-card-inner,
.memory-card.is-matched .memory-card-inner {
    transform: rotateY(180deg);
}

.memory-card-face {
    align-items: center;
    backface-visibility: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    inset: 0;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: 0.65rem;
    position: absolute;
}

.memory-card-back {
    background:
        radial-gradient(circle at 28% 24%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 72% 66%, #fff 0 2px, transparent 3px),
        linear-gradient(160deg, #312e81, #0f766e);
    border: 3px solid #93c5fd;
}

.card-star {
    align-items: center;
    background: #ffd166;
    border-radius: 50%;
    color: #172554;
    display: inline-flex;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    font-weight: 900;
    height: 46%;
    justify-content: center;
    width: 46%;
}

.memory-card-front {
    background: #fff7ed;
    border: 3px solid #fde68a;
    color: #172554;
    font-weight: 900;
    transform: rotateY(180deg);
}

.memory-card-front img {
    display: block;
    height: min(62%, 6.5rem);
    max-width: 88%;
    object-fit: contain;
}

.memory-card-front span {
    font-size: clamp(0.74rem, 1.6vw, 1rem);
    line-height: 1.1;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
}

.memory-card.is-matched .memory-card-front {
    border-color: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25), 0 10px 22px rgba(0, 0, 0, 0.24);
}

.finish-panel {
    margin: 1rem auto 0;
    max-width: 680px;
    text-align: center;
}

.finish-panel h2 {
    color: #0f766e;
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.finish-panel .restart-button {
    margin-top: 1rem;
}

.simple-page {
    min-height: 55vh;
}

.simple-page h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #fecaca;
}

.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "Ocorreu um erro.";
}

@media (max-width: 900px) {
    .home-hero {
        grid-template-columns: 1fr;
    }

    .orbit-preview {
        min-height: 240px;
        order: -1;
    }

    .memory-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .game-header {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .memory-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .scorebar {
        align-items: stretch;
        flex-direction: column;
    }

    .scorebar span {
        min-width: 0;
    }
}