/* ============ Base ============ */
* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #eaf2ff;
  background: #0b1220;
  overflow-x: hidden;
}
.hidden{ display:none !important; }

:root{
  --glass-bg: rgba(14, 22, 41, 0.55);
  --glass-stroke: rgba(255,255,255,0.12);
  --brand: #5ea1ff;
  --brand-2: #7a5cff;
  --outline: rgba(94,161,255,.35);
}

/* ============ TŁO ============ */
#background { position: fixed; inset: 0; z-index: -2; overflow: hidden }
#background::after{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(14,22,41,0.25), rgba(7,10,18,0.85)),
    linear-gradient(180deg, rgba(3,7,18,0.20), rgba(3,7,18,0.60));
  z-index: 1;
}
#bg-video{
  position:absolute; left:50%; top:50%;
  min-width:100%; min-height:100%;
  width:auto; height:auto; transform:translate(-50%,-50%);
  object-fit:cover; display:block;
}

/* ============ BRAMKA ============ */
#gate{
  position: fixed; inset: 0; display:grid; place-items:center;
  background: rgba(46,107,255,0.6); backdrop-filter: blur(8px);
  color:#fff; z-index: 10; cursor:pointer; touch-action:none;
  overscroll-behavior:contain;
}
.gate-content{ text-align:center; animation: pop .8s ease both }
.gate-text{ font-weight: 800; letter-spacing: .3px; font-size: 22px }
.gate-sub{ opacity:.9; margin-top: 6px }
@keyframes pop{ from{ transform: translateY(10px); opacity:0 } to{ transform:none; opacity:1 } }

body.gated{ overflow:hidden; height:100svh; }
body.gated #music-player,
body.gated .credit-badge{ opacity:0; pointer-events:none; transform: translateY(6px); }

/* ============ MINI-PLAYER — COMPACT (260px) ============ */
#music-player{
  position: fixed; bottom: 20px; left: 20px; z-index: 9999;
  transition: opacity .25s, transform .25s;
}
#music-player.compact{
  width: 260px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
#music-player .mp-row{ width:100% }

/* czas + progress */
#music-player .mp-info{
  display:flex; align-items:center; gap:8px; font-size:11px; opacity:.95
}
#music-player #progress-bar{
  flex:1; appearance:none; height:4px; border-radius:999px; background: rgba(255,255,255,.14);
}
#music-player #progress-bar::-webkit-slider-thumb{
  appearance:none; width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 45% 40%, #9b7bff 10%, #5ea1ff 70%);
  border:1px solid rgba(255,255,255,.45); box-shadow: 0 0 0 4px rgba(122,92,255,.18);
}
#music-player #progress-bar::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 45% 40%, #9b7bff 10%, #5ea1ff 70%);
  border:1px solid rgba(255,255,255,.45);
}

/* tytuł */
#music-player .mp-title{
  text-align:center; margin:6px 0 2px;
}
#music-player .mp-title #track-title{
  font-weight:800; font-size:12px; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:block;
}

/* kontrolki */
#music-player .mp-controls{
  display:flex; justify-content:center; gap:8px; margin:6px 0 8px;
}
#music-player .mp-btn{
  width:34px; height:34px;
  border-radius:12px; border:1px solid var(--glass-stroke);
  background: rgba(255,255,255,.07);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.15s ease; box-shadow: inset 0 0 0 0 rgba(122,92,255,0);
}
#music-player .mp-btn.primary{
  width:38px; height:38px; border-radius:13px;
  box-shadow: inset 0 0 0 1px rgba(122,92,255,.28);
}
#music-player .mp-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.28) }
#music-player .mp-btn svg{ display:block }

/* przełączanie ikon play/pause */
#play-btn .icon-pause{ display:none }
#play-btn.is-playing .icon-play{ display:none }
#play-btn.is-playing .icon-pause{ display:block }

