/* Quiz RMF: duży ekran w klasie. Scena 1920x1080 skalowana do okna (app.js), nic nie wystaje poza ekran. */
@font-face { font-family: 'M'; src: url('assets/Montserrat.ttf') format('truetype'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'MI'; src: url('assets/Montserrat-Italic.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: block; }
:root {
  --fmY: #FFD200; --fmY2: #FFE45C; --fmN: #1C3380; --fmN2: #0F1E52; --fmN3: #2B4BB0;
  --mx: #D51675; --mxA: #B5198F; --mxB: #EE1660; --green: #38B26B; --red: #E3001B; --wht: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fmN2); overflow: hidden; }
body { font-family: 'M', system-ui, sans-serif; color: var(--fmN); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
[hidden] { display: none !important; }

#viewport { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: var(--fmY); }

/* ---------- tło: paski jak kursywa w logo RMF, fale, widmo podkładu ---------- */
.bg { position: absolute; inset: 0; overflow: hidden; }
.stripes i { position: absolute; top: -10%; height: 120%; width: 140px; background: var(--fmY2); transform: skewX(-14deg); animation: slide 14s linear infinite; }
.stripes i:nth-child(1) { left: -10%; width: 90px; animation-delay: -1s; }
.stripes i:nth-child(2) { left: 5%; width: 200px; animation-delay: -3s; }
.stripes i:nth-child(3) { left: 22%; width: 70px; animation-delay: -6s; }
.stripes i:nth-child(4) { left: 38%; width: 160px; animation-delay: -2s; }
.stripes i:nth-child(5) { left: 55%; width: 110px; animation-delay: -8s; }
.stripes i:nth-child(6) { left: 70%; width: 220px; animation-delay: -5s; }
.stripes i:nth-child(7) { left: 86%; width: 80px; animation-delay: -9s; }
.stripes i:nth-child(8) { left: 100%; width: 150px; animation-delay: -11s; }
@keyframes slide { from { translate: -300px 0; } to { translate: 300px 0; } }
.rings i { position: absolute; right: -200px; bottom: -200px; width: 400px; height: 400px; border-radius: 50%; border: 22px solid rgba(255,255,255,.55); animation: ring 6s linear infinite; }
.rings i:nth-child(2) { animation-delay: -1.5s; } .rings i:nth-child(3) { animation-delay: -3s; } .rings i:nth-child(4) { animation-delay: -4.5s; }
@keyframes ring { from { scale: .2; opacity: .9; } to { scale: 3.4; opacity: 0; } }
#spectrum { position: absolute; left: 0; bottom: 0; width: 1920px; height: 380px; }
body.maxx #stage { background: linear-gradient(135deg, var(--mxA), var(--mxB)); }
body.maxx .stripes i { background: rgba(122, 12, 94, .45); }

/* ---------- pasek górny ---------- */
#top { position: absolute; left: 0; right: 0; top: 0; height: 120px; display: flex; align-items: center; gap: 30px; padding: 0 48px; z-index: 5; }
.brand { display: flex; gap: 14px; align-items: center; }
.chip-fm { background: var(--fmN); color: #fff; font-family: 'MI'; font-weight: 900; font-size: 34px; padding: 6px 18px; transform: skewX(-8deg); box-shadow: 6px 6px 0 var(--fmN2); }
.chip-fm b { color: var(--fmY); }
.chip-mx { background: var(--mx); padding: 6px 14px; transform: skewX(-8deg); box-shadow: 6px 6px 0 var(--fmN2); display: flex; }
.chip-mx img { height: 40px; display: block; }
#progress { display: flex; gap: 10px; margin-left: 20px; }
#progress i { width: 26px; height: 26px; border-radius: 50%; background: rgba(28,51,128,.18); border: 3px solid var(--fmN); transition: transform .3s, background .3s; }
#progress i.cur { background: var(--fmN); transform: scale(1.35); }
#progress i.ok { background: var(--green); border-color: var(--green); }
#progress i.bad { background: var(--red); border-color: var(--red); }
#progress i.done { background: var(--fmN3); border-color: var(--fmN3); }
#scores, #classScore { margin-left: auto; display: flex; gap: 18px; align-items: center; }
#classScore { font-family: 'MI'; font-weight: 900; font-size: 36px; background: var(--fmN); color: #fff; padding: 8px 26px; transform: skewX(-8deg); box-shadow: 8px 8px 0 #fff; }
#classScore b { color: var(--fmY); font-size: 46px; }
.team { display: flex; align-items: center; gap: 14px; padding: 6px 10px 6px 22px; transform: skewX(-8deg); font-family: 'MI'; font-weight: 900; font-size: 30px; color: #fff; box-shadow: 8px 8px 0 #fff; }
.team.fm { background: var(--fmN); } .team.mx { background: var(--mx); }
.team .pt { background: #fff; color: var(--fmN); font-size: 46px; min-width: 70px; text-align: center; padding: 0 10px; }
.team.bump { animation: bump .6s; }
@keyframes bump { 30% { scale: 1.25; } }
.tools { display: flex; gap: 10px; margin-left: 18px; }
#top:not(:has(#scores:not([hidden]))):not(:has(#classScore:not([hidden]))) .tools { margin-left: auto; }
.tool { width: 64px; height: 64px; border: 0; background: #fff; color: var(--fmN); font-size: 28px; font-weight: 900; cursor: pointer; box-shadow: 5px 5px 0 var(--fmN2); transition: transform .15s; }
.tool:hover { transform: translateY(-3px); }
.tool.off { opacity: .45; }

/* ---------- ekrany ---------- */
.screen { position: absolute; inset: 120px 0 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 90px 120px; z-index: 3; }
.title { font-family: 'MI'; font-weight: 900; font-size: 104px; line-height: 1.02; text-align: center; margin: 10px 0 20px; color: var(--fmN); text-shadow: 6px 6px 0 #fff; }
.title .hl { color: #fff; background: var(--fmN); padding: 0 30px; display: inline-block; transform: skewX(-8deg); text-shadow: none; box-shadow: 12px 12px 0 var(--mx); margin-top: 14px; }
.lead { font-size: 40px; font-weight: 700; margin: 10px 0 34px; text-align: center; max-width: 1400px; }
.btn { border: 0; background: var(--mx); color: #fff; font-family: 'MI'; font-weight: 900; font-size: 44px; padding: 18px 54px; cursor: pointer; transform: skewX(-8deg); box-shadow: 10px 10px 0 var(--fmN); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: skewX(-8deg) translate(-3px, -3px); box-shadow: 13px 13px 0 var(--fmN); }
.btn.big { font-size: 52px; }
.msg { min-height: 50px; font-size: 34px; font-weight: 800; color: var(--red); margin: 20px 0 0; }
.keys { position: absolute; bottom: 30px; font-size: 24px; font-weight: 700; margin: 0; color: #fff; background: rgba(15,30,82,.88); padding: 8px 24px; z-index: 2; }

/* mikrofon (start, hasło) */
.mic-big { width: 260px; height: 260px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 22px rgba(255,255,255,.45), 0 0 0 48px rgba(255,255,255,.2); animation: pulse 1.6s ease-in-out infinite; }
.mic { width: 90px; height: 150px; border-radius: 45px; background: var(--fmN); position: relative; animation: wobble 2.4s ease-in-out infinite; }
.mic::before { content: ''; position: absolute; left: 18px; right: 18px; top: 34px; height: 46px; background: repeating-linear-gradient(var(--fmY) 0 10px, transparent 10px 18px); }
.mic::after { content: ''; position: absolute; left: 41px; top: 150px; width: 8px; height: 40px; background: var(--fmN); box-shadow: -34px 40px 0 0 var(--fmN), 34px 40px 0 0 var(--fmN), 0 40px 0 0 var(--fmN); }
@keyframes pulse { 50% { box-shadow: 0 0 0 34px rgba(255,255,255,.4), 0 0 0 70px rgba(255,255,255,.12); } }
@keyframes wobble { 50% { rotate: 7deg; } }

#gateForm { display: flex; gap: 26px; align-items: center; margin-top: 20px; }
#pw { width: 560px; font-size: 48px; font-weight: 800; padding: 16px 28px; border: 6px solid var(--fmN); background: #fff; color: var(--fmN); outline: none; box-shadow: 10px 10px 0 var(--fmN); }
#pw:focus { border-color: var(--mx); }
.shake { animation: shake .5s; }
@keyframes shake { 20%,60% { translate: -18px 0; } 40%,80% { translate: 18px 0; } }

.modes { display: flex; gap: 50px; }
.mode { width: 620px; border: 0; cursor: pointer; padding: 34px 40px; text-align: left; color: #fff; transform: skewX(-6deg); box-shadow: 14px 14px 0 #fff; transition: transform .2s; display: flex; flex-direction: column; gap: 10px; }
.mode:hover { transform: skewX(-6deg) translateY(-8px) scale(1.03); }
.mode b { font-family: 'MI'; font-weight: 900; font-size: 54px; }
.mode span { font-size: 28px; font-weight: 700; opacity: .9; }
.mode[data-mode="class"] { background: var(--fmN); }
.mode[data-mode="teams"] { background: var(--mx); }
.timer-opt { margin-top: 40px; font-size: 30px; font-weight: 800; display: flex; gap: 14px; align-items: center; cursor: pointer; background: #fff; padding: 10px 30px; transform: skewX(-8deg); box-shadow: 8px 8px 0 var(--fmN); position: relative; z-index: 2; }
.timer-opt > * { transform: skewX(8deg); }
.timer-opt input { width: 34px; height: 34px; accent-color: var(--mx); }

/* ---------- pytanie ---------- */
#sQuestion { justify-content: flex-start; padding-top: 10px; }
.qhead { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1740px; }
.qnum { font-family: 'MI'; font-weight: 900; font-size: 44px; background: var(--fmN); color: #fff; padding: 8px 30px; transform: skewX(-8deg); box-shadow: 8px 8px 0 #fff; }
.qnum b { color: var(--fmY); }
.timer { width: 130px; height: 130px; position: relative; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; rotate: -90deg; }
.timer circle { fill: none; stroke-width: 14; }
.timer .tr { stroke: rgba(28,51,128,.18); fill: #fff; }
.timer .tf { stroke: var(--fmN); stroke-linecap: round; stroke-dasharray: 326.7; transition: stroke .3s; }
.timer.low .tf { stroke: var(--red); }
.timer.low { animation: beat .5s infinite; }
@keyframes beat { 50% { scale: 1.1; } }
#timerTxt { position: relative; font-family: 'MI'; font-weight: 900; font-size: 50px; }
.timer.paused #timerTxt { font-size: 40px; }
.question { font-family: 'MI'; font-weight: 900; font-size: 68px; line-height: 1.12; text-align: center; margin: 18px 0 36px; max-width: 1700px; min-height: 152px; display: flex; align-items: center; justify-content: center; color: var(--fmN); text-shadow: 5px 5px 0 #fff; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 44px; width: 100%; max-width: 1700px; }
.ans { position: relative; display: flex; align-items: center; gap: 26px; min-height: 150px; padding: 18px 34px 18px 22px; border: 0; cursor: pointer; text-align: left; font-weight: 800; font-size: 40px; line-height: 1.15; transform: skewX(-6deg); box-shadow: 12px 12px 0 var(--fmN2); transition: transform .2s, box-shadow .2s, opacity .3s, filter .3s; }
.ans > * { transform: skewX(6deg); }
.ans .let { flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-family: 'MI'; font-weight: 900; font-size: 56px; background: #fff; color: var(--fmN); }
.ans:hover:not(:disabled) { transform: skewX(-6deg) translate(-4px, -6px); box-shadow: 16px 18px 0 var(--fmN2); }
.ans:disabled { cursor: default; }
.ans.c0 { background: var(--fmY2); color: var(--fmN); outline: 6px solid var(--fmN); outline-offset: -6px; }
.ans.c1 { background: var(--mx); color: #fff; }
.ans.c2 { background: var(--fmN3); color: #fff; }
.ans.c3 { background: var(--green); color: #fff; }
.ans.pick { animation: pick .9s ease-in-out infinite; }
@keyframes pick { 50% { transform: skewX(-6deg) scale(1.04); } }
.ans.dim { opacity: .28; filter: grayscale(.7); }
.ans.right { animation: right .7s cubic-bezier(.3,1.6,.5,1) both; outline: 10px solid #fff; outline-offset: 0; z-index: 2; }
.ans.right::after { content: '✔'; position: absolute; right: 26px; top: 50%; translate: 0 -50%; font-size: 80px; color: #fff; text-shadow: 4px 4px 0 var(--fmN2); }
.ans.c0.right::after { color: var(--fmN); text-shadow: none; }
@keyframes right { 0% { scale: 1; } 50% { scale: 1.12; } 100% { scale: 1.05; } }
.ans.wrong { animation: shake .5s; background: var(--red) !important; color: #fff !important; outline: 0; }
.ans.wrong::after { content: '✖'; position: absolute; right: 26px; top: 50%; translate: 0 -50%; font-size: 76px; color: #fff; }
.answers.in .ans { animation: pop .55s cubic-bezier(.3,1.6,.5,1) both; }
.answers.in .ans:nth-child(2) { animation-delay: .1s; } .answers.in .ans:nth-child(3) { animation-delay: .2s; } .answers.in .ans:nth-child(4) { animation-delay: .3s; }
@keyframes pop { from { opacity: 0; transform: skewX(-6deg) translateY(60px) scale(.7); } }
.question.in { animation: drop .6s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-80px) scale(.9); } }

.fact { position: absolute; left: 90px; bottom: 40px; width: 1380px; display: flex; gap: 34px; align-items: center; background: #fff; padding: 22px; box-shadow: 16px 16px 0 var(--fmN); z-index: 4; animation: factIn .6s cubic-bezier(.3,1.4,.5,1) both; }
.fact img { width: 480px; height: 270px; object-fit: cover; flex: none; border: 6px solid var(--fmN); }
.fact img:not([src]) { display: none; }
.fact .flabel { font-family: 'MI'; font-weight: 900; font-size: 30px; color: var(--mx); text-transform: uppercase; }
.fact p { margin: 8px 0 0; font-size: 38px; font-weight: 700; line-height: 1.25; }
@keyframes factIn { from { opacity: 0; translate: 0 140px; } }
#sQuestion.revealed .answers { scale: .8; transform-origin: 50% 0; transition: scale .5s; }
#sQuestion.revealed .question { scale: .85; margin: 4px 0 10px; min-height: 0; transition: scale .5s; }
#sQuestion.revealed .timer { opacity: .35; }

.hostbar { position: absolute; right: 48px; bottom: 26px; display: flex; gap: 16px; z-index: 5; }
.hostbar button { border: 0; cursor: pointer; font-family: 'MI'; font-weight: 900; font-size: 30px; padding: 12px 28px; transform: skewX(-8deg); box-shadow: 7px 7px 0 var(--fmN2); color: #fff; background: var(--fmN); }
.hostbar button.mx { background: var(--mx); }
.hostbar button.ghost { background: #fff; color: var(--fmN); }
#sQuestion.revealed .hostbar { bottom: 40px; flex-direction: column; align-items: flex-end; }

/* ---------- koniec ---------- */
.trophy { font-size: 230px; line-height: 1; animation: trophy 1.2s cubic-bezier(.3,1.6,.5,1) both, float 3s 1.2s ease-in-out infinite; filter: drop-shadow(10px 10px 0 rgba(15,30,82,.35)); }
@keyframes trophy { from { scale: 0; rotate: -30deg; } }
@keyframes float { 50% { translate: 0 -18px; rotate: 4deg; } }
.endscore { font-family: 'MI'; font-weight: 900; font-size: 76px; display: flex; gap: 40px; margin: 6px 0; }
.endscore .box { background: var(--fmN); color: #fff; padding: 12px 40px; transform: skewX(-8deg); box-shadow: 12px 12px 0 #fff; }
.endscore .box.mx { background: var(--mx); }
.endscore .box b { color: var(--fmY); }
.stars { font-size: 110px; letter-spacing: 20px; margin: 10px 0; }
.stars span { display: inline-block; animation: star .6s cubic-bezier(.3,1.8,.5,1) both; filter: drop-shadow(6px 6px 0 var(--fmN2)); }
.stars span.off { opacity: .25; filter: grayscale(1); }
@keyframes star { from { scale: 0; rotate: -120deg; } }
.bye { font-family: 'MI'; font-weight: 900; font-size: 48px; color: #fff; background: var(--mx); padding: 10px 34px; transform: skewX(-8deg); box-shadow: 10px 10px 0 var(--fmN); margin: 16px 0 34px; }

#confetti { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
#toast { position: absolute; left: 50%; top: 140px; translate: -50% 0; background: var(--fmN); color: #fff; font-weight: 800; font-size: 30px; padding: 12px 30px; z-index: 9; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.on { opacity: 1; }
.screen.enter { animation: screenIn .55s cubic-bezier(.3,1.3,.5,1) both; }
@keyframes screenIn { from { opacity: 0; transform: translateX(160px) skewX(-6deg); } }

/* reduced-motion łagodzi tylko ozdobniki: paski i fale tła; treść quizu animuje się zawsze */
@media (prefers-reduced-motion: reduce) {
  .stripes i { animation-duration: 40s; }
  .rings i { animation-duration: 12s; }
}