* { box-sizing: border-box; }

    @keyframes popIn {
      0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
      100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    }

    body {
      font-family: Arial, sans-serif;
      background: #07111f;
      color: #fff;
      margin: 0;
      padding: 16px;
      overflow-x: hidden;
    }

    .container {
      max-width: 1100px;
      margin: auto;
      width: 100%;
    }

    h1 {
      text-align: center;
      font-size: 40px;
      margin: 10px 0 5px;
    }

    .subtitle {
      text-align: center;
      color: #38bdf8;
      font-size: 18px;
      margin-bottom: 25px;
    }

    h2 {
      margin-top: 30px;
      color: #facc15;
    }

    h3 { margin-top: 0; }

    .stats,
    .missions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 15px;
      width: 100%;
    }

    .card,
    .mission {
      background: #111827;
      border: 2px solid #1f2937;
      border-radius: 16px;
      padding: 18px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.25);
      width: 100%;
    }

    .mission {
      background: #0f172a;
      border-color: #334155;
    }

    .category-card {
      grid-column: 1 / -1;
    }

    .stat-number {
      font-size: 34px;
      font-weight: bold;
      margin-top: 5px;
    }

    .xp { color: #60a5fa; }
    .bucks { color: #22c55e; }
    .streak { color: #facc15; }
    .level { color: #c084fc; }

    .badge {
      margin-top: 12px;
      display: inline-block;
      padding: 12px 18px;
      border-radius: 18px;
      background: linear-gradient(135deg,#1e3a8a,#2563eb);
      border: 3px solid #facc15;
      font-size: 18px;
      font-weight: bold;
      color: white;
      box-shadow: 0 0 15px rgba(250,204,21,0.5);
      min-width: 150px;
      text-align: center;
    }

    .progress-bar {
      width: 100%;
      background: #374151;
      border-radius: 999px;
      height: 20px;
      margin-top: 10px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #2563eb, #22c55e);
      width: 0%;
      transition: width 0.3s;
    }

    button {
      border: none;
      border-radius: 10px;
      padding: 12px 14px;
      margin-top: 10px;
      cursor: pointer;
      font-weight: bold;
      font-size: 15px;
      min-height: 44px;
      touch-action: manipulation;
    }

    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .complete-btn {
      background: #22c55e;
      color: #052e16;
      width: 100%;
    }

    .shop-btn {
      background: #facc15;
      color: #422006;
      width: 100%;
    }

    .danger-btn {
      background: #ef4444;
      color: white;
    }

    .secondary-btn {
      background: #334155;
      color: white;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 25px;
    }

    input {
      padding: 12px;
      border-radius: 10px;
      border: 1px solid #475569;
      background: #020617;
      color: white;
      width: 100%;
      margin-top: 6px;
      font-size: 16px;
    }

    .log {
      background: #020617;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 15px;
      max-height: 240px;
      overflow-y: auto;
      color: #cbd5e1;
    }

    .log-item {
      border-bottom: 1px solid #1e293b;
      padding: 8px 0;
    }

    .small {
      font-size: 13px;
      color: #94a3b8;
    }

    .locked {
      opacity: 0.6;
      border: 2px dashed #a855f7;
    }

    #levelUpPopup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #111827;
      border: 4px solid #facc15;
      border-radius: 24px;
      padding: 24px;
      z-index: 9999;
      text-align: center;
      box-shadow: 0 0 40px rgba(250,204,21,0.6);
      width: min(92vw, 420px);
      max-height: 90vh;
      overflow-y: auto;
    }

    @media (max-width: 600px) {
      body { padding: 12px; }
      h1 { font-size: 32px; line-height: 1.1; }
      .subtitle { font-size: 15px; }
      .stats, .missions { grid-template-columns: 1fr; gap: 12px; }
      .card, .mission { padding: 14px; border-radius: 14px; }
      .stat-number { font-size: 28px; }
      .badge { font-size: 16px; min-width: 0; width: 100%; }
      .actions { flex-direction: column; }
      .actions button { width: 100%; }
      #levelUpPopup { padding: 20px; }
    }


/* Tabs prototype */
.app-tabs {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 8px;
  padding: 10px 0 12px;
  margin: 8px 0 16px;
  background: linear-gradient(180deg, #07111f 72%, rgba(7,17,31,0));
  overflow-x: auto;
  scrollbar-width: none;
}
.app-tabs::-webkit-scrollbar { display: none; }
.app-tab {
  margin: 0;
  white-space: nowrap;
  background: #111827;
  color: #cbd5e1;
  border: 1px solid #334155;
  min-height: 42px;
  padding: 10px 13px;
  box-shadow: none;
}
.app-tab.active {
  background: #facc15;
  color: #422006;
  border-color: #fde68a;
}
.app-screen { display: none; }
.app-screen.active { display: block; }
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.quick-actions button { margin-top: 0; }
#todayDailyPreview { margin-top: 12px; }
#todayDailyPreview .mission {
  border-color: #facc15;
  background: linear-gradient(180deg, #0f172a, #111827);
}
@media (max-width: 600px) {
  .app-tabs {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .app-tab { font-size: 14px; padding: 10px 12px; }
  .quick-actions { flex-direction: column; }
  .quick-actions button { width: 100%; }
}


/* Tabs prototype v2 unlocks */
.today-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 16px 0 14px;
}

.primary-action {
  background: linear-gradient(135deg, #facc15, #fb923c);
  color: #422006;
  border: 0;
}

.daily-unlock-panel {
  margin: 14px 0 6px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(15, 23, 42, .75);
  border: 1px solid rgba(250, 204, 21, .28);
}

.unlock-row {
  margin-bottom: 10px;
  color: #fde68a;
}

.unlock-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.unlock-pill {
  padding: 8px 10px;
  border-radius: 999px;
  background: #111827;
  color: #cbd5e1;
  border: 1px solid #334155;
  font-weight: 800;
  font-size: .9rem;
}

.unlock-pill.open {
  background: rgba(34, 197, 94, .15);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, .45);
}

.mission-subtabs {
  position: sticky;
  top: 64px;
  z-index: 40;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 12px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #07111f 72%, rgba(7,17,31,0));
  scrollbar-width: none;
}

.mission-subtabs::-webkit-scrollbar {
  display: none;
}

.mission-subtab {
  margin: 0;
  padding: 9px 12px;
  min-height: 40px;
  white-space: nowrap;
  background: #0f172a;
  color: #cbd5e1;
  border: 1px solid #334155;
  box-shadow: none;
}

.mission-subtab.active {
  background: #38bdf8;
  color: #082f49;
  border-color: #7dd3fc;
}

.mission-hidden {
  display: none !important;
}

.soft-lock-message {
  padding: 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, .18), transparent 32%),
    rgba(15, 23, 42, .88);
  border: 1px solid rgba(148, 163, 184, .35);
}

.success-card {
  border-color: rgba(34, 197, 94, .5) !important;
  background: rgba(22, 101, 52, .22) !important;
}

@media (max-width: 600px) {
  .mission-subtabs {
    top: 58px;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .mission-subtab {
    font-size: 13px;
    padding: 9px 11px;
  }
}

.boss-card{
margin-bottom:18px;
padding:18px;
border-radius:22px;
background:linear-gradient(180deg,#111827,#0f172a);
border:1px solid rgba(250,204,21,.35);
}
.boss-question{
font-size:1.1rem;
line-height:1.5;
}
.boss-choice{
display:flex;
gap:10px;
margin:14px 0;
}
.boss-btn{margin:0}
.hidden{display:none}
.medal{
padding:14px;
margin-top:10px;
border-radius:18px;
}
.medal span{
display:block;
margin-top:8px;
font-weight:800;
}
.bronze{background:rgba(180,83,9,.18)}
.silver{background:rgba(148,163,184,.18)}
.gold{background:rgba(250,204,21,.16)}


.medal strong{
display:block;
margin-bottom:8px;
}

.medal-sub{
opacity:.88;
line-height:1.5;
margin-bottom:10px;
font-size:.95rem;
}

.flush-card{
padding:20px;
border-radius:24px;
background:linear-gradient(180deg,rgba(14,165,233,.12),rgba(15,23,42,.9));
border:1px solid rgba(125,211,252,.3);
}
.flush-grid{
display:grid;
gap:10px;
margin-bottom:20px;
}
.flush-grid label{
display:flex;
gap:10px;
padding:12px;
border-radius:16px;
background:rgba(15,23,42,.55);
}
.flush-save{
width:100%;
}
.flush-footer{
text-align:center;
margin-top:16px;
opacity:.8;
font-style:italic;
}


.badge-board{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:14px;
margin-top:16px;
}

.badge-card{
padding:16px;
border-radius:20px;
background:rgba(15,23,42,.78);
border:1px solid rgba(148,163,184,.28);
text-align:center;
}

.badge-card.unlocked{
border-color:rgba(250,204,21,.55);
box-shadow:0 0 30px rgba(250,204,21,.12);
}

.badge-card.locked{
opacity:.62;
}

.badge-icon{
font-size:2.4rem;
margin-bottom:8px;
}

.badge-card h3{
margin:6px 0;
}

.badge-card p{
font-size:.9rem;
opacity:.85;
}

#passScreen h2::after{
content:"  · toestemming om door te gaan";
font-size:.85rem;
opacity:.65;
font-weight:500;
}

.roll-sub{opacity:.8}
.level-card{
padding:14px;
margin:10px 0;
border-radius:18px;
background:rgba(15,23,42,.75);
}
.level-card.unlocked{
border:1px solid gold;
}
.badge-mini{
display:grid;
gap:8px;
}
.badge-mini div{
padding:10px;
background:rgba(15,23,42,.6);
border-radius:14px;
}
.hallpass{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.hall-card{
padding:18px;
border-radius:18px;
}
.free{background:rgba(100,116,139,.2)}
.premium{
background:rgba(250,204,21,.14);
border:1px solid rgba(250,204,21,.4)
}


/* Phase 1.3 clean layout fixes */
.roll-sub{opacity:.8;margin-bottom:14px}
.level-list{display:grid;gap:10px;margin:12px 0 18px}
.level-card{
  padding:14px;
  border-radius:18px;
  background:rgba(15,23,42,.75);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.level-card.unlocked{border:1px solid gold}
.level-card span{opacity:.72;font-size:.9rem}
.badge-mini{display:grid;gap:8px}
.badge-mini div{
  padding:10px;
  background:rgba(15,23,42,.6);
  border-radius:14px;
}
.hallpass{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:14px 0;
}
.hall-card{
  padding:18px;
  border-radius:18px;
}
.free{background:rgba(100,116,139,.2)}
.premium{
  background:rgba(250,204,21,.14);
  border:1px solid rgba(250,204,21,.4)
}
@media(max-width:700px){
  .hallpass{grid-template-columns:1fr}
  .level-card{align-items:flex-start;flex-direction:column}
}


/* Phase 1.4 Daily Flush + Weekmoment cleanup */
.weekmoment-card {
  margin-top: 22px;
  padding: 20px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(250, 204, 21, .16), transparent 36%),
    rgba(15,23,42,.82);
  border: 1px solid rgba(250,204,21,.28);
}

.flush-summary {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
  display: none;
}

.flush-summary:not(:empty) {
  display: block;
}

#missions .boss-card,
#missions .week-boss-check,
#missions #fridayBossHost {
  display: none !important;
}

.standalone-weekmoment {
  margin-top: 12px;
}

.medal {
  width: 100%;
  text-align: left;
  border: 0;
  display: block;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}

.medal:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.medal.claimed {
  opacity: .7;
  cursor: default;
}

.claimed-text {
  margin-top: 10px;
  font-weight: 900;
  color: #bbf7d0;
}


.hallpass{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-top:14px;
}

.hall-card{
padding:20px;
border-radius:22px;
}

.quest{
background:linear-gradient(180deg,rgba(34,197,94,.14),rgba(15,23,42,.92));
border:1px solid rgba(34,197,94,.35);
}

.questplus{
background:linear-gradient(180deg,rgba(168,85,247,.16),rgba(15,23,42,.92));
border:1px solid rgba(168,85,247,.35);
}

.lock{
margin:18px 0;
opacity:.8;
}

.hall-card button{
width:100%;
}

.hall-footer{
margin-top:18px;
text-align:center;
opacity:.8;
font-style:italic;
}

@media(max-width:700px){
.hallpass{
grid-template-columns:1fr;
}
}

/* Safe Daily Flush fix */
.flush-card, .weekmoment-card {
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(14,165,233,.10), rgba(15,23,42,.88));
  border: 1px solid rgba(125,211,252,.28);
  margin-top: 16px;
}
.weekmoment-card {
  background: linear-gradient(180deg, rgba(250,204,21,.12), rgba(15,23,42,.9));
  border-color: rgba(250,204,21,.28);
}
.flush-grid {
  display: grid;
  gap: 10px;
  margin: 12px 0 22px;
}
.flush-grid label {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(15,23,42,.55);
}
.flush-save { width: 100%; }
.flush-result {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
  display: none;
}
.flush-result:not(:empty){ display:block; }
.medal {
  width: 100%;
  text-align: left;
  border: 0;
  display: block;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}
.medal.claimed { opacity: .72; cursor: default; }
.claimed-text { margin-top:10px; font-weight:900; color:#bbf7d0; }


/* Phase 1.9 Daily Flush polish */
#dailyFlushScreen {
  padding-bottom: 110px;
}

.flush-hero {
  margin: 4px 0 16px;
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, .28), transparent 36%),
    linear-gradient(135deg, rgba(14,165,233,.20), rgba(15,23,42,.92));
  border: 1px solid rgba(125, 211, 252, .30);
  box-shadow: 0 18px 50px rgba(0,0,0,.20);
}

.flush-hero .eyebrow {
  font-weight: 950;
  color: #bae6fd;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.flush-hero h2 {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 3rem);
}

.flush-hero p {
  margin: 8px 0 0;
  color: #dbeafe;
}

.nice-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.88), rgba(17,24,39,.96));
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 14px 42px rgba(0,0,0,.18);
}

