/* =========================
   1. Base & Global Styles
   ========================= */
::-webkit-scrollbar { width: 0; background: transparent; }

@font-face {
  font-family: "Minecraft";
  src: url("/assets/fonts/Minecraft.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --stage-w: 16;
  --stage-h: 9;
}

html {
  display: block;
  line-height: 1.5;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  height: 100%;
}

body {
  position: relative;
  display: flex;
  color: white;
  align-items: flex-start;
  background-color: #303030;
  margin: 0;
  line-height: inherit;
  overflow: hidden;
  height: 100%;
  font-family: "Minecraft", sans-serif;
  --ui-main-lighter: #514d4c;
  --ui-main-light: #353535;
  --ui-main: #1e1e1e;
  --ui-main-dark: #131313;
  --text-secondary: #cccccc;
  --ui-select: #008542;
}

ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, hr, p { margin: 0; }
hr { border: 0.1vh solid var(--ui-main-light); width: 74vw; }

.bolded { font-weight: 800; color: #cccccc; }

/* =========================
   2. Modal Styles
   ========================= */
.modal.hidden { display: none; }
.modal { position: absolute; inset: 0; z-index: 9999; display: block; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.modal__box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38vw; max-width: 640px; min-width: 300px; background: var(--ui-main); border: 0.35vw solid var(--ui-main-light); box-shadow: 0 0 0 0.35vw #000 inset; overflow: hidden; }
.modal__header { display: flex; align-items: center; justify-content: space-between; padding: 1vw 1.25vw; font-family: "Minecraft"; font-size: 1.4vw; }
.modal__x { background: transparent; border: none; color: #fff; font-size: 1.3vw; cursor: pointer; }
.modal__content { padding: 1.25vw; --field-h: 2.6vw; box-sizing: border-box; }
.modal__label { display: block; margin-bottom: 0.5vw; color: var(--text-secondary); }
.modal__input { width: 100%; max-width: 100%; font-size: 1.2vw; padding: 0.7vw 0.8vw; font-family: "Minecraft", sans-serif; background: var(--ui-main-dark); color: #fff; border: 0.25vw solid #0c6e3d; outline: none; box-sizing: border-box; height: var(--field-h); line-height: 1; display: inline-flex; align-items: center; }
.modal__input:focus { border-color: var(--ui-select); }
.modal__actions { display: flex; font-family: "Minecraft", sans-serif; gap: 0.6vw; margin-top: 1vw; align-items: center; }
.btn { cursor: pointer; border: 0.25vw solid #0c6e3d; background: var(--ui-main-dark); font-family: "Minecraft", sans-serif; padding: 0 1vw; font-size: 1.05vw; transition: 0.1s; height: var(--field-h); display: inline-flex; align-items: center; justify-content: center; }
.btn:hover { background: var(--ui-main-light); }
.btn--primary { border-color: var(--ui-select); }
.btn--primary:hover { transform: scale(1.03); }
.modal__hint { margin-top: 1vw; color: var(--text-secondary); font-size: 0.95vw; }
.modal__box hr { margin: 0 1.25vw; border: none; height: 0.25vw; background: #0e0e0e; box-shadow: 0 0 0 0.1vw #2a2a2a inset; }

@media (min-width: 0px) {
  .modal__content { --field-h: clamp(34px, 2.6vw, 44px); }
}

/* =========================
   3. Error Styles
   ========================= */
.error { display: none; position: absolute; right: 0; z-index: 1; padding: 0.2vw 1vw; margin: 1vw 0.5vw; background: rgba(0, 0, 0, 0.25); border-radius: 1vw; transition: 0.3s; font-size: 1.5vw; animation: fadeIn 0.2s ease forwards; }
#naerror { color: gold; border: gold solid 0.1vw; }
.zoom-out { animation: fadeOut 0.2s ease forwards; }

@keyframes zoomed { 100% { transform: translateY(10px) scale(0); display: none; } }
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(10px) scale(0.95); } }

/* =========================
   4. Sidebar Styles
   ========================= */
.sidebar { height: 100vh; width: 20vw; background-color: var(--ui-main); }
.sidebarOptions { display: flex; height: 5vw; align-items: center; justify-content: flex-start; gap: 1.5vw; padding-left: 1.5vw; font-size: 1.3vw; line-height: 1.5vw; transition: 0.3s; }
.sidebarOptions:hover { cursor: pointer; background-color: var(--ui-main-light); }
.sidebarOptions.sidebarBottom { position: absolute; }
.sidebarOptions.selected { border-left: 0.4vw solid var(--ui-select); }
#gtabs1 img, #gtabs2 img, #gtabs3 img { width: 2.5vw; }
#gtabs4 { bottom: 5vw; width: 20vw; }
#gtabs5 { bottom: 0vw; width: 20vw; }
#gtabs4 img, #gtabs5 img { width: 2vw; }
.eaglercraftText { font-size: 1.6w; }

/* =========================
   5. Header Styles
   ========================= */
.mainPage { width: 84vw; background-color: var(--ui-main); }
.gameHeader { padding: 1vw 1.8vw 0; }
.currentGame { font-size: 2vw; font-family: "Minecraft", sans-serif; }
.gameTabs { display: flex; align-items: center; }
.headerButtons { padding: 0.6vw 1.1vw; color: var(--text-secondary); font-size: 0.95vw; line-height: 1.7vw; transition: 0.3s; }
.headerButtons:hover { cursor: pointer; color: white; }
.headerButtons.selected { cursor: default; color: white; border-bottom: var(--ui-select) solid 0.21vw; }

/* =========================
   6. Body Styles
   ========================= */
#game-bg { background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; display: flex; width: 84vw; height: 84vh; justify-content: center; }
#game-title { width: 40vw; height: 6.5vw; margin-top: 6vw; }
#gameSelection { position: absolute; bottom: 0; width: 84vw; height: 4.5vw; justify-content: space-around; display: flex; background-color: var(--ui-main); }
.dropdownSelector { position: absolute; left: 0vw; display: flex; height: 4.5vw; width: 27vw; align-items: center; justify-content: space-around; transition: 0.3s; }
.dropdownSelector:hover { cursor: pointer; background-color: var(--ui-main-light); }
.centeredIcon { display: flex; align-items: center; justify-content: center; }
.dropdownIcon { color: white; width: 1.75vw; }
.playButton { position: absolute; left: 32vw; bottom: 0.5vw; display: flex; align-items: center; width: 21.5vw; height: 5vw; background-image: url(../assets/images/play.png); background-size: cover; background-position: center; background-repeat: no-repeat; transition: 0.1s; }
.playButton:hover { cursor: pointer; background-image: url(../assets/images/play-hover.png); transform: scale(1.05); }
.username { position: absolute; top: 0; bottom: 0; right: 5vw; font-size: 1.35vw; }

@keyframes drop {
  0% { transform: translateY(-300px) scaleY(0.9); opacity: 0; }
  5% { opacity: .7; }
  50% { transform: translateY(0) scaleY(1); opacity: 1; }
  65% { transform: translateY(-17px) scaleY(.9); opacity: 1; }
  75% { transform: translateY(-22px) scaleY(.9); opacity: 1; }
  100% { transform: translateY(0) scaleY(1); opacity: 1; }
}

/* =========================
   7. Mods Menu Styles
   ========================= */
#mods { position: absolute; display: none; width: 84vw; height: 91vh; flex-direction: column; align-items: center; overflow-y: scroll; }
.modketplace-title { margin: 4vh 0 1vh; width: 58vw; }
.modssubtitle { font-size: 1.6vw; }
#modsbox { display: flex; flex-wrap: wrap; justify-content: center; gap: 5vw 1.5vw; padding: 4vh 0 7vh; }
.modoption { display: flex; flex-direction: column; cursor: pointer; width: 14vw; border: 0.5vw solid var(--ui-main); transition: 0.1s; }
.modoption:hover { scale: 1.05; }
.modoption img { border: 0.3vw solid #AA0000; image-rendering: pixelated; }
.modoption.selected img { border: 0.3vw solid #00AA00; }
.modoption:hover img { background-color: rgba(255, 255, 255, 0.05); }
.moddetails { background-color: var(--ui-main-lighter); padding: 0.5vw; height: -webkit-fill-available; font-size: 1.3vw; }
.modtitle { font-size: 1.5vw; }
.modauthor { text-decoration: underline; }

/* =========================
   8. FAQ Menu Styles
   ========================= */
#faq { position: absolute; display: none; width: 84vw; height: 91vh; flex-direction: column; align-items: center; background-color: var(--ui-main-dark); overflow-y: scroll; font-size: 1.3vw; }
.faqtitle { font-size: 2.3vw; padding-top: 3vh; }
#faqbox { display: flex; flex-direction: column; padding: 5vh 11vw 7vh; width: -webkit-fill-available; }
.faqoption { margin-bottom: 3vh; }
.faqtext { display: flex; align-items: center; gap: 2vw; }
.faqsymbol { font-size: 2vw; }

/* =========================
   9. Installations Menu Styles
   ========================= */
#installations { position: absolute; display: none; width: 84vw; height: 91vh; flex-direction: column; align-items: center; background-color: var(--ui-main-dark); overflow-y: scroll; }
#installationsbox { display: flex; flex-direction: column; padding: 5vh 0 7vh; }
.installationOptions { display: flex; height: 9vh; width: 74vw; align-items: center; font-size: 1.2vw; }
.installationOptions:hover, .installationBox:hover { background-color: var(--ui-main-light); }
.installationOption { position: absolute; left: 7vw; display: flex; gap: 2vw; align-items: center; cursor: pointer; }
.installationBox { width: 3.5vh; height: 3.5vh; appearance: none; border: 0.3vw solid #0c6e3d; pointer-events: none; }
.installationBox:checked { background-color: var(--ui-select); }
.installationBox:checked:hover { background-color: #0f9a54; }
.installationOption img { width: 5.5vh; height: 5.5vh; }
.installationOptionText { display: grid; align-items: center; justify-content: flex-start; }

/* =========================
   10. Patch Notes Menu Styles
   ========================= */
#patchNotes { position: absolute; display: none; width: 84vw; height: 91vh; flex-direction: column; background-color: var(--ui-main-dark); overflow-y: scroll; }
.patchnotes-title { font-size: 1.5vw; }
.versionscontainer { display: flex; align-items: center; gap: 0.5vw; margin: 0.5vh 0 1.5vh; }
.versionBox { width: 2.5vh; height: 2.5vh; appearance: none; border: 0.3vw solid #0c6e3d; cursor: pointer; }
.versionBox:checked { background-color: var(--ui-select); }
#patchnotesbox { display: flex; flex-wrap: wrap; justify-content: center; gap: 5vw 1.5vw; padding: 2vh; }
.patchnote { display: flex; flex-direction: column; cursor: pointer; width: 15vw; background-color: black; transition: 0.1s; }
.patchnote:hover { background-color: var(--ui-main); }
.patchnote img { margin: 0.5vw; image-rendering: pixelated; }
.patchnotedetails { border-top: 0.1vh solid var(--ui-main-light); padding: 0.5vw 1vw 1vw; height: -webkit-fill-available; font-size: 1.3vw; }
#notescreen { position: absolute; display: none; flex-direction: column; align-items: center; z-index: 1; background: var(--ui-main); width: 100vw; height: 100vh; user-select: text; }
.notescreenheader { display: flex; align-items: center; font-size: 1.5vw; padding: 1.5vw; }
.notescreenheader svg { position: absolute; cursor: pointer; right: 1.5vw; width: 3vw; height: 3vw; }
#notescreen hr { width: 100vw; }
.notescreendetails { text-align: left; width: 75vw; margin: 3vh 0; overflow-y: scroll; }
.notescreendetails .date { color: var(--text-secondary); font-size: 1.1vw; }
.notescreendetails ul { list-style: revert; padding: revert; }

/* =========================
   11. Dropdown Menu Styles
   ========================= */
.dropdownMenu { position: absolute; left: 0vw; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.dropdownOptions { position: absolute; display: flex; height: 5vw; width: 27vw; align-items: center; background-color: var(--ui-main-dark); z-index: 999; font-size: 1.1vw; }
.dropdownOptions:hover { background-color: var(--ui-select); }
.dropdownOption { position: absolute; left: 2vw; display: flex; gap: 0.5vw; align-items: center; }
.dropdownOption img { width: 2.5vw; height: 2.5vw; }
.dropdownOptionText { display: grid; align-items: center; justify-content: flex-start; }
.versionText { margin-right: 4.25vw; display: grid; align-items: center; justify-content: flex-start; font-size: 1.1vw; }

/* =========================
   12. Screen Error Styles
   ========================= */
#screenerror { display: none; position: fixed; inset: 0; background: #111; color: #fff; z-index: 9999; align-items: center; justify-content: center; text-align: center; padding: 3rem; font-size: 1.4rem; }

@media only screen and (max-width: 900px), (max-height: 400px) {
  #screenerror { display: flex; }
  body > *:not(#screenerror) { display: none !important; }
}