:root{
  --sky:#cfefff; --sea:#78c9ff; --sand:#fffae1;
  --red:#ff5468; --green:#2ecc71; --blue:#46a2ff; --yellow:#f5c542;
}

*{ box-sizing:border-box }
body{
  margin:0;
  font-family:"Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:linear-gradient(var(--sky) 0 45%, var(--sea) 45% 55%, var(--sand) 55%);
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  overflow-x:hidden;
}

.hide{ display:none !important }

/* Header HUD */
header{
  width:100%; max-width:1100px; margin:12px 0 8px; padding:10px 14px;
  background:#ffffffcc; border:3px solid #00000010; border-radius:18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  position:relative; z-index:2;
}
h1{ margin:0; font-size:20px }
#hud{ display:flex; gap:14px; align-items:center; font-weight:900; flex-wrap:wrap }
.chip{ background:#0001; border:2px solid #0002; padding:4px 10px; border-radius:999px }
#reset{ background:var(--blue); color:#fff; border:3px solid #0003; border-radius:12px; padding:8px 12px; font-weight:800; cursor:pointer }

/* hint */
.hint{
  position:absolute; bottom:-38px; left:14px;
  background:#fff; border:3px solid #0003; border-radius:12px;
  padding:6px 12px; font-size:14px; font-weight:700;
  box-shadow:2px 2px 6px rgba(0,0,0,.1);
}

/* Stage */
.stage{
  width:100%; max-width:1100px;
  display:grid; gap:14px; grid-template-columns:1fr 1.2fr;
  padding:18px 0 26px;
  position:relative; z-index:1;
}
.left,.right{
  background:transparent; border:none; box-shadow:none; border-radius:0;
  padding:20px; min-height:680px; position:relative;
}
.scene-host{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; opacity:.08 }

/* Mascot */
.mascot{
  position:absolute; left:16px; bottom:16px;
  display:flex; align-items:flex-end; gap:10px;
  z-index:1;
}
.mascot img{
  /* ▶ 更大但自适应：手机不挤爆，桌面更显眼 */
  width: clamp(220px, 28vw, 460px);
  height:auto;

  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  image-rendering:auto;
}

/* Bubble 紧贴吉祥物右侧 */
.bubble{
  position:absolute;
  display:inline-block;
  max-width: 520px;
  min-width: 200px;
  padding:12px 16px;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere;
  background:#fff; border:4px solid #000; border-radius:16px;
  font-weight:900; font-size:16px; line-height:1.6; color:#333;
  transform:scale(0);
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.15));
  z-index:2;
}
.bubble.show{ animation:pop .28s ease-out forwards }
@keyframes pop{ from{transform:scale(0)} to{transform:scale(1)} }

.bubble.mascot{
  /* 关键：相对于 .mascot 容器放置在右侧 */
  left: calc(100% - 10px);
  bottom: 40%;
  transform: translateY(20%);
  font-size: clamp(16px, 1.6vw, 20px);
  padding: 16px 20px;
  max-width: clamp(260px, 34vw, 440px);
  background:#fffbe6;
  border:4px solid #222; border-radius:20px;
  box-shadow:6px 6px 0 #00000040;
}

/* 左侧尾巴 */
.bubble.mascot::after{
  content:"";
  position:absolute;
  left:-16px; bottom:22px;
  border-width:12px; border-style:solid;
  border-color: transparent #fffbe6 transparent transparent;
  filter: drop-shadow(-2px 2px 0 #222);
}

/* Current item */
.current-item{
  display:flex; align-items:center; justify-content:center;
  height:260px; margin-top:64px; background:transparent; border:none;
}
.card.big{
  border:none; box-shadow:none; background:transparent; width:auto; height:auto;
  display:flex; flex-direction:column; align-items:center; gap:8px; cursor:grab; user-select:none;
}
.card.big .emoji{ font-size:72px }
.card.big .label{ font-size:18px; font-weight:900; text-align:center }

/* Airdrop */
.airdrop{
  position:relative; display:flex; align-items:flex-start; justify-content:center;
  height:340px; margin-top:28px;
}
.plane{
  position:absolute; top:-8px; font-size:96px; line-height:1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
  animation: planeFloat 3.2s ease-in-out infinite;
  user-select:none; pointer-events:none; z-index:2; will-change:transform;
}
img.plane{ width:112px; height:auto }
@keyframes planeFloat{
  0%{ transform: translateY(0) rotate(-2deg) }
  50%{ transform: translateY(-8px) rotate(2deg) }
  100%{ transform: translateY(0) rotate(-2deg) }
}
.plane::after{
  content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  width:80px; height:120px;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
  clip-path: polygon(50% 0, 0 100%, 100% 100%); pointer-events:none; z-index:-1;
}
.plane.shake{ animation: planeShake .3s ease-in-out infinite }
@keyframes planeShake{
  0%{ transform: translateY(0) rotate(0deg) scale(1.05) }
  25%{ transform: translateY(-2px) rotate(-3deg) scale(1.08) }
  50%{ transform: translateY(0) rotate(0deg) scale(1.10) }
  75%{ transform: translateY(2px) rotate(3deg) scale(1.08) }
  100%{ transform: translateY(0) rotate(0deg) scale(1.05) }
}

/* Bins */
.bins.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:34px }
.bin{ background:transparent; border:none; box-shadow:none; padding:12px 8px; min-height:200px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end }
.bin .can{ font-size:64px; margin-bottom:10px }
.bin .label{ font-weight:1000; text-align:center; color:#fff; padding:8px 12px; border-radius:12px; width:auto }
.bin[data-type="waste"] .label{ background:var(--green) }
.bin[data-type="recycle"] .label{ background:var(--yellow); color:#222 }
.bin[data-type="rubbish"] .label{ background:var(--red) }
.bin.hot{ transform: translateY(-2px); transition: transform .08s }
.bin.shake{ animation: binShake .18s linear 2 }
@keyframes binShake{
  0%,100%{ transform: translateY(0) }
  25%{ transform: translateY(-2px) }
  75%{ transform: translateY(2px) }
}

/* Overlay */
.overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(200,230,255,.96));
  backdrop-filter:saturate(120%) blur(2px);
  z-index:1000; transition:opacity .2s; pointer-events:auto;
}
.overlay.hide{ opacity:0; pointer-events:none }
.panel{
  width:min(560px,90vw); background:#fff; border:4px solid #000; border-radius:18px; padding:18px;
  text-align:center; box-shadow:12px 12px 0 #0003;
}
.panel h2{ margin:8px 0 12px }
.btn{
  background:#12b886; color:#fff; border:4px solid #0a7a5e; border-radius:14px;
  padding:10px 16px; font-weight:900; cursor:pointer;
  display:inline-flex; gap:8px; align-items:center;
  box-shadow:0 6px 0 #0a7a5e; transition:transform .08s;
}
.btn:active{ transform:translateY(1px) }
.medal{ font-size:48px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.15)) }
.summary{ font-weight:900; margin:8px 0 14px }

