.flight-layout{grid-template-columns:minmax(0,1fr) 310px;align-items:stretch;gap:18px}
.flight-layout>.topics{margin:0;padding:18px;display:flex;flex-direction:column;min-width:0;border-top:3px solid #b8a366}
.flight-layout>.topics h2{font-size:19px;line-height:1.25;margin:0 0 9px}
.flight-layout>.topics>p{font-size:12px;line-height:1.5;color:#64705a;margin:0 0 14px}
.flight-layout .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(46px,1fr);gap:7px;flex:1}
.flight-layout .topic{padding:9px 8px;min-height:46px;border-radius:6px}
.flight-layout .topic strong{font-size:12px;line-height:1.25;display:block}
.flight-layout .topic small{font-size:10px;margin-top:4px}
.handbook-strip{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:18px;padding:13px 16px;margin:20px 0;background:#efefe5;border-radius:9px}
.handbook-strip h2{font-size:16px;line-height:1.2;margin:0}
.handbook-strip #handbooks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.handbook-strip .handbook{position:relative;gap:8px;padding:10px 8px;border:1px solid #cbd2bf;background:#fffdf7;border-radius:6px;min-height:42px}
.handbook-strip .handbook strong{font-size:11px;line-height:1.2}
.handbook-strip .handbook .swatch{height:23px;width:4px}
.handbook-strip .handbook small{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.handbook-strip .handbook:hover{border-color:#718563;background:#f7f8ec}
@media(min-width:741px) and (max-width:1050px){.flight-layout{grid-template-columns:minmax(0,1fr) 260px}.flight-layout>.topics{padding:14px}.handbook-strip{grid-template-columns:125px minmax(0,1fr);gap:12px}.handbook-strip #handbooks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:740px){.flight-layout{grid-template-columns:1fr}.flight-layout>.topics{padding:16px}.flight-layout .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}.handbook-strip{display:block;padding:13px}.handbook-strip h2{font-size:14px;margin-bottom:10px}.handbook-strip #handbooks{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.handbook-strip .handbook{padding:8px;min-height:38px}}
/* Shorter cockpit: trim decorative surround and internal spacing, not text size. */
.flight-layout .cockpit{grid-template-rows:clamp(51px,5.82vw,84px) auto clamp(60px,6.6vw,96px)}
.flight-layout .screen{min-height:380px;padding:15px}
.flight-layout .question{margin:14px 0}
.flight-layout .game-actions{margin-top:14px}
.flight-layout>.topics{padding:14px;align-self:stretch}
.flight-layout>.topics>p{margin-bottom:10px}
.flight-layout .topic-grid{gap:5px;grid-auto-rows:minmax(44px,1fr)}
.flight-layout .topic{min-height:44px;padding:7px 8px}
@media(min-width:741px) and (max-width:1050px){.flight-layout .cockpit{grid-template-rows:51px auto 60px}}
@media(max-width:740px){.flight-layout .cockpit{grid-template-rows:39px auto 45px}.flight-layout .screen{min-height:360px;padding:13px}.flight-layout .topic-grid{grid-auto-rows:auto}.flight-layout .topic{min-height:44px}}

/* Mockup: an additional 15% shorter flight console and matching topic panel. */
.flight-layout .cockpit{grid-template-rows:clamp(43px,4.947vw,71px) auto clamp(51px,5.61vw,82px)}
.flight-layout .screen{min-height:323px;padding:12px 15px}
.flight-layout .question{margin:10px 0}
.flight-layout .game-actions{margin-top:10px}
.flight-layout>.topics{padding:12px 14px}
.flight-layout>.topics>p{margin-bottom:8px}
@media(min-width:741px) and (max-width:1050px){.flight-layout .cockpit{grid-template-rows:43px auto 51px}}
@media(max-width:740px){.flight-layout .cockpit{grid-template-rows:33px auto 38px}.flight-layout .screen{min-height:306px;padding:11px 13px}}

/* Clear windshield mockup: reserve the view above the instrument display,
   reclaiming space from the lower decorative console. */
.flight-layout .cockpit{grid-template-rows:clamp(100px,8.34vw,120px) auto 30px}
.flight-layout .canopy{background:url('/resources/cockpit-v2.png') center top/100% 850% no-repeat;margin:0;border:0;border-bottom:4px solid #344146;height:auto;border-radius:18px 18px 0 0}
.flight-layout .screen{margin-top:5px}
@media(min-width:741px) and (max-width:1050px){.flight-layout .cockpit{grid-template-rows:80px auto 14px}}
@media(max-width:740px){.flight-layout .cockpit{grid-template-rows:65px auto 6px}.flight-layout .canopy{background-size:100% 850%;border-radius:12px 12px 0 0}.flight-layout .screen{margin-top:3px}}

/* Let the answer display fit its content instead of reserving blank space. */
.flight-layout .screen{min-height:0;align-self:start;padding-bottom:12px}
.flight-layout .cockpit{align-self:start}
.flight-layout .game-actions{margin-bottom:0}
.flight-layout #game>:last-child{margin-bottom:0}
.flight-layout>.topics{min-height:0}

/* Halfway-height comparison: both cards share the same outer bounds. */
@media(min-width:741px){.flight-layout{align-items:start}.flight-layout>.topics{align-self:start}.flight-layout .topic-grid{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}.flight-layout .topic{min-height:40px;padding:5px 8px}.flight-layout .topic small{margin-top:2px}.flight-layout .cockpit{grid-template-rows:clamp(100px,8.34vw,120px) minmax(0,1fr) 30px}.flight-layout .screen{overflow:auto}}