@font-face{
  font-family:"Lexend";
  src:url("../fonts/Lexend-Light.ttf") format("truetype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Lexend";
  src:url("../fonts/Lexend-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"PP Editorial New";
  src:url("../fonts/PPEditorialNew-Ultralight-BF644b21500d0c0.otf") format("opentype");
  font-weight:200;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"PP Editorial New";
  src:url("../fonts/PPEditorialNew-Regular-BF644b214ff145f.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"PP Editorial New";
  src:url("../fonts/PPEditorialNew-Ultrabold-BF644b21500840c.otf") format("opentype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --font-sans:"Lexend", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-serif:"PP Editorial New", ui-serif, Georgia, "Times New Roman", Times, serif;

  --aquarium-h:480px;
  --bg1:#025B61; --bg2:#01344B; --bg3:#024E6E;
  --panel-bg1:rgba(185,224,235,.95); --panel-bg2:rgba(243,223,224,.96);
  --text:#f5f5f5; --ink:#01344B;
  --accent:#329DA2; --border:rgba(255,255,255,.15);
}
body{
  margin:0;
  font-family:var(--font-sans);
  font-weight:300;
  background:#063a4b;
  color:var(--text);
  padding:16px;
}
.wrapper{width:min(1100px, 100%); margin:0 auto}
h1{text-align:center;margin-bottom:6px;font-family:var(--font-serif);font-weight:400;letter-spacing:.04em}
.subtitle{text-align:center;font-size:.9rem;margin-bottom:10px;opacity:.9}
.layout{display:flex;gap:14px;align-items:flex-start}
.ocean-col{flex:1;min-width:0}
#sidebar{flex:0 0 360px;width:360px;display:flex;flex-direction:column;gap:12px;height:var(--aquarium-h);max-height:var(--aquarium-h);overflow:visible;min-height:0}
@media (max-width: 950px){
  .layout{flex-direction:column}
  #sidebar{width:100%;flex-basis:auto;order:-1;height:auto;max-height:none;overflow:visible}
  #info-card{overflow:visible}
}

/* Barra superior (artes de pesca) fora do aquário */
#gear-panel{
  position:relative;
  width:100%;
  z-index:25;
  margin:0 0 12px 0;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(1,52,75,.55);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  color:#F5FBFF;
  display:grid;
  grid-template-columns: 1fr 280px;
  gap:10px 14px;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}
#gear-title{
  font-weight:760;
  letter-spacing:.06em;
  font-size:.72rem;
  text-transform:uppercase;
  opacity:.9;
}
#gear-text{
  opacity:.95;
  line-height:1.35;
  font-size:.82rem;
  margin-top:2px;
  max-width:62ch;
}

#filters{
  grid-column:2;
  grid-row:1 / span 2;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:0;
  align-self:start;
}
.gear-label{
  font-size:.85rem;
  font-weight:650;
  letter-spacing:.02em;
  color:rgba(245,251,255,.9);
}
#gear-select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.78);
  color:#01344B;
  font-size:.9rem;
  cursor:pointer;
}
#gear-select:focus{
  outline:2px solid rgba(50,157,162,.7);
  outline-offset:2px;
}
.gear-note{
  font-size:.72rem;
  opacity:.9;
  line-height:1.25;
  color:rgba(245,251,255,.85);
}

@media (max-width: 560px){
  #gear-panel{grid-template-columns:1fr}
  #filters{grid-column:1; grid-row:auto}
}

