/* m e u . a p p  ·  neumorfismo: fundo cinza-claro, relevo branco, cesto afundado.
   palco à esquerda (marca · cestos · busca lá embaixo) + menu lateral à direita com todos os apps. */

:root{
  --fundo:      #E8EAEF;
  --carta:      #F0F1F5;
  --carta-alto: #FBFCFD;
  --sombra-e:   #FFFFFF;      /* luz em cima à esquerda */
  --sombra-d:   #C6CAD6;      /* sombra embaixo à direita */
  --tinta:      #5B6172;
  --tinta-2:    #8A90A0;
  --respiro:    76px;                 /* 2 cm de ar em toda a volta */
  --ar-app:     19%;                  /* a beiradinha por dentro do squircle */
  --mola:       cubic-bezier(.34,1.36,.64,1);
}

@font-face{
  font-family:'Smigle';
  src: url('smigle.otf') format('opentype');
  font-weight: normal; font-display: swap;
}

*{ margin:0; padding:0; box-sizing:border-box; }
[hidden]{ display:none !important; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:#D2D6E1; border-radius:99px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

html, body{
  min-height:100dvh;
  background: var(--fundo);
  color: var(--tinta);
  font-family:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.tela{ min-height:100dvh; display:grid; grid-template-columns: 1fr 1fr; }

/* ═════════ palco ═════════ */
.palco{
  display:flex; flex-direction:column; min-width:0;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none;
}
.palco::-webkit-scrollbar{ width:0; height:0; display:none; }
/* a primeira tela: só a marca e os cestos */
.primeira{
  flex:none; min-height:100dvh;
  display:flex; flex-direction:column;
  padding: calc(var(--respiro) + env(safe-area-inset-top)) 0 0 var(--respiro);
  padding-right: 26px;
}

/* ───────── a maçãzinha ───────── */
.maca{
  width:52px; height:52px; object-fit:contain; flex:none; align-self:flex-start;
  filter: drop-shadow(0 8px 16px rgba(232,73,127,.22));
  animation: cair-maca 1.1s var(--mola) both, respirar 6s ease-in-out 1.2s infinite;
  transition: filter .4s ease;
  cursor:pointer;
}
.maca:hover{ animation: sacudir .7s ease both; filter: drop-shadow(0 12px 26px rgba(232,73,127,.42)); }

/* ───────── os cestos ───────── */
.cestos{
  flex:1; min-height:0; position:relative;
  margin: 34px 0 0;
}

.cesto{
  position:absolute; left:var(--x,0); top:var(--y,0);
  display:flex; flex-direction:column; align-items:center;
  cursor:grab; user-select:none; touch-action:none; border:0; background:transparent; font:inherit;
  animation: pousar 1s var(--mola) both var(--atraso,0s), boiar 7s ease-in-out infinite var(--atraso,0s);
}
.cesto.mexendo{ cursor:grabbing; z-index:5; animation:none; }
.cesto.mexendo .bojo{ transition:none; }

.bojo{
  position:relative;
  width: var(--tam, 148px); height: var(--tam, 148px);
  border-radius:50%;
  background: var(--fundo);
  box-shadow: inset 8px 8px 17px var(--sombra-d), inset -8px -8px 17px var(--sombra-e);
  display:grid; place-items:center;
  transition: box-shadow .34s ease, transform .34s var(--mola);
}
/* o brilho da cor do cesto, bem de leve, no fundo do poço */
.bojo::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 50% 55%, var(--cor) 0%, transparent 78%);
  opacity:.1; transition: opacity .34s ease;
  pointer-events:none;
}
.cesto:hover .bojo{ transform: translateY(-3px); }
.cesto:hover .bojo::before{ opacity:.24; }

/* está passando um app por cima: o cesto abre */
.cesto.alvo .bojo{
  transform: scale(1.07);
  box-shadow: inset 12px 12px 22px var(--sombra-d), inset -12px -12px 22px var(--sombra-e), 0 0 0 3px var(--cor);
}
.cesto.alvo .bojo::before{ opacity:.4; }
/* acabou de cair um app aqui */
.cesto.caiu .bojo{ animation: bater .6s var(--mola); }
.bojo::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--cor); opacity:0; pointer-events:none;
}
.cesto.caiu .bojo::after{ animation: onda .8s ease-out; }

