* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: #0b0f14; color: #e6f0ff; }

.app { max-width: 1100px; margin: 0 auto; padding: 28px; }
.app-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #00f5a0 0%, #00d9f5 100%); color: #00151f; font-weight: 900; }
.titles h1 { font-size: 20px; font-weight: 800; letter-spacing: 0.5px; }
.titles .subtitle { opacity: 0.7; font-size: 12px; margin-top: 2px; }

.stats { display: flex; gap: 16px; }
.stat { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); padding: 10px 12px; border-radius: 10px; text-align: center; min-width: 84px; }
.stat span { display: block; font-size: 18px; font-weight: 800; color: #7be8ff; }
.stat label { display: block; font-size: 11px; opacity: 0.6; margin-top: 4px; }

.content { display: grid; gap: 18px; }
.arena { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 12px; background: #0f141b; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 16px; }
.side { display: flex; }
.card { flex: 1; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; display: grid; gap: 10px; place-items: center; }
.avatar { width: 110px; height: 110px; border-radius: 16px; background: #081018; border: 1px solid rgba(255,255,255,0.08); background-size: cover; background-position: center; }
.name { font-weight: 700; }
.bar { width: 70%; height: 10px; background: #101822; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09); }
.bar-fill { height: 100%; background: linear-gradient(90deg, #00f5a0, #00d9f5); width: 50%; transition: width 0.4s ease; }
.bar-fill.enemy { background: linear-gradient(90deg, #ff6b6b, #f7b267); }
.vs { display: grid; place-items: center; font-size: 26px; opacity: 0.65; }

.controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.btn { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.1); color: #e6f0ff; padding: 12px 14px; border-radius: 12px; cursor: pointer; font-weight: 700; letter-spacing: 0.2px; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 248, 255, 0.06); }
.btn.attack { background: linear-gradient(135deg, #3c53ff, #00d9f5); }
.btn.hire { background: linear-gradient(135deg, #00f5a0, #00d9f5); color: #031217; }
.btn.upgrade { background: linear-gradient(135deg, #ffd93d, #ff9f1a); color: #1e1203; }
.btn.new { background: linear-gradient(135deg, #f45b69, #ee6c4d); }
.btn.link { background: transparent; border: 1px dashed rgba(255,255,255,0.25); }

.log { background: #0f141b; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; }
.log-title { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); opacity: 0.8; font-weight: 700; }
.log-body { max-height: 170px; overflow: auto; padding: 12px; display: grid; gap: 8px; }
.log-line { font-size: 13px; opacity: 0.9; border-bottom: 1px dashed rgba(255,255,255,0.08); padding-bottom: 6px; }

.collection { background: #0f141b; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; }
.collection-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.tile { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px; display: grid; gap: 8px; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; }
.tile:hover { transform: translateY(-2px); border-color: rgba(0,217,245,0.5); }
.tile.active { border-color: #00d9f5; box-shadow: 0 0 0 2px rgba(0,217,245,0.25) inset; }
.tile .avatar { width: 100%; height: 84px; border-radius: 10px; }
.tile .title { font-size: 13px; font-weight: 700; }
.tile .muted { font-size: 12px; opacity: 0.65; }

.search input { background: #0b1118; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #e6f0ff; padding: 8px 10px; width: 220px; }

.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); z-index: 50; }
.modal-content { background: #0f141b; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; width: min(520px, 92vw); padding: 18px; display: grid; gap: 12px; }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 720px) {
  .arena { grid-template-columns: 1fr; }
  .vs { display: none; }
  .controls { grid-template-columns: repeat(2, 1fr); }
  .stat { min-width: 72px; }
}