:root {
  --ink: #f2e4c7;
  --muted: #bfb39f;
  --panel: rgba(24, 25, 25, .91);
  --panel-soft: rgba(35, 36, 36, .82);
  --edge: #62676a;
  --edge-dark: #242728;
  --amber: #e49a22;
  --amber-soft: #ffd47a;
  --nav-height: 88px;
  --max: 1380px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 26px); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  background: #161616 url('../images/Background.jpg') center center / cover fixed no-repeat;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background: inherit;
}
.background-shade {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,10,.10), rgba(10,10,10,.34) 52%, rgba(10,10,10,.58));
}
a { color: inherit; }
.hero {
  min-height: 54vh;
  display: grid;
  place-items: center;
  padding: 34px 24px 20px;
}
.logo {
  display: block;
  width: min(820px, 76vw);
  height: auto;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.main-nav {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--nav-height);
  display: flex; align-items: center;
  background: linear-gradient(to bottom, rgba(12,13,13,.92), rgba(20,21,21,.84));
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.nav-inner {
  width: min(var(--max), 96vw); margin: 0 auto;
  display: flex; justify-content: center; gap: 8px;
}
.game-button {
  position: relative; display: grid; place-items: center;
  width: min(245px, 19vw); aspect-ratio: 4 / 1;
  text-decoration: none;
  background: url('../images/Button_GUI.png') center / 100% 100% no-repeat;
  transition: transform .14s ease, filter .14s ease;
}
.game-button::after {
  content: ""; position: absolute; inset: 0;
  background: url('../images/Button_GUI_Hover.png') center / 100% 100% no-repeat;
  opacity: 0; transition: opacity .14s ease;
}
.game-button:hover::after, .game-button:focus-visible::after { opacity: 1; }
.game-button:hover { transform: translateY(-1px); filter: drop-shadow(0 0 8px rgba(255,177,50,.28)); }
.game-button span { position: relative; z-index: 2; font-weight: 800; letter-spacing: .08em; font-size: clamp(.72rem, 1vw, 1.02rem); text-shadow: 0 2px 2px #000; }
main { width: min(var(--max), calc(100% - 42px)); margin: 88px auto 120px; display: grid; gap: 110px; }
.content-panel {
  position: relative;
  padding: clamp(32px, 5vw, 68px);
  background: linear-gradient(145deg, rgba(31,33,33,.95), rgba(20,21,21,.91));
  border: 2px solid var(--edge-dark);
  outline: 1px solid rgba(132,139,141,.75);
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0,0,0,.52), inset 0 0 0 4px rgba(0,0,0,.24);
}
.content-panel::before, .content-panel::after {
  content: ""; position: absolute; left: 28px; right: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228,154,34,.58), transparent);
}
.content-panel::before { top: 13px; }
.content-panel::after { bottom: 13px; }
.section-kicker { color: var(--amber); text-align: center; font-size: .78rem; font-weight: 900; letter-spacing: .22em; margin-bottom: 8px; }
h1, h2 { margin: 0 0 36px; text-align: center; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 3px 2px #000; }
h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { margin: 18px 0 8px; color: var(--amber-soft); text-transform: uppercase; letter-spacing: .06em; }
p { line-height: 1.72; color: #ddd3c2; }
.lead { font-size: 1.18rem; color: #fff1d6; }
.two-column { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(28px, 5vw, 66px); align-items: center; }
.image-frame, .media-item, .future-image {
  position: relative; overflow: hidden; border-radius: 9px;
  border: 2px solid #5b6061; outline: 3px solid #181a1a;
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
  background: #302223;
}
.image-frame img, .media-item img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.placeholder-note { position: absolute; right: 10px; bottom: 8px; padding: 4px 8px; border-radius: 4px; font-size: .7rem; color: #c9bcb0; background: rgba(0,0,0,.52); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.feature-card { padding: 16px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
.feature-card p { margin-bottom: 0; }
.future-image { aspect-ratio: 16/9; display: grid; place-items: center; text-align: center; color: #8d8981; font-weight: 800; letter-spacing: .12em; background: repeating-linear-gradient(135deg, #292727, #292727 14px, #302d2d 14px, #302d2d 28px); }
.section-intro { max-width: 780px; margin: -18px auto 34px; text-align: center; color: var(--muted); }
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.media-item { padding: 0; cursor: zoom-in; color: inherit; }
.media-item:hover { border-color: var(--amber); transform: translateY(-2px); }
.home-button {
  display: grid; place-items: center; width: 160px; height: 56px; margin: 46px auto -10px;
  text-decoration: none; background: url('../images/Home.png') center / 100% 100% no-repeat;
  transition: filter .15s ease, transform .15s ease;
}
.home-button span { font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-shadow: 0 2px 2px #000; }
.home-button:hover { filter: brightness(1.25) drop-shadow(0 0 8px rgba(228,154,34,.35)); transform: translateY(-2px); }
.social-row { display: flex; justify-content: center; gap: clamp(20px, 5vw, 60px); flex-wrap: wrap; }
.social-link { min-width: 120px; text-decoration: none; display: grid; justify-items: center; gap: 9px; color: var(--muted); font-weight: 800; }
.social-link img { width: 76px; height: 76px; object-fit: contain; transition: transform .15s ease, filter .15s ease; }
.social-link:hover img { transform: translateY(-4px) scale(1.05); filter: drop-shadow(0 0 10px rgba(255,181,59,.4)); }
.steam-cta { width: min(520px, 92%); margin: 44px auto 0; padding: 18px 24px; display: grid; text-align: center; text-decoration: none; border: 1px solid #64696b; border-radius: 8px; background: rgba(5,6,6,.48); }
.steam-cta strong { color: var(--amber-soft); font-size: 1.3rem; letter-spacing: .15em; }
.steam-cta small { margin-top: 5px; color: var(--muted); }
.disabled { cursor: default; }
.ares-widget { position: fixed; z-index: 80; right: clamp(8px, 1.6vw, 28px); top: 50%; transform: translateY(-42%); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.ares-button { pointer-events: auto; border: 0; background: none; padding: 0; cursor: pointer; filter: drop-shadow(0 12px 12px rgba(0,0,0,.5)); transition: transform .14s ease, filter .14s ease; }
.ares-button img { display: block; width: clamp(96px, 8.5vw, 158px); height: auto; }
.ares-button:hover { transform: rotate(-2deg) scale(1.035); filter: drop-shadow(0 0 13px rgba(255,156,28,.52)); }
.ares-bubble { pointer-events: auto; width: min(330px, 45vw); padding: 18px 34px 18px 18px; border-radius: 10px; border: 2px solid #555b5d; background: rgba(20,23,22,.97); box-shadow: 0 12px 38px rgba(0,0,0,.55); position: relative; }
.ares-bubble::after { content: ""; position: absolute; right: -12px; top: 48%; width: 20px; height: 20px; background: rgba(20,23,22,.97); border-top: 2px solid #555b5d; border-right: 2px solid #555b5d; transform: rotate(45deg); }
.ares-bubble strong { color: var(--amber); letter-spacing: .12em; }
.ares-bubble p { margin: 8px 0 0; font-size: .92rem; line-height: 1.45; }
.bubble-close { position: absolute; right: 7px; top: 4px; border: 0; background: none; color: #aaa; font-size: 1.4rem; cursor: pointer; }
.site-footer { padding: 34px 24px; text-align: center; display: grid; gap: 9px; color: #c3b7a4; background: rgba(10,11,11,.92); border-top: 1px solid #4e5354; }
.footer-links { display: flex; justify-content: center; gap: 10px; }
.footer-links a:hover { color: var(--amber-soft); }
.lightbox { width: min(1500px, 94vw); max-width: none; padding: 12px; border: 1px solid #666; border-radius: 10px; background: #151616; box-shadow: 0 30px 100px #000; }
.lightbox::backdrop { background: rgba(0,0,0,.88); backdrop-filter: blur(5px); }
.lightbox img { display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain; }
.lightbox-close { position: absolute; right: 16px; top: 12px; width: 40px; height: 40px; border: 1px solid #777; border-radius: 50%; color: white; background: rgba(0,0,0,.7); font-size: 1.5rem; cursor: pointer; }
.legal-page { width: min(920px, calc(100% - 34px)); margin: 60px auto; padding: 44px; background: var(--panel); border: 1px solid #64696b; border-radius: 12px; box-shadow: 0 20px 60px #0008; }
.legal-page h1 { text-align: left; font-size: 2.2rem; }
.legal-page a { color: var(--amber-soft); }
@media (max-width: 900px) {
  :root { --nav-height: 70px; }
  .hero { min-height: 42vh; }
  .logo { width: min(700px, 90vw); }
  .nav-inner { overflow-x: auto; justify-content: flex-start; padding: 8px 10px; scrollbar-width: none; }
  .game-button { flex: 0 0 170px; width: 170px; }
  main { width: min(94%, 760px); margin-top: 54px; gap: 70px; }
  .two-column, .feature-grid { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr; }
  .ares-widget { top: auto; bottom: 12px; transform: none; }
  .ares-button img { width: 82px; }
  .ares-bubble { width: min(310px, calc(100vw - 110px)); }
}
@media (max-width: 560px) {
  body { background-attachment: scroll; }
  .hero { min-height: 34vh; padding-top: 20px; }
  .content-panel { padding: 30px 20px 38px; }
  main { width: calc(100% - 24px); }
  .section-kicker { font-size: .65rem; }
  .ares-bubble { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

.language-switch { display:flex; align-items:center; justify-content:center; gap:7px; font-weight:900; letter-spacing:.08em; font-size:.78rem; }
.main-nav .language-switch { position:absolute; right:clamp(10px,2vw,30px); top:50%; transform:translateY(-50%); padding:7px 10px; border:1px solid rgba(255,255,255,.12); border-radius:7px; background:rgba(10,11,11,.72); box-shadow:0 4px 15px rgba(0,0,0,.35); }
.language-switch a { color:#a9a39a; text-decoration:none; transition:color .15s ease, text-shadow .15s ease; }
.language-switch a:hover { color:var(--amber-soft); }
.language-switch a.active { color:var(--amber); text-shadow:0 0 8px rgba(255,181,59,.45); }
.language-switch span { color:#666; }
.legal-language { position:fixed; z-index:20; right:22px; top:18px; padding:8px 11px; border:1px solid #555; border-radius:7px; background:rgba(10,11,11,.9); }
@media (max-width: 1180px) { .main-nav .language-switch { position:static; transform:none; flex:0 0 auto; margin-right:10px; } }