:root{
  --tinta:#161616;
  --papel:#fffdf8;
  --mesa:#e9e5dc;
  --mao:"Patrick Hand","Comic Sans MS",cursive;
  --torto:255px 14px 225px 14px/14px 225px 14px 255px;
  --tortinho:9px 3px 10px 4px/4px 10px 3px 9px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{background:var(--mesa);color:var(--tinta);font-family:var(--mao);font-size:18px;min-height:100vh;padding:20px}
button,input{font-family:inherit;color:inherit}

/* a folha */
.folha{max-width:1180px;min-height:calc(100vh - 40px);margin:0 auto;background:var(--papel);border:2.5px solid var(--tinta);border-radius:6px 14px 8px 12px/12px 6px 14px 8px;padding:26px 26px 22px;display:grid;grid-template-columns:minmax(250px,310px) 1fr minmax(210px,260px);gap:24px}
.col{display:flex;flex-direction:column;gap:28px;min-width:0}

/* marca e título */
.topo{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.marca{display:flex;align-items:flex-end;gap:10px}
.letra{display:block;height:100%;width:auto;overflow:visible}
.logo{display:block;height:74px;border:2.5px solid var(--tinta);border-radius:var(--tortinho);padding:9px 14px;transform:rotate(-2deg)}
.figura{display:block;height:78px}
.titulo{margin:0;width:100%;border:2px solid var(--tinta);border-radius:var(--tortinho);padding:8px 12px}
.titulo .letra{width:100%;height:auto}

/* nome */
.nome{display:flex;align-items:center;gap:12px;align-self:flex-start}
.nome>span{display:block;height:24px}
.campos{display:flex;flex-direction:column;gap:10px;align-self:flex-start;max-width:100%}
.nome .rotulo{height:auto;font:400 24px/1 var(--mao);letter-spacing:.1em;text-transform:uppercase}
.nome.fala input{width:min(330px,62vw);font-size:19px}
.aviso{margin:0;max-width:420px;font-size:15px;line-height:1.3;color:#4a473f}
.aviso a{color:inherit}
.rodape-criar{grid-column:1/-1;margin:4px 0 0;font-size:15px;color:#4a473f}
.termos{max-width:720px;margin:26px auto 0}
.termos h1{margin:0 0 4px;font:400 40px/1.1 var(--mao);letter-spacing:.08em;text-transform:uppercase}
.termos .data{margin:0 0 22px;font-size:17px;color:#4a473f}
.termos h2{margin:26px 0 8px;font:400 25px/1.2 var(--mao);letter-spacing:.06em;text-transform:uppercase}
.termos p{margin:0 0 12px;font-size:20px;line-height:1.45}
.termos a{color:inherit}
.nome input{width:min(240px,56vw);font:400 22px/1.2 var(--mao);background:#fff;border:2.5px solid var(--tinta);border-radius:var(--tortinho);padding:3px 10px}
.nome input:focus-visible{outline:3px solid #3fa9f5;outline-offset:2px}
.nome input.falta{animation:treme .4s}
.nome input::placeholder{color:#8a867c}

/* painéis */
.painel{position:relative;border:2.5px solid var(--tinta);border-radius:var(--torto);padding:22px 12px 12px}
.painel h2{position:absolute;top:-.8em;left:12px;margin:0;padding:0 9px;background:var(--papel);border:2px solid var(--tinta);border-radius:var(--tortinho);font:400 17px/1.4 var(--mao);letter-spacing:.08em;text-transform:uppercase}
.opcoes{display:grid;gap:4px}
#p-skin .opcoes{grid-template-columns:repeat(4,1fr)}
#p-olhos .opcoes{grid-template-columns:repeat(5,1fr)}
#p-cor .opcoes{grid-template-columns:repeat(4,1fr)}
#p-aces .opcoes{grid-template-columns:repeat(4,1fr)}
#p-boca .opcoes{grid-template-columns:repeat(3,1fr)}
#p-pes .opcoes{grid-template-columns:repeat(3,1fr)}
#p-orelhas .opcoes{grid-template-columns:repeat(4,1fr)}
#p-aces .cores-aces{grid-template-columns:repeat(8,1fr);gap:0;margin-top:8px;padding-top:8px;border-top:2px dashed var(--tinta)}
.cores-aces .op{min-height:30px;padding:2px;border-width:2px;border-radius:12px 9px 13px 9px/9px 13px 9px 12px}
.cores-aces .op svg{width:100%}

.op{appearance:none;background:none;border:2.5px solid transparent;border-radius:50% 46% 52% 44%/46% 52% 44% 50%;padding:3px;min-height:44px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .12s}
.op svg{width:100%;height:auto;display:block;overflow:visible}
#p-skin .op svg{width:88%}
#p-cor .op{border-radius:16px 12px 18px 12px/12px 18px 12px 16px}
#p-cor .op svg{width:80%}
.op small{font-size:12px;line-height:1.1;letter-spacing:.03em;text-transform:uppercase}
@media (hover:hover){.op:hover{border-color:var(--tinta);border-style:dashed}}
.op[aria-pressed=true]{border-color:var(--tinta);border-style:solid;transform:rotate(-2deg)}
.op:focus-visible{outline:3px solid #3fa9f5;outline-offset:2px}

/* palco */
.palco{position:sticky;top:20px;flex:none;height:min(calc(100vh - 150px),640px);min-height:300px;display:flex;align-items:center;justify-content:center}
.palco svg{height:100%;width:auto;max-width:100%;display:block;overflow:visible}

/* criar */
.criar{margin-top:auto;align-self:flex-end;display:flex;align-items:center;gap:10px;height:58px;background:var(--papel);border:2.5px solid var(--tinta);border-radius:var(--tortinho);padding:13px 16px;cursor:pointer}
.criar .seta{display:block;height:100%;width:auto}
@media (hover:hover){.criar:hover,.bt:hover{background:var(--tinta);color:var(--papel)}}
.criar:focus-visible,.bt:focus-visible,.fechar:focus-visible{outline:3px solid #3fa9f5;outline-offset:2px}

/* cartão */
dialog{border:2.5px solid var(--tinta);border-radius:8px 14px 10px 12px/12px 8px 14px 10px;background:var(--papel);color:inherit;font:inherit;padding:18px;width:min(92vw,440px);text-align:center}
dialog::backdrop{background:rgba(22,22,22,.55)}
dialog img{display:block;margin:0 auto;max-width:100%;max-height:64vh;width:auto;height:auto;border:2px solid var(--tinta)}
.fechar{position:absolute;top:4px;right:8px;background:none;border:none;font:400 30px/1 var(--mao);cursor:pointer;padding:4px 8px}
.acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.bt{font:400 19px/1 var(--mao);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:inherit;background:var(--papel);border:2.5px solid var(--tinta);border-radius:var(--tortinho);padding:8px 14px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}

.ver-espunfa{margin-top:auto;align-self:flex-end}
.ver-espunfa + .criar{margin-top:0}
a.ver-espunfa{justify-content:center}

/* página inicial: o mapa de Espunfa, que se abre lugar por lugar */
a.marca{color:inherit;text-decoration:none}
.folha.pagina{display:block;max-width:1180px;padding:22px 26px 26px}
.p-topo{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.chamada{display:flex;align-items:center;gap:10px;height:56px;max-width:100%;border:2.5px solid var(--tinta);border-radius:var(--tortinho);padding:11px 14px;color:inherit;text-decoration:none;background:var(--papel)}
.chamada .letra{min-width:0}
.chamada .seta{display:block;height:100%;width:auto;flex:none}
@media (hover:hover){.chamada:hover{background:var(--tinta);color:var(--papel)}}
.chamada:focus-visible{outline:3px solid #3fa9f5;outline-offset:2px}
.atlas{position:relative;max-width:max(520px,calc((100vh - 440px) * 1.6335));margin:14px auto 0}
.pagina .mapa-rola{overflow:hidden}
.pagina .mapa{width:100%;height:auto;min-height:0}
.placa{position:absolute;z-index:2000;transform:translate(-50%,-100%) rotate(var(--giro));margin:0;padding:0;border:none;background:none;color:var(--tinta);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.placa span{display:block;padding:0 9px;background:var(--papel);border:2px solid var(--tinta);border-radius:var(--tortinho);font:400 clamp(11px,2.3cqh,17px)/1.45 var(--mao);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.placa b{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;margin:0 -4px 0 6px;padding:0 3px;border-radius:999px;background:var(--tinta);color:var(--papel);font-weight:400;font-size:.82em;line-height:1;letter-spacing:0;vertical-align:1px}
.placa[aria-expanded=true] b{background:var(--papel);color:var(--tinta)}
.ficha .conta{font-size:17px;letter-spacing:.05em;text-transform:uppercase}
.morador.vizinho{cursor:pointer}
.placa::after{content:"";display:block;width:2px;height:8px;margin:0 auto;background:var(--tinta)}
.placa[aria-expanded=true]{transform:translate(-50%,-100%) scale(1.12)}
.placa[aria-expanded=true] span{background:var(--tinta);color:var(--papel)}
.placa:focus-visible{outline:3px solid #3fa9f5;outline-offset:3px}
@media (hover:hover){.placa:hover{transform:translate(-50%,-100%) scale(1.1)}}
/* o Bask, embaixo do mapa, conta tudo num balão */
.apresenta{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:0 30px;max-width:900px;margin:14px auto 0}
.apresenta .bask{display:block;height:210px;width:auto;transform-origin:50% 100%}
.ficha{position:relative;align-self:center;min-height:96px;background:var(--papel);border:2.5px solid var(--tinta);border-radius:22px 14px 24px 12px/14px 24px 12px 22px;padding:14px 18px 16px;box-shadow:5px 5px 0 var(--tinta)}
.ficha::before{content:"";position:absolute;right:100%;bottom:34px;border:11px solid transparent;border-right:24px solid var(--tinta)}
.ficha::after{content:"";position:absolute;right:calc(100% - 3.5px);bottom:36px;border:9px solid transparent;border-right:20px solid var(--papel)}
.ficha .fala{margin:0;font-size:21px;line-height:1.4}
.ficha .fala + .fala{margin-top:10px}
.ficha .fala strong{font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.ficha .dica{font-size:18px;color:#4a473f}
.ficha .dica a{color:inherit}
.ficha .aberta{display:flex;align-items:flex-start;gap:16px}
.ficha .texto{flex:1;min-width:0;padding-right:26px}
.ficha h2{margin:0 0 6px;font:400 27px/1.1 var(--mao);letter-spacing:.08em;text-transform:uppercase}
.ficha h2:focus{outline:none}
.ficha p{margin:0 0 10px;font-size:19px;line-height:1.4}
.ficha p:last-child{margin-bottom:0}
.janela{flex:none;aspect-ratio:var(--prop);height:150px;border:2px solid var(--tinta);border-radius:var(--tortinho);background:#f5f2ec url(assets/espunfa.webp) no-repeat}
.casa{margin:10px 0 0;padding:0 12px;border:2px solid var(--tinta);border-radius:var(--tortinho)}
.casa summary{padding:8px 0;font:400 20px/1.2 var(--mao);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.casa[open] summary{margin-bottom:10px;border-bottom:2px dashed var(--tinta)}
.casa[open]{padding-bottom:10px}
.casa ol{margin:0;padding-left:24px;font-size:18px;line-height:1.35}
.casa li{margin-bottom:7px}
.ficha .chamada{margin-top:12px;height:50px;padding:9px 12px;width:fit-content}
.rodape{margin:18px 0 0;font-size:17px;text-align:center}
.rodape a{color:inherit}
@keyframes gira{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pulsa{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
@keyframes pulinho{0%,100%{transform:translateY(0)}40%{transform:translateY(-16%)}70%{transform:translateY(0) scale(1.05,.95)}}
@keyframes abre{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fala{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5%) rotate(-3deg)}}
@keyframes pula{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-9%) scale(.98,1.03)}60%{transform:translateY(0) scale(1.04,.96)}}

/* Espunfa */
.espunfa{max-width:1180px;min-height:calc(100vh - 40px);margin:0 auto;background:var(--papel);border:2.5px solid var(--tinta);border-radius:6px 14px 8px 12px/12px 6px 14px 8px;padding:22px 26px}
.esp-topo{display:flex;align-items:center;gap:16px}
.esp-topo .logo{height:58px;padding:7px 11px}
.esp-topo h2{margin:0;flex:1;font:400 30px/1 var(--mao);letter-spacing:.1em;text-transform:uppercase}
.esp-dica{margin:14px 0 12px;font-size:19px}
.pagina .esp-dica,.pagina .esp-acoes{text-align:center;justify-content:center}
.mapa-rola{overflow-x:auto;border:2.5px solid var(--tinta);border-radius:var(--tortinho);background:#f5f2ec}
.mapa{position:relative;container-type:size;aspect-ratio:2723/1667;height:min(72vh,calc((100vw - 96px) / 1.6335));min-height:420px;margin:0 auto;overflow:hidden}
.mapa>img{display:block;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}
.morador{position:absolute;transform:translate(-50%,-100%);margin:0;padding:0;border:none;background:none;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.morador img{display:block;--passo:.058cqh;width:auto;pointer-events:none;filter:drop-shadow(0 0 2px #fffdf8) drop-shadow(0 0 2px #fffdf8)}
.morador span{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font:400 clamp(12px,2.4cqh,17px)/1.2 var(--mao);background:var(--papel);border:1.5px solid var(--tinta);border-radius:var(--tortinho);padding:0 6px}
.morador .diz{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;max-width:210px;padding:3px 10px;background:var(--papel);border:2px solid var(--tinta);border-radius:14px 10px 15px 9px/10px 15px 9px 14px;font:400 17px/1.25 var(--mao);font-style:normal;text-align:center;white-space:normal}
.morador .diz::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top:8px solid var(--tinta)}
.morador.escolhido{z-index:2500 !important}
.morador.escolhido .diz{display:block}
.morador.fala-dir .diz{left:auto;right:-8px;transform:none}
.morador.fala-dir .diz::after{left:auto;right:22px;margin-left:0}
.morador.fala-esq .diz{left:-8px;transform:none}
.morador.fala-esq .diz::after{left:22px;margin-left:0}
.morador.fala-baixo .diz{bottom:auto;top:calc(100% + 30px)}
.morador.fala-baixo .diz::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom:8px solid var(--tinta)}
.morador.pegando{cursor:grabbing}
.morador{transition:translate 1s ease-in-out}
.vivo{position:absolute;z-index:1;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:url(assets/espunfa.webp) no-repeat;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
.bt:disabled{opacity:.45;cursor:default}
.morador.personagem img{height:calc(230 * var(--passo))}
.morador.personagem span{background:var(--tinta);color:var(--papel)}
.janela-personagem{flex:none;height:150px;width:auto}
.morador.mudando{transition:left 2.4s ease-in-out,top 2.4s ease-in-out,translate 1s ease-in-out}
/* criador: onde o bicho vai morar */
.casa{border:none;margin:0;padding:0;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.casa legend{float:left;padding:0}
.casas{display:flex;flex-wrap:wrap;gap:6px}
.casas label{cursor:pointer}
.casas input{position:absolute;opacity:0;pointer-events:none}
.casas span{display:block;padding:0 9px;background:var(--papel);border:2px solid var(--tinta);border-radius:var(--tortinho);font-size:16px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase}
.casas input:checked + span{background:var(--tinta);color:var(--papel)}
.casas input:focus-visible + span{outline:3px solid #3fa9f5;outline-offset:2px}
/* página de aprovação */
.aprovar h1{margin:0;font:400 30px/1.1 var(--mao);letter-spacing:.08em;text-transform:uppercase}
.entrar{display:grid;gap:12px;max-width:380px;margin:30px auto}
.entrar label{display:grid;gap:4px;font-size:19px}
.entrar input{font:400 20px/1.3 var(--mao);padding:6px 10px;border:2.5px solid var(--tinta);border-radius:var(--tortinho);background:#fff}
.erro{color:#a3241b;font-size:18px;min-height:1em;margin:6px 0}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 6px}
.filtros [aria-pressed=true]{background:var(--tinta);color:var(--papel)}
.filtros b{font-weight:400;margin-left:6px}
.filtros .sair{margin-left:auto}
.fila{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pedido{display:flex;gap:14px;align-items:center;padding:12px;border:2.5px solid var(--tinta);border-radius:var(--tortinho);background:var(--papel)}
.pedido.aprovado{border-style:dashed}
.pedido img{flex:none;height:110px;width:auto}
.pedido .dados{display:grid;gap:4px;min-width:0}
.pedido .nome{font-weight:400;font-size:24px}
.pedido .fala{font-size:18px;overflow-wrap:anywhere}
.pedido small{font-size:15px;color:#4a473f}
.pedido .botoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pedido .bt{min-height:38px;padding:6px 10px;font-size:16px}
.vazio{font-size:20px;color:#4a473f}
.morador.escolhido span{background:var(--tinta);color:var(--papel)}
.morador:focus-visible{outline:3px solid #3fa9f5;outline-offset:2px}
.esp-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.esp-acoes strong{font:400 24px/1 var(--mao);margin-right:6px}
@keyframes nasce{0%{transform:translate(-50%,-100%) scale(0) rotate(-200deg)}70%{transform:translate(-50%,-100%) scale(1.15) rotate(8deg)}100%{transform:translate(-50%,-100%) scale(1) rotate(0)}}

@keyframes treme{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes respira{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.97)}}
@keyframes pop{0%{transform:scale(.9,1.1)}60%{transform:scale(1.05,.95)}100%{transform:scale(1,1)}}
@media (prefers-reduced-motion:no-preference){
  .ficha.abrindo{animation:abre .24s ease-out}
  .vivo.patum{animation:gira 70s linear infinite}
  .vivo.ovo{animation:pulsa 4s ease-in-out infinite}
  .morador.pulinho img{animation:pulinho .6s ease-out}
  .apresenta .bask{animation:respira 2.8s ease-in-out infinite}
  .apresenta .bask.falando{animation:fala .5s ease-in-out 2}
  .morador.nasce{transform-origin:50% 100%;animation:nasce .9s ease-out}
  .corpo{transform-box:fill-box;transform-origin:50% 100%;animation:pop .35s ease-out,respira 2.6s ease-in-out .35s infinite}
}

/* celular: o bicho fica preso no alto, as escolhas rolam embaixo */
@media (max-width:820px){
  body{padding:0;font-size:17px}
  .folha{display:flex;flex-direction:column;gap:26px;min-height:100vh;border:none;border-radius:0;padding:14px 14px 96px}
  .col{display:contents}
  .topo{order:1;flex-direction:row;flex-wrap:wrap;align-items:center}
  .logo{height:58px;padding:7px 11px}
  .figura{height:60px}
  .titulo{width:auto;flex:1 1 200px;max-width:340px}
  .campos{order:2}
  .rodape-criar{order:20;margin-bottom:70px}
  .palco{order:3;position:sticky;top:0;z-index:5;flex:none;height:36vh;min-height:210px;margin:-12px -14px 0;background:var(--papel);border-bottom:2.5px dashed var(--tinta)}
  .palco svg{height:100%;width:auto;max-width:100%;max-height:none}
  #p-skin{order:4}
  #p-olhos{order:5}
  #p-orelhas{order:6}
  #p-cor{order:7}
  #p-aces{order:8}
  #p-boca{order:9}
  #p-pes{order:10}
  .op{min-height:52px}
  #p-skin .opcoes,#p-boca .opcoes{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  #p-pes .opcoes{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  #p-cor .opcoes,#p-aces .opcoes{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
  #p-orelhas .opcoes{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
  #p-aces .cores-aces{grid-template-columns:repeat(8,1fr)}
  .cores-aces .op{min-height:40px}
  #p-olhos .opcoes{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
  .criar{position:fixed;left:14px;bottom:14px;z-index:6;margin:0;box-shadow:4px 4px 0 var(--tinta)}
  .ver-espunfa{order:11;margin:0;align-self:flex-start}
  .espunfa{min-height:100vh;border:none;border-radius:0;padding:14px}
  .folha.pagina{padding:14px 14px 30px}
  .chamada{height:48px;padding:9px 11px}

  .esp-topo{gap:10px}
  .esp-topo h2{font-size:24px}
  .esp-dica{font-size:17px}
  .mapa{height:60vh}
}

/* celular: o mapa inteiro em cima; embaixo o Bask e, sob ele, o balão */
@media (max-width:600px){
  .atlas,.apresenta{max-width:none}
  .apresenta{grid-template-columns:1fr;gap:16px 0}
  .apresenta .bask{height:120px;margin-left:8px}
  .ficha::before{right:auto;left:38px;bottom:100%;border:11px solid transparent;border-bottom:22px solid var(--tinta)}
  .ficha::after{right:auto;left:40px;bottom:calc(100% - 3.5px);border:9px solid transparent;border-bottom:18px solid var(--papel)}
  .ficha .aberta{flex-direction:column;gap:10px}
  .ficha .fala{font-size:19px}
  .janela{height:120px}
  .placa span{padding:0 5px;border-width:1.5px}
  .placa::after{height:5px}
  .morador img{--passo:.085cqh}
  .morador span{font-size:11px;padding:0 4px}
}