/*
 Theme Name: GamesOfWisdom – Hyrule Citadel
 Description: Stone castle at night, Triforce gold, pink magic and violet crystals.
 Version: 1.0
 Author: Custom
*/

/* -----------------------------------------------
   Fonts – рунические заголовки + мягкий текст
   ----------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Nunito+Sans:wght@400;500;600;700&display=swap');

/* -----------------------------------------------
   Design Tokens – ночной замок, трифорс и магия
   ----------------------------------------------- */
:root{
  /* Фоны – холодная ночь, камень */
  --bg-page: #050610;
  --bg-panel: #07091c;
  --bg-card: #0b0f26;
  --bg-soft: #05071a;

  /* Золото Трифорса (бывший amber) */
  --amber-main: #f4e47b;
  --amber-strong: #f2c35a;
  --amber-soft: #fff9b7;
  --amber-deep: #c9a548;

  /* Магические акценты (розовая/фиолетовая магия вместо ржавчины) */
  --rust-main: #ff69c8;   /* ярко-розовая магия */
  --rust-soft: #ff8fe0;   /* мягкие розовые вспышки */
  --wine-deep: #2b0a3a;   /* глубокий фиолетовый, кристаллы */

  /* Лунный свет / внутренний свет */
  --sand-main: #e7dcff;   /* основной текст – холодный свет */
  --sand-soft: #cbbefa;

  /* Текст */
  --text-main: #f3ecff;
  --text-muted: #a7a0d5;
  --text-soft: #8a83c5;
  --text-strong: #ffffff;

  /* Контуры / линии – арканическая подсветка */
  --line: rgba(151, 135, 255, 0.07);
  --line-strong: rgba(244, 228, 123, 0.9);
  --ring: rgba(244, 228, 123, 0.95);

  /* Тени – глубокие фиолетовые */
  --shadow-soft: 0 16px 38px rgba(4, 0, 45, 0.9);
  --shadow-card: 0 26px 70px rgba(2, 0, 40, 0.96);
  --shadow-hero: 0 42px 120px rgba(0, 0, 0, 1);

  /* Радиусы – чуть более резкие, как обточенный камень */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;

  /* Переходы */
  --tr-fast: .12s ease-out;
  --tr-med: .22s cubic-bezier(0.18, 0.89, 0.32, 1.12);
}

/* -----------------------------------------------
   Reset / Base
   ----------------------------------------------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }

body{
  font-family: 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at 10% 0, #151a3a 0, transparent 60%),
    radial-gradient(circle at 90% 0, #1b1338 0, transparent 60%),
    radial-gradient(circle at 0 110%, #141534 0, transparent 65%),
    radial-gradient(circle at 100% 130%, #050615 0, transparent 70%),
    linear-gradient(180deg,#040415 0%, #03020a 100%);
  background-attachment: fixed;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

/* Шум, лунные лучи и магические искры */
body::before{
  content:"";
  position: fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(110px 70px at 15% 0, rgba(244,228,123,.32), transparent 70%),
    radial-gradient(120px 80px at 85% 0, rgba(255,105,200,.35), transparent 70%),
    radial-gradient(1px 1px at 20% 60%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 80% 40%, rgba(163,136,255,.4), transparent 60%);
  mix-blend-mode: screen;
  opacity:.55;
}
body::after{
  content:"";
  position: fixed; inset:0; pointer-events:none; z-index:-2;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.5) 0,
      rgba(0,0,0,0.5) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity:.3;
}

.container{ max-width: 1180px; margin:0 auto; padding:0 20px; }

/* -----------------------------------------------
   Header – верхняя кромка замка
   ----------------------------------------------- */
header{
  position: fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:
    linear-gradient(180deg,#10143a,#050618);
  border-bottom: 1px solid rgba(244,228,123,0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,1);
  padding:.75rem 0 .9rem;
}
header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 0, rgba(244,228,123,0.28), transparent 60%),
    radial-gradient(circle at 90% 0, rgba(255,105,200,0.32), transparent 60%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.04) 0,
      rgba(255,255,255,0.04) 2px,
      transparent 2px,
      transparent 6px
    );
  mix-blend-mode: overlay;
  opacity:.7;
}
.header-content{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.2rem;
  z-index:1;
}

