/* Popstar Guru Toolkit — games & knowledge blocks */
.pgt-app{
  background:#2A1247;color:#FFF6E8;border:4px solid #FF2D95;border-radius:18px;
  padding:22px;margin:30px 0;box-shadow:0 0 28px rgba(255,45,149,.3);
}
.pgt-app-head h3{font-family:'Bangers',Impact,sans-serif;letter-spacing:1.5px;
  color:#FFDE1A;font-size:1.7rem;margin:0 0 4px;font-weight:400}
.pgt-app-head p{margin:0 0 16px;color:#D9C9F5;font-size:.95rem}

.pgt-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.pgt-controls label{font-size:.8rem;font-weight:700;display:flex;flex-direction:column;gap:3px}
.pgt-controls input[type="text"]{border:3px solid #1A0B2E;border-radius:8px;padding:7px 10px;font-size:.95rem;min-width:150px}
.pgt-controls select{border:3px solid #1A0B2E;border-radius:8px;padding:7px;font-size:.9rem}
.pgt-controls input[type="color"]{width:44px;height:36px;border:3px solid #1A0B2E;border-radius:8px;padding:0;background:#fff}
.pgt-controls input[type="range"]{accent-color:#FF2D95}
.pgt-controls input[type="file"]{font-size:.8rem;max-width:220px}

.pgt-btn{
  font-family:'Bangers',Impact,sans-serif;letter-spacing:1.2px;font-size:1rem;
  background:#23E5FF;color:#1A0B2E;border:3px solid #1A0B2E;border-radius:10px;
  padding:8px 16px;cursor:pointer;box-shadow:3px 3px 0 rgba(0,0,0,.5);
  transition:transform .12s;
}
.pgt-btn:hover{transform:translateY(-2px) rotate(-1deg)}
.pgt-btn:active{transform:translateY(2px)}
.pgt-btn.is-pink{background:#FF2D95;color:#fff}
.pgt-btn.is-yellow{background:#FFDE1A}
.pgt-btn.is-on{outline:4px solid #2BC96B}

.pgt-canvas-wrap{display:flex;justify-content:center}
.pgt-canvas-wrap canvas{
  max-width:100%;height:auto;background:#fff;border:4px solid #1A0B2E;
  border-radius:12px;box-shadow:6px 6px 0 rgba(0,0,0,.5);touch-action:none;cursor:crosshair;
}
.pgt-note{font-size:.8rem;color:#B9A6E0;margin-top:10px;text-align:center}

/* Quiz / color matcher shared */
.pgt-qmeta{display:flex;justify-content:space-between;font-family:'Bangers',Impact,sans-serif;
  letter-spacing:1px;color:#23E5FF;margin-bottom:12px}
.pgt-question{font-size:1.1rem;font-weight:700;margin-bottom:14px}
.pgt-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.pgt-opt{
  background:#FFF6E8;color:#1A0B2E;border:3px solid #1A0B2E;border-radius:12px;
  padding:13px;cursor:pointer;font-weight:600;font-size:.95rem;text-align:left;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);transition:transform .12s;font-family:inherit;
}
.pgt-opt:hover{transform:scale(1.03) rotate(-1deg)}
.pgt-opt.is-right{background:#2BC96B}
.pgt-opt.is-wrong{background:#FF2D95;color:#fff}
.pgt-explain{margin-top:14px;background:rgba(0,0,0,.35);border:2px dashed #FFDE1A;
  border-radius:10px;padding:12px;font-size:.92rem;line-height:1.5}
.pgt-result{text-align:center;padding:16px}
.pgt-result .pgt-big{font-family:'Bangers',Impact,sans-serif;font-size:2.2rem;letter-spacing:2px;
  color:#FFDE1A;text-shadow:3px 3px 0 #FF2D95}

/* palette buttons */
.pgt-palette{display:flex;border:3px solid #1A0B2E;border-radius:12px;overflow:hidden;
  cursor:pointer;box-shadow:3px 3px 0 rgba(0,0,0,.5);height:64px;padding:0;background:none;width:100%;
  transition:transform .12s}
.pgt-palette:hover{transform:scale(1.03)}
.pgt-palette span{flex:1;height:100%}
.pgt-palette.is-right{outline:5px solid #2BC96B}
.pgt-palette.is-wrong{outline:5px solid #FF2D95}

/* wisdom */
.pgt-wisdom-quote{
  font-family:'Bangers',Impact,sans-serif;letter-spacing:1px;font-size:1.4rem;
  text-align:center;background:#1A0B2E;border:3px solid #23E5FF;border-radius:14px;
  padding:20px;margin-bottom:14px;min-height:70px;display:flex;align-items:center;justify-content:center;
}

/* knowledge blocks (artist grid, resources, timeline) */
.pgt-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:20px 0}
.pgt-card{background:#fff;color:#1A0B2E;border:4px solid #1A0B2E;border-radius:14px;
  padding:18px;box-shadow:5px 5px 0 rgba(26,11,46,.8)}
.pgt-card:nth-child(odd){transform:rotate(-.7deg)}
.pgt-card:nth-child(even){transform:rotate(.6deg)}
.pgt-card-emoji{font-size:2.2rem}
.pgt-card h4{font-family:'Bangers',Impact,sans-serif;letter-spacing:1px;font-size:1.3rem;
  margin:6px 0 2px;font-weight:400}
.pgt-card-sub{font-size:.78rem;font-weight:700;color:#8A2BE2;text-transform:uppercase;letter-spacing:.5px}
.pgt-card p{font-size:.88rem;margin:8px 0 0}
.pgt-fact{background:#FFF3DC;border-radius:8px;padding:8px 10px}

.pgt-group-title{font-family:'Bangers',Impact,sans-serif;letter-spacing:1.5px;
  color:#8A2BE2;font-size:1.5rem;margin:28px 0 10px;font-weight:400}
.pgt-resource-list{list-style:none;padding:0;margin:0 0 10px}
.pgt-resource-list li{padding:9px 0;border-bottom:2px dashed #E4D6FF;font-size:.95rem}

.pgt-timeline{border-left:6px solid #FF2D95;margin:24px 0;padding-left:0}
.pgt-era{display:flex;gap:14px;align-items:flex-start;padding:14px 0 14px 20px;position:relative}
.pgt-era::before{content:"";position:absolute;left:-13px;top:24px;width:14px;height:14px;
  background:#FFDE1A;border:3px solid #1A0B2E;border-radius:50%}
.pgt-era-emoji{font-size:1.9rem}
.pgt-era h4{font-family:'Bangers',Impact,sans-serif;letter-spacing:1px;font-size:1.25rem;
  margin:0;font-weight:400}
.pgt-era-years{font-family:'Space Grotesk',sans-serif;font-size:.8rem;color:#8A2BE2;font-weight:700}
.pgt-era p{margin:4px 0 0;font-size:.92rem}

@media (prefers-reduced-motion: reduce){
  .pgt-btn,.pgt-opt,.pgt-palette{transition:none}
}