/* Each choice is a small, responsive world. Interaction state comes from worlds.js. */
.world-picker-wrap { width: min(960px, 100%); margin-inline: auto; }
.world-picker-prompt { margin: 0 0 22px; color: #7a8274; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: center; }
.world-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 3vw, 36px); width: 100%; margin-inline: auto; }
.world-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 20px; min-width: 0; min-height: 44px; padding: 10px 6px 14px; color: #242823; text-decoration: none; border: 1px solid transparent; border-radius: 26px; transition: background 220ms ease, border-color 220ms ease; }
.world-option.is-active { background: #fbfcf9; border-color: #eff2e9; }
.world-option.is-selected { border-color: #c8d4bd; background: #f7faf3; }
.world-option:focus-visible { outline: 2px solid #536547; outline-offset: 5px; }
.world-art { position: relative; display: block; width: 266px; max-width: 100%; height: auto; aspect-ratio: 266 / 160; isolation: isolate; flex: none; }
.world-art-ground { position: absolute; z-index: -2; bottom: 1%; left: 16%; width: 68%; height: 12%; border-radius: 50%; background: #cbd2c5; opacity: .27; filter: blur(9px); }
.world-option-copy { display: block; width: 100%; text-align: center; }
.world-option-title { position: relative; display: inline-block; font-size: 21px; font-weight: 550; line-height: 1.3; letter-spacing: -.45px; }
.world-option-arrow { position: absolute; top: calc(50% - 10px); left: calc(100% + 7px); width: 20px; height: 20px; fill: none; stroke: #536547; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-4px); transition: opacity 180ms ease, transform 220ms ease; }
.world-option.is-active .world-option-arrow, .world-option.is-selected .world-option-arrow { opacity: 1; transform: translateX(0); }
.world-option-outcome { display: block; margin-top: 7px; color: #7a8274; font-size: 12px; line-height: 1.5; }
.world-art img { position: absolute; height: auto; object-fit: contain; }
/* Food: the prepared order becomes a confirmed receipt. */
.picker-potatoes { z-index: 0; top: 12.5%; left: 15%; width: 39%; transform: rotate(-16deg); }
.picker-carrot { z-index: -1; top: -1%; right: 11.7%; width: 42%; transform: rotate(13deg); }
.picker-leaves { position: absolute; z-index: -1; top: 1.25%; left: 38%; width: 22.5%; height: 54.4%; transform: rotate(-13deg); }
.picker-crate { position: absolute; z-index: 2; left: 8.7%; bottom: -1%; width: 82.7%; height: 80%; filter: drop-shadow(0 7px 6px #5d493313); transform: rotate(-3deg); }
.picker-receipt { position: absolute; z-index: 1; top: 40%; right: 15%; width: 23%; height: 58%; opacity: 0; transform: translateY(18%) rotate(8deg); filter: drop-shadow(0 3px 2px #26302410); transition: transform 200ms ease, opacity 180ms ease; }
.world-option.is-active .picker-receipt { opacity: 1; transform: translateY(-60%) rotate(8deg); animation: picker-receipt-pop 520ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes picker-receipt-pop { 0% { opacity: 0; transform: translateY(18%) rotate(8deg); } 58% { opacity: 1; transform: translateY(-66%) rotate(6deg); } 100% { opacity: 1; transform: translateY(-60%) rotate(8deg); } }
/* SaaS: a few bold shapes assemble an email, then its envelope lifts. */
.picker-software-window { position: absolute; left: 13.5%; top: 9%; display: block; width: 73%; height: 81%; overflow: hidden; border: 1px solid #dcd4eb; border-radius: 5% / 8%; background: #eee7f7; box-shadow: 0 10px 17px -10px #62507830; transform: rotate(-5deg); }
.picker-window-top { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 3%; width: 100%; height: 17%; padding-inline: 6%; background: #e6dbf3; border-bottom: 1px solid #ddd2eb; }
.picker-window-top > i { width: 3%; aspect-ratio: 1; border-radius: 50%; background: #bba7d3; }
.picker-window-content { position: absolute; top: 17%; left: 0; width: 100%; height: 83%; }
.picker-tool-rail { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 10%; width: 18%; height: 100%; padding-top: 8%; background: #f6f2fb; border-right: 1px solid #e1d6ef; }
.picker-tool-rail > i { width: 29%; aspect-ratio: 1; border-radius: 24%; background: #c9b7df; }
.picker-tool-rail > i:nth-child(2) { border-radius: 50%; background: #ded3ed; }
.picker-email { position: absolute; top: 9%; left: 30%; display: block; width: 57%; height: 83%; border-radius: 5%; background: #fff; box-shadow: 0 1px 5px #746c8510; }
.picker-email-heading { position: absolute; top: 12%; left: 16%; width: 68%; height: 8%; border-radius: 10px; background: #a69bb8; }
.picker-email-image { position: absolute; top: 29%; left: 12%; display: block; width: 76%; height: 49%; overflow: hidden; border-radius: 4%; background: #f4edf9; }
.picker-email-image > svg { width: 100%; height: 100%; }
.picker-email-button { position: absolute; left: 31%; bottom: 9%; display: block; width: 38%; height: 7%; border-radius: 8px; background: #95aa80; }
.picker-envelope { position: absolute; top: 61%; right: 8%; display: grid; place-items: center; width: 24%; height: 31%; border: 1px solid #d6c8e8; border-radius: 16% / 21%; background: #e7dcf6; box-shadow: 0 6px 13px #6b50921a; transform: translateY(0) rotate(11deg); transition: transform 200ms ease; }
.picker-envelope > svg { width: 78%; height: 78%; fill: none; stroke: #8b70ad; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.world-option.is-active .picker-email-heading { animation: picker-email-assemble 260ms cubic-bezier(.22, 1, .36, 1) both; }
.world-option.is-active .picker-email-image { animation: picker-email-assemble 300ms 60ms cubic-bezier(.22, 1, .36, 1) both; }
.world-option.is-active .picker-email-button { animation: picker-email-assemble 260ms 110ms cubic-bezier(.22, 1, .36, 1) both; }
.world-option.is-active .picker-envelope { transform: translateY(-60%) rotate(-5deg); animation: picker-envelope-lift 390ms 130ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes picker-email-assemble { from { opacity: 0; transform: translateY(26%); } to { opacity: 1; transform: translateY(0); } }
@keyframes picker-envelope-lift { 0% { transform: translateY(0) rotate(11deg); } 70% { transform: translateY(-67%) rotate(-7deg); } 100% { transform: translateY(-60%) rotate(-5deg); } }
/* Sports: two tickets move out from behind the ball together. */
.picker-ticket { width: 58%; filter: drop-shadow(0 5px 4px #694d2a12); transition: transform 200ms ease; }
.picker-ticket-back { z-index: 0; top: 8%; right: 9%; transform: translate(0, 0) rotate(-12deg); }
.picker-ticket-front { z-index: 1; top: 25%; right: 3%; transform: translate(0, 0) rotate(4deg); }
.picker-football { z-index: 2; bottom: 2%; left: 12%; width: 49%; filter: drop-shadow(0 7px 5px #26302412); transform: rotate(-10deg); }
.world-option.is-active .picker-ticket-back { transform: translate(7%, -9%) rotate(-17deg); animation: picker-ticket-back-slide 440ms cubic-bezier(.22, 1, .36, 1) both; }
.world-option.is-active .picker-ticket-front { transform: translate(10%, -3%) rotate(9deg); animation: picker-ticket-front-slide 460ms 50ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes picker-ticket-back-slide { from { transform: translate(0, 0) rotate(-12deg); } to { transform: translate(7%, -9%) rotate(-17deg); } }
@keyframes picker-ticket-front-slide { from { transform: translate(0, 0) rotate(4deg); } to { transform: translate(10%, -3%) rotate(9deg); } }
@media (max-width: 850px) {
  .world-picker { gap: 12px; }
  .world-option { gap: 16px; padding-inline: 4px; }
  .world-option-title { font-size: 18px; }
  .world-option-outcome { max-width: 160px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .world-picker-prompt { margin-bottom: 16px; font-size: 12px; }
  .world-picker { gap: 6px; }
  .world-option { gap: 13px; padding: 8px 2px 12px; border-radius: 17px; }
  .world-option-title { max-width: 100%; font-size: 15px; line-height: 1.25; letter-spacing: -.25px; text-wrap: balance; }
  .world-option-arrow, .world-option-outcome { display: none; }
  .world-art-ground { filter: blur(5px); }
}
@media (max-width: 370px) {
  .world-picker { gap: 4px; }
  .world-option { padding-inline: 0; gap: 11px; }
  .world-option-title { font-size: 13px; }
}
@media (max-width: 650px) {
  .chooser-hero .world-picker-prompt { margin-bottom: 24px; }
  .chooser-hero .world-picker { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .chooser-hero .world-option { width: 100%; max-width: 320px; margin-inline: auto; gap: 18px; padding: 8px 12px; background: transparent; border-color: transparent; }
  .chooser-hero .world-art { width: 200px; }
  .chooser-hero .world-option-title { font-size: 22px; line-height: 1.3; letter-spacing: -.4px; }
  .chooser-hero .world-option-outcome { display: block; max-width: 280px; margin: 6px auto 0; font-size: 14px; line-height: 1.5; text-wrap: balance; }
  .chooser-hero .world-option-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .world-option, .world-option-arrow, .picker-receipt, .picker-envelope, .picker-ticket { transition: none; }
  .world-option.is-active .picker-receipt,
  .world-option.is-active .picker-email-heading,
  .world-option.is-active .picker-email-image,
  .world-option.is-active .picker-email-button,
  .world-option.is-active .picker-envelope,
  .world-option.is-active .picker-ticket-back,
  .world-option.is-active .picker-ticket-front { animation: none; }
}