/* Maragsa Medium — same self-hosted cut as notes.kdayno.com */
@font-face {
  font-family: "Maragsa Medium";
  src: url("assets/Maragsa-Medium.woff2") format("woff2");
  font-display: swap;
}

/* ---------------------------------------------------------------- theme */

:root {
  /* daytime sky gradient sampled from the game (deep blue -> pale aqua) */
  --bg: linear-gradient(180deg, #2e67c1 0%, #3776dd 20%, #4790f6 40%,
        #69b8f0 60%, #80d7e8 80%, #91ede2 100%);
  --text: #14304e;
  --muted: #29517a;
  --accent: #0a6e0e;

  /* scene palette — day (matched to Stardew Valley beach/island scenes) */
  --c-water: #2456c8;
  --c-water-deep: #1c46a8;
  --c-wave: #3d6fd8;
  --c-shallow: #55c8dc;
  --c-foam: #e8fcff;
  /* grass + sand sampled directly from the game (beach/lawn screenshot) */
  --c-sand: #e0a840;
  --c-sand-dark: #c89038;
  --c-sand-darker: #a87028;
  --c-sand-light: #e8b048;
  --c-grass: #589830;
  --c-grass-dark: #3f8026;
  --c-grass-light: #80c048;
  --c-leaf-dark: #2c6424;
  --c-leaf: #418c28;
  --c-leaf-light: #64ac38;
  --c-leaf-hi: #86c84c;
  --c-trunk-dark: #5a3315;
  --c-stone: #a8a8b0;
  --c-stone-light: #c9c9d2;
  --c-stone-dark: #74747e;
  --c-shell: #eda8bc;
  --c-shell-light: #fbdde6;
  --c-flower-w: #f4f8ff;
  --c-flower-y: #ffd94a;
  --c-shadow: rgba(25, 55, 25, 0.3);
}

[data-theme="dark"] {
  --bg: #0a0a0c;
  --text: #e8e4d8;
  --muted: #8d8875;
  --accent: #5b8dee;

  /* scene palette — night (cooler + dimmer, still saturated) */
  --c-water: #16336e;
  --c-water-deep: #102858;
  --c-wave: #234b94;
  --c-shallow: #2f7f96;
  --c-foam: #9fc0d8;
  --c-sand: #9e7830;
  --c-sand-dark: #8c6628;
  --c-sand-darker: #74501c;
  --c-sand-light: #a88034;
  --c-grass: #3f6d23;
  --c-grass-dark: #2d5c1b;
  --c-grass-light: #5c8a34;
  --c-leaf-dark: #204a1a;
  --c-leaf: #2f6520;
  --c-leaf-light: #487d28;
  --c-leaf-hi: #609238;
  --c-trunk-dark: #452a10;
  --c-stone: #7a7a88;
  --c-stone-light: #9a9aac;
  --c-stone-dark: #55555e;
  --c-shell: #b87e92;
  --c-shell-light: #cfa8b4;
  --c-flower-w: #c9d4e2;
  --c-flower-y: #d9b93f;
  --c-shadow: rgba(0, 0, 10, 0.4);
}

/* neutral mode: the day island on the original cream page — no sky, no
   clouds; the scene palette stays identical to light mode */
[data-theme="neutral"] {
  --bg: #f7f2e4;
  --text: #2b2b23;
  --muted: #7a745f;
  --accent: #ffa62b;
}

[data-theme="neutral"] .clouds {
  display: none;
}

[data-theme="neutral"] .theme-toggle {
  color: var(--muted);
}

[data-theme="neutral"] .theme-toggle:hover,
[data-theme="neutral"] .theme-toggle:focus-visible {
  color: var(--text);
}

/* ---------------------------------------------------------------- page */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: "Maragsa Medium", Georgia, serif;
  background: var(--bg) fixed;
  color: var(--text);
  transition: color 240ms ease;
  overflow-x: hidden;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wordmark {
  margin: 0.25rem 0 0;
  font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- scene */

.scene {
  position: relative;
  width: min(92vw, 560px);
}

.scene svg {
  display: block;
  width: 100%;
  height: auto;
  shape-rendering: crispEdges;
}

.scene rect {
  fill: currentColor;
}

.scene image {
  image-rendering: pixelated;
}

/* sprites can't follow the CSS palette, so dim them at night
   (the firepit's flicker animation overrides this — fire stays bright) */
[data-theme="dark"] .scene image {
  filter: brightness(0.72) saturate(0.9);
}

/* palette classes */
.c-water        { color: var(--c-water); }
.c-water-deep   { color: var(--c-water-deep); }
.c-wave         { color: var(--c-wave); }
.c-shallow      { color: var(--c-shallow); }
.c-foam         { color: var(--c-foam); }
.c-sand         { color: var(--c-sand); }
.c-sand-dark    { color: var(--c-sand-dark); }
.c-sand-darker  { color: var(--c-sand-darker); }
.c-sand-light   { color: var(--c-sand-light); }
.c-grass        { color: var(--c-grass); }
.c-grass-dark   { color: var(--c-grass-dark); }
.c-grass-light  { color: var(--c-grass-light); }
.c-leaf-dark    { color: var(--c-leaf-dark); }
.c-leaf         { color: var(--c-leaf); }
.c-leaf-light   { color: var(--c-leaf-light); }
.c-leaf-hi      { color: var(--c-leaf-hi); }
.c-trunk-dark   { color: var(--c-trunk-dark); }
.c-stone        { color: var(--c-stone); }
.c-stone-light  { color: var(--c-stone-light); }
.c-stone-dark   { color: var(--c-stone-dark); }
.c-shell        { color: var(--c-shell); }
.c-shell-light  { color: var(--c-shell-light); }
.c-flower-w     { color: var(--c-flower-w); }
.c-flower-y     { color: var(--c-flower-y); }
.c-shadow       { color: var(--c-shadow); }

/* interactive objects */
.obj {
  cursor: pointer;
  outline: none;
}

.obj:hover,
.obj:focus-visible {
  transform: translateY(-1.5px);
}

.obj:focus-visible {
  filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 1px var(--accent));
}

/* ---------------------------------------------------------------- motion */

.foam {
  animation: foam 2.8s steps(2, jump-none) infinite;
}

@keyframes foam {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.15; }
}

