/* =========================
   Fonts (local repo)
========================= */
@font-face {
  font-family: "Minecraftia";
  src: url("/fonts/minecraftia.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "MCFive";
  src: url("/fonts/mc-five.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "MCTen";
  src: url("/fonts/mc-ten-lowercase-alt.ttf") format("truetype");
  font-display: swap;
}

/* =========================
   Theme
========================= */
:root{
  --bg: #141414;          /* hive backpack-ish dark */
  --bg2:#1b1b1b;
  --panel:#202020;
  --panel2:#252525;
  --stroke:#2e2e2e;
  --stroke2:#3a3a3a;
  --text:#f2f2f2;
  --muted:#b7b7b7;
  --muted2:#8b8b8b;

  --accent:#00aaff;       /* sparkskye blue */
  --accent2:#0bb7ff;

  --radius: 18px;
  --radius2: 22px;
  --shadow: none;
  --ui-border: 2px solid var(--stroke2);
  --ui-border-accent: 2px solid var(--accent);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: Minecraftia, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
  overflow-x: hidden;
}

body.modal-open{
  overflow: hidden;
}

a{ color:inherit; text-decoration:none; }
.text-link{ color: var(--accent); }
.text-link:hover{ text-decoration: underline; text-underline-offset: 3px; }

.page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 18px 80px;
}

/* =========================
   Topbar
========================= */
.topbar{
  position: sticky;
  top:0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(16,16,16,.85);
  border-bottom: 2px solid var(--stroke);
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
}
.brand__logo{
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.brand__name{
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 14px;
  opacity: .95;
}

.topnav{ display:flex; gap:10px; align-items:center; }
.topnav__links{ display:flex; gap:10px; align-items:center; }

/* Mobile nav dropdown */
.topnav__burger{
  display:none;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 14px;
  background: #1b1b1b;
  border: var(--ui-border);
  color: var(--text);
}
.topnav__burger:hover,
.topnav__burger.is-open{
  border-color: var(--accent);
}
.topnav__burger-icon{
  width: 18px;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.topnav__burger-icon span{
  display:block;
  width:100%;
  height:2px;
  background: currentColor;
  border-radius: 999px;
}
.topnav__dropdown{
  display:none;
  position:absolute;
  right: 14px;
  top: 58px;
  background: rgba(22,22,22,.98);
  border: var(--ui-border);
  border-radius: 16px;
  padding: 10px;
  min-width: 170px;
  box-shadow: none;
}
.topnav__dropdown.is-open{ display:block; }
.topnav__dropitem{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
  color: var(--text);
  background: rgba(255,255,255,.03);
  border: var(--ui-border);
}
.topnav__dropitem + .topnav__dropitem{ margin-top: 8px; }
.topnav__dropitem:hover{
  border-color: var(--item-color, var(--accent));
}

@media (max-width: 680px){
  .topnav__links{ display:none; }
  .topnav__burger{ display:inline-flex; }
}
.topnav__btn{
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #1b1b1b;
  border: var(--ui-border);
}
.topnav__btn:hover{
  border-color: var(--item-color, var(--accent));
}
.topnav__btn.is-active{
  background: var(--item-color, var(--accent));
  border-color: var(--item-color, var(--accent));
  color: #041018;
}

/* =========================
   Hero
========================= */
.hero{ padding: 28px 6px 16px; }
.hero__title{
  margin:0;
  font-family: MCTen, Minecraftia, sans-serif;
  font-size: clamp(44px, 6vw, 64px);
  line-height: 1;
}
.hero__sub{
  margin: 10px 0 0;
  color: var(--muted);
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero__quicklinks,
.hero__downloads{
  margin-top: 12px;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
  line-height: 1.6;
}

.hero__quicklinks{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  margin-top: 8px;
}

.hero__quicklinks a,
.hero__downloads a{
  color: var(--accent);
}

.hero__quicklinks a:hover,
.hero__downloads a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero__dot{
  color: var(--muted2);
}

/* =========================
   Panel / Filters
========================= */
.panel{
  margin-top: 18px;
  background: var(--panel);
  border: var(--ui-border);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: none;
}

.panel__row{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}

.panel__row--center{
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.panel__label{
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted2);
}

.panel__divider{
  height: 2px;
  background: var(--stroke);
  margin: 14px 0;
}

.panel__row--search{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}

.search{
  flex: 1;
  width: 100%;
  border-radius: 16px;
  border: var(--ui-border);
  background: rgba(0,0,0,.18);
  padding: 12px 14px;
  color: var(--text);
  outline: none;
  font-family: Minecraftia, sans-serif;
  font-size: 12px;
}
.search:focus{
  border: var(--ui-border-accent);
  box-shadow: none;
}

.count{
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 4px;
  border: 0;
  background: transparent;
}

/* =========================
   Chips
========================= */
.chips{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.chip{
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #1b1b1b;
  border: var(--ui-border);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.chip:hover{
  border: var(--ui-border-accent);
}
.chip.is-active{
  background: var(--accent);
  border-color: var(--accent);
  color: #041018;
  box-shadow: none;
}

/* folder chips use same active behavior (requested) */
.chip--folder.is-active{
  background: var(--accent);
  border-color: var(--accent);
  color: #041018;
}

/* =========================
   Grid / Cards
========================= */
.grid{
  margin-top: 18px;
  display:grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Centered gallery loading indicator (requested) */
.grid__loading{
  grid-column: 1 / -1;
  min-height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (min-width: 720px){
  .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  .grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card{
  background: var(--panel2);
  border: var(--ui-border);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: none;
  cursor: pointer;
  min-height: 280px;
  display:flex;
  flex-direction: column;
}

.card:hover{
  border: var(--ui-border-accent);
}

.card__viewer{
  position: relative;
  height: 180px;
  background: rgba(0,0,0,.16);
}
.card__viewer canvas{
  width:100%;
  height:100%;
  display:block;
  pointer-events: none; /* IMPORTANT: no interaction on card previews */
}
.card__viewer img.card__thumb{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain;
  pointer-events: none;
}
.card__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  text-align:center;
  padding: 10px;
  user-select:none;
}
.card__reload{
  position:absolute;
  right: 10px;
  top: 10px;
  border-radius: 12px;
  border: var(--ui-border);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 11px;
  padding: 8px 10px;
  display:none;
}
.card__reload:hover{
  border: var(--ui-border-accent);
}

.card__meta{
  /* slightly tighter so the bottom bar doesn't feel tall */
  padding: 12px 14px 12px;
  display:flex;
  gap: 8px;
  flex-direction: column;
}

.card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.card__name{
  font-family: Minecraftia, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  margin:0;
}

/* Make it obvious the name is clickable (direct-download link) */
.card__name a{
  color: inherit;
}
.card__name a:hover{
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.badge{
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: var(--ui-border);
  color: rgba(255,255,255,.85);
  flex: 0 0 auto;
}

/* Path line */
.card__path{
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =========================
   Modal
========================= */
.modal{
  position: fixed;
  inset:0;
  display:none;
  z-index: 50;
}
.modal.is-open{ display:block; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.6);
}

.modal__card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* centers vertically */
  width: min(1000px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  background: var(--panel2);
  border: var(--ui-border);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: none;
  display:flex;
  flex-direction: column;
}

.modal__close{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: var(--ui-border);
  background: #1b1b1b;
  color: var(--text);
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 16px;
  line-height: 1;
  cursor:pointer;
}
.modal__close:hover{
  border: var(--ui-border-accent);
}

.modal__viewer{
  position: relative;
  height: min(62vh, 520px);
  background: rgba(0,0,0,.16);
  overflow:hidden;
}
.modal__viewer canvas{
  width:100%;
  height:100%;
  display:block;
}
.modal__viewer img.modal__thumb{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain;
}
.viewer__loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

.modal__meta{
  padding: 16px;
  border-top: 2px solid var(--stroke);
  background: rgba(0,0,0,.10);
}
.modal__name{
  font-size: 16px;
  margin-bottom: 8px;
}
.modal__path{
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.modal__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons */
.btn{
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: var(--ui-border);
  background: #1b1b1b;
  color: var(--text);
  cursor:pointer;
}
.btn:hover{
  border: var(--ui-border-accent);
}
.btn[aria-busy="true"]{
  opacity: .78;
  cursor: wait;
}
.btn--primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #041018;
}

/* Pixel-art minimaps should never be blurred */
.maps-page img.card__thumb,
.maps-page img.modal__thumb{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Home page contributors */
.contributors{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding: 14px 0 2px;
}
.contrib{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 28px 12px 16px;
  border-radius:999px;
  border: var(--ui-border);
  background: #1b1b1b;
}
.contrib:hover{
  border: var(--ui-border-accent);
}
.contrib__avatar{
  width:44px;
  height:44px;
  border-radius:12px;
  image-rendering: pixelated;
}
.contrib__name{
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
  letter-spacing: .8px;
  padding-right: 2px;
}

/* Footer shared across Hive Resources pages */
.footer{
  margin-top: 44px;
  padding: 24px 18px 36px;
  text-align:center;
  font-family: MCFive, Minecraftia, sans-serif;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.footer__ai{
  color: #6f6f6f;
}
.footer a{
  color: var(--accent);
}
.footer a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}


.discord-cta{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}

.modal__viewer--map{
  padding: 0;
}

.map-preview{
  position: relative;
  width: 100%;
  height: 100%;
}

.map-preview__viewport{
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.map-preview__viewport.is-dragging{
  cursor: grabbing;
}

.map-preview__img{
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
}

.map-preview__controls{
  position: absolute;
  right: 14px;
  bottom: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}

.map-preview__group{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}


.btn--nav{
  min-width: 56px;
  min-height: 44px;
  padding-inline: 12px;
}

.map-preview__zoom{
  min-width: 74px;
  min-height: 44px;
  padding: 12px 10px;
  border-radius: 14px;
  border: var(--ui-border);
  background: rgba(20,20,20,.92);
  color: var(--muted);
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 11px;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

.map-preview__resolution,
.map-preview__helper{
  position: absolute;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 14px;
  border: var(--ui-border);
  background: rgba(20,20,20,.92);
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 11px;
  line-height: 1.2;
}

.map-preview__resolution{
  left: 14px;
  top: 14px;
}

.map-preview__helper{
  left: 14px;
  bottom: 14px;
}

@media (max-width: 720px){
  .contrib__avatar{
    width:40px;
    height:40px;
  }

  .map-preview__controls{
    right: 10px;
    left: 10px;
    bottom: 10px;
  }

  .map-preview__group{
    justify-content: stretch;
  }

  .map-preview__group .btn{
    flex: 0 0 auto;
  }

  .map-preview__group .btn--nav{
    min-width: 42px;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 10px;
  }

  .map-preview__group .btn--nav:last-child{
    min-width: 64px;
  }

  .map-preview__zoom{
    min-width: 58px;
    min-height: 36px;
    padding: 8px 9px;
    font-size: 10px;
  }
}

/* =========================
   Main Sparkskye pages / creation galleries
========================= */
body.theme-animations{ --accent:#598ffe; --accent2:#78a5ff; }
body.theme-editing{ --accent:#f0593a; --accent2:#ff7659; }
body.theme-design{ --accent:#894bdd; --accent2:#a06bff; }
body.theme-art{ --accent:#fbbc42; --accent2:#ffd06c; }

.page--wide{
  max-width: 1320px;
}

.hero__eyebrow{
  margin: 0 0 8px;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-grid{
  margin-top: 18px;
  display:grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px){
  .section-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .section-grid{ grid-template-columns: 1fr; }
}

.section-card{
  min-height: 150px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius2);
  border: var(--ui-border);
  background: var(--panel);
}
.section-card:hover{
  border-color: var(--section-color, var(--accent));
}
.section-card__title{
  margin: 0;
  font-family: MCTen, Minecraftia, sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  color: var(--section-color, var(--accent));
}
.section-card__text{
  margin: 0;
  color: var(--muted);
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 10px;
  line-height: 1.6;
  text-transform: uppercase;
}
.section-card__link{
  align-self:flex-start;
  color: var(--section-color, var(--accent));
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
}

.card--media .card__viewer{
  height: 200px;
}
.card--media .card__viewer img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}
.card--design .card__viewer img{
  object-fit: contain;
  background: rgba(0,0,0,.16);
}
.card__stats{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,.62);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.card__stat{
  padding: 5px 0;
}

.empty-state{
  grid-column: 1 / -1;
  min-height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 24px;
  border: var(--ui-border);
  border-radius: var(--radius2);
  background: var(--panel);
  color: var(--muted);
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 12px;
  line-height: 1.7;
}

.modal__viewer--media{
  height: min(64vh, 600px);
  background: #111;
}
.modal__viewer--media iframe,
.modal__viewer--media video{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#111;
}
.modal__viewer--media img{
  width:100%;
  height:100%;
  display:block;
  object-fit: contain;
}

.modal__stats{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 0 0 12px;
  color: rgba(255,255,255,.72);
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.modal__stat{
  border: var(--ui-border);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.03);
}

.format-buttons{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.btn--tiny{
  padding: 9px 11px;
  font-size: 10px;
  border-radius: 12px;
}

.viewer-toggle-note{
  position:absolute;
  left: 12px;
  top: 12px;
  z-index:2;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.45);
  border: var(--ui-border);
  border-radius: 12px;
  padding: 8px 10px;
}

@media (max-width: 680px){
  .hero{ padding-top: 20px; }
  .card--media .card__viewer{ height: 170px; }
  .modal__viewer--media{ height: 46vh; }
  .section-card__title{ font-size: 34px; }
}

/* Category page color + media-card polish */
body.theme-animations .hero__title,
body.theme-editing .hero__title,
body.theme-design .hero__title,
body.theme-art .hero__title{
  color: var(--accent);
}

.topnav__dropitem{
  --item-color: var(--accent);
}

.editing-page .card--media .card__viewer,
.design-page .card--media .card__viewer{
  padding: 12px;
  background: rgba(0,0,0,.10);
}

.editing-page .card--media .card__viewer img,
.design-page .card--media .card__viewer img{
  border-radius: 14px;
  overflow: hidden;
  background: #101010;
}

.editing-page .card--media .card__viewer img{
  object-fit: cover;
}

.design-page .card--media .card__viewer img{
  object-fit: contain;
}

.editing-page .card__stats{
  text-transform: none;
  letter-spacing: .2px;
}
.topnav__dropitem.is-active{
  background: var(--item-color, var(--accent));
  border-color: var(--item-color, var(--accent));
  color: #041018;
}

/* Editing gallery fixes: accurate thumbnail shape + less redundant preview meta */
.editing-page .card--media .card__viewer{
  height: auto;
  min-height: 0;
  padding: 14px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editing-page .card--media .card__viewer img.card__thumb{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--thumb-ratio, 16 / 9);
  object-fit: cover;
  border-radius: 14px;
  background: #101010;
}

.editing-page .card--media.card--short .card__viewer img.card__thumb{
  width: min(72%, 210px);
  aspect-ratio: 9 / 16;
}

.editing-page .modal__path{
  display: none;
}

/* Design gallery refinements */
.design-page .card--media .card__viewer{
  height: auto;
  min-height: 0;
  padding: 14px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.design-page .card--media .card__viewer img.card__thumb{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--thumb-ratio, 16 / 9);
  object-fit: cover;
  border-radius: 14px;
  background: #101010;
}
.design-page .modal__viewer--media{
  padding: 0;
}
.design-preview__img{
  object-fit: unset !important;
  image-rendering: auto;
}
.design-page .modal__path{
  text-transform: lowercase;
}
.design-page .card__path{
  text-transform: lowercase;
}

/* Design parity fixes */
.btn.is-selected,
.btn--preview.is-selected{
  background: var(--accent);
  border-color: var(--accent);
  color: #041018;
}
.btn.is-selected:hover,
.btn--preview.is-selected:hover{
  border-color: var(--accent2, var(--accent));
}
.btn:focus-visible,
.chip:focus-visible,
.card:focus-visible,
.topnav__btn:focus-visible,
.topnav__dropitem:focus-visible{
  outline: none;
  border-color: var(--accent);
}
.design-page .card:hover,
.design-page .card:focus-visible,
.design-page .btn:hover,
.design-page .chip:hover,
.design-page .modal__close:hover{
  border-color: var(--accent);
}
.design-page .card--media .card__viewer img.card__thumb,
.design-page .modal__viewer--media img,
.design-preview__img{
  image-rendering: auto;
}
.design-page .modal__viewer--media iframe{
  border: 0;
}


/* Cross-page theme parity fixes */
body.theme-animation,
body.theme-animations{ --accent:#598ffe; --accent2:#78a5ff; }
body.theme-editing{ --accent:#f0593a; --accent2:#ff7659; }
body.theme-design{ --accent:#894bdd; --accent2:#a06bff; }
body.theme-art{ --accent:#fbbc42; --accent2:#ffd06c; }

body.theme-animation .btn:hover,
body.theme-animations .btn:hover,
body.theme-editing .btn:hover,
body.theme-design .btn:hover,
body.theme-art .btn:hover,
body.theme-animation .chip:hover,
body.theme-animations .chip:hover,
body.theme-editing .chip:hover,
body.theme-design .chip:hover,
body.theme-art .chip:hover,
body.theme-animation .card:hover,
body.theme-animations .card:hover,
body.theme-editing .card:hover,
body.theme-design .card:hover,
body.theme-art .card:hover,
body.theme-animation .modal__close:hover,
body.theme-animations .modal__close:hover,
body.theme-editing .modal__close:hover,
body.theme-design .modal__close:hover,
body.theme-art .modal__close:hover{
  border-color: var(--accent) !important;
}

body.theme-animation .topnav__btn:hover,
body.theme-animations .topnav__btn:hover,
body.theme-editing .topnav__btn:hover,
body.theme-design .topnav__btn:hover,
body.theme-art .topnav__btn:hover,
body.theme-animation .topnav__btn.is-active,
body.theme-animations .topnav__btn.is-active,
body.theme-editing .topnav__btn.is-active,
body.theme-design .topnav__btn.is-active,
body.theme-art .topnav__btn.is-active,
body.theme-animation .topnav__dropitem:hover,
body.theme-animations .topnav__dropitem:hover,
body.theme-editing .topnav__dropitem:hover,
body.theme-design .topnav__dropitem:hover,
body.theme-art .topnav__dropitem:hover,
body.theme-animation .topnav__dropitem.is-active,
body.theme-animations .topnav__dropitem.is-active,
body.theme-editing .topnav__dropitem.is-active,
body.theme-design .topnav__dropitem.is-active,
body.theme-art .topnav__dropitem.is-active{
  border-color: var(--accent) !important;
}

body.theme-animation .topnav__btn.is-active,
body.theme-animations .topnav__btn.is-active,
body.theme-editing .topnav__btn.is-active,
body.theme-design .topnav__btn.is-active,
body.theme-art .topnav__btn.is-active,
body.theme-animation .topnav__dropitem.is-active,
body.theme-animations .topnav__dropitem.is-active,
body.theme-editing .topnav__dropitem.is-active,
body.theme-design .topnav__dropitem.is-active,
body.theme-art .topnav__dropitem.is-active{
  background: var(--accent) !important;
  color: #041018 !important;
}

body.theme-animation .search:focus,
body.theme-animations .search:focus,
body.theme-editing .search:focus,
body.theme-design .search:focus,
body.theme-art .search:focus{
  border-color: var(--accent) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Shared pan/zoom viewer must use the source image's natural aspect ratio.
   Later media rules set modal images to width/height:100%, so this override
   keeps the minimap-style transform math from shrinking or stretching images. */
.shared-panzoom-preview .map-preview__img,
.modal__viewer--media .shared-panzoom-preview .map-preview__img,
.design-page .modal__viewer--media .shared-panzoom-preview .map-preview__img{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: unset !important;
  transform-origin: center center !important;
  user-select: none !important;
  pointer-events: none !important;
}

.design-page .empty-state--search{
  min-height: 140px;
}

/* =========================
   Homepage + main-site footer polish
========================= */
.hero--home{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 28px;
  padding-top: 34px;
}
.hero--home .hero__text{
  min-width: 0;
  flex: 1 1 auto;
}
.hero__pfp{
  width: clamp(120px, 18vw, 220px);
  height: clamp(120px, 18vw, 220px);
  border-radius: 999px;
  object-fit: cover;
  border: var(--ui-border);
  background: var(--panel);
  flex: 0 0 auto;
}
.hero__pfp:hover{
  border-color: var(--accent);
}
.home-links{
  margin-top: 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
}
.home-links__row{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap:wrap;
}
.home-links__row--secondary{
  margin-top: 2px;
}
.site-footer{
  padding: 8px 18px 34px;
  text-align:center;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 10px;
  line-height: 1.7;
}
.site-footer__copy{
  color: var(--text);
}
.site-footer__ai{
  color: #6f6f6f;
}

/* keep long feature-card titles from clipping on narrow layouts */
.section-card__title{
  font-size: clamp(23px, 3.15vw, 34px);
  overflow-wrap: anywhere;
}

/* Top menu buttons keep their own category colors, not the current page color. */
.topnav__btn:hover,
.topnav__btn:focus-visible{
  border-color: var(--item-color, var(--accent)) !important;
}
.topnav__btn.is-active{
  background: var(--item-color, var(--accent)) !important;
  border-color: var(--item-color, var(--accent)) !important;
  color: #041018 !important;
}
.topnav__dropitem:hover,
.topnav__dropitem:focus-visible{
  border-color: var(--item-color, var(--accent)) !important;
}
.topnav__dropitem.is-active{
  background: var(--item-color, var(--accent)) !important;
  border-color: var(--item-color, var(--accent)) !important;
  color: #041018 !important;
}

@media (max-width: 680px){
  .hero--home{
    align-items:flex-start;
    gap: 18px;
  }
  .hero__pfp{
    width: 96px;
    height: 96px;
  }
  .section-card__title{
    font-size: 30px;
  }
}

@media (max-width: 440px){
  .hero--home{
    flex-direction:column-reverse;
  }
  .hero__pfp{
    align-self:flex-end;
  }
}


/* =========================
   Main site cleanup pass — home layout, nav color parity, footer
========================= */
/* Top menu buttons always keep their own category color, even on themed pages. */
body.theme-animation .topbar .topnav__btn:hover,
body.theme-animations .topbar .topnav__btn:hover,
body.theme-editing .topbar .topnav__btn:hover,
body.theme-design .topbar .topnav__btn:hover,
body.theme-art .topbar .topnav__btn:hover,
body.theme-animation .topbar .topnav__btn:focus-visible,
body.theme-animations .topbar .topnav__btn:focus-visible,
body.theme-editing .topbar .topnav__btn:focus-visible,
body.theme-design .topbar .topnav__btn:focus-visible,
body.theme-art .topbar .topnav__btn:focus-visible,
.topbar .topnav__btn:hover,
.topbar .topnav__btn:focus-visible{
  border-color: var(--item-color, var(--accent)) !important;
}
body.theme-animation .topbar .topnav__btn.is-active,
body.theme-animations .topbar .topnav__btn.is-active,
body.theme-editing .topbar .topnav__btn.is-active,
body.theme-design .topbar .topnav__btn.is-active,
body.theme-art .topbar .topnav__btn.is-active,
.topbar .topnav__btn.is-active{
  background: var(--item-color, var(--accent)) !important;
  border-color: var(--item-color, var(--accent)) !important;
  color: #041018 !important;
}
body.theme-animation .topbar .topnav__dropitem:hover,
body.theme-animations .topbar .topnav__dropitem:hover,
body.theme-editing .topbar .topnav__dropitem:hover,
body.theme-design .topbar .topnav__dropitem:hover,
body.theme-art .topbar .topnav__dropitem:hover,
body.theme-animation .topbar .topnav__dropitem:focus-visible,
body.theme-animations .topbar .topnav__dropitem:focus-visible,
body.theme-editing .topbar .topnav__dropitem:focus-visible,
body.theme-design .topbar .topnav__dropitem:focus-visible,
body.theme-art .topbar .topnav__dropitem:focus-visible,
.topbar .topnav__dropitem:hover,
.topbar .topnav__dropitem:focus-visible{
  border-color: var(--item-color, var(--accent)) !important;
}
body.theme-animation .topbar .topnav__dropitem.is-active,
body.theme-animations .topbar .topnav__dropitem.is-active,
body.theme-editing .topbar .topnav__dropitem.is-active,
body.theme-design .topbar .topnav__dropitem.is-active,
body.theme-art .topbar .topnav__dropitem.is-active,
.topbar .topnav__dropitem.is-active{
  background: var(--item-color, var(--accent)) !important;
  border-color: var(--item-color, var(--accent)) !important;
  color: #041018 !important;
}

.hero--home{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:center;
  column-gap: clamp(22px, 5vw, 72px);
  row-gap: 22px;
  padding: clamp(28px, 5vw, 64px) 6px 18px;
}
.hero--home .hero__text{ min-width:0; }
.hero__pfp{
  width: clamp(132px, 19vw, 240px);
  height: clamp(132px, 19vw, 240px);
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid var(--stroke2);
  background: var(--panel);
  display:block;
  justify-self:end;
}
.hero__pfp:hover{ border-color: var(--accent); }

.section-grid{
  align-items: stretch;
}
.section-card{
  min-height: 170px;
  gap: 12px;
  overflow: hidden;
}
.section-card__title{
  font-size: clamp(24px, 2.65vw, 34px) !important;
  line-height: .95;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  max-width: 100%;
}
.section-card__text{
  overflow-wrap: break-word;
}

.home-links{
  margin-top: 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 16px;
  clear: both;
}
.home-links__row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  flex-wrap:wrap;
}
.home-links__row--secondary{
  margin-top: 0;
  padding-top: 2px;
}
.home-links .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 52px;
  min-width: 138px;
  line-height:1;
  white-space: nowrap;
}
.home-links .btn--primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #041018;
}

.site-footer{
  max-width: 1200px;
  margin: 44px auto 0;
  padding: 24px 18px 36px;
  text-align:center;
  font-family: MCFive, Minecraftia, sans-serif;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .2px;
}
.site-footer__copy{ color: var(--text); }
.site-footer__ai{ color: #6f6f6f; margin-top: 2px; }
.site-footer__symbol{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing:0;
  margin-right: 1px;
}

@media (max-width: 1080px){
  .section-card__title{ font-size: clamp(22px, 4.4vw, 31px) !important; }
}
@media (max-width: 680px){
  .hero--home{
    grid-template-columns: 1fr auto;
    align-items:start;
    gap: 18px;
  }
  .hero__pfp{
    width: 96px;
    height: 96px;
  }
  .home-links .btn{
    min-width: 132px;
    min-height: 48px;
  }
}
@media (max-width: 520px){
  .hero--home{ grid-template-columns: 1fr; }
  .hero__pfp{ justify-self:start; }
  .section-card__title{ font-size: 28px !important; }
}

/* =========================
   Design gallery polish — compact cards + better timelapse preview
========================= */
.design-page .card--design{
  min-height: 0;
}
.design-page .card--design .card__viewer{
  padding: 12px;
}
.design-page .card--design .card__meta{
  padding: 10px 12px 12px;
  gap: 6px;
}
.design-page .card--design .card__name{
  font-size: 13px;
  line-height: 1.15;
}
.design-page .card--design .card__path{
  font-size: 10px;
  line-height: 1.35;
}

.timelapse-preview{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
  overflow: hidden;
}
.timelapse-preview__video{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit: contain;
  background:#050505;
  border:0;
}
.timelapse-preview__hint{
  position:absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.68);
  background: rgba(20,20,20,.78);
  border: var(--ui-border);
  border-radius: 12px;
  padding: 8px 10px;
  pointer-events: none;
}
.timelapse-preview__video:fullscreen{
  object-fit: contain;
}
@media (max-width: 720px){
  .timelapse-preview__hint{
    display:none;
  }
  .design-page .modal__viewer--media{
    height: min(54vh, 520px);
  }
}


/* Public-testing cleanup: expanded previews close by backdrop/Escape, no floating X button. */
.modal__close{
  display: none !important;
}

/* Timelapse preview is cleaner without an extra label over the native video controls. */
.timelapse-preview__hint{
  display: none !important;
}

/* Design variation polish + home support text */
.home-links__support{
  max-width: 720px;
  margin: -2px auto 0;
  text-align:center;
  color: var(--muted);
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 10px;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.home-links__support a{
  color: var(--accent);
  text-decoration: none;
}
.home-links__support a:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.modal__variant{
  margin-top: 0;
  margin-bottom: 4px;
  min-height: 12px;
  color: var(--accent);
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.modal__variant[hidden]{
  display:none;
}
.design-variant-arrow{
  position:absolute;
  top:50%;
  z-index: 5;
  width: 56px;
  height: 96px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #fff;
  font-family: MCFive, Minecraftia, sans-serif;
  font-size: 34px;
  line-height: 1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-shadow: 0 3px 0 rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.85);
}
.design-variant-arrow:hover,
.design-variant-arrow:focus-visible{
  color: var(--accent);
  outline: none;
}
.design-variant-arrow--prev{ left: 8px; }
.design-variant-arrow--next{ right: 8px; }
@media (max-width: 720px){
  .design-variant-arrow{
    width: 46px;
    height: 74px;
    font-size: 26px;
  }
  .design-variant-arrow--prev{ left: 4px; }
  .design-variant-arrow--next{ right: 4px; }
}

/* Animation gallery */
.animation-page .card--animation{
  min-height: 0;
}
.animation-page .card--animation .card__viewer{
  padding: 12px;
  background: rgba(0,0,0,.10);
}
.animation-page .card--animation .card__viewer img{
  border-radius: 14px;
  overflow: hidden;
  background: #101010;
  object-fit: cover;
}
.animation-page .card--animation .card__meta{
  padding: 10px 12px 12px;
  gap: 6px;
}
.animation-page .card--animation .card__name{
  font-size: 13px;
  line-height: 1.15;
}
.animation-page .card--animation .card__path{
  font-size: 10px;
  line-height: 1.35;
}
.animation-preview{
  background:#050505;
}
.animation-preview__video{
  object-fit: contain;
}

/* Top nav keeps per-button colors, even on themed section pages. */
body.theme-animation .topnav__btn:hover,
body.theme-animations .topnav__btn:hover,
body.theme-editing .topnav__btn:hover,
body.theme-design .topnav__btn:hover,
body.theme-art .topnav__btn:hover,
body.theme-animation .topnav__btn.is-active,
body.theme-animations .topnav__btn.is-active,
body.theme-editing .topnav__btn.is-active,
body.theme-design .topnav__btn.is-active,
body.theme-art .topnav__btn.is-active,
body.theme-animation .topnav__dropitem:hover,
body.theme-animations .topnav__dropitem:hover,
body.theme-editing .topnav__dropitem:hover,
body.theme-design .topnav__dropitem:hover,
body.theme-art .topnav__dropitem:hover,
body.theme-animation .topnav__dropitem.is-active,
body.theme-animations .topnav__dropitem.is-active,
body.theme-editing .topnav__dropitem.is-active,
body.theme-design .topnav__dropitem.is-active,
body.theme-art .topnav__dropitem.is-active{
  border-color: var(--item-color, var(--accent)) !important;
}
body.theme-animation .topnav__btn.is-active,
body.theme-animations .topnav__btn.is-active,
body.theme-editing .topnav__btn.is-active,
body.theme-design .topnav__btn.is-active,
body.theme-art .topnav__btn.is-active,
body.theme-animation .topnav__dropitem.is-active,
body.theme-animations .topnav__dropitem.is-active,
body.theme-editing .topnav__dropitem.is-active,
body.theme-design .topnav__dropitem.is-active,
body.theme-art .topnav__dropitem.is-active{
  background: var(--item-color, var(--accent)) !important;
  color: #041018 !important;
}