/* ===========================================================
   HOMETOWN HIDEOUT: the Dark World has a server now.
   Palette: void black, iron, blood red, soul scarlet, bone, prosperity gold
   =========================================================== */

:root{
  --void: #0a0a0d;
  --void-deep: #050506;
  --iron: #1c1b22;
  --iron-line: #34323c;
  --blood: #7a1030;
  --scarlet: #ff2c52;
  --scarlet-dim: #b81f3d;
  --bone: #efe8d8;
  --bone-dim: #b8b1a2;
  --gold: #c9a227;

  --mono: "Determination Mono", "Cascadia Mono", "JetBrains Mono", ui-monospace, "Space Mono", monospace;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Georgia", serif;

  --edge: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

a{ color: inherit; }

::selection{ background: var(--scarlet); color: var(--void-deep); }

:focus-visible{
  outline: 2px solid var(--scarlet);
  outline-offset: 3px;
}

/* ---------- texture: faint starfield the whole page sits on ---------- */
.starfield{
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--void);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(239,232,216,.35) 0, transparent 60%),
    radial-gradient(1px 1px at 78% 42%, rgba(239,232,216,.28) 0, transparent 60%),
    radial-gradient(1px 1px at 34% 68%, rgba(239,232,216,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 89% 81%, rgba(239,232,216,.22) 0, transparent 60%),
    radial-gradient(1px 1px at 55% 12%, rgba(239,232,216,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 6% 88%, rgba(239,232,216,.25) 0, transparent 60%),
    radial-gradient(1px 1px at 63% 92%, rgba(239,232,216,.2) 0, transparent 60%);
}

/* ---------- nav ---------- */
.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 6vw;
  border-bottom: 1px solid var(--iron-line);
  background: linear-gradient(180deg, var(--void-deep), transparent);
}

.mark{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  font-size: 15px;
  text-decoration: none;
  color: var(--bone);
}

.mark .soul{
  width: 14px; height: 14px;
  background: var(--scarlet);
  clip-path: path("M7 13.5C7 13.5 0.5 8.7 0.5 4.6C0.5 2.3 2.3 0.9 4.1 0.9C5.4 0.9 6.4 1.6 7 2.6C7.6 1.6 8.6 0.9 9.9 0.9C11.7 0.9 13.5 2.3 13.5 4.6C13.5 8.7 7 13.5 7 13.5Z");
  animation: pulse 1.8s ease-in-out infinite;
  flex: none;
}

@keyframes pulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.18); }
}

.mark b{ font-weight: 700; color: var(--bone); }
.mark span{ color: var(--bone-dim); }

.tabs-nav{
  display: flex;
  gap: 0;
  font-family: var(--mono);
  font-size: 13px;
}

.tabs-nav a{
  padding: 10px 18px;
  text-decoration: none;
  color: var(--bone-dim);
  border: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.tabs-nav a:hover, .tabs-nav a[aria-current="page"]{
  color: var(--scarlet);
  border-color: var(--iron-line);
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4vw;
  align-items: center;
  padding: 9vh 6vw 11vh;
  min-height: 78vh;
}

.hero-copy .eyebrow{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--scarlet);
  margin: 0 0 18px;
}

