:root{
  --ink:#2A1C0C; --cream:#FFF6DC; --nana:#FFC93C; --nana-d:#F0A81E;
  --fur:#D9A05B; --hot:#FF5E5B; --leaf:#59B36B; --paper:#FFFDF4;
  --line:3px solid var(--ink);
  --pop:4px 4px 0 var(--ink);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;overflow:hidden;display:flex;flex-direction:column;height:100vh;height:100dvh;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-weight:800;color:var(--ink);
  background:var(--cream);
  user-select:none;
}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;touch-action:manipulation}

/* ---------- 开场 ---------- */
.boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,#FFF6DC,#FFC93C 78%);transition:opacity .45s}
.boot.gone{opacity:0;pointer-events:none}
.boot-card{text-align:center;padding:22px;max-width:min(92vw,460px)}
.boot-img{width:min(62vw,300px);margin-bottom:-6px;filter:drop-shadow(0 10px 0 rgba(42,28,12,.14));animation:bob 2.2s ease-in-out infinite}
.boot h1{font-size:clamp(32px,9vw,54px);margin:0 0 6px;letter-spacing:3px;
  text-shadow:2px 2px 0 #FFF7DF,5px 5px 0 rgba(42,28,12,.18)}
.boot-sub{margin:0 0 6px;font-size:15px;line-height:1.65;opacity:.85;font-weight:700}
.boot-warn{margin:8px 0 18px;font-size:13px;font-weight:800;color:#8a5a13}
.btn-big{background:var(--hot);color:#fff;border:var(--line);border-radius:16px;
  padding:14px 34px;font-size:22px;letter-spacing:6px;box-shadow:var(--pop);transition:.12s}
.btn-big:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}

/* ---------- 新闻条 ---------- */
.news{flex:none;height:28px;line-height:28px;background:var(--ink);color:#FFE9A8;overflow:hidden;display:flex;align-items:center}
.news-track{white-space:nowrap;font-size:12px;font-weight:700;padding-left:100%;
  animation:marquee 26s linear infinite;animation-delay:-7s}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ---------- HUD ---------- */
.hud{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px;background:var(--paper);border-bottom:var(--line);position:relative;z-index:60}
.banana-count{display:flex;align-items:baseline;gap:8px;font-size:clamp(24px,5vw,34px);line-height:1}
.banana-count .nana{font-size:.8em;filter:drop-shadow(1px 2px 0 rgba(42,28,12,.25))}
.hud-sub{font-size:12px;font-weight:700;opacity:.7;margin-top:3px}
.hud-right{display:flex;align-items:center;gap:8px}
.leek-badge{font-size:12px;background:#E8F6E9;border:2px solid var(--leaf);border-radius:99px;
  padding:3px 9px;color:#2C6B39}
.leek-badge i{font-style:normal;opacity:.75}
.icon-btn{font-size:19px;padding:2px 6px;border-radius:9px;border:2px solid transparent}
.icon-btn:hover{border-color:var(--ink)}
.vol{width:74px;accent-color:var(--nana-d)}

/* ---------- 布局 ---------- */
.wrap{flex:1;min-height:0;overflow:hidden;display:grid;
  grid-template-columns:1fr min(38vw,380px);grid-template-rows:minmax(0,1fr)}

/* ---------- 舞台 ---------- */
.stage{position:relative;overflow:hidden;min-height:0;min-width:0;--shake:0px;
  background:radial-gradient(ellipse 80% 62% at 50% 42%,#FFF9E6 0%,#FFE08A 55%,#FFC93C 100%)}
.stage-sky{position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 22px,transparent 22px 52px);
  opacity:.55;pointer-events:none}
.stage.shaking{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translate(calc(var(--shake)*-.3),0)}
  20%,80%{transform:translate(calc(var(--shake)*.5),calc(var(--shake)*-.2))}
  30%,50%,70%{transform:translate(calc(var(--shake)*-1),calc(var(--shake)*.3))}
  40%,60%{transform:translate(var(--shake),calc(var(--shake)*-.3))}}
body.frenzy .stage{background:radial-gradient(ellipse 80% 62% at 50% 42%,#FFF0F0 0%,#FFB0C8 55%,#FF7BA9 100%);
  animation:frenzyPulse .55s ease-in-out infinite alternate}
@keyframes frenzyPulse{to{filter:hue-rotate(-14deg) saturate(1.25)}}
body.chorus .stage{animation:chorusPulse .48s ease-in-out infinite alternate}
@keyframes chorusPulse{to{filter:brightness(1.09) saturate(1.15)}}

/* 本体 */
.hero-wrap{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:80}
.hero{position:relative;display:block;padding:0;background:none;cursor:pointer;filter:drop-shadow(0 12px 0 rgba(42,28,12,.10))}
.hero-img{width:min(36vw,320px);display:block;pointer-events:none}
.hero.yell{animation:heroYell .23s ease-out}
@keyframes heroYell{
  0%{transform:scale(1) rotate(0)}
  35%{transform:scale(1.13,.9) rotate(-3deg) translateY(4px)}
  70%{transform:scale(.96,1.1) rotate(2deg) translateY(-8px)}
  100%{transform:scale(1) rotate(0)}}
.hero-mouth{position:absolute;left:19.8%;top:60.8%;width:13.5%;height:7.6%;
  background:radial-gradient(ellipse at 48% 24%,#6E241B 0%,#38100B 72%);
  border-radius:50%;box-shadow:inset 0 2px 3px rgba(0,0,0,.5),0 1px 2px rgba(255,255,255,.35);
  transform:translate(-50%,-50%) rotate(14deg) scaleY(.05);transform-origin:center 26%;
  transition:transform .07s ease-out;pointer-events:none}
.hero-mouth::after{content:"";position:absolute;left:50%;bottom:10%;width:46%;height:34%;
  background:#D8657C;border-radius:50% 50% 46% 46%;transform:translateX(-50%);opacity:.9}
.hero.yell .hero-mouth{transform:translate(-50%,-50%) rotate(14deg) scaleY(1.1) scaleX(1.04)}
.hero-glow{position:absolute;left:50%;top:50%;width:min(52vw,440px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:.2;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,215,64,.5) 45%,transparent 70%);
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.09)}}
.hero-shadow{position:absolute;left:50%;bottom:-6px;width:62%;height:16px;background:rgba(42,28,12,.13);
  border-radius:50%;transform:translateX(-50%);filter:blur(3px)}

/* 人群 */
.crowd{position:absolute;inset:0;pointer-events:none}
.mini{position:absolute;width:min(15vw,120px);transform-origin:50% 90%;
  transform:translate(-50%,-50%) scale(var(--sc));animation:bob 2.6s ease-in-out infinite}
.mini img{width:100%;display:block;filter:hue-rotate(var(--hue,0deg)) drop-shadow(0 5px 0 rgba(42,28,12,.10))}
.mini.flip img{transform:scaleX(-1)}
.mini.yell{animation:miniYell .26s ease-out}
@keyframes miniYell{
  0%{transform:translate(-50%,-50%) scale(var(--sc))}
  40%{transform:translate(-50%,-50%) scale(calc(var(--sc)*1.22),calc(var(--sc)*.88))}
  75%{transform:translate(-50%,-58%) scale(calc(var(--sc)*.94),calc(var(--sc)*1.14))}
  100%{transform:translate(-50%,-50%) scale(var(--sc))}}
@keyframes bob{50%{transform:translate(-50%,-53%) scale(var(--sc,1))}}

/* 气泡与数字 */
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:120}
.bubble{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:15px;font-weight:900;color:#fff;letter-spacing:1px;
  text-shadow:2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),0 5px 0 rgba(42,28,12,.25);
  animation:pop 1.05s cubic-bezier(.2,.9,.3,1) forwards}
.bubble.big{font-size:clamp(24px,4.4vw,40px);color:#FFF2B0}
.bubble.small{font-size:12px;opacity:.95}
@keyframes pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(var(--rot,0))}
  22%{opacity:1;transform:translate(calc(-50% + var(--dx,0)*.3),-70%) scale(1.16) rotate(var(--rot,0))}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0)),-190%) scale(.95) rotate(var(--rot,0))}}
