/* css/block-engine.css — shared visuals for the Number Friends block engine */
.nb-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 2px;
  filter: drop-shadow(0 9px 0 rgba(112, 78, 47, .07)) drop-shadow(0 14px 18px rgba(75, 55, 35, .12));
}

.nb-creature {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--nb-cols), 1fr);
  grid-template-rows: repeat(var(--nb-rows), 1fr);
  gap: 0;
  --nb-cube-size: 60px;
  isolation: isolate;
  transform-origin: center bottom;
  padding-top: 9px;
}

.nb-creature--teen,
.nb-creature--wide { --nb-cube-size: 46px; }

.nb-creature--tall { --nb-cube-size: 44px; }

/* towers of 7-10 rows (layout: 'tower') need a smaller cube so a 10-tower
   still fits a reasonable stage height (~380px) instead of running off. */
.nb-creature--xtall { --nb-cube-size: 34px; }

.nb-creature--value-0 {
  width: var(--nb-cube-size);
  min-height: calc(var(--nb-cube-size) + 9px);
}

.nb-cube {
  width: var(--nb-cube-size);
  height: var(--nb-cube-size);
  border-radius: 8px;
  --nb-cube-color: var(--nb-cell-color, var(--nb-color));
  background:
    repeating-linear-gradient(165deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(18deg, rgba(90, 60, 42, .08) 0 1px, transparent 1px 7px),
    linear-gradient(145deg,
      color-mix(in srgb, var(--nb-cube-color) 86%, #fff4cf) 0%,
      var(--nb-cube-color) 58%,
      color-mix(in srgb, var(--nb-cube-color) 78%, #6b4431) 100%);
  border: 3px solid color-mix(in srgb, var(--nb-cube-color) 45%, #4d382f);
  box-shadow:
    inset 1px 2px 0 rgba(255, 255, 255, .34),
    inset -2px -4px 0 rgba(88, 59, 37, .12),
    0 2px 0 color-mix(in srgb, var(--nb-cube-color) 45%, #76513c);
  transform: translateX(var(--nb-cell-shift-x, 0px)) rotate(var(--nb-tilt, 0deg));
  margin: -1px;
}

.nb-face {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(136px, calc(var(--nb-cols) * var(--nb-cube-size) + 16px));
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 19px;
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -46%);
}
.nb-no-face .nb-face,
.nb-no-face .nb-decor { display: none; }
.nb-eye {
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 4px solid #4a352b;
  background: #fff8df;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .9), 0 3px 0 rgba(79, 53, 37, .12);
}
.nb-eye::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2d211d;
  box-shadow: 3px -3px 0 0 rgba(255, 255, 255, .88);
}
.nb-mouth {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 38px;
  height: 20px;
  border-bottom: 6px solid #3b2a23;
  border-radius: 0 0 28px 28px;
  transform: translateX(-50%);
}

.nb-face::before,
.nb-face::after {
  content: '';
  position: absolute;
  bottom: 20px;
  width: 20px;
  height: 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nb-accent) 72%, #ff8a7a);
  opacity: .72;
}

.nb-face::before { left: 8px; }
.nb-face::after { right: 8px; }

.nb-expression-calm .nb-mouth { width: 28px; height: 16px; }
.nb-expression-soft .nb-eye { transform: scaleY(.92); }
.nb-expression-happy .nb-mouth {
  height: 25px;
  border-bottom-width: 0;
  border-radius: 0 0 28px 28px;
  background: #704033;
  box-shadow: inset 0 -8px 0 #e7856f;
}

.nb-creature--value-1 .nb-face,
.nb-creature--value-2 .nb-face,
.nb-creature--value-3 .nb-face { transform: translate(-50%, -45%) scale(.76); }

.nb-decor {
  position: absolute;
  left: 50%;
  top: -20px;
  z-index: 4;
  pointer-events: none;
  transform: translateX(-50%);
}

.nb-decor--tuft {
  width: 44px;
  height: 28px;
  border-left: 8px solid var(--nb-accent);
  border-top: 8px solid var(--nb-accent);
  border-radius: 50% 0 0 0;
  transform: translateX(-50%) rotate(17deg);
}

.nb-decor--sprout {
  width: 57px;
  height: 35px;
  border-top: 8px solid #4f7f46;
  border-radius: 50%;
}

.nb-decor--sprout::before,
.nb-decor--sprout::after {
  content: '';
  position: absolute;
  top: -11px;
  width: 25px;
  height: 19px;
  border: 6px solid #4f7f46;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.nb-decor--sprout::before { left: 3px; transform: rotate(-24deg); }
.nb-decor--sprout::after { right: 3px; transform: rotate(24deg); }

.nb-decor--star {
  width: 38px;
  height: 38px;
  background: var(--nb-accent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 80% 94%, 50% 70%, 20% 94%, 32% 56%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 3px 0 rgba(80, 52, 36, .2));
}

.nb-decor--spark {
  width: 62px;
  height: 35px;
  border-top: 8px solid var(--nb-accent);
  border-radius: 50%;
}

.nb-decor--spark::before,
.nb-decor--spark::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--nb-accent);
}

.nb-decor--spark::before { left: 6px; }
.nb-decor--spark::after { right: 6px; }

.nb-decor--brows,
.nb-decor--lashes,
.nb-decor--bow {
  top: 32%;
  width: 117px;
  height: 28px;
}

.nb-decor--brows::before,
.nb-decor--brows::after,
.nb-decor--lashes::before,
.nb-decor--lashes::after {
  content: '';
  position: absolute;
  top: 0;
  width: 38px;
  height: 13px;
  border-top: 8px solid #5b3d31;
  border-radius: 50%;
}

.nb-decor--brows::before { left: 5px; transform: rotate(-9deg); }
.nb-decor--brows::after { right: 5px; transform: rotate(9deg); }
.nb-decor--lashes::before { left: 3px; transform: rotate(18deg); border-color: var(--nb-accent); }
.nb-decor--lashes::after { right: 3px; transform: rotate(-18deg); border-color: var(--nb-accent); }

.nb-decor--bow::before,
.nb-decor--bow::after {
  content: '';
  position: absolute;
  top: -36px;
  width: 38px;
  height: 30px;
  border: 6px solid #5d4034;
  border-radius: 60% 42% 60% 42%;
  background: var(--nb-accent);
}

.nb-decor--bow::before { left: 20px; transform: rotate(24deg); }
.nb-decor--bow::after { right: 20px; transform: rotate(-24deg); }

.nb-decor--crayons {
  top: -35px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.nb-decor--crayons span {
  width: 13px;
  height: 49px;
  border: 3px solid rgba(72, 48, 35, .55);
  border-radius: 6px 6px 3px 3px;
  background: var(--nb-crayon-color);
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, .28);
}

.nb-decor--crayons span:nth-child(1) { height: 35px; transform: rotate(-12deg); }
.nb-decor--crayons span:nth-child(2) { height: 44px; transform: rotate(-5deg); }
.nb-decor--crayons span:nth-child(4) { height: 43px; transform: rotate(6deg); }
.nb-decor--crayons span:nth-child(5) { height: 35px; transform: rotate(12deg); }

/* --- signature recognition cues (Task 2b) --- */

.nb-decor--crown {
  top: -35px;
  width: 60px;
  height: 32px;
  background: linear-gradient(160deg, #ffe27a, #e8ac1f);
  border: 3px solid #b9860f;
  border-top: 0;
  clip-path: polygon(0% 100%, 0% 34%, 20% 58%, 50% 4%, 80% 58%, 100% 34%, 100% 100%);
  filter: drop-shadow(0 3px 0 rgba(80, 52, 36, .25));
}

.nb-decor--crown::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nb-accent);
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(80, 52, 36, .3);
}

/* glasses: thin dark ring around each eye + a bridge between them */
.nb-decor--glasses {
  top: 50%;
  left: 50%;
  width: 25px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: #3f2c22;
  border-radius: 3px;
}

.nb-face--glasses .nb-eye::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 47px;
  height: 47px;
  border: 5px solid #3f2c22;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.nb-decor--starHand {
  top: 52%;
  left: auto;
  right: -14px;
  width: 32px;
  height: 32px;
  background: var(--nb-accent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 80% 94%, 50% 70%, 20% 94%, 32% 56%, 2% 35%, 39% 35%);
  transform: translateY(-50%) rotate(-12deg);
  filter: drop-shadow(0 3px 0 rgba(80, 52, 36, .2));
}