.hero h1{
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(42px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  color: var(--bone);
  text-shadow: 3px 3px 0 var(--blood);
}

.hero h1 em{
  font-style: normal;
  color: var(--scarlet);
  text-shadow: 3px 3px 0 var(--void-deep);
}

.hero-copy p{
  max-width: 46ch;
  font-size: 21px;
  color: var(--bone-dim);
  margin: 0 0 40px;
}

.cta-row{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.tab-btn{
  clip-path: var(--edge);
  padding: 18px 30px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--iron-line);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.tab-btn:hover{ transform: translate(-2px,-2px); }

.tab-btn.discord{
  background: var(--scarlet);
  color: var(--void-deep);
  font-weight: 700;
  border-color: var(--scarlet);
}
.tab-btn.discord:hover{ background: #ff4468; }

.tab-btn.rulebook{
  background: var(--iron);
  color: var(--bone);
}
.tab-btn.rulebook:hover{ border-color: var(--scarlet); color: var(--scarlet); }

.tab-btn .glyph{ font-size: 16px; }

/* ---------- hero right panel: the SOUL / dark-world card ---------- */
.hero-art{
  position: relative;
  aspect-ratio: 4/5;
  background: var(--iron);
  clip-path: var(--edge);
  border: 1px solid var(--iron-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-art::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,44,82,.06) 0 2px, transparent 2px 26px);
}

.big-soul{
  width: 34%;
  aspect-ratio: 1;
  background: var(--scarlet);
  clip-path: path("M7 13.5C7 13.5 0.5 8.7 0.5 4.6C0.5 2.3 2.3 0.9 4.1 0.9C5.4 0.9 6.4 1.6 7 2.6C7.6 1.6 8.6 0.9 9.9 0.9C11.7 0.9 13.5 2.3 13.5 4.6C13.5 8.7 7 13.5 7 13.5Z");
  filter: drop-shadow(0 0 40px rgba(255,44,82,.55));
  animation: beat 2.4s ease-in-out infinite;
}

@keyframes beat{
  0%, 100%{ transform: scale(1); }
  45%{ transform: scale(1.08); }
  55%{ transform: scale(0.98); }
}

.hero-art .caption{
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--bone-dim);
  letter-spacing: 0.05em;
}

/* ---------- zigzag divider, DELTARUNE-panel style ---------- */
.zigzag{
  height: 14px;
  width: 100%;
  background:
    linear-gradient(135deg, var(--iron) 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(225deg, var(--iron) 25%, transparent 25%) 0 0/14px 14px;
  background-color: var(--void);
}

/* ---------- lore section ---------- */
.lore{
  padding: 10vh 6vw;
  background: var(--iron);
  border-top: 1px solid var(--iron-line);
  border-bottom: 1px solid var(--iron-line);
}

.lore-inner{
  max-width: 920px;
  margin: 0 auto;
}

.lore .kicker{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 20px;
}

.lore h2{
  font-family: var(--mono);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  margin: 0 0 34px;
  max-width: 18ch;
}

.lore .drop p{
  font-size: 22px;
  color: var(--bone-dim);
  max-width: 66ch;
  margin: 0 0 22px;
}

.lore .drop p:first-of-type::first-letter{
  font-family: var(--serif);
  font-size: 64px;
  float: left;
  line-height: 0.8;
  padding: 8px 10px 0 0;
  color: var(--scarlet);
}

/* ---------- unity: a running list, not a card grid ---------- */
.unity{
  padding: 10vh 6vw;
  max-width: 980px;
  margin: 0 auto;
}

.unity-head{
  margin-bottom: 6vh;
}

.unity-head h2{
  font-family: var(--mono);
  font-size: clamp(26px, 3vw, 38px);
  margin: 0 0 14px;
  max-width: 20ch;
}

.unity-head p{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold);
  margin: 0;
}

.unity-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--iron-line);
}

.unity-list li{
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 2fr;
  gap: 6vw;
  padding: 34px 4px;
  border-bottom: 1px solid var(--iron-line);
}

.unity-list li::before{
  content: "";
  position: absolute;
  left: -4px;
  top: 42px;
  width: 8px;
  height: 8px;
  background: var(--scarlet);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.unity-list h3{
  font-family: var(--serif);
  font-size: 26px;
  margin: 0;
  color: var(--bone);
  padding-left: 20px;
}

.unity-list p{
  color: var(--bone-dim);
  font-size: 17px;
  margin: 0;
}

@media (max-width: 700px){
  .unity-list li{ grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- final cta banner ---------- */
.banner{
  position: relative;
  padding: 12vh 6vw;
  text-align: center;
  background: var(--blood);
  overflow: hidden;
}

.banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.15) 0 2px, transparent 2px 30px);
}

.banner > *{ position: relative; }

