/* ═══════════════════════════════════════════════════════════════
   GRIMSBY MANOR — halloween portal (youxi--1--15)
   Iron gate, gravestones, cobwebs, potions, ghost raps,
   full moon, treat bags, portraits, monster mash, crypt log.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --manor: #1A1424;
  --manor-2: #251C33;
  --panel: #2E2342;
  --pumpkin: #F07C1B;
  --slime: #9BC53D;
  --ghost: #EDE7F6;
  --blood: #A63A50;
  --moon: #F5E9C9;
  --txt-soft: #9C92B5;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', sans-serif;
  --sec-gap: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at 78% 6%, rgba(245, 233, 201, .16) 0 42px, transparent 43px),
    radial-gradient(circle at 50% -12%, rgba(240, 124, 27, .1), transparent 50%),
    var(--manor);
  color: var(--ghost);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}

[v-cloak] { display: none; }
a { color: inherit; text-decoration: none; display: block; }
img { display: block; max-width: 100%; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

.wrap { max-width: 620px; margin: 0 auto; padding: 0 18px; }
.sec { margin-top: var(--sec-gap); min-width: 0; }

/* raven label — section header */
.raven {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.raven b {
  flex: none;
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--moon);
  background: var(--blood);
  padding: 5px 14px;
  border-radius: 3px;
}
.raven span {
  font-size: 11px;
  color: var(--txt-soft);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.raven::after { content: ''; flex: 1; border-top: 1.5px solid rgba(156, 146, 181, .35); }

/* ═══ MANOR header ════════════════════════════════════════════════ */
.manor {
  position: relative;
  z-index: 50;
  background: var(--manor-2);
  border-bottom: 3px solid var(--pumpkin);
}
.manor-in { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.manor-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--pumpkin);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  display: block;
}
.manor-name::before { content: '🦇 '; }
.manor-search {
  margin-left: auto;
  flex: none;
  width: 34px; height: 34px;
  border: 1.5px solid var(--slime);
  border-radius: 50%;
  color: var(--slime);
  display: grid;
  place-items: center;
}
.manor-search:active { background: var(--slime); color: var(--manor); }
.manor-fence {
  height: 14px;
  background:
    linear-gradient(90deg, var(--manor-2) 0 4px, transparent 4px),
    repeating-linear-gradient(90deg, var(--txt-soft) 0 3px, transparent 3px 14px) bottom / 100% 100% no-repeat,
    var(--manor-2);
  background:
    repeating-linear-gradient(90deg, rgba(156, 146, 181, .55) 0 3px, transparent 3px 13px) 0 0 / 13px 9px repeat-x,
    var(--manor-2);
  border-bottom: 2px solid rgba(156, 146, 181, .4);
}

/* crypt nav */
.crypt-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 0;
}
.crypt-row::-webkit-scrollbar { display: none; }
.crypt-btn {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--ghost);
  background: var(--panel);
  border: 1.5px solid rgba(156, 146, 181, .3);
  border-radius: 3px;
  padding: 6px 13px;
}
.crypt-btn.on { background: var(--pumpkin); color: var(--manor); border-color: var(--pumpkin); }

/* search */
.seance-search { display: flex; gap: 8px; margin-top: 14px; }
.seance-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--ghost);
  background: var(--panel);
  border: 1.5px solid rgba(156, 146, 181, .3);
  border-radius: 4px;
  padding: 10px 14px;
  outline: none;
}
.seance-input::placeholder { color: var(--txt-soft); }
.seance-go {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--manor);
  background: var(--slime);
  border-radius: 4px;
  padding: 0 18px;
}
.seance-go:active { filter: brightness(.88); }

/* loading */
.loading-full {
  position: fixed; inset: 0;
  background: var(--manor);
  display: grid; place-items: center;
  z-index: 90;
}
.loading-ghost {
  width: 52px; height: 58px;
  margin: 0 auto 12px;
  background: var(--ghost);
  border-radius: 26px 26px 4px 4px;
  position: relative;
  animation: float-ghost 1.6s ease-in-out infinite;
}
.loading-ghost::before {
  content: '';
  position: absolute;
  left: 12px; top: 20px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--manor);
  box-shadow: 19px 0 0 var(--manor);
}
@keyframes float-ghost { 50% { transform: translateY(-8px); } }
.loading-txt {
  display: block; text-align: center;
  font-style: italic;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--txt-soft);
}

