@font-face {
    font-family: "GameFont";
    src: url("fonts/font.ttf") format("truetype");
    font-display: swap;
}

:root { color-scheme: dark; }

* { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden;
    background: radial-gradient(circle at center, #1c2430 0%, #0b0f16 70%, #05070a 100%);
    display: grid;
    place-items: center;
    font-family: "GameFont", "Malgun Gothic", sans-serif;
    user-select: none;
}

.game-shell {
    display: grid;
    justify-items: center;
    gap: 12px;
}

#gameCanvas {
    width: min(88vw, 88vh);
    height: min(88vw, 88vh);
    display: block;
    background: #79b9ef;
    border: 3px solid rgba(255,255,255,0.28);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 22px 70px rgba(0,0,0,0.6);
    cursor: crosshair;
}

.help {
    width: min(88vw, 88vh);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    color: rgba(235,242,249,0.72);
    font-size: 13px;
    letter-spacing: 0.04em;
}

@media (max-height: 700px) {
    #gameCanvas {
        width: min(82vw, 82vh);
        height: min(82vw, 82vh);
    }

    .help {
        width: min(82vw, 82vh);
    }
}





.topbar{
width:min(88vw,88vh);
display:flex;
justify-content:flex-start;
margin-bottom:10px;
}

#homeButton{
padding:8px 14px;
border:2px solid rgba(255,255,255,.18);
border-radius:8px;
background:#20252d;
color:#f2f2f2;
font-family:"GameFont",sans-serif;
font-size:16px;
cursor:pointer;
transition:.15s;
}
#homeButton:hover{
background:#313844;
transform:translateY(-1px);
}