* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Courier New', monospace;
}

body {
  background-color: #05070a;
  color: #c9d1d9;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.shanghai-bg {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(5, 7, 10, 0.8), rgba(5, 7, 10, 0.95)),
              url('https://images.unsplash.com/photo-1508873696983-2df515122519?q=80&w=1920&auto=format&fit=crop');
  background-size: cover; background-position: center;
  z-index: -1;
}

.app-layout {
  display: flex;
  gap: 20px;
  max-width: 900px;
  width: 100%;
  flex-wrap: wrap;
}

/* Sidebar Chapters */
.chapters-sidebar {
  flex: 1;
  min-width: 250px;
  background: rgba(18, 23, 31, 0.92);
  border: 1px solid #21262d;
  border-radius: 12px;
  padding: 15px;
}

.chapters-sidebar h3 {
  color: #ffca3a;
  font-size: 1rem;
  margin-bottom: 12px;
  border-bottom: 1px solid #30363d;
  padding-bottom: 6px;
}

.chapters-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chapter-btn {
  background: #161b22;
  border: 1px solid #30363d;
  color: #c9d1d9;
  padding: 10px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chapter-btn.active {
  border-color: #ffca3a;
  background: rgba(255, 202, 58, 0.1);
  color: #ffca3a;
  font-weight: bold;
}

.chapter-btn.locked {
  opacity: 0.6;
}

/* Main Game Container */
.game-container {
  flex: 2;
  min-width: 320px;
  text-align: center;
  background: rgba(18, 23, 31, 0.92);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #21262d;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.9);
}

h1 { color: #ffca3a; margin-bottom: 10px; }

.description {
  font-size: 0.85rem;
  color: #c9d1d9;
  margin-bottom: 15px;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px;
  border-radius: 6px;
  border-left: 3px solid #ffca3a;
  text-align: left;
}

.room-frame {
  width: 90px; height: 120px;
  background: #030507; border: 3px solid #2c3540;
  margin: 10px auto; position: relative; overflow: hidden;
}

.window-light { width: 100%; height: 100%; background: #0a0d12; }
.window-light.active { background: #ffca3a; box-shadow: 0 0 30px #ffca3a; }

.code-box {
  font-size: 1rem; margin: 10px 0; background: rgba(0, 0, 0, 0.3);
  padding: 8px; border-radius: 6px;
}

.user-code { color: #58a6ff; font-weight: bold; letter-spacing: 3px; }
.translated-text { color: #ffca3a; font-weight: bold; }

.touch-controls { display: flex; gap: 8px; margin-bottom: 12px; }
.touch-btn {
  background: #1f6feb; color: white; border: none; padding: 10px;
  font-size: 0.9rem; font-weight: bold; border-radius: 6px; flex: 1; cursor: pointer;
}

.action-controls { display: flex; gap: 6px; justify-content: center; }
.primary-btn { background: #238636; color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: bold; }
.secondary-btn { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; padding: 8px 10px; border-radius: 6px; cursor: pointer; }

.message { margin-top: 10px; font-size: 0.85rem; font-weight: bold; min-height: 18px; }

/* VIP / Payment Modal */
.overlay-screen {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5, 5, 10, 0.92); display: none;
  justify-content: center; align-items: center; z-index: 100; padding: 15px;
}

.vip-modal {
  background: #0b0f19; border: 2px solid #ffd700; border-radius: 12px;
  padding: 20px; max-width: 380px; width: 100%; text-align: center;
}

.vip-modal h2 { color: #ffd700; margin-bottom: 8px; font-size: 1.1rem; }
.vip-subtext { font-size: 0.75rem; color: #cbd5e1; margin-bottom: 12px; }

.action-btn {
  padding: 10px; border: none; font-size: 0.85rem; cursor: pointer;
  font-weight: bold; border-radius: 6px; width: 100%; margin-top: 6px;
}
.gold-btn { background: #ffd700; color: #000; box-shadow: 0 0 10px #ffd700; }
.ad-btn { background: #388bfd; color: #fff; }

.divider { margin: 10px 0; color: #64748b; font-size: 0.65rem; }

.manual-pay-btn {
  background: #1e293b; color: #38bdf8; border: 1px solid #38bdf8;
  padding: 6px; border-radius: 6px; width: 100%; font-size: 0.75rem; font-weight: bold;
}

.manual-pay-container {
  margin-top: 8px; background: #050811; padding: 8px; border-radius: 8px;
  border: 1px solid #334155; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.manual-pay-container.hidden { display: none; }

.network-badge { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid #f59e0b; padding: 2px 6px; border-radius: 8px; font-size: 0.65rem; }
.qr-wrapper img { width: 110px; height: 110px; background: #fff; padding: 3px; border-radius: 4px; }

.address-box { width: 100%; text-align: left; }
.address-box label { font-size: 0.6rem; color: #94a3b8; }
.copy-input-group { display: flex; gap: 4px; margin-top: 2px; }
.copy-input-group input { flex: 1; background: #1e293b; border: 1px solid #475569; color: #fff; padding: 4px; border-radius: 4px; font-size: 0.6rem; }
.copy-input-group button { background: #38bdf8; border: none; padding: 4px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: bold; }

.copy-success { display: none; color: #22c55e; font-size: 0.6rem; }
.close-btn { background: transparent; border: none; color: #64748b; margin-top: 10px; font-size: 0.7rem; cursor: pointer; }
.payment-status { margin-top: 6px; font-size: 0.7rem; color: #00fff5; }