/* =============================================================
   feira.css — Edição FEIRA (monitor quadrado touch)
   -------------------------------------------------------------
   O app ocupa um QUADRADO central = min(largura, altura) da tela,
   então cabe perfeito num monitor quadrado e não distorce em telas
   normais durante os testes. Tudo é grande, para dedo.
   ============================================================= */

:root {
  --deep-0: #04121e; --deep-1: #072135; --deep-2: #0b2d46;
  --panel: rgba(10, 42, 66, 0.66); --line: rgba(95, 227, 255, 0.18);
  --cyan: #29aad4; --cyan-bright: #5fe3ff; --gold: #ffc24b; --green: #3fe0a0;
  --text: #eaf7ff; --dim: #8fb2c7;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text); background: #01080f;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; user-select: none;
}

/* o quadrado */
#feira {
  position: relative; width: min(100vw, 100vh); height: min(100vw, 100vh);
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #0d3a5c 0%, transparent 60%),
    linear-gradient(180deg, var(--deep-1), var(--deep-0));
}

.fscreen {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 5%; text-align: center;
}
.fscreen.active { display: flex; animation: fin .35s ease; }
@keyframes fin { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

.fbrand { display: flex; align-items: center; justify-content: center; }
.fbrand-img { width: 46vmin; height: auto; display: block; }

/* botões grandes */
.fbtn {
  font: inherit; font-weight: 700; border: 0; cursor: pointer; color: #03202f;
  background: linear-gradient(180deg, var(--cyan-bright), var(--cyan));
  border-radius: 999px; padding: 3.4vmin 7vmin; font-size: 4vmin;
  box-shadow: 0 1vmin 3vmin rgba(41, 170, 212, .4);
  transition: transform .1s ease;
}
.fbtn:active { transform: scale(.96); }
.fbtn--gold { background: linear-gradient(180deg, #ffd873, var(--gold)); }
.fbtn--ghost { background: rgba(255,255,255,.08); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.fbtn--sm { font-size: 2.6vmin; padding: 2vmin 4vmin; }

/* ---------------- atrair ---------------- */
#fAttract .fbig-shark { margin: 1.5vmin 0; filter: drop-shadow(0 2vmin 4vmin rgba(41,170,212,.5)); }
#fAttract .fbig-shark img { width: 32vmin; height: auto; }
.fattract-title {
  font-size: 6.5vmin; font-weight: 800; line-height: 1.05;
  background: linear-gradient(180deg, #fff, var(--cyan-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fattract-sub { font-size: 3.4vmin; color: var(--gold); font-weight: 700; margin: 1.5vmin 0 3vmin; }
.ftap {
  font-size: 3.2vmin; color: var(--text); background: rgba(255,255,255,.08);
  border: 1px solid var(--line); border-radius: 999px; padding: 2.4vmin 6vmin;
  animation: tapPulse 1.4s ease-in-out infinite;
}
@keyframes tapPulse { 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.06);opacity:1} }
.fattract-foot { position: absolute; bottom: 4vmin; font-size: 2.4vmin; color: var(--dim); }

/* prova social + ranking do dia */
.fsocial { margin-top: 2.5vmin; width: 84%; }
.fsocial-count {
  font-size: 3vmin; font-weight: 700; color: var(--green);
  background: rgba(63, 224, 160, .1); border: 1px solid rgba(63, 224, 160, .3);
  border-radius: 999px; padding: 1.6vmin 4vmin; display: inline-block;
}
.fboard-top { margin-top: 2.5vmin; display: flex; flex-direction: column; gap: 1vmin; align-items: center; }
.fboard-top .bt-title { font-size: 2.4vmin; color: var(--gold); font-weight: 700; letter-spacing: .05em; }
.fboard-top .bt-row { font-size: 2.6vmin; color: var(--text); display: flex; gap: 1.5vmin; }
.fboard-top .bt-row b { color: var(--cyan-bright); }
.fboard-top .bt-row .bt-star { color: var(--gold); }
.fboard-top .bt-row .bt-time { color: var(--gold); font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; }

/* QR takeaway na tela final */
.fqr { display: flex; flex-direction: column; align-items: center; gap: 1.5vmin; margin: 2vmin 0 3vmin; }
.fqr img { width: 34vmin; height: 34vmin; border-radius: 2vmin; background: #fff; padding: 2vmin; }
.fqr span { font-size: 2.6vmin; color: var(--dim); max-width: 70%; }

/* ---------------- cadastro ---------------- */
.ftitle { font-size: 5.5vmin; font-weight: 800; }
.fsub { font-size: 3vmin; color: var(--dim); margin: 1vmin 0 4vmin; }
.ffield { width: 100%; max-width: 80%; text-align: left; margin-bottom: 3vmin; }
.ffield > span { display: block; font-size: 2.6vmin; color: var(--dim); margin-bottom: 1vmin; }
.ffield > span i { color: var(--gold); font-style: normal; }
.ffield input, .ffield select {
  width: 100%; font: inherit; font-size: 4vmin; color: var(--text);
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 2.4vmin; padding: 3vmin; -webkit-appearance: none; appearance: none;
}
.ffield input:focus, .ffield select:focus { outline: .5vmin solid var(--cyan); }
.fconsent { display: flex; gap: 2vmin; align-items: flex-start; text-align: left;
  max-width: 80%; font-size: 2.5vmin; color: var(--dim); line-height: 1.35; margin-bottom: 3vmin; }
.fconsent input { width: 5vmin; height: 5vmin; flex: none; accent-color: var(--cyan); }
.ferror { color: #ff9b8c; font-size: 3vmin; min-height: 3.6vmin; margin-bottom: 1vmin; }
.frow { display: flex; gap: 3vmin; }

/* ---------------- jogo ---------------- */
#fGame { padding: 0; }
.fhud {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 3vmin 4vmin; gap: 2vmin; flex: none;
}
.fhud-l { text-align: left; }
.fhud-name { font-size: 3.6vmin; font-weight: 700; }
.fhud-city { font-size: 2.4vmin; color: var(--dim); }
.fhud-stat { font-size: 3vmin; color: var(--dim); }
.fhud-stat b { font-size: 4.4vmin; color: var(--cyan-bright); }
.fhud-time { color: var(--gold); font-weight: 700; }
.fhud-time b { color: var(--gold); font-variant-numeric: tabular-nums; }
.fboard { position: relative; flex: 1; width: 100%; min-height: 0; }
#board { display: block; touch-action: none; }
.fboard-layer { position: absolute; inset: 0; pointer-events: none; }
.fmap-credit { position: absolute; right: 1.5vmin; bottom: 1vmin; font-size: 2vmin; color: rgba(234,247,255,.5); }
.fgame-foot { display: flex; gap: 3vmin; padding: 3vmin; flex: none; }
.ffibrao { position: absolute; left: 2vmin; bottom: 12vmin; display: flex; align-items: flex-end; gap: 1.5vmin; pointer-events: none; }
.ffibrao .fibrao-bubble { max-width: 44vmin; font-size: 2.6vmin; }

/* partículas (reaproveita .spark do jogo) */
.spark { position: absolute; left: 0; top: 0; width: 1.6vmin; height: 1.6vmin; border-radius: 50%; }
.spark.gold { background: radial-gradient(circle, #ffe9a8, #ffbf3b 70%); }
.spark.cyan { background: radial-gradient(circle, #d4fbff, #5fe3ff 70%); }

/* ---------------- brinde ---------------- */
.fprize-shark img { width: 30vmin; }
.fprize-slot {
  font-size: 6vmin; font-weight: 800; color: var(--gold); margin: 3vmin 0;
  min-height: 8vmin; display: flex; align-items: center; justify-content: center;
  background: rgba(255,194,75,.1); border: .4vmin solid rgba(255,194,75,.4);
  border-radius: 3vmin; padding: 2vmin 5vmin; min-width: 60%;
}
.fprize-slot.landed { animation: prizePop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes prizePop { from { transform: scale(.7); } to { transform: scale(1); } }
.fprize-claim { font-size: 3vmin; color: var(--dim); margin: 3vmin 0 4vmin; max-width: 80%; }

/* ---------------- admin ---------------- */
.fadmin-list { width: 84%; max-height: 46vmin; overflow-y: auto; text-align: left; margin: 3vmin 0; }
.fadmin-row { display: flex; justify-content: space-between; font-size: 3vmin;
  padding: 2vmin 0; border-bottom: 1px solid var(--line); }
.fadmin-row b { color: var(--cyan-bright); }
.fadmin-big { font-size: 5vmin; font-weight: 800; color: var(--gold); }
.fhidden-corner { position: absolute; top: 0; right: 0; width: 14vmin; height: 14vmin; }