:root {
    --paint-paper: #f3d68f;
    --paint-paper-weird: #ffe2a1;
    --paint-cream: #fff1bd;
    --paint-butter: #fff8cb;
    --paint-input-light: #fff7d9;
    --paint-input-dark: #ffe9aa;
    --paint-placeholder: #fff5d6;
    --paint-card: rgba(255, 241, 189, 0.92);
    --paint-card-pale: rgba(255, 250, 214, 0.82);
    --paint-ink: #281707;
    --paint-brown: #7d430d;
    --paint-brown-wrong: #9b5d17;
    --paint-brown-dark: #4f2a08;
    --paint-orange: #c97816;
    --paint-table-head: #d89024;
    --paint-table-line: #c79c62;
    --paint-yellow: #f7c83a;
    --paint-green: #377f27;
    --paint-red: #b51f13;
    --paint-blue-shadow: #7aa2c0;
    --paint-white-scratch: rgba(255, 255, 255, 0.62);
    --paint-modal-stripe: rgba(255, 248, 203, 0.16);
    --paint-modal-backdrop: rgba(40, 23, 7, 0.62);
    --paint-gap-sm: 6px;
    --paint-gap-md: 12px;
    --paint-gap-lg: 18px;
    --paint-gap-xl: 30px;
    --paint-border-thin: 2px;
    --paint-border-fat: 4px;
    --paint-radius-small: 3px;
    --paint-radius-wrong: 7px 2px 10px 4px;
    --paint-shadow-stomp: 7px 5px 0 rgba(79, 42, 8, 0.34);
    --paint-shadow-small: 3px 4px 0 rgba(40, 23, 7, 0.28);
    --paint-notice-bg: rgba(255, 248, 203, 0.78);
    --paint-notice-ink: rgba(79, 42, 8, 0.72);
    --paint-notice-size: clamp(0.72rem, 1.6vw, 0.88rem);
    --paint-notice-space: calc(var(--paint-gap-xl) + var(--paint-gap-md));
    --paint-font: "Comic Sans MS", "Comic Sans", "MS PGothic", "Courier New", monospace;
    --paint-panel-skin: url("../assets/images/ui/panel.png");
    --paint-coin-icon: url("../assets/images/ui/coin.png");
    --paint-coin-icon-size: 1.28em;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    padding-bottom: calc(var(--paint-gap-xl) + var(--paint-gap-lg));
    font-family: var(--paint-font);
    color: var(--paint-ink);
    background:
        repeating-linear-gradient(90deg, rgba(79, 42, 8, 0.08) 0 2px, transparent 2px 18px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 15px),
        radial-gradient(circle at 12% 18%, rgba(201, 120, 22, 0.32) 0 28px, transparent 31px),
        var(--paint-paper);
    letter-spacing: 0.02em;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.52);
}

body::after {
    content: "本遊戲美術皆使用AI生成";
    position: fixed;
    right: var(--paint-gap-md);
    bottom: var(--paint-gap-sm);
    z-index: 20;
    padding: var(--paint-gap-sm) var(--paint-gap-md);
    border: var(--paint-border-thin) dotted var(--paint-brown);
    border-radius: var(--paint-radius-small);
    color: var(--paint-notice-ink);
    background: var(--paint-notice-bg);
    font-size: var(--paint-notice-size);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    opacity: 0.72;
    pointer-events: none;
    image-rendering: pixelated;
}

.page-home { background: var(--paint-paper) url("../assets/images/bg/home_bg.png") center / cover fixed; image-rendering: pixelated; }
.page-login { background: var(--paint-paper) url("../assets/images/bg/login_bg.png") center / cover fixed; image-rendering: pixelated; }
.page-menu { background: var(--paint-paper) url("../assets/images/bg/menu_bg.png") center / cover fixed; image-rendering: pixelated; }
.page-game { background: var(--paint-paper) url("../assets/images/bg/race_bg.png") center / cover fixed; image-rendering: pixelated; }
.page-race { background: var(--paint-paper) url("../assets/images/bg/race_bg.png") center / cover fixed; image-rendering: pixelated; }
.page-earn { background: var(--paint-paper) url("../assets/images/bg/earn_bg.png") center / cover fixed; image-rendering: pixelated; }

