:root{
  --bg:#cee8f1;
  --panel:#fff5d9;
  --panel2:#f0e3bb;
  --line:#20364b;
  --text:#20364b;
  --ink:#20364b;
  --muted:#586c70;
  --label:#586c70;
  --brand:#3279b8;
  --info:#3279b8;
  --good:#347a52;
  --bad:#b74f43;
  --warn:#855d10;
  --gold:#f6c553;
  --r:0;
  --r1:0;
  --r2:0;
  --ui:"IBM Plex Mono",monospace;
  --mono:"IBM Plex Mono",monospace;
  --heading:"Pixelify Sans",monospace
}
*{
  box-sizing:border-box
}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.4 var(--ui)
}
button,select,input{
  font:inherit;
  color:inherit
}
[hidden]{
  display:none!important
}
button,summary{
  touch-action:manipulation
}
button{
  cursor:pointer
}
button:disabled{
  cursor:not-allowed
}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:3px
}
#app{
  max-width:1600px;
  margin:auto
}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:8px 20px 12px;
  background:var(--panel);
  border-bottom:3px solid var(--line);
  gap:12px
}
.brandbox{
  display:flex;
  gap:12px;
  align-items:center
}
.brandbox img{
  image-rendering:pixelated;
  flex:none
}
.wordmark{
  font:600 32px/1 var(--heading)
}
.brandbox small{
  font-size:11px
}
.time-controls{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px
}
.stats{
  order:3;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  width:100%
}
.stat{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
  padding:6px 10px;
  border:2px solid var(--panel2);
  background:#fffced
}
.stat .si{
  display:none
}
.stat .sv{
  min-width:0
}
.stat label{
  display:block;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase
}
.stat b{
  font:600 19px/1.4 var(--mono)
}
.stat small{
  font-size:10px;
  overflow-wrap:anywhere
}
.stat .bar{
  height:4px;
  border:0;
  margin:2px 0 0
}
.stat .xp{
  font-size:14px
}
.ring{
  width:30px;
  height:30px;
  position:relative;
  flex:none
}
.ring svg{
  width:30px;
  height:30px
}
.ring circle{
  fill:none;
  stroke:var(--panel2);
  stroke-width:3
}
.ring circle.fg{
  stroke:var(--brand)
}
.ring i{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-style:normal;
  font-weight:600
}
.seg{
  display:flex;
  gap:6px
}
.seg button{
  display:grid;
  place-items:center;
  width:44px;
  min-height:36px;
  background:var(--panel);
  border:2px solid var(--line);
  box-shadow:0 3px var(--line);
  font-weight:600
}
.seg button svg{
  width:14px;
  height:14px
}
.seg button.on{
  background:var(--brand);
  color:white
}
#nav{
  display:flex;
  gap:8px;
  padding:12px 20px;
  background:var(--panel2)
}
#nav button{
  flex:1;
  min-width:0;
  min-height:38px;
  border:2px solid var(--line);
  background:var(--panel);
  font-weight:600;
  box-shadow:0 2px var(--line)
}
#nav button svg{
  display:none
}
#nav button.on{
  background:var(--brand);
  color:#fff
}
#nav .more-tab{
  display:none
}
.shell{
  display:flex;
  gap:16px;
  padding:16px;
  align-items:flex-start
}
#stage{
  flex:1;
  min-width:0
}
.airport-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 304px;
  gap:16px
}
.airport-world{
  min-width:0
}
.shell.panel .airport-layout{
  display:block
}
.card{
  background:var(--panel);
  border:2px solid var(--line);
  padding:16px;
  margin:0 0 16px;
  box-shadow:4px 4px 0 var(--line)
}
h2,h3,.eyebrow,.dlab{
  font-family:var(--heading);
  font-weight:600
}
h2{
  font-size:28px
}
h3{
  font-size:24px;
  margin:0 0 12px
}
.eyebrow{
  font-size:20px;
  margin-bottom:12px
}
.card p{
  margin:8px 0 16px
}
.small{
  font-size:12px
}
.muted{
  color:var(--muted)
}
.good{
  color:var(--good)
}
.bad{
  color:var(--bad)
}
.warn{
  color:var(--warn)
}
.row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center
}
.spread{
  justify-content:space-between
}
.grid{
  display:grid;
  gap:16px
}
.g2{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))
}
.g4{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))
}
.kpi label{
  display:block;
  color:var(--muted);
  font-size:12px
}
.kpi b{
  font-size:24px
}
.btn{
  border:2px solid var(--line);
  background:var(--panel);
  padding:10px 16px;
  min-height:44px;
  font-weight:600;
  box-shadow:0 4px var(--line)
}
.btn.pri{
  background:var(--gold);
  color:var(--ink)
}
.btn:hover:not(:disabled){
  background:#ffda76
}
.btn:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 1px var(--line)
}
.btn:disabled{
  background:#d6d5c5;
  color:#586c70;
  box-shadow:none
}
.btn.sm{
  font-size:12px;
  padding:8px 12px;
  min-height:36px
}
.btn.danger{
  color:var(--bad)
}
.bar{
  height:12px;
  background:var(--panel2);
  border:2px solid var(--line);
  overflow:hidden;
  margin:8px 0
}
.bar i{
  display:block;
  height:100%;
  background:var(--brand)
}
.bar i.good{
  background:var(--good)
}
.bar i.bad{
  background:var(--bad)
}
.bar i.warn{
  background:var(--gold)
}
.inset{
  background:var(--panel2);
  padding:12px;
  margin:12px 0;
  font-size:12px;
  line-height:1.8
}
.tag,.chip{
  display:inline-block;
  border:1px solid var(--line);
  padding:4px 8px;
  background:var(--bg);
  font-size:11px
}
.tag.on{
  background:#d3e9b7;
  color:var(--ink)
}
.route-title{
  font-size:28px;
  margin-top:20px
}
.objective p{
  font-size:12px
}
.objective .row{
  font-size:11px
}
.objective .btn{
  margin-top:12px
}
.departure .btn,.assignment>.btn{
  width:100%;
  margin-top:12px
}
.departure p{
  font-size:12px
}
.departure .tag{
  max-width:100%
}
.assignment label{
  font-size:11px;
  color:var(--muted);
  display:block;
  margin:12px 0 6px
}
.assignment select{
  width:100%
}
/* The map, tools and inspector are separate surfaces: controls never cover tiles. */
.pix{
  padding:0;
  border:3px solid var(--line);
  overflow:hidden
}
.scenectl{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:8px;
  background:var(--panel);
  border-bottom:2px solid var(--line)
}
.ctlgrp{
  display:flex;
  gap:4px
}
.ctlgrp .btn{
  padding:6px 9px;
  min-width:34px;
  min-height:34px;
  box-shadow:0 2px var(--line)
}
.ctlgrp .btn.pri{
  background:var(--brand);
  color:#fff
}
.ctlgrp:last-child{
  margin-left:auto
}
.ctlgrp .add{
  border-style:dashed
}
canvas{
  display:block;
  width:100%;
  background:var(--bg)
}
#scene{
  height:auto;
  aspect-ratio:66/43;
  image-rendering:pixelated;
  touch-action:none;
  cursor:grab;
  background:#83bb69
}
#scene:active{
  cursor:grabbing
}
.map-caption{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:8px 12px;
  border-top:2px solid var(--line);
  font-size:10px
}
.map-caption span{
  color:var(--muted)
}
.build-menu{
  border:3px solid var(--line);
  background:var(--panel);
  box-shadow:4px 4px var(--line);
  margin-bottom:16px
}
.build-menu summary{
  padding:12px;
  font-weight:600;
  cursor:pointer;
  list-style:none
}
.build-menu summary span{
  float:right;
  color:var(--muted);
  font-size:11px
}
.build-menu[open] summary{
  border-bottom:2px solid var(--line)
}
.dock{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px
}
.dlab{
  font-size:20px
}
.dtools{
  display:flex;
  gap:8px;
  overflow:auto;
  min-width:0;
  flex:1;
  padding-bottom:4px;
  scrollbar-width:thin
}
.tool{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:70px;
  padding:10px;
  border:2px solid var(--line);
  background:#fffced;
  text-align:left
}
.tool.on{
  background:var(--brand);
  color:#fff
}
.tool .ti{
  font-size:18px
}
.tool .tl{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:600
}
.tool small{
  font-size:10px;
  font-weight:400
}
.dnote{
  display:none
}
.build-hint{
  margin:0;
  padding:0 12px 12px;
  font-size:11px;
  color:var(--muted)
}
.inspector{
  background:var(--panel);
  border:2px solid var(--line);
  box-shadow:4px 4px var(--line);
  margin-bottom:16px;
  padding:12px
}
.inspector>.row{
  font-size:11px;
  margin-bottom:12px
}
.inspector>.card{
  box-shadow:none;
  border:0;
  padding:0;
  margin:0
}
.inspector .cat{
  display:flex!important;
  flex-wrap:wrap
}
.inspector .cat .btn{
  width:100%
}
.inspector .cat b{
  font-size:16px
}
.inspector .ac{
  display:block
}
.airport-details{
  background:var(--panel);
  border:2px solid var(--line);
  padding:12px;
  margin-top:4px
}
.airport-details>summary{
  font-weight:600;
  cursor:pointer;
  min-height:32px
}
.airport-details[open]>summary{
  margin-bottom:16px
}
.airport-details .card{
  box-shadow:none
}
#drawer{
  flex:none;
  width:clamp(340px,36%,460px);
  border:3px solid var(--line);
  box-shadow:4px 4px var(--line);
  background:var(--panel);
  position:sticky;
  top:12px;
  max-height:calc(100vh - 24px);
  display:flex;
  flex-direction:column
}
.dhead{
  display:flex;
  align-items:center;
  padding:12px;
  border-bottom:2px solid var(--line)
}
.dhead h2{
  margin:0;
  font-size:24px
}
.dclose{
  margin-left:auto;
  min-width:36px;
  min-height:36px;
  background:var(--panel2);
  border:2px solid var(--line);
  font-size:20px
}
.dbody{
  overflow:auto;
  padding:12px;
  min-width:0
}
.dbody .card{
  box-shadow:none
}
.dbody .g2,.dbody .g4,.dbody .ac,.dbody .cat{
  grid-template-columns:1fr
}
.dbody .cat .btn{
  width:100%
}
.dbody .card:last-child{
  margin-bottom:0
}
/* Management screens share the same cream inset language. */
.ac,.cat{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:16px;
  border:2px solid var(--line);
  background:#fffced;
  padding:12px;
  margin-bottom:16px;
  min-width:0
}
.cat{
  grid-template-columns:180px 1fr auto;
  background:var(--panel2)
}
.ac-img,.cat-img{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  border-bottom:3px solid var(--line);
  padding:8px
}
.ac-img svg,.cat-img svg{
  width:100%;
  height:auto;
  max-height:160px
}
.ac-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap
}
.ac-name{
  display:block;
  font-family:var(--heading);
  font-size:24px
}
.ac-type{
  font-size:12px;
  color:var(--muted)
}
.meter{
  margin-top:12px
}
.ml{
  display:flex;
  justify-content:space-between;
  font-size:12px
}
.ac-route,.ac-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px
}
.ac[data-state=flying] .b-disp,.ac[data-state=turn] .b-disp,.ac[data-state=check] .b-disp,.ac[data-state=grounded] .b-disp,.ac[data-state=noroute] .b-disp,.ac[data-state=flying] .b-check,.ac[data-state=turn] .b-check,.ac[data-state=check] .b-check{
  display:none
}
.specs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:8px 0
}
.specs span{
  padding:4px 6px;
  background:var(--panel);
  border:1px solid #c7ba97;
  font-size:11px
}
.specs em{
  font-style:normal;
  color:var(--muted)
}
.cat.locked{
  background:#e6e3d6
}
.cat.locked .cat-img{
  filter:grayscale(1)
}
.cat b{
  font-size:18px
}
table{
  width:100%;
  border-collapse:collapse
}
td,th{
  padding:10px 8px;
  border-bottom:1px solid #c7ba97;
  text-align:left;
  font-size:12px
}
th{
  color:var(--muted)
}
.board td{
  vertical-align:middle
}
.board tr[data-st=hold] .chip{
  background:var(--gold)
}
.board tr[data-st=flying] .chip{
  background:var(--brand);
  color:#fff
}
.board tr[data-st=nofuel] .chip,.board tr[data-st=grounded] .chip,.board tr[data-st=notaxi] .chip,.board tr[data-st=shortrwy] .chip{
  background:#f4cec1
}
.switch{
  position:relative;
  width:54px;
  height:30px;
  background:#d6d5c5;
  border:2px solid var(--line);
  flex:none;
  cursor:pointer
}
.switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  background:var(--line)
}
.switch.on{
  background:#d3e9b7
}
.switch.on::after{
  left:27px;
  background:var(--good)
}
.lock{
  color:var(--muted)
}
input[type=text],select{
  background:#fffced;
  border:2px solid var(--line);
  padding:10px;
  width:100%;
  max-width:100%;
  min-height:44px;
  font-size:14px
}
input[type=range]{
  width:100%;
  height:32px;
  accent-color:var(--brand)
}
.field{
  margin:16px 0
}
.field>label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px
}
.swatches{
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.sw{
  width:38px;
  height:38px;
  border:3px solid var(--line);
  cursor:pointer
}
.sw.on{
  outline:3px solid var(--brand);
  outline-offset:3px
}
#map{
  height:320px
}
#spark{
  height:130px
}
#log{
  max-height:240px;
  overflow:auto
}
#log div{
  font-size:12px;
  border-bottom:1px solid var(--panel2);
  padding:8px 0
}
#modal{
  position:fixed;
  inset:0;
  z-index:20;
  background:#20364bbf;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow:auto
}
#modal .box,.kbox{
  background:var(--panel);
  border:3px solid var(--line);
  box-shadow:6px 6px var(--line);
  padding:24px;
  max-width:520px;
  width:100%;
  max-height:calc(100dvh - 40px);
  overflow:auto
}
#modal h2{
  margin:0 0 12px
}
.kbar{
  background:var(--brand);
  color:white;
  font:600 26px var(--heading);
  padding:12px;
  margin:-12px -12px 12px
}
.krows td{
  border-bottom:1px dashed var(--muted)
}
#toasts{
  position:fixed;
  right:16px;
  bottom:48px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:30;
  pointer-events:none;
  max-width:calc(100% - 32px)
}
.toast{
  background:var(--panel);
  border:2px solid var(--line);
  box-shadow:4px 4px var(--line);
  padding:12px 16px;
  font-size:13px
}
footer{
  background:var(--line);
  color:var(--panel);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 20px;
  font-size:11px
}
footer button{
  background:none;
  color:var(--panel);
  border:1px solid var(--panel);
  padding:6px 10px
}
@media(min-width:761px) and (max-width:1100px){
  .airport-layout{
    grid-template-columns:minmax(0,1fr) 260px
  }
  .shell.panel{
    flex-wrap:wrap
  }
  .shell.panel #stage,.shell.panel #drawer{
    width:100%;
    flex:1 1 100%
  }
  .shell.panel #drawer{
    position:static;
    max-height:none
  }
  .stat small{
    display:none
  }
  .ctlgrp:last-child{
    margin-left:0
  }
}
@media(max-width:760px){
  html,body{
    font-size:13px
  }
  #app{
    padding-bottom:80px
  }
  header{
    padding:10px 12px;
    gap:10px
  }
  .wordmark{
    font-size:28px
  }
  .brandbox{
    gap:8px
  }
  .brandbox small{
    display:none
  }
  .brandbox img{
    width:32px;
    height:auto
  }
  .time-controls{
    gap:6px
  }
  .time-controls>span{
    display:none
  }
  .seg{
    gap:4px
  }
  .seg button{
    width:32px;
    min-height:32px;
    font-size:11px
  }
  .stats{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px;
    background:var(--panel2);
    padding:8px;
    margin:0 -12px -10px;
    width:calc(100% + 24px)
  }
  .stat{
    border:0;
    background:none;
    padding:0;
    grid-column:span 3
  }
  .stat:nth-child(n+3){
    grid-column:span 2
  }
  .stat b{
    font-size:19px
  }
  .stat:nth-child(n+3) b{
    font-size:11px
  }
  .stat small,.stat .bar,.stat .ring svg{
    display:none
  }
  .stat .ring{
    width:18px;
    height:18px
  }
  .stat:nth-child(n+3) label{
    font-size:9px
  }
  .stat .xp{
    display:block
  }
  .stat label{
    font-size:10px
  }
  #nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:10;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:8px 8px max(8px,env(safe-area-inset-bottom));
    border-top:3px solid var(--line)
  }
  #nav button{
    min-height:48px;
    font-size:12px
  }
  #nav button[data-arg=overview],#nav button[data-arg=fuel],#nav button[data-arg=auto],#nav button[data-arg=company]{
    display:none
  }
  #nav .more-tab{
    display:block
  }
  #nav.expanded button{
    display:block
  }
  .shell{
    padding:8px;
    display:block
  }
  .airport-layout{
    display:block
  }
  .airport-side{
    display:flex;
    flex-direction:column
  }
  .airport-side .objective{
    padding:12px
  }
  .objective h3{
    font-size:20px
  }
  .objective .eyebrow{
    font-size:16px
  }
  .objective p{
    margin:8px 0
  }
  .objective .btn{
    display:none
  }
  .card{
    padding:12px;
    margin-bottom:12px;
    box-shadow:3px 3px var(--line)
  }
  .pix{
    padding:0
  }
  .scenectl{
    gap:6px;
    padding:6px
  }
  .ctlgrp .btn{
    min-height:36px;
    min-width:32px;
    padding:6px;
    font-size:11px
  }
  .ctlgrp:last-child{
    margin-left:0
  }
  .map-caption{
    font-size:9px;
    padding:6px;
    flex-wrap:wrap
  }
  .map-caption span{
    display:none
  }
  .build-menu{
    margin-bottom:12px
  }
  .build-menu summary{
    min-height:48px;
    background:var(--gold)
  }
  .build-menu summary span{
    font-size:10px
  }
  .dlab{
    display:none
  }
  .dock{
    padding:8px
  }
  .tool{
    min-height:64px
  }
  .airport-side:has(.inspector) [data-html=objective]{
    display:none
  }
  .inspector .card{
    padding:0
  }
  .shell #drawer{
    width:100%;
    position:static;
    max-height:none
  }
  .shell.panel #stage{
    display:none
  }
  .ac,.cat{
    grid-template-columns:1fr
  }
  .g2{
    grid-template-columns:1fr
  }
  .board .bcol{
    display:none
  }
  .board td{
    padding:8px 4px;
    font-size:11px
  }
  .board td:first-child .small{
    display:none
  }
  .board .chip{
    padding:3px;
    font-size:10px
  }
  footer{
    padding:12px;
    flex-wrap:wrap
  }
  #toasts{
    bottom:88px
  }
  #modal{
    padding:12px
  }
  #modal .box{
    padding:20px;
    max-height:calc(100dvh - 24px)
  }
}
@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important;
    transition:none!important
  }
}
.scene-window{
  overflow:hidden
}
.airport-side:has(.inspector)>[data-html]{
  display:none
}
@media(max-width:760px){
  .scene-window #scene{
    width:150%;
    margin-left:-25%
  }
  .objective h3,.objective p,.objective .eyebrow{
    display:none
  }
  .objective .row{
    font-size:12px
  }
  .objective .bar{
    margin-bottom:0
  }
  .departure .eyebrow{
    font-size:16px
  }
  .departure .route-title{
    margin:12px 0
  }
  .departure p{
    margin:6px 0
  }
  .departure .inset{
    padding:8px;
    margin:8px 0
  }
  .stat:nth-child(3){
    order:4
  }
  .stat:nth-child(4){
    order:3
  }
  .stat:nth-child(5){
    order:5
  }
}