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

:root {
--bg:        #1a1018;
--bg2:       #221520;
--surface:   #2c1c2a;
--border:    rgba(255,180,120,0.12);
--sunset1:   #e8845a;
--sunset2:   #c45c8a;
--sunset3:   #7a4eab;
--text:      #f0e6de;
--muted:     #a8907e;
--nav-h:     68px;
}

html { scroll-behavior: smooth; overflow-y: scroll; }

body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}

#snow {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
}

/* ── Navbar (identical across all pages) ── */
nav {
position: sticky;
top: 0;
z-index: 100;
height: var(--nav-h);
background: rgba(26, 16, 24, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 2.5rem;
}

.nav-left { display: flex; align-items: center; }

.nav-centre {
display: flex;
align-items: center;
justify-content: center;
}

.nav-right {
display: flex;
align-items: center;
justify-content: flex-end;
}

.server-icon {
width: 42px; height: 42px;
border-radius: 10px;
object-fit: cover;
border: 1.5px solid var(--border);
background: var(--surface);
flex-shrink: 0;
}

.nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; }

.nav-links a {
font-size: 0.88rem;
font-weight: 500;
color: var(--muted);
text-decoration: none;
padding: 0.4rem 0.85rem;
border-radius: 6px;
letter-spacing: 0.02em;
transition: color 0.18s, background 0.18s;
}

.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-links a.active { color: var(--sunset1); }

.discord-nav-btn {
display: flex; align-items: center; gap: 0.45rem;
background: #5865f2; color: #fff;
text-decoration: none; border-radius: 8px;
padding: 0.45rem 1rem; font-size: 0.84rem; font-weight: 600;
transition: background 0.15s; white-space: nowrap;
}
.discord-nav-btn:hover { background: #4752c4; }
.discord-nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Page content area ── */
main {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
padding: 2.5rem 1.5rem 4rem;
}

.thread-content {
padding: 0;
}

/* ── Thread Styles ── */

.thread-wrap {
max-width: 820px;
margin: 0 auto;
padding: 2rem 1.25rem 0rem;
}

/* Message groups */
.msg-group {
display: grid;
grid-template-columns: 40px 1fr;
gap: 0 12px;
margin-bottom: 1rem;
}

.msg-cont {
grid-template-columns: 40px 1fr;
}

.msg-header {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}

.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
}

.author {
font-weight: 600;
font-size: 0.95rem;
color: #1a1a1a;
}

.msg-body {
grid-column: 2;
}

.msg-cont .msg-body {
grid-column: 2;
}

.msg-content {
font-size: 0.95rem;
color: #2a2a2a;
word-break: break-word;
white-space: pre-wrap;
margin-bottom: 2px;
}

/* Links in content */
.msg-content a {
color: #5865f2;
text-decoration: underline;
text-underline-offset: 2px;
word-break: break-all;
}

/* Inline code */
.msg-content code {
background: #f0f0ee;
border: 1px solid #e5e5e3;
border-radius: 4px;
padding: 1px 5px;
font-family: 'Fira Mono', 'Consolas', monospace;
font-size: 0.88em;
color: #c7254e;
white-space: pre-wrap;
}

/* Code blocks */
.msg-content pre {
background: #f0f0ee;
border: 1px solid #e5e5e3;
border-radius: 6px;
padding: 0.75rem 1rem;
overflow-x: auto;
margin: 0.4rem 0;
white-space: pre;
}

.msg-content pre code {
background: none;
border: none;
padding: 0;
color: inherit;
font-size: 0.88rem;
white-space: pre;
}

/* Block quotes */
.msg-content blockquote {
border-left: 3px solid #d0d0ce;
padding-left: 0.75rem;
margin: 0.3rem 0;
color: #555;
}

/* @mentions */
span[data-type="mention"] {
background: rgba(88, 101, 242, 0.15);
color: #5865f2;
border-radius: 3px;
padding: 0 3px;
font-size: 0.9em;
font-weight: 500;
}

/* Image attachments — large for guide screenshots */
.msg-attachment {
margin-top: 6px;
margin-bottom: 4px;
}

.msg-attachment img {
max-width: 100%;
height: auto;
border-radius: 8px;
display: block;
cursor: zoom-in;
}

.msg-attachment a {
display: block;
}

