:root {
    --hud-height: clamp(52px, 7vh, 68px);
    --hud-gap: clamp(10px, 1.8vw, 16px);
    --hud-horizontal-padding: clamp(10px, 2vw, 18px);
    --tools-height: clamp(38px, 5.5vh, 48px);
    --button-height: clamp(48px, 6.5vh, 64px);
    --board-light: #f5fefd;
    --board-dark: #000;
}

html {
    background-color: var(--board-light);
    background-image: none;
    transition: background-color 0.2s ease, background-image 0.2s ease;
}

html[data-theme="dark"] {
    background-color: var(--board-dark);
    background-image: none;
}

body {
    color: #122538;
}

#hud {
    box-sizing: border-box;
    backdrop-filter: blur(14px);
    align-items: center;
    justify-content: space-between;
    gap: var(--hud-gap);
    min-height: calc(var(--hud-height) + env(safe-area-inset-top));
    padding:
        calc(8px + env(safe-area-inset-top))
        calc(var(--hud-horizontal-padding) + env(safe-area-inset-right))
        8px
        calc(var(--hud-horizontal-padding) + env(safe-area-inset-left));
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1600;
}

html[data-theme="light"] #hud {
    background: #f5fefd;
    box-shadow: 0 0.75rem 1.8rem rgb(27 84 118 / 0.14);
}

html[data-theme="dark"] #hud {
    background: linear-gradient(180deg, rgb(18 18 18 / 0.96), rgb(0 0 0 / 0.88));
    box-shadow: 0 0.75rem 1.8rem rgb(0 0 0 / 0.42);
}

#themeToggleButton,
.hudTimer,
.toolsBar button {
    border-radius: 999px;
    box-shadow: 0 0.45rem 1rem rgb(0 0 0 / 0.12);
}

#themeToggleButton {
    letter-spacing: 0;
    border: 0;
    padding: 10px 16px;
    min-width: 124px;
    font: inherit;
    font-size: clamp(14px, 1.85vh, 16px);
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

#themeToggleButton:hover,
#themeToggleButton:focus-visible {
    transform: translateY(-1px);
}

#themeToggleButton:focus-visible {
    outline: 2px solid #f6c858;
    outline-offset: 2px;
}

html[data-theme="light"] #themeToggleButton {
    color: #0d4568;
    background: linear-gradient(180deg, #fff 0%, #ddf3ff 100%);
}

html[data-theme="dark"] #themeToggleButton {
    color: #f7f0db;
    background: linear-gradient(180deg, #1f1f1f 0%, #090909 100%);
}

.hudTimer {
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 108px;
    padding: 10px 16px;
    display: inline-flex;
}

.hudTimerLabel {
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: clamp(10px, 1.2vh, 12px);
    font-weight: 700;
    opacity: 0.82;
}