/* ═══ 1) IRON GATE hero ═══════════════════════════════════════════ */
.gatehero {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 6px;
}
.gate-pillar {
  flex: none;
  width: 34px;
  min-height: 168px;
  align-self: stretch;
  background:
    repeating-linear-gradient(180deg, rgba(156, 146, 181, .5) 0 3px, transparent 3px 12px),
    linear-gradient(180deg, #3A2E52, #2A2140);
  border: 2px solid rgba(156, 146, 181, .5);
  border-radius: 4px 4px 0 0;
  position: relative;
}
.gate-pillar::before {
  content: '🕯️';
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
}
.gate-arch {
  position: relative;
  z-index: 1;
  width: 210px;
  flex: none;
  margin: 0 -2px;
  background: linear-gradient(180deg, #241B3A, var(--manor-2));
  border: 2.5px solid rgba(156, 146, 181, .6);
  border-bottom: none;
  border-radius: 105px 105px 0 0;
  padding: 16px 14px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}
.gate-arch > * { min-width: 0; max-width: 100%; }
.gate-img {
  width: 78px; height: 78px;
  margin: 2px auto 7px;
  border-radius: 50%;
  border: 3px solid var(--pumpkin);
  overflow: hidden;
  box-shadow: 0 0 16px rgba(240, 124, 27, .5);
  flex: none;
}
.gate-img img { width: 100%; height: 100%; object-fit: cover; }
.gate-name {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gate-meta {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--txt-soft);
  flex-wrap: wrap;
}
.gate-cat {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--manor);
  background: var(--pumpkin);
  border-radius: 3px;
  padding: 2px 8px;
}
.gate-stars { color: var(--moon); letter-spacing: .1em; }
.gate-stars i { font-style: normal; }
.gate-stars .off { opacity: .3; }
/* 拱形内容适配：窄屏时收窄拱宽，确保内容（图+名+标签）完整容纳在拱形内 */
.gatehero { min-height: 1px; }
.gatehero .gate-arch { overflow: visible; }
@media (max-width: 359px) {
  .gate-arch { width: 190px; border-radius: 95px 95px 0 0; }
  .gate-img { width: 70px; height: 70px; }
  .gate-name { font-size: 13.5px; }
}
.gate-floor {
  height: 10px;
  background: repeating-linear-gradient(90deg, rgba(156, 146, 181, .55) 0 4px, transparent 4px 13px);
  border-top: 2px solid rgba(156, 146, 181, .5);
  margin: 0 6px;
}

/* ═══ 2) GRAVESTONES ══════════════════════════════════════════════ */
.graves { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.grave {
  background: linear-gradient(180deg, #6E6880, #575070);
  border-radius: 40px 40px 4px 4px;
  padding: 16px 7px 10px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .35);
  min-width: 0;
  position: relative;
}
.grave::before {
  content: '†';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 12px;
  color: rgba(26, 20, 36, .55);
}
.grave:active { filter: brightness(1.15); }
.grave img {
  width: 82%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 8px auto 0;
  border: 2px solid var(--manor);
  filter: grayscale(.4);
}
.grave-nm {
  display: block;
  font-family: var(--serif);
  font-size: 11px;
  color: var(--manor);
  font-weight: 700;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grave-sub {
  display: block;
  font-size: 8.5px;
  letter-spacing: .1em;
  color: rgba(26, 20, 36, .6);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ 3) COBWEB CORNER ════════════════════════════════════════════ */
.cobwebs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.webcard {
  position: relative;
  background: var(--panel);
  border: 1.5px solid rgba(156, 146, 181, .3);
  border-radius: 6px;
  padding: 20px 12px 12px;
  overflow: hidden;
  min-width: 0;
}
.webcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 58px; height: 58px;
  background:
    radial-gradient(circle at 0 0, transparent 0 8px, rgba(237, 231, 246, .28) 8px 9.5px, transparent 9.5px 18px, rgba(237, 231, 246, .28) 18px 19.5px, transparent 19.5px 28px, rgba(237, 231, 246, .28) 28px 29.5px, transparent 29.5px);
}
.webcard::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 58px; height: 58px;
  background:
    linear-gradient(135deg, rgba(237, 231, 246, .28) 0 1px, transparent 1px),
    linear-gradient(67deg, rgba(237, 231, 246, .2) 0 1px, transparent 1px);
}
.webcard:active { border-color: var(--slime); }
.webcard img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  filter: saturate(.85);
}
.webcard-nm {
  display: block;
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 700;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ 4) POTION SHELF ═════════════════════════════════════════════ */
.potions { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; }
.potions::-webkit-scrollbar { display: none; }
.potion {
  flex: none;
  width: 82px;
  text-align: center;
}
.potion-flask {
  width: 66px; height: 78px;
  margin: 0 auto;
  background: rgba(237, 231, 246, .1);
  border: 2px solid rgba(237, 231, 246, .5);
  border-radius: 8px 8px 16px 16px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.potion-flask::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
}
.potion:active .potion-flask { border-color: var(--slime); }
.p-flame::before { background: linear-gradient(180deg, rgba(240, 124, 27, .85), rgba(240, 124, 27, .4)); }
.p-slime::before { background: linear-gradient(180deg, rgba(155, 197, 61, .85), rgba(155, 197, 61, .4)); }
.p-blood::before { background: linear-gradient(180deg, rgba(166, 58, 80, .9), rgba(166, 58, 80, .45)); }
.p-moon::before { background: linear-gradient(180deg, rgba(245, 233, 201, .8), rgba(245, 233, 201, .35)); }
.p-ghost::before { background: linear-gradient(180deg, rgba(237, 231, 246, .5), rgba(237, 231, 246, .2)); }
.potion-flask img {
  width: 60%; height: 60%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.potion-nm {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ 5) GHOST RAPS ═══════════════════════════════════════════════ */
.raps { background: var(--panel); border-radius: 8px; padding: 5px 14px; border: 1.5px solid rgba(156, 146, 181, .25); }
.rap-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1.5px dashed rgba(156, 146, 181, .35);
  min-width: 0;
}
.rap-row:last-child { border-bottom: none; }
.rap-row:active { opacity: .75; }
.rap-ghost { flex: none; font-size: 19px; }
.rap-body { min-width: 0; flex: 1; }
.rap-nm {
  display: block;
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rap-desc {
  display: block;
  font-size: 10.5px;
  color: var(--txt-soft);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rap-tag {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slime);
  border: 1px solid var(--slime);
  border-radius: 3px;
  padding: 2.5px 8px;
}

/* ═══ 6) FULL MOON feature ════════════════════════════════════════ */
.moonsec {
  position: relative;
  background:
    radial-gradient(circle at 50% 34%, rgba(245, 233, 201, .2) 0 66px, transparent 67px),
    var(--panel);
  border: 1.5px solid rgba(156, 146, 181, .3);
  border-radius: 12px;
  padding: 22px 16px 16px;
  text-align: center;
  overflow: hidden;
}
.moon-disc {
  width: 112px; height: 112px;
  margin: 8px auto 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFDF2, var(--moon));
  border: 3px solid rgba(245, 233, 201, .6);
  overflow: hidden;
  box-shadow: 0 0 30px rgba(245, 233, 201, .35);
}
.moon-disc img { width: 80%; height: 80%; object-fit: cover; border-radius: 50%; margin: 10%; }
.moon-kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--moon);
}
.moon-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  margin: 5px 0 7px;
  overflow-wrap: break-word;
}
.moon-desc {
  font-size: 12px;
  color: var(--txt-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══ 7) TREAT BAGS ═══════════════════════════════════════════════ */
.bags {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 2px 8px;
}
.bags::-webkit-scrollbar { display: none; }
.treat {
  flex: none;
  width: 88px;
  background: var(--pumpkin);
  border-radius: 8px 8px 14px 14px;
  padding: 13px 8px 10px;
  text-align: center;
  position: relative;
  color: var(--manor);
}
.treat::before {
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 14px;
  background: rgba(156, 146, 181, .5);
  border-radius: 3px;
}
.treat:active { transform: rotate(-2deg); }
.treat img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--manor);
}
.treat-nm {
  display: block;
  font-size: 10px;
  font-weight: 800;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ 8) HAUNTED PORTRAITS ════════════════════════════════════════ */
