/* Five original worlds. All motion is optional and contains no timing task. */
.jg-game {
  --jg-accent: #78d9cf;
  color: var(--ink, #f3f4f9);
  font-family: var(--f-body, system-ui, sans-serif);
  border: 1px solid color-mix(in oklab, var(--jg-accent) 23%, transparent);
  border-radius: 25px;
  background: linear-gradient(155deg, color-mix(in oklab, var(--jg-accent) 6%, #10131e), #0c0f18 65%);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 65px -40px color-mix(in oklab, var(--jg-accent) 60%, transparent);
}
.jg-game *, .jg-game *::before, .jg-game *::after { box-sizing: border-box; }
.jg-world-title { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklab, var(--jg-accent) 76%, white); }
.jg-emblem { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid color-mix(in oklab, var(--jg-accent) 30%, transparent); border-radius: 8px; font-size: 17px; line-height: 1; }
.jg-world { position: relative; width: 100%; aspect-ratio: 12 / 7; min-height: 190px; max-height: 310px; background: radial-gradient(ellipse at 50% 45%, color-mix(in oklab, var(--jg-accent) 9%, transparent), transparent 65%); }
.jg-world::after { content: ""; position: absolute; inset: auto 12% 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--jg-accent) 25%, transparent), transparent); }
.jg-art { display: block; width: 100%; height: 100%; overflow: visible; }
.jg-art-compact { max-height: 210px; }
.jg-prompt { margin: 0; padding: 4px 22px 20px; font-size: 15px; line-height: 1.65; color: #dce0ef; text-wrap: pretty; }
.jg-controls { display: grid; gap: 13px; padding: 0 20px 8px; }
.jg-instruction { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-2, #babed0); }
.jg-selected { margin: 0; color: color-mix(in oklab, var(--jg-accent) 60%, white); font-size: 13px; line-height: 1.55; min-height: 0; }
.jg-selected:empty, .jg-status:empty { display: none; }
.jg-choices { display: grid; grid-template-columns: 1fr; gap: 8px; }
.jg-choice, .jg-zone, .jg-token-card, .jg-plant-button, .jg-submit, .jg-scene-token {
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .2s, border-color .2s, box-shadow .25s, transform .25s;
}
.jg-choice { width: 100%; min-height: 45px; padding: 12px 15px; border-radius: 13px; border: 1px solid #ffffff12; background: #ffffff04; color: #c8cddf; text-align: left; font-size: 13px; line-height: 1.5; }
.jg-choice:hover, .jg-token-card:hover { background: color-mix(in oklab, var(--jg-accent) 8%, #171b29); border-color: color-mix(in oklab, var(--jg-accent) 30%, transparent); }
.jg-choice[aria-pressed="true"], .jg-token-card[aria-pressed="true"] { background: color-mix(in oklab, var(--jg-accent) 12%, #111623); border-color: color-mix(in oklab, var(--jg-accent) 60%, transparent); color: #f3f4f9; box-shadow: inset 3px 0 0 var(--jg-accent); }
.jg-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.jg-inline .jg-choice { text-align: center; padding: 10px 6px; font-size: 11px; }
.jg-inline .jg-choice[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--jg-accent); }
.jg-zone-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.jg-zone { min-height: 45px; padding: 10px 6px; border-radius: 11px; border: 1px solid color-mix(in oklab, var(--jg-accent) 26%, transparent); background: color-mix(in oklab, var(--jg-accent) 6%, #111521); color: #d8dcf0; font-size: 11px; line-height: 1.4; }
.jg-zone:hover { background: color-mix(in oklab, var(--jg-accent) 18%, #111521); border-color: var(--jg-accent); }
.jg-zone:active, .jg-choice:active, .jg-submit:active, .jg-plant-button:active { transform: scale(.98); }
.jg-token-list { display: grid; gap: 7px; }
.jg-token-card { width: 100%; display: block; min-height: 43px; background: #ffffff03; color: #aeb7d0; border: 1px solid #ffffff0c; border-radius: 11px; text-align: left; padding: 10px 13px; font-size: 12px; line-height: 1.5; }
.jg-token-card[data-placed="true"] { color: color-mix(in oklab, var(--jg-accent) 48%, #d7dce9); }
.jg-scene-tokens { position: absolute; inset: 0; pointer-events: none; }
.jg-scene-token { position: absolute; left: calc(15% + var(--token-i) * 35%); top: calc(26% + var(--token-i) * 16%); display: grid; place-items: center; width: 32px; height: 32px; margin: -16px 0 0 -16px; pointer-events: auto; touch-action: none; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--jg-accent) 65%, white); color: #f3f3ff; font-size: 11px; background: color-mix(in oklab, var(--jg-accent) 30%, #141a2c); box-shadow: 0 0 18px color-mix(in oklab, var(--jg-accent) 25%, transparent), inset 0 0 8px #ffffff18; transition: left .65s cubic-bezier(.2,.8,.2,1), top .65s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.jg-scene-token::after { content: ""; position: absolute; inset: -6px; border: 1px solid transparent; border-radius: 50%; transition: border-color .2s; }
.jg-scene-token[aria-pressed="true"]::after { border-color: color-mix(in oklab, var(--jg-accent) 50%, transparent); }
.jg-game[data-world="circle"] .jg-scene-token[data-zone="0"] { left: calc(44% + var(--slot-i) * 7%); top: calc(45% + var(--slot-i) * 7%); }
.jg-game[data-world="circle"] .jg-scene-token[data-zone="1"] { left: calc(34% + var(--slot-i) * 17%); top: 25%; }
.jg-game[data-world="circle"] .jg-scene-token[data-zone="2"] { left: calc(13% + var(--slot-i) * 37%); top: 75%; }
.jg-game[data-world="island"] .jg-scene-token[data-zone="0"] { left: calc(44% + var(--slot-i) * 14%); top: 55%; }
.jg-game[data-world="island"] .jg-scene-token[data-zone="1"] { left: 85%; top: calc(25% + var(--slot-i) * 17%); }
.jg-game[data-world="island"] .jg-scene-token[data-zone="2"] { left: calc(13% + var(--slot-i) * 13%); top: 77%; opacity: .55; box-shadow: none; }
.jg-game .jg-scene-token.jg-dragging { z-index: 3; left: var(--drag-x); top: var(--drag-y); transition: none; box-shadow: 0 0 32px color-mix(in oklab, var(--jg-accent) 55%, transparent); }
.jg-field { display: grid; gap: 7px; }
.jg-field-label { color: #d6dcea; font-size: 12px; font-weight: 600; }
.jg-input { width: 100%; min-height: 83px; resize: vertical; border: 1px solid #ffffff14; border-radius: 13px; background: #070b1280; padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.6; color: #eef1fa; outline: none; transition: border-color .2s, box-shadow .2s; }
.jg-input::placeholder { color: #727e97; font-size: 12px; }
.jg-input:focus { border-color: color-mix(in oklab, var(--jg-accent) 65%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--jg-accent) 8%, transparent); }
.jg-game :is(button, textarea):focus-visible { outline: 2px solid var(--jg-accent); outline-offset: 4px; }
.jg-submit, .jg-plant-button { width: 100%; min-height: 48px; padding: 13px 18px; border: 1px solid color-mix(in oklab, var(--jg-accent) 55%, transparent); border-radius: 14px; color: #0e1720; font-size: 13px; font-weight: 650; line-height: 1.5; background: linear-gradient(115deg, color-mix(in oklab, var(--jg-accent) 80%, white), var(--jg-accent)); box-shadow: 0 9px 25px -17px var(--jg-accent); }
.jg-plant-button { background: color-mix(in oklab, var(--jg-accent) 8%, #111823); color: #d5eadc; }
.jg-submit:disabled, .jg-plant-button:disabled { opacity: .38; cursor: default; transform: none; box-shadow: none; }
.jg-done .jg-submit { opacity: .7; background: #ffffff08; color: var(--jg-accent); }
.jg-status { margin: 7px 20px 18px; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--jg-accent) 20%, transparent); border-radius: 13px; background: color-mix(in oklab, var(--jg-accent) 5%, transparent); color: #d8e0ed; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.jg-hint, .jg-private, .jg-note { margin: 0; color: #8590a6; font-size: 11px; line-height: 1.6; }
.jg-private { padding: 3px 0 12px; }
.jg-note { padding: 20px; }
.jg-beds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.jg-beds .jg-choice { text-align: center; font-size: 11px; padding: 10px 5px; border-style: dashed; }
.jg-garden-progress { display: flex; justify-content: center; gap: 7px; padding: 0 0 7px; }
.jg-growth-dot { height: 5px; width: 5px; border-radius: 50%; background: #ffffff12; }
.jg-growth-dot[data-grown="true"] { background: #a2d9ab; box-shadow: 0 0 7px #8adba933; }
.jg-dialogue { display: grid; gap: 9px; }
.jg-dialogue:empty { display: none; }
.jg-speech { display: flex; align-items: flex-start; gap: 9px; padding: 13px 15px; border: 1px solid color-mix(in oklab, var(--jg-accent) 18%, transparent); background: color-mix(in oklab, var(--jg-accent) 5%, transparent); border-radius: 16px 16px 16px 4px; font-size: 13px; line-height: 1.65; color: #e7e5e0; overflow-wrap: anywhere; animation: jg-speech-in .5s ease both; }
.jg-speech:nth-child(2) { margin-left: 16px; animation-delay: .1s; border-radius: 16px 16px 4px 16px; }
.jg-speech:nth-child(3) { animation-delay: .2s; }
.jg-speech p { margin: 0; }
.jg-speech-number { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; font-size: 10px; border-radius: 50%; background: color-mix(in oklab, var(--jg-accent) 10%, transparent); color: var(--jg-accent); }

/* Soft living illustrations; interaction changes their geometry or state. */
.jg-star { animation: jg-twinkle 5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.41s); }
.jg-main-orb, .jg-speaker-one, .jg-speaker-two { animation: jg-orb-float 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.jg-speaker-two { animation-delay: -3s; }
.jg-boundary-ring { animation: jg-ring-breathe 6s ease-in-out infinite; transform-origin: 240px 137px; }
.jg-shards { transition: opacity 1s, transform 1s; animation: jg-shard-float 8s ease-in-out infinite; transform-origin: center; }
.jg-forge-light { animation: jg-forge-glow 4s ease-in-out infinite alternate; }
.jg-forged-gem { opacity: 0; transform: translateY(37px) scale(.5); transform-origin: 240px 130px; transition: opacity .8s, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.jg-transformed .jg-forged-gem { opacity: 1; transform: translateY(0) scale(1); }
.jg-transformed .jg-shards { opacity: 0; transform: translateY(35px) scale(.5); animation: none; }
.jg-sparks { animation: jg-sparks 4s ease-out infinite; }
.jg-garden-plant { transition: transform 1.3s cubic-bezier(.2,.8,.2,1), opacity 1s; }
.jg-game[data-world="garden"] .jg-garden-plant { transform: scale(.22); opacity: .35; }
.jg-game[data-grown="1"] .jg-plant-1, .jg-game[data-grown="2"] :is(.jg-plant-1,.jg-plant-2), .jg-game[data-grown="3"] .jg-garden-plant { transform: scale(1); opacity: 1; }
.jg-game.jg-planted[data-bed="0"] .jg-plant-1, .jg-game.jg-planted[data-bed="1"] .jg-plant-2, .jg-game.jg-planted[data-bed="2"] .jg-plant-3 { transform: scale(.6); opacity: .9; }
.jg-game.jg-watered[data-bed="0"] .jg-plant-1, .jg-game.jg-watered[data-bed="1"] .jg-plant-2, .jg-game.jg-watered[data-bed="2"] .jg-plant-3 { transform: scale(1); opacity: 1; }
.jg-water { opacity: 0; }
.jg-watered .jg-water { animation: jg-rain 1.3s ease both; }
.jg-floating-leaf { animation: jg-shard-float 9s ease-in-out infinite; }
.jg-bridge { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s ease; }
.jg-game[data-bridge="1"] .jg-bridge { stroke-dashoffset: 67; }
.jg-game[data-bridge="2"] .jg-bridge { stroke-dashoffset: 34; }
.jg-game[data-bridge="3"] .jg-bridge { stroke-dashoffset: 0; }
.jg-scene-bubbles { opacity: .2; transform: translateY(4px); transition: opacity .6s, transform .6s; }
.jg-staged .jg-scene-bubbles { opacity: 1; transform: translateY(0); }
.jg-island { animation: jg-orb-float 8s ease-in-out infinite; }
.jg-water-rings { animation: jg-water-ripple 8s ease-in-out infinite; transform-origin: 240px 222px; }
.jg-released-stones { transition: opacity 1s, transform 1.5s; }
.jg-done .jg-released-stones { opacity: .12; transform: translateY(-20px); }
.jg-rest-moon { transition: opacity 1.2s; }
.jg-done .jg-rest-moon { opacity: 1; }
@keyframes jg-twinkle { to { opacity: .16; } }
@keyframes jg-orb-float { 50% { transform: translateY(-5px); } }
@keyframes jg-ring-breathe { 50% { opacity: .35; transform: scale(1.025); } }
@keyframes jg-shard-float { 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes jg-forge-glow { to { opacity: .72; } }
@keyframes jg-sparks { 0% { opacity: 0; transform: translateY(15px); } 35% { opacity: .8; } 100% { opacity: 0; transform: translateY(-20px); } }
@keyframes jg-rain { 0% { opacity: 0; transform: translateY(-10px); } 35% { opacity: .8; } 100% { opacity: 0; transform: translateY(85px); } }
@keyframes jg-water-ripple { 50% { transform: scale(1.06,.94); opacity: .55; } }
@keyframes jg-speech-in { from { opacity: 0; transform: translateY(8px); } }
.jg-game[data-paused="true"] *, .jg-game[data-paused="true"] *::before, .jg-game[data-paused="true"] *::after { animation-play-state: paused !important; }
.jg-reduced *, .jg-reduced *::before, .jg-reduced *::after { animation: none !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) { .jg-art *, .jg-game *, .jg-game *::before, .jg-game *::after { animation: none !important; transition-duration: .01ms !important; } }
@media (max-width: 370px) { .jg-controls { padding-left: 14px; padding-right: 14px; } .jg-prompt { padding-left: 16px; padding-right: 16px; font-size: 14px; } .jg-world-title { padding-left: 16px; font-size: 10px; } .jg-inline { gap: 5px; } .jg-inline .jg-choice { font-size: 10px; } .jg-garden-progress { gap: 5px; } }