.hudTimerValue {
    letter-spacing: 0;
    font-size: clamp(16px, 2.1vh, 20px);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

html[data-theme="light"] .hudTimer {
    color: #173955;
    background: rgb(255 255 255 / 0.86);
}

html[data-theme="dark"] .hudTimer {
    color: #f7f0db;
    background: rgb(22 22 22 / 0.88);
}

.toolsBar {
    box-sizing: border-box;
    gap: 8px;
    align-items: center;
    min-height: var(--tools-height);
    padding:
        0
        calc(var(--hud-horizontal-padding) + env(safe-area-inset-right))
        8px
        calc(var(--hud-horizontal-padding) + env(safe-area-inset-left));
    display: flex;
    position: absolute;
    top: calc(var(--hud-height) + 8px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    z-index: 1600;
    overflow-x: auto;
    scrollbar-width: none;
}

.toolsBar::-webkit-scrollbar {
    display: none;
}

html[data-theme="light"] .toolsBar {
    background: #f5fefd;
}

html[data-theme="dark"] .toolsBar {
    background: #000;
}

.toolsBar button {
    border: 0;
    flex: 0 0 auto;
    padding: 9px 13px;
    font: inherit;
    font-size: clamp(13px, 1.65vh, 15px);
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

.toolsBar button:hover,
.toolsBar button:focus-visible {
    transform: translateY(-1px);
}

.toolsBar button:focus-visible {
    outline: 2px solid #f6c858;
    outline-offset: 2px;
}

html[data-theme="light"] .toolsBar button {
    color: #0d4568;
    background-color: #fff;
    background-image: linear-gradient(180deg, #fff 0%, #ddf3ff 100%);
}

html[data-theme="light"] .toolsBar button.isActive {
    color: #fff;
    background-color: #0d4568;
    background-image: linear-gradient(180deg, #16628f 0%, #0d4568 100%);
}

html[data-theme="dark"] .toolsBar button {
    color: #f7f0db;
    background-color: #1f1f1f;
    background-image: linear-gradient(180deg, #1f1f1f 0%, #090909 100%);
}

html[data-theme="dark"] .toolsBar button.isActive {
    color: #0b0b0b;
    background-color: #f6c858;
    background-image: linear-gradient(180deg, #ffe28a 0%, #f6c858 100%);
}

#tableHolder {
    top: calc(var(--hud-height) + var(--tools-height) + 14px + env(safe-area-inset-top));
    bottom: calc(var(--button-height) + 10px + env(safe-area-inset-bottom));
}

#buttons {
    gap: clamp(0.55rem, 1.4vw, 0.95rem);
    padding:
        0.7rem
        calc(var(--hud-horizontal-padding) + env(safe-area-inset-right))
        calc(0.95rem + env(safe-area-inset-bottom))
        calc(var(--hud-horizontal-padding) + env(safe-area-inset-left));
    z-index: 1600;
}

html[data-theme="light"] #buttons {
    background: #f5fefd;
    box-shadow: 0 -0.75rem 1.6rem rgb(44 103 135 / 0.14);
}

html[data-theme="dark"] #buttons {
    background: linear-gradient(180deg, rgb(15 15 15 / 0.92), rgb(0 0 0 / 0.97));
    box-shadow: 0 -0.75rem 1.6rem rgb(0 0 0 / 0.32);
}

#buttons button {
    border: 0;
    box-shadow: 0 0.45rem 1rem rgb(0 0 0 / 0.12);
    line-height: 1.1;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

#buttons button:hover,
#buttons button:focus-visible {
    transform: translateY(-1px);
}

#buttons button:focus-visible {
    outline: 2px solid #f6c858;
    outline-offset: 2px;
}

html[data-theme="light"] #buttons button {
    color: #0d4568;
    background-color: #fff;
    background-image: linear-gradient(180deg, #fff 0%, #ddf3ff 100%);
}

html[data-theme="dark"] #buttons button {
    color: #f7f0db;
    background-color: #1f1f1f;
    background-image: linear-gradient(180deg, #1f1f1f 0%, #090909 100%);
}

.gameScore {
    /* The Stats panel replaces the bundled score/progress tracker. */
    display: none !important;
}

.card .cardBack {
    background-image: url(1B.48053963.svg) !important;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

html[data-theme="dark"] .pile.showFrame {
    background-color: rgb(255 255 255 / 0.03);
    border-radius: 1rem;
    box-shadow: inset 0 0 0 0.16rem rgb(255 255 255 / 0.7);
    filter: invert(1) brightness(1.18) drop-shadow(0 0 0.45rem rgb(255 255 255 / 0.12));
}

.winOverlay {
    align-items: center;
    justify-content: center;
    padding:
        calc(var(--hud-height) + 18px + env(safe-area-inset-top))
        calc(18px + env(safe-area-inset-right))
        calc(var(--button-height) + 18px + env(safe-area-inset-bottom))
        calc(18px + env(safe-area-inset-left));
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 2200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.winOverlay[hidden] {
    display: none;
}

.winOverlay.isVisible {
    pointer-events: auto;
    opacity: 1;
}

.winOverlay::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
}

html[data-theme="light"] .winOverlay::before {
    background: rgb(245 254 253 / 0.62);
}

html[data-theme="dark"] .winOverlay::before {
    background: rgb(0 0 0 / 0.54);
}

.winPanel {
    text-align: center;
    width: min(86vw, 390px);
    border-radius: 22px;
    padding: clamp(22px, 5vh, 34px);
    position: relative;
    z-index: 2;
    overflow: hidden;
    transform: translateY(10px) scale(0.94);
    animation: winPanelPop 0.48s cubic-bezier(0.2, 0.9, 0.2, 1.18) forwards;
    box-shadow: 0 22px 46px rgb(0 0 0 / 0.22);
}

html[data-theme="light"] .winPanel {
    color: #0d4568;
    background: linear-gradient(180deg, #fff 0%, #f5fefd 100%);
    border: 1px solid rgb(13 69 104 / 0.13);
}

html[data-theme="dark"] .winPanel {
    color: #f7f0db;
    background: linear-gradient(180deg, #1f1f1f 0%, #090909 100%);
    border: 1px solid rgb(255 255 255 / 0.16);
}

.winKicker {
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 800;
    opacity: 0.72;
}

.winPanel h1 {
    letter-spacing: 0;
    margin: 0;
    font-size: clamp(40px, 8vh, 64px);
    line-height: 0.98;
}

.winSummary {
    max-width: 26rem;
    margin: 12px auto 0;
    font-size: clamp(14px, 2vh, 16px);
    font-weight: 800;
    line-height: 1.35;
    opacity: 0.82;
}

.winTime {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-radius: 999px;
    margin: 22px auto;
    padding: 12px 16px;
    display: flex;
}

html[data-theme="light"] .winTime {
    background: rgb(221 243 255 / 0.7);
}

html[data-theme="dark"] .winTime {
    background: rgb(255 255 255 / 0.08);
}

.winTime span {
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
    opacity: 0.72;
}

.winTime strong {
    letter-spacing: 0;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.winActions {
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    display: flex;
}

#winNewGameButton {
    color: #0d4568;
    background-color: #fff;
    background-image: linear-gradient(180deg, #fff 0%, #ddf3ff 100%);
    border: 0;
    border-radius: 999px;
    min-width: min(100%, 190px);
    padding: 13px 22px;
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: 0 0.45rem 1rem rgb(0 0 0 / 0.12);
}

html[data-theme="dark"] #winNewGameButton {
    color: #f7f0db;
    background-color: #1f1f1f;
    background-image: linear-gradient(180deg, #1f1f1f 0%, #090909 100%);
}

#winNewGameButton:hover,
#winNewGameButton:focus-visible {
    transform: translateY(-1px);
}

#winNewGameButton:focus-visible {
    outline: 2px solid #f6c858;
    outline-offset: 3px;
}

.winSparkField {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.winSpark {
    width: 8px;
    height: 18px;
    border-radius: 999px;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg));
    animation: winSparkFly 760ms ease-out forwards;
    animation-delay: var(--delay, 0ms);
}

.winSpark:nth-child(3n + 1) {
    background: #f6c858;
}

.winSpark:nth-child(3n + 2) {
    background: #0d4568;
}

.winSpark:nth-child(3n + 3) {
    background: #d82016;
}

html[data-theme="dark"] .winSpark:nth-child(3n + 2) {
    background: #f5fefd;
}

@keyframes winPanelPop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.94);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes winSparkFly {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(0) scale(0.72);
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(var(--angle, 0deg))
            translateY(var(--distance, -150px))
            scale(1);
    }
}