/* głośność */
#music-player .mp-volume{
  display:flex; align-items:center; gap:8px; font-size:12px;
}
#music-player .mp-volume .vol-ic{ opacity:.9 }
#music-player #volume-bar{
  flex:1; appearance:none; height:4px; border-radius:999px; background: rgba(255,255,255,.14);
}
#music-player #volume-bar::-webkit-slider-thumb{
  appearance:none; width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 45% 40%, #9b7bff 10%, #5ea1ff 70%);
  border:1px solid rgba(255,255,255,.45); box-shadow: 0 0 0 4px rgba(122,92,255,.18);
}
#music-player #volume-bar::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 45% 40%, #9b7bff 10%, #5ea1ff 70%);
  border:1px solid rgba(255,255,255,.45);
}

/* ============ STRONA / DISCORD / MODAL ============ */
/* (bez zmian poza drobnymi porządkami – reszta tak jak wcześniej) */

.page{ min-height: 100dvh; padding: 88px 18px; display:flex; align-items:flex-start; justify-content:center }
.glass{ background: var(--glass-bg); border: 1px solid var(--glass-stroke); backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35); border-radius: 18px }

.profile{ width: min(780px, 92vw); padding: 20px 22px 26px; position: relative }
.profile-top{ display:flex; justify-content:flex-end }
.views{ display:flex; gap:8px; align-items:center; font-size: 14px; opacity:.95 }
.views .eye svg{ filter: drop-shadow(0 0 3.5px #fff) }

.avatar-wrap{ position: relative; margin: 18px auto 10px; width: 118px; height: 118px }
.avatar{ width: 100%; height: 100%; border-radius: 24px; object-fit: cover; box-shadow: 0 5px 20px rgba(0,0,0,.4); border: 3px solid rgba(255,255,255,.2)}
.status{ position:absolute; right:-4px; bottom:-4px; width:18px; height:18px; border-radius:50%; border:3px solid #0b1220; box-shadow: 0 2px 8px rgba(0,0,0,.4) }
.status.online{ background:#22c55e } .status.idle{ background:#eab308 } .status.dnd{ background:#ef4444 } .status.offline{ background:#64748b }
.avatar-wrap::before{ content:""; position:absolute; inset:-8px; border-radius:28px; background: radial-gradient(120px 120px at 30% 20%, rgba(126,92,255,.35), transparent 70%), radial-gradient(120px 120px at 70% 80%, rgba(94,161,255,.35), transparent 70%); filter: blur(8px); opacity:.7; animation: pulse 2.4s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.65 } 50%{ transform:scale(1.03); opacity:.9 } }
.avatar-wrap::after{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; background: #7a5cff; box-shadow: 0 0 10px #7a5cff; transform-origin: -40px -40px; animation: orbit 5.5s linear infinite }
@keyframes orbit{ to{ transform: rotate(360deg) translate(-50%,-50%); } }

.hero-logo{ display:flex; justify-content:center; align-items:center; margin: 6px 0 10px }
.hero-logo img{ display:block; width:100%; max-width: clamp(280px, 40vw, 340px); height:auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.55)) }
.tagline{ margin:0 0 14px; text-align:center; color:#c9d6ff; opacity:.9 }

.socials{ display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; margin:16px 0 18px }
.socials a{ --sz:56px; width:var(--sz); height:var(--sz); padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; text-decoration:none; color:#fff; font-weight:700; background: linear-gradient(135deg, rgba(94,161,255,.25), rgba(122,92,255,.25)); border:1px solid var(--glass-stroke); transition:.2s }
.socials a .icon{ line-height:0; display:inline-flex }
.socials a .icon svg{ width:22px; height:22px; filter: drop-shadow(0 0 3.5px #fff); fill:#fff }
.socials a:hover{ transform: translateY(-2px) }

.card-outline{ border:1.5px solid var(--outline); border-radius:16px; padding:12px; background: rgba(255,255,255,.03) }
.discord-cards{ display:flex; flex-direction:column; gap:12px; margin:12px 0 8px }
.discord-user-card, .discord-guild-card{ display:flex; justify-content:space-between; align-items:center }
.duc-left{ display:flex; align-items:center; gap:10px; position:relative }
.duc-avatar{ width:44px; height:44px; border-radius:12px; object-fit:cover }
.duc-dot{ position:absolute; left:34px; bottom:-2px; width:12px; height:12px; border-radius:50%; border:2px solid #0b1220 }
.duc-dot.online{ background:#22c55e } .duc-dot.idle{ background:#eab308 } .duc-dot.dnd{ background:#ef4444 } .duc-dot.offline{ background:#64748b }
.duc-handle{ font-weight:800 } .duc-sub{ margin-top:2px }
.duc-btn, .dgc-btn{ text-decoration:none; color:#fff; font-weight:700; padding:10px 14px; border-radius:12px; border:1px solid var(--outline); background: rgba(255,255,255,.04); transition:.2s }
.duc-btn:hover, .dgc-btn:hover{ transform: translateY(-2px) }
.dgc-left{ display:flex; align-items:center; gap:12px }
.dgc-icon{ width:48px; height:48px; border-radius:12px; object-fit:cover }
.dgc-name{ font-weight:800; margin-bottom:4px }
.dgc-stats{ display:flex; gap:16px; font-size:14px; opacity:.95 }
.dgc-stats .dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#22c55e; margin-right:6px }

.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px }
@media (max-width: 720px){ .grid{ grid-template-columns: 1fr } }
.card{ padding: 14px; border-radius: 14px; border: 1px solid var(--glass-stroke); background: rgba(255,255,255,.04) }
.card-title{ font-weight: 800; margin-bottom: 6px }
.card-desc{ opacity: .8; font-size: 14px }

/* Modal / Lightbox (jak wcześniej) */
.modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.5); z-index:20 }
.modal.hidden{ display:none }
.modal-dialog{ width:min(900px,92vw); max-height:86vh; overflow:auto; padding:16px; position:relative }
.close{ position:absolute; right:10px; top:10px; background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer }
.ps-hero{ width:100%; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10); margin-bottom:12px }
.ps-hero img{ width:100%; height:auto; display:block; object-fit:cover }
.ps-thumbs{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px }
@media (max-width: 720px){ .ps-thumbs{ grid-template-columns: repeat(3,1fr) } }
.ps-thumbs img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.08); cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, outline-color .2s ease, opacity .15s }
.ps-thumbs img:hover{ transform: translateY(-2px); outline:1px solid rgba(255,255,255,.18) }
.lb{ position: fixed; inset:0; background:rgba(0,0,0,.8); z-index: 40; display:grid; place-items:center }
.lb-img{ max-width: 92vw; max-height: 88vh; border-radius: 14px; border:1px solid rgba(255,255,255,.15) }

.modal-dialog{ scrollbar-width: thin; scrollbar-color: rgba(122,92,255,.5) rgba(255,255,255,.04); overscroll-behavior: contain; scrollbar-gutter: stable; max-height:86vh }
.modal-dialog::-webkit-scrollbar{ width:10px }
.modal-dialog::-webkit-scrollbar-track{ background: transparent; margin-block:10px }
.modal-dialog::-webkit-scrollbar-thumb{
  border-radius:10px; border:3px solid transparent; background-clip: padding-box;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 8px rgba(122,92,255,.35);
}

/* „nocopy” */
body.nocopy *:not(input):not(textarea){ user-select:none !important; -webkit-user-select:none !important; -ms-user-select:none !important; -moz-user-select:none !important; caret-color:transparent }
body.nocopy *::selection{ background: transparent }

/* MOBILE / safe-area */
:root{ --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px) }
html{ height:-webkit-fill-available }
body{ min-height:100dvh; min-height:-webkit-fill-available }
.page{ min-height:100svh; padding: calc(72px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)) }
@media (max-width:740px){
  #music-player{ left:calc(12px + var(--safe-left)); right:auto; bottom:calc(12px + var(--safe-bottom)); width: calc(100vw - 24px - var(--safe-left)); max-width: 480px; }
}

/* Credit badge */
.credit-badge{
  position: fixed; left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 10000;
  font-weight: 700; font-size: 14px; line-height: 1.2;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.6);
  opacity: .95; pointer-events: none; transition: opacity .35s, transform .35s;
  animation: credit-fade .6s ease both .2s;
}
.credit-badge .credit-name{ color:#8215c2; font-weight:800 }
@keyframes credit-fade{ from{ transform: translateX(-50%) translateY(6px); opacity:0 } to{ transform: translateX(-50%) translateY(0); opacity:.95 } }

/* ===== Animated link-cards (PC Setup / PC Specs) ===== */
.link-card{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 14px;
  outline: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  transition: transform .18s ease, box-shadow .18s ease, outline-color .18s ease, background .25s ease;
  will-change: transform;
}

/* delikatne uniesienie + mocniejsza poświata obramowania */
.link-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  outline-color: rgba(124,104,255,.35);
}

