@font-face {
  font-family: "Learninglings";
  src: url("./Learninglings.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

*, 
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #f4f1e8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

/* Top bar with button */
.ui-bar {
  /* make a single horizontal scroll row for buttons */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 10;

  /* horizontal scrolling for overflowed buttons */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Make the scroll bar visually subtle on webkit */
.ui-bar::-webkit-scrollbar {
  height: 8px;
}
.ui-bar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 8px;
}
.ui-bar::-webkit-scrollbar-track {
  background: transparent;
}

/* Number buttons — single white pill with black border */
.number-button {
  flex: 0 0 auto;
  height: 48px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid #000000; /* black border requested */
  background: #ffffff;       /* white button */
  color: #000000;
  font-size: 18px;
  font-weight: 700;
  font-family: "Learninglings", system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  min-width: 64px;
  max-width: 160px;
}

.number-button-zero {
  background: #000000; /* black button */
  color: #ffffff;
}
.number-button-one {
  background: #e53935;
}

.number-button-two {
  background: #fb8c00;
}

/* Alphablock spawn button: bright green */
.number-button-alpha {
  background: #7bf128;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Bright cyan button for alphablock B */
.number-button-b {
  background: #9ce6ff;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn C: vivid pink */
.number-button-c {
  background: #ff376e;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn D: vivid purple */
.number-button-d {
  background: #9437ff;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn E: deep red/orange */
.number-button-e {
  background: #cf3a32;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn F: soft purple */
.number-button-f {
  background: #a280ff;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn G: bright lime (first block uses this color) */
.number-button-g {
  background: #d5ff3e;
  color: #000000;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn H: bright sunflower (first block uses this color) */
.number-button-h {
  background: #ffda23;
  color: #000000;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn I: solid magenta (single color) */
.number-button-i {
  background: #bd1a97;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn J: solid blue fill */
.number-button-j {
  background: #4c91f0;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn K: pale lime (#f8ff8d) - first block uses this color */
.number-button-k {
  background: #f8ff8d;
  color: #000000;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn L: soft pink (#ffbdef) - first block uses this color */
.number-button-l {
  background: #ffbdef;
  color: #000000;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn M: light grey (#e8e8e8) - first block uses this color */
.number-button-m {
  background: #e8e8e8;
  color: #000000;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn N: vivid orange-red (#ea4216) - first block uses this color */
.number-button-n {
  background: #ea4216;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn O: solid orange (#ff720f) */
.number-button-o {
  background: #ff720f;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn P: three-color left-to-right gradient (#78f11e, #1e8ff1, #ac1ef1) and readable text */
.number-button-p {
  background: linear-gradient(90deg, #78f11e 0%, #1e8ff1 50%, #ac1ef1 100%);
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn Q: solid teal #01e6a7 - first block uses this color */
.number-button-q {
  background: #01e6a7;
  color: #000000;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn R: solid deep red #cf0028 - first block uses this color */
.number-button-r {
  background: #cf0028;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn S: angular (conic) multi-stop gradient (red, green, #eeeeee, orange, blue, yellow) */
.number-button-s {
  background: conic-gradient(from -90deg at 50% 50%, #ec2020 0deg 60deg, #00c74a 60deg 120deg, #e6e6e6 120deg 180deg, #f96c00 180deg 240deg, #3552da 240deg 300deg, #ffcf2b 300deg 360deg);
  color: #000000;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn T: muted steel blue (#728ea9) - first block uses this color */
.number-button-t {
  background: #728ea9;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn U: bright cyan solid (first block should be just #00a7dc) */
.number-button-u {
  background: #00a7dc;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn W: indigo slate first block color #5166ad */
.number-button-w {
  background: #5166ad;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn X: vertical split top-to-bottom with #00abff (top) and #ffe677 (bottom) */
.number-button-x {
  background: linear-gradient(to bottom, #00abff 0%, #00abff 50%, #ffe677 50%, #ffe677 100%);
  color: #000000;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn Y: warm pale yellow #ffe963 */
.number-button-y {
  background: #ffe963;
  color: #000000;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn Z: bright spring green #97e65f */
.number-button-z {
  background: #97e65f;
  color: #000000;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn Space: white button labeled (Space bar) */
.number-button-space {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  min-width: 96px;
  padding: 6px 12px;
}

/* Alphablock spawn Þ (thorn): white button with a small centered black dot */
.number-button-thorn {
  background: #ffffff;
  background-image: radial-gradient(circle at 50% 50%, #000000 0%, #000000 16%, transparent 16%);
  background-repeat: no-repeat;
  color: #000000;
  border: 2px solid #000000; /* keep a visible black border for contrast */
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Alphablock spawn V: vivid red (#de002b) - first block uses this color */
.number-button-v {
  background: #de002b;
  color: #ffffff;
  border: 2px solid transparent !important;
  box-sizing: border-box;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.number-button-three {
  background: #fdd835; /* yellow */
}

.number-button-four {
  background: #43a047; /* green */
}

.number-button-five {
  background: #00bcd4; /* cyan */
}

.number-button-six {
  background: #3f51b5; /* indigo */
}

.number-button-seven {
  background: #8e24aa; /* violet */
}

.number-button-eight {
  background: #d81b60; /* magenta */
}

.number-button-nine {
  background: #9e9e9e; /* medium grey */
}

.number-button-ten {
  background: #ffffff; /* white */
  color: #000000; /* black text for better contrast */
  border: 2px solid #e31919; /* bright red border (updated) */
  padding: 6px 16px;
  box-shadow: none;
  border-radius: 999px; /* keep ten button rounded to match others */
}

/* 11-19 buttons: half white (left) and half the 'n' color (right) with 10's red border.
   Use a horizontal split via linear-gradient to keep button compact. */
.number-button-eleven { background: linear-gradient(to right, #ffffff 50%, #e53935 50%); color: #000; border: 2px solid #e31919; }
.number-button-twelve { background: linear-gradient(to right, #ffffff 50%, #fb8c00 50%); color: #000; border: 2px solid #e31919; }
.number-button-thirteen { background: linear-gradient(to right, #ffffff 50%, #fdd835 50%); color: #000; border: 2px solid #e31919; }
.number-button-fourteen { background: linear-gradient(to right, #ffffff 50%, #43a047 50%); color: #000; border: 2px solid #e31919; }
.number-button-fifteen { background: linear-gradient(to right, #ffffff 50%, #00bcd4 50%); color: #000; border: 2px solid #e31919; }
.number-button-sixteen { background: linear-gradient(to right, #ffffff 50%, #3f51b5 50%); color: #000; border: 2px solid #e31919; }
.number-button-seventeen { background: linear-gradient(to right, #ffffff 50%, #8e24aa 50%); color: #000; border: 2px solid #e31919; }
.number-button-eighteen { background: linear-gradient(to right, #ffffff 50%, #d81b60 50%); color: #000; border: 2px solid #e31919; }
.number-button-nineteen { background: linear-gradient(to right, #ffffff 50%, #9e9e9e 50%); color: #000; border: 2px solid #e31919; }
.number-button-twenty {
  background: #ffd59a; /* apricot */
  color: #000;
  border: 2px solid #ff6d00; /* bright orange border */
  padding: 6px 14px;
}

/* 21-29: half apricot (left) and half n-color (right) with 20's bright orange border */
.number-button-twentyone { background: linear-gradient(to right, #ffd59a 50%, #e53935 50%); color: #000; border: 2px solid #ff6d00; }
.number-button-twentytwo { background: linear-gradient(to right, #ffd59a 50%, #fb8c00 50%); color: #000; border: 2px solid #ff6d00; }
.number-button-twentythree { background: linear-gradient(to right, #ffd59a 50%, #fdd835 50%); color: #000; border: 2px solid #ff6d00; }
.number-button-twentyfour { background: linear-gradient(to right, #ffd59a 50%, #43a047 50%); color: #000; border: 2px solid #ff6d00; }
.number-button-twentyfive { background: linear-gradient(to right, #ffd59a 50%, #00bcd4 50%); color: #000; border: 2px solid #ff6d00; }
.number-button-twentysix { background: linear-gradient(to right, #ffd59a 50%, #3f51b5 50%); color: #000; border: 2px solid #ff6d00; }
.number-button-twentyseven { background: linear-gradient(to right, #ffd59a 50%, #8e24aa 50%); color: #000; border: 2px solid #ff6d00; }
.number-button-twentyeight { background: linear-gradient(to right, #ffd59a 50%, #d81b60 50%); color: #000; border: 2px solid #ff6d00; }
.number-button-twentynine { background: linear-gradient(to right, #ffd59a 50%, #9e9e9e 50%); color: #000; border: 2px solid #ff6d00; }

/* 30: pale yellow with bright yellow border */
.number-button-thirty {
  background: #fff9c4; /* pale yellow */
  color: #000;
  border: 2px solid #E3C30E; /* bright yellow border (updated) */
  padding: 6px 14px;
}

/* 31-39: half pale yellow (left) and half n-color (right) with 30's bright yellow border */
.number-button-thirtyone { background: linear-gradient(to right, #fff9c4 50%, #e53935 50%); color: #000; border: 2px solid #E3C30E; }
.number-button-thirtytwo { background: linear-gradient(to right, #fff9c4 50%, #fb8c00 50%); color: #000; border: 2px solid #E3C30E; }
.number-button-thirtythree { background: linear-gradient(to right, #fff9c4 50%, #fdd835 50%); color: #000; border: 2px solid #E3C30E; }
.number-button-thirtyfour { background: linear-gradient(to right, #fff9c4 50%, #43a047 50%); color: #000; border: 2px solid #E3C30E; }
.number-button-thirtyfive { background: linear-gradient(to right, #fff9c4 50%, #00bcd4 50%); color: #000; border: 2px solid #E3C30E; }
.number-button-thirtysix { background: linear-gradient(to right, #fff9c4 50%, #3f51b5 50%); color: #000; border: 2px solid #E3C30E; }
.number-button-thirtyseven { background: linear-gradient(to right, #fff9c4 50%, #8e24aa 50%); color: #000; border: 2px solid #E3C30E; }
.number-button-thirtyeight { background: linear-gradient(to right, #fff9c4 50%, #d81b60 50%); color: #000; border: 2px solid #E3C30E; }
.number-button-thirtynine { background: linear-gradient(to right, #fff9c4 50%, #9e9e9e 50%); color: #000; border: 2px solid #E3C30E; }

/* 40: pale green with bright green border */
.number-button-forty {
  background: #B7FDA3; /* updated pale green fill for 40 button */
  color: #000;
  border: 2px solid #00c853; /* bright green border */
  padding: 6px 14px;
}

/* 41-49: half pale green (left) and half n-color (right) with 40's bright green border */
.number-button-fortyone { background: linear-gradient(to right, #B7FDA3 50%, #e53935 50%); color: #000; border: 2px solid #00c853; }
.number-button-fortytwo { background: linear-gradient(to right, #B7FDA3 50%, #fb8c00 50%); color: #000; border: 2px solid #00c853; }
.number-button-fortythree { background: linear-gradient(to right, #B7FDA3 50%, #fdd835 50%); color: #000; border: 2px solid #00c853; }
.number-button-fortyfour { background: linear-gradient(to right, #B7FDA3 50%, #43a047 50%); color: #000; border: 2px solid #00c853; }
.number-button-fortyfive { background: linear-gradient(to right, #B7FDA3 50%, #00bcd4 50%); color: #000; border: 2px solid #00c853; }
.number-button-fortysix { background: linear-gradient(to right, #B7FDA3 50%, #3f51b5 50%); color: #000; border: 2px solid #00c853; }
.number-button-fortyseven { background: linear-gradient(to right, #B7FDA3 50%, #8e24aa 50%); color: #000; border: 2px solid #00c853; }
.number-button-fortyeight { background: linear-gradient(to right, #B7FDA3 50%, #d81b60 50%); color: #000; border: 2px solid #00c853; }
.number-button-fortynine { background: linear-gradient(to right, #B7FDA3 50%, #9e9e9e 50%); color: #000; border: 2px solid #00c853; }

/* 50: pale cyan with bright cyan border (5x10 base) */
.number-button-fifty {
  background: #85e7ff; /* pale cyan (updated) */
  color: #000;
  border: 2px solid #009bc2; /* bright cyan border (updated) */
  padding: 6px 14px;
}

/* 51-59: half pale cyan (left) and half n-color (right) with 50's bright cyan border */
.number-button-fiftyone   { background: linear-gradient(to right, #85e7ff 50%, #e53935 50%); color: #000; border: 2px solid #009bc2; }
.number-button-fiftytwo   { background: linear-gradient(to right, #85e7ff 50%, #fb8c00 50%); color: #000; border: 2px solid #009bc2; }
.number-button-fiftythree { background: linear-gradient(to right, #85e7ff 50%, #fdd835 50%); color: #000; border: 2px solid #009bc2; }
.number-button-fiftyfour  { background: linear-gradient(to right, #85e7ff 50%, #43a047 50%); color: #000; border: 2px solid #009bc2; }
.number-button-fiftyfive  { background: linear-gradient(to right, #85e7ff 50%, #00bcd4 50%); color: #000; border: 2px solid #009bc2; }
.number-button-fiftysix   { background: linear-gradient(to right, #85e7ff 50%, #3f51b5 50%); color: #000; border: 2px solid #009bc2; }
.number-button-fiftyseven { background: linear-gradient(to right, #85e7ff 50%, #8e24aa 50%); color: #000; border: 2px solid #009bc2; }
.number-button-fiftyeight { background: linear-gradient(to right, #85e7ff 50%, #d81b60 50%); color: #000; border: 2px solid #009bc2; }
.number-button-fiftynine  { background: linear-gradient(to right, #85e7ff 50%, #9e9e9e 50%); color: #000; border: 2px solid #009bc2; }

/* 60: pale lilac with bright purple border (6x10 base) */
.number-button-sixty {
  background: #738cff; /* pale lilac (updated) */
  color: #000;
  border: 2px solid #192e8c; /* bright purple border (updated) */
  padding: 6px 14px;
}

/* 61-69: half pale lilac (left) and half n-color (right) with 60's bright purple border */
.number-button-sixtyone   { background: linear-gradient(to right, #738cff 50%, #e53935 50%); color: #000; border: 2px solid #192e8c; }
.number-button-sixtytwo   { background: linear-gradient(to right, #738cff 50%, #fb8c00 50%); color: #000; border: 2px solid #192e8c; }
.number-button-sixtythree { background: linear-gradient(to right, #738cff 50%, #fdd835 50%); color: #000; border: 2px solid #192e8c; }
.number-button-sixtyfour  { background: linear-gradient(to right, #738cff 50%, #43a047 50%); color: #000; border: 2px solid #192e8c; }
.number-button-sixtyfive  { background: linear-gradient(to right, #738cff 50%, #00bcd4 50%); color: #000; border: 2px solid #192e8c; }
.number-button-sixtysix   { background: linear-gradient(to right, #738cff 50%, #3f51b5 50%); color: #000; border: 2px solid #192e8c; }
.number-button-sixtyseven { background: linear-gradient(to right, #738cff 50%, #8e24aa 50%); color: #000; border: 2px solid #192e8c; }
.number-button-sixtyeight { background: linear-gradient(to right, #738cff 50%, #d81b60 50%); color: #000; border: 2px solid #192e8c; }
.number-button-sixtynine  { background: linear-gradient(to right, #738cff 50%, #9e9e9e 50%); color: #000; border: 2px solid #192e8c; }
.number-button-seventy {
  background: #cc73ff;
  color: #000;
  border: 2px solid #7e06cf;
  padding: 6px 14px;
}

/* 80: pale pink-magenta fill with strong magenta border (8x10 base) */
.number-button-eighty {
  background: #ff70d2; /* 80 base fill */
  color: #000;
  border: 2px solid #cc085a; /* 80 border */
  padding: 6px 14px;
}

/* 100: pale warm red button with dark red border */
.number-button-hundred {
  background: #fc5b5b;
  color: #000;
  border: 2px solid #ad2b2b;
  padding: 6px 14px;
}

/* 81-89: half 80's tint (left) and half n-color (right), using 80's border */
.number-button-eightyone    { background: linear-gradient(to right, #ff70d2 50%, #e53935 50%); color: #000; border: 2px solid #cc085a; }
.number-button-eightytwo    { background: linear-gradient(to right, #ff70d2 50%, #fb8c00 50%); color: #000; border: 2px solid #cc085a; }
.number-button-eightythree  { background: linear-gradient(to right, #ff70d2 50%, #fdd835 50%); color: #000; border: 2px solid #cc085a; }
.number-button-eightyfour   { background: linear-gradient(to right, #ff70d2 50%, #43a047 50%); color: #000; border: 2px solid #cc085a; }
.number-button-eightyfive   { background: linear-gradient(to right, #ff70d2 50%, #00bcd4 50%); color: #000; border: 2px solid #cc085a; }
.number-button-eightysix    { background: linear-gradient(to right, #ff70d2 50%, #3f51b5 50%); color: #000; border: 2px solid #cc085a; }
.number-button-eightyseven  { background: linear-gradient(to right, #ff70d2 50%, #8e24aa 50%); color: #000; border: 2px solid #cc085a; }
.number-button-eightyeight  { background: linear-gradient(to right, #ff70d2 50%, #d81b60 50%); color: #000; border: 2px solid #cc085a; }
.number-button-eightynine   { background: linear-gradient(to right, #ff70d2 50%, #9e9e9e 50%); color: #000; border: 2px solid #cc085a; }

/* 91-99: half 90's grey (left) and half n-color (right) using 90's border */
.number-button-ninetyone    { background: linear-gradient(to right, #858585 50%, #e53935 50%); color: #000; border: 2px solid #6e6e6e; }
.number-button-ninetytwo    { background: linear-gradient(to right, #858585 50%, #fb8c00 50%); color: #000; border: 2px solid #6e6e6e; }
.number-button-ninetythree  { background: linear-gradient(to right, #858585 50%, #fdd835 50%); color: #000; border: 2px solid #6e6e6e; }
.number-button-ninetyfour   { background: linear-gradient(to right, #858585 50%, #43a047 50%); color: #000; border: 2px solid #6e6e6e; }
.number-button-ninetyfive   { background: linear-gradient(to right, #858585 50%, #00bcd4 50%); color: #000; border: 2px solid #6e6e6e; }
.number-button-ninetysix    { background: linear-gradient(to right, #858585 50%, #3f51b5 50%); color: #000; border: 2px solid #6e6e6e; }
.number-button-ninetyseven  { background: linear-gradient(to right, #858585 50%, #8e24aa 50%); color: #000; border: 2px solid #6e6e6e; }
.number-button-ninetyeight  { background: linear-gradient(to right, #858585 50%, #d81b60 50%); color: #000; border: 2px solid #6e6e6e; }
.number-button-ninetynine   { background: linear-gradient(to right, #858585 50%, #9e9e9e 50%); color: #000; border: 2px solid #6e6e6e; }

/* 90: neutral grey button */
.number-button-ninety {
  background: #858585;
  color: #000;
  border: 2px solid #6e6e6e;
  padding: 6px 14px;
}

/* 71-79: half 70's purple tint (left) and half n-color (right), using 70's purple border */
.number-button-seventyone   { background: linear-gradient(to right, #cc73ff 50%, #e53935 50%); color: #000; border: 2px solid #7e06cf; }
.number-button-seventytwo   { background: linear-gradient(to right, #cc73ff 50%, #fb8c00 50%); color: #000; border: 2px solid #7e06cf; }
.number-button-seventythree { background: linear-gradient(to right, #cc73ff 50%, #fdd835 50%); color: #000; border: 2px solid #7e06cf; }
.number-button-seventyfour  { background: linear-gradient(to right, #cc73ff 50%, #43a047 50%); color: #000; border: 2px solid #7e06cf; }
.number-button-seventyfive  { background: linear-gradient(to right, #cc73ff 50%, #00bcd4 50%); color: #000; border: 2px solid #7e06cf; }
.number-button-seventysix   { background: linear-gradient(to right, #cc73ff 50%, #3f51b5 50%); color: #000; border: 2px solid #7e06cf; }
.number-button-seventyseven { background: linear-gradient(to right, #cc73ff 50%, #8e24aa 50%); color: #000; border: 2px solid #7e06cf; }
.number-button-seventyeight { background: linear-gradient(to right, #cc73ff 50%, #d81b60 50%); color: #000; border: 2px solid #7e06cf; }
.number-button-seventynine  { background: linear-gradient(to right, #cc73ff 50%, #9e9e9e 50%); color: #000; border: 2px solid #7e06cf; }

.number-button:active {
  transform: scale(0.96);
}

/* small chooser shown when picking uppercase/lowercase for alphablock */
.case-chooser {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  z-index: 60;
  pointer-events: auto;
}
.case-chooser .number-button {
  height: 40px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
}

/* Playground area */
#playground {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden; /* disable playground scrolling — buttons handle overflow now */
}

/* Numberblock container */
.numberblock {
  position: absolute;
  width: 40px;   /* base block size */
  touch-action: none; /* allow dragging without scrolling */
}

/* Stack of blocks (bottom block at the bottom) */
.numberblock-stack {
  display: flex;
  flex-direction: column-reverse;
}

/* Individual block */
.numberblock-block {
  width: 40px;
  height: 40px;
  border-radius: 2px;
}

/* Alphablock letter inside the top (glass) block */
.alphablock-letter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Learninglings", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  pointer-events: none;
  user-select: none;
}

/* Add a special style for 30 blocks: pale yellow fill with bright yellow border */
.numberblock-block.pale-30 {
  background-color: #fff9c4;
  border: 2px solid #E3C30E;
  box-sizing: border-box;
}

/* Add a special style for 80 blocks: 8x10 base fill and border */
.numberblock-block.pale-80 {
  background-color: #ff70d2;
  border: 2px solid #cc085a;
  box-sizing: border-box;
}

/* Add a special style for 40 blocks: pale green fill with bright green border (4x10) */
.numberblock-block.pale-40 {
  background-color: #B7FDA3; /* updated pale green fill for 40 blocks */
  border: 2px solid #00c853;
  box-sizing: border-box;
}

/* Add a special style for 50 blocks: pale cyan fill with bright cyan border */
.numberblock-block.pale-50 {
  background-color: #85e7ff;
  border: 2px solid #009bc2;
  box-sizing: border-box;
}

/* Add a special style for 60 blocks: pale lilac fill with updated purple border (6x10 base) */
.numberblock-block.pale-60 {
  background-color: #738cff;
  border: 2px solid #192e8c;
  box-sizing: border-box;
}

/* Add a special style to ensure apricot-20 blocks show apricot with bright orange border */
.numberblock-block.apricot-20 {
  background-color: #ffd59a;
  border: 2px solid #ff6d00;
  box-sizing: border-box;
}

/* Special styling for 6's dice blocks */
.dice-six-block {
  position: relative;
  background-color: #3f51b5; /* indigo */
}

.dice-six-pip {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #c5cae9; /* periwinkle */
  transform: translate(-50%, -50%);
}

/* Numberling label */
.numberblock-label {
  position: absolute;
  bottom: 100%;          /* sit on top of the top block */
  left: 50%;
  transform: translateX(-50%);
  font-family: "Learninglings", system-ui, sans-serif;
  font-size: 26px;
  color: #000000;
  pointer-events: none;
  user-select: none;
}

/* Optional subtle ground indication */
#playground::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.08), transparent);
  pointer-events: none;
}

.numberblock-action-bar {
  position: absolute;
  z-index: 50;
  display: flex;
  gap: 8px;
  background: #ffffff; /* white fill */
  border: 1px solid rgba(0,0,0,0.06);
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  min-width: 120px;
  pointer-events: auto;
}

.numberblock-action-bar .action-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Learninglings", system-ui, sans-serif;
}

.numberblock-action-bar .action-btn:hover {
  background: rgba(0,0,0,0.04);
}

.numberblock-action-bar .delete-btn {
  color: #d32f2f;
}

.numberblock-action-bar .toggle-seven-btn {
  color: #6a1b9a;
}

/* Deleting animation: fade out while sliding up slightly */
.numberblock.fade-up-away {
  transition: transform 320ms cubic-bezier(.22,.9,.36,1), opacity 320ms ease;
  opacity: 0;
  transform: translateY(-24px) scale(0.98);
  pointer-events: none;
}

/* Shine/glow used when letters speak their names */
.shine {
  box-shadow: 0 0 18px 6px rgba(255, 255, 160, 0.95), 0 0 36px 12px rgba(255, 200, 80, 0.08) !important;
  transform: translateZ(0) scale(1.02);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

/* Drown animation for letters that are made to sink/fade (used by 'w' behavior) */
.drown {
  transition: transform 480ms cubic-bezier(.22,.9,.36,1), opacity 480ms ease;
  transform-origin: 50% 0%;
  transform: translateY(26px) scale(0.6);
  opacity: 0;
  pointer-events: none;
}

/* brief shake for gibberish spell attempts */
.shake {
  animation: nb-shake 420ms ease;
  transform-origin: 50% 50%;
}
@keyframes nb-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-1deg); }
  40% { transform: translateX(8px) rotate(1deg); }
  60% { transform: translateX(-6px) rotate(-0.6deg); }
  80% { transform: translateX(6px) rotate(0.6deg); }
  100% { transform: translateX(0); }
}

/* subtle red flash used during failed spell; temporary style applied inline in JS */
.error-red {
  background-color: #e53935 !important;
}

/* small split/snap for letters during failure will be applied inline by JS (no extra CSS needed) */