:root { --transition-animation-duration: 0.25s; --transition-messages-duration: 0.25s; --blur: blur(8px); --messages-gutter: 12px; }

.noselect { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.flexspacer { flex: 1; }

body { background-color: #D0D0D0; margin: 0; padding: 0; font-size: 1em; color: white; }
p { margin: 0; }


#maincontainer { background-color: #000000; position: relative; width: 360px; height: 640px; display: flex; cursor: default; overflow: hidden; }
#maincontainer:focus { outline: 0; }

section.scene { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; }

#loadingscene { opacity: 1; z-index: 10; font-size: 2em; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* this scene is shown on load */
#clicktoloadbox { color: black; background-color: white; border: 2px solid black; padding: 25px; }
#clicktoloadbox > p { margin: 0; }
#progressbox { display: none; }
#progressbox > p { text-align: center; }
#progress { width: 300px; }
#errorbox { color: black; background-color: white; border: 2px solid black; padding: 25px; display: none; }
#errorbox > p { margin: 0; }

#gamescene {  }
#backgroundimage { position: absolute; width: 100%; height: 100%; background-image: url(images/room.jpg); background-size: contain; filter: blur(1px); }
#black { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; z-index: 100000; display: none; }
#phoneshakebox { position: relative; width: 100%; height: 100%; }
#phone { position: relative; width: 338px; height: 608px; }
#phonecontents { position: relative; left: 3px; width: 332px; height: 608px; border: 10px solid rgba(0, 0, 0, 0); box-sizing: border-box; overflow: hidden; }
#phonebuttons { position: absolute; top: 0; pointer-events: none; }
#phonecamera { position: absolute; top: 10px; z-index: 11; }
/* workaround to cover up artifacts in Safari on the blurred box by drawing the phone border later, on top */
#phoneborderoverlay { position: absolute; top: 0; left: 3px; width: 332px; height: 608px; border: 10px solid black; box-sizing: border-box; pointer-events: none; z-index: 20; }

.statusbar { position: absolute; top: 0; width: 100%; height: 20px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; display: flex; align-items: flex-end; font-size: 0.75em; }
.statusbaricons { display: flex; gap: 10px;}

#lockscreen { height: 100%; width: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
#lockscreentime { font-size: 3em; }
#lockscreennotificationspacer { height: 20px; }
#lockscreennotification { border-radius: 20px; padding: 10px; color: black; }
#lockscreennotificationheader { color: #505050; display: flex; flex-direction: row; align-items: center; gap: 5px; margin-bottom: 5px; }
#lockscreenicon { position: absolute; bottom: 50px; }

#messagesscreen { height: 100%; width: 100%; display: none; top: 0; position: absolute; background-color: #FFFFFF; color: black; flex-direction: column; }
#messagesscreentopbar { height: 60px; width: 100%; position: absolute; top: 0; left: 0; z-index: 10; border-bottom: 1px solid #C0C0C0; box-sizing: border-box; }
@supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
    #messagesscreentopbar { background-color: rgba(224, 224, 224, 0.9); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
}
@supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
    #messagesscreentopbar { background-color: rgba(230, 230, 230, 0.97); }
}
#navigationbar { height: 40px; width: 100%; position: absolute; top: 20px; display: flex; justify-content: center; align-items: center; gap: 5px; }
#iconframe { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }

