/* v.0.0.5 — two independent single-screen menus.
   This CSS intentionally follows styles.css to supersede the old combined title layout. */
#titleScreen,#selectionScreen{position:absolute;inset:0;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
#titleScreen{background:radial-gradient(ellipse at 50% 15%,#caedff,#79baf1 70%,#335f91)}
#selectionScreen{background:radial-gradient(ellipse at 49% 8%,#315776 0%,#122e45 65%,#0b1f31 100%);color:#fff}
#titleScreen button,#selectionScreen button{touch-action:manipulation;position:relative;z-index:2;min-width:0}
#titleScreen .title-layout{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(3px,.6vh,9px);padding:clamp(4px,.65vw,12px);overflow:hidden}
#titleScreen .title-hero{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:clamp(8px,1.2vw,18px)}
#titleScreen .title-hero img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;max-width:100%;max-height:100%;filter:drop-shadow(0 6px 15px rgba(24,55,87,.16))}
#titleScreen .title-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px clamp(8px,1.4vw,22px);align-items:center;width:min(100%,1540px);margin:0 auto;padding:clamp(7px,1vh,13px) clamp(10px,1.6vw,23px);border-radius:clamp(12px,1.5vw,20px);border:1px solid rgba(255,255,255,.55);background:linear-gradient(105deg,rgba(9,34,57,.88),rgba(11,41,68,.92));box-shadow:0 8px 24px rgba(3,30,54,.23);color:#fff}
#titleScreen .title-tagline{display:flex;flex-direction:column;gap:3px;min-width:0}
#titleScreen .title-tagline strong{font-size:clamp(14px,1.7vw,25px);font-weight:900;line-height:1.25;color:#fff7dc}
#titleScreen .title-tagline span{font-size:clamp(10px,1vw,15px);line-height:1.3;color:#e1f4ff}
#titleScreen .title-menu-buttons{display:flex;gap:clamp(6px,1vw,12px);align-items:center;justify-content:flex-end}
#titleScreen .title-menu-buttons .button{font-weight:900;min-height:clamp(43px,5.4vh,60px);font-size:clamp(12px,1.2vw,17px);padding:8px clamp(12px,1.35vw,24px);white-space:nowrap}
#titleScreen .title-version{grid-column:1/-1;text-align:right;line-height:1;font-size:clamp(8px,.7vw,10px);letter-spacing:.05em;color:#bcdff1}

