html,
body{
    width:100%;
    min-height:100%;
    margin:0;
    background:#222225;
}

body{
    min-height:100vh;
    overflow:hidden;
    display:grid;
    place-items:center;
    font-family:"Courier New", monospace;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:radial-gradient(circle, rgba(255,255,255,.32) 1px, transparent 1.6px);
    background-size:34px 34px;
}

.notification{
    position:relative;
    z-index:1;
    width:min(460px, calc(100vw - 40px));
    border:3px solid #fff;
    background:#222225;
    color:#fff;
    box-shadow:0 0 0 5px #222225, 0 0 0 7px #fff;
    animation:notification-fade-in 500ms ease-out 1s both;
}

.notification-title{
    margin:0;
    padding:16px 20px;
    border-bottom:2px solid #fff;
    font-size:clamp(1.1rem, 4vw, 1.4rem);
    letter-spacing:.12em;
    text-transform:uppercase;
}

.notification-content{
    display:grid;
    gap:18px;
    padding:20px;
}

.notification-content p{
    margin:0;
    font-size:1rem;
    line-height:1.6;
}

.notification-ok{
    justify-self:end;
    min-width:90px;
    padding:9px 16px;
    border:2px solid #fff;
    background:transparent;
    color:#fff;
    font:inherit;
    cursor:pointer;
}

.notification-ok:hover,
.notification-ok:focus-visible{
    outline:none;
    background:#fff;
    color:#222225;
}

.notification.is-closing{
    animation:notification-fade-out 350ms ease-in forwards;
}

.footsteps-notification{
    animation:none;
    box-shadow:0 0 0 5px #222225;
}

.footsteps-notification.is-visible{
    animation:notification-fade-in 500ms ease-out both;
}

.blackout{
    position:fixed;
    inset:0;
    z-index:5;
    background:#000;
}

.blackout[hidden]{
    display:none;
}

.blackout.is-transitioning{
    animation:blackout-transition 2.5s ease-in-out forwards;
}

.meal-notice{
    z-index:6;
    animation:notification-fade-in 350ms ease-out both;
}

.wip-notice{
    z-index:6;
    animation:notification-fade-in 350ms ease-out both;
}

.meal-content{
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:10px;
}

.meal-arrow{
    width:38px;
    height:44px;
    border:2px solid #fff;
    background:transparent;
    color:#fff;
    font:inherit;
    font-size:1.25rem;
    cursor:pointer;
}

.meal-arrow:hover,
.meal-arrow:focus-visible{
    outline:none;
    background:#fff;
    color:#222225;
}

.meal-scroll{
    display:flex;
    gap:12px;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:#e9dfc5 transparent;
    padding:8px 2px;
}

.meal-option{
    position:relative;
    display:block;
    flex:0 0 120px;
    height:130px;
    box-sizing:border-box;
    padding:0;
    overflow:hidden;
    border:3px solid #e9dfc5;
    background:#222225;
    color:#e9dfc5;
    font:inherit;
    text-align:center;
    cursor:pointer;
    scroll-snap-align:center;
    transition:opacity 250ms ease, border-color 180ms ease, transform 180ms ease;
}

.meal-option img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.meal-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:8px;
    box-sizing:border-box;
    background:rgba(34, 34, 37, .78);
    color:#e9dfc5;
    font-weight:bold;
    line-height:1.35;
    opacity:0;
    transition:opacity 180ms ease;
}

.meal-option:hover .meal-overlay,
.meal-option:focus-visible .meal-overlay,
.meal-option.is-selected .meal-overlay{
    opacity:1;
}

.meal-option.is-selected{
    border-color:#fff;
    transform:translateY(-3px);
}

 .meal-option:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px;
}

.character-notice{
    width:min(760px, calc(100vw - 32px));
    max-height:calc(100vh - 32px);
    overflow-y:auto;
}

.character-content{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:12px;
    align-items:stretch;
}

.character-list-wrap{
    position:relative;
    min-width:0;
    height:clamp(220px, 48vh, 390px);
}

.character-scroll{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
    height:100%;
    box-sizing:border-box;
    overflow-x:hidden;
    overflow-y:auto;
    padding:8px 40px 8px 8px;
    scroll-snap-type:y mandatory;
}

.character-option{
    flex:0 0 auto;
    width:min(72px, 100%);
    min-height:0;
    aspect-ratio:1 / 1;
    box-sizing:border-box;
    display:grid;
    align-self:center;
    place-items:center;
    border:3px solid #e9dfc5;
    background:#39383a;
    color:#e9dfc5;
    font:inherit;
    font-size:1.1rem;
    cursor:pointer;
    scroll-snap-align:center;
    transition:opacity 250ms ease, border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.character-option:hover,
.character-option:focus-visible,
.character-option.is-selected{
    background:#555154;
}

.character-option.is-selected{
    border-color:#fff;
    background:#555154;
    box-shadow:0 0 0 2px rgba(255,255,255,.45);
    transform:translateY(-2px);
}

.character-option:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px;
}

