/* Spicy Pineapple Glossary — v2.4.0 (club neon + autolinks) */

.spg-wrap{
  --bg0:#05050a;
  --bg1:#0b0714;
  --purple:#a855f7;
  --red:#ff2a6d;
  --text:#f2f2ff;
  --muted:#a7a7c7;
  --border:rgba(255,255,255,.08);

  /* intensity defaults (strong) */
  --glowP:.55;
  --glowR:.35;
  --glowShadow: 0 0 25px rgba(168,85,247,.32), 0 0 70px rgba(255,42,109,.22);
  --pineGlow: drop-shadow(0 0 22px rgba(168,85,247,.40)) drop-shadow(0 0 26px rgba(255,42,109,.22));
  --segHoverGlow: drop-shadow(0 0 18px rgba(168,85,247,.55)) drop-shadow(0 0 48px rgba(168,85,247,.22));
  --segActiveGlow: drop-shadow(0 0 20px rgba(255,42,109,.60)) drop-shadow(0 0 56px rgba(255,42,109,.24));

  width:100%;
}

/* intensity switch */
.spg-wrap.spg-glow-normal{
  --glowP:.26;
  --glowR:.16;
  --glowShadow: 0 0 18px rgba(168,85,247,.18), 0 0 40px rgba(255,42,109,.12);
  --pineGlow: drop-shadow(0 0 16px rgba(168,85,247,.22)) drop-shadow(0 0 18px rgba(255,42,109,.12));
  --segHoverGlow: drop-shadow(0 0 12px rgba(168,85,247,.32)) drop-shadow(0 0 22px rgba(168,85,247,.14));
  --segActiveGlow: drop-shadow(0 0 12px rgba(255,42,109,.34)) drop-shadow(0 0 22px rgba(255,42,109,.14));
}
.spg-wrap.spg-glow-medium{
  --glowP:.42;
  --glowR:.26;
  --glowShadow: 0 0 22px rgba(168,85,247,.25), 0 0 56px rgba(255,42,109,.18);
  --pineGlow: drop-shadow(0 0 18px rgba(168,85,247,.30)) drop-shadow(0 0 22px rgba(255,42,109,.18));
  --segHoverGlow: drop-shadow(0 0 15px rgba(168,85,247,.44)) drop-shadow(0 0 36px rgba(168,85,247,.18));
  --segActiveGlow: drop-shadow(0 0 16px rgba(255,42,109,.48)) drop-shadow(0 0 42px rgba(255,42,109,.20));
}

.spg-stage{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 980px){
  .spg-stage{ grid-template-columns: 1fr; }
}

.spg-canvasWrap{
  position:relative;
  height: var(--spg-h, 680px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:1px solid var(--border);
  background:
    radial-gradient(1200px 700px at 30% 30%, rgba(168,85,247,var(--glowP)), transparent 55%),
    radial-gradient(1000px 600px at 70% 70%, rgba(255,42,109,var(--glowR)), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--glowShadow);
}

/* overlay SVG */
.spg-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height: 100%;
  pointer-events:auto;
}

/*
  HARD LOCK SIZING
  Niektóre motywy WP wymuszają svg/img {height:auto} i wtedy ananas wygląda jak "zoom/crop".
  To blokuje nadpisywanie i trzyma wszystko idealnie w kontenerze.
*/
.spg-overlay svg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
}

/* pineapple itself */
.spg-pineapple{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  filter: var(--pineGlow);
}

/* segments (letters) */
.spg-seg{
  fill: rgba(255,255,255,0.02);
  stroke: none;
  cursor:pointer;
  transition: filter .22s ease, fill .22s ease, transform .22s ease;
  transform-origin: center;
}

/* subtelny “3D glass” hover */
.spg-seg:hover{
  fill: rgba(168,85,247,0.12);
  filter: var(--segHoverGlow);
}

.spg-seg.is-active{
  fill: rgba(255,42,109,0.14);
  filter: var(--segActiveGlow);
}

/* litery w rombach */
.spg-segText{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .06em;
  fill: rgba(255,255,255,0.90);
  opacity: .70;
  pointer-events:none;
  transition: transform .20s ease, opacity .20s ease, filter .20s ease;
  transform-origin: center;
  filter: drop-shadow(0 0 10px rgba(168,85,247,.24));
}

.spg-seg:hover + .spg-segText,
.spg-seg.is-active + .spg-segText{ opacity: 1; }

.spg-segText.is-active{
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(255,42,109,.55)) drop-shadow(0 0 22px rgba(255,42,109,.18));
}

/* puls aktywnej litery */
@media (prefers-reduced-motion: no-preference){
  @keyframes spgPulse {
    0% { transform: scale(1.00); }
    50%{ transform: scale(1.05); }
    100%{ transform: scale(1.00); }
  }
  .spg-seg.is-active{
    animation: spgPulse 1.35s ease-in-out infinite;
  }
}

/* right panel */
.spg-panel{
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(12,8,22,.92), rgba(6,6,12,.92));
  box-shadow: var(--glowShadow);
  color: var(--text);
  min-height: 100%;
  display:flex;
  flex-direction:column;
}

.spg-panelHead{
  display:flex;
  gap:12px;
  align-items:center;
  padding:16px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(900px 200px at 20% 0%, rgba(168,85,247,.18), transparent 55%),
    radial-gradient(900px 200px at 80% 0%, rgba(255,42,109,.14), transparent 55%);
}

.spg-letter{
  width:44px; height:44px;
  display:grid; place-items:center;
  font-weight:900;
  font-size:18px;
  border-radius:14px;
  border:1px solid rgba(168,85,247,.34);
  box-shadow: 0 0 22px rgba(168,85,247,.22);
  background: rgba(168,85,247,.12);
}