/* dice: 3 small white pips row on the chest */
.nb-decor--dice {
  top: 56%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff8df;
  box-shadow:
    0 3px 0 rgba(88, 59, 37, .22),
    25px 0 0 0 #fff8df, 25px 3px 0 0 rgba(88, 59, 37, .22),
    -25px 0 0 0 #fff8df, -25px 3px 0 0 rgba(88, 59, 37, .22);
}

/* sneezy: droopy brows + a small pink nose dot */
.nb-decor--sneezy {
  top: 42%;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #f4a3bd;
  box-shadow: 0 3px 0 rgba(88, 59, 37, .15);
}

.nb-decor--sneezy::before,
.nb-decor--sneezy::after {
  content: '';
  position: absolute;
  top: -35px;
  width: 38px;
  height: 13px;
  border-top: 8px solid #5b3d31;
  border-radius: 50%;
}

.nb-decor--sneezy::before { left: -47px; transform: rotate(9deg); }
.nb-decor--sneezy::after { right: -47px; transform: rotate(-9deg); }

/* stripes: candy-cane bands overlaid on every cube, no head decor */
.nb-creature--stripes .nb-cube {
  position: relative;
  overflow: hidden;
}

.nb-creature--stripes .nb-cube::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, .92) 0, rgba(255, 255, 255, .92) 22%,
    transparent 22%, transparent 44%);
  border-radius: 5px;
  pointer-events: none;
}

