*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: var(--hw-bg);
    color: var(--hw-text-color);
    font-family: "Inter", "Noto Sans JP", sans-serif;
    -webkit-font-smoothing: antialiased;
}

#app {
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    cursor: default;
}

#app.is-viewport-tappable {
    cursor: pointer;
    touch-action: none;
}

#app.is-phase-transition {
    cursor: default;
}

.intro.is-phase-leaving {
    position: fixed;
    inset: 0;
    z-index: 2;
    max-width: none;
    width: 100%;
    opacity: 1;
    transition: opacity var(--hw-phase-fade-duration) var(--hw-fade-easing);
    pointer-events: none;
}

.intro.is-phase-leaving.is-leaving {
    opacity: 0;
}

.kamishibai.is-phase-entering {
    opacity: 0;
}

.kamishibai.is-phase-active {
    opacity: 1;
    transition: opacity var(--hw-phase-fade-duration) var(--hw-fade-easing);
}

.is-hidden {
    display: none !important;
}