/* o cantinho de mudar o tamanho */
.pegador{
  position:absolute; right:7%; bottom:7%; z-index:3;
  width:18px; height:18px; border-radius:50%; background:transparent;
  display:grid; place-items:center; cursor:nwse-resize; touch-action:none;
  opacity:0; transition: opacity .4s ease;
}
.cesto.na-beira .pegador{ opacity:.32; }
.cesto.na-beira:hover .pegador{ opacity:.5; }
.cesto.na-beira .bojo{ cursor:nwse-resize; }
.pegador::after{
  content:''; width:7px; height:7px;
  border-right:1.5px solid var(--tinta-2); border-bottom:1.5px solid var(--tinta-2);
  border-radius:1px;
}

/* o montinho de apps dentro do cesto */
.monte{
  display:grid; grid-template-columns: repeat(2, auto); gap: calc(var(--tam, 148px) * .045);
  place-items:center;
}
.mini{
  animation-delay: var(--atraso, 0s);
  width: calc(var(--tam, 148px) * .155); height: calc(var(--tam, 148px) * .155);
  border-radius: calc(var(--tam, 148px) * .05);
  display:grid; place-items:center;
  background: linear-gradient(145deg, var(--carta-alto), var(--carta));
  box-shadow: 3px 3px 6px var(--sombra-d), -3px -3px 6px var(--sombra-e);
  animation: pipoca .4s var(--mola) both;
}
.mini svg{ width: calc(var(--tam, 148px) * .085); height: calc(var(--tam, 148px) * .085); fill:none; stroke:var(--cor-ic); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mais-n{
  grid-column:1/-1; font-size:11.5px; color:var(--tinta-2); letter-spacing:.03em; padding-top:1px;
}

.cesto-nome{
  margin-top:20px; min-width:132px; min-height:1.5em; padding:7px 18px; border-radius:99px;
  font-size:12px; letter-spacing:.07em; color:var(--tinta-2); text-align:center; line-height:1.4;
  outline:0; cursor:text; caret-color:var(--cor);
  box-shadow: inset 3px 3px 7px var(--sombra-d), inset -3px -3px 7px var(--sombra-e);
  transition: box-shadow .3s ease, color .3s ease;
}
.cesto-nome:hover, .cesto-nome:focus{
  color:var(--tinta);
  box-shadow: inset 5px 5px 11px var(--sombra-d), inset -5px -5px 11px var(--sombra-e);
}


/* ───────── a busca, lá embaixo no meio, com respiro ───────── */
.rodape{
  flex:none; display:flex; justify-content:center;
  padding: 160px var(--respiro) calc(120px + env(safe-area-inset-bottom));
}
.busca{
  width:min(520px, 100%);
  display:flex; align-items:center; gap:13px;
  padding:0 22px; height:58px;
  background: var(--fundo);
  border-radius:99px;
  box-shadow: inset 5px 5px 11px var(--sombra-d), inset -5px -5px 11px var(--sombra-e);
  transition: box-shadow .3s ease;
}
.busca:focus-within{ box-shadow: inset 8px 8px 15px var(--sombra-d), inset -8px -8px 15px var(--sombra-e); }
.ic-busca{ width:19px; height:19px; flex:none; fill:none; stroke:var(--tinta-2); stroke-width:2; stroke-linecap:round; }
.busca input{
  flex:1; border:0; outline:0; background:transparent;
  font:inherit; font-size:16px; color:var(--tinta); min-width:0; letter-spacing:.02em;
}
.busca input::placeholder{ color:var(--tinta-2); }
.busca input::-webkit-search-cancel-button{ display:none; }
.limpar{
  border:0; background:transparent; cursor:pointer; padding:5px; display:grid; place-items:center;
  border-radius:99px; transition: transform .25s var(--mola);
}
.limpar svg{ width:15px; height:15px; fill:none; stroke:var(--tinta-2); stroke-width:2.2; stroke-linecap:round; }
.limpar:hover{ transform: rotate(90deg); }

/* ═════════ menu lateral à direita ═════════ */
.campo{
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background: var(--fundo);
  padding: calc(var(--respiro) + env(safe-area-inset-top)) var(--respiro) calc(var(--respiro) + env(safe-area-inset-bottom)) 26px;
  animation: entrar-lado .6s var(--mola) both;
}
.conta{ position:absolute; left:0; right:0; font-size:11.5px; color:var(--tinta-2); letter-spacing:.05em; text-align:center; padding:26px 0 4px; }
.abas{ display:flex; gap:9px; }
.aba{
  border:0; cursor:pointer; font:inherit; font-size:12.5px; letter-spacing:.05em;
  color:var(--tinta-2); padding:9px 17px; border-radius:99px;
  background: var(--fundo);
  box-shadow: 4px 4px 8px var(--sombra-d), -4px -4px 8px var(--sombra-e);
  transition: box-shadow .28s ease, color .28s ease;
}
.aba:hover{ color:var(--tinta); }
.aba.ativa{
  color:var(--tinta);
  box-shadow: inset 4px 4px 8px var(--sombra-d), inset -4px -4px 8px var(--sombra-e);
}

.lista{
  position:relative;
  flex:1; min-height:0; overflow:hidden; overscroll-behavior:contain;
  border-radius: 46px;
  background: linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,.06));
  box-shadow: inset 2px 2px 5px rgba(255,255,255,.9),
              inset -2px -2px 6px rgba(198,202,214,.55),
              10px 10px 26px var(--sombra-d), -10px -10px 26px var(--sombra-e);
  scrollbar-width:none;
}
.lista::-webkit-scrollbar{ width:0; height:0; display:none; }
.lista::-webkit-scrollbar{ width:0; height:0; display:none; }

