/* FLORES365 ELECTION CHALLENGE — original TV-style election knowledge game */
.trivia-section{
 --game-gold:#f4d094;--game-bg:#111938;--game-blue:#233d84;
 padding:clamp(15px,2.6vw,32px);margin:30px 0 52px;
 border:1px solid #8b6e48;border-radius:19px;
 background:radial-gradient(circle at 5% 0%,#233967,#101c37 47%,#0d1726 90%);
 box-shadow:0 10px 45px #0004;position:relative;color:#e8edf8
}
.trivia-section [hidden]{display:none!important}
.trivia-top{display:flex;justify-content:space-between;gap:14px;align-items:start;margin-bottom:16px}
.trivia-eyebrow{color:var(--game-gold);font:800 10px "Manrope",sans-serif;letter-spacing:.17em}
.trivia-top h2{font:900 clamp(25px,3.3vw,40px)/1.09 "Manrope",sans-serif;letter-spacing:-.05em;margin:7px 0}
.trivia-top h2 span{color:var(--game-gold)}
.trivia-top p{color:#b4c4df;font-size:12px;line-height:1.7;max-width:680px;margin:6px 0 0}
.trivia-sound{background:#23355c;border:1px solid #536888;color:#c9d5e5;padding:8px 11px;border-radius:8px;font-size:11px;white-space:nowrap}
.trivia-note{font-size:11px;color:#b9d2df;margin:0 0 14px;min-height:17px}
.trivia-note[data-type=error]{color:#ffc6ae}.trivia-note[data-type=ok]{color:#b7e9c5}
.trivia-start-panel{border:1px solid #536282;background:linear-gradient(115deg,#172c4c,#1c2440);padding:clamp(18px,3vw,29px);border-radius:13px}
.trivia-start-panel h3{color:#f5e0b9;font-size:24px;margin:0 0 6px}
.trivia-start-panel>p{color:#bfd0e7;font-size:12px;line-height:1.6}
.trivia-name-label{display:block;color:#d9e3eb;font-size:11px;font-weight:700;margin:15px 0 7px}
#trivia-name{width:min(370px,100%);border:1px solid #637798;background:#0c1b32;color:#eaf2f5;padding:13px 14px;border-radius:9px;outline:0;font-size:13px}
#trivia-name:focus{border-color:#e5c48d}
.trivia-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.trivia-mode{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:7px;padding:20px;border-radius:11px;border:1px solid #bfa275;cursor:pointer;background:#192e51;color:#eaf0fa;min-height:126px}
.trivia-mode:hover,.trivia-mode:focus-visible{border-color:#ffdb9c;background:#263d67;transform:translateY(-1px)}
.trivia-mode strong{font:800 16px "Manrope",sans-serif;color:#ffdeb0}
.trivia-mode small{font-size:11px;color:#bacbe0}
.trivia-rule-strip{display:flex;gap:8px;flex-wrap:wrap}
.trivia-rule-strip span{padding:6px 9px;font-size:10px;color:#c1d3e6;border:1px solid #4c6383;border-radius:6px}
.trivia-statusbar{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:11px;margin-bottom:14px;padding:11px 14px;border:1px solid #3f5682;border-radius:9px;background:#0d1a32}
.trivia-statusbar span{display:block;color:#91a9c5;font:800 8px "Manrope",sans-serif;letter-spacing:.09em}
.trivia-statusbar strong{display:block;font:800 14px "Manrope",sans-serif;color:#f8e4bb}
.trivia-statusbar #trivia-score{font-size:23px}
.trivia-board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.trivia-category{min-width:0;display:flex;flex-direction:column;gap:7px}
.trivia-cat-name{border:1px solid #5a81cd;border-radius:9px;background:linear-gradient(155deg,#3053ab,#263b7c);min-height:66px;display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 4px;margin:0;font:850 clamp(9px,1.1vw,13px)/1.35 "Manrope",sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#f6ecda}
.trivia-tile{min-height:67px;border-radius:8px;border:1px solid #5274bd;background:linear-gradient(145deg,#2348a0,#182d71);box-shadow:inset 0 1px 0 #ffffff0c;color:#ffd88f;font:900 clamp(17px,2vw,29px) "Manrope",sans-serif;letter-spacing:-.045em;text-shadow:0 2px 0 #171b35;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.trivia-tile:hover:not(:disabled),.trivia-tile:focus-visible:not(:disabled){background:#3c5bbe;border-color:#efc986;transform:translateY(-2px)}
.trivia-tile.done{background:#132341;color:#63799d;border-color:#314260;text-shadow:none;cursor:default;box-shadow:none}
.trivia-tile:disabled:not(.done){opacity:.8;cursor:default}
.trivia-advance{display:grid;justify-items:start;gap:9px;background:#162948;border:1px solid #536985;border-radius:13px;padding:25px}
.trivia-advance h3{font-size:24px;color:#ffdb99;margin:0}
.trivia-advance p{font-size:12px;color:#c4d0e0;line-height:1.7;margin:0}
.trivia-advance small{color:#9fb3ce;font-size:11px}
.trivia-wager-input{background:#0c1b32;color:#fff;border:1px solid #6f8199;padding:11px 13px;font-size:17px;border-radius:8px;width:min(210px,100%)}
.trivia-primary{background:#e7bd78;color:#19253c;border:0;border-radius:9px;padding:13px 19px;font:900 12px "Manrope",sans-serif;cursor:pointer}
.trivia-primary:hover{background:#ffe1a0}
.trivia-finished{text-align:center;background:radial-gradient(circle at 50% 20%,#405381,#192643 68%);border:1px solid #987a4d;border-radius:13px;padding:40px 18px;position:relative;overflow:hidden}
.trivia-finished h3{font-size:clamp(22px,3vw,36px);color:#f5d599;margin:10px 0}
.trivia-finish-score{font:900 clamp(48px,9vw,92px) "Manrope",sans-serif;color:#ffe1a5;text-shadow:0 5px 30px #0009;letter-spacing:-.08em}
.trivia-finished p{font-size:13px;color:#d8e5f2}
.trivia-finished .trivia-primary{margin:8px}
.trivia-piece{position:absolute;top:-25px;width:8px;height:17px;background:var(--game-gold);transform:rotate(var(--spin));animation:trivia-fall 3s ease-in forwards;pointer-events:none}
.trivia-piece:nth-child(3n){background:#86c4ff}.trivia-piece:nth-child(4n){background:#d3a5e7}
@keyframes trivia-fall{to{top:110%;transform:rotate(700deg);opacity:0}}
.trivia-leaderboard{margin-top:20px;background:rgba(8,19,39,.6);border:1px solid #43567c;border-radius:12px;padding:15px}
.trivia-leaderhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:11px}
.trivia-leaderhead h3{font:800 15px "Manrope",sans-serif;margin:0;color:#f6dbad}
.trivia-leader-switch{display:flex;flex-wrap:wrap;gap:6px}
.trivia-leader-switch button{background:#182b4c;border:1px solid #435778;color:#9eb4cf;padding:7px 10px;border-radius:6px;font-size:10px;cursor:pointer}
.trivia-leader-switch button.active{background:#5b553f;border-color:#c0a26e;color:#fff0d1}
.trivia-leader-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:8px;align-items:center;border-top:1px solid #314363;padding:10px 5px}
.trivia-leader-row span{color:#ddb978;font-size:10px}.trivia-leader-row strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trivia-leader-row b{color:#eed49a;font-size:14px}
.trivia-muted{font-size:11px;color:#a6b5cf}
.trivia-disclaimer{font-size:10px;color:#8ea6c1;line-height:1.7;margin:16px 0 0}
.trivia-dialog{width:min(720px,calc(100vw - 24px));border:1px solid #a78959;border-radius:17px;padding:0;background:#101d3c;color:#eaf1fa;box-shadow:0 30px 110px #000d;max-height:min(95dvh,800px);overflow-y:auto}
.trivia-dialog::backdrop{background:#030a16df;backdrop-filter:blur(4px)}
.trivia-clue-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#253b75;border-bottom:1px solid #5c79b8;gap:12px}
.trivia-clue-head span{font:850 11px "Manrope",sans-serif;color:#f4daa7;letter-spacing:.05em}
.trivia-clue-head strong{color:#ffe2a6;font:900 16px "Manrope",sans-serif}
.trivia-clue-body{padding:clamp(17px,3.4vw,30px)}
.trivia-time-row{display:flex;align-items:center;gap:12px;color:#cddbed;font-size:11px}
.trivia-time-row strong{margin-left:auto;font:900 18px "Manrope",sans-serif;color:#f6db9f}
.trivia-time-row strong.urgent{color:#ff8d83}
.trivia-time-meter{height:7px;border-radius:4px;background:#253b5e;overflow:hidden;margin:9px 0 24px}
#trivia-timer-visual{height:100%;width:100%;background:linear-gradient(90deg,#83d1d0,#f6d17d);transition:width .2s linear}
.trivia-clue-text{font:800 clamp(19px,3.2vw,28px)/1.35 "Manrope",sans-serif;text-align:center;max-width:620px;margin:0 auto 26px;color:#f7e9ce;min-height:60px}
.trivia-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.trivia-answer{min-height:64px;cursor:pointer;background:#1c3567;border:1px solid #536d9d;color:#dfeafd;border-radius:9px;padding:12px;text-align:left;font:700 12px/1.5 "Manrope",sans-serif}
.trivia-answer:hover:not(:disabled){background:#32509b;border-color:#f3ce8d}
.trivia-answer:disabled{cursor:default;opacity:.82}
.trivia-answer.correct{background:#1f5848!important;border-color:#72d6a2!important;color:#dcffeb!important;opacity:1}
.trivia-answer.incorrect{background:#5d2b36!important;border-color:#e98a83!important}
.trivia-answer-status{text-align:center;color:#f2d198;font-size:12px;font-weight:800;margin:17px 0}
.trivia-explanation{border:1px solid #506882;background:#152b46;border-radius:9px;padding:16px;line-height:1.55;margin:14px 0}
.trivia-explanation strong{color:#f2dea9;font-size:13px}.trivia-explanation p{color:#cfdeec;font-size:12px;margin:9px 0}.trivia-explanation a{font-size:11px;color:#f4d59b;text-decoration:underline}
.trivia-next{width:100%;margin-top:10px}
.trivia-busy{cursor:progress}
@media(max-width:1050px){.trivia-cat-name{font-size:9px}.trivia-tile{min-height:58px}}
@media(max-width:700px){
 .trivia-section{padding:15px 11px}.trivia-top h2{font-size:27px}
 .trivia-modes{grid-template-columns:1fr}
 .trivia-mode{min-height:100px}
 .trivia-statusbar{grid-template-columns:1fr 1fr;gap:8px}
 .trivia-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .trivia-cat-name{min-height:55px;font-size:9px}
 .trivia-tile{min-height:48px;font-size:21px}
 .trivia-options{grid-template-columns:1fr}
 .trivia-answer{min-height:52px;font-size:12px}
 .trivia-leaderhead{display:block}.trivia-leader-switch{margin-top:9px}
}
@media(max-width:365px){
 .trivia-section{padding:14px 8px}
 .trivia-tile{font-size:18px;min-height:42px}
 .trivia-cat-name{padding:6px 3px;font-size:8px}
 .trivia-statusbar{padding:9px}
}
@media(prefers-reduced-motion:reduce){.trivia-piece{animation:none;display:none}.trivia-tile{transition:none}}

/* October 2026 refined game scale.  Compact, readable, touch-friendly.
   Scope is limited to Election Challenge; other page sections are untouched. */
.trivia-section{
 max-width:1060px;
 margin:25px auto 43px;
 padding:clamp(14px,2vw,23px);
 border-radius:15px;
}
.trivia-top{gap:10px;margin-bottom:11px}
.trivia-top h2{font-size:clamp(23px,2.65vw,32px);margin:5px 0}
.trivia-top p{font-size:11px;line-height:1.55}
.trivia-sound{
 display:inline-flex;align-items:center;justify-content:center;
 flex:0 0 auto;min-height:36px;
 padding:8px 11px;font-size:11px;border-radius:8px;
}
.trivia-note{margin:0 0 11px;font-size:10px}
.trivia-start-panel{padding:clamp(15px,2.3vw,21px)}
.trivia-start-panel h3{font-size:20px}
.trivia-start-panel>p{font-size:11px;line-height:1.6}
.trivia-name-label{margin:11px 0 6px}
#trivia-name{padding:10px 12px;min-height:42px}
.trivia-modes{gap:10px;margin:12px 0}
.trivia-mode{min-height:100px;gap:5px;padding:15px}
.trivia-mode strong{font-size:14px}
.trivia-mode small{font-size:10px;line-height:1.5}
.trivia-rule-strip{gap:6px}
.trivia-rule-strip span{padding:5px 8px}
.trivia-statusbar{margin-bottom:10px;padding:9px 11px;gap:8px}
.trivia-statusbar strong{font-size:12px}
.trivia-statusbar #trivia-score{font-size:20px}
.trivia-board{gap:6px}
.trivia-category{gap:6px}
.trivia-cat-name{
 min-height:53px;padding:7px 4px;
 border-radius:7px;font-size:clamp(9px,.95vw,11px)
}
.trivia-tile{
 min-height:53px;font-size:clamp(19px,1.8vw,25px);
 border-radius:7px
}
.trivia-advance{padding:19px;gap:8px}
.trivia-advance h3{font-size:20px}
.trivia-finished{padding:27px 15px}
.trivia-finished h3{font-size:clamp(21px,2.5vw,30px)}
.trivia-finish-score{font-size:clamp(42px,7vw,72px)}
.trivia-leaderboard{margin-top:16px;padding:12px}
.trivia-leader-row{padding:8px 5px}
.trivia-dialog{
 width:min(625px,calc(100vw - 20px));
 max-height:min(92dvh,735px);
 border-radius:13px;
}
.trivia-clue-head{padding:11px 14px}
.trivia-clue-body{padding:clamp(14px,2.5vw,23px)}
.trivia-time-meter{margin:7px 0 17px}
.trivia-clue-text{
 font-size:clamp(18px,2.35vw,24px);
 min-height:35px;
 margin:0 auto 18px;
}
.trivia-options{gap:8px}
.trivia-answer{min-height:55px;padding:10px 12px}
.trivia-answer-status{margin:12px 0;font-size:11px}
.trivia-explanation{padding:13px;margin:10px 0}
.trivia-primary{padding:11px 16px}
@media (max-width:700px){
 .trivia-section{padding:12px 9px;margin:19px auto 35px}
 .trivia-top{gap:8px}
 .trivia-top h2{font-size:24px}
 .trivia-top p{font-size:11px}
 .trivia-sound{min-height:36px;padding:6px 8px;font-size:10px}
 .trivia-start-panel{padding:14px}
 .trivia-start-panel h3{font-size:19px}
 .trivia-modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .trivia-mode{min-height:103px;padding:10px;gap:4px}
 .trivia-mode strong{font-size:12px}
 .trivia-mode small{font-size:10px}
 .trivia-statusbar{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;gap:5px}
 .trivia-statusbar strong{font-size:11px}
 .trivia-statusbar #trivia-score{font-size:19px}
 .trivia-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .trivia-cat-name{min-height:49px;font-size:9px;padding:5px 3px}
 .trivia-tile{min-height:45px;font-size:19px;border-radius:6px}
 .trivia-options{grid-template-columns:1fr;gap:7px}
 .trivia-answer{min-height:45px;padding:9px 11px;font-size:11px}
 .trivia-clue-body{padding:14px}
 .trivia-clue-text{font-size:18px;margin-bottom:15px;min-height:0}
 .trivia-leaderboard{margin-top:12px}
}
@media(max-width:365px){
 .trivia-section{padding:11px 7px}
 .trivia-top h2{font-size:21px}
 .trivia-eyebrow{font-size:9px}
 .trivia-mode{min-height:107px;padding:9px}
 .trivia-cat-name{min-height:48px;font-size:8px}
 .trivia-tile{min-height:44px;font-size:18px}
 .trivia-clue-head{padding:9px 11px}
}

/* Allow enabling and checking the audio while a modal clue is open. */
.trivia-clue-sound{
 margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
 min-height:33px;padding:5px 11px;border-radius:7px;
 background:#263b59;border:1px solid #66768d;color:#dce7eb;
 font:800 10px "Manrope",system-ui,sans-serif;
 white-space:nowrap;
}
.trivia-clue-sound[aria-pressed="true"]{border-color:#d6b780;color:#f7dba5;background:#3c423b}
.trivia-clue-sound:hover,.trivia-clue-sound:focus-visible{border-color:#f0d096}
.trivia-time-row strong{margin-left:0}
@media(max-width:365px){.trivia-clue-sound{padding:5px 8px;font-size:9px}}

/* Original game-show graphic matching the Election Challenge promotion */
.nav-icon.trivia-nav-gamepad{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:none}
.nav-icon.trivia-nav-gamepad svg{width:18px;height:18px;display:block}
.trivia-top{position:relative;align-items:center;isolation:isolate;gap:14px}
.trivia-top-copy{flex:1;min-width:0}
.trivia-game-emblem{flex:0 0 auto;width:172px;height:108px;display:flex;flex-direction:column;
 border:1px solid #aa8c60;border-radius:11px;background:linear-gradient(145deg,#2c4580,#142a52 64%,#142a30);
 box-shadow:inset 0 1px 0 #ffffff34,0 9px 25px #0006;transform:rotate(3deg);overflow:hidden}
.trivia-emblem-top{text-align:center;font:900 8px "Manrope",system-ui,sans-serif;letter-spacing:.1em;
 padding:7px 0 4px;color:#efd2a0}
.trivia-emblem-machine{display:flex;justify-content:center;align-items:center;gap:8px;min-height:46px;
 color:#f0c98e}
.trivia-emblem-machine svg{width:56px;height:48px;filter:drop-shadow(0 3px 5px #0007)}
.trivia-emblem-letter{font:900 36px "Manrope",system-ui,sans-serif;letter-spacing:-.11em;text-shadow:0 3px 8px #0008}
.trivia-emblem-letter span{color:#ebc385}
.trivia-emblem-bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px 8px 9px}
.trivia-emblem-bottom b{font:900 11px "Manrope",system-ui,sans-serif;color:#ffdda2;
 padding:4px 0;text-align:center;background:#2450a0;border:1px solid #527ac5;border-radius:3px}
.trivia-sound{align-self:flex-start}
.trivia-start-panel{position:relative;overflow:hidden;
 background:radial-gradient(ellipse at 90% 20%,#46598e57,transparent 44%),linear-gradient(115deg,#172c4c,#1c2440)}
.trivia-start-panel:after{content:"";pointer-events:none;position:absolute;right:-68px;top:-125px;
 border:1px solid #cfb27b21;width:330px;height:330px;border-radius:50%;box-shadow:0 0 0 35px #ffda9a05,0 0 0 75px #ffda9a04}
.trivia-start-panel>*{position:relative;z-index:1}
.trivia-mode{background:linear-gradient(140deg,#234681,#182b50);box-shadow:inset 0 1px 0 #ffffff25}
@media(max-width:800px){.trivia-game-emblem{width:122px;height:91px}.trivia-emblem-machine{min-height:33px}.trivia-emblem-machine svg{width:42px;height:33px}.trivia-emblem-letter{font-size:28px}.trivia-emblem-bottom b{font-size:9px;padding:3px 0}.trivia-emblem-top{font-size:6px}}
@media(max-width:700px){.trivia-game-emblem{width:93px;height:75px}.trivia-emblem-top{font-size:6px;padding:6px 0 2px;letter-spacing:0}.trivia-emblem-machine{min-height:27px;gap:4px}.trivia-emblem-letter{font-size:21px}.trivia-emblem-machine svg{width:32px;height:29px}.trivia-emblem-bottom{gap:2px;padding:2px 4px 5px}.trivia-emblem-bottom b{font-size:7px;padding:3px 0}.trivia-top{flex-wrap:wrap}.trivia-sound{align-self:auto}}
@media(max-width:360px){.trivia-game-emblem{width:71px;height:65px}.trivia-emblem-top{font-size:5px}.trivia-emblem-machine svg{width:24px;height:24px}.trivia-emblem-letter{font-size:18px}.trivia-emblem-bottom b{font-size:6px}}

.trivia-top-actions{display:flex;flex:0 0 auto;flex-direction:column;align-items:stretch;gap:8px}
.trivia-invite-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:37px;
 border:1px solid #d5b47b;border-radius:8px;background:#2e484c;color:#f2d4a4;
 padding:9px 10px;font:800 10px/1.3 "Manrope",system-ui,sans-serif;cursor:pointer}
.trivia-invite-button svg{height:15px;width:15px;flex:none}
.trivia-invite-button:hover,.trivia-invite-button:focus-visible{background:#426268;border-color:#ffe0a2}
.trivia-top-actions .trivia-sound{align-self:auto;width:100%}
@media(max-width:850px){
 .trivia-top-actions{width:100%;flex-direction:row;justify-content:flex-end}
 .trivia-top-actions .trivia-sound{width:auto}
}
@media(max-width:400px){
 .trivia-top-actions{justify-content:space-between;gap:6px}
 .trivia-invite-button{min-height:35px;padding:7px 8px;font-size:10px}
 .trivia-top-actions .trivia-sound{font-size:10px;min-height:35px;padding:7px 8px}
}

/* 2026-10-22 Desktop layout correction: trivia occupies the same content
   column as Election Intelligence, Early Vote, Live TV and Maps.  The earlier
   1060px cap made the game appear detached and undersized on wide desktops. */
.trivia-section{
  width:100%;
  max-width:none;
  min-width:0;
  margin:25px 0 43px;
}
@media(max-width:700px){
  .trivia-section{margin:19px 0 35px}
}

/* Tablet widths: keep game-header actions from expanding the entire page. */
@media(min-width:701px) and (max-width:850px){
 .trivia-top{flex-wrap:wrap}
 .trivia-top-actions{flex:1 1 100%;width:100%;max-width:100%;justify-content:flex-end}
 .trivia-top-actions .trivia-sound{width:auto}
}