@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");

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

:root {
  --ink: #2d6d64;
  --text: #3e4947;
  --soft: #edf7ee;
  --line: #c5ebc3;
  --aqua: #9ce8df;
  --mint: #cdeec8;

}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: linear-gradient(135deg, #f5fbf8, #fcfffd 65%, #f3fff4);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  min-height: 100vh;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

.hidden {
  display: none !important;
}

.view {
  min-height: 100vh;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* ==================== AUTH ==================== */

.auth-view {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 34px;
}

.auth-brand {
  text-align: center;
  color: var(--ink);
}

.auth-brand h1 {
  font-size: 3.5rem;
  letter-spacing: -2px;
}

.auth-brand p {
  color: var(--text);
  font-size: 1.3rem;
  margin-top: 8px;
}

.auth-brand .paw {
  display: block;
  margin: auto;
  font-size: 3rem;
}

.auth-card {
  width: min(550px, 92vw);
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 22px;
  padding: 42px 54px 54px;
  box-shadow: 0 12px 30px #2d6d6410;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #e1e9e6;
  margin-bottom: 36px;
}

.tab {
  flex: 1;
  padding: 12px;
  font-size: 1.1rem;
}

.tab.active {
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
}

label {
  display: grid;
  gap: 7px;
  font-size: 1.05rem;
  color: #222;
  margin: 19px 0;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  padding: 14px 13px;
  border: 1px solid #b5c5c1;
  border-radius: 10px;
  background: #fbfdfb;
  font-size: 1.1rem;
  outline-color: var(--ink);
}

.signup-only.hidden {
  display: none;
}

.intention-field {
  width: min(520px, 90vw);
  margin: 30px auto 0;
}

.intention-field input {
  width: 100%;
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22px 0;
}

.form-row label {
  display: flex;
  margin: 0;
  align-items: center;
  gap: 8px;
}

.check input {
  width: 27px;
  height: 27px;
}

.text-button {
  color: var(--ink);
  font-weight: 500;
}

.error {
  color: #a85a5a;
  min-height: 18px;
  font-size: 0.88rem;
}

.primary,
.soft {
  border-radius: 28px;
  padding: 14px 24px;
  font-size: 1.05rem;
  font-weight: 600;
}

.primary {
  background: var(--ink);
  color: white;
  box-shadow: 0 8px 15px #2d6d6430;
}

.soft {
  background: var(--mint);
  color: #55775b;
}

.full {
  width: 100%;
}

/* ==================== HEADER ==================== */

header {
  height: 94px;
  border-bottom: 3px solid var(--line);
  background: #fcfffd;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 38px;
}

header nav {
  justify-self: center;
}

header .icon-button {
  justify-self: end;
}

.brand {
  font-weight: 700;
  color: var(--ink);
  font-size: 2rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.small {
  transform: scale(0.72);
}

nav {
  display: flex;
  gap: 34px;
}

.nav-link {
  font-size: 1.15rem;
  padding: 12px 2px;
}

.nav-link.active {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
}

.icon-button {
  color: var(--ink);
  font-size: 1.8rem;
}

/* ==================== STREAK ==================== */

.streak {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 17px 24px;
  border: 1px solid var(--line);
  background: #f4faf5;
  border-radius: 12px;
  padding: 9px 20px;
  color: #6aa29a;
  font-size: 1.5rem;
}

.streak span {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
}

.streak strong {
  font-size: 1rem;
  color: var(--text);
}

.streak small {
  font-size: 0.8rem;
  color: #72807c;
}

.trophy {
  justify-content: flex-end;
  color: #56775b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trophy strong {
  font-size: 1rem;
  color: var(--text);
}

/* ==================== PAGE LAYOUT ==================== */

.page {
  min-height: calc(100vh - 155px);
}

/* ==================== TIMER ==================== */

.timer-wrap {
  display: grid;
  place-items: center;
  padding-top: 25px;
}

.timer-ring {
  width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--aqua) 0% var(--progress, 100%),
    #e6f3f0 var(--progress, 100%) 100%
  );
  position: relative;
}

.timer-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 26px;
  background: inherit;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.timer-ring:before {
  content: "";
  position: absolute;
  inset: 20px;
  background: #fbfefd;
  border-radius: 50%;
}

.timer-inner {
  z-index: 1;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  align-content: center;
  background: transparent;
}
.big-paw {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.big-paw img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
}

.timer-inner strong {
  font-size: 2.1rem;
  color: var(--ink);
  margin-top: 20px;
}

.timer-inner small {
  font-size: 0.8rem;
  color: #72807c;
}

.durations {
  display: flex;
  gap: 19px;
  margin-top: 35px;
}

.durations button {
  border: 1px solid var(--line);
  background: var(--soft);
  padding: 13px 34px;
  border-radius: 25px;
  font-size: 1rem;
}

.durations button.selected {
  background: #73b3aa;
  border-color: #73b3aa;
  color: #163d39;
  box-shadow: 0 8px 13px #55988c30;
}

.running-countdown {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 30px; /* matches .durations margin-top so layout doesn't jump */
  display: block;
}

.controls {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 30px;
}

.round {
  height: 66px;
  width: 66px;
  border-radius: 50%;
  font-size: 1.6rem;
}

.secondary {
  border: 1px solid #cbd6d3;
  color: #5b6865;
  background: #f7faf9;
}

.play {
  height: 88px;
  width: 88px;
  background: var(--ink);
  color: white;
  font-size: 1.6rem;
  box-shadow: 0 12px 18px #2d6d6430;
}

.caption {
  color: #6d7875;
  font-weight: 600;
  margin-top: 25px;
}

/* ==================== BREAK REASON ==================== */

.break-reason {
  width: min(500px, 80vw);
  margin: 10px auto 0;
  text-align: left;
}

.break-reason label {
  display: block;
  font-size: 1.05rem;
  color: #222;
  margin-bottom: 9px;
}

.break-reason textarea {
  width: 100%;
  padding: 14px 13px;
  border: 1px solid #b5c5c1;
  border-radius: 14px;
  background: #fbfdfb;
  font-family: "DM Sans", sans-serif;
  font-size: 1.05rem;
  color: var(--text);
  resize: vertical;
  min-height: 90px;
  outline: none;
  transition: 0.2s ease;
}

.break-reason textarea::placeholder {
  color: #a3b3ae;
}

.break-reason textarea:focus {
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 4px #2d6d6415;
}

/* ==================== HOUSE ==================== */
/* .room {
  width: min(880px, 90vw);
  height: 480px;
  margin: auto;
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #f3f8f5;
  box-shadow: 0 20px 40px #76968c18;
  border: 1px solid #d5e9dd;
} */
.room {
  width: min(880px, 90vw);
  aspect-ratio: 16 / 9; /* replace with your Room.png's real ratio */
  margin: auto;
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #f3f8f5;
  box-shadow: 0 20px 40px #76968c18;
  border: 1px solid #d5e9dd;
}

.room-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* fits Room.png fully, no stretch, no overflow */
  display: block;
}

