@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

html {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    color: #000;
    margin: 0;
    background-color: #000;
    color: #fff;
    font-size: 20px;
    line-height: 24px;
    overscroll-behavior: none;
    overflow: hidden;
    touch-action: none;
    height: 100%;
}

body.tilt {
    perspective: 2000px;
    perspective-origin: 50% 50%;
    background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 20px 20px;
}

iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: none;
    transition: transform 0.5s ease-in-out;
}

body.tilt>iframe {
    --tilt-z: 0px;
    transform: rotateX(80deg) translate3d(0px, -400px, var(--tilt-z));
    border: #000 solid;
    border-width: 20px 4px 10px 4px;
    background-color: rgba(0, 0, 0, 0.1);
}

#hud {
    display: none;
}

#hud.primary-frame {
    display: block;
}

#shell-hud {
    display: none;
}

#shell-hud.is-shell {
    display: block;
}

#info {
    position: fixed;
    top: 0px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    pointer-events: none;
    z-index: 1;
    /* TODO Solve this in HTML */
}

.info-text {
    color: #fff;
    z-index: 200;
    text-shadow: 2px 2px #000000;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.bttn {
    position: fixed;
    background-color: #d3d3d380;
    z-index: 200;
    border-radius: 50%;
    color: white;
    width: 1.8em;
    height: 1.8em;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.bttn:hover {
    background-color: #80808080;
}

#homeBttn {
    bottom: 10px;
    left: 10%;
    transform: translate(0, -50%)
}

#usersComeHereBttn {
    bottom: 10px;
    right: 10%;
    transform: translate(0, -50%)
}

#fullscreenBttn {
    top: 10px;
    left: 10px;
}

#worldMenuBttn {
    top: 10px;
    right: 10px;
}

#editModeBttn {
    top: 50%;
    left: 10px;
    transform: translate(0, -50%);
    display: none
}

#editModeBttn[mobile="true"] {
    display: flex;
}

#editModeBttn[pressed="true"] {
    background-color: #80808080;
}

#editModeBttn[pressed="false"] {
    background-color: #d3d3d380;
}

#ghostSlider {
    z-index: 200;
    position: fixed;
    width: 100px;
    margin-left: -50px;
    left: 50%;
    top: 20px;
    display: none;
}

.no-pointer-events {
    pointer-events: none;
}

.worldMenu {
    position: absolute;
    top: 70px;
    right: 10px;
    z-index: 200;
    display: none;
}

.menuVisible {
    display: block;
}

.statsHidden {
    display: none;
}

.menu-qr {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#qrDiv {
    width: 90%;
}

.menu-item {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    margin-top: 5px;
}

.menu-item::first-child {
    margin-top: 0px;
}

.menu-label {
    width: 200px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: opacity 0.5s;
}

.menu-label:hover {
    opacity: 0.7;
}

.menu-label-text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    margin-left: 12px;
}

