* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 24px 12px;
    background: #eef2f8;
    color: #202020;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
}

.site-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 760px;
    margin: 0 auto 14px;
}

.site-nav a {
    padding: 9px 14px;
    border: 1px solid #b7c9ee;
    border-radius: 999px;
    background: #fff;
    color: #123b94;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a.active {
    border-color: #0845ba;
    background: #0955db;
    color: #fff;
}

.game {
    max-width: 760px;
    margin: 0 auto;
    overflow: hidden;
    background: #fafbff;
    border: 1px solid #dce2ef;
    border-radius: 12px;
    box-shadow: 0 5px 20px #153c7712;
}

.difficulty {
    max-width: 760px;
    margin: 18px auto 0;
    padding: 22px;
    border: 1px solid #dce2ef;
    border-radius: 12px;
    background: #fafbff;
    box-shadow: 0 5px 20px #153c7712;
}

.difficulty > p {
    margin: -10px 0 20px;
    color: #556176;
    text-align: center;
}

.difficulty-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.difficulty-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 84px;
    margin: 0;
    padding: 10px 6px;
    border: 2px solid #cddcff;
    background: #f1f5ff;
    color: #123b94;
}

.difficulty-button:hover,
.difficulty-button.selected {
    border-color: #0845ba;
    background: #0955db;
    color: white;
}

.difficulty-button:hover:not(.selected) {
    transform: translateY(-4px);
    box-shadow: 0 5px 0 #b7c9ee;
}

.difficulty-button span {
    font-size: 18px;
}

.difficulty-button small {
    margin-top: 5px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.25;
}

.difficulty-button.baby { border-bottom-color: #5caf76; }
.difficulty-button.easy { border-bottom-color: #68a6d9; }
.difficulty-button.normal { border-bottom-color: #e2b34e; }
.difficulty-button.hard { border-bottom-color: #db6a52; }
.difficulty-button.pro { border-bottom-color: #8d61c6; }

.game-header {
    padding: 12px 16px;
    background: #083eaa;
    color: white;
    text-align: center;
}

h1 {
    margin: 0;
    font-size: 24px;
}

.game-content {
    padding: 16px;
}

.instructions {
    margin-bottom: 24px;
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
}

.instructions p {
    margin: 0 0 6px;
}

.game-panels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.panel {
    min-width: 0;
    padding: 18px 16px;
    border: 2px solid #e4e9f5;
    border-radius: 9px;
    background: #f5f7ff;
}

h2 {
    margin: 0 0 20px;
    color: #123b94;
    font-size: 18px;
    text-align: center;
}

input,
button {
    width: 100%;
    min-height: 44px;
    border-radius: 7px;
    font: inherit;
}

input {
    padding: 8px 12px;
    border: 2px solid #d9deea;
    background: white;
}

button {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #0845ba;
    background: #0955db;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    background: #0843b0;
}

button:disabled {
    opacity: 0.55;
    cursor: default;
}

input:focus-visible,
button:focus-visible {
    outline: 3px solid #638fff;
    outline-offset: 3px;
}

#game-message {
    margin: 0;
    color: #084bc6;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
}

.game-status {
    margin: 0;
    font-weight: bold;
}

.game-status div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.game-status div:last-child {
    margin-bottom: 0;
}

.game-status dd {
    margin: 0;
}

.history-panel {
    margin-top: 12px;
}

.history-panel h2 {
    margin-bottom: 12px;
}

#guess-history {
    display: flex;
    flex-wrap: wrap;
    min-height: 58px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 2px solid #e4e7ef;
    border-radius: 7px;
    background: white;
    overflow: hidden;
}

#guess-history:empty::before {
    content: "Your guesses will appear here.";
    margin: auto;
    padding: 12px;
    color: #626b7b;
    text-align: center;
}

#guess-history li {
    flex: 1 0 95px;
    padding: 16px 10px;
    border: 1px solid #e4e7ef;
    font-weight: bold;
    text-align: center;
}

#guess-history li::after {
    display: block;
    margin-top: 2px;
    font-size: 23px;
    line-height: 18px;
}

#guess-history li.too-low {
    background: #e7f2ff;
    color: #075db2;
}

#guess-history li.too-low::after {
    content: "↑";
}

#guess-history li.too-high {
    background: #ffe9ea;
    color: #b21e26;
}

#guess-history li.too-high::after {
    content: "↓";
}

#guess-history li.correct {
    background: #e8f8ed;
    color: #176537;
}

#guess-history li.correct::after {
    content: "✓";
}

.result-modal {
    position: fixed;
    z-index: 10;
    inset: 0;
    display: none;
    place-items: center;
    padding: 20px;
    background: #07162acc;
}

.result-modal.is-visible {
    display: grid;
}

.result-card {
    width: min(100%, 440px);
    padding: 32px;
    border: 3px solid #6d97ff;
    border-radius: 16px;
    background: white;
    box-shadow: 0 18px 50px #0007;
    text-align: center;
}

