@charset "utf-8";
/* CSS Document */

	:root{
	  	--bg:#0b1220; 
		--bg-2:#102c4e; 
		--bg-soft: #0f1117;
		--card:#101a2c; 
		--ink:#071425; 
		--ink-dim:#c9d2e3;
	  	--brand:#ffbf2e; 
		--brand-ink:#0a2342; 
		--accent:#ffcc33; 
		--accent-2: #9b7bff; 
		--text:#e8f2ff;
	  	--accent-dark:#e0ae00; 
      	--border: rgba(255,255,255,0.08);
		--muted:#b9eeff; 
		--radius:16px; 
		--shadow:0 10px 30px rgba(0,0,0,.25);
		--success: #22c55e;
		--danger: #ef4444;
	}

    *{box-sizing:border-box}
	html,body{height:100%;margin:0;}
	body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; 
		color:var(--text); 
		background: radial-gradient(circle, #3f3119, #31241a);
      	line-height:1.6;
	}

    /* Hero */
    .hero { padding: 72px 0 48px; } /*background: radial-gradient(1200px 600px at 10% -10%, rgba(110,231,255,0.15), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(155,123,255,0.12), transparent 60%);*/
    h1 { margin: 12px 0 0; font-size: clamp(32px, 6vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
    .hero p { margin: 12px 0 0; max-width: 60ch; }
    .hero-cta { display:flex; flex-wrap: wrap; align-items:center; gap:12px; margin-top: 20px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 16px; border-radius: 14px; border:1px solid var(--border); background: linear-gradient(180deg, #1a1f2b, #131722); color: #FFF; cursor:pointer; transition: transform .04s ease, background .2s ease; }
    .btn:hover { transform: translateY(-1px); }    
    border-radius: var(--radius);
    .btn-primary { background: linear-gradient(180deg, var(--card), #123b6a); border-color: rgba(255,255,255,0.2); color: #05222c; font-weight: 600; }
    .social-chips { display:flex; align-items:center; gap:8px; padding:8px; border-radius: 14px; background: rgba(255,255,255,0.1); border:1px solid var(--border); }
    .chip { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius: 12px; background: rgba(255,255,255,0.1); border:1px solid var(--border); font-size: 14px; color: #FFF; }
	.hero .container:before{
    z-index:-1;
    position:fixed;
    content: url('/assets/img/logo/controller.jpg');
	opacity:0.5;
	padding: 0;margin: 0;
	top: 50%; transform: translate(-50%, -50%); width: 850px; 
	}

    /* Game grid */
    .section { padding: 28px 0 12px; }
    .section h2 { font-size: clamp(22px, 3vw, 32px); margin: 0 0 8px; }
    .section .sub { color: var(--muted); font-size: 14px; }

    .grid { display:grid; grid-template-columns: 1fr; gap:18px; margin-top: 18px; }
    @media (min-width: 720px) { .grid { grid-template-columns: repeat(3, 1fr); } }
    .cols-2{ grid-template-columns: 1fr 1fr }
    @media (max-width: 900px){ .cols-2{ grid-template-columns: 1fr } }

    .card { background: var(--card); border:1px solid var(--border); border-radius: 16px; overflow:hidden; display:flex; flex-direction: column; }
    .card-media { position: relative; padding-top: 56.25%; overflow:hidden; }
    .card-media img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
    .badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); border: 1px solid var(--border); color: #cfefff; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
    .card-body { padding: 14px; display:flex; flex-direction: column; gap:6px; }
    .card-title { display:flex; align-items:center; justify-content: space-between; gap:10px; font-size: 18px; font-weight: 600; }
    .card-desc { color: var(--muted); font-size: 14px; }
    .card-actions { display:flex; align-items:center; justify-content: space-between; gap:10px; margin-top: 8px; }
    .like-btn { border-radius: 999px; border: 1px solid var(--border); background: rgba(255,0,77,0.1); color: #ff6b9a; padding:8px 10px; cursor:pointer; }
    .like-btn[data-liked="true"] { background: rgba(34,197,94,0.12); color: var(--success); }


    /* Selected games summary */
    .panel { margin-top: 18px; padding: 16px; border:1px solid var(--border); background: var(--bg-soft); border-radius: 16px; }
    .badge-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,0.04); font-size: 14px; }

    /* Footer */
    footer { border-top:1px solid var(--border); margin-top: 36px; 
	  background: linear-gradient(#6150017d, #392b1ab5);}
    .footer-inner { display:grid; gap:16px; padding: 28px 0; }
    .footer-grid { display:grid; gap:18px; grid-template-columns: 1fr; }
    @media (min-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
    .muted { color: var(--muted); }

    /* Modal */
    dialog { border:1px solid var(--border); border-radius: 14px; padding: 0; background: var(--card); color: var(--text); width: min(520px, 92vw); }
    dialog::backdrop { background: rgba(0,0,0,0.6); }
    .modal-head { padding: 14px 16px; border-bottom:1px solid var(--border); font-weight: 600; }
    .modal-body { padding: 14px 16px; }
    .modal-actions { display:flex; gap:10px; padding: 0 16px 16px; }
    .input { width:100%; padding: 12px 12px; border-radius: 12px; border:1px solid var(--border); background: #0d1117; color: var(--text); outline: none; box-shadow: 0 0 0 0 var(--ring); }
    .input:focus { box-shadow: 0 0 0 4px var(--ring); }


	img{max-width:100%; height:auto; display:block}
    a{color:var(--accent); text-decoration: none}
    a:hover{ text-decoration: underline }
	/*.container{max-width:1100px; margin-inline:auto; padding:clamp(12px,2vw,24px)}*/

    /* Top bar */
	.site-header{
      position: sticky; top:0; z-index:1000;
	  background: linear-gradient(#6150017d, #392b1ab5);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255,255,255,.1);
	}
    .nav{
      max-width:1100px; margin:auto; padding:.75rem 1rem;
      display:flex; align-items:center; justify-content:space-between;
      gap:0.5rem;
    }
    .brand{
      display:flex; align-items:center; gap:.75rem; color:var(--text);
      font-weight:700; letter-spacing:.3px;
    }
    .brand img{width:90px; height:90px; object-fit:contain}
    .nav-links{
      display:flex; align-items:center; gap:1rem;
    }
    .nav-links a{
      color:var(--muted); padding:.75rem 1.5rem; border-radius:8px;
    }
    .nav-links a[aria-current="page"], .nav-links a:hover{
      color:var(--ink); background:var(--accent);
    }
    .burger{display:none; background:none; border:0; color:var(--text); font-size:1.4rem}
	.site-footer{border-top:1px solid rgba(255,255,255,.08); margin-top:48px; background: linear-gradient(#6b5c4be3, #615242e3);}
	.footer-nav a{margin-right:14px}
	.container{max-width:1100px; margin-inline:auto; padding:clamp(12px,2vw,24px)}
hr { border-top: 1px solid rgb(255 255 255 / 20%); }

/*popup*/
#popup { height : 250px; }
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* mobile */

    @media (max-width: 820px){
      .burger{display:block}
      .nav-links{
        position:fixed; inset:64px 0 auto 0; background:var(--bg-2);
        border-bottom:1px solid rgba(255,255,255,.06);
        padding:1rem; display:none; flex-direction:column; gap:.5rem;
      }
      .nav-links.open{display:flex}
	  .modal-content {
		width: 100%;
	  }
    }

@media screen and (min-width: 600px) {
	#logosm{display: inline;}
	#logolg{display: none;}
	#herotitle{transform: translate(0, 150%); margin: 40px auto;}
	#herotitle h1{font-size: 40px; line-height: 54px;}
	#herotext{transform: translate(0, 25%); margin: 40px; width: 66%;}
}
/* tablet */
@media screen and (min-width: 768px) {
	#logosm{display: inline;}
	#logolg{display: none;}
	#herotitle{transform: translate(0, 100%); margin: 20px auto;}
	#herotitle h1{font-size: 70px; line-height: 85px;}
	#herotext{transform: translate(0, 50%); margin: 80px; width: 66%;}
}
/* desktop */
@media screen and (min-width: 1024px) {
	#logosm{display: none;}
	#logolg{display: inline;}
	#herotitle{transform: translate(0, 75%); margin: 0 auto;}
	#herotitle h1{font-size: 90px; line-height: 108px;}
	#herotext{transform: translate(0, 75%); margin: 100px; width: 66%;}
}