.house-collectibles {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.house-collectibles .cat-at-home,
.house-collectibles .house-piece {
  position: absolute;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  pointer-events: none;
}

.house-collectibles .cat-at-home.unlocked,
.house-collectibles .house-piece.unlocked {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ---- Furniture slots ---- */

.house-piece-slot-1 {
  left: 5%;
  top: 10%;
  width: 90%;
  height: 80%;
  z-index: 2;
} /* Bed — floor, left side */
.house-piece-slot-2 {
  left: 14%;
  top: 9%;
  width: 75%;
  height: 85%;
} /* Carpet — floor, center */
.house-piece-slot-3 {
  left: 29%;
  top: 16%;
  width: 45%;
  height: 60%;
} /* Cat-scratcher — floor, right side */
.house-piece-slot-4 {
  left: 14%;
  top: 14%;
  width: 70%;
  height: 70%;
} /* Shelves — right wall */
.house-piece-slot-5 {
  left: 23%;
  top: 11%;
  width: 54%;
  height: 63%;
} /* Wall-decor — left wall, above window */

/* ---- Cat slots ---- */

.cat-slot-1 {
  left: 51%;
  top: 36%;
  width: 8%;
  height: 10%;
  z-index: 5;
}
.cat-slot-2 {
  left: 50%;
  top: 70%;
  width: 10%;
  height: 13%;
  z-index: 5;
}
.cat-slot-3 {
  left: 58%;
  top: 25%;
  width: 9%;
  height: 12%;
  z-index: 5;
}
.cat-slot-4 {
  left: 33%;
  top: 50%;
  width: 8%;
  height: 13%;
  z-index: 5;
}
.cat-slot-5 {
  left: 41%;
  top: 36%;
  width: 10%;
  height: 13%;
  z-index: 5;
}
.cat-slot-6 {
  left: 52%;
  top: 56%;
  width: 8%;
  height: 11%;
  z-index: 5;
}
.cat-slot-7 {
  left: 35%;
  top: 62%;
  width: 11%;
  height: 15%;
  z-index: 5;
}

.house-collectibles .cat-at-home img,
.house-collectibles .house-piece img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  color: transparent; /* hides alt text if the image 404s */
}

.room-switcher {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 18px;
  margin: 0 auto 8px;
  max-width: min(880px, 90vw);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.room-switcher::-webkit-scrollbar {
  height: 6px;
}

.room-switcher::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

.room-tile {
  position: relative;
  flex: 0 0 auto;
  width: 108px;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #e3ece7;
  background: #eef6f1;
  transition:
    border-color 0.2s ease,
    transform 0.15s ease;
}

.room-tile:hover {
  transform: translateY(-2px);
}

.room-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-tile.active {
  border-color: var(--ink);
  box-shadow: 0 6px 14px #2d6d6425;
}

.room-tile.locked img {
  filter: grayscale(45%) brightness(0.92); /* a bit more muted than last pass (25%/0.97) */
  opacity: 0.45; /* was 0.85 — pull back slightly so it reads as locked at a glance */
}

.room-tile.locked:hover {
  transform: none;
}
.room-tile > span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 6px 5px;
  font-size: 0.62rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: linear-gradient(to top, #23484095, transparent);
  z-index: 3;
}

.room-tile.active > span {
  background: linear-gradient(to top, #2d6d64c0, transparent);
}
.room-tile .lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}

.room-tile .lock .icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px #23484045;
}
.room-tile .lock::before {
  content: none; /* remove the old halo trick entirely — it was breaking the stacking context and hiding the icon */
}

.modal-card.coming-soon {
  background: #fff; /* override the portrait-gradient background entirely */
  padding-top: 40px;
}

.coming-soon-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft);
  border: 2px solid var(--line);
  font-size: 2rem;
}

