body, html { cursor: default; }
[onclick], .slot {
cursor: url('data:image/svg+xml;utf8,') 12 12, auto;
}
body, html { margin: 0; padding: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background-color: #000; display: flex; justify-content: center; align-items: center; }
#game-container { position: relative; width: 100vw; height: 100vh; height: 100dvh; max-width: calc(100vh * 16 / 9); max-width: calc(100dvh * 16 / 9); max-height: calc(100vw * 9 / 16); aspect-ratio: 16 / 9; overflow: hidden; background-color: #333; flex-shrink: 0; }
.scene { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; }
.bg { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
#lines-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#line-wrapper { transform-box: fill-box; transform-origin: center center; transform: translate(-24.4%, 15.5%) scale(1) rotate(0deg); }
.eye-item, .nose-item, .ear-item { position: absolute; z-index: 3; width: 13.3vw; transform-origin: center center; transform: scale(var(--s, 1)) rotate(var(--r, 0deg)); }
/* ============ 第三关 · 场景 a 素材位置 ============ */
#dog { top: 11.5%; left: 38.5%; --s: 1.25; --r: -4deg; pointer-events: none; }
#baby { top: 62.5%; left: 28.1%; --s: 2.15; --r: 0deg; pointer-events: none; }
#scissors { top: 44.8%; left: 39.6%; --s: 0.3; --r: 54deg; z-index: 8; }
#teddyBear { top: 40%; left: 56.3%; --s: 0.95; --r: 0deg; }
#bear2 { top: 40%; left: 56.3%; --s: 0.95; --r: 0deg; }
#dollDead { top: 55%; left: 58%; --s: 0.45; --r: 0deg; }
#hotdog { top: 46.9%; left: 62.5%; --s: 0.35; --r: 0deg; }
#magicWand { top: 45.8%; left: 81.3%; --s: 0.4; --r: 26deg; }
#paperEar { top: 41.7%; left: 8.3%; --s: 0.3; --r: 0deg; }
#redHotspot {
position: absolute;
left: 44.5%;
top: 46%;
width: 3vw;
height: 3vw;
background: transparent;
border: none;
z-index: 10;
display: none;
}
#dollBody {
position: absolute;
z-index: 3;
width: 13.3vw;
transform-origin: center center;
top: calc(var(--doll-body-y) + 1.5vw);
left: calc(var(--doll-body-x) + 1.5vw);
transform: translate(-50%, -50%) scale(var(--doll-body-s)) rotate(var(--doll-body-r));
}
#dogHotspot {
position: absolute;
left: var(--dog-hs-x);
top: var(--dog-hs-y);
width: var(--dog-hs-w);
height: var(--dog-hs-h);
background: transparent;
border: none;
z-index: 10;
}
#babyHotspot {
position: absolute;
left: var(--baby-hs-x);
top: var(--baby-hs-y);
width: var(--baby-hs-w);
height: var(--baby-hs-h);
background: transparent;
border: none;
z-index: 10;
}
.popup { position: absolute; display: none; z-index: 50; border: 3px solid black; background: white; box-shadow: 6px 6px 0 rgba(0,0,0,0.4); animation: popIn 0.3s ease-out; transform-origin: center center; }
@keyframes popIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.popup-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.popup-close { position: absolute; top: -30px; right: -5px; background: transparent; color: #000; border: none; width: 36px; height: 36px; font-size: 30px; font-weight: bold; z-index: 51; line-height: 1; padding: 0; transition: color 0.2s; cursor: pointer; }
.popup-close:hover { color: #666; }
.popup-item { position: absolute; display: none; z-index: 52; }
.popup-digit { position: absolute; bottom: 6%; right: 6%; font-size: 3.5vw; font-family: "Courier New", monospace; font-weight: bold; color: #fff; background: rgba(0,0,0,0.8); padding: 0.2vw 1vw; border: 2px solid #fff; border-radius: 6px; z-index: 53; line-height: 1.2; }
#inventory-bar { position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%); display: none; gap: 5px; padding: 5px; background: rgba(0,0,0,0.7); border-radius: 8px; border: 1px solid #555; z-index: 100; }
.slot { width: 4.3vw; height: 4.3vw; background: rgba(255,255,255,0.1); border: 2px dashed #888; border-radius: 5px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.slot:hover { background: rgba(255,255,255,0.2); }
.slot img { width: 80%; height: 80%; object-fit: contain; }
.slot img[data-item-id="tear"] { width: 40%; height: 40%; }
.slot img[data-item-id="banana"] { width: 100%; height: 100%; }
#itemDescription { position: absolute; left: 50%; top: 80%; transform: translateX(-50%); color: white; font-size: 14px; font-family: "Microsoft YaHei", sans-serif; background: rgba(0,0,0,0.5); padding: 6px 16px; border-radius: 4px; display: none; z-index: 101; white-space: nowrap; text-align: center; }
#custom-dialog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; z-index: 20000; }
#custom-dialog { background: black; border: 3px solid white; padding: 20px 30px; border-radius: 8px; text-align: center; min-width: 220px; max-width: 80%; box-shadow: 5px 5px 0px rgba(255,255,255,0.3); }
#custom-dialog p { color: white; font-size: 18px; font-family: "Microsoft YaHei", sans-serif; margin: 0 0 20px 0; line-height: 1.5; }
#custom-dialog button { background: black; border: 2px solid white; color: white; padding: 8px 30px; font-size: 16px; font-weight: bold; font-family: "Microsoft YaHei", sans-serif; border-radius: 4px; transition: background 0.1s, color 0.1s; cursor: pointer; }
#custom-dialog button:hover { background: white; color: black; }
:root {
--bgo-x: 6vw;
--bgo-y: 0vw;
--puzzle-board-x: 0px;
--puzzle-board-y: 0px;
--puzzle-pop-size: 28.5vw;
--puzzle-pop-x: 27.5%;
--puzzle-pop-y: 0%;
--easy-btn-scale: 0.8;
--easy-btn-x: -69px;
--easy-btn-y: 3px;
--doll-body-x: 44.5%;
--doll-body-y: 46%;
--doll-body-s: 0.3;
--doll-body-r: 0deg;
--dog-hs-x: 40%;
--dog-hs-y: 15%;
--dog-hs-w: 12vw;
--dog-hs-h: 9.5vw;
--baby-hs-x: 31.5%;
--baby-hs-y: 68%;
--baby-hs-w: 13vw;
--baby-hs-h: 6vw;
}
@keyframes wobbleEye { 0%,100% { transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)) translateY(0); } 50% { transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)) translateY(-5px); } }
@keyframes wobbleEar { 0%,100% { transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)) translateY(0); } 50% { transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)) translateY(6px); } }
@keyframes wobbleNose { 0%,100% { transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)) translateY(0); } 50% { transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)) translateY(-4px); } }
@keyframes wobbleMouth { 0%,100% { transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)) translateY(0); } 50% { transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)) translateY(7px); } }
@keyframes wobbleHand { 0%,100% { transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)) translateY(0); } 50% { transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)) translateY(-6px); } }
.btn { position: absolute; z-index: 3; width: 10.0vw; animation-iteration-count: infinite; animation-timing-function: ease-in-out; transition: filter 0.3s; transform: translate(var(--bgo-x), var(--bgo-y)) scale(var(--s,1)) rotate(var(--r,0deg)); }
.btn:hover { filter: invert(1); }
#eyeBtn { top: 39%; left: 9%; --s: 1.72; --r: 0deg; animation-name: wobbleEye; animation-duration: 2.4s; }
#earBtn { top: 20%; left: 42%; --s: 1.78; --r: 0deg; animation-name: wobbleEar; animation-duration: 2.9s; }
#noseBtn { top: 54%; left: 31%; --s: 1.72; --r: 0deg; animation-name: wobbleNose; animation-duration: 2.1s; }
#mouthBtn { top: 51%; left: 57%; --s: 1.94; --r: 0deg; animation-name: wobbleMouth; animation-duration: 3.2s; }
#handBtn { top: 32%; left: 78%; --s: 1.68; --r: 0deg; animation-name: wobbleHand; animation-duration: 2.6s; }
#eyeO { top: 4%; left: 4%; --s: 0.30; --r: 14deg; z-index: 2; display: none; }
#eyeO.show { display: block; }
#eyeOHotspot { position: absolute; top: 4%; left: 4%; width: 13.3vw; height: 13.3vw; background: transparent; z-index: 100; display: none; }
#eyeOHotspot.show { display: block; }
#train { top: 0%; left: 0%; --s: 2.53; --r: 14deg; transition: transform 2.5s ease-in, opacity 2.5s; }
#train.departed { transform: scale(var(--s,2.53)) rotate(var(--r,14deg)) translate(500%, 500%); opacity: 0; pointer-events: none; }
#soldier1 { top: 41%; left: 0%; --s: 2.40; --r: 10deg; }
#soldier2 { top: 48%; left: 12%; --s: 1.25; --r: 8deg; pointer-events: none; }
#soldier3 { top: 50%; left: 22%; --s: 2.45; --r: 1deg; pointer-events: none; }
#soldierHotspot { position: absolute; top: 48%; left: 12%; width: 8vw; height: 1vw; background: transparent; z-index: 5; }
#stone { top: 73%; left: 0%; --s: 0.21; --r: 116deg; }
#hands { top: 56%; left: 49%; --s: 1.92; --r: 91deg; transition: top 0.8s ease-out; }
#bottleInHand { top: 33%; left: 47%; --s: 0.41; --r: 38deg; z-index: 4; }
#flowerBox { position: absolute; right: 0; top: 0; width: 36.5vw; height: 45vw; overflow: hidden; z-index: 2; }
#flowerBox #flower2 { position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; cursor: pointer; }
#monkey { top: 0%; left: 110%; --s: 1.05; --r: 180deg; transition: left 1.2s ease-out, top 1s ease-in, opacity 1s ease-in; }
#bananaOnScene { top: 50%; left: 82%; --s: 1.00; --r: 0deg; z-index: 5; display: none; }
#paperOnScene { top: 0%; left: 76%; --s: 0.68; --r: 0deg; z-index: 4; display: none; }
.back-arrow { position: absolute; top: 3%; right: 3%; width: 3vw; z-index: 200; }
#leaveOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 150; display: none; }
#leaveOverlay.show { display: block; }
.opening-black { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: black; display: none; justify-content: center; align-items: center; opacity: 0; }
.opening-black img { max-width: 100%; max-height: 100%; object-fit: contain; }
#stoneCloseup { left: 3%; top: 64%; width: 14vw; height: 11.67vw; }
#cyclamen { position: absolute; left: 42%; top: 30%; width: 2.6vw; opacity: 0; transition: opacity 0.8s ease-in; pointer-events: none; display: block; }
#cyclamen.visible { opacity: 1; pointer-events: auto; }
#soldierFace { left: 11%; top: 19%; width: 19vw; height: 19vw; }
#faceEye { position: absolute; left: 18%; top: 38%; width: 30%; transform: scale(0.64) rotate(0deg); transform-origin: center center; z-index: 52; display: block; }
#tear { position: absolute; left: 31%; top: 54%; width: 1vw; z-index: 52; display: none; }
#moon { top: 0%; left: 50%; --s: 0.32; --r: 0deg; }
#tree { top: 20%; left: 74.5%; --s: 2.30; --r: 0deg; }
#stump { top: 86.5%; left: 74.5%; --s: 1.27; --r: -1deg; display: none; }
#haystack { top: 69%; left: 6%; --s: 1.06; --r: 0deg; }
#doorLocked { top: 42.5%; left: 49.5%; --s: 0.50; --r: 0deg; }
#lockImg { top: 44.5%; left: 52%; --s: 0.10; --r: 0deg; }
#birdOnTree { top: 25%; left: 0%; --s: 0.60; --r: 0deg; display: none; }
#noseQ { top: 41.5%; left: 41%; --s: 0.27; --r: -11deg; display: none; }
#noseQ.show { display: block; animation: noseFadeIn 1.5s ease-in forwards; }
@keyframes noseFadeIn { from { opacity: 0; } to { opacity: 1; } }
#arrowRight { top: 50%; left: 87.5%; --s: 0.35; --r: 0deg; }
#bgA2 { position: absolute; display: none; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
#doorHotspot { position: absolute; left: 54%; top: 57.5%; width: 6.5vw; height: 13vw; background: transparent; z-index: 2; display: block; }
#treeCrownHotspot { position: absolute; left: 80%; top: 6%; width: 12vw; height: 12vw; background: transparent; z-index: 6; pointer-events: auto; }
#treeTrunkHotspot { position: absolute; left: 82%; top: 57.5%; width: 1vw; height: 15.5vw; background: transparent; z-index: 6; pointer-events: auto; }
#bgBHotspot { position: absolute; left: 89.5%; top: 22%; width: 10.5vw; height: 13vw; background: transparent; z-index: 6; pointer-events: none; }
body.has-seen-poet #bgBHotspot { pointer-events: auto; }
body.door-opened #bgBHotspot { pointer-events: none; }
#lockPop { position: absolute; display: none; z-index: 55; border: 3px solid black; background: white; box-shadow: 6px 6px 0 rgba(0,0,0,0.4); animation: popIn 0.3s ease-out; transform-origin: center center; left: 48.5%; top: 43.5%; width: 16vw; height: 16vw; }
#lockPop .popup-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#lockDisplay { position: absolute; left: 24.5%; top: 12.5%; display: flex; gap: 8px; z-index: 56; transform: scale(0.61); transform-origin: top left; }
#lockDisplay .lockDigit { width: 4vw; height: 5vw; background: rgba(0,0,0,0.75); border: 2px solid white; border-radius: 4px; color: white; font-size: 2.5vw; font-family: "Courier New", monospace; font-weight: bold; display: flex; align-items: center; justify-content: center; }
#lockKeypad { position: absolute; left: 27.5%; top: 35.5%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; z-index: 56; transform: scale(0.61); transform-origin: top left; }
#lockKeypad .lockKey { width: 3.5vw; height: 3.5vw; background: rgba(0,0,0,0.75); border: 2px solid white; border-radius: 4px; color: white; font-size: 1.5vw; font-family: "Courier New", monospace; font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.1s, color 0.1s; }
#lockKeypad .lockKey:hover { background: white; color: black; }
@keyframes shakeLock { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#lockDisplay.shake { animation: shakeLock 0.4s; }
#birdCloseup { position: absolute; display: none; z-index: 55; border: 3px solid black; background: white; box-shadow: 6px 6px 0 rgba(0,0,0,0.4); animation: popIn 0.3s ease-out; transform-origin: center center; left: 81%; top: 10.5%; width: 11vw; height: 11vw; }
#birdCloseup .popup-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#treeCloseup { position: absolute; display: none; z-index: 55; border: 3px solid black; background: white; box-shadow: 6px 6px 0 rgba(0,0,0,0.4); animation: popIn 0.3s ease-out; transform-origin: center center; left: 80%; top: 68.5%; width: 5vw; height: 5vw; }
#treeCloseup .popup-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#birdFly { position: absolute; display: none; z-index: 60; left: 50%; top: 40%; width: 9vw; height: 9vw; pointer-events: none; }
#birdFly img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scaleX(-1); }
#birdFly.flying { animation: birdFlyLeft 1.5s ease-out forwards; }
@keyframes birdFlyLeft { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(-30vw, -2vw); opacity: 0; } }
#haystackFire { position: absolute; left: 23.5%; top: 44.5%; width: 41vw; height: 22.5vw; pointer-events: none; z-index: 4; overflow: hidden; }
.fire-flame { position: absolute; width: 24%; height: 24%; object-fit: contain; display: none; pointer-events: auto; cursor: pointer; }
.fire-flame.show { display: block; }
#rainLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 300; pointer-events: none; overflow: hidden; display: none; }
.raindrop { position: absolute; top: -40px; width: 2px; height: 25px; background: linear-gradient(to bottom, rgba(200,220,255,0), rgba(200,220,255,0.85)); animation: raindrop-fall linear infinite; }
@keyframes raindrop-fall { 0% { transform: translateY(0); } 100% { transform: translateY(calc(100vh + 80px)); } }
#blackFlash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: 0; pointer-events: none; z-index: 9999; }
#leaveOverlay2a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 150; display: none; }
#leaveOverlay2a.show { display: block; }
#grave { top: 72%; left: 71.5%; --s: 5.00; --r: 0deg; }
#skull { top: 55%; left: 0%; --s: 1.43; --r: 0deg; }
#mrSkeletons { top: 56.5%; left: 34.5%; --s: 2.02; --r: 0deg; display: none; }
#bone { top: 75%; left: 3%; --s: 0.61; --r: 0deg; display: none; }
#arrowLeft { top: 40%; left: 0%; --s: 0.35; --r: 0deg; }
#mrSkullHotspot { position: absolute; left: 40.5%; top: 16%; width: 6.5vw; height: 7.5vw; background: transparent; z-index: 7; display: none; }
#mrSkullHotspot.show { display: block; }
#holePop { position: absolute; display: none; z-index: 55; border: 3px solid black; background: white; box-shadow: 6px 6px 0 rgba(0,0,0,0.4); animation: popIn 0.3s ease-out; transform-origin: center center; left: 67%; top: 31.5%; width: 25vw; height: 25vw; }
#holePop .popup-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#poet { position: absolute; left: 26%; top: 46.5%; width: 1.73vw; display: none; transform: rotate(-50deg); transform-origin: center center; cursor: pointer; z-index: 52; }
#lighter { position: absolute; left: 50.5%; top: 67%; width: 5.72vw; display: none; cursor: pointer; }
#poetPop { position: absolute; display: none; z-index: 55; border: 3px solid black; background: white; box-shadow: 6px 6px 0 rgba(0,0,0,0.4); animation: popIn 0.3s ease-out; transform-origin: center center; left: 30%; top: 20%; width: 22vw; height: 22vw; }
#poetPop .popup-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#graveCloseup { position: absolute; display: none; z-index: 55; border: 3px solid black; background: white; box-shadow: 6px 6px 0 rgba(0,0,0,0.4); animation: popIn 0.3s ease-out; transform-origin: center center; left: 73%; top: 16%; width: 20vw; height: 20vw; }
#graveCloseup .popup-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bonePaperPop { position: absolute; display: none; z-index: 56; border: 3px solid black; background: white; box-shadow: 6px 6px 0 rgba(0,0,0,0.4); animation: popIn 0.3s ease-out; transform-origin: center center; left: 50.5%; top: 15.5%; width: 13vw; height: 13vw; }
#bonePaperPop .popup-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#blade { top: 58.5%; left: 20.5%; --s: 0.23; --r: -89deg; }
#child { top: 52%; left: 78%; --s: 1.34; --r: 0deg; transition: opacity 1.8s ease-out; }
#child.faded-out { opacity: 0; pointer-events: none; }
#firewoodC { top: 61%; left: 41.5%; --s: 0.55; --r: 0deg; display: none; }
#flameC { top: 51.5%; left: 41.5%; --s: 0.59; --r: 0deg; display: none; pointer-events: none; }
#fireplaceHotspot { position: absolute; left: 43.5%; top: 57.5%; width: 9.5vw; height: 10vw; background: transparent; z-index: 8; }
#arrowLeftC { position: absolute; top: 45%; left: 2%; width: 6vw; z-index: 200; }
/* 第三关特写弹窗 */
#bearCloseup { left: 20%; top: 15%; width: 25vw; height: 25vw; }
#paperCloseup { left: 35%; top: 25%; width: 16vw; height: 16vw; }
/* 拼图弹窗 */
#puzzlePop {
position: absolute;
display: none;
z-index: 55;
left: var(--puzzle-pop-x);
top: var(--puzzle-pop-y);
border: 3px solid black;
background: white;
box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
padding: 12px;
animation: popIn 0.3s ease-out;
}
#puzzleBoard {
position: relative;
width: var(--puzzle-pop-size);
height: var(--puzzle-pop-size);
background: #222;
transform: translate(var(--puzzle-board-x, 0px), var(--puzzle-board-y, 0px));
}
#puzzleOverlayImg {
position: absolute;
left: 12px;
top: 12px;
width: var(--puzzle-pop-size);
height: var(--puzzle-pop-size);
object-fit: cover;
display: none;
z-index: 60;
pointer-events: none;
transform: translate(var(--puzzle-board-x, 0px), var(--puzzle-board-y, 0px));
}
.puzzle-tile {
position: absolute;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,0.25);
cursor: pointer;
transition: left 0.12s ease, top 0.12s ease;
background-repeat: no-repeat;
}
.puzzle-tile:hover { outline: 2px solid #FFEB3B; outline-offset: -2px; }
#puzzleBtnRow {
margin-top: 10px;
text-align: center;
min-height: 40px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}
#easyPuzzleBtn, #skipPuzzleBtn {
display: none;
padding: 8px 24px;
background: #000;
color: #fff;
border: 2px solid #fff;
border-radius: 4px;
cursor: pointer;
font-family: "Microsoft YaHei", sans-serif;
font-size: 14px;
transform: translate(var(--easy-btn-x), var(--easy-btn-y)) scale(var(--easy-btn-scale));
transform-origin: center center;
}
#easyPuzzleBtn:hover, #skipPuzzleBtn:hover { background: #333; }
#smokeOverlay {
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
object-fit: cover;
z-index: 90;
pointer-events: none;
display: none;
opacity: 0.75;
}
#smokeOverlay.show { display: block; }
#achievementPopup {
position: absolute;
bottom: 8%;
right: 3%;
background: rgba(0,0,0,0.88);
color: #fff;
padding: 14px 22px;
border: 2px solid #fff;
border-radius: 8px;
font-family: "Microsoft YaHei", sans-serif;
font-size: 16px;
opacity: 0;
pointer-events: none;
transition: opacity 0.9s ease;
z-index: 600;
box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
}
#achievementPopup.show { opacity: 1; }
#tipsBtn {
position: absolute;
bottom: 3%;
right: 3%;
width: 2.5vw;
height: 2.5vw;
background: transparent;
border: none;
padding: 0;
color: #fff;
font-size: 2vw;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 200;
user-select: none;
line-height: 1;
font-family: "Courier New", monospace;
text-shadow: 0 0 8px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,1);
}
#tipsBtn:hover { color: #ddd; }
#tipsOverlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.85);
display: none;
justify-content: center;
align-items: center;
z-index: 30000;
}
#tipsOverlay.show { display: flex; }
#tipsContent {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 16px;
border: 3px solid white;
background: rgba(0,0,0,0.85);
box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
animation: popIn 0.3s ease-out;
max-width: 85vw;
max-height: 92vh;
}
#tipsContent .popup-close { color: #fff; }
#tipsContent .popup-close:hover { color: #aaa; }
#tipsOverlay img {
max-width: 70vw;
max-height: 62vh;
display: block;
}
#resetBtn {
padding: 10px 32px;
background: #000;
color: #fff;
border: 2px solid #fff;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-family: "Microsoft YaHei", sans-serif;
font-size: 16px;
box-shadow: 3px 3px 0 rgba(255,255,255,0.3);
}
#resetBtn:hover { background: #333; }
#resetWarning {
color: #ff3b30;
font-size: 14px;
font-family: "Microsoft YaHei", sans-serif;
letter-spacing: 1px;
text-shadow: 0 0 6px rgba(0,0,0,0.8);
}