.section-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.section-heading > span {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  font-size: 1.45rem;
  flex: 0 0 auto;
}

.section-heading h3 {
  margin: 0;
}

.section-heading p {
  margin: 4px 0 0;
  color: #cbd5e1;
  font-size: .95rem;
}

.flush-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
}

.flush-grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(2, 6, 23, .38);
  border: 1px solid rgba(148, 163, 184, .16);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.flush-grid label:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, .38);
  background: rgba(14, 165, 233, .12);
}

.flush-grid input {
  width: 18px;
  height: 18px;
  accent-color: #38bdf8;
}

.help-grid input {
  accent-color: #facc15;
}

.flush-save {
  width: 100%;
  margin-top: 18px;
  min-height: 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, #38bdf8, #facc15);
  color: #082f49;
  font-weight: 950;
}

.flush-result {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
  display: none;
}

.flush-result:not(:empty) {
  display: block;
}

.weekmoment-card {
  background:
    radial-gradient(circle at top left, rgba(250, 204, 21, .18), transparent 32%),
    linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.96));
  border-color: rgba(250,204,21,.28);
}

.weekmoment-card:empty {
  display: none;
}

.boss-card {
  margin-top: 10px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(15, 23, 42, .72);
  border: 1px solid rgba(250, 204, 21, .22);
}

