:root { font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: white; touch-action: manipulation; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #03c7de; }
button { font: inherit; }
#game { position: relative; width: min(100vw, 56.25vh); height: 100dvh; min-height: 620px; margin: auto; overflow: hidden; background: linear-gradient(#079ddd, #06dbe2); isolation: isolate; }
.forest-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
#game::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,177,224,.1), rgba(0,220,226,.08)); pointer-events: none; }
.hud { position: absolute; inset: max(14px, env(safe-area-inset-top)) 14px auto; height: 146px; display: grid; grid-template-columns: 84px 1fr 72px; align-items: start; gap: 8px; text-shadow: 0 2px 3px #00665d; }
.level-panel { display: flex; flex-direction: column; align-items: flex-start; font-weight: 900; }
.level-panel strong { font-size: 27px; line-height: 30px; }
.level-panel span { font-size: 14px; margin-top: 5px; }
.level-panel b { font-size: 19px; }
.round-btn { width: 40px; height: 40px; margin-top: 4px; color: white; border: 4px solid white; border-radius: 50%; background: #32c76c; box-shadow: 0 3px 0 #168d4c; font-size: 21px; line-height: 26px; }
.progress-wrap { display: flex; flex-direction: column; align-items: center; }
.goal-card { min-width: 76px; height: 58px; display: flex; justify-content: center; align-items: flex-end; gap: 2px; padding: 7px 8px; border: 4px solid #9f562b; border-radius: 14px; background: linear-gradient(#fff2aa, #ffc86c); box-shadow: inset 0 0 0 3px #ffe8ae, 0 4px 4px #027f9b80; color: white; text-shadow: 0 2px 1px #a73d17; }
.goal-card b { font-size: 24px; }
.mini-chick { width: 32px; height: 32px; background: url('/assets/animal-tiles.png') center/300% 100% no-repeat; background-position: 50% 50%; border-radius: 7px; }
.branch-track { position: relative; width: 100%; height: 17px; margin-top: 18px; border-radius: 50%; background: #81431d; transform: rotate(-1deg); box-shadow: 0 4px 0 #5d2d15; }
.progress-fill { width: 0%; height: 8px; margin-top: 3px; border-radius: 8px; background: linear-gradient(90deg, #f35316, #ffd92e); box-shadow: 0 0 7px #ffef66; transition: width .35s ease; }
.star { position: absolute; top: -8px; width: 24px; height: 24px; background: #cbd4d2; clip-path: polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 35%); filter: drop-shadow(0 2px 1px #698c8e); transition: background .3s, transform .3s; }
.star.on { background: #ffe451; transform: scale(1.25) rotate(12deg); filter: drop-shadow(0 0 7px #ff9b16); }
.s1 { left: 23%; } .s2 { left: 56%; } .s3 { left: 86%; }
.moves-card { justify-self: end; width: 66px; height: 77px; margin-top: 48px; border: 5px solid #bd6333; border-radius: 17px; background: linear-gradient(#793212, #50200e); box-shadow: inset 0 0 0 3px #8f3c1c, 0 4px 4px #006b8b88; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffd54b; }
.moves-card b { font-size: 34px; line-height: 34px; text-shadow: 0 3px 0 #7d250b; }.moves-card span { font-size: 11px; color: #ffdca1; }
.stage { position: absolute; inset: 20% 0 20%; display: grid; place-items: center; }
.board { --cell: min(12.25vw, 6.9vh); position: relative; width: calc(var(--cell) * 7); height: calc(var(--cell) * 6); filter: drop-shadow(0 7px 5px #00758d80); }
.cell { position: absolute; width: var(--cell); height: var(--cell); transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell))); padding: 2px; border: 0; border-radius: 7px; background: linear-gradient(145deg, #173f5f, #102b48); box-shadow: inset 0 0 0 2px #1b4b69, 0 1px 1px #06223a; transition: transform .2s ease, opacity .18s, filter .16s; }
.piece { width: 100%; height: 100%; display: block; border-radius: 7px; background-image: url('/assets/animal-tiles.png'); background-size: 300% 100%; background-repeat: no-repeat; transform: scale(.96); transition: transform .15s; pointer-events: none; }
.type-0 .piece { background-position: 0 50%; }.type-1 .piece { background-position: 50% 50%; }.type-2 .piece { background-position: 100% 50%; }
.cell.selected { filter: brightness(1.3) drop-shadow(0 0 7px white); z-index: 3; }.cell.selected .piece { transform: scale(1.12); }
.cell.pop { opacity: 0; }.cell.invalid { animation: shake .24s linear; }.cell.hint { animation: hint .7s ease-in-out 2; }
.cell.striped::after { content: ""; position: absolute; inset: 14% 5%; border-radius: 50%; background: repeating-linear-gradient(90deg, transparent 0 10px, #fff8 10px 14px); pointer-events: none; transform: rotate(-25deg); }
.message { position: absolute; z-index: 20; top: 41%; font-weight: 1000; font-size: 44px; color: #fff06b; text-shadow: 0 4px 0 #b56a09, 0 0 8px white; transform: scale(0); opacity: 0; pointer-events: none; }
.message.show { animation: praise .8s ease; }
.tools { position: absolute; left: 3%; right: 3%; bottom: calc(3.2% + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: flex-end; }
.tool { position: relative; width: 18%; aspect-ratio: 1; border: 4px solid #dcffff; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff, #aeeeff 45%, #39cfe4 75%); box-shadow: 0 4px 0 #0793aa, inset 0 0 10px white; color: #713bb9; font-weight: 1000; }
.tool span { display: block; font-size: clamp(20px, 7vw, 35px); line-height: 1; text-shadow: 0 2px white; }.tool small { font-size: 10px; color: #185e88; }
.tool em { position: absolute; right: -3px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: #58d92f; color: white; font-style: normal; border: 2px solid white; box-shadow: 0 2px 0 #1d9a23; }
.tool.used { filter: grayscale(1); opacity: .55; }.tool.active { outline: 4px solid #ffeb55; transform: translateY(-6px); }
dialog { width: min(82%, 340px); border: 5px solid #fff1a4; border-radius: 24px; background: linear-gradient(#68d9ef, #1cafcf); color: white; text-align: center; box-shadow: 0 12px 30px #004b6177; }
dialog::backdrop { background: #00384f88; backdrop-filter: blur(3px); }.result { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: #024d6d99; backdrop-filter: blur(4px); }.hidden { display: none; }
.result-card { width: 82%; padding: 28px 22px; border: 6px solid #fff0a2; border-radius: 28px; text-align: center; background: linear-gradient(#55dced, #079bbb); box-shadow: 0 12px 0 #086c88; }.result-stars { display:flex; justify-content:center; gap:9px; height:54px; }.result-star { width:46px; height:46px; background:#ffe24a; clip-path:polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 35%); filter:drop-shadow(0 4px #d08008); }.result-star.off { background:#99b8b9; }.result h1 { margin: 4px 0; font-size: 35px; }.result button, dialog button { display: block; width: 80%; margin: 12px auto 0; padding: 12px; border: 0; border-radius: 22px; background: linear-gradient(#ffe95d, #ffb723); color: #8c4312; font-weight: 900; box-shadow: 0 4px 0 #dc7d17; }
@keyframes shake { 25% { margin-left: -7px } 75% { margin-left: 7px } } @keyframes hint { 50% { filter: brightness(1.5); transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell))) scale(1.08); } } @keyframes praise { 0% { transform: scale(.2) rotate(-8deg); opacity: 0 } 35% { transform: scale(1.18) rotate(3deg); opacity: 1 } 75% { transform: scale(1); opacity: 1 } 100% { transform: scale(.8); opacity: 0 } }
@media (max-height: 700px) { .hud { transform: scale(.84); transform-origin: top left; width: 118%; }.stage { inset: 19% 0 18%; }.tools { bottom: 1%; transform: scale(.88); transform-origin: bottom center; } }