.result-card h2 {
    margin-bottom: 12px;
    font-size: 28px;
}

.result-card p {
    line-height: 1.5;
}

#result-label {
    margin: 0 0 8px;
    color: #0955db;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.result-card button {
    margin-top: 18px;
}

/* Baby mode uses a light-sky background and mint-green accents. */
body.baby-mode {
    background: linear-gradient(135deg, #dff5ff, #edfdf8);
    color: #24453f;
}

body.baby-mode .game,
body.baby-mode .difficulty,
body.baby-mode .result-card {
    border-color: #a9dfcf;
    background: #fbfffd;
    box-shadow: 0 8px 24px #79bfa636;
}

body.baby-mode .game-header {
    background: linear-gradient(90deg, #62caae, #8ce0c1);
}

body.baby-mode h2,
body.baby-mode #game-message,
body.baby-mode #result-label {
    color: #247862;
}

body.baby-mode .panel {
    background: #effcf6;
    border-color: #c4eadc;
}

body.baby-mode input,
body.baby-mode #guess-history {
    border-color: #a9dfcf;
    background: #fff;
}

body.baby-mode button,
body.baby-mode .difficulty-button.selected {
    border-color: #2d977b;
    background: #48b596;
}

body.baby-mode button:hover {
    background: #318e75;
}

body.baby-mode input:focus-visible,
body.baby-mode button:focus-visible {
    outline-color: #48b596;
}

body.baby-mode .result-modal {
    background: #236e5999;
}

body.baby-mode .site-nav a {
    border-color: #a9dfcf;
    background: #fbfffd;
    color: #247862;
}

body.baby-mode .site-nav a:hover,
body.baby-mode .site-nav a.active {
    border-color: #2d977b;
    background: #48b596;
    color: #fff;
}

body.baby-mode #guess-history li.too-low {
    background: #ddf8ec;
    color: #21765f;
}

body.baby-mode #guess-history li.too-high {
    background: #fff0e5;
    color: #a64e27;
}

body.baby-mode #guess-history li.correct {
    background: #c9f2dc;
    color: #176548;
}

/* Pro mode is black with clear red challenge accents. */
body.pro-mode {
    background: radial-gradient(circle at top, #2a0909, #060606 65%);
    color: #f7eeee;
}

body.pro-mode .game,
body.pro-mode .difficulty,
body.pro-mode .result-card {
    border-color: #7e2020;
    background: #151010;
    box-shadow: 0 12px 30px #000c;
}

body.pro-mode .game-header {
    background: #050505;
    border-bottom: 3px solid #c42b2b;
}

body.pro-mode .panel {
    border-color: #532020;
    background: #211717;
}

body.pro-mode h2,
body.pro-mode #game-message,
body.pro-mode .difficulty > p {
    color: #ff9f9f;
}

body.pro-mode input,
body.pro-mode #guess-history {
    border-color: #7c2929;
    background: #0b0808;
    color: #fff;
}

body.pro-mode button {
    border-color: #a82d2d;
    background: #941d1d;
}

body.pro-mode #result-label {
    color: #ff8585;
}

body.pro-mode button:hover {
    background: #b62a2a;
}

body.pro-mode input:focus-visible,
body.pro-mode button:focus-visible {
    outline-color: #d83c3c;
}

body.pro-mode .result-modal {
    background: #050000e6;
}

body.pro-mode .site-nav a {
    border-color: #7e2020;
    background: #151010;
    color: #ffb3b3;
}

body.pro-mode .site-nav a:hover,
body.pro-mode .site-nav a.active {
    border-color: #d03b3b;
    background: #a82222;
    color: #fff;
}

body.pro-mode #guess-history li.too-low {
    background: #351414;
    color: #ffadad;
}

body.pro-mode #guess-history li.too-high {
    background: #410b0b;
    color: #ff7777;
}

body.pro-mode #guess-history li.correct {
    background: #1b2b1b;
    color: #c3efbd;
}

/* The selected difficulty remains blue and rises while its game is active. */
body .difficulty-button.selected {
    border-color: #0845ba;
    background: #0955db;
    color: white;
    transform: translateY(-6px);
    box-shadow: 0 7px 0 #06358b;
}

body.baby-mode .difficulty-button.selected {
    border-color: #2d977b;
    background: #48b596;
    box-shadow: 0 7px 0 #23745e;
}

body.pro-mode .difficulty-button.selected {
    border-color: #d03b3b;
    background: #a82222;
    box-shadow: 0 7px 0 #591010;
}

.difficulty-button[aria-disabled="true"]:not(.selected) {
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .game-panels {
        grid-template-columns: 1fr;
    }

    .difficulty-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    h1 {
        font-size: 22px;
    }

    .panel {
        padding: 18px;
    }
}