:root {
  --cell: min(10.1vw, 51px);
  --board-size: calc(var(--cell) * 9);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: white;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #0caee3; }
body { display: grid; place-items: center; touch-action: none; user-select: none; }
button { font: inherit; }

.game-shell {
  position: relative;
  width: min(100vw, 520px);
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #19bde9 url("assets/forest-bg.png") center / cover no-repeat;
  padding: max(12px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  isolation: isolate;
}

.game-shell::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,129,198,.06), rgba(10,185,229,.05) 54%, rgba(0,108,95,.18));
}

.topbar { width: 100%; max-width: 480px; height: 94px; display: grid; grid-template-columns: 1fr 1.08fr 1fr; align-items: start; gap: 8px; }
.level-card { font-size: 16px; font-weight: 900; text-shadow: 0 2px 0 rgba(0,67,86,.5); padding: 8px 4px; }
.level-card strong { font-size: 31px; color: #fff76a; margin: 0 2px; }
.score-line { font-size: 12px; margin-top: 2px; color: #e7fcff; }
.score-line b { display: block; font-size: 19px; color: white; letter-spacing: .5px; }

.goal-card, .moves-card {
  position: relative;
  margin-top: 2px;
  min-height: 72px;
  border: 4px solid #a7582e;
  border-radius: 17px;
  background: linear-gradient(#fff9cf, #f6c876);
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 rgba(95,73,28,.25);
  color: #744321;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
}
.goal-card::before, .moves-card::before { content:""; position:absolute; top:-18px; left:50%; width:5px; height:16px; background:#744321; border-radius:4px; }
.goal-card small, .moves-card small { display:block; font-size:12px; font-weight:900; }
.goal-card strong, .moves-card strong { display:block; line-height:1; font-size:31px; color:#a94428; text-shadow:0 1px #fff; }
.moves-card { background: linear-gradient(#894523, #51251e); color:#ffd894; }
.moves-card strong { color:#ffec62; }
.ice-icon { width:37px; height:37px; border-radius:8px; background:linear-gradient(145deg,#eafcff 8%,#77dfff 45%,#1896d8); border:3px solid white; box-shadow:inset 5px 5px 6px rgba(255,255,255,.7),0 2px 3px #714a31; transform:rotate(-3deg); }

.progress-wrap { position:relative; width:min(76vw, 370px); height:34px; margin: -8px 0 5px; }
.progress-track { position:absolute; left:0; right:0; top:11px; height:13px; border-radius:9px; background:#198b8c; border:2px solid rgba(255,255,255,.45); box-shadow:inset 0 2px 3px rgba(0,55,66,.3); overflow:hidden; }
.progress-fill { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#6ee52d,#f4f32f,#ffaf22); transition:width .3s ease; }
.star { position:absolute; top:0; font-size:30px; color:#ecf6ff; filter:drop-shadow(0 2px 1px #398091); transition:color .25s,transform .25s; }
.star.lit { color:#fff233; transform:scale(1.15) rotate(-8deg); filter:drop-shadow(0 0 5px #ffb800); }
.s1{left:29%}.s2{left:61%}.s3{right:-4px}

.board-wrap { position:relative; width:var(--board-size); height:var(--board-size); margin:auto 0; filter:drop-shadow(0 8px 8px rgba(0,69,97,.28)); }
.board { width:100%; height:100%; display:grid; grid-template-columns:repeat(9,var(--cell)); grid-template-rows:repeat(9,var(--cell)); border:4px solid #073c66; border-radius:8px; overflow:hidden; background:#082f55; box-shadow:inset 0 0 0 2px rgba(83,191,255,.45), 0 0 0 2px rgba(255,255,255,.25); }
.cell { position:relative; width:var(--cell); height:var(--cell); background:linear-gradient(145deg,#174b74,#062d51); border:1px solid rgba(71,153,211,.26); overflow:hidden; }
.cell.ice::after { content:""; position:absolute; inset:1px; z-index:3; pointer-events:none; border-radius:5px; background:linear-gradient(145deg,rgba(248,255,255,.9),rgba(111,218,255,.37) 48%,rgba(209,248,255,.7)); border:2px solid rgba(233,255,255,.9); box-shadow:inset 5px 5px 8px rgba(255,255,255,.62),inset -3px -3px 6px rgba(38,152,217,.4); }
.tile { position:absolute; inset:2px; z-index:2; border-radius:13%; background-image:url("assets/animal-atlas.png"); background-size:300% 200%; background-repeat:no-repeat; transition:transform .16s cubic-bezier(.2,.8,.2,1),opacity .16s; cursor:pointer; filter:saturate(1.08) contrast(1.04); }
.tile::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.animal-0 {background-position:0 0}.animal-1{background-position:50% 0}.animal-2{background-position:100% 0}.animal-3{background-position:0 100%}.animal-4{background-position:50% 100%}.animal-5{background-position:100% 100%}
.tile.selected { transform:scale(.82); filter:brightness(1.28) drop-shadow(0 0 5px #fff23c); }
.tile.hint { animation:hint .65s ease-in-out 3; }
.tile.reject { animation:reject .25s ease-in-out; }
.tile.clearing { animation:pop .25s ease forwards; }
.tile.special-h::before,.tile.special-v::before { content:""; position:absolute; z-index:4; inset:5%; border-radius:40%; background:repeating-linear-gradient(0deg,transparent 0 31%,rgba(255,255,255,.92) 33% 43%,transparent 45% 60%); filter:drop-shadow(0 0 3px #fff); }
.tile.special-v::before { transform:rotate(90deg); }
.tile.special-rainbow { background-image:conic-gradient(#ff435e,#ffd629,#65e34a,#26cde6,#8c5cff,#ff435e); border-radius:50%; border:4px solid rgba(255,255,255,.9); box-shadow:inset 0 0 0 4px rgba(64,35,104,.4),0 0 8px #fff; }
.tile.special-rainbow::before { content:""; position:absolute; width:38%; height:38%; left:31%; top:31%; background:white; clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%); filter:drop-shadow(0 2px 3px #673681); }

.combo { position:absolute; z-index:8; left:0; right:0; top:42%; text-align:center; font-size:34px; font-weight:1000; color:#fff43c; text-shadow:0 3px 0 #d74d28,0 0 9px white; opacity:0; pointer-events:none; }
.combo.show { animation:combo .72s ease; }
.tip { min-height:26px; margin:8px 0 2px; padding:4px 15px; border-radius:15px; background:rgba(1,104,158,.62); box-shadow:inset 0 1px rgba(255,255,255,.35); font-size:13px; font-weight:800; text-shadow:0 1px #146082; }
.tip.tool-active { background:#ff9a25; color:#5e250f; text-shadow:none; }

.tools { width:100%; max-width:470px; height:84px; display:flex; justify-content:space-around; align-items:flex-end; padding:0 4px; }
.tool { position:relative; width:73px; height:75px; border:0; border-radius:50% 50% 42% 42%; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.75),rgba(211,250,255,.4) 28%,rgba(20,160,211,.65)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),0 3px 0 rgba(4,85,102,.4); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; }
.tool:active { transform:translateY(2px) scale(.96); }
.tool:disabled { filter:grayscale(.75); opacity:.55; }
.tool b { font-size:11px; text-shadow:0 1px 2px #0b5d76; margin-top:2px; }
.tool em { position:absolute; right:-1px; top:-2px; width:22px; height:22px; border-radius:50%; background:#ff9f20; border:2px solid white; font-style:normal; font-size:12px; font-weight:900; display:grid; place-items:center; }
.tool-art { position:relative; display:grid; place-items:center; width:39px; height:39px; color:#fff13b; }
.shuffle-art::before,.restart-art::before { content:""; position:absolute; width:25px; height:25px; border:6px solid #fff13b; border-right-color:transparent; border-radius:50%; filter:drop-shadow(0 2px 0 #d86223); }
.shuffle-art::after,.restart-art::after { content:""; position:absolute; right:0; top:4px; width:0; height:0; border-left:9px solid #fff13b; border-top:6px solid transparent; border-bottom:6px solid transparent; transform:rotate(20deg); filter:drop-shadow(0 2px 0 #d86223); }
.restart-art::before { transform:scaleX(-1); }
.restart-art::after { left:0; right:auto; transform:scaleX(-1) rotate(20deg); }
.hammer-art::before { content:""; width:31px; height:18px; border-radius:8px; background:linear-gradient(#ffcf55,#dc702e); box-shadow:0 3px 0 #8b4825; transform:rotate(-32deg); }
.hammer-art::after { content:""; position:absolute; width:9px; height:30px; border-radius:5px; background:#8d512e; transform:translate(9px,11px) rotate(-32deg); }
.sound-art::before { content:""; position:absolute; left:5px; top:13px; width:10px; height:14px; background:#fff13b; border-radius:3px; box-shadow:0 2px 0 #d86223; }
.sound-art::after { content:""; position:absolute; left:12px; top:7px; width:22px; height:25px; border:5px solid #fff13b; border-top-color:transparent; border-bottom-color:transparent; border-radius:50%; clip-path:inset(0 0 0 45%); filter:drop-shadow(0 2px 0 #d86223); }

.modal { position:fixed; inset:0; z-index:20; background:rgba(0,39,56,.56); display:grid; place-items:center; padding:20px; backdrop-filter:blur(3px); }
.modal[hidden] { display:none; }
.result-card { position:relative; width:min(88vw,390px); padding:34px 26px 27px; border:7px solid #94512b; border-radius:31px; background:linear-gradient(#fff7c1,#ffd26c); color:#703718; text-align:center; box-shadow:inset 0 0 0 3px #fff9dc,0 14px 28px rgba(0,44,54,.35); animation:appear .45s cubic-bezier(.18,.9,.24,1.3); overflow:hidden; }
.result-card>* { position:relative; z-index:2; }
.result-rays { position:absolute; inset:-70%; z-index:1; background:repeating-conic-gradient(rgba(255,255,255,.54) 0 9deg,transparent 9deg 22deg); animation:spin 12s linear infinite; }
.result-stars { font-size:48px; letter-spacing:5px; color:#fff22e; text-shadow:0 4px 0 #e68025; }
.result-card h1 { margin:8px 0 2px; font-size:31px; color:#dd5329; }
.result-card p { margin:0 0 14px; font-weight:800; }
.result-score { padding:9px; border-radius:13px; background:rgba(255,255,255,.55); }
.result-score b { color:#d54a27; font-size:24px; }
.result-card button { margin-top:18px; border:0; border-bottom:5px solid #4d8e19; border-radius:24px; background:linear-gradient(#8be43e,#54b924); color:white; font-size:19px; font-weight:1000; padding:10px 36px; text-shadow:0 2px #3d841b; }

@keyframes hint {50%{transform:scale(.83);filter:brightness(1.3) drop-shadow(0 0 7px #fff83b)}}
@keyframes reject {25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes pop {50%{transform:scale(1.23) rotate(5deg);filter:brightness(1.5)}100%{transform:scale(.2);opacity:0}}
@keyframes combo {0%{opacity:0;transform:scale(.4) rotate(-6deg)}28%{opacity:1;transform:scale(1.14)}75%{opacity:1}100%{opacity:0;transform:translateY(-25px) scale(.9)}}
@keyframes appear {from{opacity:0;transform:scale(.55) translateY(30px)}}
@keyframes spin {to{transform:rotate(360deg)}}

@media (max-height:700px) {
  :root { --cell:min(9.7vw,44px); }
  .topbar{height:82px}.goal-card,.moves-card{min-height:63px}.progress-wrap{margin-top:-10px}.tools{height:72px}.tool{width:63px;height:64px}.tip{margin-top:4px}
}
@media (min-width:521px) { body { background:#093948; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }