:root { --ink:#28364b; --blue:#168aad; --blue-dark:#0b6c8a; --cream:rgba(255,253,247,.95); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { width:100%; height:100%; margin:0; }
body {
  overflow:hidden; color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  background:linear-gradient(145deg,#daf4ff,#f8f1cb 55%,#e8ddff); touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
}
button,a { font:inherit; -webkit-tap-highlight-color:transparent; }
.game-shell { width:100%; height:100dvh; display:grid; grid-template-rows:78px minmax(0,1fr) 174px; gap:10px; padding:7px 22px 12px; }
.topbar { position:relative; display:flex; align-items:center; justify-content:center; }
.title-block { text-align:center; line-height:1; text-shadow:0 3px 0 rgba(255,255,255,.85); }
.title-block h1 { margin:0; font-size:clamp(32px,4vw,48px); letter-spacing:2px; }
.title-block p { margin:5px 0 0; color:#687687; font-size:clamp(15px,1.6vw,20px); font-weight:800; }
.round-button {
  position:absolute; top:9px; width:54px; height:54px; border:3px solid rgba(255,255,255,.9); border-radius:50%;
  display:grid; place-items:center; color:#586273; background:rgba(255,255,255,.72); box-shadow:0 6px 0 rgba(68,79,94,.14),inset 0 0 0 2px rgba(86,92,108,.12);
  text-decoration:none; cursor:pointer; font-size:40px; line-height:1;
}
.back-button { left:0; padding-bottom:5px; }
.reset-button { right:0; font-size:31px; }
.round-button:active { transform:translateY(3px); box-shadow:0 3px 0 rgba(68,79,94,.14); }

.weather-stage {
  --scene:url("../shared/generated_assets/weather_dress_bg_sun_optimized.webp");
  position:relative; min-height:0; overflow:hidden; border-radius:28px; border:5px solid rgba(255,255,255,.88);
  background-image:linear-gradient(rgba(255,255,255,.02),rgba(33,43,60,.07)),var(--scene); background-position:center; background-size:cover;
  box-shadow:0 9px 22px rgba(57,75,95,.2); transition:background-image .35s ease;
}
.weather-stage::after { content:""; position:absolute; z-index:1; left:50%; bottom:-12%; width:48%; height:82%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(255,255,255,.43),rgba(255,255,255,.08) 58%,transparent 72%); pointer-events:none; }
.status-row { position:absolute; z-index:8; top:12px; left:16px; right:16px; display:flex; justify-content:space-between; pointer-events:none; }
.status-pill { padding:7px 15px; border-radius:999px; color:#375467; background:rgba(255,255,255,.91); box-shadow:0 3px 10px rgba(35,51,68,.16); font-size:clamp(13px,1.35vw,17px); font-weight:900; }
.collection-pill { color:#684975; }

.child-target { position:absolute; z-index:4; inset:45px 25% 5px; border:0; padding:0; display:flex; align-items:flex-end; justify-content:center; background:transparent; cursor:pointer; }
.child-target::after { content:""; position:absolute; z-index:-1; left:25%; right:25%; bottom:5px; height:14px; border-radius:50%; background:rgba(27,34,45,.25); filter:blur(7px); }
.child-target img { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 8px 5px rgba(21,32,47,.23)); pointer-events:none; }
.child-target.is-target { animation:target-pulse .75s ease infinite alternate; }
.child-target.is-target::before { content:"送给我"; position:absolute; z-index:7; top:7px; padding:7px 14px; border-radius:999px; color:#74540b; background:#fff7b6; box-shadow:0 3px 0 #dfb64a; font-weight:900; }
.child-target.wrong { animation:wrong-shake .42s ease; }
.child-target.happy { animation:happy-pop .6s cubic-bezier(.2,.8,.2,1); }
.weather-reveal { position:absolute; z-index:7; right:3%; top:12%; padding:8px 14px; border:3px solid rgba(255,255,255,.9); border-radius:999px; color:#34445c; background:rgba(255,255,255,.89); box-shadow:0 4px 12px rgba(30,42,55,.16); font-size:clamp(17px,2vw,24px); font-weight:900; }
.feedback { position:absolute; z-index:10; left:50%; top:12px; transform:translateX(-50%); min-height:36px; padding:7px 17px; border-radius:999px; color:#694b25; background:rgba(255,249,210,.96); box-shadow:0 4px 12px rgba(76,51,30,.16); font-weight:900; opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap; }
.feedback.show { opacity:1; }
.success-banner { position:absolute; z-index:12; top:10px; left:50%; transform:translateX(-50%); gap:12px; align-items:center; padding:8px 22px; border:3px solid #ffd45a; border-radius:999px; color:#37677b; background:#fff9d7; box-shadow:0 5px 0 rgba(172,123,34,.23); font-size:clamp(16px,2vw,23px); white-space:nowrap; animation:banner-in .5s cubic-bezier(.2,.9,.25,1.25); }
.success-banner:not([hidden]) { display:flex; }

.weather-effects,.celebration { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.weather-effects { z-index:2; }
.celebration { z-index:11; }
.weather-effects i,.celebration i { position:absolute; font-style:normal; }
.weather-effects.rain i { top:-12%; width:3px; height:48px; border-radius:4px; background:linear-gradient(transparent,rgba(175,226,255,.95)); transform:rotate(7deg); animation:rain-fall var(--duration) linear infinite; animation-delay:var(--delay); }
.weather-effects.snow i { top:-10%; color:#fff; text-shadow:0 1px 3px #8bb8d8; animation:snow-fall var(--duration) linear infinite; animation-delay:var(--delay); }
.weather-effects.wind i,.weather-effects.autumn i { left:-10%; animation:leaf-fly var(--duration) linear infinite; animation-delay:var(--delay); }
.weather-effects.sun i { color:#fff3a0; text-shadow:0 0 10px #fff; animation:sun-twinkle var(--duration) ease-in-out infinite; animation-delay:var(--delay); }
.celebration i { top:-28px; animation:confetti-fall var(--duration) ease-in forwards; animation-delay:var(--delay); }

.item-dock { position:relative; min-height:0; border:4px solid rgba(255,255,255,.92); border-radius:26px; background:var(--cream); box-shadow:0 7px 18px rgba(57,75,95,.15); overflow:hidden; }
.dock-tip { position:absolute; left:18px; top:50%; transform:translateY(-50%); width:150px; color:#647585; font-weight:900; line-height:1.35; text-align:center; }
.dock-tip span { display:block; font-size:29px; }
.item-cards { height:100%; display:flex; justify-content:center; align-items:center; gap:clamp(24px,5vw,68px); padding:11px 165px; }
.item-card { position:relative; width:clamp(125px,14vw,180px); height:142px; border:4px solid #fff; border-radius:25px; padding:5px; background:linear-gradient(160deg,#fff,#e7f7ff); box-shadow:0 8px 0 #84cfe8,0 11px 18px rgba(54,70,78,.18); cursor:grab; touch-action:none; transition:transform .17s,filter .17s,opacity .17s; }
.item-card:nth-child(2) { background:linear-gradient(160deg,#fff,#fff2ca); box-shadow:0 8px 0 #efc760,0 11px 18px rgba(54,70,78,.18); }
.item-card:nth-child(3) { background:linear-gradient(160deg,#fff,#eee5ff); box-shadow:0 8px 0 #b9a4e8,0 11px 18px rgba(54,70,78,.18); }
.item-card img { width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 5px 4px rgba(43,51,61,.18)); }
.item-card.selected { transform:translateY(-10px) scale(1.07); outline:6px solid rgba(255,196,62,.64); }
.item-card.used { opacity:0; pointer-events:none; transform:scale(.62); }
.item-card:active { cursor:grabbing; transform:scale(.96); }
.next-panel { height:100%; display:flex; align-items:center; justify-content:center; gap:clamp(28px,6vw,90px); padding:20px; }
.next-copy { display:flex; flex-direction:column; color:#596b78; }
.next-copy strong { color:var(--blue-dark); font-size:clamp(22px,2.7vw,34px); }
.next-copy span { margin-top:4px; font-weight:700; }
.next-button { min-width:270px; min-height:82px; border:4px solid #fff; border-radius:28px; color:#fff; background:linear-gradient(#42b8d8,#168aad); box-shadow:0 9px 0 #0b6681,0 13px 18px rgba(28,103,130,.24); font-size:clamp(23px,2.8vw,34px); font-weight:900; cursor:pointer; }
.next-button span { display:inline-block; margin-left:8px; transition:transform .2s; }
.next-button:hover span { transform:translateX(7px); }
.next-button:active { transform:translateY(5px); box-shadow:0 4px 0 #0b6681; }
.drag-ghost { position:fixed; z-index:30; width:150px; height:120px; display:none; pointer-events:none; transform:translate(-50%,-55%); }
.drag-ghost.active { display:block; }
.drag-ghost img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 7px rgba(35,42,51,.3)); }

@keyframes target-pulse { to { transform:scale(1.025); filter:brightness(1.08); } }
@keyframes happy-pop { 0%{transform:scale(.84)} 48%{transform:scale(1.08) rotate(-2deg)} 72%{transform:scale(.97) rotate(1deg)} 100%{transform:scale(1)} }
@keyframes wrong-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-13px)} 40%,80%{transform:translateX(13px)} }
@keyframes banner-in { from{opacity:0;transform:translate(-50%,-24px) scale(.8)} to{opacity:1;transform:translate(-50%,0) scale(1)} }
@keyframes rain-fall { to { transform:translate(90px,125vh) rotate(7deg); } }
@keyframes snow-fall { to { transform:translate(var(--drift),115vh) rotate(540deg); } }
@keyframes leaf-fly { to { transform:translate(125vw,var(--drift)) rotate(760deg); } }
@keyframes sun-twinkle { 0%,100%{opacity:.18;transform:scale(.65)} 50%{opacity:1;transform:scale(1.25)} }
@keyframes confetti-fall { to { transform:translate(var(--drift),115vh) rotate(680deg); opacity:.95; } }

@media (max-width:760px) {
  .game-shell { grid-template-rows:68px minmax(0,1fr) 145px; padding:5px 8px 8px; gap:6px; }
  .round-button { width:48px; height:48px; top:6px; }
  .child-target { inset:45px 7% 3px; }
  .status-pill { padding:5px 8px; font-size:11px; }
  .dock-tip { display:none; }
  .item-cards { padding:7px; gap:8px; }
  .item-card { width:30%; height:118px; }
  .next-copy span { display:none; }
  .next-button { min-width:190px; min-height:67px; }
}
@media (max-height:650px) {
  .game-shell { grid-template-rows:62px minmax(0,1fr) 132px; }
  .title-block h1 { font-size:31px; }
  .title-block p { font-size:14px; }
  .round-button { width:46px; height:46px; top:4px; }
  .item-card { height:105px; }
}