:root{font-family:'Trebuchet MS',Arial,sans-serif;color:#23465a;background:#c9eeff;font-synthesis:none}*{box-sizing:border-box}body{--accent:#8261ba;--dark:#60428f;--back:#a684d3;--edge:#d9c2f2;--sky:#c9eeff;--floor:#dfe8ac;margin:0;min-height:100vh;background:var(--sky);transition:background .35s}body[data-theme=peppa]{--accent:#db528b;--dark:#a33167;--back:#ed91b5;--edge:#ffd1df;--sky:#bce8fa;--floor:#a8d374}body[data-theme=patrulha]{--accent:#2466b1;--dark:#174777;--back:#377ccb;--edge:#ffda65;--sky:#bfdef3;--floor:#94c7aa}body[data-theme=bob]{--accent:#168caa;--dark:#126378;--back:#45b8cc;--edge:#ffe36d;--sky:#80d5e8;--floor:#f1df9f}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:4px solid #183e60;outline-offset:4px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.scenery{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.ground{position:absolute;bottom:-40px;left:-10%;width:120%;height:28%;background:var(--floor);border-radius:50% 50% 0 0}.decor{position:absolute;font-size:clamp(48px,8vw,105px);opacity:.8}.d1{top:11%;left:4%}.d2{top:22%;right:4%}.d3{bottom:6%;left:3%}.d4{bottom:5%;right:3%}.d1:before{content:'🌈'}.d2:before{content:'☁️'}.d3:before{content:'🌼'}.d4:before{content:'🌷'}[data-theme=peppa] .d1:before{content:'☀️'}[data-theme=peppa] .d2:before{content:'☁️'}[data-theme=peppa] .d3:before{content:'🌳'}[data-theme=peppa] .d4:before{content:'🌻'}[data-theme=peppa] .ground{background:radial-gradient(ellipse at 22% 70%,#ad7752 0 7%,transparent 7.5%),radial-gradient(ellipse at 79% 80%,#ad7752 0 9%,transparent 9.5%),var(--floor)}[data-theme=patrulha] .d1:before{content:'🚁'}[data-theme=patrulha] .d2:before{content:'🏢'}[data-theme=patrulha] .d3:before{content:'🚒'}[data-theme=patrulha] .d4:before{content:'🚓'}[data-theme=patrulha] .ground{border-radius:0;border-top:8px solid #ffda65;background:repeating-linear-gradient(90deg,transparent 0 60px,#fff8bb 60px 100px,transparent 100px 160px) center 75%/100% 5px no-repeat,#88a3ac;height:18%}[data-theme=bob] .d1:before{content:'🫧'}[data-theme=bob] .d2:before{content:'🪼'}[data-theme=bob] .d3:before{content:'🪸'}[data-theme=bob] .d4:before{content:'🐚'}[data-theme=bob] .scenery{background:radial-gradient(circle at 12% 43%,transparent 0 22px,#ffffff45 23px 25px,transparent 26px),radial-gradient(circle at 89% 63%,transparent 0 32px,#ffffff45 33px 35px,transparent 36px)}header{max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px}h1{font-size:clamp(18px,3vw,27px);color:var(--dark);text-align:center;margin:0;font-weight:900;letter-spacing:-.6px}.header-actions{display:flex;gap:10px}.icon-button{display:inline-grid;place-items:center;text-decoration:none;background:#fffffff2;border:3px solid white;border-radius:19px;min-width:56px;min-height:56px;box-shadow:0 4px 0 #23465a25;font-size:28px;line-height:1;padding:8px;flex-shrink:0}button:hover,a.icon-button:hover{filter:brightness(1.035);transform:translateY(-2px)}button:active{transform:translateY(2px)}main{max-width:920px;margin:auto;padding:10px 20px 20px;text-align:center}fieldset{display:flex;gap:12px;border:0;padding:0;margin:0}.themes{justify-content:center;margin:0 auto 22px;max-width:620px}.themes button{position:relative;flex:1;min-width:0;height:126px;padding:6px 5px;border:4px solid white;border-radius:22px;background:#fff;box-shadow:0 5px 0 #244f6520;transition:transform .2s}.themes button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 5px 0 var(--dark)}.portrait{display:block;aspect-ratio:1;background:#fff url('personagens.png') no-repeat;background-size:600% 400%;background-position:var(--x) var(--y);border-radius:12px}.themes button>.portrait{width:80px;margin:0 auto;height:80px}.theme-name{font-size:10px;line-height:1;display:block;font-weight:bold;color:#405a6c;margin:7px 0 0}.selected{display:none;position:absolute;right:-7px;top:-8px;width:27px;height:27px;line-height:23px;font-size:19px;color:white;background:var(--accent);border-radius:50%;border:2px solid white}.themes [aria-pressed=true] .selected{display:block}.theme-mix{height:80px;display:flex;justify-content:center;align-items:center;position:relative}.theme-mix .portrait{width:42%;position:absolute;border-radius:50%;border:2px solid white;aspect-ratio:1}.theme-mix .portrait:nth-child(1){left:0;top:0}.theme-mix .portrait:nth-child(2){right:0;top:0}.theme-mix .portrait:nth-child(3){width:48%;bottom:0;left:26%}.controls{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:740px;margin:0 auto 18px}.levels{gap:10px}.levels button{display:grid;place-items:center;background:#ffffffdd;border:3px solid white;border-radius:16px;min-height:55px;padding:10px 13px;box-shadow:0 3px 0 #23465a25}.levels button[aria-pressed=true]{border-color:var(--accent);background:var(--edge)}.mini-cards{display:flex;gap:4px}.mini-cards i{display:block;background:var(--back);border:2px solid white;border-radius:4px;width:17px;height:25px;transform:rotate(-7deg)}.mini-cards i:nth-child(even){transform:rotate(7deg)}#restart{color:var(--dark);font-size:38px}.play-area{max-width:740px;margin:auto;padding:14px 24px 8px;border:4px solid #ffffffd9;background:#ffffffb8;border-radius:28px;box-shadow:0 9px 0 #23465a12;backdrop-filter:blur(3px)}.progress{display:flex;justify-content:center;gap:8px;margin:0 0 14px}.star{font-size:22px;color:#f5b900;line-height:1}.star.empty{color:#879eac}.star.earned{animation:pop .35s ease}.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;max-width:600px;margin:auto}.card{aspect-ratio:1;border:0;padding:0;perspective:800px;background:none;border-radius:18px;position:relative}.inner{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .4s}.card.flipped .inner,.card.matched .inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:17px;display:flex;align-items:center;justify-content:center}.back{background-color:var(--back);color:white;border:5px solid white;box-shadow:0 4px 0 var(--dark);background-image:radial-gradient(#ffffff36 3px,transparent 3px);background-size:22px 22px}.back span{font-size:42px;line-height:1;background:#ffffff25;border-radius:50%;padding:10px}.front{transform:rotateY(180deg);background:white;border:4px solid var(--edge);box-shadow:0 4px 0 #23465a25}.front .portrait{width:94%;height:94%}.card.matched .front{border-color:#6fbd57}.card.matched:after{content:'★';position:absolute;right:-3px;top:-4px;border:2px solid white;border-radius:50%;background:#f1b900;color:white;width:27px;height:27px;font-size:19px}.card:disabled{cursor:default;opacity:1}.feedback{min-height:42px;font-size:25px;line-height:42px;margin-top:10px;letter-spacing:5px}footer{font-size:9px;color:#375363;margin:22px 0 0}dialog{border:5px solid var(--edge);border-radius:30px;padding:35px 28px;text-align:center;color:#23465a;background:#fffdf5;max-width:calc(100% - 28px);min-width:min(350px,calc(100% - 28px));box-shadow:0 20px 70px #17385a40}dialog::backdrop{background:#183a5a88;backdrop-filter:blur(5px)}.celebration{font-size:48px;margin:10px 0 30px}.big-play{background:var(--accent);color:white;font-size:40px;border:4px solid white;border-radius:25px;min-width:104px;min-height:76px;box-shadow:0 5px 0 var(--dark)}.close{position:absolute;right:8px;top:8px;min-width:44px;min-height:44px;font-size:22px}.demo{position:relative;display:flex;gap:25px;justify-content:center;margin:32px 0 60px}.demo-card{position:relative;width:100px;height:100px;background:var(--back);border:4px solid var(--edge);border-radius:18px;overflow:hidden}.demo-card .portrait{width:100%;height:100%;animation:reveal-first 4s infinite}.demo-card.second .portrait{animation-name:reveal-second}.demo-hand{position:absolute;left:35px;top:90px;font-size:35px;animation:hand 4s infinite}.demo-star{position:absolute;top:26px;font-size:44px;opacity:0;animation:demo-star 4s infinite}@keyframes reveal-first{0%,10%{opacity:0}20%,100%{opacity:1}}@keyframes reveal-second{0%,45%{opacity:0}55%,100%{opacity:1}}@keyframes hand{0%,25%{transform:translateX(0)}45%,70%{transform:translateX(125px)}85%,100%{opacity:0;transform:translateX(125px)}}@keyframes demo-star{0%,60%{opacity:0;transform:scale(.3)}75%,100%{opacity:1;transform:scale(1)}}@keyframes pop{50%{transform:scale(1.4)}}@media(max-width:600px){header{padding:12px;gap:7px}h1{font-size:17px;max-width:125px}.icon-button{min-width:48px;min-height:48px;font-size:25px;border-radius:15px}.header-actions{gap:7px}main{padding:10px 10px 20px}.themes{gap:8px;margin-bottom:18px}.themes button{height:100px;border-width:3px;border-radius:17px;padding:4px 2px}.themes button>.portrait{width:min(64px,100%);height:auto;aspect-ratio:1}.theme-mix{height:64px}.theme-name{font-size:8px;margin-top:5px}.selected{width:24px;height:24px;line-height:20px;font-size:16px;right:-5px;top:-7px}.controls{margin-bottom:15px}.levels{gap:7px}.levels button{padding:8px;min-height:48px}.mini-cards{gap:3px}.mini-cards i{width:13px;height:21px}.play-area{padding:12px 10px 4px;border-width:3px;border-radius:23px}.board{gap:10px}.face{border-radius:13px}.back{border-width:3px}.back span{font-size:27px;padding:5px}.front{border-width:3px}.card.matched:after{width:22px;height:22px;font-size:15px}.progress{gap:6px;margin-bottom:12px}.star{font-size:20px}.decor{font-size:46px;opacity:.45}.feedback{font-size:24px}.theme-mix .portrait{max-width:38px}.ground{height:22%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.demo-card .portrait{opacity:1}.demo-hand{display:none}.demo-star{opacity:1}}
body{isolation:isolate}.scenery{z-index:-1}
[data-theme=bob] .d1:before{content:"🐟"}[data-theme=bob] .d2:before{content:"🐠"}[data-theme=bob] .d3:before{content:"🌿"}