@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;700&display=swap');

:root{
  --laranja:#ff8a3d;
  --azul-ceu:#a5d8ff;
  --verde:#2ecc71;
  --vermelho:#ff7675;
  --roxo:#a29bfe;
  --borda-pote:#795548;
  --cinza:#6b7280;

  --tile: 50px;
  --gap: 3px;
  --peca: 44px;
  --emoji: 36px;
  --raio: 12px;
  --borda: 8px;
  --sideW: clamp(56px, 16vw, 130px);
}

html, body{ 
  overscroll-behavior: none; 
  -webkit-text-size-adjust: 100%; 
  touch-action: none; 
}

body{
  font-family:'Fredoka',sans-serif;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  height:100svh;
  overflow:hidden;
  position:relative;
}


.decor-fruta{
  position:absolute;
  font-size:22px;
  opacity:.22;
  z-index:-1;
  animation: flutuar linear infinite;
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.05));
  user-select:none;
  pointer-events:none;
}
@keyframes flutuar{
  from{ transform: translateY(-140px) translateX(0) rotate(0deg); }
  to{ transform: translateY(calc(120vh + 160px)) translateX(40px) rotate(360deg); }
}

/* Topo e Botões */
.topo{
  width:100%;
  padding:12px 20px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  z-index:20;
  box-sizing:border-box;
  gap: 10px;
}
.topo-esq { display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap;}
.topo-centro { display: flex; justify-content: center; align-items: center; }
.topo-dir { display: flex; justify-content: flex-end; }

.btn-sair{
  background:var(--vermelho);
  color:white;
  text-decoration:none;
  padding:8px 15px;
  border-radius:50px;
  font-weight:bold;
  font-size:.9rem;
  transition:.2s;
  user-select:none;
  white-space:nowrap;
  touch-action: manipulation;
}


.perigo-topo {
  background: rgba(255,255,255,.95);
  border: 2px solid rgba(0,0,0,.06);
  padding: 6px 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center; /* Garante centralização interna */
  gap: 12px;
  font-weight: 900;
  color: #444;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
  white-space: nowrap;
  margin: 0 auto; /* Força centralização */
}
.perigo-topo b { color: var(--vermelho); font-size: 1.1rem; }
.perigo-topo .barra {
  width: 100px;
  height: 12px;
  margin-top: 0;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
}

.ranking-topo{
  background: rgba(255,255,255,.95);
  border: 3px solid var(--laranja);
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 900;
  color: #555;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 15px rgba(255, 138, 61, 0.2);
  white-space: nowrap;
}
.ranking-topo b { font-size: 1.6rem; color: var(--laranja); line-height: 1; }

.layout{
  width: min(920px, calc(100vw - 16px));
  margin-top:10px;
  display:grid;
  grid-template-columns: var(--sideW) auto var(--sideW);
  gap:10px;
  align-items:start;
  z-index:15;
}
.side{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.center{ display:flex; flex-direction:column; align-items:center; min-width:0; position:relative; }

.placar-centro{
  display:flex; gap:12px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; z-index: 20;
}
.pill{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.95);
  border:2px solid rgba(0,0,0,.06); padding:8px 14px; border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,.06); user-select:none; font-size: 1.05rem; color: #444;
}
.pill b{ color:#111; font-size: 1.15rem; }
.mini-emoji{ font-size:1.3rem; line-height:1; }

.card-side{ padding:10px 10px; }
.side .linha-hud{ margin-bottom:6px; }
.side .titulo-hud{ font-size:.86rem; }
.side .valor-hud{ font-size:1rem; }

.side-left .next-box{
  width:100%; height:auto; aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center;
}
.side-left .next-box span{ font-size: clamp(2.0rem, 8vw, 3.1rem); line-height:1; }

.barra-compact{ height:12px; }    
.card-hud{
  background: rgba(255,255,255,.9); min-width:0; border:2px solid rgba(0,0,0,.06);
  border-radius:18px; padding:10px 12px; box-shadow:0 10px 20px rgba(0,0,0,.08); box-sizing:border-box;
}
.linha-hud{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; flex-wrap:wrap; }
.titulo-hud{ font-weight:800; color:#444; font-size:.92rem; min-width:0; }
.valor-hud{ font-weight:900; color:#111; min-width:0; }
.sub-hud{ margin-top:6px; font-size:.82rem; color:var(--cinza); }

.next-box{
  width: clamp(64px, 18vw, 96px); height: clamp(64px, 18vw, 96px); border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.65));
  border: 3px solid rgba(255,138,61,.45); box-shadow: 0 10px 18px rgba(0,0,0,.12), inset 0 0 0 4px rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center; font-size: clamp(2.2rem, 6.5vw, 3.2rem); line-height:1;
}
@keyframes pop{ 0%{ transform: scale(.92); } 60%{ transform: scale(1.08); } 100%{ transform: scale(1); } }
.next-box.pop{ animation: pop .22s ease-out; }

.barra{
  height:10px; background: rgba(0,0,0,.08); border-radius:999px; overflow:hidden; margin-top:8px;
}
.barra > div{
  height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg, var(--verde), var(--laranja), var(--vermelho));
  transition: width .25s ease;
}

