:root {
  /* Warm, poster-like palette */
  --bg: #f6e9da;            /* paper beige */
  --text: #3a2b22;          /* deep brown */
  --accent: #e09a54;        /* warm amber */
  --accent-contrast: #2b1c10;
  --panel: rgba(255,255,255,0.86);
  --panel-blur: 8px;
  --border: rgba(90,65,45,0.18);
  --frame: #b77b49;         /* window frame */
  --wood: #cfa980;          /* desk wood */
  --sky-top: #cde6f5;       /* sky gradient */
  --sky-bottom: #f3efe0;
  --sun: #f4c98c;
  --night-top: #0c1c3b;
  --night-bottom: #0a1224;
  --moon: #f0f3ff;
  --star: rgba(255,255,255,0.9);

  --timer-size: clamp(56px, 11vw, 140px);
  --tea-level: 0.0; /* 0..1 controlled by JS */
}

:root.high-contrast {
  --bg: #ffffff;
  --text: #111111;
  --panel: #ffffff;
  --border: #111;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, Noto Sans, 'Apple Color Emoji','Segoe UI Emoji';
  color: var(--text);
  background: var(--bg);
}

/* Subtle vignette to add depth without an image */
body::before { content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% 20%, rgba(0,0,0,0.02), transparent 50%),
              radial-gradient(100% 70% at 50% 100%, rgba(0,0,0,0.03), transparent 55%);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
}
.app-header h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .2px; }

.grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 24px; }

#scene {
  position: relative; min-height: 520px; border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(calc(var(--panel-blur) * 1.2));
  backdrop-filter: blur(calc(var(--panel-blur) * 1.2));
}

/* Window & sky */
.window { position: absolute; inset: 24px 24px auto 24px; height: 62%; border: 10px solid var(--frame); border-radius: 18px; background: #f7efe5; box-shadow: inset 0 0 0 6px rgba(255,255,255,0.45), 0 6px 18px rgba(0,0,0,0.05); }
.sky { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)); transition: background 600ms ease; }
.sky.goal-sunset::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,167,81,0.3), rgba(111,72,190,0.25)); mix-blend-mode: soft-light; }
.sun {
  position: absolute; width: 70px; height: 70px; left: 10px; top: 10px; border-radius: 50%;
  background: var(--sun); opacity: 0.0; box-shadow: 0 0 0 6px rgba(255,255,255,0.35) inset;
  transform: translate3d(0,0,0);
  /* UPDATED: Removed transform transition */
  transition: opacity 1s ease;
  will-change: transform;
}
.moon {
  position: absolute; width: 56px; height: 56px; left: 10px; top: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, var(--moon) 60%, #d9def9 100%);
  box-shadow: 0 0 20px rgba(255,255,255,0.2); opacity: 0.0;
  transform: translate3d(0,0,0);
  /* UPDATED: Removed transform transition */
  transition: opacity 1s ease;
  will-change: transform;
}
.stars { position: absolute; inset: 0; opacity: 0; transition: opacity 800ms ease; background-image: radial-gradient(1px 1px at 10% 20%, var(--star), transparent 40%),
                  radial-gradient(1px 1px at 30% 80%, var(--star), transparent 40%),
                  radial-gradient(1px 1px at 50% 40%, var(--star), transparent 40%),
                  radial-gradient(1px 1px at 70% 60%, var(--star), transparent 40%),
                  radial-gradient(1px 1px at 80% 25%, var(--star), transparent 40%),
                  radial-gradient(1px 1px at 20% 55%, var(--star), transparent 40%),
                  radial-gradient(1px 1px at 85% 78%, var(--star), transparent 40%),
                  radial-gradient(1px 1px at 40% 70%, var(--star), transparent 40%),
                  radial-gradient(1px 1px at 60% 30%, var(--star), transparent 40%),
                  radial-gradient(1px 1px at 15% 85%, var(--star), transparent 40%);
}
.sky[data-mode="night"] { background: linear-gradient(180deg, var(--night-top), var(--night-bottom)); }
.sky[data-mode="night"] .stars { opacity: 0.9; }
.sky[data-mode="night"] .moon { opacity: 0.95; }
.sky[data-mode="day"] .sun { opacity: 0.95; }
.cloud { position: absolute; top: 20%; width: 160px; height: 60px; background: #fff; border-radius: 40px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)); opacity: .95; }
.c1 { left: -180px; animation: drift 40s linear infinite; }
.c2 { top: 45%; left: -220px; width: 200px; animation: drift 55s linear infinite; }
.c3 { top: 65%; left: -160px; width: 140px; animation: drift 48s linear infinite; }
@keyframes drift { to { transform: translateX(140%); } }
.bird { position: absolute; top: 30%; left: -40px; width: 28px; height: 8px; background: transparent; border-radius: 50%; animation: bird 18s linear infinite; }
@keyframes bird { 0% { transform: translateX(0) } 100% { transform: translateX(1200px) } }
.sill { position: absolute; left: 16px; right: 16px; bottom: -10px; height: 22px; background: #d7b795; border-radius: 8px; box-shadow: 0 6px 10px rgba(0,0,0,0.04) inset; }

/* Reduced motion or disabled background */
@media (prefers-reduced-motion: reduce) {
  .sun, .moon { transition: none; }
  .cloud, .bird { animation: none !important; }
}
body.no-anim-bg .sun, body.no-anim-bg .moon { transition: none; }
body.no-anim-bg .cloud, body.no-anim-bg .bird { animation: none !important; }

/* Desk + mug */
.desk { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, rgba(219,184,144,0.6), rgba(193,153,110,0.6)); }
.mug { position: absolute; left: 84px; bottom: 48px; width: 132px; height: 122px; background: var(--accent); border-radius: 14px; transform: rotate(0.5deg); box-shadow: inset 0 -10px 0 rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.08); }
.mug::after { content: ""; position: absolute; right: -26px; top: 36px; width: 50px; height: 36px; border: 8px solid var(--accent); border-left-color: transparent; border-radius: 50%; }
.tea { position: absolute; left: 8px; right: 8px; bottom: 8px; height: calc( var(--tea-level) * (100% - 16px) ); background: #6d3f20; border-radius: 6px; transition: height .2s linear; }

.steam { position: absolute; left: 36px; top: -20px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.8); filter: blur(2px); opacity: 0; }
.s1 { animation: steam 5s ease-in-out infinite; }
.s2 { left: 60px; animation: steam 6s ease-in-out infinite 1s; }
.s3 { left: 20px; animation: steam 7s ease-in-out infinite 2s; }
@keyframes steam {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  10% { opacity: .7; }
  100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
}
.break-active .steam { opacity: 1; }

