/* =========================================
   GLOBAL STYLES
========================================= */

html, body {
    overflow-x: hidden !important;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", Arial, sans-serif;
  color: white;
  background: none;
  background-color: #617683;
}

/* =========================================
   DATE HEADER (ALIGNED WITH PILL COLUMN)
========================================= */

#dash-date-top {
  width: 94%;
  max-width: 440px;
  margin: 50px auto 40px auto;
  text-align: left;
}

#dash-day {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 0px;
}

#dash-date {
  font-size: 50px;
  font-weight: 150;
}

/* =========================================
   METRIC PILLS — MATCH PILL WIDTH
========================================= */

.metric-row {
  width: 96%;
  max-width: 440px;
  margin: 15px auto 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;     /* now this WILL work */
}



.metric-pill {
  flex: 1;                     /* lets them shrink */
  min-width: 0;                /* allows tighter squeeze */
  max-width: 140px;            /* controls max size (desktop) */
  height: 82px;

  background-size: 100% 100%;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
}


.metric-pill * {
  transform: translateY(-3px);
}

.metric-label {
  font-size: 14px;
  font-weight: 400;
  margin-top: 2px;
}

.metric-value {
  font-size: 30px;
  font-weight: 300;
  margin-top: -4px;
}

#streak { color: #e06536; }
#todays-credits { color: #0bb7eb; }
#total-credits { color: #53b82a; }

/* Images */
#circle-streak { background-image: url("StreakPill.png"); }
#circle-today  { background-image: url("TodaysCreditsPill.png"); }
#circle-total  { background-image: url("TotalCreditsPill.png"); }

/* =========================================
   SECTION TITLES — MATCH PILL LEFT EDGE
========================================= */

.section-title {
  width: 94%;
  max-width: 440px;
  margin: 22px auto 18px auto;
  text-align: left;
  font-size: 24px;
  font-weight: 50;
  opacity: 0.75;
}

/* =========================================
   TASK PILLS — FIXED WIDTH & RESIZE CORRECTLY
========================================= */

.pill {
  width: 84%;
  max-width: 440px;
  height: 95px;

  margin: -15px auto; /* clean + symmetrical */

  padding: 0 28px; /* slightly reduced from 34px for balance */

  display: flex;
  justify-content: space-between;
  align-items: center;

  background-size: 100% 100% !important;
  background-repeat: no-repeat;
  background-position: center;

  font-size: 24px;
  font-weight: 400;
  text-shadow: 0 3px 6px rgba(0,0,0,0.6);
  cursor: pointer;
}



.pill span {
  transform: translateY(-8px);
  font-weight: 200;
}

.pill span:last-child {
  margin-left: 12px;        /* pulls numbers inward */
 font-weight: 500;
}

.pill span:first-child {
  margin-left: 6px;         /* optional but recommended for precise symmetry */
}


.daily   { background-image: url("DailyTaskPill.png"); }
.regular { background-image: url("TaskPill.png"); }

/* Completed Tasks */
.completed-pill {
  opacity: 0.45;
  transition: opacity 0.25s;
}

.completed-pill:hover {
  opacity: 0.60;
}

/* =========================================
   MAIN BUTTON 
========================================= */

.btn {
  background: url("button.png") no-repeat center;
  background-size: 100% 100%;
  width: 340px;
  height: 110px;
  margin: 40px auto;
  border: none;
  color: white;
  font-size: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-shadow: 0 3px 6px black;
}

.btn span {
  transform: translateY(-6px);
}

/* ============================================================
   POPUP OVERLAY — FIXED
============================================================ */

#popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  opacity: 0;

  pointer-events: none !important;
  z-index: -1 !important;

  transition: opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#popup-overlay.visible {
  opacity: 1;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

#popup-box {
  width: 80vw;
  max-width: 420px;
  aspect-ratio: 2663 / 1642;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 20px;
  position: relative;
  z-index: 10000;
}

#popup-title {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  color: white;
  margin-top: 10px;
  text-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

#popup-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  margin-bottom: 40px;
}

