:root {
  font-family:"Avenir Next","Trebuchet MS",sans-serif;
  color:#233f46;
  background:#f4f0e7;
  font-synthesis:none;
  --ink:#233f46;
  --copper:#bc5738;
  --cream:#fcf5e6
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-width:320px
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit;
  cursor:pointer;
  touch-action:manipulation
}
button:focus-visible,a:focus-visible {
  outline:3px solid #cc663e;
  outline-offset:4px
}
.game-shell {
  height:100svh;
  max-height:1100px;
  min-height:480px;
  max-width:1680px;
  margin:auto;
  display:grid;
  grid-template-rows:72px minmax(0,1fr) 78px;
  padding:0 24px;
  gap:0
}
.game-shell .topbar:has(>.home-link) {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:16px;
  align-items:center
}
.game-shell .topbar>.home-link {
  width:38px;
  height:38px;
  border:1px solid #d9dacf;
  background:#fcfaf4;
  border-radius:50%;
  box-shadow:none;
  color:#37545a;
  font-size:21px
}
.brand {
  display:flex;
  gap:12px;
  align-items:center
}
.brand svg {
  width:29px;
  height:38px
}
.eyebrow {
  font-size:9px;
  font-weight:800;
  letter-spacing:2px;
  margin:0 0 4px;
  color:#7e887d
}
h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
  font-size:25px;
  letter-spacing:-.7px;
  margin:0;
  line-height:1
}