.modal-card.coming-soon h2 {
  font-size: 1.7rem;
  margin-bottom: 4px;
}

.modal-card.coming-soon .trait {
  border: none;
  background: var(--soft);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  padding: 18px 20px;
  margin: 20px auto 30px;
}
/* ==================== HOUSE ==================== */
.house-heading {
  text-align: center;
  padding: 20px 20px 35px;
}

.house-heading h2 {
  font-size: 2.7rem;
  color: var(--ink);
  letter-spacing: -1.5px;
}

.house-heading p {
  font-size: 1.25rem;
  margin: 12px;
}

.progress {
  height: 11px;
  width: min(615px, 85vw);
  margin: 25px auto;
  background: #e6ebea;
  border-radius: 8px;
  overflow: hidden;
}

.progress i {
  display: block;
  width: 21%;
  height: 100%;
  background: #70ada5;
  border-radius: 8px;
}

/* ==================== PROFILE ==================== */

.profile-page {
  padding: 55px;
  text-align: center;
}

.profile-page h2 {
  color: var(--ink);
  font-size: 2.7rem;
}

.profile-card {
  margin: 30px auto;
  padding: 35px;
  max-width: 450px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 24px;
}

.profile-card h3 {
  font-size: 1.5rem;
  color: var(--ink);
}

.profile-card p {
  margin: 12px 0 22px;
}

.profile-avatar img {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft);
  border: 2px solid var(--line);
  font-size: 2.2rem;
}

.profile-card > #profile-email {
  color: #72807c;
  font-size: 0.95rem;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 25px 0;
}

.profile-stats div {
  padding: 14px 8px;
  border-radius: 16px;
  background: var(--soft);
  border: 1px solid var(--line);
}

.profile-stats strong,
.profile-stats span {
  display: block;
}

.profile-stats strong {
  color: var(--ink);
  font-size: 1.35rem;
}

.profile-stats span {
  margin-top: 4px;
  color: #72807c;
  font-size: 0.75rem;
}

/* ==================== REVEAL ==================== */

.reveal-view {
  text-align: center;
  padding: 12px 20px;
}

.reveal-view {
  position: relative;
}

.reveal-view .close {
  position: absolute;
  top: 20px;
  right: 30px;
}