.popup-btn {
  width: 230px;
  aspect-ratio: 1149 / 690;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.event-pill {
  width: 84%;
  max-width: 440px;

  height: 60px;

  margin: -15px auto; /* clean balance */

  padding: 0 28px; /* match task pills */

  display: flex;
  justify-content: space-between; /* match tasks */
  align-items: center;
  gap: 0; /* prevent left-heavy spacing */

  background-size: 100% 100% !important;
  background-repeat: no-repeat;
  background-position: center;

  font-size: 22px;
  cursor: pointer;
}



.event-time {
  font-weight: 600;
  min-width: 75px;
  text-align: left;
  transform: translateY(-4px);
}

.event-name {
  flex: 1;
  font-weight: 300;
  transform: translateY(-4px);
}


.event-pill span {
  transform: translateY(-6px);
  font-weight: 200;
}

.event-pill span:last-child {
  margin-left: 12px;        /* pulls numbers inward */
 font-weight: 300;
}

.event-pill span:first-child {
  margin-left: 6px;       /* optional but recommended for precise symmetry */
}

.event-blue  { background-image: url("bluepill_calendar.png"); }
.event-green { background-image: url("greenpill_calendar.png"); }
.event-add   { background-image: url("greypill_calendar.png"); }

/* =========================================
   EDIT TASKS — LIST
========================================= */

#edit-task-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: -20px;
}

.edit-row {
  display: flex;
  align-items: center;
  width: 92%;
  max-width: 440px;
  margin: -8px auto;
  justify-content: space-between;
}


#edit-tasks-title {
  font-size: 40px;
  font-weight: 200;
  width: 94%;
  max-width: 440px;
  margin: 0 auto 20px auto;
}

/* =========================================
   EDIT REWARDS 
========================================= */

.edit-reward-row {
  display: flex;
  align-items: center;
  width: 94%;
  max-width: 440px;
  margin: -8px auto;
  justify-content: space-between;
  gap: 5px;
}

