/* ═══════════════════════════════════════════
   DailySteam — Glass Shelf Design System
   ═══════════════════════════════════════════ */

/* ── Self-hosted Fonts ── */
/* DM Sans - latin-ext */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* DM Sans - latin */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* DM Sans Italic - latin-ext */
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* DM Sans Italic - latin */
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Space Grotesk - latin-ext */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Space Grotesk - latin */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

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

/* ── Root Variables ── */
:root{
  /* Background */
  --bg-deep:#0f0c29;
  --bg-mid:#302b63;
  --bg-light:#24243e;
  --bg-deep-rgb:15,12,41;

  /* Glass */
  --glass:rgba(255,255,255,0.05);
  --glass-hover:rgba(255,255,255,0.09);
  --glass-border:rgba(255,255,255,0.15);
  --glass-border-hover:rgba(255,255,255,0.28);

  /* Text */
  --text-primary:#ffffff;
  --text-secondary:rgba(255,255,255,0.6);
  --text-tertiary:rgba(255,255,255,0.38);

  /* Accents */
  --accent-violet:#a78bfa;
  --accent-violet-rgb:167,139,250;
  --accent-cyan:#22d3ee;
  --accent-cyan-rgb:34,211,238;
  --accent-pink:#f472b6;
  --accent-pink-rgb:244,114,182;
  --accent-music:#fbbf24;
  --accent-music-rgb:251,191,36;
  --accent-free:#34d399;
  --accent-free-rgb:52,211,153;

  /* Surface system */
  --surface-tint-rgb:255,255,255;
  --surface-bg-subtle:rgba(255,255,255,0.04);
  --surface-bg-medium:rgba(255,255,255,0.06);
  --surface-bg-strong:rgba(255,255,255,0.08);
  --surface-border-subtle:rgba(255,255,255,0.08);
  --surface-border-medium:rgba(255,255,255,0.12);
  --surface-border-strong:rgba(255,255,255,0.18);
  --surface-highlight:rgba(255,255,255,.06);

  /* Shadows */
  --shadow-sm:0 4px 20px rgba(0,0,0,.2);
  --shadow-md:0 8px 32px rgba(0,0,0,.25);
  --shadow-lg:0 24px 80px rgba(0,0,0,.5);
  --shadow-glow-alpha:.08;
  --overlay-bg:rgba(0,0,0,.5);

  /* Orbs */
  --orb-opacity:.45;
  --orb1-rgb:167,139,250;
  --orb1-mid-rgb:99,102,241;
  --orb1-alpha:.6;
  --orb1-mid-alpha:.3;
  --orb2-rgb:34,211,238;
  --orb2-mid-rgb:6,182,212;
  --orb2-alpha:.5;
  --orb2-mid-alpha:.25;
  --orb3-rgb:244,114,182;
  --orb3-mid-rgb:236,72,153;
  --orb3-alpha:.45;
  --orb3-mid-alpha:.2;

  /* Fonts */
  --font-heading:'Space Grotesk',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
}

html{scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  background:linear-gradient(135deg,var(--bg-deep) 0%,var(--bg-mid) 50%,var(--bg-light) 100%);
  color:var(--text-primary);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent-violet);transition:color .2s}


/* ═══════════════════════════════════════════
   Animated Gradient Orbs
   ═══════════════════════════════════════════ */

.orb-container{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:var(--orb-opacity);
  will-change:transform;
  contain:layout paint;
}

.orb--1{
  width:700px;height:700px;
  top:-15%;left:-10%;
  background:radial-gradient(circle,rgba(var(--orb1-rgb),var(--orb1-alpha)) 0%,rgba(var(--orb1-mid-rgb),var(--orb1-mid-alpha)) 40%,transparent 70%);
  animation:float1 22s ease-in-out infinite;
}
.orb--2{
  width:600px;height:600px;
  bottom:-10%;right:-8%;
  background:radial-gradient(circle,rgba(var(--orb2-rgb),var(--orb2-alpha)) 0%,rgba(var(--orb2-mid-rgb),var(--orb2-mid-alpha)) 40%,transparent 70%);
  animation:float2 26s ease-in-out infinite;
}
.orb--3{
  width:500px;height:500px;
  top:40%;left:50%;
  background:radial-gradient(circle,rgba(var(--orb3-rgb),var(--orb3-alpha)) 0%,rgba(var(--orb3-mid-rgb),var(--orb3-mid-alpha)) 40%,transparent 70%);
  animation:float3 30s ease-in-out infinite;
}