/* Link embeds */
.msg-embed {
margin-top: 6px;
border-left: 3px solid #5865f2;
padding: 0.5rem 0.75rem;
background: #f2f3f5;
border-radius: 0 6px 6px 0;
max-width: 520px;
}

.embed-title {
font-weight: 600;
font-size: 0.9rem;
color: #5865f2;
text-decoration: none;
display: block;
margin-bottom: 2px;
word-break: break-all;
}

.embed-desc {
font-size: 0.85rem;
color: #555;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* Footer CTA */
.thread-footer {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e5e3;
text-align: center;
}

.discord-btn {
display: inline-flex; align-items: center; gap: 0.5rem;
align-items: center;
gap: 0.5rem;
background: #5865f2;
color: #fff;
text-decoration: none;
border-radius: 8px;
padding: 0.6rem 1.4rem;
font-size: 0.95rem;
font-weight: 600;
transition: background 0.15s ease;
}

.discord-btn:hover { background: #4752c4; }

.top-btn {
display: block;
margin: 0 auto 1rem;
background: none;
border: 1px solid #ccc;
border-radius: 8px;
padding: 0.5rem 1.2rem;
font-size: 0.9rem;
color: #555;
cursor: pointer;
}

.top-btn:hover { background: #f0f0ee; }

.discord-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}

@media (max-width: 600px) {
.thread-wrap { padding: 1rem 0.85rem 3rem; }
.msg-group { grid-template-columns: 32px 1fr; gap: 0 10px; }
.avatar { width: 32px; height: 32px; }
.msg-attachment img { max-height: 400px; }
}

@media (prefers-color-scheme: dark) {
/* body { background: #1e1f22; color: #ddd; } */
.author { color: #f2f3f5; }
.msg-content { color: #dbdee1; }
.msg-content a { color: #7289da; }
.msg-content code { background: #2b2d31; border-color: #3a3c40; color: #f38ba8; }
.msg-content pre { background: #2b2d31; border-color: #3a3c40; }
.msg-content blockquote { border-color: #444; color: #aaa; }
.msg-embed { background: #2b2d31; }
.embed-desc { color: #aaa; }
.thread-footer { border-color: #2e2f33; }
.top-btn { border-color: #444; color: #aaa; }
.top-btn:hover { background: #2b2d31; }
span[data-type="mention"] { background: rgba(88, 101, 242, 0.25); }
}

/* Thread Card Styles  */
.thread-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.1rem 1.25rem;
text-decoration: none;
color: var(--text);
margin-bottom: 0.85rem;
transition: border-color 0.15s, background 0.15s;
}

.thread-card:hover {
border-color: rgba(255, 180, 120, 0.3);
background: #3a2638;
}

.thread-card-main {
flex: 1;
min-width: 0;
}

.thread-card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.45rem;
}

.thread-tag {
background: rgba(232, 132, 90, 0.15);
color: var(--sunset1);
border: 1px solid rgba(232, 132, 90, 0.25);
border-radius: 4px;
padding: 1px 7px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.03em;
}

.thread-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.thread-card-meta {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.82rem;
color: var(--muted);
margin-bottom: 0.4rem;
}

.thread-card-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}

.thread-card-desc {
font-size: 0.875rem;
color: var(--muted);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.5rem;
}

.thread-card-count {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
color: var(--muted);
}

.thread-card-image {
flex-shrink: 0;
width: 90px;
height: 68px;
border-radius: 6px;
overflow: hidden;
background: var(--bg2);
}

.thread-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

@media (max-width: 500px) {
.thread-card-image { display: none; }
}

/* ── Footer ── */
footer {
position: relative; z-index: 1;
text-align: center;
padding: 2.5rem 1rem;
font-size: 0.78rem;
color: var(--muted);
border-top: 1px solid var(--border);
margin-top: 2rem;
}

@media (max-width: 640px) {
nav { padding: 0 1rem; }
.nav-links a { padding: 0.4rem 0.55rem; font-size: 0.82rem; }
.discord-nav-btn span { display: none; }
.discord-nav-btn { padding: 0.45rem 0.6rem; }
main { padding: 1.5rem 0.85rem 3rem; }
}

.back-btn {
  text-decoration: none;
  background: none;
  border: 1px solid rgba(255,180,120,0.25);
  color: var(--muted);
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  width: fit-content;
  position: absolute;
  top: 2.5rem;
  left: -4rem;
}

.back-btn:hover {
  border-color: rgba(255,180,120,0.55);
  color: var(--text);
}