:root{font-family:'Trebuchet MS',Arial,sans-serif;color:#354b44;background:#faf6ed}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 4% 40%,#f6e6c9 0,transparent 38%),radial-gradient(ellipse at 98% 80%,#e1ebd8 0,transparent 35%);min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #aa562c;outline-offset:5px}header{max-width:1120px;margin:auto;padding:25px 28px;display:flex;justify-content:space-between;align-items:center}header a{color:#52685c;text-decoration:none;font-weight:bold;font-size:14px}header button,#restart{background:transparent;border:1px solid #d8ddcc;border-radius:30px;padding:11px 17px;font-size:13px}main{max-width:950px;margin:auto;padding:22px 24px;text-align:center}.eyebrow{font-size:10px;letter-spacing:2px;color:#7c8066;font-weight:bold}h1{font-size:clamp(32px,5vw,54px);letter-spacing:-2px;line-height:1.15;margin:18px 0 14px}h1>span:first-child{color:#b16b43}.spark{display:inline-block;font-size:30px;color:#d7aa4c;vertical-align:top;margin-left:12px}.intro{color:#768174;font-size:16px;margin:0 0 28px}.controls{display:flex;justify-content:space-between;align-items:center;gap:15px;max-width:790px;margin:0 auto 22px}fieldset{display:flex;gap:8px;border:0;margin:0;padding:0}legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}fieldset button{background:#fffdf7;border:1px solid #dedfd1;border-radius:13px;padding:11px 15px;font-size:14px;font-weight:bold;transition:background .2s}fieldset button[aria-pressed=true]{background:#e3ead7;border-color:#819573;box-shadow:0 2px 0 #819573}small{display:block;font-size:10px;font-weight:normal;margin:4px 0 0;color:#69765f}.play-area{padding:22px 26px 8px;background:#ffffff9c;border:1px solid #e4e2d6;border-radius:25px;box-shadow:0 12px 40px #635d3a07;max-width:790px;margin:auto}.score{display:flex;justify-content:space-between;font-size:12px;color:#7a8374;margin-bottom:20px}.score strong{font-size:17px;color:#52654b;margin-right:5px}.board{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;max-width:620px;margin:auto}.card{aspect-ratio:1.08;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;flex-direction:column}.back{background:#7f9b7b;color:#fcf9e9;border:5px solid #fffdf6;box-shadow:0 3px 0 #657e60,0 4px 7px #445b3220;background-image:radial-gradient(#ffffff20 2px,transparent 2px);background-size:17px 17px}.back span{font-size:44px;line-height:1}.back small{font-size:8px;letter-spacing:2px;color:#f7f5e5;margin-top:5px}.front{transform:rotateY(180deg);background:var(--tint);border:4px solid white;box-shadow:0 3px 0 #dcdccf}.front svg{width:74%;height:74%;max-height:108px}.front small{margin:0;font-weight:bold;font-size:11px;color:#4b5547}.card.matched .front{border-color:#a9bf84}.card.matched:after{content:'✓';position:absolute;right:8px;top:6px;border-radius:50%;background:#5e8057;color:white;width:20px;height:20px;font-size:14px}.card:hover:not(.flipped):not(.matched){translate:0 -3px}.card:disabled{cursor:default;opacity:1}#message{font-size:13px;min-height:32px;margin:20px 0 4px;color:#6a7c60}.footnote{font-size:12px;color:#899078;margin-top:22px}dialog{border:1px solid #e4e2d6;border-radius:28px;padding:32px;text-align:center;color:#354b44;background:#fffdf5;max-width:calc(100% - 30px)}dialog::backdrop{background:#263d3680;backdrop-filter:blur(5px)}.celebration{font-size:64px}h2{font-size:28px}dialog p{line-height:1.6}dialog button{border:0;border-radius:30px;background:#718c65;color:white;padding:15px 24px;font-weight:bold}@media(max-width:600px){header{padding:20px 18px}header a{font-size:12px}header button{font-size:11px;padding:9px}main{padding:18px 12px}h1{letter-spacing:-1px}.spark{display:none}.eyebrow{font-size:8px;letter-spacing:1px}.intro{font-size:14px}.controls{flex-wrap:wrap;justify-content:center;gap:14px}fieldset{width:100%;justify-content:center}fieldset button{padding:10px 12px;flex:1;max-width:130px}.play-area{padding:18px 12px 6px;border-radius:19px}.board{gap:9px}.face{border-radius:12px}.back{border-width:3px}.back span{font-size:32px}.back small{font-size:6px;letter-spacing:1px}.front{border-width:3px}.front small{font-size:9px}.score{font-size:10px}.score strong{font-size:15px}.card.matched:after{right:3px;top:3px;width:16px;height:16px;font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Identidade da capa: jardim, madeira, creme, verde-floresta e laranja. */
:root{font-family:'Arial Rounded MT Bold','Trebuchet MS',sans-serif;background:#fbefcf;color:#24482c}
body{background:#fbefcf url('../09-memoria-desenhos/jardim-capa.png') center top/cover fixed no-repeat}
header{max-width:1120px;padding:20px 28px 0}header a,header button{background:#fff5dc;border:2px solid #ddc79b;border-radius:18px;padding:12px 18px;color:#315b38;box-shadow:0 4px 0 #ba9c65;font-weight:bold;min-height:46px}
main{max-width:1080px;padding:8px 28px 30px;display:grid;grid-template-columns:216px minmax(0,1fr);gap:22px 28px;align-items:start}.heading{grid-column:1/-1}.eyebrow{color:#49633a;letter-spacing:1.5px;margin:6px 0 14px}h1{display:table;margin:0 auto 18px;padding:15px 38px 19px;background:#17472d;color:#fff4d0;border-radius:40% 36% 25% 29%/28% 33% 23% 30%;box-shadow:0 5px 0 #0c3420,0 8px 15px #26422524;text-shadow:0 3px 0 #082d1e;transform:rotate(-2deg);font-size:clamp(32px,4.4vw,50px);letter-spacing:-1.5px;line-height:1.05;position:relative}h1>span:first-child{display:block;color:#ff941c;font-size:.7em;letter-spacing:-.8px;margin-top:4px}h1:before,h1:after{content:'';position:absolute;width:23px;height:35px;background:#92b943;border-radius:100% 0 100% 0;left:-7px;top:18px;transform:rotate(-35deg);box-shadow:inset -5px 0 #749a34}h1:after{left:auto;right:-8px;top:auto;bottom:18px;transform:rotate(35deg)}.intro{color:#45603b;margin:0;font-size:15px}
.controls{display:flex;flex-direction:column;gap:18px;width:100%;margin:0;padding:12px 12px 20px;border:2px solid #e4cda0;border-radius:25px;background:#fff6dfee;box-shadow:0 6px 0 #c4ad7c55}.cover-reference{display:block;width:100%;height:auto;border-radius:15px;border:2px solid #f7e9c9}fieldset{display:grid;gap:11px;width:100%}legend{position:static;width:auto;height:auto;clip-path:none;font-size:13px;font-weight:bold;padding:0 0 12px;color:#3e5735}fieldset button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 12px;border:2px solid #dccb9f;background:#fff9e9;box-shadow:0 3px 0 #c8b488;border-radius:14px;min-height:48px}fieldset button[aria-pressed=true]{background:#f4cf88;border-color:#a97632;box-shadow:0 3px 0 #956629}small{color:#526b40;font-size:11px;margin:0}#restart{width:100%;background:#3d6b40;color:#fff4d0;border:2px solid #284d31;box-shadow:0 4px 0 #24482c;padding:13px;font-weight:bold;border-radius:15px;min-height:46px}.brand-signature{display:block;width:145px;max-width:100%;margin:0 auto}.brand-signature img{display:block;width:100%;max-height:85px;object-fit:contain}
.play-area{width:100%;max-width:none;padding:20px 22px 10px;border:5px solid #f4d9a3;border-radius:28px;background:repeating-linear-gradient(0deg,#ffffff05 0 5px,#8953230b 6px 7px),linear-gradient(100deg,#d5a16b,#edc18a 45%,#d1a06c);box-shadow:0 7px 0 #ae7541,0 15px 22px #5a4a2526}.score{background:#fff3d4;border:1px solid #d9ba80;border-radius:16px;padding:10px 14px;gap:12px;color:#53683e;margin-bottom:20px;flex-wrap:wrap}.score strong{color:#315936}.board{gap:14px;max-width:570px;grid-template-columns:repeat(4,minmax(0,1fr))}.card{aspect-ratio:1.08}.face{border-radius:14px}.back{background:radial-gradient(ellipse at 30% 20%,#72965355,transparent 65%),repeating-linear-gradient(40deg,#ffffff05 0 2px,transparent 2px 6px),#386841;border:4px solid #fff0c9;box-shadow:0 4px 0 #9b713e,0 7px 10px #61482435;outline:1px solid #a38c4f}.back span{width:66%;height:66%;display:grid;place-items:center}.back svg{width:100%;height:100%;filter:drop-shadow(0 2px 0 #173d2640)}.back small{display:none}.front{border:4px solid #fff0c9;box-shadow:0 4px 0 #9b713e,0 7px 10px #61482435}.front svg{height:73%;width:75%}.front small{font-size:11px}.card.matched .front{border-color:#96ba54}.card.matched:after{background:#e78c18;border:2px solid #fff1c8;line-height:16px}#message{background:#fff1d2c9;border-radius:16px;padding:10px 12px;min-height:38px;color:#3f5d34;margin:18px 0 0;line-height:1.4}.footnote{grid-column:1/-1;color:#49613b;margin:0;padding:6px}.celebration{font-size:56px}dialog{background:#fff3d7;border:4px solid #dcc08b;color:#234a30;box-shadow:0 8px 0 #a77c46,0 20px 70px #17351e55}dialog button{background:#477648;min-height:48px}dialog::backdrop{background:#183b2999}button:focus-visible,a:focus-visible{outline:3px solid #a75019;outline-offset:5px}
@media(max-width:760px){body{background-attachment:scroll}header{padding:16px 16px 0}main{grid-template-columns:minmax(0,1fr);padding:12px 16px 24px;gap:18px}.heading,.footnote{grid-column:1}h1{font-size:38px;padding:12px 28px 16px}.eyebrow{font-size:9px;letter-spacing:1px}.intro{font-size:14px}.controls{padding:12px 12px 14px;gap:14px}.cover-reference,.brand-signature{display:none}fieldset{display:flex;gap:8px;justify-content:center}legend{text-align:left;padding-bottom:10px}fieldset button{display:block;flex:1;max-width:none;padding:10px 5px;font-size:13px}fieldset small{display:block;margin-top:4px}#restart{width:auto;padding:10px 22px}.play-area{padding:16px 14px 10px;border-width:4px}.board{gap:11px}.score{font-size:11px;margin-bottom:16px;padding:9px 10px}.score strong{font-size:16px}.back{border-width:3px}.front{border-width:3px}.front small{font-size:9px}.footnote{font-size:11px}}
@media(max-width:380px){main{padding-inline:10px}header{padding-inline:12px}h1{font-size:33px}.play-area{padding-inline:10px}.board{gap:8px}.score{gap:8px;font-size:10px}.score strong{font-size:14px}.front small{font-size:8px}#message{font-size:12px}}