.gain{position:absolute;transform:translate(-50%,-50%);font-size:18px;font-weight:900;color:#3E7C46;
  text-shadow:2px 2px 0 #fff;animation:rise 1s ease-out forwards;white-space:nowrap}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}
  20%{opacity:1;transform:translate(-50%,-70%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.nana-p{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);
  animation:fly var(--sp,1s) cubic-bezier(.16,.7,.35,1) forwards}
.nana-p svg{width:100%;height:100%;display:block}
@keyframes fly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(var(--sc,1)) rotate(var(--rot,0))}}

/* 巴菲特 */
.buffett{position:absolute;top:var(--y);left:0;z-index:150;width:min(24vw,190px);cursor:pointer;
  animation:bfCross var(--dur,12s) linear forwards;will-change:left;
  filter:drop-shadow(0 0 16px rgba(255,196,0,.85))}
.buffett .bf-svg{width:100%;display:block;animation:bfBob 1.4s ease-in-out infinite}
.bf-say{position:absolute;left:50%;top:-16px;transform:translateX(-50%);white-space:nowrap;
  background:#fff;border:2px solid var(--ink);border-radius:12px;padding:3px 9px;font-size:12px;
  box-shadow:3px 3px 0 var(--ink)}
@keyframes bfCross{from{left:var(--x0)}to{left:var(--x1)}}
@keyframes bfBob{50%{transform:translateY(-14px) rotate(3deg)}}
.buffett.hit{animation:bfHit .38s ease-out forwards}
@keyframes bfHit{to{transform:scale(1.8) rotate(22deg);opacity:0;filter:brightness(2.4)}}

