:root {
  --gold: #b88d4f;
  --gold-soft: #d9bd82;
  --gold-border: rgba(184, 141, 79, 0.78);
  --bg: #020202;
  --text: #f2e6cf;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
}

body { overflow-x: hidden; }
body.cover-page {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }

/*
  COVER LOCK v1.1
  Обложка должна быть стабилизирована по окну браузера:
  - весь макет всегда помещается внутри viewport;
  - изображение не обрезается;
  - кнопки привязаны к самой обложке и не вылезают за экран;
  - никаких горизонтальных/вертикальных прокруток на стартовой странице.
*/
.site-cover {
  --cover-ratio-w: 1672;
  --cover-ratio-h: 941;
  --cover-pad: clamp(0px, 1.2vmin, 14px);

  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--cover-pad);
  background: #020202;
  overflow: hidden;
}

/* Кулисы убраны полностью. Фон вокруг обложки чистый чёрный. */
.cover-stage {
  position: relative;
  z-index: 2;
  aspect-ratio: 1672 / 941;
  width: min(
    calc(100vw - (var(--cover-pad) * 2)),
    calc((100svh - (var(--cover-pad) * 2)) * 1672 / 941),
    1672px
  );
  max-width: calc(100vw - (var(--cover-pad) * 2));
  max-height: calc(100svh - (var(--cover-pad) * 2));
  overflow: hidden;
}

.cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Реальные кнопки. В самой картинке кнопки убраны, чтобы не было дубля. Человечество выжило. */
.cover-ui {
  position: absolute;
  top: 3.6%;
  right: 3.8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
  width: clamp(110px, 13vw, 236px);
  z-index: 5;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.4px solid var(--gold-border);
  background: linear-gradient(180deg, rgba(8,7,7,0.78), rgba(8,7,7,0.62));
  color: var(--gold-soft);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(184,141,79,.11), inset 0 0 14px rgba(184,141,79,.04);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.action-btn:hover,
.action-btn:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(16,13,10,0.88), rgba(10,8,7,0.80));
  box-shadow: 0 0 22px rgba(184,141,79,.18), inset 0 0 16px rgba(184,141,79,.07);
  outline: none;
}

.enter-btn {
  width: 100%;
  min-height: clamp(38px, 3.9vw, 66px);
  padding: 0.72em 1.15em;
  border-radius: clamp(10px, 1vw, 18px);
  font-size: clamp(15px, 1.65vw, 24px);
}

.sound-btn {
  width: clamp(82px, 8.7vw, 150px);
  min-height: clamp(26px, 2.5vw, 42px);
  padding: 0.45em 1em;
  border-radius: clamp(9px, .9vw, 16px);
  font-size: clamp(12px, 1.15vw, 18px);
  font-family: inherit;
}

.sound-btn.is-on {
  border-color: rgba(217, 189, 130, 0.95);
  box-shadow: 0 0 22px rgba(217,189,130,.22), inset 0 0 16px rgba(184,141,79,.08);
}

.sound-btn.is-on::before { content: "♪ "; }

.inner-body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(184,141,79,0.12), transparent 26%),
    #020202;
}

.placeholder-page {
  width: 100%;
  display: grid;
  place-items: center;
}

.placeholder-card {
  width: min(92vw, 780px);
  border: 1px solid rgba(184,141,79,0.45);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 44px);
  background: linear-gradient(180deg, rgba(10,9,9,0.92), rgba(8,7,7,0.82));
  box-shadow: 0 0 28px rgba(0,0,0,0.44), inset 0 0 26px rgba(184,141,79,0.05);
  text-align: center;
}

.placeholder-card h1 {
  margin: 0 0 16px;
  color: var(--gold-soft);
  font-size: clamp(34px, 4.6vw, 62px);
}

.placeholder-card p {
  margin: 0 0 26px;
  color: #dbc9a6;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.5;
}

.main-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.back-btn {
  min-width: 220px;
  min-height: 48px;
  padding: 0.7em 1.2em;
  border-radius: 16px;
  font-size: 18px;
}

@media (max-width: 900px) {
  .site-cover { --cover-pad: 0px; }
  .cover-ui {
    top: 3.2%;
    right: 3%;
    width: clamp(90px, 21vw, 170px);
  }
}

@media (max-width: 640px) {
  .cover-ui {
    top: 2.8%;
    right: 2.6%;
    gap: 7px;
    width: clamp(86px, 24vw, 138px);
  }

  .action-btn { border-width: 1px; }
}



/* ===== ART HUB v1 additions ===== */
:root {
  --panel: rgba(9, 8, 7, 0.78);
  --panel-strong: rgba(15, 12, 9, 0.92);
  --muted: rgba(242, 230, 207, 0.72);
  --line: rgba(184, 141, 79, 0.34);
}

html[data-theme="light"] {
  --bg: #f4ead8;
  --text: #1e1711;
  --gold: #7b5428;
  --gold-soft: #533919;
  --gold-border: rgba(90, 59, 27, 0.55);
  --panel: rgba(255, 250, 239, 0.82);
  --panel-strong: rgba(255, 252, 245, 0.96);
  --muted: rgba(30, 23, 17, 0.72);
  --line: rgba(90, 59, 27, 0.26);
}

html[data-theme="a11y"] {
  --bg: #000;
  --text: #fff;
  --gold: #ffd36a;
  --gold-soft: #ffe49a;
  --gold-border: rgba(255, 211, 106, 0.92);
  --panel: rgba(0, 0, 0, 0.95);
  --panel-strong: #000;
  --muted: #fff;
  --line: rgba(255, 211, 106, 0.76);
  font-size: 19px;
}

html[data-theme="a11y"] .asset-card,
html[data-theme="a11y"] .rules-panel,
html[data-theme="a11y"] .downloads-panel,
html[data-theme="a11y"] .hero-panel {
  border-width: 2px;
}

.inner-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 12%, rgba(184,141,79,.12), transparent 28rem),
    radial-gradient(circle at 84% 6%, rgba(184,141,79,.09), transparent 22rem),
    var(--bg);
  color: var(--text);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: .85rem clamp(1rem, 3vw, 2.2rem);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  color: var(--gold-soft);
  font-weight: 700;
  letter-spacing: .16em;
}

.top-nav {
  display: flex;
  justify-content: center;
  gap: clamp(.65rem, 2vw, 1.4rem);
  flex-wrap: wrap;
}

.top-nav a,
.doc-links a,
.download-link {
  color: var(--gold-soft);
  border-bottom: 1px solid transparent;
}

.top-nav a:hover,
.doc-links a:hover,
.download-link:hover {
  border-bottom-color: currentColor;
}

.header-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mini-btn {
  border: 1px solid var(--gold-border);
  color: var(--gold-soft);
  background: var(--panel);
  border-radius: 999px;
  padding: .45rem .7rem;
  cursor: pointer;
  font: inherit;
}

.hub-page {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) 0 4rem;
}

.hero-panel,
.rules-panel,
.downloads-panel,
.asset-card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 18px 52px rgba(0,0,0,.26);
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(260px, .96fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  border-radius: 28px;
  padding: clamp(1.1rem, 3vw, 2.2rem);
}

.eyebrow {
  margin: 0 0 .55rem;
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
}

.hero-panel h1,
.asset-section h2,
.rules-panel h2,
.downloads-panel h2 {
  margin: 0 0 .85rem;
  line-height: 1.08;
}

.hero-panel h1 {
  font-size: clamp(2rem, 5vw, 4.9rem);
}

.hero-text {
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}

.hero-cover img {
  width: 100%;
  display: block;
  border-radius: 20px;
  border: 1px solid var(--line);
}

.rules-panel,
.downloads-panel,
.asset-section {
  margin-top: clamp(1rem, 3vw, 2rem);
}

.rules-panel,
.downloads-panel {
  border-radius: 24px;
  padding: clamp(1rem, 3vw, 1.8rem);
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}

.rules-grid div {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1rem;
  background: color-mix(in srgb, var(--panel-strong) 74%, transparent);
}

.rules-grid strong,
.rules-grid span {
  display: block;
}

.rules-grid strong {
  color: var(--gold-soft);
  margin-bottom: .4rem;
}

.rules-grid span,
.downloads-panel p,
.asset-card p {
  color: var(--muted);
  line-height: 1.55;
}

.doc-links,
.downloads-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: 1rem;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

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

.asset-card {
  border-radius: 20px;
  padding: .85rem;
  overflow: hidden;
}

.asset-card h3 {
  margin: .85rem 0 .35rem;
  color: var(--gold-soft);
  font-size: 1rem;
}

.asset-card p {
  margin: 0;
  font-size: .93rem;
}

.asset-zoom {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent),
    rgba(0,0,0,.18);
  cursor: zoom-in;
  overflow: hidden;
}

.asset-zoom img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

.download-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  padding: .65rem 1rem;
  background: var(--panel-strong);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 4rem 1rem 1rem;
  background: rgba(0,0,0,.86);
}

.modal[hidden] {
  display: none;
}

.modal img {
  max-width: min(94vw, 1100px);
  max-height: 78vh;
  object-fit: contain;
  border: 1px solid var(--gold-border);
  background: #111;
}

.modal p {
  color: #fff;
  text-align: center;
}

.modal-close {
  position: fixed;
  right: 1rem;
  top: 1rem;
  border: 1px solid var(--gold-border);
  color: var(--gold-soft);
  background: #050505;
  border-radius: 999px;
  padding: .65rem 1rem;
  cursor: pointer;
}

@media (max-width: 920px) {
  .site-header,
  .hero-panel {
    grid-template-columns: 1fr;
  }

  .top-nav {
    justify-content: start;
  }

  .header-actions {
    justify-content: start;
  }

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

  .bat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .rules-grid,
  .asset-grid {
    grid-template-columns: 1fr;
  }

  .cover-ui {
    right: 3%;
    width: clamp(96px, 28vw, 140px);
  }
}


/* ===== v1.7 MAIN PAGE: poetry topics ===== */

.poetry-main-body {
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 10%, rgba(174, 132, 76, 0.12), transparent 32%),
    radial-gradient(circle at 15% 70%, rgba(80, 55, 32, 0.12), transparent 28%),
    radial-gradient(circle at 82% 74%, rgba(70, 45, 28, 0.10), transparent 30%),
    #020202;
  color: var(--text);
  overflow-x: hidden;
}

.poetry-main-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background:
    radial-gradient(circle at 18% 22%, rgba(150, 112, 66, 0.13) 0 1px, transparent 2px) 0 0 / 34px 34px,
    radial-gradient(circle at 72% 64%, rgba(95, 67, 39, 0.105) 0 1px, transparent 2px) 17px 17px / 38px 38px,
    repeating-linear-gradient(45deg, rgba(55, 38, 22, 0.06) 0 1px, transparent 1px 28px);
  z-index: 0;
}

.main-topbar {
  position: fixed;
  top: 18px;
  left: 22px;
  right: 22px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.main-topbar > * {
  pointer-events: auto;
}

.mini-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.5em 0.95em;
  border: 1px solid rgba(184,141,79,0.46);
  border-radius: 999px;
  background: rgba(0,0,0,0.46);
  color: rgba(230,208,170,0.9);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 18px rgba(0,0,0,0.44);
}

.main-sound {
  width: auto;
  min-width: 94px;
}

.poetry-main {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
  padding: clamp(78px, 10vh, 118px) 0 48px;
}

.main-hero {
  text-align: center;
  margin: 0 auto clamp(26px, 5vw, 54px);
  width: min(920px, 100%);
}

.eyebrow {
  margin: 0 0 12px;
  color: rgba(217,189,130,0.78);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(11px, 1.1vw, 14px);
}

.main-hero h1 {
  margin: 0;
  color: rgba(246, 224, 180, 0.96);
  font-size: clamp(42px, 7.2vw, 92px);
  font-weight: 500;
  line-height: 0.98;
  text-shadow: 0 0 22px rgba(0,0,0,0.82);
}

.hero-lead {
  margin: 22px auto 0;
  width: min(820px, 100%);
  color: rgba(238, 220, 186, 0.76);
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.5;
}

.moon-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  margin: 0 auto;
}

.moon-topic-card {
  position: relative;
  min-height: 312px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 14px 20px;
  border: 1px solid rgba(184,141,79,0.33);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.76), rgba(5,5,5,0.88)),
    radial-gradient(circle at 50% 20%, rgba(184,141,79,0.08), transparent 48%);
  box-shadow:
    0 0 28px rgba(0,0,0,0.62),
    inset 0 0 22px rgba(184,141,79,0.035);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.moon-topic-card:hover,
.moon-topic-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(217,189,130,0.62);
  box-shadow:
    0 0 34px rgba(0,0,0,0.72),
    0 0 22px rgba(184,141,79,0.14),
    inset 0 0 24px rgba(184,141,79,0.055);
  outline: none;
}

.moon-shell {
  width: min(190px, 84%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 16px rgba(0,0,0,0.82));
}

.moon-shell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.topic-text {
  display: block;
  text-align: center;
}

.topic-text strong {
  display: block;
  margin-bottom: 8px;
  color: rgba(244,224,184,0.96);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 500;
  line-height: 1.12;
}

.topic-text small {
  display: block;
  color: rgba(226,207,170,0.66);
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.35;
}

.main-rules {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  margin: clamp(30px, 5vw, 56px) auto 0;
}

.main-rules article,
.section-page,
.poem-card-full {
  border: 1px solid rgba(184,141,79,0.32);
  border-radius: 24px;
  background: rgba(8,7,6,0.72);
  box-shadow: 0 0 28px rgba(0,0,0,0.54), inset 0 0 22px rgba(184,141,79,0.035);
}

.main-rules article {
  padding: clamp(20px, 3vw, 30px);
}

.main-rules h2 {
  margin: 0 0 12px;
  color: rgba(240, 219, 178, 0.94);
  font-size: clamp(22px, 2.4vw, 31px);
  font-weight: 500;
}

.main-rules p {
  margin: 0 0 8px;
  color: rgba(231,211,173,0.72);
  font-size: 17px;
  line-height: 1.52;
}

.inline-icon {
  display: inline-flex;
  min-width: 28px;
  color: rgba(217,189,130,0.95);
}

.main-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0 0;
}

.main-footer a {
  padding: 0.65em 1em;
  border: 1px solid rgba(184,141,79,0.28);
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  color: rgba(226,207,170,0.72);
}

.poetry-section-body,
.poem-body {
  align-items: start;
  background:
    radial-gradient(circle at 50% 0%, rgba(184,141,79,0.11), transparent 32%),
    #020202;
}

.section-page,
.poem-page {
  width: min(940px, calc(100vw - 32px));
  margin: 0 auto;
}

.section-page {
  padding: clamp(24px, 4vw, 44px);
}

.section-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

.section-header h1,
.poem-card-full h1 {
  margin: 0;
  color: rgba(246,224,184,0.96);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 76px);
}

.section-header p,
.fragment-note {
  color: rgba(226,207,170,0.68);
  font-size: 18px;
  line-height: 1.5;
}

.poem-list {
  margin-top: 32px;
  border-top: 1px solid rgba(184,141,79,0.22);
}

.poem-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(184,141,79,0.18);
  color: rgba(238,220,186,0.9);
  font-size: 20px;
}

.poem-icons {
  color: rgba(217,189,130,0.95);
  white-space: nowrap;
}

.muted-row {
  color: rgba(226,207,170,0.42);
}

.poem-card-full {
  padding: clamp(24px, 4vw, 48px);
}

.poem-text {
  margin: 30px 0;
  color: rgba(242,230,207,0.88);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.72;
}

.fragment-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(184,141,79,0.22);
}

.fragment-btn {
  min-height: 44px;
  padding: 0.65em 1.1em;
  border: 1px solid rgba(184,141,79,0.48);
  border-radius: 999px;
  background: rgba(0,0,0,0.36);
  color: rgba(234,214,173,0.9);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}

