/* 馒头工坊 - 核心样式 */
:root {
  --bg: #fdf6ec;
  --card: #fff9f2;
  --border: #e8d5c0;
  --accent: #d4892a;
  --accent2: #c0392b;
  --gold: #e6a817;
  --steam: #f5f0e8;
  --text: #3e2723;
  --text2: #6d4c41;
  --green: #27ae60;
  --red: #e74c3c;
  --purple: #8e44ad;
  --shadow: 0 4px 20px rgba(139,90,43,0.08);
  --radius: 16px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system,'PingFang SC','Microsoft YaHei',sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
#app { max-width: 480px; margin:0 auto; padding: 16px; padding-bottom: 80px; }

/* Header */
.header { text-align:center; padding: 20px 0 10px; }
.header .logo { font-size:32px; }
.header .title { font-size:22px; font-weight:800; margin-top:4px; letter-spacing:2px; }
.header .subtitle { font-size:12px; color:var(--text2); margin-top:2px; }

/* Cards */
.card { background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:var(--shadow); border:1px solid var(--border); }
.card-title { font-size:15px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:6px; }

/* Buttons */
.btn { display:inline-block; padding:10px 20px; border-radius:25px; border:none; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; text-align:center; text-decoration:none; }
.btn:active { transform:scale(0.96); }
.btn-primary { background:linear-gradient(135deg, var(--accent), #c2781a); color:#fff; }
.btn-gold { background:linear-gradient(135deg, var(--gold), #c8920e); color:#fff; }
.btn-outline { background:transparent; border:2px solid var(--accent); color:var(--accent); }
.btn-sm { padding:6px 14px; font-size:12px; }
.btn-block { display:block; width:100%; }
.btn-danger { background:var(--red); color:#fff; }
.btn:disabled { opacity:.5; pointer-events:none; }

/* Steamer Room */
.steamer-room { position:relative; text-align:center; padding:30px 0 20px; }
.steamer-img { font-size:100px; transition:transform .3s; }
.steamer-img.shaking { animation: shake .5s ease-in-out; }
.steamer-img.opening { animation: openSteam .8s ease-out; }
.steam-particles { position:absolute; top:20px; left:50%; transform:translateX(-50%); font-size:24px; opacity:0; transition:opacity .5s; }
.steam-particles.active { opacity:1; animation: rise 2s ease-out infinite; }

@keyframes shake {
  0%,100% { transform:rotate(0); }
  25% { transform:rotate(-5deg); }
  75% { transform:rotate(5deg); }
}
@keyframes openSteam {
  0% { transform:scale(1); }
  50% { transform:scale(1.2); }
  100% { transform:scale(1); }
}
@keyframes rise {
  0% { opacity:1; transform:translateX(-50%) translateY(0); }
  100% { opacity:0; transform:translateX(-50%) translateY(-40px); }
}
.steamer-level { font-size:13px; color:var(--text2); margin-top:8px; }
.level-badge { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px; font-weight:600; }
.lv-bamboo { background:#d4a574; color:#fff; }
.lv-iron { background:#8d8d8d; color:#fff; }
.lv-copper { background:#c4865a; color:#fff; }
.lv-silver { background:#b0bec5; color:#263238; }
.lv-gold { background:linear-gradient(135deg,#ffd700,#ffb300); color:#5d4037; }

/* Materials bar */
.materials { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.mat-item { text-align:center; padding:8px 4px; background:#fff; border-radius:10px; border:1px solid var(--border); }
.mat-emoji { font-size:24px; }
.mat-name { font-size:11px; color:var(--text2); }
.mat-val { font-size:14px; font-weight:700; }

/* Stats row */
.stats-row { display:flex; justify-content:space-around; text-align:center; padding:10px 0; }
.stat-item { flex:1; }
.stat-val { font-size:20px; font-weight:800; color:var(--accent); }
.stat-label { font-size:11px; color:var(--text2); }

/* Production card */
.recipe-select { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px; }
.recipe-opt { padding:10px; border:2px solid var(--border); border-radius:10px; text-align:center; cursor:pointer; transition:all .2s; position:relative; }
.recipe-opt.selected { border-color:var(--accent); background:#fff8f0; }
.recipe-opt.locked { opacity:.5; pointer-events:none; }
.recipe-opt .r-name { font-size:13px; font-weight:600; }
.recipe-opt .r-rate { font-size:11px; color:var(--text2); }
.recipe-opt .r-cost { font-size:10px; color:var(--red); }

/* Quality display */
.quality-result { text-align:center; padding:20px; }
.quality-emoji { font-size:64px; }
.quality-name { font-size:24px; font-weight:800; }
.quality-value { font-size:16px; color:var(--accent); margin-top:4px; }
.quality-mythic { animation: mythicGlow 1.5s ease-in-out infinite; }
@keyframes mythicGlow {
  0%,100% { text-shadow:0 0 20px rgba(230,168,23,.5); }
  50% { text-shadow:0 0 40px rgba(230,168,23,1),0 0 80px rgba(255,215,0,.8); }
}

/* Shop grid */
.shop-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.shop-item { background:#fff; border-radius:10px; padding:12px; text-align:center; border:1px solid var(--border); position:relative; }
.shop-item .si-img { font-size:40px; }
.shop-item .si-name { font-size:13px; font-weight:600; margin:6px 0; }
.shop-item .si-desc { font-size:11px; color:var(--text2); margin-bottom:6px; }
.shop-item .si-price { font-size:12px; color:var(--accent); font-weight:600; }
.shop-item .si-badge { position:absolute; top:6px; right:6px; background:var(--red); color:#fff; font-size:10px; padding:2px 6px; border-radius:8px; }
.shop-item.owned { opacity:.6; }
.shop-item.owned::after { content:'已拥有'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--green); font-weight:700; font-size:14px; }

/* Exchange */
.exchange-item { display:flex; align-items:center; gap:12px; padding:12px; background:#fff; border-radius:10px; margin-bottom:8px; border:1px solid var(--border); }
.exchange-item .ex-img { font-size:36px; }
.exchange-item .ex-info { flex:1; }
.exchange-item .ex-name { font-weight:600; font-size:14px; }
.exchange-item .ex-desc { font-size:11px; color:var(--text2); }
.exchange-item .ex-cost { display:flex; align-items:center; gap:4px; color:var(--accent); font-weight:700; }

/* Invite */
.invite-code { text-align:center; padding:20px; }
.invite-code .code { font-size:32px; font-weight:800; letter-spacing:4px; color:var(--accent); background:#fff; padding:10px 20px; border-radius:10px; border:2px dashed var(--accent); display:inline-block; margin:10px 0; }
.copy-btn { cursor:pointer; font-size:12px; color:var(--accent); text-decoration:underline; }

/* Team */
.team-member { display:flex; align-items:center; gap:10px; padding:10px; background:#fff; border-radius:10px; margin-bottom:6px; }
.team-avatar { width:40px; height:40px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:18px; }
.team-info { flex:1; }
.team-name { font-weight:600; font-size:13px; }
.team-streak { font-size:11px; color:var(--accent); }

/* Bottom nav */
.nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; background:var(--card); border-top:1px solid var(--border); display:flex; padding:6px 0 env(safe-area-inset-bottom); z-index:100; }
.nav-item { flex:1; text-align:center; padding:6px 0; cursor:pointer; transition:all .2s; text-decoration:none; color:var(--text2); }
.nav-item.active { color:var(--accent); }
.nav-item .nav-icon { font-size:22px; display:block; }
.nav-item .nav-label { font-size:10px; margin-top:2px; }

/* Toast */
.toast { position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#3e2723; color:#fff; padding:10px 24px; border-radius:20px; font-size:13px; z-index:200; animation:fadeIn .3s; }
@keyframes fadeIn { from{opacity:0;transform:translateX(-50%) translateY(-10px);} to{opacity:1;transform:translateX(-50%) translateY(0);} }

/* Modal */
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:150; display:flex; align-items:center; justify-content:center; }
.modal { background:var(--card); border-radius:var(--radius); padding:24px; width:90%; max-width:400px; max-height:80vh; overflow-y:auto; text-align:center; }

/* Admin */
.admin-btn { position:fixed; top:10px; right:10px; font-size:20px; cursor:pointer; z-index:50; opacity:.3; }

/* Progress bar */
.progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin:6px 0; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:3px; transition:width .5s; }

/* Login page */
.login-page { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:80vh; padding:20px; }
.login-avatar { font-size:80px; margin-bottom:20px; }
.login-title { font-size:28px; font-weight:800; margin-bottom:8px; }
.login-sub { font-size:13px; color:var(--text2); margin-bottom:30px; }
.login-input { width:100%; padding:12px 16px; border:2px solid var(--border); border-radius:25px; font-size:16px; margin-bottom:12px; text-align:center; }
.login-input:focus { border-color:var(--accent); outline:none; }


/* Mobile optimization */
@media (max-width: 380px) {
  #app { padding: 10px; padding-bottom: 90px; }
  .steamer-img { font-size: 70px; }
  .header .title { font-size: 18px; }
  .materials { grid-template-columns: repeat(2, 1fr); }
  .recipe-select { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: 1fr; }
  .stats-row .stat-val { font-size: 16px; }
}

/* Fix button z-index */
.card { position: relative; z-index: 1; }
.btn { position: relative; z-index: 2; }

/* Touch-friendly */
.btn { min-height: 44px; }
.nav-item { min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Prevent nav from eating clicks */
.nav { pointer-events: auto; }
#app { padding-bottom: 80px; }

/* Toast animation */
.toast { animation: toastIn 0.3s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }