/* Travel journal / flight instruments. Scoped to Avatar Fly. */
body {
  --text: #f7f4e9;
  --muted: #bacbd7;
  --accent: #78e9db;
  --gold: #ffd58c;
  background: radial-gradient(ellipse at 50% 15%, #254b68, #0b192b 70%);
}
#screen-title, #screen-result {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 18px;
  padding-top: max(24px, calc(env(safe-area-inset-top, 0px) + 12px));
  padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
}
#screen-title {
  background: linear-gradient(180deg, rgba(10,30,52,.2), rgba(10,27,45,.95) 72%);
}
/* Resultado translúcido (padrão da série): véu de shared/style.css — os
   bichinhos do menu passam atrás do texto. O atlas vira textura bem suave. */
#screen-result {
  background: var(--result-veil);
}
#screen-title::before, #screen-result::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('art/world-atlas.webp') 12% 0 / auto 400% no-repeat;
}
#screen-title::before { opacity: .72; }
#screen-result::before { opacity: .16; }
#screen-title::after, #screen-result::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}
#screen-title::after {
  background: linear-gradient(180deg, rgba(9,27,49,.12), rgba(9,27,49,.4) 27%, #10283ded 68%, #0b1c30);
}
#screen-result::after {
  background: linear-gradient(180deg, rgba(9,27,49,.06), rgba(9,27,49,.16) 70%, rgba(9,27,49,.28));
}
.flight-edition {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .28em;
  color: #ffe2b3;
}
.flight-edition::before, .flight-edition::after {
  content: ''; width: 26px; height: 1px; background: currentColor; opacity: .55;
}
#screen-title .title-logo {
  width: min(340px, 86vw);
  max-height: 235px;
  object-fit: contain;
  border-radius: 17px;
  border: 1px solid #e6f4ff40;
  filter: drop-shadow(0 14px 18px #09233a88);
}
.flight-route { width: min(290px, 80vw); height: 32px; color: #a1f2e8; opacity: .9; }
#screen-title .howto {
  font-size: .93rem;
  line-height: 1.65;
  color: #d0dce2;
  max-width: 32ch;
}
#screen-title .howto strong { color: #fff1d9; }
.flight-destinations {
  display: flex; gap: 8px; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #bdd2df;
}
.flight-destinations span { padding: 5px 8px; border: 1px solid #bbd9eb30; border-radius: 5px; }
.btn { border-radius: 13px; min-height: 54px; font-size: .9rem; letter-spacing: .1em; }
.btn-primary {
  color: #153f4e;
  background: linear-gradient(160deg, #c4f8e9, #63daca);
  box-shadow: inset 0 1px #ffffffb0, 0 4px #268779, 0 12px 30px #071b3580;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-share { background: #f8cf8a; color: #41301e; box-shadow: 0 4px #b28243; }
.btn-ghost { border: 1px solid #a3ccdb40; color: #d3e7ed; }
.back-link { z-index: 2; color: #f2ead5; font-size: .84rem; }
.chip { color: #ffe6b5; border: 1px solid #ffe6b530; background: #0b223bc9; border-radius: 8px; }

.game-frame { background: #298bc1; }
#screen-title > *, #screen-result > * { flex-shrink: 0; }
#screen-title .title-logo { max-height: min(235px, 27svh); }
@media (max-width: 480px) {
  #screen-title, #screen-result { gap: 12px; }
  #screen-title .howto { margin: 4px 0; line-height: 1.5; }
  .flight-route { height: 24px; }
}
.hud {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  min-width: 0;
  width: min(230px, calc(100% - 36px));
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'label label' 'distance score' 'bonus bonus' 'fuel fuel';
  gap: 2px 12px;
  align-items: center;
  padding: 7px 12px 8px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid #dcf5ff1a;
  background: linear-gradient(135deg, #12344a55, #11233b33);
  box-shadow: none;
  backdrop-filter: blur(3px);
  text-shadow: 0 1px 3px #06182a99;
}
.hud-label { grid-area: label; font-size: 8px; letter-spacing: .22em; color: #96c0ce; }
.hud-distance { grid-area: distance; font-size: 1.3rem; color: #f9f4df; font-weight: 800; }
.hud-distance small { font-size: .72rem; color: #a4c3d2; }
.hud-score-box { grid-area: score; text-align: right; transform-origin: right center; }
.hud-score { font-size: 1.05rem; color: #ffe0a6; font-variant-numeric: tabular-nums; }
.hud-score-box.bonus-impact { animation: bonus-score-impact .45s both paused; animation-delay: var(--impact-delay, 0s); }
.hud-bonus-total { grid-area: bonus; display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; font: 600 8px/1.4 system-ui, sans-serif; color: #d4bc87; letter-spacing: .04em; }
.hud-bonus-total strong { color: #e9d5a6; font-size: 9px; font-variant-numeric: tabular-nums; }
.fuel-row { grid-area: fuel; gap: 8px; margin-top: 3px; }
.fuel-ico { font-size: 8px; font-weight: 800; letter-spacing: .08em; color: #91d7cf; filter: none; }
.fuel-bar { width: auto; flex: 1; height: 4px; border: 0; background: #06172866; box-shadow: none; }
.fuel-fill {
  background: repeating-linear-gradient(90deg, #ffffff18 0 1px, transparent 1px 13px), linear-gradient(90deg, #39b6ad, #a5f2d3);
  box-shadow: none;
}
.hud-sub { position: absolute; top: 100%; left: 8px; margin-top: 6px; }
.combo-badge { font-size: .73rem; padding: 4px 10px; color: #47371e; border-radius: 6px; }
.pu-chip { font-size: .64rem; border-radius: 6px; padding: 4px 8px; }
.hud-btn {
  border-radius: 13px;
  border: 1px solid #dcf5ff50;
  background: linear-gradient(145deg, #23475de8, #11283de8);
  box-shadow: inset 0 1px #ffffff20, 0 3px 10px #091a3540;
}
.city-banner {
  top: calc(env(safe-area-inset-top, 0px) + 123px);
  left: 18px; right: auto;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 12px;
  border-left: 2px solid #ffe0a2;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(90deg, #102943d9, #10294300);
}
.cb-name { font-size: .98rem; letter-spacing: .16em; color: #fff0d4; text-shadow: 0 2px 6px #0b203e66; }
.cb-country { font-size: .59rem; letter-spacing: .15em; color: #d1e5ed; }
.hold-hint {
  top: 30%; left: 9%; right: 9%;
  padding: 18px 14px;
  gap: 8px;
  border: 1px solid #e2f7ff55;
  border-radius: 17px;
  background: linear-gradient(140deg, #12324ada, #15314b9e);
  box-shadow: 0 8px 28px #15304b30;
}
.hh-title { font-size: clamp(1.05rem, 4.2vw, 1.45rem); letter-spacing: .08em; color: #fff2d7; text-shadow: none; }
.hh-sub { font-size: .74rem; color: #cde8e7; text-shadow: none; }
.side-hint { color: #e8f6ef; font-size: .71rem; letter-spacing: .02em; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
.pause-overlay { background: #061a2dcc; backdrop-filter: blur(7px); }
.pause-card { padding: 30px 24px; border: 1px solid #a5d5e444; border-radius: 22px; background: #18384cee; box-shadow: 0 24px 60px #07162b66; }
.pause-card h2 { color: #ffdeac; font-size: 1.3rem; letter-spacing: .18em; }
.pause-hint { max-width: 27ch; font-size: .83rem; }
#screen-result .series-badge { color: #b8f4e6; }
#screen-result { gap: 10px; }
#screen-result .result-who { font-size: .9rem; }
#screen-result .result-time { display: flex; align-items: baseline; justify-content: center; gap: 9px; font-size: clamp(2.6rem, 13vw, 4rem); color: #ffe4af; text-shadow: 0 5px 20px #0005; }
#screen-result .result-time small { font-size: 1.1rem; font-weight: 700; }
#screen-result .result-rank, #screen-result .record-note { margin-top: 0; font-size: .85rem; }
#screen-result .result-stage { font-size: .85rem; }
#screen-result .actions { gap: 7px; margin-top: 4px; }
#screen-result .btn { min-height: 44px; padding: 10px 18px; font-size: .8rem; }
.result-stats { max-width: 34ch; line-height: 1.4; font-size: .78rem; }
.result-phrase { font-size: .82rem; color: #c1d4df; }
@media (max-height: 600px) {
  #screen-title, #screen-result { gap: 10px; padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
  #screen-title .title-logo { max-height: 135px; }
  .flight-route, .flight-destinations { display: none; }
  .hud { top: calc(env(safe-area-inset-top, 0px) + 6px); padding: 6px 12px 8px; width: 220px; }
  .hud-distance { font-size: 1.25rem; }
  .city-banner { top: 89px; padding: 5px 10px; }
  .hold-hint { top: 30%; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-title, .city-banner, .combo-badge, .fuel-bar { animation: none !important; }
}