#loader {
    display: none;
}
.loading #loader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: block;
    background-color: black;
}

.location {
    box-shadow: inset 0 0 4em black;
    border-radius: 2em;
}

#obj_settings {
    background-image: url(gfx/icon_gear.png);
    background-position: center center;
    background-size: cover;
    z-index: 100;
    position: absolute;
    top: 1%;
    right: 1%;
    width: 3%;
    height: 5%;
}

.navigation[data-direction="left"] {
    background-image: url(gfx/nav_arrow_left.png);
    top: 48%;
    left: 1%;
}

.navigation[data-direction="right"] {
    background-image: url(gfx/nav_arrow_right.png);
    top: 48%;
    right: 1%;
}

.navigation[data-direction="down"] {
    background-image: url(gfx/nav_arrow_down.png);
    height: 10%;
    width: 10%;
    left: 48%;
    bottom: 2%;
}

.navigation[data-direction="up"] {
    background-image: url(gfx/nav_arrow_up.png);
    left: 48%;
    top: 2%;
}

#obj_outside_door {
    background-image: url(gfx/obj_front_door.png);
    height: 120%;
    width: 49%;
    bottom: -25%;
    right: 10%;
    transform: scaleX(-1);
}

#obj_mailbox_outside {
    background-image: url(gfx/obj_mailbox.png);
    transform: scaleX(-1);
    height: 9%;
    width: 19%;
    bottom: 21%;
    right: 25%;
}

#obj_sign {
    background-image: url(gfx/obj_sign.png);
    height: 24%;
    width: 24%;
    top: 20%;
    left: 10%;
}

#obj_living_door {
    background-image: url(gfx/obj_living_door.png);
    height: 70%;
    width: 30%;
    bottom: 12%;
    left: 15%;
}

#obj_living_door[data-state="welcome"] {
    background-image: url(gfx/obj_living_door_welcome.png);
    height: 70%;
    width: 30%;
    bottom: 12%;
    left: 15%;
}

#obj_living_door[data-state="open"] {
    background-image: url(gfx/obj_living_door_open.png);
    height: 70%;
    width: 30%;
    bottom: 12%;
    left: 15%;
}

#obj_door_arms {
    background-image: url(gfx/obj_door_arms.png);
    height: 118%;
    width: 118%;
    top: 7%;
    left: -20%;
}

#obj_door_arms_upper {
    background-image: url(gfx/obj_door_arms_upper_sprite.png);
    background-size: cover;
    animation: obj_door_arms_upper 2s steps(1) infinite;
    height: 60%;
    width: 67%;
    bottom: 54%;
    right: -55%;
}

@keyframes obj_door_arms_upper {
    0% { background-position: 0 0; }
    20% { background-position: 25% 0; }
    40% { background-position: 50% 0; }
    60% { background-position: 75% 0; }
    80% { background-position: 100% 0; }
}

#obj_door_arms_lower {
    background-image: url(gfx/obj_door_arms_lower_sprite.png);
    background-size: cover;
    animation: obj_door_arms_lower 4s steps(1) infinite;
    height: 51%;
    width: 65%;
    bottom: -15%;
    right: -52%;
}

@keyframes obj_door_arms_lower {
    0% { background-position: 0 0; }
    16.66666667% { background-position: 20% 0; }
    33.33333333% { background-position: 40% 0; }
    50% { background-position: 60% 0; }
    66.66666667% { background-position: 80% 0; }
    83.33333333% { background-position: 100% 0; }
}

#obj_front_door {
    background-image: url(gfx/obj_front_door.png);
    height: 70%;
    width: 30%;
    bottom: 11.5%;
    right: 18%;
}

#obj_front_door[data-state="flicker"] {
    animation: front-door-flicker 10s infinite;
}

@keyframes front-door-flicker {
    0%    { opacity: 1; }
    80%   { opacity: 1; }
    81%   { opacity: 0; }
    82%   { opacity: 1; filter:invert(0);}
    83%   { opacity: 1; filter:invert(0.8);}
    84%   { opacity: 1; filter:invert(0); }
    100%  { opacity: 1; }
}

#obj_mailbox {
    background-image: url(gfx/obj_mailbox.png);
    height: 5%;
    width: 12%;
    bottom: 39%;
    right: 27%;
}