@media (max-width: 980px) {
  .moon-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-rules {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .main-topbar {
    top: 10px;
    left: 10px;
    right: 10px;
  }

  .poetry-main {
    width: min(100vw - 20px, 1180px);
    padding-top: 82px;
  }

  .moon-topic-grid {
    grid-template-columns: 1fr;
  }

  .moon-topic-card {
    min-height: 250px;
  }

  .moon-shell {
    width: min(148px, 70%);
  }

  .section-nav {
    flex-direction: column;
  }
}



/* ===== HORUS V6: NO BAKED SCENE. Clean background + separate transparent layers only. ===== */

.rebuild-main-body {
  overflow: hidden;
  background: #000;
  cursor: none;
}

.rebuild-main-stage {
  position: relative;
  width: min(100vw, calc(100vh * 1672 / 941));
  height: min(100vh, calc(100vw * 941 / 1672));
  aspect-ratio: 1672 / 941;
  margin: auto;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.rebuild-main-stage .layer {
  position: absolute;
  display: block;
  user-select: none;
  pointer-events: none;
}

.main-bg-layer {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.moon-sections-layer {
  left: 1.44%;
  top: 1.06%;
  width: 19.62%;
  height: 31.88%;
  object-fit: contain;
  z-index: 20;
}

.bear-state {
  left: 52.03%;
  top: 26.04%;
  width: 32.30%;
  height: 32.41%;
  object-fit: contain;
  z-index: 35;
  opacity: 0;
  transition: opacity .16s ease;
}

.bear-state.is-active {
  opacity: 1;
}

.guitar-layer {
  left: 86.72%;
  top: 28.37%;
  width: 12.50%;
  height: 41.44%;
  object-fit: contain;
  z-index: 42;
  transform: rotate(-7deg);
  transform-origin: 50% 85%;
  opacity: .96;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.85));
}

.character-layer {
  left: 55.92%;
  top: 4.46%;
  width: 57.48%;
  height: 57.49%;
  object-fit: contain;
  z-index: 50;
}

.fire-layer {
  left: 62.56%;
  top: 30.82%;
  width: 22.01%;
  height: 39.11%;
  object-fit: contain;
  z-index: 70;
  filter: drop-shadow(0 0 34px rgba(255,122,34,.78));
}

.sections-moon-button {
  position: absolute;
  left: 1.44%;
  top: 1.06%;
  width: 19.62%;
  height: 31.88%;
  z-index: 95;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: none;
}

.sections-moon-button::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  opacity: .18;
  box-shadow: 0 0 40px rgba(217,189,130,.82);
  transition: opacity .2s ease, transform .2s ease;
}

.sections-moon-button:hover::after,
.sections-moon-button.is-open::after {
  opacity: .95;
  transform: scale(1.03);
}

.sections-moon-menu {
  position: absolute;
  left: 3.0%;
  top: 34.0%;
  z-index: 110;
  display: grid;
  grid-template-columns: repeat(2, minmax(105px, 130px));
  gap: 13px 16px;
  padding: 16px;
  border: 1px solid rgba(217,189,130,.38);
  border-radius: 22px;
  background: rgba(3,3,3,.78);
  box-shadow: 0 0 35px rgba(0,0,0,.82);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.sections-moon-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.section-moon-link {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  color: var(--gold-soft);
  text-align: center;
  font-size: clamp(12px, .86vw, 15px);
  line-height: 1.12;
}

.section-moon-link img {
  width: clamp(76px, 6.3vw, 105px);
  height: clamp(76px, 6.3vw, 105px);
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(217,189,130,.26));
  transition: transform .2s ease, filter .2s ease;
}

.section-moon-link:hover img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 20px rgba(217,189,130,.72));
}

.closed-entrance-link {
  position: absolute;
  left: 75.6%;
  top: 8.0%;
  width: 20.5%;
  min-height: 6.4%;
  z-index: 121;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .35em .8em;
  border: 1px solid rgba(217,189,130,.20);
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  color: rgba(237, 205, 145, 0.94);
  font-size: clamp(13px, 0.98vw, 18px);
  letter-spacing: .03em;
  text-shadow: 0 0 12px rgba(217,189,130,.40), 0 1px 3px #000;
  box-shadow: 0 0 14px rgba(0,0,0,.25);
  text-align: center;
}

.closed-entrance-link:hover,
.closed-entrance-link:focus-visible {
  border-color: rgba(217,189,130,.55);
  background: rgba(0,0,0,.18);
  box-shadow: 0 0 26px rgba(217,189,130,.24);
  outline: none;
}

.closed-entrance-hitbox {
  position: absolute;
  left: 77.2%;
  top: 12.2%;
  width: 15.8%;
  height: 29.5%;
  z-index: 120;
  display: block;
  cursor: none;
  background: rgba(0,0,0,0.001);
  border-radius: 48% 48% 44% 44% / 24% 24% 66% 66%;
}

.closed-entrance-hitbox:hover,
.closed-entrance-hitbox:focus-visible {
  outline: 2px solid rgba(217,189,130,.18);
  outline-offset: 0;
  background: rgba(217,189,130,.03);
}

.bear-reaction-zone {
  position: absolute;
  left: 52.03%;
  top: 26.04%;
  width: 32.30%;
  height: 32.41%;
  z-index: 100;
  border-radius: 45%;
  background: transparent;
  pointer-events: none;
}

.rebuild-topbar {
  z-index: 130;
  pointer-events: auto;
}

.bat-cursor-live {
  position: fixed;
  left: 0;
  top: 0;
  width: min(66px, 5vw);
  height: auto;
  z-index: 9999;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  opacity: .96;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.85));
}

.rebuild-page {
  cursor: auto;
  background:
    radial-gradient(circle at 50% 0, rgba(184,141,79,0.12), transparent 32%),
    #020202;
}

.rebuild-card { text-align: left; }
.rebuild-card .back-btn { margin-bottom: 20px; }
.rebuild-list { display: grid; gap: 12px; margin-top: 22px; }
.rebuild-list-item, .rebuild-list span {
  display: block; padding: 14px 16px; border: 1px solid rgba(184,141,79,.32);
  border-radius: 16px; background: rgba(255,255,255,.035); color: var(--gold-soft);
}
.poem-icons { display: flex; gap: 12px; margin: 22px 0; }
.poem-icons a {
  width: 46px; height: 46px; border: 1px solid rgba(184,141,79,.48);
  border-radius: 50%; display: grid; place-items: center; color: var(--gold-soft);
  font-size: 24px; background: rgba(0,0,0,.28);
}
.audio-placeholder, .video-placeholder {
  margin-top: 24px; padding: 22px; border: 1px solid rgba(184,141,79,.28);
  border-radius: 18px; color: var(--gold-soft); background: rgba(0,0,0,.28);
}
.closed-door-css {
  position: relative; min-height: 320px; margin: 24px 0; border: 1px solid rgba(184,141,79,.28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 28% 45%, rgba(255,138,45,.18), transparent 15%),
    radial-gradient(circle at 72% 45%, rgba(255,138,45,.18), transparent 15%),
    linear-gradient(180deg, rgba(20,14,9,.75), rgba(0,0,0,.82));
  overflow: hidden;
}
.closed-door-css::before {
  content: "Вход в закрытый раздел";
  position: absolute; left: 50%; top: 28px; transform: translateX(-50%);
  width: min(80%, 620px); padding: 10px 18px; border: 1px solid rgba(217,189,130,.38);
  border-radius: 14px; text-align: center; color: var(--gold-soft);
  font-size: clamp(22px, 3vw, 38px); text-transform: uppercase; background: rgba(0,0,0,.48);
}
.door-lock {
  position: absolute; left: 50%; bottom: 0; width: 180px; height: 220px;
  transform: translateX(-50%); display: grid; place-items: center;
  border: 2px solid rgba(184,141,79,.42); border-bottom: 0;
  border-radius: 95px 95px 0 0;
  background: linear-gradient(90deg, rgba(45,29,16,.94), rgba(14,9,6,.98), rgba(47,30,15,.94));
  font-size: 42px;
}
.torch { position: absolute; top: 154px; width: 28px; height: 105px; border-radius: 8px; background: linear-gradient(90deg, #2a1508, #7b4216, #2a1508); }
.torch-left { left: 23%; }
.torch-right { right: 23%; }
.torch::before {
  content: ""; position: absolute; left: 50%; top: -48px; width: 72px; height: 84px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,221,112,.95), rgba(255,120,32,.68) 32%, rgba(255,92,18,.18) 58%, transparent 72%);
  animation: torchPulse 1.7s ease-in-out infinite;
}
@keyframes torchPulse { 0%, 100% { transform: translateX(-50%) scale(.96); opacity:.82; } 50% { transform: translateX(-50%) scale(1.07); opacity:1; } }
.login-box { display:grid; gap:12px; margin-top:22px; }
.login-box label { display:grid; gap:6px; color:var(--gold-soft); }
.login-box input {
  width:100%; padding:12px 14px; border:1px solid rgba(184,141,79,.36); border-radius:12px;
  background:rgba(0,0,0,.38); color:var(--text); font:inherit;
}
@media (max-width: 800px) {
  .sections-moon-menu { grid-template-columns: repeat(2, 92px); left: 2.2%; top: 32%; gap: 8px; padding: 11px; }
  .closed-entrance-link { left: 33%; top: 6.5%; }
}