.boss-question {
  line-height: 1.55;
  color: #f8fafc;
}

.boss-choice {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.boss-choice button {
  margin: 0;
  flex: 1;
  min-width: 140px;
}

.mission-subtab[data-mission-tab="week"] {
  display: none !important;
}

@media (max-width: 700px) {
  .flush-grid {
    grid-template-columns: 1fr;
  }

  .flush-hero,
  .nice-card {
    border-radius: 22px;
    padding: 16px;
  }
}


/* Phase 1.13 safe Daily Flush reward */
#dailyFlushCompleteMount {
  margin-top: 16px;
}

.flush-complete-card {
  margin: 16px 0;
  padding: 22px;
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(56,189,248,.28), transparent 35%),
    linear-gradient(180deg, rgba(22,101,52,.32), rgba(15,23,42,.94));
  border: 1px solid rgba(34,197,94,.42);
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
}

.flush-complete-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(56,189,248,.20);
  font-size: 2rem;
}

.flush-reward {
  margin: 10px 0 14px;
  font-size: 1.25rem;
  font-weight: 950;
  color: #fde68a;
}

.flush-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
}

.flush-chip {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  font-size: .9rem;
}

.flush-reward-popup {
  position: fixed;
  z-index: 99999;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
  padding: 18px 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, #38bdf8, #facc15);
  color: #082f49;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}


/* Phase 2 Dashboard + Sticky Stats */
.sticky-stats {
  position: sticky;
  top: 58px;
  z-index: 45;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 12px;
  margin-top: -6px;
  background: linear-gradient(180deg, #07111f 72%, rgba(7,17,31,0));
  scrollbar-width: none;
}

.sticky-stats::-webkit-scrollbar {
  display: none;
}

.sticky-pill {
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(148,163,184,.24);
  color: #e2e8f0;
  font-size: .9rem;
  font-weight: 900;
}

.dashboard-hero {
  margin: 4px 0 16px;
  padding: 22px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.30), transparent 35%),
    radial-gradient(circle at bottom right, rgba(250,204,21,.20), transparent 32%),
    linear-gradient(135deg, rgba(14,165,233,.20), rgba(15,23,42,.94));
  border: 1px solid rgba(125,211,252,.30);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}

.dash-eyebrow {
  font-weight: 950;
  color: #bae6fd;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.dashboard-hero h2 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
}

.dashboard-hero p {
  color: #dbeafe;
  margin: 10px 0 0;
}

.dash-orb {
  width: 92px;
  height: 92px;
  border-radius: 32px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #38bdf8, #facc15);
  color: #082f49;
  box-shadow: 0 20px 55px rgba(0,0,0,.24);
  flex: 0 0 auto;
}

.dash-orb span {
  font-size: 2.6rem;
  font-weight: 1000;
  line-height: .8;
}

.dash-orb small {
  margin-top: -20px;
  font-weight: 950;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.dash-card {
  padding: 18px;
  border-radius: 24px;
  background: rgba(15,23,42,.78);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 12px 38px rgba(0,0,0,.15);
}

.dash-label {
  color: #cbd5e1;
  font-weight: 900;
  font-size: .92rem;
  margin-bottom: 8px;
}

.dash-big {
  font-size: clamp(1.35rem, 4vw, 2rem);
  font-weight: 1000;
  color: #f8fafc;
  margin-bottom: 8px;
}

.dash-small {
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.35;
}

.dash-progress {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  margin: 10px 0;
}

#dashXpFill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #facc15);
  transition: width .45s ease;
}

.dash-link {
  margin-top: 12px;
  width: 100%;
  border-radius: 16px;
  min-height: 44px;
}

.xp-card {
  border-color: rgba(56,189,248,.28);
}

.bucks-card {
  border-color: rgba(250,204,21,.30);
}

.badge-card-preview {
  border-color: rgba(251,146,60,.26);
}

.flush-card-preview {
  border-color: rgba(14,165,233,.28);
}

.hall-card-preview {
  border-color: rgba(168,85,247,.28);
}

/* Hide duplicated old homepage content but keep it in DOM for old scripts */
#todayScreen > .stats,
#todayScreen > .card,
#todayScreen > h2,
#todayScreen > p.small,
#todayScreen > #todayDailyPreview,
#todayScreen > .today-actions,
#todayScreen > .daily-unlock-panel,
#todayScreen > .quick-actions {
  display: none !important;
}

@media (max-width: 760px) {
  .sticky-stats {
    top: 54px;
  }

  .dashboard-hero {
    align-items: stretch;
  }

  .dash-orb {
    width: 78px;
    height: 78px;
    border-radius: 26px;
  }

  .dash-grid {
    grid-template-columns: 1fr;
  }
}

.stable-control-panel {
  margin: 16px 0;
  padding: 18px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, rgba(56,189,248,.18), transparent 34%), rgba(15,23,42,.82);
  border: 1px solid rgba(125,211,252,.25);
}
.stable-control-panel h3 { margin-top: 0; }
.stable-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.stable-control-grid button {
  margin: 0;
  min-height: 48px;
  border-radius: 16px;
}
.fix-toast {
  position: fixed;
  z-index: 99999;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  padding: 15px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #facc15);
  color: #082f49;
  font-weight: 950;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}


/* Phase 2.0.2 cleanup */
#stableControlPanel{
margin-bottom:22px;
}

#stableControlPanel h3{
display:flex;
align-items:center;
gap:8px;
}

#stableControlPanel .small{
opacity:.82;
}

#stableControlPanel button{
font-weight:900;
}



.manual-log{

margin-top:18px;

display:grid;

gap:8px;

}

.manual-log-line{

padding:12px;

border-radius:16px;

background:
rgba(
15,
23,
42,
.72
);

border:

1px solid

rgba(
148,
163,
184,
.18
);

}

.current{

outline:

3px solid

rgba(
250,
204,
21,
.8
);

transform:
scale(
1.04
);

}

.locked{

opacity:
.45;

filter:
grayscale(
1
);

}



