/* ==========================================================================
   Grid Rush: Color Match — estilos (v2.0)
   Layout da arte de referência: topo (casinha/pausa · logo · engrenagem),
   "PRÓXIMA PEÇA" à esquerda, Pontos/Fase/Tempo empilhados à direita,
   tabuleiro largo e 4 botões redondos (+ GUARDAR no meio).
   ========================================================================== */

@font-face {
  font-family: "Lilita One";
  src: url("fonts/lilita-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --bg-3: #122a7a;
  --panel: rgba(9, 26, 88, 0.66);
  --panel-border: rgba(165, 205, 255, 0.7);
  --text: #ffffff;
  --muted: #d7e6ff;
  --ink: #0b1f5c;
  --outline: #0d2f7a;
  --btn-top: #7cbcff;
  --btn-bottom: #2b67dc;
  --btn-edge: #163a90;
  --gold-top: #ffd43b;
  --gold-bottom: #ff9800;
  --gold-edge: #b25c00;
  --good: #3ddc5a;
  --bad: #ff3d57;

  /* Capacitor 8 (SystemBars, insetsHandling "css") injeta --safe-area-inset-*;
     no navegador vale o env() do viewport-fit=cover. */
  --safe-t: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-r: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --safe-b: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-l: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));

  --font-display: "Lilita One", "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-ui: "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(180deg, #4383f2 0%, #2553cb 45%, #142f86 100%) fixed;
  background-color: var(--bg-3);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

button { font-family: inherit; cursor: pointer; color: inherit; }

.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ─────────────────────────── Estrutura ─────────────────────────── */

#app {
  position: fixed;
  inset: 0;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding:
    calc(var(--safe-t) + 8px)
    calc(var(--safe-r) + 10px)
    calc(var(--safe-b) + 10px)
    calc(var(--safe-l) + 10px);
  touch-action: none;
}

/* ─────────────────────────── HUD (disposição da referência) ─────────────────────────── */

.hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 26% minmax(0, 1fr) 26%;
  grid-template-rows: auto auto;
  column-gap: 6px;
  row-gap: 4px;
}

.hud-left  { grid-area: 1 / 1; display: flex; gap: 6px; }
.hud-gear  { grid-area: 1 / 3; justify-self: end; }
.hud-logo  { grid-area: 1 / 2 / 3 / 3; align-self: center; }
.next-wrap { grid-area: 2 / 1; display: flex; flex-direction: column; min-width: 0; }
.stats-panel { grid-area: 2 / 3; }

.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border-radius: 11px;
  border: 2.5px solid #d4ecff;
  background: linear-gradient(180deg, #86c6ff 0%, #3f86ee 55%, #2a62d6 100%);
  box-shadow: 0 3px 0 var(--btn-edge), 0 6px 10px rgba(0, 0, 30, 0.3), inset 0 -3px 5px rgba(10, 40, 120, 0.3);
  transition: transform 0.08s;
}
.icon-btn::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 6%;
  height: 40%;
  border-radius: 9px;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge), inset 0 -3px 5px rgba(10, 40, 120, 0.3); }
.icon-btn svg { position: relative; width: 23px; height: 23px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn svg .outline { stroke: var(--outline); stroke-width: 5; }
.icon-btn svg :not(.outline) { stroke: #fff; stroke-width: 2.5; }
.icon-btn.small { width: 36px; height: 36px; }

.panel {
  min-width: 0;
  border-radius: 12px;
  border: 2px solid var(--panel-border);
  /* sem backdrop-filter: desfoque sobre o cenário animado pesa muito no WebView do Android */
  background: linear-gradient(180deg, rgba(24, 58, 150, 0.84), rgba(9, 26, 88, 0.82));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), 0 4px 12px rgba(0, 0, 30, 0.28);
}

.hud-label {
  display: block;
  margin: 0 0 2px 2px;
  font-family: var(--font-ui);
  font-size: clamp(10px, 2.9vw, 12.5px);
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: var(--muted);
  text-shadow: 0 1px 2px rgba(0, 0, 30, 0.6);
}

.next-panel {
  flex: 1 1 auto;
  display: flex;
  padding: 4px;
}
#nextCanvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 52px;
}

