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

body{
    background:#060c06;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:'Press Start 2P','Courier New',monospace;
    color:#33ff33;
    overflow:hidden;
}

/* CRT lines */
body::before{
    content:'';
    position:fixed;inset:0;
    background:repeating-linear-gradient(
    to bottom,
    transparent 0px,transparent 3px,
    rgba(0,0,0,0.25) 3px,rgba(0,0,0,0.25) 4px
    );
    pointer-events:none;z-index:200;
}

/* creates the vignette-like tunnel vision */
body::after{
    content:'';
    position:fixed;inset:0;
    background: radial-gradient(
        ellipse at center, 
        transparent 25%,
        rgba(0,0,0,0.80) 100%
        );
    pointer-events:none;
    z-index:199;
}

/*objects in the wrapper*/
#wrapper{
    display:flex;
    align-items:flex-start;
    gap:50px;
    padding:16px;
}

/* main board */
#board-wrap{
    position:relative;
    border:10px solid #1c6e1c;
    box-shadow:
    0 0 0 1px #0a350a,
    0 0 18px rgba(51,255,51,0.35),
    0 0 50px rgba(51,255,51,0.08),
    inset 0 0 18px rgba(0,0,0,0.6);
}

/* the image-rendering:pixelated makes the pixels more pixel-y, doesn't smooth them*/ 
#board{
    display:block;
    image-rendering:pixelated;
    background:#020902;
}

/* side panels */
.panel{
    width:108px;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.box{
    border:1px solid #1c5a1c;
    background:#020902;
    padding:8px 7px;
    box-shadow:0 0 6px rgba(51,255,51,0.07);
}

.label{
    font-size:11px;
    color:#1a7a1a;
    letter-spacing:3px;
    margin-bottom:5px;
}

.value{
    font-size:11px;
    color:#33ff33;
    text-shadow:0 0 7px #33ff33;
    word-break:break-all;
}

canvas.mini{
    display:block;
    margin:0 auto;
    background:#010601;
}

/* Overlays */
.ov{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.9);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:150;
}
.ov.hidden{
    display:none; /* hides it while playing*/
}

.pop{
    border:2px solid #33ff33;
    background:#020902;
    padding:26px 22px;
    text-align:center;
    max-width:400px;width:92%;
    box-shadow:0 0 45px rgba(51,255,51,0.45),inset 0 0 25px rgba(0,0,0,0.5);
    position:relative;
}

.pop::before{
        content:'';
        position:absolute;
        inset:4px; /*double border*/
        border:1px solid #1c5a1c;
        pointer-events:none; /* click pass through it*/ 
}

.pop-title{ /* "T O T R O S" ! */
        font-size:30px;
        color:#33ff33;
        text-shadow:0 0 14px #33ff33,0 0 30px rgba(51,255,51,0.5);
        margin-bottom:18px;
        letter-spacing:7px;
        /* making it appear like it's being written with the typewriter and blink animation */ 
        overflow: hidden;
        border-right: 3px solid #33ff33;
        white-space: nowrap;
        animation: typewriter 2s steps(6, end) 1, blink 1.5s infinite;
        animation-fill-mode: forwards;
}
/* yellow description - the random quotes */
.ov-description{
    font-size:8px;
    color:#ffff00;
    text-align:center;
    margin-bottom:14px;
    text-shadow:0 0 5px #ffff00;
}
/* animations */
@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
@keyframes blink {
    0%, 49% {
        border-right-color: #33ff33;
    }
    50%, 100% {
        border-right-color: transparent;
    }
}

/* buttons */
.btn{
    display: block;
    width: 100%;
    padding: 10px 8px;
    margin: 6px;
    background: transparent;
    border: 1px solid #1c5a1c;
    color: #33ff33;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 10px; 
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.4s;
}
.btn:hover,.btn:focus{
        background:#33ff33;
        color:#000;
        border-color:#33ff33;
        box-shadow:0 0 14px #33ff33;
        outline:none;
}
.btn.blue{
    border-color:#2c1c6e;
    color:#00ccff;
}
.btn.blue:hover{
    background:#00ccff;
    color:#000;
    box-shadow:0 0 14px #00ddff;
    border-color:#00ddff;
}
.btn.sm{
    font-size:10px;
    padding:7px;
}
/* scores */
.big-score{
    font-size:17px;
    color:#ffff00;
    text-shadow: 0 0 12px #ffff00;
    margin:5px 0;
}
.sub-label{
    font-size:8px;
    color: #1a7a1a;
    letter-spacing: 1px;
    margin-bottom:8px;
}
.hs-notice{
    font-size: 8px;
    color: #ffff00;
    text-shadow: 0 0 9px #ffff00;
    margin-bottom:9px;
    letter-spacing: 1px;
}

/* name input is buggy! will fix in the future...*/
#name-inp{
        background:transparent;
        border:none;
        border-bottom:2px solid #33ff33;
        color:#33ff33;
        font-family:'Press Start 2P','Courier New',monospace;
        font-size:13px;
        text-align:center;
        width:210px;
        margin:10px 0 14px;
        outline:none;
        text-transform:uppercase;
        caret-color:#33ff33;
}

/*high scores table*/
.hs-tbl{
    width:100%;
    border-collapse: collapse;
    font-size: 10px;
    margin:8px 0 14px;
}
.hs-tbl th{
    color: #1a7a1a;
    padding: 4px 3px;
    text-align: left;
    border-bottom: 1px solid #1c5a1c;
    letter-spacing: 1px;
}
.hs-tbl td{
    padding:4px 3px;
    color:#33ff33;
}
.hs-tbl tr.new-entry td{
    color:#ffff00;
    text-shadow:0 0 7px #ffff00;
}
.hs-tbl tr:nth-child(even) td{
    background:rgba(51,255,51,0.03);
}

/* controls */
.ctrl-tbl{
    width:100%;
    border-collapse:collapse;
    font-size:10px;
    margin:8px 0 12px;
}
.ctrl-tbl td{
    padding:5px 3px;
    border-bottom:1px solid #0a2e0a;
}
.ctrl-tbl td:first-child{
    color:#1a7a1a;
    text-align:left;
}
.ctrl-tbl td:last-child{
    text-align:right;
}
.keybtn{
    background:#010601;
    border:1px solid #1c5a1c;
    color:#33ff33;
    font-family:'Press Start 2P','Courier New',monospace;
    font-size:8px;
    padding:4px 8px;
    cursor:pointer;
    min-width:86px;
    text-align:center;
}
.keybtn:hover{
    border-color:#33ff33;
    box-shadow:0 0 5px #33ff33;
}

/* when changing key controls */
.keybtn.listening{
    border-color:#ffff00;
    color:#ffff00;
    animation:blink .45s infinite alternate;
}
@keyframes blink{
    from {opacity:1}
    to {opacity:.25}
}

/* arcade-like scrolling*/
.scroll{max-height:300px;overflow-y:auto;overflow-x:hidden;}
.scroll::-webkit-scrollbar{width:3px;}
.scroll::-webkit-scrollbar-thumb{background:#1c5a1c;}