.statsOverlay {
    align-items: center;
    justify-content: center;
    padding:
        calc(var(--hud-height) + var(--tools-height) + 18px + env(safe-area-inset-top))
        calc(18px + env(safe-area-inset-right))
        calc(var(--button-height) + 18px + env(safe-area-inset-bottom))
        calc(18px + env(safe-area-inset-left));
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 2250;
}

.statsOverlay[hidden] {
    display: none;
}

.statsOverlay::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
}

html[data-theme="light"] .statsOverlay::before {
    background: rgb(245 254 253 / 0.68);
}

html[data-theme="dark"] .statsOverlay::before {
    background: rgb(0 0 0 / 0.58);
}

.statsPanel {
    width: min(88vw, 420px);
    border-radius: 22px;
    padding: 24px;
    position: relative;
    z-index: 2;
    box-shadow: 0 22px 46px rgb(0 0 0 / 0.22);
}

html[data-theme="light"] .statsPanel {
    color: #0d4568;
    background: linear-gradient(180deg, #fff 0%, #f5fefd 100%);
    border: 1px solid rgb(13 69 104 / 0.13);
}

html[data-theme="dark"] .statsPanel {
    color: #f7f0db;
    background: linear-gradient(180deg, #1f1f1f 0%, #090909 100%);
    border: 1px solid rgb(255 255 255 / 0.16);
}

.statsCloseButton {
    align-items: center;
    color: inherit;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    justify-content: center;
    width: 52px;
    height: 52px;
    font: inherit;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 4;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.15s ease,
        background-color 0.15s ease;
}

html[data-theme="light"] .statsCloseButton {
    background: rgb(221 243 255 / 0.75);
}

html[data-theme="dark"] .statsCloseButton {
    background: rgb(255 255 255 / 0.1);
}

.statsCloseButton:hover,
.statsCloseButton:focus-visible {
    transform: translateY(-1px);
}

.statsCloseButton:focus-visible {
    outline: 2px solid #f6c858;
    outline-offset: 2px;
}

.statsKicker {
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 800;
    opacity: 0.72;
}

.statsPanel h2 {
    letter-spacing: 0;
    margin: 0 0 18px;
    font-size: clamp(30px, 5vh, 42px);
    line-height: 1;
}

.statsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    display: grid;
}

.statsGrid div {
    border-radius: 16px;
    padding: 14px;
}

html[data-theme="light"] .statsGrid div {
    background: rgb(221 243 255 / 0.7);
}

html[data-theme="dark"] .statsGrid div {
    background: rgb(255 255 255 / 0.08);
}

.statsGrid dt {
    text-transform: uppercase;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 800;
    opacity: 0.72;
}

.statsGrid dd {
    margin: 0;
    font-size: clamp(22px, 4vh, 30px);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

@media screen and (width <= 768px) {
    #hud {
        min-height: auto;
        padding-top: calc(8px + env(safe-area-inset-top));
        padding-bottom: 8px;
    }

    #themeToggleButton,
    .hudTimer {
        padding: 10px 12px;
    }

    #buttons button {
        max-width: none;
        padding-inline: 0.65rem;
        font-size: clamp(0.9rem, 1.95vh, 1rem);
    }

    .toolsBar button {
        padding: 8px 11px;
    }

    .toolsBar #turnOneButton,
    .toolsBar #turnThreeButton {
        padding-inline: 10px;
    }
}

@media screen and (width <= 540px) {
    #themeToggleButton {
        min-width: 118px;
        font-size: 15px;
    }

    .hudTimer {
        min-width: 102px;
    }

    .hudTimerValue {
        font-size: 18px;
    }

    .winPanel {
        width: min(90vw, 340px);
        padding: 22px;
    }

    .winTime {
        align-items: center;
        flex-direction: column;
        gap: 6px;
        border-radius: 18px;
    }

    .statsPanel {
        padding: 22px;
    }

    .statsGrid {
        grid-template-columns: 1fr;
    }
}