/* ==================================================
   🌸 FONTES
================================================== */
@font-face {
  font-family: "PixelOperator";
  src: url("PixelOperator.ttf") format("truetype");
}

/* ==================================================
   🎀 CORES
================================================== */
:root{
  --bg: #fff8fc;
  --bg2: #fdf2f7;

  --window: rgba(255, 248, 252, 0.72);
  --window-soft: rgba(255, 255, 255, 0.22);

  --banner-window: rgba(255, 232, 242, 0.48); /* mais transparente */
  --banner-window-2: rgba(255, 245, 250, 0.22);

  --title1: #f6d7e5;
  --title2: #e8bfd0;
  --title-text: #8a6773;

  --border-light: rgba(255,255,255,0.9);
  --border-mid: #e7bfd1;
  --border-dark: #c894ab;

  --text: #d894b1;
  --text-soft: #e7a9c5;
  --brown: #8d6673;
  --link: #d987ac;
  --link-hover: #b86f90;

  --shadow: rgba(197, 140, 169, 0.15);

  --scroll: #e7bfd1;
  --scroll-hover: #d99bb8;
}

/* ==================================================
   🔄 RESET
================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html, body{
  min-height:100%;
}

body{
  font-family:"PixelOperator", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.65), transparent 35%),
    url("fundosite.png"),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-size: cover;
  background-attachment: fixed;
  color: var(--text);
  padding: 18px;
  line-height: 1.5;
}

/* ==================================================
   📦 SITE
================================================== */
#site{
  max-width: 1280px;
  margin: 0 auto;
}

#topbar{
  height: 20px;
  margin-bottom: 12px;
  border: 2px solid var(--border-dark);
  border-top-color: var(--border-light);
  border-left-color: var(--border-light);
  background: linear-gradient(180deg, #f9e4ee, #ebc1d3);
  box-shadow: 3px 3px 0 rgba(214, 159, 186, 0.18);
  border-radius: 4px;
}

/* ==================================================
   🪟 CAIXAS / JANELAS
================================================== */
.box{
  background: var(--window);
  border: 2px solid var(--border-dark);
  border-top-color: var(--border-light);
  border-left-color: var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    4px 4px 0 rgba(221, 176, 198, 0.20),
    0 0 0 1px rgba(255,255,255,0.35) inset;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ==================================================
   🧁 TÍTULOS DAS CAIXAS
================================================== */
.box h1,
.box h2{
  margin: 0;
  padding: 9px 12px;
  font-weight: normal;
  letter-spacing: 0.4px;
  color: var(--brown);
  background: linear-gradient(180deg, var(--title1), var(--title2));
  border-bottom: 2px solid #deb0c4;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.7);
  position: relative;
}

.box h1::after,
.box h2::after{
  content: "◻ ◻ ◻";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 2px;
  color: #b47b95;
  opacity: .9;
}

.box h1{
  font-size: 28px;
}

.box h2{
  font-size: 20px;
}

/* conteúdo das caixas */
.inside{
  padding: 12px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
}

/* texto geral */
p, li, div, span{
  color: var(--text);
}

strong{
  color: var(--brown);
  font-weight: normal;
}

/* ==================================================
   🧩 LAYOUT DESKTOP
================================================== */
#/* ==================================================
   🧩 LAYOUT DESKTOP — ARRUMADO SEM BURACO
================================================== */

#layout{
  display:grid;
  grid-template-columns: 230px minmax(0, 1fr) 230px;
  gap:10px;
  align-items:start;

  grid-template-areas:
    "banner banner mood"
    "status main mood"
    "menu   main right"
    "updates main right"
    "mini   footer bottomright";
}

/* áreas certinhas */
#banner{ grid-area: banner; }
#mood{ grid-area: mood; }
#status{ grid-area: status; }
#menu{ grid-area: menu; }
#main{ grid-area: main; min-width:0; }
#right{ grid-area: right; }
#updates{ grid-area: updates; }
#mini{ grid-area: mini; }
#bottom-right{ grid-area: bottomright; }
#footer{ grid-area: footer; }

/* coluna da direita */
.stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ==================================================
   📏 ALTURAS AJUSTADAS
================================================== */

/* janela principal */
#main .inside{
  height: 620px;
  overflow-y:auto;
  overflow-x:hidden;
  word-break:break-word;
  padding:14px;
  line-height:1.7;
}

/* mood */
#mood .inside{
  padding:8px;
}

.mood-img,
#mood img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  border:2px solid #e9c5d5;
  border-top-color:#fff;
  border-left-color:#fff;
  border-radius:4px;
}

/* status */
#status .inside{
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* menu */
#menu .inside{
  min-height:220px;
  padding:10px;
}

/* updates */
#updates .inside{
  min-height:180px;
}

/* footer e mini alinhados com a parte de baixo */
#mini .inside,
#footer .inside{
  min-height:120px;
}

/* caixas da direita */
#right .smallbox .inside{
  min-height:110px;
}

