*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#166c9b;font-family:Trebuchet MS,Arial,sans-serif;color:#663568;touch-action:none}#shell{position:relative;margin:auto;height:100dvh;width:min(100vw,56.25dvh);overflow:hidden;background:#58d2f6;box-shadow:0 0 30px #06354b}canvas{display:block;width:100%;height:100%;touch-action:none}#hud{position:absolute;top:2%;left:3%;right:3%;display:flex;justify-content:space-between;pointer-events:none}.pill{background:#fffbf4;border:3px solid #ff8eae;border-radius:20px;padding:7px 13px;color:#d94e8c;font-weight:1000;font-size:clamp(16px,3dvh,25px);box-shadow:0 4px 0 #d85d9c}.hidden{display:none!important}.overlay{position:absolute;inset:0;background:linear-gradient(165deg,#7ce1f6,#e3fcff);display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}.glass{width:100%;max-height:96%;overflow-y:auto;text-align:center;background:#fff9f1;border:5px solid #fff;border-radius:30px;box-shadow:0 10px 0 #57b0d7,0 15px 30px #185b7b66;padding:18px 14px}.eyebrow{color:#ef5b9c;font-weight:1000;font-size:15px;letter-spacing:1px}h1{margin:10px 0;font-size:clamp(37px,6dvh,57px);line-height:.96;color:#ff9d24;text-shadow:3px 4px #fff,5px 7px #e66f82;-webkit-text-stroke:1px #bc5287}h1 em{font-style:normal;color:#17a6df}h2{color:#ee5b99;font-size:clamp(25px,4dvh,37px);margin:10px 0}p{font-size:clamp(14px,2.1dvh,18px);line-height:1.4;margin:10px 0}.menu-figures{height:clamp(105px,19dvh,185px);display:flex;align-items:end;justify-content:center;gap:10px}.menu-figures img{height:100%;max-width:47%;object-fit:contain}.menu-figures img:first-child{height:75%}button{display:block;width:100%;margin:9px auto 0;border:3px solid #fff;border-radius:18px;padding:12px 7px;background:linear-gradient(#ffdf49,#ff9f29);box-shadow:0 5px 0 #e67a35;color:#813d3b;font-size:clamp(15px,2.4dvh,21px);font-weight:1000;cursor:pointer;touch-action:manipulation}button:active{transform:translateY(3px);box-shadow:0 2px 0 #e67a35}.secondary{background:linear-gradient(#a9efff,#51c9f5);box-shadow:0 5px 0 #3e9ac6;color:#215f86}.bigscore{font-size:clamp(42px,7dvh,70px);font-weight:1000;color:#ffae20;text-shadow:2px 3px #db5686}input{width:100%;border:3px solid #ff9bc3;border-radius:14px;padding:12px;text-align:center;font-weight:1000;font-size:20px;text-transform:uppercase;touch-action:auto}.ranking{margin-top:13px;background:#fff1d5;border-radius:14px;padding:10px}.ranking b{color:#bf6b38}.rankrow{display:flex;justify-content:space-between;border-bottom:1px solid #efcfa5;padding:4px 7px;font-weight:bold}.rankrow:nth-child(even){background:#ffe0e9}.ranking small{display:block;color:#946a70;margin-top:5px}.inviteHelena{height:clamp(100px,23dvh,220px);max-width:100%;object-fit:contain}.details{background:#ffedbb;border:3px solid #ffc87b;border-radius:17px;text-align:left;padding:12px;font-size:clamp(15px,2.3dvh,20px);line-height:2}.tiny{font-size:13px}#controls{position:absolute;bottom:3%;left:5%;right:5%;pointer-events:none;text-align:center}.hint{font-size:12px;font-weight:1000;color:white;text-shadow:1px 2px #27729d;background:#218fc69c;padding:6px;border-radius:12px}.power{height:20px;border:3px solid white;border-radius:15px;overflow:hidden;background:#346781;margin-top:6px}#powerFill{height:100%;width:0;background:linear-gradient(90deg,#4fe97d,#ffeb44,#ff6a9a)}#message{position:absolute;top:18%;left:0;right:0;text-align:center;color:#fff;font-size:clamp(24px,5dvh,40px);font-weight:1000;text-shadow:2px 3px #b6489b;pointer-events:none}

