/* Question presentation: one responsive component, shared game rules stay in the HTML. */
#screen-question{max-width:1240px}
#screen-question .q-meta-bar{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:24px;margin:12px 0 24px}
.question-brand{font:700 30px Georgia,serif;letter-spacing:-1.5px;color:var(--text)}
#screen-question .challenge-pill{font-size:12px;white-space:nowrap}
#screen-question .round-pills{margin:0;gap:5px}
#screen-question .round-pill{height:5px;border-radius:2px}
#screen-question .replay-indicator{grid-row:2;grid-column:1/-1}
#screen-question .game-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 44px;padding:44px 36px 0;background:radial-gradient(ellipse at 19% 35%,#244a38 0,transparent 47%),#082b1d;border:1px solid #183d2c;border-radius:12px;box-shadow:0 20px 65px #15332217;overflow:hidden;color:#f5f2e7}
.question-media{min-width:0;align-self:center;margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;padding:4px 0 30px}
.item-stage{width:100%;height:440px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}
.photo-open{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:12px;border:0;background:none;border-radius:8px;cursor:zoom-in}
.photo-open:disabled{cursor:default}
.item-stage img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 20px #00180c66);transform:scale(var(--image-scale,1))}
.item-fallback{text-align:center;padding:28px;max-width:400px;color:#e6ddbf;font:400 clamp(25px,3vw,38px)/1.2 Georgia,serif}
.item-fallback small{display:block;margin-top:20px;color:#a6b8aa;font:11px/1.7 var(--font);letter-spacing:.08em}
.media-status{font:11px/1.5 var(--font);color:#bccabb;text-align:center;min-height:17px;max-width:48ch}
.media-credit{font:10px/1.6 var(--font);color:#b6c5b8;text-align:center;max-width:50ch}
.media-credit a{color:inherit;text-underline-offset:3px}
.photo-thumbnails{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:100%}
.photo-thumb{width:72px;height:72px;border:1px solid #b2c4b54d;background:#08291c;border-radius:8px;padding:6px;transition:border-color .15s,background .15s}
.photo-thumb[aria-pressed="true"]{border:2px solid #e3ba42;background:#d4af3710}
.photo-thumb img{width:100%;height:100%;object-fit:contain}
.photo-thumb:disabled{opacity:.35;cursor:default}
.view-details{min-height:42px;padding:9px 20px;border:1px solid #b6c4a84d;background:none;border-radius:30px;color:#e4c362;font:700 11px var(--font);letter-spacing:.05em}
.view-details:hover{border-color:#e4c362}
.question-copy{align-self:center;min-width:0;padding:16px 0 44px}
.q-round-tag{padding:0;margin:0 0 22px;background:none;border:0}
.q-round-tag span{font:700 12px var(--font);letter-spacing:.12em;text-transform:uppercase;color:#e9c35b}
.q-text{font:400 clamp(36px,3.9vw,56px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.025em;text-wrap:balance;margin:0 0 24px;color:#fffdf3}
.q-hint{font:14px/1.7 var(--font);color:#c0cfbf;margin:0 0 30px;padding:0;background:none;border:0}
#screen-question .game-card-inner{padding:0;margin:0;background:none;border:0;box-shadow:none}
.ledger-label{display:flex;justify-content:space-between;gap:10px;font:11px var(--font);color:#c3d0c0;letter-spacing:.06em;margin-bottom:10px}
.ledger-label span{font-size:10px;color:#aabbad}
.ledger-input-row{display:flex;align-items:center;gap:14px;border:1.5px solid #829c8599;border-radius:8px;padding:8px 20px;transition:border-color .2s}
.ledger-input-row:focus-within{border-color:#e2bb48;box-shadow:0 0 0 3px #e2bb4815}
.ledger-currency{font-size:42px;color:#e2bb48;flex-shrink:0}
.ledger-input-row input{width:100%;min-width:0;border:0;outline:0;background:none;box-shadow:none;color:#f7f0d7;font:700 clamp(36px,4.5vw,56px)/1.4 var(--font);letter-spacing:normal;word-spacing:-.2em;padding:0;cursor:text}
.ledger-input-row input::placeholder{color:#799981}
.ledger-input-row input:disabled{opacity:.6}
.guess-tools{margin-top:12px}
.guess-tools .mod-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.guess-tools .mod-btn{font-size:11px;min-height:40px}
.input-error-message{font:12px/1.5 var(--font);color:#ffc1ac;margin-top:8px}
.input-error-message:empty{display:none}
.q-actions{margin-top:14px}
#screen-question .btn-submit{width:100%;height:auto;min-height:72px;display:flex;justify-content:center;align-items:center;gap:28px;background:#e6bb3d;color:#0b1b10;border:0;border-radius:8px;box-shadow:none;font:700 17px var(--font);letter-spacing:.1em}
#screen-question .btn-submit:after{content:'→';font:32px Georgia,serif}
#screen-question .btn-submit:hover{background:#f0cb59;transform:none}
#screen-question .btn-submit:disabled{opacity:.65;cursor:default}
.question-footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;margin:0 -36px;padding:21px 28px;border-top:1px solid #afc3a829;color:#a8b9a7;font:10px/1.5 var(--font);letter-spacing:.03em}
.photo-dialog{width:min(1100px,94vw);max-height:94dvh;overflow:auto;padding:20px;background:#09291d;color:#f5f2e7;border:1px solid #668371;border-radius:12px}
.photo-dialog::backdrop{background:#03150ee8;backdrop-filter:blur(5px)}
.photo-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:12px}
.photo-dialog h2{font:400 24px Georgia,serif}
.photo-dialog button{min-width:44px;min-height:44px;border:1px solid #859a7c88;border-radius:6px;background:none;color:#ecd28a;font:12px var(--font)}
.photo-dialog img{display:block;width:100%;height:65dvh;object-fit:contain;margin:auto}
.photo-dialog-nav{display:flex;align-items:center;justify-content:center;gap:24px;margin:12px 0}
.photo-dialog-caption{text-align:center;font:12px/1.6 var(--font);color:#c1cfbe}
@media(max-width:899px){
 #screen-question{max-width:640px}
 #screen-question .q-meta-bar{gap:12px;grid-template-columns:1fr auto auto;margin:8px 0 18px}
 #screen-question .round-pills{grid-column:1/-1;grid-row:2}
 #screen-question .replay-indicator{grid-row:3}
 .question-brand{font-size:25px}
 #screen-question .game-card{display:block;padding:24px 24px 0}
 .question-media{padding:0 0 28px;gap:12px}
 .item-stage{height:340px}
 .question-copy{padding:0 0 28px}
 .q-text{font-size:clamp(32px,6vw,44px)}
 .q-hint{margin-bottom:24px;font-size:13px}
 .question-footer{margin:0 -24px;padding:18px 24px;flex-wrap:wrap;gap:8px}
}
@media(max-width:480px){
 #screen-question .game-card{padding:20px 18px 0}
 #screen-question .challenge-pill{font-size:10px}
 .question-brand{font-size:23px}
 .item-stage{height:280px}
 .photo-open{padding:4px}
 .photo-thumb{width:60px;height:60px}
 .q-round-tag{margin-bottom:16px}
 .q-round-tag span{font-size:11px}
 .q-text{font-size:34px;margin-bottom:18px}
 .ledger-input-row{padding:10px 14px}
 .ledger-currency{font-size:32px}
 #screen-question .btn-submit{min-height:60px;font-size:15px}
 .question-footer{margin:0 -18px;padding:18px}
 .photo-dialog img{height:58dvh}
}

/* Reuse the summary palette, in the requested green / navy / burgundy order.
   Scoped to question cards so home, summary and page colors stay unchanged. */
#screen-question,#screen-qresult{--round-card-bg:var(--q1-color)}
[data-qcolor="2"] #screen-question,[data-qcolor="2"] #screen-qresult{--round-card-bg:var(--q3-color)}
[data-qcolor="3"] #screen-question,[data-qcolor="3"] #screen-qresult{--round-card-bg:var(--q2-color)}
#screen-question .game-card,#screen-qresult .game-card{background:var(--round-card-bg);border-color:var(--gc-border)}