/* A phone-sized play surface. Shared aircraft choices are styled in picker.css.
   Minimum sizes deliberately allow overflow for zoom / unusually large text. */
.mobile-only{display:none}
html[data-layout=mobile] .mobile-only{display:flex}
/* On a tablet or desktop screen the phone layout is a phone-width column. */
html[data-layout=mobile] .app-shell{height:100dvh;min-height:480px;max-width:480px;padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column}
html[data-layout=mobile] .topbar{display:flex;flex:0 0 44px;gap:8px;padding:0;min-height:44px;border:0}
html[data-layout=mobile] .topbar .wordmark{font-size:22px;letter-spacing:-1px;min-height:44px;align-items:center}
html[data-layout=mobile] .brand-mark,html[data-layout=mobile] .main-nav,html[data-layout=mobile] .appearance-label,html[data-layout=mobile] .appearance-menu summary>span:last-child{display:none}
html[data-layout=mobile] .mobile-mode{margin-left:auto;font-size:12px;gap:4px;white-space:nowrap;padding:0 4px}
html[data-layout=mobile] .header-tools{gap:0;flex:none}
html[data-layout=mobile] .sound-toggle,html[data-layout=mobile] .appearance-menu summary{width:44px;height:44px;min-width:44px;padding:0;border:0;background:transparent}
html[data-layout=mobile] .appearance-options select{font-size:16px}
html[data-layout=mobile] .app-shell>main,html[data-layout=mobile] .board-scroll,html[data-layout=mobile] .game-board{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;overflow:visible}
html[data-layout=mobile] .app-footer{display:none}
html[data-theme][data-layout=mobile] .session-strip{flex:none;min-height:44px;padding:5px 8px;grid-template-columns:1fr auto auto;gap:0 16px;align-items:center}
html[data-layout=mobile] .session-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
html[data-layout=mobile] .round-dots{grid-area:1/1;justify-content:flex-start;gap:8px;padding:4px 0 8px}
html[data-layout=mobile] .round-dots .score-mark{width:18px;height:18px}
html[data-layout=mobile] .round-dots .score-mark.current{outline-offset:3px}
html[data-layout=mobile] .round-dots .points-3:after{left:5px;bottom:-8px}
html[data-layout=mobile] .round-dots .points-0:before{width:10px;left:2px;top:6px}
html[data-layout=mobile] .session-clock{grid-area:1/2}
html[data-layout=mobile] #session-clock{font-size:14px}
html[data-layout=mobile] .session-score{grid-area:1/3}
html[data-layout=mobile] .session-score strong{font-size:18px}
html[data-layout=mobile] .personal-best{display:none}
html[data-layout=mobile] .streak-status{grid-row:2;grid-column:1/-1;font-size:10px;line-height:14px;margin:0;text-align:right}
html[data-theme][data-layout=mobile] .workspace{flex:1;min-height:0;display:flex;flex-direction:column;overflow:visible;border-radius:8px}
html[data-layout=mobile] .workspace .dossier{flex:none;padding:5px 12px 7px;border:0;border-radius:8px 8px 0 0}
html[data-layout=mobile] .workspace .airline-block{min-height:52px;margin:0 0 3px;padding-right:62px;gap:10px}
/* Twice the old size on phones, where the map needs the height; short phones keep a smaller tile. */
html[data-layout=mobile] .workspace .airline-avatar{width:52px;height:52px;font-size:15px}
@media(max-height:670px){html[data-layout=mobile] .workspace .airline-avatar{width:36px;height:36px;font-size:12px}html[data-layout=mobile] .workspace .airline-block{min-height:36px}}
html[data-layout=mobile] .workspace .airline-name{font-size:15px;line-height:1.2;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-layout=mobile] .workspace .airport-code{font-size:29px;line-height:1.05;letter-spacing:-.6px}
html[data-layout=mobile] .workspace .airport-city{display:none}
html[data-layout=mobile] .workspace .route-center{flex-direction:row;gap:8px}
html[data-layout=mobile] .workspace .route-arrow .icon{width:16px;height:16px}
html[data-layout=mobile] .workspace .route-distance{font-size:10px}
html[data-layout=mobile] .workspace .flight-details summary{top:0;right:8px;min-width:60px;font-size:11px}
html[data-layout=mobile] .workspace .flight-facts{margin:5px 0 0;padding:5px 0 0;gap:10px;justify-content:space-between}
html[data-layout=mobile] .workspace .fact{display:flex;align-items:baseline;justify-content:center;gap:4px;flex:auto}
html[data-layout=mobile] .workspace .fact-label{font-size:9px}
html[data-layout=mobile] .workspace .fact-value{margin:0;font-size:11px}
html[data-layout=mobile] .workspace .fact-value small{font-size:9px;margin-left:2px}
html[data-layout=mobile] .workspace .fact:first-child{justify-content:flex-start}
html[data-layout=mobile] .workspace .fact:last-child{justify-content:flex-end}
html[data-layout=mobile] .workspace .map-panel{flex:1;min-height:82px;height:auto;border-left:0;border-right:0;overflow:hidden}
html[data-layout=mobile] .workspace .map-canvas-wrap{inset:0;border:0}
html[data-layout=mobile] .workspace .map-controls{display:none}
html[data-layout=mobile] .workspace .map-topline{top:7px;left:8px}
html[data-layout=mobile] .workspace .map-snapshot{font-size:9px}
html[data-layout=mobile] .workspace .map-attribution{left:8px;bottom:4px;max-width:calc(100% - 16px);font-size:8px}
html[data-layout=mobile] .map-expand{position:absolute;right:4px;top:3px;background:var(--panel);border-color:var(--line);align-items:center;justify-content:center;opacity:.85}
html[data-layout=mobile] .workspace .guess-panel{flex:none;padding:6px 10px 0;border-radius:0 0 8px 8px;container-type:normal}
html[data-layout=mobile] .workspace .guess-top,html[data-layout=mobile] .workspace .search-wrap,html[data-layout=mobile] #hints{display:none}
html[data-layout=mobile] .mobile-makers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-bottom:4px}
.mobile-makers button{min-height:44px;background:transparent;color:var(--muted);border:0;border-bottom:2px solid transparent;font-size:13px}
.mobile-makers button[aria-pressed=true]{color:var(--text);border-bottom-color:var(--lime);font-weight:600}
html[data-layout=mobile] .mobile-family-heading{height:44px;align-items:center;justify-content:space-between;margin-bottom:4px;gap:8px;font-size:12px;color:var(--muted)}
.mobile-family-heading button{min-width:88px;font-size:12px}
html[data-layout=mobile] .workspace .aircraft-choice-stage{min-height:92px;margin:0}
html[data-layout=mobile] .workspace .aircraft-board{display:block}
html[data-layout=mobile] .workspace .family-group h3{display:none}
html[data-layout=mobile] .workspace .family-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
html[data-layout=mobile] .workspace .family-choice,html[data-layout=mobile] .workspace .variant-choice{height:auto;min-height:44px;padding:7px 3px;font-size:14px;line-height:1.3}
html[data-layout=mobile] .workspace .variant-tray{min-height:92px;margin:0;padding:0;border:0}
html[data-layout=mobile] .workspace .variant-title{display:none}
html[data-layout=mobile] .workspace .variant-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
html[data-layout=mobile] .workspace .answer-action{margin-top:6px;padding-top:6px;gap:8px}
html[data-layout=mobile] .workspace .selected-aircraft{font-size:11px}
html[data-layout=mobile] .workspace .selected-aircraft strong{font-size:13px}
html[data-layout=mobile] .workspace .selected-aircraft small{display:none}
html[data-layout=mobile] .workspace .answer-action #submit-guess{min-height:44px;min-width:124px;padding:8px 10px;font-size:12px;border-radius:5px}
html[data-layout=mobile] .workspace .guess-bottom{margin:0;min-height:44px;gap:4px}
html[data-layout=mobile] .workspace .guess-bottom button{min-width:64px;min-height:44px;font-size:12px}
html[data-layout=mobile] .workspace .hint-button{gap:4px}
html[data-layout=mobile] .workspace #result-content{padding:8px 2px 0;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center}
html[data-layout=mobile] .workspace .result-badge{font-size:11px;margin:0 0 6px;grid-column:1}
html[data-layout=mobile] .workspace .result-aircraft{font-size:22px!important;margin:0 0 6px!important;grid-column:1}
html[data-layout=mobile] .workspace .result-subtitle{grid-column:1/-1;font-size:11px;margin:0 0 6px}
html[data-layout=mobile] .workspace .result-points{grid-column:2;grid-row:1/3;margin:0;padding:0;border:0;display:block}
html[data-layout=mobile] .workspace .result-points strong{font-size:26px}
html[data-layout=mobile] .workspace .result-points p{font-size:9px}
html[data-layout=mobile] .workspace #result-content>.primary-button{grid-column:1/-1;min-height:44px;padding:9px 12px;font-size:13px}
html[data-layout=mobile] .workspace .round-time{grid-column:1;margin:0;font-size:11px;text-align:left}
html[data-layout=mobile] .workspace .result-details{grid-column:2;font-size:11px;margin:0;min-height:44px}
html[data-layout=mobile] .workspace .end-run{grid-column:1;grid-row:5;margin:0;min-height:44px;font-size:12px;padding:8px}
html[data-layout=mobile] .workspace #result-content:has(.end-run) .round-time{grid-column:1/-1;padding:4px 0}
html[data-layout=mobile] .workspace #result-content:has(.end-run) .result-details{grid-row:5}