.panel {
    width: min(1000px, calc(100% - 32px));
    margin: var(--paint-gap-xl) auto;
    padding: var(--paint-gap-lg) var(--paint-gap-lg) var(--paint-gap-md) var(--paint-gap-md);
    background:
        linear-gradient(3deg, rgba(255, 226, 161, 0.88), rgba(255, 241, 189, 0.96)),
        repeating-linear-gradient(135deg, rgba(125, 67, 13, 0.10) 0 3px, transparent 3px 11px);
    border: var(--paint-border-fat) solid var(--paint-brown-dark);
    border-style: solid dashed double solid;
    border-radius: var(--paint-radius-wrong);
    box-shadow: var(--paint-shadow-stomp), -2px -2px 0 var(--paint-blue-shadow) inset;
    transform: rotate(-0.25deg);
}

.button, button {
    display: inline-block;
    margin: var(--paint-gap-sm);
    padding: 10px var(--paint-gap-lg);
    border: var(--paint-border-fat) solid var(--paint-brown-dark);
    border-style: dashed solid solid dashed;
    border-radius: var(--paint-radius-small);
    color: var(--paint-butter);
    background:
        linear-gradient(180deg, var(--paint-orange) 0 44%, var(--paint-brown) 45% 100%);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--paint-font);
    font-weight: 700;
    box-shadow: var(--paint-shadow-small);
    text-shadow: 2px 1px 0 var(--paint-brown-dark);
    image-rendering: pixelated;
}

.button:hover, button:hover {
    background:
        linear-gradient(180deg, var(--paint-yellow) 0 35%, var(--paint-brown-wrong) 36% 100%);
    color: var(--paint-ink);
    transform: translate(1px, -1px) rotate(0.6deg);
}

.button:active, button:active {
    transform: translate(3px, 3px) rotate(-0.8deg);
    box-shadow: 1px 1px 0 rgba(40, 23, 7, 0.32);
}

input {
    padding: 9px;
    border: var(--paint-border-thin) dotted var(--paint-brown-dark);
    border-bottom-width: var(--paint-border-fat);
    border-radius: var(--paint-radius-small);
    background:
        repeating-linear-gradient(90deg, var(--paint-input-light) 0 6px, var(--paint-input-dark) 6px 8px);
    color: var(--paint-ink);
    font-family: var(--paint-font);
    box-shadow: 2px 2px 0 rgba(79, 42, 8, 0.22) inset;
}

.error { color: var(--paint-red); font-weight: 700; text-decoration: underline wavy var(--paint-red); }
.success { color: var(--paint-green); font-weight: 700; text-decoration: underline dashed var(--paint-green); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--paint-gap-lg); }
.horse-card { padding: var(--paint-gap-md); background: var(--paint-card-pale); border: var(--paint-border-thin) solid var(--paint-brown); border-style: dotted dashed solid double; border-radius: 2px 9px 4px 11px; text-align: center; box-shadow: 4px 3px 0 rgba(125, 67, 13, 0.25); transform: rotate(0.18deg); }
.horse-card:nth-child(odd) { transform: rotate(-0.28deg); }
.horse-image { max-width: 150px; max-height: 110px; object-fit: contain; image-rendering: pixelated; filter: saturate(1.18) contrast(1.05); }
.coin-image { max-width: 180px; cursor: pointer; transition: transform 0.16s; image-rendering: pixelated; filter: saturate(1.25) contrast(1.08); }
.coin-image:hover { transform: rotate(-4deg) scale(1.03); }
.coin-image:active { transform: scale(0.94) rotate(6deg); }
.image-placeholder { display: inline-flex; align-items: center; justify-content: center; min-height: 90px; min-width: 140px; border: var(--paint-border-fat) dashed var(--paint-brown); background: repeating-linear-gradient(45deg, var(--paint-placeholder) 0 7px, var(--paint-paper) 7px 13px); color: var(--paint-brown-dark); box-shadow: 3px 2px 0 rgba(79, 42, 8, 0.22); }
.hidden { display: none; }
table { width: 100%; border-collapse: collapse; background: var(--paint-card); border: var(--paint-border-fat) solid var(--paint-brown-dark); box-shadow: var(--paint-shadow-small); }
th, td { padding: 8px; border: var(--paint-border-thin) dashed var(--paint-table-line); text-align: left; }
th { background: var(--paint-table-head); color: var(--paint-butter); text-shadow: 1px 1px 0 var(--paint-brown-dark); }
td { background: rgba(255, 250, 214, 0.58); }

