:root{
  --bg:#06020a;
  --panel:#110719;
  --panel-2:#1a0a26;
  --text:#f8f2fb;
  --muted:#b9aabd;
  --purple:#be50f3;
  --purple-light:#dea0ff;
  --line:rgba(207,111,255,.28);
  --green:#43e07b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 80% 5%,rgba(128,29,185,.18),transparent 28%),
    radial-gradient(circle at 0 42%,rgba(92,28,143,.14),transparent 30%),
    #06020a;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  line-height:1.65;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(188,76,238,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(188,76,238,.035) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom,#000,transparent 90%);
}
a{color:inherit}
img{display:block;max-width:100%}
.skip-link{
  position:absolute;
  left:-9999px;
}
.skip-link:focus{
  left:20px;
  top:20px;
  z-index:1000;
  padding:12px 16px;
  border-radius:10px;
  color:#fff;
  background:#7620ad;
}
.game-shell{
  width:min(1180px,calc(100% - 30px));
  margin:0 auto;
  padding:18px 0 48px;
}
.game-topbar{
  position:sticky;
  top:14px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:86px;
  padding:10px 28px;
  border:1px solid var(--line);
  border-radius:23px;
  background:rgba(12,5,19,.9);
  box-shadow:0 20px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.game-brand{
  width:min(300px,40vw);
}
.game-brand img{
  width:100%;
  max-height:62px;
  object-fit:contain;
  object-position:left;
}
.game-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.game-nav a{
  padding:10px 13px;
  border-radius:10px;
  color:#eadff0;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.game-nav a:hover,.game-nav a.active{
  color:#fff;
  background:rgba(186,71,239,.14);
}
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:30px 4px 17px;
  color:#9e90a5;
  font-size:13px;
}
.breadcrumbs a{
  color:#d49bfa;
  text-decoration:none;
}
.breadcrumbs a:hover{text-decoration:underline}
.game-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,380px) 1fr;
  gap:52px;
  align-items:center;
  overflow:hidden;
  padding:42px;
  border:1px solid var(--line);
  border-radius:32px;
  background:
    radial-gradient(circle at 18% 40%,rgba(197,64,244,.16),transparent 33%),
    linear-gradient(135deg,rgba(27,9,41,.98),rgba(7,3,11,.98));
  box-shadow:0 34px 100px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
}
.game-hero:before{
  content:"";
  position:absolute;
  top:-40%;
  right:-8%;
  width:460px;
  height:460px;
  border:1px solid rgba(201,94,253,.18);
  border-radius:50%;
  box-shadow:0 0 0 55px rgba(177,58,230,.035),0 0 0 115px rgba(177,58,230,.025);
}
.game-cover{
  position:relative;
  z-index:1;
}
.game-cover img{
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  border:1px solid rgba(232,175,255,.34);
  border-radius:23px;
  box-shadow:0 30px 75px rgba(0,0,0,.58),0 0 42px rgba(165,45,222,.14);
}
.game-cover:after{
  content:"";
  position:absolute;
  inset:6% -8% -4%;
  z-index:-1;
  filter:blur(42px);
  opacity:.28;
  background:#a02bd5;
}
.game-copy{
  position:relative;
  z-index:1;
}
.eyebrow{
  color:#d985ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.game-copy h1{
  max-width:760px;
  margin:14px 0 20px;
  font-size:clamp(42px,5vw,72px);
  line-height:.99;
  letter-spacing:-.055em;
}
.game-copy>p{
  max-width:760px;
  color:#c4b7ca;
  font-size:18px;
}
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:23px 0 0;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid rgba(210,125,255,.23);
  border-radius:999px;
  color:#ebd9f5;
  background:rgba(112,34,153,.13);
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.badge:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px var(--green);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.main-cta,.secondary-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:13px 18px;
  border-radius:13px;
  font-weight:900;
  text-decoration:none;
  transition:.23s;
}
.main-cta{
  color:#fff;
  background:linear-gradient(135deg,#c346f1,#7921b8);
  box-shadow:0 14px 35px rgba(172,49,224,.28);
}
.secondary-cta{
  border:1px solid rgba(215,137,255,.32);
  color:#ecdafa;
  background:rgba(255,255,255,.025);
}
.main-cta:hover,.secondary-cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
.disclaimer{
  margin-top:18px;
  color:#93889a;
  font-size:12px;
}
.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:28px;
  align-items:start;
  margin-top:28px;
}
.main-content{
  display:grid;
  gap:28px;
}
.game-section,.side-card{
  padding:30px;
  border:1px solid rgba(204,103,255,.2);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(24,9,35,.92),rgba(9,4,14,.96));
  box-shadow:0 22px 65px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.035);
}
.section-kicker{
  color:#ca69f7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.game-section h2,.side-card h2{
  margin:7px 0 14px;
  font-size:clamp(28px,3vw,42px);
  line-height:1.06;
  letter-spacing:-.035em;
}
.game-section h3{
  margin:0 0 7px;
}
.game-section p,.side-card p{
  color:#b9acbf;
}
.credit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:22px;
}
.credit-card{
  min-height:120px;
  padding:20px;
  border:1px solid rgba(215,130,255,.19);
  border-radius:17px;
  background:rgba(255,255,255,.025);
}
.credit-card:first-child{
  background:linear-gradient(135deg,rgba(158,39,208,.2),rgba(255,255,255,.025));
}
.credit-card small{
  display:block;
  color:#bdaec5;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.credit-card strong{
  display:block;
  margin-top:9px;
  font-size:18px;
}
.cast-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 20px;
  margin-top:18px;
}
.cast-grid p{
  display:flex;
  justify-content:space-between;
  gap:17px;
  margin:0;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:14px;
}
.cast-grid strong{color:#f4eaf8}
.cast-grid span{
  color:#ad9eb3;
  text-align:right;
}
.production-list{
  display:grid;
  gap:0;
  margin-top:17px;
}
.production-list p{
  display:flex;
  justify-content:space-between;
  gap:22px;
  margin:0;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.production-list span{color:#a99bad}
.production-list strong{text-align:right}
.notice{
  display:flex;
  gap:17px;
  padding:23px;
  border:1px solid rgba(249,177,77,.22);
  border-radius:18px;
  background:rgba(91,48,10,.12);
}
.notice-icon{
  display:grid;
  flex:0 0 42px;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:50%;
  color:#ffcf79;
  background:rgba(255,178,65,.12);
  font-weight:950;
}
.notice h2{
  margin:0 0 6px;
  font-size:21px;
}
.notice p{margin:0}
.version-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  margin-top:20px;
}
.version-grid article{
  padding:19px;
  border:1px solid rgba(217,132,255,.18);
  border-radius:17px;
  background:rgba(255,255,255,.025);
}
.version-grid small{
  color:#cd78f6;
  font-weight:850;
}
.version-grid h3{
  margin:8px 0 5px;
  font-size:20px;
}
.side-column{
  position:sticky;
  top:122px;
  display:grid;
  gap:18px;
}
.side-card h2{
  font-size:24px;
}
.official-links{
  display:grid;
  gap:10px;
  margin-top:17px;
}
.official-link{
  display:block;
  padding:14px;
  border:1px solid rgba(208,117,255,.17);
  border-radius:13px;
  color:#f1e5f7;
  text-decoration:none;
  background:rgba(255,255,255,.02);
}
.official-link:hover{
  border-color:rgba(218,146,255,.42);
  background:rgba(173,55,225,.08);
}
.official-link strong,.official-link small{
  display:block;
}
.official-link small{
  margin-top:3px;
  color:#9f91a5;
}
.related-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.related-list a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px;
  border-radius:12px;
  color:#e9dcef;
  text-decoration:none;
  background:rgba(255,255,255,.025);
}
.related-list a:hover{background:rgba(173,55,225,.1)}
.related-list img{
  width:44px;
  height:64px;
  object-fit:cover;
  border-radius:7px;
}
.related-list strong{font-size:13px}
.readme-details{
  margin-top:18px;
}
.readme-details summary{
  cursor:pointer;
  color:#d690fa;
  font-weight:900;
}
.readme-details pre{
  max-height:540px;
  overflow:auto;
  margin:18px 0 0;
  padding:20px;
  border:1px solid rgba(209,119,255,.15);
  border-radius:15px;
  color:#c7bacd;
  background:#09040d;
  white-space:pre-wrap;
  word-break:break-word;
  font:12px/1.65 Consolas,monospace;
}
.game-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:28px;
  padding:24px 5px;
  color:#8f8295;
  font-size:13px;
}
.game-footer a{
  color:#d697f7;
  text-decoration:none;
}
.game-footer a:hover{text-decoration:underline}
.hub-intro{
  margin:34px 0 24px;
  text-align:center;
}
.hub-intro h1{
  margin:8px auto 15px;
  max-width:850px;
  font-size:clamp(46px,6vw,78px);
  line-height:.98;
  letter-spacing:-.055em;
}
.hub-intro p{
  max-width:760px;
  margin:0 auto;
  color:#b9acbf;
  font-size:17px;
}
.hub-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.hub-card{
  display:grid;
  grid-template-columns:170px 1fr;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  color:inherit;
  text-decoration:none;
  background:linear-gradient(135deg,rgba(28,10,41,.96),rgba(7,3,11,.98));
  box-shadow:0 22px 65px rgba(0,0,0,.3);
  transition:.27s;
}
.hub-card:hover{
  transform:translateY(-5px);
  border-color:rgba(218,139,255,.5);
}
.hub-card img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
}
.hub-card div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:25px;
}
.hub-card small{
  color:#c86cf4;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hub-card h2{
  margin:10px 0;
  font-size:27px;
  line-height:1.05;
}
.hub-card p{
  margin:0;
  color:#ad9fb3;
}
.hub-card span{
  margin-top:20px;
  color:#e1b8f8;
  font-weight:850;
}
@media(max-width:900px){
  .game-topbar{
    align-items:flex-start;
    flex-direction:column;
    position:relative;
  }
  .game-brand{width:240px}
  .game-nav{justify-content:flex-start}
  .game-hero{grid-template-columns:1fr}
  .game-cover{width:min(420px,100%);margin:0 auto}
  .content-grid{grid-template-columns:1fr}
  .side-column{position:static}
  .hub-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .game-shell{width:min(100% - 14px,520px);padding-top:8px}
  .game-topbar{padding:15px;border-radius:18px}
  .game-nav{gap:3px}
  .game-nav a{padding:8px;font-size:11px}
  .game-hero{gap:28px;padding:23px;border-radius:23px}
  .game-copy h1{font-size:42px}
  .game-copy>p{font-size:16px}
  .game-section,.side-card{padding:21px;border-radius:20px}
  .credit-grid,.cast-grid,.version-grid{grid-template-columns:1fr}
  .production-list p,.cast-grid p{flex-direction:column;gap:4px}
  .production-list strong,.cast-grid span{text-align:left}
  .hub-card{grid-template-columns:120px 1fr}
  .hub-card img{min-height:230px}
  .hub-card div{padding:17px}
  .hub-card h2{font-size:21px}
  .game-footer{align-items:flex-start;flex-direction:column}
}