/* Dialogs keep optional information out of the play surface. */
html[data-layout=mobile] .modal{max-height:calc(var(--visible-height,100dvh) - 16px);padding:12px 16px 16px;max-width:460px}
html[data-layout=mobile] .modal h2{font-size:22px;padding-right:40px;min-height:32px;margin:0 0 14px}
html[data-layout=mobile] .modal-top{position:absolute;right:8px;top:4px;margin:0}
html[data-layout=mobile] .modal .primary-button,html[data-layout=mobile] .modal .secondary-button{min-height:44px}
html[data-layout=mobile] .mobile-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-menu button{min-height:52px;font-size:13px}
.mobile-menu button[aria-current=true]{border-color:var(--lime)}
.mobile-hints .hint-item{background:var(--panel-2);margin-bottom:8px}
.mobile-hints .hint-item p{color:var(--text);margin:0}
.mobile-hint-actions{display:flex;align-items:center;gap:12px;margin-top:12px;color:var(--muted);font-size:12px}
.mobile-hint-actions .primary-button{width:auto;margin:0!important;flex:1}
html[data-layout=mobile] .modal.mobile-search-dialog{position:fixed;inset:var(--visible-top,0px) 0 auto;margin:8px auto;padding:8px 12px;width:calc(100% - 16px)}
html[data-layout=mobile] .mobile-search-dialog h2{font-size:18px;margin:0;height:44px;display:flex;align-items:center}
.mobile-search-input{width:100%;height:44px;font:16px var(--sans);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:0 10px}
.mobile-search-results{list-style:none;padding:0;margin:4px 0;display:grid;gap:4px}
.mobile-search-results button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--text);font-size:13px;text-align:left}
.mobile-search-results button[aria-selected=true]{border-color:var(--lime);background:var(--panel-2)}
.mobile-search-results button small{font:10px var(--mono);color:var(--muted);margin-left:8px}
.mobile-search-results .no-options{padding:8px;min-height:44px}
.mobile-search-paging{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}
.mobile-search-paging button{min-height:44px;min-width:74px;font-size:12px;padding:8px}
.map-dialog[open]{position:fixed;inset:0;display:flex;flex-direction:column;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-radius:0}
html[data-layout=mobile] .map-dialog[open]{max-width:none;max-height:none;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.map-dialog>[data-action=close-map]{align-self:flex-end;flex:none;margin-bottom:4px}
.map-dialog .map-panel{flex:1;height:auto;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.map-dialog .map-expand{display:none!important}
.map-dialog .map-canvas-wrap{inset:0 0 48px}
.map-dialog .map-controls{display:flex;flex-direction:row;bottom:2px;top:auto;right:4px}
.map-dialog .map-attribution{bottom:14px;left:8px;font-size:8px}
.map-dialog .map-topline{top:8px;left:8px}
html[data-layout=mobile] .connection-error{position:fixed;z-index:25;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));padding:12px;gap:8px}

