:root{
  /* Neutral, kid-friendly accent for active column */
  --accent: #8AA9FF; /* iris */
  --glow-accent: 0 0 18px rgba(138,169,255,.28);
  --accent-day: #D2A84C; /* enchanted gold */
  --accent-day-shadow: rgba(210,168,76,.20);
}

/* Score + shared family goal strip */
.score-and-goal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-top: 4px;
}

.family-goal {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px dashed rgba(255,255,255,.24);
  color: inherit;
  cursor: pointer;
  text-align: right;
  min-width: 220px;
}

.family-goal-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .85;
}

.family-goal-sub {
  font-size: 13px;
  font-weight: 600;
}

/* On smaller viewports, left-align so it feels natural in portrait */
@media (max-width: 600px) {
  .score-and-goal {
    align-items: flex-start;
  }
  .family-goal {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
}

.week-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.weekbar{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}

.day-col{
  background:rgba(42, 33, 64,0.4);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:flex;flex-direction:column;
  padding:10px;min-height:220px;
  transition:box-shadow .2s ease,transform .15s ease;
}
.day-col:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}

.day-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.day-name{font-weight:800;letter-spacing:.3px}

.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--success),#ffea99);transition:width 240ms ease}

.dropzone{
  flex:1;min-height:160px;border:1px dashed rgba(255,255,255,.18);border-radius:12px;
  padding:8px;display:flex;flex-direction:column;gap:8px;overflow:auto;transition:box-shadow .2s ease,border-color .2s ease;
}
.dropzone.hover{
  border-color:var(--accent);
  box-shadow:
    0 0 0 3px var(--accent-day-shadow) inset,
    0 0 18px var(--accent-day-shadow);
}

.day-col.active-day{
  border:1px solid var(--accent-day);
  box-shadow:
    0 0 0 3px var(--accent-day-shadow) inset,
    0 0 18px var(--accent-day-shadow);
  background:rgba(42, 33, 64,0.4);
}

/* --- Dynamic week board layout --- */

/* Let the page grow vertically; no clipping */
html, body { height: auto; }
body { overflow-y: auto; }

/* Main area should not clip children (confetti, tray, etc.) */
.app, .main, .board { overflow: auto; }

/* Large screens / iPad landscape: 7 flexible columns that stretch by content height */
@media (min-width: 1024px) {
  .board { padding-bottom: 12px; }
  .weekbar {
    display: grid;
    grid-template-columns: repeat(7, minmax(180px, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  .day-col {
    min-height: 220px;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .dropzone {
    flex: 1 1 auto;
    min-height: 140px;
    height: auto;
    overflow: visible;
  }
}

/* Narrow screens / iPad portrait: horizontal scrolling (no clipping) */
@media (max-width: 1023.98px) {
  .board {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .weekbar {
    display: flex;
    gap: 12px;
    min-width: max-content;
    align-items: stretch;
  }
  .day-col {
    flex: 0 0 260px;
    min-width: 260px;
    min-height: 220px;
  }
  .dropzone {
    flex: 1 1 auto;
    min-height: 140px;
    height: auto;
    overflow: visible;
  }
}

/* avoid any accidental clipping from elsewhere */
.weekbar * {
  /* Safari-friendly containment */
  contain: layout paint;
}