:root {
  --pink-1: #ff6b9c;
  --pink-2: #ff99c1;
  --bg: #fff5f7;
  --text: #333;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: var(--bg);
  color: var(--text);
}

.container { max-width: 960px; margin: 0 auto; padding: 1rem; }

.header {
  background: linear-gradient(135deg, var(--pink-1), var(--pink-2));
  color: white;
  padding: 1rem 0;
  position: relative;
  overflow: hidden;
}

.header .subtitle { opacity: 0.9; }
.nav { margin-top: .5rem; display: flex; gap: 1rem; }
.nav a { color: #fff; text-decoration: none; font-weight: 600; }
.nav a[aria-current="page"] { text-decoration: underline; }
.nav a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 6px; }

.hero { text-align: center; padding: 2rem 0; }
.quote { font-size: 1.1rem; margin-top: .5rem; }
.lovemeter { margin-top: 1rem; }
.lovemeter .label { font-weight: 600; margin-right: .5rem; }
.lovemeter .value { background: #fff; color: var(--pink-1); padding: .25rem .5rem; border-radius: 999px; }

.cta { margin-top: 1rem; }
.button {
  display: inline-block;
  background: var(--pink-1);
  color: #fff;
  padding: .75rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.button:hover { filter: brightness(1.05); }
.button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; }
.cute-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 1rem;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.cute-card:hover { transform: translateY(0) scale(1.02); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  transform: translateY(8px) rotateX(0deg);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.card:hover { transform: translateY(0) rotateX(2deg); }
.card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.card .info { padding: .75rem; }
.card .title { font-weight: 700; margin: 0 0 .25rem; }
.card .caption { margin: 0; font-size: .9rem; opacity: .8; }
.tags { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.tag { background: #ffe2ec; color: var(--pink-1); padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; }

.empty { text-align: center; padding: 2rem; color: #777; }
.hidden { display: none; }

.footer { text-align: center; padding: 2rem 0; color: #555; }

@keyframes floatHearts {
  0% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-4px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.7; }
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  background: #111;
  color: #fff;
  padding: .5rem .75rem;
  border-radius: 10px;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.skip-link:focus { top: 8px; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* Road of Cuteness */
.road-container { display: flex; flex-direction: column; gap: 1rem; }
.road-stage {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  padding: .75rem;
  overflow: hidden;
}
.road-stage.polaroid { background: #fff; }
.road-photo {
  width: 100%;
  height: clamp(220px, 48vh, 520px);
  object-fit: contain;
  display: block;
  border-radius: 12px;
  position: relative;
  z-index: 1;
}
.decor-layer {
  position: absolute;
  /* sisakan ruang kecil untuk caption di bawah */
  inset: .5rem .5rem 3.25rem .5rem;
  z-index: 2;
  pointer-events: none;
}
.decor-layer .sparkle,
.decor-layer .bubble,
.decor-layer .petal,
.decor-layer .sticker {
  position: absolute;
  user-select: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.06));
}
.decor-layer .sparkle { font-size: 16px; animation: sparkleTwinkle 2.2s ease-in-out infinite; }
.decor-layer .bubble { font-size: 18px; animation: bubbleUp 6s linear infinite; opacity: .85; }
.decor-layer .petal { font-size: 18px; animation: driftPetal 8s ease-in-out infinite; opacity: .9; }
.decor-layer .sticker { font-size: 22px; }
.polaroid .road-photo {
  background: #fff;
  padding: 8px 8px 24px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
  border-radius: 6px;
  transform: rotate(-1deg);
}
.road-caption { margin-top: .5rem; font-size: .95rem; opacity: .9; }

.road-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.road-progress { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; flex: 1 1 auto; }
.progress { width: 160px; height: 8px; background: #ffe2ec; border-radius: 999px; overflow: hidden; }
.progress .bar { height: 100%; background: var(--pink-1); width: 0; }
.theme-picker label { font-weight: 600; margin-right: .35rem; }

#road-progress { white-space: nowrap; font-variant-numeric: tabular-nums; }

.confetti-heart {
  position: absolute;
  font-size: 1.2rem;
  animation: floatHearts 2.2s ease-in-out;
}

@keyframes sparkleTwinkle {
  0%, 100% { transform: scale(.9) rotate(0deg); opacity: .6; }
  50% { transform: scale(1.15) rotate(8deg); opacity: 1; }
}
@keyframes bubbleUp {
  0% { transform: translateY(8px) scale(.9); opacity: .3; }
  50% { opacity: .75; }
  100% { transform: translateY(-80px) scale(1.05); opacity: 0; }
}
@keyframes driftPetal {
  0% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(12px,-18px) rotate(12deg); }
  100% { transform: translate(-6px,-36px) rotate(-10deg); }
}

.mini-game { margin-top: .5rem; }
.no-game {
  position: relative;
  height: 90px;
  margin-top: .5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem;
}
.btn-no { position: absolute; left: 120px; top: 24px; }

.mini-toggle { margin-bottom: .5rem; }
.catch-game { display: flex; flex-direction: column; gap: .5rem; }
.catch-controls { display: flex; align-items: center; gap: .75rem; }
.score { font-weight: 600; }
.catch-area {
  position: relative;
  height: 180px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #ffe2ec;
  overflow: hidden;
}
.heart-item {
  position: absolute;
  top: -24px;
  font-size: 1.4rem;
  cursor: pointer;
  user-select: none;
  animation: fallHeart linear forwards;
}
.heart-item:focus { outline: 2px solid var(--pink-1); outline-offset: 2px; }

.compliment-game { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.compliment-game .input { flex: 1 1 240px; padding: .5rem .75rem; border-radius: 8px; border: 1px solid #ffd1df; }
.compliment-game .error { color: #c62828; min-height: 1.25rem; }

@keyframes floatHearts {
  0% { transform: translateY(0) scale(1); opacity: .95; }
  50% { transform: translateY(-30px) scale(1.08); opacity: .9; }
  100% { transform: translateY(-60px) scale(1.12); opacity: 0; }
}

@keyframes fallHeart {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(220px); opacity: .95; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-heart { animation: none; }
  .heart-item { animation: none; }
  .decor-layer .sparkle,
  .decor-layer .bubble,
  .decor-layer .petal { animation: none; }
}

/* Road themes */
.theme-pastel-love .road-stage {
  background: linear-gradient(135deg, #ffe8f1, #fff);
}
.theme-starry .road-stage {
  background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.8) 2px, transparent 3px),
                    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.8) 1.5px, transparent 3px),
                    linear-gradient(135deg, #fef3f7, #fff);
  background-size: 24px 24px, 28px 28px, auto;
}
.theme-polaroid .road-stage { background: #fff; }

/* Responsiveness improvements */
.controls-left { display: flex; gap: .5rem; flex-wrap: wrap; }
.controls-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.road-controls { flex-wrap: wrap; }
.road-controls .button { min-width: 112px; }

@media (max-width: 640px) {
  .road-controls { flex-direction: column; align-items: stretch; gap: .75rem; }
  .controls-left { order: 2; justify-content: space-between; }
  .controls-right { order: 1; width: 100%; justify-content: space-between; }
  .progress { width: 100%; }
  .theme-picker { width: 100%; }
  .theme-picker select { width: 100%; }
  .no-game { height: 120px; }
  .catch-area { height: clamp(140px, 36vh, 220px); }
  .compliment-game { flex-direction: column; align-items: stretch; }
  .compliment-game .input, .compliment-game .button { width: 100%; }
}

/* Fullscreen celebration */
.celebration-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: rgba(255,245,247,.55);
  backdrop-filter: saturate(1.15) blur(1px);
}
.celebration-piece {
  position: absolute;
  will-change: transform, opacity;
  font-size: 18px;
  animation: celebrateFall var(--dur, 3.2s) linear forwards;
}
.celebration-burst {
  position: absolute;
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255,105,180,.25), 0 0 0 12px rgba(255,153,193,.18), 0 0 0 18px rgba(255,210,230,.12);
  opacity: .9;
  animation: celebrateBurst 900ms ease-out forwards;
}
@keyframes celebrateFall {
  0% { transform: translateY(-12vh) rotate(0deg) scale(.9); opacity: .95; }
  50% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg) scale(1); opacity: .95; }
}
@keyframes celebrateBurst {
  0% { transform: scale(.2); opacity: 0; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .celebration-piece, .celebration-burst { animation: none; }
  .celebration-overlay { background: transparent; backdrop-filter: none; }
}



/* Map/Achievements/Journal/Reminders styles removed (module deprecated in Tahap 6A) */