#obj_mailbox[data-state="open"]:after {
    background-color: black;
    position: absolute;
    border-radius: 5%;
    content: "";
    height: 50%;
    width: 83%;
    top: 19%;
    left: 9%;
}

#obj_doormat {
    background-image: url(gfx/obj_doormat.png);
    height: 15%;
    width: 26%;
    bottom: 0%;
    right: 20%;
}

#obj_letter {
    background-image: url(gfx/obj_letter.png);
    height: 50%;
    width: 37%;
    bottom: 30%;
    left: -6%;
}

#obj_postcard {
    background-image: url(gfx/obj_postcard.png);
    height: 60%;
    width: 31%;
    bottom: 17%;
    right: 11%;
}

#obj_doormat_closeup {
    background-image: url(gfx/obj_doormat_closeup.png);
    height: 77%;
    width: 81%;
    bottom: 16%;
    right: 6%;
}

#obj_doormat_closeup_tomo {
    background-image: url(gfx/obj_doormat_closeup_tomo.png);
    height: 90%;
    width: 90%;
    bottom: 4%;
    left: 8%;
}

#obj_doormat_tomo {
    background-image: url(gfx/obj_doormat_tomo.png);
    height: 60%;
    width: 50%;
    bottom: 21%;
    left: 7%;
}


#obj_doormat_closeup_mi {
    background-image: url(gfx/obj_doormat_closeup_mi.png);
    height: 90%;
    width: 90%;
    bottom: 6%;
    right: 3%;
}

#obj_doormat_mi {
    background-image: url(gfx/obj_doormat_mi.png);
    height: 60%;
    width: 50%;
    bottom: 20%;
    right: 9%;
}

#obj_letter_closeup {
    background-image: url(gfx/obj_letter_closeup.png);
    height: 38%;
    width: 30%;
    bottom: 36%;
    left: 0%;
}

#obj_postcard_closeup {
    background-image: url(gfx/obj_postcard_closeup.png);
    height: 49%;
    width: 36%;
    bottom: 21%;
    right: 12%;
}

#obj_letter_opened {
    background-image: url(gfx/obj_letter_opened.png);
    height: 90%;
    width: 75%;
    top: 0%;
    left: 13%;
}

#obj_postcard_home {
    background-image: url(gfx/obj_postcard_home.png);
    transition: transform 2s ease-in;
    height: 86%;
    width: 40%;
    top: 3%;
    left: 11%;
}

#obj_postcard_home[data-state="cut"] {
    transform: rotate(-10deg) translate(-11%, 5%);
}

#obj_postcard_me {
    background-image: url(gfx/obj_postcard_mi.png);
    transition: transform 2s ease-in;
    height: 86%;
    width: 43%;
    top: 3%;
    left: 50%;
}

#obj_postcard_me[data-state="cut"] {
    transform: rotate(10deg) translate(11%, 5%);
}

#obj_picture {
    background-image: url(gfx/obj_picture.png);
    height: 13%;
    width: 12%;
    top: 42%;
    left: 52%;
}

#obj_picture_closeup {
    background-image: url(gfx/obj_picture_closeup.png);
    width: 90%;
    height: 90%;
    top: 2%;
    left: 7%;
}

#obj_hall_mirror {
    background-image: url(gfx/obj_hall_mirror.png);
    height: 40%;
    width: 23%;
    top: 27%;
    left: 24%;
}

#obj_mirror {
    background-image: url(gfx/obj_mirror.png);
    height: 80%;
    width: 48%;
    top: 5%;
    left: 28%;
}

#obj_mirror_ghost {
    background-image: url(gfx/obj_mirror_ghost.png);
    animation: obj_mirror_image 1s ease;
    height: 70%;
    width: 66%;
    bottom: 10%;
    left: 18%;
}

#obj_mirror_image {
    background-image: url(gfx/obj_mirror_image.png);
    animation: obj_mirror_image 1s ease;
    height: 70%;
    width: 50%;
    bottom: 11%;
    left: 24%;
}

@keyframes obj_mirror_image {
    0% { filter: blur(10px); transform: scale(0.7); }
    100% { filter: blur(0); transform: scale(1); }
}

#obj_mirror_image[data-state="keyhole"] {
    background-image: url(gfx/obj_mirror_image_keyhole.png);
    height: 70%;
    width: 50%;
    bottom: 11%;
    left: 24%;
}

