/* ParksRadar — Fan Favorites poll: a fun, branded, interactive toy. Scoped under .dp-root. */
.dp-root{--dp-line:#e6d6ba;--dp-bg:#fffdf8;--dp-ink:#4b3b28;--dp-brown:#7a4e26;--dp-green:#2f8f57;--dp-gold:#e6a52c;color:var(--dp-ink)}
.dp-root *{box-sizing:border-box}
.dp-head{margin:2px 0 12px;text-align:center}
.dp-h{margin:0 0 2px;font-size:1.25rem;color:var(--dp-brown);letter-spacing:.2px}
.dp-note{margin:0;font-size:.85rem;color:#8a7456}

/* category cards — big, tactile, bouncy */
.dp-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.dp-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  border:1px solid var(--dp-line);border-radius:18px;padding:15px 14px 13px;background:linear-gradient(180deg,#fffdf7,#fff5e4);
  box-shadow:0 2px 0 rgba(122,78,38,.06);transition:transform .12s cubic-bezier(.2,.9,.3,1.3),box-shadow .15s,border-color .15s}
.dp-card:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 10px 22px rgba(122,78,38,.16);border-color:var(--dp-brown)}
.dp-card:active{transform:translateY(-1px) scale(.985)}
.dp-emoji{font-size:1.9rem;line-height:1;transition:transform .2s}
.dp-card:hover .dp-emoji{transform:scale(1.18) rotate(6deg)}
.dp-title{font-weight:800;color:var(--dp-brown)}
.dp-sub{font-size:.8rem;color:#8a7456}
.dp-teaser{margin-top:8px;font-size:.8rem;color:var(--dp-green);font-weight:700}
.dp-teaser.dp-none{color:#a0895f;font-weight:600;font-style:italic}

/* vote sheet — slides in */
.dp-sheet{margin-top:14px}
.dp-panel{position:relative;border:1px solid var(--dp-line);border-radius:18px;padding:16px 18px;background:var(--dp-bg);
  box-shadow:0 10px 28px rgba(122,78,38,.12);animation:dp-pop .28s cubic-bezier(.2,.9,.3,1.25)}
@keyframes dp-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.dp-panel-head{display:flex;align-items:center;gap:10px}
.dp-panel-emoji{font-size:1.6rem}
.dp-panel-title{font-weight:800;font-size:1.1rem;color:var(--dp-brown);flex:1}
.dp-close{border:0;background:#f1e7d3;color:#7a5a22;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;font-weight:800}
.dp-close:hover{background:#e7d9bd}
.dp-total{font-size:.85rem;color:#8a7456;font-weight:700;margin:4px 0 12px}

/* animated result bars */
.dp-bars{display:flex;flex-direction:column;gap:9px}
.dp-bar{display:grid;grid-template-columns:minmax(90px,1.1fr) 3fr auto;align-items:center;gap:10px}
.dp-bar-name{font-size:.86rem;font-weight:700;color:var(--dp-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-bar-track{height:16px;background:#f2e8d5;border-radius:999px;overflow:hidden}
.dp-bar-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4bbf7e,#2f8f57);transition:width .7s cubic-bezier(.2,.9,.3,1)}
.dp-bar--lead .dp-bar-fill{background:linear-gradient(90deg,#f2c14e,#e6a52c)}
.dp-bar-val{font-size:.82rem;font-weight:800;color:var(--dp-brown);min-width:22px;text-align:right}
.dp-firstvote{padding:14px;border:1px dashed var(--dp-line);border-radius:12px;background:#fffaf0;color:#8a6a2c;font-weight:700;text-align:center}

/* vote chips */
.dp-vote-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px dashed var(--dp-line)}
.dp-vote-lbl{font-size:.82rem;font-weight:700;color:#8a7456;margin-right:2px}
.dp-chip{font:inherit;font-size:.82rem;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--dp-line);cursor:pointer;color:var(--dp-ink);transition:transform .1s,background .12s,color .12s}
.dp-chip:hover{background:var(--dp-brown);color:#fff;border-color:var(--dp-brown);transform:translateY(-1px) scale(1.04)}
.dp-chip:active{transform:scale(.94)}
.dp-flash{margin-top:12px;font-size:.9rem;font-weight:800;color:var(--dp-green);animation:dp-pop .3s}

/* confetti burst on vote */
.dp-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dp-confetti span{position:absolute;top:40%;font-size:16px;animation:dp-fetti 1.2s ease-out forwards;opacity:0}
@keyframes dp-fetti{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(-120px) rotate(220deg)}}

@media (prefers-reduced-motion: reduce){
  .dp-card,.dp-emoji,.dp-bar-fill,.dp-chip,.dp-panel{transition:none;animation:none}
  .dp-confetti{display:none}
}