/* ===== V7 ONLY requested fixes: cave inscription/click area, moon position, guitar position ===== */
/* Не трогать остальные слои. Эти правила идут последними и переопределяют V6. */

.moon-sections-layer {
  left: 4.75% !important;
  top: 3.15% !important;
  width: 16.15% !important;
  height: 28.25% !important;
  z-index: 20 !important;
}

.sections-moon-button {
  left: 4.75% !important;
  top: 3.15% !important;
  width: 16.15% !important;
  height: 28.25% !important;
  z-index: 95 !important;
}

/* Гитара смещена к правой стене/пещере, за персонажем. */
.guitar-layer {
  left: 90.25% !important;
  top: 23.8% !important;
  width: 6.6% !important;
  height: 39.6% !important;
  z-index: 42 !important;
  transform: rotate(1.5deg) !important;
  transform-origin: 50% 90% !important;
  opacity: .97 !important;
}

/* Надпись сделана над/вокруг входа в пещеру SVG-дугой. Сама надпись кликабельна. */
.closed-entrance-link {
  position: absolute !important;
  left: 73.5% !important;
  top: 4.35% !important;
  width: 24.0% !important;
  height: 13.6% !important;
  z-index: 124 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(237, 205, 145, 0.96) !important;
  cursor: none !important;
}

.closed-entrance-link svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(217,189,130,.45)) drop-shadow(0 2px 3px #000);
}

.closed-entrance-link text {
  fill: rgba(237, 205, 145, 0.96);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 37px;
  letter-spacing: 1.2px;
}

.closed-entrance-link:hover text,
.closed-entrance-link:focus-visible text {
  fill: rgba(255, 223, 160, 1);
}

.closed-entrance-link:focus-visible {
  outline: 1px solid rgba(217,189,130,.38);
  outline-offset: 4px;
}

/* Чёрный вход в пещеру отдельно кликабелен, без видимой кнопки. */
.closed-entrance-hitbox {
  position: absolute !important;
  left: 77.45% !important;
  top: 13.9% !important;
  width: 15.0% !important;
  height: 30.0% !important;
  z-index: 123 !important;
  display: block !important;
  background: rgba(0,0,0,0.001) !important;
  border-radius: 48% 48% 44% 44% / 24% 24% 66% 66% !important;
  cursor: none !important;
}

.closed-entrance-hitbox:hover,
.closed-entrance-hitbox:focus-visible {
  outline: 2px solid rgba(217,189,130,.16);
  outline-offset: 0;
  background: rgba(217,189,130,.025) !important;
}

@media (max-width: 800px) {
  .moon-sections-layer,
  .sections-moon-button {
    left: 4.2% !important;
    top: 2.8% !important;
    width: 18.5% !important;
    height: 30.8% !important;
  }

  .closed-entrance-link {
    left: 70.8% !important;
    top: 4.0% !important;
    width: 27.0% !important;
    height: 13.5% !important;
  }

  .closed-entrance-link text {
    font-size: 34px;
  }

  .closed-entrance-hitbox {
    left: 76.6% !important;
    top: 13.5% !important;
    width: 16.0% !important;
    height: 30.5% !important;
  }
}

/* ===== V8 small fixes only: darker guitar, stronger cave arc, disable cave-door click area ===== */
.guitar-layer {
  opacity: 0.72 !important;
  filter: brightness(0.48) contrast(1.02) saturate(0.72) !important;
}

.closed-entrance-link {
  top: 3.9% !important;
  height: 14.9% !important;
}