.sparkle {
  animation: sparkle 4.2s steps(2, jump-none) infinite;
}

@keyframes sparkle {
  0%, 88%, 100% { opacity: 0; }
  92%, 96%      { opacity: 0.85; }
}

.fire image {
  animation: fire-flicker 1.6s steps(2, jump-none) infinite;
}

@keyframes fire-flicker {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.05); }
}

/* campfire glow — night only */
.fire-glow {
  display: none;
  position: absolute;
  left: 38%;
  top: 38%;
  width: 24%;
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 158, 64, 0.32), transparent 62%);
  animation: glow 2.4s steps(2, jump-none) infinite;
}

[data-theme="dark"] .fire-glow {
  display: block;
}

@keyframes glow {
  0%, 100% { opacity: 0.93; }
  50%      { opacity: 1; }
}

/* stars — night only */
.stars {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
}

[data-theme="dark"] .stars {
  display: block;
}

.stars span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #e8e4d8;
  animation: twinkle 3.6s steps(2, jump-none) infinite;
}

.stars span:nth-child(2n)  { animation-delay: 0.9s; width: 2px; height: 2px; }
.stars span:nth-child(3n)  { animation-delay: 1.7s; }
.stars span:nth-child(5n)  { animation-delay: 2.6s; width: 2px; height: 2px; }

