/* Illustraties van 'App op je beginscherm' (art.js). Gedeeld door het spel en /hulp-app.html. */
.pwa-art{display:block;width:100%;max-width:240px;height:auto;margin:0 auto}
.pwa-arr{animation:pwa-bob 1s ease-in-out infinite}
@keyframes pwa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.pwa-arr-r{animation:pwa-bobr 1s ease-in-out infinite}
@keyframes pwa-bobr{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
.pwa-arr-u{animation:pwa-bobu 1s ease-in-out infinite}
@keyframes pwa-bobu{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pwa-pop{transform-box:fill-box;transform-origin:center;animation:pwa-pop 1.4s ease-in-out infinite}
@keyframes pwa-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.pwa-menu{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 14px 12px 54px;background:#fff;border:4px solid #1d2b53;border-radius:18px;max-width:300px}
.pwa-gr{display:block;height:20px;border-radius:10px;background:#e6ecf7}
.pwa-hot{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#ffd23f;border:4px solid #1d2b53;border-radius:14px;font-size:20px;line-height:1.15;animation:pwa-glow 1.4s ease-in-out infinite}
.pwa-rowic{flex:none;display:flex}
.pwa-sarr{position:absolute;left:4px;top:50%;margin-top:-23px}
.pwa-pillbox{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 0}
.pwa-pillbox .pwa-sarr{position:static;margin:0;order:2}
.pwa-pill{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;font-size:22px;color:#1d2b53;background:#ffd23f;border:4px solid #1d2b53;border-radius:999px;box-shadow:0 5px 0 #1d2b53;animation:pwa-glow 1.4s ease-in-out infinite}
.pwa-pill.big{font-size:22px}
@keyframes pwa-glow{0%,100%{box-shadow:0 0 0 0 #ff5d8f00}50%{box-shadow:0 0 0 8px #ff5d8f66}}
@media(prefers-reduced-motion:reduce){.pwa-arr,.pwa-arr-r,.pwa-arr-u,.pwa-pop,.pwa-hot,.pwa-pill{animation:none}}