/* ═══════ PORTO DE ENTRADA (timão) ═══════ */
#porto{position:fixed; inset:0; z-index:200; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(20px,4vh,44px); text-align:center; padding:3.5vh 16px 8vh;
  background-color:#070d16;
  background-image:radial-gradient(ellipse 130% 100% at 50% 20%, #16233a 0%, #0b1420 45%, #04080f 100%);
  color:#e8ecf4; transition:opacity .55s ease, visibility .55s;}
#porto.fechado{opacity:0; visibility:hidden; pointer-events:none;}
/* bloco do título + subtítulo, sempre juntos */
.porto-cabecalho{ display:flex; flex-direction:column; align-items:center; gap:2px; }
#porto h1{font-family:'Cinzel Decorative',Georgia,serif; font-size:clamp(1.3rem,4.5vw,2.3rem);
  letter-spacing:.06em; color:#e8c874;
  text-shadow:0 2px 24px rgba(200,160,80,.3), 0 1px 2px rgba(0,0,0,.5);}
#porto .sub{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; color:#b89a5e; margin:0;}
.mar{position:absolute; left:0; right:0; bottom:0; height:30vh; pointer-events:none; overflow:hidden;
  background:linear-gradient(transparent, rgba(40,70,110,.4));}
.mar::before,.mar::after{content:""; position:absolute; left:-50%; width:200%; height:44px;
  bottom:12px; border-radius:45%; background:rgba(90,150,200,.13); animation:ondear 9s linear infinite;}
.mar::after{bottom:0; animation-duration:13s; animation-direction:reverse; background:rgba(90,150,200,.09);}
@keyframes ondear{from{transform:translateX(0)}to{transform:translateX(25%)}}
.porto-destinos{display:flex; align-items:center; gap:clamp(10px,5vw,64px); flex-wrap:wrap; justify-content:center; margin-top:8px;}
.dest{width:146px; padding:18px 12px; border-radius:16px; cursor:pointer;
  border:1.5px solid rgba(160,190,230,.25); background:rgba(16,35,58,.55);
  transition:transform .3s, border-color .3s, box-shadow .3s; user-select:none;}