/* HUD */
#hud.overlay { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; padding-top: 36px; }
.timer { font-size: var(--timer-size); font-weight: 800; letter-spacing: 1px; text-align: center; color: #3b2c22; text-shadow: 0 1px 0 rgba(255,255,255,0.75); font-family: ui-serif, Georgia, 'Times New Roman', Times, serif; font-variant-numeric: tabular-nums; }

.controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
button { border-radius: 22px; padding: 12px 22px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; -webkit-backdrop-filter: blur(var(--panel-blur)); backdrop-filter: blur(var(--panel-blur)); }
button.primary { background: linear-gradient(180deg, #f6cd97, #e5a45f); color: var(--accent-contrast); border-color: #e2a85e; font-weight: 800; letter-spacing: .3px; box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
button.ghost { background: transparent; }
button.link { background: transparent; border: none; padding: 6px 10px; color: #7c5a43; text-decoration: underline; font-weight: 600; }
button.link:disabled { visibility: hidden; }
button.hidden { display: none; }
button:disabled { opacity: .6; cursor: not-allowed; }

.mood-line { text-align: center; color: #6b4b3a; margin: 6px 0 0; font-weight: 600; }
.progress { text-align: center; padding: 6px 0; opacity: .9; }

/* Quick breaks bar */
.quick-breaks { display: flex; gap: 8px; justify-content: center; }

/* Dialog */
dialog { border: 1px solid var(--border); border-radius: 16px; padding: 16px; width: min(90vw, 420px); background: var(--panel); -webkit-backdrop-filter: blur(var(--panel-blur)); backdrop-filter: blur(var(--panel-blur)); }
dialog form { display: grid; gap: 12px; }
dialog menu { display: flex; gap: 8px; justify-content: flex-end; }

/* Message layers */
.msg-layer { position: fixed; left: 0; right: 0; pointer-events: none; z-index: 9999; display: flex; justify-content: center; gap: 8px; padding: 12px; }
#msg-top-center { top: 12px; }
#msg-bottom { bottom: 12px; }