/* Harvest Venn (TT.G.venn). Two overlapping harvest baskets fill the cabinet; the fact card and 3 basket buttons sit beside them
   (under them on tall screens). The circles overlap by half, so left only, both, and right only are equal thirds.
   Art: venn-bg (background), venn-basket (basket weave on the circles), venn-card (card picture). Drawn by code until uploaded. */
.vnn .vstage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(8px, 1.2vw, 18px); align-items: stretch; }
main.incab .vnn .vstage { flex: 1 1 0; min-height: 0; }
.vnn .vbox { 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: grid; place-items: center; padding: 8px; }
.vnn .vbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.vnn .vbg.stand { object-fit: contain; opacity: .2; }
.vnn .vvenn { position: relative; z-index: 1; width: min(100cqw - 8px, (100cqh - 8px) * 1.5); aspect-ratio: 3 / 2; container-type: inline-size; }
.vnn .vcirc { position: absolute; top: 0; width: 66.67%; height: 100%; border-radius: 50%; border: 5px solid #5a3a14;
  background-image: url(art/venn-basket.webp), repeating-linear-gradient(45deg, rgba(122, 90, 47, .18) 0 6px, transparent 6px 14px), repeating-linear-gradient(-45deg, rgba(122, 90, 47, .18) 0 6px, transparent 6px 14px);
  background-size: cover, auto, auto; }
.vnn .vcirc.l { left: 0; background-color: rgba(255, 200, 120, .72); }
.vnn .vcirc.r { right: 0; background-color: rgba(170, 215, 140, .62); }
.vnn .vlab { position: absolute; z-index: 3; top: 3%; margin: 0; width: 30%; text-align: center; font-weight: 900; color: #3B2414; line-height: 1.1;
  font-size: clamp(12px, 3.6cqw, 32px); background: rgba(255, 250, 240, .94); border: 3px solid #3B2414; border-radius: 999px; padding: 2px 6px; overflow-wrap: break-word; pointer-events: none; }
.vnn .vlab.l { left: 2%; } .vnn .vlab.m { left: 35%; } .vnn .vlab.r { right: 2%; }
.vnn .vzone { position: absolute; z-index: 2; top: 17%; height: 79%; width: 31%; border: 0; background: transparent; border-radius: 30px; cursor: pointer; padding: 4px;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center; font: inherit; }
.vnn .vzone[data-z="L"] { left: 2%; } .vnn .vzone[data-z="B"] { left: 34.5%; } .vnn .vzone[data-z="R"] { right: 2%; }
.vnn .vzone:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.vnn .vzone:focus-visible { outline: 4px solid #ffd23f; }
.vnn .vzone:disabled { cursor: default; }
.vnn .vzone.wrong { animation: vshake .4s; background: rgba(255, 120, 120, .35); }
.vnn .vcards { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; }
.vnn .vchip { display: block; max-width: 100%; background: #fffaf0; color: #3B2414; border: 2px solid #5a3a14; border-radius: 10px; padding: 2px 6px;
  font-weight: 800; line-height: 1.1; font-size: clamp(10px, 2.3cqw, 20px); text-align: center; overflow-wrap: break-word; box-shadow: 0 3px 0 rgba(90, 58, 20, .35); }
.vnn .vchip.drop { animation: vdrop .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes vdrop { 0% { transform: translateY(-200%) scale(.6); opacity: .2 } 70% { transform: translateY(6%) scale(1.04); opacity: 1 } 100% { transform: none } }
.vnn .vfx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.vnn .vban { position: absolute; top: 40%; 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; }
.vnn .vpanel { 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; }
.vnn .vcard { position: relative; display: flex; align-items: center; gap: 12px; padding: clamp(10px, 1.2vw, 18px); border-radius: 18px; border: 4px solid #5a3a14;
  background: linear-gradient(#fff6dc, #f4d27a); box-shadow: 0 6px 0 #5a3a14; min-height: 90px; }
.vnn .vcard[hidden] { display: flex; visibility: hidden; }
.vnn .vcard.in { animation: vin .35s ease-out; }
.vnn .vcard.bounce { animation: vbounce .45s; }
.vnn .vcardart { width: clamp(44px, 4.5vw, 84px); height: clamp(44px, 4.5vw, 84px); object-fit: contain; flex: none; }
.vnn .vct { margin: 0; font-weight: 900; color: #3B2414; font-size: clamp(19px, 1.9vw, 38px); line-height: 1.2; overflow-wrap: break-word; }
@keyframes vin { from { transform: translateY(-30px) rotate(-3deg); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes vbounce { 0%, 100% { transform: none } 30% { transform: translateY(-14px) rotate(-3deg) } 60% { transform: translateY(4px) rotate(2deg) } }
.vnn .vbtns { display: grid; gap: clamp(8px, .9vw, 14px); grid-template-columns: 1fr; }
.vnn .vbtn { 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: linear-gradient(#ffe2b8, #ffc27a); font: inherit; font-weight: 800; font-size: clamp(18px, 1.7vw, 32px); line-height: 1.15; cursor: pointer; box-shadow: 0 5px 0 #5a3a14; text-align: center; }
.vnn .vbtn.both { background: linear-gradient(#fff3b0, #f2d45a); }
.vnn .vbtn[data-z="R"] { background: linear-gradient(#dff2c9, #a9d98a); }
.vnn .vbtn .st { white-space: normal; overflow-wrap: break-word; min-width: 0; }
.vnn .vbtn .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; }
.vnn .vbtn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
.vnn .vbtn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #5a3a14; }
.vnn .vbtn:disabled { cursor: default; opacity: .55; }
.vnn .vbtn.wrong { background: #ffd0d0; border-color: #a3222f; animation: vshake .4s; }
@keyframes vshake { 0%, 100% { transform: none } 20% { transform: translateX(-8px) } 40% { transform: translateX(8px) } 60% { transform: translateX(-6px) } 80% { transform: translateX(5px) } }
.vnn .vwhy { font-size: clamp(15px, 1.2vw, 22px); line-height: 1.35; text-align: center; min-height: 1.35em; }
.vnn .vwhy.good { color: #1f5f24; } .vnn .vwhy.bad { color: #a3222f; }
@media (max-aspect-ratio: 1/1) {
  .vnn .vstage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(300px, 1fr) auto; }
  main.incab .vnn .vstage { flex: 1 0 auto; }
  .vnn .vpanel { overflow: visible; }
}
@media (max-width: 520px) { .vnn .vchip { font-size: 9.5px; padding: 1px 3px; border-width: 1.5px; } .vnn .vcards { gap: 2px; } .vnn .vbtn { min-height: 52px; font-size: 17px; padding: 8px 6px; } .vnn .vbtn .k { display: none; } .vnn .vct { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .vnn .vchip.drop, .vnn .vcard.in, .vnn .vcard.bounce, .vnn .vbtn.wrong, .vnn .vzone.wrong, .vnn .vban { animation: none; } }