.item{
  position:absolute; left:0; top:0; will-change: transform;
  display:grid; place-items:center;
  border-radius: 30%;
  cursor:grab; user-select:none; text-align:center;
  background: linear-gradient(150deg, #FFFFFF, var(--carta-alto) 55%, var(--carta));
  box-shadow: 6px 6px 14px var(--sombra-d), -6px -6px 14px var(--sombra-e);
  transition: box-shadow .35s ease;
}
.item::after{
  content:''; position:absolute; inset:-42%; z-index:-1; border-radius:50%;
  background: radial-gradient(circle, var(--aura, transparent) 0%, transparent 62%);
  opacity:.5; pointer-events:none;
  animation: respirar-aura calc(var(--ritmo, 7s) * .8) ease-in-out infinite;
}
.item:hover::after{ opacity:.95; }
.item::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(circle at 30% 22%, #FFFFFF 0%, var(--glow) 38%, transparent 78%);
  opacity:1; pointer-events:none; transition: opacity .3s ease;
}
.item:hover{
  z-index:3;
  box-shadow: 12px 12px 26px var(--sombra-d), -12px -12px 26px var(--sombra-e);
}
.item:hover::before{ opacity:1; }
.item:active{ cursor:grabbing; }
.item.tocado{ animation: cutucado .46s var(--mola) !important; }
.item.voando{
  z-index:99; animation:none; cursor:grabbing; margin:0;
  box-shadow: 20px 20px 40px var(--sombra-d), -20px -20px 40px var(--sombra-e),
              0 0 70px -2px var(--aura, transparent);
  transition: box-shadow .2s ease;
}
/* os brilhinhos */
.faisca{
  position:fixed; z-index:120; pointer-events:none;
  width:var(--fs,7px); height:var(--fs,7px); margin:calc(var(--fs,7px) / -2);
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,255,255,.45) 55%, transparent 72%);
  box-shadow: 0 0 12px rgba(255,255,255,.9);
  animation: brilhar .95s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes brilhar{
  0%  { opacity:0; transform: translate(0,0) scale(.3); }
  22% { opacity:1; transform: translate(calc(var(--fx) * .35), calc(var(--fy) * .35)) scale(1.25); }
  100%{ opacity:0; transform: translate(var(--fx), var(--fy)) scale(.35); }
}
.item.arrastando{ opacity:.4; }
.item.pego{
  box-shadow: inset 6px 6px 13px var(--sombra-d), inset -6px -6px 13px var(--sombra-e);
}
.letreiro{
  position:absolute; inset:var(--ar-app); display:block;
  clip-path: inset(0 round 18%);          /* a curva do squircle, por dentro da beiradinha */
  width:auto; height:auto;
  font-family:'Smigle', 'Nunito', sans-serif;
  fill: var(--cor);
  filter: drop-shadow(0 0 10px var(--glow)) saturate(1.25);
}
.ponto{
  position:absolute; top:-4px; right:-4px; z-index:2;
  width:12px; height:12px; border-radius:50%; background:var(--dot); box-shadow:0 0 9px var(--dot);
}
.abrir{
  position:absolute; top:-6px; left:-8px; z-index:2;
  border:0; background:transparent; cursor:pointer; padding:6px; border-radius:99px;
  opacity:0; transition: opacity .25s ease, transform .25s var(--mola);
}
.abrir svg{ width:14px; height:14px; fill:none; stroke:var(--tinta-2); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.item:hover .abrir{ opacity:1; }
.abrir:hover{ transform: translate(2px,-2px); }

.nada{ padding:56px 10px; text-align:center; color:var(--tinta-2); font-size:13.5px; line-height:1.7; }

/* ═════════ gaveta do cesto ═════════ */
.veu{
  position:fixed; inset:0; z-index:40;
  background: rgba(196,201,214,.5); backdrop-filter: blur(7px);
  display:grid; place-items:center; padding:26px;
  animation: aparecer .3s ease both;
}
.gaveta{
  width:min(560px, 100%); max-height:min(78dvh, 720px);
  display:flex; flex-direction:column;
  padding:34px 30px 26px; border-radius:34px;
  background: linear-gradient(145deg, var(--carta-alto), var(--carta));
  box-shadow: 16px 16px 34px var(--sombra-d), -16px -16px 34px var(--sombra-e);
  animation: subir .45s var(--mola) both;
}
.gaveta-topo{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:24px; }
.gaveta-topo h2{ font-size:19px; font-weight:400; letter-spacing:.06em; color:var(--cor,var(--tinta)); }
.fechar{
  border:0; cursor:pointer; padding:11px; border-radius:99px; background:var(--fundo);
  box-shadow: 4px 4px 9px var(--sombra-d), -4px -4px 9px var(--sombra-e);
  display:grid; place-items:center; transition: transform .25s var(--mola);
}
.fechar svg{ width:14px; height:14px; fill:none; stroke:var(--tinta-2); stroke-width:2.2; stroke-linecap:round; }
.fechar:hover{ transform: rotate(90deg); }
.gaveta-lista{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-right:6px; }
.tirar{
  flex:none; border:0; cursor:pointer; font:inherit; font-size:11.5px; letter-spacing:.05em; color:var(--tinta-2);
  padding:8px 15px; border-radius:99px; background:var(--fundo);
  box-shadow: 3px 3px 7px var(--sombra-d), -3px -3px 7px var(--sombra-e);
  transition: box-shadow .25s ease, color .25s ease;
}
.tirar:hover{ color:var(--tinta); box-shadow: inset 3px 3px 7px var(--sombra-d), inset -3px -3px 7px var(--sombra-e); }

/* ═════════ movimento ═════════ */
@keyframes subir{ from{ opacity:0; transform: translateY(20px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes descer{ from{ opacity:0; transform: translateY(-16px); } to{ opacity:1; transform:none; } }
@keyframes entrar-lado{ from{ opacity:0; transform: translateX(26px); } to{ opacity:1; transform:none; } }
@keyframes aparecer{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pipoca{ from{ opacity:0; transform: scale(.5); } to{ opacity:1; transform:none; } }
@keyframes respirar{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-5px) rotate(-2.5deg); } }
@keyframes cair-maca{ 0%{ opacity:0; transform: translateY(-70px) rotate(-40deg) scale(.4); } 60%{ opacity:1; transform: translateY(6px) rotate(8deg) scale(1.08); } 100%{ opacity:1; transform:none; } }
@keyframes sacudir{ 0%,100%{ transform: rotate(0) scale(1); } 25%{ transform: rotate(-11deg) scale(1.12); } 55%{ transform: rotate(9deg) scale(1.12); } 80%{ transform: rotate(-4deg) scale(1.05); } }
@keyframes pousar{ 0%{ opacity:0; transform: translateY(46px) scale(.55); } 65%{ opacity:1; transform: translateY(-8px) scale(1.06); } 100%{ opacity:1; transform:none; } }
@keyframes boiar{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }
@keyframes flutuar{
  0%,100%{ transform: translate3d(0,0,0) rotate(0) scale(1); }
  20%    { transform: translate3d(4px,-9px,0) rotate(var(--giro,0deg)) scale(1.015); }
  45%    { transform: translate3d(0,-16px,0) rotate(0) scale(1.03); }
  70%    { transform: translate3d(-4px,-8px,0) rotate(calc(var(--giro,0deg) * -1)) scale(1.015); }
}
@keyframes onda{ 0%{ opacity:.85; transform: scale(1); } 100%{ opacity:0; transform: scale(1.5); } }
@keyframes chegar{ 0%{ opacity:0; transform: translateY(30px) scale(.82); } 100%{ opacity:1; transform:none; } }
/* vem correndo de baixo, FREIA bem na frente, e devagarzinho vai pro ladinho dele */
@keyframes desfilar{
  0%   { opacity:0;
         transform: translate(var(--dx,0px), calc(var(--dy,0px) + 105vh)) scale(1.95) rotate(calc(var(--vindo,1) * 10deg));
         animation-timing-function: cubic-bezier(.12,.72,.18,1); }
  24%  { opacity:1;
         transform: translate(var(--dx,0px), calc(var(--dy,0px) - 4vh)) scale(2.12) rotate(calc(var(--vindo,1) * -4deg));
         animation-timing-function: cubic-bezier(.32,0,.28,1); }
  34%  { transform: translate(var(--dx,0px), calc(var(--dy,0px) + .8vh)) scale(1.92) rotate(0deg);
         animation-timing-function: ease-in-out; }
  40%  { transform: translate(var(--dx,0px), var(--dy,0px)) scale(1.98);
         animation-timing-function: ease-in-out; }
  56%  { transform: translate(var(--dx,0px), var(--dy,0px)) scale(1.98);
         animation-timing-function: cubic-bezier(.55,0,.15,1); }
  100% { opacity:1; transform: translate(0,0) scale(1); }
}
/* o halo respirando */
@keyframes respirar-aura{
  0%,100%{ opacity:.42; transform: scale(1); }
  50%    { opacity:.72; transform: scale(1.09); }
}
/* alguém encostou */
@keyframes cutucado{
  0%,100%{ transform: scale(1); }
  35%    { transform: scale(1.09) rotate(2deg); }
  70%    { transform: scale(.97) rotate(-1deg); }
}
@keyframes voar{ 0%{ transform: scale(1); } 40%{ transform: scale(.72) rotate(-8deg); } 100%{ transform: scale(1); } }
@keyframes bater{ 0%{ transform:scale(1); } 40%{ transform:scale(.93); } 100%{ transform:scale(1); } }

/* ═════════ tela grande: nada rola, só o menu lateral ═════════ */
@media (min-width: 1000px){
  html, body{ height:100dvh; overflow:hidden; }
  .tela{ height:100dvh; grid-template-rows: 100dvh; }
  .campo{ min-height:0; overflow:hidden; }
  .palco{ min-height:0; }
}

/* ═════════ telas menores ═════════ */
@media (max-width: 1220px){

  .cestos{ gap:42px 32px; padding:44px 0 34px; }
  .rodape{ padding-top:48px; }
}

@media (max-width: 999px){
  .tela{ grid-template-columns: 1fr; }
  .primeira{ padding: calc(var(--respiro) + env(safe-area-inset-top)) var(--respiro) 0; min-height:100dvh; }
  .rodape{ padding: 240px var(--respiro) 90px; }
  .cestos{ gap:38px 26px; padding:40px 0 30px; }
  .rodape{ padding: 42px 0 30px; }
  .campo{ padding-top:26px; }
  
@media (max-width: 560px){
  :root{ --respiro: 30px; }
  .maca{ width:44px; height:44px; }
  .bojo{ width:108px; }
  .cestos{ gap:32px 20px; }
  .cesto-nome{ font-size:13px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before{ animation:none !important; transition:none !important; }
}