/* Results are a full screen as well; the lobby has its own stylesheet. The exported PNG is unchanged. */
html[data-theme][data-layout=mobile] #debrief{width:100%;max-width:430px;margin:auto;display:flex;flex-direction:column;gap:8px}
html[data-layout=mobile] #debrief>*{flex-shrink:0}

html[data-layout=mobile] .card-actions{display:grid;grid-template-columns:1fr 44px;gap:8px;margin:0}
html[data-layout=mobile] .card-actions>div,html[data-layout=mobile] .after-card>[data-action=logbook]{display:none}
html[data-layout=mobile] .card-actions .mobile-only{align-items:center;justify-content:center}
html[data-layout=mobile] .after-card{justify-content:center;gap:0}
html[data-layout=mobile] .daily-return{margin:0;text-align:center;font-size:10px}
html[data-layout=mobile] .export-preview{max-height:calc(var(--visible-height,100dvh) - 250px);width:100%;object-fit:contain;border:0}
@media(max-height:670px){
 
 
 
 
 
 
 
 html[data-layout=mobile] .workspace .fact-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media(max-height:550px) and (orientation:portrait){
 html[data-theme][data-layout=mobile] .session-strip{min-height:36px;padding-top:1px;padding-bottom:1px}
 html[data-layout=mobile] .workspace .dossier{padding-top:4px;padding-bottom:6px}
 html[data-layout=mobile] .workspace .airline-block{margin-bottom:0}
 html[data-layout=mobile] .workspace .flight-facts{margin-top:3px;padding-top:3px}
 html[data-layout=mobile] .workspace .map-panel{min-height:64px}
 html[data-layout=mobile] .workspace .guess-panel{padding-top:0}
 html[data-layout=mobile] .mobile-makers,html[data-layout=mobile] .mobile-family-heading{margin-bottom:0}
 html[data-layout=mobile] .workspace .aircraft-choice-stage,html[data-layout=mobile] .workspace .variant-tray{min-height:88px}
 html[data-layout=mobile] .workspace .family-grid,html[data-layout=mobile] .workspace .variant-options{row-gap:0}
 html[data-layout=mobile] .workspace .answer-action{padding-top:0;margin-top:0}
 
 
 
 
 
 
 
 
}
@media(orientation:landscape) and (max-height:500px){
 html[data-layout=mobile] .app-shell{max-width:none;min-height:320px}
 html[data-theme][data-layout=mobile] .session-strip{min-height:32px;padding:0 10px}
 html[data-layout=mobile] .streak-status{grid-column:1;grid-row:1;justify-self:end;padding-right:150px;font-size:9px}
 html[data-theme][data-layout=mobile] .workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(276px,1fr);grid-template-rows:auto minmax(82px,1fr)}
 html[data-layout=mobile] .workspace .dossier{grid-column:1;grid-row:1}
 html[data-layout=mobile] .workspace .map-panel{grid-column:1;grid-row:2}
 html[data-layout=mobile] .workspace .guess-panel{grid-column:2;grid-row:1/3;padding:0 8px;border-left:1px solid var(--line);border-radius:0 8px 8px 0}
 html[data-layout=mobile] .mobile-makers,html[data-layout=mobile] .mobile-family-heading{margin-bottom:0}
 html[data-layout=mobile] .workspace .answer-action{margin:0;padding:0}
 html[data-layout=mobile] .workspace .aircraft-choice-stage,html[data-layout=mobile] .workspace .variant-tray{min-height:88px}
 html[data-layout=mobile] .workspace .family-grid,html[data-layout=mobile] .workspace .variant-options{gap:0 4px}
 html[data-theme][data-layout=mobile] #debrief{display:grid;grid-template-columns:1fr 200px;max-width:750px;gap:8px 16px;align-items:center}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 html[data-layout=mobile] .card-actions,html[data-layout=mobile] .after-card,html[data-layout=mobile] .daily-return{grid-column:2}
}

