:root {
    --black: #000;
    --white: #fff;
    --blue-dark: #0b4260;
    --blue: #2b00a0;
    --purple-dark: #130547;
    --orange-light: #ff872e;
    --green-neon: #72fa17;
    --green: #b7b729;
    --green-light: #f4f7cb;
    --yellow: #f1ff30;

    --drawer-width: 798px;
    --drawer-height: 200px;
    --drawer-peek: 186px;
    --drawer-description-width: 530px;
    --drawer-description-height: 164px;
    --drawer-gap: 10px;
    --drawer-title-size: 2rem;
    --drawer-panel-bg: #003f44;
    --body-bg: #021728;
    --ui-blue: #006792;
    --ui-border: #0d5073;
    --clue-border: #00567f;
    --drawer-text: #ffffff;
    --hint-card-bg: rgb(222 245 245 / 95%);
    --hint-card-text: #003f44;
    --hint-image-top: 0px;
    --hint-image-left: 0px;
    --hint-image-width: 100%;
    --hint-image-height: auto;
    --hint-card-top: 50%;
    --hint-card-left: 50%;
    --hint-card-width: 520px;
    --hint-card-bg-default: var(--hint-card-bg);
    --hint-card-border-color: var(--clue-border);
    --hint-card-text-color: var(--hint-card-text);
    --hint-title-font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: var(--hint-card-text-color);
    --hint-title-size: 2.5rem;
    --hint-body-font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-body-color: var(--hint-card-text-color);
    --hint-body-size: 1.9rem;
    --hint-arrow-top: auto;
    --hint-arrow-left: auto;
    --hint-arrow-right: -24px;
    --hint-arrow-bottom: -140px;
    --hint-arrow-width: 240px;
    --hint-arrow-height: 240px;
    --dive-arrow-top: var(--hint-arrow-top);
    --dive-arrow-left: var(--hint-arrow-left);
    --dive-arrow-right: -40px;
    --dive-arrow-bottom: -220px;
    --dive-arrow-width: 320px;
    --dive-arrow-height: var(--hint-arrow-height);
    --dive-text-top: -200px;
    --dive-text-left: -120px;
    --dive-text-width: 680px;

    /* --board-overlay-top: rgb(13 76 110 / 55%);
  --board-overlay-bottom: rgb(2 19 36 / 85%); */
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--white);
}

.game-wrapper {
    width: 1920px;
    height: 1080px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.game-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.board-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.path-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.spaces-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
}

.path-content {
    position: absolute;
    inset: 0;
    padding: 68px 0 178px 100px;
    z-index: 2;
}

.path-board {
    position: relative;
    height: 100%;
    aspect-ratio: 831 / 392;
}

.game-path-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

.space-markers {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.path-overlay {
    position: absolute;
    inset: 0;
    background: rgb(11 66 96 / 38%);
    pointer-events: none;
    z-index: 3;
}

.game-space {
    position: absolute;
    width: 160px;
    height: 100%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 6px 16px rgb(0 0 0 / 35%));
}

.finish-space-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    color: #fdff00;
    font-family: 'Fontdiner Swanky', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-shadow: 0 0 8px rgb(0 0 0 / 55%);
    pointer-events: none;
}