/* Logo – каменная табличка с трифорсом */
.logo{
  font-family: 'Teko', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration:none;
  color: var(--sand-main);
  position:relative;
  padding: .35rem 1.8rem .35rem 2.7rem;
  background:
    linear-gradient(135deg,#161835,#070818);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 16px 30px rgba(0,0,0,0.95);
  border:1px solid rgba(123,107,255,0.55);
}
.logo::before{
  /* треугольник-трифорс слева */
  content:"";
  position:absolute;
  left:.7rem; top:50%;
  transform:translateY(-50%);
  width:1.8rem;
  height:1.5rem;

  /* золотой градиент */
  background: linear-gradient(180deg,#fffad0,#f2c35a);

  /* вырезаем форму треугольника */
  clip-path: polygon(50% 0, 0 100%, 100% 100%);

  /* свечение вокруг */
  box-shadow:
    0 0 18px rgba(244,228,123,0.9),
    0 0 40px rgba(255,105,200,0.6);
}

.logo::after{
  /* светящаяся линия рунической гравировки снизу */
  content:"";
  position:absolute;
  left:2.2rem; right:.9rem; bottom:4px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg,rgba(244,228,123,0.95),rgba(255,105,200,0));
  opacity:.9;
}

/* User menu */
.user-menu{ display:flex; align-items:center; gap:1.1rem; }
.user-info{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.9rem;
  color: var(--text-main);
}
.user-info span{ white-space:nowrap; }
.user-info a{
  color: var(--sand-soft);
  text-decoration:none;
  font-weight:600;
  position:relative;
  padding-inline:.2rem;
}
.user-info a::after{
  content:"";
  position:absolute;
  left:0; bottom:-3px;
  width:100%; height:2px;
  background: linear-gradient(90deg,var(--rust-main),transparent);
  transform-origin:left;
  transform:scaleX(0);
  transition: transform var(--tr-med);
}
.user-info a:hover::after{
  transform:scaleX(1);
}

/* Points – магический кристалл очков */
.points{
  background:
    radial-gradient(circle at 0 0, rgba(255,105,200,0.3), transparent 60%),
    linear-gradient(135deg,#111337,#06081b);
  padding:.35rem 1rem;
  border-radius:999px;
  border:1px solid rgba(244,228,123,0.9);
  box-shadow:0 10px 25px rgba(4,0,40,0.9);
  font-weight:700;
  font-size:.86rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  color: var(--sand-main);
}
.points::before{
  content:"◆";
  font-size:.9rem;
  color: var(--rust-soft);
}

/* Auth buttons – кнопки портала */
.auth-buttons a{
  color: var(--sand-soft);
  text-decoration:none;
  padding:.45rem 1.1rem;
  border-radius:999px;
  border:1px solid rgba(151,135,255,0.9);
  margin-left:.35rem;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  background:
    linear-gradient(135deg,#14163b,#080a1e);
  box-shadow:
    0 9px 20px rgba(2,0,32,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.03);
  transition:
    background var(--tr-fast),
    transform var(--tr-fast),
    box-shadow var(--tr-med),
    border-color var(--tr-fast),
    color var(--tr-fast);
}
.auth-buttons a:hover{
  background:
    linear-gradient(135deg,#1f2357,#0b0d28);
  border-color: var(--rust-main);
  color: var(--text-strong);
  transform: translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,1);
}

/* -----------------------------------------------
   Main layout
   ----------------------------------------------- */
main{
  margin-top: 90px;
  padding: 2.7rem 0 3.2rem;
}

/* -----------------------------------------------
   Banner / Disclaimer – табличка у входа в замок
   ----------------------------------------------- */
.disclaimer-banner{
  position:relative;
  background:
    radial-gradient(circle at 0 0, rgba(255,105,200,0.26), transparent 60%),
    radial-gradient(circle at 110% -10%, rgba(124,95,255,0.35), transparent 70%),
    linear-gradient(135deg,#121539,#07081b);
  border-radius: var(--r-lg);
  padding: 1.8rem 2rem 1.7rem;
  margin-bottom: 2.6rem;
  border: 1px solid rgba(151,135,255,0.9);
  box-shadow: var(--shadow-card);
  color: var(--text-main);
  overflow:hidden;
}
.disclaimer-banner::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: calc(var(--r-lg) - 10px);
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03);
  pointer-events:none;
}
.disclaimer-banner::after{
  content:"";
  position:absolute;
  left:8%; right:8%; bottom:-40px;
  height:70px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0, rgba(0,0,0,0.85), transparent 70%);
  opacity:.9;
}
.disclaimer-banner h2{
  font-family:'Teko', system-ui, sans-serif;
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing:.18em;
  margin-bottom:.6rem;
  color: var(--amber-soft);
}
.disclaimer-banner p{
  font-size: .97rem;
  color: var(--text-muted);
}

/* -----------------------------------------------
   Hero – главный зал замка
   ----------------------------------------------- */
.hero{
  margin-top:1.2rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.5rem;
  padding: 3.1rem 2.4rem 2.7rem;
  background:
    radial-gradient(circle at 15% -10%, rgba(244,228,123,0.3), transparent 65%),
    radial-gradient(circle at 90% 0, rgba(255,105,200,0.22), transparent 65%),
    linear-gradient(135deg,#161a43 0%, #0b0f2b 45%, #050618 100%);
  border-radius: var(--r-lg);
  border: 1px solid rgba(151,135,255,0.9);
  box-shadow: var(--shadow-hero);
  position:relative;
  overflow:hidden;
}

/* FIX — пузырь под текстом */
.hero{
  z-index: 0; /* текст выше псевдоэлементов */
}

.hero::before,
.hero::after{
  z-index: -1;        /* уводим фоновые элементы под текст */
  pointer-events: none;
}

.hero::before{
  /* расфокусированные магические кристаллы */
  content:"";
  position:absolute;
  right:-70px; top:-40px;
  width:240px; height:180px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,105,200,0.45), transparent 70%);
  opacity:.6;
}
.hero::after{
  /* подсвеченный мраморный пол */
  content:"";
  position:absolute;
  left:50%; bottom:-80px;
  width:420px; height:190px;
  transform: translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 0, rgba(0,0,0,0.9), transparent 72%);
  box-shadow:0 0 45px rgba(0,0,0,0.95);
}
.hero h1{
  font-family:'Teko', system-ui, sans-serif;
  font-size: 2.7rem;
  max-width: 580px;
  color: var(--sand-main);
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:.35rem;
  text-shadow:0 0 16px rgba(0,0,0,0.9);
}
.hero h1 span{
  color: var(--rust-soft);
}
.hero p{
  font-size: 1.02rem;
  max-width: 520px;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
}