/* Phase 2.0.5 Roll of Fame sync */
.roll-current-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(250,204,21,.22), transparent 34%),
    linear-gradient(135deg, rgba(30,41,59,.92), rgba(15,23,42,.96));
  border: 1px solid rgba(250,204,21,.36);
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
  margin: 14px 0 18px;
}

.roll-current-icon {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  background: rgba(255,255,255,.10);
  flex: 0 0 auto;
}

.roll-kicker {
  color: #fde68a;
  font-weight: 950;
  font-size: .9rem;
}

.roll-current-card h3 {
  margin: 4px 0;
}

.roll-current-card p {
  margin: 0 0 10px;
  color: #cbd5e1;
}

.roll-progress {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
}

.roll-progress div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #facc15);
}

.roll-level-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 22px;
}

.roll-level-card {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(148,163,184,.20);
}

.roll-level-card.unlocked {
  border-color: rgba(34,197,94,.38);
}

.roll-level-card.current {
  border-color: rgba(250,204,21,.75);
  box-shadow: 0 0 0 2px rgba(250,204,21,.16), 0 14px 38px rgba(0,0,0,.20);
}

.roll-level-card.locked {
  opacity: .48;
  filter: grayscale(.8);
}

.roll-level-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  font-size: 1.5rem;
}

.roll-level-main {
  display: grid;
  gap: 3px;
}

.roll-level-main span,
.roll-level-xp {
  color: #cbd5e1;
  font-size: .9rem;
}

.roll-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.roll-badge-card {
  padding: 14px;
  border-radius: 20px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(148,163,184,.20);
  text-align: center;
  display: grid;
  gap: 6px;
}

.roll-badge-card div {
  font-size: 2rem;
}

.roll-badge-card span {
  font-size: .88rem;
  color: #cbd5e1;
}

.roll-badge-card.locked {
  opacity: .52;
  filter: grayscale(.8);
}

.roll-badge-card.unlocked {
  border-color: rgba(250,204,21,.45);
}

@media(max-width:700px){
  .roll-current-card {
    align-items: flex-start;
  }

  .roll-level-card {
    grid-template-columns: 46px 1fr;
  }

  .roll-level-xp {
    grid-column: 2;
  }
}


/* Phase 2.1 XP animation */

.xp-pulse{

animation:
xpPulse
.8s
ease;

}

.bucks-pulse{

animation:
bucksPulse
.8s
ease;

}

@keyframes xpPulse{

0%{

transform:
scale(
1
);

}

40%{

transform:
scale(
1.18
);

background:
rgba(
56,
189,
248,
.25
);

}

100%{

transform:
scale(
1
);

}

}

@keyframes bucksPulse{

0%{

transform:
scale(
1
);

}

40%{

transform:
scale(
1.18
);

background:
rgba(
250,
204,
21,
.22
);

}

100%{

transform:
scale(
1
);

}

}

.reward-float{

position:
fixed;

top:
110px;

right:
18px;

z-index:
99999;

padding:
14px
18px;

border-radius:
20px;

font-weight:
950;

animation:
floatReward
1.4s
ease
forwards;

box-shadow:
0
18px
50px
rgba(
0,
0,
0,
.28
);

}

.reward-float.xp{

background:
linear-gradient(
135deg,
#38bdf8,
#60a5fa
);

color:
white;

}

.reward-float.bucks{

background:
linear-gradient(
135deg,
#facc15,
#fb923c
);

color:
#422006;

}

@keyframes floatReward{

0%{

opacity:
0;

transform:
translateY(
10px
);

}

20%{

opacity:
1;

transform:
translateY(
0
);

}

70%{

opacity:
1;

}

100%{

opacity:
0;

transform:
translateY(
-30px
);

}

}



/* Phase 2.2 reward floats from button */
.reward-float {
  display: none !important;
}

.button-reward-float {
  position: fixed;
  z-index: 99999;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  animation: buttonRewardFloat 1.5s ease forwards;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.30));
}

.button-reward-float span {
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: .95rem;
  white-space: nowrap;
}

.float-xp {
  background: linear-gradient(135deg, #38bdf8, #60a5fa);
  color: white;
}

.float-bucks {
  background: linear-gradient(135deg, #facc15, #fb923c);
  color: #422006;
}

@keyframes buttonRewardFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -35%) scale(.88);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -135%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -190%) scale(.96);
  }
}

@media(max-width:700px){
  .button-reward-float {
    gap: 5px;
  }

  .button-reward-float span {
    padding: 8px 10px;
    font-size: .85rem;
  }
}


/* Phase 2.2.1 robust reward float */
.reward-float,
.flush-reward-popup,
.pass-popup {
  display: none !important;
}


/* Phase 2.3 flying reward particles */
.button-reward-float,
.reward-float,
.flush-reward-popup,
.pass-popup {
  display: none !important;
}

.flying-reward-particle {
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: 1.25rem;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
  animation: flyRewardParticle 1.15s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--delay);
}

.flying-reward-particle.xp {
  color: #7dd3fc;
}

.flying-reward-particle.bucks {
  color: #facc15;
}

@keyframes flyRewardParticle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -85%) scale(1.12) rotate(12deg);
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.55) rotate(360deg);
  }
}

.button-reward-label {
  position: fixed;
  z-index: 99998;
  transform: translate(-50%, -50%);
  pointer-events: none;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(15,23,42,.90);
  color: #f8fafc;
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 950;
  font-size: .9rem;
  box-shadow: 0 14px 35px rgba(0,0,0,.30);
  animation: rewardLabelFloat 1.5s ease forwards;
}

@keyframes rewardLabelFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(.9);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -26px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -42px) scale(.96);
  }
}

@media(max-width:700px){
  .flying-reward-particle {
    width: 25px;
    height: 25px;
    font-size: 1.05rem;
  }

  .button-reward-label {
    font-size: .8rem;
    padding: 8px 10px;
  }
}




/* Phase 2.3.2 Force XP visual separation */

.flying-reward-particle.xp{
  color:#ec4899 !important;
  text-shadow:
    0 0 10px rgba(236,72,153,.85),
    0 0 24px rgba(168,85,247,.65) !important;
  filter:
    brightness(1.2)
    drop-shadow(0 0 18px rgba(236,72,153,.8)) !important;
}

.flying-reward-particle.bucks{
  color:#facc15 !important;
  text-shadow:
    0 0 10px rgba(250,204,21,.8);
}

/* XP teller echt anders */
#stickyXp{
background:
linear-gradient(
135deg,
rgba(236,72,153,.18),
rgba(168,85,247,.18)
) !important;

border:
1px solid
rgba(
236,
72,
153,
.35
) !important;

color:
#fdf4ff !important;

}

#stickyBucks{
background:
linear-gradient(
135deg,
rgba(250,204,21,.16),
rgba(251,146,60,.14)
) !important;
}

.xp-pulse{
animation:
xpPulseStrong
.9s
ease
!important;
}

@keyframes xpPulseStrong{

0%{
transform:scale(1);
}

40%{
transform:scale(1.18);
box-shadow:
0 0 34px rgba(236,72,153,.55);
}

100%{
transform:scale(1);
}

}

