@font-face {
  font-family: "Patrick Hand";
  src: url("fonts/patrick-hand-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}

:root {
  --paper: #fbf7ea;
  --line: #bcd2e8;
  --margin: #e58a84;
  --ink: #27303a;
  --soft: #5f6a75;
  --azul: #2f7fd6;
  --vermelho: #d8423a;
  --lapis: #f2b63c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #2b2a26;
  color: var(--ink);
  font: 20px/1.25 "Patrick Hand", "Comic Sans MS", cursive;
}

canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { pointer-events: none; }

h1, h2, h3, p { margin: 0; font-weight: 400; }
.azul { color: var(--azul); }
.vermelho { color: var(--vermelho); }

button {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px 12px 7px 10px;
  padding: 6px 18px;
  cursor: pointer;
}
@media (hover: hover) {
  button:hover { background: #fff; }
  button.primary:hover { background: #ffc95a; }
  .plane-btn:hover { background: rgb(242 182 60 / 25%); }
}
button:focus-visible, input:focus-visible { outline: 3px solid var(--lapis); outline-offset: 2px; }
button.primary { background: var(--lapis); font-size: 30px; padding: 6px 38px; }

.sheet {
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 27px, var(--margin) 27px, var(--margin) 29px, transparent 29px),
    repeating-linear-gradient(transparent 0 29px, var(--line) 29px 30px);
  padding: 14px 18px 16px 42px;
  border-radius: 3px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}
.sheet h2 { font-size: 30px; line-height: 40px; }

#menu {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 28px;
  background: linear-gradient(rgb(20 18 12 / 25%), transparent 30%, transparent 70%, rgb(20 18 12 / 45%));
}
.title { text-align: center; color: #fff; text-shadow: 0 3px 0 rgb(0 0 0 / 45%); }
.title h1 { font-size: 66px; line-height: 1; }
.title p { font-size: 24px; }

.menu-row { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.menu-row .sheet { width: 320px; }

.plane-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 3px 8px;
  line-height: 24px;
}
.plane-btn small { display: block; color: var(--soft); font-size: 17px; line-height: 18px; }
.plane-btn[aria-pressed="true"] { background: rgb(242 182 60 / 55%); border-color: var(--ink); }

.tagline { color: var(--soft); }
#plane-info h3 { font-size: 23px; margin-top: 10px; }
#plane-info h3 span { color: var(--vermelho); }
#info-bars { margin-top: 8px; }
.bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; align-items: center; gap: 6px; }
.bar-bonus { color: var(--tier1); font-size: 15px; line-height: 16px; white-space: nowrap; text-align: right; }
.pips { display: flex; gap: 4px; }
.pips i { flex: 0 1 26px; min-width: 0; height: 12px; border: 1.5px solid var(--ink); border-radius: 2px; }
.pips i.on { background: var(--azul); }

.menu-foot { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; color: #fff; text-shadow: 0 1px 3px #000; }
.menu-foot input {
  font: inherit;
  width: 190px;
  margin-left: 6px;
  padding: 4px 8px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
}
.keys { width: 100%; text-align: center; font-size: 19px; }
.keys b { color: var(--lapis); font-weight: 400; }

#hud { position: fixed; inset: 0; pointer-events: none; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 85%); }

#scorebar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) rotate(-0.6deg);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 2px 22px;
  background: var(--paper);
  color: var(--ink);
  font-size: 32px;
  text-shadow: none;
  box-shadow: 0 3px 8px rgb(0 0 0 / 40%);
}
#clock { font-size: 24px; color: var(--soft); min-width: 54px; text-align: center; }

#killfeed { position: absolute; top: 12px; right: 14px; margin: 0; padding: 0; list-style: none; text-align: right; }
#killfeed li { background: rgb(251 247 234 / 92%); color: var(--ink); text-shadow: none; margin-bottom: 4px; padding: 0 10px; width: fit-content; margin-left: auto; font-size: 19px; }

#center-msg { position: absolute; top: 24%; width: 100%; text-align: center; font-size: 48px; }

#status { position: absolute; left: 14px; bottom: 14px; width: 300px; padding: 9px 12px; background: rgb(30 28 24 / 72%); border-radius: 6px; }
.meter { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; margin-bottom: 5px; }
.track { height: 14px; background: rgb(0 0 0 / 50%); border: 1.5px solid #fff; border-radius: 2px; overflow: hidden; }
.track i { display: block; height: 100%; width: 100%; background: #6fce6b; }
#stamina { background: #7fd0f2; }
#special-box { margin-top: 6px; font-size: 22px; }
#special-box.ready { color: var(--lapis); }

#damage { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgb(216 66 58 / 75%)); }

#scoreboard {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, calc(100vw - 32px));
}
.board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-size: 25px; }
th, td { text-align: right; padding: 0 5px; line-height: 30px; font-weight: 400; }
th:nth-child(-n+2), td:nth-child(-n+2) { text-align: left; }
th { color: var(--soft); }
tr.me td { background: rgb(242 182 60 / 55%); }
.legend { color: var(--soft); font-size: 18px; margin-top: 6px; }
#end-actions { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 12px; }

/* Tutorial e Corrida */
#activity-msg {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%) rotate(-0.4deg);
  width: max-content; max-width: min(720px, calc(100vw - 32px)); padding: 6px 18px;
  background: rgb(251 247 234 / 94%); color: var(--ink); text-shadow: none; font-size: 26px; line-height: 1.25; text-align: center;
  box-shadow: 0 3px 8px rgb(0 0 0 / 35%);
}
#activity-end { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(520px, calc(100vw - 32px)); text-align: center; }
#activity-end h2 { margin: 0 0 6px; font-size: 40px; }
#activity-end p { margin: 4px 0; font-size: 24px; }
#act-best { color: var(--soft); }
#act-best.record { color: #2f8a58; }
.act-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
body.touch #activity-msg { top: 44px; font-size: 18px; padding: 4px 12px; }

#pause { position: fixed; top: 58%; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; }

#settings { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; }
.set-row { display: grid; grid-template-columns: 150px 1fr 54px; align-items: center; gap: 8px; min-height: 48px; line-height: 20px; }
.set-row select { grid-column: 2 / 4; min-height: 44px; font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 0 8px; }
.set-row input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--azul); touch-action: manipulation; }
.set-row output { text-align: right; }
#settings-close { display: block; margin: 8px auto 0; }

#net-banner { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 3px 16px; border-radius: 6px; background: var(--lapis); color: var(--ink); white-space: nowrap; }

#net-msg { width: 100%; text-align: center; color: #ffd879; min-height: 24px; }
#net-msg:empty { display: none; }

#lobby { align-self: center; width: min(960px, 100%); padding: 10px 18px 12px 42px; }
.link-row { display: flex; gap: 8px; align-items: center; }
.link-row input { flex: 1; min-width: 0; font: inherit; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 5px; background: #fff; color: var(--ink); }
.lobby-teams { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 18px; margin-top: 6px; }
.lobby-teams h3 { font-size: 24px; }
.lobby-teams ul { list-style: none; margin: 0 0 4px; padding: 0; min-height: 96px; line-height: 24px; }
.lobby-teams li.bots { color: var(--soft); }
.lobby-teams button { font-size: 17px; padding: 1px 12px; }
.lobby-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.lobby-actions .primary { font-size: 25px; padding: 2px 26px; }
.lobby-actions #leave-room { margin-left: auto; }
#lobby-note { color: var(--soft); }
#map, #lobby-map, #lobby-mode { font: inherit; min-height: 34px; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 0 6px; }
body.touch #map, body.touch #lobby-map, body.touch #lobby-mode { min-height: 44px; }
.lobby-teams li .is-ready { color: #1f7a47; }
body.touch .chat-row input, body.touch .chat-row button, body.touch .lobby-teams button { min-height: 44px; }
#lobby-chat { min-width: 0; }
.lobby-teams #chat-log { height: 128px; min-height: 0; margin: 0 0 4px; overflow-y: auto; overflow-wrap: anywhere; line-height: 22px; touch-action: pan-y; }
#chat-log b { font-weight: 400; color: var(--azul); }
.chat-row { display: flex; gap: 6px; }
.chat-row input { flex: 1; min-width: 0; font: inherit; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 5px; background: #fff; color: var(--ink); }
#menu.in-lobby .title, #menu.in-lobby .menu-foot { display: none; }
#menu.in-lobby { gap: 10px; }

#fatal { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--paper); text-align: center; font-size: 28px; }

#instagram {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px 0 11px;
  border-radius: 22px;
  background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 3px 10px rgb(0 0 0 / 40%);
}
#instagram:focus-visible { outline: 3px solid var(--lapis); outline-offset: 2px; }

/* Em telas pequenas, fica so o icone */
@media (max-width: 1000px), (max-height: 520px) {
  #instagram { width: 44px; height: 44px; padding: 0; justify-content: center; }
  #instagram span { display: none; }
}
/* No celular, a sala ocupa toda a largura */
@media (max-height: 520px), (max-width: 760px) {
  #menu.in-lobby #instagram { display: none; }
}
@media (max-width: 560px) {
  #menu { padding-bottom: 66px; }
}

/* Celular e tablet */
canvas#game { touch-action: none; }
#menu { touch-action: pan-y; }
#menu { z-index: 1; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.touch-keys, #rotate { display: none; }
body.touch .touch-keys { display: block; }
body.touch .mouse-keys { display: none; }

#touch {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.t-cluster { position: absolute; bottom: 12px; display: flex; align-items: flex-end; gap: 10px; }
.t-left { left: calc(14px + env(safe-area-inset-left)); }
.t-right { right: calc(14px + env(safe-area-inset-right)); display: grid; grid-template-columns: auto auto; place-items: center; gap: 8px; }
.t-top { position: absolute; top: 6px; right: calc(8px + env(safe-area-inset-right)); display: flex; gap: 6px; }
#t-stick {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgb(30 28 24 / 42%);
  pointer-events: auto;
  touch-action: none;
}
#t-knob { width: 58px; height: 58px; border: 2px solid #fff; border-radius: 50%; background: rgb(251 247 234 / 72%); pointer-events: none; }
#t-stick.held #t-knob { background: rgb(242 182 60 / 90%); }
#touch button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.t-round {
  width: 68px;
  height: 68px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgb(30 28 24 / 55%);
  color: #fff;
  font-size: 17px;
  line-height: 1;
}
.t-round.held { background: rgb(242 182 60 / 90%); color: var(--ink); }
#t-fire { width: 92px; height: 92px; font-size: 22px; background: rgb(216 66 58 / 70%); }
#t-boost { width: 80px; height: 80px; background: rgb(47 127 214 / 62%); }
#t-special.cooling { opacity: 0.5; }
.t-top button { min-height: 44px; min-width: 66px; padding: 0 8px; font-size: 16px; background: rgb(251 247 234 / 85%); }
.fs-toggle { display: none; place-items: center; width: 44px; height: 44px; padding: 0; touch-action: manipulation; }
body.can-fullscreen .fs-toggle { display: grid; }
.t-top .fs-toggle { min-width: 44px; padding: 0; }
.fs-toggle .fs-exit, body.is-fullscreen .fs-toggle .fs-enter { display: none; }
body.is-fullscreen .fs-toggle .fs-exit { display: block; }
#fs-menu { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); z-index: 1; }

body.touch.in-game #status { top: 8px; bottom: auto; left: calc(84px + env(safe-area-inset-left)); width: 152px; padding: 4px 8px; font-size: 15px; }
body.touch .meter { grid-template-columns: 38px 1fr; gap: 5px; margin-bottom: 2px; }
body.touch .track { height: 9px; }
body.touch #special-box { display: none; }
body.touch #scorebar { top: 4px; gap: 10px; padding: 0 12px; font-size: 24px; }
body.touch #clock { font-size: 17px; min-width: 42px; }
body.touch #killfeed { top: 58px; right: calc(8px + env(safe-area-inset-right)); }
body.touch #killfeed li { font-size: 14px; margin-bottom: 2px; padding: 0 6px; }
body.touch #killfeed li:nth-child(n+4) { display: none; }
body.touch #center-msg { top: 20%; font-size: 30px; }
body.touch #scoreboard { z-index: 3; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; }
body.touch #pause { top: 40%; z-index: 3; }
body.touch.in-game #scoreboard { pointer-events: none; }
body.touch.ended #scoreboard { pointer-events: auto; }

@media (orientation: portrait) {
  body.touch:not(.stay-portrait) #rotate, body.touch.in-game #rotate {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 18px;
    padding: 24px;
    background: var(--paper);
    color: var(--ink);
    text-align: center;
    font-size: 32px;
  }
}

@media (max-height: 720px) {
  .title h1 { font-size: 44px; }
  .title p { font-size: 20px; }
  .sheet h2 { font-size: 25px; line-height: 30px; }
}
@media (max-width: 860px) {
  #menu { overflow-y: auto; }
  .menu-row { flex-direction: column; }
  .menu-row .sheet { width: 100%; }
  .board-grid { grid-template-columns: 1fr; }
  .title h1 { font-size: 44px; }
  .lobby-teams ul { min-height: 0; }
}

/* Celular em pe: lista de avioes em botoes, para caber sem tanta rolagem */
@media (max-width: 560px) {
  .title p { display: none; }
  #plane-list { display: flex; flex-wrap: wrap; gap: 4px; }
  .plane-btn { width: auto; min-height: 44px; padding: 2px 12px; border-color: rgb(39 48 58 / 30%); }
  .plane-btn small { display: none; }
}

/* Celular deitado: pouca altura, tudo mais compacto */
@media (max-height: 520px) {
  body { font-size: 17px; }
  #menu { justify-content: flex-start; gap: 6px; padding: 6px calc(10px + env(safe-area-inset-right)) 10px calc(10px + env(safe-area-inset-left)); overflow-y: auto; }
  .title h1 { font-size: 25px; }
  .title p { display: none; }
  .menu-row { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 10px; }
  .menu-row .sheet { flex: 0 1 280px; width: auto; min-width: 0; }
  .sheet { padding: 5px 10px 7px 30px; background-image: linear-gradient(90deg, transparent 19px, var(--margin) 19px, var(--margin) 21px, transparent 21px); }
  .sheet h2 { font-size: 22px; line-height: 26px; }
  #plane-list { display: flex; flex-wrap: wrap; gap: 4px; }
  .plane-btn { width: auto; min-height: 44px; padding: 2px 12px; border-color: rgb(39 48 58 / 30%); }
  .plane-btn small, .tagline, #info-desc { display: none; }
  #info-bars { margin-top: 2px; }
  #plane-info h3 { font-size: 18px; margin-top: 3px; }
  #info-special-desc { font-size: 16px; line-height: 18px; }
  .bar-row { grid-template-columns: 78px minmax(0, 1fr) 36px; line-height: 17px; }
  .pips i { flex-basis: 20px; height: 9px; }
  button.primary { font-size: 22px; padding: 4px 22px; min-height: 44px; }
  button { min-height: 40px; }
  .menu-foot { gap: 10px; }
  .menu-foot input { width: 130px; min-height: 40px; }
  .keys { font-size: 15px; }

  #menu.in-lobby { gap: 6px; }
  #lobby { width: 100%; padding: 5px 10px 7px 30px; }
  .lobby-teams { gap: 10px; margin-top: 3px; }
  #menu.in-lobby #plane-info { display: none; }
  #menu.in-lobby .menu-row .sheet { flex: 1 1 auto; }
  .lobby-teams #chat-log { height: 64px; line-height: 19px; }
  .chat-row input, .chat-row button { min-height: 44px; }
  .lobby-teams h3 { font-size: 18px; }
  .lobby-teams ul { min-height: 0; line-height: 19px; margin-bottom: 2px; }
  .lobby-teams button { min-height: 44px; font-size: 15px; }
  .lobby-actions { margin-top: 4px; }

  .board-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  caption { font-size: 19px; }
  th, td { font-size: 15px; line-height: 21px; padding: 0 3px; }
  .legend { display: none; }
  #end-actions { margin-top: 4px; }
}

@media (max-width: 600px) {
  .lobby-teams { grid-template-columns: 1fr 1fr; }
  #lobby-chat { grid-column: 1 / -1; }
  .lobby-actions { flex-wrap: wrap; }
}

/* Doacao por Pix, ao lado do botao do Instagram */
#donate {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(66px + env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 190px;
  padding: 6px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
}
#donate img { display: block; }
#donate > div { flex: 1; min-width: 0; text-align: center; }
#donate p { font-size: 16px; line-height: 18px; margin-bottom: 4px; }
#pix-copy { width: 100%; min-height: 44px; padding: 0 2px; font-size: 16px; line-height: 17px; }
#pix-key { flex-basis: 100%; font-size: 11px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
#donate-toggle { display: none; position: fixed; right: calc(240px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 2; min-height: 44px; padding: 0 12px; font-size: 18px; }
#menu.in-lobby #donate { display: none; }
#menu.in-lobby #donate-toggle { display: block; }
#menu.in-lobby #donate.open { display: flex; }

/* Pix e Instagram ficam empilhados no canto; a barra de baixo nao entra nesse espaco e quebra linha se precisar. */
@media (min-width: 1001px) and (min-height: 521px) {
  #menu:not(.in-lobby) .menu-foot { margin-right: 190px; gap: 8px 10px; }
  #menu:not(.in-lobby) .menu-foot input { width: 140px; }
  #menu:not(.in-lobby) .menu-foot button { padding-left: 12px; padding-right: 12px; }
  #menu:not(.in-lobby) .menu-foot button.primary { padding-left: 22px; padding-right: 22px; }
}
/* Com folga dos dois lados, a barra volta a ficar no centro da tela. */
@media (min-width: 1560px) and (min-height: 521px) {
  #menu:not(.in-lobby) .menu-foot { margin-left: 190px; }
}
@media (max-width: 1240px), (max-height: 760px) {
  #donate { display: none; }
  #donate.open { display: flex; }
  #donate-toggle { display: block; }
}
@media (min-width: 1001px) and (min-height: 521px) and (max-width: 1240px), (min-width: 1001px) and (min-height: 521px) and (max-height: 760px) {
  #menu:not(.in-lobby) .menu-foot .keys { display: none; }
  #menu:not(.in-lobby) { overflow-y: auto; }
  #menu:not(.in-lobby) .menu-foot label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #menu:not(.in-lobby) #donate-toggle { right: calc(16px + env(safe-area-inset-right)); bottom: calc(66px + env(safe-area-inset-bottom)); }
  #menu:not(.in-lobby) #donate { bottom: calc(118px + env(safe-area-inset-bottom)); }
}
@media (max-width: 1000px), (max-height: 520px) {
  #donate-toggle { right: calc(68px + env(safe-area-inset-right)); font-size: 16px; }
}
@media (max-height: 520px), (max-width: 760px) {
  #menu.in-lobby #donate-toggle, #menu.in-lobby #donate.open { display: none; }
}
@media (max-width: 1700px) {
  #menu.in-lobby #instagram, #menu.in-lobby #donate-toggle, #menu.in-lobby #donate.open { display: none; }
}
@media (max-width: 560px) {
  #donate-toggle { top: calc(8px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); right: auto; bottom: auto; width: 58px; padding: 0 2px; font-size: 14px; line-height: 15px; }
  #donate { top: calc(60px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); right: auto; bottom: auto; }
}

/* Escolha de skin */
#skin-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.skin-btn { min-height: 44px; padding: 0 12px; font-size: 18px; }
.skin-btn[aria-pressed="true"] { background: rgb(242 182 60 / 55%); border-color: var(--ink); }
/* Com 3 ou mais skins, a ficha do aviao sobe para nao ficar atras do Pix em telas baixas. */
@media (min-width: 1100px) and (max-height: 880px) {
  #menu:not(.in-lobby) #plane-info { margin-top: -130px; }
}

/* ---------- Celular: os botoes principais ficam sempre na tela; so as listas rolam ---------- */
@media (max-height: 520px), (max-width: 860px) and (orientation: portrait) {
  #menu, #menu.in-lobby {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    overflow: hidden;
    padding: calc(4px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  }
  .title { flex: none; }
  .title h1 { line-height: 44px; }
  .title p { display: none; }

  .menu-row { flex: 1 1 0; min-height: 0; }
  .menu-row .sheet, .lobby-teams { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }

  .keys { display: none !important; }
  .menu-foot { flex: none; gap: 6px; padding: 5px 6px; border-radius: 6px; background: rgb(30 28 24 / 72%); }
  .menu-foot label > span, .lobby-actions label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .menu-foot input, #map, #lobby-map, #lobby-mode { min-height: 44px; margin: 0; }
  .menu-foot button, .lobby-actions button { min-height: 44px; padding: 0 10px; white-space: nowrap; }
  .menu-foot button.primary, .lobby-actions button.primary { font-size: 20px; padding: 0 14px; }

  /* Na sala: a escolha do aviao vira uma faixa e a lista de jogadores usa o resto */
  #menu.in-lobby .menu-row { flex: none; overflow: visible; }
  #menu.in-lobby #plane-info { display: none; }
  #menu.in-lobby .menu-row .sheet { flex: 1 1 auto; width: 100%; padding: 4px calc(54px + env(safe-area-inset-right)) 4px 30px; overflow: hidden; }
  #menu.in-lobby .menu-row .sheet h2 { display: none; }
  #menu.in-lobby #plane-list { flex-wrap: nowrap; overflow-x: auto; touch-action: pan-x; }
  #menu.in-lobby .plane-btn { flex: none; min-height: 40px; padding: 0 9px; }
  #lobby { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; width: 100%; align-self: stretch; }
  .link-row, .lobby-actions { flex: none; }
  .lobby-teams { flex: 1 1 0; min-height: 0; align-content: start; }
  #lobby-chat h3 { display: none; }
  .lobby-teams #chat-log { height: 64px; }
  #lobby-note { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #room-link { min-height: 36px; }
}

/* Deitado: titulo a esquerda, atalhos no alto a direita e uma linha so de botoes */
@media (max-height: 520px) {
  .title { text-align: left; }
  .title h1 { font-size: 26px; }
  .menu-row { flex-direction: row; align-items: stretch; }
  .menu-row .sheet { flex: 0 1 270px; }
  #plane-info { display: flex; flex-direction: column; }
  #skin-row { order: 1; }
  #skin-row h3 { margin-top: 2px; }
  #info-special-desc { order: 2; margin-top: 4px; }
  .menu-foot { flex-wrap: wrap; justify-content: center; }
  .menu-foot input { width: 112px; }
  #map { max-width: 132px; }
  #lobby-map, #lobby-mode { max-width: 150px; }
  .lobby-actions { flex-wrap: nowrap; gap: 8px; }
  #fs-menu { top: calc(4px + env(safe-area-inset-top)); }
  #instagram { top: calc(4px + env(safe-area-inset-top)); bottom: auto; right: calc(62px + env(safe-area-inset-right)); }
  #donate-toggle { top: calc(4px + env(safe-area-inset-top)); bottom: auto; left: auto; right: calc(114px + env(safe-area-inset-right)); width: auto; padding: 0 10px; }
  #donate { top: calc(52px + env(safe-area-inset-top)); bottom: auto; left: auto; right: calc(10px + env(safe-area-inset-right)); }
}

/* Em pe: rola so a ficha do aviao; nome, mapa e botoes ficam fixos embaixo */
@media (max-width: 860px) and (orientation: portrait) {
  .title h1 { font-size: 25px; }
  .menu-row { flex-direction: column; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; justify-content: flex-start; align-items: stretch; gap: 8px; }
  .menu-row .sheet { flex: none; overflow: visible; }
  .menu-foot { display: grid; grid-template-columns: 1fr 1fr; }
  .menu-foot input, #map { width: 100%; min-width: 0; }
  .menu-foot label { min-width: 0; }
  .menu-foot .open-settings, #net-msg { grid-column: 1 / -1; }
  #instagram { top: calc(8px + env(safe-area-inset-top)); bottom: auto; right: calc(62px + env(safe-area-inset-right)); }

  #menu.in-lobby .menu-row { flex: none; }
  #lobby { padding: 8px 10px 8px 30px; }
  .link-row label { flex: 1; min-width: 0; }
  #room-link { display: none; }
  .lobby-teams { grid-template-columns: 1fr 1fr; }
  #lobby-chat { grid-column: 1 / -1; }
  .lobby-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .lobby-actions #start, .lobby-actions #ready, #lobby-note { grid-column: 1 / -1; }
  .lobby-actions label { grid-column: 1 / -1; }
  #lobby-map, #lobby-mode { width: 100%; }
  .lobby-actions #leave-room { margin-left: 0; }
}
@media (max-width: 860px) and (orientation: portrait) {
  #menu.in-lobby #plane-list { flex-wrap: wrap; overflow: visible; touch-action: auto; }
}

/* Logo do jogo no menu */
.title h1 img { display: block; height: 118px; max-width: 100%; margin: 0 auto; }
@media (max-height: 720px) { .title h1 img { height: 82px; } }
@media (max-width: 860px) { .title h1 img { height: 70px; } }
@media (max-height: 520px) { .title h1 img { height: 40px; margin: 2px 0 0; } }
@media (max-width: 860px) and (orientation: portrait) { .title h1 img { width: 120px; height: auto; margin-top: 7px; } }

/* ---------- Celulares menores, mesmo com a barra do navegador aberta ---------- */