.invite-flow{background:linear-gradient(160deg,#fff6fd,#fff5d5);border-color:#fff5fb}.invite-flow #introDots{color:#f36da6;letter-spacing:12px;font-size:21px}.invite-flow #introDetails{line-height:1.8}.invite-flow #introText{font-size:clamp(17px,2.5dvh,22px)}

/* v3.1: telas de convite opacas, sem cenário fantasma */
.overlay{isolation:isolate}
#controls{bottom:1.8%;z-index:2}
#controls .hint{background:#2487a9e8;font-size:clamp(10px,2.5vw,12px)}

/* v4.1 — apresentação ocupando a tela, personagens estáveis e sem recortes */
#intro,#menu{padding:10px 12px;align-items:stretch;overflow:hidden}
#intro .glass,#menu .glass{height:100%;max-height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:clamp(13px,2.4dvh,24px) 14px;border-radius:27px}
#intro .eyebrow,#menu .eyebrow{flex:none;margin-top:clamp(4px,1.4dvh,14px)}
#intro h2{font-size:clamp(24px,4dvh,37px);margin:clamp(9px,2dvh,20px) 0 0;min-height:2.25em;display:flex;align-items:center;justify-content:center}
#intro .inviteHelena{display:block;flex:0 1 auto;width:100%;height:clamp(180px,34dvh,340px);min-height:0;object-fit:contain;object-position:center center;margin:clamp(6px,1dvh,12px) auto}
#intro #introText{min-height:4.2em;display:flex;align-items:center;justify-content:center;margin:6px 0;font-size:clamp(16px,2.4dvh,21px)}
#intro #introDetails{font-size:clamp(14px,2dvh,18px);line-height:1.65;padding:8px 12px;margin:3px 0}
#intro #introDots{margin:auto 0 4px;flex:none}
#intro button{flex:none;margin-top:8px;padding:clamp(10px,1.8dvh,16px) 6px}
#menu h1{margin:clamp(14px,3dvh,30px) 0 8px;font-size:clamp(38px,6.1dvh,60px)}
#menu p{margin:clamp(8px,2dvh,18px) 0;font-size:clamp(15px,2.2dvh,20px)}
#menu .menu-figures{height:clamp(175px,33dvh,330px);flex:1 1 auto;min-height:0;align-items:center;gap:0;margin:clamp(4px,1dvh,12px) 0}
#menu .menu-figures img{width:53%;max-width:53%;height:100%;object-fit:contain;object-position:center}
#menu .menu-figures img:first-child{width:39%;max-width:39%;height:73%;align-self:center}
#menu button{flex:none;margin-top:clamp(7px,1.1dvh,13px);padding:clamp(10px,1.8dvh,16px) 7px}
@media(max-height:680px){#intro h2{min-height:1.6em;margin-top:5px}#intro .inviteHelena{height:30dvh}#intro #introText{min-height:3em;font-size:15px}#intro .glass,#menu .glass{padding:9px 12px}#menu h1{margin:8px 0;font-size:36px}#menu .menu-figures{height:26dvh}}

/* v4.3: slides usam uma área fixa para a Helena, independentemente do texto */
#intro .glass{position:relative;display:grid;grid-template-rows:5% 13% 38% 17% 12% 4% 6% 5%;gap:0;align-items:center;justify-items:stretch;padding:12px 14px}
#intro .eyebrow{grid-row:1;margin:0;align-self:center}
#intro h2{grid-row:2;min-height:0;margin:0;font-size:clamp(22px,3.6dvh,35px)}
#intro .inviteHelena{grid-row:3;width:100%;height:100%;min-height:0;max-height:none;margin:0;object-fit:contain;object-position:center center;align-self:center;justify-self:center}
#intro #introText{grid-row:4;min-height:0;margin:0;align-self:center;font-size:clamp(15px,2.3dvh,20px)}
#intro #introDetails{grid-row:5;align-self:center;max-height:100%;overflow:auto;margin:0;padding:4px 10px;font-size:clamp(13px,1.9dvh,18px)}
#intro #introDots{grid-row:6;margin:0;align-self:center}
#intro #introNext{grid-row:7;margin:0;padding:5px}
#intro #introSkip{grid-row:8;margin:0;padding:5px}
#intro .glass>*{min-height:0}
@media(max-height:680px){#intro .glass{grid-template-rows:5% 12% 37% 18% 12% 4% 6% 6%}#intro .inviteHelena{height:100%}}

/* v4.6 — convite oficial e botoes mais altos, com maior separacao */
#menu .glass{padding-bottom:clamp(36px,8dvh,90px)}
#menu .menu-figures{flex:0.85 1 auto}
#menu button{margin-top:clamp(14px,2.1dvh,23px)}
#invite{padding:8px 10px;overflow:hidden;align-items:stretch}
#invite .official-invite{height:100%;width:100%;display:flex;flex-direction:column;align-items:stretch;gap:12px;min-height:0}
#invite .official-invite-scroll{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;background:#fff4e5;border:3px solid white;border-radius:18px}
#invite .official-invite-scroll img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
#invite .invite-close{flex:none;margin:0 0 8px;padding:12px 8px}
@media(max-height:700px){#menu .glass{padding-bottom:clamp(18px,4dvh,38px)}#menu button{margin-top:12px}}

/* v4.8 — navegacao dos slides, convite oficial e endereco completo */
#intro .slide-navigation{grid-row:7;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;min-height:0;align-items:center}
#intro .slide-navigation button{margin:0;min-width:0;height:100%;font-size:clamp(12px,2dvh,18px);padding:5px 3px}
#intro #introSkip{grid-row:8}
#intro #introDetails{line-height:1.35;font-size:clamp(12px,1.75dvh,16px);padding:5px 9px;overflow:auto}
#invite .official-invite-scroll{display:block;text-align:center;overflow-y:auto;-webkit-overflow-scrolling:touch}
#invite .official-invite-scroll img{width:100%;height:auto;max-height:none;object-fit:contain;margin:auto}

/* v4.9 — distribuição estável para todos os slides e telas pequenas */
#intro .glass{
  display:grid;
  grid-template-rows:4% 10% 34% 16% 14% 4% 9% 9%;
  min-height:0;
  padding:clamp(7px,1.1dvh,12px) 12px;
  overflow:hidden;
}
#intro h2{margin:0;font-size:clamp(21px,3.3dvh,33px);line-height:1.13;align-self:start;padding-top:clamp(2px,.7dvh,7px)}
#intro .inviteHelena{width:100%;height:100%;object-fit:contain;object-position:center center;margin:0}
#intro #introText{font-size:clamp(14px,2.1dvh,19px);line-height:1.3;margin:0;align-self:center}
#intro #introDetails{width:100%;max-height:100%;overflow-y:auto;line-height:1.35;font-size:clamp(12px,1.7dvh,16px);padding:5px 9px;align-self:center;touch-action:pan-y}
#intro #introDots{margin:0;line-height:1;font-size:clamp(14px,2dvh,19px)}
#intro .slide-navigation{height:100%;gap:8px;align-self:stretch;min-height:0}
#intro .slide-navigation button,#intro #introSkip{
  box-sizing:border-box;min-height:0;height:calc(100% - 6px);max-height:100%;
  margin:0;align-self:center;padding:2px 5px;
  border-width:2px;border-radius:14px;
  font-size:clamp(12px,1.85dvh,18px);line-height:1.1;
}
#intro #introSkip{width:100%;justify-self:stretch}
#intro .slide-navigation button:disabled{visibility:hidden}
@media(max-height:680px){
  #intro .glass{grid-template-rows:4% 10% 33% 16% 15% 4% 9% 9%;padding:6px 9px}
  #intro .inviteHelena{height:100%}
  #intro #introText{font-size:clamp(13px,2dvh,16px)}
}

/* v4.10: footer estável, sem posicionamento de grid herdado nos botões */
#intro .glass {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows: 5% 9% 34% 15% minmax(0,1fr) 4% 7% 8%;
  gap:0;
  height:100%;
  min-height:0;
  overflow:hidden;
  padding:clamp(8px,1.5dvh,15px) 12px;
}
#intro .eyebrow{grid-row:1}
#intro h2{grid-row:2;min-height:0;align-self:center;padding:0}
#intro .inviteHelena{grid-row:3;height:100%;width:100%;min-height:0;max-height:100%;object-fit:contain}
#intro #introText{grid-row:4;min-height:0;max-height:100%;font-size:clamp(14px,2dvh,18px)}
#intro #introDetails{grid-row:5;min-height:0;max-height:100%;overflow-y:auto;align-self:start}
#intro #introDots{grid-row:6;align-self:center}
#intro .slide-navigation{
  grid-row:7;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);gap:10px;width:100%;height:100%;
  min-height:0;align-self:stretch;
}
#intro .slide-navigation > button{
  grid-row:auto !important;grid-column:auto !important;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:calc(100% - 8px);min-height:0;
  margin:0;padding:2px 5px;line-height:1.15;
  font-size:clamp(12px,1.9dvh,18px);
}
#intro #introSkip{
  grid-row:8;grid-column:1;display:flex;align-items:center;justify-content:center;
  width:100%;height:calc(100% - 8px);min-height:0;
  margin:0;padding:2px 5px;line-height:1.15;
}
@media(max-height:680px){
 #intro .glass{grid-template-rows:5% 9% 31% 16% minmax(0,1fr) 4% 8% 9%}
}

