/* ============ 牛来 · 票房逆袭挂机版 ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --bg:#e8d29a; --ink:#1a130b; --red:#e63946; --green:#3a7d44; --blue:#2a9d8f;
  --yellow:#f4d03f; --paper:#fff8e7; --skin:#ffd9a0;
}
html,body { height:100%; }
body {
  background:
    repeating-linear-gradient(0deg, rgba(26,19,11,.05) 0 2px, transparent 2px 44px),
    repeating-linear-gradient(90deg, rgba(26,19,11,.05) 0 2px, transparent 2px 44px),
    var(--bg);
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  overflow-x:hidden;
  user-select:none; -webkit-user-select:none;
  min-height:100vh;
}
.hidden { display:none !important; }
.screen { position:fixed; inset:0; z-index:50; }

/* 贴纸字 */
.sticker, .big-title, .logo, .bo-value, .abs-value, .news-title, .ending-title {
  -webkit-text-stroke:2px var(--ink); text-shadow:3px 3px 0 var(--ink);
}

/* ---------- 标题屏 ---------- */
#screen-title {
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 18% 22%, rgba(244,208,63,.55) 0 90px, transparent 91px),
    radial-gradient(circle at 82% 70%, rgba(230,57,70,.28) 0 130px, transparent 131px),
    repeating-linear-gradient(0deg, rgba(26,19,11,.06) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(26,19,11,.06) 0 2px, transparent 2px 46px),
    var(--bg);
}
.title-wrap { text-align:center; padding:24px; animation:pop-in .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop-in { from { transform:scale(.6) rotate(-4deg); opacity:0; } to { transform:none; opacity:1; } }
.badge {
  display:inline-block; background:var(--red); color:var(--paper);
  border:3px solid var(--ink); border-radius:12px; padding:6px 14px;
  font-size:14px; font-weight:900; letter-spacing:1px;
  transform:rotate(-6deg); box-shadow:4px 4px 0 var(--ink);
}
.badge.spin { animation:wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(4deg)} }
.big-title { font-size:clamp(90px,22vw,170px); font-weight:900; line-height:1; margin:18px 0 4px; transform:rotate(-2deg); }
.t-niu { color:var(--red); }
.t-lai { color:var(--green); display:inline-block; animation:bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(3deg)} 50%{transform:translateY(-10px) rotate(-3deg)} }
.subtitle {
  display:inline-block; background:var(--ink); color:var(--yellow);
  font-size:clamp(16px,4vw,24px); font-weight:900; padding:6px 22px;
  border-radius:99px; letter-spacing:4px; transform:rotate(1.5deg);
}
.title-quotes { margin:22px 0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.title-quotes span {
  background:var(--paper); border:2px solid var(--ink); border-radius:10px;
  padding:5px 12px; font-size:13px; font-weight:700; box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-2deg);
}
.title-quotes span:nth-child(2){ transform:rotate(2deg); background:#d7f0d9; }
.title-quotes span:nth-child(3){ transform:rotate(-1deg); background:#ffd9d9; }
.btn-huge {
  cursor:pointer; border:4px solid var(--ink); border-radius:16px;
  background:var(--yellow); color:var(--ink);
  font-size:clamp(20px,5vw,28px); font-weight:900; letter-spacing:3px;
  padding:14px 44px; box-shadow:6px 6px 0 var(--ink);
  font-family:inherit; transition:transform .08s, box-shadow .08s;
}
.btn-huge:active { transform:translate(4px,4px); box-shadow:2px 2px 0 var(--ink); }
.title-foot { margin-top:26px; font-size:12px; color:rgba(26,19,11,.65); letter-spacing:1px; }

/* ---------- 顶部 ---------- */
#game { max-width:920px; margin:0 auto; padding:10px 10px 40px; }
header {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--paper); border:3px solid var(--ink); border-radius:16px;
  padding:8px 12px; box-shadow:5px 5px 0 var(--ink);
  position:sticky; top:8px; z-index:20;
}
.logo { font-size:30px; font-weight:900; color:var(--red); transform:rotate(-3deg); line-height:1; }
.logo span { color:var(--green); }
.bo-box { text-align:center; }
.bo-label { font-size:10px; letter-spacing:6px; color:rgba(26,19,11,.6); font-weight:700; }
.bo-value { font-size:clamp(22px,6vw,34px); font-weight:900; color:var(--red); line-height:1.05; }
.bo-rate { font-size:11px; font-weight:700; color:rgba(26,19,11,.7); }
.lvl-box { min-width:110px; }
.lvl-label { font-size:11px; font-weight:900; margin-bottom:4px; }
.lv-bar { height:10px; background:#eee2c4; border:2px solid var(--ink); border-radius:99px; overflow:hidden; }
#lv-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--red),var(--yellow),var(--green)); transition:width .4s; }

/* ---------- 舞台 ---------- */
#stage {
  position:relative; margin-top:14px;
  background:linear-gradient(180deg,#f6e7bd 0%, #e0c98b 100%);
  border:3px solid var(--ink); border-radius:16px; box-shadow:5px 5px 0 var(--ink);
  padding:10px 10px 12px;
}
#canvas-wrap {
  position:relative; border:3px dashed rgba(26,19,11,.55); border-radius:10px;
  background:#d9c07f; overflow:hidden; cursor:pointer;
  min-height:250px; height:clamp(250px,46vh,430px);
}
#cow { width:100%; height:100%; display:block; touch-action:manipulation; }
.stage-tag {
  position:absolute; left:8px; bottom:8px; z-index:5;
  background:var(--ink); color:var(--yellow); font-size:12px; font-weight:900;
  padding:4px 10px; border-radius:99px; pointer-events:none; letter-spacing:1px;
}
#click-fx { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:6; }
.fx-num {
  position:absolute; font-weight:900; color:var(--red);
  -webkit-text-stroke:1.5px var(--ink); text-shadow:2px 2px 0 var(--ink);
  font-size:26px; animation:fx-rise .8s ease-out forwards; white-space:nowrap;
}
.fx-niu { color:var(--green); font-size:20px; }
@keyframes fx-rise { from { transform:translateY(0) scale(.7); opacity:1; } to { transform:translateY(-70px) scale(1.15); opacity:0; } }

#abs-box { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:8px 4px 0; }
.abs-label { font-size:12px; font-weight:700; color:rgba(26,19,11,.7); }
.abs-value { font-size:34px; font-weight:900; color:var(--green); line-height:1; }
.abs-rate { font-size:12px; font-weight:700; color:rgba(26,19,11,.7); }

/* 妈妈 */
#mom { position:absolute; right:14px; top:18px; text-align:center; z-index:8; pointer-events:none; }
.mom-face {
  font-size:56px; background:var(--paper); border:3px solid var(--ink); border-radius:50%;
  width:74px; height:74px; display:flex; align-items:center; justify-content:center;
  box-shadow:4px 4px 0 var(--ink); animation:float 3s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.mom-name {
  margin-top:4px; font-size:11px; font-weight:900; background:var(--paper);
  border:2px solid var(--ink); border-radius:99px; padding:2px 8px; display:inline-block;
}
.mom-bubble {
  position:absolute; bottom:96px; right:-8px; width:190px;
  background:var(--paper); border:3px solid var(--ink); border-radius:14px;
  padding:8px 10px; font-size:13px; font-weight:800; text-align:left;
  box-shadow:4px 4px 0 var(--ink); animation:bubble-in .25s ease-out both;
}
.mom-bubble::after {
  content:""; position:absolute; right:26px; bottom:-14px;
  border:8px solid transparent; border-top-color:var(--ink);
}
@keyframes bubble-in { from { transform:translateY(8px) scale(.85); opacity:0; } to { transform:none; opacity:1; } }

/* 新闻横幅 */
#news {
  position:absolute; left:50%; top:14px; transform:translateX(-50%) rotate(-2deg); z-index:9;
  background:var(--red); color:var(--paper); border:3px solid var(--ink); border-radius:12px;
  padding:8px 16px; text-align:center; box-shadow:5px 5px 0 var(--ink);
  animation:news-in .35s cubic-bezier(.2,1.8,.4,1) both; max-width:92%;
  pointer-events:none;
}
@keyframes news-in { from { transform:translateX(-50%) scale(.3) rotate(8deg); opacity:0; } to { transform:translateX(-50%) scale(1) rotate(-2deg); opacity:1; } }
.news-title { font-size:16px; font-weight:900; color:var(--yellow); -webkit-text-stroke:1px var(--ink); }
.news-sub { font-size:12px; font-weight:700; margin-top:2px; color:var(--paper); }

/* ---------- 升级 ---------- */
#upgrades { margin-top:16px; }
#upgrades h2 {
  font-size:18px; font-weight:900; letter-spacing:2px; margin-bottom:8px;
  background:var(--green); color:var(--paper); border:3px solid var(--ink);
  border-radius:99px; padding:6px 16px; display:inline-block; box-shadow:4px 4px 0 var(--ink);
}
#upgrades h2 .small { font-size:11px; font-weight:700; color:rgba(255,248,231,.85); letter-spacing:1px; }
#upgrade-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.up-card {
  background:var(--paper); border:3px solid var(--ink); border-radius:14px;
  padding:10px 12px; box-shadow:4px 4px 0 var(--ink); cursor:pointer;
  transition:transform .08s; position:relative; overflow:hidden;
}
.up-card:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.up-card.off { opacity:.5; cursor:not-allowed; filter:grayscale(.4); }
.up-card.can-buy { animation:glow 1.2s ease-in-out infinite; }
@keyframes glow { 0%,100%{ box-shadow:4px 4px 0 var(--ink);} 50%{ box-shadow:4px 4px 0 var(--ink), 0 0 0 4px rgba(230,57,70,.35);} }
.up-head { display:flex; align-items:center; gap:8px; }
.up-icon { font-size:26px; filter:drop-shadow(2px 2px 0 rgba(26,19,11,.4)); }
.up-name { font-weight:900; font-size:14px; }
.up-lv { font-size:11px; font-weight:900; color:var(--red); margin-left:auto; white-space:nowrap; }
.up-desc { font-size:12px; margin:6px 0 8px; color:rgba(26,19,11,.75); line-height:1.45; }
.up-cost {
  display:inline-block; font-size:12px; font-weight:900; background:var(--yellow);
  border:2px solid var(--ink); border-radius:8px; padding:3px 10px;
}
.up-cost.big { background:var(--red); color:var(--paper); }