.play-area {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:16px;
  border:1px solid #b2c6c3;
  box-shadow:0 12px 35px #243c3f15;
  background:#557b8d;
  min-height:0
}
canvas {
  display:block;
  width:100%;
  height:100%;
  touch-action:none
}
.scene-top {
  position:absolute;
  inset:21px 24px auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
  gap:12px
}
.location {
  display:flex;
  align-items:center;
  gap:10px;
  color:#f5f3db;
  text-shadow:0 1px 2px #26455360
}
.location-star {
  font-size:30px;
  color:#ecc789
}
.location small {
  display:block;
  font-size:8px;
  letter-spacing:2px;
  font-weight:800;
  margin-bottom:5px
}
.location strong {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:20px
}
.stats {
  display:flex;
  gap:7px
}
.stats span {
  font-size:12px;
  font-weight:700;
  padding:9px 13px;
  white-space:nowrap;
  border-radius:8px;
  background:#f8f6e7eb;
  color:#304b50;
  border:1px solid #ffffff60;
  box-shadow:0 3px 12px #1539480a
}
.stats #lives {
  color:#a44937;
  background:#fce8dce8
}
.overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:72px 8% 48px;
  pointer-events:none
}
.overlay.hidden {
  display:none
}
.panel {
  width:370px;
  pointer-events:auto;
  padding:27px 30px 21px;
  background:#fff9eefa;
  border:1px solid #fffbef;
  border-radius:15px;
  box-shadow:0 20px 65px #183b4d30;
  position:relative
}
.panel::before {
  content:"";
  position:absolute;
  top:9px;
  left:9px;
  right:9px;
  bottom:9px;
  border:1px solid #d9c5a43d;
  border-radius:9px;
  pointer-events:none
}
.badge {
  font-size:8px;
  font-weight:800;
  letter-spacing:1.5px;
  color:#a87945;
  margin:0 0 15px
}
.badge span {
  color:#c8663b;
  font-size:13px;
  margin-right:4px
}
h2 {
  font:500 44px/.99 Georgia,serif;
  letter-spacing:-1.9px;
  margin:0;
  color:#284a4c
}
#overlay-copy {
  font-size:13px;
  line-height:1.65;
  color:#69736b;
  margin:15px 0 18px;
  max-width:310px
}
.flight-lesson {
  display:flex;
  gap:18px;
  border-top:1px solid #e9dfcd;
  padding:13px 0 15px;
  font-size:10px;
  font-weight:700;
  color:#6d766a
}
.flight-lesson b {
  font-size:17px;
  margin-right:4px;
  color:#799787
}
.primary-button,.fire-button {
  background:#bc593a;
  color:#fff7e7;
  border:1px solid #b05033;
  border-radius:9px;
  box-shadow:0 3px 0 #914128;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px
}
.primary-button {
  min-height:46px;
  width:100%;
  font-size:14px
}
.primary-button span {
  font-size:21px
}
.panel-note {
  font-size:9px!important;
  text-align:center;
  color:#929482;
  margin:13px 0 0!important;
  letter-spacing:.35px
}
.scene-bottom {
  position:absolute;
  bottom:15px;
  left:22px;
  right:22px;
  display:flex;
  justify-content:space-between;
  color:#345861;
  font-size:8px;
  letter-spacing:1.65px;
  font-weight:800;
  pointer-events:none;
  opacity:.75
}
.controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.control-hint {
  display:flex;
  gap:12px;
  align-items:center
}
.hint-icon {
  font-size:25px;
  color:#708476
}
.control-hint strong {
  display:block;
  font-size:12px;
  margin-bottom:4px
}
.control-hint div>span {
  font-size:10px;
  color:#849084
}
.flight-buttons {
  display:flex;
  gap:8px;
  align-items:center
}
.round-button {
  height:43px;
  width:43px;
  border:1px solid #cbd6cc;
  background:#e5ece2;
  color:#496e63;
  border-radius:9px;
  font-size:22px;
  box-shadow:0 3px 0 #c2d0c2
}
.fire-button {
  height:43px;
  padding:0 18px;
  font-size:13px
}
.fire-button svg {
  height:23px;
  width:21px;
  color:#ffd698
}
.fire-button kbd {
  font-family:inherit;
  font-size:9px;
  border:1px solid #e7ad9090;
  border-radius:4px;
  padding:3px 5px;
  font-weight:400;
  color:#f9ceae
}
.round-button:active,.fire-button:active,.primary-button:active,button[aria-pressed=true].round-button,button[aria-pressed=true].fire-button {
  transform:translateY(2px);
  box-shadow:none
}
.control-end {
  font-size:9px;
  color:#8d9889;
  display:flex;
  align-items:center;
  gap:7px
}
.ready-dot {
  width:5px;
  height:5px;
  background:#8ea58b;
  border-radius:50%
}
@media(min-width:1500px) {
  .panel {
  width:410px;
  padding:35px
}
.overlay {
  padding-right:10%
}
h2 {
  font-size:51px
}

}
@media(max-width:1000px) {
  .control-end {
  display:none
}
.overlay {
  padding-right:5%
}
.game-shell {
  padding:0 16px
}
.panel {
  width:330px;
  padding:23px
}
h2 {
  font-size:39px
}
.scene-top {
  inset:17px 18px auto
}
.stats span {
  font-size:11px;
  padding:8px
}
.location small {
  font-size:7px
}

}
@media(max-width:700px) {
  .game-shell {
  padding:0 9px;
  grid-template-rows:66px minmax(0,1fr) 99px;
  min-height:600px
}
.game-shell .topbar:has(>.home-link) {
  grid-template-columns:35px minmax(0,1fr) auto;
  gap:9px
}
.game-shell .topbar>.home-link {
  width:33px;
  height:33px
}

.brand {
  gap:7px
}
.brand svg {
  display:none
}
h1 {
  font-size:21px
}
.eyebrow {
  font-size:6px;
  letter-spacing:1px
}


.scene-top {
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  inset:15px
}
.location strong {
  font-size:17px
}
.stats {
  align-self:flex-end
}
.stats span {
  font-size:10px;
  padding:7px 9px
}
.overlay {
  align-items:center;
  justify-content:center;
  padding:90px 15px 35px
}
.panel {
  width:min(330px,100%);
  padding:24px
}
.controls {
  flex-direction:column;
  justify-content:center;
  gap:9px
}
.control-hint {
  order:2
}
.control-hint strong,.hint-icon {
  display:none
}
.control-hint div>span {
  font-size:9px
}
.scene-bottom span:last-child {
  display:none
}
.scene-bottom {
  font-size:7px
}
.fire-button {
  min-width:210px
}

}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  scroll-behavior:auto!important;
  transition:none!important
}

}

.game-shell .topbar > .brand:last-child {
  grid-column: 2;
  justify-self: start;
}