/* ==================================================
RESET
================================================== */

html,
body {

```
margin: 0;
padding: 0;

width: 100%;
height: 100%;

overflow: hidden;

background: #000;

touch-action: none;

-webkit-user-select: none;
user-select: none;
```

}

/* ==================================================
BODY
================================================== */

body {

```
display: flex;

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

position: fixed;

inset: 0;
```

}

/* ==================================================
MAIN 9:16 FRAME
================================================== */

#game-frame {

```
position: relative;

width: min(
    100vw,
    calc(100vh * 9 / 16)
);

height: min(
    100vh,
    calc(100vw * 16 / 9)
);

aspect-ratio: 9 / 16;

overflow: hidden;

background: #000;

/* Force exact centering */
margin: auto;
```

}

/* ==================================================
LOADING SCREEN
CONFINED TO 9:16 FRAME
================================================== */

#loading-screen {

```
position: absolute;

left: 0;
top: 0;

width: 100%;
height: 100%;

z-index: 9999;

display: flex;

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

background: #000;

opacity: 1;

visibility: visible;

transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
```

}

/* ==================================================
LOADING CONTENT
================================================== */

#loading-content {

```
width: 80%;

max-width: 420px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;
```

}

/* ==================================================
LOADING LOGO
================================================== */

#loading-logo {

```
width: 65%;

max-width: 300px;

height: auto;

display: block;

margin-bottom: 35px;

animation:
    salty-logo-pulse 1.8s ease-in-out infinite;
```

}

/* ==================================================
LOGO PULSE
================================================== */

@keyframes salty-logo-pulse {

```
0% {

    transform: scale(1);

    opacity: 0.75;

}

50% {

    transform: scale(1.06);

    opacity: 1;

}

100% {

    transform: scale(1);

    opacity: 0.75;

}
```

}

/* ==================================================
LOADING TEXT
================================================== */

#loading-text {

```
font-family:
    Arial,
    Helvetica,
    sans-serif;

font-size: 18px;

font-weight: bold;

letter-spacing: 3px;

color: #fff;

margin-bottom: 15px;
```

}

/* ==================================================
LOADING BAR CONTAINER
================================================== */

#loading-bar-container {

```
width: 100%;

height: 6px;

overflow: hidden;

background: #333;

border-radius: 10px;
```

}

/* ==================================================
LOADING BAR
================================================== */

#loading-bar {

```
width: 0%;

height: 100%;

background: #fff;

border-radius: 10px;

transition:
    width 0.15s ease;
```

}

/* ==================================================
LOADING PERCENTAGE
================================================== */

#loading-percentage {

```
margin-top: 12px;

font-family:
    Arial,
    Helvetica,
    sans-serif;

font-size: 14px;

color: #aaa;
```

}

/* ==================================================
LOADING COMPLETE
================================================== */

#loading-screen.loading-complete {

```
opacity: 0;

visibility: hidden;
```

}

/* ==================================================
UNITY GAME CONTAINER
================================================== */

#game-container {

```
position: absolute;

left: 0;
top: 0;

width: 100%;
height: 100%;

overflow: hidden;

background: #000;
```

}

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

#unity-canvas {

```
position: absolute;

left: 0;
top: 0;

width: 100% !important;

height: 100% !important;

display: block;

background: #000;

touch-action: none;
```

}