html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.87);
    background-color: #5a7a7a;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#app {
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
        env(safe-area-inset-left);
    box-sizing: border-box;
}

#game-shell {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Phaser Scale.FIT measures this parent — must fill the viewport. */
#game-container {
    width: 100%;
    height: 100%;
    line-height: 0;
    touch-action: none;
}

#game-container canvas {
    display: block;
    touch-action: none;
}

#play-note {
    position: absolute;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 10;
    pointer-events: none;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #d8c8b0;
    text-shadow: 0 1px 2px #2a2018;
}

#rotate-hint {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2018f2;
    pointer-events: none;
}

#rotate-hint[hidden] {
    display: none !important;
}

#rotate-hint p {
    margin: 0;
    padding: 16px 20px;
    max-width: 16rem;
    text-align: center;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 18px;
    color: #f5e6d3;
    border: 1px solid #c4a484;
    background: #4a3a28;
}

#boot-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: 28rem;
    z-index: 20;
    padding: 12px 16px;
    text-align: center;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 15px;
    color: #f5e6d3;
    background: #2a2018cc;
    border: 1px solid #c4a484;
}