.page-home {
    --home-page-gutter: clamp(var(--paint-gap-lg), 5vw, calc(var(--paint-gap-xl) + var(--paint-gap-lg)));
    --home-panel-width: 1080px;
    --home-panel-min-height: 520px;
    --home-panel-padding-block: clamp(calc(var(--paint-gap-xl) + var(--paint-gap-md)), 8vh, calc(var(--paint-gap-xl) * 3));
    --home-panel-padding-inline: clamp(var(--paint-gap-lg), 7vw, calc(var(--paint-gap-xl) * 3));
    --home-title-size: clamp(3.6rem, 10vw, 7.2rem);
    --home-copy-size: clamp(1.35rem, 3vw, 2.25rem);
    --home-button-size: clamp(1.18rem, 2.4vw, 1.65rem);
    --home-button-width: clamp(160px, 20vw, 240px);
    --home-mascot-size: clamp(140px, 24vw, 280px);
    --home-mascot-overlap: clamp(var(--paint-gap-md), 3vw, var(--paint-gap-xl));
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--home-page-gutter);
}

.page-home .home-entrance {
    width: min(var(--home-panel-width), 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-home .home-mascot {
    position: relative;
    z-index: 2;
    display: block;
    width: var(--home-mascot-size);
    max-width: min(58vw, var(--home-mascot-size));
    height: auto;
    margin: 0 auto calc(var(--home-mascot-overlap) * -1);
    filter: saturate(1.14) contrast(1.06) drop-shadow(var(--paint-gap-sm) var(--paint-gap-sm) 0 var(--paint-brown-dark));
    image-rendering: pixelated;
    transform: rotate(-1.5deg);
}

.page-home .panel {
    position: relative;
    z-index: 1;
    width: min(var(--home-panel-width), 100%);
    min-height: min(64vh, var(--home-panel-min-height));
    margin: 0 auto;
    padding: calc(var(--home-panel-padding-block) + var(--home-mascot-overlap)) var(--home-panel-padding-inline) var(--home-panel-padding-block);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    row-gap: var(--paint-gap-lg);
    column-gap: var(--paint-gap-md);
    text-align: center;
}

.page-home .panel h1 {
    width: 100%;
    margin: 0;
    font-size: var(--home-title-size);
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-shadow: 3px 2px 0 var(--paint-butter), 5px 4px 0 rgba(125, 67, 13, 0.28);
    transform: rotate(-1deg);
}

.page-home .panel p {
    width: 100%;
    max-width: 860px;
    margin: 0 auto var(--paint-gap-md);
    font-size: var(--home-copy-size);
    line-height: 1.42;
    font-weight: 700;
}

.page-home .button {
    min-width: var(--home-button-width);
    margin: 0;
    padding: clamp(var(--paint-gap-md), 2vh, var(--paint-gap-lg)) clamp(var(--paint-gap-xl), 5vw, calc(var(--paint-gap-xl) + var(--paint-gap-xl)));
    border-width: calc(var(--paint-border-fat) + var(--paint-border-thin));
    font-size: var(--home-button-size);
}

@media (max-width: 640px), (max-height: 640px) {
    .page-home {
        align-items: flex-start;
    }

    .page-home .panel {
        min-height: auto;
    }

    .page-home .home-mascot {
        max-width: min(62vw, var(--home-mascot-size));
    }
}

@media (max-width: 520px) {
    .page-home .button {
        width: min(100%, 280px);
        text-align: center;
    }
}

.page-login,
.page-menu,
.page-earn,
.page-game {
    --app-page-gutter: clamp(var(--paint-gap-lg), 4vw, calc(var(--paint-gap-xl) + var(--paint-gap-lg)));
    --app-panel-width: 1120px;
    --app-panel-min-height: 480px;
    --app-panel-padding-block: clamp(var(--paint-gap-xl), 6vh, calc(var(--paint-gap-xl) + var(--paint-gap-xl)));
    --app-panel-padding-inline: clamp(var(--paint-gap-lg), 5vw, calc(var(--paint-gap-xl) + var(--paint-gap-xl)));
    --app-title-size: clamp(2.7rem, 6vw, 4.9rem);
    --app-copy-size: clamp(1.15rem, 2vw, 1.55rem);
    --app-control-size: clamp(1.08rem, 1.8vw, 1.35rem);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--app-page-gutter);
}

.page-login .panel,
.page-menu .panel:not(:has(table)),
.page-game .panel {
    --paint-panel-plate-inset: calc(0px - var(--paint-gap-xl) - var(--paint-gap-xl) - var(--paint-gap-xl) - var(--paint-gap-xl));
    --app-panel-padding-block: clamp(calc(var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-md)), 12vh, calc(var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-xl)));
    --app-panel-padding-inline: clamp(calc(var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-xl)), 11vw, calc(var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-xl)));
    position: relative;
    isolation: isolate;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.page-login .panel::before,
