Trophy Shelf
Your badges live here.
Unlock them by answering correctly, building streaks, finishing levels and mastering the full 100-question run.
Choose Your Set
Five levels. One trance mission.
Play a single 20-question level or take on the full 100. Correct answers score 100 points, plus a speed bonus for fast fingers and a streak bonus for consistency.
ALL Full Run All 100 questions 01 Warm-Up Set 20 questions · easy 02 Classics Vault 20 questions · 90s & 00s 03 Uplifting Mainstage 20 questions · 138 energy 04 Vocal Chamber 20 questions · voices 05 138 Expert Mode 20 questions · tricky
0 Points
0 Streak
0 Answered
— Speed
Question 1 of 100 0%
Warm-Up Set
Question 1
Loading question…
Choose your answer — or press keys 1–4.
← Previous
Next →
Finish & See Result
Your Result
Trance Family Member
0 Points
0/0 Correct
0% Accuracy
0 Best Streak
Share Result
Copy Result
Review Answers
Play Again
Review Mode
Every answer, every fact.
🏆
Badge unlocked First Drop
/* =====================================================================
PHX TRANCE QUIZ 2.0 — MAINSTAGE EDITION
===================================================================== */
.phx-qz{
–r:#ff1744; –o:#ff6a00; –g:#e6b76a; –v:#8f5cff; –c:#30d9ff; –ok:#23ffd4;
–ink:#eef0f8; –ink2:rgba(255,255,255,.72); –ink3:rgba(255,255,255,.48);
–line:rgba(255,255,255,.11); –line2:rgba(255,255,255,.18);
–glass:rgba(255,255,255,.055); –glass2:rgba(255,255,255,.09);
–spec:linear-gradient(90deg,var(–r),var(–o) 45%,var(–g));
position:relative; isolation:isolate; overflow:hidden; overflow-x:clip;
width:100vw; left:50%; margin-left:-50vw; margin-right:-50vw;
padding:clamp(26px,4vw,64px) 0 clamp(56px,6vw,100px);
color:var(–ink);
font-family:Inter,system-ui,-apple-system,”Segoe UI”,Arial,sans-serif;
font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
background:
radial-gradient(100% 60% at 50% -6%,#180f26 0%,transparent 45%),
radial-gradient(70% 50% at 90% 14%,rgba(255,23,68,.13),transparent 50%),
radial-gradient(70% 50% at 8% 30%,rgba(143,92,255,.13),transparent 50%),
linear-gradient(180deg,#0a0913,#070610 55%,#040308);
}
.phx-qz *{box-sizing:border-box}
.phx-qz h1,.phx-qz h2,.phx-qz h3{margin:0;color:#fff;letter-spacing:-.03em}
.phx-qz p{margin:0}
.phx-qz-aura{position:absolute;inset:-20%;z-index:-3;pointer-events:none;opacity:.55;filter:blur(70px);
background:
radial-gradient(closest-side,rgba(255,23,68,.4),transparent 70%) 12% 16%/38% 38% no-repeat,
radial-gradient(closest-side,rgba(143,92,255,.36),transparent 70%) 86% 26%/36% 36% no-repeat,
radial-gradient(closest-side,rgba(255,106,0,.22),transparent 70%) 58% 84%/44% 44% no-repeat;
animation:phxQzAura 26s ease-in-out infinite alternate;}
@keyframes phxQzAura{0%{transform:translate3d(-2%,1%,0)}100%{transform:translate3d(2%,-2%,0) scale(1.08)}}
.phx-qz-gridbg{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5;
background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:46px 46px;
mask-image:radial-gradient(70% 40% at 50% 10%,#000 0 40%,transparent 100%);}
.phx-qz-wrap{width:min(1600px,calc(100% – clamp(28px,5vw,80px)));margin:0 auto;position:relative;z-index:2}
.phx-qz-kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(–g);
background:rgba(230,183,106,.07);border:1px solid rgba(230,183,106,.26);}
.phx-qz-kicker::before{content:””;width:7px;height:7px;border-radius:50%;background:var(–g);box-shadow:0 0 12px var(–g);animation:phxQzDot 2.4s ease-in-out infinite}
@keyframes phxQzDot{0%,100%{opacity:1}50%{opacity:.35}}
/* HERO */
.phx-qz-hero{position:relative;overflow:hidden;border-radius:32px;min-height:clamp(380px,52vw,600px);
display:flex;align-items:flex-end;border:1px solid var(–line2);
box-shadow:0 44px 120px rgba(0,0,0,.6),0 0 90px rgba(143,92,255,.14);
margin-bottom:clamp(24px,3vw,44px);}
.phx-qz-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);animation:phxQzKen 22s ease-in-out infinite alternate}
@keyframes phxQzKen{0%{transform:scale(1.03)}100%{transform:scale(1.1)}}
.phx-qz-hero-shade{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(6,5,12,.3) 0%,transparent 30% 45%,rgba(6,5,12,.94) 100%),
radial-gradient(80% 60% at 85% 8%,rgba(255,23,68,.22),transparent 55%);}
.phx-qz-hero-inner{position:relative;z-index:2;padding:clamp(24px,4vw,56px);max-width:900px}
.phx-qz-hero h1{margin:16px 0 14px;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:.92;font-weight:900;
letter-spacing:-.045em;text-transform:uppercase;color:#fff;text-shadow:0 8px 44px rgba(0,0,0,.7);}
.phx-qz-hero h1 span{background:var(–spec);-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 34px rgba(255,106,0,.55));}
.phx-qz-lead{max-width:62ch;color:var(–ink2);font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.65;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.phx-qz-hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px}
.phx-qz-hero-actions a{display:inline-flex;align-items:center;min-height:50px;padding:12px 24px;border-radius:999px;
text-decoration:none;font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
background:rgba(6,6,14,.55);border:1px solid var(–line2);backdrop-filter:blur(12px);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;}
.phx-qz-hero-actions a.is-primary{background:linear-gradient(135deg,var(–r),var(–o));border-color:transparent;box-shadow:0 10px 34px rgba(255,23,68,.45)}
.phx-qz-hero-actions a:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(255,23,68,.4)}
.phx-qz-hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.phx-qz-hero-stats > div{padding:12px 18px;border-radius:16px;background:rgba(6,6,14,.55);border:1px solid var(–line);backdrop-filter:blur(10px)}
.phx-qz-hero-stats strong{display:block;font-size:1.35rem;font-weight:900;line-height:1;
background:linear-gradient(180deg,#fff,var(–g));-webkit-background-clip:text;background-clip:text;color:transparent}
.phx-qz-hero-stats span{display:block;margin-top:6px;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(–ink3)}
/* KARTEN-GERÜST */
.phx-qz-card{position:relative;margin:0 0 clamp(24px,3vw,44px);padding:clamp(22px,3vw,44px);border-radius:28px;
background:linear-gradient(165deg,var(–glass2),rgba(255,255,255,.02));
border:1px solid var(–line);box-shadow:0 26px 70px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);}
.phx-qz-head{max-width:960px;margin-bottom:clamp(18px,2.4vw,28px)}
.phx-qz-head h2, .phx-qz-topbar h2, .phx-qz-result h2{margin:12px 0 0;font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.03;font-weight:900;letter-spacing:-.035em}
.phx-qz-head h2::after{content:””;display:block;width:58px;height:4px;margin-top:14px;border-radius:999px;background:var(–spec);box-shadow:0 0 18px rgba(255,23,68,.45)}
.phx-qz-head > p:not(.phx-qz-kicker){margin-top:14px;max-width:78ch;color:var(–ink2)}
/* BADGES */
.phx-qz-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.phx-qz-badge{position:relative;padding:18px 16px;border-radius:18px;text-align:center;
background:var(–glass);border:1px solid var(–line);
transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.phx-qz-badge .ico{display:block;font-size:2rem;line-height:1;filter:grayscale(1);opacity:.35;transition:filter .4s ease,opacity .4s ease,transform .4s ease}
.phx-qz-badge b{display:block;margin-top:10px;font-size:.86rem;font-weight:800;color:var(–ink3)}
.phx-qz-badge i{display:block;margin-top:5px;font-style:normal;font-size:.7rem;color:var(–ink3);line-height:1.4}
.phx-qz-badge.is-unlocked{border-color:rgba(230,183,106,.45);background:linear-gradient(165deg,rgba(230,183,106,.12),var(–glass));box-shadow:0 0 34px rgba(230,183,106,.16)}
.phx-qz-badge.is-unlocked .ico{filter:none;opacity:1;transform:scale(1.08)}
.phx-qz-badge.is-unlocked b{color:#fff}
.phx-qz-badge.is-unlocked i{color:var(–ink2)}
.phx-qz-badge.is-fresh{animation:phxQzPop .6s cubic-bezier(.2,.8,.2,1)}
@keyframes phxQzPop{0%{transform:scale(.85)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
/* LEVEL-AUSWAHL */
.phx-qz-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.phx-qz-modes button{position:relative;text-align:left;padding:18px 20px;border-radius:18px;cursor:pointer;color:var(–ink);
background:var(–glass);border:1px solid var(–line);
transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;}
.phx-qz-modes button em{font-style:normal;font-size:.62rem;font-weight:900;letter-spacing:.2em;color:var(–c)}
.phx-qz-modes button strong{display:block;margin:8px 0 4px;font-size:1.08rem;font-weight:850;letter-spacing:-.01em;color:#fff}
.phx-qz-modes button small{color:var(–ink3);font-size:.78rem}
.phx-qz-modes button:hover{transform:translateY(-4px);border-color:var(–line2)}
.phx-qz-modes button.is-active{border-color:transparent;background:linear-gradient(150deg,rgba(255,23,68,.28),rgba(255,106,0,.14));
box-shadow:0 14px 40px rgba(255,23,68,.3),inset 0 0 0 1px rgba(255,80,120,.5);}
.phx-qz-modes button.is-active em{color:var(–g)}
/* SPIELFELD */
.phx-qz-topbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.phx-qz-scores{display:flex;flex-wrap:wrap;gap:10px}
.phx-qz-scores > div{min-width:92px;padding:10px 16px;border-radius:14px;text-align:center;background:var(–glass);border:1px solid var(–line)}
.phx-qz-scores strong{display:block;font-size:1.3rem;font-weight:900;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.phx-qz-scores span{display:block;margin-top:5px;font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(–ink3)}
.phx-qz-timerbox strong{color:var(–c)}
.phx-qz-progress{height:10px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.07);border:1px solid var(–line)}
.phx-qz-progress i{display:block;height:100%;width:0;border-radius:999px;background:var(–spec);box-shadow:0 0 18px rgba(255,106,0,.55);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.phx-qz-progress-label{display:flex;justify-content:space-between;margin:8px 2px 20px;font-size:.74rem;font-weight:700;color:var(–ink3)}
.phx-qz-question{padding:clamp(18px,2.4vw,30px);border-radius:22px;background:rgba(0,0,0,.26);border:1px solid var(–line)}
.phx-qz-qmeta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(–ink3)}
.phx-qz-qlevel{padding:6px 12px;border-radius:999px;color:var(–c);background:rgba(48,217,255,.08);border:1px solid rgba(48,217,255,.3)}
.phx-qz-question h3{font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:850;line-height:1.25;margin-bottom:18px}
.phx-qz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.phx-qz-option{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:16px;cursor:pointer;text-align:left;
color:var(–ink);background:var(–glass);border:1px solid var(–line);font-size:.98rem;line-height:1.4;
transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;}
.phx-qz-option b{flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
font-size:.85rem;font-weight:900;color:var(–ink2);background:rgba(255,255,255,.07);border:1px solid var(–line)}
.phx-qz-option:hover:not(:disabled){transform:translateY(-3px);border-color:var(–line2);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.phx-qz-option:disabled{cursor:default;opacity:.85}
.phx-qz-option.is-correct{border-color:rgba(35,255,212,.65);background:linear-gradient(150deg,rgba(35,255,212,.16),var(–glass));box-shadow:0 0 30px rgba(35,255,212,.2)}
.phx-qz-option.is-correct b{color:#06231d;background:var(–ok);border-color:transparent}
.phx-qz-option.is-wrong{border-color:rgba(255,23,68,.6);background:linear-gradient(150deg,rgba(255,23,68,.18),var(–glass));animation:phxQzShake .4s ease}
.phx-qz-option.is-wrong b{color:#2b060e;background:var(–r);border-color:transparent}
@keyframes phxQzShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.phx-qz-feedback{margin-top:16px;padding:14px 16px;border-radius:14px;font-size:.92rem;line-height:1.55;color:var(–ink2);
background:rgba(255,255,255,.04);border:1px solid var(–line);}
.phx-qz-feedback.is-good{color:#d8fff6;border-color:rgba(35,255,212,.4);background:rgba(35,255,212,.07)}
.phx-qz-feedback.is-bad{color:#ffdbe3;border-color:rgba(255,23,68,.4);background:rgba(255,23,68,.08)}
.phx-qz-navrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.phx-qz-btn{padding:13px 22px;border-radius:999px;cursor:pointer;font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:#fff;background:var(–glass);border:1px solid var(–line2);
transition:transform .2s ease,background .2s ease,box-shadow .2s ease;}
.phx-qz-btn:hover{transform:translateY(-2px);background:var(–glass2)}
.phx-qz-btn.is-primary{background:linear-gradient(135deg,var(–r),var(–o));border-color:transparent;box-shadow:0 10px 30px rgba(255,23,68,.4)}
.phx-qz-btn.is-primary:hover{box-shadow:0 14px 40px rgba(255,23,68,.5)}
/* RESULT */
.phx-qz-result{background:
radial-gradient(90% 70% at 15% 0%,rgba(255,23,68,.16),transparent 50%),
radial-gradient(90% 70% at 90% 100%,rgba(143,92,255,.16),transparent 50%),
linear-gradient(165deg,var(–glass2),rgba(255,255,255,.02));text-align:center;}
.phx-qz-result-inner{max-width:860px;margin:0 auto}
.phx-qz-result h2{font-size:clamp(2rem,4.6vw,3.6rem);
background:linear-gradient(100deg,#fff,var(–g) 55%,var(–o));-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 30px rgba(255,106,0,.35));}
.phx-qz-result-nums{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0}
.phx-qz-result-nums > div{min-width:120px;padding:16px 20px;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid var(–line)}
.phx-qz-result-nums strong{display:block;font-size:1.7rem;font-weight:900;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.phx-qz-result-nums span{display:block;margin-top:6px;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(–ink3)}
.phx-qz-result-msg{max-width:64ch;margin:0 auto;color:var(–ink2);font-size:1.02rem}
.phx-qz-result-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:18px}
.phx-qz-result-badges span{padding:8px 14px;border-radius:999px;font-size:.76rem;font-weight:800;color:#fff;
background:rgba(230,183,106,.14);border:1px solid rgba(230,183,106,.45)}
.phx-qz-result .phx-qz-navrow{justify-content:center;margin-top:24px}
/* REVIEW */
.phx-qz-review-list{display:grid;gap:12px}
.phx-qz-review-item{padding:18px 20px;border-radius:16px;background:var(–glass);border:1px solid var(–line);border-left:4px solid var(–line2)}
.phx-qz-review-item.is-good{border-left-color:var(–ok)}
.phx-qz-review-item.is-bad{border-left-color:var(–r)}
.phx-qz-review-item h4{margin:0 0 8px;font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.phx-qz-review-item p{font-size:.88rem;color:var(–ink2);margin:4px 0 0}
.phx-qz-review-item .fact{color:var(–g)}
/* TOAST + KONFETTI */
.phx-qz-toast{position:fixed;right:22px;bottom:22px;z-index:99;display:flex;align-items:center;gap:14px;
padding:16px 20px;border-radius:18px;color:#fff;
background:rgba(10,9,18,.92);border:1px solid rgba(230,183,106,.5);backdrop-filter:blur(14px);
box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(230,183,106,.25);
animation:phxQzToast .5s cubic-bezier(.2,.8,.2,1);}
@keyframes phxQzToast{0%{transform:translateY(24px);opacity:0}100%{transform:translateY(0);opacity:1}}
.phx-qz-toast-icon{font-size:1.9rem;line-height:1}
.phx-qz-toast b{display:block;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(–g)}
.phx-qz-toast i{display:block;font-style:normal;font-weight:800;font-size:1rem}
.phx-qz-confetti{position:fixed;inset:0;z-index:98;pointer-events:none;overflow:hidden}
.phx-qz-confetti span{position:absolute;width:9px;height:14px;border-radius:2px;opacity:0;
animation:phxQzConfetti 1.6s cubic-bezier(.2,.6,.4,1) forwards;}
@keyframes phxQzConfetti{
0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}
100%{opacity:0;transform:translate3d(var(–dx,0),var(–dy,-300px),0) rotate(var(–rot,540deg))}
}
/* RESPONSIVE + A11Y */
@media(max-width:980px){.phx-qz-modes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
.phx-qz{font-size:15.5px}
.phx-qz-modes{grid-template-columns:1fr}
.phx-qz-options{grid-template-columns:1fr}
.phx-qz-hero{min-height:420px}
.phx-qz-toast{left:14px;right:14px}
}
.phx-qz :focus-visible{outline:2px solid var(–o);outline-offset:3px;border-radius:10px}
@media(prefers-reduced-motion:reduce){
.phx-qz *,.phx-qz *::before,.phx-qz *::after{animation:none!important;transition:none!important}
}
{
“@context”: “
https://schema.org” ;,
“@type”: “Quiz”,
“name”: “Trance Music Quiz — 100 Questions for the Trance Family”,
“about”: {“@type”: “Thing”, “name”: “Trance music”},
“educationalLevel”: “beginner to expert”,
“assesses”: “Trance music history, artists, labels, classic tracks, BPM knowledge and scene culture”,
“provider”: {“@type”: “Person”, “name”: “DJ Phalanx”, “url”: “
https://djphalanx.com/” ;},
“url”: “
https://djphalanx.com/trance-music-quiz-100-questions-for-the-trance-family/” ;
}
