/* Harvest Stack (TT.G.stack). Fills the cabinet: tower on the left, bale buttons on the right (stacked on tall screens).
   Bales use art/stack-bale.webp when it is uploaded; until then a straw pattern drawn by code shows. */
.stk .sstage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(8px, 1.2vw, 18px); align-items: stretch; }
main.incab .stk .sstage { flex: 1 1 0; min-height: 0; }
.stk .stowerbox { position: relative; border-radius: 22px; overflow: hidden; border: 4px solid #3B2414; background: linear-gradient(#bfe3ff, #f6e3b4 70%, #c9a24a); min-height: 260px; container-type: size;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; }
.stk .sbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.stk .sbg.stand { object-fit: contain; opacity: .2; }
.stk .slab { position: relative; flex: none; z-index: 2; max-width: 92%; text-align: center; font-weight: 800; color: #3B2414;
  font-size: clamp(12px, 3.4cqw, 22px); line-height: 1.15; background: rgba(255, 250, 240, .92); border: 3px solid #3B2414; border-radius: 999px; padding: 3px 12px; white-space: normal; overflow-wrap: anywhere; }
.stk .slab:empty { display: none; }
.stk .stower { --n: 8; position: relative; z-index: 1; flex: 1 1 0; min-height: 0; width: 100%; container-type: size;
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 3px; }
.stk .srow { --w: 80%; width: var(--w); flex: 0 0 auto; height: min(92px, calc(100cqh / var(--n) - 3px)); min-height: 24px; border-radius: 12px; border: 3px solid #5a3a14;
  background-image: url(art/stack-bale.webp), repeating-linear-gradient(100deg, rgba(122, 90, 47, .35) 0 3px, transparent 3px 11px), linear-gradient(#f4d27a, #d9a93f);
  background-size: 100% 100%, auto, auto; box-shadow: inset 0 -6px 0 rgba(90, 58, 20, .25); display: grid; place-items: center; padding: 0 8px; overflow: hidden; }
.stk .srow span { background: rgba(255, 250, 240, .93); color: #3B2414; font-weight: 900; border-radius: 10px; padding: 1px 10px; line-height: 1.1;
  font-size: min(clamp(13px, 4.2cqw, 34px), calc(min(92px, 100cqh / var(--n)) * .5)); text-align: center; white-space: normal; overflow-wrap: break-word; hyphens: manual; max-width: 100%; }
.stk .srow.ghost { background: rgba(255, 255, 255, .45); border: 3px dashed #7a5a2f; box-shadow: none; }
.stk .srow.ghost span { background: none; color: #7a5a2f; }
.stk .srow.drop { animation: sdrop .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes sdrop { 0% { transform: translateY(-260%); opacity: .2 } 70% { transform: translateY(6%); opacity: 1 } 100% { transform: none } }
.stk .sfx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.stk .stumble { position: absolute; left: 50%; top: 18%; width: 46%; min-height: 54px; margin-left: -23%; border-radius: 12px; border: 3px solid #5a3a14; display: grid; place-items: center; padding: 4px 8px;
  background: repeating-linear-gradient(100deg, rgba(122, 90, 47, .35) 0 3px, transparent 3px 11px), linear-gradient(#f4d27a, #d9a93f); animation: stumble 1s ease-in forwards; }
.stk .stumble.lt { animation-name: stumblel; }
.stk .stumble span { background: rgba(255, 250, 240, .93); color: #a3222f; font-weight: 900; border-radius: 8px; padding: 1px 8px; font-size: clamp(14px, 3cqw, 26px); text-align: center; overflow-wrap: anywhere; }
@keyframes stumble { 0% { transform: translateY(-40%) rotate(0) } 35% { transform: translate(8%, 40%) rotate(8deg) } 100% { transform: translate(160%, 260%) rotate(80deg); opacity: 0 } }
@keyframes stumblel { 0% { transform: translateY(-40%) rotate(0) } 35% { transform: translate(-8%, 40%) rotate(-8deg) } 100% { transform: translate(-160%, 260%) rotate(-80deg); opacity: 0 } }
.stk .sban { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: 14px; font-weight: 900; font-size: clamp(18px, 2vw, 34px); color: #1f5f24; background: #c9f2c7; border: 4px solid #3B2414; animation: sban 1.2s ease-out forwards; white-space: nowrap; }
@keyframes sban { 0% { opacity: 0; transform: translateX(-50%) scale(.5) } 25% { opacity: 1; transform: translateX(-50%) scale(1.08) } 80% { opacity: 1 } 100% { opacity: 0; transform: translateX(-50%) } }
.stk .spanel { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 14px); min-height: 0; overflow-y: auto; padding: clamp(10px, 1.2vw, 18px); border-radius: 22px; background: #fffaf0; border: 4px solid #3B2414; justify-content: center; }
.stk .schoices { display: grid; gap: clamp(8px, .9vw, 14px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stk .sbale { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 4px solid #5a3a14; color: #3B2414;
  background: repeating-linear-gradient(100deg, rgba(122, 90, 47, .22) 0 3px, transparent 3px 12px), linear-gradient(#fbe7a8, #ecc867);
  font: inherit; font-weight: 800; font-size: clamp(18px, 1.8vw, 34px); line-height: 1.15; cursor: pointer; box-shadow: 0 5px 0 #5a3a14; transition: transform .1s; text-align: center; }
.stk .sbale .st { white-space: normal; overflow-wrap: break-word; word-break: normal; min-width: 0; }
.stk .sbale .k { font-size: .55em; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: #fffaf0; border: 2px solid #3B2414; flex: none; }
.stk .sbale:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
.stk .sbale:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #5a3a14; }
.stk .sbale.right { background: #c9f2c7; border-color: #2f7a35; }
.stk .sbale.right:disabled { opacity: .55; }
.stk .schoices.pick .sbale.right:disabled { opacity: 1; }
.stk .sbale.wrong { background: #ffd0d0; border-color: #a3222f; opacity: .75; }
.stk .sbale:disabled { cursor: default; }
.stk .sbale.shake { animation: sshake .4s; }
@keyframes sshake { 0%, 100% { transform: none } 20% { transform: translateX(-8px) rotate(-2deg) } 40% { transform: translateX(8px) rotate(2deg) } 60% { transform: translateX(-6px) } 80% { transform: translateX(5px) } }
.stk .swhy { font-size: clamp(15px, 1.2vw, 22px); line-height: 1.35; text-align: center; min-height: 1.35em; }
.stk .swhy.good { color: #1f5f24; } .stk .swhy.bad { color: #a3222f; }
/* tall screens (phones, upright iPads): tower over the buttons */
@media (max-aspect-ratio: 1/1) {
  .stk .sstage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(340px, 1fr) auto; }
  main.incab .stk .sstage { flex: 1 0 auto; }
  .stk .spanel { overflow: visible; }
}
@media (max-width: 520px) { .stk .sbale { min-height: 52px; font-size: 17px; padding: 8px 6px; gap: 6px; } .stk .sbale .k { display: none; } .stk .slab { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .stk .srow.drop, .stk .sbale.shake, .stk .sban { animation: none; }
  .stk .stumble { animation: none; opacity: .85; transform: translateY(40%) rotate(12deg); }
  .stk .sbale { transition: none; }
}