@font-face {
    font-family: "ApexNew";
    src: url("fonts/ApexNew-Book.otf") format("opentype");
    font-weight: normal;
}

@font-face {
    font-family: "ApexNew";
    src: url("fonts/ApexNew-Bold.otf") format("opentype");
    font-weight: bold;
}

@font-face {
    font-family: "ApexNew";
    src: url("fonts/ApexNew-Heavy.otf") format("opentype");
    font-weight: 900;
}

html {
    color:white;
    text-align:center;
    height:100%;
    font-family:"ApexNew", sans-serif;

    background-color:black;
}

body {
    overflow:hidden !important;
}

/* FULL SCREEN */
:-webkit-full-screen { background-color: black !important; } /* Safari */
:-ms-fullscreen { background-color: black !important; } /* IE11 */
:fullscreen { background-color: black !important; } /* Standard syntax */

/* SHARED */

div.page > img.web {
    position:absolute;
    left:0;
    top:0;
    width:100%;
}

div.page > img.logo {
    position:absolute;
    left:50%;
    top:5vmin;
    transform:translateX(-50%);
    width:50vmin;
}

/* LOADING */

div.page[data-name=loading] > h1 {
    font-size:5vmin;
    line-height:1;
    font-weight:900;
    font-style:italic;
    text-transform:uppercase;
    margin-top:50vmin;
}

div.page[data-name=loading] > h2 {
    margin-top:5vmin;
    font-size:4vmin;
    font-weight:900;
}

/* WELCOME */

