/* swag-city-plus | shared room styles
   every room page uses this. archetype-specific flourishes via .room-swag,
   .room-hacker, .room-wizard classes on the <main> element. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  min-height: 100vh;
  background: #1B0D0A;
  font-family: 'Courier New', 'Monaco', monospace;
  color: #F4D3B8;
  line-height: 1.7;
}

/* home button — top-left corner of every room.
   placeholder styling — replace background with your pixel-art scroll image
   when you draw one in aseprite. just set background-image: url(...) */
.room-nav {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
}

.home-scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: #341416;
  border: 2px solid #A92F29;
  color: #F4D3B8;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: all 0.15s ease;
  image-rendering: pixelated;
}

.home-scroll:hover {
  background: #A92F29;
  transform: translate(-1px, -1px);
}

.home-scroll::before {
  content: "☿🜍🜔";
  font-size: 1rem;
  letter-spacing: 0;
}

/* main content area */
.room {
  max-width: 720px;
  margin: 0 auto;
  padding: 5rem 2rem 6rem;
}

.room h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #F4D3B8;
  letter-spacing: -0.02em;
}

.room-subtitle {
  color: #936B55;
  font-style: italic;
  margin-bottom: 3rem;
  font-size: 1.1rem;
}

.room h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
  color: #F4D3B8;
}

.room p {
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
}

.room a {
  color: #EA914A;
  text-decoration: underline;
  text-decoration-color: #A92F29;
  text-underline-offset: 3px;
}

.room a:hover {
  color: #F4D3B8;
}

.room img {
  max-width: 100%;
  image-rendering: pixelated;
  margin: 1.5rem 0;
}

/* archetype accents — applied via class on <main> */

.room-swag h1::after {
  content: " 🜍";
  color: #EA914A;
  font-size: 0.7em;
  margin-left: 0.3em;
}

.room-hacker {
  font-family: 'Courier New', monospace;
}
.room-hacker h1::after {
  content: " 🜔";
  color: #88B098;
  font-size: 0.7em;
  margin-left: 0.3em;
}
.room-hacker .room-subtitle::before {
  content: "// ";
  color: #88B098;
}

.room-wizard {
  font-family: 'Georgia', 'Palatino', serif;
}
.room-wizard h1 {
  letter-spacing: 0.02em;
}
.room-wizard h1::after {
  content: " ☿";
  color: #B6353D;
  font-size: 0.7em;
  margin-left: 0.3em;
}
.room-wizard .room-subtitle {
  color: #683887;
}

/* placeholder note styling — for unfinished rooms */
.placeholder-note {
  padding: 1rem;
  border: 1px dashed #936B55;
  color: #936B55;
  font-style: italic;
  margin-bottom: 2rem;
}