#selectionScreen .selection-layout{position:absolute;inset:0;min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(4px,.75vh,11px);padding:clamp(5px,1vh,12px) clamp(6px,1.2vw,16px);overflow:hidden}
#selectionScreen .selection-header{display:flex;align-items:center;gap:clamp(9px,1.2vw,17px);min-height:0;padding:3px clamp(8px,1vw,16px);border:1px solid rgba(255,255,255,.2);background:rgba(4,20,35,.64);border-radius:16px}
#selectionScreen .selection-logo{width:clamp(42px,6.2vh,74px);height:clamp(42px,6.2vh,74px);object-fit:contain;flex-shrink:0}
#selectionScreen .selection-heading{min-width:0;flex:1}
#selectionScreen .selection-heading small{font-size:clamp(9px,.85vw,12px);letter-spacing:.18em;color:#b2e5ff;font-weight:900}
#selectionScreen .selection-heading h2{font-size:clamp(17px,2.1vw,27px);line-height:1.2;margin:1px 0;color:#fff;font-weight:900}
#selectionScreen #backTitleBtn{min-height:38px;min-width:115px;padding:7px 13px;font-size:clamp(11px,.98vw,14px);white-space:nowrap}
#selectionScreen .vehicle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(5px,1.15vh,14px);min-height:0;align-content:stretch;overflow:hidden;padding:1px}
#selectionScreen .vehicle-card{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:2px;min-width:0;min-height:0;padding:clamp(4px,.75vh,9px);border-radius:clamp(9px,1.1vw,17px);background:linear-gradient(170deg,rgba(255,255,255,.16),rgba(166,220,238,.07));border:2px solid rgba(255,255,255,.24);box-shadow:0 4px 10px rgba(0,0,0,.12);color:#fff;transform:none;overflow:hidden;transition:border-color .13s,background .13s}
#selectionScreen .vehicle-card:hover{transform:none;background:rgba(255,255,255,.23)}
#selectionScreen .vehicle-card.selected{background:linear-gradient(160deg,rgba(255,188,208,.27),rgba(145,208,235,.15));border-color:#ffcf6f;transform:none;box-shadow:inset 0 0 0 1px #fff8d7,0 2px 16px rgba(255,208,104,.25)}
#selectionScreen .vehicle-card .thumb{flex:1;display:flex;min-height:0;width:100%;align-items:center;justify-content:center;border-radius:9px;background:transparent;overflow:hidden;aspect-ratio:auto}
#selectionScreen .vehicle-card .thumb img{width:100%;height:100%;max-width:100%;max-height:100%;display:block;object-fit:contain;pointer-events:none;padding:0}
#selectionScreen .vehicle-card .v-name{flex:0 0 auto;display:block;width:100%;font-size:clamp(11px,1.18vw,16px);text-align:center;line-height:1.15;margin:3px 0 0;color:#fff;font-weight:900}
#selectionScreen .vehicle-card .v-type{flex:0 0 auto;display:block;font-size:clamp(8px,.74vw,10px);line-height:1.1;text-align:center;color:#dcecf5;letter-spacing:.04em}
#selectionScreen .selection-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch;min-height:0}
#selectionScreen .vehicle-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,25%);gap:10px;align-items:center;margin:0;padding:clamp(6px,1vh,10px) clamp(8px,1.2vw,16px);border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(8,29,48,.78);min-width:0}
#selectionScreen .summary-copy{min-width:0}
#selectionScreen .summary-copy strong{display:block;color:#fff;font-size:clamp(12px,1.1vw,17px);line-height:1.2;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#selectionScreen .summary-copy small{display:block;color:#d5ebf7;font-size:clamp(9px,.9vw,13px);line-height:1.25;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-top:3px}
#selectionScreen .mini-bars{display:grid;gap:3px;min-width:0}
#selectionScreen .bar-row{display:flex;align-items:center;justify-content:space-between;gap:6px;color:#ecf8ff;font-size:clamp(9px,.76vw,12px)}
#selectionScreen .bar-track{flex:1;max-width:145px;height:6px;min-width:32px;background:rgba(255,255,255,.20)}
#selectionScreen .bar-value{height:100%;background:linear-gradient(90deg,#8ae8fc,#ffc0c9)}
#selectionScreen .selection-actions{display:flex;gap:9px;align-items:stretch}
#selectionScreen .selection-actions .button{min-height:clamp(44px,6vh,64px);font-size:clamp(12px,1vw,16px);padding:7px clamp(12px,1.5vw,22px);white-space:nowrap}
#selectionScreen .selection-footnote{color:#b9d8e7;font-size:clamp(8px,.75vw,11px);line-height:1.1;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

/* Vertical phones — illustration first on title; 3x3 aircraft gallery. */
@media (orientation:portrait) and (max-width:760px){
 #titleScreen .title-layout{grid-template-rows:auto minmax(0,1fr);gap:10px;padding:7px}
 #titleScreen .title-hero{width:100%;height:auto;aspect-ratio:1672 / 941;align-items:flex-start}
 #titleScreen .title-hero img{height:100%;width:100%;object-position:center top}
 #titleScreen .title-controls{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:clamp(9px,1.8vh,20px);align-content:start;margin:0 auto;padding:clamp(12px,2.2vh,22px) clamp(10px,3vw,20px);width:100%;background:linear-gradient(160deg,rgba(8,31,52,.86),rgba(7,31,55,.94))}
 #titleScreen .title-tagline{text-align:center;gap:10px;padding:5px 0}
 #titleScreen .title-tagline strong{font-size:clamp(16px,5.3vw,25px)}
 #titleScreen .title-tagline span{font-size:clamp(11px,3.0vw,15px);line-height:1.5}
 #titleScreen .title-menu-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);gap:8px}
 #titleScreen .title-menu-buttons .button{min-height:clamp(46px,7vh,64px);font-size:clamp(12px,3.5vw,17px);padding:5px}
 #titleScreen .title-version{text-align:center;font-size:9px}
 #selectionScreen .selection-layout{gap:6px;padding:6px}
 #selectionScreen .selection-header{padding:2px 7px;gap:6px;border-radius:11px}
 #selectionScreen .selection-logo{width:43px;height:43px}
 #selectionScreen .selection-heading small{font-size:8px}
 #selectionScreen .selection-heading h2{font-size:clamp(14px,4vw,19px)}
 #selectionScreen #backTitleBtn{min-width:0;min-height:39px;padding:6px 7px;font-size:10px}
 #selectionScreen .vehicle-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}
 #selectionScreen .vehicle-card{padding:3px;border-radius:10px}
 #selectionScreen .vehicle-card .v-name{font-size:clamp(9px,2.7vw,12px);margin:1px 0 0}
 #selectionScreen .vehicle-card .v-type{display:none}
 #selectionScreen .selection-footer{grid-template-columns:1fr;gap:6px}
 #selectionScreen .vehicle-summary{grid-template-columns:minmax(0,1fr) minmax(86px,28%);padding:7px 9px;gap:6px}
 #selectionScreen .summary-copy strong{font-size:13px}
 #selectionScreen .summary-copy small{font-size:10px}
 #selectionScreen .selection-actions{display:grid;grid-template-columns:1fr .52fr;gap:7px}
 #selectionScreen .selection-actions .button{min-height:45px;font-size:13px;padding:5px}
 #selectionScreen .selection-footnote{font-size:8px}
}