/* v4.11: afastar o aviso de pontuação da borda da piscina */
#message{top:14.5%;}

/* v4.12: decoracoes apenas nos slides 1 e 3, com area reservada */
#intro .glass{grid-template-rows:5% 9% 33% 14% minmax(0,1fr) 4% 7% 8%;}
#intro .intro-decoration{grid-row:5;display:block;width:100%;height:100%;min-height:0;object-fit:contain;object-position:center center;align-self:center;justify-self:center;mix-blend-mode:multiply;}
#intro #introDetails{grid-row:5;}
#intro #introDots{grid-row:6;}
#intro .slide-navigation{grid-row:7;}
#intro #introSkip{grid-row:8;}
@media(max-height:680px){#intro .glass{grid-template-rows:5% 9% 30% 15% minmax(0,1fr) 4% 8% 9%;}}

/* v4.13 - música de fundo, acessível em todas as telas */
#musicToggle{position:absolute;z-index:60;top:clamp(8px,1.6dvh,16px);left:50%;transform:translateX(-50%);width:40px;height:40px;min-height:40px;padding:0;border:2px solid #ff78b3;border-radius:50%;background:#fff8f2;color:#e94491;font-size:23px;line-height:1;box-shadow:0 3px 0 #e986b3;touch-action:manipulation;cursor:pointer}

/* v4.16: ações do convite e tela de presentes */
#musicToggle{left:auto;right:clamp(14px,3vw,22px);transform:none;top:clamp(9px,1.5dvh,16px);z-index:70}
#invite .official-invite{gap:7px}
#invite .invite-actions{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:stretch}
#invite .invite-actions button{margin:0;min-height:44px;padding:7px 4px;font-size:clamp(11px,1.7dvh,16px);line-height:1.15;border-radius:14px}
#invite .invite-actions .whatsapp-button{background:linear-gradient(#66eaa1,#21b968);color:#124a30;box-shadow:0 3px 0 #198c50}
#invite .invite-actions .invite-close{grid-column:1/-1;min-height:40px}
#invite .official-invite-scroll{flex:1;min-height:0}
#gifts .gift-panel{height:min(96%,800px);display:flex;flex-direction:column;align-items:stretch;justify-content:space-around;gap:7px;overflow-y:auto;padding:15px}
#gifts .gift-panel h2{font-size:clamp(22px,3.5dvh,32px);margin:0}
#gifts .gift-helena{display:block;height:clamp(130px,29dvh,260px);width:100%;object-fit:contain;flex-shrink:1;min-height:100px}
#gifts .gift-message{font-size:clamp(15px,2.1dvh,19px);line-height:1.35;margin:3px 0}
#gifts .gift-items{display:grid;gap:8px}
#gifts .gift-items>div{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;background:#f7e7ff;border:2px solid #e1b7f3;border-radius:14px;padding:12px;font-size:clamp(14px,2dvh,18px)}
#gifts .gift-items span{color:#8736a6;font-weight:900}
#gifts #backToInvite{flex:none;margin:5px 0 0}
@media(max-height:700px){#gifts .gift-helena{height:23dvh}#gifts .gift-items>div{padding:8px}#invite .invite-actions button{font-size:12px;min-height:40px}}

/* v4.17: convite oficial como tela inicial, sem slides */
#invite{padding:6px 8px 9px}
#invite .official-invite{gap:8px}
#invite .official-invite-scroll{border-radius:16px;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overflow-x:hidden;background:#fff6e8}
#invite .official-invite-scroll img{width:100%;height:auto;max-height:none;object-fit:contain}
#invite .invite-actions{display:flex;flex-direction:column;gap:7px;flex:none}
#invite .invite-actions button{width:100%;height:clamp(43px,6.2dvh,58px);min-height:0;font-size:clamp(14px,2.1dvh,19px);padding:7px 8px;margin:0}
#invite .invite-actions .invite-close{grid-column:auto;background:linear-gradient(#ffdf49,#ff9f29);color:#813d3b}
#musicToggle{top:clamp(9px,1.5dvh,16px);right:clamp(14px,3vw,22px)}

/* v4.21: placar centralizado apenas durante a partida; cronometro permanece a esquerda. */
#hud .pill:last-child{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;}

/* SuperConvites v1.22: assinatura comercial no menu do jogo */
#menu .sc-brand-footer{flex:none;margin-top:clamp(8px,1.4dvh,14px);text-align:center;font-size:clamp(11px,1.7dvh,14px);line-height:1.3;color:#785d78}#menu .sc-brand-footer a{color:#087fae;font-weight:800;text-decoration:underline;text-underline-offset:2px;touch-action:manipulation}#menu .sc-brand-footer a:focus-visible{outline:2px solid #087fae;outline-offset:3px;border-radius:3px}
@media(max-height:620px){#menu .sc-brand-footer{margin-top:5px;font-size:11px}#menu .menu-figures{flex:0.6 1 auto}#menu button{margin-top:6px;padding:8px 7px}}