@keyframes float1{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(120px,80px) scale(1.08)}
  50%{transform:translate(60px,160px) scale(.95)}
  75%{transform:translate(-60px,100px) scale(1.05)}
}
@keyframes float2{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(-100px,-60px) scale(1.1)}
  50%{transform:translate(-160px,40px) scale(.92)}
  75%{transform:translate(-40px,-100px) scale(1.06)}
}
@keyframes float3{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  33%{transform:translate(calc(-50% + 140px),calc(-50% - 80px)) scale(1.12)}
  66%{transform:translate(calc(-50% - 100px),calc(-50% + 60px)) scale(.9)}
}


/* ═══════════════════════════════════════════
   Glass Mixins
   ═══════════════════════════════════════════ */

.glass{
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:16px;
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 var(--surface-highlight);
}
.glass-strong{
  background:var(--surface-bg-strong);
  backdrop-filter:blur(24px) saturate(200%);
  -webkit-backdrop-filter:blur(24px) saturate(200%);
  border:1px solid var(--surface-border-strong);
  border-radius:16px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(var(--surface-tint-rgb),.08);
}


/* ═══════════════════════════════════════════
   Container Layout
   ═══════════════════════════════════════════ */

.container{
  position:relative;z-index:1;
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

main{
  position:relative;z-index:1;
  max-width:1100px;
  margin:0 auto;
  padding:2rem 20px 4rem;
}


/* ═══════════════════════════════════════════
   Header
   ═══════════════════════════════════════════ */

.header{
  position:sticky;top:0;z-index:100;
  padding:14px 0;
  transition:background .3s;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  padding:14px 28px;
  border-radius:20px;
}
.header-left{display:flex;align-items:center;gap:16px}
.header-right{display:flex;align-items:center;gap:8px;position:relative}

.logo{
  font-family:var(--font-heading);
  font-weight:700;font-size:1.5rem;
  letter-spacing:4px;
  background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  text-decoration:none;
}
.logo:hover{opacity:.85}


/* ═══════════════════════════════════════════
   Theme Picker
   ═══════════════════════════════════════════ */

.theme-btn{
  width:34px;height:34px;
  border-radius:10px;
  border:1px solid var(--surface-border-medium);
  background:var(--surface-bg-medium);
  color:var(--text-secondary);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;
  position:relative;
}
.theme-btn:hover{
  background:rgba(var(--surface-tint-rgb),0.1);
  color:var(--text-primary);
  border-color:var(--glass-border-hover);
}
.theme-btn svg{width:18px;height:18px}

.theme-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:280px;
  max-height:70vh;
  overflow-y:auto;
  padding:16px;
  border-radius:16px;
  background:var(--surface-bg-strong);
  backdrop-filter:blur(24px) saturate(200%);
  -webkit-backdrop-filter:blur(24px) saturate(200%);
  border:1px solid var(--surface-border-strong);
  box-shadow:
    0 16px 48px rgba(0,0,0,.4),
    0 4px 12px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(var(--surface-tint-rgb),.08);
  z-index:300;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px) scale(.96);
  transition:opacity .2s,transform .2s;
}
.theme-dropdown.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.theme-section-label{
  font-family:var(--font-heading);
  font-size:.65rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-tertiary);
  margin-bottom:8px;
}
.theme-section-label+.theme-section-label{margin-top:14px}
.theme-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  margin-bottom:4px;
}
.theme-swatch{
  width:100%;
  aspect-ratio:1;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:3px;
  gap:2px;
  transition:border-color .2s,transform .15s;
}
.theme-swatch:hover{
  transform:scale(1.12);
  border-color:var(--glass-border-hover);
}
.theme-swatch.active{
  border-color:var(--accent-violet);
  box-shadow:0 0 8px rgba(var(--accent-violet-rgb),.3);
}
.theme-swatch-dot{
  width:5px;height:5px;
  border-radius:50%;
}
.theme-swatch[title]:hover::after{
  content:attr(title);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.85);
  color:#fff;
  font-size:.6rem;
  padding:2px 6px;
  border-radius:4px;
  white-space:nowrap;
  pointer-events:none;
  z-index:10;
}


/* ═══════════════════════════════════════════
   Hugo Calendar Compatibility
   ═══════════════════════════════════════════ */