/* spotlight pod kursorem */
.link-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(140px 140px at var(--mx,50%) var(--my,50%),
      rgba(124,104,255,.28), rgba(94,161,255,.22) 30%, transparent 60%);
  pointer-events:none;
  filter: blur(18px);
  opacity: 0;
  transition: opacity .25s ease;
}
.link-card:hover::before{ opacity:.95 }

/* błysk przejeżdżający po karcie */
.link-card::after{
  content:"";
  position:absolute; inset:-20%;
  background: linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,.35) 48%,
      rgba(255,255,255,.75) 50%,
      rgba(255,255,255,.35) 52%,
      transparent 100%);
  mix-blend-mode: screen;
  transform: translateX(-120%);
  opacity:.25;
  pointer-events:none;
}
.link-card:hover::after{ animation: card-shine .9s ease forwards }

@keyframes card-shine{
  from { transform: translateX(-120%) }
  to   { transform: translateX(120%) }
}

/* ładny focus z klawiatury */
.link-card:focus-visible{
  outline: 2px solid rgba(94,161,255,.85);
  box-shadow: 0 0 0 6px rgba(94,161,255,.25);
}

/* mniej ruchu – respektuj prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .link-card,
  .link-card::before,
  .link-card::after{ transition: none !important; animation: none !important }
  .link-card:hover{ transform:none; box-shadow: 0 10px 28px rgba(0,0,0,.28) }
}

/* ===== Group cards (PC / LEGO) ===== */
.group-card{ padding: 14px 14px 16px }
.group-header{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: 10px;
}
.group-title{ font-weight: 800; font-size: 16px; letter-spacing:.2px }
.group-sub{ opacity:.8; font-size: 13px }