/* four-pointed sparkle stars (bright core, arms fading outward) */
.stars span.big {
  width: 2px;
  height: 2px;
  background: #fff;
  box-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.9), 0 2px 0 rgba(255, 255, 255, 0.9),
    -2px 0 0 rgba(255, 255, 255, 0.9), 2px 0 0 rgba(255, 255, 255, 0.9),
    0 -4px 0 rgba(255, 255, 255, 0.45), 0 4px 0 rgba(255, 255, 255, 0.45),
    -4px 0 0 rgba(255, 255, 255, 0.45), 4px 0 0 rgba(255, 255, 255, 0.45),
    0 -6px 0 rgba(255, 255, 255, 0.15), 0 6px 0 rgba(255, 255, 255, 0.15),
    -6px 0 0 rgba(255, 255, 255, 0.15), 6px 0 0 rgba(255, 255, 255, 0.15);
}

@keyframes twinkle {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.25; }
}

/* drifting sky clouds — day only, scattered like the night stars */
.clouds {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

[data-theme="dark"] .clouds {
  display: none;
}

.clouds span {
  position: absolute;
  background: center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: cloud-drift 40s ease-in-out infinite;
}

.clouds span.a {
  background-image: url("assets/cloud-sky-1.png");
  aspect-ratio: 56 / 26;
}

.clouds span.b {
  background-image: url("assets/cloud-sky-2.png");
  aspect-ratio: 38 / 20;
}

/* a slow looping wander: side to side with a gentle vertical bob */
@keyframes cloud-drift {
  0%   { transform: translate(-1.6vw, 0); }
  25%  { transform: translate(-0.4vw, 0.7vh); }
  50%  { transform: translate(1.6vw, -0.4vh); }
  75%  { transform: translate(0.5vw, 0.8vh); }
  100% { transform: translate(-1.6vw, 0); }
}

/* shooting star — night only; fired by script.js at random intervals */
.shooting-star {
  display: none;
  position: fixed;
  width: 2px;
  height: 2px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  /* four-pointed sparkle head + stepped pixel tail trailing up-left */
  box-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.9), 0 2px 0 rgba(255, 255, 255, 0.9),
    -2px 0 0 rgba(255, 255, 255, 0.9), 2px 0 0 rgba(255, 255, 255, 0.9),
    0 -4px 0 rgba(255, 255, 255, 0.45), 0 4px 0 rgba(255, 255, 255, 0.45),
    -4px 0 0 rgba(255, 255, 255, 0.45), 4px 0 0 rgba(255, 255, 255, 0.45),
    -6px -5px 0 rgba(255, 255, 255, 0.5),
    -10px -8px 0 rgba(255, 255, 255, 0.3),
    -14px -11px 0 rgba(255, 255, 255, 0.18),
    -18px -14px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .shooting-star {
  display: block;
}

.shooting-star.shoot {
  animation: shoot 1.2s linear forwards;
}

@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

@media (prefers-reduced-motion: reduce) {
  .foam, .sparkle, .fire image, .fire-glow, .stars span, .clouds span {
    animation: none;
  }
}

/* ---------------------------------------------------------------- tooltip */

.tooltip {
  position: absolute;
  padding: 24px 24px 20px 28px;
  font-size: 1.2rem;
  white-space: nowrap;
  color: #1f2735;
  text-align: center;
  /* pixel-art cloud sprite (scripts/make_cloud.py), stretched to fit */
  background: url("assets/cloud.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 2;
}

/* at night the label drifts in on fog instead of a daytime cloud */
[data-theme="dark"] .tooltip {
  background-image: url("assets/fog.png");
  color: #141b28;
}

/* ---------------------------------------------------------------- chrome */

.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.3rem;
  font-family: inherit;
  background: none;
  /* the toggle sits in the darkest part of the day sky — keep it bright */
  color: rgba(255, 255, 255, 0.85);
  border: none;
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: #ffffff;
}

[data-theme="dark"] .theme-toggle {
  color: var(--muted);
}

[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .theme-toggle:focus-visible {
  color: var(--text);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

footer {
  padding-bottom: 1.2rem;
}

footer nav {
  display: flex;
  gap: 1.4rem;
  font-size: 1.2rem;
}

footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

footer a:hover,
footer a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}