.page-menu .panel:not(:has(table))::before,
.page-game .panel::before {
    content: "";
    position: absolute;
    inset: var(--paint-panel-plate-inset);
    z-index: 0;
    background: var(--paint-panel-skin) center / 100% 100% no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
}

.page-login .panel > *,
.page-menu .panel:not(:has(table)) > *,
.page-game .panel > * {
    position: relative;
    z-index: 1;
}

.page-login .panel,
.page-menu .panel,
.page-earn .panel,
.page-game .panel {
    width: min(var(--app-panel-width), 100%);
    min-height: min(66vh, var(--app-panel-min-height));
    margin: 0 auto;
    padding: var(--app-panel-padding-block) var(--app-panel-padding-inline);
    text-align: center;
}

.page-login .panel h1,
.page-menu .panel h1,
.page-earn .panel h1,
.page-game .panel h1 {
    margin: 0 0 var(--paint-gap-lg);
    font-size: var(--app-title-size);
    line-height: 0.98;
    text-shadow: 3px 2px 0 var(--paint-butter), 5px 4px 0 rgba(125, 67, 13, 0.28);
}

.page-login .panel p,
.page-menu .panel p,
.page-earn .panel p,
.page-game .panel p {
    margin: var(--paint-gap-md) auto;
    font-size: var(--app-copy-size);
    line-height: 1.38;
    font-weight: 700;
}

.page-login .button,
.page-login button,
.page-menu .button,
.page-menu button,
.page-game .button,
.page-game button {
    min-width: clamp(170px, 20vw, 260px);
    padding: var(--paint-gap-md) var(--paint-gap-xl);
    font-size: var(--app-control-size);
}

.page-login .button,
.page-login button {
    font-family: "Trebuchet MS", "Geneva", "Verdana", sans-serif;
}