/* -----------------------------------------------
   Primary Button – кристальная кнопка "играть"
   ----------------------------------------------- */
.play-btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  border-radius:999px;
  padding:.9rem 2.1rem;
  border: 0;
  font-weight: 800;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  text-decoration:none;
  cursor:pointer;
  background:
    linear-gradient(90deg,var(--rust-main),var(--amber-strong));
  color:#19061a;
  box-shadow: 0 20px 40px rgba(0,0,0,.96);
  position:relative;
  transform: translateY(0);
  transition:
    transform var(--tr-fast),
    box-shadow var(--tr-med),
    filter var(--tr-med);
}
.play-btn::before{
  content:"";
  width:14px; height:14px;
  border-radius:999px;
  border:2px solid rgba(25,7,50,0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    0 0 10px rgba(0,0,0,0.9);
}
.play-btn:hover{
  transform: translateY(-2px);
  filter:brightness(1.06);
  box-shadow: 0 26px 56px rgba(0,0,0,1);
}

/* Вторичная кнопка – прозрачная магическая рамка */
.play-btn.alt,
.play-btn[style*="background: transparent"]{
  background: transparent !important;
  color: var(--rust-soft) !important;
  border: 1px solid rgba(151,135,255,0.95) !important;
  box-shadow:none !important;
}
.play-btn.alt::before,
.play-btn[style*="background: transparent"]::before{
  border-color:rgba(244,228,123,0.95);
  box-shadow:0 0 12px rgba(244,228,123,0.7);
}

/* -----------------------------------------------
   Games Section – залы испытаний
   ----------------------------------------------- */
.games-section{
  padding: 3.1rem 0 2.6rem;
}
.games-section h2{
  font-family:'Teko', system-ui, sans-serif;
  text-align:center;
  font-size: 2.1rem;
  text-transform:uppercase;
  letter-spacing:.26em;
  color: var(--sand-main);
  margin-bottom: 2rem;
  text-shadow: 0 0 22px rgba(0,0,0,0.9);
}

.games-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.9rem;
}

