/* Salam Trivia Arena — distinct bright game-show identity, responsive without a generic shared skin. */
:root{
  --tr-sky:#0ea5e9;--tr-sky-deep:#0369a1;--tr-indigo:#6366f1;--tr-purple:#8b5cf6;
  --tr-pink:#ec4899;--tr-mint:#22c55e;--tr-gold:#fbbf24;--tr-ink:#1e293b;
  --tr-paper:#fff;--tr-soft:#f0f9ff;--tr-danger:#e11d48;--tr-radius:28px;
  --tr-shadow:0 18px 50px rgba(30,64,175,.18);--tr-press:0 5px 0 rgba(15,23,42,.16)
}
*{box-sizing:border-box}
html{min-height:100%;background:#dff5ff}
body.trivia-arena{margin:0;min-height:100vh;min-height:100dvh;color:var(--tr-ink);font-family:Nunito,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
 radial-gradient(circle at 18% 16%,rgba(255,255,255,.88) 0 4px,transparent 5px) 0 0/32px 32px,
 linear-gradient(145deg,#dff5ff 0%,#eef2ff 50%,#fdf2f8 100%);overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,a{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
[hidden],.game-state[hidden]{display:none!important}
.skip-link{position:fixed;left:12px;top:-80px;z-index:999;background:#fff;color:#1d4ed8;padding:12px 16px;border:3px solid #1d4ed8;border-radius:14px;font-weight:900}
.skip-link:focus{top:12px}
.trivia-backdrop{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.trivia-backdrop::before,.trivia-backdrop::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;animation:tr-float 8s ease-in-out infinite}
.trivia-backdrop::before{width:220px;height:220px;left:-75px;top:8%;background:linear-gradient(145deg,#fbbf24,#fb7185)}
.trivia-backdrop::after{width:280px;height:280px;right:-100px;bottom:4%;background:linear-gradient(145deg,#22d3ee,#8b5cf6);animation-delay:-3s}
.trivia-app{position:relative;z-index:1;width:min(100%,1040px);height:100vh;height:100dvh;margin:auto;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.trivia-topbar{min-height:54px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:6px 8px;border:2px solid rgba(255,255,255,.82);border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 8px 24px rgba(14,116,144,.12);backdrop-filter:blur(12px)}
.brand-mini{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:1000;color:#4338ca;white-space:nowrap}.brand-mini span{font-size:1.5rem}.brand-mini strong{font-size:1rem}
.icon-button,.home-link{min-width:44px;min-height:44px;border:0;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#475569;font-weight:1000;text-decoration:none;box-shadow:0 4px 0 rgba(51,65,85,.12);transition:transform .16s ease,box-shadow .16s ease}
.home-link{justify-self:start;padding:0 12px;gap:7px}.sound-button{justify-self:end;font-size:1.2rem}
.icon-button:hover,.home-link:hover{transform:translateY(-2px)}.icon-button:active,.home-link:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(51,65,85,.12)}
.game-stage{min-height:0;border:5px solid rgba(255,255,255,.92);border-radius:34px;background:rgba(255,255,255,.92);box-shadow:var(--tr-shadow);overflow:hidden;position:relative}
.game-state{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bae6fd transparent}
.start-screen{padding:clamp(18px,4vw,38px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(290px,.95fr);gap:clamp(20px,4vw,44px);align-items:center;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,242,255,.96))}
.hero-zone{text-align:center;position:relative}.arena-emblem{width:clamp(130px,22vw,220px);aspect-ratio:1;margin:0 auto 14px;display:grid;place-items:center;position:relative;border-radius:50%;background:conic-gradient(from 0deg,#fbbf24,#fb7185,#8b5cf6,#38bdf8,#22c55e,#fbbf24);box-shadow:0 15px 35px rgba(99,102,241,.25);animation:tr-breathe 4s ease-in-out infinite}
.arena-emblem::before{content:"";position:absolute;inset:11px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#e0e7ff 65%,#c4b5fd)}
.arena-emblem span{position:relative;font-size:clamp(4rem,10vw,7rem);filter:drop-shadow(0 7px 8px rgba(79,70,229,.22))}
.kicker{margin:0 0 5px;color:#0284c7;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:1000}.hero-zone h1{margin:0;font-size:clamp(2.5rem,7vw,5rem);line-height:.91;font-weight:1000;letter-spacing:-.055em;color:#4338ca}.hero-zone h1 span{display:block;color:#0ea5e9}.hero-copy{max-width:560px;margin:14px auto 0;color:#64748b;font-weight:800;font-size:clamp(.95rem,2vw,1.12rem);line-height:1.45}
.setup-panel{padding:clamp(16px,3vw,26px);border:3px solid #c7d2fe;border-radius:28px;background:linear-gradient(160deg,#fff,#f8fafc);box-shadow:0 10px 0 rgba(99,102,241,.1)}.setup-panel h2{margin:0 0 14px;font-size:1.18rem;color:#4338ca}.setup-label{display:block;margin:14px 0 8px;color:#475569;font-size:.82rem;font-weight:1000;text-transform:uppercase;letter-spacing:.07em}.choice-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.choice-row.two{grid-template-columns:1fr 1fr}
.setup-choice{min-height:52px;padding:8px;border:2px solid #dbeafe;border-radius:17px;background:#fff;color:#334155;font-weight:1000;box-shadow:0 4px 0 rgba(14,116,144,.11);transition:.15s ease}.setup-choice:hover{border-color:#7dd3fc;transform:translateY(-1px)}.setup-choice[aria-pressed=true]{color:#fff;border-color:#4f46e5;background:linear-gradient(135deg,#6366f1,#0ea5e9);box-shadow:0 5px 0 #3730a3}.setup-choice small{display:block;font-size:.68rem;font-weight:800;opacity:.82}
.start-button,.primary-button,.secondary-button{width:100%;min-height:56px;border:0;border-radius:19px;padding:12px 18px;font-weight:1000;transition:transform .16s ease,box-shadow .16s ease}.start-button,.primary-button{color:#fff;background:linear-gradient(135deg,#22c55e,#0ea5e9);box-shadow:0 6px 0 #047857;font-size:1.12rem}.start-button{margin-top:18px}.start-button:hover,.primary-button:hover{transform:translateY(-2px)}.start-button:active,.primary-button:active,.secondary-button:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(15,23,42,.2)}.secondary-button{color:#4338ca;background:#eef2ff;border:2px solid #c7d2fe;box-shadow:0 5px 0 #c7d2fe}.best-line{min-height:22px;margin:12px 0 0;text-align:center;color:#64748b;font-weight:900;font-size:.82rem}
.play-screen{display:grid;grid-template-rows:auto minmax(0,1fr);background:linear-gradient(180deg,#eef2ff,#f0f9ff)}.game-hud{padding:12px 14px;background:linear-gradient(120deg,#4f46e5,#7c3aed 55%,#0ea5e9);color:#fff;box-shadow:0 6px 18px rgba(79,70,229,.24);z-index:2}.hud-row{display:grid;grid-template-columns:44px repeat(3,1fr);gap:8px;align-items:center}.exit-button{min-width:44px;min-height:44px;border:0;border-radius:13px;background:rgba(255,255,255,.18);color:#fff;font-size:1.25rem;font-weight:1000}.hud-stat{text-align:center;min-width:0}.hud-stat strong{display:block;font-size:1.08rem;line-height:1}.hud-stat>span{display:block;margin-top:3px;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;font-weight:900;color:#e0e7ff}.progress-track,.timer-track{height:7px;margin-top:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.24)}.progress-fill,.timer-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#facc15,#fb923c);transition:width .35s ease}.timer-track{height:5px;margin-top:5px}.timer-fill{width:100%;background:linear-gradient(90deg,#4ade80,#22d3ee);transition:width .2s linear}.timer-fill.urgent{background:linear-gradient(90deg,#fb7185,#ef4444)}
.play-scroll{min-height:0;overflow-y:auto;padding:clamp(12px,2vw,22px);display:grid;grid-template-columns:minmax(0,.88fr) minmax(300px,1.12fr);gap:clamp(12px,2vw,22px);align-items:stretch}.question-panel,.answer-panel{min-width:0}.question-card{height:100%;min-height:260px;padding:clamp(16px,3vw,26px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:3px solid #c7d2fe;border-radius:26px;background:linear-gradient(145deg,#fff,#eef2ff);box-shadow:0 9px 0 rgba(99,102,241,.12);position:relative;overflow:hidden}.question-card::before{content:"";position:absolute;width:150px;height:150px;right:-70px;top:-70px;border-radius:50%;background:rgba(251,191,36,.22)}.question-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:12px}.pill{padding:6px 10px;border-radius:999px;background:#e0f2fe;color:#0369a1;font-size:.72rem;font-weight:1000}.pill.difficulty{background:#fef3c7;color:#92400e}.question-icon{font-size:clamp(2.8rem,7vw,5rem);line-height:1;margin-bottom:10px;filter:drop-shadow(0 5px 7px rgba(30,64,175,.15))}.question-text{margin:0;font-size:clamp(1.18rem,2.7vw,1.72rem);line-height:1.26;color:#1e293b;font-weight:1000;text-wrap:balance}.streak-banner{min-height:25px;margin-top:12px;color:#d97706;font-weight:1000}.answer-panel{display:flex;flex-direction:column;justify-content:center}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.answer-button{min-height:76px;padding:12px 13px;border:2px solid #bae6fd;border-radius:19px;background:linear-gradient(145deg,#fff,#f0f9ff);color:#1e3a8a;text-align:left;font-weight:900;line-height:1.25;box-shadow:var(--tr-press);transition:transform .14s ease,border-color .14s ease,background .14s ease}.answer-button:hover:not(:disabled){transform:translateY(-2px);border-color:#38bdf8}.answer-button:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 rgba(15,23,42,.14)}.answer-button .answer-key{display:inline-grid;place-items:center;width:29px;height:29px;margin-right:7px;border-radius:10px;background:#dbeafe;color:#1d4ed8;font-size:.78rem}.answer-button.correct{color:#166534;border-color:#4ade80;background:#dcfce7;box-shadow:0 5px 0 #86efac}.answer-button.wrong{color:#9f1239;border-color:#fb7185;background:#ffe4e6;box-shadow:0 5px 0 #fda4af}.answer-button.dimmed{opacity:.58}
.feedback-card{margin-top:12px;padding:12px 14px;border-radius:18px;border:2px solid #bbf7d0;background:#f0fdf4;color:#166534}.feedback-card.wrong{border-color:#fecdd3;background:#fff1f2;color:#9f1239}.feedback-title{margin:0;font-weight:1000}.feedback-note{margin:3px 0 0;font-size:.86rem;font-weight:800;color:#475569}.next-button{margin-top:11px}
.result-screen{padding:clamp(18px,4vw,40px);display:grid;place-items:center;background:linear-gradient(155deg,#eef2ff,#ecfeff 52%,#fdf2f8)}.result-card{width:min(100%,620px);padding:clamp(20px,5vw,42px);text-align:center;border:4px solid #c7d2fe;border-radius:32px;background:#fff;box-shadow:0 12px 0 rgba(99,102,241,.12)}.result-medal{font-size:clamp(4rem,10vw,7rem);line-height:1;animation:tr-breathe 3s ease-in-out infinite}.result-card h2{margin:12px 0 4px;font-size:clamp(2rem,5vw,3rem);color:#4338ca}.result-message{margin:0;color:#64748b;font-weight:800}.score-ring{width:130px;aspect-ratio:1;margin:18px auto;display:grid;place-items:center;border-radius:50%;color:#fff;background:conic-gradient(#fbbf24 var(--score-angle,0deg),#e0e7ff 0);position:relative}.score-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:linear-gradient(145deg,#6366f1,#0ea5e9)}.score-ring strong{position:relative;font-size:1.8rem;font-weight:1000}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.result-stat{padding:12px 7px;border-radius:17px;background:#f8fafc;border:2px solid #e2e8f0}.result-stat strong{display:block;color:#4338ca;font-size:1.25rem}.result-stat span{font-size:.7rem;color:#64748b;font-weight:900}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}.result-actions .primary-button{grid-column:1/-1}.load-error{text-align:center;padding:24px}.load-error h2{color:#be123c}.load-error p{color:#64748b;font-weight:800}
.confetti-layer{position:fixed;inset:0;z-index:200;overflow:hidden;pointer-events:none}.trivia-confetti{position:absolute;top:-40px;font-size:1.5rem;animation:tr-fall var(--fall-time,2.8s) linear forwards}
:focus-visible{outline:4px solid #fbbf24!important;outline-offset:3px!important}
@keyframes tr-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.025)}}
@keyframes tr-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(6deg)}}
@keyframes tr-fall{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes tr-pop{0%{transform:scale(.88);opacity:.3}100%{transform:scale(1);opacity:1}}
.question-card.is-entering{animation:tr-pop .25s ease-out}
@media(max-width:760px){.trivia-app{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:6px}.trivia-topbar{min-height:48px;border-radius:16px;padding:3px 5px}.brand-mini strong{font-size:.86rem}.home-link{padding:0 9px}.home-link .home-word{display:none}.game-stage{border-width:3px;border-radius:24px}.start-screen{grid-template-columns:1fr;align-content:start;gap:14px;padding:18px}.arena-emblem{width:112px;margin-bottom:9px}.arena-emblem span{font-size:3.6rem}.hero-zone h1{font-size:2.55rem}.hero-copy{font-size:.9rem;margin-top:8px}.setup-panel{padding:14px;border-radius:22px}.play-scroll{grid-template-columns:1fr;align-content:start;gap:10px;padding:10px}.question-card{min-height:auto;padding:13px 14px;border-radius:20px}.question-icon{font-size:2.65rem}.question-text{font-size:1.12rem}.question-meta{margin-bottom:7px}.answer-grid{gap:8px}.answer-button{min-height:60px;padding:9px 10px;border-radius:16px}.feedback-card{margin-top:9px;padding:9px 11px}.next-button{margin-top:8px;min-height:50px}.game-hud{padding:7px 9px}.hud-row{grid-template-columns:42px repeat(3,1fr);gap:4px}.exit-button{min-height:42px;min-width:42px}.result-screen{padding:14px}.result-card{padding:18px;border-radius:24px}.result-medal{font-size:4rem}.score-ring{width:105px;margin:12px auto}.result-actions{margin-top:12px}}
@media(max-width:430px){.choice-row{gap:6px}.setup-choice{min-height:48px;padding:6px 4px;font-size:.8rem}.setup-choice small{font-size:.6rem}.answer-grid{grid-template-columns:1fr}.answer-button{min-height:52px}.answer-button .answer-key{width:26px;height:26px}.result-stats{gap:6px}.result-stat{padding:9px 3px}.result-actions{grid-template-columns:1fr}.result-actions .primary-button{grid-column:auto}}
@media(max-height:650px) and (orientation:portrait){.trivia-topbar{display:none}.trivia-app{grid-template-rows:minmax(0,1fr)}.start-screen{padding:9px 14px;gap:7px}.arena-emblem{display:none}.kicker{margin-bottom:2px}.hero-zone h1{font-size:2rem}.hero-copy{display:none}.setup-panel{padding:9px 12px}.setup-panel h2{margin-bottom:7px}.setup-label{margin:7px 0 4px}.choice-row{gap:5px}.setup-choice{min-height:44px}.start-button{margin-top:8px;min-height:48px}.best-line{margin-top:5px;min-height:17px}.question-icon{font-size:2.15rem}.question-text{font-size:1rem}.answer-button{min-height:48px;font-size:.86rem}.result-medal{font-size:3rem}.result-card h2{margin-top:5px}.score-ring{width:82px;margin:8px auto}.result-stat{padding:7px 3px}}
@media(orientation:landscape) and (max-height:520px){.trivia-app{grid-template-rows:minmax(0,1fr);padding:5px}.trivia-topbar{display:none}.start-screen{grid-template-columns:.8fr 1.2fr;padding:10px 16px}.arena-emblem{width:90px}.arena-emblem span{font-size:3rem}.hero-zone h1{font-size:2.1rem}.hero-copy{display:none}.setup-panel{padding:10px 14px}.setup-label{margin:7px 0 4px}.setup-choice{min-height:44px}.start-button{min-height:46px;margin-top:9px}.best-line{display:none}.play-scroll{grid-template-columns:.85fr 1.15fr;padding:8px}.question-card{min-height:0}.question-icon{font-size:2rem}.question-text{font-size:1rem}.answer-button{min-height:46px}.feedback-card{padding:7px 10px}.feedback-note{display:none}.result-screen{padding:8px}.result-card{padding:10px 20px;display:grid;grid-template-columns:auto 1fr;column-gap:15px;align-items:center;text-align:left}.result-medal{grid-row:1/5;font-size:4rem}.result-card h2{font-size:1.8rem;margin:0}.score-ring{width:80px;margin:5px 0}.result-stats,.result-actions{grid-column:1/-1;width:100%}.result-actions{grid-template-columns:repeat(3,1fr)}.result-actions .primary-button{grid-column:auto}}
@media(min-width:1200px){.game-stage{max-height:900px}.answer-button{font-size:1.05rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.trivia-backdrop{display:none}}