.page-login form {
    display: grid;
    justify-items: center;
    gap: var(--paint-gap-md);
    width: min(460px, 100%);
    margin: var(--paint-gap-xl) auto var(--paint-gap-lg);
    padding: var(--paint-gap-lg);
    background: var(--paint-card-pale);
    border: var(--paint-border-thin) dashed var(--paint-brown);
    border-bottom-width: var(--paint-border-fat);
    border-radius: var(--paint-radius-wrong);
    box-shadow: var(--paint-shadow-small);
}

.page-login .panel form p,
.page-login .panel label {
    width: 100%;
}

.page-login .panel form p {
    margin: 0;
}

.page-login .panel form label,
.page-game .panel form label {
    display: grid;
    gap: var(--paint-gap-sm);
    text-align: left;
    font-size: var(--app-control-size);
    font-weight: 700;
}

.page-login input,
.page-game input[type="number"] {
    width: 100%;
    min-height: calc(var(--paint-gap-xl) + var(--paint-gap-xl));
    padding: var(--paint-gap-md) var(--paint-gap-lg);
    border: var(--paint-border-fat) solid var(--paint-brown-dark);
    border-style: dotted solid solid dotted;
    background: linear-gradient(180deg, var(--paint-butter), var(--paint-input-light));
    font-size: var(--app-control-size);
    font-weight: 700;
}

.page-login input[type="password"] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-menu .menu-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--paint-gap-md);
    width: min(760px, 100%);
    margin: var(--paint-gap-xl) auto 0;
}

.page-menu .menu-actions .button,
.page-menu .menu-logout .button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--paint-gap-xl) + var(--paint-gap-xl));
    margin: 0;
}

.page-menu .panel .menu-logout {
    display: flex;
    justify-content: center;
    width: min(760px, 100%);
    margin: var(--paint-gap-lg) auto 0;
}

.page-menu .panel:has(table) {
    --app-panel-width: 1220px;
    overflow-x: auto;
}

.page-menu table {
    min-width: 760px;
    margin: var(--paint-gap-lg) auto var(--paint-gap-xl);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
}

.page-menu th,
.page-menu td {
    padding: var(--paint-gap-md);
    line-height: 1.35;
}

.page-game {
    --app-page-gutter: clamp(var(--paint-gap-md), 3vw, var(--paint-gap-xl));
    --app-panel-width: 1440px;
    --app-panel-min-height: 0px;
    --app-panel-padding-inline: clamp(var(--paint-gap-md), 3vw, var(--paint-gap-xl));
    align-items: flex-start;
    padding-top: var(--paint-gap-sm);
}

.page-game .panel {
    min-height: auto;
}

.page-game .panel h1 {
    font-size: clamp(2.25rem, 4.8vw, 4.05rem);
}

.page-game .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--paint-gap-md);
    margin: var(--paint-gap-xl) auto;
    min-width: 0;
}

.page-game .horse-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    min-width: 0;
    min-height: 100%;
    padding: var(--paint-gap-md);
}

