*{
    box-sizing:border-box;
    user-select: none;
    /*outline:1px solid rgba(255,0,51,0.25);*/
}
html{
    margin:0;
    padding:0;
    background:rgb(51,51,68);
    color:#fec;
    font:22px/1.5 "Noto Serif",Georgia,"Liberation Serif",serif,sans-serif;
}
body{
    max-width:1024px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}
main{
    text-align:center;
    max-width:32rem;
    margin:0 auto;
    padding:2rem;
}
div#stack{
    font-size:2rem;
    line-height:1.5;
    vertical-align:top;
    position: relative;
    overflow:hidden;
    transition:0.1s ease;
    width:6rem;
    height:24rem;
    margin:0.75rem auto;
}
div#stack:after{
    content:"";
    background:linear-gradient(
        to bottom,
        rgba(51,51,68,0),
        rgba(51,51,68,1) 80%
    );
    display:block;
    width:100%;    
    outline:3px solid #fff;
    outline-offset:6px;
    height:19rem;
    left:0;
    bottom:0;
    position:absolute;
}
div#stack:empty:after{
    outline:none;
}

div#stack>div:first-of-type{
    font-size:3rem;
    color:#fff;
    margin-bottom:0.6rem;
}
div#stack>div:first-of-type[romaji]:after{
    font-size:1rem;
    content:attr(romaji);
    position:fixed;
    width:100%;
    text-align:center;
    display:block;
    top:1.8rem;
    left:0;
    letter-spacing:0.5rem;
    padding-left:0.25rem;
    color:#99a;
}
div#stack>div.slide{
    margin-top:-0.6rem;
    font-size:0;
    color:rgba(0,0,0,0);
}
div#stack>div.slide+div{
    font-size:3rem;
    color:#fff;
    margin-bottom:0.6rem;
}

div.ui{
    pointer-events:none;
}
div.ui h1{
    font-size:1rem;
}
div.ui p{
    font-size:0.8rem;
}
div#instructions{
    padding:2rem;
    font-size:1rem;
    position:absolute;
    top:0;
    right:0;
    width:30%;
    text-align:left;
}
div#score{
    padding:2rem;
    font-size:1rem;
    position:absolute;
    top:0;
    left:0;
    width:30%;
    text-align:right;
}
div#end-screen{
    opacity:0;
    transition:opacity 1s ease-in;
    transition-delay:0.4s;
}
div#end-screen.active{
    position:fixed;
    display:block;
    width:100%;
    left:0;
    top:0;
    padding-top:2rem;
    z-index:5;
    text-align:center;
    opacity:1;
}
div#end-time{
    font-size:2rem;
    color:#fff;
    outline:2px solid #fff;
    display:inline-block;
    padding:0.2rem 1rem;
}
div#settings{
    padding:2rem;
    font-size:1rem;
    position:absolute;
    top:0;
    left:0;
    width:30%;
    text-align:right;
    background:rgba(51,51,68,1);
    z-index:10;
    pointer-events: auto;
    transition:0.3s ease;
}
div#settings.hidden{
    pointer-events: none;
    top: 10rem;
}
div#settings.hidden > button{
    display: none;
}
div#settings.hidden > h1{
    display: none;
}