:root {
  --ink:#26384a;
  --green:#62b93d;
  --green-dark:#368722;
  --dock-h:174px;
}

* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body {
  color:var(--ink);
  background:linear-gradient(180deg,#ecffd8,#d8f8bb);
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  touch-action:none;
  user-select:none;
}
button,a { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
.game-shell { position:relative; width:100%; height:100%; min-height:540px; overflow:hidden; }

.topbar {
  position:absolute; z-index:30; inset:0 0 auto; height:86px;
  display:grid; grid-template-columns:72px 1fr 72px; align-items:center;
  padding:5px 14px;
  background:linear-gradient(180deg,rgba(239,255,218,.99),rgba(239,255,218,.91));
  backdrop-filter:blur(8px);
}
.round-button {
  width:53px; height:53px; display:grid; place-items:center;
  border:3px solid rgba(255,255,255,.94); border-radius:50%;
  color:#49604a; background:rgba(255,255,255,.74);
  box-shadow:0 5px 0 rgba(71,107,55,.2),0 8px 18px rgba(61,99,46,.13);
  font-size:41px; font-weight:900; line-height:1; text-decoration:none; cursor:pointer;
}
.reset-button { justify-self:end; font-size:34px; }
.round-button:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(71,107,55,.2); }
.title-block { text-align:center; min-width:0; }
.title-block h1 { margin:0; font-size:clamp(32px,3.4vw,47px); line-height:1; letter-spacing:2px; color:#26384a; text-shadow:0 3px 0 white; }
.title-block p { margin:4px 0 0; color:#5f765f; font-size:clamp(14px,1.4vw,20px); font-weight:900; white-space:nowrap; }

.habitat-stage {
  position:absolute; inset:84px 18px var(--dock-h); overflow:hidden;
  border:4px solid rgba(255,255,255,.92); border-radius:25px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(222,248,194,.78));
  box-shadow:0 9px 27px rgba(70,111,49,.16),inset 0 0 0 2px rgba(91,143,65,.12);
}
.status-row { position:absolute; z-index:12; top:10px; left:12px; right:12px; display:flex; justify-content:space-between; gap:8px; pointer-events:none; }
.status-pill { padding:7px 13px; border:2px solid white; border-radius:999px; color:#4f6c4f; background:rgba(255,255,255,.9); box-shadow:0 4px 11px rgba(43,79,38,.14); font-size:14px; font-weight:900; }
.collection-pill { color:#775419; background:rgba(255,247,204,.94); }
.habitat-grid { position:absolute; inset:46px 7px 7px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.habitat-card {
  position:relative; min-width:0; overflow:hidden; border:4px solid rgba(255,255,255,.9); border-radius:22px;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  box-shadow:inset 0 0 0 2px rgba(33,73,45,.12),0 6px 14px rgba(47,84,41,.15);
  cursor:pointer; outline:none; transition:transform .18s,filter .18s,border-color .18s;
}
.habitat-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 45%,rgba(20,47,26,.08)); pointer-events:none; }
.habitat-card.drop-ready,.habitat-card.selected-target { transform:scale(.988); border-color:#fff270; filter:brightness(1.08); box-shadow:0 0 0 5px rgba(255,238,88,.55),0 8px 21px rgba(42,76,35,.2); }
.habitat-card.wrong { animation:habitat-shake .38s ease; }
.habitat-card.matched { border-color:#bff58f; }
.habitat-label {
  position:absolute; z-index:7; top:9px; left:9px; display:flex; align-items:center; gap:7px;
  padding:6px 11px 6px 8px; border:2px solid white; border-radius:999px;
  color:#344c39; background:rgba(255,255,255,.88); box-shadow:0 4px 10px rgba(31,65,35,.16); font-size:15px; font-weight:900; pointer-events:none;
}
.habitat-label b { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#eaffd8; font-size:18px; }
.empty-cue { position:absolute; z-index:4; left:50%; bottom:11%; transform:translateX(-50%); padding:6px 13px; border:2px dashed rgba(255,255,255,.95); border-radius:999px; color:white; background:rgba(36,63,43,.45); text-shadow:0 2px 3px rgba(0,0,0,.25); font-size:14px; font-weight:900; white-space:nowrap; pointer-events:none; }
.resident { position:absolute; z-index:6; left:50%; bottom:4%; width:82%; height:78%; transform:translateX(-50%); display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
.resident img { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 9px 5px rgba(31,36,22,.26)); animation:resident-pop .58s cubic-bezier(.16,.9,.22,1.22); }
.resident-name { position:absolute; z-index:8; left:50%; bottom:7px; transform:translateX(-50%); padding:4px 11px; border:2px solid white; border-radius:999px; color:#3c6d3d; background:rgba(239,255,226,.94); font-size:13px; font-weight:900; white-space:nowrap; }

.success-banner {
  position:absolute; z-index:18; top:8px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; padding:8px 18px;
  border:3px solid white; border-radius:999px; color:#86500c;
  background:linear-gradient(180deg,#fff8ae,#ffe466); box-shadow:0 7px 19px rgba(100,63,13,.2);
  font-size:clamp(16px,1.8vw,24px); animation:banner-pop .55s cubic-bezier(.17,.9,.26,1.2); white-space:nowrap;
}
.feedback { position:absolute; z-index:20; top:55px; left:50%; min-width:190px; transform:translate(-50%,-12px) scale(.8); opacity:0; padding:7px 17px; border:3px solid white; border-radius:999px; background:#fff0a6; color:#985018; box-shadow:0 6px 16px rgba(83,52,17,.17); text-align:center; font-size:clamp(16px,1.7vw,23px); font-weight:900; pointer-events:none; }
.feedback.show { animation:feedback-in 1.05s ease both; }
.confetti { position:absolute; z-index:17; inset:0; overflow:hidden; pointer-events:none; }
.confetti-piece { position:absolute; top:-35px; width:var(--w); height:var(--h); border-radius:3px; background:var(--color); animation:confetti-fall var(--duration) cubic-bezier(.2,.65,.4,1) forwards; animation-delay:var(--delay); }

.animal-dock {
  position:absolute; z-index:24; left:18px; right:18px; bottom:9px; height:calc(var(--dock-h) - 13px);
  border:4px solid rgba(255,255,255,.94); border-radius:25px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(238,255,220,.96));
  box-shadow:0 8px 24px rgba(57,98,42,.17);
}
.animal-cards { height:100%; display:flex; align-items:center; justify-content:center; gap:clamp(34px,7vw,110px); padding:8px 18px; }
.animal-card {
  position:relative; width:clamp(142px,18vw,220px); height:130px; padding:3px;
  border:3px solid rgba(255,255,255,.98); border-radius:22px; color:#4e644e;
  background:rgba(255,255,255,.72); box-shadow:0 6px 0 #b9dea2,0 10px 18px rgba(48,85,35,.15);
  cursor:grab; touch-action:none; transition:transform .18s,opacity .2s,filter .2s,border-color .2s; outline:none;
}
.animal-card img { width:104px; height:101px; object-fit:contain; pointer-events:none; filter:drop-shadow(0 5px 5px rgba(48,36,28,.18)); }
.animal-card span { display:block; margin-top:-10px; font-size:15px; font-weight:900; pointer-events:none; }
.animal-card.selected { border-color:#79c84d; transform:translateY(-5px); box-shadow:0 11px 0 #9ecf80,0 15px 23px rgba(48,85,35,.19); }
.animal-card.used { opacity:.18; filter:grayscale(.5); pointer-events:none; transform:scale(.9); box-shadow:0 3px 0 #b9dea2; }
.animal-card.wrong { animation:card-shake .35s ease; }
.animal-card:not(.used):active { cursor:grabbing; transform:translateY(4px) scale(.97); box-shadow:0 2px 0 #b9dea2; }
.next-panel { height:100%; padding:13px 28px; display:flex; align-items:center; justify-content:center; gap:clamp(36px,9vw,130px); }
.next-copy { display:flex; flex-direction:column; color:#5f775d; font-size:15px; font-weight:800; }
.next-copy strong { color:#3f902c; font-size:clamp(22px,2.2vw,31px); }
.next-button { min-width:205px; height:72px; padding:0 27px; border:4px solid white; border-radius:24px; color:white; background:linear-gradient(180deg,#77ce4e,#4cac31); box-shadow:0 7px 0 #2f7f20,0 11px 21px rgba(47,117,32,.25); font-size:24px; font-weight:900; cursor:pointer; animation:button-breathe 1.7s ease-in-out infinite; }
.next-button span { margin-left:8px; font-size:28px; }
.next-button:active { transform:translateY(5px); box-shadow:0 2px 0 #2f7f20; }
.drag-ghost { position:fixed; z-index:999; width:120px; height:120px; display:none; place-items:center; transform:translate(-50%,-50%); border:4px solid white; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 10px 28px rgba(47,77,38,.25); pointer-events:none; }
.drag-ghost.visible { display:grid; }
.drag-ghost img { width:103px; height:103px; object-fit:contain; }

@keyframes habitat-shake { 25% { transform:translateX(-10px) rotate(-1deg); } 55% { transform:translateX(10px) rotate(1deg); } 80% { transform:translateX(-4px); } }
@keyframes card-shake { 25% { transform:translateX(-9px); } 55% { transform:translateX(9px); } 80% { transform:translateX(-4px); } }
@keyframes resident-pop { 0% { transform:scale(.6) translateY(25px); opacity:0; } 68% { transform:scale(1.09) translateY(-4px); opacity:1; } 100% { transform:scale(1); } }
@keyframes feedback-in { 0% { opacity:0; transform:translate(-50%,-12px) scale(.78); } 22%,72% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-10px) scale(.93); } }
@keyframes banner-pop { from { opacity:0; transform:translateX(-50%) scale(.65) translateY(-15px); } to { opacity:1; transform:translateX(-50%) scale(1); } }
@keyframes confetti-fall { 0% { transform:translateY(0) rotate(0); opacity:0; } 10% { opacity:1; } 100% { transform:translate(var(--drift),560px) rotate(var(--spin)); opacity:.9; } }
@keyframes button-breathe { 50% { transform:translateY(-3px) scale(1.025); } }

@media (max-width:700px),(max-height:620px) {
  :root { --dock-h:148px; }
  .topbar { height:74px; padding:4px 8px; grid-template-columns:55px 1fr 55px; }
  .round-button { width:46px; height:46px; font-size:35px; }
  .reset-button { font-size:29px; }
  .title-block h1 { font-size:30px; }
  .title-block p { margin-top:2px; font-size:13px; }
  .habitat-stage { inset:72px 7px var(--dock-h); border-width:3px; border-radius:18px; }
  .status-row { top:5px; left:6px; right:6px; }
  .status-pill { padding:5px 8px; font-size:11px; }
  .habitat-grid { inset:35px 4px 4px; gap:5px; }
  .habitat-card { border-width:3px; border-radius:16px; }
  .habitat-label { top:5px; left:5px; padding:3px 7px 3px 4px; gap:4px; font-size:11px; }
  .habitat-label b { width:22px; height:22px; font-size:15px; }
  .empty-cue { bottom:7%; padding:3px 7px; font-size:10px; }
  .resident-name { bottom:3px; padding:2px 7px; font-size:10px; }
  .success-banner { top:4px; padding:5px 9px; font-size:13px; }
  .feedback { top:40px; min-width:160px; font-size:14px; }
  .animal-dock { left:7px; right:7px; bottom:5px; height:calc(var(--dock-h) - 8px); border-width:3px; border-radius:18px; }
  .animal-cards { gap:8px; padding:5px; }
  .animal-card { width:31%; min-width:0; height:112px; border-radius:16px; }
  .animal-card img { width:84px; height:85px; }
  .animal-card span { font-size:12px; }
  .next-panel { padding:9px 12px; gap:16px; }
  .next-copy { max-width:52%; font-size:11px; }
  .next-copy strong { font-size:18px; }
  .next-button { min-width:150px; height:60px; padding:0 14px; font-size:19px; }
}

@media (max-width:600px) and (orientation:portrait) {
  :root { --dock-h:140px; }
  .game-shell { min-height:600px; }
  .topbar { height:62px; grid-template-columns:48px 1fr 48px; }
  .round-button { width:42px; height:42px; font-size:31px; border-width:2px; }
  .reset-button { font-size:26px; }
  .title-block h1 { font-size:27px; }
  .title-block p { font-size:11px; }
  .habitat-stage { inset:61px 5px var(--dock-h); border-radius:15px; }
  .habitat-grid { grid-template-columns:1fr; grid-template-rows:repeat(3,minmax(0,1fr)); }
  .habitat-card { background-position:center 55%; }
  .resident { left:59%; bottom:1%; width:49%; height:92%; }
  .empty-cue { left:62%; bottom:8%; }
  .habitat-label { top:50%; transform:translateY(-50%); left:7px; font-size:12px; padding:4px 8px 4px 4px; }
  .habitat-label b { width:24px; height:24px; }
  .resident-name { left:78%; bottom:4px; }
  .animal-card { height:105px; padding:1px; }
  .animal-card img { width:78px; height:80px; }
  .next-panel { flex-direction:column; gap:5px; padding:5px; text-align:center; }
  .next-copy { max-width:none; }
  .next-copy span { display:none; }
  .next-button { height:55px; min-width:190px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}