.stats-panel {
  display: grid;
  align-content: center;
  padding: 4px 4px 5px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  line-height: 1.05;
}
.stat span {
  font-size: clamp(10.5px, 3vw, 13px);
  font-weight: 600;
  color: var(--muted);
}
.stat b {
  max-width: 100%;
  font-size: clamp(14px, 4.1vw, 18px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 var(--ink);
}
.stat b.long { font-size: clamp(12px, 3.4vw, 15px); }

/* ─────────────────────────── Logo ─────────────────────────── */

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 0.84;
  pointer-events: none;
}
.logo-main {
  font-family: var(--font-display);
  font-size: clamp(34px, 11vw, 54px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow:
    0.055em 0 0 #1a4fc4, -0.055em 0 0 #1a4fc4, 0 0.055em 0 #1a4fc4, 0 -0.055em 0 #1a4fc4,
    0.04em 0.04em 0 #1a4fc4, -0.04em 0.04em 0 #1a4fc4, 0.04em -0.04em 0 #1a4fc4, -0.04em -0.04em 0 #1a4fc4,
    0 0.09em 0 #103a9e, 0.045em 0.09em 0 #103a9e, -0.045em 0.09em 0 #103a9e,
    0 0.13em 0 #0a2a78, 0.045em 0.13em 0 #0a2a78, -0.045em 0.13em 0 #0a2a78,
    0 0.2em 0.16em rgba(0, 0, 30, 0.45);
}
.logo-sub {
  margin-top: 0.3em;
  font-family: var(--font-display);
  font-size: clamp(13px, 4vw, 19px);
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #ffd43b;
  background: linear-gradient(90deg, #ff4b55 0%, #ff9a1f 22%, #ffe03a 40%, #54e05f 58%, #33b1ff 77%, #c06bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(1.3px 0 0 #fff) drop-shadow(-1.3px 0 0 #fff)
    drop-shadow(0 1.3px 0 #fff) drop-shadow(0 -1.3px 0 #fff)
    drop-shadow(0 2px 0 var(--ink));
}

.logo.big .logo-main { font-size: clamp(48px, 15vw, 72px); }
.logo.big .logo-sub  { font-size: clamp(18px, 5.6vw, 26px); }
.logo.huge .logo-main { font-size: clamp(64px, 21vw, 96px); }
.logo.huge .logo-sub  { font-size: clamp(22px, 7.4vw, 34px); }

/* ─────────────────────────── Metas, limite e reforços ─────────────────────────── */

.status-row {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 30px;
}

.goals-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 3px;
  border-radius: 20px;
  border: 1.5px solid var(--panel-border);
  background: var(--panel);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 22px;
  text-shadow: 0 1px 0 var(--ink);
  box-shadow: 0 3px 8px rgba(0, 0, 30, 0.25);
}
.goal-chip.done {
  border-color: #b9f6ca;
  background: linear-gradient(#43d65c, #1f9e3a);
}
.goal-chip.pop { animation: bump 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
.goal-chip.stars-chip {
  padding: 2px 9px;
  color: #ffd43b;
  letter-spacing: 1px;
  border-color: #ffe082;
}
.goal-chip.limit {
  border-color: #ffcc80;
  background: linear-gradient(rgba(255, 152, 0, 0.6), rgba(170, 70, 0, 0.7));
}
.goal-chip.limit.low {
  border-color: #ffcdd2;
  background: linear-gradient(#ff5252, #c62828);
  animation: pulse 0.8s ease-in-out infinite;
}
.goal-chip.mech { padding: 2px 4px; }
.goal-chip.best { padding: 2px 10px 2px 4px; color: #ffe14d; }

.goal-ico {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-style: normal;
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
.goal-ico.color.k0 { background: #f2283a; }
.goal-ico.color.k1 { background: #1b8cff; }
.goal-ico.color.k2 { background: #2fca3e; }
.goal-ico.color.k3 { background: #ffc414; }
.goal-ico.color.k4 { background: #b33df7; }
body.colorblind .goal-ico.color::after { content: attr(data-sym); font-family: var(--font-ui); font-size: 11px; text-shadow: 0 0 2px #000; }
.goal-ico.score { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff59d, #ffb300); }
.goal-ico.score::after { content: "★"; color: #7a4a00; font-size: 13px; line-height: 1; }
.goal-ico.blocks {
  background:
    linear-gradient(#f2283a, #f2283a) 2px 2px / 7px 7px no-repeat,
    linear-gradient(#1b8cff, #1b8cff) 11px 2px / 7px 7px no-repeat,
    linear-gradient(#2fca3e, #2fca3e) 2px 11px / 7px 7px no-repeat,
    linear-gradient(#ffc414, #ffc414) 11px 11px / 7px 7px no-repeat,
    rgba(0, 10, 50, 0.4);
}
.goal-ico.striped { background: repeating-linear-gradient(90deg, #2fca3e 0 3px, #c8f7c0 3px 5px, #1f9a2b 5px 6px); }
.goal-ico.bomb {
  box-shadow: none;
  background: linear-gradient(#ffe27a, #ff7a00);
  clip-path: polygon(50% 0%, 62% 34%, 98% 36%, 69% 58%, 80% 94%, 50% 73%, 20% 94%, 31% 58%, 2% 36%, 38% 34%);
}
.goal-ico.rainbow { border-radius: 50%; background: conic-gradient(#f2283a, #ffc414, #2fca3e, #1b8cff, #b33df7, #f2283a); }
.goal-ico.detonate { border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, #ffd54f 30%, #ff6d00 62%, #d50000 100%); }
/* Meta de combo: selo "×N" numa explosão laranja, igual ao "COMBO xN" que aparece no tabuleiro */
.goal-ico.combo {
  border-radius: 0;
  box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='38%25' r='62%25'%3E%3Cstop offset='0' stop-color='%23fff6b0'/%3E%3Cstop offset='.45' stop-color='%23ffb300'/%3E%3Cstop offset='1' stop-color='%23ff5a00'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpolygon points='20,0.5 23.9,5.3 29.8,3.1 30.7,9.3 36.9,10.3 34.7,16.1 39.5,20 34.7,23.9 36.9,29.7 30.7,30.7 29.8,36.9 23.9,34.7 20,39.5 16.1,34.7 10.3,36.9 9.3,30.7 3.1,29.8 5.3,23.9 0.5,20 5.3,16.1 3.1,10.2 9.3,9.3 10.2,3.1 16.1,5.3' fill='url(%23g)' stroke='%237a2a00' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  font-size: 9.5px;
  letter-spacing: -0.4px;
  color: #fff;
  text-shadow: 0 1px 0 #7a2a00, 0 0 2px #7a2a00, 0 0 1px #7a2a00;
}
.goal-ico.combo::after { content: "×" attr(data-n); }
.goal-list .goal-ico.combo { font-size: 12px; }
.goal-ico.emoji {
  background: none;
  box-shadow: none;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  line-height: 1;
}

.booster-bar { flex: 0 1 auto; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 5px; padding-right: 4px; }
.boost-btn {
  position: relative;
  flex: 0 1 auto;
  width: 38px;
  min-width: 30px;
  height: 32px;
  padding: 0;
  border-radius: 11px;
  border: 2px solid #d4ecff;
  background: linear-gradient(180deg, #86c6ff 0%, #3f86ee 55%, #2a62d6 100%);
  box-shadow: 0 3px 0 var(--btn-edge), 0 5px 8px rgba(0, 0, 30, 0.3);
  font-size: 17px;
  line-height: 1;
  transition: transform 0.08s;
}
.boost-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge); }
.boost-btn.active {
  border-color: #fff3a8;
  background: linear-gradient(var(--gold-top), var(--gold-bottom));
  box-shadow: 0 3px 0 var(--gold-edge), 0 0 0 3px rgba(255, 212, 59, 0.45);
  animation: pulse 0.9s ease-in-out infinite;
}
.boost-btn.empty { filter: grayscale(0.8); opacity: 0.7; }
.boost-count {
  position: absolute;
  right: -7px;
  bottom: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  border: 1.5px solid #fff;
  background: var(--bad);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  color: #fff;
}

/* ─────────────────────────── Área de jogo ─────────────────────────── */

.play-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  touch-action: none;
}
.board-stack {
  position: absolute;
  inset: 0;
  will-change: transform; /* tremor e câmera lenta via transform: só o compositor trabalha */
}
#boardBg,
#board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.phase-toast {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 2;
  width: min(92%, 380px);
  margin: 0;
  padding: 8px 12px;
  border-radius: 14px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  background: linear-gradient(#43d65c, #1f9e3a);
  border: 2px solid #b9f6ca;
  box-shadow: 0 6px 18px rgba(0, 0, 30, 0.4);
  text-shadow: 0 1px 0 rgba(0, 40, 0, 0.5);
  pointer-events: none;
  animation: toast-in 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.phase-toast.warn { background: linear-gradient(#ff8a3d, #d84315); border-color: #ffccbc; }
/* No cabeçalho: ocupa a área do logotipo (o logo é só decorativo), compacta, sem cobrir tabuleiro nem botões */
.hud .phase-toast {
  position: relative;
  left: auto;
  top: auto;
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  justify-self: stretch;
  z-index: 5;
  width: auto;
  margin: 0 -8px;
  padding: 6px 8px;
  border-radius: 12px;
  transform: none;
  font-size: 12.5px;
  line-height: 1.25;
  animation: toast-pop 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes toast-pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.hammer-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 2;
  margin: 0;
  padding: 6px 14px;
  border-radius: 20px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(#fff3a8, #ffc31a);
  box-shadow: 0 4px 12px rgba(0, 0, 30, 0.4);
  pointer-events: none;
  animation: pulse 1s ease-in-out infinite;
}

/* Tutorial interativo */
.tutorial {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 8px 14px;
  pointer-events: none;
}
.tutorial.blocking { pointer-events: auto; background: rgba(5, 15, 50, 0.4); }
.tut-bubble {
  pointer-events: auto;
  width: min(100%, 340px);
  padding: 12px 14px 10px;
  border-radius: 18px;
  border: 3px solid #ffd43b;
  background: #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 10px 26px rgba(0, 0, 30, 0.45);
  animation: pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.tut-title { margin: 0 0 4px; font-family: var(--font-display); font-size: 19px; color: #1a4fc4; }
.tut-text { margin: 0; font-size: 15px; line-height: 1.35; }
.tut-hand {
  position: absolute;
  left: 50%;
  top: 38%;
  margin-left: -24px;
  font-size: 46px;
  line-height: 1;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 30, 0.5));
  pointer-events: none;
}
.tut-hand.swipe-h { animation: hand-swipe-h 1.6s ease-in-out infinite; }
.tut-hand.tap { animation: hand-tap 0.9s ease-in-out infinite; }
.tut-hand.swipe-up { animation: hand-up 1.3s ease-in infinite; }
.tut-hand.swipe-down { animation: hand-down 1.3s ease-in infinite; }
.tut-hand.point-hold { top: auto; bottom: -6px; animation: hand-tap 0.9s ease-in-out infinite; }

/* ─────────────────────────── Controles (4 botões + GUARDAR) ─────────────────────────── */

.controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px clamp(2px, 2vw, 14px) 0;
}
.ctl-group { display: flex; gap: clamp(8px, 3.4vw, 20px); }

.ctl {
  position: relative;
  width: clamp(52px, 15.2vw, 72px);
  height: clamp(52px, 15.2vw, 72px);
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #d4ecff;
  background: radial-gradient(circle at 50% 30%, #95d2ff 0%, #4c98f5 40%, #2765d8 74%, #1c4db3 100%);
  box-shadow: 0 5px 0 var(--btn-edge), 0 9px 14px rgba(0, 0, 30, 0.35), inset 0 -5px 8px rgba(10, 40, 120, 0.35);
  touch-action: none;
  transition: transform 0.06s, box-shadow 0.06s;
}
.ctl::before {
  content: "";
  position: absolute;
  left: 17%;
  right: 17%;
  top: 6%;
  height: 38%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.ctl svg {
  position: relative;
  width: 52%;
  height: 52%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.ctl svg .outline { stroke: var(--outline); stroke-width: 6.2; }
.ctl svg :not(.outline) { stroke: #fff; stroke-width: 3; }
.ctl.pressed {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--btn-edge), 0 3px 6px rgba(0, 0, 30, 0.3), inset 0 -5px 8px rgba(10, 40, 120, 0.35);
  background: radial-gradient(circle at 50% 30%, #b9e2ff 0%, #66a8f7 40%, #2f6ddc 74%, #1f52b8 100%);
}

.hold-btn {
  flex: 0 1 auto;
  width: clamp(56px, 16.5vw, 80px);
  height: clamp(50px, 14vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 3px 4px;
  border-radius: 14px;
  border: 2.5px solid var(--panel-border);
  background: linear-gradient(180deg, rgba(24, 58, 150, 0.85), rgba(9, 26, 88, 0.85));
  box-shadow: 0 4px 0 var(--btn-edge), 0 6px 12px rgba(0, 0, 30, 0.35);
  touch-action: none;
  transition: transform 0.06s, opacity 0.2s;
}
.hold-btn canvas { display: block; width: 100%; flex: 1 1 auto; min-height: 0; }
.hold-btn span { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; color: var(--muted); line-height: 1; }
.hold-btn.pressed { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); }
.hold-btn.used { opacity: 0.55; }
.hold-btn.flash { animation: bump 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* ─────────────────────────── Capa de carregamento ─────────────────────────── */

.loading {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-t) + 20px) 20px calc(var(--safe-b) + 36px);
  /* translúcida: o cenário do mundo atual (canvas por baixo) aparece como fundo da capa */
  background:
    radial-gradient(70% 38% at 50% 0%, rgba(150, 205, 255, 0.35) 0%, transparent 70%),
    linear-gradient(180deg, rgba(67, 131, 242, 0.45) 0%, rgba(37, 83, 203, 0.5) 42%, rgba(20, 47, 134, 0.7) 100%);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.loading.done { opacity: 0; visibility: hidden; pointer-events: none; }
/* Enquanto a capa está na tela só o cenário aparece atrás dela (HUD e botões ficam invisíveis) */
body.booting #app { visibility: hidden; }
.loading-inner {
  position: relative;
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.loading .logo { animation: logo-in 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.loading .drop-stage { margin-top: 10px; }

.drop-stage {
  position: relative;
  width: 216px;
  height: 88px;
}
.jelly {
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: radial-gradient(circle at 50% 40%, var(--l) 0%, var(--b) 58%, var(--dk) 100%);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18), inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 5px 8px rgba(0, 0, 40, 0.35);
  animation: drop 2.8s var(--d) infinite cubic-bezier(0.45, 0, 0.55, 1) both;
}
.jelly::after {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 8%;
  height: 36%;
  border-radius: 9px;
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.05));
}
.jelly.row2 { bottom: 44px; }
.col0 { left: 0; }
.col1 { left: 44px; }
.col2 { left: 88px; }
.col3 { left: 132px; }
.col4 { left: 176px; }
.k0 { --l: #ff8f98; --b: #f2283a; --dk: #a50d1c; }
.k1 { --l: #8fd3ff; --b: #1b8cff; --dk: #0747a6; }
.k2 { --l: #a6f59a; --b: #2fca3e; --dk: #12701b; }
.k3 { --l: #fff08a; --b: #ffc414; --dk: #c07a00; }
.k4 { --l: #e2a8ff; --b: #b33df7; --dk: #6512ad; }

.load-bar {
  width: 82%;
  height: 16px;
  padding: 2px;
  border-radius: 12px;
  border: 2px solid rgba(210, 232, 255, 0.75);
  background: rgba(0, 10, 50, 0.4);
  box-shadow: inset 0 2px 4px rgba(0, 0, 30, 0.4);
}
.load-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(#ffe86e, #ff9d00);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55);
  transition: width 0.35s ease;
}
.load-status { margin: -8px 0 0; font-size: 15px; color: var(--muted); text-shadow: 0 1px 0 var(--ink); }
.tap-start { width: auto; margin-top: 0; padding: 12px 22px; font-size: 18px; animation: pulse 1.1s ease-in-out infinite; }
.loading-foot {
  position: absolute;
  bottom: calc(var(--safe-b) + 10px);
  left: 0;
  right: 0;
  margin: 0;
  padding-inline: 16px;
  text-align: center;
  font-size: 12px;
  opacity: 0.65;
}

/* ─────────────────────────── Telas sobrepostas ─────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-t) + 14px) calc(var(--safe-r) + 14px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 14px);
  background: rgba(8, 20, 70, 0.74);
  animation: fade 0.18s ease-out;
}

.card {
  position: relative;
  width: min(100%, 390px);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 20px 18px 18px;
  text-align: center;
  border-radius: 24px;
  border: 3px solid rgba(215, 235, 255, 0.8);
  background: linear-gradient(180deg, #4887f5 0%, #2a58c9 55%, #1d44ad 100%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.28);
  animation: pop 0.26s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* X vermelho de fechar (mesma ação do botão Fechar/Voltar da janela) */
.x-close,
.icon-btn.x-red {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2.5px solid #ffd9d9;
  background: linear-gradient(180deg, #ff7b7b 0%, #e53935 55%, #b71c1c 100%);
  box-shadow: 0 3px 0 #7f0000, 0 5px 10px rgba(0, 0, 30, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.08s;
}
.icon-btn.x-red { position: static; width: 36px; height: 36px; }
.icon-btn.x-red::before { display: none; }
.x-close:active, .icon-btn.x-red:active { transform: translateY(2px); box-shadow: 0 1px 0 #7f0000; }
.x-close svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
.icon-btn.x-red svg :not(.outline) { stroke: #fff; }
.icon-btn.x-red svg .outline { stroke: #7f0000; }
.world-intro { position: relative; }
.world-intro .x-close { top: -4px; right: 0; }

.card h2 {
  margin: 0 0 10px;
  padding: 0 32px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 0 var(--ink);
}
.card h3 {
  margin: 16px 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: #ffe14d;
  text-align: left;
  text-shadow: 0 2px 0 var(--ink);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 40px 10px 0; }
.card-head h2 { margin: 0; padding: 0; }

.btn {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: 15px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  background: linear-gradient(var(--gold-top), var(--gold-bottom));
  box-shadow: 0 5px 0 var(--gold-edge), 0 8px 14px rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.07s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--gold-edge), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.btn:disabled { opacity: 0.55; filter: grayscale(0.4); }
.btn.secondary {
  font-size: 18px;
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  box-shadow: 0 5px 0 var(--btn-edge), 0 8px 14px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
.btn.secondary:active { box-shadow: 0 2px 0 var(--btn-edge), inset 0 2px 0 rgba(255, 255, 255, 0.45); }
.btn.slim { margin-top: 10px; padding: 8px 12px; font-size: 16px; }
.btn.small { display: inline-block; width: auto; margin-top: 8px; padding: 7px 18px; font-size: 16px; }
.btn.green {
  background: linear-gradient(#6ff08a, #1fae45);
  box-shadow: 0 5px 0 #11702b, 0 8px 14px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }

.best { margin: 12px 0 2px; font-size: 16px; color: var(--muted); }
.menu-player { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.phase-world {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  color: #bfe3ff;
  text-shadow: 0 2px 0 var(--ink);
}

/* Aviso rápido */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 26px);
  z-index: 40;
  width: max-content;
  max-width: min(92vw, 380px);
  padding: 10px 16px;
  border-radius: 16px;
  border: 2px solid var(--panel-border);
  background: rgba(9, 26, 88, 0.96);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  transform: translateX(-50%);
  box-shadow: 0 8px 22px rgba(0, 0, 30, 0.5);
  pointer-events: none;
  animation: toast-up 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
/* Mapa aberto: o balão sobe para não cobrir as últimas fases do caminho */
body.map-open .toast { bottom: calc(var(--safe-b) + 88px); }
.toast.good { border-color: #b9f6ca; background: linear-gradient(#43d65c, #1f9e3a); }
.toast.bad { border-color: #ffcdd2; background: linear-gradient(#ff5a6e, #c62838); }

/* Menu */
.menu-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.menu-overlay .card { flex: 0 1 auto; }
.topbar { display: flex; gap: 8px; justify-content: center; width: min(100%, 390px); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  border-radius: 20px;
  border: 2px solid var(--panel-border);
  background: rgba(9, 26, 88, 0.82);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 30, 0.3);
}
.pill i { font-style: normal; font-size: 17px; }
.pill.lives i { color: #ff4d6d; }
.pill.stars i { color: #ffd43b; }
.pill small { font-size: 11px; font-weight: 600; color: var(--muted); }
.pill em {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--good);
  font-style: normal;
  font-size: 15px;
  line-height: 1;
}
.coin {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc107 55%, #c78100);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1.5px #a86b00;
}
.menu-card .btn.infinite {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  background: linear-gradient(#c29bff, #7c4dff);
  box-shadow: 0 5px 0 #4527a0, 0 8px 14px rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.btn.infinite small { font-family: var(--font-ui); font-size: 13px; font-weight: 600; opacity: 0.92; }
.btn.infinite small:empty { display: none; }
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 4px 7px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  box-shadow: 0 4px 0 var(--btn-edge), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.07s;
}
.tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); }
.tile i { font-style: normal; font-size: 24px; line-height: 1.15; }
.tile i svg { display: block; width: 32px; height: 32px; margin: -1px auto 0; filter: drop-shadow(0 2px 1px rgba(0, 0, 30, 0.35)); }
/* Estrela e "+" desenhados e centralizados (os caracteres ficavam desalinhados na fonte) */
.star-ico {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.4l-6.1 3.4 1.4-6.8L2.2 9.3l6.9-.8z' fill='%23ffd43b' stroke='%23b36b00' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pill .plus-ico {
  display: inline-block;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--good) center / 11px 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v8M1 5h8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  position: absolute;
  top: -6px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid #fff;
  background: var(--bad);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  animation: pulse 1.2s ease-in-out infinite;
}

/* Estrelas (entrada e fim de fase) */
.phase-stars { display: flex; justify-content: center; gap: 6px; margin: 2px 0 6px; font-size: 38px; line-height: 1; }
.phase-stars .on { color: #ffd43b; text-shadow: 0 3px 0 #b36b00, 0 0 14px rgba(255, 212, 59, 0.6); }
.phase-stars .off { color: rgba(255, 255, 255, 0.22); text-shadow: 0 3px 0 rgba(0, 10, 50, 0.4); }
.phase-info, .phase-msg { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); white-space: pre-line; }
.phase-msg.ok { color: #b9f6ca; }
.life-cost { margin: 10px 0 0; font-size: 13px; color: #ffc1cc; }

.goal-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.goal-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 16px;
  background: rgba(0, 10, 50, 0.25);
}
.goal-list .goal-ico { width: 26px; height: 26px; font-size: 16px; }
.goal-list .goal-ico.emoji { font-size: 20px; }

.phase-extras { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.phase-extras:empty { display: none; }
.extra {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(0, 10, 50, 0.28);
  text-align: left;
  font-size: 13.5px;
  line-height: 1.3;
}
.extra .goal-ico { width: 26px; height: 26px; margin-top: 1px; font-size: 21px; }
.extra b { display: block; font-size: 15px; color: #ffe14d; }
.extra span { color: var(--muted); }

.booster-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 8px 6px;
  border-radius: 14px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 10, 50, 0.25);
  font-size: 13px;
  font-weight: 700;
}
.pick i { font-style: normal; font-size: 24px; line-height: 1.2; }
.pick small { font-size: 11px; font-weight: 600; color: var(--muted); }
.pick.on { border-color: #ffd43b; background: rgba(255, 212, 59, 0.22); box-shadow: 0 0 0 2px rgba(255, 212, 59, 0.35); }
.pick.on::after { content: "✓"; position: absolute; top: 3px; right: 8px; font-size: 16px; color: var(--good); }
.pick.none { opacity: 0.6; }
.booster-line { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* Mapa de fases */
.map-overlay { place-items: stretch; }
.map-card {
  display: flex;
  flex-direction: column;
  width: min(100%, 460px);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  border: 3px solid rgba(215, 235, 255, 0.8);
  background: rgba(8, 20, 70, 0.85);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  animation: pop 0.26s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.map-head {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(#4887f5, #2a58c9);
  box-shadow: 0 3px 10px rgba(0, 0, 30, 0.4);
}
.map-head h2 {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  text-shadow: 0 2px 0 var(--ink);
}
.map-stars { font-size: 17px; font-weight: 700; color: #ffd43b; text-shadow: 0 1px 0 var(--ink); }
.map-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.map-path { position: relative; display: flex; flex-direction: column; }
.map-world {
  position: relative;
  flex: 0 0 auto;
  height: 470px;
}
/* Cenário do mundo: sobe 160 px por cima do mundo seguinte com máscara em degradê,
   então um tema se funde no outro em vez de uma linha dividindo */
.map-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -160px;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--w1), var(--w2));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
  pointer-events: none;
}
.map-world:first-child .map-bg { top: 0; -webkit-mask-image: none; mask-image: none; }
.map-bg canvas { display: block; width: 100%; height: 100%; }
.map-world.locked .map-bg { filter: brightness(0.6) saturate(0.55); }
.map-world-title {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 5px 12px 6px;
  border-radius: 14px;
  background: rgba(9, 26, 88, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.4);
  text-align: left;
}
.map-world-title small { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.map-world-title b { font-family: var(--font-display); font-size: 19px; font-weight: 400; line-height: 1.1; }
.map-road { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.map-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-road .road-edge { stroke: rgba(0, 10, 50, 0.35); stroke-width: 22; }
.map-road .road-base { stroke: #f3e1b5; stroke-width: 16; }
.map-road .road-dash { stroke: rgba(255, 255, 255, 0.95); stroke-width: 3; stroke-dasharray: 2 10; }

.node {
  position: relative;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
}
.map-node { position: absolute; z-index: 3; transform: translate(-50%, -50%); }
.node-num {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid #fff;
  font-family: var(--font-display);
  font-size: 21px;
  background: radial-gradient(circle at 50% 30%, #95d2ff, #2765d8 70%);
  box-shadow: 0 4px 0 var(--btn-edge), 0 6px 12px rgba(0, 0, 30, 0.4);
  text-shadow: 0 2px 0 var(--ink);
}
.node.done .node-num { background: radial-gradient(circle at 50% 30%, #fff38a, #ff9800 72%); box-shadow: 0 4px 0 var(--gold-edge), 0 6px 12px rgba(0, 0, 30, 0.4); }
.node.boss .node-num { width: 58px; height: 58px; border-color: #ffd43b; }
.node.boss .node-num::before { content: "👑"; position: absolute; top: -17px; font-size: 18px; text-shadow: none; }
.node.current .node-num { animation: pulse 1s ease-in-out infinite; box-shadow: 0 4px 0 var(--btn-edge), 0 0 0 5px rgba(255, 255, 255, 0.45), 0 6px 14px rgba(0, 0, 30, 0.5); }
.node.locked .node-num { font-size: 18px; background: radial-gradient(circle at 50% 30%, #b0bec5, #607d8b 72%); box-shadow: 0 4px 0 #37474f; }
.node:disabled { cursor: default; }
.node-stars { display: flex; gap: 1px; font-size: 13px; line-height: 1; }
.node-stars i { font-style: normal; color: rgba(255, 255, 255, 0.35); text-shadow: 0 1px 1px rgba(0, 0, 30, 0.8); }
.node-stars i.on { color: #ffd43b; }

/* Abertura de mundo */
.world-overlay { background: rgba(8, 20, 70, 0.25); backdrop-filter: none; -webkit-backdrop-filter: none; }
.world-intro { width: min(100%, 380px); text-align: center; }
.wi-label { margin: 0; font-family: var(--font-display); font-size: 22px; letter-spacing: 1px; color: #ffe14d; text-shadow: 0 3px 0 var(--ink); animation: pop 0.4s both; }
.wi-number { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 2px 3px rgba(0, 0, 30, 0.8); }
.wi-name {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(38px, 12vw, 58px);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 0.06em 0 #1a4fc4, 0 0.12em 0 #0a2a78, 0 0.2em 0.2em rgba(0, 0, 30, 0.5);
  animation: logo-in 0.7s 0.15s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.wi-news { display: flex; flex-direction: column; gap: 8px; }
.wi-news .extra { background: rgba(9, 26, 88, 0.85); border: 2px solid rgba(255, 255, 255, 0.35); animation: pop 0.4s 0.4s both; }
.world-intro .btn { width: min(80%, 300px); margin: 18px auto 0; }

/* Continuar */
.revive-timer { position: relative; width: 64px; height: 64px; margin: 0 auto 4px; }
.revive-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.revive-timer circle { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 4; }
.revive-timer #reviveRing { stroke: #ffd43b; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.revive-timer b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 26px; font-weight: 400; }

/* Ajustes */
.setting {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 16px;
  text-align: left;
}
label.setting { cursor: pointer; }
.setting input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.switch {
  flex: 0 0 auto;
  position: relative;
  width: 54px;
  height: 30px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: background 0.18s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s;
}
.setting input:checked + .switch { background: var(--good); }
.setting input:checked + .switch::after { transform: translateX(24px); }
.setting input:focus-visible + .switch { outline: 3px solid #ffe14d; outline-offset: 2px; }
.setting.range input { width: 50%; accent-color: #ffd43b; touch-action: none; }
.player-name { max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffe14d; font-weight: 700; text-align: right; }
.setting:has(.segmented) { flex-wrap: wrap; row-gap: 6px; }
.segmented { flex: 0 0 auto; margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); }
.segmented button {
  min-width: 36px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.segmented button.on { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); background: linear-gradient(var(--gold-top), var(--gold-bottom)); }
.hint { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.hint.left { margin: 6px 0 0; text-align: left; font-size: 13px; }
.cloud-code {
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 700 22px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 2px;
  user-select: text;
  -webkit-user-select: text;
}
.cloud-restore { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.cloud-restore .btn { flex: 0 0 auto; width: auto; margin-top: 0; }
.version { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.login-box { margin-top: 10px; padding: 10px; border-radius: 14px; background: rgba(0, 10, 50, 0.28); text-align: left; }
.login-title { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.login-box .hint.left { margin-top: 4px; }
.login-box .text-input { display: block; margin-top: 8px; }

/* Tremor da tela inteira nas explosões (transform é composto na GPU: não pesa) */
#app.shake-1 { --amp: 3px; animation: screen-shake 0.3s linear; }
#app.shake-2 { --amp: 6px; animation: screen-shake 0.38s linear; }
#app.shake-3 { --amp: 10px; animation: screen-shake 0.46s linear; }
@keyframes screen-shake {
  0%, 100% { transform: none; }
  12% { transform: translate(calc(var(--amp) * -1), calc(var(--amp) * 0.5)); }
  28% { transform: translate(var(--amp), calc(var(--amp) * -0.6)); }
  44% { transform: translate(calc(var(--amp) * -0.7), calc(var(--amp) * 0.4)); }
  62% { transform: translate(calc(var(--amp) * 0.5), calc(var(--amp) * -0.3)); }
  80% { transform: translate(calc(var(--amp) * -0.25), calc(var(--amp) * 0.15)); }
}

/* Como jogar */
.help { text-align: left; }
.help h2 { text-align: center; }
.help ul { margin: 0; padding-left: 18px; }
.help li { margin: 5px 0; font-size: 15px; line-height: 1.35; }
.help p { font-size: 15px; line-height: 1.4; }
.help b { font-weight: 700; }
.help .rules { list-style: none; padding-left: 0; }
.help .rules li { display: flex; gap: 10px; align-items: flex-start; }
.ico {
  flex: 0 0 auto;
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 7px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.45);
}
.ico.b0 { background: #f2283a; }
.ico.striped { background: repeating-linear-gradient(90deg, #2fca3e 0 4px, #b8f7b0 4px 7px, #1f9a2b 7px 8px); }
.ico.star {
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(#ffe27a, #ff7a00);
  clip-path: polygon(50% 0%, 62% 34%, 98% 36%, 69% 58%, 80% 94%, 50% 73%, 20% 94%, 31% 58%, 2% 36%, 38% 34%);
}
.ico.rainbow { border-radius: 50%; background: conic-gradient(#f2283a, #ffc414, #2fca3e, #1b8cff, #b33df7, #f2283a); }

/* Abas e ranking */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px;
  border-radius: 15px;
  background: rgba(0, 10, 50, 0.3);
}
.tabs.scroll { overflow-x: auto; touch-action: pan-x; scrollbar-width: none; }
.tabs.scroll::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 1 0;
  padding: 8px;
  border: 0;
  border-radius: 11px;
  font-family: var(--font-display);
  font-size: 17px;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
}
.tabs.scroll .tab { flex: 0 0 auto; padding: 8px 11px; font-size: 16px; }
.tab.active {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  background: linear-gradient(var(--gold-top), var(--gold-bottom));
  box-shadow: 0 3px 0 var(--gold-edge);
}
.stepper { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px; }
.stepper b { min-width: 96px; font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 44vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  text-align: left;
}
.rank-list.mini { max-height: none; overflow: visible; }
.rank-list li { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 11px; }
.rank-list.mini li { padding: 5px 6px; }
.rank-list li:nth-child(odd) { background: rgba(0, 10, 50, 0.16); }
.rank-list li.me { background: rgba(255, 225, 77, 0.24); box-shadow: inset 0 0 0 2px rgba(255, 225, 77, 0.8); }
.pos {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 15px;
  background: rgba(255, 255, 255, 0.16);
}
.pos.p1 { color: #5a3b00; background: linear-gradient(#fff08a, #f2b100); }
.pos.p2 { color: #2c3440; background: linear-gradient(#ffffff, #b9c4d2); }
.pos.p3 { color: #3d2206; background: linear-gradient(#ffc98f, #c7782f); }
.rname { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rname small { margin-left: 3px; font-weight: 600; opacity: 0.6; }
.rlvl { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.rlvl.stars { color: #ffd43b; letter-spacing: -1px; }
.rpts { flex: 0 0 auto; font-weight: 700; color: #ffe14d; font-variant-numeric: tabular-nums; }
.rank-status { min-height: 1.2em; margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.rank-status:empty { display: none; }
/* na loja o aviso ocupa sempre a mesma altura (só a aba Moedas tem texto) */
#shopStatus, #shopStatus:empty { display: block; min-height: 2.6em; }
.rank-me { margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; font-size: 14px; font-weight: 700; background: rgba(0, 10, 50, 0.3); }
.rank-line { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #fff3a8; cursor: pointer; }

/* Apelido */
.text-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 13px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  outline: none;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: #fff;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.text-input.small { flex: 1 1 auto; min-width: 0; padding: 9px 10px; font-size: 16px; letter-spacing: 1px; }
.text-input:focus { border-color: #ffd43b; box-shadow: 0 0 0 3px rgba(255, 212, 59, 0.45); }
.form-error {
  margin: 10px 0 0;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14px;
  color: #fff;
  background: rgba(217, 42, 58, 0.55);
}

/* Fim de jogo */
.final-score {
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-size: 50px;
  color: #ffe14d;
  text-shadow: 0 4px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}
.record-badge {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  background: linear-gradient(#fff38a, #ffc31a);
  animation: pulse 0.9s ease-in-out infinite;
}
.share-bonus {
  margin: 8px 0 0;
  padding: 6px 12px;
  border-radius: 14px;
  border: 1.5px dashed rgba(255, 212, 59, 0.75);
  background: rgba(255, 212, 59, 0.14);
  font-size: 13.5px;
  font-weight: 700;
  color: #ffe14d;
}
.coins-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; }
.coins-earned { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 26px; color: #ffe14d; text-shadow: 0 2px 0 var(--ink); }
.coins-row .btn { width: auto; margin-top: 0; }
.over-card .btn-row .btn {
  padding-left: 2px;
  padding-right: 2px;
  font-size: clamp(11px, 3.4vw, 15px);
  letter-spacing: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.summary div { padding: 7px 6px; border-radius: 12px; background: rgba(0, 10, 50, 0.22); }
.summary span { display: block; font-size: 12px; color: var(--muted); }
.summary b { font-size: 19px; font-weight: 700; }

/* Loja */
.shop-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  height: min(54vh, 500px); /* altura fixa: a loja não muda de tamanho ao trocar de aba */
  padding: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.shop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 10, 50, 0.28);
}
.shop-item.wide { grid-column: 1 / -1; }
.shop-item.equipped { border-color: var(--good); box-shadow: 0 0 0 2px rgba(61, 220, 90, 0.35); }
.shop-item .emoji { font-size: 40px; line-height: 60px; }
.shop-item b { font-size: 15px; }
.shop-item small { min-height: 2.4em; font-size: 12px; line-height: 1.2; color: var(--muted); }
/* botão sempre no pé do card: textos de tamanhos diferentes não desalinham a fileira */
.shop-item .btn { margin-top: auto; padding: 7px 8px; font-size: 15px; }
.shop-item small { margin-bottom: 4px; }
.shop-item .have { position: absolute; top: 6px; right: 8px; font-size: 13px; font-weight: 700; color: #ffe14d; }
.price { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.price .coin { width: 15px; height: 15px; }

/* Missões e prêmio diário */
.login-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.login-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 5px 1px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 10, 50, 0.3);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}
.login-day i { font-style: normal; font-size: 18px; line-height: 1.2; }
.login-day small { font-size: 10px; }
.login-day.done { background: rgba(61, 220, 90, 0.35); color: #fff; }
.login-day.today { color: #fff; box-shadow: inset 0 0 0 2px #ffd43b; background: rgba(255, 212, 59, 0.25); animation: pulse 1.1s ease-in-out infinite; }
.login-day:disabled { cursor: default; }
.mission-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.mission { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: rgba(0, 10, 50, 0.28); }
.mission.claimed { opacity: 0.65; }
.mission-body { flex: 1 1 auto; min-width: 0; }
.mission-body b { display: block; font-size: 15px; }
.mission-body small { font-size: 12px; color: var(--muted); }
.mission .btn { flex: 0 0 auto; width: auto; margin: 0; padding: 7px 10px; font-size: 14px; }
.bar { height: 10px; margin-top: 5px; overflow: hidden; border-radius: 6px; background: rgba(0, 0, 0, 0.35); }
.bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(#8dff9e, #2fbf4a); }
.chest-box { margin-top: 12px; padding: 12px; border-radius: 16px; border: 2px dashed rgba(255, 212, 59, 0.6); background: rgba(255, 212, 59, 0.12); }
/* Baú animado */
.chest-stage { position: relative; width: 150px; height: 128px; margin: -2px auto 2px; }
.chest-svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 92%; }
.chest-rays {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 250px;
  height: 250px;
  margin: -125px 0 0 -125px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 226, 110, 0.6) 0deg 9deg, rgba(255, 226, 110, 0) 9deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%);
  mask-image: radial-gradient(circle, #000 18%, transparent 66%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.chest-stage.ready .chest-rays { opacity: 0.85; animation: rays-spin 9s linear infinite; }
.chest-stage.open .chest-rays { opacity: 0.4; animation: rays-spin 16s linear infinite; }
.chest-stage.burst .chest-rays { opacity: 0.55; animation: rays-burst 0.9s ease-out, rays-spin 16s linear infinite; }
.chest-stage.ready .chest-svg { animation: chest-hop 1.5s ease-in-out infinite; }
.chest-stage.shaking .chest-svg { animation: chest-shake 0.75s linear forwards; }
.chest-stage.burst .chest-svg { animation: chest-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
.chest-stage.locked .chest-svg { filter: saturate(0.55) brightness(0.78); }
.chest-stage.locked::after { content: "🔒"; position: absolute; right: 16px; bottom: 10px; z-index: 2; font-size: 26px; filter: drop-shadow(0 2px 2px rgba(0, 0, 30, 0.5)); }
.chest-lid { transform-box: view-box; transform-origin: 60px 49px; transition: transform 0.5s cubic-bezier(0.2, 1.7, 0.35, 1); }
.chest-stage.open .chest-lid { transform: translate(0, -24px) rotate(-12deg) scale(1, 0.7); }
.chest-inner { opacity: 0; transition: opacity 0.35s; }
.chest-stage.open .chest-inner { opacity: 1; }
.chest-fx { position: absolute; left: 50%; top: 42%; z-index: 3; width: 0; height: 0; }
.chest-coin,
.chest-spark {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-style: normal;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc107 55%, #c78100);
  box-shadow: 0 0 0 1.5px #a86b00;
  opacity: 0;
  animation: coin-fly 1.15s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
.chest-spark { left: -5px; top: -5px; width: 10px; height: 10px; background: #fff; box-shadow: 0 0 10px 4px #ffe27a; }
.chest-prize {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 10px 0 4px;
  font-family: var(--font-display);
  font-size: 24px;
  color: #ffe14d;
  text-shadow: 0 2px 0 var(--ink);
  animation: prize-pop 0.6s 0.2s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }
@keyframes rays-burst { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.1); opacity: 0.55; } }
@keyframes chest-hop {
  0%, 60%, 100% { transform: translateY(0) scale(1); }
  20% { transform: translateY(-11px) scale(0.97, 1.04); }
  36% { transform: translateY(0) scale(1.07, 0.92); }
  48% { transform: translateY(-3px) scale(0.99, 1.01); }
}
@keyframes chest-shake {
  0% { transform: rotate(0); }
  12% { transform: rotate(-4deg); }
  24% { transform: rotate(4deg); }
  36% { transform: rotate(-6deg) scale(1.03); }
  48% { transform: rotate(6deg) scale(1.05); }
  60% { transform: rotate(-9deg) scale(1.07); }
  72% { transform: rotate(9deg) scale(1.09); }
  84% { transform: rotate(-11deg) scale(1.11); }
  100% { transform: rotate(0) scale(1.13); }
}
@keyframes chest-pop { 0% { transform: scale(1.13); } 40% { transform: scale(0.9, 1.1); } 100% { transform: scale(1); } }
@keyframes coin-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(0.4); }
  55% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(200deg); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 80px)) scale(0.8) rotate(360deg); }
}
@keyframes prize-pop { from { opacity: 0; transform: scale(0.3) translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .chest-stage .chest-svg, .chest-stage .chest-rays { animation: none !important; }
}
.chest-box p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.login-reward { margin: 12px 0; font-family: var(--font-display); font-size: 30px; color: #ffe14d; text-shadow: 0 3px 0 var(--ink); }

/* Conquistas */
.ach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 56vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  text-align: left;
}
.ach { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 10, 50, 0.25); }
.ach .medal { flex: 0 0 auto; font-size: 28px; filter: grayscale(1) opacity(0.45); }
.ach.done { background: rgba(255, 212, 59, 0.16); }
.ach.done .medal { filter: none; }
.ach-body { flex: 1 1 auto; min-width: 0; }
.ach-body b { display: block; font-size: 15px; }
.ach-body small { font-size: 12.5px; color: var(--muted); }
.ach .reward { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #ffe14d; white-space: nowrap; }

/* Vidas */
.hearts { display: flex; justify-content: center; gap: 6px; margin: 4px 0; font-size: 34px; line-height: 1; }
.hearts i { font-style: normal; color: #ff4d6d; text-shadow: 0 3px 0 #8a0020; }
.hearts i.off { color: rgba(255, 255, 255, 0.2); text-shadow: none; }
/* Coração desenhado (o caractere ♥ das fontes saía estreito e alongado) */
.heart {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.1em;
  height: 1em;
  vertical-align: -0.14em;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21 10.5 19.7C5.2 14.9 1.8 11.8 1.8 7.9 1.8 4.8 4.2 2.4 7.3 2.4c1.8 0 3.5.8 4.7 2.2 1.2-1.4 2.9-2.2 4.7-2.2 3.1 0 5.5 2.4 5.5 5.5 0 3.9-3.4 7-8.7 11.8z' fill='%23ff4d6d' stroke='%23a3002b' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M6.2 5.6c-1.4.4-2.2 1.5-2.3 2.9' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hearts .heart { width: 38px; height: 34px; filter: drop-shadow(0 3px 0 rgba(120, 0, 30, 0.7)); }
.hearts .heart.off { filter: grayscale(1) brightness(1.8) opacity(0.3); }

/* ─────────────────────────── Ganho no placar, contagem, offline, roleta ─────────────────────────── */

.stat { position: relative; }
.hud-gain {
  position: absolute;
  right: 4px;
  top: -2px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: #ffe14d;
  text-shadow: 0 1px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
}
.hud-gain.show { animation: gain-float 0.9s ease-out; }
@keyframes gain-float { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

.countdown {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(90px, 30vw, 150px);
  color: #ffe14d;
  text-shadow: 0 0.06em 0 #1a4fc4, 0 0.12em 0 #0a2a78, 0 0.2em 0.2em rgba(0, 0, 30, 0.5);
  pointer-events: none;
}
.countdown span { animation: count-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes count-pop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.offline-bar {
  position: fixed;
  left: 50%;
  top: calc(var(--safe-t) + 6px);
  z-index: 35;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 12px;
  border: 1.5px solid #ffcc80;
  background: rgba(120, 60, 0, 0.9);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.wheel-btn { position: relative; }
.wheel-wrap { position: relative; width: min(280px, 76vw); margin: 6px auto 4px; }
#wheelCanvas { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 30, 0.45)); }
.wheel-pointer {
  position: absolute;
  left: 50%;
  top: -6px;
  z-index: 2;
  width: 0;
  height: 0;
  margin-left: -14px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 30px solid #ff3d57;
  filter: drop-shadow(0 3px 0 #8a0020);
}
.wheel-result { margin: 8px 0 0; font-family: var(--font-display); font-size: 24px; color: #ffe14d; text-shadow: 0 2px 0 var(--ink); animation: prize-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }

/* ─────────────────────────── Preferências de controle e acessibilidade ─────────────────────────── */

body.left-handed .controls { flex-direction: row-reverse; }
body.btn-large .ctl { width: clamp(60px, 18.5vw, 84px); height: clamp(60px, 18.5vw, 84px); }
body.btn-large .hold-btn { width: clamp(62px, 18vw, 88px); }
body.btn-small .ctl { width: clamp(44px, 13vw, 60px); height: clamp(44px, 13vw, 60px); }
body.big-text .card, body.big-text .setting, body.big-text .phase-info, body.big-text .phase-msg, body.big-text .goal-list li,
body.big-text .help li, body.big-text .help p, body.big-text .hint, body.big-text .mission-body b, body.big-text .ach-body b { font-size: 1.12em; }
body.big-text .btn { font-size: 23px; }
body.big-text .btn.secondary { font-size: 20px; }
body.big-text .stat span { font-size: clamp(12px, 3.4vw, 14px); }
body.big-text .stat b { font-size: clamp(16px, 4.6vw, 20px); }
body.big-text .goal-chip { font-size: 15px; }
body.contrast .panel, body.contrast .card, body.contrast .goal-chip { border-color: #fff; }
body.contrast .panel { background: rgba(5, 15, 60, 0.95); }
body.contrast .overlay { background: rgba(3, 8, 40, 0.88); }
body.contrast .stat span, body.contrast .hint, body.contrast .phase-info, body.contrast .muted { color: #fff; }
body.contrast .goal-chip, body.contrast .btn, body.contrast .tile { text-shadow: 0 1px 0 #000, 0 0 3px #000; }

/* ─────────────────────────── Modo econômico ─────────────────────────── */

body.economy .overlay,
body.economy .panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.economy .jelly,
body.economy .badge,
body.economy .node.current .node-num,
body.economy .login-day.today { animation: none; }

/* ─────────────────────────── Animações ─────────────────────────── */

@keyframes fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop      { from { transform: scale(0.88) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes bump     { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes pulse    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes logo-in  { from { transform: scale(0.6) translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-in { from { transform: translate(-50%, -20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes toast-up { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes hop      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wiggle   { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes hand-swipe-h { 0%, 100% { transform: translateX(-70px); } 50% { transform: translateX(70px); } }
@keyframes hand-tap { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.78); } }
@keyframes hand-up { 0% { transform: translateY(60px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
@keyframes hand-down { 0% { transform: translateY(-60px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }
@keyframes drop {
  0%       { transform: translateY(-90px); opacity: 0; }
  14%      { opacity: 1; }
  28%      { transform: translateY(0) scale(1.1, 0.88); }
  34%      { transform: translateY(-9px) scale(0.95, 1.05); }
  40%, 82% { transform: translateY(0) scale(1); opacity: 1; }
  92%      { transform: scale(1.25); opacity: 0.9; }
  100%     { transform: scale(0); opacity: 0; }
}

/* ─────────────────────────── Telas baixas (16:9) ─────────────────────────── */

@media (max-height: 700px) {
  #app { gap: 4px; padding-top: calc(var(--safe-t) + 5px); padding-bottom: calc(var(--safe-b) + 6px); }
  .icon-btn { width: 34px; height: 34px; border-radius: 9px; }
  .icon-btn svg { width: 19px; height: 19px; }
  .logo-main { font-size: clamp(26px, 8.5vw, 38px); }
  .logo-sub { font-size: clamp(11px, 3.3vw, 15px); }
  .logo.big .logo-main { font-size: clamp(38px, 12vw, 54px); }
  .stats-panel { padding: 2px 3px 3px; }
  .stat { line-height: 1; }
  .stat span { font-size: 9.5px; }
  .stat b { font-size: clamp(12px, 3.7vw, 14px); }
  #nextCanvas { min-height: 34px; }
  .status-row { min-height: 24px; }
  .goal-chip { font-size: 12.5px; line-height: 19px; }
  .goal-ico { width: 17px; height: 17px; }
  .boost-btn { width: 34px; height: 27px; font-size: 15px; }
  .ctl { width: clamp(44px, 13vw, 56px); height: clamp(44px, 13vw, 56px); }
  .hold-btn { height: clamp(42px, 12vw, 52px); }
  .drop-stage { transform: scale(0.8); margin: -8px 0; }
  .menu-grid { gap: 6px; margin-top: 10px; }
  .tile { padding: 6px 4px 5px; font-size: 12px; }
  .tile i { font-size: 20px; }
  .card { padding: 14px 14px 14px; }
  .btn { padding: 10px 14px; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .jelly, .record-badge, .tap-start, .loading .logo, .node.current .node-num, .badge, .tut-hand, .hammer-hint, .login-day.today { animation: none; }
}

/* ─────────────────────────── 2.2: Rush, chefe, reforços novos, modos ─────────────────────────── */
.boost-btn[hidden] { display: none; }
.hammer-hint.paint { background: rgba(120, 30, 90, 0.85); border-color: #ff8bd1; }
.rush-bar {
  position: relative;
  /* base 100% com encolhimento: a margem lateral cabe dentro da linha em vez de somar */
  flex: 1 1 100%;
  min-width: 0;
  order: 10;
  margin: 1px 5% 2px;
  height: 15px;
  border-radius: 8px;
  background: rgba(0, 10, 50, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.rush-bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #ff9100, #ffe14d); transition: width 0.15s linear; }
.rush-bar span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 30, 0.9); opacity: 0.9;
}
.rush-bar.active { border-color: #ffe14d; box-shadow: 0 0 10px rgba(255, 225, 77, 0.8); }
.rush-bar.active i { background: linear-gradient(90deg, #ff3d7f, #ffe14d, #7ee8ff); animation: rushGlow 0.6s linear infinite alternate; }
@keyframes rushGlow { from { filter: brightness(1); } to { filter: brightness(1.5); } }
.board-stack.rush { box-shadow: 0 0 0 3px rgba(255, 225, 77, 0.85), 0 0 26px rgba(255, 160, 40, 0.9); }
.board-stack.frozen { box-shadow: 0 0 0 3px rgba(126, 232, 255, 0.85), 0 0 24px rgba(126, 232, 255, 0.8); }
.boss-bar {
  flex: 1 1 100%;
  min-width: 0;
  order: -1;
  margin: 2px 4% 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(10, 20, 70, 0.78);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 3;
}
.boss-face { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 1px #000); }
.boss-bar.hit .boss-face { animation: bossHit 0.35s ease-out; }
@keyframes bossHit { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-10deg); } 100% { transform: scale(1); } }
.boss-track { flex: 1; height: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.25); }
.boss-track i { display: block; height: 100%; width: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff3d3d, #ff8a1f); transition: width 0.25s ease-out; }
.boss-bar b { font-family: var(--font-display); font-size: 12px; color: #ffcdd2; min-width: 38px; text-align: right; }
.mode-row { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.mode-row > .btn { width: auto; margin-top: 0; }
.mode-row .infinite { flex: 1 1 auto; min-width: 0; }
.mode-row .modes {
  flex: 0 0 104px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 13px; line-height: 1.1; background: linear-gradient(#7ee8ff, #1b8cff); box-shadow: 0 5px 0 #0747a6, 0 8px 14px rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.mode-row .modes i { font-style: normal; font-size: 22px; line-height: 1; }
.modes-card { max-width: 420px; }
.mode-list { display: grid; gap: 8px; margin: 6px 0 10px; }
.mode-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.mode-card:active { transform: translateY(1px); }
.mode-card i { font-style: normal; font-size: 28px; line-height: 1; text-align: center; }
.mode-card b { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: 0.3px; }
.mode-card small { display: block; font-size: 11.5px; opacity: 0.85; line-height: 1.3; }
.mode-card em { grid-column: 2; font-style: normal; font-size: 11px; color: #ffe14d; }
.challenge-box { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(0, 10, 50, 0.3); margin-bottom: 10px; }
.challenge-have, .challenge-start { display: grid; gap: 8px; }
.challenge-label { margin: 0; font-size: 13px; text-align: center; opacity: 0.88; }
/* Código grande e fácil de ditar: fonte de título, espaçado e em amarelo sobre fundo escuro */
.challenge-code {
  margin: 0;
  padding: 6px 10px;
  border: 2px dashed rgba(255, 225, 77, 0.7);
  border-radius: 12px;
  background: rgba(0, 0, 30, 0.35);
  color: #ffe14d;
  font-family: "Lilita One", var(--font-ui), sans-serif;
  font-size: clamp(28px, 9vw, 38px);
  letter-spacing: 4px;
  text-align: center;
  user-select: all;
  -webkit-user-select: all;
}
.challenge-join { display: flex; gap: 6px; }
.challenge-join input { flex: 1; min-width: 0; text-transform: uppercase; text-align: center; letter-spacing: 2px; font-weight: 800; }
.goal-chip.freeze { color: #7ee8ff; }

/* ─────────────────────────── 2.2: perfil, amigos, liga, convites, álbum ─────────────────────────── */

/* Faixas do menu (evento de fim de semana e temporada) */
.menu-banner {
  margin: 10px 0 0;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1.5px dashed rgba(255, 212, 59, 0.75);
  background: rgba(255, 212, 59, 0.14);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffe14d;
}
.menu-banner.season { border-color: rgba(126, 232, 255, 0.7); background: rgba(126, 232, 255, 0.14); color: #cdf3ff; }

/* "Jogando como…" virou botão: parece texto, mas tem área de toque de botão */
button.menu-player {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 12px;
  background: rgba(0, 10, 50, 0.22);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
button.menu-player i { font-style: normal; margin-right: 5px; }
button.menu-player:active { transform: translateY(1px); }

/* Link discreto ("Esqueci a senha") */
.link-btn {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #bfe3ff;
  text-decoration: underline;
}
.btn.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #2c3440;
  text-shadow: none;
  background: linear-gradient(#ffffff, #e6ecf3);
  box-shadow: 0 5px 0 #9aa7b5, 0 8px 14px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.9);
}
.btn.google:active { box-shadow: 0 2px 0 #9aa7b5; }
.btn.google i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ea4335 0%, #fbbc05 40%, #34a853 70%, #4285f4 100%);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 15px;
  color: #fff;
}
.recover-box { margin-top: 10px; padding: 10px; border-radius: 14px; background: rgba(0, 10, 50, 0.35); text-align: left; }
.recover-box .text-input { display: block; margin-top: 8px; }
.recover-box .btn { margin-top: 8px; }

/* Perfil */
.prof-name {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: #ffe14d;
  text-shadow: 0 2px 0 var(--ink);
}
.prof-name small { font-family: var(--font-ui); font-size: 14px; opacity: 0.7; }
/* a lógica cria um botão por avatar; o seletor pega qualquer filho para não depender da classe */
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
#profAvatar > * {
  display: grid;
  place-items: center;
  height: 46px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 13px;
  background: rgba(0, 10, 50, 0.3);
  font-size: 26px;
  line-height: 1;
}
#profAvatar > .on,
#profAvatar > .sel,
#profAvatar > [aria-checked="true"],
#profAvatar > [aria-pressed="true"] {
  border-color: #ffd43b;
  background: rgba(255, 212, 59, 0.25);
  box-shadow: 0 0 0 2px rgba(255, 212, 59, 0.4);
}
.code-row { display: flex; align-items: center; gap: 8px; }
.friend-code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 700 20px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 3px;
  text-align: center;
  user-select: text;
  -webkit-user-select: text;
}
.prof-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.prof-stats li {
  min-width: 0;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(0, 10, 50, 0.28);
  font-size: 13px;
}
.prof-stats li span { display: block; font-size: 11.5px; color: var(--muted); }
.prof-stats li b {
  display: block;
  font-size: 16px;
  color: #ffe14d;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prof-history {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 34vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  text-align: left;
}
.prof-history li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-size: 13.5px; }
.prof-history li:nth-child(odd) { background: rgba(0, 10, 50, 0.18); }
.prof-history li b { margin-left: auto; color: #ffe14d; font-variant-numeric: tabular-nums; }
.prof-history:empty::after,
.prof-stats:empty::after { content: "—"; color: var(--muted); }
.invite-box { margin-top: 12px; padding: 10px 12px 12px; border-radius: 16px; border: 2px dashed rgba(255, 212, 59, 0.6); background: rgba(255, 212, 59, 0.1); }
.invite-box h3 { margin-top: 2px; }
.invite-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.invite-row .btn { flex: 0 0 auto; width: auto; margin-top: 0; }
.invite-row input { text-transform: uppercase; text-align: center; letter-spacing: 2px; font-weight: 800; }

/* Perfil de outro jogador */
.player-card .prof-stats { margin-top: 6px; }

/* Aba Amigos e aba Liga do ranking */
.friend-box { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.friend-box .btn { flex: 0 0 auto; width: auto; margin-top: 0; }
.friend-box input { text-transform: uppercase; text-align: center; letter-spacing: 2px; font-weight: 800; }
.league-box { margin-bottom: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(0, 10, 50, 0.3); }
.league-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.league-name { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: #ffe14d; text-shadow: 0 2px 0 var(--ink); }
.league-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.league-zones { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 700; }
.league-zones > * { padding: 3px 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); }
.league-zones > :first-child { background: rgba(61, 220, 90, 0.28); color: #c8ffd4; }
.league-zones > :last-child:not(:first-child) { background: rgba(255, 61, 87, 0.28); color: #ffd3d9; }
/* Faixas de promoção/rebaixamento na lista (a lógica marca a linha; aceito os dois nomes).
   Tarja pintada no fundo, e não com box-shadow, para não apagar o destaque de .me. */
.rank-list li.up,
.rank-list li.promote { background-image: linear-gradient(90deg, var(--good) 0 3px, transparent 3px); }
.rank-list li.down,
.rank-list li.relegate { background-image: linear-gradient(90deg, var(--bad) 0 3px, transparent 3px); }

/* Popup do resultado da liga */
.league-up-medal { margin: 0; font-size: 58px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0, 0, 30, 0.5)); animation: pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }

/* Álbum de figurinhas */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
  max-height: 52vh;
  padding: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
#stickerGrid > * {
  position: relative;
  display: grid;
  place-items: center;
  height: 52px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 13px;
  background: rgba(0, 10, 50, 0.3);
  font-size: 26px;
  line-height: 1;
}
#stickerGrid > * small { position: absolute; right: 4px; bottom: 2px; font-size: 9.5px; font-weight: 700; color: var(--muted); }
#stickerGrid > .locked { filter: grayscale(1); opacity: 0.4; }
#stickerGrid > .ready {
  border-color: #ffd43b;
  background: rgba(255, 212, 59, 0.25);
  animation: pulse 1.1s ease-in-out infinite;
}

/* ─────────────────────────── 2.2: mapa mais vivo ─────────────────────────── */

/* Adereços do tema: a lógica cria os emojis e posiciona com left/top */
.map-props { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.map-props > * {
  position: absolute;
  font-style: normal;
  font-size: 30px;
  line-height: 1;
  opacity: 0.92;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 30, 0.45));
  animation: sway 4.5s ease-in-out infinite;
}
/* posições de reserva: sem left/top os três adereços ainda ficam espalhados */
.map-props > :nth-child(1) { left: 8%; top: 24%; animation-delay: 0s; }
.map-props > :nth-child(2) { left: 70%; top: 50%; animation-delay: 0.9s; }
.map-props > :nth-child(3) { left: 14%; top: 76%; animation-delay: 1.8s; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.map-chest {
  position: absolute;
  z-index: 4;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 30, 0.5));
  animation: chest-hop 1.5s ease-in-out infinite;
}
.map-chest.done,
.map-chest.open,
.map-chest:disabled { animation: none; filter: grayscale(0.75) brightness(0.8); cursor: default; }
/* Ainda faltam fases: fica discreto com um cadeado, em vez de um baú cinza que parece defeito */
.map-chest.waiting { opacity: 0.5; filter: grayscale(0.35) drop-shadow(0 3px 3px rgba(0, 0, 30, 0.5)); }
.map-chest.waiting::after {
  content: "🔒";
  position: absolute;
  right: -2px;
  bottom: -2px;
  font-size: 17px;
  filter: none;
  text-shadow: 0 1px 2px rgba(0, 0, 30, 0.8);
}
.map-world-stars {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ffd43b;
  text-shadow: 0 1px 0 var(--ink);
}

body.economy .map-props > *,
body.economy .map-chest,
body.economy #stickerGrid > .ready { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .map-props > *, .map-chest, #stickerGrid > .ready, .league-up-medal { animation: none; }
}

/* ─────────────────────────── 2.2: decoração de temporada ─────────────────────────── */

/* Enfeites nos cantos de cima do menu. pointer-events: none para não roubar o toque. */
body[data-season] .menu-card::before,
body[data-season] .menu-card::after {
  position: absolute;
  top: 8px;
  z-index: 2;
  font-size: 26px;
  line-height: 1;
  opacity: 0.9;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 30, 0.5));
  pointer-events: none;
}
body[data-season] .menu-card::before { left: 10px; transform: rotate(-12deg); }
/* o X de fechar fica no canto direito: o enfeite entra um pouco mais para dentro */
body[data-season] .menu-card::after { right: 50px; transform: rotate(12deg); }
body[data-season="halloween"] .menu-card::before { content: "🎃"; }
body[data-season="halloween"] .menu-card::after { content: "🦇"; }
body[data-season="christmas"] .menu-card::before { content: "🎄"; }
body[data-season="christmas"] .menu-card::after { content: "🎁"; }
body[data-season="carnival"] .menu-card::before { content: "🎭"; }
body[data-season="carnival"] .menu-card::after { content: "🎊"; }
body[data-season="junina"] .menu-card::before { content: "🌽"; }
body[data-season="junina"] .menu-card::after { content: "🎆"; }

/* ─────────────────────────── 2.2: tablet e paisagem (item 34) ─────────────────────────── */

/* Deitado e com largura de tablet: HUD à esquerda, tabuleiro no meio, controles à direita.
   O retrato continua exatamente como estava (coluna única). */
@media (min-width: 700px) and (orientation: landscape) {
  #app {
    max-width: 1040px;
    display: grid;
    grid-template-columns: minmax(150px, 0.85fr) minmax(0, 1.7fr) minmax(150px, 0.85fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
  }
  .hud {
    grid-column: 1;
    grid-row: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    row-gap: 10px;
  }
  .hud-left    { grid-area: 1 / 1; }
  .hud-gear    { grid-area: 1 / 2; }
  .hud-logo    { grid-area: 2 / 1 / 3 / 3; }
  .hud .phase-toast { grid-area: 2 / 1 / 3 / 3; margin: 0; }
  .next-wrap   { grid-area: 3 / 1 / 4 / 3; }
  .stats-panel { grid-area: 4 / 1 / 5 / 3; padding: 8px 6px; gap: 6px; }
  #nextCanvas { min-height: 80px; }
  .status-row { grid-column: 2; grid-row: 1; }
  .play-area  { grid-column: 2; grid-row: 2; }
  .controls {
    grid-column: 3;
    grid-row: 1 / -1;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
  }
  .controls .ctl-group { justify-content: center; }
  .hold-btn { width: clamp(64px, 9vw, 88px); height: clamp(56px, 8vw, 70px); }
  /* canhoto: HUD e controles trocam de coluna */
  body.left-handed .controls { grid-column: 1; flex-direction: column; }
  body.left-handed .hud { grid-column: 3; }
  /* sobra largura: as janelas podem respirar um pouco */
  .card { width: min(100%, 440px); }
  .menu-overlay .card,
  .topbar { width: min(100%, 470px); }
}

/* Exclusão de conta: vermelho, mas sem chamar mais atenção que o resto dos ajustes */
.btn.danger { background: linear-gradient(#ff6b7d, #d62f45); box-shadow: 0 4px 0 #8f1526, 0 6px 12px rgba(0, 0, 30, 0.25); }