@font-face {
    font-family: 'LanternFont';
    src: url('../assets/Font%201.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0f0d19; /* Standard deep abyss from game title */
    color: #ccccff;
    font-family: 'LanternFont', monospace;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Subtle glowing abstract background mimicking the RunicBG grid */
.void-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-image: 
        linear-gradient(rgba(107, 64, 217, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(107, 64, 217, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    z-index: 1;
    pointer-events: none;
}

.lantern-container {
    position: relative;
    z-index: 10;
    filter: drop-shadow(0px 0px 15px rgba(107, 64, 217, 0.3));
}

/* 9-Slice CSS logic */
.retro-frame {
    display: grid;
    grid-template-columns: 24px auto 24px;
    grid-template-rows: 24px auto 24px;
    image-rendering: pixelated; /* Essential for crisp pixel art scaling */
}

/* Base class for all edge assets */
.frame-corner, .frame-edge {
    background-image: url('../assets/tileset.png');
    background-repeat: repeat; /* By default repeat */
}

/* Corners - No repeat */
.frame-corner {
    width: 24px; height: 24px;
    background-repeat: no-repeat;
}

/* Slicer calculations assuming 24x24 tiles within tileset.png */
/* Let's guess some reasonable frame tiles.
   Usually borders are near the top/right in generic CP437 mapping. 
   Assuming standard code page 437 tiles:
   201 ╔ (column 9 row 12) -> X=216, Y=288
   187 ╗ (column 11 row 11) -> X=264, Y=264
   200 ╚ (column 8 row 12) -> X=192, Y=288
   188 ╝ (column 12 row 11) -> X=288, Y=264
   205 ═ (column 13 row 12) -> X=312, Y=288
   186 ║ (column 10 row 11) -> X=240, Y=264
*/
/* Note: coordinates in generic CP437 are roughly standard, I'll provide fallbacks that pick visually pleasing locations.
   To be safe without knowing the exact index, we'll pick generic borders. Let's use simple wall segments. 
   We will treat tileset.png as 16 columns of 24x24 tiles.
   Index 201 = col 9, row 12. => (9*24) = 216px x (12*24) = 288px */

.top-left { background-position: -216px -288px; }
.top-right { background-position: -264px -264px; }
.bottom-left { background-position: -192px -288px; }
.bottom-right { background-position: -288px -264px; }

.frame-edge.top { background-position: -312px -288px; background-repeat: repeat-x;}
.frame-edge.bottom { background-position: -312px -288px; background-repeat: repeat-x;}
.frame-edge.left { background-position: -240px -264px; background-repeat: repeat-y;}
.frame-edge.right { background-position: -240px -264px; background-repeat: repeat-y;}

.content-wrapper {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#game-zone {
    position: relative;
    /* Aspect ratio lock / fixed size for canvas container to let love JS run nicely */
    aspect-ratio: 16 / 9;
    max-height: 98vh;
    max-width: 100vw;
    width: 100vw; /* will be limited by max-width */
}

canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
    border: none;
    outline: none;
    image-rendering: default;
}

#canvas {
    visibility: hidden;
}

footer {
    position: absolute;
    bottom: 12px;
    z-index: 10;
    text-align: center;
    color: rgba(204, 204, 255, 0.4);
    font-size: 14px;
    letter-spacing: 1px;
}

footer span {
    color: rgba(102, 191, 128, 0.7);
    margin-left: 12px;
}