#pote{
  position:relative; width:250px; height:400px; background:rgba(255,255,255,.3);
  background-image: linear-gradient(rgba(255,255,255,.12) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.12) 2px, transparent 2px);
  background-size: var(--tile) var(--tile); border: var(--borda) solid var(--borda-pote); border-top:none;
  border-radius:0 0 30px 30px; margin-top:0; box-shadow:0 10px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(255,255,255,.5);
  touch-action:none; transition: border-color 0.3s ease;
}

@keyframes perigoPulsar {
  0% { box-shadow: 0 10px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(255,255,255,.5), 0 0 0 0 rgba(255, 118, 117, 0.7); }
  70% { box-shadow: 0 10px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(255,255,255,.5), 0 0 0 15px rgba(255, 118, 117, 0); }
  100% { box-shadow: 0 10px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(255,255,255,.5), 0 0 0 0 rgba(255, 118, 117, 0); }
}
#pote.alerta-perigo { animation: perigoPulsar 1.5s infinite; border-color: var(--vermelho); }
#pote.glow{ box-shadow: 0 10px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(255,255,255,.55), 0 0 0 6px rgba(46, 204, 113, .12), 0 0 24px rgba(46, 204, 113, .35); }
#pote.shake{ animation: tremer .35s ease-in-out; }
@keyframes tremer{ 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-5px); } 50%{ transform: translateX(5px); } 75%{ transform: translateX(-3px); } }

.doce{
  position:absolute; width:var(--peca); height:var(--peca); margin:var(--gap); top:0; left:0;
  border-radius:var(--raio); display:flex; justify-content:center; align-items:center; font-size:var(--emoji);
  transition: transform .15s cubic-bezier(.175,.885,.32,1.275); will-change: transform;
  filter: drop-shadow(0 4px 2px rgba(0,0,0,.2)); z-index:5; user-select:none; pointer-events:none;
}
.sombra {
  position:absolute; width:var(--peca); height:var(--peca); margin:var(--gap); top:0; left:0;
  border-radius:var(--raio); display:flex; justify-content:center; align-items:center; font-size:var(--emoji);
  opacity: 0.35; z-index: 4; pointer-events: none; transition: transform .1s ease; will-change: transform;
}
.particula{ position:absolute; pointer-events:none; font-size:1rem; animation: voar .5s ease-out forwards; }
@keyframes voar{ to{ transform: translate(var(--dx), var(--dy)) rotate(360deg); opacity:0; } }
.explodir{ transform:scale(1.5) !important; filter:brightness(2); opacity:0; transition:.3s; }

#controles{ margin-top:12px; display:flex; gap:15px; z-index:20; }
.btn-comando{
  background:var(--verde); border:none; width:clamp(56px, 16vw, 66px); height:clamp(52px, 14vw, 60px);
  border-radius:15px; color:white; font-size:1.8rem; cursor:pointer; box-shadow:0 5px 0 #27ae60;
  transition:.1s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select:none;
}
.btn-comando:active{ transform: translateY(3px); box-shadow:0 2px 0 #27ae60; }

.controles-fixos{
  position:fixed; bottom: calc(18px + env(safe-area-inset-bottom)); right:  calc(18px + env(safe-area-inset-right));
  display:flex; flex-direction:column; gap:10px; z-index:110;
}
.btn-redondo{
  width:50px; height:50px; border-radius:50%; border:3px solid white; background:white; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,.2);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select:none;
}

