/* ============================================================================
   Fuga's touches on the shell's windows (the windows themselves are
   platform/css/shell.css): the start-screen scene, the result pig's dance,
   the rules' markers, and the round banner over the board.
   ============================================================================ */
/* ---------- Start screen ---------- */
.cp-setup-resume{align-self:flex-start}
.hero{
  position:relative;height:96px;margin:-6px -6px 0;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#bfe3f2 0 55%,#8ab866 55% 100%);border:2px solid var(--ink);
}
.hero > span{position:absolute;bottom:8px;width:52px;height:52px}
.hero-farmer{left:4%;width:62px !important;height:62px !important;animation:chase 2.4s ease-in-out infinite}
.hero-pig{animation:run .5s ease-in-out infinite}
.hero-pig.p1{left:36%;animation-delay:-.1s}
.hero-pig.p2{left:52%;animation-delay:-.3s}
.hero-pig.p3{left:68%;animation-delay:-.2s;width:44px !important;height:44px !important}
.hero-fence{
  right:3%;width:34px !important;height:58px !important;bottom:6px !important;
  background:
    linear-gradient(180deg,transparent 18%,#8a5a33 18% 30%,transparent 30% 60%,#8a5a33 60% 72%,transparent 72%),
    repeating-linear-gradient(90deg,#b07a47 0 6px,transparent 6px 12px);
}
@keyframes run{50%{transform:translateY(-8px) rotate(-4deg)}}
@keyframes chase{50%{transform:translateX(18px)}}
.hero-title{font-size:30px;text-align:center;color:var(--barn)}
.hero-sub{margin:-10px 0 0;text-align:center;color:var(--muted);font-size:14px}

/* ---------- Result ---------- */
.cp-result-art svg{animation:party 1s ease-in-out infinite}
#result[data-mood="none"] .cp-result-art svg{animation:none}
@keyframes party{50%{transform:translateY(-10px) rotate(6deg)}}
#result[data-mood="none"] .cp-result-title{color:var(--barn-dark)}

/* ---------- Rules ---------- */
.rules-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;line-height:1.4}
.rules-list li{display:flex;align-items:flex-start;gap:10px}
.rules-list li::marker{color:var(--barn)}
.rules-list .r-mud::marker{color:var(--mud)}
.rules-list .r-hay::marker{color:#c8971f}
.rules-icon{flex:none;width:26px;height:26px;margin-top:1px}

/* ---------- Round banner (over the board) ---------- */
.banner{
  position:absolute;inset:0;z-index:10;display:grid;place-items:center;pointer-events:none;
  opacity:0;transition:opacity .25s;
}
.banner.show{opacity:1}
.banner-card{
  max-width:86%;text-align:center;padding:16px 28px;border-radius:18px;
  background:var(--paper);border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);
  transform:rotate(-2deg) scale(.85);transition:transform .35s cubic-bezier(.2,1.6,.4,1);
}
.banner.show .banner-card{transform:rotate(-2deg) scale(1)}
.banner-title{font-family:var(--font-display);font-size:clamp(26px,4vw,44px);line-height:1.05;color:var(--grass-dark)}
.banner-sub{margin-top:6px;font-weight:700;color:var(--muted)}
.banner.tractor .banner-card{background:var(--barn);border-color:#2a0f10;box-shadow:0 6px 0 #2a0f10;animation:rumble .12s linear infinite}
.banner.tractor .banner-title{color:#fff}
.banner.tractor .banner-sub{color:#ffe1e1}
@keyframes rumble{50%{translate:1px -1px}}

@media (prefers-reduced-motion:reduce){
  .hero > span,.cp-result-art,.banner.tractor .banner-card,.roll-btn{animation:none}
}