/* dwa „pills” obok siebie, na mobile w kolumnie */
.group-actions{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (max-width:720px){ .group-actions{ grid-template-columns: 1fr } }

.pill-btn{
  width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--glass-stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:#fff; transition:.18s ease; outline:1px solid rgba(255,255,255,.05);
}
.pill-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.28); outline-color: rgba(124,104,255,.32) }
.pill-title{ font-weight:800; margin-bottom:4px }
.pill-desc{ opacity:.85; font-size:13px }

/* Mniejsze preview w modalu */
.ps-hero{
  width: 100%;
  max-height: 58vh;
  display: grid;
  place-items: center;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.ps-hero img{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 56vh;      /* najważniejsze: mniejszy podgląd */
  object-fit: contain;   /* bez przycinania */
  display: block;
}

/* Lightbox – ciemniejsze tło + wyższy z-index */
.lb{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92); /* mocniejsze przyciemnienie, nie widać „PC” w tle */
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.lb-img{
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.lb-btn, .lb-close{
  position: fixed;
  bottom: 18px;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.lb-prev{ left: calc(50% - 48px); }
.lb-next{ left: calc(50% + 14px); }
.lb-close{ top: 18px; right: 18px; bottom: auto; }

body.no-scroll{ overflow: hidden; }

/* Schowaj modal pod lightboxem (żeby nie było widać PC za LEGO) */
.modal.is-under-lightbox{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* mocniejsze przyciemnienie lightboxa */
.lb{
  background: rgba(0,0,0,.96); /* było .92/.8 */
  z-index: 11000;              /* pewnie nad wszystkim */
}

/* Live Discord activity */
.activity{
  display:none;
  margin:-4px 0 10px;
  text-align:center;
  font-weight:800;
  font-size:14px;
  color:#eaf2ff;
  opacity:.95;
}
.activity .ic{ margin-right:6px }