/* A viewport-sized menu, including browser chrome and device safe areas. */
@media (max-width:700px), (max-width:1000px) and (max-height:550px) {
  #menu,#selection {
    height:100vh;height:100dvh;min-height:0;max-height:100dvh;
    padding:max(10px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    overflow:hidden;
  }
  #menu {display:grid;grid-template-rows:44px minmax(0,1fr) auto;gap:8px}
  #menu .masthead {padding:0;gap:12px;min-width:0}
  #menu .header-status,#menu .classified {display:none}
  #menu .wordmark {font-size:8px;letter-spacing:1.5px}
  #menu .mark {font-size:25px}
  #menu .hero {
    padding:0;margin:0;width:100%;max-width:none;min-height:0;
    display:flex;flex-direction:column;justify-content:space-evenly;gap:8px;
  }
  #menu .hero-brand,#menu .hero-copy,#menu .hero-launch {min-width:0}
  #menu .chapter {font-size:7px;letter-spacing:.7px;gap:7px;line-height:1.45}
  #menu h1 {font-size:clamp(74px,min(15.5dvh,31vw),132px);line-height:.85;margin:9px 0 7px}
  #menu .subtitle {font-size:clamp(10px,1.7dvh,13px);line-height:1.4;letter-spacing:.25em;margin:0}
  #menu .intro {font-size:clamp(16px,2.55dvh,20px);line-height:1.35;margin:0}
  #menu .story {font-size:11px;line-height:1.45;margin:7px 0 0;max-width:450px}
  #menu .menu-difficulty {max-width:none;width:100%;margin:0}
  #menu .menu-difficulty>.eyebrow {font-size:8px;line-height:1.4;margin-bottom:7px;letter-spacing:1.5px}
  #menu .difficulty-switch {gap:6px;width:100%}
  #menu .difficulty-switch button {min-width:0;min-height:52px;padding:7px 4px}
  #menu .difficulty-switch strong {font-size:11px;letter-spacing:.5px}
  #menu .difficulty-switch small {font-size:6.5px;margin-top:6px;letter-spacing:0}
  #menu .menu-difficulty p {font-size:9px;line-height:1.4;min-height:26px;margin:7px 0 0}
  #menu .hero-actions {display:grid;grid-template-columns:1.1fr 1fr;gap:8px;width:100%;margin-top:8px}
  #menu .hero-actions button {width:100%;min-width:0;min-height:46px;padding:8px 11px;gap:6px;font-size:9px;letter-spacing:.3px}
  #menu .hero-actions button span {font-size:20px}
  #menu .hero-notes {display:flex;justify-content:space-between;max-width:none;gap:7px;margin:0;font-size:6.5px;line-height:1.5;letter-spacing:0}
  #menu .menu-footer {position:static;display:flex;flex-direction:column;gap:3px;min-width:0;padding:0;background:none;font-size:6.5px;line-height:1.5;letter-spacing:.6px}

  #selection {display:grid;grid-template-rows:42px auto auto minmax(72px,1fr) auto auto;gap:8px}
  #selection .selection-header {gap:8px;min-width:0}
  #selection .selection-header>.eyebrow {font-size:6px;letter-spacing:.8px}
  #selection .selection-header .text-button {font-size:8px;padding:12px 0}
  #selection .select-heading {margin:0;min-width:0}
  #selection .select-heading>.eyebrow {font-size:7px;letter-spacing:1px}
  #selection .select-heading h2 {font-size:24px;line-height:1.08;margin:4px 0;letter-spacing:-.8px}
  #selection .select-heading p {display:block;font-size:9px;line-height:1.3;margin:0}
  #selection .select-heading p:after {display:none}
  #selection .difficulty-panel {margin:0;padding:9px 10px;gap:7px;flex-direction:column;align-items:stretch;width:100%}
  #selection .difficulty-panel .eyebrow {font-size:7px;line-height:1.3;letter-spacing:1px}
  #selection .difficulty-panel p {font-size:8px;line-height:1.3;margin:3px 0 0;min-height:11px}
  #selection .difficulty-switch {gap:5px;width:100%}
  #selection .difficulty-switch button {flex:1;min-width:0;min-height:44px;padding:5px}
  #selection .difficulty-switch strong {font-size:10px;letter-spacing:.6px}
  #selection .difficulty-switch small {font-size:7px;margin-top:4px}
  #selection .characters {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;max-width:none;min-height:0;height:100%;gap:5px;padding:5px 0 0;margin:0;overflow:visible}
  #selection .character-card {min-width:0;min-height:0;height:100%;max-height:280px;width:100%;align-self:center;scroll-snap-align:none}
  #selection .character-card.active {transform:translateY(-3px)}
  #selection .character-card img {object-position:50% 25%!important}
  #selection .character-card .number {top:7px;left:6px;font-size:7px}
  #selection .card-selected {top:5px;right:4px;width:15px;height:15px;font-size:8px}
  #selection .character-info {left:5px;right:2px;bottom:8px}
  #selection .character-info small {font-size:5.5px;letter-spacing:0;line-height:1.4}
  #selection .character-info strong {font-size:clamp(9px,2.65vw,15px);letter-spacing:-.2px;line-height:1.2;margin-top:4px}
  #selection .character-info em {display:none}
  #selection .selection-bottom {margin:0;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}
  #selection .selected-info>.eyebrow {font-size:6px;line-height:1.3}
  #selection .selected-info>strong {font-size:15px;line-height:1.1;margin:4px 0}
  #selection .selected-info>strong span {font-size:8px;margin-left:5px}
  #selection .selected-info>p {font-size:9px;line-height:1.3;margin:0}
  #selection .launch-controls {display:grid;grid-template-columns:minmax(100px,.9fr) minmax(0,1.35fr);gap:8px}
  #selection .mode-switch {width:100%;gap:2px;padding:3px;min-width:0}
  #selection .mode-switch button {flex:1;min-width:0;display:block;padding:4px 2px;font-size:7px;letter-spacing:0}
  #selection .mode-switch button span {font-size:7px;display:block;margin-top:5px}
  #selection .launch-controls>.primary {width:100%;min-height:46px;padding:8px 10px;gap:5px;font-size:8px;letter-spacing:.3px}
  #selection .launch-controls>.primary span {font-size:20px}
  #selection .select-footer {display:block;margin:0;text-align:center;font-size:6px;line-height:1.4;letter-spacing:0}
  #selection .select-footer>span:first-child {display:none}
}

/* Compact phones keep touch targets at least 44px high. */
@media (max-width:700px) and (max-height:620px) {
  #menu,#selection {padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));gap:6px}
  #menu .hero {gap:6px}
  #menu h1 {font-size:clamp(70px,14dvh,87px);margin:6px 0}
  #menu .intro {font-size:16px}
  #menu .story {font-size:10px;line-height:1.4;margin-top:5px}
  #menu .hero-notes {font-size:6px}
  #menu .menu-footer {font-size:6px}
  #selection .select-heading h2 {font-size:21px}
  #selection .difficulty-panel {padding:6px 8px;gap:5px}
  #selection .selection-bottom {padding-top:6px;gap:6px}
}

/* Landscape puts the actions beside the story, never below the viewport. */
@media (max-width:1000px) and (max-height:550px) and (orientation:landscape) {
  #menu,#selection {padding:8px max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));gap:6px}
  #menu {display:grid;grid-template-rows:42px minmax(0,1fr) auto;height:100dvh;min-height:0;overflow:hidden}
  #menu .hero {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto;column-gap:24px;row-gap:5px;align-content:center;padding:0;max-width:none}
  #menu .hero-brand {grid-column:1;grid-row:1;align-self:end}
  #menu .hero-copy {grid-column:1;grid-row:2}
  #menu .hero-launch {grid-column:2;grid-row:1/3;align-self:center}
  #menu .hero-notes {grid-column:1/-1;grid-row:3}
  #menu h1 {font-size:clamp(58px,19dvh,90px);margin:4px 0}
  #menu .chapter {font-size:6px;letter-spacing:.4px}
  #menu .subtitle {font-size:9px}
  #menu .intro {font-size:14px;line-height:1.25}
  #menu .story {font-size:9px;line-height:1.3;margin-top:4px}
  #menu .menu-footer {flex-direction:row;justify-content:space-between;font-size:6px}
  #selection {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:42px minmax(0,1fr) auto;column-gap:16px}
  #selection .selection-header {grid-column:1/-1;grid-row:1}
  #selection .select-heading {grid-column:1;grid-row:2;align-self:start}
  #selection .select-heading h2 {font-size:21px}
  #selection .select-heading p {font-size:8px}
  #selection .characters {grid-column:1;grid-row:2;align-self:end;height:calc(100% - 65px);min-height:60px}
  #selection .difficulty-panel {grid-column:2;grid-row:2;align-self:start;gap:4px;padding:6px}
  #selection .difficulty-panel .eyebrow {font-size:6px}
  #selection .difficulty-panel p {font-size:7px}
  #selection .selection-bottom {grid-column:2;grid-row:2;align-self:end;gap:5px;padding-top:5px}
  #selection .selected-info>.eyebrow {display:none}
  #selection .selected-info>strong {font-size:13px;margin:0 0 3px}
  #selection .selected-info>p {font-size:8px}
  #selection .select-footer {grid-column:1/-1;grid-row:3}
  #selection .character-info strong {font-size:clamp(9px,1.6vw,13px)}
}