#obj_mirror_image[data-state="hole"] {
    background-image: url(gfx/obj_mirror_image_hole.png);
    height: 70%;
    width: 50%;
    bottom: 11%;
    left: 24%;
}

#obj_heart {
    background-image: url(gfx/obj_heart.png);
    height: 26%;
    width: 42%;
    bottom: 11%;
    left: 33%;
}

#obj_tokiponizer {
    background-image: url(gfx/obj_tokiponizer.png);
    height: 50%;
    width: 23%;
    bottom: 9%;
    right: 16%;
}

#obj_tokiponizer_closeup {
    background-image: url(gfx/obj_tokiponizer_closeup.png);
    width: 35%;
    height: 84%;
    bottom: 5%;
    left: 33%;
}

#obj_tokiponizer_closeup[data-state="running"] {
    animation: obj_tokiponizer_closeup 0.2s steps(1) 5;
}

@keyframes obj_tokiponizer_closeup {
    0% { transform: rotate(1deg); }
    1% { transform: rotate(-1deg); }
    2% { transform: rotate(0deg); }
    1% { transform: rotate(-1deg); }
    0% { transform: rotate(1deg); }
}

#obj_fragment4 {
    background-image: url(gfx/obj_fragment4.png);
    height: 15%;
    width: 32%;
    bottom: 26%;
    left: 38%;
}

#obj_fragment5 {
    background-image: url(gfx/obj_fragment4.png);
    height: 6%;
    width: 5%;
    bottom: 12%;
    right: 7%;
}

#obj_fragment6 {
    background-image: url(gfx/obj_fragment6.png);
    height: 30%;
    width: 11%;
    top: 12%;
    right: 1%;
}

#obj_tokiponizer_closeup #obj_tomo_glyph {
    background-image: url(gfx/obj_tomo_glyph.png);
    height: 15%;
    width: 32%;
    bottom: 26%;
    left: 38%;
}

#obj_tokiponizer_closeup #obj_mi_glyph {
    background-image: url(gfx/obj_mi_glyph.png);
    height: 15%;
    width: 32%;
    bottom: 26%;
    left: 38%;
}

#obj_tokiponizer_closeup #obj_olin_glyph {
    background-image: url(gfx/obj_olin_glyph.png);
    height: 15%;
    width: 32%;
    bottom: 26%;
    left: 38%;
}

#obj_tokiponizer_closeup #obj_sona_glyph {
    background-image: url(gfx/obj_sona_glyph.png);
    height: 15%;
    width: 32%;
    bottom: 26%;
    left: 38%;
}

#obj_hall_cabinet {
    background-image: url(gfx/obj_cabinet.png);
    height: 50%;
    width: 35%;
    bottom: 8%;
    left: 15%;
    z-index: 1;
}

#obj_hall_cabinet[data-state="cable"] {
    background-image: url(gfx/obj_cabinet_cable.png);
}

#obj_hall_cabinet[data-state="cable-phone"] {
    background-image: url(gfx/obj_cabinet_cable_phone.png);
}

#obj_hall_cabinet_closeup {
    background-image: url(gfx/obj_cabinet_closeup.png);
    width: 50%;
    height: 75%;
    bottom: 5%;
    left: 27%;
}

#obj_hall_cabinet_socket {
    background-image: url(gfx/obj_socket.png);
    width: 20%;
    height: 14%;
    top: 4%;
    left: 57%;
}

#obj_charge_cable_charging {
    background-image: url(gfx/obj_charge_cable_charging.png);
    width: 61%;
    height: 35%;
    top: 13%;
    right: 10.7%;
}

#obj_mobile_phone_charging {
    background-image: url(gfx/obj_mobile_phone_charging.png);
    width: 10%;
    height: 12%;
    top: 38.5%;
    right: 50.7%;
}

#obj_hall_cabinet_topdrawer {
    background-image: url(gfx/obj_cabinet_drawer.png);
    transition: transform 0.2s ease, clip-path 0.2s ease;
    transform: translate3d(0, -54%, 0);
    clip-path: inset(59% 0 0 0);
    -webkit-clip-path: inset(59% 0 0 0);
    width: 34%;
    height: 30%;
    top: 59%;
    left: 35%;
    z-index: 1;
}

#obj_hall_cabinet_topdrawer[data-state="open"] {
    transform: translate3d(0,0,0);
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
}