.closed-entrance-link svg {
  filter: drop-shadow(0 0 7px rgba(217,189,130,.40)) drop-shadow(0 2px 3px #000) !important;
}

.closed-entrance-link text {
  font-size: 38px !important;
  letter-spacing: 1.0px !important;
}

.closed-entrance-hitbox {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: transparent !important;
  outline: none !important;
}
.closed-entrance-hitbox:hover,
.closed-entrance-hitbox:focus-visible {
  display: none !important;
  pointer-events: none !important;
  background: transparent !important;
  outline: none !important;
}



/* Preview tweak: rollback cave sign near V8, slightly steeper arc; guitar slightly brighter; moon made more moon-like */
.guitar-layer {
  opacity: 0.78 !important;
  filter: brightness(0.56) contrast(1.02) saturate(0.74) !important;
}
.closed-entrance-link svg {
  filter: drop-shadow(0 0 7px rgba(217,189,130,.42)) drop-shadow(0 2px 3px #000) !important;
}
.closed-entrance-link text {
  font-size: 38px !important;
  letter-spacing: 1.0px !important;
}


/* ===== V11 tweaks: stronger symmetric cave inscription arc; slightly brighter guitar ===== */

.guitar-layer {
  opacity: 0.86 !important;
  filter: brightness(0.70) contrast(1.04) saturate(0.80) !important;
}
.closed-entrance-link {
  top: 2.55% !important;
  left: 73.15% !important;
  width: 24.7% !important;
  height: 18.2% !important;
}
.closed-entrance-link svg {
  filter: drop-shadow(0 0 7px rgba(217,189,130,.44)) drop-shadow(0 2px 3px #000) !important;
}
.closed-entrance-link text {
  font-size: 38px !important;
  letter-spacing: 0.8px !important;
}
@media (max-width: 800px) {
  .closed-entrance-link {
    top: 2.3% !important;
    left: 70.8% !important;
    width: 27.8% !important;
    height: 16.8% !important;
  }
  .closed-entrance-link text {
    font-size: 34px !important;
  }
  .guitar-layer {
    opacity: 0.85 !important;
    filter: brightness(0.72) contrast(1.04) saturate(0.82) !important;
  }
}


/* ===== V12 tweaks: lower cave inscription by ~2 letter-heights, slightly stronger arc ===== */

.closed-entrance-link {
  top: 4.85% !important;
  left: 73.15% !important;
  width: 24.7% !important;
  height: 18.2% !important;
}
.closed-entrance-link text {
  font-size: 38px !important;
  letter-spacing: 0.8px !important;
}
@media (max-width: 800px) {
  .closed-entrance-link {
    top: 4.45% !important;
    left: 70.8% !important;
    width: 27.8% !important;
    height: 16.8% !important;
  }
  .closed-entrance-link text {
    font-size: 34px !important;
  }
}


/* ===== V13 tweaks: lower cave inscription by roughly a head-height, stronger curve ===== */

.closed-entrance-link {
  top: 9.25% !important;
  left: 73.05% !important;
  width: 24.9% !important;
  height: 20.0% !important;
}
.closed-entrance-link text {
  font-size: 38px !important;
  letter-spacing: 0.8px !important;
}
@media (max-width: 800px) {
  .closed-entrance-link {
    top: 8.7% !important;
    left: 70.8% !important;
    width: 28.2% !important;
    height: 18.6% !important;
  }
  .closed-entrance-link text {
    font-size: 34px !important;
  }
}


/* ===== PREVIEW: vertical section moons, three swings, eclipse corona ===== */
/* Only the main-page moon menu is changed below. All approved V13 layers stay fixed. */

.sections-moon-button,
.section-moon-link {
  cursor: none !important;
}

/* Eclipse-like corona around the approved main "Разделы" moon. */
.sections-moon-button {
  isolation: isolate;
  outline: none;
}

.sections-moon-button::before,
.sections-moon-button::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .24s ease, transform .34s ease;
}

.sections-moon-button::before {
  inset: 8.5%;
  z-index: -1;
  box-shadow:
    0 0 7px 2px rgba(255, 241, 197, .96),
    0 0 18px 7px rgba(232, 202, 139, .74),
    0 0 38px 14px rgba(201, 165, 101, .42),
    0 0 66px 24px rgba(217, 189, 130, .17);
}

.sections-moon-button::after {
  inset: -1.5%;
  z-index: -2;
  background: repeating-conic-gradient(
    from 2deg,
    rgba(255, 238, 191, .82) 0deg .55deg,
    transparent .75deg 4.7deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 51%, #000 60%, transparent 72%);
  mask: radial-gradient(circle, transparent 0 51%, #000 60%, transparent 72%);
  filter: blur(.65px) drop-shadow(0 0 9px rgba(232, 202, 139, .72));
}

.sections-moon-button:hover::before,
.sections-moon-button:hover::after,
.sections-moon-button:focus-visible::before,
.sections-moon-button:focus-visible::after,
.sections-moon-button.is-open::before,
.sections-moon-button.is-open::after {
  opacity: 1;
}

.sections-moon-button:hover::after,
.sections-moon-button:focus-visible::after,
.sections-moon-button.is-open::after {
  transform: scale(1.08);
}

/* Four moons hang in one vertical line directly below the main moon. */
.sections-moon-menu {
  left: 6.20% !important;
  top: 27.15% !important;
  width: 13.25% !important;
  height: 72.2% !important;
  z-index: 110 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: hidden;
  transform: none !important;
  pointer-events: none;
  transition: visibility 0s linear 1.6s;
}

.sections-moon-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.section-moon-link {
  --moon-row: 0;
  position: absolute;
  left: 0;
  top: calc(var(--moon-row) * 22.3%);
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  color: rgba(244, 215, 158, .98);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% -8%;
  isolation: isolate;
  will-change: transform, opacity;
}

.section-moon-link:nth-child(1) { --moon-row: 0; --moon-delay: 0s; }
.section-moon-link:nth-child(2) { --moon-row: 1; --moon-delay: .10s; }
.section-moon-link:nth-child(3) { --moon-row: 2; --moon-delay: .20s; }
.section-moon-link:nth-child(4) { --moon-row: 3; --moon-delay: .30s; }

.sections-moon-menu.is-open .section-moon-link {
  pointer-events: auto;
  animation: sectionMoonDropAndSwing 1.28s cubic-bezier(.22, .72, .25, 1) var(--moon-delay) both;
}

.section-moon-link::before,
.section-moon-link::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .22s ease, transform .3s ease;
}

.section-moon-link::before {
  inset: 7.5%;
  z-index: 0;
  box-shadow:
    0 0 6px 2px rgba(255, 242, 201, .95),
    0 0 15px 6px rgba(232, 202, 139, .72),
    0 0 31px 12px rgba(201, 165, 101, .40),
    0 0 52px 19px rgba(217, 189, 130, .16);
}

.section-moon-link::after {
  inset: -1%;
  z-index: 0;
  background: repeating-conic-gradient(
    from -1deg,
    rgba(255, 239, 195, .80) 0deg .65deg,
    transparent .85deg 5.1deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 49%, #000 59%, transparent 73%);
  mask: radial-gradient(circle, transparent 0 49%, #000 59%, transparent 73%);
  filter: blur(.55px) drop-shadow(0 0 8px rgba(232, 202, 139, .70));
}

.section-moon-link:hover::before,
.section-moon-link:hover::after,
.section-moon-link:focus-visible::before,
.section-moon-link:focus-visible::after {
  opacity: 1;
}

.section-moon-link:hover::after,
.section-moon-link:focus-visible::after {
  transform: scale(1.08);
}

.section-moon-link:focus-visible {
  outline: none;
}

.section-moon-link img {
  position: absolute;
  inset: -9%;
  z-index: 1;
  width: 118% !important;
  height: 118% !important;
  object-fit: contain;
  clip-path: circle(36.5% at 50% 50%);
  filter: drop-shadow(0 0 11px rgba(217, 189, 130, .28)) !important;
  transform: none !important;
  transition: filter .22s ease !important;
}

.section-moon-link:hover img,
.section-moon-link:focus-visible img {
  transform: none !important;
  filter:
    drop-shadow(0 0 5px rgba(255, 241, 198, .94))
    drop-shadow(0 0 17px rgba(217, 189, 130, .78)) !important;
}

.section-moon-link span {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: block;
  font-size: clamp(12px, 1.02vw, 17px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .015em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.98),
    0 0 5px rgba(0,0,0,.95),
    0 0 10px rgba(64, 42, 20, .95);
}

/* Three complete right-to-left swings, then a vertical stop. */
@keyframes sectionMoonDropAndSwing {
  0%   { opacity: 0; transform: translateY(-58%) rotate(0deg); }
  15%  { opacity: 1; transform: translateY(0) rotate(12deg); }
  27%  { opacity: 1; transform: translateY(0) rotate(-11deg); }
  39%  { opacity: 1; transform: translateY(0) rotate(8deg); }
  51%  { opacity: 1; transform: translateY(0) rotate(-7deg); }
  63%  { opacity: 1; transform: translateY(0) rotate(4deg); }
  75%  { opacity: 1; transform: translateY(0) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@media (max-width: 800px) {
  .sections-moon-menu {
    left: 6.5% !important;
    top: 27.4% !important;
    width: 14.0% !important;
    height: 71.5% !important;
  }

  .section-moon-link span {
    font-size: clamp(9px, 1.28vw, 13px);
  }
}


/* ===== PREVIEW CORRECTION: matching moons + centered black corona ===== */

/* The approved main moon's visible alpha bounds are centered at 50% / 46.75%. */
.sections-moon-button::before,
.sections-moon-button::after {
  inset: auto;
  left: 50%;
  top: 46.75%;
  width: 76.9%;
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: transparent;
  border-radius: 50%;
}

.sections-moon-button::before {
  box-shadow:
    0 0 5px 2px rgba(0, 0, 0, .98),
    0 0 16px 7px rgba(0, 0, 0, .90),
    0 0 34px 14px rgba(0, 0, 0, .72),
    0 0 58px 23px rgba(0, 0, 0, .48);
  filter: none;
}

.sections-moon-button::after {
  background: repeating-conic-gradient(
    from 1deg,
    rgba(0, 0, 0, .98) 0deg .7deg,
    transparent .95deg 4.8deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 49%, #000 58%, transparent 75%);
  mask: radial-gradient(circle, transparent 0 49%, #000 58%, transparent 75%);
  filter: blur(.55px) drop-shadow(0 0 7px rgba(0, 0, 0, .96));
}

.sections-moon-button:hover::before,
.sections-moon-button:focus-visible::before,
.sections-moon-button.is-open::before {
  transform: translate(-50%, -50%);
}

.sections-moon-button:hover::after,
.sections-moon-button:focus-visible::after,
.sections-moon-button.is-open::after {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Every dropdown moon repeats the main moon's muted disk, gold rim and type style. */
.section-moon-link::before,
.section-moon-link::after {
  inset: auto;
  left: 50%;
  top: 50%;
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
}

.section-moon-link::before {
  width: 86%;
  z-index: 1;
  opacity: 1;
  border-radius: 0;
  background: rgba(232, 186, 112, .98);
  box-shadow: none;
  clip-path: polygon(7% 0, 93% 0, 100% 7%, 100% 93%, 93% 100%, 7% 100%, 0 93%, 0 7%);
  transition: none;
}

.section-moon-link::after {
  width: 100%;
  z-index: 0;
  opacity: 0;
  border-radius: 50%;
  clip-path: none;
  background: repeating-conic-gradient(
    from -1deg,
    rgba(0, 0, 0, .98) 0deg .75deg,
    transparent 1deg 5deg
  );
  box-shadow:
    0 0 5px 2px rgba(0, 0, 0, .98),
    0 0 15px 7px rgba(0, 0, 0, .88),
    0 0 31px 13px rgba(0, 0, 0, .68);
  -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 51%, transparent 73%);
  mask: radial-gradient(circle, transparent 0 43%, #000 51%, transparent 73%);
  filter: blur(.5px) drop-shadow(0 0 7px rgba(0, 0, 0, .95));
}

.section-moon-link:hover::before,
.section-moon-link:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.section-moon-link:hover::after,
.section-moon-link:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

.section-moon-link img {
  inset: -4%;
  z-index: 2;
  width: 108% !important;
  height: 108% !important;
  clip-path: circle(36.5% at 50% 50%);
  filter: sepia(.18) brightness(.78) contrast(.94) saturate(.68) !important;
}

.section-moon-link:hover img,
.section-moon-link:focus-visible img {
  filter: sepia(.18) brightness(.78) contrast(.94) saturate(.68) !important;
}

.section-moon-link span {
  left: 12%;
  right: 12%;
  top: 50%;
  z-index: 3;
  color: rgba(239, 198, 127, .98);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1.10vw, 19px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
  text-shadow:
    0 1px 2px rgba(0,0,0,1),
    0 0 5px rgba(0,0,0,.98),
    0 0 9px rgba(0,0,0,.92);
}

@media (max-width: 800px) {
  .section-moon-link span {
    font-size: clamp(10px, 1.35vw, 14px);
  }
}


/* ===== PREVIEW CORRECTION 2: no yellow squares, smaller non-overlapping moons ===== */

.sections-moon-menu {
  left: 7.58% !important;
  width: 10.50% !important;
}

.section-moon-link {
  top: calc(var(--moon-row) * 23.2%);
}

/* Replace the polygonal gold plate with a thin circular edge only. */
.section-moon-link::before {
  width: 79%;
  background: transparent;
  border: 2px solid rgba(232, 186, 112, .82);
  border-radius: 50%;
  clip-path: none;
  box-shadow: none;
}

.section-moon-link::after {
  width: 82%;
}

.section-moon-link span {
  left: 10%;
  right: 10%;
  font-size: clamp(11px, .86vw, 15px);
}

@media (max-width: 800px) {
  .sections-moon-menu {
    left: 8.05% !important;
    width: 10.80% !important;
  }

  .section-moon-link {
    top: calc(var(--moon-row) * 23.2%);
  }

  .section-moon-link span {
    font-size: clamp(9px, 1.08vw, 12px);
  }
}


/* ===== PREVIEW CORRECTION 3: permanent moonlight + black hover flares ===== */

/* Soft moonlight is always present around the main moon. */
.moon-sections-layer {
  filter:
    drop-shadow(0 0 5px rgba(244, 247, 255, .92))
    drop-shadow(0 0 13px rgba(222, 230, 245, .62))
    drop-shadow(0 0 27px rgba(194, 207, 229, .34)) !important;
}

/* The same moonlight is always present around every dropdown moon. */
.section-moon-link img,
.section-moon-link:hover img,
.section-moon-link:focus-visible img {
  filter:
    sepia(.18)
    brightness(.78)
    contrast(.94)
    saturate(.68)
    drop-shadow(0 0 4px rgba(244, 247, 255, .94))
    drop-shadow(0 0 11px rgba(222, 230, 245, .66))
    drop-shadow(0 0 21px rgba(194, 207, 229, .36)) !important;
}

/* The black corona appears only on hover/focus and flickers in uneven flares. */
.sections-moon-button:hover::before,
.sections-moon-button:focus-visible::before,
.sections-moon-button.is-open:hover::before {
  animation: mainMoonBlackHaloFlare 1.18s ease-in-out infinite;
}

.sections-moon-button:hover::after,
.sections-moon-button:focus-visible::after,
.sections-moon-button.is-open:hover::after {
  animation: mainMoonBlackRaysFlare 1.18s ease-in-out infinite;
}

.sections-moon-button.is-open:not(:hover):not(:focus-visible)::before,
.sections-moon-button.is-open:not(:hover):not(:focus-visible)::after {
  opacity: 0;
  animation: none;
}

.section-moon-link:hover::after,
.section-moon-link:focus-visible::after {
  animation: sectionMoonBlackRaysFlare 1.12s ease-in-out infinite;
}

@keyframes mainMoonBlackHaloFlare {
  0%   { opacity: .34; transform: translate(-50%, -50%) scale(.99); }
  18%  { opacity: .92; transform: translate(-50%, -50%) scale(1.035); }
  37%  { opacity: .48; transform: translate(-50%, -50%) scale(1.01); }
  61%  { opacity: 1; transform: translate(-50%, -50%) scale(1.065); }
  79%  { opacity: .58; transform: translate(-50%, -50%) scale(1.025); }
  100% { opacity: .38; transform: translate(-50%, -50%) scale(1); }
}

@keyframes mainMoonBlackRaysFlare {
  0%   { opacity: .28; transform: translate(-50%, -50%) scale(1); }
  16%  { opacity: .96; transform: translate(-50%, -50%) scale(1.10); }
  34%  { opacity: .42; transform: translate(-50%, -50%) scale(1.035); }
  57%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  76%  { opacity: .52; transform: translate(-50%, -50%) scale(1.055); }
  100% { opacity: .30; transform: translate(-50%, -50%) scale(1.01); }
}

@keyframes sectionMoonBlackRaysFlare {
  0%   { opacity: .30; transform: translate(-50%, -50%) scale(.99); }
  17%  { opacity: .95; transform: translate(-50%, -50%) scale(1.065); }
  36%  { opacity: .44; transform: translate(-50%, -50%) scale(1.015); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  78%  { opacity: .54; transform: translate(-50%, -50%) scale(1.035); }
  100% { opacity: .32; transform: translate(-50%, -50%) scale(1); }
}


/* ===== PREVIEW CORRECTION 4: visible dropdown moonlight and foreground black flares ===== */

/* A clearly visible, soft cool moonlight behind each dropdown moon. */
.section-moon-link::before {
  width: 79%;
  z-index: 1;
  opacity: 1;
  background: transparent;
  border: 1px solid rgba(242, 246, 255, .88);
  border-radius: 50%;
  clip-path: none;
  box-shadow:
    0 0 5px 2px rgba(250, 252, 255, .96),
    0 0 13px 6px rgba(226, 235, 250, .76),
    0 0 25px 11px rgba(199, 214, 238, .48),
    0 0 39px 17px rgba(176, 196, 226, .25);
}

.section-moon-link img,
.section-moon-link:hover img,
.section-moon-link:focus-visible img {
  z-index: 2;
  filter:
    grayscale(.24)
    brightness(.92)
    contrast(.96)
    saturate(.54)
    drop-shadow(0 0 4px rgba(250, 252, 255, .98))
    drop-shadow(0 0 10px rgba(226, 235, 250, .76))
    drop-shadow(0 0 19px rgba(199, 214, 238, .46)) !important;
}

/* Black rays sit above the light, so their pulses remain visible on a dark scene. */
.section-moon-link::after {
  width: 82%;
  z-index: 4;
  opacity: 0;
  background: repeating-conic-gradient(
    from -2deg,
    rgba(0, 0, 0, 1) 0deg 1.05deg,
    transparent 1.35deg 4.7deg
  );
  box-shadow: none;
  -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 56%, transparent 78%);
  mask: radial-gradient(circle, transparent 0 48%, #000 56%, transparent 78%);
  filter:
    blur(.35px)
    drop-shadow(0 0 2px rgba(0, 0, 0, 1))
    drop-shadow(0 0 6px rgba(0, 0, 0, .98));
  will-change: opacity, transform;
}

.section-moon-link:hover::after,
.section-moon-link:focus-visible::after {
  opacity: 1;
  animation: sectionMoonVisibleBlackFlares .88s ease-in-out infinite;
}

@keyframes sectionMoonVisibleBlackFlares {
  0%   { opacity: .18; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.075) rotate(1.8deg); }
  31%  { opacity: .36; transform: translate(-50%, -50%) scale(1.018) rotate(-1deg); }
  49%  { opacity: .94; transform: translate(-50%, -50%) scale(1.06) rotate(1.1deg); }
  66%  { opacity: .28; transform: translate(-50%, -50%) scale(1.01) rotate(-1.5deg); }
  82%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(.7deg); }
  100% { opacity: .20; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

.section-moon-link span {
  z-index: 5;
}


/* ===== V16: compact living eclipses + smooth approved bear states ===== */

/* The previous ray/conic pseudo-elements are fully disabled. */
.sections-moon-button::before,
.sections-moon-button::after,
.section-moon-link::after {
  display: none !important;
  animation: none !important;
}

.sections-moon-label {
  position: absolute;
  left: 50%;
  top: 46.75%;
  z-index: 9;
  width: 68%;
  transform: translate(-50%, -50%);
  color: rgba(235,196,127,.98);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 2.4vw, 40px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.96);
  pointer-events: none;
}

.main-eclipse-disk,
.main-flare {
  position: absolute;
  left: 50%;
  top: 46.75%;
  display: block;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.main-eclipse-disk {
  width: 76.9%;
  z-index: 6;
  background: rgba(0,0,0,.83);
  border: 1px solid rgba(185,190,200,.58);
  box-shadow: inset 0 0 12px rgba(38,34,29,.55), 0 0 2px rgba(190,195,205,.72);
  transition: opacity .48s ease;
}

.main-flare {
  width: 97.56%;
  z-index: 5;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.main-flare-a { background-image: url("images/main_layers/main_eclipse_flare_a.png"); }
.main-flare-b { background-image: url("images/main_layers/main_eclipse_flare_b.png"); }
.main-flare-c { background-image: url("images/main_layers/main_eclipse_flare_c.png"); }

.sections-moon-button:hover .main-eclipse-disk,
.sections-moon-button:focus-visible .main-eclipse-disk { opacity: 1; }

.sections-moon-button:hover .main-flare,
.sections-moon-button:focus-visible .main-flare,
.section-moon-link:hover .moon-flare,
.section-moon-link:focus-visible .moon-flare {
  animation: compactFlarePhase 2.7s ease-in-out infinite;
}

.main-flare-b,
.moon-flare-b { animation-delay: -.9s !important; }
.main-flare-c,
.moon-flare-c { animation-delay: -1.8s !important; }

@keyframes compactFlarePhase {
  0%, 25% { opacity: .96; }
  34%, 91% { opacity: 0; }
  100% { opacity: .96; }
}

.moon-flare {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) !important;
  opacity: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  text-shadow: none !important;
  pointer-events: none;
}

/* Exact same eclipse artwork as the main moon, only uniformly reduced. */
.moon-flare-a { background-image: url("images/main_layers/main_eclipse_flare_a.png"); }
.moon-flare-b { background-image: url("images/main_layers/main_eclipse_flare_b.png"); }
.moon-flare-c { background-image: url("images/main_layers/main_eclipse_flare_c.png"); }

/* The normal cool moonlight dissolves while the compact burgundy flashes appear. */
.section-moon-link::before {
  transition: opacity .42s ease !important;
}

.section-moon-link:hover::before,
.section-moon-link:focus-visible::before {
  opacity: 0 !important;
}

.section-moon-link img {
  z-index: 2 !important;
  transition: filter .48s ease !important;
}

.section-moon-link:hover img,
.section-moon-link:focus-visible img {
  filter:
    grayscale(.24)
    brightness(.92)
    contrast(.96)
    saturate(.54)
    drop-shadow(0 0 4px rgba(250,252,255,.98)) !important;
}

/* The same black eclipse disk as the main moon, scaled to the dropdown disk. */
.section-moon-link::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 4 !important;
  display: block !important;
  width: 79% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(185,190,200,.58) !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.83) !important;
  box-shadow: inset 0 0 7px rgba(38,34,29,.55), 0 0 2px rgba(190,195,205,.72) !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
  clip-path: none !important;
  opacity: 0 !important;
  transition: opacity .48s ease !important;
  pointer-events: none;
}

.section-moon-link:hover::after,
.section-moon-link:focus-visible::after {
  opacity: 1 !important;
}

.section-moon-link .moon-title {
  left: 4% !important;
  right: 4% !important;
  top: 50% !important;
  z-index: 7 !important;
  font-size: clamp(13px, 1.05vw, 18px) !important;
  line-height: 1.05 !important;
  letter-spacing: .005em !important;
}

/* Smooth cross-fade between the three approved bear PNG states. */
.bear-state {
  opacity: 0;
  transform: translate3d(0, 1px, 0) scale(.995);
  transform-origin: 50% 62%;
  transition:
    opacity .64s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1),
    filter .64s ease !important;
  will-change: opacity, transform;
}

.bear-state.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 800px) {
  .section-moon-link .moon-title {
    font-size: clamp(10px, 1.32vw, 14px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-flare,
  .moon-flare { animation: none !important; }
  .main-flare-a,
  .section-moon-link:hover .moon-flare-a,
  .section-moon-link:focus-visible .moon-flare-a { opacity: .92; }
  .bear-state { transition-duration: .2s !important; }
}


/* ===== V16: red-copper calligraphy + bat cursor on every main-page control ===== */

body.rebuild-main-body,
body.rebuild-main-body *,
body.rebuild-main-body a,
body.rebuild-main-body button,
body.rebuild-main-body .mini-link,
body.rebuild-main-body .action-btn,
body.rebuild-main-body .sound-btn,
body.rebuild-main-body .sections-moon-button,
body.rebuild-main-body .section-moon-link {
  cursor: none !important;
}

.sections-moon-label,
.section-moon-link .moon-title {
  font-family: "Horus Calligraphy", "URW Chancery L", cursive !important;
  font-style: italic !important;
  font-weight: 400 !important;
  transition: color .28s ease, text-shadow .28s ease !important;
}

.sections-moon-label {
  font-size: clamp(13px, 2.52vw, 42px) !important;
  letter-spacing: .015em;
}

.section-moon-link .moon-title {
  font-size: clamp(17px, 1.40vw, 24px) !important;
  line-height: 1 !important;
  color: rgba(239,198,127,.98) !important;
}

/* Every eclipsed moon changes its lettering to the same red-copper colour. */
.sections-moon-button:hover .sections-moon-label,
.sections-moon-button:focus-visible .sections-moon-label,
.section-moon-link:hover .moon-title,
.section-moon-link:focus-visible .moon-title {
  color: #b85b3f !important;
  text-shadow:
    0 1px 1px #210604,
    0 0 3px rgba(224,122,84,.92),
    0 0 8px rgba(104,25,17,.88) !important;
}

@media (max-width: 800px) {
  .section-moon-link .moon-title {
    font-size: clamp(12px, 1.65vw, 17px) !important;
  }
}


/* ===== COVER V3: safe composition, ornamental entry and service dock ===== */
body.cover-page {
  --cover-copper: #b68a50;
  --cover-copper-bright: #e0bd7c;
  --cover-panel: rgba(7, 6, 5, .94);
}

.cover-page .site-cover {
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}

.cover-page .cover-stage {
  overflow: visible;
}

.cover-page .cover-image {
  object-fit: contain;
}

.cover-page .cover-ui {
  top: 4.2%;
  right: 3.4%;
  width: clamp(250px, 20.5%, 360px);
}

.ornament-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(191, 146, 83, .74);
  border-radius: 18px 4px 18px 4px;
  background:
    radial-gradient(circle at 9% 50%, rgba(210, 160, 91, .2) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 50%, rgba(210, 160, 91, .2) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 0 11px, rgba(188, 137, 71, .16) 11px 12px, transparent 12px calc(100% - 12px), rgba(188, 137, 71, .16) calc(100% - 12px) calc(100% - 11px), transparent calc(100% - 11px)),
    linear-gradient(180deg, rgba(23, 17, 12, .9), rgba(5, 5, 5, .83));
  box-shadow:
    inset 0 0 0 3px rgba(5, 4, 3, .86),
    inset 0 0 0 4px rgba(153, 106, 52, .22),
    0 7px 24px rgba(0, 0, 0, .38);
}

.ornament-btn::before,
.ornament-btn::after {
  content: "◆";
  position: absolute;
  top: 50%;
  z-index: -1;
  color: rgba(206, 159, 94, .62);
  font-size: .57em;
  transform: translateY(-50%) rotate(45deg);
  text-shadow: 0 0 7px rgba(211, 157, 82, .28);
}

.ornament-btn::before { left: .8em; }
.ornament-btn::after { right: .8em; }

.ornament-btn > span {
  position: relative;
  padding-inline: 1.25em;
}

.cover-page .enter-btn {
  min-height: clamp(42px, 4.1vw, 64px);
  padding: .74em 1em;
  font-size: clamp(14px, 1.42vw, 22px);
  letter-spacing: .035em;
  white-space: normal;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(208, 156, 87, .22);
}

.cover-page .ornament-btn:hover,
.cover-page .ornament-btn:focus-visible {
  border-color: rgba(229, 188, 124, .9);
  color: #f0d39e;
  box-shadow:
    inset 0 0 0 3px rgba(5, 4, 3, .86),
    inset 0 0 0 4px rgba(208, 157, 88, .32),
    0 0 22px rgba(196, 141, 70, .2);
}

.service-dock {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.service-icon {
  width: clamp(34px, 2.45vw, 42px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(172, 127, 67, .46);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, rgba(33, 24, 16, .91), rgba(4, 4, 4, .88) 70%);
  color: rgba(215, 176, 116, .8);
  box-shadow: inset 0 0 0 2px rgba(2, 2, 2, .78), 0 3px 13px rgba(0, 0, 0, .46);
  cursor: pointer;
  font: 400 clamp(17px, 1.45vw, 23px)/1 Georgia, serif;
  text-decoration: none;
  opacity: .72;
  transition: opacity .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.service-icon:hover,
.service-icon:focus-visible,
.service-icon[aria-pressed="true"],
.service-icon[aria-expanded="true"] {
  opacity: 1;
  color: var(--cover-copper-bright);
  border-color: rgba(218, 170, 104, .88);
  outline: none;
  transform: translateX(-2px);
}

.service-icon-letter span {
  width: 1.14em;
  height: 1.14em;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .78em;
  font-weight: 700;
}

.fullscreen-icon span {
  transform: translateY(-.03em);
  font-size: 1.08em;
}

.sound-icon {
  font-size: .68em;
  filter: sepia(1) saturate(.6);
}

.cover-shade {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(3px);
}

.cover-panel {
  position: fixed;
  z-index: 55;
  color: #e5c895;
  border: 1px solid rgba(186, 139, 76, .62);
  background:
    radial-gradient(circle at 50% 0, rgba(96, 62, 27, .14), transparent 40%),
    linear-gradient(145deg, rgba(18, 14, 10, .98), var(--cover-panel));
  box-shadow:
    inset 0 0 0 4px rgba(3, 3, 3, .8),
    inset 0 0 0 5px rgba(142, 99, 48, .19),
    0 22px 60px rgba(0, 0, 0, .7);
}

.auth-panel,
.help-panel {
  left: 50%;
  top: 50%;
  width: min(440px, calc(100vw - 34px));
  padding: clamp(28px, 4vw, 44px);
  transform: translate(-50%, -50%);
  text-align: center;
}

.settings-panel {
  right: 0;
  top: 0;
  width: min(340px, calc(100vw - 44px));
  height: 100svh;
  padding: 62px 28px 28px;
  border-block: 0;
  border-right: 0;
}

.cover-panel[hidden],
.cover-shade[hidden] {
  display: none;
}

.cover-panel h1,
.cover-panel h2 {
  margin: 18px 0 8px;
  color: #e6c78f;
  font-weight: 400;
  letter-spacing: .045em;
}

.cover-panel h1 { font-size: clamp(27px, 4vw, 38px); }
.cover-panel h2 { font-size: clamp(25px, 3vw, 34px); }

.panel-intro,
.help-panel p {
  color: rgba(231, 210, 174, .75);
  line-height: 1.55;
}

.help-panel p {
  text-align: left;
}

.panel-close {
  position: absolute;
  top: 10px;
  right: 13px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: rgba(222, 184, 125, .68);
  cursor: pointer;
  font: 300 29px/1 Georgia, serif;
}

.panel-close:hover,
.panel-close:focus-visible {
  color: #f0d39e;
  outline: none;
}

.ornament-rule {
  position: relative;
  height: 1px;
  margin: 2px 5%;
  background: linear-gradient(90deg, transparent, rgba(194, 145, 80, .56), transparent);
}

.ornament-rule span {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0 10px;
  background: #0e0b08;
  color: rgba(205, 158, 94, .72);
  transform: translate(-50%, -50%) rotate(45deg);
  font-size: 10px;
}

.ornament-rule-bottom {
  margin-top: 24px;
}

.auth-choice,
.login-form {
  display: grid;
  gap: 13px;
  margin-top: 24px;
}

.auth-choice[hidden],
.login-form[hidden] { display: none; }

.panel-action {
  width: 100%;
  min-height: 52px;
  padding: .7em 1em;
  font: 400 18px/1.2 Georgia, serif;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: rgba(229, 201, 155, .8);
  text-align: left;
  font-size: 14px;
}

.login-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(180, 132, 70, .45);
  border-radius: 3px;
  background: rgba(0, 0, 0, .48);
  color: #f1ddba;
  padding: 9px 12px;
  font: 17px Georgia, serif;
  outline: none;
}

.login-form input:focus {
  border-color: rgba(224, 178, 112, .86);
  box-shadow: 0 0 14px rgba(190, 136, 68, .14);
}

.text-return {
  border: 0;
  background: transparent;
  color: rgba(222, 188, 135, .68);
  cursor: pointer;
  font: 15px Georgia, serif;
}

.setting-row {
  width: 100%;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid rgba(179, 132, 70, .38);
  border-radius: 3px;
  background: rgba(0, 0, 0, .32);
  color: #dec08d;
  padding: 14px 16px;
  cursor: pointer;
  font: 17px Georgia, serif;
}

.setting-state {
  color: #cfa668;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
}

html[data-cover-animations="off"] .cover-page *,
html[data-cover-animations="off"] .cover-page *::before,
html[data-cover-animations="off"] .cover-page *::after {
  animation: none !important;
  transition: none !important;
}

@media (max-aspect-ratio: 4/3) {
  .cover-page .cover-ui {
    right: 2.6%;
    width: clamp(142px, 22%, 210px);
  }
}

@media (max-width: 640px) {
  .cover-page .cover-ui {
    top: 3%;
    right: 2.4%;
    width: clamp(166px, 36vw, 218px);
  }

  .cover-page .enter-btn {
    min-height: 38px;
    font-size: clamp(11px, 2.55vw, 15px);
  }

  .service-dock {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    gap: 5px;
  }
}


/* V31: credential feedback for registry-backed closed access */
.login-error,
.closed-login-status {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(190, 92, 78, .55);
  border-radius: 6px;
  background: rgba(92, 24, 18, .28);
  color: #efc2b5;
  font: 14px/1.35 Georgia, serif;
  text-align: left;
}
.login-error[hidden],
.closed-login-status[hidden] { display: none; }
.closed-login-status[data-state="success"] {
  border-color: rgba(126, 174, 102, .55);
  background: rgba(37, 76, 28, .3);
  color: #cfe8ba;
}
.login-form button:disabled,
.login-box button:disabled {
  opacity: .55;
  cursor: wait;
}