/* The herd book's card: the painted frame for the tier, the cow in a parchment window, the name on the wood
   panel, the brass count. Its own file so the game (index.html) and the Ranch Office's Almanac draw the same card. */
.herd-slot { --rc: #dfe6ff; }
.herd-slot:has(.jack) { --rc: #ff8a1f; } .herd-slot:has(.pumpkinhead) { --rc: #ff5a1f; } .herd-slot:has(.phantom) { --rc: #b8ffd6; }
/* the Seasons shelf: the year stamped across the card's corner, the season's reward and how close it is */
.herd-cd .hc-stamp { position: absolute; left: 5%; top: 3%; z-index: 4; padding: 2px 6px; border-radius: 6px; font-size: 7.5px; font-weight: 800; letter-spacing: 1px; color: #1a0f08; background: linear-gradient(135deg, #ffb45a, #ff7a1a); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transform: rotate(-6deg); }
.herd-cd.phantom .hc-window img { animation: phantomflicker 2.6s ease-in-out infinite; }
@keyframes phantomflicker { 0%, 100% { opacity: .95; } 40% { opacity: .55; } 55% { opacity: .85; } 70% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .herd-cd.phantom .hc-window img { animation: none; } }
.season-shelf { margin-top: 22px; }
.season-reward { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 138, 31, .45); background: linear-gradient(135deg, rgba(255, 138, 31, .12), rgba(120, 60, 200, .1)); }
.season-reward img { width: 52px; height: 58px; object-fit: contain; flex: none; }
.season-reward b { display: block; font-size: 13px; color: var(--ink); }
.season-reward small { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.season-reward .sr-bar { display: block; height: 6px; margin-top: 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.season-reward .sr-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8a1f, #ffd23f); }
.season-reward.got { border-color: var(--gold); }
.season-reward.got b { color: var(--gold); }
.herd-slot:has(.uncommon) { --rc: #5ef1c9; } .herd-slot:has(.rare) { --rc: #4dd0ff; } .herd-slot:has(.epic) { --rc: #c77dff; } .herd-slot:has(.legendary) { --rc: #ffd23f; }
.herd-cd { position: relative; aspect-ratio: 543 / 724; }
.herd-cd .hc-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.herd-cd.tier-master .hc-name { top: 65%; height: 16%; }   /* clear of the longhorn skull on the master frame's foot */
.herd-cd.tier-legend .hc-name { top: 64.5%; height: 17%; }   /* on the Legend frame's plaque, over its skull */
.herd-cd .hc-window { position: absolute; left: 13.5%; top: 10%; width: 73%; height: 54.5%; background: radial-gradient(ellipse at 50% 40%, #fbf5e6, #ead9b8); box-shadow: inset 0 0 18px rgba(80, 50, 20, .35); display: grid; place-items: center; z-index: 1; }
.herd-cd .hc-window img { max-width: 90%; max-height: 88%; filter: drop-shadow(0 3px 4px rgba(60, 30, 10, .35)); }
.herd-cd.hole .hc-window { background: #151c3a; box-shadow: inset 0 0 18px rgba(0, 0, 0, .6); }
.herd-cd.hole .hc-window img { filter: brightness(0) opacity(.45); }
/* the name written straight on the wood panel */
.herd-cd .hc-name { position: absolute; left: 14%; right: 14%; top: 66%; height: 17%; z-index: 3; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff3d6; text-shadow: 0 2px 3px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .6); letter-spacing: .4px; }
.herd-cd.hole .hc-name { color: #cbbfa6; font-size: 22px; }
/* the brass count badge on the frame's top right corner */
.herd-cd .hc-count { position: absolute; top: 1.5%; right: 3%; z-index: 4; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #1a0b10; background: radial-gradient(circle at 35% 30%, #ffe9a8, #d9a520 60%, #9a6a10); border: 2px solid #6b4a12; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.herd-under { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 6px; text-align: center; }
.herd-under .hc-rarity { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 800; color: var(--rc); }
.herd-under small { font-size: 11px; color: var(--ink-dim); }
.herd-under small b { color: var(--ink); }
.herd-under em { font-style: normal; font-size: 10.5px; color: var(--gold); }
/* the foil sheen from gold, over the frame only */
.herd-cd.tier-gold::after, .herd-cd.tier-animated::after, .herd-cd.tier-master::after, .herd-cd.tier-legend::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .18) 48%, rgba(255, 210, 63, .22) 52%, transparent 58%); background-size: 250% 100%; animation: foil 5s ease-in-out infinite; -webkit-mask: url('cards/frame-4.png') center / 100% 100%; mask: url('cards/frame-4.png') center / 100% 100%; }
@keyframes foil { 0% { background-position: 120% 0; } 60% { background-position: -20% 0; } 100% { background-position: -20% 0; } }
/* the horseshoe on the animated frame swings from its rope */
.herd-cd .hc-shoe { position: absolute; left: 50%; top: 0; width: 22%; z-index: 3; transform-origin: 50% 6%; margin-left: -11%; animation: shoeswing 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes shoeswing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.herd-cd.tier-master { filter: drop-shadow(0 0 12px rgba(255, 210, 63, .45)); }
.herd-cd.tier-legend { filter: drop-shadow(0 0 10px rgba(255, 210, 63, .5)) drop-shadow(0 0 18px rgba(160, 90, 255, .45)); }

/* the Week shelf: the day stamped in the corner, today's card lit */
.herd-cd .hc-stamp.day { background: linear-gradient(135deg, #9cc3ff, #5b7cff); color: #0b1330; }
.week-shelf .herd-slot.today .herd-cd { box-shadow: 0 0 0 2px rgba(255, 210, 63, .9), 0 8px 24px rgba(255, 176, 46, .25); border-radius: 12px; }
.week-shelf .herd-slot.today .hc-rarity { color: var(--gold); }

/* the season's award: a live sample of the theme on the rider's own barn, its name and the count toward it */
.season-reward.theme { align-items: stretch; padding: 10px; gap: 14px; }
.season-reward .sr-preview { flex: none; width: 150px; height: 94px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.season-reward .sr-kick { display: block; font-size: 10px; font-weight: 800; letter-spacing: 2px; color: #ff9a2e; }
.season-reward.theme > div { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; }
.season-reward.theme b { font-size: 16px; margin-top: 2px; }
.season-reward.theme small { font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .season-reward .sr-preview { width: 120px; height: 76px; } }