.button-reward-label{

background:
rgba(
15,
23,
42,
.94
)!important;

}

.button-reward-label::before{

content:
"✨";

margin-right:
8px;

color:
#ec4899;

}



/* Phase 2.3.3 actual XP star color */

.flying-reward-particle.xp{

color:
transparent
!important;

}

.xp-star-shape{

display:block;

font-size:
1.55rem;

line-height:
1;

background:
linear-gradient(
180deg,
#f9a8d4,
#ec4899 45%,
#9333ea
);

-webkit-background-clip:text;
background-clip:text;

color:
transparent;

filter:
drop-shadow(
0 0 8px rgba(236,72,153,.95)
)
drop-shadow(
0 0 22px rgba(168,85,247,.8)
);

transform:
rotate(
10deg
);

animation:
xpTwinkle
.9s
ease-in-out
infinite
alternate;

}

@keyframes xpTwinkle{

0%{

transform:
scale(
1
)
rotate(
10deg
);

}

100%{

transform:
scale(
1.15
)
rotate(
-8deg
);

}

}

/* muntjes extra goud zodat contrast groter wordt */

.flying-reward-particle.bucks{

font-size:
1.4rem;

filter:
drop-shadow(
0 0 10px rgba(250,204,21,.9)
)
drop-shadow(
0 0 20px rgba(251,146,60,.6)
)
!important;

}



/* Phase 2.3.4 sticky XP visual */

#stickyXp{
position:relative;

background:
linear-gradient(
135deg,
rgba(236,72,153,.22),
rgba(168,85,247,.18)
)
!important;

border:
1px solid
rgba(
236,
72,
153,
.55
)
!important;

color:
transparent
!important;

-webkit-background-clip:
padding-box;

overflow:hidden;

}

#stickyXp::before{

content:
"✦";

position:absolute;

left:10px;

top:50%;

transform:
translateY(-50%);

font-size:
1.05rem;

background:
linear-gradient(
180deg,
#f9a8d4,
#ec4899,
#9333ea
);

-webkit-background-clip:text;

background-clip:text;

color:
transparent;

filter:
drop-shadow(
0 0 8px rgba(236,72,153,.8)
);

}

#stickyXp{

text-shadow:
0 0 10px rgba(236,72,153,.55);

}

#stickyXp span,
#stickyXp strong,
#stickyXp div{

color:
#fdf4ff
!important;

}

/* bucks extra goud */

#stickyBucks{

background:
linear-gradient(
135deg,
rgba(250,204,21,.18),
rgba(251,146,60,.16)
)
!important;

border:
1px solid
rgba(
250,
204,
21,
.45
)
!important;

}



/* Phase 2.3.5 keep XP numbers visible */

#stickyXp{
color:#fdf4ff !important;
text-shadow:
0 0 8px rgba(236,72,153,.55),
0 0 14px rgba(168,85,247,.35) !important;

padding-left:30px !important;
}

#stickyXp *{
color:#fdf4ff !important;
-webkit-text-fill-color:#fdf4ff !important;
}

#stickyXp::before{

content:"✦";

position:absolute;

left:10px;

top:50%;

transform:translateY(-50%);

font-size:1rem;

background:
linear-gradient(
180deg,
#f9a8d4,
#ec4899,
#9333ea
);

-webkit-background-clip:text;
background-clip:text;

-webkit-text-fill-color:transparent;

color:transparent;

}



/* Phase 2.3.6 remove yellow stars and make XP fully purple */

/* verwijder oude emoji-kleur zodat alleen paarse ster zichtbaar blijft */
#stickyXp{
display:flex !important;
align-items:center;
gap:8px;
}

#stickyXp::before{
content:"✦" !important;
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;

font-size:1.15rem;

background:
linear-gradient(
180deg,
#f9a8d4 0%,
#ec4899 45%,
#9333ea 100%
) !important;

-webkit-background-clip:text !important;
background-clip:text !important;

-webkit-text-fill-color:transparent !important;

color:transparent !important;

filter:
drop-shadow(
0 0 8px rgba(236,72,153,.85)
)
drop-shadow(
0 0 18px rgba(168,85,247,.55)
);

flex:0 0 auto;
}

/* verberg gele emoji in de tekst */
#stickyXp{
font-size:0 !important;
}

#stickyXp::after{

content:
attr(data-value);

font-size:inherit;

color:
#fdf4ff !important;

text-shadow:
0 0 8px rgba(236,72,153,.45);

}

/* zorg dat tekst zichtbaar blijft */
#stickyXp,
#stickyXp *{

font-size:inherit !important;

-webkit-text-fill-color:
#fdf4ff
!important;

color:
#fdf4ff
!important;

}

/* verwijder losse gele emoji als die nog in tekst staat */
#stickyXp{
text-indent:-0.2rem;
}



/* Phase 2.3.7 only recolor existing XP icon */

/* haal extra paarse ster weg */
#stickyXp::before,
#stickyXp::after{
content:none !important;
display:none !important;
}

/* kleur ALLEEN bestaande XP emoji paars */
#stickyXp{

color:#fdf4ff !important;

}

#stickyXp *{

background:none !important;

color:#fdf4ff !important;

}

/* pak alleen de XP emoji in tekst */
#stickyXp{

text-shadow:
0 0 8px rgba(236,72,153,.35);

}

/* recolor unicode ster */
#stickyXp{
filter:
drop-shadow(
0 0 10px rgba(236,72,153,.45)
);
}



/* Phase 2.3.8 replace yellow XP emoji with purple drawn sparkle */
#stickyXp.purple-xp-icon{
  position:relative;
  padding-left:32px !important;
  color:#fdf4ff !important;
  background:
    linear-gradient(135deg, rgba(236,72,153,.22), rgba(168,85,247,.18))
    !important;
  border:1px solid rgba(236,72,153,.50) !important;
  text-shadow:0 0 8px rgba(236,72,153,.35) !important;
}

#stickyXp.purple-xp-icon::before{
  content:"✦" !important;
  position:absolute !important;
  display:block !important;
  left:11px !important;
  top:50% !important;
  transform:translateY(-50%) rotate(8deg) !important;
  font-size:1.15rem !important;
  line-height:1 !important;
  background:
    linear-gradient(180deg, #f9a8d4 0%, #ec4899 45%, #9333ea 100%)
    !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  filter:
    drop-shadow(0 0 7px rgba(236,72,153,.9))
    drop-shadow(0 0 15px rgba(168,85,247,.55))
    !important;
}

#stickyXp.purple-xp-icon::after{
  content:none !important;
}


/* Phase 2.3.9 XP Orb */

#stickyXp.xp-orb{

position:relative;

padding-left:34px !important;

background:
linear-gradient(
135deg,
rgba(147,51,234,.20),
rgba(236,72,153,.14)
)
!important;

border:
1px solid
rgba(
168,
85,
247,
.45
)
!important;

color:
#fdf4ff
!important;

}

#stickyXp.xp-orb::before{

content:"🔮";

position:absolute;

left:9px;

top:50%;

transform:
translateY(-50%);

font-size:
1rem;