.reveal-view h2 {
  font-size: 2.6rem;
  color: var(--ink);
  margin-bottom: 55px;
}

.reveal-card {
  width: min(550px, 90vw);
  min-height: 390px;
  margin: auto;
  border: 3px solid #8ed7cf;
  border-radius: 22px;
  background: linear-gradient(#edf6f3, #fbfffd);
  padding: 45px 20px 30px;
}

.reveal-card img {
  display: block;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 10px 15px #627f7625);
}

.reveal-card .reward-type {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: #5d756d;
  margin: 14px auto 4px;
  text-align: center;
  letter-spacing: 0.5px;
}

.reveal-card h3 {
  color: var(--ink);
  font-size: 1.7rem;
  margin: 5px;
}

.reveal-card p {
  font-size: 1.25rem;
  margin: 10px;
}

.reveal-card p:last-child {
  margin-top: 28px;
}

#reward-detail {
  color: #66736f;
  font-size: 1rem;
  min-height: 1.2em;
}

.reveal-actions {
  width: min(550px, 90vw);
  margin: 66px auto;
  display: grid;
  gap: 12px;
}

/* ==================== MODALS ==================== */

.modal {
  position: fixed;
  inset: 0;
  background: #23484050;
  display: grid;
  place-items: center;
  z-index: 10;
  padding: 20px;
}

.modal-card {
  position: relative;
  width: min(420px, 92vw);
  text-align: center;
  border: 3px solid var(--line);
  border-radius: 24px;
  padding: 40px 26px 30px;
  background: linear-gradient(#e6f2e2 0 130px, #fcfffd 130px);
  box-shadow: 0 20px 40px #23484030;
}

.close {
  position: absolute;
  right: 20px;
  top: 12px;
  font-size: 2.5rem;
}

.cat-portrait {
  height: 130px;
  width: 130px;
  background: white;
  border: 3px solid #70ada5;
  border-radius: 50%;
  margin: -30px auto 20px;
  overflow: hidden;
}

.cat-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-card h2 {
  color: var(--ink);
  font-size: 1.9rem;
}

.found {
  display: inline-block;
  background: #e5f8f2;
  color: #396c65;
  border-radius: 18px;
  padding: 7px 17px;
  margin: 10px;
}

.trait {
  border: 2px solid #e6edeb;
  border-radius: 30px;
  padding: 14px;
  margin: 25px auto;
  max-width: 470px;
  font-size: 1.1rem;
}

.modal blockquote {
  margin: 35px 0 48px;
  background: #eef8ef;
  border: 1px solid #a6d19f;
  border-radius: 20px;
  padding: 32px;
  font-size: 1.25rem;
}

.settings {
  background: #fff;
}

.settings p {
  margin: 15px 0 25px;
}

.settings .text-button {
  margin-top: 18px;
}

/* ==================== MOBILE ==================== */

@media (max-width: 650px) {
  header {
    height: 72px;
    padding: 0 14px;
  }

  .brand {
    font-size: 1.35rem;
  }

  nav {
    gap: 14px;
  }

  .nav-link {
    font-size: 0.9rem;
  }

  .streak {
    margin: 12px;
    font-size: 1.1rem;
  }

  .streak small {
    display: none;
  }

  .auth-brand h1 {
    font-size: 2.8rem;
  }

  .auth-card {
    padding: 30px 25px;
  }

  .timer-ring {
    width: 300px;
    border-width: 18px;
  }

  .timer-inner {
    width: 160px;
  }

  .durations {
    margin-top: 35px;
    gap: 8px;
  }

  .durations button {
    padding: 11px 15px;
  }

  .controls {
    margin-top: 35px;
  }

  .house-heading {
    padding-top: 28px;
  }

  .house-heading h2 {
    font-size: 2.1rem;
  }

  .room-tile {
    width: 96px;
  }

  .reveal-view h2 {
    margin-bottom: 25px;
  }

  .reveal-actions {
    margin: 35px auto;
  }

  .intention-field {
    width: min(92vw, 420px);
  }

  .profile-page {
    padding: 35px 18px;
  }

  .profile-stats {
    gap: 6px;
  }

  .profile-stats div {
    padding: 11px 4px;
  }

  .profile-stats strong {
    font-size: 1.1rem;
  }

  .profile-stats span {
    font-size: 0.65rem;
  }

  .modal-card {
    padding: 45px 22px 30px;
  }
}