*{margin:0;padding:0;box-sizing:border-box;}
html, body{
  height:100%;
  font-family:'Titillium Web',sans-serif;
  color:white;
  overflow-x:hidden;
  width:100%;
  min-width:100vw;
  background:url("aster.png") no-repeat center center fixed;
  background-size:cover;
}

.main-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-height:100vh;
  padding:25px 5px;
}

/* PRZYCISKI PARTNERSKIE */
.buttons-container{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px;margin-bottom:20px;}
.button-with-popup{position:relative;text-align:center;}
.button-with-popup a{
  display:block;
  padding:10px 28px;
  border-radius:50px;
  font-weight:900;
  font-size:28px;
  text-decoration:none;
  transition:all .3s ease;
  text-align:center;
  position:relative;
}
.age-badge-mobile{
  position:absolute;top:15px;left:4%;
  transform:translateX(-50%);
  background:rgba(200,0,0,0.9);
  color:white;font-size:0.8rem;font-weight:900;
  padding:3px 8px;border-radius:6px;border:2px solid white;
  z-index:10;text-shadow:1px 1px 2px rgba(0,0,0,0.7);
}

/* Opisy przycisków z cieniowaniem */
.button-with-popup a.show-description .button-text {
  font-size: 0.96rem;
  line-height: 1.4;
  display:block;
  padding:4px;
  color:white;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.7),
    2px 2px 4px rgba(0,0,0,0.6),
    3px 3px 6px rgba(0,0,0,0.5);
  word-wrap: break-word;
}

/* KOLORY PRZYCISKÓW */
.logitech-btn a{background:white;color:black;}
.logitech-highlight,.logitech-tech{color:#05B8FB;font-weight:900;}
.pirateswap-btn a{background:#1E1D22;color:white;}
.pirateswap-swap{color:#ff4300;}
.csgoskins-btn a{background:#0D2345;color:white;}
.csgoskins-highlight{color:#14A3C7;font-weight:900;}
.discord-text{color:#5764F2;font-weight:900;}
.blue-o{color:#4fc3f7;}
.wkdzik-btn a{background:black;color:white;}
.wkdzik-highlight{color:#d7b9ff;font-weight:900;}
.betters-btn a{background:#262D3A;color:white;}
.betters-ters{color:#E50420;}
.betters-highlight{color:#E50420;font-weight:900;}

/* FCOINS */
.fcoins-btn a{background:#141619;color:white;}
.fcoins-f{color:#05DF72;}
.fcoins-monet, .fcoins-angelkacs{color:#07E864;font-weight:900;}

/* FCOINS */
.ig-btn a{background: linear-gradient(90deg,rgba(52, 26, 105, 1) 0%, rgba(145, 35, 79, 1) 50%, rgba(171, 142, 39, 1) 100%);color:white;}
.ig-f{color:white;}
.ig-i{color:white;font-weight:900;}


/* === MINIATURKA YT === */
.latest-video-container {
  position: relative;
  width: min(80%, 900px);
  margin: 16px auto;
  text-align: center;
}
.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background: #000;
  border: 8px solid red;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: none;
}
.yt-click-image {
  width: 90px;
  height: auto;
}
.yt-loader {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 5;
}
.spinner {
  border: 6px solid rgba(255,255,255,0.2);
  border-top: 6px solid red;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.video-error {
  color: #ff6b6b;
  font-weight: 700;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: none;
  background: none;
  border: none;
}

/* STREAM */
.stream-buttons-container{display:flex;justify-content:center;gap:10px;margin:0px 0;flex-wrap:wrap;}
.stream-button-wrapper{display:flex;flex-direction:column;align-items:center;gap:5px;}
.stream-button{width:80px;height:80px;display:flex;justify-content:center;align-items:center;transition:all .3s ease;}
.stream-button-image{width:95%;height:95%;object-fit:contain;}
.stream-button:hover .stream-button-image{transform:scale(1.05);}
.live-panel{width:60px;height:25px;background:#000;border-radius:6px;display:flex;justify-content:center;align-items:center;border:2px solid #ff4444;}
.live-panel.live{background:rgba(0,0,0,1);border-color:#00ff00;box-shadow:0 0 10px rgba(0,255,0,.4);}
.live-text{font-size:12px;font-weight:800;color:#ff4444;}
.live-panel.live .live-text{color:#00ff00;animation:pulseLive 1.5s infinite;}
@keyframes pulseLive{0%{opacity:0.6}50%{opacity:1}100%{opacity:0.6;}}

/* USTAWIENIA */
.settings-btn {
  background: #2a2a2a;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #666;
  width: 80px;
  height: 80px;
}
.gear-icon {
  font-size: 35px;
  color: #ccc;
}
.settings-panel {
  width: 50px;
  height: 25px;
  background: #000;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #666;
}
.settings-text {
  font-size: 10px;
  font-weight: 800;
  color: #ccc;
}

/* SOCIAL MEDIA */
.additional-buttons-container{display:flex;justify-content:center;gap:10px;margin-top:15px;flex-wrap:wrap;}
.additional-button{width:60px;height:60px;display:flex;justify-content:center;align-items:center;}
.additional-button-image{width:95%;height:95%;object-fit:contain;}
.additional-button:hover .additional-button-image{transform:scale(1.05);}

/* STOPKA COPYRIGHT*/
.site-footer{text-align:center;margin-top:20px;padding:10px 5px;}
.site-footer p{font-size:1rem;padding:5px 10px;border-radius:30px;background:rgba(0,0,0,.5);font-weight:400;text-shadow:2px 2px 6px rgba(0,0,0,1);}

.click-hint {
  display:block;
  font-size:0.8rem;
  margin-top:6px;
  color:#ffd700;
  font-weight:700;
  text-shadow:1px 1px 4px rgba(0,0,0,0.9);
}

/* STOPKA COPYRIGHT */
.site-footer1 {
  text-align: center;
  margin-top: 20px;
  padding: 10px 5px;
}

.site-footer1 p {
  font-size: 1rem;
  padding: 7px 16px;
  border-radius: 0px;
  background: rgba(0, 0, 0, 1);
  font-weight: 400;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 1);
  margin-bottom: 5px;
}

.site-footer1 a {
  color: #BF8EF8;
  text-decoration: none;
  font-weight: 600;
}

.hidden {
  display: none !important;
}


/* === NOWY PRZYCISK SKIN.PLACE MOBILE === */
.skinplace-btn a { 
  background: #1a1a1a; 
  color: white; 
}
.skinplace-btn a:hover { 
  background: #FF6B00; 
}
.skinplace-place { 
  color: #FF6B00; 
}

/* NOWA ODZNAKA NEW MOBILE */
.new-badge-mobile {
  position: absolute;
  top: 15px;
  left: 4%;
  transform: translateX(-50%);
  background: rgba(255, 107, 0, 0.9);
  color: white;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  border: 2px solid white;
  z-index: 10;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.skinplace-highlight { 
  color: #FF6B00; 
  font-weight: 900; 
}