/* ---------- 底部 ---------- */
footer { margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; }
.btn {
  cursor:pointer; font-family:inherit; font-weight:800; font-size:13px;
  background:var(--paper); border:2px solid var(--ink); border-radius:10px;
  padding:7px 14px; box-shadow:3px 3px 0 var(--ink); color:var(--ink);
  transition:transform .08s, box-shadow .08s;
}
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.foot-note { width:100%; text-align:center; font-size:12px; color:rgba(26,19,11,.6); font-weight:700; letter-spacing:1px; }

/* ---------- 弹幕 ---------- */
#danmaku-layer { position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden; }
.dmk {
  position:absolute; font-size:16px; font-weight:900; color:#fff;
  -webkit-text-stroke:1px var(--ink); text-shadow:2px 2px 0 var(--ink);
  white-space:nowrap; animation:dmk-fly linear forwards; opacity:.92;
}
@keyframes dmk-fly { from { transform:translateX(105vw) rotate(var(--r,0deg)); } to { transform:translateX(-30vw) rotate(var(--r,0deg)); } }

/* ---------- 全屏横幅 ---------- */
#banner-layer { position:fixed; inset:0; pointer-events:none; z-index:60; display:flex; align-items:center; justify-content:center; }
.banner {
  background:var(--red); color:var(--yellow); border:5px solid var(--ink); border-radius:20px;
  padding:20px 34px; text-align:center; box-shadow:8px 8px 0 var(--ink);
  font-size:clamp(24px,6vw,44px); font-weight:900; letter-spacing:2px;
  -webkit-text-stroke:2px var(--ink); text-shadow:4px 4px 0 var(--ink);
  animation:banner-pop 2.6s cubic-bezier(.2,1.4,.3,1) both; transform:rotate(-3deg);
  max-width:92vw;
}
.banner small { display:block; font-size:14px; color:var(--paper); -webkit-text-stroke:0; text-shadow:none; margin-top:6px; }
@keyframes banner-pop {
  0% { transform:scale(.2) rotate(10deg); opacity:0; }
  12% { transform:scale(1.08) rotate(-3deg); opacity:1; }
  18% { transform:scale(1) rotate(-2deg); }
  85% { transform:scale(1) rotate(-2deg); opacity:1; }
  100% { transform:scale(1.3) rotate(2deg); opacity:0; }
}