div.page[data-name=welcome] {
    background-image:url("/graphics/background-lobby.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

div.page[data-name=welcome] > h1 {
    font-size:8vmin;
    color:white;
    text-transform: uppercase;
    font-weight:bold;
    line-height: 1.1;
}

div.page[data-name=welcome] > p {
    font-size:4vmin;
    color:white;
    margin-top:5vmin;
    line-height:1.1;
    padding:0 12vmin;
}

div.page[data-name=welcome] > p:last-of-type {
    font-size:3.5vmin;
}

div.page[data-name=welcome] > button {
    width: 25vmin;
    height: 25vmin;
    margin-top: 5dvh;
    backdrop-filter: blur(2vmin);
    border: 0.7vmin solid skyblue;
    background: none;
    border-radius: 5vmin;
    font-size: 5vmin;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 0 0 2vmin skyblue;
}

/* INTRO */

div.page[data-name=intro] {
    overflow:hidden;

    background-image:url("/graphics/background-intro.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment: fixed;
}

div.page[data-name=intro] > div {
    overflow:hidden;
    width:100%;
    height:100%;
    padding-top:100dvh;
    padding-bottom:100dvh;
}

div.page[data-name=intro] h1 {
    font-size:10vmin;
    text-transform: uppercase;
    font-weight:bold;
    font-style:italic;
    line-height:1.2;
    color:#DC6F1E;
}

div.page[data-name=intro] p {
    font-size:4vmin;
    margin:5vmin 10vmin;
    line-height:1.5;
    font-weight:bold;
    font-style:italic;
}

/* AVATAR SELECT */

div.page[data-name=avatar-select] {
    background-image:url("/graphics/background-intro.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    overflow:hidden;
}

div.page[data-name=avatar-select] > a-scene {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    /* z-index: 10; */
    pointer-events: none;

    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 70%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 70%);
}

div.page[data-name=avatar-select] > button {
    background-color:transparent;
    background-size:100% 100%;
}

div.page[data-name=avatar-select] > button.left ,
div.page[data-name=avatar-select] > button.right {
    width:10vmin;
    height:10vmin;
    position:absolute;
    top:calc(50% - 5vmin);
}

div.page[data-name=avatar-select] > button.left {
    background-image:url(/graphics/button-left.png);
    left:10vmin;
}

div.page[data-name=avatar-select] > button.right {
    background-image:url(/graphics/button-right.png);
    right:10vmin;
}

div.page[data-name=avatar-select] > button.select {
    background-image:url(/graphics/button-yes.png);
    width:20vmin;
    height:20vmin;
}

div.page[data-name=avatar-select] > h1 {
    margin-top: 70dvh;
    margin-bottom: 5vmin;
    font-size: 6vmin;
    line-height: 1.1;
    font-weight: bold;
}

/* AVATAR NAME */

div.page[data-name=avatar-name] {
    background-image:url("/graphics/background-intro.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    overflow:hidden;
}

div.page[data-name=avatar-name] > h1 {
    margin-top: calc(30vmin);
    margin-bottom: 5vmin;
    font-size: 6vmin;
    line-height: 1.1;
    font-weight: bold;
}

div.page[data-name=avatar-name] > form > input {
    width: 80vmin;
    height: 12vmin;
    border-radius: 6vmin;
    font-size: 4vmin;
    font-weight: bold;
    text-transform:uppercase;
    margin-bottom:5vmin;
}

div.page[data-name=avatar-name] > button {
    background-size: 100% 100%;
    background-color: transparent;
    vertical-align: middle;
}

div.page[data-name=avatar-name] > button.back {
    width:10vmin;
    height:10vmin;
    background-image: url(/graphics/button-back.png);
}

div.page[data-name=avatar-name] > button.submit {
    width:15vmin;
    height:15vmin;
    background-image: url(/graphics/button-yes.png);
    margin-left: 22vmin;
    margin-right: 32vmin; /* margin-left + button.back width */
}


/* AVATAR CONFIRM */

div.page[data-name=avatar-confirm] {
    background-image:url("/graphics/background-intro.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    overflow:hidden;
}

div.page[data-name=avatar-confirm] > a-scene {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    /* z-index: 10; */
    pointer-events: none;

    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 90%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 90%);
}

div.page[data-name=avatar-confirm] > h2 {
    font-size: 4vmin;
    text-transform: uppercase;
    font-weight: bold;
    position: absolute;
    width: 100%;
    top: calc(50dvh - 54vw);
    padding: 5vmin 0;
    color: black;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.7) 60%, rgba(255, 255, 255, 0) 80%);
}

div.page[data-name=avatar-confirm] > h1 {
    position: absolute;
    left: 10vmin;
    bottom: 15vmin;
    font-size: 6vmin;
    font-weight: bold;
}

div.page[data-name=avatar-confirm] > button {
    background-size: 100% 100%;
    background-color: transparent;
    width: 15vmin;
    height: 15vmin;
    position: absolute;
    bottom: 15vmin;
    transform: translateY(50%);
}

div.page[data-name=avatar-confirm] > button.no {
    background-image: url(/graphics/button-no.png);
    right: 30vmin;
}

div.page[data-name=avatar-confirm] > button.yes {
    background-image: url(/graphics/button-yes.png);
    right: 10vmin;
}

/* LOBBY */

div.page[data-name=lobby] {
    background-image:url("/graphics/background-lobby.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    overflow:hidden;
}

div.page[data-name=lobby] > a-scene {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    /* z-index: 10; */
    pointer-events: none;
}

div.page[data-name=lobby] > h2 {
    font-size: 4vmin;
    text-transform: uppercase;
    font-weight: bold;
    position: absolute;
    width: 100%;
    top: calc(50dvh - 54vw);
    padding: 5vmin 0;
    color: black;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.7) 60%, rgba(255, 255, 255, 0) 80%);
}

div.page[data-name=lobby] > button {
    background-size: 100% 100%;
    background-color: transparent;
    position: absolute;
    bottom: 20vmin;
    transform: translate(-50%, 50%);
}

div.page[data-name=lobby] > button.info {
    top: 5vmin;
    right: 5vmin;
    width: 10vmin;
    height: 10vmin;
    transform: none;
    background-image: url(/graphics/button-info.png);
}

div.page[data-name=lobby] > button.map {
    background-image: url(/graphics/button-map.png);
    width:15vmin;
    height:15vmin;
    left: 25vmin;
}

div.page[data-name=lobby] > button.qr {
    background-image: url(/graphics/button-qr.png);
    width:25vmin;
    height:25vmin;
    left: 50vmin;
}

div.page[data-name=lobby] > button.monsters {
    background-image: url(/graphics/button-monster.png);
    width:15vmin;
    height:15vmin;
    left: 75vmin;
}

/* MONSTERS */

div.page[data-name=monsters] {
    background-image:url("/graphics/background-lobby.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    overflow:hidden;
}

div.page[data-name=monsters] > a-scene {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    /* z-index: 10; */
    pointer-events: none;
}

div.page[data-name=monsters] > button {
    background-color:transparent;
    background-size:100% 100%;
}

div.page[data-name=monsters] > button.left ,
div.page[data-name=monsters] > button.right {
    width:10vmin;
    height:10vmin;
    position:absolute;
    top:calc(50% - 5vmin);
}

div.page[data-name=monsters] > button.left {
    background-image:url(/graphics/button-left.png);
    left:10vmin;
}

div.page[data-name=monsters] > button.right {
    background-image:url(/graphics/button-right.png);
    right:10vmin;
}

div.page[data-name=monsters] > button.back {
    width:10vmin;
    height:10vmin;
    position:absolute;
    background-image:url(/graphics/button-close.png);
    left:5vmin;
    bottom:5vmin;
}

/* MAP */

div.page[data-name=map] {
    background:black;
}

div.page[data-name=map] > button.back {
    background-color:transparent;
    background-size:100% 100%;
    width:10vmin;
    height:10vmin;
    position:absolute;
    background-image:url(/graphics/button-back.png);
    left:5vmin;
    bottom:5vmin;
}

/* INFO */

div.page[data-name=info] {
    background-image:url("/graphics/background-lobby.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    overflow:hidden;
}

div.page[data-name=info] > div {
    mask-image: linear-gradient(to bottom, transparent 25vmin, white 35vmin);
    overflow:scroll;
    height:100%;
}

div.page[data-name=info] > img.logo {
    position:fixed;
}

div.page[data-name=info] > button.back {
    background-color:transparent;
    background-size:100% 100%;
    width:10vmin;
    height:10vmin;
    position:fixed;
    background-image:url(/graphics/button-back.png);
    left:5vmin;
    bottom:5vmin;
}

div.page[data-name=info] > div > h1 {
    font-size:5vmin;
    line-height:1;
    font-weight:900;
    font-style:italic;
    text-transform:uppercase;
}

div.page[data-name=info] > div > h2 {
    margin-top:5vmin;
    font-size:4vmin;
    line-height:1;
    font-weight:900;
    font-style:italic;
    text-transform:uppercase;
}

div.page[data-name=info] > div > p {
    margin:5vmin 10vmin 0 10vmin;
    font-size:4vmin;
    line-height:1.2;
}

div.page[data-name=info] > div > :first-child {
    margin-top:35vmin;
}

div.page[data-name=info] > div > :last-child {
    margin-bottom:5vmin;
}

/* QR */

div.page[data-name=qr] > video {
    width:100%;
    height:100%;
    object-fit:cover;
    background-color:black;
}

div.page[data-name=qr] > h1 {
    position:absolute;
    left:0;
    top:18dvh;
    width:100%;
    font-size:5vmin;
    line-height:1.2;
    color:white;
    text-transform: uppercase;
    font-weight:bold;
}

div.page[data-name=qr] > button {
    position: absolute;
    left: 5vmin;
    bottom: 5vmin;
    width: 10vmin;
    height: 10vmin;
    background-size: 100% 100%;
    background-image: url(/graphics/button-back.png);
    background-color: transparent;
}

/* FIGHT */
a-scene#ar {
    background:white;
    display:none;
    z-index:0;
    /* pointer-events: none; */ /* neccessary? */
}

div.page[data-name=fight] {
    /* background:white; */
}

div.page[data-name=fight] > div.hud {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:1;
    background-image:url('/graphics/vignette.png');
    background-size:cover;
    background-position:center center;
    overflow:hidden;
}

div.page[data-name=fight] > div.hud > div.gun {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:none;
    background-image:url('../graphics/gun.png');
    background-size:100% auto;
    background-position:center bottom;
    background-repeat:no-repeat;
}

div.page[data-name=fight] > div.hud > div.gun > div.beam {
    position:absolute;
    left:50%;
    bottom:38.5vmin;
    width:1vmin;
    margin-left:-0.5vmin;
    height:calc(50% - 38.5vmin);
    background:lightgreen;
    display:none;
    opacity: 1;
    animation: fade 0.05s linear infinite;
    border-radius:50% 50% 0 0;
}

div.page[data-name=fight] > div.hud > div.gun > div.beam.alien {
    animation: none;
}

div.page[data-name=fight] > div.hud > div.gun > div.beam.corpse {
    animation: none;
}

div.page[data-name=fight] > div.hud > div.gun > div.beam.crab {
    width:1.5vmin;
    margin-left:-0.75vmin;
    background:lightcoral;
    animation: fade 0.2s linear infinite;
}

div.page[data-name=fight] > div.hud > div.gun > div.beam.zombie {
    width:1.5vmin;
    margin-left:-0.75vmin;
    background:lightcoral;
    animation: fade 0.2s linear infinite;
}

div.page[data-name=fight] > div.hud > div.gun > div.beam.reaper {
    width:2vmin;
    margin-left:-1vmin;
    background:orange;
}

div.page[data-name=fight] > div.hud > div.gun > div.beam.mummy {
    width:2vmin;
    margin-left:-1vmin;
    background:orange;
}

div.page[data-name=fight] > div.hud > div.gun > div.beam.bigboss {
    width:2vmin;
    margin-left:-1vmin;
    background:lightskyblue;
}

div.page[data-name=fight] > div.hud > div.gun > img.crosshair {
    width:50vmin;
    height:50vmin;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-25vmin;
    margin-top:-25vmin;
    pointer-events: none;
    display:none;
}

div.page[data-name=fight] > div.hud > div.spawn {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    font-size:5vmin;
    color:white;
    text-transform: uppercase;
    font-weight:bold;
    padding-top:50%;
    display:none;
}

div.page[data-name=fight] > div.hud > div.dead {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    font-size:8vmin;
    color:white;
    text-transform: uppercase;
    font-weight:bold;
    padding-top:50%;
    line-height:1.5;
    display:none;
}

div.page[data-name=fight] > div.hud > button.close {
    border-radius:50%;
    position:absolute;
    left:3vmin;
    bottom:3vmin;
    width:10vmin;
    height:10vmin;
    background:white;
}

div.page[data-name=fight] > div.hud > div.debug {
    width:100%;
    position:absolute;
    right:3vmin;
    bottom:3vmin;
    font-size:5vmin;
    line-height:1;
    text-align:right;
    display:none;
}

div.page[data-name=fight] > div.hud > button > img {
    width:100%;
    height:100%;
}

div.page[data-name=fight] > div.hud > div.direction {
    position:absolute;
    top:calc(50% - 5vmin);
    margin:0 5vmin;

    width: 0; 
    height: 0; 
    border: 5vmin solid transparent;
    animation: fade 1s linear infinite;
}

div.page[data-name=fight] > div.hud > div.direction.left {
    left:0;
    border-right-color:white;
}

div.page[data-name=fight] > div.hud > div.direction.right {
    right:0;
    border-left-color:white;
}

div.page[data-name=fight] > div.hud > div.damage {
    width:100%;
    height:100%;
    background:rgba(255,0,0,0.65);
    pointer-events: none;
    position:absolute;
    left:0;
    top:0;
    display:none;
}

@keyframes fade {
    0%,100% { opacity: 0 }
    50% { opacity: 1 }
}

div.page[data-name=fight] > div.hud > div.life {
    position:absolute;
    top:2vw;
    background-size:100% 100%;
    width:51.7vw;
    height:13.7vw;
}

div.page[data-name=fight] > div.hud > div.life.monster {
    background-image:url(/graphics/bar-predator.png);
    left:0;
}

div.page[data-name=fight] > div.hud > div.life.player {
    background-image:url(/graphics/bar-avatar.png);
    right:0;
}

div.page[data-name=fight] > div.hud > div.life > img {
    position:absolute;
    height:100%;
}

div.page[data-name=fight] > div.hud > div.life.monster > img {
    left:4vw;
}

div.page[data-name=fight] > div.hud > div.life.player > img {
    right:4vw;
}

div.page[data-name=fight] > div.hud > div.life > div {
    height:100%;
    width:100%;
    background-size:auto 100%;
    background-repeat:no-repeat;
}

div.page[data-name=fight] > div.hud > div.life.monster > div {
    float:left;
    background-position:top left;
    background-image:url(/graphics/bar-fill-predator.png);
}

div.page[data-name=fight] > div.hud > div.life.player > div {
    float:right;
    background-position:top right;
    background-image:url(/graphics/bar-fill-avatar.png);
}

/* STATUS */

div.status > h1 {
    font-size:5vmin;
    color:#004694;
    line-height:1.1;
    margin-top:26vmin;
    font-weight:900;
    font-style:italic;
    text-transform: uppercase;
}

div.status > h2 {
    font-size:3vmin;
    margin-top:72vmin;
    margin-bottom:50vmin;
    font-style:italic;
    text-transform: uppercase;
}

div.status > button {
    width:30vmin;
    height:30vmin;
    border-radius:50%;
    background:#DC6F1E;
    position:absolute;
    left:50vw;
    top:135vw;
    margin:-15vmin 0 0 -15vmin;
}

div.status > button.map,
div.status > button.info {
    width:10vmin;
    height:10vmin;
    background:white;

    left:75vw;
    margin:-5vmin 0 0 -5vmin;
}

div.status > button.info {
    left:25vw;
}

div.status > button > img {
    width:100%;
    height:100%;
}

div.status > img.silhouette {
    position:absolute;
    width:calc(81 / 320 * 100vw);
    height:calc(81 / 320 * 100vw);
}

div.status > img.silhouette[data-index="1"] {
    left:calc(7 / 320 * 100vw);
    top:calc(240 / 320 * 100vw);
}

div.status > img.silhouette[data-index="2"] {
    left:calc(21 / 320 * 100vw);
    top:calc(161 / 320 * 100vw);
}

div.status > img.silhouette[data-index="3"] {
    left:calc(85 / 320 * 100vw);
    top:calc(137 / 320 * 100vw);
}

div.status > img.silhouette[data-index="4"] {
    left:calc(151 / 320 * 100vw);
    top:calc(136 / 320 * 100vw);
}

div.status > img.silhouette[data-index="5"] {
    left:calc(203 / 320 * 100vw);
    top:calc(191 / 320 * 100vw);
}

div.status > img.silhouette[data-index="6"] {
    left:calc(243 / 320 * 100vw);
    top:calc(247 / 320 * 100vw);
}

/* REWARD */

div.reward > h1 {
    font-size:6vmin;
    color:#004694;
    line-height:1.1;
    margin-top:23vmin;
    font-weight:900;
    font-style:italic;
    text-transform: uppercase;
}

div.reward > h2 {
    font-size:4vmin;
    margin-top:2vmin;
    text-transform: uppercase;
    color:#DC6F1E;
    line-height:1.1;
    font-weight:900;
    font-style:italic;
}

div.reward > p {
    font-size:3.5vmin;
    margin-top:45vmin;
    text-transform: uppercase;
    font-style:italic;
}

div.reward > button {
    width:30vmin;
    height:30vmin;
    background:black; /* fix to try to make button clickable on some devices - went from "none" */
    border-radius:50%;
    border:1vmin solid #DC6F1E;
    color:#DC6F1E;
    font-size:4vmin;
    line-height:1.1;
    font-weight:900;
    font-style:italic;
    text-transform: uppercase;
    margin-top:8vmin;
    z-index:100; /* fix to try to make button clickable on some devices */
}

/* 8TH WALL */

div#loadingContainer {
    z-index:12;
    display:none;
    font-size:3vmin;
    line-height:1;
}

#requestingCameraPermissions {
    background: transparent !important;
}

#loadBackground {
    background:black !important;
}

.prompt-box-8w,
.prompt-button-8w,
.button-primary-8w {
    line-height:1.2;
}

/* #loadImage {
    width:20vmin !important;
    height:20vmin !important;
    margin-top:-10vmin !important;
    margin-left:-10vmin !important;
} */

/* */