@font-face {
    font-family: "OSRS Bold";
    src: url(/play/static/media/RuneScape-Bold-12.4ca02f96457fdc55273f.ttf);
}
@font-face {
    font-family: "OSRS Small";
    src: url(/play/static/media/RuneScape-Plain-11.49781db6406187ae7664.ttf);
}

:root {
    --app-vw: 100vw;
    --app-vh: 100dvh;
    --ios-safari-landscape-w: var(--app-vw);
    --ios-safari-landscape-h: var(--app-vh);
}

html,
body,
#root {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
        "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    background-color: black;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.max-height {
    height: 100%;
}

#root {
    overflow: hidden;
}

.page-loading {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: white;
}

.App {
    position: fixed;
    inset: 0;
    width: var(--app-vw, 100vw);
    height: var(--app-vh, 100dvh);
    overflow: hidden;
    background: black;
}

.App.ios-safari-force-landscape {
    width: var(--ios-safari-landscape-w, var(--app-vw, 100vw));
    height: var(--ios-safari-landscape-h, var(--app-vh, 100dvh));
}

.App.ios-safari-force-landscape.ios-safari-force-landscape-rotated {
    top: var(--ios-safari-center-y, 50vh);
    left: var(--ios-safari-center-x, 50vw);
    right: auto;
    bottom: auto;
    width: var(--ios-safari-landscape-w, var(--app-vh, 100dvh));
    height: var(--ios-safari-landscape-h, var(--app-vw, 100vw));
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
}

canvas {
    outline: none;
    border: none;
    display: block;
}

.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 0 black;
}

.flex {
    display: flex;
    flex: 1 1;
}

.align-right {
    justify-content: right;
}

.rs-border {
    border: 6px solid;
    border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAABkElEQVR42s2YP0sEMRDFYy0HcqVoI16lFiJYiFxxsMUJV1hsod//e6y8wG95SbZNnIO53Z1MMm/+JJMkpXS17HbXIUhYkl7u724z7fc3+Xk4PGSCJ9L3y9NjJpfV9/vbc6atNpH6Ms7W+OjPoPTnwt6pBiulDA5fBCDnYYT4tdIaDPpXQICaptNqkXe+XM6rxQxwPH4up4/XBpB4anMv6akx3Eg8Lp2AaTyE2xFmUCnwkCGLvNpFHj7JeMjUjjGuA9nCQ7iT2EoQS9WBd5Esgv91npaf37kg8dTmsngTvt4BRTSKHHIgWJw6//CoAys85Ikty3oDko5ab5FDnoAjAflEaWYZ8R8FiDxsZplPcSGWUG9A0kH+OIbkQKBRHnKdRVID6L881ACqa4pW1d6AWP1ddzPLWBtGeshX8M3SQe0a4SEvvgUgKjgC8/zdHZB0+O5hM6kpjCMBeUGPDShUyMIldbhpH25hDFc6whXXcNuPcBu0cFvYcJv8kMegUAfFcEfpsJcNYa5jQl1YRbvS+wNPcexqz22FwgAAAABJRU5ErkJggg==) 6 / 6px / 0 repeat;
}

.rs-background {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAA8CAYAAADi8H14AAACEElEQVR42u2czU7EMAyE58kQZzjC+78KiAMSB7qKHY89k+2ht207/uQ68U8WH28vX4zr8/01dWWe36kleg8cAUfvqdYyDjhrUBZwFoYd4B1jIuFh1YtZeiK/PwJw95dEAzzhLVnAu3qikK9+hy7vdAT8++z/3rGqHdNgM3D/auvWHNV4HGA1vZgOD0pbRIbuowB3wY1ox+29XDswIVgtPWfahE6xLLB2HuwCVMmDr+wGU2Q3YDXQPxfc4uwNWACwEmQ4bb9uwMWAK+vFN+AAFCfIiBrE9N6Ozocc4IqqfjUIpwWvFHDHau+2s0DWqCnPctu+lQJmx0fVPfKjFhJ2jKqebXCtHT8s9jAAs6ZtVDM+GuAdL1ZKvZl7flQYxhiic6glL7WMWB5cCVixOLTc9GR779WznOG2Aa4ScyLcrUyuWtB0TZlpD1ifNmMc1QFwW0djJ32uBNZdaGoHrOKNHfG3tSf3SNxkZtY9mI3JWqlbszPzXkxX/J0gZ94Lhb7VCXAvATvMd6mHh7HZNHfAFZpwtcI/O+CqkCUDuKsj3b3oQq3V7XaczOKUUcex2KktIxRb3eonh0LlSsV5AhfAK+uXBWDV2Ls0eOJyyC9zr8K8GxRHj7p7f8ytIdRSUgfAodk0p9SUFSaY9sItPZ1c4EYAd0POTDvaA1aErPLlQK2boBgmtgawT/nftBvwkwL+BjPPYftRO4YfAAAAAElFTkSuQmCC);
}