.calendar{
  padding:16px 20px;
  border-radius:16px;
  margin:8px 0 16px;
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 var(--surface-highlight);
}

.calendar-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--glass-border);
}

.calendar-title{
  font-family:var(--font-heading);
  font-weight:700;font-size:.9rem;
  background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.calendar-nav{
  color:var(--accent-violet);
  text-decoration:none;
  font-size:.8rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:8px;
  transition:all .2s;
  min-width:60px;
  text-align:center;
}
.calendar-nav:hover{
  background:rgba(var(--accent-violet-rgb),.12);
}
.calendar-nav-disabled{
  color:var(--text-tertiary);
  opacity:.35;
  cursor:default;
  pointer-events:none;
}

.calendar-grid{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-heading);
  font-size:.72rem;
}
.calendar-grid th{
  color:var(--text-tertiary);
  font-weight:600;
  font-size:.6rem;
  text-transform:uppercase;
  padding:4px 2px;
  text-align:center;
  letter-spacing:.5px;
}
.calendar-grid td{
  text-align:center;
  padding:2px;
}

.calendar-day-link{
  color:var(--accent-violet);
  text-decoration:none;
  font-weight:600;
  display:inline-block;
  width:28px;height:28px;
  line-height:28px;
  border-radius:8px;
  transition:all .2s;
}
.calendar-day-link:hover{
  background:rgba(var(--accent-violet-rgb),.15);
}

.calendar-day-empty{
  color:var(--text-tertiary);
  opacity:.4;
}
.calendar-day-outside{
  color:var(--text-tertiary);
  opacity:.2;
}
.calendar-day-link-other{
  opacity:.5;
}
.calendar-day-link-other:hover{
  opacity:.8;
}

.calendar-day-current .calendar-day-link{
  background:var(--accent-violet);
  color:var(--bg-deep);
}
.calendar-day-current .calendar-day-link:hover{
  opacity:.85;
}

/* Day Navigation (Prev/Next Day) */
.calendar-day-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--glass-border);
}

.day-nav-link{
  color:var(--accent-violet);
  text-decoration:none;
  font-size:.72rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:8px;
  transition:all .2s;
  min-width:60px;
}
.day-nav-link:hover{
  background:rgba(var(--accent-violet-rgb),.12);
}
.day-nav-disabled{
  visibility:hidden;
  min-width:60px;
}


/* ═══════════════════════════════════════════
   Hugo Card Compatibility
   ═══════════════════════════════════════════ */

.card{
  border-radius:18px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .3s;
  background:var(--surface-bg-subtle);
  border:1px solid var(--surface-border-medium);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(var(--surface-tint-rgb),.04);
  display:flex;
  flex-direction:column;
}
.card:hover{
  transform:perspective(1000px) rotateY(2deg) translateY(-4px);
  box-shadow:
    0 16px 50px rgba(0,0,0,.35),
    0 0 30px rgba(var(--accent-violet-rgb),var(--shadow-glow-alpha)),
    inset 0 1px 0 rgba(var(--surface-tint-rgb),.08);
  border-color:var(--glass-border-hover);
}
.card:hover img{transform:scale(1.05)}

.card-img-wrapper{
  position:relative;
  overflow:hidden;
  background:rgba(var(--bg-deep-rgb),.5);
}
.card-img-wrapper::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;
  height:60px;
  background:linear-gradient(to top,rgba(var(--bg-deep-rgb),.85),transparent);
  pointer-events:none;
}

.card img{
  width:100%;
  aspect-ratio:460/215;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}

.card-content{
  padding:14px 16px 16px;
  flex-grow:1;
}

.card-title{
  font-family:var(--font-heading);
  font-weight:700;font-size:.95rem;
  margin-bottom:4px;
  color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.4;
}

