/* Minimal, left sidebar + notepad content (garry.net-inspired) */
:root {
  --bg: #0c0e12;
  --paper: #fbfbfb;
  --ink: #0e1116;
  --muted: #6a7280;
  --accent: #ff7a18;
  --line: #ececec;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--bg);
  color: #e9e9ef;
  line-height: 1.68;
}

.layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100dvh; }



.sidebar {
  position: sticky; top: 0; align-self: start; height: 100dvh;
  padding: 24px 18px; border-right: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
}
.who h1 { margin: 0; font-size: 1.25rem; letter-spacing: .3px; }
.who .sub { margin: 2px 0 18px 0; color: var(--muted); font-size: .95rem; }

.nav h2 { margin: 18px 0 8px; font-size: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 0; }
.nav a:hover { color: var(--accent); background: rgba(255,122,24,0.08); }
.nav a.active { color: var(--accent); background: rgba(255,122,24,0.12); }

.socials li + li { margin-top: 4px; }
.socials svg { opacity: .9; }

.content { padding: calc(32px + 5vh) 32px 32px; display: flex; flex-direction: column; align-items: center; }
.content.content-posts { align-items: stretch; }
.content.content-posts { padding: 0 0 0 0; }
.pad[hidden] { display: none; }

/* Simplified content card (no paper) */
.pad {
  width: 100%;
  max-width: 1210px;
  background: rgba(255,255,255,0.03);
  color: #e9e9ef;
  border-radius: 0;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.08);
}
.pad-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pad-head.minimal { border-bottom: 1px solid rgba(0,0,0,0.08); }
.pad-head h2 { margin: 0; font-size: 1.1rem; letter-spacing: .3px; }
.btn { color: #121418; background: var(--accent); text-decoration: none; padding: .45rem .7rem; border-radius: 0; box-shadow: 0 8px 20px rgba(255,122,24,.25); }
.btn:hover { filter: brightness(1.06); }
.btn.icon-btn { display: inline-flex; align-items: center; gap: 8px; }
.icon { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin: 0 2px; }
/* Raster icon image (preserve aspect ratio) */
.icon-img { width: 18px; height: auto; display: inline-block; vertical-align: -3px; margin: 0 2px; }
/* Add slight spacing for standalone sidebar/social svgs */
.socials svg { opacity: .9; margin: 0 2px; }
/* Wide game header banner */
.game-header { width: 100%; height: auto; display: block; border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow); margin: .5rem 0 1rem; }
.pad-body { padding: 16px 18px; line-height: 1.7; }
.pad-body .muted { color: #a0a6b3; }
.pad-subhead { padding: 8px 18px 0; color: #a0a6b3; font-size: .9rem; }
/* Basic Markdown formatting */
.pad-body h1 { font-size: 1.6rem; }
.pad-body h2 { font-size: 1.35rem; }
.pad-body h3 { font-size: 1.15rem; }
.pad-body h1, .pad-body h2, .pad-body h3 { margin: 12px 0 8px; }
.pad-body pre, .pad-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; }
.pad-body pre { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: .75rem; border-radius: 0; overflow: auto; }
.pad-body code { background: rgba(0,0,0,0.25); padding: 0 .25rem; border-radius: 0; }
.pad-body a { color: var(--accent); text-decoration: none; }
.pad-body a:hover { text-decoration: underline; text-underline-offset: 2px; }
.pad-body ul { padding-left: 1.1rem; }

/* Steam widget presentation */
.steam-embed { display: grid; place-items: center; margin: .5rem 0 1rem; }
.steam-widget { border-radius: 0; overflow: hidden; filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)); }

.footer { color: #aab; opacity: .9; padding: 18px; font-size: .9rem; margin-top: auto; text-align: right; }
.footer { width: 100%; }

/* Posts list (shared) */
.posts-list { list-style: none; margin: 0; padding: 0; }
.post-item a { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 8px 10px; color: inherit; text-decoration: none; border-radius: 0; }
.post-item a:hover { background: rgba(255,255,255,0.06); }
.post-item.active a { background: rgba(0,0,0,0.18); color: var(--accent); }
.post-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-date { color: #a0a6b3; font-size: .8rem; margin-left: 1rem; opacity: .85; }

.only-mobile { display: none; }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  /* Reserve space for mobile footer */
  .content { padding: calc(16px + 5vh) 16px 72px; }
  .only-mobile { display: block; }
  /* Make mobile-only sections lean, like a left bar */
  .only-mobile.pad { background: transparent; border: 0; box-shadow: none; }
  .only-mobile .pad-head { border: 0; padding: 8px 2px 6px; }
  .only-mobile .pad-head h2 { margin: 0 0 6px; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
  .only-mobile .pad-body { padding: 0 2px 10px; }
  .only-mobile .pad-body p { margin: 6px 0; }
  .only-mobile .btn { background: transparent; color: var(--accent); padding: 0; border: 0; box-shadow: none; }
  .only-mobile a { text-decoration: none; }
  /* Slim down main home pad to match */
  #home.pad { background: transparent; border: 0; box-shadow: none; }
  #home .pad-head { border: 0; padding: 10px 2px 6px; }
  #home .pad-head h2 { margin: 0 0 6px; font-size: 1rem; }
  #home .pad-body { padding: 0 2px 14px; }
}

/* Posts two-column layout inside content */
.posts-layout { display: grid; grid-template-columns: 336px 1fr; gap: 14px; align-items: stretch; height: 100%; }
.posts-list-wrap { border-right: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); display: flex; flex-direction: column; min-height: 0; }
.posts-list-wrap .pad-head { padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.posts-list-wrap .pad-body { padding: 10px; padding-left: 0; flex: 1 1 auto; overflow: auto; min-height: 0; }
.posts-list-wrap .pad-body { padding-right: 6px; }
.post-date-end { margin-top: 1rem; text-align: right; color: #a0a6b3; font-size: .9rem; }

@media (max-width: 860px) {
  .posts-layout { display: block; }
  .posts-list-wrap { border-right: 0; }
  /* Make posts list/content full-width on mobile */
  #posts.pad { max-width: none; margin: 0; }
  .posts-list-wrap, .post-view { width: 100%; }
  .posts-list-wrap { background: transparent; }
  .post-view { border: 0; background: transparent; box-shadow: none; }
}

#posts.pad { background: transparent; border: 0; box-shadow: none; flex: 1 1 auto; display: flex; flex-direction: column; max-width: none; width: 100%; }

.post-view { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow); min-height: 0; overflow: auto; }

/* Comfortable reading width for posts */
.post-view .pad-body { max-width: 92ch; margin: 0 auto; }
@media (min-width: 861px) {
  /* Lower post content without moving the card background */
  .post-view .pad-body { padding-top: 5vh; }
}

/* Mobile bottom nav */
.mobile-footer { display: none; }
@media (max-width: 860px) {
  .mobile-footer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 56px; padding: 0 12px;
    background: rgba(12,14,18,0.92);
    border-top: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
  }
  .mobile-footer .mob-link { color: #e9e9ef; text-decoration: none; font-weight: 600; }
  .mobile-footer .mob-link:hover { color: var(--accent); }
  .mobile-footer .sep { color: #a0a6b3; }
}