.character-option img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.character-arrow{
    position:absolute;
    right:6px;
    z-index:1;
    width:28px;
    height:32px;
    padding:0;
    border:2px solid #e9dfc5;
    background:#222225;
    color:#e9dfc5;
    font:inherit;
    font-size:.8rem;
    cursor:pointer;
}

.character-arrow:hover,
.character-arrow:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px;
    background:#555154;
}

.character-arrow-up{ top:8px; }
.character-arrow-down{ bottom:8px; }

.character-info{
    height:clamp(220px, 48vh, 390px);
    min-width:0;
    box-sizing:border-box;
    overflow:auto;
    padding:clamp(10px, 2vw, 20px);
    border:3px solid #e9dfc5;
    background:#39383a;
    color:#e9dfc5;
}

.character-info h2{
    margin:0 0 12px;
    font-size:clamp(.95rem, 2vw, 1.2rem);
}

.character-info p{
    margin:0;
    font-size:clamp(.72rem, 1.8vw, .95rem);
    line-height:1.5;
}

.character-quote{
    margin:clamp(20px, 5vh, 38px) 0 0;
    font-family:"Aldrich", sans-serif;
    font-size:clamp(.85rem, 2vw, 1.05rem);
    font-weight:400;
    font-style:normal;
    line-height:1.5;
}

.character-quote[hidden]{
    display:none;
}

.meal-select{
    display:block;
    margin:0 20px 18px auto;
    min-width:100px;
    padding:9px 16px;
    border:2px solid #fff;
    background:transparent;
    color:#fff;
    font:inherit;
    cursor:pointer;
}

.meal-select:hover,
.meal-select:focus-visible{
    outline:none;
    background:#fff;
    color:#222225;
}

.meal-select[hidden]{
    display:none;
}

@keyframes blackout-transition{
    0%{ opacity:0; }
    20%, 80%{ opacity:1; }
    100%{ opacity:0; }
}

@media (max-width:480px){
    .meal-content{ gap:6px; }
    .meal-arrow{ width:32px; }
    .meal-option{ flex-basis:100px; height:110px; }
    .character-notice{ width:calc(100vw - 24px); }
    .character-content{ gap:8px; padding:14px; }
    .character-list-wrap,
    .character-info{ height:clamp(190px, 36vh, 280px); }
    .character-scroll{ padding-right:36px; }
    .character-option{ font-size:1rem; }
    .character-info{ padding:10px; }
}

.dialogue-box{
    position:relative;
    z-index:1;
    width:min(560px, calc(100vw - 48px));
    min-height:130px;
    box-sizing:border-box;
    padding:38px 54px 24px 24px;
    border:6px solid #e9dfc5;
    border-radius:20px;
    background:transparent;
    color:#e9dfc5;
    animation:dialogue-fade-in 350ms ease-out both;
}

.dialogue-box[hidden]{
    display:none;
}

.dialogue-name{
    position:absolute;
    top:-15px;
    left:20px;
    padding:5px 16px;
    border:4px solid #e9dfc5;
    border-radius:9px;
    background:#222225;
    color:#e9dfc5;
    font-weight:bold;
}

.dialogue-line{
    margin:0;
    font-size:1rem;
    line-height:1.6;
}

.dialogue-line.is-fading-out{
    animation:dialogue-text-fade-out 180ms ease-in forwards;
}

.dialogue-line.is-fading-in{
    animation:dialogue-text-fade-in 250ms ease-out both;
}

.dialogue-next{
    position:absolute;
    right:14px;
    bottom:10px;
    padding:4px 8px;
    border:0;
    background:transparent;
    color:#e9dfc5;
    font:inherit;
    font-size:1.5rem;
    line-height:1;
    cursor:pointer;
}

.dialogue-next:hover,
.dialogue-next:focus-visible{
    outline:2px solid #e9dfc5;
    outline-offset:2px;
}

.dialogue-next:disabled{
    opacity:.45;
    cursor:default;
}

@keyframes notification-fade-in{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes notification-fade-out{
    from{ opacity:1; }
    to{ opacity:0; }
}

@keyframes dialogue-fade-in{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes dialogue-text-fade-out{
    from{ opacity:1; }
    to{ opacity:0; }
}

@keyframes dialogue-text-fade-in{
    from{ opacity:0; }
    to{ opacity:1; }
}

@media (prefers-reduced-motion:reduce){
    .notification,
    .notification.is-closing,
    .footsteps-notification.is-visible,
    .dialogue-box,
    .dialogue-line.is-fading-in,
    .dialogue-line.is-fading-out{
        animation-duration:1ms;
    }
}