.game-card{
  background:
    linear-gradient(135deg,#101437,#07091b);
  border-radius: var(--r-md);
  padding: 1.6rem 1.7rem 1.5rem;
  position: relative;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(35,31,92,1);
  text-align:left;
  overflow:hidden;
  transition:
    transform var(--tr-med),
    box-shadow var(--tr-med),
    border-color var(--tr-med),
    background var(--tr-med);
}
.game-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.05) 0,
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 5px
    );
  opacity:.32;
  pointer-events:none;
}
.game-card::after{
  content:"";
  position:absolute;
  inset:11px;
  border-radius: calc(var(--r-md) - 9px);
  border: 1px solid rgba(0,0,0,0.65);
  opacity:.75;
  pointer-events:none;
}
.game-card:hover{
  transform: translateY(-7px);
  border-color: rgba(151,135,255,0.95);
  box-shadow: var(--shadow-card);
  background:
    radial-gradient(circle at 0 0, rgba(255,105,200,0.26), transparent 60%),
    linear-gradient(135deg,#151a44,#07091b);
}

.game-card h3{
  font-family:'Teko', system-ui, sans-serif;
  font-size: 1.4rem;
  margin-top:.9rem;
  margin-bottom:.35rem;
  color: var(--sand-main);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.game-card p{
  font-size:.95rem;
  color: var(--text-soft);
  margin-bottom: 1.15rem;
}

/* -----------------------------------------------
   Content Sections – свитки знаний
   ----------------------------------------------- */
.content-section{
  padding: 2.9rem 0;
}
.content-section h2{
  font-family:'Teko', system-ui, sans-serif;
  text-align:center;
  font-size: 1.9rem;
  text-transform:uppercase;
  letter-spacing:.24em;
  margin-bottom: 1.5rem;
  color: var(--sand-main);
}
.content-section p{
  max-width: 780px;
  margin: 0 auto .9rem;
  text-align:center;
  color: var(--text-muted);
  font-size:.97rem;
}

/* -----------------------------------------------
   FAQ – панели с древними табличками
   ----------------------------------------------- */
.faq-item{
  background:
    radial-gradient(circle at 0 0, rgba(255,105,200,0.2), transparent 60%),
    linear-gradient(135deg,#101437,#080a1f);
  border-radius: var(--r-md);
  padding: 1.3rem 1.6rem;
  margin-bottom: 1.05rem;
  border: 1px solid rgba(35,31,92,0.95);
  box-shadow: var(--shadow-soft);
  position: relative;
}
.faq-item h3{
  font-family:'Teko', system-ui, sans-serif;
  font-size:1.1rem;
  margin-bottom:.35rem;
  color: var(--rust-soft);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.faq-item p{
  font-size:.94rem;
  color: var(--text-soft);
}

/* -----------------------------------------------
   Contact Form – магический терминал связи
   ----------------------------------------------- */
.contact-form{
  max-width: 640px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 10% 0, rgba(244,228,123,0.28), transparent 65%),
    radial-gradient(circle at 85% 0, rgba(255,105,200,0.26), transparent 65%),
    linear-gradient(145deg,#14163b,#080a1f);
  border-radius: var(--r-lg);
  padding: 2rem 2rem 2.3rem;
  border: 1px solid rgba(151,135,255,0.95);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow:hidden;
}
.contact-form::before{
  content:"";
  position:absolute;
  left:50%; top:-90px;
  width:260px; height:260px;
  transform: translateX(-50%);
  border-radius:50%;
  border: 1px solid rgba(244,228,123,0.7);
  box-shadow: 0 0 70px rgba(255,105,200,0.6);
  opacity:.32;
}
.contact-form::after{
  content:"";
  position:absolute;
  left:50%; bottom:-100px;
  width:280px; height:280px;
  transform: translateX(-50%);
  border-radius:50%;
  background: radial-gradient(circle, rgba(0,0,0,0.9), transparent 72%);
  opacity:.8;
}

.form-group{
  margin-bottom: 1.2rem;
}
.form-group label{
  display:block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:.45rem;
  color: var(--text-soft);
}
.form-group input,
.form-group textarea{
  width:100%;
  border-radius: var(--r-sm);
  border: 1px solid rgba(43,39,104,0.95);
  background:#050618;
  padding:.85rem 1rem;
  font-size:.95rem;
  color: var(--text-main);
  outline:none;
  transition:
    border-color var(--tr-med),
    box-shadow var(--tr-med),
    background var(--tr-med),
    transform var(--tr-fast);
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:#6f6ab4;
}
.form-group input:focus,
.form-group textarea:focus{
  border-color: var(--rust-main);
  box-shadow: 0 0 0 3px rgba(255,105,200,0.5);
  background:#080a1e;
  transform: translateY(-1px);
}

.submit-btn{
  margin-top:.4rem;
  display:inline-block;
  width:100%;
  border-radius: 999px;
  padding:1rem 1.2rem;
  border:none;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-size:.8rem;
  background: linear-gradient(90deg,var(--rust-main),var(--amber-strong));
  color:#19061a;
  cursor:pointer;
  box-shadow: 0 24px 52px rgba(0,0,0,1);
  transition: transform var(--tr-fast), box-shadow var(--tr-med), filter var(--tr-med);
}
.submit-btn:hover{
  transform: translateY(-2px);
  filter:brightness(1.06);
  box-shadow: 0 32px 72px rgba(0,0,0,1);
}

/* -----------------------------------------------
   Profile / Stats – панель героя
   ----------------------------------------------- */
.profile-section{
  background:
    radial-gradient(circle at 15% 0, rgba(244,228,123,0.32), transparent 60%),
    linear-gradient(145deg,#151a42,#080a1f);
  border-radius: var(--r-lg);
  padding: 1.8rem 1.8rem;
  margin-bottom:1.9rem;
  border: 1px solid rgba(151,135,255,0.9);
  box-shadow: var(--shadow-soft);
  position: relative;
}
.profile-section::before{
  content:"";
  position:absolute;
  top:10px; right:16px;
  width:76px; height:76px;
  border-radius:50%;
  border: 1px dashed rgba(244,228,123,0.8);
  box-shadow: 0 0 40px rgba(255,105,200,0.7);
  opacity:.7;
}
.profile-section h3{
  font-family:'Teko', system-ui, sans-serif;
  font-size:1.5rem;
  margin-bottom:.9rem;
  color: var(--sand-main);
  text-transform:uppercase;
  letter-spacing:.18em;
}
.stats-grid{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.stat-card{
  flex:1;
  min-width:150px;
  background:#090c25;
  border-radius: var(--r-md);
  padding:1rem 1.1rem;
  text-align:center;
  border: 1px solid rgba(43,39,104,1);
}
.stat-value{
  display:block;
  font-size:1.7rem;
  font-weight:800;
  color: var(--rust-soft);
}
.stat-label{
  font-size:.86rem;
  color: var(--text-soft);
}

/* -----------------------------------------------
   Auth Forms – врата в цитадель
   ----------------------------------------------- */
.auth-form{
  max-width:420px;
  margin:2.8rem auto;
  background:
    radial-gradient(circle at 10% 0, rgba(244,228,123,0.3), transparent 60%),
    radial-gradient(circle at 90% 100%, rgba(255,105,200,0.3), transparent 60%),
    linear-gradient(145deg,#151a42,#080a1f);
  border-radius: var(--r-lg);
  padding:2rem 1.9rem 1.9rem;
  border: 1px solid rgba(151,135,255,0.95);
  box-shadow: var(--shadow-card);
}
.auth-form h2{
  font-family:'Teko', system-ui, sans-serif;
  font-size:1.9rem;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.3em;
  margin-bottom:1.5rem;
  color: var(--sand-main);
}
.form-toggle{
  margin-top:1.1rem;
  text-align:center;
  font-size:.9rem;
}
.form-toggle a{
  color: var(--rust-soft);
  text-decoration:none;
  border-bottom:1px solid rgba(255,143,224,0.8);
}
.form-toggle a:hover{
  border-bottom-color: rgba(255,255,255,0.95);
}

/* -----------------------------------------------
   Footer – нижняя кромка цитадели
   ----------------------------------------------- */
footer{
  margin-top: 3.2rem;
  padding: 2.1rem 0;
  border-top: 1px solid rgba(35,31,92,0.9);
  background:
    linear-gradient(180deg,#040416,#02020a);
  color: var(--text-soft);
  font-size:.88rem;
}
footer a{
  color: var(--rust-soft);
  text-decoration:none;
}
footer a:hover{
  text-decoration:underline;
}

/* -----------------------------------------------
   Accessibility & Focus
   ----------------------------------------------- */
a{ color: var(--rust-soft); }
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

/* -----------------------------------------------
   Responsive
   ----------------------------------------------- */
@media (max-width: 768px){
  .header-content{
    flex-direction:column;
    align-items:flex-start;
    gap:.6rem;
  }
  .logo{
    font-size:1.7rem;
  }
  main{
    margin-top: 100px;
  }
  .hero{
    padding: 2.4rem 1.7rem 2.2rem;
  }
  .hero h1{
    font-size:2.2rem;
  }
  .games-grid{
    grid-template-columns:1fr;
  }
  .points{
    font-size:.8rem;
  }
}