:root {
  --bg: #fdfaf7;
  --ink: #1c2130;
  --border-gray: #ddd6cf;
  --font-body: 'Baloo 2', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
}

.top-bar {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.top-bar-link {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.65;
}

.top-bar-link:hover,
.top-bar-link:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.top-bar-account {
  position: relative;
}

.top-bar-account-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  opacity: 0.65;
}

.top-bar-account-summary::-webkit-details-marker {
  display: none;
}

.top-bar-account-summary:hover,
.top-bar-account-summary:focus-visible {
  opacity: 1;
}

.top-bar-account-email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-bar-account-summary::after {
  content: '\25BE';
  font-size: 10px;
  transition: transform 0.15s ease;
}

.top-bar-account[open] > .top-bar-account-summary::after {
  transform: rotate(-180deg);
}

.top-bar-account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1.5px solid var(--border-gray);
  border-radius: 8px;
  padding: 6px;
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

.top-bar-account-menu a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.top-bar-account-menu a:hover {
  background: #faf6f2;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: min(18px, 2.5vw) min(18px, 2.5vw) min(14px, 1.94vw);
  overflow: hidden;
}

.full-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Header ---------- */

.header { margin: 0; }

/* ---------- Body layout ---------- */

.tracker-body {
  display: flex;
  align-items: flex-start;
}

.sidebar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar img {
  display: block;
  width: 100%;
  height: auto;
}

/* Scale with viewport width (capped at the desktop value) rather than a
   fixed px or a single breakpoint swap. The grid column is fluid (flex:1),
   so a fixed sidebar width only stays proportional to it at exactly the
   width this was tuned at — anywhere else the two drift apart and the
   bottom banner (which aligns to the tallest column) stops lining up with
   the shorter ones. Scaling both at the same rate keeps them matched at
   every width, including mobile. */
.sidebar-left { width: min(118px, 16.4vw); gap: 0; }
.sidebar-right { width: min(126px, 17.5vw); }

.grid-column {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Number grid (native text) ---------- */

.cell-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  border-top: 1.5px solid var(--border-gray);
  border-left: 1.5px solid var(--border-gray);
}

.cell {
  position: relative;
  border-right: 1.5px solid var(--border-gray);
  border-bottom: 1.5px solid var(--border-gray);
  aspect-ratio: 1 / 0.883;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  background: #fff;
  cursor: pointer;
  user-select: none;
}

.cell:hover { background: #faf6f2; }

.cell:focus-visible {
  outline: 2px solid #d81e2c;
  outline-offset: -2px;
}

/* ---------- Hand-drawn X mark ---------- */

.cross-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: rotate(var(--rot, 0deg));
  overflow: visible;
}

.cross-mark .stroke {
  fill: none;
  stroke: #d81e2c;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.cross-mark .stroke1 {
  transition: stroke-dashoffset 0.26s ease-out;
}

.cross-mark .stroke2 {
  transition: stroke-dashoffset 0.26s ease-out 0.22s;
}

.cross-mark.drawn .stroke1,
.cross-mark.drawn .stroke2 {
  stroke-dashoffset: 0;
}

.divider { margin: 0; }

/* ---------- Bottom ---------- */

.bottom-banner { margin: 0; }
.footer { margin: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 520px) {
  .cell { font-size: 9.5px; }
}

/* ---------- Auth pages (login/register) ---------- */

.auth-page {
  max-width: 360px;
  padding-top: 60px;
}

.auth-title {
  font-size: 28px;
  margin: 0 0 20px;
  text-align: center;
}

.auth-error {
  background: #fce8e8;
  color: #a4222c;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 16px;
}

.auth-success {
  background: #e6f4ea;
  color: #256029;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 16px;
}

.auth-hint {
  font-size: 11.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
  margin: 4px 0 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-form label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 10px;
}

.auth-form input {
  font: inherit;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1.5px solid var(--border-gray);
  border-radius: 8px;
}

.auth-form button {
  margin-top: 18px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
}

.auth-form button:hover {
  opacity: 0.9;
}

.auth-alt {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}

.auth-alt a {
  color: var(--ink);
}

/* ---------- Login nudge modal ---------- */

.login-nudge {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-nudge[hidden] {
  display: none;
}

.login-nudge-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 33, 48, 0.45);
}

.login-nudge-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 30px 24px 24px;
  max-width: 300px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.login-nudge-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.5;
  padding: 4px;
}

.login-nudge-close:hover,
.login-nudge-close:focus-visible {
  opacity: 1;
}

.login-nudge-heart {
  display: block;
  margin: 0 auto 12px;
  width: 46px;
  height: auto;
}

.login-nudge-text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.login-nudge-text a {
  color: #d81e2c;
  text-decoration: underline;
}

/* ---------- Milestone glow (50+ and 100+ boxes filled) ---------- */

.divider-milestone {
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition: outline-color 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
}

.divider-milestone.milestone-active {
  animation-duration: 2.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.divider-milestone-50.milestone-active {
  animation-name: milestone-pulse-gold;
}

.divider-milestone-100.milestone-active {
  animation-name: milestone-pulse-pink;
}

@keyframes milestone-pulse-gold {
  0%, 100% {
    outline-color: rgba(255, 165, 0, 0.75);
    box-shadow: inset 0 0 8px 2px rgba(255, 165, 0, 0.35);
    filter: brightness(1.05);
  }
  50% {
    outline-color: rgba(255, 140, 0, 1);
    box-shadow: inset 0 0 12px 4px rgba(255, 140, 0, 0.55);
    filter: brightness(1.2);
  }
}

@keyframes milestone-pulse-pink {
  0%, 100% {
    outline-color: rgba(219, 39, 119, 0.75);
    box-shadow: inset 0 0 8px 2px rgba(219, 39, 119, 0.35);
    filter: brightness(1.05);
  }
  50% {
    outline-color: rgba(190, 24, 93, 1);
    box-shadow: inset 0 0 12px 4px rgba(190, 24, 93, 0.55);
    filter: brightness(1.2);
  }
}

/* ---------- Site footer ---------- */

.site-footer {
  text-align: center;
  padding: 16px 0 4px;
  font-size: 12px;
}

.site-footer a {
  color: var(--ink);
  opacity: 0.6;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.policy-page p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.policy-updated {
  font-size: 12px;
  opacity: 0.6;
}