@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@700;900&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #fffef5;
  --bg2:    #f7f6ee;
  --text:   #111110;
  --muted:  #888780;
  --border: #111110;
  --mono:   'DM Mono', monospace;
  --sans:   'Unbounded', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 3px solid var(--border);
  background: var(--bg); position: sticky; top: 0; z-index: 100;
}

.logo {
  font-family: var(--sans); font-size: 13px; font-weight: 900;
  color: var(--text); background: #ffe135; padding: 4px 10px;
  border: 2px solid var(--border); transform: rotate(-2deg);
  display: inline-block; text-decoration: none;
}

.nav-right { display: flex; align-items: center; gap: 12px; }

.nav-right a {
  font-family: var(--mono); font-size: 11px; font-style: italic; font-weight: 300;
  color: var(--text); border: 1.5px solid var(--border); padding: 4px 10px;
  border-radius: 20px; text-decoration: none; display: inline-block; transition: opacity .15s;
}
.nav-right a:nth-child(1) { background: #ff3cac; color: #fff; border-color: #ff3cac; transform: rotate(1.5deg); }
.nav-right a:nth-child(2) { background: #ffe135; transform: rotate(-1deg); }
.nav-right a:nth-child(3) { background: #3ddc84; transform: rotate(1deg); }

.nav-live { font-size: 10px; font-style: italic; font-weight: 300; color: var(--muted); display: flex; align-items: center; gap: 5px; }

.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #3ddc84; animation: pulse 2.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.2} }

.hero { padding: 40px 28px 0; position: relative; }

.sticker {
  position: absolute; top: 24px; right: 28px;
  background: #ff3cac; color: #fff;
  font-family: var(--sans); font-size: 8px; font-weight: 700;
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.3;
  transform: rotate(12deg); border: 2px solid var(--border);
}

.eyebrow { font-size: 10px; font-style: italic; font-weight: 300; color: var(--muted); letter-spacing: .15em; margin-bottom: 12px; display: block; }

h1 { font-family: var(--sans); font-weight: 900; line-height: 1; margin: 0; }
h1 .l1 { font-size: clamp(32px, 6vw, 64px); color: var(--text); display: block; }
h1 .l2 { font-size: clamp(24px, 5vw, 52px); display: inline-block; background: #3ddc84; color: var(--text); padding: 2px 12px; border: 2px solid var(--border); transform: rotate(-1.2deg) translateX(8px); margin-top: 6px; }
h1 .l3 { font-size: clamp(15px, 2.5vw, 26px); display: inline-block; color: #ff3cac; transform: rotate(0.8deg) translateX(16px); margin-top: 4px; font-style: italic; font-family: var(--mono); font-weight: 300; }

.hero-sub { font-size: 11px; font-style: italic; font-weight: 300; color: var(--muted); margin-top: 16px; line-height: 1.9; max-width: 380px; }

.blink { animation: blink 1.2s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.cards-wrap { padding: 32px 28px 0; display: flex; flex-wrap: wrap; align-items: flex-start; }

.card {
  border: 2.5px solid var(--border); padding: 16px 18px 14px;
  position: relative; transition: transform .12s;
  text-decoration: none; color: inherit; display: block;
}
.card:hover { z-index: 5; }

.card:nth-child(1) { background: #fff0fa; width: 38%; transform: rotate(-2.1deg) translate(4px, 0px); }
.card:nth-child(2) { background: #f0fff4; width: 28%; transform: rotate(1.5deg) translate(-8px, 12px); font-size: .9em; }
.card:nth-child(3) { background: #fffbe0; width: 32%; transform: rotate(-0.8deg) translate(-4px, -6px); }
.card:nth-child(4) { background: #f0f4ff; width: 30%; transform: rotate(2deg) translate(10px, 8px); font-size: .85em; }
.card:nth-child(5) { background: #fff4f0; width: 40%; transform: rotate(-1.3deg) translate(-6px, 4px); }
.card:nth-child(6) { background: #f4f0ff; width: 26%; transform: rotate(1.8deg) translate(2px, 10px); font-size: .88em; }

.card:nth-child(1):hover { transform: rotate(-2.1deg) translate(4px, -4px) scale(1.02); }
.card:nth-child(2):hover { transform: rotate(1.5deg) translate(-8px, 8px) scale(1.02); }
.card:nth-child(3):hover { transform: rotate(-0.8deg) translate(-4px, -10px) scale(1.02); }
.card:nth-child(4):hover { transform: rotate(2deg) translate(10px, 4px) scale(1.02); }
.card:nth-child(5):hover { transform: rotate(-1.3deg) translate(-6px, 0px) scale(1.02); }
.card:nth-child(6):hover { transform: rotate(1.8deg) translate(2px, 6px) scale(1.02); }

.card-accent { height: 3px; width: 28px; border-radius: 2px; margin-bottom: 8px; }
.card:nth-child(1) .card-accent { background: #ff3cac; }
.card:nth-child(2) .card-accent { background: #3ddc84; }
.card:nth-child(3) .card-accent { background: #ffe135; }
.card:nth-child(4) .card-accent { background: #a78bfa; }
.card:nth-child(5) .card-accent { background: #fb923c; }
.card:nth-child(6) .card-accent { background: #38bdf8; }

.card-num   { font-size: 9px; font-style: italic; font-weight: 300; color: #ccc; margin-bottom: 5px; }
.card-title { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 5px; line-height: 1.3; }
.card-desc  { font-size: 10px; font-weight: 300; font-style: italic; color: var(--muted); line-height: 1.6; }

#vote-wrap { padding: 40px 28px 0; }
#log-wrap  { padding: 32px 28px 0; }

.section-label { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.section-label::after { content: ''; flex: 1; height: 2px; background: var(--border); display: block; }

.vote-options { display: flex; flex-direction: column; gap: 8px; }
.vote-btn {
  background: var(--bg); border: 2px solid var(--border); border-radius: 8px;
  padding: 10px 14px; font-family: var(--mono); font-size: 11px; font-style: italic; font-weight: 300;
  color: var(--text); cursor: pointer; text-align: left;
  transition: background .15s, transform .1s;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
}
.vote-btn:hover:not(:disabled) { background: #ffe135; transform: rotate(-0.5deg); }
.vote-btn:disabled { cursor: default; }

.vote-bar-wrap { flex: 1; height: 3px; background: #eee; border-radius: 2px; overflow: hidden; min-width: 60px; }
.vote-bar { height: 100%; background: #ff3cac; border-radius: 2px; transition: width .6s ease; }
.vote-pct { font-size: 10px; color: var(--muted); min-width: 28px; text-align: right; }
.vote-total { font-size: 10px; font-style: italic; font-weight: 300; color: var(--muted); margin-top: 12px; }

.log-entry { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed #ddd; flex-wrap: wrap; }
.log-entry:last-child { border-bottom: none; }
.log-tag  { font-size: 9px; font-style: italic; font-weight: 300; color: var(--muted); border: 1.5px solid #ddd; padding: 2px 7px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.log-text { font-size: 11px; font-weight: 300; font-style: italic; color: var(--text); line-height: 1.65; }
.log-date { font-size: 10px; font-style: italic; color: var(--muted); white-space: nowrap; margin-left: auto; flex-shrink: 0; }

footer {
  padding: 18px 28px; border-top: 3px solid var(--border); margin-top: 48px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; font-style: italic; font-weight: 300; color: var(--muted);
}

.bob-wrap {
  position: fixed; bottom: 24px; right: 24px;
  width: 280px; z-index: 200;
  display: flex; flex-direction: column; align-items: flex-end;
}

.bob-bubble {
  background: #fff; border: 2.5px solid var(--border);
  border-radius: 16px 16px 4px 16px;
  padding: 14px 16px; margin-bottom: 10px;
  position: relative; width: 100%;
}
.bob-bubble::after  { content: ''; position: absolute; bottom: -13px; right: 20px; border-left: 11px solid transparent; border-top: 13px solid var(--border); }
.bob-bubble::before { content: ''; position: absolute; bottom: -10px; right: 21px; border-left: 10px solid transparent; border-top: 11px solid #fff; z-index: 1; }

.bob-text { font-size: 11px; font-weight: 300; font-style: italic; color: #222; line-height: 1.7; min-height: 36px; }

.bob-meta { font-size: 9px; color: #bbb; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.bob-tag  { background: #ffe135; color: var(--text); font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--border); font-style: normal; font-family: var(--sans); }

.bob-body { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; }
.bob-actions { display: flex; flex-direction: column; gap: 6px; }

.bob-btn {
  font-family: var(--mono); font-size: 9px; font-style: italic; font-weight: 300;
  background: #fff; border: 1.5px solid var(--border); padding: 5px 10px;
  border-radius: 20px; cursor: pointer; color: var(--text);
  transition: background .12s, transform .12s; white-space: nowrap;
}
.bob-btn:hover { background: #ffe135; transform: rotate(-1deg); }
.bob-btn.ask:hover { background: #ff3cac; color: #fff; border-color: #ff3cac; }

.bob-avatar {
  width: 54px; height: 54px; background: #ffe135;
  border: 2.5px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; cursor: pointer; flex-shrink: 0;
  animation: bobble 3s ease-in-out infinite; transition: transform .15s;
}
.bob-avatar:hover { animation: none; transform: scale(1.12) rotate(-8deg); }
@keyframes bobble { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.bob-hidden .bob-bubble,
.bob-hidden .bob-actions { display: none; }

.typing span { display: inline-block; width: 5px; height: 5px; background: #aaa; border-radius: 50%; margin: 0 2px; animation: dot 1.2s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

@media (max-width: 700px) {
  .nav { padding: 14px 18px; }
  .sticker { display: none; }
  .hero { padding: 32px 20px 0; }
  h1 .l2 { transform: rotate(-1.2deg) translateX(4px); }
  h1 .l3 { transform: rotate(0.8deg) translateX(8px); }
  .cards-wrap { padding: 24px 16px 0; }
  .card { width: 100% !important; transform: none !important; margin-bottom: 8px; }
  .card:hover { transform: translateY(-2px) !important; }
  #vote-wrap, #log-wrap { padding: 28px 20px 0; }
  footer { padding: 14px 20px; flex-direction: column; gap: 4px; align-items: flex-start; }
  .bob-wrap { width: 240px; bottom: 16px; right: 16px; }
  .log-date { margin-left: 0; width: 100%; }
}