filter:
drop-shadow(
0 0 10px rgba(168,85,247,.8)
);

}

#stickyXp.xp-orb::after{

content:none !important;

}

.flying-reward-particle.xp{

font-size:
1.1rem;

}





/* Phase 2.3.9.1 Orb final */

#stickyXp.xp-orb{

position:relative;

padding-left:34px
!important;

}

#stickyXp.xp-orb::before{

content:
"🔮"
!important;

display:block
!important;

position:absolute
!important;

left:10px
!important;

top:50%
!important;

transform:
translateY(-50%)
!important;

font-size:
1rem
!important;

}

#stickyXp::after{

content:none
!important;

}



/* Phase 2.3.9.2 final split:
   sticky XP = orb
   flying XP = purple stars
*/

/* Sticky teller gebruikt orb en geen gele sparkle */
#stickyXp.xp-orb-final,
#stickyXp.xp-orb {
  position: relative;
  background:
    linear-gradient(135deg, rgba(147,51,234,.20), rgba(236,72,153,.14))
    !important;
  border: 1px solid rgba(168,85,247,.45) !important;
  color: #fdf4ff !important;
  text-shadow: 0 0 8px rgba(168,85,247,.45) !important;
}

/* Geen extra pseudo-ster/orb meer nodig wanneer de tekst zelf 🔮 bevat */
#stickyXp.xp-orb-final::before,
#stickyXp.xp-orb-final::after {
  content: none !important;
  display: none !important;
}

/* Vliegende XP blijft paarse ster, niet de orb en niet geel */
.flying-reward-particle.xp {
  color: transparent !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 0 8px rgba(236,72,153,.85))
    drop-shadow(0 0 18px rgba(168,85,247,.65))
    !important;
}

.flying-reward-particle.xp::before {
  content: "✦";
  font-size: 1.55rem;
  line-height: 1;
  background:
    linear-gradient(180deg, #f9a8d4 0%, #ec4899 45%, #9333ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: block;
  animation: xpTwinkleFinal .8s ease-in-out infinite alternate;
}

@keyframes xpTwinkleFinal {
  from { transform: scale(1) rotate(8deg); }
  to { transform: scale(1.15) rotate(-8deg); }
}

/* Als oude script nog ✨ als tekst zet in particles: verberg die tekst */
.flying-reward-particle.xp {
  font-size: 0 !important;
}

.flying-reward-particle.xp::before {
  font-size: 1.55rem !important;
}

/* Bucks blijven gouden muntjes */
.flying-reward-particle.bucks {
  color: #facc15 !important;
  font-size: 1.35rem !important;
}


/* Phase 2.3.9.3 lock sticky XP to orb only */
#stickyXp.xp-orb-locked{
  position: relative !important;
  padding-left: 34px !important;
  color: #fdf4ff !important;
  -webkit-text-fill-color: #fdf4ff !important;
  background:
    linear-gradient(135deg, rgba(147,51,234,.22), rgba(236,72,153,.14))
    !important;
  border: 1px solid rgba(168,85,247,.50) !important;
  text-shadow: 0 0 8px rgba(168,85,247,.45) !important;
  font-size: .9rem !important;
}

#stickyXp.xp-orb-locked::before{
  content: "🔮" !important;
  display: block !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: initial !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  filter: drop-shadow(0 0 10px rgba(168,85,247,.80)) !important;
}

#stickyXp.xp-orb-locked::after{
  content: none !important;
  display: none !important;
}

/* Keep flying XP as purple stars */
.flying-reward-particle.xp{
  color: transparent !important;
  font-size: 0 !important;
}

.flying-reward-particle.xp::before{
  content: "✦" !important;
  display: block !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #f9a8d4 0%, #ec4899 45%, #9333ea 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter:
    drop-shadow(0 0 8px rgba(236,72,153,.85))
    drop-shadow(0 0 18px rgba(168,85,247,.65)) !important;
}


/* Phase 2.5.3 working image hub homepage */
.hide-when-image-hub {
  display: none !important;
}

#todayScreen,
#homeScreen {
  min-height: calc(100vh - 120px);
}

.image-hub-home {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 8px 0 18px;
}

.hub-scene {
  position: relative;
  width: min(100%, 1580px);
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  overflow: hidden;
  background: #07111f;
  box-shadow: 0 28px 90px rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.10);
}

.hub-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #07111f;
  display: block;
}

.hub-hud {
  position: absolute;
  z-index: 12;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hub-pill {
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(8,13,24,.78);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  font-weight: 950;
  color: #f8fafc;
}

.hub-zone {
  position: absolute;
  z-index: 10;
  border: 0;
  background: rgba(255,255,255,0);
  cursor: pointer;
  border-radius: 28px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.hub-zone:hover,
.hub-zone:focus-visible {
  outline: none;
  background: rgba(96,165,250,.10);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.15),
    0 0 40px rgba(96,165,250,.48);
}

.hub-zone-tap {
  transform: scale(.97);
}

.hub-label {
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(8,13,24,.86);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  color: white;
  font-weight: 950;
  font-size: .88rem;
  opacity: 0;
  pointer-events: none;
  transition: .16s ease;
}

.hub-zone:hover .hub-label,
.hub-zone:focus-visible .hub-label {
  opacity: 1;
  bottom: -46px;
}

.hub-toast {
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(8,13,24,.86);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.34);
  font-weight: 950;
  opacity: 0;
  transition: .18s ease;
}

.hub-toast.show {
  opacity: 1;
  bottom: 32px;
}

/* Hotspots matched to the hub scene */
.hub-center { left: 39%; top: 28%; width: 22%; height: 29%; border-radius: 50%; }
.hub-daily { left: 6%; top: 50%; width: 22%; height: 30%; }
.hub-pass { left: 10%; top: 18%; width: 23%; height: 25%; }
.hub-fame { left: 32%; top: 6%; width: 24%; height: 20%; }
.hub-trials { right: 7%; top: 16%; width: 28%; height: 28%; }
.hub-support { right: 6%; top: 50%; width: 26%; height: 27%; }
.hub-shop { left: 42%; bottom: 4%; width: 24%; height: 22%; }

.hub-center:hover,
.hub-center:focus-visible {
  background: rgba(168,85,247,.10);
  box-shadow:
    0 0 0 5px rgba(216,180,254,.20),
    0 0 55px rgba(168,85,247,.62);
}

.hub-center.level-1 { box-shadow: 0 0 38px rgba(125,211,252,.0); }
.hub-center.level-2:hover { box-shadow: 0 0 0 5px rgba(125,211,252,.18), 0 0 60px rgba(14,165,233,.55); }
.hub-center.level-3:hover { box-shadow: 0 0 0 5px rgba(250,204,21,.18), 0 0 60px rgba(250,204,21,.48); }
.hub-center.level-4:hover { box-shadow: 0 0 0 5px rgba(34,197,94,.18), 0 0 60px rgba(34,197,94,.48); }
.hub-center.level-5:hover { box-shadow: 0 0 0 5px rgba(249,115,22,.18), 0 0 60px rgba(249,115,22,.48); }
.hub-center.level-6:hover { box-shadow: 0 0 0 5px rgba(239,68,68,.18), 0 0 60px rgba(239,68,68,.48); }
.hub-center.level-7:hover { box-shadow: 0 0 0 5px rgba(250,204,21,.18), 0 0 70px rgba(250,204,21,.58); }
.hub-center.level-8:hover { box-shadow: 0 0 0 5px rgba(251,191,36,.22), 0 0 85px rgba(251,191,36,.72); }