/* ---------- 结算屏 ---------- */
#ending { background:rgba(26,19,11,.82); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }
.ending-wrap { text-align:center; max-width:520px; width:100%; }
.ending-title { font-size:clamp(28px,7vw,44px); font-weight:900; color:var(--yellow); }
.ending-sub { color:var(--paper); font-weight:800; margin:6px 0 14px; letter-spacing:2px; }
#poster {
  width:min(78vw,340px); border:4px solid var(--ink); border-radius:14px;
  box-shadow:0 0 0 4px var(--paper), 8px 8px 0 rgba(0,0,0,.5); background:var(--paper);
}
.ending-actions { display:flex; flex-direction:column; gap:10px; margin-top:16px; align-items:center; }
.btn-link { background:none; border:none; color:var(--paper); text-decoration:underline; cursor:pointer; font-size:14px; margin-top:12px; font-family:inherit; font-weight:700; }

/* ---------- toast ---------- */
#toast {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:70;
  background:var(--ink); color:var(--yellow); font-weight:900; font-size:14px;
  border-radius:12px; padding:12px 20px; max-width:90vw; text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.35); animation:toast-in .3s ease-out both;
}
@keyframes toast-in { from { transform:translateX(-50%) translateY(20px); opacity:0; } to { transform:translateX(-50%); opacity:1; } }

@media (max-width:520px) {
  #upgrade-grid { grid-template-columns:1fr 1fr; }
  .mom-face { width:58px; height:58px; font-size:42px; }
  .mom-bubble { width:150px; font-size:12px; bottom:80px; }
  header { padding:6px 8px; }
}