:root {
  color-scheme: dark;
  --paper: #151018;
  --white: #221c25;
  --ink: #fbf5f0;
  --muted: #b7aab5;
  --line: #3e3742;
  --violet: #ab88ff;
  --coral: #ff9e57;
  --lav: #332c37;
  --shadow: 0 18px 48px #0e091088;
}

html { scrollbar-color: #5d515c #151018; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 62% -12%, #40394470, transparent 37rem),
    radial-gradient(circle at 110% 40%, #3b343f22, transparent 34rem),
    #151018;
}
button, input, textarea, select { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #ff9e57;
  outline-offset: 3px;
}
::selection { background: #a884ff; color: #100b12; }
.app-shell { gap: 23px; }
.side { border-right: 1px solid #3a333e; }
.brand { color: #faf4f0; }
.brand b { color: #ff9e57; }
.brand small, .nav-label { color: #7f8199; }
.brand-mark {
  background: transparent;
  box-shadow: 0 0 28px #ff9e5735;
}
.nav { gap: 8px; }
.nav-item {
  color: #c0b2be;
  background: #1f1922;
  border: 1px solid #3b343f;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .65px;
  font-size: 10px;
}
.nav-item:hover { background: #29222c; color: #ffffff; }
.nav-item.active {
  background: #342d38;
  border-color: #9a7be0;
  color: #e9dcff;
  box-shadow: inset 3px 0 #ff9e57, 0 8px 20px #0c080f4d;
}
.nav-count { background: #ff9e57; color: #1a151d; }
.small-profile, .search, .icon-btn, .right-card, .profile-card,
.studio-preview, .studio-controls, .message-panel, .pin-card {
  background: #221c25;
  border-color: #3e3742;
  box-shadow: none;
}
.small-profile:hover, .icon-btn:hover, .person-card:hover { border-color: #978a95; }
.small-profile .chevron, .person-row button { color: #ff9e57; }
.small-profile small, .person-row small, .side-foot, .footnote { color: #a79aa5; }
.crumb { color: #afa2ad; }
.search { color: #b8abb6; }
.search input { color: #faf4f0; }
.search input::placeholder, .message-form input::placeholder,
.field input::placeholder, .field textarea::placeholder { color: #91848f; }
.top-create { background: #362f3a; color: #f1ebe7; border: 1px solid #5b505a; }
.top-create:hover { border-color: #ff9e57; color: #ff9e57; }
.mobile-search { background: #221c25; border-color: #3e3742; color: #ff9e57; }
.page-heading, .section-head h2, .pin-content h3 { color: #faf4f0; }
.page-lede, .section-head p, .pin-content p { color: #bfb2bd; }
.eyebrow, .section-kicker, .category, .pin-category { color: #bda4ff; }
.title-dot { color: #ff9e57; }
.text-link { color: #ff9e57; }
.btn.primary {
  background: #ff9e57;
  border-color: #ff9e57;
  color: #17121a;
  box-shadow: 0 0 20px #ff9e5724;
}
.btn.primary:hover { background: #c4bbff; border-color: #c4bbff; }
.btn.secondary, .btn.hero-secondary {
  background: #342c38;
  border-color: #685c66;
  color: #f1ebe6;
}
.btn.secondary:hover, .btn.hero-secondary:hover { border-color: #ab88ff; }
.btn.soft { background: #39323d; color: #ff9e57; }
.btn:disabled { filter: grayscale(.5); }

/* The first screen reads like a live lobby, with the 24h board immediately below. */
.hero {
  background: linear-gradient(125deg, #342d38 0%, #332c37 56%, #27202b 100%);
  border: 1px solid #675b65;
  border-radius: 15px;
  box-shadow: inset 0 1px #ffffff16, 0 20px 50px #0e091080;
}
.hero:after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #8f7bff0b 1px, transparent 1px), linear-gradient(#8f7bff0b 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(90deg, #000000, transparent 60%);
}
.hero .eyebrow { color: #ff9e57; }
.hero .live-dot { background: #ff9e57; box-shadow: 0 0 0 4px #ff9e5720, 0 0 14px #ff9e57; }
.hero h1 { color: #ffffff; text-shadow: 0 2px 18px #16111977; }
.hero h1 em { color: #ff9e57; }
.hero p { color: #e1d3df; }
.hero-visual {
  background: radial-gradient(circle at 60% 45%, #6936a0 0 25%, #534852 26% 48%, #2e2731 49%);
  border-left: 1px solid #8e6ac566;
}
.hero-visual:before, .hero-visual:after { display: block; border-color: #ff9e5740; }
.hero-orbit { border-color: #ff9e5788; box-shadow: 0 0 20px #ff9e571c; }
.hero-orbit.inner { border-style: dashed; border-color: #8fdfff88; }
.hero-sticker {
  background: #ff9e57;
  color: #17121a;
  border-radius: 3px;
  box-shadow: 4px 4px 0 #704eaa;
  transform: rotate(3deg);
}
.sparkle { color: #ff9e57; }
.hero-avatar { filter: drop-shadow(0 14px 18px #0d090fa8); }
.quick-actions button {
  background: #221c25;
  border: 1px solid #433c47;
  border-radius: 10px;
  color: #faf4ef;
}
.quick-actions button:hover { border-color: #a583f6; box-shadow: 0 10px 25px #0e09109c; }
.quick-icon, .quick-actions button:nth-child(2) .quick-icon,
.quick-actions button:nth-child(3) .quick-icon {
  background: #342d38;
  border: 1px solid #7d7f97;
  color: #ff9e57;
  border-radius: 6px;
}
.quick-actions button:nth-child(2) .quick-icon { color: #68ddfa; border-color: #5d5f75; background: #322b36; }
.quick-actions button:nth-child(3) .quick-icon { color: #d4a8ff; }
.quick-actions button small, .quick-actions b { color: #bfb2bd; }
.tab { background: #231d26; border-color: #48414d; color: #c8bbc6; border-radius: 6px; }
.tab:hover { border-color: #a17cff; }
.tab.active { background: #ff9e57; color: #17121a; border-color: #ff9e57; }
.pin-count { color: #c1b3bf; }
.pin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pin-card {
  border-radius: 11px;
  border-top: 2px solid #7d7f97;
  min-height: 251px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #2b242e, #1e1821 72%);
  box-shadow: 0 10px 25px #0f0a1155;
}
.pin-card:hover { border-color: #bb9bff; box-shadow: 0 12px 35px #0f0a11ba, 0 0 0 1px #865fcbbb; }
.pin-top { display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 8px 10px; align-items: center; }
.pin-icon { color: #faf4ef; border: 1px solid #64667d; font-size: 27px; }
.pin-host { color: #efe9e4; min-width: 0; }
.pin-host span { min-width: 0; }
.pin-host small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-host:hover strong { color: #ff9e57; }
.pin-host small { color: #b3a6b1; }
.pin-expiry {
  grid-column: 1 / -1;
  justify-self: start;
  margin-left: 0;
  color: #ff9e57;
  background: #293a26;
  border: 1px solid #6c9543;
  border-radius: 4px;
  letter-spacing: .2px;
}
.pin-content { padding: 16px 0 18px; }
.pin-category { letter-spacing: 1px; }
.pin-content h3 { font-size: 17px; }
.pin-footer { border-color: #413a45; flex-direction: column; align-items: stretch; margin-top: auto; }
.pin-meta { color: #bdb0bb; }
.pin-actions { justify-content: stretch; }
.pin-actions .btn { flex: 1; }
.people-after-pins { margin-top: 0; }
.showcase {
  background: linear-gradient(120deg, #211b24, #3a333e 62%, #28212b);
  border: 1px solid #665a64;
  border-radius: 12px;
  box-shadow: 0 20px 40px #0c080f66;
}
.showcase .section-kicker { color: #ff9e57; }
.showcase p { color: #dcceda; }
.btn.showcase-button { background: #ff9e57; color: #17121a; }
.showcase:before, .showcase:after { border-color: #ff9e573f; }
.showcase-card { border: 1px solid #b399f5; border-radius: 7px; }
.showcase-effect { background: #1d1720; color: #ff9e57; border: 1px solid #ff9e5799; }
.person-card { background: #221c25; border-color: #413a45; border-radius: 9px; }
.person-card-art { border-bottom: 1px solid #5d5f75; }
.person-card small, .person-card .status { color: #c0b3be; }
.person-card-spark { color: #ff9e57; }
.live-dot { background: #ff9e57; box-shadow: 0 0 0 3px #ff9e5726; }

/* Profiles retain distinct color worlds but sit inside one dark system. */
.profile-card, .studio-preview, .studio-controls, .message-panel { border-radius: 10px; }
.profile-banner, .detail-banner, .studio-banner { border-bottom: 1px solid #a783e4; }
.profile-info small, .detail-body small, .studio-content small { color: #bdb0bb; }
.profile-info p, .detail-body p, .studio-content p { color: #c5b7c3; }
.chip { background: #342c38; color: #cdb8ff; border: 1px solid #5a4e58; }
.detail-banner-label { background: #1d1720e8; color: #ff9e57; border: 1px solid #8aaf5b; }
.vibe-panel { background: #2e2631; border-color: #4b434f; }
.vibe-tag { background: #3a333e; color: #dcc8ff; border: 1px solid #6f718a; }
.vibe-panel small { color: #afa2ad; }
.guestbook-entry { border-color: #413a45; }
.guestbook-entry small { color: #b1a4af; }
.studio-controls p { color: #bdb0bb; }
.control-label { color: #dbceda; }
.choice { background: #2c242f; border-color: #48404c; color: #ded0dc; }
.choice:hover { border-color: #9877e3; }
.choice.active { background: #39323d; border-color: #b58bff; color: #f2ece8; box-shadow: inset 0 0 0 1px #b58bff55; }
.toggle-row { color: #d6c8d4; }
.toggle { background: #4f444e; }
.toggle.on { background: #9365ef; }
.effect-label { color: #ff9e57; }
.notice { background: #2c2530; border-color: #2d777a; color: #86d9d0; }
.right-card.highlight { background: #332c37; border-color: #73748e; }
.right-card.highlight h3 { color: #f6f1ec; }
.right-card.highlight p, .right-card p { color: #c1b4bf; }
.rail-kicker { color: #ff9e57; }
.prompt-icon { background: #ff9e57; color: #1a151d; }
.mini-gather { border-color: #413a45; }
.mini-gather small { color: #bbaeb9; }
.mini-studio { background: linear-gradient(135deg, #3f3843, #37303b); border: 1px solid #7b7d95; }
.mini-studio small { color: #e5d8e4; }
.inbox-list button { color: #f7f1ec; }
.inbox-list button.active { background: #3c3540; }
.inbox-list small, .conversation-head small { color: #b7aab5; }
.conversation-head, .message-form { border-color: #433b47; }
.bubble { background: #39323d; color: #eee8e3; }
.bubble.mine { background: #534751; color: #fbf5f0; }
.message-form input, .field input, .field textarea, .field select {
  background: #1e1821;
  border-color: #524751;
  color: #f8f2ee;
}
.message-form input:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color: #b28bff; }
.dialog-backdrop { background: #09060bc9; }
.dialog { background: #29222d; border: 1px solid #747690; box-shadow: 0 30px 80px #000000bb; }
.dialog p { color: #c1b4bf; }
.dialog-close { background: #433b47; color: #fbf5f0; }
.toast { background: #ff9e57; color: #1a151d; }
.empty { border-color: #5f545e; color: #c7b9c5; background: #211b24; }
.footnote { color: #9a8d98; }

/* The avatar is a stylized online persona rather than a soft illustration. */
.avatar { color: #fdf8f3; }
.avatar-face {
  background: linear-gradient(145deg, var(--avatar-bg), #1f1922 78%);
  border: 2px solid #e1d5ffb0;
  box-shadow: inset 0 0 18px #0d090f8c;
}
.avatar-face:before {
  width: 47%; height: 48%; left: 26%; top: 17%;
  border-radius: 42% 42% 36% 36%;
  background: var(--skin);
  box-shadow: 0 -9px 0 5px var(--hair);
}
.avatar-face:after { width: 90%; left: 5%; background: var(--shirt); border-radius: 35% 35% 0 0; }
.avatar-eyes {
  top: 43%; left: 32%; width: 36%; height: 9%;
  border-radius: 3px; background: #8df5ff; box-shadow: 0 0 8px #71e8ff;
  transform: skew(-15deg);
}
.avatar-mouth { display: none; }
.avatar.tone-rose { --avatar-bg: #613765; --skin: #b889aa; --hair: #24132c; --shirt: #6a38c4; }
.avatar.tone-peach { --avatar-bg: #724064; --skin: #cd8c98; --hair: #2a1934; --shirt: #b3378b; }
.avatar.tone-blue { --avatar-bg: #4a434f; --skin: #a1949f; --hair: #27202b; --shirt: #2e86b5; }
.avatar.tone-lilac { --avatar-bg: #615660; --skin: #a395b9; --hair: #241e28; --shirt: #7662cc; }
.avatar.tone-mint { --avatar-bg: #225f69; --skin: #9abfbd; --hair: #2e2732; --shirt: #37a6a1; }
.avatar.frame-orbit:after { border-color: #ff9e57; box-shadow: 0 0 12px #ff9e5755; }
.avatar.frame-petals:after { border-color: #e56aff; box-shadow: 0 0 12px #e56aff66; }
.avatar.frame-halo:after { border-color: #63e5ff; box-shadow: 0 0 12px #63e5ff88; }
.avatar.frame-spark:after { border-color: #b290ff; box-shadow: 0 0 12px #b290ff77; }

@media (max-width: 730px) {
  .topbar:before { content: 'GameWall.gg'; color: #ff9e57; }
  .mobile-nav { background: #1e1821f4; border-color: #47404c; }
  .mobile-nav button { color: #a497a2; }
  .mobile-nav button.active { color: #ff9e57; }
  .mobile-search { background: #29222c; border-color: #4f444e; color: #ff9e57; }
  .hero { border-radius: 12px; }
  .hero-visual { opacity: .65; }
  .pin-list { grid-template-columns: 1fr; }
  .pin-card { min-height: 0; }
  .pin-footer { align-items: stretch; }
  .pin-actions { width: 100%; }
}
@media (max-width: 520px) {
  .hero-visual { opacity: .42; }
  .hero-copy { z-index: 3; }
  .pin-card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .effect-motion .effect-particle { animation: none; }
}