/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
    user-select: none;
}

/* Reapply the pointer cursor for anchor tags */
a,
button {
    cursor: revert;
}

#root {
    display: contents;
}

a {
    font-weight: 500;
    color: #646cff;
    text-decoration: inherit;
}
a:hover {
    color: #535bf2;
}

body {
    margin: 0;
    padding: 0;
    min-width: 320px;
    min-height: 100dvh;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family:
        'Helvetica Neue',
        'Segoe UI',
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        'Fira Sans',
        'Droid Sans',
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 400;

    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(180deg, #161619 0%, #0c0c0e 100%);
    background-attachment: fixed;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.light-theme body {
    background: linear-gradient(180deg, #f8f9fb 0%, #eceef1 100%);
    background-attachment: fixed;
    color: #111827;
}

.light-theme a {
    color: #2563eb;
}

.light-theme .app h1 {
    color: #1a1a1a;
}

.light-theme .app .page-tagline {
    color: rgba(17, 24, 39, 0.75);
}

.light-theme .notify {
    background: #1a1a1a;
    color: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.25);
}

.light-theme .app .overlay {
    background: rgba(243, 244, 246, 0.6);
}

.light-theme .app .overlay .modal {
    background-color: transparent;
    box-shadow: none;
}

.light-theme .app .overlay .modal .body {
    color: #1f2937;
}

.light-theme .app .overlay .modal .body h2 {
    color: #111827;
    text-shadow: none;
}

.light-theme .app .overlay .modal .body .part-of-speech span {
    background-color: #e2e8f0;
    color: #111827;
}

.light-theme .app .overlay .modal button {
    background: var(--green);
    color: #ffffff;
    text-shadow: none;
}

.light-theme .app .attempts .char .front {
    border: solid 1px #d3d6da;
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: none;
}

.light-theme .app .attempts .char .back {
    background-color: #ffffff;
    border: solid 1px #d3d6da;
    color: #1a1a1a;
    box-shadow: none;
}

.light-theme .app .attempts .char.none .back {
    background-color: #787c7e;
    border-color: #787c7e;
    color: #ffffff;
}

.light-theme .app .attempts .char.yellow .back,
.light-theme .app .attempts .char.green .back {
    border-color: transparent;
}

.light-theme .app .keyboard button {
    background: #d3d6da;
    color: #1a1a1a;
    border: none;
    box-shadow: none;
}

.light-theme .app .keyboard button svg {
    fill: #1a1a1a;
}

.light-theme .app .keyboard button:hover {
    background: #c2c6cc;
}

.light-theme .app .keyboard button.none {
    background-color: #787c7e;
    color: #ffffff;
    border-color: transparent;
    box-shadow: none;
}

.light-theme .app .keyboard button.none svg {
    fill: #ffffff;
}

.light-theme .app .keyboard button.yellow {
    color: #1a1a1a;
}

.light-theme .app .keyboard button.green {
    color: #ffffff;
}

.light-theme footer {
    color: #1f2937;
}

.light-theme footer svg {
    fill: #6b7280;
}

.light-theme .theme-toggle {
    color: rgba(17, 24, 39, 0.55);
    background: none;
    filter: none;
}

.light-theme .theme-toggle:hover {
    color: rgba(17, 24, 39, 0.9);
}

h1 {
    font-size: 3.2em;
    line-height: 1.1;
}

#app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vanilla:hover {
    filter: drop-shadow(0 0 2em #3178c6aa);
}

.card {
    padding: 2em;
}

.read-the-docs {
    color: #888;
}

button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.25s;
}
button:hover {
    border-color: #646cff;
}

.progress {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 90;
    pointer-events: none;
    overflow: hidden;
}

.progress rect {
    fill: none;
    stroke: var(--green);
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
    /* viewBox is 100x100 so the rect perimeter is 400 user units. A single dash of
       length (progress * 4) with a huge gap draws one continuous stroke from the
       top-left clockwise; at 0 the dash length is 0, so nothing renders. */
    stroke-dasharray: calc(var(--progress-num, 0) * 4) 9999;
    transition: stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle {
    position: fixed;
    top: 0.9rem;
    right: 1.2rem;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0.25rem;
    border: none;
    border-radius: 0;
    background: none;
    color: rgba(255, 255, 255, 0.6);
    transition:
        color 200ms ease,
        transform 200ms ease;
}

.theme-toggle:hover {
    color: rgba(255, 255, 255, 0.95);
    transform: scale(1.08);
}

.theme-toggle svg {
    width: 1.4rem;
    height: 1.4rem;
}

.theme-toggle .icon-moon {
    display: none;
}

.light-theme .theme-toggle .icon-sun {
    display: none;
}

.light-theme .theme-toggle .icon-moon {
    display: block;
}

button:focus,
button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
    :root {
        color: #213547;
        background-color: #ffffff;
    }
    a:hover {
        color: #747bff;
    }
    button {
        background-color: #f9f9f9;
    }
}

:root {
    --gray-50: #f1f1f1;
    --gray-300: #ccc;
    --gray-400: #aaa;
    --gray-500: #999;
    --gray-600: #666;
    --gray-700: #444;
    --gray-200: #ddd;
    --gray-800: #333;
    --gray-900: #222;

    --yellow: #e0b400;
    --green: #2ea043;
}

button {
    font: inherit;
    cursor: pointer;
}

/* Custom press/tap highlight color for all interactive elements. */
button,
a,
[data-key],
[data-action] {
    -webkit-tap-highlight-color: rgba(46, 160, 67, 0.35);
}

html {
    height: 100dvh;
}

a {
    color: var(--gray-50);
}

.notify {
    position: fixed;
    z-index: 2500;
    top: 4rem;
    left: 50%;
    padding: 0.6rem 1.15rem;
    border-radius: 0.75rem;
    background: #2a2a2c;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -0.75rem) scale(0.96);
    transition:
        opacity 220ms ease,
        transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    &:empty {
        display: none;
    }
    &.show {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.app {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0.5rem 0 0.6rem;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
}

.app h1 {
    text-align: center;
    font-size: 2.1rem;
    margin: 0;
    color: var(--gray-200);
    letter-spacing: -0.04em;
}

.app h1 span {
    color: #ffd159;
    display: inline-block;
    transition: all 3s;
    transform: scale(1, 1) translateY(0);
}

.app .page-tagline {
    margin: 0.1rem 1.5rem 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    line-height: 1.3;
    text-align: center;
}

.app.loading h1 span {
    transition: none;
    animation: loader 2s ease-in-out infinite;
}

@keyframes loader {
    0% {
        transform: scale(1, 1) translateY(0);
    }
    10% {
        transform: scale(1.1, 0.9) translateY(0);
    }
    30% {
        transform: scale(0.9, 1.1) translateY(-1rem);
    }
    50% {
        transform: scale(1.05, 0.95) translateY(0);
    }
    57% {
        transform: scale(1, 1) translateY(-0.07rem);
    }
    64% {
        transform: scale(1, 1) translateY(0);
    }
    100% {
        transform: scale(1, 1) translateY(0);
    }
}

.app main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 0.9rem;
    min-height: 0;
    justify-content: space-around;
}

/* The overlay is a native <dialog> opened with showModal(); reset the UA chrome
   (border/padding/max-size/margin) so it behaves like the old full-screen div. */
.app .overlay {
    z-index: 1000;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: none;
    padding: 0;
    color: inherit;
    background: rgba(12, 12, 14, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    /* Closed dialogs collapse; only the open one lays out and fades in. An author
       `display` would otherwise override the UA `dialog:not([open])` rule. */
    display: none;
    align-items: stretch;
    justify-content: center;
    transition:
        opacity 260ms ease,
        background 260ms ease,
        -webkit-backdrop-filter 260ms ease,
        backdrop-filter 260ms ease;
}

.app .overlay[open] {
    display: flex;
    animation: overlay-fade 260ms ease both;
}

/* The dialog paints its own dim/blur, so suppress the native backdrop layer. */
.app .overlay::backdrop {
    background: transparent;
}

/* iOS Safari leaves a ghost of the backdrop-filter blur on screen when the
   overlay is hidden abruptly. Fading the blur and opacity to zero first
   guarantees the last painted frame is clear, so no ghost remains. */
.app .overlay.closing {
    animation: none;
    opacity: 0;
    background: rgba(12, 12, 14, 0);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    pointer-events: none;
}

.light-theme .app .overlay.closing {
    background: rgba(243, 244, 246, 0);
}

@keyframes overlay-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.app .overlay .modal {
    width: 100%;
    max-width: 30rem;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    animation: modal-rise 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modal-rise {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.app .overlay .modal .body {
    padding: 0;
    color: rgba(255, 255, 255, 0.92);
    overflow: auto;
    overflow-x: hidden;
    word-break: break-word;
    font-size: 1rem;
    flex: 0 1 auto;
}

.app .overlay .modal .body h2 {
    color: white;
    text-shadow: 0 1px 0 rgb(255 255 255 / 40%);
}

.app .overlay .modal .body .subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
}

.app .overlay .modal .body .success,
.app .overlay .modal .body .fail {
    text-align: center;
}

.app .overlay .modal .body h3 {
    font-size: 3rem;
    margin: 0;
}

.app .overlay .modal .body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app .overlay .modal .body ol {
    margin: 0;
    padding: 0 0 0 2rem;
}

.app .overlay .modal .body .part-of-speech span {
    background-color: var(--gray-600);
    padding: 0.25rem;
    display: inline-block;
}

.app .overlay .modal .body .example {
    font-style: italic;
}

.app .overlay .modal .footer {
    flex: 0 0 auto;
    padding: 0.5rem 0 0;
    text-align: center;
}

.app .overlay .modal button {
    padding: 0.75rem 3rem;
    font-weight: 700;
    font-size: 1.2rem;
    background: var(--green);
    border: none;
    border-radius: 0.75rem;
    color: white;
    box-shadow: 0 12px 26px rgba(46, 160, 67, 0.3);
}

/* Welcome / how-to modal */
.app .overlay .modal.welcome .body {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Pin the buttons to the bottom of the welcome modal (the auto margin eats the
   free space, overriding justify-content: center) and lay Give up + Continue in
   a centered row. */
.app .overlay .modal.welcome .footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Secondary "Give up", shown beside Continue only while a game is in progress
   (JS adds .show). Outlined so the green Continue stays the primary action. */
.app .overlay .modal .give-up {
    display: none;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.4rem;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.app .overlay .modal .give-up.show {
    display: inline-flex;
}

.app .overlay .modal .give-up svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.light-theme .app .overlay .modal .give-up {
    color: rgba(17, 24, 39, 0.7);
    border-color: rgba(17, 24, 39, 0.2);
    background: transparent;
}

.welcome-logo {
    margin: 0;
    font-size: 4.8rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    text-shadow: none;
}

.welcome-logo span {
    color: #ffd159;
}

.welcome-tagline {
    margin: 0.6rem 0 0;
    font-size: 1rem;
    opacity: 0.8;
}

.welcome-how {
    text-align: left;
    background: none;
    border: none;
    padding: 0;
}

.welcome-how h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.welcome-how > p {
    margin: 0 0 0.9rem;
    font-size: 0.92rem;
    opacity: 0.85;
}

.welcome-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.welcome-legend li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.92rem;
}

.welcome-legend .demo {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
}

.welcome-legend .demo.green {
    background: var(--green);
}

.welcome-legend .demo.yellow {
    background: var(--yellow);
    color: #111;
}

.welcome-legend .demo.none {
    background: #3a3a3c;
}

.welcome-credits {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    opacity: 0.6;
}

.light-theme .welcome-legend .demo.none {
    background: #787c7e;
}

.app .attempts-wrapper {
    flex: 1;
    min-height: 0;
    /* container-type: size lets .attempts size itself against this box with
       cqh/cqw; place-items centers the board within the wrapper. */
    container-type: size;
    display: grid;
    place-items: center;
}

.app .attempts-wrapper .attempts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    text-transform: uppercase;
    /* Largest 5:6 box that fits the wrapper's width AND height; the wrapper's
       place-items centers it. block-size takes the limiting dimension, then
       aspect-ratio gives the matching width. 1fr cells in a 5:6 box are square. */
    block-size: min(100cqh, 100cqw * 6 / 5);
    inline-size: auto;
    aspect-ratio: 5 / 6;
    padding: 0;
    gap: 1.5%;
}

.app .attempts .char {
    display: flex;
    position: relative;
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2rem;
    min-height: 0;
}

.app .attempts .char {
    transform-style: preserve-3d;
    transition:
        transform 0.5s ease,
        box-shadow 0.25s ease;
}

.app .attempts .char .front,
.app .attempts .char .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.app .attempts .char .front {
    border: solid 1px rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.app .attempts .char.active .front {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 -2px 0 rgba(0, 0, 0, 0.18),
        0 0 0 2px rgba(255, 255, 255, 0.18);
}

.light-theme .app .attempts .char.active .front {
    border-color: #8a9099;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.14);
}

.app .attempts .char .back {
    border: none;
    background-color: rgba(255, 255, 255, 0.16);
    color: white;
    transform: rotateX(-180deg);
}

.app .attempts .char.yellow .back {
    background-color: var(--yellow);
    color: #111;
    box-shadow: 0 0 24px rgba(212, 170, 0, 0.35);
}

.app .attempts .char.green .back {
    background-color: var(--green);
    color: white;
    box-shadow: 0 0 24px rgba(40, 167, 69, 0.35);
}

.app .attempts .char.none .back {
    background-color: #3a3a3c;
    color: rgba(255, 255, 255, 0.95);
}

.app .attempts .char.flip {
    transform: rotateX(-180deg);
}

.app .keyboard {
    display: flex;
    flex-direction: column;
    max-width: 520px;
    margin: 0.25rem auto 0;
    padding: 0;
    width: 100%;
}

.app .keyboard > div {
    display: flex;
    flex-direction: row;
    margin: 2px 0;
}

.app .keyboard > div:nth-child(2) {
    margin: 2px 4px;
}

.app .keyboard button {
    cursor: pointer;
    text-transform: uppercase;
    padding: 0;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0px;
    overflow: hidden;
    font-weight: bold;
    font-size: 1rem;
    margin: 0.22rem 1px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: none;
    border-radius: 0.4rem;
    transition:
        transform 200ms ease,
        background-color 200ms ease,
        box-shadow 200ms ease;
    box-shadow: none;
}

.app .keyboard .enter-row {
    justify-content: center;
}

.app .keyboard button[data-key='enter'] {
    font-size: 0.95rem;
    flex: 0 0 auto;
    width: 60%;
    letter-spacing: 0.05em;
}

.app .keyboard button[data-key='backspace'] {
    flex-basis: 20px;
}

.app .keyboard button:first-child {
    margin-left: 0;
}

.app .keyboard button:last-child {
    margin-right: 0;
}

.app .keyboard button:disabled,
.app .keyboard button[disabled] {
    opacity: 0.45;
    pointer-events: none;
}

.app .keyboard button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.28);
}

.app .keyboard button:active {
    background-color: rgba(255, 255, 255, 0.22);
}

.app .keyboard button svg {
    fill: white;
    width: 1.4rem;
    pointer-events: none;
}

.app .keyboard button.lg {
    width: 14%;
}

.app .keyboard button.yellow {
    background-color: var(--yellow);
    color: #111;
    box-shadow: none;
}

.app .keyboard button.green {
    background-color: var(--green);
    color: white;
    box-shadow: none;
}

.app .keyboard button.none {
    background-color: #121214;
    color: rgba(255, 255, 255, 0.3);
    border-color: transparent;
    box-shadow: none;
}

.horizontal-shake {
    animation: horizontal-shaking 0.35s infinite;
}

@keyframes horizontal-shaking {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(5px);
    }
    50% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Keyboard keys ripple out from the center when the game is revealed */
.app .keyboard.ripple button {
    animation: key-ripple 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--ripple-delay, 0ms);
}

@keyframes key-ripple {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    60% {
        transform: scale(1.22);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Intro: title screen shows briefly, then slides away to reveal the game */
.intro {
    position: absolute;
    inset: 0;
    z-index: 1500;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e0e10;
    transition:
        transform 600ms cubic-bezier(0.7, 0, 0.3, 1),
        opacity 600ms ease;
}

.light-theme .intro {
    background: #f3f4f6;
}

.intro.intro-done {
    transform: translateY(100%);
    pointer-events: none;
}

.intro-slide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.intro-logo {
    margin: 0;
    font-size: 3.4rem;
    letter-spacing: -0.04em;
    color: var(--gray-200);
    animation: intro-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.light-theme .intro-logo {
    color: #1a1a1a;
}

.intro-logo span {
    color: #ffd159;
}

.intro-tagline {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    opacity: 0.75;
    animation: intro-fade 700ms ease 200ms both;
}

@keyframes intro-pop {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes intro-fade {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 0.75;
        transform: translateY(0);
    }
}

/* Theme switch: wipe the new theme in over the old one, left to right. */
.theme-swiping::view-transition-old(root) {
    animation: none;
}

.theme-swiping::view-transition-new(root) {
    animation: theme-wipe 600ms cubic-bezier(0.7, 0, 0.3, 1);
}

@keyframes theme-wipe {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

.confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4000;
    pointer-events: none;
}

/* The footer (credit, version, Give Up, theme toggle) only appears on the
   welcome screen — during play the board gets the full height. When the welcome
   modal is open, lift the footer above the blurred overlay and pin it to the
   bottom so its links stay legible. */
.app footer {
    display: none;
}

.app:has(.overlay[data-modal='welcome'][open]) footer {
    display: flex;
    position: fixed;
    inset: auto 0 0;
    z-index: 1001;
    margin: 0;
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
}

footer {
    position: relative;
    margin: 0.3rem 1rem 0.3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6rem;

    .version {
        opacity: 0.4;
        font-size: 80%;
    }

    > div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        opacity: 0.5;
    }

    & svg {
        fill: var(--gray-400);
        height: 0.7rem;
        margin: 0 0.125rem;
        vertical-align: text-top;
    }

}

.landscape-only {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    text-align: center;
    color: var(--gray-500);
    display: none;

    & h1 {
        margin: 0;
        & span {
            color: white;
            display: inline-block;
            transition: all 3s;
            transform: scale(1, 1) translateY(0);
        }
    }
    & p {
        margin: 1rem 0 1.5rem;
    }

    & svg {
        fill: var(--gray-500);
        width: 5rem;
        margin: 0 auto;
    }
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .app {
        display: none !important;
    }
    .landscape-only {
        display: flex;
    }
}