/* Zählwiese V127 – Bilder-Memory in a fully illustrated children's book world. */
#app .memory127-page.main-content{
 position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;
 width:100%!important;min-height:0!important;height:100%!important;flex:1 1 auto!important;
 padding:8px max(11px,3vw) max(11px,env(safe-area-inset-bottom,0px))!important;
 margin:0!important;gap:8px!important;overflow:hidden!important;
 box-sizing:border-box!important;isolation:isolate!important;
 background:#9bd2b5 url('/home-v126/background-portrait.webp') center /100% 100% no-repeat!important;
 font-family:'Segoe Print','Comic Neue',cursive!important;
}
#app .memory127-page *{box-sizing:border-box!important}
#app .memory127-page button{cursor:pointer!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important}
#app .memory127-page button:focus-visible{outline:4px solid #ffda7b!important;outline-offset:2px!important}
.memory127-title{
 position:relative;display:grid;place-items:center;flex:0 0 auto;
 min-width:155px;min-height:46px;padding:4px 17px;
 border:5px solid #9c653e;border-radius:38% 30% 34% 34% / 20% 22% 23% 23%;
 background:#f6d59d url('/home-paint-v78/wood-plaque.webp') center/100% 100% no-repeat!important;
 color:#765038;font-size:clamp(20px,5.4vw,31px);font-weight:900;line-height:1.1;text-shadow:1px 1px #fff0c4;
 filter:drop-shadow(0 3px 2px #75583e4c);
}
.memory127-select .memory127-title{margin-top:2.2vh!important;font-size:clamp(30px,8vw,43px);min-width:230px;min-height:65px}
.memory127-heroes{
 position:relative;width:min(100%,420px);height:clamp(110px,26vh,210px);display:flex;justify-content:center;align-items:end;gap:0;
}
.memory127-heroes img{max-height:100%;height:100%;width:47%;object-fit:contain;object-position:center bottom;filter:drop-shadow(2px 4px 2px #6753395c)}
.memory127-heroes img:nth-child(1){transform:rotate(-4deg)}
.memory127-heroes img:nth-child(2){transform:rotate(4deg)}
.memory127-choices{
 position:relative;width:min(100%,540px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2vw,14px);
 align-items:start;justify-items:center;margin:auto 0;
}
.memory127-choice{width:100%;max-width:174px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:0;background:none;padding:0;color:#654534;font-size:clamp(16px,4vw,22px);font-weight:950;text-shadow:1px 1px #fff7db}
.memory127-choice img{
 width:min(100%,174px);aspect-ratio:1;object-fit:contain;filter:drop-shadow(1px 4px 2px #76533b71);
 transition:transform .25s ease;
}
.memory127-choice:active img{transform:scale(.9) rotate(-6deg)}
.memory127-choice span{background:#f7dca6eb;border-radius:30px;border:3px solid #a9794b;padding:3px 9px;line-height:1.12}
.memory127-hint{
 font-size:clamp(15px,4vw,19px);text-align:center;font-weight:900;line-height:1.1;
 padding:5px 9px;border-radius:24px;background:#fff1cae8;color:#825742;margin:0 auto 3vh;
}
.memory127-game{gap:4px!important}
.memory127-header{width:min(100%,520px);min-height:51px;flex:0 0 auto;display:flex;gap:9px;align-items:center;justify-content:space-between}
.memory127-header .memory127-title{min-width:0;min-height:45px;font-size:clamp(19px,5vw,26px);max-width:65%;padding:4px 13px}
.memory127-level-img{display:grid;place-items:center;width:55px;height:55px;background:#f8e6c5;border:3px solid #a97549;border-radius:50%}
.memory127-level-img img{width:90%;height:90%;object-fit:contain}
.memory127-progress{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;max-width:140px;gap:3px;padding:5px 7px;background:#fdf0cadc;border:3px solid #bc8a57;border-radius:18px}
.memory127-progress i{width:10px;height:10px;background:#d6c2a4;border:1px solid #ae9074;border-radius:50%}
.memory127-progress i.is-done{background:#e7a45e;border-color:#a46b40;box-shadow:inset 1px 1px #fff5af}
.memory127-grid{
 position:relative;flex:1 1 auto;align-self:center;
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));
 gap:clamp(5px,1.7vw,11px);
 width:min(100%,min(430px,calc((100dvh - 180px)*.75)));
 max-height:calc(100% - 113px);height:100%;align-content:center;justify-content:center;place-items:stretch;
 padding:4px 0;perspective:900px;min-height:0;
}
.memory127-grid:has(>.memory127-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(1,minmax(0,1fr));width:min(100%,280px);height:min(55%,240px)}
.memory127-grid:has(>.memory127-card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:min(100%,310px);height:min(70%,360px)}
.memory127-grid:has(>.memory127-card:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:min(100%,350px);height:min(70%,280px)}
.memory127-card{
 all:unset!important;display:block!important;position:relative!important;
 width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
 border:0!important;background:transparent!important;padding:0!important;margin:0!important;
 border-radius:11px!important;cursor:pointer!important;
 perspective:1000px!important;touch-action:manipulation!important;
}
.memory127-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .51s cubic-bezier(.2,.75,.3,1);will-change:transform}
.memory127-card.is-flipped .memory127-inner,.memory127-card.is-matched .memory127-inner{transform:rotateY(180deg)}
.memory127-back,.memory127-front{
 position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
 border:4px solid #b77a62;border-radius:12px;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;
 box-shadow:0 2px 2px #66483172,inset 1px 1px #fff8cb;
 background:#f6deb7;
}
.memory127-back img{width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none}
.memory127-front{transform:rotateY(180deg);border-color:#bf716a;background:#f9eed6}
.memory127-front-face{position:relative;width:100%;height:100%;display:grid;place-items:center}
.memory127-front-face img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.memory127-fingers .memory127-front-face img{width:99%;height:100%;object-fit:contain}
.memory127-card.is-matched .memory127-front{border-color:#79ae7c;box-shadow:0 0 0 3px #fff1b5aa}
.memory127-card.is-matched{animation:memory127-joy .45s ease}
@keyframes memory127-joy{50%{filter:brightness(1.11);transform:scale(1.025)}}
.memory127-won{animation:memory127-win 1.1s ease-in-out infinite alternate}
@keyframes memory127-win{to{filter:drop-shadow(0 0 10px #f7d996)}}
.memory127-controls{display:flex;justify-content:center;gap:24px;align-items:center;flex:0 0 auto;min-height:52px}
.memory127-round{
 width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#f4dba9 url('/picnic-v118/btn-restart.webp') center/cover no-repeat;
 border:0;box-shadow:0 2px 3px #664b3975;padding:0;
}
.memory127-round span{font-size:39px;line-height:1;color:#904f3b}
.memory127-switch{background:#e4d8ab url('/picnic-v118/btn-hint.webp') center/cover no-repeat}
.memory127-switch img{width:47%;height:47%;object-fit:contain;filter:drop-shadow(1px 1px #75634f)}
.memory127-fx{pointer-events:none;position:absolute;inset:0;overflow:hidden;z-index:15}
.memory127-confetti{position:absolute;width:10px;height:13px;border-radius:3px;animation:memory127-pop 1.2s ease-out both}
@keyframes memory127-pop{0%{opacity:0;transform:scale(.4)}18%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(200deg) scale(.75)}}
.memory127-dealing .memory127-card{animation:memory127-deal .55s ease-out both}
@keyframes memory127-deal{0%{opacity:.2;transform:translateY(-13px) scale(.88)}100%{opacity:1;transform:none}}
.memory127-title.memory127-complete{animation:memory127-joy 1s infinite alternate}
.memory127-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(orientation:portrait) and (max-height:730px){
 #app .memory127-page.main-content{gap:3px!important;padding-top:2px!important}
 .memory127-heroes{height:clamp(110px,23vh,170px)}
 .memory127-header{min-height:42px}
 .memory127-header .memory127-title{min-height:37px;font-size:19px}
 .memory127-grid{max-height:calc(100% - 95px);width:min(100%,min(350px,calc((100dvh - 150px)*.76)))}
 .memory127-controls{min-height:40px}
 .memory127-round{width:43px;height:43px}
}
@media(orientation:landscape){
 #app .memory127-page.main-content{
  display:grid!important;grid-template-columns:minmax(0,33%) minmax(0,67%)!important;
  grid-template-rows:auto 1fr auto!important;gap:2px 8px!important;
  background-image:url('/home-v125/playground-landscape.webp')!important;
 }
 .memory127-header{grid-area:1/1;flex-direction:column;max-width:100%;min-height:32px}
 .memory127-header .memory127-title{font-size:clamp(17px,3vh,23px)}
 .memory127-select .memory127-title{grid-column:1/-1;margin:0!important;min-height:44px}
 .memory127-select .memory127-heroes{grid-area:2/1;height:78%;width:100%}
 .memory127-select .memory127-choices{grid-area:1/2/4/3;margin:auto;max-width:480px}
 .memory127-select .memory127-hint{grid-area:3/1;margin:0!important;font-size:14px}
 .memory127-grid{grid-area:1/2/4/3;width:min(100%,min(510px,calc((100dvh - 65px)*2.1)))!important;
  max-height:98%!important;height:98%!important;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));
 }
 .memory127-grid:has(>.memory127-card:nth-child(2):last-child){width:min(260px,100%)!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}
 .memory127-controls{grid-area:3/1}
 .memory127-choice img{max-width:118px}
}
@media(prefers-reduced-motion:reduce){
 .memory127-inner{transition:none!important}
 .memory127-card,.memory127-won,.memory127-confetti{animation-duration:.01ms!important;animation-iteration-count:1!important}
}