.card-meta{
  font-size:.72rem;
  color:var(--text-tertiary);
  margin-bottom:8px;
  display:flex;
  justify-content:space-between;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.card-platforms{
  margin-bottom:8px;
}

/* Badge System */
.badge-container{
  position:absolute;
  bottom:12px;
  right:12px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0.5rem;
  max-width:calc(100% - 24px);
  z-index:2;
}

.badge{
  padding:3px 8px;
  border-radius:6px;
  font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.2;
}

.badge-free{
  background:rgba(var(--accent-free-rgb),.2);
  border:1px solid rgba(var(--accent-free-rgb),.3);
  color:var(--accent-free);
}

.badge-adult{
  background:rgba(var(--accent-pink-rgb),.2);
  border:1px solid rgba(var(--accent-pink-rgb),.3);
  color:var(--accent-pink);
}

/* Tag System */
.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.tag{
  font-size:.6rem;
  padding:2px 7px;
  border-radius:5px;
  background:rgba(var(--surface-tint-rgb),0.05);
  border:1px solid var(--surface-border-subtle);
  color:var(--text-tertiary);
  font-weight:500;
  white-space:nowrap;
  transition:all .2s;
  text-decoration:none;
}
.tag:hover{
  background:rgba(var(--surface-tint-rgb),0.1);
  color:var(--text-secondary);
}

/* Feature Tags */
.feature-list{
  display:flex;
  flex-wrap:wrap;
  column-gap:0.75rem;
  row-gap:0.25rem;
}
.feature-tag{
  color:var(--text-tertiary);
  font-size:.65rem;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:0.3rem;
}
.feature-tag::before{
  content:'';
  color:var(--accent-violet);
  font-size:1rem;
  line-height:0;
}


/* ═══════════════════════════════════════════
   Stats Bar
   ═══════════════════════════════════════════ */

.stats-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem;
  padding:12px 20px;
  margin-bottom:16px;
  border-radius:16px;
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 var(--surface-highlight);
  font-family:var(--font-heading);
  font-size:.82rem;
}

.stats-item{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
}

.stats-label{
  color:var(--accent-violet);
  font-weight:600;
  text-decoration:none;
  transition:opacity .2s;
}
.stats-label:hover{
  opacity:.8;
  text-decoration:underline;
}

.stats-value{
  color:var(--accent-violet);
  font-weight:700;
}

.stats-detail{
  color:var(--text-tertiary);
  font-size:.72rem;
}

.stats-divider{
  color:var(--glass-border);
  margin:0 0.25rem;
}


/* ═══════════════════════════════════════════
   Type Sections & Release Grid
   ═══════════════════════════════════════════ */

.type-group{
  margin-bottom:3rem;
}

.type-header{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.2rem;
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  gap:1rem;
  background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.type-header::after{
  content:'';
  flex-grow:1;
  height:1px;
  background:var(--glass-border);
}

.type-section{
  margin-bottom:3rem;
  scroll-margin-top:80px;
}
.type-section:last-child{
  margin-bottom:0;
}

.release-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

/* Page Title */
.page-title{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:1.5rem;
  text-align:center;
}

/* Hero section */
.hero-info h2{
  font-family:var(--font-heading);
  font-size:1.8rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:0.5rem;
}

/* Single page hero */
.release-hero{
  display:flex;
  gap:2rem;
  margin-bottom:2rem;
}
.hero-visual{
  flex-shrink:0;
  width:300px;
}
.hero-img{
  width:100%;
  border-radius:16px;
  box-shadow:var(--shadow-md);
}
.data-sheet{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.5rem 1rem;
  font-size:.85rem;
}
.data-label{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-tertiary);
}


/* ═══════════════════════════════════════════
   Steam Link Button
   ═══════════════════════════════════════════ */

.steam-link{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;
  border-radius:6px;
  background:var(--surface-bg-medium);
  border:1px solid rgba(var(--surface-tint-rgb),0.1);
  color:var(--text-tertiary);
  font-size:.65rem;font-weight:600;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.5px;
  transition:all .25s;
  flex-shrink:0;
}
.steam-link:hover{
  background:rgba(var(--accent-violet-rgb),.15);
  border-color:rgba(var(--accent-violet-rgb),.3);
  color:var(--accent-violet);
}


/* ═══════════════════════════════════════════
   Pagination
   ═══════════════════════════════════════════ */

.pagination{
  margin-top:2rem;
  display:flex;
  gap:1rem;
  justify-content:center;
}
.pagination .tag{
  padding:6px 16px;
  font-size:.75rem;
}


/* ═══════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════ */

.footer{
  position:relative;
  z-index:1;
  padding:3rem 20px 2rem;
  text-align:center;
  color:var(--text-tertiary);
  font-size:.78rem;
  margin-top:2rem;
  border-top:1px solid var(--glass-border);
  background:var(--surface-bg-subtle);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
}
.footer a{
  color:var(--text-secondary);
  text-decoration:underline;
  transition:color .2s;
}
.footer a:hover{
  color:var(--accent-violet);
}