.page-menu .panel > p:nth-of-type(2)::before,
.page-game .panel > p:first-of-type::before,
.page-earn .panel p:has(#coins)::before,
.page-earn .panel p:has(#earned)::before,
#race-result p:nth-of-type(3)::before,
#race-result p:nth-of-type(4)::before,
#race-result p:nth-of-type(5)::before,
.page-menu .panel:has(table th:nth-child(4):last-child) table th:nth-child(4)::before,
.page-menu .panel:has(table th:nth-child(4):last-child) table td:nth-child(4)::before,
.page-menu .panel:has(table th:nth-child(8)) table th:nth-child(5)::before,
.page-menu .panel:has(table th:nth-child(8)) table td:nth-child(5)::before,
.page-menu .panel:has(table th:nth-child(8)) table th:nth-child(8)::before,
.page-menu .panel:has(table th:nth-child(8)) table td:nth-child(8)::before {
    content: "";
    display: inline-block;
    width: var(--paint-coin-icon-size);
    height: var(--paint-coin-icon-size);
    margin-right: var(--paint-gap-sm);
    background: var(--paint-coin-icon) center / contain no-repeat;
    image-rendering: pixelated;
    vertical-align: -0.16em;
}

.page-game .horse-card > *,
.page-game .horse-card form,
.page-game .horse-card label {
    min-width: 0;
}

.page-game .horse-image-wrapper {
    width: 100%;
    min-height: 112px;
    margin: 0 auto var(--paint-gap-md);
}

.page-game .horse-image {
    max-width: min(150px, 100%);
    max-height: 108px;
}

.page-game .horse-card h2 {
    margin: var(--paint-gap-sm) 0;
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    line-height: 1.05;
}

.page-game .horse-card p {
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    overflow-wrap: anywhere;
}

.page-game .horse-card form {
    display: grid;
    gap: var(--paint-gap-md);
    margin-top: auto;
}

.page-game .horse-card form p {
    margin: 0;
}

.page-game .horse-card button {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding-inline: var(--paint-gap-md);
    white-space: normal;
}

.page-earn .panel {
    --app-panel-width: var(--earn-panel-width);
    --app-panel-min-height: 500px;
    position: relative;
    z-index: 1;
    padding-top: calc(var(--app-panel-padding-block) + var(--earn-mascot-overlap));
}

.page-earn .earn-entrance {
    --earn-panel-width: 820px;
    --earn-mascot-width: clamp(190px, 26vw, 330px);
    --earn-mascot-overlap: clamp(var(--paint-gap-sm), 2vw, var(--paint-gap-lg));
    width: min(var(--earn-panel-width), 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-earn .earn-mascot {
    position: relative;
    z-index: 2;
    display: block;
    width: var(--earn-mascot-width);
    max-width: min(70vw, var(--earn-mascot-width));
    height: auto;
    margin: 0 auto calc(var(--earn-mascot-overlap) * -1);
    filter: saturate(1.16) contrast(1.06) drop-shadow(var(--paint-gap-sm) var(--paint-gap-sm) 0 var(--paint-brown-dark));
    image-rendering: pixelated;
    transform: rotate(1deg);
}

.page-earn #coins,
.page-earn #earned {
    display: inline-block;
    min-width: calc(var(--paint-gap-xl) + var(--paint-gap-xl));
    padding: 0 var(--paint-gap-sm);
    color: var(--paint-brown-dark);
    background: var(--paint-yellow);
    border: var(--paint-border-thin) dashed var(--paint-brown);
    box-shadow: 2px 2px 0 rgba(79, 42, 8, 0.22);
}

.page-earn form {
    display: flex;
    justify-content: center;
    margin: var(--paint-gap-xl) auto;
}

.page-earn form button {
    min-width: min(100%, 330px);
    padding: var(--paint-gap-lg);
    background: linear-gradient(2deg, var(--paint-card-pale), var(--paint-butter));
    color: var(--paint-ink);
}

.page-earn form button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.45) contrast(0.9);
}

.page-earn .coin-wrapper {
    min-width: min(100%, 250px);
    min-height: 190px;
}

.page-earn .coin-image {
    max-width: 220px;
}

@media (max-width: 900px) {
    .page-game .grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 760px), (max-height: 760px) {
    .page-login,
    .page-menu,
    .page-earn,
    .page-game {
        align-items: flex-start;
    }

    .page-login .panel,
    .page-menu .panel,
    .page-earn .panel,
    .page-game .panel {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .page-login .button,
    .page-login button,
    .page-menu .button,
    .page-menu button,
    .page-game .button,
    .page-game button {
        width: min(100%, 300px);
    }

    .page-menu .menu-actions {
        grid-template-columns: 1fr;
        width: min(100%, 300px);
    }

    .page-game .grid {
        grid-template-columns: 1fr;
    }
}
.page-race {
    --race-page-gutter: clamp(var(--paint-gap-md), 3vw, var(--paint-gap-xl));
    --race-panel-width: 1320px;
    --race-title-size: clamp(2.8rem, 5.4vw, 4.8rem);
    --race-lane-height: clamp(74px, 11vh, 94px);
    --race-horse-width: clamp(98px, 9vw, 124px);
    --race-track-lane-height: 9.2%;
    --race-track-lane-offset: 4.6%;
    --race-lane-center-1: 38.7%;
    --race-lane-center-2: 47.8%;
    --race-lane-center-3: 56.9%;
    --race-lane-center-4: 65.8%;
    --race-lane-center-5: 74.8%;
    --race-track-edge-gutter: clamp(var(--paint-gap-sm), 2.4vw, var(--paint-gap-xl));
    --race-horse-finish-offset: calc(var(--race-horse-width) + var(--race-track-edge-gutter));
    --race-horse-runner-offset: clamp(var(--paint-gap-xl), 8vw, calc(var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-xl) + var(--paint-gap-xl)));
    min-height: 100svh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--race-page-gutter);
}

