:root {
  --bg: #f5f7f4;
  --surface: rgba(255,255,255,.92);
  --surface-strong: #ffffff;
  --ink: #17312d;
  --muted: #657a75;
  --primary: #0f766e;
  --primary-dark: #0b5b55;
  --accent: #f4a261;
  --line: #dce7e3;
  --shadow: 0 18px 45px rgba(21, 61, 55, .10);
  --radius: 24px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Heebo", system-ui, sans-serif;
  background:
    radial-gradient(circle at 100% 10%, rgba(15,118,110,.08), transparent 28rem),
    radial-gradient(circle at 0 60%, rgba(244,162,97,.08), transparent 26rem),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
}
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1180px, 100%); margin: 0 auto; padding-bottom: calc(60px + var(--safe-bottom)); }
.hero {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border-radius: 0 0 38px 38px;
  background: linear-gradient(135deg, #073b36, #0f766e 55%, #2a9d8f);
  color: white;
  padding: 64px 22px 40px;
  isolation: isolate;
}
.hero-content { position: relative; z-index: 2; max-width: 720px; margin: auto; text-align: center; }
.hero-orb { position:absolute; border-radius:50%; filter: blur(2px); opacity:.22; z-index:1; }
.hero-orb-a { width:260px; height:260px; background:#ffe0b5; top:-100px; left:-70px; }
.hero-orb-b { width:190px; height:190px; background:#b8fff1; bottom:-90px; right:-40px; }
.eyebrow { display:inline-flex; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.14); font-size:.82rem; font-weight:700; letter-spacing:.04em; }
h1 { font-size: clamp(2rem, 8vw, 4rem); line-height:1.05; margin:18px 0 12px; letter-spacing:-.03em; }
.hero-subtitle { margin:0 auto; color:rgba(255,255,255,.82); font-size:1.05rem; }
.hero-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:26px; }
.button { border:0; border-radius:14px; padding:11px 18px; font-weight:700; transition:.2s ease; }
.button:active { transform: scale(.97); }
.button-light { background:#fff; color:var(--primary-dark); }
.button-ghost { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); }
.button-primary { background:var(--primary); color:white; }
main { padding: 0 14px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:-30px auto 20px; position:relative; z-index:3; max-width:950px; }
.stat-card { background:var(--surface-strong); border:1px solid rgba(255,255,255,.8); border-radius:20px; padding:16px; box-shadow:var(--shadow); }
.stat-value { display:block; font-size:1.8rem; font-weight:800; color:var(--primary); }
.stat-label { color:var(--muted); font-size:.9rem; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 30px rgba(21,61,55,.06); margin:16px auto; max-width:950px; }
.panel-heading { padding:18px 18px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.collapsible-heading { width:100%; border:0; background:transparent; color:inherit; text-align:right; }
.section-kicker { display:block; color:var(--primary); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.panel-heading strong { font-size:1.25rem; }
.count-pill { min-width:34px; height:34px; display:grid; place-items:center; border-radius:999px; background:#e7f4f1; color:var(--primary-dark); font-weight:800; }
.tbd-grid { display:grid; gap:10px; padding:4px 14px 16px; }
.tbd-item { background:#fffaf3; border:1px solid #f2dfc5; border-radius:17px; padding:14px; }
.tbd-item h3 { margin:0 0 6px; font-size:1rem; }
.tbd-meta { color:#97663d; font-size:.82rem; font-weight:700; }
.tbd-item p { margin:8px 0 0; color:var(--muted); font-size:.91rem; }
.controls { position:sticky; top:8px; z-index:20; padding:12px; backdrop-filter:blur(18px); }
.search-row { display:flex; gap:10px; align-items:center; }
.search-box { flex:1; min-width:0; display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:white; border-radius:16px; padding:0 12px; }
.search-box input { width:100%; height:46px; border:0; outline:0; background:transparent; color:var(--ink); }
.view-switch { display:flex; background:#eaf0ee; padding:4px; border-radius:14px; }
.view-button { border:0; background:transparent; color:var(--muted); padding:8px 10px; border-radius:10px; font-weight:700; }
.view-button.active { background:white; color:var(--primary-dark); box-shadow:0 4px 12px rgba(21,61,55,.08); }
.filter-scroller { display:flex; overflow-x:auto; scrollbar-width:none; gap:8px; padding:12px 1px 2px; scroll-snap-type:x proximity; }
.filter-scroller::-webkit-scrollbar { display:none; }
.filter-chip { flex:0 0 auto; border:1px solid var(--line); background:white; color:var(--ink); border-radius:999px; padding:8px 12px; font-weight:650; font-size:.88rem; scroll-snap-align:start; }
.filter-chip.active { background:var(--primary); color:white; border-color:var(--primary); }
.control-footer { display:flex; justify-content:space-between; align-items:center; color:var(--muted); padding:8px 4px 0; font-size:.88rem; }
.text-button { border:0; background:transparent; color:var(--primary); font-weight:700; }
.timeline { max-width:950px; margin:18px auto; display:grid; gap:14px; }
.month-heading { margin:22px 4px 2px; font-size:1.25rem; }
.day-card { background:white; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 8px 24px rgba(21,61,55,.055); transition:transform .2s ease, box-shadow .2s ease; }
.day-card:active { transform:scale(.995); }
.day-card.open-day { border-style:dashed; background:linear-gradient(135deg,#fff,#f1faf7); }
.day-main { width:100%; border:0; background:transparent; text-align:right; color:inherit; padding:16px; display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; }
.date-tile { background:#e9f5f2; border-radius:16px; min-height:64px; display:grid; place-items:center; align-content:center; }
.date-number { font-size:1.55rem; line-height:1; font-weight:800; color:var(--primary-dark); }
.date-month { font-size:.75rem; color:var(--muted); }
.day-copy { min-width:0; }
.day-weekday { color:var(--primary); font-size:.82rem; font-weight:800; }
.day-copy h2 { margin:2px 0 4px; font-size:1.08rem; line-height:1.25; }
.day-region { color:var(--muted); font-size:.87rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.day-emoji { font-size:1.7rem; }
.badges { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; }
.badge { border-radius:999px; padding:5px 9px; font-size:.76rem; font-weight:700; background:#eef4f2; color:#41615b; }
.day-details { display:none; border-top:1px solid var(--line); padding:14px 16px 16px; background:#fbfcfb; }
.day-card.expanded .day-details { display:block; }
.activity-list { display:grid; gap:12px; }
.activity { display:grid; grid-template-columns:64px 1fr; gap:10px; }
.activity-time { color:var(--primary); font-weight:800; font-size:.88rem; }
.activity h3 { margin:0; font-size:.98rem; }
.activity-location { color:var(--muted); font-size:.82rem; margin-top:2px; }
.activity p { color:#536b66; margin:6px 0 0; font-size:.9rem; }
.activity-participants { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.activity-participants-icon { font-size:.9rem; line-height:1; }
.activity-participants-chips { display:flex; flex-wrap:wrap; gap:6px; }
.participant-chip { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:4px 10px; font-size:.76rem; font-weight:700; background:#e8f3f0; color:#2f5f57; border:1px solid #c9e4dc; }
.participant-chip-remove { border:0; background:transparent; color:#5f7f78; font-size:1rem; line-height:1; padding:0 2px; cursor:pointer; }
.participant-chip-remove:hover { color:#b42318; }
.activity-participants-add { display:inline-flex; }
.participant-add-select { border:1px dashed #9ec7bc; border-radius:999px; padding:4px 10px; font-size:.76rem; font-weight:700; background:#f7fcfa; color:#2f5f57; cursor:pointer; max-width:180px; }
.participant-add-select:focus { outline:2px solid #0f766e; outline-offset:2px; }
.activity-participants-empty { font-size:.76rem; color:var(--muted); font-weight:600; }
.empty-activities { color:var(--muted); }
.day-journal {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f3faf7;
  border: 1px solid #d8ebe5;
}
.day-journal-label {
  display: block;
  color: var(--primary);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.day-journal p {
  margin: 0;
  color: #3f5b56;
  font-size: .95rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.calendar-view { max-width:950px; margin:18px auto; display:grid; gap:18px; }
.calendar-month { background:white; border:1px solid var(--line); border-radius:22px; padding:14px; }
.calendar-month h2 { margin:0 0 12px; }
.week-header, .calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.week-header div { text-align:center; color:var(--muted); font-size:.73rem; font-weight:700; }
.calendar-cell { aspect-ratio:1; min-width:0; border:1px solid transparent; border-radius:12px; background:#f7f9f8; padding:5px; text-align:right; color:var(--ink); position:relative; }
.calendar-cell.has-day { background:#eaf5f2; border-color:#d6e9e4; }
.calendar-cell.has-day:hover { border-color:var(--primary); }
.calendar-cell.open-day { background:#f8faf9; border-style:dashed; }
.calendar-number { font-weight:800; font-size:.85rem; }
.calendar-emoji { position:absolute; left:5px; bottom:4px; font-size:1rem; }
.calendar-dot { width:5px; height:5px; border-radius:50%; background:var(--primary); position:absolute; right:7px; bottom:6px; }
.hidden { display:none !important; }
.modal { position:fixed; inset:0; z-index:100; display:none; }
.modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(8,31,28,.55); backdrop-filter:blur(6px); }
.modal-card { position:absolute; left:0; right:0; bottom:0; max-height:88vh; overflow:auto; background:white; border-radius:28px 28px 0 0; padding:22px 18px calc(28px + var(--safe-bottom)); box-shadow:0 -24px 70px rgba(0,0,0,.22); }
.modal-close { position:sticky; top:0; float:left; border:0; width:38px; height:38px; border-radius:50%; background:#eef3f1; font-size:1.6rem; z-index:2; }
.modal-title { margin:10px 0 4px; font-size:1.45rem; }
.modal-date { color:var(--primary); font-weight:800; }
.modal-activities { margin-top:20px; }
.error-panel { padding:22px; text-align:center; }
.toast { position:fixed; z-index:120; left:50%; bottom:calc(20px + var(--safe-bottom)); transform:translate(-50%,120px); background:#17312d; color:white; padding:11px 16px; border-radius:14px; opacity:0; transition:.25s ease; pointer-events:none; }
.toast.show { transform:translate(-50%,0); opacity:1; }
.no-results { text-align:center; color:var(--muted); background:white; border:1px dashed var(--line); border-radius:20px; padding:30px; }
@media (min-width:700px) {
  main { padding:0 24px; }
  .hero { border-radius:0 0 52px 52px; padding-top:82px; }
  .stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tbd-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .day-main { grid-template-columns:76px 1fr auto; padding:18px; }
  .date-tile { min-height:72px; }
  .modal-card { left:50%; right:auto; bottom:50%; transform:translate(-50%,50%); width:min(680px,92vw); border-radius:28px; max-height:82vh; }
}
@media (min-width:1000px) {
  .day-card:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(21,61,55,.09); }
  .tbd-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media print {
  .hero-actions, .controls, .modal, .toast { display:none !important; }
  body { background:white; }
  .hero { min-height:auto; border-radius:0; padding:25px; }
  .day-details { display:block !important; }
  .day-card { break-inside:avoid; box-shadow:none; }
}


/* Live trip countdown and day-progress indicator */
.trip-status {
  width: min(680px, 100%);
  margin: 24px auto 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 22px;
  background: rgba(4, 42, 38, .30);
  box-shadow: 0 18px 50px rgba(0, 25, 22, .18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: start;
}
.trip-status-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.trip-status-copy { min-width: 0; }
.trip-status-kicker {
  display: block;
  color: #bff9ed;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trip-status-title {
  display: block;
  margin-top: 2px;
  font-size: clamp(1.15rem, 5vw, 1.65rem);
  line-height: 1.2;
}
.trip-status-subtitle,
.trip-status-preview {
  margin: 5px 0 0;
  color: rgba(255,255,255,.82);
  font-size: .88rem;
  line-height: 1.45;
}
.trip-status-preview {
  color: #fff0c7;
  font-weight: 650;
}
.trip-status-badge {
  width: 68px;
  min-height: 68px;
  padding: 8px 5px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 20px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  text-align: center;
}
.trip-status-badge strong {
  display: block;
  font-size: 1.65rem;
  line-height: 1;
}
.trip-status-badge span {
  margin-top: 3px;
  color: rgba(255,255,255,.75);
  font-size: .7rem;
  font-weight: 750;
}
.trip-progress-track {
  height: 9px;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.trip-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe082, #ffb86b, #afffe8);
  box-shadow: 0 0 16px rgba(255,224,130,.38);
  transition: width .55s ease;
}
.trip-status-bottom {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.trip-progress-label {
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  font-weight: 700;
}
.trip-status-action {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,.13);
  color: #fff;
  font-weight: 800;
  font-size: .8rem;
}
.trip-status-action:active { transform: scale(.97); }
.trip-status.status-during {
  background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(0,57,50,.40));
}
.trip-status.status-after .trip-progress-bar { background: linear-gradient(90deg, #b7ffd7, #ffe394); }

.today-pill {
  display: inline-flex;
  margin-inline-start: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: .68rem;
  vertical-align: middle;
}
.day-card.current-day {
  border: 2px solid var(--primary);
  box-shadow: 0 14px 36px rgba(15,118,110,.18);
}
.day-card.current-day .date-tile {
  background: var(--primary);
}
.day-card.current-day .date-number,
.day-card.current-day .date-month {
  color: #fff;
}
.day-card.status-focus {
  animation: statusFocus 1.1s ease 1;
}
.calendar-cell.current-day {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  background: #d8f5ee;
}
@keyframes statusFocus {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.018); box-shadow: 0 0 0 8px rgba(15,118,110,.12); }
}
@media (max-width: 430px) {
  .trip-status { padding: 14px; border-radius: 19px; }
  .trip-status-badge { width: 60px; min-height: 60px; border-radius: 17px; }
  .trip-status-badge strong { font-size: 1.45rem; }
  .trip-status-bottom { align-items: flex-start; }
}
@media print {
  .trip-status-action { display: none !important; }
}

/* Secret arcade Easter eggs */
#tripName { cursor: default; user-select: none; -webkit-user-select: none; }
.arcade-modal { position: fixed; inset: 0; z-index: 300; display: none; }
.arcade-modal.open { display: block; }
.arcade-backdrop { position: absolute; inset: 0; background: rgba(12, 16, 35, .82); backdrop-filter: blur(10px); }
.arcade-panel {
  position: absolute; inset: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  max-width: 760px; margin: auto; overflow: auto; border-radius: 28px; padding: 20px;
  background: radial-gradient(circle at 15% 10%, rgba(255,255,255,.22), transparent 22%), linear-gradient(145deg, #37205d, #162a58 55%, #103a47);
  color: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.45); overscroll-behavior: contain;
}
.arcade-close { position: sticky; top: 0; z-index: 12; float: inline-end; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 1.7rem; backdrop-filter: blur(10px); }
.arcade-heading { text-align: center; padding: 26px 8px 12px; clear: both; }
.arcade-heading h2 { font-size: clamp(2rem, 8vw, 3.5rem); margin: 8px 0; }
.arcade-heading p, .game-help { color: rgba(255,255,255,.78); }
.arcade-secret { display: inline-block; padding: 6px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; letter-spacing: .13em; font-size: .72rem; }
.arcade-secondary { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.1); color: #fff; border-radius: 13px; padding: 10px 12px; font-weight: 800; }
.game-topbar { clear: both; display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.game-topbar h2 { margin: 0; font-size: 1.35rem; }
.game-help { margin: 5px 0 14px; }
.game-hud { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; margin-bottom: 10px; }
.game-hud span { background: rgba(255,255,255,.12); border-radius: 999px; padding: 7px 10px; font-size: .82rem; }
.tap-arena, .candy-arena { position: relative; height: min(62vh, 480px); min-height: 360px; border-radius: 24px; overflow: hidden; touch-action: manipulation; user-select: none; background: linear-gradient(#82d9ff, #dff7ff 68%, #6bc78e 69%, #2f8e66); border: 2px solid rgba(255,255,255,.24); }
.arena-cloud { position: absolute; opacity: .7; font-size: 2.5rem; animation: cloudFloat 9s linear infinite alternate; }
.cloud-a { top: 8%; left: 8%; } .cloud-b { top: 25%; right: 12%; animation-delay: -4s; }
.airport-floor { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 2.2rem; }
.falling-item { position: absolute; top: -70px; border: 0; background: transparent; font-size: 3.2rem; filter: drop-shadow(0 8px 5px rgba(0,0,0,.2)); animation: suitcaseFall linear forwards; touch-action: manipulation; }
.falling-item.caught { animation: caughtPop .18s ease forwards; }
.memory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; perspective: 900px; }
.memory-card { position: relative; aspect-ratio: 1; border: 0; border-radius: 18px; background: transparent; transform-style: preserve-3d; transition: transform .42s ease; }
.memory-card.flipped, .memory-card.matched { transform: rotateY(180deg); }
.memory-card.matched { filter: drop-shadow(0 0 10px #ffe56e); }
.card-front, .card-back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; backface-visibility: hidden; }
.card-back { background: linear-gradient(145deg, #ff6f91, #ff9671); font-size: 2rem; color: #fff; }
.card-front { background: #fff; color: #222; transform: rotateY(180deg); font-size: clamp(2rem, 11vw, 4rem); }
.quiz-progress { height: 9px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.quiz-progress span { display: block; height: 100%; background: linear-gradient(90deg, #ffe66d, #ff7eb6); transition: width .25s ease; }
.quiz-count { text-align: end; color: rgba(255,255,255,.65); margin-top: 7px; }
.quiz-question { font-size: 1.35rem; line-height: 1.4; margin: 22px 0 14px; }
.quiz-options { display: grid; gap: 10px; }
.quiz-option { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; padding: 14px; border-radius: 16px; text-align: start; font-weight: 700; }
.quiz-option.correct { background: rgba(57, 213, 126, .35); border-color: #5cff9a; }
.quiz-option.wrong { background: rgba(255, 83, 112, .35); border-color: #ff6c82; }
.quiz-feedback { min-height: 30px; padding: 10px 0 0; font-weight: 900; }
.quiz-feedback.good { color: #7dffb6; } .quiz-feedback.bad { color: #ff96a8; }
.quiz-next { width: 100%; margin-top: 10px; }
.candy-arena { background: radial-gradient(circle at 50% 110%, #ff88d7, transparent 52%), linear-gradient(160deg, #32165c, #151b4c 55%, #0c4261); }
.candy-background-stars { position: absolute; inset: 0; opacity: .22; display: grid; place-items: center; font-size: 3rem; animation: starsPulse 2.5s ease-in-out infinite alternate; }
.candy-item { position: absolute; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 2.4rem; background: radial-gradient(circle at 35% 25%, #fff, rgba(255,255,255,.34) 28%, rgba(255,255,255,.08) 64%); box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.22); animation: candyBounce ease-in-out infinite alternate; touch-action: manipulation; }
.candy-item.bomb { background: radial-gradient(circle at 35% 25%, #777, #252525 58%, #050505); }
.candy-item.popped { transform: scale(1.8) rotate(18deg); opacity: 0; transition: .12s ease; }
.candy-particle { position: absolute; pointer-events: none; z-index: 8; animation: particleBurst .58s ease-out forwards; }
.arena-shake { animation: arenaShake .3s ease; }
.game-result { text-align: center; padding: 50px 12px 30px; }
.result-confetti { font-size: 2.2rem; letter-spacing: .12em; animation: resultBounce .8s ease infinite alternate; }
.game-result h2 { font-size: 2.2rem; margin: 18px 0 6px; }
.result-score { display: block; font-size: 4.5rem; line-height: 1; color: #ffe66d; margin: 14px 0; }
.result-best { color: rgba(255,255,255,.75); }
.result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@keyframes suitcaseFall { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(570px) rotate(14deg); } }
@keyframes caughtPop { to { transform: scale(1.8) rotate(25deg); opacity: 0; } }
@keyframes cloudFloat { to { transform: translateX(45px); } }
@keyframes candyBounce { from { transform: scale(.92) rotate(-8deg); } to { transform: scale(1.1) rotate(8deg); } }
@keyframes starsPulse { to { opacity: .44; transform: scale(1.08); } }
@keyframes particleBurst { to { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(180deg); opacity: 0; } }
@keyframes arenaShake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-5px); } }
@keyframes resultBounce { to { transform: translateY(-8px) rotate(2deg); } }
@media (min-width: 620px) {
  .memory-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .falling-item, .candy-item, .candy-background-stars, .result-confetti, .arena-cloud { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Challenge Easter egg game upgrades */
.solo-game-topbar { display:grid; justify-items:center; text-align:center; gap:8px; padding:26px 8px 4px; }
.solo-game-topbar h2 { font-size:clamp(1.65rem,7vw,2.7rem); }
.falling-item.bird { filter:drop-shadow(0 8px 5px rgba(130,20,20,.3)); }
.falling-item.gold { filter:drop-shadow(0 0 13px rgba(255,226,74,.9)); }
.memory-grid-hard { grid-template-columns:repeat(4,1fr); gap:7px; }
.memory-grid-hard .memory-card { border-radius:14px; }
.memory-grid-hard .card-front, .memory-grid-hard .card-back { border-radius:14px; }
.memory-card.preview { filter:drop-shadow(0 0 8px rgba(255,255,255,.5)); }
.candy-target-banner { display:flex; align-items:center; justify-content:center; gap:10px; width:max-content; max-width:100%; margin:0 auto 10px; padding:8px 15px; border-radius:999px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.23); font-weight:900; }
.candy-target-banner strong { font-size:1.9rem; line-height:1; }
.target-pulse { animation:targetPulse .3s ease; }
@keyframes targetPulse { 50% { transform:scale(1.5) rotate(10deg); } }
@media (max-width:380px) {
  .memory-grid-hard { gap:5px; }
  .memory-grid-hard .card-front { font-size:1.75rem; }
  .memory-grid-hard .card-back { font-size:1.45rem; }
}

.surprise-game-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.45rem auto 0.15rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: clamp(0.82rem, 2.8vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
}


/* Accessible bilingual language selector */
.hero-topbar {
  position: absolute;
  z-index: 10;
  inset-block-start: max(14px, env(safe-area-inset-top));
  inset-inline: 16px;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.language-switch {
  pointer-events: auto;
  display: inline-grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 18px;
  background: rgba(4, 43, 39, .52);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  direction: ltr;
}
.language-switch-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  opacity: .9;
}
.language-button {
  position: relative;
  min-width: 82px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 13px;
  padding: 8px 10px;
  color: rgba(255,255,255,.78);
  background: transparent;
  font-weight: 750;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.language-button:hover { background: rgba(255,255,255,.10); color: #fff; }
.language-button:active { transform: scale(.96); }
.language-button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.language-button.active {
  color: #083f3a;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.language-native { line-height: 1; white-space: nowrap; }
.language-code {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  height: 22px;
  padding-inline: 5px;
  border-radius: 7px;
  background: rgba(255,255,255,.12);
  font-family: "Inter", system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.language-button.active .language-code { background: #e3f3ef; color: var(--primary-dark); }
body[data-lang="en"] { font-family: "Inter", system-ui, sans-serif; }
body[data-lang="he"] { font-family: "Heebo", system-ui, sans-serif; }
html[dir="ltr"] .collapsible-heading,
html[dir="ltr"] .day-main,
html[dir="ltr"] .calendar-cell { text-align: left; }
html[dir="ltr"] .modal-close { float: right; }
html[dir="ltr"] .calendar-emoji { left: auto; right: 5px; }
html[dir="ltr"] .calendar-dot { right: auto; left: 7px; }
@media (max-width: 480px) {
  .hero { padding-top: 88px; }
  .hero-topbar { inset-inline: 10px; justify-content: center; }
  .language-switch { width: min(100%, 340px); grid-template-columns: 30px 1fr 1fr; }
  .language-button { min-width: 0; padding-inline: 8px; }
  .language-code { display: none; }
}


/* Clearly collapsible unscheduled section */
.tbd-heading-copy {
  min-width: 0;
  text-align: start;
}
.tbd-heading-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.collapse-chevron {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eef6f3;
  color: var(--primary-dark);
  font-size: 1.25rem;
  font-weight: 900;
  transition: transform .2s ease, background .2s ease;
}
.tbd-panel:not(.is-collapsed) .collapse-chevron {
  transform: rotate(180deg);
  background: #dff1ec;
}
.collapsible-heading:hover .collapse-chevron {
  background: #dff1ec;
}
.collapsible-heading:focus-visible {
  outline: 3px solid rgba(15,118,110,.25);
  outline-offset: -3px;
  border-radius: var(--radius);
}
.tbd-collapse {
  overflow: hidden;
}


/* Search-triggered people photo surprise */
.people-popup {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.people-popup.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.people-popup-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 218, 121, .22), transparent 34%),
    rgba(2, 26, 24, .76);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}
.people-popup-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 430px);
  max-height: min(92dvh, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 28px;
  background: #fffdf7;
  box-shadow: 0 28px 80px rgba(0, 20, 18, .35);
  transform: translateY(18px) scale(.96);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.people-popup.open .people-popup-card {
  transform: translateY(0) scale(1);
}
.people-popup-close {
  position: absolute;
  z-index: 3;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(4, 42, 38, .64);
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
}
.people-popup-close:focus-visible {
  outline: 3px solid #ffe08a;
  outline-offset: 2px;
}
.people-popup-image-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(62dvh, 62vh, 520px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0b3d38;
}
.people-popup-image-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(transparent, rgba(3, 43, 39, .46));
  pointer-events: none;
}
.people-popup-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #0b3d38;
}
.people-popup-sparkle {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.2));
  animation: peopleSparkle 2.2s ease-in-out infinite;
}
.people-popup-sparkle.sparkle-a {
  inset-inline-start: 18px;
  inset-block-start: 18px;
  font-size: 2rem;
}
.people-popup-sparkle.sparkle-b {
  inset-inline-end: 24px;
  inset-block-end: 18px;
  font-size: 1.65rem;
  animation-delay: .55s;
}
.people-popup-copy {
  flex: 0 0 auto;
  padding: 22px 24px 26px;
  text-align: center;
}
.people-popup-eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: var(--primary);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.people-popup-copy h2 {
  margin: 0;
  color: #173d39;
  font-size: clamp(1.45rem, 7vw, 2.15rem);
  line-height: 1.14;
}
.people-popup-copy p {
  margin: 8px 0 0;
  color: #6a5144;
  font-size: 1.05rem;
  font-weight: 800;
}
@keyframes peopleSparkle {
  0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); }
  50% { transform: translateY(-7px) rotate(7deg) scale(1.08); }
}
@media (max-width: 420px) {
  .people-popup { padding: 10px; }
  .people-popup-card { width: min(96vw, 410px); max-height: min(94dvh, 94vh); border-radius: 23px; }
  .people-popup-image-wrap { max-height: min(58dvh, 58vh); }
  .people-popup-copy { padding: 16px 18px 20px; }
}
@media (max-height: 560px) {
  .people-popup-card { max-height: min(96dvh, 96vh); }
  .people-popup-image-wrap {
    max-height: min(48dvh, 48vh);
    aspect-ratio: auto;
    height: min(48dvh, 48vh);
  }
  .people-popup-copy { padding: 12px 16px 14px; }
  .people-popup-copy h2 { font-size: clamp(1.15rem, 5vh, 1.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .people-popup,
  .people-popup-card,
  .people-popup-sparkle {
    transition: none;
    animation: none;
  }
}
@media print {
  .people-popup { display: none !important; }
}