.dest .ic{font-size:2rem;}
.dest .nm{font-family:'Cinzel',Georgia,serif; font-size:.85rem; letter-spacing:.08em; margin-top:6px;}
.dest .ds{font-size:.78rem; color:#9fb4cc; margin-top:4px; font-family:'Cormorant Garamond',serif; font-style:italic;}
.dest.on{transform:scale(1.08); border-color:#e8b45a; box-shadow:0 0 26px rgba(232,180,90,.28);}
/* — o timão — */
.timao-wrap{position:relative; width:200px; height:200px;}
.timao{position:absolute; inset:0; transition:transform .7s cubic-bezier(.34,1.4,.4,1);}
.timao .aro{position:absolute; inset:26px; border-radius:50%;
  border:13px solid #7a5024; box-shadow:inset 0 0 0 4px #55351a, 0 8px 22px rgba(0,0,0,.55);}
.timao .cubo{position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle at 36% 32%, #a4713a, #6b4520 72%);
  box-shadow:0 0 0 4px #55351a, 0 4px 10px rgba(0,0,0,.5); z-index:2;}
.raio{position:absolute; left:calc(50% - 5px); top:50%; width:10px; height:100px;
  transform-origin:5px 0; background:linear-gradient(#96622f,#6b4520); border-radius:5px;}
.raio::after{content:""; position:absolute; left:-4px; bottom:-16px; width:18px; height:26px;
  border-radius:9px; background:radial-gradient(circle at 40% 30%, #a4713a, #5f3d1d);}
.porto-controles{display:flex; gap:12px; align-items:center; margin-top:14px;}
.seta,#zarpar{font-family:'Cinzel',Georgia,serif; letter-spacing:.06em; cursor:pointer;
  border-radius:999px; border:1.5px solid rgba(160,190,230,.35); background:rgba(16,35,58,.6); color:#e8ecf4;}
.seta{width:46px; height:46px; font-size:1.1rem;}
.seta:hover{background:rgba(90,150,200,.25);}
#zarpar{padding:12px 30px; font-size:.85rem; background:#e8b45a; color:#2a1a08; border-color:#e8b45a;
  box-shadow:0 0 22px rgba(232,180,90,.35);}
#porto .dica{font-size:.72rem; color:#7690ac; font-family:'Cinzel',serif; letter-spacing:.08em; margin-top:10px;}
#lemeBtn{position:fixed; top:12px; left:12px; z-index:60; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:50%; border:1px solid var(--panel-edge, rgba(160,190,230,.35));
  background:color-mix(in srgb, var(--panel, #12203a) 88%, transparent);
  color:var(--accent, #d8b95c); box-shadow:var(--shadow, 0 6px 18px rgba(0,0,0,.4));
  transition:transform .5s cubic-bezier(.34,1.4,.4,1), background .2s;}
#lemeBtn:hover{transform:rotate(38deg); background:color-mix(in srgb, var(--accent, #d8b95c) 18%, transparent);}
#lemeBtn{display:none;}
body.porto-fechado #lemeBtn{display:flex;}
/* quando a doca esquerda está aberta, o leme é "empurrado" para a direita e não sobrepõe */
body:has(#dockLeft:not(.hidden-dock)) #lemeBtn{ transform:translateX(210px); }
body:has(#dockLeft:not(.hidden-dock)) #lemeBtn:hover{ transform:translateX(210px) rotate(38deg); }

/* quando o leme está visível, abre espaço para ele sem sobrepor nada */
body.porto-fechado #familyPlaque{ margin-left:46px; }         /* nome da família cede espaço */
@media (max-width:760px){
  body.porto-fechado #familyPlaque{ margin-left:44px; }
}
/* badge de sincronização no cartão */
.person.sincronizado{outline:2px solid #e8b45a !important; outline-offset:3px;
  animation:syncpulse 2.4s ease;}
.person.sincronizado::after{content:"⇄ sincronizado"; position:absolute; top:-30px; left:50%;
  transform:translateX(-50%); font-family:'Cinzel',Georgia,serif; font-size:.56rem;
  letter-spacing:.06em; background:#e8b45a; color:#2a1a08; padding:3px 10px;
  border-radius:999px; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.35); z-index:5;}
@keyframes syncpulse{0%{box-shadow:0 0 0 0 rgba(232,180,90,.55);}100%{box-shadow:0 0 0 18px rgba(232,180,90,0);}}
/* ═══════ VISTA DA FICHA ═══════ */
#fichaView{position:fixed; inset:0; z-index:45; display:none; flex-direction:column; background:#070513;}
#fichaView.aberta{display:flex;}
#fichaFrame{flex:1; border:0; width:100%;}
#fichaLoad{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; background:#070513; color:#b89dff;}
#fichaLoad .fl-timao{font-size:2.6rem; animation:flSpin 1.6s linear infinite;}
#fichaLoad .fl-txt{font-family:'Cinzel',Georgia,serif; font-size:.8rem; letter-spacing:.1em; opacity:.8;}
@keyframes flSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* ===== VITRINE DE VIDRO (só mobile) ===== */
.vitrine{ display:none; }
@media (max-width:760px){
  /* layout: título → vitrine → timão+setas, fluindo de cima */
  #porto{ padding:2vh 16px 6vh; gap:0; justify-content:flex-start; overflow-y:auto; }
  #porto h1{ font-size:clamp(1.15rem,7vw,2rem); margin-bottom:2px; }
  #porto .sub{ margin-bottom:12px; }

  /* esconde os dois cards antigos e mostra a vitrine */
  .porto-destinos .dest{ display:none; }
  .porto-destinos{ flex-direction:column; gap:0; width:100%; }
  /* o leme visual tem ~232px (raios fixos); escala no wrap encolhe TUDO junto,
     e as margens negativas compensam o espaço que a escala libera */
  .timao-wrap{ width:200px; height:200px; order:2; transform:scale(.58);
    margin-top:-14px; margin-bottom:-38px; }
     /* some a setinha do topo do timão no mobile */

  .vitrine{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; width:min(225px,60vw); min-height:104px; padding:12px 14px; cursor:pointer;
    border-radius:24px; border:1px solid rgba(200,220,255,.28);
    background:linear-gradient(150deg, rgba(90,140,200,.14), rgba(30,60,100,.10));
    backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:0 8px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
    transition:transform .4s cubic-bezier(.34,1.4,.4,1), border-color .3s, box-shadow .3s;
  }
  .vitrine:active{ transform:scale(.97); }
  .vitrine.trocar{ animation:vitrineFlip .45s ease; }
  @keyframes vitrineFlip{ 0%{transform:rotateY(0) scale(1);} 45%{transform:rotateY(80deg) scale(.9);opacity:.4;} 100%{transform:rotateY(0) scale(1);opacity:1;} }
  .vitrine-ic{ font-size:1.8rem; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
  .vitrine-nm{ font-family:'Cinzel',Georgia,serif; font-size:.92rem; letter-spacing:.12em; color:#eef4ff; }
  .vitrine-ds{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:.78rem; color:#aec4dd; text-align:center; }
  .vitrine-toque{ margin-top:4px; font-family:'Cinzel',serif; font-size:.55rem; letter-spacing:.1em;
    color:#e8b45a; opacity:.85; text-transform:uppercase; }

  .porto-controles{ order:3; margin-top:26px; width:100%;
    display:flex; justify-content:space-between; padding:0 8vw; box-sizing:border-box; }
  .dica{ order:4; margin-top:24px; }
  #zarpar{ display:none; }   /* no mobile, zarpar é tocar na vitrine */
  .seta{ width:50px; height:50px; font-size:1.25rem; }
}
@media (prefers-reduced-motion: reduce){ .mar::before,.mar::after{animation:none;} }

/* ═══════ ENTRADA SUAVE DO PORTO (elementos surgem em cascata) ═══════ */
#porto.entra .porto-cabecalho{animation:portoIn .9s .05s cubic-bezier(.22,.8,.3,1) both;}
#porto.entra .vitrine{animation:portoIn .9s .25s cubic-bezier(.22,.8,.3,1) both;}
#porto.entra .dest{animation:portoIn .9s .25s cubic-bezier(.22,.8,.3,1) both;}
#porto.entra .timao-wrap{animation:portoFade 1s .42s cubic-bezier(.22,.8,.3,1) both;}  /* só fade: não mexe no transform (escala mobile) */
#porto.entra .porto-controles{animation:portoIn .9s .6s cubic-bezier(.22,.8,.3,1) both;}
#porto.entra .dica{animation:portoIn .9s .75s cubic-bezier(.22,.8,.3,1) both;}
@keyframes portoIn{from{opacity:0; transform:translateY(16px);}to{opacity:1; transform:none;}}
@keyframes portoFade{from{opacity:0;}to{opacity:1;}}

/* ═══════ ENTRADA SUAVE DA ÁRVORE ═══════ */
body.arvore-entra #stage, body.arvore-entra header{animation:stageIn 1s ease both;}
@keyframes stageIn{from{opacity:0; filter:blur(5px);}to{opacity:1; filter:none;}}

/* ═══════ ENTRADA SUAVE DA FICHA ═══════ */
#fichaView.aberta{animation:fichaFade .7s ease both;}
@keyframes fichaFade{from{opacity:0;}to{opacity:1;}}

/* loading da ficha some com fade em vez de sumir de repente */
#fichaLoad{transition:opacity .8s ease;}
#fichaLoad.sumir{opacity:0; pointer-events:none;}

@media (prefers-reduced-motion: reduce){
  #porto.entra .porto-cabecalho, #porto.entra .vitrine, #porto.entra .dest,
  #porto.entra .timao-wrap, #porto.entra .porto-controles, #porto.entra .dica,
  body.arvore-entra #stage, body.arvore-entra header, #fichaView.aberta{animation:none !important;}
}

/* ═══════ SELETOR DE IDIOMA (canto superior direito do porto) ═══════ */
#idiomaWrap{display:none !important; position:absolute; top:14px; right:14px; z-index:5;
  display:flex; align-items:center; gap:7px;
  background:rgba(10,20,36,.72); border:1px solid rgba(232,180,90,.35);
  border-radius:999px; padding:7px 12px; backdrop-filter:blur(6px);
  transition:border-color .25s, box-shadow .25s;}
#idiomaWrap:hover{border-color:rgba(232,180,90,.7); box-shadow:0 0 16px rgba(232,180,90,.2);}
#idiomaWrap span{font-size:.95rem; line-height:1;}
#selIdioma{appearance:none; -webkit-appearance:none; background:transparent; border:none;
  color:#e8c874; font-family:'Cinzel',Georgia,serif; font-size:.72rem; letter-spacing:.06em;
  cursor:pointer; padding-right:14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M0 0l4 6 4-6z' fill='%23b89a5e'/></svg>");
  background-repeat:no-repeat; background-position:right center;}
#selIdioma:focus{outline:none;}
#selIdioma option{background:#0b1420; color:#e8ecf4; font-family:Georgia,serif;}
@media (max-width:760px){ #idiomaWrap{top:10px; right:10px; padding:6px 10px;} }

/* ícones nos destinos e no zarpar */
.dest .ic .ico{ width:1em; height:1em; vertical-align:-0.12em; }
#zarpar .ico{ vertical-align:-0.15em; }


/* carimbo de versão, discreto como marca no casco */
.versao-porto{ text-align:center; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.35; margin-top:10px; }