:root{
  --blue:#005fa8;--blue2:#0d82c7;--cyan:#44b9df;--green:#00a653;--green2:#42c878;
  --navy:#f2f7fb;--ink:#dbe8ef;--muted:#9bb3c2;--line:rgba(129,197,227,.18);
  --surface:#0d2232;--panel:#102738;--panel-2:#143044;--shadow:0 32px 70px rgba(3,18,28,.42);--shadow-sm:0 14px 30px rgba(3,18,28,.30);
  --safe-t:0px;--safe-b:0px;--topbar:154px
}
*{box-sizing:border-box}




@keyframes bgFloat{0%{transform:translate3d(-1%,0,0) scale(1)}100%{transform:translate3d(1.5%,-1%,0) scale(1.04)}}
*::-webkit-scrollbar{display:none}button,input{font:inherit}button{border:0}img{max-width:100%;display:block;-webkit-user-drag:none}
button:focus-visible,input:focus-visible{outline:3px solid rgba(13,130,199,.25);outline-offset:3px}
#app{position:fixed;inset:0}.screen{display:none;position:absolute;inset:0;overflow:auto;scrollbar-width:none;padding:calc(var(--topbar) + var(--safe-t) + 28px) 22px calc(30px + var(--safe-b))}.screen.active{display:block;animation:screenIn .55s cubic-bezier(.2,.78,.28,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(20px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.pressable{cursor:pointer;user-select:none;touch-action:manipulation;transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease}.pressable:active{transform:scale(.985)}
.topbar{position:fixed;inset:0 0 auto;height:calc(var(--topbar) + var(--safe-t));padding-top:var(--safe-t);z-index:40;pointer-events:none;background:#ffffff;box-shadow:0 2px 14px rgba(9,28,42,.06)}
.scene-logo{position:absolute;left:0;right:0;top:0;height:calc(var(--topbar) + var(--safe-t));pointer-events:none;padding:12px 28px 10px;display:flex;align-items:center;justify-content:space-between;gap:22px;border:0;box-shadow:none;background:none}
.scene-logo img{display:block;height:auto;max-width:100%;object-fit:contain}.scene-logo .inox-brand{width:min(31vw,290px)}.scene-logo .chips-brand{width:min(18vw,170px)}
.topbar .global-back{pointer-events:auto;position:absolute;left:22px;top:calc(var(--topbar) + var(--safe-t) + 12px);width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#123a55;background:linear-gradient(180deg,#f5f7f8,#dde5e9);border:1px solid rgba(0,95,168,.10);box-shadow:0 8px 18px rgba(18,80,116,.08)}
.icon{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shell{width:min(100%,900px);min-height:100%;margin:0 auto;padding:0;background:none;border:0;box-shadow:none;position:relative;overflow:visible}.shell:before,.shell:after{display:none}
.eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#79f3c4;margin-bottom:7px}
.gradient-text{background:linear-gradient(95deg,#73dbff 0%,#3ca9ff 44%,#70f0b0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-intro{margin:0 0 24px}.page-intro h1{font-family:Verdana, Arial, sans-serif;margin:0;color:var(--navy);letter-spacing:-.045em;line-height:1.02;font-size:clamp(36px,9vw,58px)}.page-intro p{max-width:650px;color:var(--muted);font-size:14px;line-height:1.65;margin:12px 0 0}
.glass-line{height:1px;background:linear-gradient(90deg,transparent,rgba(110,198,238,.18),rgba(86,235,166,.24),transparent);margin:22px 0}

/* Login - open app-style composition, no big white box */
.login-layout{display:grid;gap:18px;position:relative;z-index:1}
 .login-hero{position:relative;padding:34px 34px 30px;border-radius:28px;background:linear-gradient(135deg,#0f2a3e 0%,#091b2a 58%,#0d2436 100%);border:1px solid rgba(112,180,212,.15);overflow:hidden;box-shadow:0 18px 38px rgba(3,18,28,.22)}
.login-hero:before{content:"";position:absolute;left:34px;top:28px;width:72px;height:4px;border-radius:999px;background:linear-gradient(90deg,#44b9df,#00a653)}
.login-hero h1{font-family:Verdana,Arial,sans-serif;margin:22px 0 12px;font-size:clamp(40px,7.8vw,58px);line-height:1.02;letter-spacing:-.045em;color:#f4f8fb;max-width:660px}
.login-hero h1 span{color:#66bfff}
.login-hero p{margin:0;color:#aec3cf;font-size:14px;line-height:1.7;max-width:620px}
.login-form{padding:26px;border-radius:30px;background:linear-gradient(180deg,#0d2232 0%,#10293c 100%);border:1px solid rgba(112,180,212,.16);box-shadow:0 20px 42px rgba(3,18,28,.22),inset 0 1px 0 rgba(255,255,255,.04)}.login-form h2{font-family:Verdana, Arial, sans-serif;margin:0;font-size:28px;letter-spacing:-.035em;color:#f4f8fb}.login-form p{margin:7px 0 17px;color:#a8c0ce;font-size:13px;line-height:1.55}
.fields{display:grid;gap:12px}.field{position:relative}.field svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#6ec7ff}.field input{width:100%;height:61px;border-radius:16px;border:1px solid rgba(120,191,223,.16);background:linear-gradient(180deg,#10293b 0%,#143247 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 12px rgba(3,18,28,.16);padding:0 16px 0 52px;outline:none;color:#f2f7fb;font-size:14px;font-weight:700}.field input:focus{border-color:rgba(112,241,176,.38);background:linear-gradient(180deg,#143047 0%,#17384f 100%);box-shadow:0 10px 22px rgba(5,22,32,.16),0 0 0 4px rgba(13,130,199,.10)}.field input::placeholder{color:#8da7b7;font-weight:500}
.error{display:none;color:#ff8b97;font-size:12px;font-weight:750;margin:10px 2px 0}.error.show{display:block}
.primary-cta{width:100%;min-height:58px;margin-top:15px;border-radius:16px;background:linear-gradient(100deg,var(--blue),var(--blue2) 48%,var(--green) 110%);color:#fff;font-weight:800;box-shadow:0 12px 24px rgba(0,105,166,.18);display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden}.primary-cta:before{content:"";position:absolute;top:-120%;left:-30%;width:35%;height:320%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:rotate(24deg);animation:sheen 4.2s ease-in-out infinite}@keyframes sheen{0%,60%{left:-45%}84%,100%{left:125%}}

/* Question layout - intentionally NO large white container */
.quiz-heading{margin-bottom:14px;padding:0 4px;position:relative;z-index:1}
.quiz-heading h1{font-family:Verdana, Arial, sans-serif;margin:0;color:#f4f8fb;font-size:clamp(31px,7.4vw,48px);line-height:1.08;letter-spacing:-.045em}
.q-progress{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:11px;font-weight:800;color:#9fb5c4}.q-progress b{color:#6fd0ff}.qline{height:9px;border-radius:999px;background:rgba(145,210,236,.12);overflow:hidden;margin-top:8px}.qline i{display:block;height:100%;background:linear-gradient(90deg,var(--blue2),var(--cyan),var(--green));transition:width .4s}
.question-area{padding:28px 28px 30px;border-radius:30px;background:radial-gradient(circle at 100% 0%,rgba(0,166,83,.08),transparent 28%),linear-gradient(135deg,#0f2a3e 0%,#081b29 58%,#0d2436 100%);border:1px solid rgba(112,180,212,.16);box-shadow:0 24px 50px rgba(3,18,28,.26),inset 0 1px 0 rgba(255,255,255,.05);position:relative;z-index:1}.question-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.question-number{display:grid;place-items:center;width:57px;height:57px;border-radius:16px;background:linear-gradient(135deg,var(--blue2),var(--green));color:#fff;font-size:17px;font-weight:850;box-shadow:0 10px 22px rgba(0,95,168,.22);margin-bottom:0;flex-shrink:0}.status-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:12px;width:min(100%,520px);margin-left:auto;align-items:stretch}.info-card{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:14px 15px;border-radius:18px;background:rgba(16,48,70,.86);border:1px solid rgba(126,196,226,.12);box-shadow:none}.info-card .card-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(68,185,223,.18),rgba(0,166,83,.14));color:#89d8ff;flex-shrink:0}.info-card .card-copy{flex:1;min-width:0}.info-card .card-icon .icon{width:22px;height:22px;stroke-width:2.1}.info-card .label{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#93b1c1;margin-bottom:4px}.info-card .value{display:block;font-size:15px;font-weight:850;letter-spacing:-.02em;color:#f2f7fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.info-card.participant .value{font-size:14px}.info-card.score .value{background:linear-gradient(95deg,#7ad8ff,#78f0c0);-webkit-background-clip:text;background-clip:text;color:transparent}.question-text{font-family:Verdana, Arial, sans-serif;margin:0 0 19px;color:#f3f8fb;font-size:clamp(25px,5.7vw,37px);line-height:1.17;letter-spacing:-.035em}
.options{display:grid;gap:12px}.option{width:100%;min-height:72px;padding:14px 16px;border-radius:18px;text-align:left;color:#f2f7fb;display:flex;align-items:center;gap:14px;font-size:14px;font-weight:750;line-height:1.4;background:rgba(16,48,70,.86);border:1px solid rgba(126,196,226,.12);box-shadow:none}.option:hover{box-shadow:none;border-color:rgba(106,239,178,.28);background:rgba(18,54,78,.95)}.option-letter{width:42px;height:42px;min-width:42px;border-radius:12px;background:linear-gradient(180deg,rgba(68,185,223,.18),rgba(0,166,83,.16));display:grid;place-items:center;color:#94dcff;font-size:13px;font-weight:850}.option.locked{pointer-events:none}.option.correct{background:linear-gradient(180deg,#123b2d 0%,#10293b 100%);border-color:rgba(106,239,178,.34)}.option.correct .option-letter{background:var(--green);color:#fff}.option.wrong{background:linear-gradient(180deg,#40202a 0%,#10293b 100%);border-color:rgba(255,143,154,.28)}.option.wrong .option-letter{background:#d24a5a;color:#fff}
.feedback{display:none;margin-top:14px;padding:14px 15px;border-radius:16px;background:linear-gradient(180deg,#102b3d 0%,#0d2232 100%);border:1px solid rgba(126,196,226,.14);font-size:12px;line-height:1.55;font-weight:650;color:#d4e4ed}.feedback.show{display:block;animation:screenIn .25s ease}.feedback.good{border-color:rgba(106,239,178,.24);color:#8af0b8}.feedback.bad{border-color:rgba(255,143,154,.24);color:#ffb1ba}.feedback strong{display:block;margin-bottom:4px}
.next-btn{display:none;width:100%;min-height:58px;margin-top:14px;border-radius:16px;background:linear-gradient(100deg,var(--blue2),var(--green));color:#fff;font-size:14px;font-weight:850;box-shadow:0 12px 24px rgba(4,19,29,.22)}.next-btn.show{display:block}

/* Result - cleaner and more realistic composition */
.result-wrap{text-align:center;padding:4px 0 0}.result-panel{max-width:760px;margin:0 auto;padding:24px;border-radius:30px;background:radial-gradient(circle at 100% 0%,rgba(0,166,83,.08),transparent 28%),linear-gradient(135deg,#0f2a3e 0%,#091b2a 58%,#0d2436 100%);border:1px solid rgba(112,180,212,.16);box-shadow:0 24px 50px rgba(3,18,28,.26),inset 0 1px 0 rgba(255,255,255,.04)}.result-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#0f3045;border:1px solid rgba(126,196,226,.14);box-shadow:0 6px 14px rgba(4,17,26,.16);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#f2f7fb;margin:10px auto 18px}.result-chip .chip-emoji{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:#16384d;box-shadow:0 2px 6px rgba(3,18,28,.16)}.result-chip.score-5,.result-chip.score-4{color:#7ff0c2}.result-chip.score-3{color:#79d7ff}.result-chip.score-2{color:#c8d4db}.result-chip.score-1,.result-chip.score-0{color:#ffb39d}.result-wrap h1{font-family:Verdana, Arial, sans-serif;margin:0;font-size:clamp(30px,6.6vw,46px);letter-spacing:-.04em;line-height:1.08;color:#f3f8fb}.result-kicker{display:block;margin-top:10px;font-size:17px;font-weight:800;color:#75d8ff;letter-spacing:-.015em}.result-wrap p{margin:12px auto 0;max-width:620px;color:#a8c0ce;font-size:14px;line-height:1.65}.participant-summary{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px auto 0;padding:14px 18px;max-width:420px;border-radius:18px;background:linear-gradient(180deg,#103046 0%,#11273a 100%);border:1px solid rgba(126,196,226,.14);box-shadow:0 6px 14px rgba(4,17,26,.14)}.participant-summary .summary-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(68,185,223,.18),rgba(0,166,83,.14));color:#89d8ff;flex-shrink:0}.participant-summary .summary-icon .icon{width:22px;height:22px}.participant-summary .copy{min-width:0;text-align:left}.participant-summary .copy .label{display:block;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#93b1c1;margin-bottom:4px}.participant-summary .copy strong{display:block;font-size:16px;color:#f2f7fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ring{width:176px;height:176px;margin:24px auto;border-radius:50%;position:relative;background:conic-gradient(var(--green) 0deg,#163244 0deg);display:grid;place-items:center;box-shadow:0 10px 24px rgba(3,18,28,.22)}.ring:after{content:"";position:absolute;inset:14px;border-radius:50%;background:#0b2233}.ring-inner{position:relative;z-index:1}.ring-inner strong{display:block;font-size:44px;color:#7cd8ff;line-height:1}.ring-inner span{display:block;margin-top:6px;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.12em;color:#9eb8c8}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.stat{padding:14px 10px;border-radius:16px;background:linear-gradient(180deg,#103046 0%,#11273a 100%);border:1px solid rgba(126,196,226,.14);box-shadow:0 6px 14px rgba(4,17,26,.14)}.stat strong{display:block;font-size:21px;color:#f2f7fb}.stat span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:850;color:#9eb8c8;margin-top:4px}.result-actions{display:grid;gap:10px}.result-actions .continue:only-child{width:100%}.result-actions button{min-height:58px;border-radius:16px;font-weight:850}.continue{background:linear-gradient(100deg,var(--blue2),var(--green));color:#fff;box-shadow:0 12px 24px rgba(4,19,29,.22)}.secondary{background:#103046;border:1px solid rgba(126,196,226,.14);color:#f2f7fb;box-shadow:0 6px 14px rgba(4,17,26,.14)}.confetti{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}.confetti i{position:absolute;top:-10%;width:9px;height:18px;border-radius:4px;opacity:.95;filter:drop-shadow(0 4px 8px rgba(8,47,73,.08));animation:fall linear forwards}.confetti i.round{border-radius:50%;width:9px;height:9px}.confetti i.slim{width:5px;height:20px;border-radius:999px}@keyframes fall{0%{transform:translate3d(0,-8vh,0) rotate(0deg);opacity:0}8%{opacity:1}100%{transform:translate3d(var(--drift),112vh,0) rotate(var(--spin));opacity:.28}}

/* Custom New Participant modal */
.modal-overlay{
 position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;
 padding:22px;background:rgba(7,40,62,.42);backdrop-filter:blur(13px);
 opacity:0;transition:opacity .24s ease
}
.modal-overlay.show{display:flex;opacity:1}
.modal-card{
 width:min(100%,480px);position:relative;overflow:hidden;
 border-radius:28px;padding:28px 24px 24px;
 background:radial-gradient(circle at 92% 0%,rgba(68,185,223,.14),transparent 28%),radial-gradient(circle at 0% 100%,rgba(0,166,83,.10),transparent 30%),linear-gradient(145deg,#0f2a3e,#0b2233 62%,#0f2a3e);
 border:1px solid rgba(126,196,226,.16);
 box-shadow:0 34px 90px rgba(5,44,71,.38);
 transform:translateY(18px) scale(.975);
 animation:modalIn .32s cubic-bezier(.2,.8,.28,1) forwards
}
@keyframes modalIn{to{transform:none}}
.modal-icon{
 width:68px;height:68px;border-radius:22px;display:grid;place-items:center;margin-bottom:18px;
 color:#7ad8ff;
 background:linear-gradient(145deg,rgba(68,185,223,.18),rgba(0,166,83,.14));
 border:1px solid rgba(126,196,226,.14)
}
.modal-icon svg{width:31px;height:31px}
.modal-card .eyebrow{margin-bottom:8px;color:#7ff0c2}
.modal-card h3{
 font-family:Verdana, Arial, sans-serif;
 margin:0;font-size:31px;line-height:1.05;letter-spacing:-.045em;color:#f4f8fb
}
.modal-card p{margin:12px 0 22px;color:#a8c0ce;font-size:13px;line-height:1.65}
.modal-note{
 display:flex;align-items:flex-start;gap:10px;margin:-5px 0 20px;padding:12px 13px;
 border-radius:16px;background:rgba(16,48,70,.88);border:1px solid rgba(126,196,226,.14);
 color:#d6e5ee;font-size:11px;line-height:1.5;font-weight:650
}
.modal-note svg{width:18px;height:18px;min-width:18px;color:#7ff0c2;margin-top:1px}
.modal-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:10px}
.modal-actions button{min-height:56px;border-radius:17px;font-size:13px;font-weight:850}
.modal-cancel{
 background:#103046;border:1px solid rgba(126,196,226,.14);color:#f2f7fb;
 box-shadow:none
}
.modal-confirm{
 position:relative;overflow:hidden;color:#fff;
 background:linear-gradient(100deg,var(--blue2),var(--green));
 box-shadow:0 12px 24px rgba(4,19,29,.22)
}
.modal-confirm:before{
 content:"";position:absolute;top:-120%;left:-35%;width:32%;height:340%;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
 transform:rotate(24deg);animation:sheen 3.8s ease-in-out infinite
}
@media(max-width:430px){
 .modal-card{padding:25px 18px 20px;border-radius:26px}
 .modal-card h3{font-size:28px}
 .modal-actions{grid-template-columns:1fr}
}

@media(min-width:700px){.fields{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.question-text{font-size:24px}.option{font-size:13px;min-height:66px}}
@media(max-width:860px){.question-topbar{flex-direction:column;align-items:stretch}.status-grid{width:100%;grid-template-columns:1fr 1fr}.info-card .value{font-size:14px}}
@media(max-width:680px){.screen{padding:calc(var(--topbar) + var(--safe-t) + 18px) 10px calc(24px + var(--safe-b))}.shell{padding:0}.status-grid{grid-template-columns:1fr}.q-progress{flex-wrap:wrap}.question-area{padding:18px}.login-hero,.login-form{padding:18px 16px}.login-hero:before{left:18px;top:18px;width:58px;height:3px}.login-hero h1{font-size:clamp(34px,10vw,44px);margin-top:18px}.stats{grid-template-columns:1fr}.result-wrap h1{font-size:clamp(32px,10vw,44px)}.result-kicker{font-size:16px}.participant-summary{padding:12px 14px;max-width:100%}.participant-summary .copy strong{font-size:15px}.result-chip{padding:9px 14px;font-size:11px}.result-chip .chip-emoji{width:30px;height:30px;font-size:18px}.ring{width:162px;height:162px}.scene-logo{padding:12px 14px 10px;gap:10px}.scene-logo .inox-brand{width:min(42vw,180px)}.scene-logo .chips-brand{width:min(28vw,100px)}.topbar .global-back{left:12px;top:calc(var(--topbar) + var(--safe-t) + 8px);width:42px;height:42px}}

/* Exact 55-inch portrait canvas: 1080 × 1920. On laptops the whole canvas scales down as one piece. */
#kioskStage{position:absolute;left:50%;top:50%;width:1080px;height:1920px;transform:translate(-50%,-50%) scale(var(--stage-scale,1));transform-origin:center center;overflow:hidden;background:radial-gradient(circle at 82% 18%,rgba(0,166,83,.10),transparent 16%),radial-gradient(circle at 18% 32%,rgba(13,130,199,.16),transparent 20%),linear-gradient(180deg,#ffffff 0 178px,#0a2231 178px 100%);box-shadow:0 36px 100px rgba(0,0,0,.46)}
#kioskStage:after{content:"";position:absolute;inset:178px 0 0;pointer-events:none;z-index:0;opacity:.16;background-image:linear-gradient(rgba(134,201,230,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(134,201,230,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.18))}
#kioskStage .topbar{position:absolute;left:0;right:0;top:0;height:178px;padding:0;background:#fff;box-shadow:0 3px 18px rgba(9,28,42,.08);z-index:40}
#kioskStage .scene-logo{height:178px;padding:28px 52px 24px;display:flex;align-items:center;justify-content:space-between;gap:40px}
#kioskStage .scene-logo .inox-brand{width:455px;max-height:126px}
#kioskStage .scene-logo .chips-brand{width:178px;max-height:112px}
#kioskStage #app{position:absolute;inset:0;z-index:2}
#kioskStage .screen{position:absolute;inset:0;padding:230px 70px 64px;overflow:hidden}
#kioskStage .shell{width:940px;min-height:0;margin:0 auto}
#kioskStage #quizScreen.active{display:flex;align-items:center;justify-content:center;padding:190px 70px 58px}
#kioskStage #quizScreen .shell{width:940px;margin:0}
#kioskStage .login-layout{height:1626px;display:grid;grid-template-rows:auto 1px auto;align-content:center;gap:58px}
#kioskStage .login-hero{padding:54px 56px 48px;border-radius:34px}
#kioskStage .login-hero:before{left:56px;top:42px;width:92px;height:5px}
#kioskStage .login-hero h1{margin:34px 0 22px;font-size:78px;line-height:.98;max-width:820px}
#kioskStage .login-hero p{font-size:23px;line-height:1.62;max-width:820px}
#kioskStage .glass-line{margin:0}
#kioskStage .login-form{padding:48px 50px 52px;border-radius:34px}
#kioskStage .eyebrow{font-size:16px;letter-spacing:.15em;margin-bottom:12px}
#kioskStage .login-form h2{font-size:44px}
#kioskStage .login-form p{font-size:19px;line-height:1.55;margin:12px 0 26px}
#kioskStage .fields{gap:18px}
#kioskStage .field input{height:82px;border-radius:20px;font-size:20px;padding-left:66px}
#kioskStage .field svg{left:22px;width:28px;height:28px}
#kioskStage .primary-cta{min-height:82px;margin-top:22px;border-radius:20px;font-size:21px}
#kioskStage .quiz-heading{margin-bottom:30px}
#kioskStage .quiz-heading h1{font-size:62px}
#kioskStage .q-progress{font-size:16px;margin-top:22px}
#kioskStage .qline{height:12px;margin-top:12px}
#kioskStage .question-area{padding:42px 44px 46px;border-radius:34px}
#kioskStage .question-number{width:78px;height:78px;border-radius:20px;font-size:23px}
#kioskStage .status-grid{width:650px;gap:16px}
#kioskStage .info-card{padding:18px 20px;border-radius:20px}
#kioskStage .info-card .card-icon{width:58px;height:58px}
#kioskStage .info-card .label{font-size:13px}
#kioskStage .info-card .value,#kioskStage .info-card.participant .value{font-size:19px}
#kioskStage .question-text{font-size:48px;line-height:1.14;margin:18px 0 30px}
#kioskStage .options{gap:18px}
#kioskStage .option{min-height:104px;padding:20px 24px;border-radius:22px;font-size:20px}
#kioskStage .option-letter{width:54px;height:54px;min-width:54px;border-radius:14px;font-size:18px}
#kioskStage .feedback{font-size:17px;padding:18px 20px;border-radius:18px}
#kioskStage .next-btn{min-height:78px;margin-top:20px;font-size:20px}
#kioskStage .quiz-back{display:flex;align-items:center;justify-content:center;gap:12px;width:190px;min-height:64px;margin:24px auto 0;border-radius:18px;color:#dcebf3;background:rgba(16,48,70,.82);border:1px solid rgba(126,196,226,.16);font-size:18px;font-weight:800;box-shadow:none}
#kioskStage .quiz-back .icon{width:22px;height:22px}
#kioskStage .quiz-back:hover{border-color:rgba(106,239,178,.30);background:rgba(18,54,78,.96)}
#kioskStage .result-panel{max-width:900px;padding:54px 48px;border-radius:34px}
#kioskStage .result-chip{font-size:16px;padding:13px 20px;margin-bottom:26px}
#kioskStage .result-chip .chip-emoji{width:46px;height:46px;font-size:28px}
#kioskStage .result-wrap h1{font-size:62px}
#kioskStage .result-kicker{font-size:23px;margin-top:16px}
#kioskStage .result-wrap p{font-size:19px;max-width:760px}
#kioskStage .participant-summary{max-width:560px;padding:20px 24px;border-radius:22px}
#kioskStage .participant-summary .summary-icon{width:58px;height:58px}
#kioskStage .participant-summary .copy .label{font-size:13px}
#kioskStage .participant-summary .copy strong{font-size:21px}
#kioskStage .ring{width:240px;height:240px;margin:34px auto}
#kioskStage .ring:after{inset:18px}
#kioskStage .ring-inner strong{font-size:60px}
#kioskStage .ring-inner span{font-size:12px}
#kioskStage .stats{gap:16px;margin:26px 0 34px}
#kioskStage .stat{padding:22px 14px;border-radius:20px}
#kioskStage .stat strong{font-size:30px}
#kioskStage .stat span{font-size:11px}
#kioskStage .result-actions button{min-height:78px;font-size:20px}
#kioskStage .topbar .global-back{display:none!important}
#kioskStage .modal-overlay{position:absolute}
#kioskStage .modal-card{width:650px;padding:40px 36px 34px;border-radius:34px}
#kioskStage .modal-icon{width:84px;height:84px}
#kioskStage .modal-card h3{font-size:42px}
#kioskStage .modal-card p{font-size:18px}
#kioskStage .modal-note{font-size:15px;padding:16px 18px}
#kioskStage .modal-actions button{min-height:72px;font-size:17px}


/* v25 refinement: centered result screen and more premium question status cards */
#quizScreen .shell{display:flex;flex-direction:column;justify-content:center;min-height:100%;gap:18px}
#quizScreen .quiz-heading{margin-bottom:18px}
#quizScreen .question-area{padding:34px 34px 38px}
#quizScreen .question-topbar{align-items:center;gap:20px;margin-bottom:24px}
#quizScreen .status-grid{width:min(100%,620px);gap:14px;grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr)}
#quizScreen .info-card{padding:16px 18px;border-radius:20px;background:linear-gradient(180deg,rgba(17,50,72,.98),rgba(12,37,55,.96));border:1px solid rgba(126,196,226,.18);box-shadow:0 12px 28px rgba(3,18,28,.16),inset 0 1px 0 rgba(255,255,255,.03)}
#quizScreen .info-card::after{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,rgba(111,217,255,.24),rgba(123,245,190,.18),transparent)}
#quizScreen .info-card .card-icon{width:50px;height:50px;border-radius:16px;background:linear-gradient(135deg,rgba(68,185,223,.22),rgba(0,166,83,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#quizScreen .info-card .label{font-size:10px;letter-spacing:.16em;color:#9bc0d0}
#quizScreen .info-card .value,#quizScreen .info-card.participant .value{font-size:16px}
#quizScreen .info-card.score .value{font-size:17px;font-weight:900}
#quizScreen .question-text{margin:6px 0 22px}
#quizScreen .quiz-back{margin:18px auto 0}
#resultScreen.active{display:flex;align-items:center;justify-content:center}
#resultScreen .shell,#resultRoot{display:flex;align-items:center;justify-content:center;min-height:100%;width:100%}
#resultScreen .result-wrap{width:100%;padding:0}
#resultScreen .result-panel{max-width:820px;padding:36px 34px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#resultScreen .result-wrap p{max-width:640px}
#resultScreen .stats{width:100%}
#kioskStage #quizScreen .shell{justify-content:center}
#kioskStage #quizScreen .quiz-heading{margin-bottom:22px}
#kioskStage #quizScreen .question-area{padding:50px 44px 44px}
#kioskStage #quizScreen .question-topbar{margin-bottom:28px}
#kioskStage #quizScreen .status-grid{width:680px;gap:18px}
#kioskStage #quizScreen .info-card{padding:18px 20px;border-radius:22px}
#kioskStage #quizScreen .info-card .card-icon{width:60px;height:60px}
#kioskStage #quizScreen .info-card .label{font-size:12px}
#kioskStage #quizScreen .info-card .value,#kioskStage #quizScreen .info-card.participant .value{font-size:21px}
#kioskStage #quizScreen .info-card.score .value{font-size:22px}
#kioskStage #quizScreen .question-text{font-size:46px;margin:10px 0 28px}
#kioskStage #resultScreen .result-panel{max-width:880px;padding:64px 56px 52px;border-radius:38px}
#kioskStage #resultScreen .result-wrap h1{font-size:64px}
#kioskStage #resultScreen .result-kicker{font-size:24px;margin-top:14px}
#kioskStage #resultScreen .result-wrap p{font-size:20px;max-width:760px}
#kioskStage #resultScreen .participant-summary{max-width:600px;padding:22px 26px}
#kioskStage #resultScreen .stats{max-width:760px;gap:18px;margin:30px 0 36px}


/* v26 — move participant/score to the upper open area + improve result spacing */
#quizScreen .shell{justify-content:center;gap:14px}
#quizScreen .quiz-heading{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
#quizScreen .quiz-status-top{order:-1;width:100%;max-width:none;margin:0 0 4px;grid-template-columns:1.35fr .85fr;gap:16px}
#quizScreen .quiz-status-top .info-card{min-height:78px;padding:16px 20px;border-radius:20px;background:linear-gradient(180deg,rgba(17,50,72,.98),rgba(12,37,55,.97));border:1px solid rgba(126,196,226,.18);box-shadow:0 12px 26px rgba(3,18,28,.16),inset 0 1px 0 rgba(255,255,255,.04)}
#quizScreen .quiz-status-top .info-card .card-icon{width:52px;height:52px;border-radius:16px}
#quizScreen .quiz-status-top .info-card .label{font-size:11px;letter-spacing:.15em}
#quizScreen .quiz-status-top .info-card .value,#quizScreen .quiz-status-top .info-card.participant .value{font-size:18px}
#quizScreen .quiz-status-top .info-card.score .value{font-size:20px;font-weight:900}
#quizScreen .quiz-heading h1{margin-top:2px}
#quizScreen .question-area{padding-top:28px}
#quizScreen .question-topbar{margin:0 0 18px;justify-content:flex-start}
#quizScreen .question-number{margin:0}
#resultScreen .result-panel{padding:70px 58px 58px}
#resultScreen .eyebrow{margin-bottom:20px}
#resultScreen .result-chip{margin:0 auto 30px}
#resultScreen .result-wrap h1{margin:0 0 6px;line-height:1.14}
#resultScreen .result-kicker{margin-top:14px;line-height:1.45}
#resultScreen .result-wrap p{margin-top:20px;line-height:1.85;max-width:700px}
#resultScreen .participant-summary{margin-top:30px}
#resultScreen .ring{margin:38px auto 30px}
#resultScreen .stats{margin:30px 0 38px}
#resultScreen .result-actions{margin-top:2px}
#kioskStage #quizScreen .quiz-status-top{gap:18px;margin-bottom:8px}
#kioskStage #quizScreen .quiz-status-top .info-card{min-height:96px;padding:20px 24px;border-radius:24px}
#kioskStage #quizScreen .quiz-status-top .info-card .card-icon{width:64px;height:64px;border-radius:18px}
#kioskStage #quizScreen .quiz-status-top .info-card .label{font-size:13px}
#kioskStage #quizScreen .quiz-status-top .info-card .value,#kioskStage #quizScreen .quiz-status-top .info-card.participant .value{font-size:22px}
#kioskStage #quizScreen .quiz-status-top .info-card.score .value{font-size:24px}
#kioskStage #quizScreen .quiz-heading{gap:18px;margin-bottom:20px}
#kioskStage #quizScreen .question-area{padding-top:38px}
#kioskStage #resultScreen .result-panel{padding:82px 62px 66px}
#kioskStage #resultScreen .eyebrow{margin-bottom:24px}
#kioskStage #resultScreen .result-chip{margin-bottom:34px}
#kioskStage #resultScreen .result-wrap h1{line-height:1.16;margin-bottom:8px}
#kioskStage #resultScreen .result-kicker{margin-top:18px;line-height:1.5}
#kioskStage #resultScreen .result-wrap p{margin-top:24px;line-height:1.9}
#kioskStage #resultScreen .participant-summary{margin-top:34px}
#kioskStage #resultScreen .ring{margin:42px auto 34px}
#kioskStage #resultScreen .stats{margin:34px 0 42px}


/* v27 — exact fit-to-screen layout for 1080×1920 portrait kiosk */
#kioskStage #app{position:absolute;left:0;right:0;top:178px;bottom:0;z-index:2}
#kioskStage .screen{position:absolute;inset:0;padding:28px 70px 30px;overflow:hidden}
#kioskStage .screen.active{display:flex;align-items:center;justify-content:center}
#kioskStage .shell{width:940px;min-height:0;height:auto;margin:0 auto}

/* Login uses the available portrait height without scrolling */
#kioskStage #loginScreen .shell{display:flex;align-items:center;justify-content:center;height:100%}
#kioskStage #loginScreen .login-layout{width:940px;height:auto;max-height:1600px;align-content:center;gap:34px}
#kioskStage #loginScreen .login-hero{padding:44px 50px 40px}
#kioskStage #loginScreen .login-hero h1{font-size:70px;margin:30px 0 18px}
#kioskStage #loginScreen .login-hero p{font-size:21px}
#kioskStage #loginScreen .login-form{padding:40px 44px 44px}

/* Quiz fills the usable screen and stays centered */
#kioskStage #quizScreen.active{padding:28px 70px 30px}
#kioskStage #quizScreen .shell{height:100%;display:flex;flex-direction:column;justify-content:center}
#kioskStage #quizScreen .quiz-heading{display:grid;gap:14px;margin:0 0 18px}
#kioskStage #quizScreen .quiz-status-top{margin:0;gap:16px}
#kioskStage #quizScreen .quiz-status-top .info-card{min-height:86px;padding:16px 20px}
#kioskStage #quizScreen .quiz-status-top .info-card .card-icon{width:56px;height:56px}
#kioskStage #quizScreen .quiz-status-top .info-card .value,#kioskStage #quizScreen .quiz-status-top .info-card.participant .value{font-size:20px}
#kioskStage #quizScreen .quiz-heading h1{font-size:56px;line-height:1.04}
#kioskStage #quizScreen .q-progress{font-size:15px;margin-top:4px}
#kioskStage #quizScreen .qline{height:10px;margin-top:8px}
#kioskStage #quizScreen .question-area{padding:34px 40px 36px;border-radius:30px}
#kioskStage #quizScreen .question-topbar{margin-bottom:16px}
#kioskStage #quizScreen .question-number{width:70px;height:70px;font-size:21px}
#kioskStage #quizScreen .question-text{font-size:42px;line-height:1.12;margin:6px 0 24px}
#kioskStage #quizScreen .options{gap:14px}
#kioskStage #quizScreen .option{min-height:88px;padding:16px 22px;font-size:19px;border-radius:20px}
#kioskStage #quizScreen .option-letter{width:50px;height:50px;min-width:50px;font-size:17px}
#kioskStage #quizScreen .feedback{font-size:16px;padding:16px 18px;margin-top:12px}
#kioskStage #quizScreen .next-btn{min-height:68px;margin-top:14px;font-size:19px}
#kioskStage #quizScreen .quiz-back{width:170px;min-height:56px;margin:16px auto 0;font-size:17px}

/* Result uses the full vertical space and sits visually in the centre */
#kioskStage #resultScreen .shell,#kioskStage #resultRoot{height:100%;display:flex;align-items:center;justify-content:center}
#kioskStage #resultScreen .result-wrap{width:100%;padding:0}
#kioskStage #resultScreen .result-panel{width:100%;max-width:860px;padding:44px 48px 42px;border-radius:34px}
#kioskStage #resultScreen .eyebrow{margin-bottom:16px}
#kioskStage #resultScreen .result-chip{font-size:15px;padding:11px 18px;margin:0 auto 20px}
#kioskStage #resultScreen .result-chip .chip-emoji{width:42px;height:42px;font-size:25px}
#kioskStage #resultScreen .result-wrap h1{font-size:56px;line-height:1.08}
#kioskStage #resultScreen .result-kicker{font-size:21px;line-height:1.4;margin-top:14px}
#kioskStage #resultScreen .result-wrap p{font-size:18px;line-height:1.7;margin-top:14px;max-width:720px}
#kioskStage #resultScreen .participant-summary{max-width:560px;margin-top:22px;padding:18px 22px}
#kioskStage #resultScreen .participant-summary .summary-icon{width:54px;height:54px}
#kioskStage #resultScreen .participant-summary .copy strong{font-size:20px}
#kioskStage #resultScreen .ring{width:210px;height:210px;margin:26px auto}
#kioskStage #resultScreen .ring:after{inset:16px}
#kioskStage #resultScreen .ring-inner strong{font-size:54px}
#kioskStage #resultScreen .stats{max-width:740px;gap:14px;margin:22px auto 26px}
#kioskStage #resultScreen .stat{padding:18px 12px}
#kioskStage #resultScreen .stat strong{font-size:28px}
#kioskStage #resultScreen .result-actions{max-width:740px;margin:0 auto}
#kioskStage #resultScreen .result-actions button{min-height:68px;font-size:19px}


/* v28 — move participant/live score into the upper free area and open up result typography */
#kioskStage #quizScreen .shell{position:relative;justify-content:center;overflow:visible}
#kioskStage #quizScreen .quiz-heading{position:relative;overflow:visible}
#kioskStage #quizScreen .quiz-status-top{
  position:absolute;
  left:0;
  right:0;
  top:-126px;
  width:100%;
  margin:0;
  z-index:6;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);
  gap:18px;
}
#kioskStage #quizScreen .quiz-status-top .info-card{
  min-height:94px;
  padding:18px 22px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(17,50,72,.98),rgba(12,37,55,.98));
  border:1px solid rgba(126,196,226,.18);
  box-shadow:0 12px 26px rgba(2,15,24,.20),inset 0 1px 0 rgba(255,255,255,.04);
}
#kioskStage #quizScreen .quiz-status-top .info-card.participant{border-left:4px solid #44b9df}
#kioskStage #quizScreen .quiz-status-top .info-card.score{border-left:4px solid #00a653}
#kioskStage #quizScreen .quiz-status-top .info-card .card-icon{width:60px;height:60px;border-radius:18px}
#kioskStage #quizScreen .quiz-status-top .info-card .label{font-size:13px;letter-spacing:.16em;margin-bottom:7px}
#kioskStage #quizScreen .quiz-status-top .info-card .value,
#kioskStage #quizScreen .quiz-status-top .info-card.participant .value{font-size:22px;line-height:1.2}
#kioskStage #quizScreen .quiz-status-top .info-card.score .value{font-size:24px}
#kioskStage #quizScreen .quiz-heading h1{margin-top:0}

/* Result screen: use more of the vertical space and give the copy room to breathe */
#kioskStage #resultScreen .result-panel{
  min-height:1180px;
  padding:66px 58px 58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#kioskStage #resultScreen .eyebrow{margin:0 0 28px;line-height:1.5}
#kioskStage #resultScreen .result-chip{margin:0 auto 34px}
#kioskStage #resultScreen .result-wrap h1{font-size:58px;line-height:1.18;margin:0 0 12px}
#kioskStage #resultScreen .result-kicker{font-size:22px;line-height:1.65;margin-top:12px}
#kioskStage #resultScreen .result-wrap p{font-size:19px;line-height:2;margin:24px auto 0;max-width:720px}
#kioskStage #resultScreen .participant-summary{margin-top:34px}
#kioskStage #resultScreen .ring{margin:42px auto 34px}
#kioskStage #resultScreen .stats{margin:32px auto 40px}
#kioskStage #resultScreen .result-actions{width:100%;max-width:740px}

/* laptop / scaled portrait preview gets the same visual spacing */
@media (max-height:1100px){
  #kioskStage #quizScreen .quiz-status-top{top:-108px}
  #kioskStage #resultScreen .result-panel{min-height:1080px}
}


body.inoxap-quiz-active{overflow:hidden!important}.inoxap-quiz-plugin-root{position:fixed;inset:0;z-index:2147483000;background:#061722;overflow:hidden;font-family:Verdana,Arial,sans-serif;color:#f2f7fb}.inoxap-quiz-plugin-root *{box-sizing:border-box}.inoxap-quiz-plugin-root #kioskStage{position:absolute!important}.inoxap-quiz-email-status{margin-top:12px;font-size:14px;color:#8edfc2;text-align:center;min-height:20px}