:root {
  --gap: clamp(12px, 2vw, 20px);
  --radius: 12px;
  --page-max: 1400px;

  --card-bg: rgba(255,255,255,0.045);
  --card-border: rgba(255,255,255,0.08);
  --badge-bg: rgba(0,0,0,0.45);
  --badge-border: rgba(255,255,255,0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 20% 10%, #17306a 0%, transparent 55%),
    radial-gradient(900px 500px at 80% 30%, #1d6d5a 0%, transparent 55%),
    linear-gradient(180deg, #070a12, #0b1630);
  background-attachment: fixed;
}

/* Sticky header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(11, 11, 13, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brandline {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.site-title {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 750;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Site version toggle */
.version-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff; /* ensure white */
  white-space: nowrap;
}

.version-toggle .label {
  opacity: 0.85;
  font-size: 0.95rem;
}

.version-toggle .pill {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.version-toggle a {
  padding: 6px 12px;
  text-decoration: none;
  color: #fff;          /* ensure white */
  opacity: 0.85;
  font-size: 0.95rem;
}

.version-toggle a:hover { opacity: 1; }

.version-toggle a.active {
  opacity: 1;
  text-decoration: underline;        /* active underline */
  text-underline-offset: 3px;
  background: rgba(255,255,255,0.14);
}

.version-toggle .divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.14);
}

/* Socials */
.socials {
  display: flex;
  gap: 0;                 /* separators handle spacing */
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Links */
.socials a {
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
  font-size: 0.95rem;

  display: inline-flex;
  align-items: center;

  position: relative;
  padding: 0 12px;        /* equal left/right so text is centered */
}

.socials a:hover { opacity: 1; }

/* Vertical divider between links */
.socials a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;               /* divider sits at the edge of the padded area */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 0.9em;
  background: rgba(255,255,255,0.35);
  opacity: 0.85;
}

@media (max-width: 700px) {
  .socials {
    flex-basis: 100%;    /* NEW: forces socials onto its own row */
    justify-content: flex-end; /* optional: nicer on mobile */
  }
}

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px);
  display: grid;
  gap: var(--gap);
}

/* RESTORED: responsive image scaling */
img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.lightbox-overlay img {
  width: auto !important;
  height: auto !important;
  max-width: 85vw;
  max-height: 85vh;

  object-fit: contain;
  aspect-ratio: auto;

  border-radius: 0;
  box-shadow: none;
}

/* Hero (images page) */
.hero {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: clamp(10px, 1.5vw, 16px);
  border-radius: calc(var(--radius) + 4px);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.hero img { max-width: 100%; }

.meta {
  margin-top: 10px;
  text-align: center;
}

/* Hero timestamp */
.meta-hero {
  font-size: 1rem;
  letter-spacing: 0.08em;
  opacity: 0.92;

  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}

.today-label {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.hero-date {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
}

/* Thumbs */
.thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.thumb {
  margin: 0;
  text-align: center;

  padding: clamp(10px, 1.5vw, 16px);
  border-radius: calc(var(--radius) + 4px);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.thumb img { margin-bottom: 10px; }

.meta-thumb {
  font-size: 0.85rem;
  opacity: 0.85;

  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  margin-bottom: 12px;
}

/* -------- Text-only page styles -------- */

.text-entry {
  padding: clamp(10px, 1.5vw, 16px);
  border-radius: calc(var(--radius) + 4px);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.text-entry-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.text-entry-meta {
  opacity: 0.85;
  font-size: 0.95rem;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
}

.text-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--gap);
}

.mode-card {
  position: relative;
  padding: 14px;
  min-height: 96px;

  border-radius: calc(var(--radius) + 4px);
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--card-border);

  display: flex;
  align-items: center;
  justify-content: center;
}

.mode-card.hero {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.mode-value {
  font-size: 1.15rem;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
}

.mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  padding: 2px;

  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 65%,
    rgba(var(--mode-color), 0.0) 72%,
    rgba(var(--mode-color), 0.85) 100%
  );

  /* mask to keep only the border ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.mode-3v3elimination        { --mode-color: 3, 97, 82; }
.mode-5v5elimination        { --mode-color: 1, 93, 112; }
.mode-assaultmaps           { --mode-color: 69, 16, 122; }
.mode-bountyhunter          { --mode-color: 185, 107, 1; }
.mode-capturetheflag        { --mode-color: 22, 66, 87; }
.mode-clashmaps             { --mode-color: 196, 66, 30; }
.mode-ctfblitz              { --mode-color: 146, 23, 54; }
.mode-deathmatch            { --mode-color: 28, 45, 114; }
.mode-teamdeathmatch        { --mode-color: 145, 23, 54; }
.mode-mirroreddeathmatch    { --mode-color: 1, 111, 68; }
.mode-mysterydeathmatch     { --mode-color: 46, 45, 136; }
.mode-herogauntlet          { --mode-color: 189, 98, 37; }
.mode-limitedduel           { --mode-color: 104, 9, 3; }
.mode-lowgravity            { --mode-color: 39, 48, 115; }
.mode-mischiefmagicwonderland { --mode-color: 17, 40, 115; }
.mode-mysteryduel           { --mode-color: 34, 2, 105; }
.mode-nolimits              { --mode-color: 1, 105, 174; }
.mode-showdownshuffle       { --mode-color: 50, 31, 115; }
.mode-totalmayhem           { --mode-color: 226, 149, 41; }
.mode-winterbrawls          { --mode-color: 94, 150, 233; }
.mode-roadhogscatchamari    { --mode-color: 240, 148, 149; }
.mode-askldfalsca           { --mode-color: 253, 163, 63; }

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 3000;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: zoom-out;
}

.lightbox-overlay img {
  max-width: 85vw;
  max-height: 85vh;
  border-radius: 0;
  box-shadow: none;
}

.lightbox-overlay img {
  animation: zoomIn 0.15s ease-out;
}

@keyframes zoomIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.zoomable {
  cursor: zoom-in;
}

/* Tablet/Mobile */
@media (max-width: 900px) {
  .thumbs { grid-template-columns: 1fr; }

  .text-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .mode-card.hero {
    grid-column: auto;
    grid-row: auto;
  }

  .version-toggle .label {
    display: none; /* optional: saves space on small screens */
  }
}

.site-footer {
  margin-top: clamp(24px, 4vw, 48px);
  padding: 14px 16px;

  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(255,255,255,0.12);

  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}

.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  text-align: center;
}

.site-footer a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}