@import url("https://db.onlinewebfonts.com/c/a7fcb1becc12274d5b761b1d895f8aa9?family=Minecraft+Ten");
html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: rgb(180, 230, 255);
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  text-align: center;
  padding-top: 100px;
  box-sizing: border-box;
}

.shorebuild-intro > h1 {
  font-family: "Minecraft Ten", sans-serif;
  font-size: 60px;
  margin: 0;
  color: #1769aa;
  position: relative;
  display: inline-block;
  isolation: isolate;
}

/* Faded island mark behind the homepage wordmark. */
.shorebuild-intro > h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 300px;
  aspect-ratio: 1;
  background: url("images/shorebuild-island-logo.png") center / contain no-repeat;
  opacity: 0.16;
  transform: translate(-50%, -46%);
  pointer-events: none;
}

.shorebuild-intro > h1[hidden],
.donutsmp-logo[hidden],
.donutsmp-mode[hidden] { display: none !important; }

.donutsmp-logo {
  display: block;
  width: min(300px, 62vw);
  margin: -42px auto -25px;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .38));
}

.donutsmp-mode {
  width: min(760px, calc(100% - 32px));
  margin: 55px auto;
  padding: 38px 30px;
  box-sizing: border-box;
  color: #e6f8ff;
  background: rgba(5, 44, 73, .9);
  border: 2px solid #2296c6;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.donutsmp-mode > span { color: #57d9ff; font: 13px "Minecraft Ten", sans-serif; }
.donutsmp-mode h2 { margin: 12px 0 22px; color: #fff; font: 32px "Minecraft Ten", sans-serif; }
.donutsmp-mode p { margin: 22px 0 0; color: #afdbef; font-size: 16px; }
.donutsmp-categories { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.donutsmp-categories button { min-width: 150px; padding: 13px 20px; color: #dff7ff; background: #083752; border: 2px solid #2588b2; border-radius: 8px; cursor: pointer; font: 15px "Minecraft Ten", sans-serif; }
.donutsmp-categories button:hover, .donutsmp-categories button.active { color: #fff; background: #087eb1; border-color: #75e2ff; box-shadow: 0 0 16px rgba(72, 212, 255, .34); }

body.smp-donutsmp {
  min-height: 100vh;
  background: radial-gradient(circle at 50% -10%, #126889 0, #06334f 40%, #021b31 100%);
}
body.smp-donutsmp .page { min-height: 100vh; }
body.smp-donutsmp .shorebuild-intro > h1 { color: #74e4ff; }
body.smp-donutsmp .shorebuild-intro > h1::before {
  width: 240px;
  background-image: url("images/donutsmp-logo.png");
  opacity: .16;
}
body.smp-donutsmp .search-box input,
body.smp-donutsmp .sort-box select,
body.smp-donutsmp .category-btn { color: #e8faff; background: #093d5c; border-color: #39bee9; }
body.smp-donutsmp .search-box input::placeholder { color: #9ed9ef; }
body.smp-donutsmp .category-btn.active,
body.smp-donutsmp .category-btn:hover { color: #fff; background: #0c94c8; border-color: #8eeaff; box-shadow: 0 0 14px rgba(81, 218, 255, .28); }


/* =========================
   SEARCH
========================= */

.search-row {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.search-box {
  margin: 0;
}

.search-box input {
  width: 450px;
  height: 55px;
  padding: 0 20px;
  box-sizing: border-box;

  background: #fffbd6;
  border: 4px solid #123b5d;
  border-radius: 6px;

  font-family: "Minecraft Ten", sans-serif;
  font-size: 18px;
  color: #123b5d;

  outline: none;
}

.search-box input::placeholder {
  color: #6b7780;
}

.sort-box select {
  width: 170px;
  height: 55px;
  padding: 0 14px;
  box-sizing: border-box;

  background: #fffbd6;
  border: 4px solid #123b5d;
  border-radius: 6px;

  font-family: "Minecraft Ten", sans-serif;
  font-size: 14px;
  color: #123b5d;

  cursor: pointer;
  outline: none;
}


/* =========================
   CATEGORIES
========================= */

.categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.category-btn {
  padding: 10px 18px;

  background: #fffbd6;
  border: 3px solid #123b5d;
  border-radius: 8px;

  font-family: "Minecraft Ten", sans-serif;
  font-size: 14px;
  color: #123b5d;

  cursor: pointer;
}

.category-btn:hover {
  background: #fff7ad;
}

.category-btn.active {
  background: #1769aa;
  color: white;
}


/* =========================
   BUILDS
========================= */

.builds {
  margin: 60px auto;
  width: 100%;
  max-width: 1500px;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 25px;

  box-sizing: border-box;
  padding: 0 15px;
}

.build-card.is-hidden {
  display: none !important;
}

.build-card {
  overflow: hidden;

  background: #dff3ff;
  border: 1.5px solid #159de0;
  border-radius: 24px;

  min-height: 340px;

  text-align: left;

  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.build-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 8px 20px rgba(0,70,120,.15);
}

.build-card img {
  width: 100%;
  height: 300px;

  object-fit: cover;
  display: block;

  background: #dff3ff;
}

.build-info {
  padding: 20px 16px 18px;
}

.build-category {
  font-family: "Minecraft Ten", sans-serif;
  font-size: 13px;

  color: #0874a8;

  margin-bottom: 8px;
}

.build-card h2,
.popup-info h2 {
  font-family: "Minecraft Ten", sans-serif;
  color: #142536;
  margin: 0;
}

.build-card h2 {
  font-size: 18px;
}


/* =========================
   POPUPS
========================= */

.build-popup,
.addon-popup,
.sub-popup {
  position: fixed;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 20px;
  box-sizing: border-box;

  background: rgba(0,20,40,.75);

  backdrop-filter: blur(5px);

  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.build-popup.show,
.addon-popup.show,
.sub-popup.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.popup-content,
.addon-popup-content,
.sub-popup-content {
  position: relative;

  background: #dff3ff;

  border: 3px solid #123b5d;
  border-radius: 20px;

  box-shadow:
    0 15px 50px rgba(0,0,0,.35);

  box-sizing: border-box;
}

.popup-content {
  width: min(800px,95vw);

  max-height: 90vh;

  overflow-y: auto;
}

.popup-content img {
  width: 100%;
  max-height: 500px;

  object-fit: contain;
  display: block;

  background: #b4e6ff;
}

.popup-info {
  padding: 25px;
  text-align: left;
}

.popup-info h2 {
  font-size: 28px;
}

.popup-close,
.addon-popup-close,
.sub-popup-close {
  position: absolute;

  top: 10px;
  right: 10px;

  width: 40px;
  height: 40px;

  background: #fffbd6;

  border: 2px solid #123b5d;
  border-radius: 8px;

  color: #123b5d;

  font-size: 28px;

  cursor: pointer;

  z-index: 5;
}


/* =========================
   BUILD DETAILS
========================= */

.popup-details {
  margin-top: 20px;

  display: grid;
  gap: 10px;
}

.detail {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 10px;

  padding: 16px 18px;

  background: #fffbd6;

  border: 2px solid #123b5d;
  border-radius: 8px;

  font-family: "Minecraft Ten", sans-serif;
  font-size: 18px;

  color: #123b5d;
}

.detail strong {
  color: #0874a8;
}


/* =========================
   PRICES
========================= */

.popup-prices {
  margin-top: 20px;
  padding-top: 15px;

  border-top: 2px solid #159de0;

  font-family: "Minecraft Ten", sans-serif;

  color: #123b5d;
}

.popup-prices h3 {
  font-size: 24px;
  margin: 0 0 14px;
}

.price-row {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 12px;

  padding: 11px 0;

  font-size: 19px;
}

.price-row strong {
  color: #0874a8;
}

.price-row.total {
  margin-top: 8px;

  padding-top: 15px;

  border-top: 2px solid #159de0;

  font-size: 23px;
}


/* =========================
   ADDONS
========================= */

.addon-price-right {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 12px;

  margin-left: auto;
}

.addons-button,
.addon-choice-button {
  padding: 9px 16px;

  background: #fffbd6;

  border: 2px solid #123b5d;
  border-radius: 6px;

  font-family: "Minecraft Ten", sans-serif;

  color: #123b5d;

  cursor: pointer;

  white-space: nowrap;
}

.addons-button:hover,
.addon-choice-button:hover {
  background: #fff7ad;
}

.addon-popup-content {
  width: min(650px,92vw);

  max-height: 90vh;

  overflow-y: auto;

  padding: 30px;
}

.addon-popup-content h2,
.sub-popup-content h2 {
  margin: 0 0 25px;

  font-family: "Minecraft Ten", sans-serif;

  color: #142536;
}

.addon-list {
  display: grid;
  gap: 12px;
}

.addon-option {
  display: flex;

  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

  padding: 16px;

  background: #dff3ff;

  border: 2px solid #123b5d;
  border-radius: 10px;

  font-family: "Minecraft Ten", sans-serif;

  color: #123b5d;
}

.addon-select {
  min-width: 150px;

  padding: 9px 12px;

  background: #fffbd6;

  border: 2px solid #123b5d;
  border-radius: 6px;

  font-family: "Minecraft Ten", sans-serif;

  color: #123b5d;

  cursor: pointer;
}

.addon-select:hover {
  background: #fff7ad;
}

.addon-choice-right {
  display: flex;

  align-items: center;

  gap: 10px;
}

.addon-popup-bottom {
  display: flex;

  justify-content: space-between;

  margin-top: 25px;

  padding-top: 18px;

  border-top: 2px solid #159de0;

  font-family: "Minecraft Ten", sans-serif;

  font-size: 20px;

  color: #123b5d;
}

.addon-popup-bottom strong {
  color: #0874a8;
}

.addon-done-button,
.sub-popup-done {
  width: 100%;

  margin-top: 20px;

  padding: 14px;

  background: #1769aa;

  border: 2px solid #123b5d;
  border-radius: 8px;

  color: white;

  font-family: "Minecraft Ten", sans-serif;

  cursor: pointer;
}

.addon-done-button:hover,
.sub-popup-done:hover {
  background: #0d568e;
}

.clear-addons-button {
  width: 100%;

  margin-top: 10px;

  padding: 14px;

  background: #fffbd6;

  border: 2px solid #123b5d;
  border-radius: 8px;

  color: #123b5d;

  font-family: "Minecraft Ten", sans-serif;

  cursor: pointer;
}

.clear-addons-button:hover {
  background: #fff7ad;
}


/* =========================
   TRIM POPUP
========================= */

.sub-popup-content {
  width: min(450px,92vw);

  padding: 30px;
}

.sub-popup-content select {
  width: 100%;

  padding: 12px;

  background: white;

  border: 2px solid #123b5d;
  border-radius: 7px;

  font-family: "Minecraft Ten", sans-serif;

  color: #123b5d;
}

.sub-title {
  margin-top: 25px !important;
}


/* =========================
   CUSTOM TRIM SELECT
========================= */

.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-button {
  width: 100%;
  min-height: 50px;

  padding: 10px 14px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  background: #fffbd6;

  border: 2px solid #123b5d;
  border-radius: 7px;

  font-family: "Minecraft Ten", sans-serif;

  font-size: 16px;

  color: #123b5d;

  cursor: pointer;

  text-align: left;
}

.custom-select-arrow {
  font-size: 12px;

  transition:
    transform .2s ease;
}

.custom-select.open
.custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  display: none;

  position: absolute;

  left: 0;
  right: 0;

  top: calc(100% + 5px);

  max-height: 260px;

  overflow-y: auto;

  background: #dff3ff;

  border: 2px solid #123b5d;
  border-radius: 7px;

  z-index: 10001;

  box-shadow:
    0 8px 20px rgba(0,0,0,.25);
}

.custom-select.open
.custom-select-options {
  display: block;
}

.custom-select-options button {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 12px;

  background: transparent;

  border: 0;

  font-family: "Minecraft Ten", sans-serif;

  font-size: 15px;

  color: #123b5d;

  cursor: pointer;

  text-align: left;
}

.custom-select-options button:hover {
  background: #fff7ad;
}


/* =========================
   PAGINATION
========================= */

.pagination {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 14px;

  width: 100%;

  margin: 35px auto 60px;

  font-family: "Minecraft Ten", sans-serif;
}

.pagination button {
  min-width: 55px;
  height: 50px;

  padding: 8px 14px;

  background: #fffbd6;

  color: #123b5d;

  border: 3px solid #123b5d;
  border-radius: 7px;

  font-family: "Minecraft Ten", sans-serif;

  font-size: 22px;

  cursor: pointer;

  transition:
    background .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.pagination button:hover:not(:disabled) {
  background: #fff2a8;

  transform: translateY(-2px);

  box-shadow:
    0 4px 0 #123b5d;
}

.pagination button:active:not(:disabled) {
  transform: translateY(2px);

  box-shadow: none;
}

.pagination button:disabled {
  opacity: 0.45;
  cursor: default;
}

#pageNumber {
  min-width: 100px;

  font-family: "Minecraft Ten", sans-serif;

  font-size: 17px;

  color: #123b5d;

  background: #dff3ff;

  border: 3px solid #123b5d;
  border-radius: 7px;

  padding: 12px 15px;
}


/* =========================
   PURCHASE
========================= */

.purchase-build-button {
  width: 100%;

  margin-top: 20px;

  padding: 15px;

  background: #1769aa;

  color: white;

  border: 2px solid #123b5d;
  border-radius: 8px;

  font-family: "Minecraft Ten", sans-serif;

  font-size: 18px;

  cursor: pointer;
}

.purchase-build-button:hover {
  background: #0d568e;
}

.purchase-build-button:active {
  transform: translateY(1px);
}


/* =========================================================
   DISCORD ACCOUNT
========================================================= */

.account-area {
  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 9999;
}


/* =========================
   LOGIN BUTTON
========================= */

.discord-login-button {
  display: flex;

  align-items: center;
  justify-content: center;

  min-width: 190px;
  height: 52px;

  padding: 0 20px;

  border: 3px solid rgba(255,255,255,.45);
  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      #5865f2,
      #4752c4
    );

  color: white;

  font-family: Arial, sans-serif;

  font-size: 16px;

  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 5px 0 #303b9e,
    0 8px 18px rgba(0,0,0,.3);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.discord-login-button:hover {
  transform: translateY(-3px);

  filter: brightness(1.08);

  box-shadow:
    0 8px 0 #303b9e,
    0 12px 22px rgba(0,0,0,.35);
}

.discord-login-button:active {
  transform: translateY(3px);

  box-shadow:
    0 2px 0 #303b9e,
    0 4px 10px rgba(0,0,0,.25);
}


/* =========================
   LOGGED-IN PROFILE
========================= */

.account-info {
  position: relative;

  display: flex;

  align-items: center;

  padding: 0;

  background: transparent;

  border: none;

  box-shadow: none;
}


/* =========================
   PROFILE BUTTON
========================= */

.account-profile-button {
  display: flex;
  align-items: center;
  gap: 10px;

  min-width: 190px;
  height: 52px;

  padding: 0 14px;

  background: #fffbd6;

  border: 3px solid #123b5d;
  border-radius: 8px;

  color: #123b5d;

  font-family: "Minecraft Ten", sans-serif;
  font-size: 14px;
  font-weight: normal;

  cursor: pointer;

  box-shadow:
    0 5px 0 #123b5d,
    0 8px 15px rgba(0,0,0,.18);

  transition:
    transform .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.account-profile-button:hover {
  background: #fff7ad;

  transform: translateY(-2px);

  box-shadow:
    0 7px 0 #123b5d,
    0 11px 20px rgba(0,0,0,.22);
}

.account-profile-button:active {
  transform: translateY(3px);

  box-shadow:
    0 2px 0 #123b5d,
    0 4px 8px rgba(0,0,0,.15);
}


/* =========================
   AVATAR
========================= */

.account-profile-button img {
  width: 36px;
  height: 36px;

  border-radius: 6px;

  object-fit: cover;

  border: 2px solid #123b5d;
}


/* =========================
   USERNAME
========================= */

#accountUsername {
  flex: 1;

  max-width: 150px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  color: #123b5d;

  font-family: "Minecraft Ten", sans-serif;

  font-size: 14px;
  font-weight: normal;

  text-align: left;
}


/* =========================
   ARROW
========================= */

.account-arrow {
  font-size: 12px;

  color: #123b5d;

  transition: transform .25s ease;
}

.account-profile-button.open .account-arrow {
  transform: rotate(180deg);
}

/* =========================
   AVATAR
========================= */

.account-profile-button img {
  width: 36px;
  height: 36px;

  border-radius: 50%;

  object-fit: cover;

  border:
    2px solid
    rgba(255,255,255,.35);
}


/* =========================
   USERNAME
========================= */

#accountUsername {
  flex: 1;

  max-width: 150px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  color: white;

  font-family: Arial, sans-serif;

  font-size: 14px;

  font-weight: 800;

  text-align: left;
}


/* =========================
   ARROW
========================= */

.account-arrow {
  font-size: 12px;

  transition:
    transform .25s ease;
}

.account-profile-button.open
.account-arrow {
  transform: rotate(180deg);
}


/* =========================
   PROFILE DROPDOWN
========================= */

.account-dropdown {
  position: absolute;

  right: 0;

  bottom: calc(100% + 12px);

  width: 280px;

  padding: 10px;

  box-sizing: border-box;

  background:
    rgba(35,45,55,.98);

  border:
    2px solid
    rgba(255,255,255,.25);

  border-radius: 14px;

  box-shadow:
    0 15px 40px rgba(0,0,0,.4);

  backdrop-filter: blur(12px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(12px)
    scale(.94);

  transform-origin:
    bottom right;

  transition:
    opacity .22s ease,
    transform .22s cubic-bezier(.2,.8,.2,1),
    visibility .22s ease;
}

.account-dropdown.show {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}


/* =========================
   PROFILE HEADER
========================= */

.account-dropdown-header {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px;

  border-radius: 10px;

  background:
    rgba(255,255,255,.06);
}

.account-dropdown-header img {
  width: 48px;
  height: 48px;

  border-radius: 50%;

  object-fit: cover;

  border:
    2px solid
    rgba(255,255,255,.3);
}

.account-dropdown-header div {
  display: flex;

  flex-direction: column;

  min-width: 0;
}

.account-dropdown-header strong {
  color: white;

  font-family: Arial, sans-serif;

  font-size: 15px;

  font-weight: 800;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.account-dropdown-header span {
  margin-top: 3px;

  color:
    rgba(255,255,255,.6);

  font-family: Arial, sans-serif;

  font-size: 12px;
}


/* =========================
   PROFILE MENU BUTTONS
========================= */

.account-menu-button {
  width: 100%;

  margin-top: 8px;

  padding: 12px;

  border: none;

  border-radius: 9px;

  background:
    rgba(255,255,255,.07);

  color: white;

  font-family: Arial, sans-serif;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  text-align: left;

  transition:
    background .15s ease,
    transform .15s ease;
}

.account-menu-button:hover {
  background:
    rgba(255,255,255,.13);

  transform:
    translateX(2px);
}

.account-menu-button:active {
  transform:
    translateX(2px)
    scale(.99);
}


/* =========================
   LOGOUT INSIDE PROFILE
========================= */

.account-menu-button.logout {
  margin-top: 10px;

  background:
    rgba(217,83,79,.15);

  color: #ff7773;

  border:
    1px solid
    rgba(217,83,79,.25);
}

.account-menu-button.logout:hover {
  background:
    rgba(217,83,79,.28);

  color: white;
}


/* =========================
   POPUP LOCK
========================= */

body.popup-open {
  overflow: hidden;
}


/* =========================
   DISCORD LOGIN POPUP
========================= */

.discord-login-popup {
  position: fixed;

  inset: 0;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 20px;

  box-sizing: border-box;

  background:
    rgba(0,20,40,.75);

  backdrop-filter: blur(5px);

  z-index: 20000;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.discord-login-popup.show {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

.discord-login-popup-content {
  position: relative;

  width: min(420px,92vw);

  padding: 35px 30px 30px;

  box-sizing: border-box;

  background: #dff3ff;

  border: 3px solid #123b5d;

  border-radius: 20px;

  box-shadow:
    0 15px 50px rgba(0,0,0,.4);

  text-align: center;

  transform:
    translateY(10px)
    scale(.97);

  transition:
    transform .25s ease;
}

.discord-login-popup.show
.discord-login-popup-content {
  transform:
    translateY(0)
    scale(1);
}

.discord-login-popup-content h2 {
  margin: 0;

  font-family:
    "Minecraft Ten",
    sans-serif;

  font-size: 30px;

  color: #142536;
}

.discord-login-popup-content p {
  margin: 15px 0 25px;

  font-family: Arial, sans-serif;

  font-size: 15px;

  color: #123b5d;

  line-height: 1.5;
}

.discord-login-popup-close {
  position: absolute;

  top: 10px;
  right: 10px;

  width: 40px;
  height: 40px;

  background: #fffbd6;

  border: 2px solid #123b5d;

  border-radius: 8px;

  color: #123b5d;

  font-size: 28px;

  cursor: pointer;
}

.discord-login-popup-close:hover {
  background: #fff7ad;
}

.discord-popup-login-button {
  width: 100%;

  height: 52px;

  border: 3px solid
    rgba(255,255,255,.45);

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      #5865f2,
      #4752c4
    );

  color: white;

  font-family: Arial, sans-serif;

  font-size: 16px;

  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 5px 0 #303b9e,
    0 8px 18px rgba(0,0,0,.3);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.discord-popup-login-button:hover {
  transform: translateY(-3px);

  filter: brightness(1.08);

  box-shadow:
    0 8px 0 #303b9e,
    0 12px 22px rgba(0,0,0,.35);
}

.discord-popup-login-button:active {
  transform: translateY(3px);

  box-shadow:
    0 2px 0 #303b9e,
    0 4px 10px rgba(0,0,0,.25);
}


/* =========================
   SUCCESS PAGE
========================= */

.discord-success-page {
  position: fixed;

  inset: 0;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 30px;

  box-sizing: border-box;

  background:
    rgb(180,230,255);

  z-index: 30000;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}

.discord-success-page.show {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

.discord-success-content {
  width: min(800px,90vw);

  padding: 45px 35px;

  background: #dff3ff;

  border: 4px solid #123b5d;

  border-radius: 20px;

  box-shadow:
    0 15px 50px rgba(0,0,0,.3);

  text-align: center;
}

.discord-success-content h1 {
  margin: 0;

  font-family:
    "Minecraft Ten",
    sans-serif;

  font-size:
    clamp(28px,5vw,55px);

  line-height: 1.25;

  color: #1769aa;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  .builds {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .search-row {
    flex-direction: column;
  }

  .search-box input,
  .sort-box select {
    width: 90vw;

    max-width: 450px;
  }

}


@media (max-width: 768px) {

  .builds {
    display: grid !important;

    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;

    gap: 15px;
  }

}


@media (max-width: 500px) {

  .builds {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 8px;
    padding: 0 8px;
  }

  .build-card { min-height: 0; border-radius: 12px; }

  .build-card img { height: 105px; }

  .build-info { padding: 9px 7px 10px; }

  .build-category { font-size: 8px; margin-bottom: 4px; }

  .build-card h2 { font-size: 10px; line-height: 1.35; }

  h1 {
    font-size: 45px;
  }

  .addon-price-right {
    gap: 7px;
  }

  .addons-button {
    padding: 8px 10px;

    font-size: 12px;
  }

}


@media (max-width: 600px) {

  .account-area {
    right: 12px;
    bottom: 12px;
  }

  .discord-login-button {
    min-width: 0;

    height: 46px;

    padding: 0 14px;

    font-size: 14px;
  }

  .account-profile-button {
    min-width: 0;

    width: 52px;
    height: 52px;

    padding: 0;

    justify-content: center;

    border-radius: 50%;
  }

  .account-profile-button img {
    width: 38px;
    height: 38px;
  }

  #accountUsername,
  .account-arrow {
    display: none;
  }

  .account-dropdown {
    right: 0;

    width:
      min(
        280px,
        calc(100vw - 24px)
      );
  }

}


/* =========================
   FORCE SHOREBUILDS PROFILE
========================= */

.account-profile-button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  width: 190px !important;
  min-width: 190px !important;
  height: 52px !important;

  padding: 0 14px !important;
  box-sizing: border-box !important;

  background: #fffbd6 !important;

  border: 3px solid #123b5d !important;
  border-radius: 8px !important;

  color: #123b5d !important;

  font-family: "Minecraft Ten", sans-serif !important;
  font-size: 14px !important;
  font-weight: normal !important;

  box-shadow:
    0 5px 0 #123b5d,
    0 8px 15px rgba(0,0,0,.18) !important;

  cursor: pointer !important;
}

.account-profile-button:hover {
  background: #fff7ad !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 7px 0 #123b5d,
    0 11px 20px rgba(0,0,0,.22) !important;
}

.account-profile-button img {
  width: 36px !important;
  height: 36px !important;

  border-radius: 6px !important;

  object-fit: cover !important;

  border: 2px solid #123b5d !important;
}

#accountUsername {
  color: #123b5d !important;

  font-family: "Minecraft Ten", sans-serif !important;
  font-size: 14px !important;
  font-weight: normal !important;
}

.account-arrow {
  color: #123b5d !important;
}

.build-price {
  font-family: "Minecraft Ten", sans-serif !important;
  font-size: 18px;
  color: #0874a8;
}

.price {
  font-family: "Minecraft Ten", sans-serif !important;
}
/* Hide build prices from the main build cards */
.build-card .build-price,
.build-card .price,
.build-card [data-price] {
    display: none !important;
}

.smp-swapper-button { color: #8eeaff; border: 1px solid rgba(69, 201, 245, .55); }
.smp-swapper-popup { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2, 18, 30, .7); }
.smp-swapper-popup[hidden] { display: none !important; }
.smp-swapper-card { position: relative; width: min(530px, 100%); padding: 29px; background: #092536; border: 2px solid #32c4f2; border-radius: 14px; box-shadow: 0 20px 55px rgba(0, 0, 0, .52); color: #dff7ff; }
.smp-swapper-card > span { color: #60d8ff; font: 12px "Minecraft Ten", sans-serif; }
.smp-swapper-card h2 { margin: 8px 35px 9px 0; color: #fff; font: 27px "Minecraft Ten", sans-serif; }
.smp-swapper-card p { margin: 0; color: #a8cedd; line-height: 1.5; }
.smp-swapper-close { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; color: #fff; background: #1769aa; border: 2px solid #32c4f2; border-radius: 7px; cursor: pointer; font-size: 21px; }
.smp-swapper-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
.smp-swapper-choices button { min-height: 64px; padding: 12px; color: #dff7ff; background: #10384d; border: 2px solid #267b9d; border-radius: 9px; cursor: pointer; font: 14px "Minecraft Ten", sans-serif; }
.smp-swapper-choices button:hover, .smp-swapper-choices button.active { color: #fff; background: #1769aa; border-color: #67ddff; box-shadow: 0 0 13px rgba(65, 207, 248, .35); }

.farm-spawner-row {
  align-items: flex-end;
}

.farm-spawner-label,
.farm-spawner-control {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.farm-spawner-label small {
  color: #4a6e89;
  font-size: 12px;
}

.farm-spawner-control {
  align-items: flex-end;
}

.farm-spawner-control input {
  width: 112px;
  padding: 8px 10px;
  border: 2px solid #123b5d;
  border-radius: 6px;
  background: #fffbd6;
  color: #123b5d;
  font: inherit;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}

.farm-spawner-control input::-webkit-inner-spin-button,
.farm-spawner-control input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.farm-spawner-row[hidden],
.plain-build-popup .popup-details[hidden],
.farm-build-popup #standardAddonRow,
.plain-build-popup #standardAddonRow {
  display: none !important;
}

.farm-spawner-control strong {
  min-height: 20px;
}
.custom-shulker-icon{width:96px;height:96px;object-fit:contain;display:block;margin:18px auto 6px;border-radius:10px;image-rendering:auto}.custom-shulker-card{cursor:pointer}

/* Keep the logged-in Discord name visible on phones, beside the avatar. */
@media (max-width: 600px) {
  #accountUsername { display: block !important; max-width: 118px; font-size: 11px !important; }
}

/* First-login tutorial */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1, 13, 24, .58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tutorial-overlay[hidden] { display: none !important; }
.tutorial-open { overflow: hidden; }

.tutorial-choice-card,
.tutorial-popup,
.tutorial-orders-popup {
  color: #eefaff;
  background: #082336;
  border: 3px solid #40c8fa;
  border-radius: 18px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .48);
}

.tutorial-choice-card {
  width: min(470px, 100%);
  padding: 36px;
  text-align: center;
  animation: tutorialPopIn .35s ease-out both;
}

.tutorial-choice-card > span,
.tutorial-popup > span,
.tutorial-orders-popup > span {
  color: #48cdf9;
  font: 12px "Minecraft Ten", sans-serif;
  letter-spacing: 1px;
}

.tutorial-choice-card h2,
.tutorial-popup h2 { margin: 12px 0 10px; font: 30px "Minecraft Ten", sans-serif; color: #fff; }
.tutorial-choice-card p,
.tutorial-popup p { margin: 0; color: #c8e4ef; line-height: 1.55; }
.tutorial-choice-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; }
.tutorial-choice-actions button,
.tutorial-exit { min-height: 44px; padding: 0 20px; border-radius: 8px; cursor: pointer; font: 15px "Minecraft Ten", sans-serif; }
.tutorial-start-button { background: #45c7f2; color: #062035; border: 2px solid #a8edff; }
.tutorial-skip-button { background: #ffd873; color: #4d3600; border: 2px solid #b98200; }

.tutorial-guide { align-items: stretch; }
.tutorial-scene { position: relative; width: min(1060px, 100%); height: min(680px, calc(100vh - 40px)); overflow: hidden; }
.tutorial-exit { position: fixed; top: 22px; right: 24px; z-index: 3; color: #d9f5ff; background: #123d56; border: 2px solid #48c8f4; }

.tutorial-popup { position: absolute; z-index: 2; top: 78px; left: 50%; width: min(420px, calc(100% - 30px)); padding: 25px; transform: translateX(-50%); text-align: center; transition: opacity .45s ease, transform .45s ease; }
.tutorial-popup p { min-height: 75px; }

.tutorial-skin-stage { position: absolute; z-index: 1; width: 360px; height: 0; left: 50%; bottom: -80px; overflow: hidden; transform: translateX(-50%); transition: height .7s ease, bottom .7s ease; }
.tutorial-skin { position: absolute; bottom: 0; left: 0; width: 100%; display: block; }
.tutorial-hand { position: absolute; z-index: 3; top: 120px; width: 76px; height: 38px; border: 4px solid #e37942; border-radius: 18px; background: #f29b55; opacity: 0; transition: all .45s ease; }
.tutorial-left-hand { left: -18px; transform: rotate(15deg); }
.tutorial-right-hand { right: -18px; transform: rotate(-15deg); }
.tutorial-wave-hand { position: absolute; z-index: 4; top: 92px; right: 3px; font-size: 55px; opacity: 0; }

.tutorial-orders-popup { position: absolute; z-index: 3; top: 110px; right: -380px; width: 270px; padding: 14px; opacity: 0; transition: right .8s cubic-bezier(.2,.9,.2,1), opacity .4s ease; }
.tutorial-profile-row,
.tutorial-menu-row { padding: 12px; margin-top: 9px; border-radius: 9px; background: #304351; color: #fff; text-align: left; font: 14px "Minecraft Ten", sans-serif; }
.tutorial-profile-row { display: flex; gap: 10px; align-items: center; }
.tutorial-profile-row span { font-size: 24px; color: #ffe0a7; }
.tutorial-orders-highlight { border: 2px solid #55d4ff; background: #126b91; box-shadow: 0 0 0 4px rgba(85, 212, 255, .17); }
.tutorial-orders-highlight b { float: right; font-size: 24px; line-height: 12px; }

.tutorial-guide.stage-intro .tutorial-skin-stage { height: 365px; bottom: -118px; }
.tutorial-guide.stage-intro .tutorial-hand { opacity: 1; }
.tutorial-guide.stage-intro .tutorial-left-hand { left: 10px; }
.tutorial-guide.stage-intro .tutorial-right-hand { right: 10px; }
.tutorial-guide.stage-orders .tutorial-popup { opacity: 0; transform: translate(-50%, -80px); }
.tutorial-guide.stage-orders .tutorial-skin-stage { height: 390px; bottom: -112px; }
.tutorial-guide.stage-orders .tutorial-orders-popup { right: 5%; opacity: 1; }
.tutorial-guide.stage-orders .tutorial-right-hand { opacity: 1; top: 116px; right: -8px; transform: rotate(-35deg); }
.tutorial-guide.stage-farewell .tutorial-popup { opacity: 1; }
.tutorial-guide.stage-farewell .tutorial-popup h2 { font-size: 25px; }
.tutorial-guide.stage-farewell .tutorial-skin-stage { height: 520px; bottom: -4px; }
.tutorial-guide.stage-farewell .tutorial-wave-hand { opacity: 1; animation: tutorialWave .75s ease-in-out infinite; }
.tutorial-guide.stage-farewell .tutorial-orders-popup { right: -380px; opacity: 0; }

@keyframes tutorialPopIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes tutorialWave { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(25deg); } }

@media (max-width: 650px) {
  .tutorial-choice-card { padding: 28px 20px; }
  .tutorial-choice-actions { flex-direction: column-reverse; }
  .tutorial-choice-actions button { width: 100%; }
  .tutorial-scene { height: calc(100vh - 30px); }
  .tutorial-popup { top: 60px; padding: 19px; }
  .tutorial-popup h2 { font-size: 24px; }
  .tutorial-skin-stage { width: 285px; }
  .tutorial-orders-popup { top: 275px; width: 245px; }
  .tutorial-guide.stage-orders .tutorial-orders-popup { right: 50%; transform: translateX(50%); }
  .tutorial-guide.stage-orders .tutorial-skin-stage { opacity: .38; }
}

/* Tutorial cutscene: guide is behind the welcome card while its hands hold it. */
.tutorial-guide .tutorial-popup { z-index: 4; top: 246px; }
.tutorial-guide .tutorial-popup::before,
.tutorial-guide .tutorial-popup::after { content: ""; position: absolute; top: 43%; width: 80px; height: 42px; border: 4px solid #db7d42; border-radius: 24px; background: linear-gradient(90deg, #f7b063, #c96538); box-shadow: 0 3px 0 #803e2b; }
.tutorial-guide .tutorial-popup::before { left: -65px; transform: rotate(15deg); }
.tutorial-guide .tutorial-popup::after { right: -65px; transform: rotate(-15deg); }
.tutorial-guide .tutorial-skin-stage { z-index: 3; top: 22px; bottom: auto; width: 390px; height: 455px; overflow: hidden; transition: left .8s ease, top .65s ease, width .65s ease, height .65s ease, opacity .45s ease; }
.tutorial-guide .tutorial-skin { top: 0; bottom: auto; }
.tutorial-guide .tutorial-hand { display: none; }
.tutorial-guide.stage-intro .tutorial-skin-stage { height: 455px; bottom: auto; }
.tutorial-guide.stage-orders .tutorial-skin-stage { top: 68px; left: 19%; width: 330px; height: 420px; bottom: auto; opacity: .98; }
.tutorial-guide.stage-farewell .tutorial-skin-stage { top: 8px; width: 410px; height: 590px; bottom: auto; }
.tutorial-guide.stage-farewell .tutorial-popup { top: 38px; }
.tutorial-guide.stage-farewell .tutorial-popup::before,
.tutorial-guide.stage-farewell .tutorial-popup::after { opacity: 0; }
.tutorial-guide.stage-orders .tutorial-orders-popup { top: 90px; right: 7%; z-index: 5; }
.tutorial-guide.stage-orders .tutorial-orders-popup::after { content: "👉"; position: absolute; left: -76px; top: 113px; font-size: 51px; transform: rotate(-10deg); animation: tutorialPoint .65s ease-in-out infinite alternate; }
.tutorial-guide.orders-exit .tutorial-orders-popup { transform: translateY(110vh) rotate(8deg); opacity: 0; transition: transform .9s cubic-bezier(.5,-.2,.75,.2), opacity .45s ease; }
.tutorial-guide.orders-glow .tutorial-orders-highlight { animation: tutorialOrderGlow 1s ease-in-out infinite alternate; }
.tutorial-logout-row { color: #ff8585 !important; border: 1px solid #8a3d47; background: #4a2932 !important; }
@keyframes tutorialPoint { to { transform: translateX(13px) rotate(-10deg); } }
@keyframes tutorialOrderGlow { to { box-shadow: 0 0 8px 4px #63ddff, 0 0 28px 9px rgba(99,221,255,.55); transform: scale(1.035); } }
@media (max-width: 650px) { .tutorial-guide .tutorial-popup { top: 198px; }.tutorial-guide .tutorial-skin-stage { width: 300px; top: 18px; height: 350px; }.tutorial-guide.stage-orders .tutorial-skin-stage { left: 12%; width: 275px; opacity: .5; }.tutorial-guide.stage-orders .tutorial-orders-popup { top: 245px; }.tutorial-guide .tutorial-orders-popup::after { display: none; }.tutorial-guide.stage-farewell .tutorial-skin-stage { width: 325px; height: 470px; top: 55px; }.tutorial-guide.stage-farewell .tutorial-popup { top: 15px; }.tutorial-guide .tutorial-popup::before,.tutorial-guide .tutorial-popup::after { width: 48px; }.tutorial-guide .tutorial-popup::before { left: -40px; }.tutorial-guide .tutorial-popup::after { right: -40px; } }

/* Generated Minecraft hand frames for the cutscene. */
.tutorial-guide .tutorial-popup::before,.tutorial-guide .tutorial-popup::after { display: none; }
.tutorial-arm-image { position: absolute; z-index: 7; width: 220px; height: 130px; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .45s ease; }
.tutorial-hold-left-image { top: 325px; left: calc(50% - 310px); transform: rotate(12deg); }.tutorial-hold-right-image { top: 325px; right: calc(50% - 310px); transform: scaleX(-1) rotate(12deg); }.tutorial-point-image { top: 186px; left: 10%; width: 270px; transform: rotate(-9deg); }.tutorial-wave-image { top: 112px; left: calc(50% + 44px); width: 180px; transform-origin: 22% 78%; }
.tutorial-guide.stage-intro .tutorial-hold-left-image,.tutorial-guide.stage-intro .tutorial-hold-right-image { opacity: 1; }.tutorial-guide.stage-orders .tutorial-point-image { opacity: 1; animation: tutorialArmPoint .7s ease-in-out infinite alternate; }.tutorial-guide.stage-farewell .tutorial-wave-image { opacity: 1; animation: tutorialArmWave .65s ease-in-out infinite alternate; }
@keyframes tutorialArmPoint { to { transform: translateX(14px) rotate(-9deg); } } @keyframes tutorialArmWave { to { transform: rotate(22deg) translateY(-5px); } }
@media (max-width: 650px) { .tutorial-arm-image { width: 140px; height: 85px; }.tutorial-hold-left-image { top: 268px; left: -18px; }.tutorial-hold-right-image { top: 268px; right: -18px; }.tutorial-point-image { display: none; }.tutorial-wave-image { top: 110px; left: calc(50% + 15px); width: 130px; } }

/* Attached blocky character arms: no image tiles or checkerboard backgrounds. */
.tutorial-arm-image { display: none !important; }
.tutorial-guide .tutorial-hand { display: block !important; z-index: 6; top: 334px; width: 116px; height: 34px; border: 0; border-radius: 0; background: repeating-linear-gradient(90deg, #e99620 0 19px, #c97700 19px 38px); box-shadow: inset 0 -7px rgba(119,70,0,.26); opacity: 0; transition: opacity .3s ease, transform .45s ease, top .45s ease, left .65s ease, right .65s ease; }
.tutorial-guide .tutorial-hand::after { content: ""; position: absolute; top: -5px; width: 30px; height: 44px; border-radius: 3px; background: #f3bb4b; box-shadow: inset -7px -7px rgba(186,116,0,.25); }.tutorial-guide .tutorial-left-hand { left: calc(50% - 318px); transform: rotate(9deg); }.tutorial-guide .tutorial-left-hand::after { right: -8px; }.tutorial-guide .tutorial-right-hand { right: calc(50% - 318px); transform: scaleX(-1) rotate(9deg); }.tutorial-guide .tutorial-right-hand::after { right: -8px; }
.tutorial-guide.stage-intro .tutorial-left-hand,.tutorial-guide.stage-intro .tutorial-right-hand { opacity: 1; }.tutorial-guide.stage-orders .tutorial-left-hand { opacity: 0; }.tutorial-guide.stage-orders .tutorial-right-hand { opacity: 1; top: 185px; right: 42%; width: 185px; transform: scaleX(-1) rotate(-18deg); animation: tutorialAttachedPoint .7s ease-in-out infinite alternate; }.tutorial-guide.stage-farewell .tutorial-left-hand { opacity: 0; }.tutorial-guide.stage-farewell .tutorial-right-hand { opacity: 1; top: 145px; right: calc(50% - 205px); width: 92px; transform-origin: right center; animation: tutorialAttachedWave .55s ease-in-out infinite alternate; }.tutorial-guide.stage-farewell .tutorial-wave-hand { display: none; }.tutorial-guide.stage-farewell .tutorial-popup > span { display: none; }
@keyframes tutorialAttachedPoint { to { transform: scaleX(-1) translateX(16px) rotate(-18deg); } } @keyframes tutorialAttachedWave { to { transform: rotate(30deg) translateY(-10px); } }
@media (max-width: 650px) { .tutorial-guide .tutorial-hand { top: 273px; width: 75px; height: 25px; }.tutorial-guide .tutorial-hand::after { width: 22px; height: 32px; }.tutorial-guide .tutorial-left-hand { left: calc(50% - 210px); }.tutorial-guide .tutorial-right-hand { right: calc(50% - 210px); }.tutorial-guide.stage-orders .tutorial-right-hand { top: 275px; right: 39%; width: 120px; }.tutorial-guide.stage-farewell .tutorial-right-hand { top: 120px; right: calc(50% - 155px); width: 65px; } }

/* Phone layout: retain the desktop-style account name and three build cards. */
#mobileAccountUsername { display: none; }

@media (max-width: 900px) {
  .builds {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 0 8px;
  }

  .build-card { min-height: 0; border-radius: 24px; }

  .build-card img { height: 300px; }
}

@media (max-width: 600px) {
  #accountUsername { display: none !important; }

  #mobileAccountUsername {
    display: block !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #123b5d;
    font-family: "Minecraft Ten", sans-serif;
    font-size: 11px;
    text-align: left;
  }
}
.bundle-addon-dialog{max-width:420px}.bundle-addon-dialog>p{margin:0 0 18px;color:#b9d7e6}.bundle-material-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bundle-material-choices button{min-height:82px;border:2px solid #178dbd;border-radius:9px;background:#103044;color:#e7f8ff;font:800 15px "Minecraft Ten",Arial,sans-serif;cursor:pointer}.bundle-material-choices button:hover{background:#1b5876;border-color:#4ed0f4}.bundle-material-choices small{display:block;margin-top:9px;color:#5ed5f5;font:700 12px Arial,sans-serif}.bundle-quantity-label{display:grid;gap:8px;margin:8px 0 4px;font:800 13px "Minecraft Ten",Arial,sans-serif;color:#dff8ff}.bundle-quantity-label input{width:100%;box-sizing:border-box;padding:13px;border:2px solid #1d94c2;border-radius:7px;background:#071f2e;color:#fff;font-size:16px}.bundle-quantity-error{min-height:18px;margin:4px 0 10px;color:#ff8c9d;font-weight:800}

/* Discord self-service roles beneath the build pager. */
.discord-role-preferences{max-width:900px;margin:28px auto 44px;padding:25px;border:3px solid #0d608b;border-radius:16px;background:#d8f2ff;color:#082f4c;box-shadow:0 8px 0 #14557c;font-family:Arial,sans-serif}.discord-role-preferences h2{margin:7px 0 8px;font:24px "Minecraft Ten",Arial,sans-serif;color:#07385d}.discord-role-preferences p{margin:0;color:#164b6d}.discord-role-preference-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.discord-role-preference{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:2px solid #0d608b;border-radius:9px;background:#effbff}.discord-role-preference strong{font:16px "Minecraft Ten",Arial,sans-serif}.discord-role-preference button{min-width:112px;padding:9px 12px;border:2px solid #083f66;border-radius:7px;background:#237ab8;color:#fff;font:13px "Minecraft Ten",Arial,sans-serif;cursor:pointer}.discord-role-preference button.has-role{background:#c9f7d8;color:#0b6133;border-color:#207b4e}.discord-role-preference button:disabled{opacity:.55;cursor:wait}.discord-role-preference-message{min-height:20px;margin-top:14px!important;font-weight:700}.addon-choice-stack{align-items:flex-end!important;flex-direction:column!important}.addon-choice-stack strong{display:block;min-height:18px;margin-top:7px;color:#0b4c76;font:14px "Minecraft Ten",Arial,sans-serif;text-align:right;white-space:nowrap}@media(max-width:640px){.discord-role-preferences{margin:24px 14px 38px;padding:19px}.discord-role-preference-list{grid-template-columns:1fr}.discord-role-preference{align-items:flex-start;flex-direction:column}.discord-role-preference button{width:100%}}

/* V8: load build art eagerly but only reveal after a complete decode. */
.build-card > img.shore-image-pending,
#popupImage.shore-image-pending { opacity: 0 !important; }
.build-card > img.shore-image-ready,
#popupImage.shore-image-ready { opacity: 1 !important; transition: opacity .08s linear; }


/* =========================
   HOMEPAGE INTRO / PROCESS
========================= */

.shorebuild-intro {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  text-align: left;
}

.shorebuild-intro > h1 {
  text-align: left;
}

.shorebuild-intro > p {
  margin: 12px 0 18px;
  color: #245d7d;
  font-family: "Minecraft Ten", sans-serif;
  font-size: 18px;
  line-height: 1.35;
}

.building-process-button {
  min-height: 48px;
  padding: 0 18px;
  border: 3px solid #123b5d;
  border-radius: 6px;
  background: #fffbd6;
  color: #123b5d;
  box-shadow: 0 4px 0 rgba(18, 59, 93, .22);
  cursor: pointer;
  font-family: "Minecraft Ten", sans-serif;
  font-size: 15px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.building-process-button:hover {
  background: #fff6ad;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(18, 59, 93, .2);
}

.building-process-popup[hidden] { display: none !important; }

.building-process-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 30, 48, .72);
  backdrop-filter: blur(5px);
}

.building-process-card {
  position: relative;
  width: min(650px, 100%);
  box-sizing: border-box;
  padding: 30px;
  border: 4px solid #123b5d;
  border-radius: 10px;
  background: #bfeaff;
  box-shadow: 0 22px 60px rgba(8, 44, 67, .3);
  text-align: left;
}

.building-process-eyebrow {
  color: #34799f;
  font-family: "Minecraft Ten", sans-serif;
  font-size: 12px;
}

.building-process-card h2 {
  margin: 8px 42px 8px 0;
  color: #1769aa;
  font-family: "Minecraft Ten", sans-serif;
  font-size: 30px;
}

.building-process-card > p {
  margin: 0 0 20px;
  color: #315f77;
  font-size: 15px;
}

.building-process-close {
  position: absolute;
  top: 16px;
  right: 18px;
  border: 0;
  background: transparent;
  color: #123b5d;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
}

.building-process-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.building-process-options a {
  display: flex;
  min-height: 88px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  padding: 15px 16px;
  border: 3px solid #174b70;
  border-radius: 7px;
  background: #fffbd6;
  color: #123b5d;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}

.building-process-options a:hover {
  background: #fff4a4;
  transform: translateY(-2px);
}

.building-process-options strong {
  font-family: "Minecraft Ten", sans-serif;
  font-size: 16px;
}

.building-process-options span {
  margin-top: 5px;
  color: #57788b;
  font-size: 12px;
  line-height: 1.35;
}

body.smp-donutsmp .shorebuild-intro { display: none; }

@media (max-width: 650px) {
  .shorebuild-intro {
    width: min(100% - 30px, 1180px);
  }

  .shorebuild-intro > h1 {
    font-size: 45px;
  }

  .shorebuild-intro > p {
    font-size: 15px;
  }

  .building-process-button {
    width: 100%;
    font-size: 13px;
  }

  .building-process-card {
    padding: 24px 18px 20px;
  }

  .building-process-card h2 {
    font-size: 24px;
  }

  .building-process-options {
    grid-template-columns: 1fr;
  }
}


/* v47: stop browser rubber-band/overscroll beyond the real document on every ShoreBuilds page. */
html, body { overscroll-behavior: none; }


/* V63 — DonutSMP / SMP Swapper retired */
.smp-swapper-button,
.smp-swapper-popup,
.donutsmp-logo,
.donutsmp-mode,
body.smp-donutsmp {
  display: none !important;
}


/* =========================================================
   V78 — SITE-WIDE MINECRAFT TYPOGRAPHY
   ShoreBuild primarily uses Minecraft Ten throughout the UI.
========================================================= */
html,
body,
button,
input,
select,
textarea,
a,
label,
small,
strong,
p,
span,
div,
section,
article,
nav,
header,
footer {
  font-family: "Minecraft Ten", Arial, sans-serif;
}

input,
textarea,
select {
  font-family: "Minecraft Ten", Arial, sans-serif !important;
}