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

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

/* =========================
   VIEWPORT / SAFE AREA
   ========================= */

body {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;

    overflow: clip;
    background: #111827;

    display: flex;
    justify-content: center;
    align-items: center;

    padding:
        env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* =========================
   HIDE UNUSED UI
   ========================= */

#sidebar,
#drawer header,
#gamepad,
#settings,
#profilerContainer,
#consoleContainer,
#pageContainer,
#raw-console {
    display: none !important;
}

/* =========================
   FORCE ROOT CONTAINERS
   ========================= */

#display-container,
#display,
#main,
#drawer {
    all: unset !important;

    position: fixed !important;
    inset: 0 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100vw !important;
    height: 100svh !important;
}

/* =========================
   PHONE CONTAINER (FLEX)
   ========================= */

.phone {
    position: relative;

    display: flex;
    flex-direction: column;

    height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));

    width: auto;
    max-width: 100vw;
    max-height: 100%;

    aspect-ratio: 9 / 16;

    background: url("phoneImg/bg_portraitblackg.png") center / 100% 100% no-repeat;
}

/* Allow children to shrink properly (important for canvas) */
.phone>* {
    min-height: 0;
    min-width: 0;
}

/* =========================
   LAYOUT RATIOS
   ========================= */

/* 55% */
.screen {
    flex: 55 1 0%;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    background: #000;
    overflow: hidden;

    margin: 0% 6% 0 6%;
}

/* 10% */
.softkeys {
    flex: 13 1 0%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0%;
    position: relative;
    z-index: 10;
}

/* 35% */
.keypad {
    flex: 32 1 0%;

    display: flex;
    flex-wrap: wrap;

    padding: 0% 5% 0% 5%;
    position: relative;
    z-index: 10;
}

/* =========================
   CANVAS
   ========================= */

#canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill;
}

/* =========================
   SOFT KEYS
   ========================= */

.softkey {
    flex: 1 1 0%;
    height: 100%;
    object-fit: contain;
}

.softkey.left {
    transform: translateX(20%);
    z-index: 1;
}

.softkey.right {
    transform: translateX(-20%);
    z-index: 1;
}

.softkey.fire {
    position: relative;
    z-index: 5;
}

.softkeys img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================
   KEYPAD BUTTONS
   ========================= */

.keypad img {
    width: calc(100% / 3);
    height: calc(100% / 4);
    object-fit: contain;
}

/* =========================
   RESPONSIVE BEHAVIOR
   ========================= */

/* Taller than 9:16 → fit to width */
@media (max-aspect-ratio: 9/16) {
    .phone {
        height: auto;
        width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-width: 100%;
        aspect-ratio: 9 / 16;
    }
}

/* Landscape */
@media (orientation: landscape) {
    .phone {
        height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        width: auto;
        aspect-ratio: 9 / 16;
    }
}

/* Extra-tall phones */
@media (max-aspect-ratio: 9/19) {
    .phone {
        height: auto;
        width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-width: 100%;
        aspect-ratio: 9 / 16;
    }
}

/* =========================
   INPUT / TOUCH
   ========================= */

.phone,
.screen,
.softkeys,
.keypad,
.softkeys img,
.keypad img,
#canvas {
    pointer-events: auto !important;
}

.softkeys img,
.keypad img {
    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;

    transition: opacity 0.1s ease;
}

.phone,
.softkeys,
.keypad {
    user-select: none;
    -webkit-user-select: none;
}

.softkeys img,
.keypad img {
    -webkit-touch-callout: none;
    /* stops save image menu */
    -webkit-user-drag: none;
}