:root {
  --ink: #302b22;
  --cream: #fff9dc;
  --paper: #f4e7b8;
  --yellow: #ffc43b;
  --yellow-dark: #d9891d;
  --green: #72c95c;
  --brown: #784a28;
  --shadow: 0 4px 0 rgba(55, 43, 28, .28);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 20%, #79866a, #3f493d 70%);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.game-shell {
  position: relative;
  width: min(100vw, calc(100dvh * .48));
  height: min(100dvh, calc(100vw / .48));
  max-width: 520px;
  overflow: hidden;
  background: #b5c77f;
  box-shadow: 0 0 40px rgba(0,0,0,.45);
  touch-action: none;
}
.world { position: absolute; inset: 0; overflow: hidden; }
.parallax-layer {
  position: absolute;
  inset: -1.5% -8%;
  background: url("assets/forest-sanctuary.png") center top / 100% 100% no-repeat;
  transform: translate3d(0,0,0) scale(1.02);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.petals { position: absolute; inset: 0; pointer-events: none; }
.petal {
  position: absolute; top: -4%; width: 8px; height: 5px;
  border-radius: 90% 10% 90% 20%; background: rgba(255,241,235,.85);
  animation: petal-fall linear infinite;
}
@keyframes petal-fall { to { transform: translate(42px, 108vh) rotate(520deg); } }

.hud { position: absolute; z-index: 12; top: max(3.2%, env(safe-area-inset-top)); left: 3%; right: 3%; display: flex; gap: 3%; align-items: center; }
.resource {
  position: relative;
  height: clamp(31px, 4.3vh, 42px); flex: 0 0 34%;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 11px 0 42px; border: 3px solid var(--ink); border-radius: 15px;
  background: linear-gradient(#f9f9e9,#eaf0df); box-shadow: 0 2px 0 #7b745c;
  font-size: clamp(16px, 2.5vh, 27px); line-height: 1;
}
.resource span { position: absolute; left: -4px; margin-left: 0; }
.coin-icon {
  width: 37px; height: 37px; display: grid; place-items: center;
  color: #f7c82d; border: 3px solid #3d3420; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff08b,#ffc526 58%,#d68718 60%);
  text-shadow: 0 1px #8c611e;
}
.coin-resource { flex-basis: 37%; }
.wechat-pill { margin-left: auto; width: 25%; height: clamp(34px, 4.7vh, 46px); display:flex; align-items:center; justify-content:center; gap:6px; border-radius:24px; background:rgba(45,42,42,.47); }
.wechat-pill i { width:5px; height:5px; border-radius:50%; background:#fff; }
.wechat-pill span { width:26px; height:26px; margin-left:8px; border:3px solid #fff; border-radius:50%; box-shadow: inset 0 0 0 4px transparent; }

.quest-card {
  position: absolute; z-index: 8; top: 10.5%; left: 31%; width: 40%; min-height: 62px;
  display: flex; gap: 8px; align-items: center; padding: 8px 12px;
  border: 3px solid var(--ink); border-radius: 11px; background: rgba(250,250,230,.78); box-shadow: var(--shadow);
}
.quest-card span:last-child { display:grid; flex:1; font-size:clamp(13px,1.8vh,19px); text-shadow:1px 1px #fff; }
.quest-card em { font-style:normal; font-weight:900; font-size:1.25em; text-align:right; }
.quest-icon { position:relative; flex:0 0 31px; width:31px; height:38px; border:3px solid #594026; border-radius:5px; background:#dda260; transform:rotate(-7deg); }
.quest-icon::before { content:""; position:absolute; left:5px; right:5px; top:5px; bottom:5px; border-radius:2px; background:#fff3bf; }
.quest-icon::after { content:""; position:absolute; width:8px; height:26px; right:-3px; top:-7px; border:2px solid #594026; border-radius:5px 5px 2px 2px; background:linear-gradient(#ef8fb2 0 25%,#f9d46b 26%); transform:rotate(34deg); }
.quest-card.ready { animation: ready-pulse .9s infinite alternate; }
@keyframes ready-pulse { to { transform:scale(1.05); filter:brightness(1.1); } }

.camera-button { position:absolute; z-index:8; top:13%; right:3%; width:19%; display:grid; justify-items:center; background:none; font-size:clamp(14px,2vh,20px); font-weight:900; color:#fff; text-shadow:-2px 0 var(--ink),0 2px var(--ink),2px 0 var(--ink),0 -2px var(--ink); }
.camera-shape { position:relative; width:50px; height:36px; border:4px solid var(--ink); border-radius:8px; background:#f8f5da; box-shadow:2px 3px 0 rgba(0,0,0,.22); }
.camera-shape::before { content:""; position:absolute; left:8px; top:-12px; width:24px; height:12px; border:4px solid var(--ink); border-bottom:0; background:#f8f5da; border-radius:5px 5px 0 0; }
.camera-shape i { position:absolute; width:20px; height:20px; left:12px; top:5px; border:4px solid var(--ink); border-radius:50%; background:#5c6f71; }

.side-nav { position:absolute; z-index:10; top:19%; left:2%; display:grid; gap:7px; width:14%; }
.side-nav button { position:relative; min-height:59px; padding:4px 2px; display:grid; place-items:end center; border:3px solid var(--ink); border-radius:10px; background:#eff2d5; box-shadow:var(--shadow); overflow:hidden; }
.side-nav b { z-index:2; font-size:clamp(12px,1.7vh,18px); color:#fff; text-shadow:-2px 0 var(--ink),0 2px var(--ink),2px 0 var(--ink),0 -2px var(--ink); }
.side-art { position:absolute; inset:4px 9px 17px; border-radius:50% 55% 45% 50%; background:#a8cf74; }
.flower-art::before { content:""; position:absolute; width:19px; height:19px; border-radius:50%; background:#ff6b80; top:2px; left:2px; box-shadow:14px 3px #ffd35f,8px 15px #ff6b80; }
.shovel-art { background:linear-gradient(135deg,transparent 38%,#5c6d78 40% 56%,transparent 58%),#8ed295; }
.event-art { background:radial-gradient(circle at 50% 65%,#f4eee2 0 38%,transparent 40%),#8fcf78; }

.tree-actions { position:absolute; z-index:9; top:25%; right:27%; width:31%; display:grid; gap:14px; justify-items:center; }
.primary-game-button {
  min-width:106px; padding:10px 20px; border:4px solid #fff7d1; outline:3px solid #4c3a2e;
  border-radius:17px; background:linear-gradient(#ffd55b,#ffb82e); color:#fff; font-weight:900; font-size:clamp(18px,2.4vh,26px);
  text-shadow:0 2px #a85c19; box-shadow:0 5px 0 #9a5d23,0 8px 12px rgba(0,0,0,.2);
}
.primary-game-button:active { transform:translateY(3px); box-shadow:0 2px 0 #9a5d23; }
.fruit-tree-system { position:absolute; z-index:8; top:18%; right:1%; width:25%; height:20%; padding:0; overflow:visible; background:none; }
.fruit-vine { position:absolute; right:27%; top:0; width:44%; height:91%; border-right:8px solid #638245; border-radius:0 60% 70% 0; transform:rotate(10deg); filter:drop-shadow(2px 2px 0 #34432e); }
.fruit-vine::before,.fruit-vine::after { content:""; position:absolute; width:27px; height:13px; border:3px solid #34432e; border-radius:100% 0 100% 0; background:#83a75d; }
.fruit-vine::before { right:-21px; top:26%; transform:rotate(25deg); }.fruit-vine::after { right:1px; top:58%; transform:rotate(205deg); }
.tree-fruit { --fruit:#82bb55; position:absolute; width:14px; height:14px; border:2px solid #4e512a; border-radius:50%; background:radial-gradient(circle at 35% 30%,#e8f497 0 20%,var(--fruit) 24% 100%); box-shadow:12px 3px 0 -2px var(--fruit),5px 12px 0 -1px var(--fruit); transition:transform .35s,filter .35s,background .35s; }
.cluster-a { right:14%; top:22%; }.cluster-b { right:31%; top:49%; }.cluster-c { right:8%; top:70%; }
.fruit-tree-system.ripe .tree-fruit { --fruit:#ef7d33; filter:drop-shadow(0 0 6px #ffe27b); transform:scale(1.12); animation:fruit-ready .7s infinite alternate; }
.fruit-tree-system.harvesting .tree-fruit { animation:fruit-harvest .55s ease-in forwards; }
.fruit-tree-system b { position:absolute; left:-75%; right:0; top:-9px; padding:4px 5px; border:2px solid var(--ink); border-radius:9px; background:rgba(255,250,221,.92); font-size:12px; box-shadow:var(--shadow); }
.fruit-tree-system.ripe b { color:#c75827; background:#fff2b4; }
@keyframes fruit-ready { to { transform:scale(1.23) rotate(4deg); } }
@keyframes fruit-harvest { to { opacity:0; transform:translate(-55px,105px) scale(.2); } }
.basket-stock { position:absolute; z-index:9; top:34.5%; right:3%; width:94px; height:92px; display:grid; justify-items:center; align-content:end; pointer-events:none; }
.basket-stock b,.basket-stock em { position:relative; z-index:2; border:2px solid var(--ink); background:#fff8df; padding:1px 8px; border-radius:10px; font-weight:900; }
.basket-stock b { min-width:45px; font-size:18px; }
.basket-stock em { margin-top:-2px; color:#a35128; font-style:normal; font-size:12px; }
.basket-art { position:absolute; top:2px; width:72px; height:51px; border:4px solid var(--ink); border-radius:12px 12px 30px 30px; background:repeating-linear-gradient(90deg,#dd9a42 0 8px,#f0bd67 9px 16px); }
.basket-art::before { content:""; position:absolute; left:10px; top:-18px; width:44px; height:33px; border:5px solid #694329; border-bottom:0; border-radius:50% 50% 0 0; }
.basket-art i { position:absolute; width:20px; height:20px; border-radius:50%; background:#f05d36; border:3px solid #4c3423; top:-7px; }
.basket-art i:nth-child(1){left:7px}.basket-art i:nth-child(2){left:27px;background:#ffb936}.basket-art i:nth-child(3){left:45px}

.yard { position:absolute; z-index:5; left:0; right:0; top:48%; bottom:9%; overflow:hidden; }
.yard.has-stock { cursor:crosshair; }
.yard-instruction { position:absolute; z-index:4; top:3%; left:50%; transform:translate(-50%,-8px); padding:6px 12px; border:2px solid var(--ink); border-radius:12px; background:rgba(54,51,41,.88); color:#fff; font-size:13px; font-weight:900; opacity:0; transition:.25s; pointer-events:none; white-space:nowrap; }
.yard.has-stock .yard-instruction { opacity:1; transform:translate(-50%,0); }
.food-layer,.bird-layer,.float-layer { position:absolute; inset:0; pointer-events:none; }
.bird { position:absolute; width:74px; height:69px; pointer-events:auto; background:none; padding:0; transition:left 2.3s ease-in-out,top 2.3s ease-in-out,transform .25s; filter:drop-shadow(0 3px 1px rgba(58,58,38,.25)); }
.bird svg { width:100%; height:100%; overflow:visible; }
.bird.idle svg { animation:bird-idle 1.8s ease-in-out infinite alternate; transform-origin:50% 90%; }
.bird.hunting { z-index:3; }
.bird.peck { transform:rotate(8deg) translateY(4px) scaleY(.93); }
.bird.newcomer { animation:newcomer 1.4s ease-out; }
@keyframes newcomer { 0%{filter:drop-shadow(0 0 18px #fff) brightness(2);transform:scale(.2) translateY(-80px)} 65%{filter:drop-shadow(0 0 22px #fff);transform:scale(1.22)} 100%{transform:scale(1)} }
@keyframes bird-idle { to { transform:translateY(-3px) rotate(-1deg); } }
.food { position:absolute; width:16px; height:13px; border:2px solid #57361f; border-radius:48% 52% 55% 45%; background:radial-gradient(circle at 35% 25%,#ffd058 0 24%,#f28b24 28% 62%,#c9532c 64%); transform:rotate(var(--r)); filter:drop-shadow(0 2px rgba(72,52,27,.2)); }
.food::after { content:""; position:absolute; width:5px; height:4px; left:9px; top:-4px; border-radius:100% 0; background:#6c923f; }
.float-text { position:absolute; color:#fff; font-weight:900; font-size:20px; text-shadow:-2px 0 #6b4d1c,0 2px #6b4d1c,2px 0 #6b4d1c,0 -2px #6b4d1c; animation:float-up .85s ease-out forwards; }
@keyframes float-up { to { opacity:0; transform:translateY(-38px) scale(1.15); } }

.bottom-nav { position:absolute; z-index:14; left:2%; right:2%; bottom:max(1.1%, env(safe-area-inset-bottom)); display:flex; align-items:flex-end; justify-content:space-between; pointer-events:none; }
.bottom-nav button { position:relative; pointer-events:auto; width:19%; min-height:68px; display:grid; justify-items:center; align-content:end; padding:3px; border:3px solid var(--ink); border-radius:10px; background:rgba(248,249,224,.88); box-shadow:var(--shadow); }
.bottom-nav b { font-size:clamp(14px,2vh,21px); color:#fff; text-shadow:-2px 0 var(--ink),0 2px var(--ink),2px 0 var(--ink),0 -2px var(--ink); }
.nav-spacer { width:17%; }
.nav-icon { position:absolute; top:5px; width:39px; height:31px; }
.market-icon { border:4px solid var(--ink); border-top:0; background:#d9edf0; }
.market-icon::before { content:""; position:absolute; left:-6px; top:-8px; width:45px; height:14px; border:4px solid var(--ink); border-radius:4px; background:repeating-linear-gradient(90deg,#e56144 0 10px,#fff4dc 10px 20px); }
.manage-icon::before,.manage-icon::after { content:""; position:absolute; width:28px; height:24px; border-radius:55% 55% 45% 45%; border:3px solid var(--ink); background:#e5b94d; top:4px; }
.manage-icon::before { left:-4px; }.manage-icon::after { right:-4px;background:#75684f; }
.explore-icon { background:#7fb667; clip-path:polygon(50% 0,65% 23%,80% 23%,70% 42%,94% 73%,65% 70%,65% 100%,36% 100%,36% 70%,7% 73%,31% 42%,21% 23%,36% 23%); filter:drop-shadow(0 0 2px var(--ink)); }
.more-icon { border:4px solid var(--ink); background:#e9f0dc; border-radius:4px; }
.more-icon::before { content:""; position:absolute; left:7px; top:7px; width:20px; height:3px; background:var(--ink); box-shadow:0 7px var(--ink),0 14px var(--ink); }
.notice-dot { position:absolute; top:-9px; right:-7px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#df3d45; border:3px solid var(--ink); }
.notice-dot::after { content:"!"; color:#fff; font-weight:900; }

.screen-overlay { position:absolute; z-index:30; inset:0; display:none; background:rgba(38,43,39,.93); overflow:hidden; }
.screen-overlay.open { display:block; animation:fade-in .2s ease-out; }
.panel-screen { position:absolute; inset:6% 3% 2%; display:flex; flex-direction:column; border:5px solid #70451f; border-radius:16px 16px 8px 8px; background:#f7edc5; box-shadow:inset 0 0 0 3px #c88d45; overflow:hidden; }
.panel-header { position:relative; flex:0 0 auto; padding:14px 56px 12px; text-align:center; background:linear-gradient(#f7fbeb,#dfe9d6); border-bottom:4px solid #7a4c28; }
.panel-header h2 { margin:0; font-size:clamp(25px,3.2vh,34px); color:#fff; text-shadow:-2px 0 var(--ink),0 3px var(--ink),2px 0 var(--ink),0 -2px var(--ink); }
.panel-header p { margin:5px 0 0; font-weight:800; color:#57654b; }
.back-button { position:absolute; z-index:2; left:12px; top:12px; width:42px; height:42px; border-radius:11px; background:#8a552b; border:3px solid var(--ink); color:#fff; font-size:28px; font-weight:900; box-shadow:var(--shadow); }
.panel-body { flex:1; overflow:auto; padding:10px; scrollbar-width:none; }
.panel-body::-webkit-scrollbar { display:none; }

.summon-screen { background:rgba(49,53,50,.95); }
.summon-stage { position:absolute; inset:8% 2% 2%; display:grid; grid-template-rows:auto 1fr auto; justify-items:center; color:#fff; }
.summon-top { width:100%; display:flex; gap:10px; padding:0 7%; }
.summon-top .resource { position:relative; flex:0 0 50%; color:var(--ink); }
.hatchery { width:96%; align-self:center; min-height:57%; display:grid; place-items:center; position:relative; padding-top:12%; }
.hatch-tree { position:absolute; width:84%; height:70%; top:4%; border-radius:48% 48% 38% 40%; background:linear-gradient(#d95b2f 0 25%,#b5532e 26% 34%,transparent 35%),linear-gradient(82deg,transparent 0 23%,#83512c 24% 72%,transparent 73%); filter:drop-shadow(0 5px 0 #352a1f); }
.hatch-tree::after { content:""; position:absolute; left:35%; top:38%; width:34%; height:30%; border:4px solid #33291f; border-radius:44% 44% 10% 10%; background:#a96b35; }
.capacity { position:absolute; top:43%; left:50%; z-index:5; transform:translateX(-50%); display:flex; align-items:center; gap:7px; min-width:205px; padding:5px 7px 5px 12px; border-radius:10px; background:rgba(50,47,39,.82); font-weight:900; white-space:nowrap; }
.capacity-expand { padding:6px 9px; border:2px solid #56391f; border-radius:8px; background:linear-gradient(#8bdf6b,#50b84b); color:#fff; font-size:13px; line-height:1.08; font-weight:900; text-shadow:0 1px #477534; box-shadow:0 2px 0 #3c792f; }
.capacity-expand small { font-size:10px; }
.capacity-expand:disabled { background:#918d7d; border-color:#5f5a4f; box-shadow:none; color:#e8e4d9; text-shadow:none; cursor:not-allowed; }
.egg-row { z-index:3; align-self:end; margin-bottom:14%; display:flex; align-items:end; gap:22px; }
.egg { width:66px; height:87px; border:4px solid #382e25; border-radius:50% 50% 46% 46%; background:repeating-linear-gradient(0deg,#f7f3d9 0 19px,#98d9d7 20px 30px); filter:drop-shadow(0 4px rgba(0,0,0,.25)); }
.egg.small { transform:scale(.74); opacity:.9; background:repeating-linear-gradient(0deg,#f4f0d9 0 23px,#8ed49e 24px 32px); }
.egg.locked { filter:grayscale(1) brightness(.6); position:relative; }
.egg.locked::before { content:""; position:absolute; left:17px; top:22px; width:24px; height:24px; border:5px solid #f2eee0; border-bottom:0; border-radius:15px 15px 0 0; }
.egg.locked::after { content:""; position:absolute; left:13px; top:40px; width:36px; height:28px; border:3px solid #302b22; border-radius:6px; background:#f2eee0; }
.summon-cost { position:absolute; z-index:4; bottom:6%; left:50%; transform:translateX(-50%); min-width:142px; padding:10px; border:4px solid #7b4b20; border-radius:15px; background:linear-gradient(#ffd45c,#ffb527); color:#fff; font-size:25px; font-weight:900; text-shadow:0 2px #995c1f; box-shadow:var(--shadow); }
.summon-cost:disabled { filter:grayscale(.8); cursor:not-allowed; }
.summon-footer { width:100%; display:flex; justify-content:space-between; padding:0 7% 2%; }
.square-action { width:55px; min-height:55px; border:3px solid var(--ink); border-radius:12px; background:#ffcd63; font-weight:900; box-shadow:var(--shadow); }

.explore-summary { padding:10px 16px; background:linear-gradient(#cde8e4,#edf4d7); border:3px solid #355a48; border-radius:12px; margin-bottom:9px; }
.progress-track { height:14px; border:3px solid #35433f; border-radius:9px; background:#233d61; overflow:hidden; }
.progress-track i { display:block; height:100%; width:0; background:#73cf5f; transition:width .3s; }
.bird-list { display:grid; gap:8px; }
.bird-row { min-height:78px; display:grid; grid-template-columns:68px 1fr 110px; gap:8px; align-items:center; padding:7px; border:2px solid #b9995e; border-radius:10px; background:rgba(255,250,224,.84); }
.bird-portrait { width:61px; height:61px; padding:2px; border:3px solid #2f4134; border-radius:14px; background:#a5d8ae; }
.bird-portrait svg { width:100%; height:100%; }
.bird-row h3,.bird-row p { margin:0; }
.bird-row h3 { font-size:17px; }.bird-row p { font-size:12px; color:#75684f; margin-top:4px; }
.row-action { padding:10px 5px; border:3px solid #8e5a21; border-radius:12px; background:linear-gradient(#ffd35b,#ffb328); color:#fff; font-weight:900; text-shadow:0 2px #92571d; box-shadow:0 3px 0 #9b662b; }
.row-action.claim { background:linear-gradient(#81df62,#4fbd49); }
.row-action:disabled { background:#a7a28e; border-color:#6d675c; box-shadow:none; }

.modal-layer { position:absolute; z-index:50; inset:0; display:none; place-items:center; background:rgba(25,28,24,.66); padding:7%; }
.modal-layer.open { display:grid; animation:fade-in .18s ease-out; }
@keyframes fade-in { from{opacity:0} }
.modal-card { width:100%; max-height:84%; overflow:auto; padding:18px; border:4px solid var(--ink); border-radius:18px; background:linear-gradient(#fffbe5,#f1deb0); box-shadow:0 8px 0 rgba(48,37,24,.45); text-align:center; }
.modal-card h2 { margin:0 0 8px; font-size:28px; }
.modal-card p { margin:7px 0; }
.modal-actions { display:flex; gap:10px; justify-content:center; margin-top:15px; }
.modal-actions button,.sheet-button { padding:10px 17px; border:3px solid var(--ink); border-radius:11px; background:#72cd58; color:#fff; font-weight:900; box-shadow:var(--shadow); text-shadow:0 2px #4c873e; }
.modal-actions .danger { background:#d95c4b; text-shadow:0 2px #89382f; }
.new-banner { margin:-18px -18px 10px; padding:10px; background:#ffd066; font-size:22px; font-weight:900; }
.new-bird-art { width:150px; height:135px; margin:auto; filter:drop-shadow(0 0 13px #fff); }
.new-bird-art svg { width:100%; height:100%; }
.album-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }
.album-card { padding:5px; border:2px solid #7d6847; border-radius:10px; background:#f8f2d7; font-size:12px; font-weight:800; }
.album-card svg { width:100%; height:64px; }
.album-card.locked { filter:grayscale(1); opacity:.47; }
.toast { position:absolute; z-index:80; left:50%; top:17%; max-width:78%; transform:translate(-50%,-16px); padding:9px 16px; border:3px solid #2d2b24; border-radius:13px; background:rgba(49,47,39,.92); color:#fff; font-weight:900; text-align:center; opacity:0; pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.shake { animation:shake .35s; }
@keyframes shake { 25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)} }

@media (max-height: 720px) {
  .side-nav { gap:4px; }.side-nav button{min-height:52px}.bottom-nav button{min-height:60px}.yard{top:46%}.tree-actions{top:24%}.fruit-tree-system{top:17%}.basket-stock{top:34%}
}