/* Global styling */
* { box-sizing: border-box; user-select: none; font-size: 100%; }
html { font-size: clamp(16px, 4vh, 32px); /* Global scale */ }
html body { min-width: 640px; min-height: 360px; height: 100vh; width: 100vw; margin: 0; background-color: #0286F2; font-family: 'LuckiestGuy-Regular', Arial, Helvetica, sans-serif; overflow: hidden; }
html body:before { color: #ffffff; content: '\e3a5'; font-family: 'Material Symbols Outlined'; font-size: 100vh; position: absolute; left: 0; top: 0; opacity: 0.1; width: 100%; height: 100%; overflow: hidden; transition: all 0.25s ease-in-out; pointer-events: none; text-shadow: none; text-align: right; }
html .progress { height: 4rem; position: absolute; top: 0%; background-color: #ffffff; box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: flex-end; padding: 1rem; }
html .progress:before { content: 'Loading things!'; color: #000000; font-size: 1rem; white-space: nowrap; }
html a { text-decoration: none; user-select: none; -webkit-user-drag: none; }
html h1 { font-size: 1.5rem; line-height: 1.5rem; margin: 0 0 1rem; font-weight: normal; word-break: break-word; }
html h2 { font-size: 1.125rem; line-height: 1.125rem; margin: 0 0 1rem; font-weight: normal; word-break: break-word; }
html h3 { font-size: 1rem; line-height: 1rem; margin: 0 0 1rem; font-weight: normal; word-break: break-word; }
html p { font-size: 1rem; margin: 0 0 1rem; word-break: break-word; }
html canvas { image-rendering: pixelated; position: relative; z-index: 0; animation: fadeIn 1s ease-in-out; animation-fill-mode: forwards; }
html label { font-size: 0.875rem; }
*:focus { outline: none; }
*[tabindex="-1"] { opacity: 0.25; pointer-events: none !important; }

/* Layout */
.ui { display: flex; flex-direction: column; height: 100%; justify-content: space-between; position: fixed; pointer-events: none; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.ui .top { display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; padding: 0.5rem; width: 100%; animation: fadeIn 0.5s ease-in-out; animation-fill-mode: forwards; }
.ui .center { display: flex; flex-direction: column; flex-wrap: wrap; flex-grow: 1; align-items: center; justify-content: center; width: 100%; min-height: 0; min-width: 0; animation: fadeIn 0.5s ease-in-out; animation-fill-mode: forwards; }
.ui .bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; padding: 0.5rem; width: 100%; animation: fadeIn 0.5s ease-in-out; animation-fill-mode: forwards; }

/* Score */
.ui .top .score { display: flex; align-items: center; color: #ffffff; font-size: 1.5rem; margin: 0.5rem; text-shadow: 0.125rem 0.125rem 0rem #000000; height: 2rem; }
.ui .top .score .shots { display: flex; align-items: center; padding-right: 1rem; }
.ui .top .score .time { display: flex; align-items: center; }
.ui .top .score .data { margin-left: 0.5rem; }

/* Score cards */
.popup .wrapper .content .cards { text-align: left; }
.popup .wrapper .content .cards .section { background-color: rgba(255, 255, 255, 0.25); border-radius: 0.5rem; padding: 0.5rem; margin-bottom: 1rem; }
.popup .wrapper .content .cards .course { display: flex; flex-wrap: wrap; }
.popup .wrapper .content .cards .course .title { width: 100%; font-size: 1rem; letter-spacing: 0.25rem; text-align: center; }
.popup .wrapper .content .cards .course .entry { font-size: 0.875rem; display: flex; align-items: center; width: 100%; }
.popup .wrapper .content .cards .course .entry.yours { color: #f19191; /* Red */ }
.popup .wrapper .content .cards .course .entry:nth-of-type(2) .name:before { content: '\e838'; font-family: 'Material Symbols Outlined'; position: absolute; left: 0rem; }
.popup .wrapper .content .cards .course .entry:nth-of-type(2).yours { color: #02ff73; /* Green */ }
.popup .wrapper .content .cards .course .entry .name { font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0rem 1rem 0rem 1.5rem; position: relative; width: 50%; }
.popup .wrapper .content .cards .course .entry .score { font-size: inherit; color: inherit; margin: 0; height: initial; }
.popup .wrapper .content .cards .course .entry .score .material-symbols-outlined { font-size: inherit; }
.popup .wrapper .content .cards .course:nth-last-child(2) { animation: blink 0.5s 3 ease-in-out; /* 3secs, repeat 3 times */ }
.popup .wrapper .content .cards .wins { font-size: 1.5rem; text-align: center; }
.popup .wrapper .content .cards.lobby label { width: 100%; display: block; text-align: center; }
.popup .wrapper .content .cards.lobby .section { margin: 0rem 0.5rem 1rem; font-size: 1rem; }
.popup .wrapper .content .cards.lobby .section .name { display: flex; }
.popup .wrapper .content .cards.lobby .section .name .kick { display: none; color: #ffeb3b; margin-left: auto; }
.popup .wrapper .content .cards.lobby.host .section .name .kick { display: block; }

/* CSS2DRenderer overlay */
.ui-text { position: absolute; top: 0; left: 0; text-align: center; pointer-events: none; color: #ffffff; font-size: 1rem; line-height: 1rem; text-shadow: 0.125rem 0.125rem 0rem #000000; }
.ui-text .text-tip { display: block; z-index: 0 !important; background-color: #0286F2; border-radius: 0.5rem; color: #ffffff; box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);max-width: 12rem; margin: auto; padding: 1.5rem 1.5rem; position: relative; overflow: hidden; cursor: pointer; pointer-events: all; word-break: break-word; }
.ui-text .text-tip:before { content: '\e3a5'; font-family: 'Material Symbols Outlined'; font-size: 12rem; position: absolute; left: 0; top: 0; opacity: 0.1; width: 100%; height: 100%; overflow: hidden; transition: all 0.25s ease-in-out; pointer-events: none; text-shadow: none; }
.ui-text .text-tip:after { content: 'x'; display: block; position: absolute; top: 0rem; right: 0rem; font-family: Arial; font-weight: bold; width: 1.5rem; height: 1.5rem; border-bottom-left-radius: 0.5rem; background-color: rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; }
.ui-text .text-player { z-index: 0 !important; margin-top: 1rem; }

/* Skins money */
.wallet { display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.5rem; margin: 0.5rem; text-shadow: 0.125rem 0.125rem 0rem #000000; height: 2rem; }
.wallet .material-symbols-outlined { color: #ffeb3b; }
.wallet .amount { margin-left: 0.5rem; }
.ui-text .cost { display: flex; align-items: center; }
.ui-text .cost .material-symbols-outlined { color: #ffeb3b; }
.ui-text .cost .amount { margin-left: 0.5rem; }

/* Scrollbar */
::-webkit-scrollbar { width: 1rem; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.25); border-radius: 999rem; }
::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 999rem; border: 0.25rem solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #ffffff; border-radius: 999rem; border: 0.25rem solid transparent; background-clip: content-box; }

/* Buttons */
.button { margin: 0.5rem; pointer-events: all; border-radius: 0.5rem; position: relative; z-index: 1; }
.button.right { margin-left: auto; }
.button.left { margin-right: auto; }
.button.icon { background-color: #ffffff; color: #000000; text-shadow: none; box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); min-width: 2rem; height: 2rem; display: flex; flex-shrink: 0; flex-direction: row; justify-content: center; align-items: center; transition: all 0.05s ease-in-out; }
.button.icon span { padding: 0.25rem 0.5rem; }
.button.icon span.material-symbols-outlined { padding: 0.25rem; }
.button.icon.large { background-color: #ffffff; background-image: radial-gradient(#ffffff 0.5rem, transparent 0.5rem), radial-gradient(#ededed 0.375rem, #ffffff 0.375rem); flex-direction: column; background-size: 1.25rem 1.25rem; background-position: 0 0, 1rem 1rem; border-radius: 999rem; width: 5rem; height: 5rem; font-size: 1rem; }
.button.icon:hover,
.button.icon.selected { background-image: none; background-color: #0286F2; color: #ffffff; text-shadow: 0.125rem 0.125rem 0rem #000000; }
.button.icon.bounce { animation: 3s bounce-up 1s infinite; }
.button.icon.bounce[tabindex="-1"] { animation: none; }
.button.icon.notification:before { animation: 3s bounce-up 0.25s infinite; background-color: #FF6A00; border-radius: 999px; box-shadow: 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25); content: '\e145'; /* e145, e876 */ color: #ffffff; font-family: 'Material Symbols Outlined'; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; position: absolute; right: -0.5rem; bottom: -0.5rem; text-shadow: 0.125rem 0.125rem 0rem #000000; }

/* Version */
.version { color: #ffffff; position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; font-size: 0.875rem; text-shadow: 0.125rem 0.125rem 0rem #000000; }

/* Review styling */
.review { color: #ffffff; position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; font-size: 0.875rem; text-shadow: 0.125rem 0.125rem 0rem #000000; pointer-events: all; }
.review .material-symbols-outlined { animation: 1s ease-in-out shrink infinite; }

/* Hole Name */
.ui .hole { display: flex; align-items: center; color: #ffffff; font-size: 1rem; margin: 0.5rem; text-shadow: 0.125rem 0.125rem 0rem #000000; height: 2rem; }

/* Range sliders */
.color-slider { align-self: flex-end; justify-content: center; position: relative; display: flex; align-items: flex-end; width: 100%; }
.color-slider input { cursor: pointer; pointer-events: all; -webkit-appearance: none; width: 16rem; height: 2rem; border-radius: 999rem; box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); }
.color-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 2rem; height: 2rem; border: 0.25rem solid #ffffff; border-radius: 999rem; box-shadow: 0.125rem 0.125rem 0rem rgba(0, 0, 0, 0.25), inset 0.125rem 0.125rem 0rem rgba(0, 0, 0, 0.25); }

/* Level Menu */
.level-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; max-height: 100%; max-width: 30rem; width: 100%; overflow-y: auto; padding: 0rem 1rem; pointer-events: all; }
.level-menu .about { background-color: #0286F2; box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); color: #ffffff; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; padding: 0.5rem; min-height: 3rem; position: relative; border-radius: 0.5rem; width: 100%;}
.level-menu .about:before { content: '\e3a5'; font-family: 'Material Symbols Outlined'; font-size: 6rem; position: absolute; left: 0; top: 0; opacity: 0.1; width: 100%; height: 100%; overflow: hidden; transition: all 0.25s ease-in-out; pointer-events: none; text-shadow: none; text-align: right; }
.level-menu .about h2 { color: inherit; font-size: 1.5rem; margin-bottom: 0rem; text-align: center; }
.level-menu .item { background-color: #ffffff; font-size: 1rem; box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); color: #000000; display: flex; height: 3rem; margin-bottom: 1rem; position: relative; border-radius: 0.5rem; overflow: hidden; width: 100%; }
.level-menu .item:after { opacity: 0; background-color: #0286F2; border-radius: 999rem; color: #ffffff; display: flex; align-items: center; justify-content: center; font-family: 'Material Symbols Outlined'; font-size: 1.5rem; content: '\e876'; width: 2rem; height: 2rem; transition: all 0.25s ease-in-out; position: absolute; left: 3.5rem; top: calc(50% - 1rem); transform: translateX(4rem); }
.level-menu .item.selected { color: #0286F2; height: 3rem; }
.level-menu .item.selected:after { opacity: 1; transform: translateX(0rem); text-shadow: 0.125rem 0.125rem 0rem #000000; box-shadow: 0.125rem 0.125rem 0rem rgba(0, 0, 0, 0.25); }
.level-menu .item .thumbnail { width: 5rem; height: 3rem; background-size: cover; background-position: center; flex-shrink: 0; }
.level-menu .item .thumbnail[style*="url()"] { background-color: #0286F2; color: #ffffff; display: flex; justify-content: center; align-items: center; }
.level-menu .item .thumbnail[style*="url()"]:before { content: '\e3f4'; font-family: 'Material Symbols Outlined'; font-size: 1.5rem; }
.level-menu .item input { border: none; background-color: transparent; color: inherit; font-family: inherit; font-size: inherit; outline: none !important; padding: 0rem 1rem; text-overflow: ellipsis; max-width: 10rem; transition: all 0.25s ease-in-out; }
.level-menu .item input:focus { background-color: #f1f1f1; }
.level-menu .item input:disabled { cursor: inherit; user-select: none; pointer-events: none; }
.level-menu .item .score { color: inherit; display: flex; font-size: inherit; align-items: center; justify-content: center; padding-right: 1rem; white-space: nowrap; transform: all 0.1s ease-in-out; }
.level-menu .item .score .shots { display: flex; align-items: center; padding-right: 1rem; width: 4rem; }
.level-menu .item .score .time { display: flex; align-items: center; }
.level-menu .item .score .data { margin-left: 0.5rem; }
.level-menu .item .score span { transition: all 0.25s ease-in-out; }
.level-menu .item [class*="material"] { font-size: 1rem; }
.level-menu.small .about { margin-bottom: 0.5rem; }
.level-menu.small .item { height: 1.5rem; margin-bottom: 0.5rem; font-size: 0.875rem; }
.level-menu.small .item.selected { height: 3rem; transform: translateY(0rem); font-size: 1rem; }
.level-menu.small .item.selected .thumbnail { transform: translateY(0rem); }
.level-menu.small .item .thumbnail { transform: translateY(-0.75rem); }

/* Action bar */
.action-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.action-bar .actions { background-color: #ffffff; border: 0.125rem solid #ffffff; border-radius: 0.5rem; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0rem 0.5rem 0.5rem; box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); pointer-events: all; }
.action-bar .actions .action { width: 2rem; height: 2rem; background-size: cover; box-sizing: content-box; color: #ffffff; display: flex; align-items: center; justify-content: center; position: relative; text-shadow: -0.0625rem -0.0625rem 0 #000, 0 -0.0625rem 0 #000, 0.0625rem -0.0625rem 0 #000, 0.0625rem 0 0 #000, 0.0625rem 0.0625rem 0 #000, 0 0.0625rem 0 #000, -0.0625rem 0.0625rem 0 #000, -0.0625rem 0 0 #000; text-transform: uppercase; image-rendering: -webkit-optimize-contrast; }
.action-bar .actions .action > * { pointer-events: none; }
.action-bar .actions .action:focus-visible { outline: 0.125rem solid rgba(255, 255, 255, 0.5); outline-offset: -0.125rem; }
.action-bar .actions .action.selected:before { content: ''; width: 100%; height: 100%; background-image: linear-gradient(90deg, #ffffff 50%, #000000 50%), linear-gradient(90deg, #ffffff 50%, #000000 50%), linear-gradient(0deg, #ffffff 50%, #000000 50%), linear-gradient(0deg, #ffffff 50%, #000000 50%); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 1rem 0.125rem, 1rem 0.125rem, 0.125rem 1rem, 0.125rem 1rem; background-position: left top, right bottom, left bottom, right top; animation: border-dance 1s infinite linear; position: absolute; }
.action-bar .actions .action:after { content: attr(href); color: #ffffff; font-size: 0.75rem; line-height: 0.75rem; margin: 0rem 0.125rem; display: block; left: 0.0625rem; top: 0.0625rem; position: absolute; opacity: 1; transition: all 0.1s ease-in-out; }
.action-bar .actions .action:hover:after { opacity: 1; }
.action-bar .actions .action:last-of-type { margin-right: 0rem; }
.action-bar .modes { background-color: #ffffff; border: 0.125rem solid #ffffff; border-radius: 0.5rem; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0rem 0.5rem 0.5rem; box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); pointer-events: all; }
.action-bar .modes .button { margin: 0rem; border-radius: 0rem; box-shadow: none; position: relative; }
.action-bar .modes .button:after { content: attr(shortcut); color: #ffffff; font-size: 0.75rem; line-height: 0.75rem; margin: 0rem 0.125rem; display: block; left: 0.0625rem; top: 0.0625rem; position: absolute; opacity: 1; transition: all 0.1s ease-in-out; text-shadow: -0.0625rem -0.0625rem 0 #000, 0 -0.0625rem 0 #000, 0.0625rem -0.0625rem 0 #000, 0.0625rem 0 0 #000, 0.0625rem 0.0625rem 0 #000, 0 0.0625rem 0 #000, -0.0625rem 0.0625rem 0 #000, -0.0625rem 0 0 #000; text-transform: uppercase; image-rendering: -webkit-optimize-contrast; }
.action-bar .modes .button:hover:after { opacity: 1; }

/* Popup styling */
.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; display: flex; align-items: center; justify-content: center; text-align: center; text-shadow: 0.125rem 0.125rem 0rem #000000; }
.popup .overlay { background-color: rgba(0, 0, 0, 0.75); width: inherit; height: inherit; position: absolute; top: 0; left: 0; }
.popup .wrapper { background-color: #0286F2; color: #ffffff; box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); width: 100%; max-width: 20rem; margin: auto; padding: 2.5rem 1rem 2rem; position: relative; border-radius: 0.5rem; }
.popup .wrapper:before { content: '\e3a5'; font-family: 'Material Symbols Outlined'; font-size: 24rem; position: absolute; left: 0; top: 0; opacity: 0.1; width: 100%; height: 100%; overflow: hidden; transition: all 0.25s ease-in-out; pointer-events: none; text-shadow: none; }
.popup .wrapper .close { color: #ffffff; position: absolute; top: 0; right: 0; width: 2rem; height: 2rem; margin: 0.5rem 0.5rem 0rem 0rem; display: flex; align-items: center; justify-content: center; }
.popup .wrapper .content { position: relative; overflow-x: hidden; overflow-y: auto; max-height: 16rem; scroll-behavior: smooth; }
.popup .wrapper .content .score { display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.5rem; margin: 0.5rem; height: 2rem; pointer-events: all; }
.popup .wrapper .content .score .shots { display: flex; align-items: center; padding-right: 1rem; }
.popup .wrapper .content .score .time { display: flex; align-items: center; letter-spacing: 0.125rem; }
.popup .wrapper .content .score .data { margin-left: 0.5rem; padding: 0.25rem 0rem; }
.popup .wrapper .content .score .data.record { padding: 0.25rem 0 0 0; }
.popup .wrapper .content .score .data.record:after { content: ''; display: block; border-bottom: 0.25rem solid #ffffff; box-shadow: 0.125rem 0.125rem 0rem #000000; }
.popup .wrapper form { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; position: relative; }
.popup .wrapper form ::placeholder { color: inherit; opacity: 1 }
.popup .wrapper form .action { background-color: rgba(255, 255, 255, 0.25); border: none; color: #ffffff; border-radius: 0.5rem; font-family: inherit; font-size: 1rem; margin: 0rem 0.5rem 1rem; padding: 1rem; text-shadow: inherit; }
.popup .wrapper form .action[type='input'] { min-width: 0rem; }
.popup .wrapper form .action[type='text'] { max-width: 100%; padding: 0.5rem; }
.popup .wrapper form .action[type='button'] { cursor: pointer; flex-shrink: 0; }
.popup .wrapper form .action[type='button']:hover { background-color: rgba(255, 255, 255, 0.15); }
.popup .wrapper form .action[type='button']:last-of-type { background-color: #ffffff; color: #0286F2; text-shadow: none; margin-bottom: 0; }
.popup .wrapper form .action[type='button']:last-of-type:hover { background-color: rgba(255, 255, 255, 0.75); }
.popup .wrapper form .action[type="range"] { background-color: transparent !important; margin: 0; padding: 1rem 0rem; -webkit-appearance: none; width: 10rem; }
.popup .wrapper form .action[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.75rem; cursor: pointer; background: rgba(255, 255, 255, 0.25); border-radius: 999rem; -webkit-appearance: none; }
.popup .wrapper form .action[type="range"]::-webkit-slider-thumb { height: 1.5rem; width: 1.5rem; border-radius: 999rem; background: #ffffff; box-shadow: 0.125rem 0.125rem 0rem rgba(0, 0, 0, 0.25); cursor: pointer; margin-top: -0.375rem; -webkit-appearance: none; }
.popup .wrapper form .action[type="checkbox"] { display: none; }
.popup .wrapper form .action[type="checkbox"] + .toggle { position: relative; padding: 1rem 0.5rem; width: 4rem; }
.popup .wrapper form .action[type="checkbox"] + .toggle:before { content: ''; display: block; height: 0.75rem; cursor: pointer; background: rgba(255, 255, 255, 0.25); border-radius: 999rem; position: relative; }
.popup .wrapper form .action[type="checkbox"] + .toggle:after { left: 0%; content: ''; display: block; height: 1.5rem; width: 1.5rem; border-radius: 999rem; background: #ffffff; box-shadow: 0.125rem 0.125rem 0rem rgba(0, 0, 0, 0.25); cursor: pointer; margin-top: -1.125rem; position: absolute; transition: all 0.25s ease-in-out; }
.popup .wrapper form .action[type="checkbox"]:checked + .toggle:after { left: calc(100% - 1.5rem); }
.popup .wrapper form .action.steam { background-image: url('../img/svg/icon-steam.svg'); background-repeat: no-repeat; background-size: 1.5rem; background-position: right 0.75rem top 0.875rem; color: #144275 !important; padding-right: 3rem; }
.popup .wrapper form .group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; /* width: 100%; */ }
.popup .wrapper form .group label { width: 100%; }
.popup .wrapper form .group .action[type="text"] { margin: 0rem 0.5rem 1rem; }
.popup .jsoneditor { text-shadow: none; height: 10rem; margin-bottom: 1rem; }
.popup .jsoneditor .jsoneditor-menu { background-color: transparent; }
.popup .jsoneditor .jsoneditor-tree { border-radius: 0.5rem; }

/* Log styling */
.ui .log { display: flex; align-items: flex-end; align-self: flex-end; flex-grow: 1; color: #ffffff; font-size: 1rem; max-height: 100%; text-shadow: 0.125rem 0.125rem 0rem #000000; word-break: break-word; width: 100%; position: relative; line-height: 1rem; }
.ui .log.left .wrapper { text-align: left; margin: 0.5rem auto 0.5rem 0.5rem; }
.ui .log.right .wrapper { text-align: right; margin: 0.5rem 0.5rem 0.5rem auto; }
.ui .log .wrapper { display: flex; flex-wrap: wrap; align-items: flex-end; max-height: 100%; width: 16rem; overflow: hidden; position: relative; line-height: 1rem; margin: 0.5rem auto; padding: 0rem 0.5rem; text-align: center; }
.ui .log .wrapper .message { width: 100%; position: relative; line-height: 1rem; }
.ui .log .wrapper .message .text { display: inline-block; animation: fadeUp 0.25s ease-in-out; animation-fill-mode: forwards; }

/* Action Menu styling */
.popup .menu { text-align: left; margin: 0rem 0.25rem 0rem -0.25rem; min-height: 12rem; }
.popup .menu .model { background-color: rgba(0, 0, 0, 0.5); background-size: cover; border-radius: 0.5rem; display: inline-block; width: 2rem; height: 2rem; margin: 0.375rem 0.375rem 0rem; position: relative; box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); animation: fadeIn 0.5s ease-in-out; animation-fill-mode: forwards; }
.popup .menu .model.selected:before { content: ''; width: 100%; height: 100%; left: 0; top: 0; background-image: linear-gradient(90deg, #ffffff 50%, #000000 50%), linear-gradient(90deg, #ffffff 50%, #000000 50%), linear-gradient(0deg, #ffffff 50%, #000000 50%), linear-gradient(0deg, #ffffff 50%, #000000 50%); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 1rem 0.125rem, 1rem 0.125rem, 0.125rem 1rem, 0.125rem 1rem; background-position: left top, right bottom, left bottom, right top; animation: border-dance 1s infinite linear; position: absolute; }
.popup .search { position: absolute; right: 0; bottom: -2rem; }
.popup .search input.filter { position: absolute; bottom: 0.25rem; right: 0; width: 8rem; margin: 0; padding: 0.25rem 0.5rem; font-size: 0.75rem; }

/* Piano styling */
#piano { display: flex; border-radius: 0.5rem; overflow: hidden; width: 100%; height: 4rem; margin-bottom: 1rem; }
#piano a { display: flex; flex-direction: column; align-items: center; flex-grow: 1; background-color: #ffffff; color: #999999; font-size: 1rem; border: 0.125rem solid rgba(0, 0, 0, 0.05); border-left: none; border-top: none; text-shadow: none; position: relative; }
#piano a:before { display: none; /* Disabled */content: attr(note); text-align: center; position: absolute; bottom: 0; }
#piano a.pressed { background-color: #FF6A00 !important; color: #ffffff; }
#piano a[note*='#'] { background-color: #555555; height: 50%; z-index: 2; width: 75%; flex-grow: 0; transform: translateX(67%); }

/* Loading */
.loading:before,
.loading:after { content: ''; animation: spin 1s ease-in-out infinite; position: absolute; left: 50%; top: 50%; border: 0.5rem solid rgba(0, 0, 0, 0.25); box-sizing: border-box; border-radius: 50%; width: 2rem; height: 2rem; margin-left: -0.75rem; margin-top: -0.75rem; z-index: 1; }
.loading:after { border-color: #ffffff; border-top-color: #0286F2; margin-left: -1rem; margin-top: -1rem; }

/* Animations */
@keyframes border-dance { 0% { background-position: left top, right bottom, left bottom, right top; } 100% { background-position: left 1rem top, right 1rem bottom, left bottom 1rem , right top 1rem; }}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}
@keyframes fadeUp { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0%); }}
@keyframes shrink { 0% { transform: scale(1); } 50% { transform: scale(0.75); } 100% { transform: scale(1); }}
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }}
@keyframes bounce-up { 0% { transform: translate(0rem, 0rem); } 10% { transform: translate(0rem, -0.5rem); } 20% { transform: translate(0rem, 0.5rem); } 30% { transform: translate(0rem, 0rem); }}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); }}

/* Fonts */
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 1.5rem; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
.material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48 }
@font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 700; src: url('../fonts/material-symbols-outlined.woff2') format('woff2'); }
@font-face { font-family: 'LuckiestGuy-Regular'; src: url('../fonts/LuckiestGuy-Regular.woff2') format('woff2'); }

/* Mobile styling */
.hide,
.hidden,
.hide-d { display: none !important }

/* Vertical device */
@media (max-aspect-ratio: 1/1) {
    html { font-size: 16px; }
}

/* Extension styling */
@media (max-width: 640px) and (max-height: 360px) {
    .hide-d { display: flex !important; }
}