/* the web game's page: the game fills the whole window. the loading screen
   uses the game's own UI frame and pixel font. */

@font-face {
    font-family: "Pixel Operator";
    src: url("pixel-bold.ttf") format("truetype");
    font-weight: 700;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* the sea around the island */
    background: #3a7bbd;
}

#unity-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #3a7bbd;
    outline: none;
}

/* wooden frame with parchment, 9-sliced at 3x like the game's windows */
.frame {
    border: 21px solid transparent;
    border-image: url("frame.png") 7 fill / 21px stretch;
    image-rendering: pixelated;
}

#loading {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: calc(100% - 32px);
    padding: 8px 16px 16px;
    text-align: center;
    font-family: "Pixel Operator", monospace;
    font-weight: 700;
    color: #5b2b0f;
    -webkit-font-smoothing: none;
}

#loading .title {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 12px;
}

/* the warrior walking in place (4 frame strip) */
.walker {
    width: 96px;
    height: 96px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.walker img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    image-rendering: pixelated;
    animation: walk 0.8s steps(4) infinite;
}
@keyframes walk {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

.bar {
    height: 16px;
    background: #6b3412;
    box-shadow: 0 0 0 3px #3b1f0e;
    margin: 8px 3px 12px;
}
#bar-fill {
    width: 0%;
    height: 100%;
    background: #e9a14a;
    box-shadow: inset 0 -3px 0 #c9772c;
}

#loading-text {
    font-size: 16px;
    color: #8a5a35;
}

#message {
    position: fixed;
    left: 8px;
    bottom: 8px;
    font-family: monospace;
}
#message div {
    padding: 6px 10px;
    margin-top: 4px;
    background: #f6d9a4;
    color: #3b1f0e;
}
#message .error {
    background: #b3261e;
    color: #fff;
}