@media(max-width:800px){
  .image-hub-home {
    overflow-x: auto;
    justify-content: start;
  }

  .hub-scene {
    width: 1100px;
    max-width: none;
  }
}

/* Mobile app / PWA test */
html, body {
  min-height: 100%;
  overscroll-behavior: none;
}
body.mobile-app-test {
  background: #07111f;
  -webkit-tap-highlight-color: transparent;
}
body.phone-layout {
  overflow-x: hidden;
}
body.phone-layout .image-hub-home {
  padding: 6px 0 88px;
  overflow-x: hidden;
}
body.phone-layout .hub-scene {
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 0;
  box-shadow: none;
  border: 0;
}
body.phone-layout .hub-bg {
  object-fit: contain !important;
}
body.phone-layout .hub-label {
  font-size: .72rem;
  padding: 6px 9px;
}
body.phone-layout .hub-hud {
  top: 8px;
  left: 8px;
  right: 8px;
  gap: 6px;
}
body.phone-layout .hub-pill {
  padding: 7px 9px;
  font-size: .78rem;
}
body.phone-layout .app-tabs,
body.phone-layout nav {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1000;
  border-radius: 24px;
  padding: 8px;
  background: rgba(8,13,24,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow-x: auto;
  scrollbar-width: none;
}
body.phone-layout .app-tabs::-webkit-scrollbar,
body.phone-layout nav::-webkit-scrollbar {
  display: none;
}
body.phone-layout .app-tab {
  min-width: max-content;
  font-size: .8rem;
}
@media (max-width: 820px) and (orientation: portrait) {
  body.phone-layout .sticky-stats {
    display: none;
  }
}
@media (max-width: 920px) and (orientation: landscape) {
  body.phone-layout .hub-scene {
    width: 100vw !important;
    height: calc(100dvh - 84px) !important;
    aspect-ratio: auto !important;
  }
}
.install-note {
  margin: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(255,255,255,.12);
  color: #e2e8f0;
  font-size: .9rem;
}
body.phone-layout .install-note {
  font-size: .78rem;
  margin: 6px;
  padding: 8px 10px;
}

/* Phase 2.5.5 Mobile World Only */
@media (max-width: 820px){

  .app-tabs,
  nav,
  .tabs,
  .tab-bar,
  .bottom-tabs,
  .navigation,
  .tab-navigation{
    display:none !important;
  }

  body{
    overflow-x:hidden !important;
    background:#07111f !important;
  }

  .image-hub-home{
    padding:0 !important;
    margin:0 !important;
  }

  .hub-scene{
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
    box-shadow:none !important;
    border:none !important;
  }

  .hub-bg{
    object-fit:cover !important;
    width:100% !important;
    height:100% !important;
  }

  .hub-label{
    font-size:.7rem !important;
    padding:6px 10px !important;
  }

  .hub-hud{
    top:10px !important;
    left:10px !important;
    gap:6px !important;
  }

  .hub-pill{
    padding:6px 10px !important;
    font-size:.78rem !important;
  }

  .hub-center{
    width:30% !important;
    height:24% !important;
    left:35% !important;
    top:30% !important;
  }

  .hub-toast{
    font-size:.85rem !important;
  }

  .install-note{
    position:fixed;
    top:8px;
    right:8px;
    max-width:220px;
    z-index:999;
    font-size:.72rem !important;
    padding:8px 10px !important;
    opacity:.82;
  }
}


/* Phase 2.5.6 portrait + home return */

@media (max-width:820px){

  /* portrait: afbeelding groter zichtbaar */
  .hub-scene{
    height:100dvh !important;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#07111f;
  }

  .hub-bg{
    object-fit:contain !important;
    object-position:center center !important;
    transform:scale(1.18);
  }

  /* floating home knop */
  .home-return-btn{
    position:fixed;
    bottom:18px;
    right:18px;
    z-index:1200;

    width:58px;
    height:58px;
    border-radius:50%;

    border:none;

    background:
    linear-gradient(
      135deg,
      #38bdf8,
      #8b5cf6
    );

    color:white;
    font-size:1.4rem;
    font-weight:900;

    box-shadow:
      0 12px 30px rgba(0,0,0,.35),
      0 0 30px rgba(139,92,246,.35);

    display:grid;
    place-items:center;
  }

  .home-return-btn:active{
    transform:scale(.94);
  }

}



/* Phase 2.5.7 Landscape-first mobile app */

@media (max-width: 900px) {
  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }

  /* verberg tekstbanner/install note die ruimte inneemt */
  .install-note,
  header,
  .app-header,
  .top-banner,
  .title-bar,
  .app-title,
  h1 {
    display: none !important;
  }

  /* zorg dat de app echt fullscreen wordt */
  main,
  #app,
  .app,
  .container,
  .content,
  .page,
  .screen,
  .app-screen.active,
  #todayScreen,
  #homeScreen {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .image-hub-home {
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .hub-scene {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .hub-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: #07111f !important;
  }

  .hub-hud {
    top: 8px !important;
    left: 8px !important;
  }

  .home-return-btn {
    bottom: 12px !important;
    right: 12px !important;
    width: 52px !important;
    height: 52px !important;
  }
}

/* In portrait: block play and ask user to rotate */
.rotate-overlay {
  display: none;
}

@media (max-width: 900px) and (orientation: portrait) {
  .rotate-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at 50% 25%, rgba(168,85,247,.28), transparent 34%),
      linear-gradient(180deg, #07111f, #0f172a);
    color: white;
    text-align: center;
    padding: 24px;
  }

  .rotate-card {
    max-width: 320px;
    padding: 26px;
    border-radius: 30px;
    background: rgba(15,23,42,.78);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 25px 80px rgba(0,0,0,.35);
  }

  .rotate-icon {
    font-size: 3.2rem;
    margin-bottom: 10px;
  }

  .rotate-card h2 {
    margin: 0 0 8px;
  }

  .rotate-card p {
    margin: 0;
    color: #cbd5e1;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .rotate-overlay {
    display: none !important;
  }
}


/* Phase 2.5.8 Fix: hub fullscreen, other tabs scroll */
@media (max-width: 900px) and (orientation: landscape) {

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }

  .app-screen.active {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 14px 84px !important;
  }

  .app-screen.active:has(.image-hub-home) {
    overflow: hidden !important;
    padding: 0 !important;
  }

  #missionsScreen,
  #dailyFlushScreen,
  #shopScreen,
  #badgesScreen,
  #passScreen,
  #logScreen,
  #supportScreen {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 84px !important;
  }

  .image-hub-home,
  .hub-scene {
    overflow: hidden !important;
  }

  .home-return-btn {
    position: fixed !important;
    z-index: 1200 !important;
  }
}


/* Phase 2.5.9 Home fullscreen clean */