.cover{
  width:100%; height:auto; max-height:300px; object-fit:contain;
  border-radius:14px; margin-bottom:10px; box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.cover.small{ max-height:180px }

.rules{
  text-align:left; margin:10px 0 14px; padding-left:14px;
  font-size:15px; line-height:1.5;
}

/* 动画层 */
.beach-anim{
  position:fixed; inset:0; pointer-events:none; z-index:0
}
.cloud{
  position:absolute; top:8vh; width:180px; height:70px; border-radius:999px;
  background:rgba(255,255,255,.8); animation:cloudMove 60s linear infinite; will-change:transform;
}
.cloud.c1{ left:-220px; animation-duration:70s }
.cloud.c2{ left:-260px; animation-duration:82s; top:16vh }
.cloud.c3{ left:-180px; animation-duration:64s; top:12vh }
@keyframes cloudMove{ from{transform:translateX(0)} to{transform:translateX(120vw)} }
.gull{ position:absolute; top:14vh; left:-10vw; width:74px; opacity:.85; animation:gullFly 26s linear infinite; will-change:transform }
.gull.g1{ animation-duration:24s }
.gull.g2{ animation-duration:30s; top:18vh }
@keyframes gullFly{ from{transform:translateX(0)} to{transform:translateX(120vw)} }

/* 沙滩装饰层：在鲸鱼层之下，但在背景之上 */
.beach-decor{
  position:fixed; left:0; right:0; bottom:0; height:45vh;
  pointer-events:none; z-index:0.5;
}
.decor{
  position:absolute; width:min(22vw, 280px); height:auto;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.08)); opacity:.98;
}
.hut-tree.d1{ left:5%;  bottom:4vh; transform:translateY(0) rotate(-1deg) }
.hut-tree.d2{ right:6%; bottom:5vh; transform:scaleX(-1) scale(.95) rotate(1deg) }
.hut-tree.d3{ left:38%; bottom:3.5vh; transform:scale(.8) rotate(.5deg); opacity:.95 }

/* 鲸鱼层（仅海面以上可见），不挡交互 */
.whale-layer{
  position:fixed; left:0; right:0; top:0; height:45vh;
  overflow:hidden; pointer-events:none; z-index:0.75;
}
.whale{
  position:absolute; width:min(18vw, 220px); height:auto;
  left:24vw; bottom:-8px; filter: drop-shadow(0 10px 0 rgba(0,0,0,.08)); opacity:0; will-change:transform;
}
.whale.jump{ animation: whaleJump 4.8s cubic-bezier(.35,.02,.23,1) infinite }
.whale.jump.delay{ animation-delay:2.2s }
@keyframes whaleJump{
  0%{ transform: translate(0, 12px) rotate(-6deg); opacity:0 }
  6%{ opacity:1 }
  25%{ transform: translate(10vw, -12vh) rotate(-2deg) }
  50%{ transform: translate(18vw, -18vh) rotate(6deg) }
  75%{ transform: translate(26vw, -10vh) rotate(12deg) }
  94%{ opacity:1 }
  100%{ transform: translate(34vw, 12px) rotate(16deg); opacity:0 }
}

/* 响应式：小屏优化避免遮挡 */
@media (max-width: 980px){
  .stage{ grid-template-columns:1fr }
  .left{ min-height:360px }
  .right{ min-height:520px; padding-bottom:32px }
  .airdrop{ height:300px; margin-top:16px }
  .plane{ font-size:84px }
  img.plane{ width:96px }
  .current-item{ margin-top:48px; height:230px }
  .bins.three{ margin-top:26px }
  .card.big .emoji{ font-size:58px }
  .card.big .label{ font-size:16px }
  .bin .can{ font-size:54px }

  /* 手机端只保留左侧装饰，避免右侧遮挡 bins */
  .hut-tree.d2{ display:none }

  /* 吉祥物略缩，气泡宽度也略缩 */
  .mascot img{ width: clamp(200px, 36vw, 300px) }
  .bubble.mascot{ max-width: clamp(220px, 58vw, 360px) }
}

/* 低动效偏好：减少动画 */
@media (prefers-reduced-motion: reduce){
  .plane, .gull, .cloud, .whale.jump{ animation: none !important }
}