/* Ponyspiele auf mystablegame.app: grosse Ziele, keine Zeitanzeige, Bewegung nur ohne "reduzierte Bewegung". */
.games-main { max-width: 1100px; margin: 0 auto; padding: 28px 16px 40px; }
.games-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.games-head h1 { margin: 0; }
.games-head .lead { flex: 1 1 320px; margin: 0; }
.sound-toggle { min-height: 48px; padding: 8px 18px 8px 44px; border-radius: 999px; border: 2px solid var(--line); background: var(--card) no-repeat 14px center / 22px; color: var(--ink); font: 600 1rem var(--head); cursor: pointer; position: relative; }
.sound-toggle::before { content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 3px 8px 8px 3px; background: currentColor; }
.sound-toggle[aria-pressed="false"] { opacity: 0.8; text-decoration: line-through; }
.game-picker { margin-top: 20px; }
.noscript { background: var(--card); padding: 16px; border-radius: 16px; }
.games-parents { margin-top: 28px; }

.game { margin-top: 12px; scroll-margin-top: 90px; }
.game h2 { margin-bottom: 4px; }
.game-hint { color: var(--muted); font-size: 1.1rem; }
.keys { font-size: 0.95rem; }
.stage { position: relative; border-radius: 28px; border: 6px solid var(--card); box-shadow: var(--shadow); overflow: hidden; background: #8cc35a center / cover no-repeat; touch-action: none; user-select: none; -webkit-user-select: none; }
.stage img { -webkit-user-drag: none; user-select: none; }

/* Striegeln */
.stage-groom { aspect-ratio: 3 / 2; max-height: 70vh; margin: 0 auto; cursor: none; background-image: url("/assets/img/meadow-960.webp"); }
@media (max-width: 600px) { .stage-groom { aspect-ratio: 4 / 5; max-height: 62vh; } }
.groom-pony { position: absolute; left: 50%; bottom: 6%; width: min(72%, 520px); transform: translateX(-50%); }
.groom-pony img { display: block; width: 100%; height: auto; }
.groom-pony.is-happy { animation: hop 0.6s ease-in-out 2; }
.spot { position: absolute; width: 18%; aspect-ratio: 1; margin: -9% 0 0 -9%; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: inherit; }
.spot img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: opacity 0.2s; }
.spot:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.brush-cursor { position: absolute; width: 120px; height: auto; pointer-events: none; transform: translate(-30%, -60%) rotate(-12deg); z-index: 3; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.25)); }
.brush-cursor[hidden] { display: none; }

/* Fuettern */
.stage-feed { touch-action: pan-y; padding: 18px; background-image: url("/assets/img/stable-960.webp"); display: grid; gap: 16px; }
.feed-ponies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.feed-pony { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 200px; padding: 72px 8px 12px; border: 3px solid transparent; border-radius: 22px; background: rgba(255, 251, 234, 0.92); color: #2f2416; font: 600 1.05rem var(--head); cursor: pointer; }
.feed-pony.is-target { border-color: var(--green); }
.feed-pony.is-fed { background: #e3f0cf; }
.feed-pony > img { width: min(100%, 140px); height: auto; border-radius: 50%; }
.bubble { position: absolute; top: 8px; right: 8px; width: 64px; height: 64px; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: 0 3px 0 rgba(122, 75, 38, 0.25); }
.bubble img { width: 46px; height: 46px; object-fit: contain; }
.feed-pony.is-fed .bubble img { opacity: 0.35; }
.feed-pony.is-fed .bubble::after { content: "✓"; position: absolute; color: #2f6a1e; font: 700 2rem/1 var(--head); }
.feed-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); justify-content: center; gap: 12px; margin: 0; padding: 14px; list-style: none; background: rgba(122, 75, 38, 0.82); border-radius: 22px; min-height: 120px; }
.food { width: 100%; max-width: 96px; height: auto; aspect-ratio: 1; padding: 8px; border: 3px solid transparent; border-radius: 20px; background: rgba(255, 251, 234, 0.95); cursor: grab; touch-action: none; }
.food img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.food[aria-pressed="true"] { border-color: var(--sun); box-shadow: 0 0 0 4px rgba(255, 212, 92, 0.5); }
.food.is-dragging { opacity: 0.35; }
.food-ghost { position: fixed; z-index: 40; width: 96px; height: 96px; pointer-events: none; transform: translate(-50%, -50%); }
.feed-pony.is-wobble { animation: wobble 0.4s ease-in-out; }
@media (max-width: 360px) { .feed-pony { padding-top: 60px; } .feed-pony > img { width: 72%; } }
@media (max-width: 520px) {
  .feed-pony { min-height: 160px; padding-top: 56px; font-size: 0.95rem; }
  .bubble { width: 50px; height: 50px; }
  .bubble img { width: 36px; height: 36px; }
}

/* Memory */
.stage-memory { touch-action: pan-y; padding: clamp(10px, 3vw, 22px); background-image: url("/assets/img/stable-960.webp"); }
.memory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2vw, 16px); max-width: 680px; margin: 0 auto; padding: 0; list-style: none; }
@media (max-width: 520px) { .memory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mcard { position: relative; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px; }
.mcard-inner { position: absolute; inset: 0; transition: transform 0.45s; transform-style: preserve-3d; }
.mcard.is-open .mcard-inner, .mcard.is-done .mcard-inner { transform: rotateY(180deg); }
.mcard-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 4px solid #fffbea; box-shadow: 0 4px 0 rgba(80, 52, 20, 0.3); }
.mcard-back { background: #a63a28; }
.mcard-back img { width: 70%; height: auto; }
.mcard-front { background: #fff6e3; transform: rotateY(180deg); align-content: center; gap: 2px; padding: 6px; }
.mcard-front img { width: 82%; height: auto; border-radius: 50%; }
.mcard-front span { font: 600 clamp(0.8rem, 2.4vw, 1rem)/1.1 var(--head); color: #2f2416; }
.mcard.is-done .mcard-front { background: #e3f0cf; }
.mcard:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 16px; }

/* Rundenende */
.game-say { min-height: 1.6em; margin: 10px 0 0; text-align: center; font: 600 1.15rem var(--head); color: var(--green-deep); }
.round-end { margin-top: 18px; display: grid; gap: 16px; }
.round-end[hidden], .game[hidden], .sound-toggle[hidden] { display: none; }
.round-msg { font: 600 clamp(1.4rem, 4vw, 2rem) var(--head); color: var(--green-deep); text-align: center; margin: 0; }
.round-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.parent-note { background: var(--card); border: 2px solid var(--line); border-radius: 22px; padding: 20px 22px; max-width: 720px; margin: 8px auto 0; }
.parent-note h3 { color: var(--green-deep); }
.parent-note p { color: var(--muted); }
.parent-note .badges { margin: 12px 0; }

.celebrate { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.celebrate img { position: absolute; width: 48px; height: 48px; animation: float-up 1.6s ease-out forwards; }
@keyframes float-up { from { transform: translateY(0) scale(0.6); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-220px) scale(1.1); opacity: 0; } }
@keyframes hop { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-18px); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .mcard-inner { transition: none; }
  .groom-pony.is-happy, .feed-pony.is-wobble, .celebrate img { animation: none; }
  .celebrate { display: none; }
  .spot img { transition: none; }
}