/* Configuracoes vira so a engrenagem quando falta largura (o texto continua para leitores de tela) */
@media (max-width: 860px) and (orientation: portrait), (max-height: 520px) and (max-width: 720px) {
  .menu-foot .open-settings, .lobby-actions .open-settings { flex: none; width: 44px; padding: 0; font-size: 0; }
  .menu-foot .open-settings::before, .lobby-actions .open-settings::before { content: ""; display: block; width: 26px; height: 26px; margin: auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2327303a'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* Em pe: logo ao lado do Pix, sem encostar nos atalhos; botoes em duas linhas */
@media (max-width: 860px) and (orientation: portrait) {
  .title { padding-left: 64px; text-align: left; }
  .title h1 img { width: min(120px, calc(100vw - 190px)); margin: 7px 0 0; }
  .menu-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 44px; }
  .menu-foot label:has(#map) { grid-column: 2 / -1; }
  .menu-foot .open-settings { grid-column: auto; }
  .menu-foot button.primary { padding: 0 6px; }
  #play { white-space: normal; line-height: 1.05; padding: 0 6px; }
  .lobby-actions .open-settings { width: 100%; font-size: inherit; padding: 0 10px; }
  .lobby-actions .open-settings::before { content: none; }
}
@media (max-width: 420px) {
  .set-row { grid-template-columns: 104px 1fr 44px; }
  #settings { padding: 8px 10px 10px 30px; }
}

/* Deitado: tres colunas na sala em qualquer largura e campos mais estreitos */
@media (max-height: 520px) {
  .lobby-teams { grid-template-columns: 1fr 1fr 1.25fr; }
  #lobby-chat { grid-column: auto; }
  .lobby-actions { flex-wrap: nowrap; }
}
@media (max-height: 520px) and (max-width: 720px) {
  .menu-foot { flex-wrap: nowrap; }
  .menu-foot input { width: 92px; }
  #map { max-width: 108px; }
  #lobby-map, #lobby-mode { max-width: 112px; }
  .menu-foot button.primary, .lobby-actions button.primary { font-size: 18px; padding: 0 8px; }
  #play { padding: 0 8px; }
  .menu-row .sheet { padding-right: 6px; }
  #room-link { display: none; }
  .link-row label { flex: 1; min-width: 0; }
  #lobby-note { display: none; }
}
@media (max-height: 320px) {
  #menu:not(.in-lobby) .menu-row .sheet > h2:not(#info-name) { display: none; }
  .title h1 { line-height: 40px; }
  .title h1 img { height: 36px; }
  #menu, #menu.in-lobby { gap: 4px; }
}

/* Partida em telas pequenas: controles menores para sobrar visao */
@media (max-height: 340px), (max-width: 640px) {
  body.touch #t-stick { width: 104px; height: 104px; }
  body.touch #t-knob { width: 46px; height: 46px; }
  body.touch .t-round { width: 56px; height: 56px; font-size: 14px; }
  body.touch #t-fire { width: 76px; height: 76px; font-size: 19px; }
  body.touch #t-boost { width: 66px; height: 66px; }
  body.touch .t-cluster { bottom: 8px; }
  body.touch .t-right { gap: 5px; }
  body.touch.in-game #status { width: 118px; padding: 3px 6px; font-size: 14px; }
  body.touch .meter { grid-template-columns: 34px 1fr; gap: 4px; }
  body.touch .t-top button { min-width: 54px; font-size: 14px; padding: 0 5px; }
  body.touch .t-top .fs-toggle { min-width: 44px; padding: 0; }
  body.touch #killfeed { top: 54px; }
  body.touch #killfeed li { font-size: 12px; }
  body.touch #killfeed li:nth-child(n+3) { display: none; }
  body.touch #center-msg { top: 22%; font-size: 24px; }
}

/* Sala deitada em telas bem baixas: a conversa cabe sem rolar */
@media (max-height: 320px) {
  .lobby-teams #chat-log { height: 40px; }
}

/* Aviso para deitar o celular */
#rotate img { width: min(300px, 80vw); }
#rotate p { font-size: 28px; line-height: 1.15; max-width: 320px; }
#rotate button.primary { min-height: 52px; font-size: 26px; }
#rotate-stay { min-height: 44px; border-color: transparent; background: transparent; color: var(--soft); text-decoration: underline; font-size: 18px; }
body:not(.can-fullscreen) #rotate-now, body.in-game #rotate-stay { display: none; }
.rotate-phone { color: var(--ink); animation: girar 2.6s ease-in-out infinite; }
@keyframes girar { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-phone { animation: none; transform: rotate(-90deg); } }

/* Zoom do aviao no menu: lupa discreta no canto da ficha */
#plane-info { position: relative; }
#zoom-toggle { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--soft); }
#zoom-toggle[aria-pressed="true"] { color: var(--azul); }
#zoom-toggle[aria-pressed="true"] .zoom-plus { display: none; }
@media (hover: hover) { #zoom-toggle:hover { background: transparent; color: var(--ink); } }
@media (max-width: 860px) and (orientation: portrait) { #zoom-toggle { display: none; } }

.t-cluster.t-left { flex-direction: column; align-items: flex-start; gap: 6px; }
#touch .t-cam { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgb(30 28 24 / 55%); color: #fff; touch-action: manipulation; }
#touch .t-cam[aria-pressed="true"] { background: rgb(242 182 60 / 90%); color: var(--ink); }
/* Tela bem baixa: o botao vai para o lado do minimapa, sem encostar nele */
@media (max-height: 285px) {
  #touch .t-cam { transform: translateX(68px); }
}
/* Vacuo: o Sopro brilha enquanto enche mais rapido */
#stamina.draft { background: #ffd24a; box-shadow: 0 0 8px #ffd24a; }
#start:disabled { opacity: 0.55; cursor: not-allowed; }

/* Login e ranking */
#ranking { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; }
#ranking-login, #ranking-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0; }
#ranking-list table { width: 100%; }
#ranking-list th:nth-child(n+3), #ranking-list td:nth-child(n+3) { text-align: right; }
#ranking-list td:nth-child(2) { overflow-wrap: anywhere; }
#ranking-list th:nth-child(2), #ranking-list td:nth-child(2) { text-align: left; }
#rank-result { text-align: center; font-size: 24px; }
body.touch #ranking button { min-height: 44px; }

/* Loja de skins */
#menu.in-store .title, #menu.in-store .menu-row, #menu.in-store .menu-foot, #menu.in-store #donate, #menu.in-store #donate-toggle, #menu.in-store #instagram { visibility: hidden; }
#store { position: fixed; top: 50%; left: 16px; transform: translateY(-50%); z-index: 5; width: min(360px, calc(50vw - 16px)); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; }
#store h2 { margin-bottom: 2px; }
#store-packs { display: grid; gap: 10px; margin: 8px 0; }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pack-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 0; padding: 6px 4px 5px; border: 2px solid var(--soft); border-radius: 10px; background: #fff; box-shadow: none; line-height: 1.1; }
.pack-tile b { font-size: 15px; }
.pack-tile small { font-size: 13px; color: var(--soft); }
.pack-tile[aria-pressed="true"] { border-color: var(--ink); background: #fff8e1; box-shadow: 2px 3px 0 var(--ink); }
.pack-swatch { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #ddd; }
.pack-swatch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.picasso-swatch { background: conic-gradient(#d8423a, #f2b63c, #3f8a72, #2f7fd6, #8a5cc9, #ef7fa8, #d8423a); }
.store-detail { border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; background: #fff; }
.store-detail h3 { margin: 0; font-size: 22px; }
.store-detail .legend { margin: 2px 0 6px; }
.plane-step { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0 8px; }
.plane-step button { min-width: 44px; min-height: 44px; padding: 0; font-size: 18px; }
.plane-step span { flex: 1; text-align: center; line-height: 1.1; }
.plane-step b { display: block; font-size: 20px; }
.plane-step small { color: var(--soft); }
.pack-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pack-buy strong { font-size: 24px; }
#store-close { display: block; margin: 8px auto 0; }
body.touch #store button { min-height: 44px; }

/* Com 15 avioes, a lista vira duas colunas no computador */
@media (min-width: 1001px) and (min-height: 521px) {
  #menu:not(.in-lobby) .menu-row .sheet:first-child { width: 400px; }
  #plane-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4px; }
  .plane-btn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Progressao: licao de casa e avioes travados */
#progress { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; }
#progress progress { display: block; width: 100%; height: 12px; accent-color: var(--azul); }
#progress-missions { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
#progress-missions b { display: block; }
#progress-missions small { color: var(--soft); }
#progress-missions .done b { text-decoration: line-through; color: var(--soft); }
#progress-close { display: block; margin: 8px auto 0; }
#prog-result { text-align: center; font-size: 22px; }
.plane-btn.locked { border-style: dashed; color: var(--soft); }
#unlock-row { margin: 4px 0; }
#unlock-note { color: var(--vermelho); }
body.touch #progress button, body.touch #unlock-row button { min-height: 44px; }
#unlock-buy { font-size: 20px; line-height: 24px; padding: 4px 10px; width: 100%; }
#unlock-buy:disabled { opacity: 0.5; cursor: not-allowed; }

/* Escolha do apelido */
#nick { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 8px; background: rgb(39 48 58 / 65%); }
#nick .sheet { width: min(460px, 100%); max-height: 100%; overflow-y: auto; }
#nick-input { display: block; width: 100%; font-size: 24px; margin-top: 6px; }
#nick-error { color: var(--vermelho); min-height: 24px; }
#nick-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
body.touch #nick button { min-height: 44px; }
#name:disabled { opacity: 0.75; }

/* ---------- Menu em ambientes ---------- */
#home-nav, #profile-bar, #menu-back, #play, #create-panel, #find-panel { display: none; }
#menu[data-view="home"] { justify-content: center; align-items: flex-start; gap: 12px; padding: 18px clamp(20px, 7vw, 110px); background: none; }
#menu[data-view="home"] .title { text-align: left; color: var(--ink); text-shadow: none; }
#menu[data-view="home"] .title h1 img { margin: 0; }
#menu:not([data-view="home"]) .title { display: none; }
#menu:not([data-view="arsenal"]):not(.in-lobby) .menu-row { display: none; }
#menu #arsenal-extra, #menu #arsenal-up { display: none; }
#menu[data-view="arsenal"] #arsenal-extra, #menu[data-view="arsenal"] #arsenal-up { display: block; }
#menu .menu-foot, #menu:not(.in-lobby) .menu-foot { margin: 0; padding: 0; background: none; min-height: 0; }
.menu-foot:has(#net-msg:empty) { display: none; }
#net-msg { width: auto; padding: 2px 12px; border-radius: 6px; background: rgb(30 28 24 / 82%); }
#menu[data-view="home"] #home-nav { display: grid; grid-template-columns: 1fr; gap: 10px; width: min(340px, 100%); }
#home-nav button { font-size: 24px; padding: 6px 18px; text-align: left; border-radius: 6px 14px 8px 12px; box-shadow: 3px 4px 0 rgb(39 48 58 / 35%); }
#home-nav button.primary { font-size: 30px; }
#menu[data-view="home"] #profile-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; position: fixed; top: calc(10px + env(safe-area-inset-top)); right: calc(66px + env(safe-area-inset-right)); left: 45%; }
#name-wrap { display: flex; align-items: center; gap: 6px; color: var(--ink); }
#name-wrap input { font: inherit; width: 150px; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); color: var(--ink); }
#menu:not([data-view="home"]) #donate, #menu:not([data-view="home"]) #donate-toggle, #menu:not([data-view="home"]) #instagram { display: none; }
body:has(#settings:not([hidden])) #home-nav, body:has(#settings:not([hidden])) #menu .title { visibility: hidden; }
#settings .keys { margin-top: 8px; font-size: 17px; line-height: 21px; }
#settings .keys b { color: var(--vermelho); }

#menu[data-view="arsenal"] #menu-back, #menu[data-view="create"] #menu-back, #menu[data-view="find"] #menu-back { display: block; position: fixed; top: calc(8px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); z-index: 2; min-height: 44px; padding: 0 16px; }
#menu[data-view="arsenal"] #play { display: block; position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; white-space: nowrap; font-size: 24px; padding: 4px 26px; min-height: 44px; }
#menu[data-view="arsenal"], #menu[data-view="create"], #menu[data-view="find"], #menu[data-view="store"] { background: none; }
#menu[data-view="arsenal"] { padding-top: 60px; padding-bottom: 66px; justify-content: center; }
#menu[data-view="arsenal"] #plane-info { margin-top: 0; }
#menu[data-view="arsenal"] .menu-row { flex: 1 1 0; min-height: 0; align-items: center; }
#menu[data-view="arsenal"] .menu-row .sheet { max-height: 100%; overflow-y: auto; }

#menu[data-view="create"], #menu[data-view="find"] { justify-content: center; align-items: center; }
#menu[data-view="create"] #create-panel { display: block; width: min(480px, 100%); max-height: 100%; overflow-y: auto; }
#create-panel #create { display: block; margin: 8px auto 0; }
#create-panel .set-row { grid-template-columns: 170px 1fr; }
#create-panel .set-row select { grid-column: 2; }
#menu[data-view="find"] #find-panel { display: block; width: min(640px, 100%); max-height: calc(100% - 44px); margin-top: 44px; overflow-y: auto; background-color: #c79a63; background-image: none; padding: 12px 18px; border: 10px solid #8e6239; border-radius: 4px; }
#find-panel h2 { color: var(--ink); text-align: center; }
#find-list { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.find-card { position: relative; display: block; width: 100%; min-height: 64px; text-align: left; background: var(--paper); border: 0; border-radius: 2px; padding: 12px 12px 8px; box-shadow: 2px 3px 6px rgb(0 0 0 / 35%); }
.find-card::before { content: ""; position: absolute; top: 4px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--vermelho); box-shadow: 1px 2px 2px rgb(0 0 0 / 40%); }
#find-list li:nth-child(odd) .find-card { transform: rotate(-1deg); }
#find-list li:nth-child(even) .find-card { transform: rotate(0.8deg); }
.find-card b, .find-card small { display: block; font-weight: 400; overflow-wrap: anywhere; }
.find-card small { color: var(--soft); }
#find-empty { color: var(--ink); text-align: center; margin: 14px 0; font-size: 21px; }
#find-refresh { display: block; margin: 8px auto 0; min-height: 44px; }

@media (max-height: 520px), (max-width: 760px) {
  #menu[data-view="home"] { padding: 6px 14px; gap: 6px; }
  #menu[data-view="home"] #home-nav { grid-template-columns: 1fr 1fr; gap: 6px; width: min(430px, 72vw); }
  #home-nav button, #home-nav button.primary { font-size: 18px; min-height: 44px; padding: 0 10px; text-align: center; }
  #home-nav button.primary { font-size: 20px; }
  #home-nav button.primary:first-child, #home-nav button.primary:nth-child(2) { grid-column: span 1; }
  #name-wrap span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #name-wrap input { width: 112px; min-height: 40px; }
  #profile-bar button { min-height: 40px; padding: 0 10px; font-size: 17px; }
  #menu[data-view="home"] #profile-bar { left: 38%; right: calc(60px + env(safe-area-inset-right)); top: calc(4px + env(safe-area-inset-top)); gap: 5px; }
  #menu[data-view="arsenal"] { padding: 54px 10px 54px; }
  #menu[data-view="arsenal"] #play { font-size: 18px; bottom: calc(5px + env(safe-area-inset-bottom)); }
  #menu[data-view="create"], #menu[data-view="find"] { padding: 54px 10px 6px; justify-content: flex-start; }
  #menu[data-view="find"] #find-panel { margin-top: 0; max-height: 100%; padding: 6px 10px; border-width: 6px; }
  #create-panel .set-row { grid-template-columns: 130px 1fr; min-height: 44px; }
  #create-panel .legend { font-size: 15px; margin: 0; }
  #create-panel #create { font-size: 20px; padding: 0 30px; min-height: 40px; margin-top: 2px; }
  #create-panel h2 { display: none; }
}
#menu[data-view="home"] .title h1 img { height: min(22vh, 170px); }

#find-empty, #create-panel .legend, #arsenal-extra .legend, #arsenal-up .legend { display: block; }
@media (max-height: 520px), (max-width: 760px) {
  #menu[data-view="home"] #instagram { top: auto; bottom: calc(6px + env(safe-area-inset-bottom)); right: calc(10px + env(safe-area-inset-right)); }
  #menu[data-view="home"] #donate-toggle { top: auto; left: auto; bottom: calc(6px + env(safe-area-inset-bottom)); right: calc(62px + env(safe-area-inset-right)); width: auto; padding: 0 10px; }
  #menu[data-view="home"] #donate { top: auto; left: auto; bottom: calc(56px + env(safe-area-inset-bottom)); right: calc(10px + env(safe-area-inset-right)); }
}

#set-music-toggle { grid-column: 2 / 4; min-height: 44px; }
#set-music-toggle[aria-pressed="true"] { background: rgb(242 182 60 / 55%); }
#set-music:disabled { opacity: 0.4; }

#find-quick { display: block; margin: 6px auto 2px; }
#find-quick-help { color: var(--ink); text-align: center; margin: 0 0 6px; }
@media (max-height: 520px), (max-width: 760px) {
  #find-quick { font-size: 20px; padding: 0 30px; min-height: 44px; }
  #find-panel h2 { display: none; }
}

/* ---------- Deck ---------- */
#deck-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 4px; }
#deck-label { color: var(--vermelho); }
#deck-slots { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
.deck-slot { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 0 4px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-slot[aria-pressed="true"] { background: var(--lapis); }
.deck-slot:disabled { opacity: 0.5; }
#deck-toggle { min-height: 36px; padding: 0 10px; font-size: 16px; }
#deck-toggle[hidden] { display: none; }
#deck-help { margin: 0 0 4px; }
#deck-pick { position: absolute; top: 38%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: auto; }
#deck-pick[hidden] { display: none; }
#deck-pick p { margin: 0; font-size: 22px; }
#deck-pick-list { display: flex; gap: 8px; }
#deck-pick-list button { min-height: 44px; padding: 0 14px; font-size: 20px; white-space: nowrap; }
#deck-pick-list button[aria-pressed="true"] { background: var(--lapis); }
@media (max-height: 520px), (max-width: 760px) {
  #deck-label, #deck-help { display: none; }
  .deck-slot, #deck-toggle { font-size: 14px; }
  #deck-pick { top: 42%; }
  #deck-pick p { font-size: 17px; }
  #deck-pick-list button { font-size: 16px; padding: 0 9px; }
}

/* ---------- Atelie Picasso ---------- */
#picasso { position: fixed; inset: 0; z-index: 30; display: flex; background: #d9cfb6; color: var(--ink); }
#picasso[hidden] { display: none; }
#pic-stage { position: relative; flex: 1 1 0; min-width: 0; }
#pic-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
#pic-canvas.turning { cursor: grab; }
#pic-mode { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); display: flex; gap: 6px; }
#pic-mode button, #pic-actions button { min-height: 44px; padding: 0 12px; }
#pic-mode button[aria-pressed="true"], #pic-actions button[aria-pressed="true"], #pic-textures button[aria-pressed="true"] { background: var(--lapis); }
#pic-tools { flex: 0 0 340px; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); padding-right: calc(12px + env(safe-area-inset-right)); background: var(--paper); border-left: 3px solid var(--ink); }
#pic-tools h2 { margin: 0 0 4px; }
#pic-tools h3 { margin: 8px 0 3px; }
.pic-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.pic-row > span { flex: 0 0 auto; min-width: 18px; }
.pic-row input[type="range"], .pic-row select { flex: 1 1 auto; min-width: 0; }
.pic-row output { flex: 0 0 32px; text-align: right; }
#pic-color { width: 56px; height: 34px; padding: 0; }
#pic-swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
#pic-swatches button { min-height: 34px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; aspect-ratio: 1; }
#pic-swatches button[aria-pressed="true"] { outline: 3px solid var(--vermelho); outline-offset: 1px; }
#pic-textures { display: flex; flex-wrap: wrap; gap: 4px; }
#pic-textures button { min-height: 40px; padding: 0 10px; }
#pic-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
#pic-note { margin: 8px 0; font-size: 16px; line-height: 20px; color: var(--soft); }
#pic-done { display: block; width: 100%; min-height: 44px; }
#paint-open { display: block; margin-top: 6px; min-height: 40px; }
@media (max-height: 520px), (max-width: 760px) {
  #pic-tools { flex-basis: 290px; padding-top: 6px; }
  #pic-tools h2 { display: none; }
  #pic-swatches button { min-height: 28px; }
}

/* ---------- Pronto e pinturas da sala ---------- */
#deck-go { min-height: 44px; font-size: 22px; padding: 0 30px; }
#deck-go:disabled { opacity: 0.7; }
#deck-keys { font-size: 16px; }
.paint-list { flex-basis: 100%; max-height: 40vh; margin-top: 6px; padding: 6px 10px; overflow-y: auto; overscroll-behavior: contain; border-radius: 6px; background: var(--paper); color: var(--ink); text-shadow: none; }
.paint-list[hidden] { display: none; }
.paint-list p { margin: 0 0 4px; }
.paint-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.paint-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paint-row button { flex: none; min-height: 40px; padding: 0 10px; font-size: 16px; }
#pause:has(.paint-list:not([hidden])) { top: 8px; }
@media (max-height: 520px), (max-width: 760px) {
  #deck-go { min-height: 40px; font-size: 18px; padding: 0 22px; }
  #deck-pick { top: 34%; gap: 3px; }
}

/* ---------- Banners da loja ---------- */

/* Arvore dos avioes: niveis e melhorias */
:root { --tier1: #4f9a5a; --tier2: #2f7fd6; --tier3: #a2479e; }
.tier-head { grid-column: 1 / -1; flex-basis: 100%; margin: 6px 0 0; font-size: 16px; line-height: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tier-head:first-child { margin-top: 0; }
.tier-head[data-tier="1"], #info-tier[data-tier="1"] { color: var(--tier1); }
.tier-head[data-tier="2"], #info-tier[data-tier="2"] { color: var(--tier2); }
.tier-head[data-tier="3"], #info-tier[data-tier="3"] { color: var(--tier3); }
.plane-btn[data-tier] { border-left: 4px solid transparent; }
.plane-btn[data-tier="1"] { border-left-color: var(--tier1); }
.plane-btn[data-tier="2"] { border-left-color: var(--tier2); }
.plane-btn[data-tier="3"] { border-left-color: var(--tier3); }
#info-tier { margin: 0; font-weight: 700; font-size: 18px; }
#unlock-steps { list-style: none; margin: 2px 0 6px; padding: 0; font-size: 18px; line-height: 22px; }
#unlock-steps li::before { content: "○ "; }
#unlock-steps li.ok { color: var(--tier1); }
#unlock-steps li.ok::before { content: "✓ "; }
#up-xp { margin: 4px 0 2px; font-weight: 700; }
#up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#up-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 2px 6px; border-radius: 6px; border: 1px dashed rgb(39 48 58 / 25%); color: var(--soft); }
#up-list li b { font-size: 18px; line-height: 20px; }
#up-list li small { grid-column: 1; font-size: 15px; line-height: 16px; }
#up-list li > span, #up-list li > button { grid-column: 2; grid-row: 1 / span 2; font-size: 15px; }
#up-list li.done { border-style: solid; border-color: var(--tier1); color: var(--ink); }
#up-list li.done > span { color: var(--tier1); font-weight: 700; }
#up-list li.next { border-style: solid; border-color: var(--lapis); color: var(--ink); }
#up-list li > button { padding: 2px 8px; line-height: 20px; }
#up-list li > button:disabled { opacity: .5; cursor: not-allowed; }
body.touch #up-list li > button { min-height: 40px; }
#up-note { margin: 4px 0 0; color: var(--vermelho); font-size: 17px; }
#up-note:empty { display: none; }
#menu.in-lobby .tier-head { flex: none; align-self: center; margin: 0 4px; }

/* Sala de espera no computador: as folhas de cima encolhem e rolam, para a sala nunca sair da tela */
@media (min-width: 1001px) and (min-height: 521px) {
  #menu.in-lobby .menu-row { flex: 1 1 0; min-height: 0; align-items: flex-start; }
  #menu.in-lobby .menu-row .sheet { max-height: 100%; overflow-y: auto; }
  #menu.in-lobby #lobby { flex: none; }
}
@media (max-height: 520px) { .pack-swatch { aspect-ratio: 2.2; } #store .legend { display: none; } }

/* Denuncia pelo placar (TAB + clique) */
.flag-col { width: 34px; }
.flag-btn { min-height: 0; padding: 2px 6px; font-size: 16px; line-height: 1; background: none; border: 0; box-shadow: none; cursor: pointer; }
.flag-btn:disabled { opacity: 0.35; cursor: default; }
#report-menu { margin: 8px 0; padding: 8px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }
#report-who { margin: 0 0 6px; font-weight: bold; }
.report-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
#board-close { display: block; margin: 8px auto 0; }

/* Feedback dos jogadores (botao embaixo do Pix) */
#feedback-open { flex-basis: 100%; min-height: 40px; padding: 0 6px; font-size: 15px; }
#feedback { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 16px); overflow-y: auto; }
#feedback textarea { display: block; width: 100%; resize: vertical; font: inherit; font-size: 18px; padding: 6px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; }
#feedback input { display: block; width: 100%; margin: 2px 0 6px; }
#feedback-msg { min-height: 22px; margin: 4px 0; }
#feedback-msg.ok { color: var(--verde, #2e7d4f); }
#feedback-msg.bad { color: #c0392b; }
.feedback-actions { display: flex; gap: 8px; justify-content: center; }