/* Op mobiel/landscape: homepage is alleen de image hub */
@media (max-width: 900px) and (orientation: landscape) {

  body.home-hub-active header,
  body.home-hub-active .app-header,
  body.home-hub-active .top-banner,
  body.home-hub-active .title-bar,
  body.home-hub-active .app-title,
  body.home-hub-active .sticky-stats,
  body.home-hub-active #stickyStatsBar,
  body.home-hub-active .install-note,
  body.home-hub-active h1,
  body.home-hub-active .subtitle,
  body.home-hub-active .tagline {
    display: none !important;
  }

  body.home-hub-active {
    overflow: hidden !important;
  }

  body.home-hub-active #todayScreen,
  body.home-hub-active #homeScreen,
  body.home-hub-active .app-screen.active {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.home-hub-active .image-hub-home {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  body.home-hub-active .hub-scene {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  body.home-hub-active .hub-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Geen dubbele teller boven de afbeelding; alleen eventueel later geïntegreerd in de wereld */
  body.home-hub-active .hub-hud {
    display: none !important;
  }

  body.home-hub-active .home-return-btn {
    display: none !important;
  }
}

/* In portrait ook geen oude header achter de draai-melding */
@media (max-width: 900px) and (orientation: portrait) {
  header,
  .app-header,
  .top-banner,
  .title-bar,
  .app-title,
  .sticky-stats,
  #stickyStatsBar,
  .install-note,
  h1,
  .subtitle,
  .tagline {
    display: none !important;
  }
}


/* Phase 2.5.10 Minimal fix from stable 2.5.9 */

/* Homepage: geen dubbele stats/header */
body.home-hub-active #stickyStatsBar,
body.home-hub-active .sticky-stats,
body.home-hub-active header,
body.home-hub-active .app-header,
body.home-hub-active .top-banner,
body.home-hub-active .title-bar,
body.home-hub-active .app-title,
body.home-hub-active .install-note {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Andere tabs: stats direct zichtbaar */
body.not-home-screen #stickyStatsBar,
body.not-home-screen .sticky-stats {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Toilet Trials: Daily/Challenge/Epic balk niet sticky/fixed */
#missionsScreen .trials-subtabs-normal,
#missionsScreen .mission-tabs,
#missionsScreen .mission-subtabs,
#missionsScreen .subtabs,
#missionsScreen .tabs-row,
#missionsScreen .mission-filter,
#missionsScreen .filter-tabs,
#missionsScreen .stable-mission-tabs,
#missionsScreen .mission-tabs-fixed-final {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Laat knoppen zelf normaal blijven */
#missionsScreen .mission-subtab {
  position: relative !important;
}

/* Mobiel landschap: gewone tabs mogen scrollen zoals in 2.5.9 */
@media (max-width: 900px) and (orientation: landscape) {
  body.not-home-screen #stickyStatsBar,
  body.not-home-screen .sticky-stats {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #missionsScreen .trials-subtabs-normal,
  #missionsScreen .mission-tabs,
  #missionsScreen .mission-subtabs,
  #missionsScreen .subtabs,
  #missionsScreen .tabs-row,
  #missionsScreen .mission-filter,
  #missionsScreen .filter-tabs,
  #missionsScreen .stable-mission-tabs,
  #missionsScreen .mission-tabs-fixed-final {
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
  }
}


/* Phase 2.5.12 safe stats fallback, no navigation changes */
body.not-home-screen #stickyStatsBar,
body.not-home-screen .sticky-stats {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* Phase 2.5.13 Stats default visible */

/* Belangrijk: standaard zichtbaar, zonder te wachten op een class na klik */
#stickyStatsBar,
.sticky-stats {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Alleen op de homepage-hub verbergen */
body.home-hub-active #stickyStatsBar,
body.home-hub-active .sticky-stats {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Buiten home altijd zichtbaar */
body:not(.home-hub-active) #stickyStatsBar,
body:not(.home-hub-active) .sticky-stats {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Voorkom fade-in vertraging */
#stickyStatsBar *,
.sticky-stats * {
  transition-delay: 0s !important;
}


/* Intro integratie v1 */
body.intro-active {
  overflow: hidden !important;
}

.bq-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  background: #000;
  color: white;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bq-intro-overlay.show {
  display: block;
}

.bq-intro-stage {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transition: opacity .45s ease;
  opacity: 1;
}

.bq-intro-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.20));
  pointer-events: none;
}

.bq-intro-dots {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: white;
  z-index: 10;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.bq-intro-hint {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background: rgba(0,0,0,.28);
  padding: 10px 18px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  z-index: 9;
  font-weight: 800;
}

.bq-intro-controls {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
  align-items: center;
}

.bq-intro-controls button {
  border: 0;
  border-radius: 999px;
  min-width: 62px;
  height: 62px;
  padding: 0 22px;
  font-size: 2rem;
  font-weight: 900;
  background: #ffd54f;
  color: #241400;
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0,0,0,.25);
}

#bqIntroStart {
  display: none;
  font-size: 1.15rem;
  height: 58px;
  padding: 0 28px;
  background: linear-gradient(135deg,#ffd54f,#ffb020);
  color: #241400;
}

.bq-intro-overlay.final #bqIntroPrev,
.bq-intro-overlay.final #bqIntroNext {
  display: none;
}

.bq-intro-overlay.final #bqIntroStart {
  display: inline-block;
}

.intro-replay-card {
  margin: 12px 0 16px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(15,23,42,.76);
  border: 1px solid rgba(255,255,255,.12);
}

.intro-replay-card h3 {
  margin-top: 0;
}

.intro-replay-card button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  background: linear-gradient(135deg,#38bdf8,#a855f7);
  color: white;
}

@media(max-width:700px){
  .bq-intro-hint {
    bottom: 92px;
    font-size: .9rem;
  }

  .bq-intro-controls button {
    min-width: 56px;
    height: 56px;
  }

  #bqIntroStart {
    height: 56px;
    font-size: 1rem;
  }
}

@media(max-width:900px) and (orientation: landscape){
  .bq-intro-dots {
    top: 10px;
    padding: 8px 13px;
    font-size: .85rem;
  }

  .bq-intro-hint {
    bottom: 76px;
    font-size: .78rem;
    padding: 8px 12px;
  }

  .bq-intro-controls {
    bottom: 10px;
  }

  .bq-intro-controls button {
    min-width: 48px;
    height: 48px;
    font-size: 1.65rem;
  }

  #bqIntroStart {
    height: 48px;
    font-size: .92rem;
  }
}


/* Intro sound button from v10.1 */
.bq-intro-sound-btn {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 12;
  height: 46px;
  min-width: 0;
  font-size: 1rem;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  color: white;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  font-weight: 900;
}

.bq-intro-sound-btn:active {
  transform: scale(.96);
}

@media(max-width:700px){
  .bq-intro-sound-btn {
    top: 14px;
    left: 14px;
    height: 42px;
    font-size: .9rem;
    padding: 0 13px;
  }
}

@media(max-width:900px) and (orientation: landscape){
  .bq-intro-sound-btn {
    top: 10px;
    left: 10px;
    height: 38px;
    font-size: .78rem;
    padding: 0 11px;
  }
}