:root {
  --panel: #f7fdff;
  --ink: #123b52;
  --muted: #527282;
  --line: #135d73;
  --blue: #79c9d6;
  --yellow: #b9dc69;
  --pink: #7baed4;
  --green: #76d1bb;
  --focus: #075985;
}

body {
  background:
    linear-gradient(rgba(31, 132, 154, 0.16), rgba(12, 92, 119, 0.2)),
    url("numbers-background.jpg") center / cover fixed no-repeat,
    #b8dfe5;
}

.menu-panel,
.activity-panel {
  border-color: #135d73;
  background: rgba(220, 240, 243, 0.97);
  box-shadow: 10px 10px 0 rgba(8, 63, 82, 0.34);
}

h1 {
  color: #0b5670;
  text-shadow: 3px 3px 0 #9dddcb;
}

.back-link,
.back-button {
  border-color: #135d73;
  background: #e8fbff;
  color: #0b4a60;
}

.activity-grid,
.activity-area {
  position: relative;
  overflow: hidden;
  border-color: #19768d;
  background: rgba(246, 252, 251, 0.96);
  box-shadow: inset 0 0 0 5px rgba(91, 174, 184, 0.1);
}

.activity-grid::before,
.activity-area::before {
  content: "123";
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 0;
  color: #0b6c83;
  font-size: clamp(13rem, 29vw, 31rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.08em;
  opacity: 0.045;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-7deg);
  white-space: nowrap;
}

.activity-grid > *,
.activity-area > * {
  position: relative;
  z-index: 1;
}

.activity-picture,
.tile,
.answer,
.action-button {
  border-color: #135d73;
}

.progress-fill {
  background: linear-gradient(90deg, #27b6a4, #a8d94f);
}