/* Phones, portrait: the map takes every spare pixel. The flight card dissolves into it: the airline logo
   floats over the map's top-left corner and opens the flight details, altitude and ground speed become
   callouts beside the aircraft (drawn by the map), and the airports, flight time and progress run along the
   bottom of the map as a strip. Short landscape keeps its own two-column arrangement. */
@media not all and (orientation:landscape) and (max-height:500px){
  html[data-theme][data-layout=mobile] .workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto}
  html[data-layout=mobile] .workspace :is(.dossier,.flight-info){display:contents}
  html[data-layout=mobile] .workspace .map-panel{grid-area:1/1;min-height:82px;border-radius:8px 8px 0 0}
  html[data-layout=mobile] .workspace .airline-block{grid-area:1/1;z-index:4;align-self:start;justify-self:start;min-height:0;margin:10px 0 0 10px;padding:0}
  html[data-layout=mobile] .workspace :is(.airline-block>div,.flight-facts){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html[data-layout=mobile] .workspace .airline-avatar{width:52px;height:52px;box-shadow:0 3px 12px rgba(28,52,73,.14);cursor:pointer}
  html[data-layout=mobile] .workspace .flight-details{display:none}
  html[data-layout=mobile] .workspace .route-block{grid-area:2/1;margin:0;padding:7px 12px 8px;border-top:1px solid var(--line);background:var(--panel)}
  html[data-layout=mobile] .workspace .guess-panel{grid-area:3/1}
  html[data-layout=mobile] .workspace .map-topline{top:auto;bottom:22px;left:8px}

  /* The five score circles lead the strip at three times their old size; the clock and score stack beside
     them, and the streak line runs underneath. */
  html[data-theme][data-layout=mobile] .session-strip{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:0 12px;padding:4px 8px 2px}
  html[data-layout=mobile] .round-dots{grid-area:1/1/3/2;align-self:center;gap:6px;padding:2px 0 8px;--mark:min(54px,calc((100vw - 102px)/5))}
  html[data-layout=mobile] .round-dots .score-mark{width:var(--mark);height:var(--mark);border-width:3px}
  html[data-layout=mobile] .round-dots .score-mark.current{outline-width:1.5px;outline-offset:4px}
  html[data-layout=mobile] .round-dots .points-1{border-width:4px}
  html[data-layout=mobile] .round-dots .points-0:before{width:64%;height:2px;left:18%;top:calc(50% - 1px)}
  html[data-layout=mobile] .round-dots .points-3:after{width:7px;height:7px;left:calc(50% - 3.5px);bottom:-12px}
  html[data-layout=mobile] .session-clock{grid-area:1/2;align-self:end;justify-self:end}
  html[data-layout=mobile] .session-score{grid-area:2/2;align-self:start;justify-self:end}
  html[data-layout=mobile] .streak-status{grid-area:3/1/4/3}
}

