/*
 * CareHub Plus — 3D scene (camera rig, board, billboards, props, grade, dice)
 *
 * Styles the CSS-3D camera rig and everything inside it: the 8-square board,
 * the square labels, ground shadows, character billboards and the token,
 * the inline-SVG props, the colour-grade overlays and the dice cube. Inside
 * the 3D chain only transform and preserve-3d are used, so nothing flattens.
 *
 * Author: Vitoria Lana
 * Created on: 21/10/2026
 * Version: 1.0.0
 * Squad: CareHub Plus
 */

/* ---------- Camera rig (design §6, §7) ----------
   No filter, opacity < 1, overflow, clip-path, mask, blend mode or isolation
   on #camera, the rig wrappers or #board: any of them flattens the 3D chain. */
#camera {
  perspective: var(--cam-perspective);
  perspective-origin: 50% 45%;
}

/* Every wrapper sits on the pivot (the centre of the play band). */
.rig {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

#board {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--board-w);
  height: var(--board-h);
  transform-style: preserve-3d;
}

/* ---------- Board plane (design §8) ---------- */
.board-plane,
.floor-fx {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--board-w);
  height: var(--board-h);
}

.board-plane svg,
.floor-fx svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.b-depth { fill: var(--board-depth); }
.b-bg { fill: var(--surface); stroke: var(--border-strong); stroke-width: var(--outline-w); }
.track-under { fill: none; stroke: var(--outline); stroke-width: var(--track-outline-w); stroke-linejoin: round; stroke-linecap: round; }
/* Track: solid dark path. */
.track { fill: none; stroke: #5B5871; stroke-width: var(--track-w); stroke-linejoin: round; stroke-linecap: round; }
.sq { stroke: var(--outline); stroke-width: var(--outline-w); }
/* One colour per square, cycling the logo's satellite colours (lilac → blue →
   pink → green) along the path; the Chegada square is green as the journey's
   destination. */
.sq-pos-0 { fill: #9B7FE6; }
.sq-pos-1 { fill: #7BBEFA; }
.sq-pos-2 { fill: #FE7FB2; }
.sq-pos-3 { fill: #92C657; }
.sq-pos-4 { fill: #9B7FE6; }
.sq-pos-5 { fill: #7BBEFA; }
.sq-pos-6 { fill: #FE7FB2; }
.sq-pos-7 { fill: #92C657; }
/* Chegada ring: a static accent outline around the finish arrow (no pulse,
   so it never overlaps the neighbouring squares). */
.sq-ring {
  fill: none;
  stroke: var(--accent-pink);
  stroke-width: var(--final-ring-w);
  stroke-linejoin: round;
}
/* Start / finish arrows: rounded joins so the pointed shape reads as soft. */
.sq-arrow { stroke-linejoin: round; stroke-linecap: round; }
/* Início / Chegada written inside the arrow, flat on the board. */
.sq-caption {
  /* Dark text reads over the green finish square. */
  fill: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-14);
}

/* Square numbers lie flat on the board; the digit is generated content so
   the decorative scene never forms a digit run in the page text. */
.flat-label {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--label-box);
  height: var(--label-box);
  margin-left: calc(var(--label-box) / -2);
  margin-top: calc(var(--label-box) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-18);
  line-height: 1;
  color: var(--text-primary);
  pointer-events: none;
}

.flat-label::before {
  content: attr(data-n);
}

.flat-label.is-caption {
  width: auto;
  height: auto;
  margin-left: 0;
  margin-top: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-600);
  font-size: var(--fs-14);
}

/* Flat floor effects: dashed worlds */
.fx-world { fill: none; stroke: var(--primary-dark); stroke-width: var(--outline-w); stroke-dasharray: var(--dash) var(--dash); }

/* ---------- Billboards, ground shadows and the token (design §9) ---------- */
.billboard {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.bb-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.bb-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  user-select: none;
}

.bb-img.is-back {
  opacity: 0;
}

.ground {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: var(--radius-full);
  background: radial-gradient(closest-side, var(--ground-core), var(--ground-edge));
  pointer-events: none;
}

.ground.token-base {
  width: var(--size-token-base);
  height: var(--size-token-base);
  margin-left: calc(var(--size-token-base) / -2);
  margin-top: calc(var(--size-token-base) / -2);
  background: var(--primary-light);
  border: var(--outline-w) solid var(--outline);
}

/* Test-mode no-mirror markers (1 px, transparent) */
.nm {
  position: absolute;
  width: 1px;
  height: 1px;
}

/* ---------- Props (design §10): token colours through classes only ---------- */
.prop-svg { display: block; overflow: visible; }
.p-out { stroke: var(--outline); stroke-width: var(--outline-w); stroke-linejoin: round; stroke-linecap: round; }
.p-out-small { stroke: var(--outline); stroke-width: var(--outline-w-small); stroke-linejoin: round; stroke-linecap: round; }
.p-line { fill: none; stroke: var(--border-strong); stroke-width: var(--outline-w); stroke-linecap: round; }
.p-shade { fill: var(--primary-dark); fill-opacity: var(--shade-opacity); }
.p-fill-outline { fill: var(--outline); }
.p-fill-warning { fill: var(--warning); }
.p-fill-surface { fill: var(--surface); }
.p-fill-surface-variant { fill: var(--surface-variant); }
.p-fill-primary { fill: var(--primary); }
.p-fill-pink { fill: var(--accent-pink); }
.p-fill-bg { fill: var(--bg); }
.p-fill-wa-in { fill: var(--wa-bubble-in); }
.p-fill-wa-out { fill: var(--wa-bubble-out); }
.p-fill-text-secondary { fill: var(--text-secondary); }
.p-bubble-body { fill: var(--wa-bubble-out); }
.is-in .p-bubble-body { fill: var(--wa-bubble-in); }
.p-ring-under { fill: none; stroke: var(--outline); stroke-width: var(--ring-under-w); stroke-linecap: round; }
.p-ring { fill: none; stroke: var(--primary); stroke-width: var(--ring-w); stroke-linecap: round; }
.p-planet-body { fill: var(--pink-light); }
.planet-b .p-planet-body { fill: var(--surface-variant); }

.planet {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.planet-label {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  font-family: var(--font-body);
  font-weight: var(--fw-600);
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  white-space: nowrap;
}

/* Two worlds: mini task pills hanging under each planet label */
.planet-tasks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.planet-task {
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  font-family: var(--font-body);
  font-weight: var(--fw-500);
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  white-space: nowrap;
}

/* ---------- Stage-6 burst in #scene2d (2D, above the grade) ---------- */
.burst-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: var(--size-glow);
  height: var(--size-glow);
  margin-left: calc(var(--size-glow) / -2);
  margin-top: calc(var(--size-glow) / -2);
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  -webkit-mask-image: var(--mask-soft);
  mask-image: var(--mask-soft);
  opacity: 0;
}

.burst-logo {
  position: absolute;
  left: 50%;
  top: 34%;
  width: var(--size-logo-hero);
  height: auto;
  margin-left: calc(var(--size-logo-hero) / -2);
  margin-top: calc(var(--size-logo-hero) * -0.134);
  opacity: 0;
}

.burst-sparkle {
  position: absolute;
  width: var(--space-24);
  height: var(--space-24);
  transform: scale(0);
}

.burst-sparkle-1 { left: 18%; top: 22%; }
.burst-sparkle-2 { left: 76%; top: 20%; }
.burst-sparkle-3 { left: 10%; top: 40%; }
.burst-sparkle-4 { left: 84%; top: 38%; }
.burst-sparkle-5 { left: 30%; top: 47%; }
.burst-sparkle-6 { left: 64%; top: 49%; }

/* ---------- Colour grade overlays (design §6): outside the 3D chain ---------- */
.grade-desat { background: var(--grade-neutral); mix-blend-mode: saturation; }
.grade-cool { background: var(--grade-cool); mix-blend-mode: soft-light; }
.grade-pop { background: var(--grade-pop); mix-blend-mode: soft-light; }

/* ---------- Dice (design §12): 2D dock with perspective, 3D cube inside ---------- */
/* Column that stacks the roll hint pill above the dice. It takes the dice's
   fixed width in the #controls row, so the roll button still fills the rest. */
.dice-dock {
  flex: 0 0 var(--dice-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

/* Roll hint pill (above the dice): tells, gently, whether the stage's roll
   moves Mariana forward or back. Built from tokens only (app lilac palette). */
.roll-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: var(--fw-600);
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  white-space: nowrap;
  box-shadow: var(--shadow-card);
}

/* Forward: lilac fill, the app's primary accent. */
.roll-hint[data-dir="1"] {
  background: var(--surface-variant);
  color: var(--primary-dark);
}

/* Back: a softer, muted tone so a setback never reads as alarming. */
.roll-hint[data-dir="-1"] {
  background: var(--surface);
  color: var(--text-secondary);
}

.roll-hint-arrow {
  font-weight: var(--fw-700);
  line-height: 1;
}

.dice-view {
  flex: 0 0 var(--dice-size);
  width: var(--dice-size);
  height: var(--dice-size);
  perspective: var(--dice-perspective);
}

#dice {
  position: relative;
  width: var(--dice-size);
  height: var(--dice-size);
  transform-style: preserve-3d;
}

#dice.is-rolling {
  will-change: transform;
}

.die-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: var(--space-8);
  background: var(--bg);
  border: var(--outline-w) solid var(--outline);
  border-radius: var(--radius-12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pip {
  width: var(--dice-pip);
  height: var(--dice-pip);
  border-radius: var(--radius-full);
  background: var(--primary-dark);
  align-self: center;
  justify-self: center;
}

.pip-1 { grid-area: 1 / 1; }
.pip-2 { grid-area: 1 / 2; }
.pip-3 { grid-area: 1 / 3; }
.pip-4 { grid-area: 2 / 1; }
.pip-5 { grid-area: 2 / 2; }
.pip-6 { grid-area: 2 / 3; }
.pip-7 { grid-area: 3 / 1; }
.pip-8 { grid-area: 3 / 2; }
.pip-9 { grid-area: 3 / 3; }