#obj_hall_cabinet_topdrawer[data-state="open"] #obj_charge_cable {
    background-image: url(gfx/obj_charge_cable_drawer.png);
    display: block;
    width: 61%;
    height: 50%;
    top: 10%;
    left: 16%;
}

#obj_hall_cabinet_bottomdrawer {
    transition: transform 0.2s ease, clip-path 0.2s ease;
    transform: translateY(-54%);
    clip-path: inset(59% 0 0 0);
    -webkit-clip-path: inset(59% 0 0 0);
    background-image: url(gfx/obj_cabinet_drawer.png);
    width: 34%;
    height: 30%;
    top: 70%;
    left: 35%;
}

#obj_hall_cabinet_bottomdrawer[data-state="open"] {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
}

#obj_hall_cabinet_bottomdrawer[data-state="open"] #obj_fragment3 {
    background-image: url(gfx/obj_fragment3.png);
    display: block;
    width: 30%;
    height: 45%;
    top: 13%;
    right: 17%;
}

#obj_hall_cabinet_bottomdrawer[data-state="open"] #obj_scissors {
    background-image: url(gfx/obj_scissors.png);
    display: block;
    width: 30%;
    height: 45%;
    top: 13%;
    left: 17%;
}

#obj_numberbox {
    background-image: url(gfx/obj_numberbox.png);
    width: 9%;
    height: 13%;
    top: 4%;
    left: 26%;
}

#obj_numberbox .drawn_number {
    margin-top: 26%;
    padding-top: 40%;
    width: 40%;
}

.drawn_number_container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
}

.drawn_number {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    padding-top: 16%;
    width: 16%;
    height: 0;
    margin: 0 -2%;
}

.drawn_number[data-char="0"] {
    background-image: url(gfx/obj_numbers_0.png);
}
.drawn_number[data-char="1"] {
    background-image: url(gfx/obj_numbers_1.png);
}
.drawn_number[data-char="2"] {
    background-image: url(gfx/obj_numbers_2.png);
}
.drawn_number[data-char="3"] {
    background-image: url(gfx/obj_numbers_3.png);
}
.drawn_number[data-char="4"] {
    background-image: url(gfx/obj_numbers_4.png);
}
.drawn_number[data-char="5"] {
    background-image: url(gfx/obj_numbers_5.png);
}
.drawn_number[data-char="6"] {
    background-image: url(gfx/obj_numbers_6.png);
}
.drawn_number[data-char="7"] {
    background-image: url(gfx/obj_numbers_7.png);
}
.drawn_number[data-char="8"] {
    background-image: url(gfx/obj_numbers_8.png);
}
.drawn_number[data-char="9"] {
    background-image: url(gfx/obj_numbers_9.png);
}
.drawn_number[data-char="↊"] {
    background-image: url(gfx/obj_numbers_dek.png);
}
.drawn_number[data-char="↋"] {
    background-image: url(gfx/obj_numbers_el.png);
}
.drawn_number[data-char=";"] {
    background-image: url(gfx/obj_numbers_;.png);
    margin: 0 -5%;
}
.drawn_number[data-char="%"] {
    background-image: url(gfx/obj_numbers_perc.png);
    margin: 0;
}
.drawn_number[data-char="°"] {
    background-image: url(gfx/obj_numbers_deg.png);
}


#obj_interactive_spiral {
    position: absolute;
    width: 58%;
    height: 60%;
    top: 23%;
    overflow: hidden;
    background: #fff;
    left: 21%;
}

#obj_interactive_spiral svg {
    width: 240%;
    height: 240%;
    left: -70%;
    position: absolute;
    top: -68%;
}

#obj_frame_knob_up {
    transition: transform 0.5s;
    transform: rotate(0);
    background-image: url(gfx/obj_frame_knob.png);
    width: 8%;
    height: 12%;
    bottom: 4%;
    right: 13%;
}

#obj_frame_knob_down {
    transition: transform 0.5s;
    transform: rotate(0);
    background-image: url(gfx/obj_frame_knob.png);
    width: 8%;
    height: 12%;
    bottom: 5%;
    left: 13.5%;
}

#obj_frame_text {
    left: 37%;
    bottom: 5%;
    width: 25%;
    height: 8%;
}

#obj_tp_emblem {
    background-image: url(gfx/obj_tp_emblem.png);
    height: 26%;
    width: 42%;
    top: 40%;
    left: 29%;
}