/* Aquário */
#aquarium{
  position:relative;
  flex:1 1 auto;
  min-width:320px;
  height:var(--aquarium-h);
  border-radius:24px;
  /* garante que areia/bolhas não escapam do aquário */
  overflow:hidden;
  border:2px solid var(--border);
  background:linear-gradient(to bottom,#103654 0%,#06141f 60%,#021014 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.75);
}
#aquarium::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.14), transparent 35%, transparent 60%, rgba(255,255,255,.06));
  mix-blend-mode:screen;
  pointer-events:none;
}
#hint{
  text-align:center;
  font-size:.82rem;
  margin-top:8px;
  opacity:.85;
  color:#C4E2E4;
}
.sand{
  position:absolute;
  left:-6%; right:-6%;
  bottom:-22px;
  height:20px; /* menos areia */
  background:radial-gradient(circle at top,#dfcfa4,#d4c6b2 55%,#d4b481 100%);
  filter:blur(1px);
  transform:translateY(10px);
}

#plants-layer{position:absolute; inset:0; pointer-events:none}
.plant{
  position:absolute;
  bottom: -10px;
  left:var(--x,10%);
  width:var(--w,16px);
  height:var(--h,130px);
  border-radius:999px;
  background:linear-gradient(to top,#dfa6a5,#f1bebd);
  transform-origin:bottom center;
  animation:sway var(--dur,4s) ease-in-out infinite alternate;
  animation-delay:var(--delay,0s);
  opacity:var(--op,.9);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
@keyframes sway{
  from{transform:rotate(calc(var(--sway,6deg) * -1)) translateX(-2px)}
  to{transform:rotate(var(--sway,6deg)) translateX(2px)}
}

/* bolhas */
.bubble{
  position:absolute;
  bottom:-40px;
  width:14px; height:14px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), transparent 60%);
  opacity:.7;
  animation:rise 10s linear infinite;
}
.bubble:nth-child(1){left:15%;animation-duration:9s;animation-delay:0s}
.bubble:nth-child(2){left:30%;animation-duration:11s;animation-delay:2s}
.bubble:nth-child(3){left:45%;animation-duration:10s;animation-delay:1s}
.bubble:nth-child(4){left:65%;animation-duration:9s;animation-delay:3s}
.bubble:nth-child(5){left:82%;animation-duration:12s;animation-delay:1.5s}
@keyframes rise{
  0%{transform:translateY(0) scale(.9);opacity:0}
  10%{opacity:.7}
  100%{transform:translateY(-520px) scale(1.1);opacity:0}
}

/* Peixes */
.fish{
  position:absolute;
  width:150px;
  height:auto;
  cursor:pointer;
  user-select:none;
  transition:transform .12s linear, opacity .18s ease;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
  transform-origin:center center;
}
.fish img{display:block;width:100%;height:auto;pointer-events:none}
.fish:hover{transform:scale(1.06) translateZ(0)}
.fish.dim-filter{opacity:.28; pointer-events:none; cursor:default}        /* 3 */
.fish.dim-filter:hover{transform:translateZ(0)}
.fish.dim-selection{opacity:.22}     /* 1 */
.fish.dim-filter.dim-selection{opacity:.11}
.fish.selected{
  opacity:1 !important;
  filter:drop-shadow(0 8px 16px rgba(1,52,75,.65));
  z-index:10;
}
.fish:focus-visible{outline:2px solid #CBEABA; outline-offset:4px; border-radius:12px}

/* Tooltip */
#tooltip{
  position:absolute;
  min-width:160px;
  max-width:240px;
  padding:6px 10px;
  background:rgba(1,52,75,.96);
  border-radius:7px;
  font-size:.78rem;
  line-height:1.3;
  pointer-events:none;
  display:none;
  z-index:20;
  box-shadow:0 8px 18px rgba(1,52,75,.8);
  border:1px solid #80B6BB;
}
#tooltip strong{display:block;margin-bottom:2px}
#tooltip em{font-style:italic;opacity:.85}

/* Cartão BI */
#info-card{
  background:linear-gradient(to bottom right,#F9E5E5,#F3DFE0);
  border-radius:18px;
  padding:16px 18px 14px;
  box-shadow:0 16px 40px rgba(1,52,75,.9);
  border:1px solid #E3CACC;
  position:relative;
  color:var(--ink);
  height:100%;
  max-height:100%;
  overflow:auto;
}
#close-card{
  position:absolute;
  top:8px; right:10px;
  border:none;
  background:transparent;
  color:var(--ink);
  font-size:1.2rem;
  cursor:pointer;
  padding:2px 4px;
  opacity:.75;
}
#close-card:hover{opacity:1}
#card-image{
  width:100%;
  max-height:210px;
  object-fit:contain;
  margin-bottom:10px;
  border-radius:12px;
  background:#FCE3F3;
  padding:6px;
}
#info-card h2{font-size:1.25rem;margin-bottom:2px}
#info-card h3{font-size:.85rem;margin-bottom:8px;font-weight:450;opacity:.85;font-style:italic;color:#417278}
#info-card .tag{
  display:inline-block;
  font-size:.7rem;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid #DFA6A5;
  margin-bottom:8px;
  opacity:.96;
  background:rgba(255,255,255,.7);
  color:var(--ink);
}
#info-card p{font-size:.85rem;margin-bottom:6px;line-height:1.4}
#info-card p:last-child{margin-bottom:0}

#info-card.empty #card-image,
#info-card.empty #card-title,
#info-card.empty #card-subtitle,
#info-card.empty #card-body{
  display:none;
}
#card-placeholder{padding:10px 2px 0 2px;opacity:.85;line-height:1.35}
#info-card:not(.empty) #card-placeholder{display:none}

@media (max-width: 720px){
  :root{--aquarium-h:380px}
  .fish{width:80px}
  .sand{height:64px; bottom:-18px}
  #gear-panel{padding:8px 10px}
}

@media (prefers-reduced-motion: reduce){
  .plant,.bubble{animation:none !important}
  .fish{transition:none !important}
}


@media (max-width: 700px){
  /* Em mobile o layout tem de fluir de cima para baixo (sem “esmagar” o oceano) */
  body{padding:0; display:block; min-height:100vh}
  .wrapper{width:100%; max-width:none}
  .layout{flex-direction:column; gap:12px}
  #gear-panel{margin:0 0 10px 0; border-radius:0; width:100%}
  #aquarium{border-radius:0; width:100%}
  /* Sidebar passa para baixo do oceano e ocupa toda a largura */
  #sidebar{width:100%; flex:0 0 auto; max-height:none}
  #info-card{max-height:none}
  h1,.subtitle{padding:0 14px}
}