#messagescontainer { position: relative; overflow: hidden; }
#messages { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; width: 100%; padding-left: var(--messages-gutter); padding-right: var(--messages-gutter); padding-top: 60px; padding-bottom: 10px; box-sizing: border-box; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; }
#messages::-webkit-scrollbar { width: 0; height: 0; }
#messages * { pointer-events: none; } /* i definitely won't forget about this and find myself in debug hell later */
.timestamp { align-self: center; margin-top: 10px; color: #505050; font-size: 0.75em; }
.received { display: flex; align-items: center; }
.sent { display: flex; justify-content: flex-end; align-items: center; color: white; }
.received > p, .sent > p { width: fit-content; max-width: 70%; border-radius: 10px; padding: 5px 8px 5px 8px; }
.received + .sent, .sent + .received { margin-top: 8px; }
.arrow { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.received > .arrow { border-right: 8px solid blue; margin-right: -1px; }
.sent > .arrow { border-left: 8px solid blue; margin-left: -1px; }
#scrollindicator { display: none; position: absolute; bottom: 0; width: 100%; padding: 2px; box-sizing: border-box; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); text-align: center; pointer-events: none; }

#messagesscreenbottombar { width: 100%; background-color: #D6D6D6; border-top: 1px solid #C0C0C0; box-sizing: border-box; padding-left: var(--messages-gutter); padding-right: var(--messages-gutter); padding-top: 5px; padding-bottom: 5px; display: flex; align-items: center; }
#mediabutton { width: 45px; height: 35px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 10px; align-self: flex-end; }
#textinput { flex: 1; min-height: 5px; color: white; border-radius: 10px; padding: 5px 8px 5px 8px; }
#textinputarrow { border-left: 8px solid blue; margin-left: -1px; }

#commands { z-index: 100; position: absolute; width: 340px; left: 10px; bottom: 2px; background-color: rgba(0, 0, 0, 0.85); background-image: url(images/bright-squares.png); border: 4px double white; padding: 10px; box-sizing: border-box; }
a { color: white; text-decoration: underline; cursor: pointer; }
#command2 { margin-top: 5px; display: none; }
#commandshield { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }

#optionsbutton { position: absolute; top: 0; right: 0; width: 42px; height: 42px; padding: 5px; box-sizing: border-box; z-index: 1000; cursor: pointer; }
@media (any-hover: hover) {
    #optionsbutton { opacity: 0; transition-property: opacity; transition-duration: 0.2s; }
    #maincontainer:hover #optionsbutton { opacity: 0.7; }
    #optionsbutton:hover { opacity: 1 !important; }
}
@media (any-hover: none) {
    #optionsbutton { background-color: rgba(0, 0, 0, 0.3); }
}
#options { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10000; display: none; align-items: center; justify-content: center; }
#optionsbox { background-color: rgba(96, 0, 0, 0.85); background-image: url(images/bright-squares.png); border: 4px double white; padding: 10px; box-sizing: border-box; }
.controlrow { display: flex; gap: 5px; }
.controlrow > label { flex: 1; text-align: right; }
.controlrow > input { width: 150px; }
.controlrow + .controlrow { margin-top: 5px; }

#creditsscene { background-color: black; }
#creditstext { width: 100%; height: 100%; padding: 30px; box-sizing: border-box; display: none; flex-direction: column; justify-content: center; gap: 10px; text-align: center; }
#me { font-size: 2em; margin-bottom: 90px; }


.fadescenein { animation: fadescenein var(--transition-animation-duration) forwards; }
@keyframes fadescenein { from { opacity: 0; } to { opacity: 1 } }
.fadesceneout { animation: fadesceneout var(--transition-animation-duration) forwards; }
@keyframes fadesceneout { from { opacity: 1; } to { opacity: 0 } }

.movelockscreenleft { animation: movelockscreenleft var(--transition-messages-duration) forwards; }
@keyframes movelockscreenleft { from { left: 0; } to { left: -360px; } }
.movelockscreenright { animation: movelockscreenright var(--transition-messages-duration) forwards; }
@keyframes movelockscreenright { from { left: 0; } to { left: 360px; } }
.movelockscreenup { animation: movelockscreenup var(--transition-messages-duration) forwards; }
@keyframes movelockscreenup { from { top: 0; } to { top: -640px; } }
.movelockscreendown { animation: movelockscreendown var(--transition-messages-duration) forwards; }
@keyframes movelockscreendown { from { top: 0; } to { top: 640px; } }

.movemessagesscreenleft { animation: movemessagesscreenleft var(--transition-messages-duration) forwards; }
@keyframes movemessagesscreenleft { from { left: 360px; } to { left: 0; } }
.movemessagesscreenright { animation: movemessagesscreenright var(--transition-messages-duration) forwards; }
@keyframes movemessagesscreenright { from { left: -360px; } to { left: 0; } }
.movemessagesscreenup { animation: movemessagesscreenup var(--transition-messages-duration) forwards; }
@keyframes movemessagesscreenup { from { top: 640px; } to { top: 0; } }
.movemessagesscreendown { animation: movemessagesscreendown var(--transition-messages-duration) forwards; }
@keyframes movemessagesscreendown { from { top: -640px; } to { top: 0; } }

.movephoneaway { animation: movephoneaway 1.5s forwards ease-in; }
@keyframes movephoneaway { from { transform: scale(1); filter: blur(0px); } to { transform: scale(0.5); filter: blur(1px); } }