/* 合唱条 */
.chorus-bar{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;z-index:130;padding:0 12px}
.chorus-btn{position:relative;width:min(94%,460px);height:44px;border:var(--line);border-radius:12px;
  background:var(--paper);overflow:hidden;box-shadow:var(--pop);transition:.12s}
.chorus-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#FFE08A,var(--nana));transition:width .12s linear}
.chorus-label{position:relative;font-size:15px;letter-spacing:1px}
.chorus-btn.ready{background:var(--hot);color:#fff;animation:readyPulse .7s ease-in-out infinite alternate}
.chorus-btn.ready .chorus-fill{background:rgba(255,255,255,.25)}
@keyframes readyPulse{to{transform:translateY(-3px) scale(1.02)}}
.chorus-btn:disabled{cursor:default;opacity:.9}
.chorus-btn:not(:disabled):active{transform:translate(4px,4px);box-shadow:0 0 0}

.tip{position:absolute;transition:opacity .4s;left:50%;top:8px;transform:translateX(-50%);z-index:130;
  background:var(--ink);color:#FFE9A8;font-size:12px;padding:5px 12px;border-radius:99px;opacity:.88}

/* ---------- 商店 ---------- */
.shop{display:flex;flex-direction:column;background:var(--paper);border-left:var(--line);min-width:0;min-height:0}
.tabs{display:flex;border-bottom:var(--line);flex:none}
.tab{flex:1;padding:11px 4px;font-size:14px;border-right:2px solid rgba(42,28,12,.12);opacity:.55}
.tab:last-child{border-right:none}
.tab.on{opacity:1;background:var(--nana);box-shadow:inset 0 -4px 0 var(--ink)}
.tab i{font-style:normal;font-size:11px;background:var(--ink);color:#FFE9A8;border-radius:99px;padding:1px 6px;margin-left:3px}
.tab-body{display:none;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px}
.tab-body.on{display:block}
.buybar{display:flex;gap:6px;margin-bottom:8px}
.buyamt{flex:1;padding:5px 0;font-size:12px;border:2px solid var(--ink);border-radius:8px;background:#fff;opacity:.55}
.buyamt.on{background:var(--nana);opacity:1}
.list{display:flex;flex-direction:column;gap:7px}

.gen{display:flex;gap:9px;align-items:center;text-align:left;width:100%;padding:8px 9px;
  border:var(--line);border-radius:13px;background:#fff;box-shadow:3px 3px 0 var(--ink);transition:.1s}
.gen.hidden{display:none}
.gen:active{transform:translate(3px,3px);box-shadow:0 0 0}
.gen.cant{opacity:.5;filter:grayscale(.55)}
.g-emoji{font-size:26px;flex:none;width:34px;text-align:center}
.g-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.g-name{font-size:15px}
.g-blurb{font-size:11px;font-weight:600;opacity:.6;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g-rate{font-size:11px;color:#3E7C46;font-weight:800}
.g-right{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.g-cost{font-size:14px;color:#B36A00}
.g-own{font-size:20px;opacity:.28;line-height:1}

.up-list{gap:7px}
.up{display:block;width:100%;text-align:left;padding:9px 11px;border:var(--line);border-radius:13px;
  background:#FFFBEA;box-shadow:3px 3px 0 var(--ink);transition:.1s}
.up:active{transform:translate(3px,3px);box-shadow:0 0 0}
.up.cant{opacity:.5;filter:grayscale(.55)}
.up-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.up-name{font-size:14px}
.up-cost{font-size:13px;color:#B36A00;flex:none}
.up-desc{font-size:11px;font-weight:600;opacity:.68;margin-top:3px;line-height:1.4}
.empty{font-size:12px;opacity:.5;text-align:center;padding:24px 10px;font-weight:600}

.stats{font-size:12.5px;font-weight:700}
.st-row{display:flex;justify-content:space-between;gap:10px;padding:5px 2px;border-bottom:1px dashed rgba(42,28,12,.16)}
.st-row span:last-child{opacity:.75;flex:none}
.stats hr{border:none;border-top:2px solid rgba(42,28,12,.2);margin:9px 0}
.prestige-box{margin-top:14px;padding:11px;border:var(--line);border-radius:13px;background:#EFFBF0;box-shadow:3px 3px 0 var(--ink)}
.prestige-box h3{margin:0 0 5px;font-size:15px}
.prestige-box p{margin:0 0 9px;font-size:11.5px;font-weight:600;line-height:1.5;opacity:.8}
.btn-danger{width:100%;padding:9px;border:var(--line);border-radius:10px;background:var(--hot);color:#fff;font-size:15px;letter-spacing:3px}
.btn-danger:disabled{background:#ddd;color:#999;cursor:default}
.danger-row{display:flex;gap:7px;margin-top:12px}
.btn-ghost{flex:1;padding:8px;border:2px solid var(--ink);border-radius:10px;background:#fff;font-size:12px;opacity:.8}
.credit{font-size:10.5px;font-weight:600;opacity:.45;line-height:1.6;margin:12px 0 4px;text-align:center}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:74px;transform:translate(-50%,20px);z-index:180;
  background:var(--ink);color:#FFF3C4;border-radius:14px;padding:10px 16px;font-size:13px;font-weight:700;
  max-width:min(90vw,520px);text-align:center;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 6px 0 rgba(42,28,12,.25)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{color:#FFD84D}

/* ---------- 手机 ---------- */
@media (max-width:820px){
  .wrap{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 46dvh}
  .shop{border-left:none;border-top:var(--line)}
  .hero-img{width:min(46vw,240px)}
  .mini{width:min(22vw,110px)}
  .toast{bottom:auto;top:70px}
  .hud{padding:6px 10px}
  .vol{width:56px}
}