@font-face {
    font-family: 'Dico';
    src: url('Dico.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a0a0a;
}

/* --- Game Frame --- */
#game-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px;
    background:
        linear-gradient(135deg, rgba(201,168,76,0.08) 0%, transparent 50%, rgba(201,168,76,0.08) 100%),
        linear-gradient(to bottom, #110e08, #0a0806);
    border: 3px solid #c9a84c;
    outline: 2px solid rgba(139,105,20,0.6);
    outline-offset: 3px;
    box-shadow:
        0 0 0 1px #1a1206,
        0 0 20px 4px rgba(201,168,76,0.15),
        0 0 60px 8px rgba(201,168,76,0.06),
        inset 0 0 12px rgba(201,168,76,0.1);
}

/* Inner decorative border line */
#game-frame::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(201,168,76,0.25);
    pointer-events: none;
    z-index: 2;
}

/* Outer decorative ring */
#game-frame::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 1px solid rgba(139,105,20,0.2);
    pointer-events: none;
    z-index: 0;
}

/* --- Canvas --- */
canvas {
    display: block;
    position: relative;
    z-index: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    cursor: crosshair;
}

/* --- Corner Ornaments --- */
.frame-corner {
    position: absolute;
    width: 56px;
    height: 56px;
    z-index: 3;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23d4af37'/%3E%3Cstop offset='100%25' stop-color='%238b6914'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Outer sweeping arcs --%3E%3Cpath d='M0,72 Q2,2 72,0' fill='none' stroke='%238b6914' stroke-width='1.5' opacity='0.6'/%3E%3Cpath d='M0,58 Q4,4 58,0' fill='none' stroke='%23c9a84c' stroke-width='1.2'/%3E%3Cpath d='M0,44 Q6,6 44,0' fill='none' stroke='%23d4af37' stroke-width='1' opacity='0.8'/%3E%3C!-- Lotus petals from corner --%3E%3Cpath d='M4,30 C6,18 18,6 30,4' fill='none' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Cpath d='M2,20 C4,12 12,4 20,2' fill='none' stroke='%23d4af37' stroke-width='1.8'/%3E%3Cpath d='M0,14 C2,8 8,2 14,0' fill='none' stroke='%23c9a84c' stroke-width='1.2'/%3E%3C!-- Central lotus bloom --%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='5' fill='none' stroke='%23d4af37' stroke-width='1'/%3E%3Ccircle cx='10' cy='10' r='2.5' fill='%238b6914'/%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23c9a84c'/%3E%3C!-- Radiating petal tips --%3E%3Cellipse cx='10' cy='1' rx='2' ry='1' fill='%23c9a84c' opacity='0.7'/%3E%3Cellipse cx='1' cy='10' rx='1' ry='2' fill='%23c9a84c' opacity='0.7'/%3E%3Cellipse cx='17' cy='3' rx='1.5' ry='0.8' fill='%23d4af37' opacity='0.6' transform='rotate(-20 17 3)'/%3E%3Cellipse cx='3' cy='17' rx='0.8' ry='1.5' fill='%23d4af37' opacity='0.6' transform='rotate(-20 3 17)'/%3E%3C!-- Dot accents along arcs --%3E%3Ccircle cx='24' cy='4' r='1.5' fill='%23c9a84c' opacity='0.8'/%3E%3Ccircle cx='4' cy='24' r='1.5' fill='%23c9a84c' opacity='0.8'/%3E%3Ccircle cx='36' cy='3' r='1.2' fill='%23d4af37' opacity='0.6'/%3E%3Ccircle cx='3' cy='36' r='1.2' fill='%23d4af37' opacity='0.6'/%3E%3Ccircle cx='48' cy='2' r='1' fill='%23c9a84c' opacity='0.4'/%3E%3Ccircle cx='2' cy='48' r='1' fill='%23c9a84c' opacity='0.4'/%3E%3C!-- Small diamond accents --%3E%3Cpath d='M30,6 L31.5,4.5 L33,6 L31.5,7.5 Z' fill='%23c9a84c' opacity='0.5'/%3E%3Cpath d='M6,30 L7.5,28.5 L9,30 L7.5,31.5 Z' fill='%23c9a84c' opacity='0.5'/%3E%3C/svg%3E");
}

.frame-tl { top: -4px; left: -4px; }
.frame-tr { top: -4px; right: -4px; transform: scaleX(-1); }
.frame-bl { bottom: -4px; left: -4px; transform: scaleY(-1); }
.frame-br { bottom: -4px; right: -4px; transform: scale(-1, -1); }