.portraits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.frame {
  background: linear-gradient(160deg, #6B4E2E, #46301B);
  border-radius: 4px;
  padding: 5px;
  min-width: 0;
}
.frame-inner {
  border: 1.5px solid rgba(245, 233, 201, .4);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.frame img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(.5) contrast(1.05);
}
.frame:active img { filter: none; }
.frame-nm {
  display: block;
  font-family: var(--serif);
  font-size: 9px;
  color: var(--moon);
  text-align: center;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ 9) MONSTER MASH ═════════════════════════════════════════════ */
.mash { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mash-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1.5px solid rgba(156, 146, 181, .3);
  border-radius: 6px;
  padding: 11px 13px;
  min-width: 0;
}
.mash-btn:nth-child(4n + 2) { border-color: rgba(240, 124, 27, .5); }
.mash-btn:nth-child(4n + 3) { border-color: rgba(155, 197, 61, .5); }
.mash-btn:active { background: #3A2C55; }
.mm-no { flex: none; font-family: var(--serif); font-size: 14px; color: var(--pumpkin); }
.mm-body { min-width: 0; flex: 1; }
.mm-nm {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-ct { display: block; font-size: 10px; color: var(--txt-soft); margin-top: 1px; }

/* ═══ 10) CRYPT LOG ═══════════════════════════════════════════════ */
.cryptlog { background: var(--panel); border-radius: 8px; padding: 5px 14px; border: 1.5px solid rgba(156, 146, 181, .25); }
.log-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1.5px dashed rgba(156, 146, 181, .35);
  min-width: 0;
}
.log-row:last-child { border-bottom: none; }
.log-row:active { opacity: .75; }
.log-no {
  flex: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--slime);
  width: 34px;
}
.log-row img {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 5px;
  border: 2px solid rgba(156, 146, 181, .4);
  filter: grayscale(.3);
}
.log-body { min-width: 0; flex: 1; }
.log-nm {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-desc {
  display: block;
  font-size: 10.5px;
  color: var(--txt-soft);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-tag {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pumpkin);
  border: 1px solid var(--pumpkin);
  border-radius: 3px;
  padding: 2.5px 8px;
}
.more-wrap { margin-top: 14px; text-align: center; }
.more-btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--manor);
  background: var(--pumpkin);
  border-radius: 4px;
  padding: 11px 26px;
}
.more-btn:active { filter: brightness(.88); }