.page-race > .panel {
    position: relative;
    width: min(var(--race-panel-width), 100%);
    margin: 0 auto;
    padding: clamp(var(--paint-gap-lg), 3.4vh, var(--paint-gap-xl)) clamp(var(--paint-gap-lg), 4vw, calc(var(--paint-gap-xl) + var(--paint-gap-lg))) var(--paint-gap-lg);
    text-align: center;
}

.page-race .panel h1 {
    margin: 0 auto var(--paint-gap-lg);
    font-size: var(--race-title-size);
    line-height: 0.94;
    text-align: center;
    text-shadow: 3px 2px 0 var(--paint-butter), 5px 4px 0 rgba(125, 67, 13, 0.28);
    transform: rotate(-0.65deg);
}

#countdown {
    position: absolute;
    top: clamp(96px, 11vw, 142px);
    left: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(92px, 10vw, 134px);
    min-height: calc(var(--paint-gap-xl) + var(--paint-gap-xl));
    margin: 0;
    padding: var(--paint-gap-sm) var(--paint-gap-xl);
    border: var(--paint-border-fat) solid var(--paint-brown-dark);
    border-style: dotted solid dashed solid;
    border-radius: var(--paint-radius-wrong);
    color: var(--paint-butter);
    background: linear-gradient(180deg, var(--paint-orange) 0 46%, var(--paint-brown-dark) 47% 100%);
    box-shadow: var(--paint-shadow-small), 0 0 0 var(--paint-border-thin) var(--paint-yellow) inset;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    text-shadow: 2px 2px 0 var(--paint-brown-dark);
    transform: translateX(-50%) rotate(0.8deg);
    transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease;
}

#countdown.race-status-done {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(0px - var(--paint-gap-lg))) rotate(-2deg) scale(0.88);
}

