/* The negative bottom and margins cancel .bc-result-card's padding (18px 20px, 14px under
   560px, in site.css): change them together or the pinned footer floats off the card's edge. */
.bc-card-foot {
  position: sticky; bottom: -18px; z-index: 3; margin: 12px -20px -18px; padding: 12px 20px 16px;
  border-top: 2px solid rgba(141,97,52,.22); border-radius: 0 0 13px 13px; background: #fff2c9;
}
.bc-card-actions { display: flex; gap: 10px; }
.bc-card-actions:empty { display: none; }
.bc-card-go {
  flex: 1 1 auto; min-height: 42px; padding: 8px 16px; border: 3px solid #ffe28a; border-radius: 999px; cursor: pointer;
  background: linear-gradient(#79c94e, #3f913b); color: #fff; font: inherit; font-size: .8rem; font-weight: 900; line-height: 1.2;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 #2c672f, 0 7px 13px rgba(5,28,13,.22);
  text-shadow: 0 2px 2px rgba(21,65,28,.5);
}
.bc-card-go small { display: block; font-size: .7rem; font-weight: 800; opacity: .92; }
.bc-card-go:hover { filter: brightness(1.08); }
.bc-card-foot > .bc-card-go { width: 100%; }
.bc-card-camp {
  display: block; min-height: 32px; margin: 10px auto 0; padding: 5px 14px; border: 2px solid #c79550; border-radius: 999px;
  cursor: pointer; background: linear-gradient(#755034, #4d3423); color: #fff4d3; font: inherit; font-size: .72rem; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #362316;
}
.bc-card-camp:hover { filter: brightness(1.12); }
.bc-card-actions .bc-card-camp { flex: 0 0 auto; align-self: center; margin: 0; }
.bc-card-wrap { flex-wrap: wrap; justify-content: center; }
.bc-card-wrap .bc-card-go { flex-shrink: 0; }
@media (max-width: 560px) {
  .bc-card-foot { bottom: -14px; margin: 12px -14px -14px; padding: 12px 14px 13px; }
}
/* One row that scrolls sideways only when the habitats do not fit. The labels hang below each
   circle and are wider than it, so the strip's own padding has to hold them on every side or
   the scroll box clips them -- and an end label poking out makes a wide strip scroll too. */
.bc-areas {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 8px 14px 46px;
}
.bc-areas::-webkit-scrollbar { display: none; }
.bc-areas::before { display: none; }
.bc-areas .bc-area { flex: 1 0 74px; max-width: 132px; }
.bc-areas .bc-area + .bc-area::before {
  content: ''; position: absolute; z-index: -1; top: 43%; right: calc(100% - 4px); width: 18px;
  border-top: 5px dashed rgba(255,231,160,.62);
}
.bc-area:nth-child(6) {
  background: radial-gradient(circle at 38% 30%, #7fd08a, #2f8a4b 68%, #1b5a30);
  box-shadow: inset 0 -9px 16px rgba(12,50,24,.3), 0 5px 0 #1b5a30, 0 8px 16px rgba(8,31,17,.33);
}
@media (max-width: 560px) {
  .bc-areas { gap: 8px; padding-bottom: 32px; }
}
.bc-result-card { position: relative; }
@keyframes bc-shine-grow { 30% { transform: scale(1.28); } 60% { transform: none; } }
@keyframes bc-shine-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* Registered so the gradient's colour can animate; without @property it simply stays brown. */
@property --bc-num { syntax: '<color>'; inherits: false; initial-value: #67431f; }
@keyframes bc-shine-tint { 25%, 55% { --bc-num: #e59a12; } }
/* The band sits mid-way along a 300%-wide background, so 100% parks it left of the number and
   0 parks it right: both ends leave the digits their plain colour. */
.bc-shine strong {
  justify-self: center;
  background: linear-gradient(105deg, var(--bc-num) 0 40%, #fff3b0 47%, #fff 50%, #fff3b0 53%, var(--bc-num) 60% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: bc-shine-grow .5s ease-out .15s both, bc-shine-sweep .7s ease-in-out .2s both, bc-shine-tint .9s ease-out .15s both;
}
.bc-goal {
  position: relative; margin: 0 0 10px; padding: 7px 10px 9px; border: 2px solid #d3a960; border-radius: 12px;
  background: rgba(255,250,222,.77);
}
.bc-goal-head { display: flex; justify-content: space-between; gap: 8px; color: #816743; font-size: .68rem; font-weight: 800; }
.bc-goal-head strong { color: #67431f; white-space: nowrap; }
.bc-goal-bar {
  position: relative; height: 12px; margin-top: 5px; overflow: hidden; border-radius: 999px;
  background: rgba(141,97,52,.18); box-shadow: inset 0 1px 2px rgba(80,50,20,.25);
}
.bc-goal-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit;
  background: linear-gradient(#79c94e, #3f913b); transition: width .22s ease-out;
}
.bc-goal.ready .bc-goal-fill { background: linear-gradient(#ffe28a, #e8a92a); }
@keyframes bc-goal-shine { from { transform: translateX(-120%); } to { transform: translateX(420%); } }
.bc-goal.ready .bc-goal-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 25%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation: bc-goal-shine .8s ease-out both;
}
.bc-fly-coin { position: absolute; z-index: 5; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; }
/* A short board leaves the card too little height for the title, both stats and the goal bar above
   the pinned buttons, so the spacing tightens by the board's own height, not by device. */
.bc-overlay { container-type: size; }
@container (max-height: 480px) {
  .bc-result-card .bc-haul-title { margin-bottom: 4px; }
  .bc-result-card .bc-haul-summary { margin-bottom: 6px; }
  .bc-result-card .bc-haul-stat { padding: 4px 8px; }
  .bc-goal { margin-bottom: 6px; padding: 2px 8px 4px; border-width: 1px; }
  .bc-goal-head { font-size: .62rem; }
  .bc-goal-bar { height: 6px; margin-top: 3px; }
  .bc-result-card .bc-card-foot { padding-top: 9px; padding-bottom: 9px; }
  .bc-result-card .bc-card-camp { margin-top: 7px; }
}
.bc-testbar {
  position: fixed; z-index: 60; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  max-width: calc(100vw - 24px); padding: 6px 8px; border: 2px dashed #c79550; border-radius: 10px;
  background: #fff7df; box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: .72rem;
}
.bc-testbar button { padding: 4px 10px; border: 1px solid #c79550; border-radius: 999px; background: #fff; cursor: pointer; font: inherit; }
.bc-haul-row.bc-haul-golden {
  background: linear-gradient(90deg, rgba(255,210,84,.8), rgba(255,236,160,.6)); box-shadow: inset 0 0 0 2px #e6ad2e;
}
.bc-haul-golden .bc-haul-name, .bc-haul-golden .bc-haul-value { color: #7c4f00; }