.game-space img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.player-piece {
    position: absolute;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    background-image: url('../images/player-piece.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 10px 28px rgb(0 0 0 / 42%));
    z-index: 4;
    transition:
        left 0.35s linear,
        top 0.35s linear,
        transform 0.35s linear;
    display: grid;
    place-items: center;
}

.turns-left {
    width: 66px;
    text-align: center;
    line-height: 1;
    color: #006974;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.turns-num {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 900;
    font-size: 48px;
    line-height: 0.95;
    color: #003f44;
}

.turns-copy {
    font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
    line-height: 22px;
}

.answer-drawers {
    position: absolute;
    left: 0;
    top: 23%;
    display: grid;
    gap: var(--drawer-gap);
    z-index: 30;
}

.answer-drawer {
    position: relative;
    width: var(--drawer-width);
    height: var(--drawer-height);
    transform: translateX(calc(-1 * (var(--drawer-width) - var(--drawer-peek))));
    transition: transform 0.38s ease;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    display: block;
    appearance: none;
    -webkit-appearance: none;
}

.answer-drawers.is-disabled {
    pointer-events: none;
}

.answer-drawer:hover,
.answer-drawer:focus-visible {
    transform: translateX(0);
}

.answer-drawer.selected .bubble {
    filter: hue-rotate(138deg) saturate(1.2) drop-shadow(0 0 5px rgb(114 250 23 / 80%));
    transform: scale(1.05);
}

.answer-drawer:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.drawer-bg,
.drawer-content {
    position: absolute;
    inset: 0;
}

.drawer-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drawer-content {
    display: grid;
    grid-template-columns: calc(100% - var(--drawer-peek) - 16px) var(--drawer-peek);
    align-items: center;
    padding: 8px;
    color: var(--drawer-text);
}

.drawer-description {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-radius: 8px;
    background: var(--drawer-panel-bg);
    font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-style: normal;
    font-size: 28px;
    font-weight: 400;
    line-height: 38px;
    color: var(--white);
}

.drawer-tab {
    position: relative;
    width: var(--drawer-peek);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    margin-bottom: 16px;

    gap: 16px;
}

.drawer-tab h3 {
    font-family: 'M PLUS Rounded 1c', sans-serif;

    margin: 0;
    font-weight: 800;
    font-size: var(--drawer-title-size);
    line-height: 1;
    color: #003f44;
}

.bubble {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.bubble-checkmark {
    position: absolute;
    z-index: 2;
    width: 100px;
    height: 100px;
    top: calc(50% + 16px);
    left: 55%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgb(0 0 0 / 45%));
}

.answer-drawer.selected .bubble-checkmark {
    opacity: 1;
}

.answer-drawer.flash .bubble {
    filter: brightness(2) saturate(1.08);
}

.hint-panel {
    position: absolute;
    top: 280px;
    left: 260px;
    width: 720px;
    min-height: 480px;
    display: block;
    z-index: 8;
    transform-origin: 50% 50%;
}

.hint-panel[hidden] {
    display: none;
}

.hint-panel.is-entering {
    animation: hint-pop-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes hint-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }

    60% {
        opacity: 1;
        transform: scale(1.03);
    }

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

@media (prefers-reduced-motion: reduce) {
    .hint-panel.is-entering {
        animation: none;
    }
}

.hint-space-image {
    position: absolute;
    top: var(--hint-image-top);
    left: var(--hint-image-left);
    width: var(--hint-image-width);
    height: var(--hint-image-height);
    object-fit: contain;
    filter: drop-shadow(0 16px 20px rgb(0 0 0 / 25%));
    z-index: 1;
}

.hint-text-card {
    position: absolute;
    top: var(--hint-card-top);
    left: var(--hint-card-left);
    transform: translate(-50%, -50%);
    width: var(--hint-card-width);
    border-radius: 28px;
    background: var(--hint-card-bg-default);
    border: 4px solid var(--hint-card-border-color);
    color: var(--hint-card-text-color);
    padding: 28px 32px;
    z-index: 2;
}

/* .hint-label {
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 0.8rem;
} */

.hint-title {
    margin: 0 0 4px;
    font-family: var(--hint-title-font-family);
    color: var(--hint-title-color);
    font-size: var(--hint-title-size);
    line-height: 1;
    text-align: center;
}

.hint-title img {
    max-width: 360px;
    height: auto;
}

.dive-text-svg {
    position: absolute;
    top: var(--dive-text-top);
    left: var(--dive-text-left);
    width: var(--dive-text-width);
    max-width: none;
    height: auto;
}

.hint-title .dive-text-svg {
    width: var(--dive-text-width);
    max-width: none;
    height: auto;
}

.hint-body {
    margin: 0;
    font-family: var(--hint-body-font-family);
    color: var(--hint-body-color);
    font-size: var(--hint-body-size);
    line-height: 1.2;
    text-align: center;
}

.hint-body b {
    font-weight: 700;
}

/* Pre-board intro: modal-bg in hint area (not full-screen overlay) */
.hint-panel[data-space-id='intro'] {
    position: absolute;
    width: 720px;
    min-height: 0;
}

.hint-panel[data-space-id='intro'] .hint-space-image {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
}

.hint-panel[data-space-id='intro'] .hint-text-card {
    position: absolute;
    inset: 0;
    transform: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 44px 32px 52px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    z-index: 2;
}

.hint-panel[data-space-id='intro'] .hint-title {
    font-family: 'Fontdiner Swanky', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    color: #003f44;
    margin: 0;
}

.hint-panel[data-space-id='intro'] .hint-body {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    max-width: 550px;
}

.hint-panel[data-space-id='intro'] .hint-start-btn {
    margin-top: 12px;
}

/* per-space hint styling */
.hint-panel[data-space-id='turtle'] {
    --hint-title-font-family:
        'Spicy Rice', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #1b4e17;
    --hint-title-size: 2.9rem;
    --hint-card-width: 496px;
}

.hint-panel[data-space-id='turtle'] .hint-text-card {
    transform: translate(calc(-50% - 60px), calc(-50% + 40px));
    background: transparent;
    border: 0;
}

.hint-panel[data-space-id='turtle'] .hint-body {
    font-weight: 400;
}

.hint-panel[data-space-id='fish'] {
    top: 340px;

    --hint-title-font-family:
        'Slackey', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #741705;
    --hint-title-size: 2.9rem;
    --hint-card-width: 496px;
}

.hint-panel[data-space-id='fish'] .hint-text-card {
    transform: translate(calc(-50% + 40px), calc(-50% - 130px));
    background: #ffedca;
    border: 0;
    border-radius: 200px;
    padding: 48px;
}

.hint-panel[data-space-id='fish'] .hint-body {
    font-weight: 400;
    color: rgb(14, 14, 14);
}

.hint-panel[data-space-id='kelp'] {
    --hint-title-font-family:
        'Audiowide', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #730377;
    --hint-title-size: 4rem;
    --hint-card-width: 520px;
}

.hint-panel[data-space-id='kelp'] .hint-text-card {
    transform: translate(calc(-50% + 0px), calc(-50% - 0px));
    background: #edfc6f;
    border: 0;
}

.hint-panel[data-space-id='kelp'] .hint-body {
    font-weight: 400;
    color: rgb(14, 14, 14);
}

/* eco alert spaces share a consistent treatment */
.hint-panel[data-space-type='eco'] .hint-text-card {
    background: transparent;
    border: 0;
}

.hint-panel[data-space-type='eco'] .hint-title {
    margin: 0 auto 16px;
    padding: 12px 28px;
    display: block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #ff3838;
    color: #fff;
    border-radius: 10px;
    line-height: 1.15;
}

.hint-panel[data-space-type='eco'] .hint-body {
    margin: 0;
    color: #000;
    font-weight: 400;
}

.hint-panel[data-space-type='eco'] .hint-body b {
    font-weight: 700;
}

.hint-panel[data-space-id='spill'] {
    --hint-title-font-family:
        'Monomaniac One', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-size: 4rem;
    --hint-card-width: 410px;
    --hint-image-width: 100%;
    --hint-body-size: 1.75rem;
}

.hint-panel[data-space-id='spill'] .hint-text-card {
    transform: translate(calc(-50% + 10px), calc(-50%));
}

.hint-panel[data-space-id='murret'] {
    --hint-title-font-family:
        'McLaren', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #00ceff;
    --hint-title-size: 3.4rem;
    --hint-card-width: 450px;
    --hint-image-width: 120%;
}

.hint-panel[data-space-id='murret'] .hint-text-card {
    transform: translate(calc(-50% + 60px), calc(-50% + 150px));
    background: none;
    border: 0;
}

.hint-panel[data-space-id='murret'] .hint-body {
    font-weight: 400;
    color: rgb(255, 255, 255);
}

.hint-panel[data-space-id='sponge'] {
    --hint-title-font-family:
        'Slackey', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #8207a0;
    --hint-title-size: 4rem;
    --hint-card-width: 640px;
    --hint-image-width: 110%;
}

.hint-panel[data-space-id='sponge'] .hint-text-card {
    transform: translate(calc(-50% + 40px), calc(-50% + 100px));
    background: none;
    border: 0;
}

.hint-panel[data-space-id='sponge'] .hint-body {
    font-weight: 400;
    color: rgb(12, 12, 12);
}

.hint-panel[data-space-id='cleaner'] {
    --hint-title-font-family:
        'Skranji', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #4a097c;
    --hint-title-size: 4rem;
    --hint-card-width: 440px;
    --hint-image-width: 100%;
}

.hint-panel[data-space-id='cleaner'] .hint-text-card {
    transform: translate(calc(-50% + 120px), calc(-50% + 60px));
    background: none;
    border: 0;
}

.hint-panel[data-space-id='cleaner'] .hint-body {
    font-weight: 400;
    color: rgb(12, 12, 12);
}

.hint-panel[data-space-id='eco-alert-1'] {
    --hint-title-font-family:
        'Monomaniac One', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-size: 4rem;
    --hint-card-width: 460px;
    --hint-image-width: 85%;
}

.hint-panel[data-space-id='eco-alert-1'] .hint-text-card {
    transform: translate(calc(-50% - 56px), calc(-50% + 40px));
}

.hint-panel[data-space-id='clam'] {
    --hint-title-font-family:
        'Shrikhand', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #4a097c;
    --hint-title-size: 4rem;
    --hint-card-width: 560px;
    --hint-image-width: 100%;
}

.hint-panel[data-space-id='clam'] .hint-text-card {
    transform: translate(calc(-50%), calc(-50% + 80px));
    background: none;
    border: 0;
}

.hint-panel[data-space-id='clam'] .hint-body {
    font-weight: 400;
    color: rgb(12, 12, 12);
}

.hint-panel[data-space-id='sound'] {
    --hint-title-font-family:
        'Audiowide', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #730377;
    --hint-title-size: 4rem;
    --hint-image-width: 85%;

    --hint-card-width: 440px;
}

.hint-panel[data-space-id='sound'] .hint-text-card {
    transform: translate(calc(-50%), calc(-50% + 120px));
    background: none;
    border: 0;
}

.hint-panel[data-space-id='sound'] .hint-body {
    font-weight: 400;
    color: rgb(14, 14, 14);
}

.hint-panel[data-space-id='octopus'] {
    --hint-title-font-family: 'Risque', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #e8ddeb;
    --hint-title-size: 3rem;
    --hint-image-width: 90%;

    --hint-card-width: 480px;
}

.hint-panel[data-space-id='octopus'] .hint-text-card {
    transform: translate(calc(-50% - 60px), calc(-50% + 30px));
    background: none;
    border: 0;
}

.hint-panel[data-space-id='octopus'] .hint-body {
    font-weight: 400;
    color: rgb(255, 255, 255);
}

.hint-panel[data-space-id='dive'] {
    --hint-title-font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-size: 2.2rem;
    --hint-image-width: 90%;
    --hint-image-left: 40px;

    --hint-image-top: 120px;
    --hint-card-width: 400px;
}

.hint-panel[data-space-id='dive'] .hint-text-card {
    transform: translate(calc(-50%), calc(-50% + 40px));
    background: none;
    border: 0;
}

.hint-panel[data-space-id='dive'] .hint-body {
    font-weight: 400;
    color: #003f44;
}

.hint-panel[data-space-id='whale'] {
    --hint-title-font-family:
        'Sansita', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #3d059e;
    --hint-title-size: 3rem;
    --hint-image-width: 110%;
    --hint-image-top: 80px;
    --hint-card-left: 51.5%;

    --hint-card-width: 555px;
}

.hint-panel[data-space-id='whale'] .hint-text-card {
    transform: translate(calc(-50% + 120px), calc(-50% + 38px));
    border: 0;
    background: none;
}

.hint-panel[data-space-id='whale'] .hint-body {
    font-weight: 400;
    color: #003f44;
}

.hint-panel[data-space-id='dolphin'] {
    --hint-title-font-family:
        'Sansita', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #69005b;
    --hint-title-size: 3rem;
    --hint-image-width: 90%;
    --hint-image-left: 40px;
    --hint-image-top: -20px;

    --hint-card-width: 480px;
}

.hint-panel[data-space-id='dolphin'] .hint-text-card {
    transform: translate(calc(-50%), calc(-50% + 160px));
    border: 0;
    background: none;
}

.hint-panel[data-space-id='dolphin'] .hint-body {
    font-weight: 400;
    color: #003f44;
}

.hint-panel[data-space-id='flashlight'] {
    --hint-title-font-family:
        'Audiowide', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #ffff6d;
    --hint-title-size: 4rem;
    --hint-image-width: 100%;
    --hint-image-left: 40px;
    --hint-image-top: -20px;

    --hint-card-width: 600px;
}

.hint-panel[data-space-id='flashlight'] .hint-text-card {
    transform: translate(calc(-50% + 50px), calc(-50% + 20px));
    border: 0;
    background: none;
}

.hint-panel[data-space-id='flashlight'] .hint-body {
    font-weight: 400;
    color: #ffffff;
}

.hint-panel[data-space-id='alvin'] {
    --hint-title-font-family:
        'Suez One', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #a5fd7b;
    --hint-title-size: 2.4rem;
    --hint-image-width: 40%;
    --hint-image-left: 40px;
    --hint-image-top: -20px;

    --hint-card-width: 520px;
}

.hint-panel[data-space-id='alvin'] .hint-text-card {
    transform: translate(calc(-50% + 120px), calc(-50% + 100px));
    border: 0;
    background: #003961;
}

.hint-panel[data-space-id='alvin'] .hint-body {
    font-weight: 400;
    color: #ffffff;
}

.hint-panel[data-space-id='eco-alert-2'] {
    --hint-title-font-family:
        'Monomaniac One', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-size: 4rem;
    --hint-card-width: 460px;
    --hint-image-width: 85%;
}

.hint-panel[data-space-id='eco-alert-2'] .hint-text-card {
    transform: translate(calc(-50% - 60px), calc(-50% + 40px));
}

.hint-panel[data-space-id='shrimp'] {
    --hint-title-font-family:
        'Sansita', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #fff9b4;
    --hint-title-size: 3rem;
    --hint-image-width: 90%;
    --hint-image-left: 40px;
    --hint-image-top: -20px;

    --hint-card-width: 500px;
}

.hint-panel[data-space-id='shrimp'] .hint-text-card {
    transform: translate(calc(-50% + 20px), calc(-50% + 80px));
    border: 0;
    background: none;
}

.hint-panel[data-space-id='shrimp'] .hint-body {
    font-weight: 400;
    color: #ffffff;
}

.hint-panel[data-space-id='vacuum'] {
    --hint-title-font-family:
        'Lakki Reddy', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #a3052c;
    --hint-title-size: 3rem;
    --hint-image-width: 90%;
    --hint-image-left: 40px;
    --hint-image-top: -20px;

    --hint-card-width: 480px;
}

.hint-panel[data-space-id='vacuum'] .hint-text-card {
    transform: translate(calc(-50%), calc(-50% + 160px));
    border: 0;
    background: none;
}

.hint-panel[data-space-id='vacuum'] .hint-body {
    font-weight: 400;
    color: #231f20;
}

.hint-panel[data-space-id='finish'] {
    --hint-title-font-family:
        'Fontdiner Swanky', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hint-title-color: #fdff00;
    --hint-title-size: 4.4rem;
    --hint-image-width: 110%;
    /* --hint-image-left: 20px; */
    /* --hint-image-top: -10px; */

    --hint-card-width: 720px;
}

.hint-panel[data-space-id='finish'] .hint-text-card {
    transform: translate(calc(-50% + 40px), calc(-50% + 120px));
    border: 0;
    background: none;
}

.hint-panel[data-space-id='finish'] .hint-body {
    font-weight: 400;
    color: #ffffff;
}

.hint-arrow {
    display: block;
    position: absolute;
    top: var(--hint-arrow-top);
    left: var(--hint-arrow-left);
    right: var(--hint-arrow-right);
    bottom: var(--hint-arrow-bottom);
    width: var(--hint-arrow-width);
    height: var(--hint-arrow-height);
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.hint-arrow[hidden] {
    display: none;
}

.hint-arrow-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hint-panel[data-space-type='eco'] .hint-arrow {
    animation: eco-arrow-wobble 1200ms ease-in-out infinite;
}

.hint-panel[data-space-id='dive'] .hint-arrow {
    top: var(--dive-arrow-top);
    left: var(--dive-arrow-left);
    right: var(--dive-arrow-right);
    bottom: var(--dive-arrow-bottom);
    width: var(--dive-arrow-width);
    height: var(--dive-arrow-height);
    animation: dive-arrow-float 1100ms ease-in-out infinite;
}

.choose-prompt {
    position: absolute;
    left: 264px;
    bottom: 36px;
    z-index: 9;
}

.choose-prompt[hidden] {
    display: none;
}

.choose-prompt-stack {
    position: relative;
    width: 558px;
    height: 184px;
}

.choose-prompt-back,
.choose-prompt-front {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    pointer-events: none;
    user-select: none;
}

.choose-prompt-back {
    width: 100%;
    z-index: 0;
    animation: choose-prompt-pulse 800ms ease-in-out infinite;
}

.choose-prompt-front {
    width: 516px;
    max-width: 92%;
    z-index: 1;
}

.choose-prompt-text {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px 48px 20px;
    box-sizing: border-box;
    color: #daf6f5;
    text-align: center;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgb(0 0 0 / 35%);
}

@media (prefers-reduced-motion: reduce) {
    .choose-prompt-back {
        animation: none;
    }
}

@keyframes choose-prompt-pulse {
    0%,
    100% {
        filter: brightness(1) drop-shadow(0 0 0 rgb(218 246 245 / 0%));
    }

    50% {
        filter: brightness(2) saturate(1.2);
    }
}

@keyframes eco-arrow-wobble {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-12px);
    }
}