/* ═══════════════════════════════════════════
   Scrollbar
   ═══════════════════════════════════════════ */

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--surface-tint-rgb),0.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--surface-tint-rgb),0.2)}


/* ═══════════════════════════════════════════
   Template Utility Classes
   ═══════════════════════════════════════════ */

/* single.html - release date label */
.release-date-label{
  font-family:var(--font-mono);
  color:var(--steam-blue,var(--accent-violet));
  font-size:.9rem;
  margin-bottom:.5rem;
}

/* single.html - type value */
.text-uppercase{
  text-transform:uppercase;
}

/* single.html - steam button */
.btn-steam{
  background:var(--bg-card,var(--surface-bg-medium));
  color:#fff;
  text-decoration:none;
}

/* single.html - description section */
.content-section{
  max-width:800px;
}
.section-heading{
  color:var(--text-muted,var(--text-tertiary));
  font-size:.8rem;
  letter-spacing:2px;
  margin-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,0.1);
  padding-bottom:.5rem;
}
.description-body{
  font-size:1.1rem;
  line-height:1.8;
}

/* card.html - platform icons row */
.card-platforms{
  display:flex;
  gap:.75rem;
  margin-bottom:.75rem;
}
.platform-label{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:var(--text-muted,var(--text-tertiary));
  font-size:.75rem;
  font-weight:600;
}

/* card.html - description truncation */
.card-description{
  font-size:.85rem;
  color:var(--text-muted,var(--text-tertiary));
  line-height:1.5;
  margin-bottom:1rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  line-clamp:3;
  overflow:hidden;
}

/* card.html - title link */
.card-title-link{
  text-decoration:none;
  color:inherit;
}

/* list.html - feature tags */
.feature-list{
  margin-top:.75rem;
}

/* list.html - hero subtitle */
.hero-subtitle{
  color:var(--text-muted,var(--text-tertiary));
}

/* list.html - pagination */
.pagination .tag{
  text-decoration:none;
}

/* single.html - tag sizing */
.tag-sm{
  font-size:.8rem;
  padding:4px 12px;
}

/* single.html - section margin */
.mt-2{margin-top:2rem}
.mb-2{margin-bottom:2rem}
.mb-3{margin-bottom:3rem}

/* footer spacing */
.footer p+p{margin-top:1rem}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */

@media(max-width:768px){
  .release-grid{grid-template-columns:1fr}
  .header-inner{padding:12px 16px;border-radius:14px}
  .logo{font-size:1.2rem;letter-spacing:3px}
  .container,main{padding-left:14px;padding-right:14px}
  .orb--1{width:450px;height:450px}
  .orb--2{width:380px;height:380px}
  .orb--3{width:320px;height:320px}
  .theme-dropdown{right:-40px;width:260px}

  .calendar{padding:12px 14px}
  .calendar-grid{font-size:.68rem}
  .calendar-grid th{font-size:.55rem;padding:3px 1px}
  .calendar-grid td{padding:1px}
  .calendar-day-link{width:24px;height:24px;line-height:24px;font-size:.68rem}

  .stats-bar{padding:10px 14px;font-size:.75rem;gap:.35rem}
  .stats-detail{font-size:.65rem}

  .type-header{font-size:1rem}

  .release-hero{flex-direction:column}
  .hero-visual{width:100%}
}

@media(max-width:480px){
  .header-left{flex-direction:column;align-items:flex-start;gap:8px}
  .orb--1{width:300px;height:300px}
  .orb--2{width:250px;height:250px}
  .orb--3{width:200px;height:200px}
}

/* ═══════════════════════════════════════════
   Reduced Motion
   ═══════════════════════════════════════════ */

@media(prefers-reduced-motion:reduce){
  .orb{animation:none !important}
  .fade-up{animation:none !important;opacity:1;transform:none}
  .card{animation:none !important}
  .calendar{animation:none !important}
  .stats-bar{animation:none !important}
  *{transition-duration:0.01ms !important}
}


/* ═══════════════════════════════════════════
   Fade-in Animations
   ═══════════════════════════════════════════ */

.fade-up{
  opacity:0;
  transform:translateY(18px);
  animation:fadeUp .5s ease forwards;
}
@keyframes fadeUp{
  to{opacity:1;transform:translateY(0)}
}
.card{animation:fadeUp .4s ease forwards}
.calendar{animation:fadeUp .5s ease forwards}
.stats-bar{animation:fadeUp .5s ease forwards;animation-delay:.1s}