/* Atlas Flight — minimal storybook chrome. Same family as Phoenix Adventures' game.css, cut to what this shell uses. */
:root {
  --ink: #3b2a1c;
  --burnt: #8C3A0E;
  --paper: #fdfaf4;
  --paper2: #f3ead8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #cfe0ef; }
body { font-family: Georgia, 'Libre Baskerville', serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.hidden { display: none !important; }

/* ---------- panels (loading / start / help) */
.panel, #picker {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  background: radial-gradient(120% 90% at 50% 20%, rgba(253,250,244,.97), rgba(243,234,216,.95) 60%, rgba(228,214,188,.95));
  z-index: 10;
}
.panel h1, #picker h1 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700;
  font-size: clamp(30px, 6vw, 62px); margin: 0; color: var(--burnt); letter-spacing: .5px;
}
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 11px; color: #9a7d5c; }
.sub, .panel p { margin: 0; max-width: 46ch; line-height: 1.6; font-size: 16px; }
.small, #startSmall { font-size: 12px; color: #8b7a63; }
button.big {
  margin-top: 8px; font: inherit; font-size: 20px; padding: 12px 34px; border-radius: 999px; cursor: pointer;
  border: 2px solid #b8551f; background: linear-gradient(#ffb15e, #e8791f); color: #3a1c07;
  box-shadow: 0 6px 18px rgba(140,58,14,.28);
}
button.big:hover { filter: brightness(1.06); }
button.link { background: none; border: none; font: inherit; font-size: 13px; color: #8b6a44; text-decoration: underline; cursor: pointer; }
.panel table { border-collapse: collapse; font-size: 14px; }
.panel td { padding: 4px 10px; text-align: left; }
kbd {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 1px 6px;
  border: 1px solid #c8b79a; border-bottom-width: 2px; border-radius: 5px; background: #fffdf7;
}
.bar { width: min(420px, 70vw); height: 8px; border-radius: 99px; background: #e0d3ba; overflow: hidden; }
#barFill { height: 100%; width: 0%; background: linear-gradient(90deg, #f0ad5e, #e8791f); transition: none; }

/* ---------- the picker: two big world buttons */
.worldCards { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin: 12px 0 4px; }
button.worldCard {
  font: inherit; cursor: pointer; width: 260px; padding: 0; overflow: hidden;
  border: 2px solid #d8c6a4; border-radius: 16px; background: #fffdf7; text-align: left;
  box-shadow: 0 10px 26px rgba(90,64,34,.16); transition: transform .12s ease, box-shadow .12s ease;
}
button.worldCard:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(90,64,34,.22); }
button.worldCard .img { height: 108px; background: linear-gradient(140deg, #cbd9a8, #8a8560 60%, #b79a6a); background-size: cover; background-position: center; }
button.worldCard .body { padding: 12px 14px 14px; }
button.worldCard h2 { font-family: 'Cormorant Garamond', Georgia, serif; margin: 0 0 6px; font-size: 24px; color: var(--burnt); }
button.worldCard p { font-size: 13px; line-height: 1.5; margin: 0 0 8px; color: #5c4a35; }
button.worldCard .go { font-size: 13px; color: #b8551f; }
button.worldCard:disabled { opacity: .42; filter: grayscale(.7); cursor: not-allowed; }
button.worldCard:disabled .go { color: #8a7a66; }
#pickerNote { font-size: 12px; color: #9a6a3a; max-width: 52ch; }
.keys { margin-top: 14px; font-size: 12.5px; color: #6d5b45; max-width: 60ch; line-height: 1.9; }

/* ---------- the in-flight HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud .card {
  position: absolute; left: 16px; top: 16px; min-width: 160px;
  background: rgba(253,250,244,.82); border: 1px solid rgba(140,58,14,.22); border-radius: 12px;
  padding: 10px 14px; font-size: 14px; line-height: 1.5; backdrop-filter: blur(3px);
}
#placeName { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: var(--burnt); }
#altitude, #speed, #fps { font-variant-numeric: tabular-nums; }
#fps { font-size: 12px; color: #8b7a63; }
#hud #flash { left: 50%; top: 68px; transform: translateX(-50%); opacity: 0; transition: opacity .25s ease; }
#hud #flash.show { opacity: 1; }
.iconrow { position: absolute; right: 14px; top: 14px; display: flex; gap: 8px; pointer-events: auto; }
.iconrow button {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px;
  border: 1px solid rgba(140,58,14,.25); background: rgba(253,250,244,.85); color: var(--burnt);
}
#attribution { position: fixed; right: 10px; bottom: 8px; font-size: 10px; color: rgba(40,30,20,.45); z-index: 4; }

/* ---------- touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
#touch button {
  pointer-events: auto; border: 1px solid rgba(140,58,14,.3); background: rgba(253,250,244,.7);
  border-radius: 12px; font: inherit; color: var(--burnt);
}
#touch .dpad { position: absolute; left: 18px; bottom: 22px; display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 4px; }
#touch .dpad .up { grid-area: 1 / 2; } #touch .dpad .left { grid-area: 2 / 1; }
#touch .dpad .right { grid-area: 2 / 3; } #touch .dpad .down { grid-area: 3 / 2; }
#touch .flybtns { position: absolute; right: 18px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
#touch .flybtns button { width: 92px; height: 52px; font-size: 14px; }
#touch button.on { background: rgba(232,121,31,.75); color: #fff; }