.overlay{
  position:fixed; inset:0; background:rgba(165,216,255,.92); backdrop-filter: blur(10px); z-index:100;
  display:flex; align-items:center; justify-content:center; padding: 12px; box-sizing: border-box; overflow:auto; 
}
.card{
  background:white; border:8px solid var(--laranja); border-radius:40px; padding:22px; width:min(440px, 92vw);
  max-height: calc(100svh - 24px); overflow:auto; box-sizing:border-box; box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.card h1, .card h2{ margin:0; }
.card p{ margin:10px 0; }

.como{ margin-top:12px; background: rgba(0,0,0,.03); border:2px dashed rgba(0,0,0,.12); border-radius:24px; padding:12px 14px; color:#444; font-size:.95rem; }
.como ul{ margin:8px 0 0 18px; padding:0; }
.como li{ margin:6px 0; }

.opcoes{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.seg{ display:flex; gap:8px; flex: 1; min-width: 0; }
.btn-chip{
  flex:1; border:none; padding:10px 12px; border-radius:999px; font-weight:900; cursor:pointer;
  background:#f3f4f6; color:#111; box-shadow: 0 6px 14px rgba(0,0,0,.08); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn-chip.ativo{ background: var(--roxo); color:white; }

.btn-principal{
  background:var(--verde); color:white; border:none; padding:14px 16px; border-radius:50px;
  font-size:1.2rem; font-weight:900; cursor:pointer; width:100%; margin-top:14px; box-shadow:0 6px 0 #27ae60;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}

.toast{
  position:fixed; left:50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(255,255,255,.92); border:2px solid rgba(0,0,0,.08); padding:10px 14px; border-radius:999px;
  box-shadow:0 12px 28px rgba(0,0,0,.18); z-index:120; display:none; font-weight:900; color:#111;
  max-width: min(520px, 92vw); text-align:center;
}

.hud-mobile{ display:none; gap:8px; justify-content:center; align-items:stretch; z-index:30; margin-bottom: 8px; width: 100%; }
.hud-chip{
  background: rgba(255,255,255,.92); border:2px solid rgba(0,0,0,.06); border-radius:18px;
  box-shadow:0 10px 20px rgba(0,0,0,.10); padding:8px 10px; min-width:78px; display:flex; flex-direction:column; gap:6px;
}
.hud-chip.pop{ animation: pop .22s ease-out; }
.hud-lab{ display:flex; justify-content:space-between; gap:10px; font-size:.78rem; font-weight:900; color:#333; white-space:nowrap; }
.hud-emoji{ font-size:2.55rem; line-height:1; text-align:center; filter: drop-shadow(0 6px 3px rgba(0,0,0,.14)); }

/* RESPONSIVIDADE */
@media (max-width: 720px){
  .topo { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 8px 12px !important; }
  .topo-esq, .topo-dir { width: auto; }
  .topo-centro { width: 100%; order: 3; margin-top: 8px; display: flex; justify-content: center; } /* Centralizado no mobile */
  .perigo-topo { width: fit-content; justify-content: center; margin: 0 auto; }
}

@media (max-width: 560px), (max-height: 520px){
  .layout{ grid-template-columns: 1fr; width: calc(100vw - 10px); gap:0; }
  .side{ display:none !important; }
  .hud-mobile{ display:flex !important; }
  .toast{ display:none !important; }
  .btn-sair{ padding:7px 12px; font-size:.85rem; }
  .ranking-topo { font-size: 1rem; padding: 4px 12px; }
  .ranking-topo b { font-size: 1.2rem; }
  .placar-centro{ margin-bottom: 8px; gap: 8px; }
  .placar-centro .pill{ font-size: .9rem; padding: 6px 12px; }
  .placar-centro .pill b{ font-size: 1rem; }
  .controles-fixos{ display:none !important; }
  #controles{ margin-top:8px; gap:12px; }
}

@media (max-width: 420px), (max-height: 520px){
  .layout{ width: calc(100vw - 8px); }
  #controles{ margin-top:6px; gap:10px; }
}
@media (max-width: 340px){ #controles{ gap:8px; } }