.nb-number-badge {
  display: none;
}

.nb-label {
  font-family: var(--font-secondary, sans-serif);
  font-weight: 800;
  font-size: 1.5rem;
  color: #4a372e;
  text-shadow: 0 2px 0 #fff4d7;
}

/* split / merge / celebrate */
.nb-split { display: flex; gap: 8px; align-items: center; }
.nb-split--animate > :first-child { animation: nb-slide-left .45s ease both; }
.nb-split--animate > :last-child { animation: nb-slide-right .45s ease both; }
@keyframes nb-slide-left { from { transform: translateX(20px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
@keyframes nb-slide-right { from { transform: translateX(-20px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
.nb-merge-a { animation: nb-nudge-right .45s ease both; }
.nb-merge-b { animation: nb-nudge-left .45s ease both; }
@keyframes nb-nudge-right { to { transform: translateX(10px); } }
@keyframes nb-nudge-left { to { transform: translateX(-10px); } }
.nb-celebrate { animation: nb-bounce .6s ease; }
@keyframes nb-bounce { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } 70% { transform: scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .nb-creature, .nb-cube, .nb-split--animate > *, .nb-merge-a, .nb-merge-b, .nb-celebrate {
    transition: none !important; animation: none !important;
  }
}

@media (max-width: 560px) {
  .nb-group { padding-inline: 10px; }
  .nb-creature { --nb-cube-size: 37px; }
  .nb-creature--teen,
  .nb-creature--wide { --nb-cube-size: 30px; }
  .nb-creature--tall { --nb-cube-size: 29px; }
  .nb-creature--xtall { --nb-cube-size: 24px; }
}

/* silhouettes / ghost cells */
.nb-silhouette .nb-creature--ghost { position: relative; }
.nb-cube--ghost {
  background: transparent !important;
  border: 2px dashed color-mix(in srgb, var(--nb-color, #888) 55%, transparent);
  box-shadow: none !important; opacity: .75;
}
/* seam hit areas */
.nb-seam {
  position: absolute; z-index: 5; border: 0; cursor: pointer;
  background: repeating-linear-gradient(90deg, #fff8 0 8px, transparent 8px 14px);
  border-radius: 4px; opacity: 0; transition: opacity .15s;
}
.nb-creature:hover .nb-seam, .nb-seam:focus-visible { opacity: 1; }
.nb-seam--row { left: -6%; width: 112%; height: 14px; top: calc(9px + var(--nb-seam-pos) * ((100% - 9px) / var(--nb-rows)) - 7px); }
.nb-seam--col { top: -6%; height: 112%; width: 14px; left: calc(var(--nb-seam-pos) * (100% / var(--nb-cols)) - 7px); }
@media (pointer: coarse) { .nb-seam { opacity: .55; } }
/* drag states */
.nb-dragging { z-index: 20; filter: brightness(1.06); }
.nb-selected { outline: 3px solid #e3a83f; outline-offset: 4px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .nb-seam { transition: none; } }