#bottom-right .smallbox .inside{
  min-height:110px;
}

/* áreas */
#banner{ grid-area: banner; }
#mood{ grid-area: mood; }
#status{ grid-area: status; }
#menu{ grid-area: menu; }
#main{ grid-area: main; }
#right{ grid-area: right; }
#updates{ grid-area: updates; }
#mini{ grid-area: mini; }
#bottom-right{ grid-area: bottomright; }
#footer{ grid-area: footer; }

/* colunas empilhadas */
.stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ==================================================
   🎀 BANNER / TÍTULO DO SITE
================================================== */
#banner{
  min-height: 120px;
  background: linear-gradient(
    180deg,
    var(--banner-window),
    var(--banner-window-2)
  );
}

#banner h1{
  background: linear-gradient(
    180deg,
    rgba(248, 220, 233, 0.78),
    rgba(232, 191, 208, 0.55)
  );
}

#banner .inside,
#banner p{
  padding: 12px;
}

#banner p{
  color: var(--text-soft);
  font-size: 17px;
}

/* ==================================================
   🖼️ MOOD
================================================== */
#mood .inside{
  padding: 8px;
}

.mood-img,
#mood img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  border: 2px solid #e9c5d5;
  border-top-color:#fff;
  border-left-color:#fff;
  border-radius:4px;
}

/* ==================================================
   💌 STATUS
================================================== */
#status .inside{
  min-height: 140px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

#status img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* ==================================================
   📂 MENU
================================================== */
#menu .inside{
  min-height: 220px;
  padding: 10px;
}

#menu ul{
  list-style:none;
}

#menu li{
  margin: 6px 0;
}

#menu a{
  display:block;
  text-decoration:none;
  color: var(--link);
  background: rgba(255,255,255,0.34);
  border: 2px solid #e2b4c7;
  border-top-color:#fff;
  border-left-color:#fff;
  border-radius:4px;
  padding: 8px 10px;
  transition:.2s ease;
}

#menu a:hover{
  color: var(--link-hover);
  background: rgba(255,255,255,0.60);
  transform: translateY(-1px);
}

/* ==================================================
   📖 MAIN
================================================== */
#main{
  min-width:0;
}

#main .inside{
  min-height: 620px;
  max-height: 620px;
  overflow-y:auto;
  overflow-x:hidden;
  word-break:break-word;
  padding:14px;
  line-height:1.7;
}

#main-title{
  font-size:22px;
}

/* ==================================================
   📓 COLUNA DIREITA
================================================== */
#right .smallbox .inside,
#bottom-right .smallbox .inside{
  min-height: 110px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.14);
}

/* ==================================================
   📝 UPDATES
================================================== */
#updates .inside{
  min-height: 180px;
}

.entry{
  background: rgba(255,255,255,0.22);
  border: 2px solid #e4bbcd;
  border-top-color:#fff;
  border-left-color:#fff;
  border-radius:4px;
  padding:8px;
  margin-bottom:8px;
}

.entry:last-child{
  margin-bottom:0;
}

/* ==================================================
   🔗 MINI LINKS
================================================== */
#mini .inside{
  min-height: 120px;
}

.mini-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.mini-links div{
  background: rgba(255,255,255,0.25);
  border: 2px solid #e4bbcd;
  border-top-color:#fff;
  border-left-color:#fff;
  border-radius:4px;
  padding:8px;
  text-align:center;
}

/* ==================================================
   🦶 FOOTER
================================================== */
#footer .inside{
  min-height: 120px;
  text-align:center;
}

#footer a{
  color: var(--link);
  text-decoration:none;
}

#footer a:hover{
  color: var(--link-hover);
}

/* ==================================================
   📜 SCROLLBAR
================================================== */
::-webkit-scrollbar{
  width:12px;
}

::-webkit-scrollbar-track{
  background:#fff4f8;
  border-left:1px solid #f0cfdd;
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--scroll), #d9a6bc);
  border: 2px solid #fff4f8;
  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--scroll-hover), #cb89a8);
}

/* ==================================================
   💻 AJUSTE PC MAIOR
================================================== */
@media (min-width: 1100px){
  #layout{
    grid-template-columns: 230px minmax(0, 1fr) 230px;
    gap: 12px;
  }

  #main .inside{
    max-height: 620px;
  }

  #banner{
    min-height: 125px;
  }
}

/* ==================================================
   📱 CELULAR / TABLET
================================================== */
@media (max-width: 920px){
  body{
    padding: 10px;
  }

  #layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "banner"
      "mood"
      "status"
      "menu"
      "main"
      "right"
      "updates"
      "mini"
      "bottomright"
      "footer";
  }

  .box{
    width:100%;
  }

  .stack{
    gap:10px;
  }

  #main .inside{
    min-height:auto;
    max-height:420px;
  }

  .box h1{
    font-size:23px;
  }

  .box h2{
    font-size:18px;
  }

  .mood-img,
  #mood img{
    height:auto;
  }
}