*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{min-height:100vh;text-rendering:optimizeSpeed}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}button{cursor:pointer;border:none;background:none}a{text-decoration:none;color:inherit}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}

/****** Page Sections ******/

html {
    overflow-x:hidden;
}

body{
font-family:var(--body-font), Arial, sans-serif;
overflow-x:hidden;
width:100%;
}

main {
width:var(--s-main-content-width);
margin-left:auto;
margin-right:auto;
background-color:var(--s-main-background-color);
padding:var(--s-main-padding);
border-radius:var(--s-main-border-radius);
}

footer {
    
    text-align:center;
}

.site-footer{
    padding:20px;
    text-align:center;
    border-top:1px solid #ddd;
    margin-top:40px;
    margin-left: auto;
    margin-right: auto;
}

.footer-links{
    margin-bottom:20px;
    margin-top: 20px;
}

.footer-links a{
    margin:0 10px;
    text-decoration:none;
    color:#333;
}

.footer-links a:hover{
    text-decoration:underline;
}

.footer-copy{
    font-size:14px;
    color:#666;
}

/****** Standard Values ******/

h1,h2,h3,h4,h5,h6{
font-family:var(--heading-font), Arial, sans-serif;
font-weight: heavy;
margin-bottom: 20px;
}

h1 {
   font-size:var(--s-h1-font-size);
  }

h2 {
   font-size:var(--s-h2-font-size);
}

h3 {
   font-size:var(--s-h3-font-size);
   color:var(--h3-color);
}

p {
   font-size:var(--s-p-font-size);
   margin-bottom: 20px;
}

a {
   color: var(--a-color);
   font-size:var(--s-p-font-size);
}

a:hover {
   text-decoration: underline;
}

ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 40px;
}

li {
    display: list-item;
    font-size:var(--s-p-font-size);
}

/****** Nav ******/

nav{
margin-top:var(--s-menu-margin-top);
background-color:var(--s-nav-background-color);
border-bottom:var(--s-menu-border-bottom);
position:var(--s-menu-position);
width:var(--s-menu-width);
height:var(--s-nav-height);
display:flex;
align-items:center;
justify-content:space-between;
margin-left:auto;
margin-right:auto;
top:0;
right:0;
left:0;
z-index:1000;
padding:var(--s-nav-padding);
}

nav ul{
display:none;
flex-direction:column;
position:absolute;
top:var(--s-nav-height);
left:0;
width:100%;
z-index:1001;
align-items:stretch;
padding-left:0;
margin:0;
list-style:none;
}

nav ul.show{
display:flex;
}

nav li{
display:flex;
justify-content:center;   /* horizontal centering */
align-items:center;       /* vertical centering */
margin:0;
padding:0;
list-style:none;
height:var(--s-menu-button-height);
background-color:var(--s-menu-background-color);
font-size:var(--s-menu-font-size);
width:100%;
}

nav ul.show li ul {
    display: flex;
    position: static !important;   /* 🔥 critical */
    width: 100%;
    background: transparent;
    min-width: 0;
}

nav ul.show li {
    flex-direction: column;
    align-items: stretch;
    height: auto;
}

nav ul.show li ul li {
    height: auto;
}

nav ul.show li a {
    justify-content: flex-start;
    padding: 12px 15px;
}

nav ul.show li ul li a {
    padding-left: 30px;
}

nav li ul li{
width:100%;
}

nav a{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
padding:var(--menu-button-padding);
text-decoration:none;
font-family:var(--nav-font);
color:var(--s-menu-font-color);
text-decoration: none;
}

/****** HAMBURGER BUTTON ******/

.nav-toggle{
display:flex;
flex-direction:column;
justify-content:center;
gap:5px;
width:40px;
height:40px;
background:none;
background-color: black;
border:none;
cursor:pointer;
margin-left:auto;
margin-right:10px;
border-radius:6px;
border:none;
cursor:pointer;
align-items: center;
}

.nav-toggle:hover{
background:none;
background-color:black;
}

.nav-toggle span{
display:block;
height:3px;
width:30px;
background:var(--s-menu-font-color);
transition:0.7s;
}

/* HAMBURGER → X */

.nav-toggle.active span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2){
opacity:0;
}