.menu-icon {
    width: 24px;
    height: 22px;
    margin-right: 12px;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

.connect-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='23' viewBox='0 0 21 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.72 1.78H17.66C17.7379 1.77864 17.8152 1.79298 17.8874 1.82215C17.9596 1.85132 18.0251 1.89473 18.0802 1.94979C18.1353 2.00485 18.1787 2.07043 18.2078 2.14262C18.237 2.21481 18.2514 2.29214 18.25 2.37V20.37C18.2514 20.4478 18.237 20.5252 18.2078 20.5974C18.1787 20.6696 18.1353 20.7351 18.0802 20.7902C18.0251 20.8453 17.9596 20.8887 17.8874 20.9178C17.8152 20.947 17.7379 20.9613 17.66 20.96H11.72C11.6421 20.9586 11.5648 20.973 11.4926 21.0021C11.4204 21.0313 11.3548 21.0747 11.2998 21.1298C11.2447 21.1848 11.2013 21.2504 11.1722 21.3226C11.143 21.3948 11.1286 21.4721 11.13 21.55V22.15C11.1286 22.2278 11.143 22.3052 11.1722 22.3774C11.2013 22.4496 11.2447 22.5151 11.2998 22.5702C11.3548 22.6253 11.4204 22.6687 11.4926 22.6978C11.5648 22.727 11.6421 22.7414 11.72 22.74H19.44C19.5179 22.7414 19.5952 22.727 19.6674 22.6978C19.7396 22.6687 19.8052 22.6253 19.8602 22.5702C19.9153 22.5151 19.9587 22.4496 19.9878 22.3774C20.017 22.3052 20.0314 22.2278 20.03 22.15V0.589996C20.0314 0.512143 20.017 0.434815 19.9878 0.362621C19.9587 0.290426 19.9153 0.224845 19.8602 0.169787C19.8052 0.114728 19.7396 0.0713191 19.6674 0.0421483C19.5952 0.0129775 19.5179 -0.00135809 19.44 -3.81317e-06H11.72C11.6421 -0.00135809 11.5648 0.0129775 11.4926 0.0421483C11.4204 0.0713191 11.3548 0.114728 11.2998 0.169787C11.2447 0.224845 11.2013 0.290426 11.1722 0.362621C11.143 0.434815 11.1286 0.512143 11.13 0.589996V1.19C11.1286 1.26785 11.143 1.34518 11.1722 1.41737C11.2013 1.48957 11.2447 1.55515 11.2998 1.61021C11.3548 1.66526 11.4204 1.70867 11.4926 1.73784C11.5648 1.76701 11.6421 1.78135 11.72 1.78Z' fill='black'/%3E%3Cpath d='M6.69 5.22V7.87H0.879998C0.747338 7.88477 0.618978 7.92596 0.502485 7.99112C0.385993 8.05629 0.283725 8.14411 0.201711 8.24943C0.119698 8.35474 0.0595976 8.47541 0.0249543 8.60431C-0.00968891 8.73322 -0.0181743 8.86776 -1.56742e-06 9V14C-0.0196279 14.133 -0.0122362 14.2686 0.0217318 14.3987C0.0556998 14.5287 0.115546 14.6506 0.197694 14.757C0.279842 14.8635 0.382604 14.9522 0.499837 15.018C0.61707 15.0838 0.746367 15.1253 0.879998 15.14H6.69V17.95C6.69 18.22 6.92 18.39 7.1 18.26L15.57 11.91C15.6143 11.8724 15.6498 11.8257 15.6742 11.773C15.6986 11.7204 15.7112 11.663 15.7112 11.605C15.7112 11.547 15.6986 11.4896 15.6742 11.4369C15.6498 11.3843 15.6143 11.3375 15.57 11.3L7.1 4.92C6.92 4.78 6.69 5 6.69 5.22Z' fill='black'/%3E%3C/svg%3E%0A");
}

.save-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='23' height='20' viewBox='0 0 23 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.92 11.72V17.66C20.9214 17.7379 20.907 17.8152 20.8778 17.8874C20.8487 17.9596 20.8053 18.0252 20.7502 18.0802C20.6952 18.1353 20.6296 18.1787 20.5574 18.2078C20.4852 18.237 20.4079 18.2514 20.33 18.25H2.33C2.25215 18.2514 2.17482 18.237 2.10262 18.2078C2.03043 18.1787 1.96485 18.1353 1.90979 18.0802C1.85473 18.0252 1.81132 17.9596 1.78215 17.8874C1.75298 17.8152 1.73865 17.7379 1.74 17.66V11.72C1.74135 11.6421 1.72702 11.5648 1.69785 11.4926C1.66868 11.4204 1.62527 11.3549 1.57021 11.2998C1.51515 11.2447 1.44957 11.2013 1.37738 11.1722C1.30518 11.143 1.22785 11.1286 1.15 11.13H0.59C0.512147 11.1286 0.434818 11.143 0.362624 11.1722C0.29043 11.2013 0.224849 11.2447 0.16979 11.2998C0.114732 11.3549 0.0713229 11.4204 0.0421521 11.4926C0.0129813 11.5648 -0.00135427 11.6421 1.52795e-09 11.72V19.44C0.00522299 19.5921 0.0700024 19.736 0.180371 19.8408C0.29074 19.9455 0.437856 20.0027 0.59 20H22.11C22.1879 20.0014 22.2652 19.987 22.3374 19.9578C22.4096 19.9287 22.4752 19.8853 22.5302 19.8302C22.5853 19.7752 22.6287 19.7096 22.6578 19.6374C22.687 19.5652 22.7014 19.4879 22.7 19.41V11.72C22.7014 11.6421 22.687 11.5648 22.6578 11.4926C22.6287 11.4204 22.5853 11.3549 22.5302 11.2998C22.4752 11.2447 22.4096 11.2013 22.3374 11.1722C22.2652 11.143 22.1879 11.1286 22.11 11.13H21.51C21.4321 11.1286 21.3548 11.143 21.2826 11.1722C21.2104 11.2013 21.1448 11.2447 21.0898 11.2998C21.0347 11.3549 20.9913 11.4204 20.9622 11.4926C20.933 11.5648 20.9186 11.6421 20.92 11.72Z' fill='black'/%3E%3Cpath d='M17.48 6.69H14.82V0.880002C14.8053 0.746371 14.7638 0.617074 14.698 0.499841C14.6322 0.382608 14.5435 0.279846 14.437 0.197698C14.3306 0.11555 14.2087 0.0557036 14.0787 0.0217356C13.9486 -0.0122323 13.813 -0.0196241 13.68 2.24728e-06H8.73C8.597 -0.0196241 8.46142 -0.0122323 8.33134 0.0217356C8.20127 0.0557036 8.07938 0.11555 7.97296 0.197698C7.86654 0.279846 7.77778 0.382608 7.71198 0.499841C7.64618 0.617074 7.60469 0.746371 7.59 0.880002V6.69H4.78C4.51 6.69 4.34 6.92 4.47 7.1L10.82 15.57C10.8576 15.6143 10.9043 15.6498 10.9569 15.6742C11.0096 15.6986 11.067 15.7112 11.125 15.7112C11.183 15.7112 11.2404 15.6986 11.2931 15.6742C11.3457 15.6498 11.3924 15.6143 11.43 15.57L17.78 7.1C17.92 6.92 17.75 6.69 17.48 6.69Z' fill='black'/%3E%3C/svg%3E%0A");
}