/* Landscape phones — 7 cards in one row; all tap targets unobstructed. */
@media (orientation:landscape) and (max-height:560px) and (max-width:1200px){
 #titleScreen .title-layout{grid-template-rows:minmax(0,1fr) auto;gap:3px;padding:4px}
 #titleScreen .title-controls{grid-template-columns:1fr auto;gap:1px 7px;padding:5px 8px;border-radius:10px}
 #titleScreen .title-tagline strong{font-size:clamp(11px,2.6vh,15px)}
 #titleScreen .title-tagline span{font-size:clamp(9px,2.1vh,11px)}
 #titleScreen .title-menu-buttons{gap:6px}
 #titleScreen .title-menu-buttons .button{min-height:40px;font-size:11px;padding:5px 9px}
 #titleScreen .title-version{font-size:8px}
 #selectionScreen .selection-layout{gap:3px;padding:4px 5px}
 #selectionScreen .selection-header{min-height:0;padding:1px 7px;border-radius:9px}
 #selectionScreen .selection-logo{width:32px;height:32px}
 #selectionScreen .selection-heading small{font-size:8px}
 #selectionScreen .selection-heading h2{font-size:clamp(13px,4vh,18px);margin:0}
 #selectionScreen #backTitleBtn{min-height:32px;min-width:0;font-size:10px;padding:4px 9px}
 #selectionScreen .vehicle-grid{grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:4px}
 #selectionScreen .vehicle-card{padding:3px;border-width:1px;border-radius:9px;gap:1px}
 #selectionScreen .vehicle-card .v-name{font-size:clamp(8px,1.45vw,11px);margin:1px 0 0}
 #selectionScreen .vehicle-card .v-type{display:none}
 #selectionScreen .selection-footer{grid-template-columns:minmax(0,1fr) auto;gap:5px}
 #selectionScreen .vehicle-summary{grid-template-columns:minmax(0,1fr) minmax(80px,25%);gap:5px;padding:3px 7px;border-radius:8px}
 #selectionScreen .summary-copy strong{font-size:clamp(11px,3vh,14px)}
 #selectionScreen .summary-copy small{font-size:clamp(8px,2.4vh,11px);margin-top:0}
 #selectionScreen .mini-bars{gap:1px}
 #selectionScreen .bar-row{font-size:8px;line-height:1.1}
 #selectionScreen .bar-track{height:4px}
 #selectionScreen .selection-actions{gap:4px}
 #selectionScreen .selection-actions .button{min-height:39px;font-size:11px;padding:3px 8px}
 #selectionScreen .selection-footnote{font-size:8px}
}

/* Short desktop windows: compress text before controls; never scroll. */
@media (min-width:1201px) and (max-height:700px){
 #selectionScreen .selection-header{padding-block:0}
 #selectionScreen .selection-logo{width:45px;height:45px}
 #selectionScreen .vehicle-grid{gap:5px}
 #selectionScreen .selection-actions .button{min-height:40px}
}
@media (max-height:370px) and (orientation:landscape){
 #titleScreen .title-tagline span{display:none}
 #selectionScreen .selection-footnote{display:none}
 #selectionScreen .selection-layout{grid-template-rows:auto minmax(0,1fr) auto}
 #selectionScreen .selection-logo{width:28px;height:28px}
 #selectionScreen .selection-actions .button{min-height:34px}
}

/* Balance the incomplete final portrait row without moving the seven-card layout. */
@media (orientation:portrait) and (max-width:760px){#selectionScreen .vehicle-card:nth-child(7){grid-column:2}}