/* The game menu: a candybox of paper tiles, each with a muted icon chip. Play tiles carry your record; the
   mode you are in is ringed in navy. */
.candybox{display:grid;gap:16px}
.modal .candy-group h3{margin:0 0 8px;font:650 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.candy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.candy-learn .candy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.candy{--ink:#4f5f6b;position:relative;display:flex;align-items:center;gap:11px;min-width:0;min-height:66px;padding:12px;border:0;border-radius:18px;background:var(--bg);color:var(--text);text-align:left;box-shadow:inset 0 -2px 0 #1c34490d;transition:transform .16s cubic-bezier(.3,1.6,.5,1),box-shadow .16s}
.candy:hover{box-shadow:inset 0 -2px 0 #1c34490d,0 6px 16px -10px #1c344966}
.candy:active:not(:disabled){transform:scale(.96)}
.candy:disabled{opacity:.55}
.candy-chip{display:grid;flex:0 0 auto;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:0 4px 10px -4px var(--ink)}
.candy-chip .icon{width:20px;height:20px;stroke-width:2}
.candy-text{display:block;min-width:0}
.candy strong{display:block;font:650 15px/1.2 var(--sans);letter-spacing:-.2px}
.candy small{display:block;margin-top:3px;overflow:hidden;font:500 11.5px/1.3 var(--sans);white-space:nowrap;text-overflow:ellipsis;color:var(--muted)}
.candy[aria-current=true]{box-shadow:inset 0 0 0 2px var(--lime)}
.candy-badge{position:absolute;top:9px;right:9px;padding:3px 7px;border-radius:99px;background:var(--lime);color:#fff;font:650 8.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.candy-play .candy:first-child{grid-column:1/-1;min-height:86px;padding:16px}
.candy-play .candy:first-child .candy-chip{width:48px;height:48px;border-radius:15px}
.candy-play .candy:first-child .candy-chip .icon{width:24px;height:24px}
.candy-play .candy:first-child strong{font-size:18px}
.candy-play .candy:not(:first-child),.candy-learn .candy{flex-direction:column;align-items:flex-start;gap:10px}
.candy-learn .candy{min-height:92px}
.candy-learn .candy strong{font-size:13.5px}
.candy-navy{--ink:#244c66}
.candy-lilac{--ink:#5c5a74}
.candy-mint{--ink:#4e6a62}
.candy-butter{--ink:#7f6c4f}
.candy-sky{--ink:#4b6677}
.candy-peach{--ink:#7d5f58}
.candy-gold{--ink:#8a7152}
.candy-slate{--ink:#5b6670}

/* The menu button: a little box of candy squares and the current mode, never a dropdown arrow or a hamburger. */
.candy-trigger{display:inline-flex;align-items:center;gap:9px;min-height:40px;margin-left:auto;padding:0 14px 0 9px;border:0;border-radius:14px;background:var(--panel);color:var(--text);font:650 13px var(--sans);box-shadow:inset 0 0 0 1px var(--line),0 4px 12px -8px #1c344966;white-space:nowrap}
.candy-trigger:active{transform:scale(.96)}
.candy-squares{display:grid;grid-template-columns:repeat(2,9px);gap:2.5px}
.candy-squares i{width:9px;height:9px;border-radius:3px;background:#244c66}
.candy-squares i:nth-child(2){background:#5c5a74}.candy-squares i:nth-child(3){background:#7f6c4f}.candy-squares i:nth-child(4){background:#4e6a62}
@media (prefers-reduced-motion:no-preference){.candy-trigger:hover .candy-squares i{transition:transform .2s cubic-bezier(.3,1.6,.5,1)}.candy-trigger:hover .candy-squares i:nth-child(odd){transform:translateY(-1px)}}
html[data-layout=mobile] .topbar .candy-trigger{flex:none}
/* Play: both modes are wide tiles. More: three small tiles under Membership. */
.candy-play .candy{grid-column:1/-1;flex-direction:row;align-items:center}
.candy-play .candy:not(:first-child){min-height:66px;gap:11px;flex-direction:row;align-items:center}
.candy-more .candy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.candy-more .candy:not(.candy-navy){flex-direction:column;align-items:flex-start;gap:10px;min-height:92px}
.candy-more .candy:not(.candy-navy) strong{font-size:13.5px}
.candy[data-action=toggle-sound][aria-pressed=false] .candy-chip{background:#9aa5ad}

/* Once answered, the flight number sits beside the airline logo, and on the result card with a link to follow it. */
.flight-chip{display:grid;align-content:center;min-height:52px;padding:0 13px;border-radius:12px;background:var(--panel);color:var(--text);box-shadow:0 3px 12px rgba(28,52,73,.14)}
.flight-chip small{font:650 9px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.flight-chip strong{font:650 18px/1.15 var(--sans);letter-spacing:-.2px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.flight-chip{animation:flight-chip-in .42s cubic-bezier(.3,1.5,.5,1) both}}
@keyframes flight-chip-in{from{opacity:0;transform:translateX(-8px) scale(.92)}to{opacity:1;transform:none}}
@media(max-height:670px){.flight-chip{min-height:36px;padding:0 10px}.flight-chip strong{font-size:15px}}
.result-flight{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 8px;font-size:12.5px;color:var(--muted)}
html[data-layout=mobile] .workspace .result-flight{grid-column:1/-1}
.result-flight>span{font:650 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.result-flight strong{font:650 15px var(--sans);color:var(--text);font-variant-numeric:tabular-nums}
.result-flight em{font-style:normal}
.result-flight a{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:var(--lime);font-weight:600;text-decoration:none}
.result-flight a .icon{width:12px;height:12px}

/* DM Sans, served from this site (SIL Open Font License, public/fonts/DM-Sans-OFL.txt), for small labels such as
   the city under each airport code. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html[data-layout=mobile] .workspace .airport-city{display:block;max-width:100%;margin-top:1px;overflow:hidden;font:500 10px/1.25 'DM Sans',var(--sans);letter-spacing:.01em;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}

/* Endless's grid. Past five flights the strip becomes rows of ten marks that shrink to fit the same space, up to
   ten by five; after fifty it loops. Marks stay legible: a ringed bullseye is exact, filled is family, a dotted
   ring is the maker, and a slashed ring is a miss. */
html[data-layout=mobile] .round-dots.is-grid{--gap:3px;--area-w:calc(var(--mark,54px) * 5 + 24px);--area-h:calc(var(--mark,54px) + 6px);
  --dot:min(calc((var(--area-w) - (var(--cols) - 1) * var(--gap)) / var(--cols)),calc((var(--area-h) - (var(--rows) - 1) * var(--gap)) / var(--rows)));
  display:grid;grid-template-columns:repeat(var(--cols),var(--dot));grid-auto-rows:var(--dot);gap:var(--gap);align-content:center;justify-content:start}
html[data-layout=mobile] .round-dots.is-grid[data-rows="1"]{--gap:5px}
html[data-layout=mobile] .round-dots.is-grid .score-mark{width:var(--dot);height:var(--dot);border-width:max(1.5px,calc(var(--dot) / 16));transition:width .3s,height .3s}
html[data-layout=mobile] .round-dots.is-grid .score-mark.points-1{border-width:max(1.5px,calc(var(--dot) / 11))}
html[data-layout=mobile] .round-dots.is-grid .points-3:after{display:none}
html[data-layout=mobile] .round-dots.is-grid .points-3{box-shadow:inset 0 0 0 max(1.5px,calc(var(--dot) / 7)) var(--panel)}
html[data-layout=mobile] .round-dots.is-grid .points-0:before{width:64%;height:max(1px,calc(var(--dot) / 14));left:18%;top:calc(50% - .5px)}
html[data-layout=mobile] .round-dots.is-grid .score-mark.current{outline-width:1.5px;outline-offset:2px}
html[data-layout=mobile] .round-dots.is-grid .score-mark.upcoming{border-color:var(--line)}

/* The Endless pass shows the run as the same grid, oldest first, in rows of ten. */
.pass-grid-wrap{display:grid;gap:10px;justify-items:center;padding:4px 0}
.pass-grid{display:grid;grid-template-columns:repeat(10,minmax(0,24px));gap:6px;width:100%;justify-content:center}
.pass-grid .score-mark{width:100%;height:auto;aspect-ratio:1/1;border-width:2px}
.pass-grid .points-1{border-width:2.5px}
.pass-grid .points-3:after{display:none}
.pass-grid .points-3{box-shadow:inset 0 0 0 3px var(--panel)}
.pass-grid .points-0:before{width:64%;height:1.5px;left:18%;top:calc(50% - .75px)}
.pass-grid-caption{margin:0;font:500 11px/1.4 'DM Sans',var(--sans);color:var(--muted);text-align:center}

/* The gentle clock. During play the strip shows no numbers: a ring with marks at 12, 3, 6 and 9 and one hand
   sweeping clockwise, a turn a minute, resting (dimmed) while an answer is reviewed. The time and score stay
   available to screen readers and appear on the results pass. */
.gentle-clock{display:none}
html[data-layout=mobile] .gentle-clock{display:block;width:34px;height:34px;overflow:visible}
.gentle-face{fill:none;stroke:var(--line);stroke-width:1.4}
.gentle-marks{fill:none;stroke:#a3afb8;stroke-width:2;stroke-linecap:round}
.gentle-hand{stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;transform-box:view-box;transform-origin:20px 20px;transition:transform .14s linear,opacity .4s}
.gentle-pin{fill:var(--lime)}
.session-clock:not(.is-running) .gentle-hand{opacity:.45}
html[data-layout=mobile] .session-clock :is(.clock-label,#session-clock),html[data-layout=mobile] .session-score{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media not all and (orientation:landscape) and (max-height:500px){
  html[data-layout=mobile] .session-clock{grid-area:1/2/3/3;align-self:center;justify-self:end;padding-right:2px}
}
@media (prefers-reduced-motion:reduce){.gentle-hand{transition:none}}