.spg-title{
  font-weight:800;
  font-size:14px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color: rgba(242,242,255,.92);
}

.spg-list{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  scroll-behavior:smooth;
}

/* smooth transitions */
.spg-list.is-switching{ opacity:.20; transform: translateY(2px); filter: blur(1px); }
.spg-list{ transition: opacity .20s ease, transform .20s ease, filter .20s ease; }

.spg-item{
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:12px 12px 10px;
  background: rgba(255,255,255,.03);
  position:relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.spg-item:hover{
  transform: translateY(-1px);
  border-color: rgba(168,85,247,.34);
  box-shadow: 0 0 26px rgba(168,85,247,.14);
}
.spg-item.is-highlight{
  border-color: rgba(255,42,109,.62);
  box-shadow: 0 0 34px rgba(255,42,109,.22), 0 0 16px rgba(168,85,247,.14);
  transform: translateY(-2px);
}

.spg-term{
  font-weight:900;
  margin:0 0 6px 0;
  color: rgba(242,242,255,.96);
}
.spg-desc{
  margin:0;
  color: var(--muted);
  line-height:1.45;
  font-size:13px;
}

/* autolink style */
.spg-desc a.spg-autolink{
  color: rgba(242,242,255,.92);
  text-decoration:none;
  border-bottom: 1px dashed rgba(168,85,247,.55);
  padding: 0 2px;
  transition: color .18s ease, border-color .18s ease, filter .18s ease;
}
.spg-desc a.spg-autolink:hover{
  color: #fff;
  border-color: rgba(255,42,109,.70);
  filter: drop-shadow(0 0 10px rgba(255,42,109,.25));
}

.spg-footer{
  margin-top:auto;
  padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  color: rgba(242,242,255,.70);
  font-size:12px;
}

/* editor UI (admin only; appears on frontend only when canEdit) */
.spg-editBadge{
  position:absolute;
  right: 12px;
  top: 12px;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 18px rgba(168,85,247,0.22);
  pointer-events:none;
}

.spg-collectBtn{
  position:absolute;
  left: 12px;
  top: 12px;
  z-index: 7;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(168,85,247,0.45), rgba(255,0,150,0.26));
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 0 34px rgba(168,85,247,0.22);
  pointer-events:auto;
  backdrop-filter: blur(10px);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.spg-collectBtn:hover{
  box-shadow: 0 0 46px rgba(255,0,150,0.26), 0 0 30px rgba(168,85,247,0.30);
  transform: translateY(-1px);
}

.spg-letterPalette{
  position:absolute;
  left: 12px;
  top: 58px;
  z-index: 6;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 36px rgba(168,85,247,0.18);
  pointer-events:auto;
  backdrop-filter: blur(10px);
}
.spg-letterPalette button{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.spg-letterPalette button:hover{
  transform: translateY(-1px);
  border-color: rgba(168,85,247,0.65);
  box-shadow: 0 0 18px rgba(168,85,247,0.32);
}

@media (max-width: 560px){
  .spg-letterPalette{ grid-template-columns: repeat(7, 1fr); left: 8px; top: 52px; padding: 8px; }
  .spg-letterPalette button{ width: 26px; height: 26px; border-radius: 9px; }
  .spg-collectBtn{ left: 8px; top: 8px; padding: 9px 10px; border-radius: 13px; }
}

/* hint pills */
.spg-hint{
  position:absolute;
  left:14px;
  bottom:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  pointer-events:none;
  z-index: 8;
}

.spg-pill{
  background: rgba(10,10,18,.55);
  border:1px solid rgba(168,85,247,.30);
  color: var(--text);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.2px;
  box-shadow: 0 0 18px rgba(168,85,247,.20);
  backdrop-filter: blur(10px);
}
.spg-pill2{
  border-color: rgba(255,42,109,.28);
  box-shadow: 0 0 18px rgba(255,42,109,.16);
}

/* hover label (optional) */
.spg-hoverLabel{
  position:absolute;
  transform: translate(-50%,-50%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  opacity: 0;
  pointer-events:none;
  z-index: 9;
}

/* ================================
   MODAL (popup czytania hasła)
================================ */
.spg-modal{ position: fixed; inset: 0; z-index: 99999; display: none; }
.spg-modal.is-open{ display: block; }
.spg-modalBackdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); }
.spg-modalCard{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(.98);
  width: min(920px, calc(100vw - 36px));
  max-height: min(78vh, 720px);
  overflow: auto;
  padding: 18px 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(12,10,20,.92);
  box-shadow: 0 0 0 1px rgba(255,0,170,.16), 0 18px 60px rgba(0,0,0,.55);
}
.spg-modal.is-open .spg-modalCard{ animation: spgModalIn .18s ease-out forwards; }
@keyframes spgModalIn{ from{ opacity:0; transform: translate(-50%,-50%) scale(.96);} to{opacity:1; transform: translate(-50%,-50%) scale(1);} }

.spg-modalClose{
  position: sticky;
  top: 0;
  float: right;
  margin: -6px -6px 10px 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease;
}
.spg-modalClose:hover{ transform: scale(1.03); box-shadow: 0 0 0 1px rgba(255,0,170,.22), 0 0 18px rgba(255,0,170,.18); }

.spg-modalTitle{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 22px;
  margin: 6px 0 10px;
  color: rgba(242,242,255,.96);
}
.spg-modalBody{
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.88);
}
.spg-modalBody p{ margin: 0 0 10px; }

/* blokuj scroll strony gdy modal otwarty */
html.spg-modalOpen{ overflow: hidden; }