@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Press+Start+2P&display=swap');

/* ===== DESIGN TOKENS ===== */
:root {
  --bg:         #FFF8EE;
  --bg2:        #F5EDD8;
  --bg3:        #E8DCC8;
  --coral:      #E83845;
  --coral-lt:   #FF6B6D;
  --coral-dk:   #A82028;
  --forest:     #1D3D2F;
  --forest-lt:  #2D5A44;
  --gold:       #F2A900;
  --gold-lt:    #FFD166;
  --gold-dk:    #A87800;
  --sage:       #5C8C6A;
  --sage-lt:    #A8C8A8;
  --sky:        #48A8C8;
  --peach:      #F0C8A8;
  --ink:        #120C08;
  --ink-muted:  #7A6A58;
  --white:      #FFFDF8;
  --shadow-sm:  0 1px 4px rgba(18,12,8,0.08);
  --shadow:     0 4px 18px rgba(18,12,8,0.10), 0 1px 4px rgba(18,12,8,0.06);
  --shadow-lg:  0 10px 40px rgba(18,12,8,0.14), 0 3px 10px rgba(18,12,8,0.08);
  --radius:     10px;
  --radius-lg:  18px;
  --radius-xl:  28px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  min-height: 100vh;
  line-height: 1.6;
}

/* ===== TYPOGRAPHY ===== */
.serif { font-family: 'DM Serif Display', Georgia, serif; }
.pixel { font-family: 'Press Start 2P', monospace; line-height: 1.8; }

/* ===== PIXEL CHARACTERS ===== */
.pixel-char {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 88px; height: 88px;
}
.pixel-char.large { width: 120px; height: 120px; }
.pixel-char.xl    { width: 160px; height: 160px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.35rem;
  border: none; border-radius: var(--radius);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.92rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn-primary {
  background: var(--coral); color: var(--white);
  box-shadow: 0 3px 0 var(--coral-dk);
}
.btn-primary:hover { background: var(--coral-lt); box-shadow: 0 3px 0 var(--coral-dk), var(--shadow); }

.btn-forest {
  background: var(--forest); color: var(--white);
  box-shadow: 0 3px 0 #0D2018;
}
.btn-forest:hover { background: var(--forest-lt); }

.btn-gold {
  background: var(--gold); color: var(--ink);
  box-shadow: 0 3px 0 var(--gold-dk);
}
.btn-gold:hover { background: var(--gold-lt); }

.btn-ghost {
  background: transparent; color: var(--forest);
  border: 2px solid var(--bg3);
}
.btn-ghost:hover { border-color: var(--forest); background: var(--bg2); }

.btn-white {
  background: var(--white); color: var(--ink);
  border: 2px solid var(--bg3);
}

.btn-sm { padding: 0.38rem 0.85rem; font-size: 0.82rem; }
.btn-lg { padding: 0.9rem 2rem; font-size: 1.05rem; }

/* ===== CARD ===== */
.card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow);
  border: 1.5px solid var(--bg3);
}

/* ===== INPUT ===== */
.input {
  width: 100%; padding: 0.68rem 1rem;
  border: 2px solid var(--bg3); border-radius: var(--radius);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.97rem; background: var(--white);
  color: var(--ink); outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(232,56,69,0.12); }
.input::placeholder { color: var(--ink-muted); opacity: 0.55; }
select.input { cursor: pointer; }
textarea.input { resize: vertical; min-height: 72px; }

/* ===== TOPBAR ===== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
  background: var(--forest);
  z-index: 50;
  box-shadow: 0 2px 16px rgba(18,12,8,0.22);
}
.topbar-logo { font-size: 0.52rem; color: var(--gold-lt); letter-spacing: 0.04em; }
.topbar-user { display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; color: rgba(255,253,248,0.65); }
.topbar-user strong { color: var(--white); }

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(18,12,8,0.62);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; backdrop-filter: blur(6px);
  animation: overlay-in 0.2s ease-out;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--white); border-radius: var(--radius-xl);
  padding: 2rem; max-width: 460px; width: 90%;
  box-shadow: var(--shadow-lg); border: 1.5px solid var(--bg3);
  animation: modal-pop 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modal-pop {
  from { transform: scale(0.88) translateY(12px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.modal-title { font-family: 'DM Serif Display', serif; font-size: 1.4rem; color: var(--forest); }
.modal-close {
  width: 30px; height: 30px; border: none;
  background: var(--bg2); border-radius: 50%;
  cursor: pointer; font-size: 1rem; color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.modal-close:hover { background: var(--bg3); }

/* ===== BADGE ===== */
.badge {
  display: inline-flex; align-items: center;
  padding: 0.22rem 0.6rem; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em;
}
.badge-coral  { background: rgba(232,56,69,0.12); color: var(--coral); }
.badge-forest { background: rgba(29,61,47,0.12); color: var(--forest); }
.badge-gold   { background: rgba(242,169,0,0.15); color: var(--gold-dk); }
.badge-sage   { background: rgba(92,140,106,0.12); color: var(--sage); }
.badge-sky    { background: rgba(72,168,200,0.12); color: var(--sky); }

/* ===== DIVIDER ===== */
.divider { height: 1.5px; background: linear-gradient(to right, transparent, var(--bg3), transparent); margin: 1.25rem 0; }

/* ===== ANIMATIONS ===== */
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,56,69,0.55); }
  50%      { box-shadow: 0 0 0 14px rgba(232,56,69,0); }
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes shake {
  0%,100%  { transform: translateX(0); }
  20%,60%  { transform: translateX(-8px); }
  40%,80%  { transform: translateX(8px); }
}
@keyframes scale-in {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}

.animate-bounce     { animation: bounce 1.4s ease-in-out infinite; }
.animate-shake      { animation: shake 0.4s ease-in-out; }
.animate-scale-in   { animation: scale-in 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.animate-fade-in    { animation: fade-in 0.5s ease-out forwards; }
.animate-pulse-glow { animation: pulse-glow 2.2s ease-in-out infinite; }
.animate-float      { animation: float 3s ease-in-out infinite; }

.dot-pattern {
  background-image: radial-gradient(circle, var(--bg3) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}