.track { position: relative; width: 100%; aspect-ratio: 2 / 1; background: rgba(70, 42, 13, 0.18) url("../assets/images/bg/track.png") center / 100% 100% no-repeat; overflow: hidden; border: var(--paint-border-fat) solid var(--paint-brown-dark); border-style: double dashed solid dotted; border-radius: 5px 1px 12px 3px; box-shadow: 8px 5px 0 rgba(40, 23, 7, 0.30) inset, 5px 4px 0 rgba(122, 162, 192, 0.42); image-rendering: pixelated; }
.track::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(255, 255, 255, 0.14) 17px 19px), repeating-linear-gradient(0deg, transparent 0 23px, rgba(79, 42, 8, 0.16) 23px 25px); mix-blend-mode: multiply; }
.race-lane { position: absolute; top: calc(var(--race-lane-center) - var(--race-track-lane-offset)); left: 0; right: 0; z-index: 2; height: var(--race-track-lane-height); border-bottom: var(--paint-border-thin) dashed var(--paint-white-scratch); }
.race-lane:nth-child(1) { --race-lane-center: var(--race-lane-center-1); }
.race-lane:nth-child(2) { --race-lane-center: var(--race-lane-center-2); }
.race-lane:nth-child(3) { --race-lane-center: var(--race-lane-center-3); }
.race-lane:nth-child(4) { --race-lane-center: var(--race-lane-center-4); }
.race-lane:nth-child(5) { --race-lane-center: var(--race-lane-center-5); }
.race-lane:nth-child(even) { background: rgba(255, 226, 161, 0.13); }
.race-lane:last-child { border-bottom: 0; }
.race-horse-wrapper { position: absolute; inset: 0; display: block; min-width: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; }
.race-horse { position: absolute; top: 50%; left: var(--race-horse-position, var(--race-track-edge-gutter)); width: var(--race-horse-width); max-height: calc(100% - var(--paint-gap-sm)); object-fit: contain; transform: translateY(-50%); transform-origin: 50% 80%; image-rendering: pixelated; filter: contrast(1.08) saturate(1.14) drop-shadow(3px 3px 0 rgba(79, 42, 8, 0.38)); }
.race-horse.winner { filter: contrast(1.08) saturate(1.14) drop-shadow(3px 3px 0 rgba(79, 42, 8, 0.38)); }
.race-horse.running { animation: horse-run 0.34s ease-in-out infinite; }

#race-result {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: var(--race-page-gutter);
    background:
        repeating-linear-gradient(135deg, var(--paint-modal-stripe) 0 var(--paint-gap-sm), transparent var(--paint-gap-sm) calc(var(--paint-gap-sm) + var(--paint-gap-md))),
        var(--paint-modal-backdrop);
}

#race-result.hidden {
    display: none;
}

.race-result-card {
    width: min(860px, 100%);
    max-height: calc(100svh - var(--race-page-gutter) - var(--race-page-gutter));
    overflow: auto;
    padding: var(--paint-gap-lg) clamp(var(--paint-gap-lg), 4vw, var(--paint-gap-xl));
    background:
        linear-gradient(3deg, var(--paint-card-pale), var(--paint-butter)),
        repeating-linear-gradient(45deg, var(--paint-placeholder) 0 var(--paint-gap-sm), var(--paint-paper) var(--paint-gap-sm) calc(var(--paint-gap-sm) + var(--paint-gap-sm)));
    border: var(--paint-border-fat) solid var(--paint-brown-dark);
    border-style: dotted solid double dashed;
    border-radius: var(--paint-radius-wrong);
    box-shadow: var(--paint-shadow-stomp), 0 0 0 var(--paint-border-thin) var(--paint-yellow) inset;
    transform: rotate(-0.35deg);
}

#race-result h2 {
    margin: 0 0 var(--paint-gap-sm);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
}

#race-result p {
    margin: var(--paint-gap-sm) auto;
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    font-weight: 700;
}

#race-result .button {
    position: relative;
    z-index: 1;
}

@keyframes horse-run {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    25% { transform: translateY(calc(-50% - 5px)) rotate(-3deg); }
    50% { transform: translateY(calc(-50% + 1px)) rotate(2deg); }
    75% { transform: translateY(calc(-50% - 3px)) rotate(-2deg); }
}

@media (max-width: 680px) {
    .page-race {
        --race-lane-height: clamp(64px, 10vh, 78px);
        --race-horse-width: clamp(82px, 20vw, 102px);
    }

    .page-race > .panel {
        padding-inline: var(--paint-gap-md);
    }
}

.page-home {
    padding-bottom: calc(var(--home-page-gutter) + var(--paint-notice-space));
}

.page-login,
.page-menu,
.page-earn,
.page-game {
    padding-bottom: calc(var(--app-page-gutter) + var(--paint-notice-space));
}

.page-race {
    padding-bottom: calc(var(--race-page-gutter) + var(--paint-notice-space));
}