:root{--green:#424d34;--deep:#303a27;--gold:#ae8a48;--line:#d9cfb9;--muted:#62634f;color:#303729;background:#eae5d9}
.topbar{background:#333b29;color:#f7f0df;border-bottom:1px solid #aa8c50}
.brand{font-family:Arial,Helvetica,sans-serif;font-size:21px;font-weight:600;min-width:0}.brand small,.connection{color:#ddd3b9}.brand-icon{color:#e3c58b;border-color:#ac9159}.connection>span{background:#b5c397}
.button.primary{background:var(--green);color:#fffaf0}.button.primary:hover:not(:disabled){background:#303a27}
body[data-mode=play]{background:#eae5d9 url('/static/presentation/parchment.webp') center top/cover fixed}
body[data-mode=play] #app{max-width:760px;background:#fbf7ed;min-height:calc(100dvh - 76px);border-inline:1px solid #d9cfb9}
.join-banner{min-height:310px;padding:40px 42px;background:#333b29 url('/static/presentation/scene.webp') center/cover;color:#fff5df;border-bottom:3px solid #ac9159;justify-content:center}.join-banner:before{display:none}.join-banner>div{max-width:440px;text-shadow:0 2px 8px #202619}
.join-banner h1{font-family:Arial,Helvetica,sans-serif;font-size:42px;font-weight:600;line-height:1.12;margin:12px 0 18px}.join-banner p{font-size:18px;line-height:1.5;max-width:330px}.join-banner .eyebrow{font-size:12px;color:#ead7ac}.edition{background:#333b29;color:#ead7ac;border:1px solid #ac9159;top:18px;right:22px;font-size:12px}
.join-body{padding:32px 42px 40px}.join-body h2{font-family:Georgia,serif;font-size:28px;font-weight:400}.join-body label{font-size:16px}.join-body input{background:#fffdf8;border-color:#bcb9a5;min-height:50px;color:#303729}.join-body input::placeholder{color:#777968}.join-body input[type=checkbox]{min-height:0;width:20px;height:20px;margin-top:3px}.join-body .consent{font-size:14px;line-height:1.6}.join-body .button{height:56px;font-size:18px}
.player-question{padding:32px 38px 36px;border-top:7px solid var(--gold)}.question-meta{font-size:14px;color:#5c624b}.question-progress{margin:20px 0 28px}.question-progress span{height:4px;background:#ddd8c7}.question-progress span.done{background:#697654}.player-question h1{font-size:32px;line-height:1.3;color:#303729;margin-bottom:28px}
.answer-option{background:#fffdf8;color:#303729;border-color:#c9c8b6;font-size:19px;min-height:78px;padding:17px 20px;transition:background .15s,border-color .15s}.answer-letter{border-color:#c9c8b6;color:#61664e}.answer-option.selected{background:#e9eddf;border-color:#424d34;box-shadow:inset 0 0 0 1px #424d34}.answer-option.selected .answer-letter{background:#424d34;border-color:#424d34}.player-question .button.full{min-height:56px;font-size:18px}.player-footer{font-size:14px;overflow-wrap:anywhere;align-items:flex-start}
.results-view{padding:38px}.results-view h1{font-size:36px}.score{border-bottom:1px solid var(--line);margin-bottom:24px}.personal-results{padding-left:24px;font-size:18px}.personal-results p{font-size:17px}.personal-results small{font-size:15px}.personal-results .result-explanation{display:block;font-size:16px;line-height:1.65;color:#555c49;margin-top:14px}.personal-results .result-source{font-size:12px;color:#747460}.button:focus-visible,.answer-option:focus-visible,input:focus-visible{outline-color:#8c703b}
@media(max-width:600px){
 .brand{font-size:17px;line-height:1.25;gap:9px}.brand small{font-size:9px}.brand-icon{width:35px;height:35px;flex-shrink:0}
 body[data-mode=play] .topbar{padding:0 14px;gap:10px;height:74px}.top-actions{flex-shrink:0}.connection.offline{max-width:58px;font-size:9px}
 body[data-mode=play] #app{border:0;min-height:calc(100dvh - 74px)}
 .join-banner{min-height:290px;padding:45px 28px 34px;background-position:center}.join-banner h1{font-size:34px;max-width:290px}.join-banner p{font-size:17px;max-width:270px}.join-banner .eyebrow{font-size:10px}.edition{font-size:11px;top:12px;right:16px;padding:3px 7px}
 .join-body{padding:26px 22px 32px}.join-body h2{font-size:25px}.join-body .section-title{flex-wrap:wrap;gap:10px;margin-bottom:24px}.join-body .pill{font-size:12px}
 .player-question{padding:24px 20px 28px}.player-question h1{font-size:27px;line-height:1.3;margin-bottom:24px}.question-meta{font-size:13px}.answer-option{font-size:18px;gap:12px;padding:16px 14px;min-height:76px}.answer-letter{width:32px;height:32px}.player-footer{font-size:12px;gap:12px}
 .results-view{padding:30px 22px}.results-view h1{font-size:30px}.score>strong{font-size:72px}.personal-results{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.answer-option{transition:none}}

/* Organizer screens share the presentation artwork and palette. */
body[data-mode=host]{background:#eae5d9 url('/static/presentation/parchment.webp') center top/cover fixed}
body[data-mode=host] #app{min-height:calc(100dvh - 86px)}
.login-view{max-width:480px;margin:48px auto;padding:0 32px 32px;border:1px solid #cbbb96;background:#fbf7ed;border-radius:6px;overflow:hidden}
.login-view:before{content:'';display:block;height:150px;margin:0 -32px 28px;background:#333b29 url('/static/presentation/scene.webp') center/cover;border-bottom:3px solid var(--gold)}
.login-view .seal{border-color:#ae8a48;color:#424d34;margin-bottom:18px}
.login-view h1{font-size:30px;line-height:1.25;margin-bottom:26px}
.login-view label{font-size:16px}.login-view .button{min-height:52px;font-size:17px}
.host-shell{max-width:1240px;padding:0 36px 48px;background:#fbf7ed;min-height:calc(100dvh - 86px);border-inline:1px solid var(--line)}
.host-heading{margin:0 -36px 28px;padding:38px 36px;min-height:180px;background:#333b29 url('/static/presentation/scene.webp') center/cover;border-bottom:3px solid var(--gold);color:#fff5df}
.host-heading h1{font-family:Arial,Helvetica,sans-serif;font-size:30px;font-weight:600;line-height:1.25;margin:0;max-width:560px;text-shadow:0 1px 6px #202619}
.host-heading .button.subtle{background:#333b29;color:#fff5df;border-color:#ae8a48}
.host-shell .control-row{margin:0 0 28px;gap:12px}
.host-shell .button{font-size:16px;min-height:48px}
.button.secondary,.icon-button{background:#fffdf8;border-color:#bcb9a5;color:#424d34}
.button.secondary:hover:not(:disabled){background:#e9eddf}
.host-shell .roster{margin:0;padding:24px 0 0;border-color:var(--line)}
.roster h2{font:26px/1.3 Georgia,serif;margin-bottom:20px}
.table-scroll{max-width:100%;border-block:1px solid var(--line)}
.host-shell table{font-size:16px;background:#fffdf8;min-width:720px}
.host-shell th{font-size:14px;background:#e9e4d4;color:#51583e;padding:16px}
.host-shell td{padding:18px 16px;border-color:#e0d9c7;overflow-wrap:anywhere}
.host-shell td:first-child{min-width:180px}.host-shell td:nth-child(2){min-width:120px}.host-shell td:nth-child(4),.host-shell td:nth-child(5){white-space:nowrap}
.host-shell tbody tr:hover{background:#f3efdf}
.host-shell>details{margin-top:30px;border-block:1px solid var(--line);padding:0 0 8px}
.host-shell>details summary{font-size:18px;font-weight:600;padding:20px 0;cursor:pointer;min-height:56px;color:#424d34}
.host-shell>details p{padding:8px 0}.host-shell>details a{display:inline-block;padding:8px 0;text-decoration:underline;text-underline-offset:4px;font-size:16px}
dialog{background:#fbf7ed;color:#303729;border-color:#ae8a48}
dialog::backdrop{background:#202619a6}
dialog .dialog-head{border-bottom:2px solid var(--gold);padding-bottom:20px}
dialog .dialog-head h2{font:26px/1.2 Georgia,serif}
dialog input,dialog textarea,dialog select,.login-view input{background:#fffdf8;border-color:#bcb9a5;color:#303729;min-height:48px}
dialog fieldset{border-color:#cbbb96;padding:20px}
dialog legend,dialog fieldset label{font-size:15px}
dialog .dialog-actions{background:#fbf7ed;border-top:1px solid var(--line)}
dialog .dialog-actions .button{font-size:15px}
@media(max-width:600px){
 body[data-mode=host] .topbar{min-height:74px;height:auto;padding:14px;gap:10px}
 body[data-mode=host] #app{min-height:calc(100dvh - 74px)}
 .login-view{margin:24px 16px;max-width:none;padding:0 22px 24px}
 .login-view:before{height:125px;margin:0 -22px 24px}
 .login-view h1{font-size:27px}
 .host-shell{padding:0 18px 32px;border:0;min-height:calc(100dvh - 74px)}
 .host-heading{margin:0 -18px 24px;padding:28px 22px;min-height:190px;gap:18px}
 .host-heading h1{font-size:27px;max-width:100%}
 .host-shell .control-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 .host-shell .control-row .button{width:100%;min-height:48px}
 .host-shell th{font-size:13px}.host-shell td{font-size:15px}
 .roster h2{font-size:24px}
 dialog{padding:18px}dialog fieldset{padding:14px}dialog .edit-options{grid-template-columns:1fr}
 dialog .dialog-actions{bottom:-18px;flex-wrap:wrap;gap:10px;padding:16px 0}
 dialog .dialog-actions .button{flex:1 1 100%;min-height:44px}
}
/* Question bank controls retain their dimensions on narrow screens. */
#editor .bank-toggle { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
#editor .bank-toggle input { width:22px; height:22px; min-height:22px; flex:0 0 22px; margin:0; accent-color:#536241; }
#editor [data-question] { min-width:0; }
#editor [data-question] summary { cursor:pointer; overflow-wrap:anywhere; padding:8px 0 16px; font-size:18px; }
#editor [data-question]:has(input[name="enabled"]:not(:checked)) { border-color:#b2b3a9; }
#editor .edit-options { min-width:0; }
#editor input, #editor textarea, #editor select { max-width:100%; min-width:0; }