.nav-toggle.active span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}

/****** Nav Logo ******/
.nav-logo{
display:flex;
align-items:center;
height:30px);
width:237px;
}

.nav-logo img{
height:30px);
width:237px;
display:block;
}

.auth-page{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#f5f5f5;
}

.auth-container{
width:400px;
padding:40px;
background:white;
border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.login-error{
background:red;
border:1px solid #cc0000;
color:white;
padding:10px;
margin-bottom:20px;
text-align:center;
}

/****** Breadcrumbs ******/

.breadcrumbs {
    font-size:var(--s-p-font-size);
    margin-bottom: 25px;
}

.breadcrumbs a {
    text-decoration: none;
    color: blue;
}

.breadcrumbs span {
    
}

/****** Social (MOBILE FIRST) ******/

/* MOBILE: fixed bottom bar */
.social-links{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    display: flex;
    justify-content: space-around;
    align-items: center;

    z-index: 9999;
    background: #fff;
    border-top: 1px solid #ccc;
}

/* BUTTON BASE */
.social-btn{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 60px;
    flex: 1;                  /* equal width buttons */

    text-decoration: none;
}

.social-btn svg{
    width: 32px;
    height: 32px;
}

/* ICON */
.social-btn .icon{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LABEL hidden on mobile */
.social-btn .label{
    display: none;
}

/* GOOGLE */
.social-btn.google{
    background: #fff;
    
}

/* REVIEW */
.social-btn.review{
    background: #fff;
}

.social-btn.review .icon{
    color: #EA4335;
}

/* STAR */
.gold-star{
    fill: #FFD700;
    stroke: #E6B800;
    stroke-width: 3;
}

.yt{
    stroke: #ff0000;
    stroke-width: 3;
    paint-order: stroke;
}



/****** Hero and Fallback ******/

.hero{

}

.hero-video{

}

.hero-image{

}

.hero-content{

}

.fallback-hero{
position:relative;
width:100%;
display:flex;
justify-content:center;
aspect-ratio:565 / 390;
}

.fallback-image{
    width:100%;
    height:auto;
    display:block;
}

/****** FORM DEFAULTS ******/

label{
display:block;
font-size:var(--s-p-font-size);
font-weight:600;
}

input,
textarea,
select{
width:100%;
font-size:var(--s-p-font-size);
padding: 12px;
border:1px solid #ccc;
border-radius:6px;
background:#fff;
}

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

input:focus,
textarea:focus,
select:focus{
outline:none;
border-color:#0073aa;
box-shadow:0 0 0 2px rgba(0,115,170,0.15);
}

button{
display:block;
margin:0 auto;
padding:12px 18px;
font-size:var(--s-p-font-size);
background:#0073aa;
color:#fff;
border-radius:6px;
border:none;
cursor:pointer;
transition:0.2s;
}

button:hover{
background:#005f8d;
}

button:active{
transform:scale(0.98);
}

/* FAQ SECTION */
.faq {
    margin-top: 40px;
}

/* EACH ITEM */
.faq-item {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

/* QUESTION */
.faq-item summary {
    font-weight: 600;
    font-size: 24px;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 25px;
}

/* REMOVE DEFAULT ARROW */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* CUSTOM + ICON */
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 18px;
}

/* OPEN STATE */
.faq-item[open] summary::after {
    content: "-";
}

/* ANSWER */
.faq-content {
    margin-top: 10px;
    line-height: 1.5;
    font-size:var(--s-p-font-size);
}

/* Container */
.game-links {
    display: flex;
    flex-wrap: wrap;              /* allows wrapping */
    justify-content: center;      /* center when wrapping */
    gap: 20px;
    margin-bottom: 20px;
}

/* Each item */
.game-links a {
    display: flex;
    flex-direction: column;
    align-items: center;          /* center image + text */
    text-align: center;
    text-decoration: none;
    width: 300px;                 /* fixed width per item */
}

/* Images */
.game-links img {
    width: 300px;
    height: 271px;
    object-fit: cover;            /* prevents distortion */
    border-radius: 8px;
    display: block;
}

/* Title */
.game-links span {
    margin-top: 10px;
    font-size: var(--s-p-font-size);
    color: var(--a-color);
    text-align: center;
}

@media (min-width:990px){
    
body{

}

main {
width:var(--l-main-content-width);
background-color:var(--l-main-background-color);
margin-top:var(--l-main-margin-top);
}

footer {
    
}

/****** Standard Values ******/

h1 {
   font-size:var(--l-h1-font-size);
}

h2 {
   font-size:var(--l-h2-font-size);
}

h3 {
   font-size:var(--l-h3-font-size);
}

p {
   font-size:var(--l-p-font-size);
}

a {
   font-size:var(--l-p-font-size);
   
}

li {
    font-size:var(--l-p-font-size);
}

/****** Nav ******/

nav{
background-color:var(--l-nav-background-color);
width:var(--l-menu-width);
height:var(--l-nav-height);
margin-top:var(--l-menu-margin-top);
border-bottom:var(--l-menu-border-bottom);
position:var(--l-menu-position);
padding:var(--l-nav-padding);
}

.nav-toggle{
display:none;
}

nav ul{
display:flex;
justify-content:var(--l-menu-alignment);
border-bottom:var(--l-menu-border-bottom);
align-items:center;
padding:0;
margin-left:auto;
gap:var(--l-menu-button-gap);
position:static;
flex-direction:row;
margin-top:0;
max-height:none;
opacity:1;
transform:none;
}

nav a{
color:var(--l-menu-font-color);
align-items:flex-end;
padding:var(--l-menu-button-padding);
color:var(--l-menu-font-color);
}

nav li {
    position: relative;
    font-size:var(--l-menu-font-size);
color:var(--l-menu-font-color);
background-color:var(--l-menu-background-color);
width: auto;
height:var(--l-menu-button-height);
font-size:var(--l-menu-font-size);
}

/* SUBMENU DEFAULT */
nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    flex-direction: column;
    background: white;
    width: max-content;
min-width: 0;
    z-index: 999;
    
}

/* SHOW ON HOVER */
nav li:hover > ul {
    display: block;
}

/* SUBMENU LINKS DEFAULT */
nav li ul li a {
    color: white !important;
    background-color: black;
}

/* SUBMENU HOVER */
nav li ul li a:hover {
    color: black !important;
    background: white;
}

nav li ul li {
    width: 100%;
}

nav li ul a {
    display: block;
    white-space: nowrap;
    padding: 10px 15px;
}

/****** Breadcrumbs ******/

.breadcrumbs {
    font-size:var(--l-p-font-size);
}

.breadcrumbs a {

}

.breadcrumbs span {
    
}

/****** Social ******/

.social-links{
        top: 40vh;
        bottom: auto;
        left: 0;
        width: auto;

        flex-direction: column;
        align-items: flex-start;

        background: none;
        border: none;
    }

    .social-btn{
        height: 50px;
        width: 50px;

        display: flex;
        align-items: center;

        justify-content: flex-start;

        overflow: hidden;
        white-space: nowrap;
padding-right: 5px;
        border-radius: 0 10px 10px 0;

        transition: width 0.3s ease;
    }

    /* EXPAND ONLY ON HOVER */
.social-btn:hover{
    width: max-content;
    min-width: 50px;
    padding-right: 15px;
}

.social-btn .icon{
    width: 50px;
    height: 50px;
    transform: translateX(-3px);
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

/* 🔥 critical fix */
.social-btn svg{
    width: 70%;
    height: 70%;

    display: block;
}

    /* LABEL */
    .social-btn .label{
        display: block;
        opacity: 0;

        margin-left: 10px;
        font-size: 18px;

        transition: opacity 0.2s ease;
    }

    .social-btn:hover .label{
        opacity: 1;
    }

.social-btn{
    border: 1px solid #494949;
    background: #fff;
    margin-bottom: 6px;
}

/****** Hero and Fallback ******/

.hero{

}

.hero-video{

}

.hero-image{

}

.hero-content{

}

.fallback-hero{
    aspect-ratio:2412 / 400;
    width:100%;
    
}

.fallback-image{
margin-top:var(--l-fallback-img-margin-top);
width:100vw;
    height:auto;
    display:block;
}

/* ANSWER */
.faq-content {
    font-size:var(--l-p-font-size);
}

}