/* Reality Skewed Gamers — Base Styles
   Version: v1.0.0
*/

:root{
  --rsg-black:#000;
  --rsg-deep:#260202;
  --rsg-panel:rgba(30,0,0,.86);
  --rsg-panel-soft:rgba(100,0,0,.25);
  --rsg-border:rgba(120,0,0,.65);
  --rsg-text:#fff;
  --rsg-link:#9bd1ff;

  --topbar-h:56px;
  --footer-h:40px;
  --page-max:1100px;
  --radius:10px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

@font-face{
  font-family:"GotHeroin";
  src:url("./Got_Heroin.ttf") format("truetype");
  font-display:swap;
}
@font-face{
  font-family:"GoodTimes";
  src:url("./Good_Times.ttf") format("truetype");
  font-display:swap;
}

*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  color:var(--rsg-text);
  background-color:var(--rsg-deep);
  background-image:url("./background.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* a11y */
.skip-link{
  position:absolute;
  left:-999px;
  top:8px;
  padding:10px 12px;
  border-radius:10px;
  background:var(--rsg-black);
  border:1px solid var(--rsg-border);
  color:var(--rsg-text);
  z-index:2000;
}
.skip-link:focus{left:8px}

/* ===== Topbar / Nav ===== */
.site-topbar{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--topbar-h);
  background:var(--rsg-black);
  display:flex;
  align-items:center;
  padding:0 10px;
  gap:10px;
  z-index:1500;
}

.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--rsg-text);
  min-width:0;
}
.brand-text{
  font-family:"GotHeroin",system-ui,sans-serif;
  font-size:clamp(22px,2.4vw,36px);
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-toggle{
  margin-left:auto;
  appearance:none;
  border:0;
  background:transparent;
  color:var(--rsg-text);
  width:44px;
  height:44px;
  border-radius:12px;
  cursor:pointer;
}
.nav-toggle:hover,
.nav-toggle:focus-visible{
  background:var(--rsg-deep);
  outline:none;
}
.nav-toggle-icon{font-size:22px}

.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
}
.nav-links a{
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight:600;
  color:var(--rsg-text);
  text-decoration:none;
  padding:10px 14px;
  border-radius:10px;
  font-size:16px;
}
.nav-links a:hover,
.nav-links a:focus-visible{
  background:var(--rsg-deep);
  outline:none;
}
.nav-links a.is-active{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

/* Desktop: show links, hide hamburger */
@media (min-width: 801px){
  .nav-toggle{display:none}
  .nav-links{margin-left:auto}
}

/* Mobile: show hamburger, links become dropdown */
@media (max-width: 800px){
  .brand-text{max-width:70vw}
  .nav-links{
    position:fixed;
    top:var(--topbar-h);
    left:0;
    right:0;
    background:var(--rsg-black);
    padding:10px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .nav-links.is-open{display:flex}
  .nav-links a{
    padding:12px 14px;
    border-radius:12px;
  }
}

/* ===== Main panel ===== */
.page{
  width:min(75%, var(--page-max));
  margin:0 auto;
  min-height:100vh;
  padding:calc(var(--topbar-h) + 18px) 16px calc(var(--footer-h) + 90px);
  background:var(--rsg-panel);
  border-left:3px solid var(--rsg-border);
  border-right:3px solid var(--rsg-border);
  box-shadow:var(--shadow);
}

@media (max-width: 900px){
  .page{width:min(92%, var(--page-max))}
}

h1,h2,h3{margin:0 0 10px}
h1{
  font-family:"GoodTimes",system-ui,sans-serif;
  font-size:clamp(22px,3vw,36px);
  text-align:center;
  text-shadow:
    -4px -4px 0 #000,
     4px -4px 0 #000,
    -4px  4px 0 #000,
     4px  4px 0 #000;
}

.lead{
  max-width:800px;
  margin:10px auto 0;
  line-height:1.55;
  text-align:left;
  background:var(--rsg-panel-soft);
  border-radius:var(--radius);
  padding:14px 16px;
}

.grid{
  display:grid;
  gap:12px;
  margin-top:14px;
}
@media (min-width: 860px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr 1fr}
}
.card{
  background:var(--rsg-panel-soft);
  border-radius:var(--radius);
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.08);
}
.card h3{margin-bottom:6px}
.muted{opacity:.85}

a{color:var(--rsg-link)}
a:hover{text-decoration:underline}

/* ===== Footer ===== */
.site-footer{
  position:fixed;
  inset:auto 0 0 0;
  height:var(--footer-h);
  z-index:1200;
}