.edit-reward-name-box {
  height: 45px;
  aspect-ratio: 1751 / 374;
  background-image: url("taskname_box.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding-left: 18px;
}

.edit-reward-name {
  width: 88%;
  height: 36px;
  border: none;
  font-size: 16px;
  background: transparent;
  color: white;
  margin-top: -5px;
  font-weight: 300;
}

.edit-reward-cost-box {
  height: 45px;
  aspect-ratio: 436 / 376;
  background-image: url("taskpoints_box2.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-reward-cost {
  width: 80%;
  height: 36px;
  text-align: center;
  border: none;
  font-size: 18px;
  background: transparent;
  color: white;
  margin-top: -5px;
  font-weight: 500;
}

.edit-delete-reward {
  height: 45px;
  aspect-ratio: 4.34 / 3.74;
  background-size: 100% 100%;
  border: none;
  outline: none;
  background-color: transparent;
}

#edit-rewards-title {
  font-size: 40px;
  font-weight: 200;
  width: 94%;
  max-width: 440px;
  margin: 0 auto 20px auto;
}

/* =========================================
   EDIT — NAME / POINTS
========================================= */

.edit-name-box {
  background-image: url("taskname_box.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  height: 42px;
  aspect-ratio: 1751 / 374;

  display: flex;
  align-items: center;
  padding-left: 18px;
}

.edit-name {
  width: 100%;
  background: none;
  border: none;
  outline: none;

  font-size: 16px;
  font-weight: 300;
  color: #d9e7fd;

  transform: translateY(-3px);
}

.edit-points-box {
  background-image: url("taskpoints_box2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  height: 42px;
  aspect-ratio: 436 / 376;

  display: flex;
  align-items: center;
}

.edit-points {
  width: 100%;
  background: none;
  border: none;
  outline: none;

  font-size: 14px;
  font-weight: 500;
  color: #d9e7fd;

  text-align: center;
  transform: translateY(-3px);
}

.edit-special,
.edit-delete {
  height: 42px;
  aspect-ratio: 4.34 / 3.74;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  background-color: transparent !important;
  border: none;
  cursor: pointer;
}

/* =========================================
   EDIT EVENTS — LIST
========================================= */

.edit-event-row {
  display: flex;
  align-items: center;
  width: 94%;
  max-width: 440px;
  margin: 0px auto -10px auto;
  justify-content: space-between;
}

/* Name box — reuse your existing taskname_box */
.edit-event-name-box {
  height: 50px;
  aspect-ratio: 1751 / 374;
  background-image: url("taskname_box.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding-left: 18px;
}

.edit-event-name {
  width: 88%;
  height: 36px;
  border: none;
  background: transparent;
  color: white;
  margin-top: -5px;
  font-weight: 300;
  font-size: 16px;
}

/* Time input box — reuse your points box */
.edit-event-time-box {
  height: 50px;
  width: 180px;
  background-image: url("taskpoints_box2.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-event-time {
  width: 80%;
  height: 36px;
  border: none;
  background: transparent;
  color: white;
  margin-top: -5px;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
}

/* Delete event button */
.edit-event-delete {
  height: 50px;
  aspect-ratio: 4.34 / 3.74;
  background-image: url("deletetask_box.png");
  background-size: 100% 100%;
  border: none;
  background-color: transparent;
  cursor: pointer;
}


/* =========================================
   LOGIN / SIGNUP — FULLY FIXED
========================================= */

#screen-login,
#screen-signup {
  background: url("Mobile_Background.jpg") no-repeat center top;
  background-size: cover;
  min-height: 100vh;
  padding-top: 160px;
}

.auth-wrap {
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.auth-logo {
  width: 260px;
  margin-bottom: 60px;
  filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.4));
}

.auth-input-wrap {
  width: 100%;
  height: 64px;
  background: url("typebox.png") no-repeat center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin: 18px 0 -30px;
  box-sizing: border-box;
}

.auth-input {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  font-size: 20px;
  color: #e8f3ff;
  transform: translateY(-5px);
}

.auth-input::placeholder {
  color: #ffffff;
  opacity: .5;
}

.auth-button {
  width: 100%;
  height: 80px;
  background: url("button.png") no-repeat center;
  background-size: 100% 100%;
  border: none;
  margin-top: 64px;
  margin-bottom: 20px;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-button span {
  font-size: 26px;
  color: white;
  font-weight: 500;
  text-shadow: 0px 2px 6px rgba(0,0,0,0.4);
  transform: translateY(-4px);
}

.auth-switch {
  font-size: 18px;
  color: #d4e6ff;
  opacity: 0.9;
}

.auth-switch a {
  color: white;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 6px;
}

.auth-input-wrap,
.auth-button {
  max-width: 360px;
  width: 100%;
}

/* Dashboard Buttons */
#dashboard-buttons {
  width: 94%;
  max-width: 440px;
  margin: 40px auto -30px auto;
  display: flex;
  flex-direction: column;
}

.dash-button {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  cursor: pointer;
  user-select: none;
}

input:focus {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
}

input, button {
  font-size: 16px;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.big-btn {
  width: 94%;
  max-width: 440px;
  display: block;
  margin: 40px auto -40px auto;
}

/* =========================================
   DASHBOARD ANIMATIONS
========================================= */

@keyframes dashFadeIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.dash-animate {
  opacity: 0;
  animation: dashFadeIn 0.55s ease-out forwards;
}

#dash-date-top.dash-animate { animation-delay: 0.15s; }
.metric-row.dash-animate { animation-delay: 0.25s; }
.section-title.dash-animate { animation-delay: 0.80s; }
#daily-tasks.dash-animate { animation-delay: 0.50s; }
#regular-tasks.dash-animate { animation-delay: 0.65s; }
#completed-tasks.dash-animate { animation-delay: 0.80s; }
#dashboard-buttons.dash-animate { animation-delay: 0.95s; }

/* =========================================
   FINAL SCREEN FADE SYSTEM (fixed)
========================================= */

.screen {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease-in-out;
  position: absolute;
  inset: 0;
  padding: 40px 26px;
}

.screen.visible {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================
   GLOBAL PAGE FADER (disabled)
========================================= */

#app-fader {
  opacity: 1 !important;
  transition: none !important;
}

#app-fader.fade-out {
  opacity: 0;
}

/* FIXED BACKGROUND LAYER FOR MOBILE */
#fixed-bg {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  background: url("Mobile_Background.jpg") no-repeat top center;
  background-size: cover;

  z-index: -9999;
  pointer-events: none;
}

/* Slight extra spacing above Events section */
#event-list {
  margin-top: -10px;
}

.event-blue { background-image: url("bluepill_calendar.png"); }
.event-green { background-image: url("greenpill_calendar.png"); }
.event-add { background-image: url("greypill_calendar.png"); }

#wave-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2; /* waves at the bottom */
    pointer-events: none; /* UI stays clickable */
}

#app-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('your_background.png'); /* whatever your PNG is */
    background-size: cover;
    z-index: -1; /* above waves, below UI */
}