@keyframes dive-arrow-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.correct-panel {
    position: relative;
    width: 840px;
    aspect-ratio: 491 / 352;
}

.correct-panel[hidden] {
    display: none;
}

.correct-frame {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.correct-instructions {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    width: 68%;
    text-align: center;
    color: #001a29;
    pointer-events: none;
}

.correct-title {
    margin: 0 0 16px;
    font-family: 'Fontdiner Swanky', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 80px;
    line-height: 92px;
    color: #003f44;
    margin-top: 40px;
    text-align: center;
}

.correct-copy {
    margin: 0;
    font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--body-bg);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.choice-bubbles {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.choice-bubble {
    position: absolute;
    border: 0;
    background: url('../images/selectable-bubble.png') center / contain no-repeat;
    cursor: pointer;
    opacity: 0.95;
    color: var(--white);
    font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0;
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        opacity 0.18s ease;
}

.choice-bubble:hover {
    transform: scale(1.04);
    filter: brightness(1.08);
    opacity: 1;
}

.choice-bubble[data-size='lg'] {
    width: 240px;
    height: 240px;
}

.choice-bubble[data-size='md'] {
    width: 200px;
    height: 200px;
}

.choice-bubble[data-size='sm'] {
    width: 184px;
    height: 184px;
}

.move-result {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    color: var(--drawer-text);
    transform: translateY(12px);
}

.move-result[hidden] {
    display: none;
}

.move-ahead,
.move-spaces {
    margin: 0;
    color: var(--body-bg);
    text-align: center;
    font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.move-number {
    margin: 0 0 -20px;
    color: #003f44;
    text-align: center;
    font-family: 'Fontdiner Swanky', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 120px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
}

.incorrect-panel {
    position: relative;
    margin-top: 40px;
    margin-right: 20px;
    width: 800px;
}

.incorrect-panel[hidden] {
    display: none;
}

.incorrect-panel.is-entering {
    animation: hint-pop-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: 50% 50%;
}

.incorrect-panel img {
    width: 100%;
    height: auto;
}

.incorrect-panel .nope-label {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #741705;
    font-family: 'Fontdiner Swanky', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 108px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.incorrect-panel .nope-subtext {
    position: absolute;
    left: 50%;
    top: 65%;
    transform: translate(-50%, 0);
    color: #000000;
    font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    margin: 0;
}

.loss-modal {
    position: absolute;
    top: 280px;
    left: 280px;
    width: 800px;
    z-index: 12;
}

.loss-modal[hidden] {
    display: none;
}

.loss-modal-bg {
    width: 100%;
    height: auto;
    display: block;
}

.loss-modal-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 48px 28px;
}

.loss-title {
    margin: 0;
    width: 100%;
    text-align: center;
    color: #003f44;
    font-family: 'Fontdiner Swanky', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.loss-subtitle {
    margin: -12px 0 0;
    width: 100%;
    text-align: center;
    color: #003f44;
    font-family: 'Fontdiner Swanky', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.loss-body {
    margin: 0;
    width: 530px;
    color: #000;
    text-align: center;
    font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 16px;
}

.play-again-btn {
    width: 364px;
    border: 0;
    border-radius: 16px;
    background: #003f44;
    padding: 20px;
    color: #fdff00;
    text-align: center;
    font-family: 'Fontdiner Swanky', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
}

.play-again-btn:focus {
    outline: none;
}

.play-again-btn:focus-visible {
    outline: 6px solid var(--yellow);
    outline-offset: 6px;
}

.start-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 42%);
    z-index: 60;
    display: grid;
    place-items: center;
}

.start-modal-overlay[hidden] {
    display: none;
}

.start-modal-overlay:focus {
    outline: none;
}

.start-modal {
    position: relative;
    width: 1200px;
}

.start-modal-bg {
    width: 100%;
    height: auto;
    display: block;
}

.board-start-label {
    position: absolute;
    top: 16px;
    left: 24px;
    margin: 0;
    z-index: 9;
    color: #b76a13;
    font-family: 'Fontdiner Swanky', 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.start-modal-logo {
    width: 540px;
    height: auto;
    flex-shrink: 0;
}

.start-modal-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 80px;
    padding: 40px 160px 40px 0px;
    margin-left: -20px;
}

.start-modal-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.start-modal-body {
    margin: 0;
    color: #003f44;
    text-align: center;
    font-family: 'PT Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.clue-card {
    position: absolute;
    top: 140px;
    left: 140px;
    width: 340px;
    min-height: 106px;
    border-radius: 14px;
    background: rgb(222 245 245 / 95%);
    border: 2px solid var(--clue-border);
    color: var(--drawer-text);
    padding: 14px 16px;
    z-index: 4;
    display: none;
}

.clue-label {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: 0.8rem;
}

.clue-text {
    margin: 0;
    line-height: 1.35;
}