body {
    touch-action: none;
    overflow: hidden;
    background: linear-gradient(180deg, #5CB8B5 0%, #79CFE6 100%);
    font-family: 'Fredoka', 'M PLUS Rounded 1c', 'Nunito', system-ui, sans-serif;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

#title-screen, #tutorial-screen, #zukan-screen, #game-over, #stage-select-screen, #stage-clear-screen {
    position: fixed;
    inset: 0;
}

/* Fallback display/z-index when Tailwind CDN hasn't loaded yet */
#title-screen.hidden,
#tutorial-screen.hidden,
#zukan-screen.hidden,
#game-over.hidden,
#stage-select-screen.hidden,
#stage-clear-screen.hidden,
#game-bottom-bar.hidden,
#confirm-dialog.hidden,
#retry-overlay.hidden,
#score-display.hidden {
    display: none;
}

#title-screen { z-index: 30; }
#tutorial-screen, #zukan-screen, #stage-select-screen { z-index: 40; }
#game-over, #stage-clear-screen { z-index: 20; }
#confirm-dialog { z-index: 50; }


.title-logo {
    width: min(340px, 85vw);
    background: no-repeat center / contain;
}

.title-logo--stacked {
    background-image: url('../assets/svg/game-title-logo-stacked.svg');
    aspect-ratio: 540 / 410;
    height: auto;
    max-height: 240px;
}

.title-logo--inline {
    background-image: url('../assets/svg/game-title-logo-inline.svg');
    width: min(600px, 94vw);
    aspect-ratio: 1440 / 200;
    height: auto;
}

.title-logo--header {
    background-image: url('../assets/svg/game-title-logo-inline.svg');
    width: 240px;
    height: 34px;
}

#game-bottom-bar {
    display: flex;
}

:root {
    --ui-primary-1: #6fbf73;
    --ui-primary-2: #4da95f;
    --ui-primary-3: #3e8f50;
    --ui-secondary-1: #ecf7ff;
    --ui-secondary-2: #d2ebfa;
    --ui-secondary-3: #b8d7ea;
    --ui-success-1: #9be7a4;
    --ui-success-2: #65c86f;
    --ui-success-3: #4ca85a;
    --ui-danger-1: #e9bf95;
    --ui-danger-2: #c98955;
    --ui-danger-3: #9f6a3e;
    --ui-text-shadow: rgba(37, 69, 45, 0.22);
    --ui-shadow: rgba(48, 82, 45, 0.22);
}

.menu-panel {
    background: linear-gradient(180deg, #f3f7ea 0%, #dceccb 100%) !important;
    border: 10px solid #ffffff;
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.55), 0 8px 20px rgba(55, 74, 41, 0.22) !important;
}

.ui-window {
    background: linear-gradient(180deg, #f8fbf3 0%, #e5efd9 100%) !important;
    border: 5px solid #ffffff;
    box-shadow: inset 0 3px 0 rgba(255,255,255,0.62), 0 8px 22px rgba(57, 79, 48, 0.2) !important;
}

.ui-close {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: linear-gradient(180deg, #fff 0%, #e8f2de 100%) !important;
    border: 2px solid #b8d3aa !important;
    box-shadow: 0 3px 0 #90b37d;
}

.btn-game {
    position: relative;
    border: 2px solid #dbead3;
    background: linear-gradient(180deg, var(--ui-primary-1) 0%, var(--ui-primary-2) 58%, var(--ui-primary-3) 100%) !important;
    color: #fffdf4 !important;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 0 var(--ui-text-shadow);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px var(--ui-shadow) !important;
}

.btn-game::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 10%;
    width: 80%;
    height: 32%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.btn-game-secondary {
    background: linear-gradient(180deg, var(--ui-secondary-1) 0%, var(--ui-secondary-2) 58%, var(--ui-secondary-3) 100%) !important;
    border-color: #d2e5ef;
    color: #4f4a8c !important;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(76, 116, 132, 0.2) !important;
}

.btn-game-success {
    border-color: #d2ead4;
    background: linear-gradient(180deg, var(--ui-success-1) 0%, var(--ui-success-2) 58%, var(--ui-success-3) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.33), 0 2px 6px rgba(52, 108, 58, 0.24) !important;
}

.btn-game-danger {
    border-color: #eadccf;
    background: linear-gradient(180deg, var(--ui-danger-1) 0%, var(--ui-danger-2) 58%, var(--ui-danger-3) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(108, 79, 49, 0.25) !important;
}


.stage-select-window {
    border-width: 10px;
}

.btn-flat-choice {
    border: 6px solid #ffffff !important;
    background: #5cab65 !important;
    color: #ffffff !important;
    text-shadow: none;
    box-shadow: 0 2px 4px rgba(46, 77, 41, 0.22) !important;
}

.btn-flat-choice::before {
    display: none;
}

.btn-flat-choice.btn-game-secondary {
    background: #7fb8d6 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.btn-flat-choice.btn-game-success {
    background: #69b973 !important;
    border-color: #ffffff !important;
}


.btn-puffy {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    cursor: pointer;
}

.btn-puffy:hover {
    transform: translateY(-1px);
}

.btn-puffy:active {
    transform: translateY(1px);
    box-shadow: none !important;
}

canvas {
    display: block;
    background-color: #ffffff;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    border-radius: 16px;
}