.load-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.92 13.05V19C20.92 19.077 20.9047 19.1533 20.8749 19.2243C20.8451 19.2953 20.8015 19.3597 20.7466 19.4137C20.6917 19.4677 20.6266 19.5102 20.555 19.5388C20.4835 19.5673 20.407 19.5813 20.33 19.58H2.33C2.18143 19.5723 2.0415 19.5078 1.93914 19.3999C1.83677 19.2919 1.7798 19.1488 1.78 19V13.05C1.78 12.8935 1.71784 12.7435 1.60719 12.6328C1.49655 12.5222 1.34648 12.46 1.19 12.46H0.59C0.433522 12.46 0.283453 12.5222 0.172807 12.6328C0.0621605 12.7435 6.40816e-09 12.8935 6.40816e-09 13.05V20.78C-1.14415e-05 20.857 0.0153155 20.9333 0.0450866 21.0043C0.0748577 21.0753 0.118477 21.1397 0.173398 21.1937C0.22832 21.2477 0.293444 21.2902 0.364971 21.3188C0.436499 21.3473 0.512996 21.3613 0.59 21.36H22.11C22.187 21.3613 22.2635 21.3473 22.335 21.3188C22.4066 21.2902 22.4717 21.2477 22.5266 21.1937C22.5815 21.1397 22.6251 21.0753 22.6549 21.0043C22.6847 20.9333 22.7 20.857 22.7 20.78V13.05C22.7 12.8935 22.6378 12.7435 22.5272 12.6328C22.4165 12.5222 22.2665 12.46 22.11 12.46H21.51C21.3535 12.46 21.2035 12.5222 21.0928 12.6328C20.9822 12.7435 20.92 12.8935 20.92 13.05Z' fill='black'/%3E%3Cpath d='M4.78 9H7.43V14.81C7.44469 14.9436 7.48618 15.0729 7.55198 15.1902C7.61778 15.3074 7.70654 15.4102 7.81296 15.4923C7.91938 15.5745 8.04127 15.6343 8.17134 15.6683C8.30142 15.7022 8.437 15.7096 8.57 15.69H13.52C13.653 15.7096 13.7886 15.7022 13.9187 15.6683C14.0487 15.6343 14.1706 15.5745 14.277 15.4923C14.3835 15.4102 14.4722 15.3074 14.538 15.1902C14.6038 15.0729 14.6453 14.9436 14.66 14.81V9H17.48C17.75 9 17.92 8.77 17.78 8.59L11.43 0.139999C11.3924 0.0957447 11.3457 0.0601918 11.2931 0.0358083C11.2404 0.0114247 11.183 -0.00120544 11.125 -0.00120544C11.067 -0.00120544 11.0096 0.0114247 10.9569 0.0358083C10.9043 0.0601918 10.8576 0.0957447 10.82 0.139999L4.47 8.61C4.34 8.79 4.51 9 4.78 9Z' fill='black'/%3E%3C/svg%3E%0A");
}

#userCount {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0px;
    height: 0px;
}

#userCountReadout {
    position: relative;
    top: -10px;
    font-family: sans-serif;
    font-size: 0.5em;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

#usersComeHereBttn[presenting="true"] {
    background-color: #880000;
}