@import url("https://fonts.googleapis.com/css2?family=Parkinsans:wght@300;400;500;600;700&display=swap");

*{
  font-family:"Parkinsans", sans-serif;
}

:root{
  --bg-color:#0b0f10;
  --content-bg:rgba(255,255,255,0.03);
  --text-color:#e6f7f7;
  --accent:#66d0d0;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html,body{
  height:100%;
  width:100%;
  font-family:"Parkinsans", sans-serif;
  background:var(--bg-color);
  color:var(--text-color);
}
#particles-js{
  position:fixed;
  inset:0;
  z-index:0;
}
.site-content{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:1rem;
  padding:2rem;
  text-align:center;
}
.site-content h1{
  font-size:clamp(2rem,6vw,4rem);
  letter-spacing:0.02em;
  margin-bottom:0.2rem;
}
.site-content p{
  font-size:1.125rem;
  opacity:0.9;
}
.stats-wrap{
  position:fixed;
  left:12px;
  bottom:12px;
  background:var(--content-bg);
  padding:8px 10px;
  border-radius:10px;
  font-size:0.9rem;
  color:var(--accent);
  z-index:3;
  backdrop-filter:blur(6px);
}

#sj-frame {
    position: fixed;      
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border: none;
    background-color: #111;
    z-index: 1000000000;           
}

#dock-nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    padding: 14px 28px;
    border-radius: 50px;
    background: #0740421e;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    z-index: 1000000001;       
}

#sj-frame,
#sj-frame * {
    pointer-events: auto; 
}

#dock-nav {
    pointer-events: auto; 
}


#dock-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:55px;
  border-radius:20px;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}

#dock-nav img{
  width:36px;
  height:36px;
  filter:invert(1);
  transition:transform 0.35s ease, filter 0.35s ease;
  cursor:pointer;
}

#dock-nav a:hover img{
  transform:scale(1.45);
  filter:invert(0.75);
}

#dock-nav a:hover{
  transform:translateY(-10px);
}


#sj-form{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:20px;
}

#sj-address{
  width:60%;
  max-width:600px;
  padding:14px 20px;
  border-radius:50px;
  background:rgba(255,255,255,0.06);
  color:white;
  border:1px solid rgba(255,255,255,0.15);
  font-size:1.1rem;
  outline:none;
  transition:.25s ease;
  backdrop-filter:blur(6px);
}

#sj-address::placeholder{
  color:rgba(255,255,255,0.55);
}

#sj-address:focus{
  background:rgba(255,255,255,0.10);
  border-color:#66d0d0;
  box-shadow:0 0 10px #66d0d0;
  transform:scale(1.02);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  justify-items: center;
  margin-top: 2rem;
}

.game-link {
  position: relative;
  display: block;
}

.game-thumbnail {
  width: 150px;
  height: 150px;
  border-radius: 15px;
  transition: ease .2s;
  border: 5px solid transparent;
}

.game-thumbnail:hover {
  transform: scale(1.1);
  border: 4.5px solid #0d3835;
}

.game-link::before {
  content: attr(data-name);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.game-link:hover::before {
  opacity: 1;
}

@media (max-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

    #iframe-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      padding-bottom: 80px;
    }
    #embedded-iframe {
      width: 90%;
      height: 80%;
      border: none;
      border-radius: 20px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.3);
      background: #000;
    }
#iframe-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#embedded-iframe {
  width: 70%;
  height: 80%;
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  background: #000;
}

#iframe-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#embedded-iframe {
  width: 70%;
  height: 80%;
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  background: #000;
}

#iframe-controls {
  position: fixed;
  top: 50%;
  right: 150px; 
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 1001;
}

#iframe-controls button {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: none;
  border-radius: 50px;
  padding: 12px 18px;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#iframe-controls button:hover {
  transform: scale(1.2);
}