#obj_keybox {
    background-image: url(gfx/obj_keybox.png);
    width: 16%;
    height: 25%;
    top: 18%;
    right: 50%;
}

#obj_keybox[data-state="open"] {
    background-image: url(gfx/obj_keybox_open.png);
    width: 32%;
    height: 25%;
    top: 18%;
    right: 50%;
}

#obj_fragment2 {
    background-image: url(gfx/obj_fragment2.png);
    height: 12%;
    top: 7%;
    width: 7%;
    right: 35%;
    z-index: 1;
}

#obj_fragment1,
#obj_fragment3,
#obj_heart_key,
#obj_scissors,
#obj_charge_cable {
    display: none;
}

#obj_keybox[data-state="open"] #obj_fragment1 {
    background-image: url(gfx/obj_fragment1.png);
    display: block;
    height: 35%;
    bottom: 16%;
    width: 20%;
    right: 27%;
}

#obj_keybox[data-state="open"] #obj_heart_key {
    background-image: url(gfx/obj_heart_key.png);
    display: block;
    height: 30%;
    top: 37%;
    width: 10%;
    right: 19%;
}

#obj_coat_hanger {
    background-image: url(gfx/obj_coathanger.png);
    width: 15%;
    height: 65%;
    bottom: 6%;
    left: 70%;
}

#obj_coat {
    background-image: url(gfx/obj_coat.png);
    height: 42%;
    bottom: 23%;
    width: 12%;
    left: 70%;
}

#obj_mobile_phone {
    background-image: url(gfx/obj_mobilephone.png);
    height: 24%;
    bottom: 23%;
    width: 5%;
    left: 73%;
}

#obj_frame {
    background-image: url(gfx/obj_frame_hall.png);
    width: 31%;
    height: 30%;
    top: 24%;
    right: 13%;
}

#obj_frame_closeup {
    background-image: url(gfx/obj_frame.png);
    width: 90%;
    height: 90%;
    top: 2%;
    left: 7%;
}

#obj_fragment1_closeup, #obj_fragment1_frame {
    background-image: url(gfx/obj_fragment1_frame.png);
    width: 38%;
    height: 65%;
    top: 21%;
    left: 20.5%;
}

#obj_fragment2_closeup, #obj_fragment2_frame  {
    background-image: url(gfx/obj_fragment2_frame.png);
    width: 24.5%;
    height: 40%;
    top: 45.5%;
    left: 56.5%;
}

#obj_fragment3_closeup, #obj_fragment3_frame  {
    background-image: url(gfx/obj_fragment3_frame.png);
    width: 16%;
    height: 27%;
    top: 21%;
    left: 64.5%;
}

#obj_fragment4_closeup, #obj_fragment4_frame  {
    background-image: url(gfx/obj_fragment4_frame.png);
    width: 9%;
    height: 20%;
    top: 20%;
    left: 57%;
}

#obj_fragment5_closeup, #obj_fragment5_frame  {
    background-image: url(gfx/obj_fragment5_frame.png);
    width: 10%;
    height: 11%;
    top: 37%;
    left: 55%;
}

#obj_fragment6_closeup, #obj_fragment6_frame  {
    background-image: url(gfx/obj_fragment6_frame.png);
    width: 5%;
    height: 11%;
    top: 37%;
    left: 61.5%;
}

#obj_charge_projection {
    height: 26%;
    width: 6%;
    bottom: 50%;
    left: 26%;
}

.projection-text {
    position: absolute;
    width: 80%;
    height: 14%;
    background-color: white;
    text-align: center;
    margin: 0;
    bottom: -3%;
    left: -26%;
    border-radius: 25%;
    padding: 10%;
}

.projection-text .drawn_number_container {
    opacity: 0.4;
}

.projection-text .drawn_number {
    padding-top: 34%;
    width: 24%;
}

.projection-bar {
    height: 50%;
    position: absolute;
    bottom: 25%;
    width: 60%;
    background-color: #eee;
    border: 2px solid #aaa;
    box-shadow: 0 0 0.5em 0.5em white;
}

#obj_title_play {
    background-image: url('gfx/obj_title_play.png');
    height: 18%;
    width: 22%;
    bottom: 36%;
    left: 39%;
}

