@font-face{font-family:Creepster;src:url('assets/Creepster-Regular.ttf') format('truetype');font-display:swap}
:root{--ink:#ffe7c8;--ember:#ffaa43;--deep:#10132e;--gap:min(3.613vh,42px);--card:min(14.665vh,18vw,174px)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%;background:var(--deep);color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{overscroll-behavior:none}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #fff1b2;outline-offset:5px}[hidden]{display:none!important}#game{position:relative;isolation:isolate;min-height:100svh;height:100dvh;width:100%;background:url('assets/fundo-sem-logo.webp') center center/cover no-repeat;overflow:hidden}header{position:relative;padding-top:3.5vh;text-align:center;height:23.8vh;z-index:2;pointer-events:none}h1{font-family:Creepster,fantasy;font-weight:400;font-size:min(11.9vh,9vw,140px);letter-spacing:3.5px;line-height:1.05;margin:0;color:var(--ember);background:linear-gradient(#ffe2a0 12%,#ffaa43 50%,#e96e1e);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 1px #331024) drop-shadow(0 0 9px #e2793340)}header p{font-size:min(2.76vh,2vw,30px);font-weight:600;letter-spacing:4px;margin:1.8vh 0 0;text-shadow:0 2px 4px #090f23}#board{display:grid;grid-template-columns:repeat(4,var(--card));grid-template-rows:repeat(4,var(--card));gap:var(--gap);width:max-content;margin:0 auto;position:relative;z-index:2}.card{padding:0;border:0;border-radius:3px;background:#100a28;position:relative;box-shadow:0 5px 12px #0008;user-select:none;aspect-ratio:1;isolation:isolate}.card img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:3px;backface-visibility:hidden;transition:opacity 160ms ease,transform 160ms ease;pointer-events:none}.card .front{opacity:0;transform:scale(.94)}.card.is-open .front,.card.matched .front{opacity:1;transform:scale(1)}.card.is-open .back,.card.matched .back{opacity:0;transform:scale(.94)}.card.matched{box-shadow:0 0 0 1px #f5b35a90,0 4px 12px #0007}#board.locked .card{cursor:default}.controls{position:absolute;z-index:60;right:max(5vw,calc((100vw - 1500px)/2));top:26vh;display:flex;flex-direction:column;align-items:center;gap:22px}.timer{position:relative;width:clamp(130px,12vw,188px);height:clamp(130px,12vw,188px);display:flex;flex-direction:column;justify-content:center;align-items:center;background:#0a1025dd;border-radius:50%;box-shadow:0 8px 28px #0008;border:1px solid #ffab4330}.timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:2.4}.track{stroke:#b38bab32}#ring{stroke:#ffae51;stroke-linecap:round;stroke-dasharray:276.460;stroke-dashoffset:0;transition:stroke-dashoffset .15s linear}.timer-label{font-size:clamp(8px,.68vw,11px);letter-spacing:1.4px;color:#e4cba9}.timer strong{font-variant-numeric:tabular-nums;font-size:clamp(32px,3.1vw,49px);line-height:1.3;letter-spacing:1px;font-weight:600}.timer.urgent #ring{stroke:#f58361}.timer.urgent strong{color:#ffc09e}#restart{border:1px solid #eeb27180;color:#ffe7c8;background:#0a1025e8;border-radius:28px;padding:12px 23px;box-shadow:0 4px 16px #0005}#restart:hover{background:#30213d}#restart:active{transform:translateY(1px)}.mobile-logo{display:none}.veil{position:absolute;inset:0;z-index:50;display:flex;justify-content:center;align-items:center;background:#050b1c9e;backdrop-filter:blur(4px)}.dialog{width:min(500px,88vw);padding:40px;text-align:center;border:1px solid #bb774760;border-radius:18px;background:#10152ef5;box-shadow:0 24px 80px #0009}.eyebrow{font-size:10px;letter-spacing:2.8px;color:#d8b38d}h2{font:400 clamp(32px,4.5vh,50px)/1.08 Creepster,fantasy;color:#ffb557;letter-spacing:1px;margin:20px 0}.dialog p{font-size:17px;line-height:1.8;color:#eee0d4;margin:20px 0}.dialog button{border:1px solid #ffbf70;color:#21102c;background:#ffad4c;border-radius:30px;font-weight:700;font-size:18px;padding:14px 48px;margin:8px 0 18px}.dialog small{display:block;color:#bdb3c1;font-size:12px;line-height:1.7}.dialog .end-hint{font-size:14px;color:#d9b895}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Animated, transparent stage: no card popups and no strobing. */
#scare{position:absolute;inset:0;z-index:40;overflow:hidden;pointer-events:auto;background:transparent}#scare svg{position:absolute;width:min(75vw,900px);height:min(85vh,850px);left:50%;top:50%;overflow:visible;filter:drop-shadow(0 12px 28px #000b);transform:translate(-50%,-50%)}#scare .actor{transform-box:fill-box;transform-origin:center;animation:float 1.7s ease-in-out infinite alternate}#scare .leg{transform-box:fill-box;transform-origin:0 50%;animation:leg .35s ease-in-out infinite alternate}#scare .leg:nth-child(even){animation-direction:alternate-reverse}.scare-aranha svg{animation:spider-drop 3.2s ease-in-out both}.scare-fantasma svg{animation:ghost-pass 4s ease-in-out both}.scare-morcegos svg{animation:bat-flight 3.5s ease-in-out both}.wing{transform-box:fill-box;transform-origin:center;animation:wing .32s ease-in-out infinite alternate}.scare-bruxa svg{animation:witch-fly 3.4s ease-in-out both}.scare-abobora svg{animation:pumpkin-grow 3s ease-in-out both}.scare-caveira svg{animation:skull-rise 3.8s ease-in-out both}.scare-gato svg{animation:cat-peek 3s ease-in-out both}.scare-olhos svg{animation:eyes-in 3s ease both}.scare-teia svg{animation:web-grow 3s ease-in-out both}.scare-nevoa svg{width:140vw;max-width:none;animation:fog-roll 4s ease-in-out both}.eye-light{fill:#ffd38a;filter:drop-shadow(0 0 10px #f98c25)}
@keyframes stage-in{from{opacity:0}to{opacity:1}}@keyframes float{from{transform:translateY(-10px) rotate(-3deg)}to{transform:translateY(14px) rotate(3deg)}}@keyframes leg{to{transform:rotate(13deg)}}@keyframes wing{to{transform:scaleX(.6) rotate(9deg)}}@keyframes spider-drop{0%{transform:translate(-50%,-50%) scale(.65)}40%{transform:translate(-50%,-54%) scale(.85)}75%{transform:translate(-50%,-45%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(1.1)}}@keyframes ghost-pass{0%{transform:translate(-50%,-50%) scale(.65)}45%{transform:translate(-50%,-55%) scale(1)}70%{transform:translate(-35%,-40%) scale(1.1)}100%{transform:translate(130%,-80%) scale(.7)}}@keyframes bat-flight{0%{transform:translate(-50%,-50%) scale(.6)}45%{transform:translate(-50%,-50%) scale(.95)}80%{transform:translate(-50%,-45%) scale(1.25)}100%{transform:translate(-160%,-100%) scale(.7)}}@keyframes witch-fly{0%{transform:translate(-50%,-50%) rotate(-15deg)}55%{transform:translate(-50%,-50%) rotate(6deg)}100%{transform:translate(150%,-80%) rotate(-15deg)}}@keyframes pumpkin-grow{0%{transform:translate(-50%,-50%) scale(.65)}45%{transform:translate(-50%,-50%) scale(.85)}85%,100%{transform:translate(-50%,-50%) scale(1.2)}}@keyframes skull-rise{0%{transform:translate(-50%,-50%) scale(.65)}60%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-48%) scale(1.1) rotate(5deg)}}@keyframes cat-peek{0%{transform:translate(-50%,-50%) rotate(-8deg)}45%,75%{transform:translate(-50%,-35%) rotate(6deg)}100%{transform:translate(-50%,-55%) rotate(-5deg)}}@keyframes eyes-in{from{opacity:.75;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}@keyframes web-grow{from{transform:translate(-50%,-50%) scale(.45) rotate(-20deg);opacity:.65}to{transform:translate(-50%,-50%) scale(1.6) rotate(8deg);opacity:1}}@keyframes fog-roll{from{transform:translate(-50%,-50%);opacity:.6}to{transform:translate(-35%,-50%);opacity:.85}}
@media(max-aspect-ratio:7/5){:root{--card:min(16.6vw,14vh);--gap:3vw}header{height:23vh;padding-top:3vh}h1{font-size:12vw}header p{font-size:2.8vw;margin-top:1vh;letter-spacing:3px}.controls{position:relative;top:auto;right:auto;flex-direction:row;justify-content:center;gap:28px;margin:3vh auto 0}.timer{width:130px;height:70px;border-radius:40px;flex-direction:row;gap:8px;padding:10px}.timer svg{display:none}.timer-label{display:none}.timer strong{font-size:30px}.mobile-logo{display:block;position:absolute;bottom:2vh;right:4vw;width:130px;height:auto;max-height:50px;object-fit:contain}#game{background-position:center}#restart{padding:12px 20px}.dialog{padding:28px 22px}.dialog p{font-size:15px}}
@media(max-height:550px) and (min-aspect-ratio:7/5){.controls{top:30vh;gap:10px}.timer{width:100px;height:100px}.timer strong{font-size:27px}.timer-label{font-size:6px}#restart{font-size:12px;padding:9px 15px}.dialog{padding:18px}h2{margin:10px 0}.dialog p{font-size:13px;margin:10px 0}.dialog button{padding:10px 30px;margin:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition:none!important}#scare svg{transform:translate(-50%,-50%)!important}}
/* Independent logo, not baked into the cover-scaled background. */
.mobile-logo{display:block;position:absolute;z-index:3;right:max(22px,3vw);bottom:max(16px,2.5vh);width:clamp(130px,20vw,334px);height:auto;max-height:9vh;object-fit:contain}
#fullscreen{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #eeb27180;color:#ffe7c8;background:#0a1025e8;border-radius:28px;padding:11px 20px;box-shadow:0 4px 16px #0005}
#fullscreen svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#fullscreen:hover{background:#30213d}#fullscreen:disabled{cursor:default;opacity:.55}
@media(max-aspect-ratio:7/5){.controls{gap:8px;flex-wrap:wrap;max-width:100%;margin-top:3vh}.timer{width:110px;height:64px}#restart,#fullscreen{width:112px;padding:10px 8px;font-size:14px;min-height:44px}.mobile-logo{width:130px;right:4vw;bottom:2vh;max-height:8vh}}
@media(max-height:600px) and (min-aspect-ratio:7/5){.controls{gap:10px}#fullscreen{padding:9px 15px;font-size:12px}.mobile-logo{max-height:9vh}}
/* Compact icon actions; independent positioning preserves timer, board and logo. */
.quick-actions{position:absolute;z-index:60;top:max(12px,2vh);right:max(16px,2vw);display:flex;gap:4px;align-items:center}
.quick-actions #restart,.quick-actions #fullscreen{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:10px;gap:0;border:0;border-radius:8px;background:transparent;box-shadow:none;color:#ffe7c8}
.quick-actions #restart svg,.quick-actions #fullscreen svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px #000)}
.quick-actions #restart:hover,.quick-actions #fullscreen:hover{background:#0a102580}
/* Each scare has a distinct visible origin and path; the stage stays transparent. */
#scare svg{width:min(64vw,78vh,850px);height:min(64vw,78vh,850px)}
#scare.scare-aranha svg{left:50%;top:16%;animation:origin-spider 3.2s ease-in-out both}
#scare.scare-fantasma svg{left:77%;top:24%;animation:origin-ghost 4s ease-in-out both}
#scare.scare-morcegos svg{left:14%;top:47%;animation:origin-bats 3.5s ease-in-out both}
#scare.scare-bruxa svg{left:85%;top:41%;animation:origin-witch 3.4s ease-in-out both}
#scare.scare-abobora svg{left:20%;top:81%;animation:origin-pumpkin 3s ease-in-out both}
#scare.scare-caveira svg{left:50%;top:50%;animation:origin-skull 3.8s ease-in-out both}
#scare.scare-gato svg{left:83%;top:81%;animation:origin-cat 3s ease-in-out both}
#scare.scare-olhos svg{left:21%;top:23%;animation:origin-eyes 3s ease-in-out both}
#scare.scare-teia svg{left:93%;top:9%;animation:origin-web 3s ease-in-out both}
#scare.scare-nevoa svg{left:50%;top:88%;width:125vw;height:min(95vh,950px);animation:origin-fog 4s ease-in-out both}
@keyframes origin-spider{0%{transform:translate(-50%,-50%) scale(.62) rotate(-6deg)}35%{transform:translate(-50%,-50%) translate(0,26vh) scale(.88) rotate(8deg)}70%{transform:translate(-50%,-50%) translate(-8vw,38vh) scale(1.02) rotate(-7deg)}100%{transform:translate(-50%,-50%) translate(4vw,22vh) scale(.9) rotate(4deg)}}
@keyframes origin-ghost{0%{transform:translate(-50%,-50%) scale(.65) rotate(10deg)}35%{transform:translate(-50%,-50%) translate(-20vw,12vh) scale(.9) rotate(-7deg)}70%{transform:translate(-50%,-50%) translate(-44vw,36vh) scale(1.02) rotate(6deg)}100%{transform:translate(-50%,-50%) translate(-63vw,18vh) scale(.75) rotate(-9deg)}}
@keyframes origin-bats{0%{transform:translate(-50%,-50%) scale(.72) rotate(12deg)}35%{transform:translate(-50%,-50%) translate(23vw,-22vh) scale(.88) rotate(-12deg)}70%{transform:translate(-50%,-50%) translate(48vw,8vh) scale(1.05) rotate(8deg)}100%{transform:translate(-50%,-50%) translate(69vw,-18vh) scale(.72) rotate(-8deg)}}
@keyframes origin-witch{0%{transform:translate(-50%,-50%) scale(.68) rotate(14deg)}40%{transform:translate(-50%,-50%) translate(-24vw,13vh) scale(.9) rotate(-10deg)}75%{transform:translate(-50%,-50%) translate(-49vw,-10vh) scale(1) rotate(6deg)}100%{transform:translate(-50%,-50%) translate(-72vw,8vh) scale(.7) rotate(-12deg)}}
@keyframes origin-pumpkin{0%{transform:translate(-50%,-50%) scale(.64) rotate(-9deg)}36%{transform:translate(-50%,-50%) translate(7vw,-36vh) scale(.95) rotate(10deg)}65%{transform:translate(-50%,-50%) translate(15vw,-12vh) scale(1.06,.9) rotate(-5deg)}82%{transform:translate(-50%,-50%) translate(19vw,-24vh) scale(.98,1.04) rotate(5deg)}100%{transform:translate(-50%,-50%) translate(22vw,-8vh) scale(1) rotate(0)}}
@keyframes origin-skull{0%{transform:translate(-50%,-50%) scale(.58) rotate(-4deg)}55%{transform:translate(-50%,-50%) scale(1.08) rotate(5deg)}80%{transform:translate(-50%,-50%) scale(.98) rotate(-3deg)}100%{transform:translate(-50%,-50%) scale(1.13) rotate(2deg)}}
@keyframes origin-cat{0%{transform:translate(-50%,-50%) scale(.66) rotate(12deg)}35%{transform:translate(-50%,-50%) translate(-5vw,-24vh) scale(.9) rotate(-12deg)}65%{transform:translate(-50%,-50%) translate(-11vw,-18vh) scale(1) rotate(8deg)}100%{transform:translate(-50%,-50%) translate(-4vw,-7vh) scale(.8) rotate(-5deg)}}
@keyframes origin-eyes{0%{transform:translate(-50%,-50%) scale(.68,.54);opacity:.85}35%{transform:translate(-50%,-50%) translate(10vw,4vh) scale(1.05,.92);opacity:1}65%{transform:translate(-50%,-50%) translate(7vw,7vh) scale(.92,.72);opacity:.9}100%{transform:translate(-50%,-50%) translate(13vw,2vh) scale(1.12,1);opacity:1}}
@keyframes origin-web{0%{transform:translate(-50%,-50%) scale(.4) rotate(-18deg);opacity:.85}50%{transform:translate(-50%,-50%) translate(-13vw,18vh) scale(.96) rotate(6deg);opacity:1}100%{transform:translate(-50%,-50%) translate(-24vw,29vh) scale(1.5) rotate(13deg);opacity:1}}
@keyframes origin-fog{0%{transform:translate(-50%,-50%) translate(-10vw,0) scale(.8);opacity:.8}45%{transform:translate(-50%,-50%) translate(7vw,-16vh) scale(1);opacity:.95}75%{transform:translate(-50%,-50%) translate(-2vw,-8vh) scale(1.08);opacity:.85}100%{transform:translate(-50%,-50%) translate(15vw,-12vh) scale(1.1);opacity:.9}}