:root{
  --panel:#0e2446;
  --black:#000;
  --white:#fff;
  --gray:#b8c6dd;
  --gold:#facc15;
  --blue:#3b82f6;
  --purple:#a362f8;
  --green:#22c55e;
  --red:#ef4444;

  --border:rgba(255,255,255,0.25);
  --radius:16px;
  --radius-pill:999px;
  --shadow:0 16px 32px rgba(0,0,0,0.25);

  --transparent:rgba(255,255,255,0.05);
  --accent:rgba(124,247,212,0.75);
  --accent-glow:rgba(124,247,212,0.25);
  --panel-gradient:linear-gradient(180deg,var(--panel),var(--black));
}

*,
*::before,
*::after{box-sizing:border-box}

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block}

ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote::before,blockquote::after,
q::before,q::after{content:none}
table{border-collapse:collapse;border-spacing:0}

body{
  background:var(--black);
  color:var(--white);
  font-family:"Poppins",Arial,sans-serif;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid #86b7ff;outline-offset:3px}

main{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}

header{background:var(--black)}

.header-inner{
  padding:16px;
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:center;
}

footer{
  border-top:1px solid var(--border);
  background:var(--black);
  display:flex;
  justify-content:center;
}

.footer-inner{
  max-width:1100px;
  display:grid;
  gap:16px;
  padding:16px;
  margin-top:16px;
  justify-content:center;
}

.brand{
  display:flex;
  gap:16px;
  align-items:center;
}

.brand img{width:75%;height:75%}

nav{justify-self:end}

.nav-links,
.social{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.nav-links a,
.social a{
  padding:8px 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--transparent);
  transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease,background 160ms ease;
}

.nav-links a:hover,
.social a:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 0 16px var(--accent-glow);
}

.nav-links a[aria-current="page"]{
  border-color:rgba(255,255,255,.75);
  box-shadow:0 0 16px rgba(134,183,255,.25);
}

.section-title{
  font-size:1.2rem;
  font-weight:700;
  margin:16px 0;
}

.muted{color:var(--gray);text-align:center}

.hero,
.shop-item,
.panel{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--panel-gradient);
  padding: 16px;
}

.panel form{padding:16px}

.hero{
  box-shadow:var(--shadow);
  padding:16px;
}

.hero h1{
  margin:0 0 8px;
  font-size:1.75rem;
  font-weight:700;
}

.hero p{margin:0 0 16px;color:var(--gray)}

.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.btn{
  display:inline-block;
  padding:8px 16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--transparent);
  transition:transform 160ms ease,border-color 160ms ease,background 160ms ease;
}

.btn:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  background:rgba(124,247,212,.25);
}

.btn.primary{
  border-color:var(--accent);
  background:rgba(124,247,212,.25);
}

.grid{
  display:grid;
  gap:16px;
  margin-top:16px;
}

.grid.shop{
  grid-template-columns:repeat(3,1fr);
  justify-content:center;
  align-items:center;
}

.shop-item{
  overflow:hidden;
  box-shadow:0 16px 24px rgba(0,0,0,.25);
  transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease;
}

.shop-item:hover{
  transform:translateY(-6px);
  border-color:rgba(124,247,212,.55);
  box-shadow:0 0 16px rgba(124,247,212,.22);
}

.shop-item img{
  height:180px;
  object-fit:contain;
  padding:16px;
  margin:0 auto;
}

.item-info{padding:16px}
.item-info h2{margin:0 0 8px}
.item-info p{margin:8px 0 0;color:var(--gray)}

.rarity{
  display:inline-block;
  padding:4px 8px;
  border-radius:var(--radius-pill);
  font-weight:700;
  margin-bottom:8px;
}

.common{background:var(--green);color:var(--black)}
.uncommon{background:var(--blue);color:var(--black)}
.rare{background:var(--purple);color:var(--black)}
.legendary{background:var(--gold);color:var(--black)}

.item-footer{
  margin-top:16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
}

.price{color:var(--gold);font-weight:700}

.video-wrap{
  position:relative;
  padding-top:50%;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
}

.video-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.contact-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
  margin:16px 0;
}

form{display:grid;gap:16px}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

label{display:block;margin-bottom:8px;font-weight:700}
.star{color:var(--red);margin:0 8px}

input,textarea{
  width:100%;
  padding:8px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:rgba(0,0,0,.25);
  color:var(--white);
}

textarea{min-height:120px;resize:vertical}

.required-field{border-color:var(--red)}
.optional-field{border-color:var(--border)}

.field-note{
  color:var(--gray);
}

button{
  cursor:pointer;
  padding:8px 16px;
  border-radius:var(--radius);
  border:1px solid var(--accent);
  background:rgba(124,247,212,.14);
  color:var(--white);
  font-weight:700;
  transition:transform 160ms ease,background 160ms ease;
}

button:hover{
  transform:translateY(-2px);
  background:rgba(124,247,212,.2);
}

@media(max-width:640px){
  .header-inner{grid-template-columns:1fr}
  nav{justify-self:start}
  .nav-links{flex-direction:column}
  .grid.shop{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}