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

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;
}

.game-dialogue{
    position:relative;
    z-index:1;
    width:min(560px, calc(100vw - 40px));
    border:3px solid #fff;
    background:#2d2d30;
    color:#fff;
    box-shadow:0 0 0 5px #2d2d30, 0 0 0 7px #fff;
}

.dialogue-title{
    padding:18px 22px;
    border-bottom:2px solid #fff;
    color:#fff;
    font-size:clamp(1.2rem, 4vw, 1.6rem);
    font-weight:bold;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.dialogue-choices{
    display:grid;
    gap:10px;
    padding:18px 22px 22px;
}

.dialogue-choices button,
.dialogue-choices a{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    border:2px solid transparent;
    background:transparent;
    color:#fff;
    font:inherit;
    font-size:1rem;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
}

.dialogue-choices button::before,
.dialogue-choices a::before{
    content:"▶ ";
    visibility:hidden;
    color:#fff;
}

.dialogue-choices button:hover,
.dialogue-choices button:focus-visible,
.dialogue-choices a:hover,
.dialogue-choices a:focus-visible{
    border-color:#77736a;
    outline:none;
    color:#fff;
}

.dialogue-choices button:hover::before,
.dialogue-choices button:focus-visible::before,
.dialogue-choices a:hover::before,
.dialogue-choices a:focus-visible::before{
    visibility:visible;
}

@media (max-width:480px){
    .dialogue-title{ padding:15px 16px; }
    .dialogue-choices{ padding:14px 16px 18px; }
}