.banner h2{
  font-family: var(--mono);
  font-size: clamp(30px, 4.6vw, 58px);
  margin: 0 0 20px;
  color: var(--bone);
  text-shadow: 3px 3px 0 var(--void-deep);
}

.banner p{
  font-family: var(--mono);
  color: rgba(239,232,216,.85);
  font-size: 14px;
  margin: 0 0 44px;
}

.banner .cta-row{ justify-content: center; }

/* ---------- footer ---------- */
footer{
  padding: 40px 6vw 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--bone-dim);
  border-top: 1px solid var(--iron-line);
}

footer a{ color: var(--bone-dim); text-decoration: none; }
footer a:hover{ color: var(--scarlet); }

/* ===========================================================
   RULEBOOK page
   =========================================================== */

.book-header{
  padding: 8vh 6vw 6vh;
  border-bottom: 1px solid var(--iron-line);
}

.book-header .back{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--bone-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
}
.book-header .back:hover{ color: var(--scarlet); }

.book-header h1{
  font-family: var(--mono);
  font-size: clamp(34px, 5vw, 58px);
  margin: 0 0 16px;
  text-shadow: 3px 3px 0 var(--blood);
}

.book-header p{
  color: var(--bone-dim);
  font-size: 19px;
  max-width: 60ch;
  margin: 0;
}

.book{
  max-width: 880px;
  margin: 0 auto;
  padding: 8vh 6vw 14vh;
}

.decree{
  margin-bottom: 8vh;
}

.decree .num{
  font-family: var(--mono);
  color: var(--scarlet);
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
}

.decree h2{
  font-family: var(--serif);
  font-size: 32px;
  margin: 0 0 16px;
  color: var(--bone);
}

.decree p{
  color: var(--bone-dim);
  font-size: 19px;
  max-width: 66ch;
}

.decree ul{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.decree li{
  position: relative;
  padding: 10px 0 10px 28px;
  border-top: 1px solid var(--iron-line);
  color: var(--bone-dim);
  font-size: 17px;
}

.decree li:last-child{ border-bottom: 1px solid var(--iron-line); }

.decree li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 8px;
  height: 8px;
  background: var(--scarlet);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.decree li b{ color: var(--bone); font-weight: 600; }

/* ---------- numbered rule sub-items ---------- */
.rule-list{
  margin: 30px 0 0;
  border-top: 1px solid var(--iron-line);
}

.rule{
  padding: 26px 4px;
  border-bottom: 1px solid var(--iron-line);
}

.rule-num{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--scarlet);
  display: block;
  margin-bottom: 10px;
}

.rule h3{
  font-family: var(--serif);
  font-size: 23px;
  margin: 0 0 8px;
  color: var(--bone);
}

.rule p{
  color: var(--bone-dim);
  font-size: 17px;
  margin: 0;
  max-width: 66ch;
}

.book-notes{
  margin-top: 10vh;
  padding: 34px;
  background: var(--iron);
  border: 1px solid var(--iron-line);
  clip-path: var(--edge);
}

.book-notes h2{
  font-family: var(--mono);
  font-size: 18px;
  margin: 0 0 14px;
  color: var(--gold);
}

.book-notes p{
  color: var(--bone-dim);
  font-size: 17px;
  margin: 0 0 12px;
  max-width: 68ch;
}

.book-notes p:last-child{ margin-bottom: 0; }

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .hero{
    grid-template-columns: 1fr;
    padding-top: 6vh;
  }
  .hero-art{ order: -1; aspect-ratio: 16/10; }
  .pillar-grid{ grid-template-columns: 1fr; }
  .tabs-nav{ font-size: 12px; }
  .tabs-nav a{ padding: 8px 12px; }
}

@media (max-width: 480px){
  body{ font-size: 17px; }
  .topbar{ padding: 18px 5vw; }
  .hero, .lore, .pillars, .banner{ padding-left: 5vw; padding-right: 5vw; }
  .cta-row{ flex-direction: column; align-items: stretch; }
  .tab-btn{ justify-content: center; }
}