/* ═══ filter view ═════════════════════════════════════════════════ */
.filter-hd { display: flex; align-items: center; gap: 10px; margin-top: 20px; min-width: 0; }
.filter-back {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--slime);
  border: 1.5px solid var(--slime);
  border-radius: 3px;
  padding: 6px 13px;
}
.filter-back:active { background: var(--slime); color: var(--manor); }
.filter-title {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-cnt {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--manor);
  background: var(--pumpkin);
  border-radius: 3px;
  padding: 3px 10px;
}
.empty-manor { text-align: center; padding: 48px 20px; }
.empty-manor p { font-size: 38px; margin-bottom: 8px; }
.empty-manor span { font-family: var(--serif); font-style: italic; color: var(--txt-soft); }

/* ═══ footer ══════════════════════════════════════════════════════ */
.manorfoot {
  margin-top: 44px;
  background: #120D1B;
  border-top: 3px solid var(--pumpkin);
  padding: 24px 0 40px;
  text-align: center;
}
.manorfoot-name { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--pumpkin); }
.manorfoot-links {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 12px;
  color: var(--txt-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.manorfoot-links a:active { color: var(--pumpkin); }
.manorfoot-fine { margin-top: 10px; font-size: 10px; letter-spacing: .1em; color: rgba(156, 146, 181, .5); }

/* ═══ not found ═══════════════════════════════════════════════════ */
.not-found { text-align: center; padding: 60px 20px; }
.not-found .emoji { font-size: 44px; margin-bottom: 10px; }
.not-found .txt { font-family: var(--serif); font-style: italic; color: var(--txt-soft); margin-bottom: 20px; }
.not-found button {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--manor);
  background: var(--pumpkin);
  border-radius: 4px;
  padding: 11px 24px;
}
.not-found button:active { filter: brightness(.88); }

/* ═══ back to top ═════════════════════════════════════════════════ */
.totop-btn {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 60;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--slime);
  color: var(--manor);
  font-size: 15px;
  display: grid;
  place-items: center;
}
.totop-btn:active { filter: brightness(.88); }