html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
}

html,
body,
canvas,
.emscripten_border,
* {
    -webkit-touch-callout: none !important;
}

html,
body,
canvas,
.emscripten_border {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
}

html {
    background:
        radial-gradient(ellipse at center, rgba(87, 20, 22, 0.22) 0%, transparent 56%),
        radial-gradient(ellipse at center, #171413 0%, #090909 62%, #020202 100%);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.58) 100%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px);
}

/* Dark steel frame with a restrained, blood-red edge. */
.emscripten_border {
    position: relative;
    padding: clamp(10px, 2vw, 24px);
    border: 1px solid #512021;
    border-radius: 3px;
    background: linear-gradient(145deg, #262321 0%, #11100f 38%, #050505 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:
        0 0 0 3px #050505,
        0 0 0 4px rgba(111, 30, 31, 0.62),
        0 24px 70px rgba(0, 0, 0, 0.88),
        0 0 34px rgba(91, 17, 19, 0.2);
    touch-action: none;
}

.emscripten_controls {
    display: none;
}

#fullscreen-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(190, 68, 64, 0.72);
    border-radius: 2px;
    background: rgba(10, 9, 9, 0.86);
    color: #e7dfd8;
    font: 22px/1 sans-serif;
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    pointer-events: auto;
    touch-action: auto;
}

#fullscreen-btn:hover,
#fullscreen-btn:focus-visible {
    opacity: 1;
    background: #411516;
    border-color: #c24a45;
    outline: none;
}

/* Inner shadow gives the screen a recessed, worn-in look. */
.emscripten_border::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(190, 68, 64, 0.16);
    border-radius: 1px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 35%, rgba(0, 0, 0, 0.25));
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.82);
    pointer-events: none;
}

/* Screen */
canvas.emscripten {
    display: block;

    border-radius: 1px;

    image-rendering: pixelated;
    image-rendering: crisp-edges;

    background: #000;

    box-shadow:
        0 0 0 1px #050505,
        0 0 18px rgba(104, 20, 21, 0.24);

    filter:
        contrast(1.1)
        saturate(0.82)
        brightness(0.92);

    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-touch-callout: none;
}

/* GitHub Corner */
.github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    pointer-events: auto;
    touch-action: auto;
}

.github-corner a {
    pointer-events: auto;
}

.github-corner .corner-bg {
    fill: #762324;
}

.github-corner:hover .corner-bg {
    fill: #a33435;
}

.github-corner .octo-body,
.github-corner .octo-arm {
    fill: #eee8e2;
}

@media (max-width: 768px) {
    .github-corner {
        transform: scale(0.75);
        transform-origin: top right;
    }
}

/* Legal Information */
.legal {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    pointer-events: auto;
    touch-action: auto;
}

.legal details {
    width: min(90vw, 700px);
    border: 1px solid #512021;
    border-radius: 3px;
    background: linear-gradient(145deg, #211e1c, #090909 72%);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 18px rgba(91, 17, 19, 0.22);
    overflow: hidden;
}

.legal summary {
    display: flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
    padding: 12px 18px;
    color: #e8e0d9;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 3px #000;
    touch-action: auto;
    -webkit-touch-callout: auto;
}

.legal summary::-webkit-details-marker {
    display: none;
}

.legal summary::before {
    content: "";
}

.legal details[open] summary::before {
    content: "";
}

.legal details[open] summary::after {
    content: "X";
    margin-left: auto;
}

.legal details[open] {
    background: linear-gradient(145deg, #211e1c, #090909 72%);
}

.legal details[open] summary {
    border-bottom: 1px solid rgba(190, 68, 64, 0.28);
}

.legal h1 {
    visibility:hidden;
}

.legal details h2,
.legal details p {
    margin: 0;
}

.legal details h2 {
    color: #c25450;
    margin: 16px 20px 8px;
    text-shadow: 0 1px 5px rgba(110, 25, 25, 0.42);
}

.legal details p {
    color: rgba(235, 229, 222, 0.88);
    margin: 0 20px 20px;
    line-height: 1.6;
}

.legal a {
    color: #c25450;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(110, 25, 25, 0.38);
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

.legal a:hover,
.legal a:focus {
    color: #f0b2aa;
    text-shadow: 0 0 8px rgba(168, 54, 51, 0.5);
}

.legal a:active {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(168, 54, 51, 0.7);
}

@media (max-width: 768px) {
    .legal {
        top: 8px;
        left: 8px;
        right: auto;
        bottom: auto;
        transform: none;
    }

    .legal details {
        width: auto;
        max-width: 140px;
    }

    .legal summary {
        padding: 6px 10px;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

    .legal details[open] {
        position: fixed;

        top: 5vh;
        left: 5vw;

        width: 90vw;
        max-width: none;

        max-height: 80vh;

        overflow-y: auto;

        z-index: 1000;
    }
}