.footer-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  height:var(--footer-h);
  background:var(--rsg-black);
}
.footer-inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 10px;
}
.footer-logo img{
  width:80px;height:80px;
  position:relative;
  top:-20px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.footer-social{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:10px;
  text-decoration:none;
}
.footer-social a:hover,
.footer-social a:focus-visible{
  background:rgba(255,255,255,.08);
  outline:none;
}
.footer-social img{
  width:22px;height:22px;
  object-fit:contain;
}
.footer-corner{
  position:fixed;
  right:0;
  bottom:0;
  pointer-events:none;
}
.footer-corner img{
  width:min(312px, 22.8vw);
  height:auto;
}
@media (max-width: 600px){
  .footer-corner img{width:min(420px, 55vw)}
}


/* v1.0.2 — Hide social icons on small screens */
@media (max-width: 900px){
  .footer-social{
    display:none;
  }
}


/* v0.7 — Games page visual polish */
.games-shell{
  display:grid;
  gap:16px;
}

.games-tiles-row,
.game-static{
  position:relative;
  overflow:hidden;
}

.games-tiles-row::before,
.game-static::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));
}

.games-tiles{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}

.game-tile{
  position:relative;
  min-height:108px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(135deg, rgba(120,0,0,.35), rgba(0,0,0,.18));
  color:var(--rsg-text);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 12px;
  box-shadow:0 8px 18px rgba(0,0,0,.20);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.game-tile::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.game-tile:hover,
.game-tile:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.28);
  border-color:rgba(255,120,120,.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(145,0,0,.42), rgba(0,0,0,.22));
  outline:none;
}
.game-tile.active{
  border-color:rgba(255,120,120,.44);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    linear-gradient(135deg, rgba(170,0,0,.42), rgba(30,0,0,.18));
  box-shadow:0 0 0 1px rgba(255,120,120,.18), 0 14px 28px rgba(0,0,0,.30);
}
.game-tile span{
  font-family:"GoodTimes", system-ui, sans-serif;
  font-size:14px;
  line-height:1.25;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.game-tile img{
  max-width:100%;
  max-height:70px;
  object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}

.game-static{
  line-height:1.65;
  padding:18px 20px;
}
.game-static h2,
.game-static h3{
  font-family:"GoodTimes", system-ui, sans-serif;
  margin-bottom:8px;
}
.game-static p:last-child{
  margin-bottom:0;
}
.game-static a{
  font-weight:600;
}

.games-posts-rail{
  width:min(700px, 100%);
  justify-self:center;
}

.games-posts-list{
  display:grid;
  gap:14px;
}

.games-posts-list > div,
.games-post-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    rgba(100,0,0,.18);
  border-radius:14px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.games-posts-list h3,
.games-post-card h3{
  margin:0 0 6px;
  font-size:22px;
}

.games-post-date{
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:.82;
  margin-bottom:10px;
}

.games-posts-list .body,
.games-post-card .body{
  line-height:1.65;
}

.games-posts-list .body img,
.games-post-card .body img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  display:block;
  margin:10px 0;
}

.games-read-more{
  appearance:none;
  margin-top:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:var(--rsg-text);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}
.games-read-more:hover,
.games-read-more:focus-visible{
  background:rgba(255,255,255,.14);
  outline:none;
}

.games-post-attachments{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.games-attachment-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:12px;
  text-decoration:none;
  color:var(--rsg-text);
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
}
.games-attachment-card:hover,
.games-attachment-card:focus-visible{
  background:rgba(255,255,255,.08);
  outline:none;
}
.games-attachment-name{
  font-weight:600;
  overflow-wrap:anywhere;
}
.games-attachment-action{
  opacity:.9;
  white-space:nowrap;
}

.games-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:14px;
}
.games-pagination button{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:var(--rsg-text);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}
.games-pagination button:hover,
.games-pagination button:focus-visible{
  background:rgba(255,255,255,.14);
  outline:none;
}
.games-pagination button:disabled{
  opacity:.45;
  cursor:default;
}
#pageLabel{
  min-width:72px;
  text-align:center;
  font-weight:600;
}

@media (max-width: 900px){
  .games-tiles{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .games-posts-rail{
    width:100%;
  }
}

@media (max-width: 560px){
  .games-tiles{
    grid-template-columns:1fr;
  }
  .games-posts-list > div,
  .games-post-card,
  .game-static{
    padding:14px;
  }
  .games-posts-list h3,
  .games-post-card h3{
    font-size:20px;
  }
}


.homepage-feature-card .body{max-height:260px;overflow:auto;}
.section-shell .games-posts-rail{min-height:240px;}


/* v1.0.3 — Homepage feed cleanup */
.homepage-page{
  max-width:980px;
}

.homepage-lead{
  max-width:900px;
}

.homepage-feed-shell{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.homepage-feed-header{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.homepage-feed-header p{
  margin:0;
}

.homepage-posts-stack{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.homepage-feature-card{
  width:100%;
}

.homepage-feature-card--lead{
  position:relative;
  overflow:hidden;
  padding:22px 24px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    rgba(120,0,0,.24);
  border:1px solid rgba(255,180,180,.18);
  box-shadow:0 16px 36px rgba(0,0,0,.28);
}

.homepage-feature-card--lead h3{
  font-size:28px;
  line-height:1.2;
}

.homepage-feature-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width: 700px){
  .homepage-feed-header{
    display:block;
  }

  .homepage-feature-card--lead{
    padding:18px 18px;
  }

  .homepage-feature-card--lead h3{
    font-size:24px;
  }
}