/* Zodiac — page-specific styles. Larger version of the same starfield card
   used in the feed share (see feed.css's .zodiac-share-card), built from
   scratch to match .wr-card/.sk-card's container conventions since this
   page doesn't load weather-report.css or streak.css. */

.zc-card {
    position: relative; overflow: hidden;
    min-height: 260px; margin-bottom: .85rem;
    border-radius: 5px; color: #fff;
    box-shadow: 0 14px 32px -14px rgba(0,0,0,.4);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem 1.5rem;
    background: linear-gradient(160deg, #1e1b4b, #4338ca 55%, #6d28d9);
}

.zc-card-content { position: relative; z-index: 3; max-width: 420px; }
.zc-your-sign-label {
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    opacity: .8; margin-bottom: .2rem;
}
.zc-symbol { font-size: 3rem; line-height: 1; filter: drop-shadow(0 2px 5px rgba(0,0,0,.3)); }
.zc-label {
    font-size: 1.7rem; font-weight: 800; font-family: var(--font-display);
    margin-top: .4rem; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.zc-range {
    font-size: .85rem; opacity: .85; margin-top: .3rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.zc-message {
    margin-top: 1.1rem; font-size: .98rem; line-height: 1.55;
    opacity: .95; text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.zc-scene { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.zc-star {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: #fff; opacity: 0;
    animation: zc-twinkle 3.6s ease-in-out infinite;
}
.zc-star-1 { top: 18%; left: 12%; animation-delay: 0s; }
.zc-star-2 { top: 30%; left: 82%; animation-delay: .6s; width: 2px; height: 2px; }
.zc-star-3 { top: 65%; left: 20%; animation-delay: 1.2s; }
.zc-star-4 { top: 75%; left: 70%; animation-delay: 1.8s; width: 2px; height: 2px; }
.zc-star-5 { top: 45%; left: 50%; animation-delay: 2.4s; }
@keyframes zc-twinkle {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: .9; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
    .zc-star { animation: none; opacity: .5; }
}

.zc-share-form {
    margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem;
}
.zc-share-form textarea {
    border: 1px solid var(--border); border-radius: 5px; padding: .75rem 1rem;
    background: var(--paper); font-family: inherit; font-size: .94rem; line-height: 1.45;
    color: var(--ink); resize: vertical; min-height: 60px;
    transition: background .15s ease, border-color .15s ease;
}
.zc-share-form textarea:focus {
    outline: none; background: var(--surface);
    border-color: color-mix(in srgb, var(--indigo) 40%, var(--border));
}
.zc-share-form textarea::placeholder { color: var(--ink-soft); }
.zc-share-form .btn { align-self: flex-start; }

@media (max-width: 480px) {
    .zc-label { font-size: 1.4rem; }
    .zc-card { min-height: 220px; }
}

/* ---- "All signs" browse grid ---- */
.zc-all-heading {
    font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .6rem; color: var(--ink);
}
.zc-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
}
.zc-tile {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius, 5px); padding: .9rem .75rem; text-align: center;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.zc-tile-yours {
    border-color: color-mix(in srgb, #6d28d9 45%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, #6d28d9 20%, transparent);
}
.zc-tile-badge {
    position: absolute; top: .5rem; right: .5rem;
    font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    background: #6d28d9; color: #fff; padding: .12rem .4rem; border-radius: 999px;
}
.zc-tile-symbol { font-size: 1.6rem; line-height: 1; }
.zc-tile-label { font-weight: 700; font-size: .85rem; margin-top: .25rem; color: var(--ink); }
.zc-tile-range { font-size: .66rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .02em; margin-top: .1rem; }
.zc-tile-message { font-size: .74rem; color: var(--ink); line-height: 1.4; margin: .5rem 0 0; }

@media (max-width: 480px) {
    .zc-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
    .zc-tile { padding: .75rem .6rem; }
    .zc-tile-message { font-size: .7rem; }
}