/* Approved compact Battleship quiz; all styling stays inside the quiz. */
body.battleship-quiz #quiz{background:#12242e;border:1px solid #566771;border-top:4px solid #d5b67a;padding:24px;color:#e9eff0;box-shadow:0 12px 30px #13202820}
#quiz .helm-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
#quiz .section-kicker{color:#e8d4a2}
#quiz .bridge-scene{display:block;position:relative;overflow:hidden;border:2px solid #8d7952;border-radius:8px;isolation:isolate;background:#182933;width:100%;box-sizing:border-box;aspect-ratio:9/4;min-height:200px;margin-top:10px}
#quiz .bridge-scene>img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 30%}
body.battleship-quiz #quiz .bridge-scene h2{position:absolute;z-index:3;top:12px;left:14px;margin:0;padding:5px 9px;background:#10232ebd;border-radius:4px;font-size:clamp(17px,2vw,24px);line-height:1.2;color:#f3e6c7}
#quiz .bridge-scene canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#quiz .helm-console{position:absolute;bottom:0;left:0;right:0;z-index:2;margin:0;padding:10px 16px;background:linear-gradient(180deg,#10232ed9,#0b1723f5);border-top:1px solid #aa9463;box-shadow:0 -8px 24px #07121a70}
#quiz .console-label{display:flex;justify-content:space-between;gap:12px;color:#dfca9e;font-size:10px;font-weight:700;letter-spacing:1px;margin-bottom:6px}
body.battleship-quiz #quiz #quiz-setup{display:grid;grid-template-columns:minmax(120px,1fr) minmax(140px,1fr);gap:6px 12px;margin:0;align-items:end}
body.battleship-quiz #quiz #quiz-setup label{grid-column:1;font-size:12px;letter-spacing:1.2px;color:#d2ddd9;margin:0}
body.battleship-quiz #quiz #quiz-count{grid-column:1;grid-row:2;width:100%;min-width:0;margin:0;height:44px;padding:8px 12px;background:#f3eedf;color:#142631;border:1px solid #a8a891;border-radius:5px;font-size:16px}
body.battleship-quiz #quiz #quiz-setup button{grid-column:2;grid-row:2;width:100%;min-height:44px;margin:0;padding:9px 12px;border:1px solid #9c854e;border-radius:5px;font-size:16px;box-shadow:inset 0 1px #f9e4ac}
#quiz .sound-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
body.battleship-quiz #quiz .sound-controls button,body.battleship-quiz #quiz .quiz-reset{background:transparent;color:#ded8c7;border:1px solid #73818a;border-radius:5px;font-size:13px;padding:8px 11px;min-height:36px;cursor:pointer;font-weight:500;box-shadow:none}
body.battleship-quiz #quiz .sound-controls button{font-size:12px;line-height:1.2;padding:5px 9px;min-height:28px}
#quiz .sound-controls span{font-size:12px;color:#bdd1d7}
#quiz .quiz-reset:hover{background:#ffffff14}
#quiz #quiz-status:empty{display:none}
#quiz fieldset{background:#1d3542;border-color:#54707f;min-width:0}
#quiz legend{color:#f2e5c6}
#quiz label{color:#eef3f4}
#quiz #quiz-questions label{background:#112630;border-color:#526774}
#quiz #quiz-questions label:has(input:checked){background:#375967;border-color:#e5c476}
#quiz button[type=submit]{background:#e5c476;color:#182b35}
#quiz .quiz-bottom{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
#quiz .salute-message{position:absolute;top:14%;left:10%;right:10%;text-align:center;background:#10232edb;border:1px solid #cfb473;padding:16px 10px;color:#f5e7c8;pointer-events:none}
#quiz .salute-message small,#quiz .salute-message strong,#quiz .salute-message span{display:block}
#quiz .salute-message small{letter-spacing:2px;font-size:12px}
#quiz .salute-message strong{font-size:clamp(18px,3vw,32px);margin:8px 0}
#quiz .salute-message span{font-size:13px}
#quiz #stop-salute{position:absolute;z-index:4;right:12px;top:12px;font-size:12px;padding:7px 10px;background:#14252feb;color:white;border:1px solid #dcc592;border-radius:5px;cursor:pointer}
#quiz .quiz-review{color:#192e38;background:#f4f0e5}
#quiz .quiz-review p,#quiz .quiz-review h4{color:#192e38}
#quiz [hidden]{display:none!important}
@media(max-width:600px){body.battleship-quiz #quiz{padding:15px}#quiz .salute-message{left:5%;right:5%;top:25%;padding:9px}#quiz .salute-message strong{font-size:18px}}
@media(max-width:440px){#quiz .helm-console{padding:8px 10px}body.battleship-quiz #quiz #quiz-setup{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px 8px}body.battleship-quiz #quiz #quiz-setup button{font-size:14px}body.battleship-quiz #quiz .bridge-scene h2{top:8px;left:8px;font-size:17px}}