#obj_title_restart {
    background-image: url('gfx/obj_title_restart.png');
    height: 14%;
    width: 23%;
    bottom: 17%;
    left: 39%;
    display: none;
}

.stored-game #obj_title_restart {
    display: block;
}

#scr_title {
    background-image: url('gfx/scr_title.png');
}

#scr_start {
    background-image: url('gfx/scr_start.png');
    background-size: 15% 50%;
    background-repeat: no-repeat;
    background-color: white;
}

#scr_end {
    background-image: url('gfx/scr_end.png');
    background-size: 69% 50%;
    background-repeat: no-repeat;
    background-color: white;
}

#loc_hall_outside {
    background-image: url('gfx/loc_hall_outside.png');
}

#loc_hall_front {
    background-image: url('gfx/loc_hall_front_drawn.png');
}

#loc_hall_left {
    background-image: url('gfx/loc_hall_left_drawn.png');
}

#loc_hall_right {
    background-image: url('gfx/loc_hall_left_drawn.png');
}

#loc_hall_mirror {
    background-image: url('gfx/loc_hall_left_drawn.png');
    background-size: 200%;
}

#loc_hall_frame {
    background-image: url('gfx/loc_hall_front_drawn.png');
    background-size: 240%;
}

#loc_hall_picture {
    background-image: url('gfx/loc_hall_left_drawn.png');
    background-size: 240%;
}

#loc_hall_cabinet {
    background-image: url('gfx/loc_hall_left_drawn.png');
    background-size: 180%;
    background-position-y: 94%;
}

#loc_hall_tokiponizer {
    background-image: url('gfx/loc_hall_left_drawn.png');
    background-size: 156%;
    background-position-y: 94%;
}

#loc_hall_doormat {
    background-image: url('gfx/loc_hall_front_drawn.png');
    background-size: 800%;
    background-position-y: 99%;
    background-position-x: 55.2%;
}

#loc_hall_letter {
    background-image: url('gfx/loc_hall_front_drawn.png');
    background-size: 800%;
    background-position-y: 99%;
    background-position-x: 55.2%;
}

#loc_hall_postcard {
    background-image: url('gfx/loc_hall_front_drawn.png');
    background-size: 800%;
    background-position-y: 99%;
    background-position-x: 55.2%;
}

#loc_hall_living {
    background-image: url('gfx/loc_hall_front_drawn.png');
}

#inv_coat {
    background-image: url('gfx/inv_coat.png');
}

#inv_scissors {
    background-image: url('gfx/inv_scissors.png');
}

#inv_mobile_phone {
    background-image: url('gfx/inv_mobile_phone.png');
}

#inv_charge_cable {
    background-image: url('gfx/inv_charge_cable.png');
}

#inv_fragment1 {
    background-image: url('gfx/inv_fragment1.png');
}

#inv_fragment2 {
    background-image: url('gfx/inv_fragment2.png');
}

#inv_fragment3 {
    background-image: url('gfx/inv_fragment3.png');
}

#inv_fragment4 {
    background-image: url('gfx/inv_fragment4.png');
}

#inv_fragment5 {
    background-image: url('gfx/inv_fragment5.png');
}

#inv_fragment6 {
    background-image: url('gfx/inv_fragment6.png');
}

#inv_heart_key {
    background-image: url('gfx/inv_heart_key.png');
}

#inv_heart {
    background-image: url('gfx/inv_heart.png');
}

#inv_tomo_glyph {
    background-image: url('gfx/inv_tomo_glyph.png');
}

#inv_mi_glyph {
    background-image: url('gfx/inv_mi_glyph.png');
}

#inv_olin_glyph {
    background-image: url('gfx/inv_olin_glyph.png');
}

#inv_sona_glyph {
    background-image: url('gfx/inv_sona_glyph.png');
}

#inv_home_card {
    background-image: url('gfx/inv_home_card.png');
}

#inv_me_card {
    background-image: url('gfx/inv_me_card.png');
}

#inv_tp_emblem {
    background-image: url('gfx/inv_tp_emblem.png');
}

.object {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
}

.object[data-state="taken"] {
    pointer-events: none;
    transition: opacity 0.5s ease;
    opacity: 0;
}

.object[data-state="dormant"] {
    pointer-events: none;
    opacity: 0;
}

.object[data-state="default"] {
    transition: opacity 0.5s ease;
    opacity: 1;
}