html,
body,
#app,
#game-container {
    width: 100%;
    height: 100%;
    width: 100dvw;
    height: 100dvh;
}

html {
    --game-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --game-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
    --game-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    --game-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}

html,
body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #0f0f0f;
    overflow: hidden;
    position: fixed;
    inset: 0;
}

#app {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100dvw;
    min-height: 100dvh;
}

#game-container {
    position: relative;
    flex: 0 0 auto;
    width: var(--game-viewport-width, 100dvw);
    height: var(--game-viewport-height, 100dvh);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#game-container canvas {
    display: block;
}

.account-input-overlay {
    position: absolute;
    z-index: 20;
    inset: 0;
    pointer-events: none;
}

.account-native-input {
    position: absolute;
    box-sizing: border-box;
    min-width: 0;
    border: 2px solid #65706f;
    border-radius: 0;
    padding: 8px 12px;
    outline: 0;
    background: #131319;
    color: #edf7f3;
    caret-color: #00d9ff;
    font: 700 17px/1.2 "Courier New", monospace;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: text;
    -webkit-user-select: text;
}

.account-native-input-compact {
    padding: 6px 10px;
    font-size: 15px;
}

.account-native-input:focus {
    border-color: #00d9ff;
    box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.2);
}