/* Quadro de fórmulas PHAENACORY — fonte manuscrita estilo giz */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&display=swap");

.formula-board {
  position: relative;
  margin: 16px 0 20px;
  padding: 22px 18px 26px;
  min-height: 140px;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 75%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
    linear-gradient(155deg, #141c28 0%, #0f1a14 45%, #101820 100%);
  border: 2px solid #2a4035;
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.25);
}

.formula-board::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.formula-board--compact {
  min-height: 100px;
  padding: 16px 14px 18px;
  margin: 0 0 18px;
}

.formula-board--full {
  min-height: 220px;
  padding: 28px 20px 32px;
}

.formula-board__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
}

.formula-chalk {
  display: inline-block;
  font-family: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  line-height: 1.15;
  color: #eef4ff;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.85),
    1px 1px 0 rgba(255, 255, 255, 0.15),
    2px 2px 4px rgba(0, 0, 0, 0.45);
  opacity: 0.93;
}

.formula-board--full .formula-chalk {
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
}

.formula-chalk--lg {
  font-size: clamp(1.45rem, 4.5vw, 2rem);
  font-weight: 700;
}

.formula-chalk--sm {
  font-size: clamp(1.1rem, 3.2vw, 1.45rem);
  opacity: 0.78;
}

/* Posições “soltas” — rotações leves como quadro de escola */
.formula-chalk:nth-child(6n + 1) { transform: rotate(-2.5deg); }
.formula-chalk:nth-child(6n + 2) { transform: rotate(1.8deg); }
.formula-chalk:nth-child(6n + 3) { transform: rotate(-1.2deg); }
.formula-chalk:nth-child(6n + 4) { transform: rotate(2.2deg); }
.formula-chalk:nth-child(6n + 5) { transform: rotate(-0.8deg); }
.formula-chalk:nth-child(6n + 6) { transform: rotate(1.4deg); }

.formula-board__caption {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: #6d8ab0;
  font-family: system-ui, sans-serif;
  font-style: italic;
}

@media (max-width: 420px) {
  .formula-chalk { white-space: normal; }
  .formula-board__inner { gap: 8px 12px; }
}

/* —— Quadro externo (fórmulas ao redor do card de upload / relatório) —— */
.page-upload,
.page-phaenacory,
.page-report {
  position: relative;
  min-height: 100vh;
}

.formula-chalkboard {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Textura sutil sobre o fundo carbon */
.formula-chalkboard::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.formula-chalk--outer {
  position: absolute;
  font-size: clamp(1.5rem, 2.8vw, 2.35rem);
  font-weight: 700;
  color: rgba(238, 244, 255, 0.88);
  opacity: 0.82;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(0, 180, 216, 0.15),
    2px 3px 6px rgba(0, 0, 0, 0.5);
}

.formula-chalk--outer.formula-chalk--sm {
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  font-weight: 600;
  opacity: 0.72;
}

/* Posições — professor escreveu ao redor do formulário */
.formula-pos-tl  { top: 6%;  left: 4%;   transform: rotate(-4deg); }
.formula-pos-tr  { top: 10%; right: 5%;  transform: rotate(3deg); }
.formula-pos-ml  { top: 38%; left: 2%;   transform: rotate(-2deg); }
.formula-pos-mr  { top: 42%; right: 3%;  transform: rotate(2.5deg); }
.formula-pos-bl  { bottom: 14%; left: 5%;  transform: rotate(-3deg); }
.formula-pos-br  { bottom: 10%; right: 4%; transform: rotate(4deg); }
.formula-pos-tc  { top: 4%;  left: 50%; transform: translateX(-50%) rotate(-1deg); }
.formula-pos-bc  { bottom: 5%; left: 50%; transform: translateX(-50%) rotate(1.5deg); }

.page-upload .card,
.page-report .wrap {
  position: relative;
  z-index: 2;
}

.page-phaenacory .wrap {
  position: relative;
  z-index: 2;
}

/* Marca PHAENACORY (S) no quadro externo — efeito professor / ciência */
.chalkboard-mark {
  position: absolute;
  width: clamp(72px, 11vw, 148px);
  height: auto;
  opacity: 0.2;
  filter: drop-shadow(0 0 14px rgba(0, 180, 216, 0.25));
}

.chalkboard-mark--left {
  left: 2.5%;
  top: 18%;
  transform: rotate(-14deg);
}

.chalkboard-mark--right {
  right: 2%;
  top: 52%;
  transform: rotate(16deg);
  opacity: 0.14;
}

.chalkboard-mark--mid {
  left: 4%;
  bottom: 22%;
  width: clamp(56px, 8vw, 96px);
  opacity: 0.12;
  transform: rotate(-8deg);
}

.chalkboard-wordmark {
  position: absolute;
  right: 3%;
  top: 7%;
  width: clamp(120px, 16vw, 200px);
  height: auto;
  opacity: 0.16;
  transform: rotate(2deg);
}

.chalkboard-surf-wordmark {
  position: absolute;
  left: 3%;
  bottom: 8%;
  width: clamp(160px, 22vw, 280px);
  height: auto;
  opacity: 0.22;
  transform: rotate(-3deg);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.08));
}

.chalkboard-surf-mark {
  position: absolute;
  right: 5%;
  bottom: 26%;
  width: clamp(64px, 9vw, 110px);
  height: auto;
  opacity: 0.2;
  transform: rotate(8deg);
}

.formula-chalk--surf-brand {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.5;
  text-transform: lowercase;
}

.formula-chalk--brand {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.45;
  color: rgba(200, 230, 255, 0.9);
}

@media (max-width: 720px) {
  .chalkboard-mark--left,
  .chalkboard-mark--right,
  .chalkboard-mark--mid,
  .chalkboard-wordmark,
  .chalkboard-surf-wordmark,
  .chalkboard-surf-mark { display: none; }
  .formula-chalk--brand,
  .formula-chalk--surf-brand { display: none; }
}


/* Tablet: menos fórmulas nas laterais */
@media (max-width: 1100px) {
  .formula-pos-ml,
  .formula-pos-mr { opacity: 0.55; font-size: clamp(1.2rem, 2vw, 1.6rem); }
}

/* Mobile: só topo e base — card ocupa a tela */
@media (max-width: 720px) {
  .formula-pos-ml,
  .formula-pos-mr,
  .formula-pos-bl,
  .formula-pos-br { display: none; }
  .formula-chalk--outer { opacity: 0.65; font-size: 1.35rem; }
  .formula-pos-tl { top: 2%; left: 3%; }
  .formula-pos-tr { top: 2%; right: 3%; }
  .formula-pos-tc { top: 1%; }
  .formula-pos-bc { bottom: 2%; }
}

@media (max-width: 420px) {
  .formula-pos-tl,
  .formula-pos-tr { display: none; }
  .formula-pos-tc,
  .formula-pos-bc { font-size: 1.15rem; opacity: 0.55; }
}