.quiz-hud{position:sticky;top:0;z-index:5;padding:14px 0 16px;margin-top:-14px;background:var(--color-surface)}.quiz-hud-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;color:var(--color-text-secondary);font-size:.85rem}.quiz-clock{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--color-primary)}.question-heading{margin:12px 0 24px;font-size:clamp(1.2rem,3.8vw,1.55rem);line-height:1.45;overflow-wrap:anywhere}.question-heading:focus{outline:none}.answer-hint{font-size:.8rem;color:var(--color-text-secondary);line-height:1.5;margin:14px 0}.quiz-feedback{margin:16px 0 20px;padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#c9a84c0f;color:var(--color-text-secondary);line-height:1.65;font-size:.92rem}.quiz-feedback h3{color:var(--color-text);font-size:1rem;margin-bottom:8px}.quiz-feedback p+p{margin-top:10px}.quiz-feedback.feedback-correct{border-color:#4caf87;background:#4caf871a}.quiz-feedback.feedback-wrong{border-color:#e05555a6}.quiz-next{margin-top:24px}.quiz-next .btn{width:100%;min-height:54px}.quiz-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:16px;color:var(--color-text-muted);font-size:.72rem}.quiz-quiet-button{background:transparent;border:0;padding:12px 0 12px 12px;color:var(--color-text-secondary);font:inherit;cursor:pointer;min-height:44px}.month-year-fields{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;margin-bottom:20px}.month-year-fields>div{min-width:0}.month-year-form .form-input{min-height:54px;font-size:16px;width:100%}.month-year-form select{color-scheme:dark}.month-year-form .btn{width:100%}.answer-entered{margin:14px 0;color:var(--color-primary)}.answer-mark{margin-left:auto;font-size:1.25rem;flex-shrink:0;font-weight:800}.vote-count{display:block;margin-top:6px;font-size:.8rem;font-weight:400}.quiz-summary{list-style:none;margin:24px 0}.quiz-summary li{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border)}.quiz-summary li>span{min-width:0}.quiz-summary li>span>span{display:block;margin-top:5px;font-size:.83rem;color:var(--color-text-secondary);overflow-wrap:anywhere}.quiz-summary .btn{flex-shrink:0;min-height:44px;font-size:.8rem}.finish-score{margin:24px 0;font-size:1.1rem;color:var(--color-text-secondary)}.finish-score strong{font-size:3rem;color:var(--color-primary)}.option-card:disabled{cursor:default;opacity:1;-webkit-text-fill-color:currentColor}.discreet-admin{margin-top:24px;padding-top:12px;border-top:1px solid var(--color-border);text-align:center}.discreet-admin .quiz-quiet-button{font-size:.78rem;padding:10px 12px;min-height:44px;color:var(--color-text-muted);text-decoration:underline;text-underline-offset:3px}.role-card.role-card--guest{border-color:var(--color-primary);background:linear-gradient(135deg,#c9a84c2e,#c9a84c0d)}.admin-access-dialog{position:fixed;margin:auto;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px;border:1px solid var(--color-border);border-radius:20px;color:var(--color-text);background:var(--color-surface);box-shadow:0 24px 80px #00000080}.admin-access-dialog::backdrop{background:#040710bf;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.admin-access-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.admin-access-heading h2{font-size:1.2rem}.admin-access-dialog .btn{width:100%;min-height:48px}.admin-access-dialog .form-input{font-size:16px}.admin-access-dialog .form-error:empty{display:none}.admin-access-dialog .form-error{margin-bottom:16px}.option-card.answer-correct{border-color:#4caf87!important;background:linear-gradient(120deg,#176144,#254c3b)!important;color:#fff!important;box-shadow:0 0 0 1px #4caf87}.option-card.answer-wrong{border-color:#e05555!important;background:#602f34!important;color:#fff!important}.option-card.answer-locking{background:#b88c2b!important;border-color:#f3cd67!important;color:#15120a!important}.reveal-answer .answer-correct{animation:correct-answer-pulse .85s ease-out 2}.correct-answer-value{margin:18px 0;padding:16px;border:1px solid #4caf87;border-radius:var(--radius-md);background:#176144;color:#fff;line-height:1.5}.correct-answer-value.reveal-value{animation:correct-answer-pulse .85s ease-out 2}@keyframes correct-answer-pulse{0%,to{box-shadow:0 0 0 1px #4caf87}50%{box-shadow:0 0 0 4px #4caf8766,0 0 22px #4caf874d}}@media(max-width:560px){.app{justify-content:flex-start!important;padding:12px!important;padding-bottom:max(20px,env(safe-area-inset-bottom))!important}.card{padding:22px 18px!important;border-radius:20px!important}.option-card{min-height:64px;padding:15px 12px!important;gap:12px;text-align:left}.option-letter{flex-shrink:0}.option-text{font-size:.95rem;line-height:1.5;overflow-wrap:anywhere}.quiz-feedback{padding:14px}.quiz-footer{align-items:flex-start}.role-actions{flex-wrap:wrap}.role-actions .btn{min-height:44px}.quiz-summary li{align-items:flex-start}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.confetti-piece{display:none}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height);color:var(--color-text);background:var(--color-bg);background-image:var(--color-bg-gradient);min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 20%,rgba(201,168,76,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(201,168,76,.02) 0%,transparent 50%);pointer-events:none;z-index:0}.app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:var(--space-6);padding-bottom:env(safe-area-inset-bottom,var(--space-6))}.loading-screen{display:flex;align-items:center;justify-content:center;min-height:50vh}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:var(--container-max);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:fadeInUp var(--transition-slow) both}.card--glass{background:var(--color-surface-glass);border-color:var(--color-border-strong)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.quiz-badge{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-light));color:var(--color-text-on-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-6);box-shadow:var(--shadow-glow);letter-spacing:-1px}.quiz-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text);text-align:center;margin-bottom:var(--space-2);letter-spacing:-.02em}.quiz-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;margin-bottom:var(--space-8)}.form-group{margin-bottom:var(--space-6)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.form-input{display:block;width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);background:var(--color-bg);border:1.5px solid var(--color-border-strong);border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);min-height:var(--touch-target)}.form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.form-input::placeholder{color:var(--color-text-muted)}.form-hint{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-1)}.form-error{font-size:var(--font-size-sm);color:var(--color-error);margin-top:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-error-bg);border-radius:var(--radius-sm);animation:fadeInUp var(--transition-fast) both}.input-wrapper{position:relative}.password-toggle{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:var(--space-1);font-size:var(--font-size-lg);min-width:var(--touch-target);min-height:var(--touch-target);display:flex;align-items:center;justify-content:center}.password-toggle:hover{color:var(--color-text)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch-target);padding:var(--space-3) var(--space-6);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;-webkit-user-select:none;user-select:none;white-space:nowrap}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{width:100%;background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));color:var(--color-text-on-primary);box-shadow:var(--shadow-sm),0 0 0 0 var(--color-primary-glow)}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));box-shadow:var(--shadow-md),var(--shadow-glow);transform:translateY(-1px)}.btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.btn--secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border-strong)}.btn--secondary:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-primary)}.options-list{display:flex;flex-direction:column;gap:var(--space-3);list-style:none;margin-bottom:var(--space-6)}.option-card{color:var(--color-text);font-family:inherit;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-height:var(--touch-target);font-size:var(--font-size-base);text-align:left;width:100%}.option-card:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.option-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.option-card[aria-checked=true],.option-card.selected{border-color:var(--color-primary);background:var(--color-primary-subtle);box-shadow:0 0 0 1px var(--color-primary),var(--shadow-sm)}.option-letter{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-surface);border:1.5px solid var(--color-border-strong);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);color:var(--color-text-secondary);flex-shrink:0;transition:all var(--transition-fast);text-transform:uppercase}.option-card.selected .option-letter{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-on-primary)}.option-text{flex:1}.progress-bar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}.progress-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);white-space:nowrap}.progress-track{flex:1;height:4px;background:var(--color-surface);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary-dark),var(--color-primary-light));border-radius:var(--radius-full);transition:width var(--transition-normal)}.status-icon{font-size:var(--font-size-3xl);text-align:center;margin-bottom:var(--space-4)}.status-text{text-align:center;font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--color-text);margin-bottom:var(--space-2)}.status-detail{text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-primary);animation:pulse 1.5s ease-in-out infinite;margin-right:var(--space-2);vertical-align:middle}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.connection-status{position:fixed;bottom:var(--space-4);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-xs);color:var(--color-text-secondary);z-index:100;box-shadow:var(--shadow-md);transition:opacity var(--transition-normal)}.connection-status[hidden]{display:none}.connection-dot{width:6px;height:6px;border-radius:50%;background:var(--color-success)}.connection-dot.disconnected{background:var(--color-error);animation:pulse 1s ease-in-out infinite}.finish-decoration{font-size:3rem;text-align:center;margin-bottom:var(--space-4);line-height:1.2}.finish-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);text-align:center;margin-bottom:var(--space-4);background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.finish-message{text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:1.7}.timer{display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4)}.timer-value{font-family:var(--font-family-mono);font-weight:var(--font-weight-bold);color:var(--color-text);font-size:var(--font-size-lg)}.timer-value.urgent{color:var(--color-error);animation:pulse .5s ease-in-out infinite}.explanation-box{margin-top:var(--space-4);padding:var(--space-4);background:var(--color-info-bg);border:1px solid rgba(85,136,224,.2);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text);line-height:1.6}.explanation-box:before{content:"💡 "}.privacy-notice{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-border);font-size:var(--font-size-xs);color:var(--color-text-muted);text-align:center;line-height:1.6}.text-center{text-align:center}@keyframes confettiFall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.confetti-piece{position:fixed;width:8px;height:8px;border-radius:2px;z-index:200;pointer-events:none;animation:confettiFall 3s ease-in forwards}.gate-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a0fd9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:fadeIn .25s ease-out both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.gate-modal{position:relative;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:480px;box-shadow:0 20px 40px #0009,0 0 30px #c9a84c26;animation:fadeInUp .3s cubic-bezier(.16,1,.3,1) both}.gate-modal--wide{max-width:680px}.gate-close-btn{position:absolute;top:var(--space-4);right:var(--space-4);background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:var(--font-size-sm);width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.gate-close-btn:hover{color:var(--color-text);border-color:var(--color-text-secondary);background:#ffffff0d}.role-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin:var(--space-6) 0}@media(min-width:600px){.role-grid{grid-template-columns:repeat(3,1fr)}}.role-card{position:relative;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;cursor:pointer;transition:all var(--transition-normal);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.role-card:hover,.role-card:focus-visible{border-color:var(--color-primary);transform:translateY(-3px);box-shadow:0 8px 24px #c9a84c33}.role-card--birthday{border-color:#c9a84c80;background:linear-gradient(180deg,#c9a84c14,#14141ecc)}.role-card--birthday:hover{border-color:gold;box-shadow:0 10px 28px #ffd70040}.role-icon{font-size:2.2rem;margin-bottom:var(--space-2)}.role-name{font-size:var(--font-size-base);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}.role-desc{font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.4}.badge-gold{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#c9a84c33,#ffd70033);color:gold;border:1px solid rgba(255,215,0,.4);padding:3px 10px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.5px}.special-chapter-banner{background:linear-gradient(135deg,#c9a84c26,#8a5cf626);border:1px solid rgba(201,168,76,.4);border-radius:var(--radius-lg);padding:var(--space-5);margin:var(--space-6) 0;text-align:center;box-shadow:0 4px 20px #c9a84c1f}.special-chapter-title{font-size:var(--font-size-md);color:gold;font-weight:700;margin-bottom:var(--space-2)}.special-chapter-banner p{color:var(--color-text-secondary);line-height:1.55}.role-back{width:100%;margin-top:var(--space-3)}.role-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-5)}.role-actions>.btn{flex:1 1 180px}.role-card:disabled{cursor:wait;opacity:.65;transform:none}@media(max-width:480px){.gate-modal{padding:var(--space-5)}.role-actions{flex-direction:column}.role-actions>.btn{width:100%}}